/* Font Awesome 7 gives every icon a fixed 1.25em width; version 5, which these pages were
   built with, used each glyph's own width. Fixed-width icons stop stretching inside flex
   columns (cards), so a centred icon slid to the left edge. Back to natural width; .fa-fw
   still opts an icon into the fixed width where a column of icons should line up. */
:root {
	--fa-width: auto;
}

/* ==========================================================================
   Sparkx storefront design system
   Modern, Tailwind-inspired token layer applied on top of Bootstrap 5.
   Components keep Bootstrap markup/JS; this sheet restyles them globally.
   ========================================================================== */

*.icon-white {color:white}
*.icon-silver {color:silver}
*.icon-green {color: green;}
*.icon-dark {color: gray;}

:root {
	/* Brand */
	--sparkx-primary: #2563eb;
	--sparkx-primary-dark: #1d4ed8;
	--sparkx-primary-soft: #eff6ff;
	--sparkx-accent-soft: #e8f0ff;

	/* Semantic soft colors */
	--sparkx-success: #16a34a;
	--sparkx-success-soft: #ecfdf5;
	--sparkx-danger: #dc2626;
	--sparkx-danger-soft: #fef2f2;
	--sparkx-warning: #b45309;
	--sparkx-warning-soft: #fffbeb;
	--sparkx-info: #0369a1;
	--sparkx-info-soft: #f0f9ff;

	/* Neutrals (slate) */
	--sparkx-text: #0f172a;
	--sparkx-text-2: #334155;
	--sparkx-muted: #64748b;
	--sparkx-surface: #ffffff;
	--sparkx-surface-alt: #f6f8fb;
	--sparkx-border: #e2e8f0;
	--sparkx-border-strong: #cbd5e1;

	/* Radii */
	--sparkx-radius-sm: 0.5rem;
	--sparkx-radius: 0.75rem;
	--sparkx-radius-lg: 1rem;
	--sparkx-radius-xl: 1.25rem;
	--sparkx-radius-pill: 999px;

	/* Shadows */
	--sparkx-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
	--sparkx-shadow-sm: 0 0.125rem 0.5rem rgba(15, 23, 42, 0.07);
	--sparkx-shadow-md: 0 0.5rem 1.25rem rgba(15, 23, 42, 0.12);
	--sparkx-shadow-lg: 0 1rem 2.5rem rgba(15, 23, 42, 0.16);

	--sparkx-focus-ring: 0 0 0 0.2rem rgba(37, 99, 235, 0.18);
	--sparkx-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
		'Helvetica Neue', Arial, sans-serif;

	/* Map Bootstrap's own variables onto the design tokens */
	--bs-body-font-family: var(--sparkx-font);
	--bs-body-color: var(--sparkx-text);
	--bs-body-bg: var(--sparkx-surface-alt);
	--bs-border-color: var(--sparkx-border);
	--bs-primary: var(--sparkx-primary);
	--bs-primary-rgb: 37, 99, 235;
	--bs-link-color: var(--sparkx-primary);
	--bs-link-hover-color: var(--sparkx-primary-dark);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
	background-color: var(--sparkx-surface-alt);
	color: var(--sparkx-text);
	font-family: var(--sparkx-font);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, .display-6 {
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--sparkx-text);
}

/* A heading on a coloured bar ("card-header bg-primary text-white" on login, sign-up, account and
   the address form) takes the bar's white; the rule above painted it dark on blue. */
.text-white :is(h1, h2, h3, h4, h5, .display-6) {
	color: inherit;
}

.text-muted {
	color: var(--sparkx-muted) !important;
}

/* Section heading with accent bar (homepage & listing sections) */
.section-title {
	position: relative;
	display: inline-block;
	font-weight: 700;
	letter-spacing: -0.02em;
	padding-bottom: 0.4rem;
	margin-bottom: 0.25rem;
}

.section-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.75rem;
	height: 0.25rem;
	border-radius: var(--sparkx-radius-pill);
	background: linear-gradient(90deg, var(--sparkx-primary), #60a5fa);
}

.section-subtitle {
	color: var(--sparkx-muted);
	font-size: 0.95rem;
	font-weight: 400;
}

/* --------------------------------------------------------------------------
   Bootstrap component restyle (global consistency)
   -------------------------------------------------------------------------- */

.btn {
	border-radius: var(--sparkx-radius-sm);
	font-weight: 500;
	transition: background-color 0.15s ease, border-color 0.15s ease,
		box-shadow 0.15s ease, transform 0.1s ease;
}

.btn:focus-visible {
	box-shadow: var(--sparkx-focus-ring);
}

.btn:active {
	transform: translateY(1px);
}

.btn-primary {
	--bs-btn-bg: var(--sparkx-primary);
	--bs-btn-border-color: var(--sparkx-primary);
	--bs-btn-hover-bg: var(--sparkx-primary-dark);
	--bs-btn-hover-border-color: var(--sparkx-primary-dark);
	--bs-btn-active-bg: var(--sparkx-primary-dark);
	--bs-btn-active-border-color: var(--sparkx-primary-dark);
	box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25);
}

.btn-outline-primary {
	--bs-btn-color: var(--sparkx-primary);
	--bs-btn-border-color: var(--sparkx-border-strong);
	--bs-btn-hover-bg: var(--sparkx-primary-soft);
	--bs-btn-hover-color: var(--sparkx-primary-dark);
	--bs-btn-hover-border-color: var(--sparkx-primary);
	--bs-btn-active-bg: var(--sparkx-primary-soft);
	--bs-btn-active-color: var(--sparkx-primary-dark);
	--bs-btn-active-border-color: var(--sparkx-primary);
}

.card {
	border: 1px solid var(--sparkx-border);
	border-radius: var(--sparkx-radius);
	background-color: var(--sparkx-surface);
}

.card .card-header {
	border-top-left-radius: calc(var(--sparkx-radius) - 1px);
	border-top-right-radius: calc(var(--sparkx-radius) - 1px);
}

.badge {
	font-weight: 600;
	letter-spacing: 0.01em;
	border-radius: var(--sparkx-radius-pill);
	padding: 0.4em 0.75em;
}

/* Soft badges — modern replacement for solid bg-* badges */
.badge-soft-primary {
	background-color: var(--sparkx-primary-soft);
	color: var(--sparkx-primary-dark);
	border: 1px solid #bfdbfe;
}

.badge-soft-success {
	background-color: var(--sparkx-success-soft);
	color: var(--sparkx-success);
	border: 1px solid #bbf7d0;
}

.badge-soft-danger {
	background-color: var(--sparkx-danger-soft);
	color: var(--sparkx-danger);
	border: 1px solid #fecaca;
}

.badge-soft-warning {
	background-color: var(--sparkx-warning-soft);
	color: var(--sparkx-warning);
	border: 1px solid #fde68a;
}

.badge-soft-info {
	background-color: var(--sparkx-info-soft);
	color: var(--sparkx-info);
	border: 1px solid #bae6fd;
}

.badge-soft-neutral {
	background-color: #f1f5f9;
	color: var(--sparkx-text-2);
	border: 1px solid var(--sparkx-border);
}

.form-control,
.form-select {
	border-radius: var(--sparkx-radius-sm);
	border-color: var(--sparkx-border-strong);
	color: var(--sparkx-text);
}

.form-control:focus,
.form-select:focus {
	border-color: #93c5fd;
	box-shadow: var(--sparkx-focus-ring);
}

.modal-content {
	border: none;
	border-radius: var(--sparkx-radius-lg);
	box-shadow: var(--sparkx-shadow-lg);
}

.modal-header {
	border-bottom: 1px solid var(--sparkx-border);
}

.modal-footer {
	border-top: 1px solid var(--sparkx-border);
}

.alert {
	border: 1px solid transparent;
	border-radius: var(--sparkx-radius);
}

.alert-warning {
	background-color: var(--sparkx-warning-soft);
	border-color: #fde68a;
	color: var(--sparkx-warning);
}

.alert-info {
	background-color: var(--sparkx-info-soft);
	border-color: #bae6fd;
	color: var(--sparkx-info);
}

.alert-success {
	background-color: var(--sparkx-success-soft);
	border-color: #bbf7d0;
	color: var(--sparkx-success);
}

.pagination {
	--bs-pagination-border-radius: var(--sparkx-radius-sm);
	gap: 0.25rem;
}

.pagination .page-link {
	border-radius: var(--sparkx-radius-sm);
	border-color: var(--sparkx-border);
	color: var(--sparkx-text-2);
	font-weight: 500;
}

.pagination .page-item.active .page-link {
	background-color: var(--sparkx-primary);
	border-color: var(--sparkx-primary);
	/* The rule above sets every page link's colour, this one's too: the current page read
	   slate on blue (about 2.5:1) until it was given its own. */
	color: #fff;
}

.pagination .page-link:focus {
	box-shadow: var(--sparkx-focus-ring);
}

/* One row on a phone: Previous, 1, the pages either side of this one, the last page, Next. */
.pagination-compact {
	flex-wrap: nowrap;
	margin-bottom: 0.5rem;
}

.pagination-compact .page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: 0.25rem 0.6rem;
}

.pagination-compact .page-gap {
	border-color: transparent;
	background: transparent;
	min-width: 1.5rem;
	padding: 0;
}

.dropdown-menu {
	border: 1px solid var(--sparkx-border);
	border-radius: var(--sparkx-radius);
	box-shadow: var(--sparkx-shadow-md);
}

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */

.app-navbar {
	border-bottom: 1px solid var(--sparkx-border);
	position: sticky;
	top: 0;
	z-index: 1030;
}

/* The frosted glass lives on a pseudo-element, not on the navbar itself. backdrop-filter on an
   element makes it the containing block for every position:fixed descendant, and the phone
   menu drawer is one: it came out as tall as the header (66px) instead of the screen. The
   pseudo-element is not the drawer's ancestor, so it blurs the same way without trapping it. */
.app-navbar::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	pointer-events: none;
}

.app-navbar .nav-link {
	font-weight: 500;
	color: var(--sparkx-text-2);
	border-radius: var(--sparkx-radius-sm);
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	transition: color 0.15s ease, background-color 0.15s ease;
}

.app-navbar .nav-link:hover,
.app-navbar .nav-link:focus {
	color: var(--sparkx-primary);
	background-color: var(--sparkx-primary-soft);
}

.app-logo {
	height: 3rem;
	/* width:auto keeps the rendered width driven by the height and the image's own ratio;
	   the width/height attributes on the tag then only reserve layout space (no jump on load). */
	width: auto;
	max-width: 10rem;
	object-fit: contain;
}

/* Live cart item-count badge (htmx-driven). Hidden when the server returns "". */
.cart-count-badge {
	position: absolute;
	top: 0.05rem;
	right: -0.15rem;
	min-width: 1.15rem;
	padding: 0.2em 0.4em;
	font-size: 0.62rem;
	font-weight: 700;
	line-height: 1;
	background-color: var(--sparkx-danger);
	color: #fff;
	box-shadow: 0 0 0 2px var(--sparkx-surface);
}

.cart-count-badge:empty {
	display: none;
}

/* Little pop when htmx swaps in a new count (after add/update/remove). */
.cart-count-badge.htmx-settling {
	animation: cart-badge-pop 0.32s ease;
}

@keyframes cart-badge-pop {
	0% { transform: scale(1); }
	45% { transform: scale(1.4); }
	100% { transform: scale(1); }
}

/* Search shell under the navbar */
.search-nav-shell {
	background: var(--sparkx-surface);
	border: 1px solid var(--sparkx-border);
	border-radius: var(--sparkx-radius-lg);
	padding: 1.75rem 1.75rem;
	box-shadow: var(--sparkx-shadow-xs);
}

/* Segmented Shopping / Minutes switcher */
.view-switch {
	display: inline-flex;
	background: #eef2f7;
	border: 1px solid var(--sparkx-border);
	border-radius: var(--sparkx-radius-pill);
	padding: 0.3rem;
	gap: 0.25rem;
}

.view-switch-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.55rem 1.4rem;
	border-radius: var(--sparkx-radius-pill);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--sparkx-text-2);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
	white-space: nowrap;
}

.view-switch-btn:hover,
.view-switch-btn:focus {
	color: var(--sparkx-primary-dark);
}

.view-switch-btn.active {
	background: var(--sparkx-surface);
	color: var(--sparkx-primary-dark);
	box-shadow: var(--sparkx-shadow-sm);
}

.view-switch-btn .view-switch-sub {
	display: block;
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--sparkx-muted);
}

/* Phones: the segmented switch must fit inside the search-nav card. Fill the width,
   split it evenly between the two buttons, and drop the long descriptive sub-labels
   so the pills stop spilling outside the box. */
@media (max-width: 575.98px) {
	.view-switch {
		display: flex;
		width: 100%;
		max-width: 100%;
	}
	.view-switch-btn {
		flex: 1 1 0;
		min-width: 0;
		justify-content: center;
		padding: 0.5rem 0.5rem;
		font-size: 0.9rem;
		gap: 0.4rem;
	}
	.view-switch-btn .view-switch-sub {
		display: none;
	}
}

/* Search form */
.search-nav-form {
	position: relative;
	border-radius: var(--sparkx-radius-pill);
}

.search-nav-form.minutes-search-active {
	border: none;
	box-shadow: none;
	padding: 0;
}

.app-search-input {
	height: 3rem;
	border: 1px solid var(--sparkx-border-strong);
	border-radius: var(--sparkx-radius-pill) 0 0 var(--sparkx-radius-pill);
	padding-left: 1.25rem;
}

.app-search-input:focus {
	border-color: #93c5fd;
	box-shadow: var(--sparkx-focus-ring);
}

/* The field and its inline clear share one flex cell so the × can sit inside the
   input's right edge regardless of how wide the buttons beside it are. */
.search-input-wrap {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	/* Bootstrap gives `.input-group > .form-control` a 1% basis so it can shrink below
	   the input's intrinsic size. The wrapper has to carry that too, or `.input-group`
	   (which wraps by default) drops the buttons onto a second row on narrow phones. */
	width: 1%;
	min-width: 0;
}

.search-input-wrap .app-search-input {
	width: 100%;
	/* Room for the magnifier on the left and the sparkle on the right, so typed text never
	   runs under either. The field is the whole bar now, so it is rounded at both ends. */
	padding-left: 3rem;
	padding-right: 3rem;
	border-radius: var(--sparkx-radius-pill);
}

/* With text, the clear (x) sits beside the sparkle and needs its own room too. */
.search-input-wrap:has(.search-clear-inline:not(.d-none)) .app-search-input {
	padding-right: 5.5rem;
}

/* The magnifier (submit) and Ask NityaShop's sparkle, inside the field's two ends. */
.search-icon-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	line-height: 1;
}

.search-icon-btn:hover,
.search-icon-btn:focus-visible {
	background-color: var(--sparkx-primary-soft);
}

.search-submit {
	left: 0.35rem;
	color: var(--sparkx-primary);
	font-size: 1.05rem;
}

.search-ask {
	right: 0.35rem;
	font-size: 1.15rem;
}

/* WebKit draws its own search cancel button; ours replaces it. */
.app-search-input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.search-clear-inline {
	position: absolute;
	top: 50%;
	right: 2.9rem; /* just left of the sparkle */
	transform: translateY(-50%);
	z-index: 4;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--sparkx-muted);
	font-size: 0.85rem;
	line-height: 1;
}

.search-clear-inline:hover,
.search-clear-inline:focus {
	background-color: #e2e8f0;
	color: var(--sparkx-text-2);
}

/* Mobile full-screen search takeover (toggled by mobile_search.js). Hidden by
   default; only the phone breakpoint promotes the search area to full-screen. */
.mobile-search-back {
	display: none;
	border: none;
	background: transparent;
}

@media (max-width: 767.98px) {
	body.search-expanded {
		overflow: hidden;
	}

	/* Promote the search column to a fixed, full-screen panel above everything. */
	body.search-expanded #searchNavbar {
		position: fixed;
		inset: 0;
		z-index: 1080;
		background: var(--sparkx-surface);
		padding: 0.6rem 0.75rem;
		display: flex;
		align-items: flex-start;
		gap: 0.35rem;
		box-shadow: var(--sparkx-shadow-md);
	}

	body.search-expanded .mobile-search-back {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 auto;
		width: 2.5rem;
		height: 3rem;
		color: var(--sparkx-text-2);
		font-size: 1.15rem;
	}

	body.search-expanded #globalSearchForm {
		flex: 1 1 auto;
		margin: 0;
	}

	body.search-expanded .app-search-input {
		height: 3rem;
		font-size: 16px;
	}

	/* Suggestions become a full-width, full-height scrollable list under the input. */
	body.search-expanded .search-suggest-box {
		position: fixed;
		top: 3.85rem;
		left: 0;
		right: 0;
		bottom: 0;
		max-height: none;
		border: none;
		border-top: 1px solid var(--sparkx-border);
		border-radius: 0;
		box-shadow: none;
		padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom, 0px));
	}

	body.search-expanded .search-suggest-item {
		padding: 0.75rem;
		font-size: 1rem;
	}
}

/* Search-as-you-type dropdown (anchored to the relative .search-nav-form) */
.search-suggest-box {
	position: absolute;
	top: calc(100% + 0.4rem);
	left: 0;
	right: 0;
	z-index: 1050;
	background: var(--sparkx-surface);
	border: 1px solid var(--sparkx-border);
	border-radius: var(--sparkx-radius);
	box-shadow: var(--sparkx-shadow-md);
	max-height: 24rem;
	overflow-y: auto;
	padding: 0.35rem;
}

.search-suggest-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0.75rem;
	border-radius: var(--sparkx-radius-sm);
	text-decoration: none;
	color: var(--sparkx-text);
	font-size: 0.95rem;
}

.search-suggest-item:hover,
.search-suggest-item.active {
	background-color: var(--sparkx-primary-soft);
	color: var(--sparkx-primary-dark);
}

.search-suggest-img {
	width: 2.25rem;
	height: 2.25rem;
	object-fit: contain;
	flex-shrink: 0;
	background: #fff;
	border: 1px solid var(--sparkx-border);
	border-radius: var(--sparkx-radius-sm);
	padding: 0.15rem;
}

.search-suggest-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Footer */
.footer-nav {
	background: var(--sparkx-surface);
	border-top: 1px solid var(--sparkx-border);
}

.footer-nav .nav-link {
	font-weight: 500;
	color: var(--sparkx-text-2);
}

.footer-nav .nav-link:hover,
.footer-nav .nav-link:focus {
	color: var(--sparkx-primary);
}

.app-footer-note {
	color: var(--sparkx-muted);
	font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Product cards (listing, homepage sections, shop page)
   -------------------------------------------------------------------------- */

.product-card {
	border: 1px solid var(--sparkx-border);
	border-radius: var(--sparkx-radius);
	overflow: hidden;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.product-card:hover {
	transform: translateY(-0.25rem);
	border-color: #bfdbfe;
	box-shadow: var(--sparkx-shadow-md);
}

.product-card-media {
	position: relative;
	min-height: 14rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--sparkx-surface);
}

/* The positioning box for the flags at the picture's bottom corners (Minutes, stock). Its own
   box so the flags follow the picture, not the name under it; the min-height keeps room for
   both flags on a card whose image is missing or short. */
.product-card-imgbox {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 7rem;
}

.product-card-image {
	max-height: 12.5rem;
	object-fit: contain;
	transition: transform 0.25s ease;
}

/* The product page's thumbnail strip carried only a height="60" attribute and no CSS, so each
   thumbnail's width depended on its own aspect ratio: the row reserved no horizontal space and
   shuffled as the images arrived. A fixed box reserves it whatever shape the photo is, and
   object-fit keeps the picture undistorted. */
.image-thumbnail {
	width: 60px;
	height: 60px;
	object-fit: contain;
}

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

/* The media is a centered flex column; without a width bound a long, nowrap name
   grows past the card and — being centered inside .product-card's overflow:hidden —
   gets clipped on BOTH sides. Force the link (and its text) to the card width so the
   name wraps/clamps within it instead. */
.product-card-media > a {
	display: block;
	width: 100%;
	min-width: 0;
}

.product-name {
	font-size: 1rem;
	font-weight: 600;
	min-height: 2.5rem;
	color: var(--sparkx-text);
	max-width: 100%;
	/* Show the full (server-capped ~70-char) name — wrap to as many lines as it
	   needs within the card width; the width bound on .product-card-media > a keeps
	   it from clipping at the edges, and rail/grid cards stretch to equal height. */
	overflow-wrap: anywhere;
	word-break: break-word;
}

.discount-flag {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 2;
	background: var(--sparkx-danger);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	padding: 0.3rem 0.6rem;
	border-radius: var(--sparkx-radius-pill);
	box-shadow: var(--sparkx-shadow-xs);
}

/* --------------------------------------------------------------------------
   Page shells & heroes
   -------------------------------------------------------------------------- */

.page-hero {
	background: linear-gradient(135deg, var(--sparkx-primary-soft) 0%, #ffffff 65%);
	border: 1px solid var(--sparkx-border);
	border-radius: var(--sparkx-radius-lg);
	padding: 1.75rem 1.5rem;
}

.page-hero h2 {
	margin-bottom: 0.35rem;
}

.filter-card {
	background: var(--sparkx-surface);
	border: 1px solid var(--sparkx-border);
	border-radius: var(--sparkx-radius-lg);
	padding: 1.25rem;
	box-shadow: var(--sparkx-shadow-xs);
}

/* Chip group (status filters etc.) */
.chip-group {
	display: inline-flex;
	background: #eef2f7;
	border: 1px solid var(--sparkx-border);
	border-radius: var(--sparkx-radius-pill);
	padding: 0.25rem;
	gap: 0.25rem;
}

.chip {
	border: none;
	background: transparent;
	padding: 0.4rem 1.1rem;
	border-radius: var(--sparkx-radius-pill);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sparkx-text-2);
	transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.chip:hover {
	color: var(--sparkx-primary-dark);
}

.chip.active {
	background: var(--sparkx-surface);
	box-shadow: var(--sparkx-shadow-sm);
	color: var(--sparkx-primary-dark);
}

.chip.chip-success.active {
	color: var(--sparkx-success);
}

.chip.chip-danger.active {
	color: var(--sparkx-danger);
}

/* --------------------------------------------------------------------------
   Checkout / cart
   -------------------------------------------------------------------------- */

.checkout-shell {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 0.75rem;
}

.checkout-title {
	font-weight: 700;
	letter-spacing: -0.02em;
}

.checkout-card {
	border: 1px solid var(--sparkx-border);
	border-radius: var(--sparkx-radius);
	box-shadow: var(--sparkx-shadow-xs);
}

.checkout-card .card-header {
	background-color: var(--sparkx-primary-soft);
	border-bottom: 1px solid var(--sparkx-border);
	font-weight: 600;
}

.checkout-order-table {
	width: 100%;
	font-size: 0.95rem;
	border-collapse: separate;
	border-spacing: 0 0.5rem;
}

.checkout-order-table td {
	vertical-align: top;
}

.checkout-total-row {
	font-size: 0.98rem;
	padding-top: 0.35rem;
	padding-bottom: 0.35rem;
}

.checkout-pay-btn {
	min-height: 2.9rem;
	font-weight: 600;
}

.cart-summary-sticky {
	top: 1rem;
	z-index: 100;
}

.cart-item-card {
	border-radius: var(--sparkx-radius);
	border: 1px solid var(--sparkx-border);
}

.cart-item-image {
	max-height: 5rem;
	object-fit: contain;
}

.cart-empty-icon {
	font-size: 3.5rem;
	color: #94a3b8;
}

/* --------------------------------------------------------------------------
   Minutes / shop cards
   -------------------------------------------------------------------------- */

.minutes-shop-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	position: relative;
	border-radius: var(--sparkx-radius-lg);
	border: 1px solid var(--sparkx-border);
	overflow: hidden;
}

.minutes-shop-card:hover {
	transform: translateY(-0.25rem);
	border-color: #bfdbfe;
	box-shadow: var(--sparkx-shadow-md);
}

.minutes-shop-card.shop-closed {
	opacity: 0.8;
	background-color: #f8fafc;
	filter: grayscale(0.35);
}

.minutes-shop-card.shop-closed:hover {
	transform: none;
	box-shadow: var(--sparkx-shadow-sm);
}

.minutes-shop-ribbon {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
}

.shop-logo {
	width: 4.5rem;
	height: 4.5rem;
	object-fit: contain;
	border-radius: var(--sparkx-radius) !important;
	box-shadow: var(--sparkx-shadow-xs);
}

.shop-meta {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--sparkx-muted);
	font-size: 0.85rem;
}

.shop-meta i {
	width: 1rem;
	text-align: center;
	color: #94a3b8;
}

.shop-header-card {
	position: relative;
	border-radius: var(--sparkx-radius-lg);
	border: 1px solid var(--sparkx-border);
	background: linear-gradient(135deg, var(--sparkx-primary-soft) 0%, #ffffff 55%);
}

.shop-header-card.shop-closed {
	opacity: 0.85;
	background: #f8fafc;
}

.shop-header-ribbon {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
}

.shop-logo-lg {
	width: 6.25rem;
	height: 6.25rem;
	object-fit: contain;
	border-radius: var(--sparkx-radius) !important;
	box-shadow: var(--sparkx-shadow-xs);
}

/* --------------------------------------------------------------------------
   Product detail
   -------------------------------------------------------------------------- */

.product-detail-shell {
	max-width: 1200px;
	margin: 1rem auto;
	padding: 0 0.75rem;
}

.product-image-container {
	position: relative;
	overflow: hidden;
	border-radius: var(--sparkx-radius);
	border: 1px solid var(--sparkx-border);
	box-shadow: var(--sparkx-shadow-xs);
	cursor: zoom-in;
	height: 30rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fff;
}

.product-image-container img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	transition: transform 0.3s ease;
	display: block;
	object-fit: contain;
}

.product-image-container:hover img {
	transform: scale(1.2);
}

.thumbnail-container {
	cursor: pointer;
	transition: all 0.2s;
	border: 0.125rem solid transparent;
	border-radius: var(--sparkx-radius-sm);
}

.thumbnail-container:hover,
.thumbnail-container.active {
	border-color: var(--sparkx-primary);
	transform: translateY(-0.125rem);
}

.product-detail-price {
	font-size: 1.5rem;
	font-weight: 700;
}

.product-detail-discount {
	color: var(--sparkx-danger);
	font-weight: 700;
}

.product-buy-card {
	border: 1px solid var(--sparkx-border);
	border-radius: var(--sparkx-radius);
	box-shadow: var(--sparkx-shadow-xs);
}

/* Keep the buy card in view while the shopper scrolls the description/specs.
   Only on lg+ where there's a side column; on mobile it stacks normally. */
@media (min-width: 992px) {
	.product-buy-card {
		position: sticky;
		top: 1rem;
	}
}

/* --------------------------------------------------------------------------
   Product image lightbox (the #carouselModal opened from the gallery)
   -------------------------------------------------------------------------- */

.product-lightbox .modal-content {
	background: #0b0b0f;
	border-radius: var(--sparkx-radius-lg);
	overflow: hidden;
}

/* Constant-size stage: every slide is the same height, so switching between
   images of different dimensions never resizes / jumps the modal. */
.product-lightbox .lightbox-stage {
	height: 82vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
}

.product-lightbox .lightbox-img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: var(--sparkx-radius-sm);
}

/* Floating close button (overlay, top-right) instead of a header bar. */
.product-lightbox .lightbox-close {
	position: absolute;
	top: 0.85rem;
	right: 0.85rem;
	z-index: 6;
	padding: 0.65rem;
	background-color: rgba(0, 0, 0, 0.45);
	border-radius: 50%;
	opacity: 0.9;
}

.product-lightbox .lightbox-close:hover {
	opacity: 1;
}

/* Bootstrap's control/indicator hit areas, nudged a touch larger and clearer. */
.product-lightbox .carousel-control-prev,
.product-lightbox .carousel-control-next {
	width: 12%;
}

.product-lightbox .carousel-control-prev-icon,
.product-lightbox .carousel-control-next-icon {
	width: 2.25rem;
	height: 2.25rem;
	background-color: rgba(0, 0, 0, 0.4);
	border-radius: 50%;
	background-size: 55% 55%;
}

.product-lightbox .carousel-indicators {
	z-index: 6;
	margin-bottom: 0.75rem;
}

@media (max-width: 575.98px) {
	.product-lightbox .lightbox-stage {
		height: 70vh;
		padding: 0.75rem;
	}
}

/* --------------------------------------------------------------------------
   Category cards
   -------------------------------------------------------------------------- */

.category-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	border-radius: var(--sparkx-radius);
	border: 1px solid var(--sparkx-border);
}

.category-card:hover {
	transform: translateY(-0.25rem);
	border-color: #bfdbfe;
	box-shadow: var(--sparkx-shadow-sm);
}

.category-thumb {
	max-height: 5rem;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   Status / result pages
   -------------------------------------------------------------------------- */

.order-complete-card {
	max-width: 760px;
	margin: 1rem auto;
	padding: 2rem 1.5rem;
	border: 1px solid #bfdbfe;
	border-radius: var(--sparkx-radius-lg);
	background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
	box-shadow: var(--sparkx-shadow-xs);
}

.status-page-shell {
	max-width: 860px;
	margin: 1rem auto;
	padding: 0 0.75rem;
}

.status-card {
	padding: 2rem 1.5rem;
	border-radius: var(--sparkx-radius-lg);
	border: 1px solid var(--sparkx-border);
	background: #fff;
	box-shadow: var(--sparkx-shadow-xs);
	text-align: center;
}

.status-card .status-icon {
	font-size: 2.75rem;
	margin-bottom: 0.75rem;
}

.status-card .status-title {
	font-size: 1.9rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.status-card .status-subtitle {
	font-size: 1.05rem;
	color: var(--sparkx-muted);
	margin-bottom: 1rem;
}

.status-card.status-error {
	border-color: #fecaca;
	background: linear-gradient(180deg, #ffffff 0%, #fff5f5 100%);
}

.status-card.status-error .status-icon {
	color: var(--sparkx-danger);
}

.status-card.status-success {
	border-color: #bbf7d0;
	background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
}

.status-card.status-success .status-icon {
	color: var(--sparkx-success);
}

.status-card.status-info {
	border-color: #bfdbfe;
	background: linear-gradient(180deg, #ffffff 0%, #eff6ff 100%);
}

.status-card.status-info .status-icon {
	color: var(--sparkx-primary);
}

/* --------------------------------------------------------------------------
   Homepage product rails (horizontally scrollable section rows)
   -------------------------------------------------------------------------- */

.product-rail {
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
	/* A horizontal scroller clips vertically too, so a card lifting on hover lost its top
	   edge. Room above for the largest lift (0.35rem). */
	padding-top: 0.5rem;
	padding-bottom: 0.75rem;
	scrollbar-width: thin;
	scrollbar-color: var(--sparkx-border) transparent;
}

.product-rail::-webkit-scrollbar {
	height: 6px;
}

.product-rail::-webkit-scrollbar-thumb {
	background: var(--sparkx-border);
	border-radius: var(--sparkx-radius-pill);
}

.product-rail::-webkit-scrollbar-track {
	background: transparent;
}

.product-rail > [class*="col-"] {
	flex: 0 0 auto;
	width: 11.5rem;
	scroll-snap-align: start;
}

.product-rail .product-card-media {
	min-height: 10.5rem;
}

.product-rail .product-card-image {
	max-height: 9rem;
}

.product-rail .product-name {
	font-size: 0.9rem;
}

@media (min-width: 768px) {
	.product-rail > [class*="col-"] {
		width: 14rem;
	}

	.product-rail .product-card-media {
		min-height: 12rem;
	}

	.product-rail .product-card-image {
		max-height: 10.5rem;
	}
}

/* --------------------------------------------------------------------------
   Account dropdown (header navbar)
   -------------------------------------------------------------------------- */

.account-dropdown {
	border: 1px solid var(--sparkx-border);
	border-radius: var(--sparkx-radius);
	box-shadow: var(--sparkx-shadow-md);
	min-width: 13rem;
	padding: 0.5rem 0;
}

.account-dropdown .dropdown-item {
	padding: 0.5rem 1rem;
	font-size: 0.925rem;
}

.account-dropdown .dropdown-item i {
	width: 1.4rem;
	text-align: center;
	margin-right: 0.4rem;
	color: var(--sparkx-muted);
}

.account-dropdown .dropdown-item:hover i {
	color: var(--sparkx-primary);
}

/* --------------------------------------------------------------------------
   Minutes shop-card product previews
   -------------------------------------------------------------------------- */

.shop-preview-thumb {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	padding: 0.25rem;
	background: #fff;
	border: 1px solid var(--sparkx-border);
	border-radius: var(--sparkx-radius);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.shop-preview-thumb:hover {
	border-color: #bfdbfe;
	box-shadow: var(--sparkx-shadow-sm);
}

.shop-preview-thumb img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* --------------------------------------------------------------------------
   Wishlist heart (product cards + detail page)
   -------------------------------------------------------------------------- */

/* On a product card: floating circular button, top-right of the media area. */
.product-card-media .wishlist-toggle {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 2;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--sparkx-border);
	background: #fff;
	color: var(--sparkx-muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.product-card-media .wishlist-toggle:hover {
	color: var(--sparkx-danger);
	border-color: #fecaca;
	box-shadow: var(--sparkx-shadow-sm);
}

.wishlist-toggle.is-wishlisted {
	color: var(--sparkx-danger);
	border-color: #fecaca;
}

.wishlist-toggle:disabled {
	opacity: 0.6;
	cursor: default;
}

/* On the detail page it's a normal outline button (class="btn ... wishlist-toggle"). */
.btn.wishlist-toggle.is-wishlisted {
	color: var(--sparkx-danger);
	border-color: var(--sparkx-danger);
}

/* --------------------------------------------------------------------------
   SparkCoins
   -------------------------------------------------------------------------- */

.coin-balance {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 2rem;
	font-weight: 700;
	color: var(--sparkx-text);
}

.coin-balance i {
	color: #f59e0b;
}

.coin-earn-hint {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: #b45309;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: var(--sparkx-radius-pill);
	padding: 0.25rem 0.75rem;
}

.coin-earn-hint i {
	color: #f59e0b;
}

/* --------------------------------------------------------------------------
   Account hub quick links (account details page)
   -------------------------------------------------------------------------- */

.account-quick-links .quick-link-card {
	border: 1px solid var(--sparkx-border);
	border-radius: var(--sparkx-radius);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	height: 100%;
}

.account-quick-links .quick-link-card:hover {
	transform: translateY(-0.2rem);
	border-color: #bfdbfe;
	box-shadow: var(--sparkx-shadow-sm);
}

.account-quick-links .quick-link-card i {
	font-size: 1.35rem;
	color: var(--sparkx-primary);
}

/* --------------------------------------------------------------------------
   Trust strip (homepage USP bar)
   -------------------------------------------------------------------------- */

.trust-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	background: var(--sparkx-surface);
	border: 1px solid var(--sparkx-border);
	border-radius: var(--sparkx-radius);
	padding: 1rem 1.25rem;
}

.trust-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

.trust-item i {
	flex: 0 0 auto;
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #eff6ff;
	color: var(--sparkx-primary);
	font-size: 1.1rem;
}

.trust-item strong {
	display: block;
	font-size: 0.9rem;
	line-height: 1.2;
}

.trust-item small {
	color: var(--sparkx-muted);
}

@media (max-width: 767.98px) {
	.trust-strip {
		grid-template-columns: 1fr 1fr;
		gap: 0.75rem;
		padding: 0.75rem;
	}

	.trust-item small {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Responsive helpers (legacy)
   -------------------------------------------------------------------------- */

@media screen and (max-width:539px){
	/* small screen */
	div.full-details {display: none;}
	div.less-details {display:block;}
	.hideable-column {display: none;}
	/* On a phone the search sits on the page, not in a padded card: the card's padding and
	   margin left the field 338 of 412 pixels. */
	.search-nav-shell {
		padding: 0.25rem 0 0.5rem;
		margin-left: 0 !important;
		margin-right: 0 !important;
		border: 0;
		box-shadow: none;
		background: transparent;
	}
	.app-logo {height: 2.5rem;}
	.product-card-media {min-height: 12rem;}
	.product-image-container {height: 20rem;}
	.page-hero {padding: 1.25rem 1rem;}
}

@media screen and (min-width:540px) and (max-width:1024px){
	/* medium screen */
	div.full-details {display: block;}
	div.less-details {display: none;}
	.hideable-column {display: none;}
}

@media screen and (min-width:1024px) {
	/* large screen */
	div.less-details {display: none;}
	.hideable-column {display: table-cell;}
}

/* --------------------------------------------------------------------------
   Mobile polish (latest-standards): sticky product CTA bar, iOS input-zoom
   fix, comfortable touch targets. All scoped so desktop is untouched.
   -------------------------------------------------------------------------- */

/* Sticky bottom action bar on the product page (shown via .d-lg-none). */
.mobile-buy-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1030;
	display: flex;
	gap: 0.5rem;
	padding: 0.6rem 0.75rem;
	/* respect the iOS home-indicator safe area */
	padding-bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px));
	background: var(--sparkx-surface);
	border-top: 1px solid var(--sparkx-border);
	box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
}

.mobile-buy-bar .btn {
	flex: 1 1 0;
	min-width: 0;
	min-height: 3rem;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
}

@media (max-width: 991.98px) {
	/* Keep the last bit of page content clear of the fixed bar. Only pages that
	   render .mobile-buy-bar / .cart-checkout-bar need it, so key off that with :has(). */
	body:has(.mobile-buy-bar),
	body:has(.cart-checkout-bar) {
		padding-bottom: 4.75rem;
	}
}

/* Cart page: sticky mobile checkout bar (mirrors the desktop summary card). */
.cart-checkout-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1030;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.55rem 0.9rem;
	padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
	background: var(--sparkx-surface);
	border-top: 1px solid var(--sparkx-border);
	box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
}

.cart-checkout-bar-total {
	flex: 0 0 auto;
	line-height: 1.15;
	white-space: nowrap;
}

/* iOS zooms the viewport when a focused input's text is < 16px. Bump text-ish
   controls to 16px on phones so tapping a field never triggers an auto-zoom. */
@media (max-width: 575.98px) {
	.form-control,
	.form-select,
	.app-search-input,
	input[type="text"],
	input[type="search"],
	input[type="email"],
	input[type="tel"],
	input[type="number"],
	input[type="password"] {
		font-size: 16px;
	}

	/* Comfortable minimum tap target for icon-only nav actions. */
	.app-navbar .nav-link {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
	}
}

/* ==========================================================================
   Polish layer (2026-07-07) — Material/Tailwind-style tactility on top of the
   token system. Appended so it overrides cleanly; markup/JS unchanged.
   ========================================================================== */

html {
	scroll-behavior: smooth;
}

::selection {
	background: var(--sparkx-accent-soft);
	color: var(--sparkx-primary-dark);
}

/* Solid CTAs get a soft elevation that lifts on hover and presses on click —
   the tactile "raised surface" feel from Material, kept subtle like Tailwind. */
.btn-primary,
.btn-warning,
.btn-success,
.btn-danger {
	box-shadow: 0 1px 2px rgba(2, 6, 23, 0.12);
}

.btn-primary:hover,
.btn-warning:hover,
.btn-success:hover,
.btn-danger:hover {
	transform: translateY(-1px);
	box-shadow: var(--sparkx-shadow-sm);
}

/* On press, settle back to baseline so the click reads as a push-down from the
   hovered (lifted) state. */
.btn-primary:active,
.btn-warning:active,
.btn-success:active,
.btn-danger:active {
	transform: translateY(0);
	box-shadow: 0 1px 2px rgba(2, 6, 23, 0.12);
}

/* A crisp, consistent focus ring on every interactive control (Tailwind hallmark). */
a:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
.page-link:focus-visible,
.dropdown-item:focus-visible {
	outline: none;
	box-shadow: var(--sparkx-focus-ring);
	border-radius: var(--sparkx-radius-sm);
}

/* Product cards: cleaner surface + a smoother, slightly deeper lift. */
.card,
.product-card {
	box-shadow: var(--sparkx-shadow-xs);
}

.product-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.product-card:hover {
	transform: translateY(-0.35rem);
	box-shadow: var(--sparkx-shadow-md);
}

.product-card-media {
	background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
	position: relative;
}

/* Pin the two floating badges to opposite top corners, guaranteed. Higher
   specificity + explicit position/left/right so neither can drift toward the
   centre or overlap, and the %-off flag can't grow into the heart. */
.product-card .product-card-media .discount-flag {
	position: absolute;
	top: 0.6rem;
	left: 0.6rem;
	right: auto;
	z-index: 3;
	max-width: calc(100% - 3.4rem);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.product-card .product-card-media .wishlist-toggle {
	position: absolute;
	top: 0.6rem;
	right: 0.6rem;
	left: auto;
	bottom: auto;
	margin: 0;
	z-index: 3;
}

/* Minutes marker sits bottom-left so it never collides with the %-off flag
   (top-left) or the wishlist heart (top-right). Colour/shape come from the shared
   .badge.bg-warning classes so it matches the Minutes badge on the orders page. */
.product-card .product-card-media .minutes-flag {
	position: absolute;
	bottom: 0.6rem;
	left: 0.6rem;
	z-index: 3;
	font-size: 0.68rem;
	font-weight: 700;
	box-shadow: var(--sparkx-shadow-sm);
	max-width: calc(100% - 1.2rem);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Softer, more premium image zoom on the PDP (1.2 felt abrupt). */
.product-image-container:hover img {
	transform: scale(1.08);
}

/* Buy card reads as a distinct, elevated panel. */
.product-buy-card {
	border-radius: var(--sparkx-radius-lg);
	box-shadow: var(--sparkx-shadow-sm);
}

/* Keep everything inside the (narrow, on desktop) buy card — long words wrap and
   badges/pills stop rendering on a single overflowing line. */
.product-buy-card .card-body {
	overflow-wrap: anywhere;
	word-break: break-word;
}

.product-buy-card .badge {
	white-space: normal;
}

.product-buy-card .deliver-to-address {
	white-space: normal;
	word-break: break-word;
}

/* The "turn on notifications" card under Notify Me: the Delivery box's own padding is the
   space below it, so the card's margin would double it. */
#unavailableActions > .push-prompt {
	margin-bottom: 0 !important;
}

/* Prices align nicely and don't jitter as digits change (tabular figures). */
.product-detail-price,
.product-card .h5 {
	font-variant-numeric: tabular-nums;
}

/* Trust strip: each promise becomes a subtle, hoverable tile. */
.trust-item {
	padding: 0.6rem 0.75rem;
	border-radius: var(--sparkx-radius);
	transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.trust-item:hover {
	background: var(--sparkx-surface-alt);
	box-shadow: var(--sparkx-shadow-xs);
	transform: translateY(-1px);
}

/* Slightly bolder section accent bar for stronger visual rhythm on the home page. */
.section-title::after {
	width: 3.25rem;
	height: 0.28rem;
}

/* Password show/hide toggle (added by password_toggle.js). */
.pw-toggle-wrap {
	position: relative;
	display: block;
}

.pw-has-toggle > input,
.pw-has-toggle > .form-control {
	padding-right: 2.6rem;
}

.pw-toggle-btn {
	position: absolute;
	right: 0.55rem;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	border: none;
	background: transparent;
	color: var(--sparkx-muted);
	padding: 0.25rem 0.35rem;
	line-height: 1;
	cursor: pointer;
}

.pw-toggle-btn:hover {
	color: var(--sparkx-text-2);
}

/* Toast notifications (created by toast.js). Bottom-centre, auto-dismiss. */
.sparkx-toasts {
	position: fixed;
	left: 50%;
	bottom: 1.25rem;
	transform: translateX(-50%);
	z-index: 1090;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	width: min(92vw, 26rem);
	pointer-events: none;
}

.sparkx-toast {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	padding: 0.75rem 1rem;
	border-radius: var(--sparkx-radius);
	background: #0f172a;
	color: #fff;
	box-shadow: var(--sparkx-shadow-lg);
	font-size: 0.92rem;
	font-weight: 500;
	opacity: 0;
	transform: translateY(0.75rem);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.sparkx-toast.show {
	opacity: 1;
	transform: translateY(0);
}

.sparkx-toast i {
	font-size: 1.1rem;
	flex: 0 0 auto;
}

.sparkx-toast-success i {
	color: #4ade80;
}

.sparkx-toast-error {
	background: #7f1d1d;
}

.sparkx-toast-error i {
	color: #fecaca;
}

@media (max-width: 991.98px) {
	body:has(.mobile-buy-bar) .sparkx-toasts,
	body:has(.cart-checkout-bar) .sparkx-toasts {
		bottom: 5rem;
	}
}

/* Floating back-to-top button (element created by back_to_top.js). */
.back-to-top {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 1035;
	width: 2.75rem;
	height: 2.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--sparkx-border);
	background: var(--sparkx-surface);
	color: var(--sparkx-primary);
	box-shadow: var(--sparkx-shadow-md);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.5rem);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s, background-color 0.15s ease;
}

.back-to-top.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top:hover {
	background: var(--sparkx-primary-soft);
	color: var(--sparkx-primary-dark);
}

/* On phones, lift it above the sticky product action bar when that bar is present. */
@media (max-width: 991.98px) {
	body:has(.mobile-buy-bar) .back-to-top,
	body:has(.cart-checkout-bar) .back-to-top {
		bottom: 4.75rem;
	}
}

/* Respect users who prefer reduced motion — disable the lifts/zooms/smooth scroll. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	.btn-primary:hover,
	.btn-warning:hover,
	.btn-success:hover,
	.btn-danger:hover,
	.product-card:hover,
	.trust-item:hover {
		transform: none;
	}
	.product-image-container:hover img {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Order fulfilment tracker (orders page; inside the htmx-swapped status div)
   -------------------------------------------------------------------------- */

.order-tracker {
	display: flex;
	align-items: flex-start;
	margin-top: 0.85rem;
}

.order-tracker-step {
	flex: 1 1 0;
	position: relative;
	text-align: center;
	min-width: 0;
}

/* Connector line running back to the previous step's dot. */
.order-tracker-step::before {
	content: "";
	position: absolute;
	top: 0.85rem;
	right: 50%;
	width: 100%;
	height: 2px;
	background: var(--sparkx-border);
	z-index: 0;
}

.order-tracker-step:first-child::before {
	display: none;
}

.order-tracker-step.done::before {
	background: var(--sparkx-success);
}

.order-tracker-dot {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	background: var(--sparkx-surface);
	border: 2px solid var(--sparkx-border);
	color: var(--sparkx-muted);
	font-size: 0.8rem;
}

.order-tracker-label {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.72rem;
	color: var(--sparkx-muted);
}

.order-tracker-step.done .order-tracker-dot {
	background: var(--sparkx-success);
	border-color: var(--sparkx-success);
	color: #fff;
}

.order-tracker-step.done .order-tracker-label {
	color: var(--sparkx-text-2);
	font-weight: 600;
}

.order-tracker-step.active .order-tracker-dot {
	box-shadow: 0 0 0 4px var(--sparkx-success-soft);
}

/* ==========================================================================
   Mobile app tab bar + micro-interactions (2026-07-19). Additive only —
   rendered by navigation :: footer_menu, hidden >=768px via d-md-none.
   ========================================================================== */

.mobile-tabbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1030;
	display: flex;
	justify-content: space-around;
	align-items: stretch;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-top: 1px solid var(--sparkx-border);
	padding: 0.3rem 0 calc(0.3rem + env(safe-area-inset-bottom));
	box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.06);
}

.tabbar-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 0.15rem 0;
	font-size: 0.68rem;
	font-weight: 600;
	color: var(--sparkx-muted);
	text-decoration: none;
}

.tabbar-item i { font-size: 1.15rem; }

.tabbar-item.active,
.tabbar-item:hover,
.tabbar-item:focus-visible { color: var(--sparkx-primary); }

.tabbar-icon-wrap { position: relative; display: inline-flex; }

.mobile-tabbar .cart-count-badge { top: -0.4rem; right: -0.7rem; }

/* Clear the tab bar on phones: page content and the floating back-to-top
   button must never sit underneath it. */
@media (max-width: 767.98px) {
	body { padding-bottom: 4.4rem; }
	.back-to-top { bottom: 4.9rem; }
}

@media print { .mobile-tabbar { display: none; } }

/* Micro-interactions */
html { scroll-behavior: smooth; }

::selection { background: var(--sparkx-primary); color: #fff; }

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

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.product-card,
	.minutes-shop-card,
	.btn:active { transform: none; transition: none; }
}

/* ==========================================================================
   Order support message thread (2026-07-20).
   ========================================================================== */
.order-thread { max-height: 22rem; overflow-y: auto; padding-right: 0.25rem; }
.order-msg { display: flex; margin-bottom: 0.6rem; }
.order-msg.msg-mine { justify-content: flex-end; }
.order-msg.msg-staff { justify-content: flex-start; }
.order-msg-bubble {
	max-width: 78%;
	padding: 0.5rem 0.75rem;
	border-radius: var(--sparkx-radius, 0.75rem);
	font-size: 0.92rem;
	line-height: 1.35;
}
.msg-mine .order-msg-bubble {
	background: var(--sparkx-primary, #2563eb);
	color: #fff;
	border-bottom-right-radius: 0.25rem;
}
.msg-staff .order-msg-bubble {
	background: var(--sparkx-surface-alt, #f1f5f9);
	color: var(--sparkx-text, #0f172a);
	border-bottom-left-radius: 0.25rem;
}
.order-msg-body { white-space: pre-wrap; word-break: break-word; }
.order-msg-meta { font-size: 0.68rem; opacity: 0.75; margin-top: 0.2rem; }

/* Minutes search hits: a product row that names the shop it comes from, so one
   result list can mix "shops" and "things shops sell" without ambiguity. */
.minutes-hit {
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.minutes-hit:hover {
	box-shadow: var(--sparkx-shadow-md);
	transform: translateY(-2px);
}

.minutes-hit-img {
	flex: 0 0 auto;
	width: 3.5rem;
	height: 3.5rem;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--sparkx-border);
	border-radius: var(--sparkx-radius);
	padding: 0.2rem;
}

/* Lets a flex child shrink instead of forcing its text to overflow the card. */
.min-width-0 {
	min-width: 0;
}

.text-truncate-2 {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* ==========================================================================
   Help assistant — shared by the /help/chat page and the floating widget.
   ========================================================================== */

.chat-log { overflow-y: auto; }

.chat-row { display: flex; margin-bottom: 0.6rem; }
.chat-row.from-bot { justify-content: flex-start; }
.chat-row.from-user { justify-content: flex-end; }

.chat-bubble {
	max-width: 85%;
	padding: 0.6rem 0.85rem;
	border-radius: var(--sparkx-radius-lg);
	font-size: 0.95rem;
	line-height: 1.45;
	white-space: pre-wrap;
}

.from-bot .chat-bubble {
	background: #f1f5f9;
	color: var(--sparkx-text);
	border-bottom-left-radius: 0.25rem;
}

.from-user .chat-bubble {
	background: var(--sparkx-primary);
	color: #fff;
	border-bottom-right-radius: 0.25rem;
}

.chat-chip {
	border: 1px solid var(--sparkx-border-strong);
	background: #fff;
	color: var(--sparkx-text-2);
	border-radius: var(--sparkx-radius-pill);
	padding: 0.3rem 0.8rem;
	font-size: 0.85rem;
}

.chat-chip:hover,
.chat-chip:focus {
	background: var(--sparkx-primary-soft);
	border-color: var(--sparkx-primary);
}

/* --- floating widget ---------------------------------------------------- */

.help-fab {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 1045;
	width: 3.25rem;
	height: 3.25rem;
	border: 0;
	border-radius: 50%;
	background: var(--sparkx-primary);
	color: #fff;
	font-size: 1.15rem;
	box-shadow: var(--sparkx-shadow-md);
}

.help-fab:hover { background: var(--sparkx-primary-dark); }

.help-widget {
	position: fixed;
	right: 1rem;
	bottom: 5rem;
	z-index: 1046;
	width: min(23rem, calc(100vw - 2rem));
	max-height: min(30rem, calc(100vh - 8rem));
	display: none;
	flex-direction: column;
	background: var(--sparkx-surface);
	border: 1px solid var(--sparkx-border);
	border-radius: var(--sparkx-radius-lg);
	box-shadow: var(--sparkx-shadow-lg);
	overflow: hidden;
}

.help-widget.open { display: flex; }
.help-widget .chat-log { flex: 1 1 auto; min-height: 9rem; }

/* The phone tab bar owns the bottom edge, so the launcher sits above it rather
   than on top of the Account button. */
@media (max-width: 767.98px) {
	.help-fab { bottom: 4.75rem; }
	.help-widget { bottom: 8.75rem; max-height: calc(100vh - 12rem); }
}

/* Live stock on product cards (live_availability.js). Bottom-right, because the other
   three corners belong to the discount flag, the wishlist heart and the Minutes flag. */
.product-card .product-card-media .stock-flag {
	position: absolute;
	bottom: 0.6rem;
	right: 0.6rem;
	z-index: 3;
	font-size: 0.68rem;
	font-weight: 700;
	background-color: var(--sparkx-danger-soft);
	color: var(--sparkx-danger);
	border: 1px solid #fecaca;
	box-shadow: var(--sparkx-shadow-sm);
}

.product-card .product-card-media .stock-flag-out {
	background-color: var(--sparkx-muted);
	color: #fff;
	border-color: transparent;
}

.product-card.is-sold-out .product-card-image {
	opacity: 0.5;
	filter: grayscale(35%);
}

.cart-item-card .availability-note {
	font-weight: 600;
}

/* Minutes items already flag the bottom-left corner of the card, so on a narrow phone card the
   stock flag (bottom-right) collided with it. Lift the stock flag above it when both exist. */
.product-card .product-card-media:has(.minutes-flag) .stock-flag {
	bottom: 2.35rem;
}

/* Touch targets. On a phone the small buttons (quantity steppers, remove links, btn-sm links)
   measured 24-31px tall, well under what a thumb reliably hits. Desktop keeps the compact
   sizing; only pointer-coarse/narrow screens grow. */
@media (max-width: 767.98px) {
	.btn-sm,
	.input-group-sm > .btn,
	.input-group-sm > .form-control {
		min-height: 40px;
	}

	/* Grow the buttons by equal padding, not by min-height alone. min-height made them taller
	   but added all of the extra height below the text, so "Shop products" sat at the top of
	   its button. Padding (40px - one line - border) / 2 either side centres the line by
	   construction, and unlike switching to flex it keeps the space between an icon and its
	   label on buttons that have no margin class. */
	.btn-sm,
	.input-group-sm > .btn {
		padding-top: calc((40px - 1.5em - 2px) / 2);
		padding-bottom: calc((40px - 1.5em - 2px) / 2);
	}

	.navbar-toggler,
	.pw-toggle-btn {
		min-height: 40px;
	}

	.cart-item-card .linkRemove,
	.product-card-media .wishlist-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 40px;
		min-height: 40px;
	}

	/* Breadcrumbs are the way back on a phone, and each link was only as tall as its text
	   (20px). Padding grows the area a thumb can hit without changing the type size, so the
	   trail still reads as a breadcrumb rather than a row of buttons. */
	.breadcrumb-item a {
		display: inline-block;
		padding: 0.55rem 0;
	}

	/* The clear button inside the search field was 28px. It sits over the input, so it can
	   only grow to what the field can hold. */
	.search-clear-inline {
		width: 2.25rem;
		height: 2.25rem;
	}

	/* Bootstrap's close button is 24px square, which is the one control every dialog has and
	   the one a thumb most often misses. The icon keeps its size; the box around it grows. */
	.btn-close {
		width: 2.25rem;
		height: 2.25rem;
		background-size: 1rem;
	}
}

/* On a phone the floating chat button sat on top of "Proceed to Checkout" in the cart summary
   (a one-item cart puts that button exactly in the corner the button floats over), so taps on
   the right of the CTA opened chat instead of checking out. The cart and checkout already
   carry their own sticky action bar, so the launcher stands down on those two screens; it is
   still there everywhere else, and Help remains in the menu. */
@media (max-width: 767.98px) {
	body:has(#cartCheckoutBar) .help-fab,
	body:has(.checkout-sticky-bar) .help-fab {
		display: none;
	}
}

/* Touch screens have no hover, but a tap leaves :hover stuck on the card until the next tap
   elsewhere, so the card sat raised (and, inside a rail, cropped). Lift only where a pointer
   can actually hover. */
@media (hover: none) {
	.product-card:hover,
	.minutes-shop-card:hover,
	.category-card:hover {
		transform: none;
	}
}

/* Header menu toggler: a 44px square, the smallest comfortable thumb target (it was 39x40 with
   a 16px icon, easy to miss), still in proportion with the 40px logo beside it. */
.app-navbar .navbar-toggler {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	font-size: 1.4rem;
	line-height: 1;
	border-color: var(--sparkx-border);
	border-radius: 0.65rem;
}

/* Bootstrap hides the toggler from lg up (the menu is inline there); the display above would
   otherwise bring it back on desktop. */
@media (min-width: 992px) {
	.app-navbar .navbar-toggler {
		display: none;
	}
}

/* The phone menu is a side drawer. From lg up Bootstrap draws the same element inline in the
   header, so none of this reaches the desktop layout. */
.app-nav-drawer {
	--bs-offcanvas-width: min(20rem, 85vw);
}

@media (max-width: 991.98px) {
	.app-nav-drawer .nav-link {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.75rem 0.25rem;
		border-bottom: 1px solid var(--sparkx-border);
	}

	.app-nav-drawer .nav-link i {
		color: var(--sparkx-primary, #2563eb);
		width: 1.25em;
	}

	.app-nav-drawer .drawer-greeting {
		display: flex;
		align-items: center;
		gap: 0.6rem;
		padding: 0.25rem 0.25rem 0.85rem;
		font-weight: 700;
		font-size: 1.05rem;
		border-bottom: 1px solid var(--sparkx-border);
	}

	.app-nav-drawer .drawer-greeting i {
		font-size: 1.6rem;
		color: var(--sparkx-primary, #2563eb);
	}

	.app-nav-drawer .dropdown-menu {
		border: 0;
		box-shadow: none;
		padding-left: 0.75rem;
	}
}

/* The Minutes status chips reload the page. The reload comes back to the chips (see
   setStatusFilter), clear of the header, instead of the top of the page. */
#shopStatusFilter {
	scroll-margin-top: 6rem;
}

/* --------------------------------------------------------------------------
   Search results as a list on phones (product_fragment :: search_row)
   One product per row, image left and details right, the way Flipkart lists
   search results on a phone: four or five products per screen instead of the
   two and a half the 2-up card grid fitted, read top to bottom.
   -------------------------------------------------------------------------- */

.search-rows {
	background: var(--sparkx-surface, #fff);
	border-top: 1px solid var(--sparkx-border);
}

.search-row {
	position: relative;
	display: flex;
	gap: 0.85rem;
	padding: 0.85rem 2.75rem 0.85rem 0.75rem;
	border-bottom: 1px solid var(--sparkx-border);
	background: var(--sparkx-surface, #fff);
}

.search-row-media {
	flex: 0 0 6.5rem;
	width: 6.5rem;
	height: 6.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.search-row-media img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.search-row-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

/* Two lines of name, then an ellipsis: enough to tell a 1 kg pack from a 5 kg one. */
.search-row-name {
	color: var(--sparkx-text, #1f2937);
	text-decoration: none;
	font-size: 0.95rem;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.search-row-origin,
.search-row-rating {
	font-size: 0.8rem;
	display: flex;
	align-items: center;
	gap: 0.35rem;
	flex-wrap: wrap;
}

.search-row .rating-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.2rem;
	padding: 0.05rem 0.4rem;
	border-radius: 0.3rem;
	background: #16a34a;
	color: #fff;
	font-weight: 600;
	font-size: 0.75rem;
}

.search-row .rating-chip .fa-star {
	font-size: 0.6rem;
}

.search-row-price {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	flex-wrap: wrap;
	font-size: 1.05rem;
}

.search-row .stock-flag {
	align-self: flex-start;
	background: #fff7ed;
	color: #9a3412;
	font-weight: 600;
}

.search-row .stock-flag-out {
	background: #fef2f2;
	color: #b91c1c;
}

.search-row.is-sold-out .search-row-media img {
	opacity: 0.45;
}

.search-row-wishlist {
	position: absolute;
	top: 0.75rem;
	right: 0.6rem;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border-radius: 50%;
	border: 1px solid var(--sparkx-border);
	background: #fff;
	color: var(--sparkx-muted);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* --------------------------------------------------------------------------
   Variant picker (variant_picker.js): a row of chips per attribute, the way
   Flipkart shows sizes and colours, instead of one dropdown mixing them.
   -------------------------------------------------------------------------- */

.variant-row-group + .variant-row-group {
	margin-top: 0.75rem;
}

.variant-row-title {
	font-size: 0.9rem;
	margin-bottom: 0.35rem;
}

.variant-chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.variant-chip {
	min-width: 3rem;
	min-height: 2.5rem;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--sparkx-border);
	border-radius: 0.5rem;
	background: #fff;
	color: var(--sparkx-text, #1f2937);
	font-size: 0.9rem;
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.variant-chip:hover,
.variant-chip:focus-visible {
	border-color: var(--sparkx-primary);
}

.variant-chip.is-selected {
	border: 2px solid var(--sparkx-primary);
	color: var(--sparkx-primary);
	font-weight: 600;
	background: #eff6ff;
}

/* Sold out: still clickable, so the customer can see it exists and is gone, as on Flipkart. */
.variant-chip.is-sold-out {
	color: var(--sparkx-muted);
	text-decoration: line-through;
	border-style: dashed;
	background: #f9fafb;
}

/* --------------------------------------------------------------------------
   "Get the app" strip under the header (js/install_app.js), 2026-09-24.
   Shown only when the browser can install the shop.
   -------------------------------------------------------------------------- */
.install-strip {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0.75rem 0 0;
	padding: 0.6rem 0.75rem;
	border: 1px solid #bfdbfe;
	border-radius: var(--sparkx-radius, 0.75rem);
	background: #eff6ff;
}

.install-strip img {
	flex-shrink: 0;
	border-radius: 0.6rem;
}

.install-strip-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
	line-height: 1.3;
	color: var(--sparkx-text, #0f172a);
}

.install-strip-text span {
	font-size: 0.85rem;
	color: var(--sparkx-muted, #475569);
}

/* Photo attachments (js/image_picker.js), 2026-09-24. */
.image-picker-note {
	margin-top: 0.35rem;
}

.image-picker-previews {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.image-picker-previews img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border: 1px solid var(--sparkx-border, #e2e8f0);
	border-radius: 0.5rem;
}

/* Address form map (js/address_map.js), 2026-09-25. z-index: 0 gives the map its own
   stacking context, so Leaflet's panes (400) and controls (1000) stay under the sticky
   header, the bottom tab bar and the chat button while the page scrolls. */
.address-map {
	position: relative;
	z-index: 0;
	height: 280px;
	border: 1px solid var(--sparkx-border, #e2e8f0);
	border-radius: 0.75rem;
	overflow: hidden;
}

@media (min-width: 768px) {
	.address-map {
		height: 340px;
	}
}

.address-map-pin {
	background: none;
	border: 0;
}

.address-map-pin i {
	display: block;
	font-size: 40px;
	line-height: 44px;
	text-align: center;
	color: #dc2626;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}

/* Checkout payment choice and its one button (js/checkout_pay.js), 2026-09-25. The methods
   are whole-row choices, and the action lives under the total: in the summary on a laptop,
   in a bar pinned to the bottom on a phone. */
.pay-options {
	display: grid;
	gap: 0.6rem;
}

.pay-option {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0.85rem 1rem;
	border: 1px solid var(--sparkx-border);
	border-radius: var(--sparkx-radius);
	background: var(--sparkx-surface);
	cursor: pointer;
}

.pay-option .form-check-input {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
}

.pay-option-text {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-width: 0;
}

.pay-option-title {
	font-weight: 600;
}

.pay-option-sub {
	font-size: 0.85rem;
	color: var(--sparkx-muted);
}

.pay-option-icons {
	display: inline-flex;
	flex: 0 0 auto;
	gap: 0.5rem;
	font-size: 1.05rem;
	color: var(--sparkx-muted);
}

.pay-option.is-selected {
	border-color: var(--sparkx-primary);
	background: var(--sparkx-primary-soft);
	box-shadow: inset 0 0 0 1px var(--sparkx-primary);
}

.pay-option.is-selected .pay-option-icons {
	color: var(--sparkx-primary);
}

.pay-option.is-unavailable {
	cursor: not-allowed;
	opacity: 0.7;
	background: #f8fafc;
}

.checkout-sticky-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1030;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.55rem 0.9rem;
	padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
	background: var(--sparkx-surface);
	border-top: 1px solid var(--sparkx-border);
	box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.08);
}

.checkout-sticky-total {
	flex: 0 0 auto;
	line-height: 1.15;
	white-space: nowrap;
}

.checkout-sticky-bar .btn {
	min-height: 3rem;
	font-weight: 600;
}

@media (max-width: 991.98px) {
	/* Checkout is one task: the pay bar owns the bottom edge (the tab bar steps aside, as the
	   chat button already does on phones), and the page ends above it. */
	body:has(.checkout-sticky-bar) {
		padding-bottom: 5.25rem;
	}

	body:has(.checkout-sticky-bar) .mobile-tabbar {
		display: none;
	}

	body:has(.checkout-sticky-bar) .help-fab {
		bottom: 5.25rem;
	}
}

/* WhatsApp sign-in (login.html): the code reads as six separate digits */
.wa-code-input {
	letter-spacing: 0.6em;
	padding-left: 1.6em;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* Star ratings (fragments :: stars, and the review form's .star-input). Amber filled stars,
   slate empty ones; the icons keep their natural width so the five sit close together. */
.stars {
	display: inline-flex;
	align-items: center;
	gap: 0.1em;
	color: #f59e0b;
	line-height: 1;
	white-space: nowrap;
	--fa-width: auto;
}
.stars .far {
	color: #cbd5e1;
}
.stars-sm { font-size: 0.8rem; }
.stars-md { font-size: 1.15rem; }
.stars-lg { font-size: 1.6rem; }

/* Pick 1-5 on the review form: five radio buttons, drawn as stars. The buttons come 5..1 in the
   markup and the row is reversed, so "this star and every star before it" is the ~ sibling rule. */
.star-input {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
	gap: 0.25rem;
	border: 0;
	padding: 0;
	margin: 0;
}
.star-input input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.star-input label {
	cursor: pointer;
	font-size: 2rem;
	line-height: 1;
	color: #cbd5e1;
	padding: 0.1rem;
	--fa-width: auto;
}
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label {
	color: #f59e0b;
}
.star-input input:focus-visible + label {
	outline: 2px solid var(--sparkx-primary, #2563eb);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Product page on a phone: the price used to start on the second screen. The breadcrumb is one
   line that scrolls sideways instead of a three-line card, and the main photo is a little
   shorter, so name, rating and price fit under it. */
@media (max-width: 767.98px) {
	.breadcrumb {
		flex-wrap: nowrap;
		overflow-x: auto;
		white-space: nowrap;
		padding: 0.5rem 0.75rem !important;
		margin-bottom: 0;
		font-size: 0.85rem;
		scrollbar-width: none;
	}

	.breadcrumb::-webkit-scrollbar {
		display: none;
	}

	.product-detail-shell .product-image-container {
		height: 16rem;
	}
}

/* Product cards: "Add", then a - 1 + stepper (product_fragment :: card_cart, card_cart.js). One
   thumb-sized control under the price, like the quick-commerce apps. */
.card-cart {
	margin-top: 0.5rem;
}
.card-add {
	width: 100%;
	min-height: 38px;
	padding: 0.3rem 0.75rem;
	border: 1.5px solid var(--sparkx-primary, #2563eb);
	border-radius: 0.6rem;
	background: #fff;
	color: var(--sparkx-primary, #2563eb);
	font-weight: 700;
	letter-spacing: 0.02em;
}
.card-add:hover,
.card-add:focus-visible {
	background: var(--sparkx-primary, #2563eb);
	color: #fff;
}
.card-stepper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 38px;
	border-radius: 0.6rem;
	background: var(--sparkx-primary, #2563eb);
	color: #fff;
	font-weight: 700;
}
.card-stepper[hidden] {
	display: none;
}
.card-stepper button {
	border: 0;
	background: transparent;
	color: inherit;
	min-width: 40px;
	min-height: 38px;
	font-size: 0.85rem;
}
.card-cart.is-busy {
	opacity: 0.6;
	pointer-events: none;
}
.card-soldout {
	display: none;
	min-height: 38px;
	line-height: 38px;
	color: var(--sparkx-muted, #64748b);
	font-weight: 600;
	font-size: 0.9rem;
}
.is-sold-out .card-soldout {
	display: block;
}
.is-sold-out .card-add,
.is-sold-out .card-stepper {
	display: none !important;
}
.search-row .card-cart {
	max-width: 8.5rem;
}

/* "View cart" bar: above the phone tab bar once the cart has something in it. */
/* Cart page: Shopping cart | Minutes basket. Underline tabs, so they read differently from
   the Shopping / Minutes browse switch above them. Each tab is a separate basket and order. */
/* My Orders: thumbnails of what was ordered, beside the names. */
.order-items {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}

.order-thumbs {
	display: grid;
	grid-template-columns: repeat(2, 48px);
	gap: 4px;
	flex: 0 0 auto;
}

.order-thumb {
	width: 48px;
	height: 48px;
	object-fit: contain;
	border-radius: var(--sparkx-radius-sm);
	background: var(--sparkx-surface-alt);
	border: 1px solid var(--sparkx-border);
}

.order-items-text {
	min-width: 0;
}

.order-items-text ul {
	margin-bottom: 0;
	padding-left: 1rem;
}

.order-type-chips a.chip {
	text-decoration: none;
}

.basket-tabs {
	display: flex;
	border-bottom: 1px solid var(--sparkx-border);
}

.basket-tab {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0.6rem 0.5rem;
	margin-bottom: -1px;
	border-bottom: 3px solid transparent;
	color: var(--sparkx-muted);
	font-weight: 600;
	text-decoration: none;
}

.basket-tab:hover {
	color: var(--sparkx-text);
}

.basket-tab.active {
	color: var(--sparkx-primary);
	border-bottom-color: var(--sparkx-primary);
}

.basket-tab-count {
	min-width: 1.5rem;
	padding: 0 0.4rem;
	border-radius: var(--sparkx-radius-pill);
	background: var(--sparkx-primary-soft);
	color: var(--sparkx-primary);
	font-size: 0.8rem;
	line-height: 1.5rem;
	text-align: center;
}

.view-cart-bar {
	position: fixed;
	left: 0.75rem;
	right: 0.75rem;
	bottom: calc(4.2rem + env(safe-area-inset-bottom, 0px));
	z-index: 1029;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem 1rem;
	border-radius: 0.9rem;
	background: var(--sparkx-primary, #2563eb);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
}
.view-cart-bar[hidden] {
	display: none !important;
}
.view-cart-bar:hover,
.view-cart-bar:focus {
	color: #fff;
}
.view-cart-count {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9rem;
	opacity: 0.95;
}
.view-cart-total {
	font-weight: 800;
}
.view-cart-cta {
	margin-left: auto;
	white-space: nowrap;
}
@media (max-width: 767.98px) {
	body.has-view-cart {
		padding-bottom: 8.4rem;
	}
	body.has-view-cart .help-fab {
		bottom: 8.4rem;
	}
	body.has-view-cart .back-to-top {
		bottom: 8.6rem;
	}
}

/* Home: "See all" beside a product row's heading. */
.section-see-all {
	font-weight: 600;
	font-size: 0.9rem;
	white-space: nowrap;
	text-decoration: none;
}

/* Home: the category grid as small tiles (four across on a phone). */
.category-tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	color: var(--sparkx-text);
	text-align: center;
}
.category-tile-img {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 1;
	border-radius: 0.9rem;
	background: #f1f5f9;
	overflow: hidden;
}
.category-tile-img img {
	width: 78%;
	height: 78%;
	object-fit: contain;
}
.category-tile-name {
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
@media (min-width: 768px) {
	.category-tile-name {
		font-size: 0.875rem;
	}
}

/* Home on a phone: the four promises as one thin row that scrolls sideways (titles only). As a
   two-by-two grid they took half of the first screen, pushing the aisles below the fold. */
@media (max-width: 767.98px) {
	.trust-strip {
		display: flex;
		gap: 0.5rem;
		overflow-x: auto;
		padding: 0.5rem;
		scrollbar-width: none;
	}
	.trust-strip::-webkit-scrollbar {
		display: none;
	}
	.trust-item {
		flex: 0 0 auto;
		gap: 0.4rem;
		padding: 0.3rem 0.65rem 0.3rem 0.35rem;
		border-radius: 999px;
		background: #f8fafc;
	}
	.trust-item i {
		width: 1.75rem;
		height: 1.75rem;
		font-size: 0.8rem;
	}
	.trust-item strong {
		font-size: 0.78rem;
		white-space: nowrap;
	}
	.trust-item small {
		display: none;
	}
}

/* A shop's own page: all its products are Minutes items, so the per-card flag says nothing. */
.shop-products .minutes-flag {
	display: none;
}

/* The food-type mark on a product page, as on the pack (FSSAI): a green dot in a green square
   for veg, a brown triangle in a brown square for non-veg. */
.food-mark { display: inline-block; position: relative; width: 14px; height: 14px; border: 2px solid currentColor;
	border-radius: 2px; vertical-align: -2px; margin-right: 4px; }
.food-mark::after { content: ""; position: absolute; inset: 2px; background: currentColor; border-radius: 50%; }
.food-mark.veg { color: #1f8a3b; }
.food-mark.non-veg { color: #7b3f1d; }
.food-mark.non-veg::after { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.product-facts > div, .seller-facts > div { margin-bottom: 0.15rem; }

/* --------------------------------------------------------------------------
   User guide (/guide): Hindi and English on one page, with drawings of the app's own
   screens. Every class starts guide- or g-, so none of this reaches another page.
   -------------------------------------------------------------------------- */

.guide-wrap {
	max-width: 52rem;
	margin: 0 auto;
	padding: 1rem 0 2rem;
	/* The switch at the end jumps back here: clear the sticky header. */
	scroll-margin-top: 5rem;
}

/* Inter has no Hindi letters: name fonts that do (Android, Windows, iPhone) before the generic
   ones, and give the vowel signs above and below the line room. Set on the elements that carry
   lang="hi" and inherited from there, never on every element in Hindi: that also replaced the
   icon font, and every icon became an empty box. */
.guide-wrap [lang="hi"] {
	font-family: 'Inter', 'Noto Sans Devanagari', 'Nirmala UI', 'Mangal', 'Kohinoor Devanagari',
		-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}
.guide-wrap [data-guide-content="hi"] {
	line-height: 1.75;
}

.guide-head h1 {
	font-size: 1.6rem;
	font-weight: 700;
	margin-bottom: 0.35rem;
}
.guide-head p {
	color: var(--sparkx-muted);
	margin-bottom: 0.9rem;
}

/* Language switch: a bilingual label and two big buttons. On a first visit the "Prefer
   English?" bubble floats above it, over the intro, so nothing moves when it goes. */
.guide-lang {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1rem;
	padding: 0.5rem 0.5rem 0.5rem 0.85rem;
	background: var(--sparkx-surface);
	border: 1px solid var(--sparkx-border);
	border-radius: var(--sparkx-radius);
}
.guide-lang-label {
	font-weight: 600;
	color: var(--sparkx-text-2);
}
.guide-lang-switch {
	display: inline-flex;
	padding: 3px;
	background: var(--sparkx-surface-alt);
	border: 1px solid var(--sparkx-border);
	border-radius: var(--sparkx-radius-pill);
}
.guide-lang-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 5.25rem;
	min-height: 44px;
	padding: 0.25rem 0.9rem;
	border-radius: var(--sparkx-radius-pill);
	color: var(--sparkx-text-2);
	font-weight: 600;
	text-decoration: none;
}
.guide-lang-btn:hover {
	color: var(--sparkx-primary);
}
.guide-lang-btn.active {
	background: var(--sparkx-primary);
	color: #fff;
	box-shadow: var(--sparkx-shadow-xs);
}
.guide-lang-banner {
	position: absolute;
	right: 0.25rem;
	bottom: calc(100% + 10px);
	z-index: 5;
	width: max-content;
	max-width: min(19rem, calc(100vw - 2rem));
	padding: 0.6rem 0.85rem;
	background: var(--sparkx-text);
	color: #fff;
	border-radius: var(--sparkx-radius);
	box-shadow: var(--sparkx-shadow-md);
	font-size: 0.92rem;
	line-height: 1.4;
	text-align: left;
	cursor: pointer;
	transition: opacity 0.4s ease, transform 0.4s ease;
}
.guide-lang-banner::after {
	content: "";
	position: absolute;
	top: 100%;
	right: 2.4rem;
	border: 8px solid transparent;
	border-top-color: var(--sparkx-text);
}
.guide-lang-banner.is-leaving {
	opacity: 0;
	transform: translateY(-4px);
	pointer-events: none;
}

/* "Your first order in 5 steps" */
.g-quick {
	background: var(--sparkx-primary-soft);
	border: 1px solid #bfdbfe;
	border-radius: var(--sparkx-radius-lg);
	padding: 1rem 1.1rem 0.4rem;
	margin-bottom: 1rem;
}
.g-quick h2 {
	font-size: 1.15rem;
	font-weight: 700;
	margin-bottom: 0.8rem;
}
.g-quick ol {
	list-style: none;
	counter-reset: g-quick;
	padding: 0;
	margin: 0;
}
.g-quick li {
	counter-increment: g-quick;
	position: relative;
	min-height: 2rem;
	padding-left: 2.6rem;
	margin-bottom: 0.75rem;
}
.g-quick li::before {
	content: counter(g-quick);
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--sparkx-primary);
	color: #fff;
	font-weight: 700;
}

.g-toc {
	background: var(--sparkx-surface);
	border: 1px solid var(--sparkx-border);
	border-radius: var(--sparkx-radius-lg);
	padding: 1rem 1.1rem 0.6rem;
	margin-bottom: 1rem;
}
.g-toc h2 {
	font-size: 1.05rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
}
.g-toc ol {
	margin: 0;
	padding-left: 2rem;
	columns: 2 15rem;
	column-gap: 2rem;
}
.g-toc li {
	margin-bottom: 0.35rem;
	break-inside: avoid;
}
.g-toc a {
	text-decoration: none;
}

.g-section {
	background: var(--sparkx-surface);
	border: 1px solid var(--sparkx-border);
	border-radius: var(--sparkx-radius-lg);
	padding: 1.1rem 1.1rem 0.5rem;
	margin-bottom: 1rem;
	scroll-margin-top: 5rem;
}
.g-section > h2 {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 1.2rem;
	font-weight: 700;
	margin-bottom: 0.75rem;
}
.g-section > h2 > i,
.g-section > h2 > .g-h2-emoji {
	flex: 0 0 1.5rem;
	text-align: center;
	color: var(--sparkx-primary);
}
.g-section h3 {
	font-size: 1rem;
	font-weight: 700;
	margin: 1rem 0 0.4rem;
}
.g-section p,
.g-section li {
	color: var(--sparkx-text-2);
}
.g-steps {
	padding-left: 1.35rem;
}
.g-steps > li {
	margin-bottom: 0.4rem;
}

/* A word exactly as the screen shows it ("Add to Cart"), so it can be found on the screen. Kept
   in one piece: split over two lines ("Proceed to" | "Checkout") it read as two buttons. Inline
   text that doesn't wrap, not an inline-block: after an inline-block the Hindi full stop (।)
   could start a line of its own. The longest label still fits a 412px phone. */
.g-ui {
	padding: 0.05em 0.4em;
	border: 1px solid var(--sparkx-border-strong);
	border-radius: 0.4rem;
	background: var(--sparkx-surface-alt);
	color: var(--sparkx-text);
	font-weight: 600;
	font-size: 0.92em;
	white-space: nowrap;
}
/* The oldest, narrowest phones (320px): the longest names would push the page sideways. */
@media (max-width: 359.98px) {
	.g-ui {
		white-space: normal;
	}
}

.g-tip,
.g-warn {
	display: flex;
	gap: 0.6rem;
	padding: 0.7rem 0.85rem;
	border-radius: var(--sparkx-radius);
	margin: 0.5rem 0 0.9rem;
}
.g-tip {
	background: var(--sparkx-info-soft);
	border: 1px solid #bae6fd;
}
.g-warn {
	background: var(--sparkx-warning-soft);
	border: 1px solid #fde68a;
}
.g-tip > i,
.g-warn > i {
	margin-top: 0.3rem;
}
.g-tip > i {
	color: var(--sparkx-info);
}
.g-warn > i {
	color: var(--sparkx-warning);
}
.g-tip p:last-child,
.g-warn p:last-child,
.g-tip ul:last-child,
.g-warn ul:last-child {
	margin-bottom: 0;
}

/* Shopping and Minutes side by side, stacked on a phone. */
.g-compare {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
	margin: 0.5rem 0 1rem;
}
.g-compare-card {
	border: 1px solid var(--sparkx-border);
	border-radius: var(--sparkx-radius);
	padding: 0.85rem;
	background: var(--sparkx-surface-alt);
}
.g-compare-card h3 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0;
}
.g-compare-card h3 i {
	color: var(--sparkx-primary);
}
.g-compare-card.is-minutes h3 i {
	color: #d97706;
}
.g-compare-card ul {
	padding-left: 1.1rem;
	margin-bottom: 0;
}
@media (max-width: 575.98px) {
	.g-compare {
		grid-template-columns: 1fr;
	}
}

/* A journey drawn as steps down a line: an icon, then what happens. */
.g-flow {
	list-style: none;
	padding: 0;
	margin: 0.6rem 0 1rem;
}
.g-flow > li {
	position: relative;
	display: flex;
	gap: 0.75rem;
	padding-bottom: 0.9rem;
}
.g-flow > li::before {
	content: "";
	position: absolute;
	left: calc(1.15rem - 1px);
	top: 2.3rem;
	bottom: 0;
	width: 2px;
	background: var(--sparkx-border-strong);
}
.g-flow > li:last-child::before {
	display: none;
}
.g-flow-icon {
	position: relative;
	z-index: 1;
	flex: 0 0 2.3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2.3rem;
	border-radius: 50%;
	background: var(--sparkx-primary-soft);
	color: var(--sparkx-primary);
}
.g-flow-text {
	padding-top: 0.25rem;
	color: var(--sparkx-text-2);
}
.g-flow-text b {
	display: block;
	color: var(--sparkx-text);
}
.g-flow > li.is-good .g-flow-icon {
	background: var(--sparkx-success-soft);
	color: var(--sparkx-success);
}
.g-flow > li.is-stop .g-flow-icon {
	background: var(--sparkx-danger-soft);
	color: var(--sparkx-danger);
}

/* Numbers on a drawing, and the list under it that explains them. */
.g-callout {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: #c2410c;
	color: #fff;
	font-family: var(--sparkx-font);
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
}
.g-legend {
	list-style: none;
	padding: 0;
	margin: 0.75rem 0 1rem;
}
.g-legend li {
	display: flex;
	gap: 0.55rem;
	margin-bottom: 0.5rem;
}
.g-legend .g-callout {
	margin-top: 0.2rem;
}

.g-figure-box {
	background: var(--sparkx-surface-alt);
	border: 1px dashed var(--sparkx-border-strong);
	border-radius: var(--sparkx-radius);
	padding: 0.85rem;
	margin: 0.5rem 0 0.25rem;
}
.g-center {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
}
.g-row {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}
.g-row + .g-row {
	margin-top: 0.6rem;
}
.g-row-top {
	align-items: flex-start;
}
.g-row-end {
	justify-content: flex-end;
}
.g-row-wrap {
	flex-wrap: wrap;
}
.g-row-split {
	justify-content: space-around;
}

/* The phone drawing */
.g-phone {
	max-width: 19rem;
	margin: 0.5rem auto 0.25rem;
	border: 7px solid #1e293b;
	border-radius: 1.75rem;
	background: var(--sparkx-surface-alt);
	overflow: hidden;
	box-shadow: var(--sparkx-shadow-md);
	font-size: 0.8rem;
	line-height: 1.3;
}
.g-phone-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.55rem 0.75rem;
	background: var(--sparkx-surface);
	border-bottom: 1px solid var(--sparkx-border);
}
.g-phone-logo {
	font-size: 0.95rem;
	font-weight: 800;
	color: var(--sparkx-primary);
}
.g-phone-menu {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 1rem;
	color: var(--sparkx-text);
}
.g-phone-body {
	padding: 0.7rem 0.6rem 0.5rem;
}
.g-switch {
	flex: 1;
	display: flex;
	padding: 2px;
	background: var(--sparkx-surface);
	border: 1px solid var(--sparkx-border);
	border-radius: var(--sparkx-radius-pill);
}
.g-switch-btn {
	flex: 1;
	padding: 0.3rem 0.2rem;
	border-radius: var(--sparkx-radius-pill);
	color: var(--sparkx-muted);
	font-weight: 600;
	text-align: center;
	white-space: nowrap;
}
.g-switch-btn.active {
	background: var(--sparkx-primary);
	color: #fff;
}
.g-search {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.35rem 0.6rem;
	background: var(--sparkx-surface);
	border: 1px solid var(--sparkx-border-strong);
	border-radius: var(--sparkx-radius-pill);
	color: var(--sparkx-muted);
}
.g-search-lg {
	padding: 0.5rem 0.8rem;
	font-size: 0.95rem;
}
.g-search-text {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.g-search-text.is-typed {
	color: var(--sparkx-text);
}
.g-search-ask {
	font-size: 1rem;
	line-height: 1;
}
.g-cards {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.45rem;
}
.g-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
	padding: 0.4rem;
	background: var(--sparkx-surface);
	border: 1px solid var(--sparkx-border);
	border-radius: 0.6rem;
}
.g-card-img {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 3.2rem;
	border-radius: 0.4rem;
	background: var(--sparkx-surface-alt);
	color: var(--sparkx-border-strong);
	font-size: 1.1rem;
}
.g-card-line {
	width: 80%;
	height: 0.45rem;
	border-radius: 1rem;
	background: var(--sparkx-border);
}
.g-card-price {
	font-weight: 700;
	color: var(--sparkx-text);
}
.g-card-add,
.g-card-step {
	padding: 0.15rem 0;
	border: 1px solid var(--sparkx-primary);
	border-radius: 0.45rem;
	color: var(--sparkx-primary);
	font-weight: 700;
	text-align: center;
}
.g-card-step {
	background: var(--sparkx-primary);
	color: #fff;
}
.g-card-step b {
	padding: 0 0.35rem;
}
.g-card-heart {
	position: absolute;
	top: 0.55rem;
	right: 0.55rem;
	color: var(--sparkx-muted);
}
.g-card-heart.is-on {
	color: var(--sparkx-danger);
}
.g-fab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.3rem;
	height: 2.3rem;
	border-radius: 50%;
	background: var(--sparkx-primary);
	color: #fff;
	box-shadow: var(--sparkx-shadow-sm);
}
.g-phone-tabbar {
	position: relative;
	display: flex;
	justify-content: space-around;
	padding: 0.45rem 0;
	background: var(--sparkx-surface);
	border-top: 1px solid var(--sparkx-border);
}
.g-callout-edge {
	position: absolute;
	top: -0.75rem;
	left: 0.4rem;
}
.g-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.15rem;
	color: var(--sparkx-muted);
	font-size: 0.68rem;
}
.g-tab i {
	font-size: 0.95rem;
}
.g-tab.active {
	color: var(--sparkx-primary);
}

/* What ✨ Ask NityaShop answers with, drawn as its results page draws it. */
.g-result {
	margin-top: 0.7rem;
	padding: 0.6rem 0.75rem;
	background: #ecfdf5;
	border: 1px solid #a7f3d0;
	border-radius: var(--sparkx-radius);
}
.g-result-eyebrow {
	display: block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #047857;
}
.g-result-title {
	display: block;
	margin: 0.1rem 0 0.35rem;
	font-weight: 700;
}
.g-chip {
	display: inline-block;
	margin-right: 0.25rem;
	padding: 0.05rem 0.6rem;
	background: #fff;
	border: 1px solid #a7f3d0;
	border-radius: 1rem;
	color: #065f46;
	font-size: 0.78rem;
}

.g-basket-tabs {
	flex: 1;
	background: var(--sparkx-surface);
}
.g-order-status {
	font-size: 1.05rem;
	font-weight: 700;
}
.g-otp {
	padding: 0.45rem 0.7rem;
	font-size: 0.95rem;
}
.g-otp b {
	letter-spacing: 0.15em;
}
.g-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.6rem;
	background: var(--sparkx-surface);
	border: 1px solid var(--sparkx-border-strong);
	border-radius: var(--sparkx-radius-sm);
	color: var(--sparkx-text-2);
	font-size: 0.85rem;
}
.g-btn.is-danger {
	border-color: #fca5a5;
	color: var(--sparkx-danger);
}

.g-table {
	width: 100%;
	margin: 0.4rem 0 1rem;
	border-collapse: collapse;
	font-size: 0.92rem;
}
.g-table th,
.g-table td {
	padding: 0.45rem 0.4rem;
	border-bottom: 1px solid var(--sparkx-border);
	text-align: left;
	vertical-align: top;
}
.g-table th {
	background: var(--sparkx-surface-alt);
	font-weight: 600;
}
.g-table td:first-child {
	width: 38%;
}

.guide-end {
	margin: 1.5rem 0 1rem;
	text-align: center;
	color: var(--sparkx-muted);
}
.guide-end .guide-lang-switch {
	margin-top: 0.5rem;
}

/* The PDF copies are this page printed: only the open language, none of the app around it. */
@media print {
	body:has(.guide-wrap) {
		background: #fff;
	}
	body:has(.guide-wrap) .app-navbar,
	body:has(.guide-wrap) .footer-nav,
	body:has(.guide-wrap) .app-footer-note,
	body:has(.guide-wrap) .view-cart-bar,
	body:has(.guide-wrap) .help-fab,
	body:has(.guide-wrap) .help-widget,
	body:has(.guide-wrap) .back-to-top,
	body:has(.guide-wrap) [data-install-strip],
	.guide-lang,
	.guide-end {
		display: none !important;
	}
	/* The whole width of the paper: Bootstrap's container would hold it to 540px. */
	body:has(.guide-wrap) .container {
		max-width: none;
		padding-left: 0;
		padding-right: 0;
	}
	.guide-wrap {
		max-width: none;
		padding: 0;
	}
	.g-section,
	.g-toc {
		padding: 0;
		border: 0;
		margin-bottom: 0.9rem;
	}
	/* In one piece, so its two columns balance instead of running down two pages. */
	.g-toc {
		break-inside: avoid;
	}
	.g-toc li {
		margin-bottom: 0.15rem;
	}
	/* A drawing pushed to the next page left its shadow at the foot of this one. */
	.g-phone {
		box-shadow: none;
	}
	.g-section > h2,
	.g-section h3 {
		break-after: avoid;
	}
	.g-figure-box,
	.g-phone,
	.g-flow > li,
	.g-compare-card,
	.g-tip,
	.g-warn,
	.g-table tr,
	.g-legend li,
	.g-quick li {
		break-inside: avoid;
	}
	.guide-wrap a {
		color: inherit;
		text-decoration: none;
	}
}