/* ==========================================================================
   Smart Jhuri — design tokens + base
   Brand (per SMART JHURI — BRAND THEME):
     Primary   #2563EB Blue   — navigation, links, secondary buttons
     Secondary #FF7A00 Orange — Buy Now, prices, discount badges, main CTA
     Accent    #65C466 Green  — in stock, success, delivery
   Type : Poppins (headings / UI) · Hind Siliguri (body, Bangla-capable)
   ========================================================================== */

:root {
	/* Brand */
	--sj-blue: #2563EB;
	--sj-blue-600: #1D4ED8;
	--sj-blue-700: #1E40AF;
	--sj-blue-100: #DBE5FF;
	--sj-blue-50: #EFF4FF;
	--sj-orange: #FF7A00;
	--sj-orange-600: #E86D00;
	--sj-orange-100: #FFE0C2;
	--sj-orange-50: #FFF3E6;
	--sj-green: #65C466;
	--sj-green-600: #4FAE50;
	--sj-green-50: #EFFAEF;

	/* Neutrals */
	--sj-ink: #0F172A;
	--sj-body: #334155;
	--sj-muted: #64748B;
	--sj-line: #E2E8F0;
	--sj-soft: #F1F5F9;
	--sj-white: #FFFFFF;

	/* Type */
	--sj-font-head: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--sj-font-body: "Hind Siliguri", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Layout */
	--sj-container: 1140px;
	--sj-gutter: 24px;
	--sj-radius: 10px;
	--sj-radius-sm: 8px;

	/* Customizer-driven (overridden by the inline style in inc/customizer.php) */
	--sj-logo-h: 52px;
	--sj-topbar-bg: #0F172A;
	--sj-topbar-text: #CBD5E1;
	--sj-logo-h-mobile: 38px;
	--sj-nav-bg: #2563EB;
	--sj-nav-text: #FFFFFF;
	--sj-cats-bg: #FF7A00;
	--sj-btn-buy-bg: #FF7A00;
	--sj-btn-buy-text: #FFFFFF;
	--sj-btn-cart-bg: #FFFFFF;
	--sj-btn-cart-text: #0F172A;
	--sj-btn-cart-border: #E2E8F0;
	--sj-btn-buy-bg-hover: #E86D00;
	--sj-btn-buy-text-hover: #FFFFFF;
	--sj-btn-cart-bg-hover: #F1F5F9;
	--sj-btn-cart-text-hover: #0F172A;
	--sj-btn-cart-border-hover: #CBD5E1;
	/* Height the Customizer asks for: 38px, or 0 when the bar is switched off.
	   Kept separate from --sj-topbar-h so breakpoints can zero it out without
	   fighting the inline style, which is printed after this file. */
	--sj-topbar-h-base: 38px;

	/* Header metrics — the sticky maths depends on these */
	--sj-topbar-h: var(--sj-topbar-h-base);
	--sj-main-h: 88px;
	--sj-nav-h: 52px;
	--sj-stick-offset: calc(var(--sj-topbar-h) + var(--sj-main-h));

	/* Elevation */
	--sj-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
	--sj-shadow-md: 0 8px 24px rgba(15, 23, 42, .10);
	--sj-shadow-lg: 0 16px 44px rgba(15, 23, 42, .14);

	--sj-ease: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* Gutter scale. Kept here with the layout tokens rather than in header.css,
   because every .sj-container on the site reads it — header, footer, shop,
   product, cart, account and the home sections alike. --sj-container is left
   alone: it is the Customizer's value and only shrinks by way of the viewport. */
@media (max-width: 1023px) {
	:root { --sj-gutter: 20px; }
}

@media (max-width: 767px) {
	:root { --sj-gutter: 16px; }
}

@media (max-width: 400px) {
	:root { --sj-gutter: 12px; }
}

*,
*::before,
*::after { box-sizing: border-box; }

body {
	margin: 0;
	font-family: var(--sj-font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--sj-body);
	background: var(--sj-white);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sj-font-head);
	color: var(--sj-ink);
	line-height: 1.25;
	margin: 0 0 .5em;
}

a {
	color: var(--sj-blue);
	text-decoration: none;
	transition: color var(--sj-ease);
}

img { max-width: 100%; height: auto; }

button { font-family: inherit; }

/* --sj-container is the *content* width, not the box width: the gutter is
   added outside it, so a 1140px setting really does give 1140px of content on
   any screen wide enough to hold it. Below that the box is simply the viewport
   less one gutter each side, which is what keeps every breakpoint edge-safe. */
.sj-container {
	width: 100%;
	max-width: calc(var(--sj-container) + var(--sj-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--sj-gutter);
}

.sj-icon { flex: none; display: block; }

/* Accessibility helpers ---------------------------------------------------- */

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

.sj-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 12px 20px;
	background: var(--sj-blue);
	color: #fff;
	font-family: var(--sj-font-head);
	font-weight: 600;
	border-radius: 0 0 var(--sj-radius-sm) 0;
}

.sj-skip-link:focus { left: 0; }

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--sj-blue);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Buttons ------------------------------------------------------------------ */

.sj-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: var(--sj-radius-sm);
	font-family: var(--sj-font-head);
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--sj-ease), color var(--sj-ease), border-color var(--sj-ease);
}

.sj-btn--primary { background: var(--sj-blue); color: #fff; }
.sj-btn--primary:hover { background: var(--sj-blue-600); color: #fff; }

.sj-btn--accent { background: var(--sj-orange); color: #fff; }
.sj-btn--accent:hover { background: var(--sj-orange-600); color: #fff; }

.sj-btn--ghost {
	background: #fff;
	color: var(--sj-blue);
	border-color: var(--sj-blue);
}
.sj-btn--ghost:hover { background: var(--sj-blue-50); }

/* Page content ------------------------------------------------------------- */

.sj-page-content { padding: 32px 0; }

.sj-page-title {
	margin-bottom: 24px;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -.02em;
}