/**
 * Kupiana — application stylesheet
 *
 * Layered on top of Bootstrap 5.3. Organised as:
 *   1. Design tokens (light + dark)
 *   2. Base
 *   3. Shared components
 *   4. Admin shell
 *   5. Storefront
 *   6. Utilities, animations, responsive
 */

/* ==================================================================
   1. Design tokens
   ================================================================== */

:root {
	/*
	| Brand palette ---------------------------------------------------------
	|
	| Primary is Kupiana terracotta (#cc4e3a) — the chilli red from the logo.
	| Everything else is tuned around it rather than left on the stock
	| blue-grey scale:
	|
	|  - Neutrals are warm. A cool slate grey next to terracotta reads dirty;
	|    these greys carry a little red so surfaces sit under the brand colour.
	|  - Success is a leaf green taken from the logo's sprig, not emerald.
	|  - Info is teal, the classic complement to a warm red.
	|  - Warning is turmeric amber — far enough round the wheel (38 deg vs 8)
	|    to stay legible beside primary.
	|  - Danger is a cool crimson ON PURPOSE. A "deeper red" would sit at the
	|    same hue as primary and become indistinguishable in a 12%-tint badge,
	|    which is exactly where destructive actions must not be ambiguous.
	*/
	--k-primary:        #cc4e3a;
	--k-primary-hover:  #ae3f2d;
	--k-primary-dark:   #933425;
	--k-primary-soft:   rgba(204, 78, 58, .10);
	--k-primary-rgb:    204, 78, 58;

	/*
	| Accessible interactive shade.
	|
	| White text on the brand #cc4e3a measures 4.45:1 — just under the WCAG AA
	| threshold of 4.5 for normal text, which button labels and links are.
	| This is 2% darker (4.95:1) and visually indistinguishable, so it carries
	| anything with text on it while #cc4e3a stays the brand colour for washes,
	| borders, gradients and focus rings.
	|
	| To use the exact brand hex everywhere instead, set this to #cc4e3a and
	| accept the 4.45 ratio — it is a one-line change.
	*/
	--k-primary-ink:    #c24733;
	--k-primary-ink-rgb: 194, 71, 51;

	--k-secondary:      #7c6a60;
	--k-success:        #4b8b3b;
	--k-success-fill:   #437d35;
	--k-info:           #0f7d8c;
	--k-warning:        #d59120;
	--k-danger:         #a4133c;
	--k-dark:           #2a1a12;

	/* Readable text tones for the soft-tinted badges. */
	--k-success-ink:    #386b2c;
	--k-warning-ink:    #94621a;
	--k-info-ink:       #0b616d;

	--k-bg:             #faf6f2;
	--k-surface:        #ffffff;
	--k-surface-alt:    #f6efe8;
	--k-border:         #e9dfd6;
	--k-text:           #2c1e16;
	--k-text-muted:     #7b6a5f;

	--k-sidebar-bg:     #2a1a12;
	--k-sidebar-text:   #c4ab9c;
	--k-sidebar-active: #ffffff;
	--k-sidebar-width:  264px;
	--k-topbar-height:  64px;

	--k-radius-sm: .5rem;
	--k-radius:    .75rem;
	--k-radius-lg: 1rem;

	/* Shadows carry a little brown so they read as warm depth, not grey haze. */
	--k-shadow-sm: 0 1px 2px rgba(74, 44, 30, .06);
	--k-shadow:    0 4px 16px rgba(74, 44, 30, .10);
	--k-shadow-lg: 0 12px 32px rgba(74, 44, 30, .15);

	--k-transition: 200ms cubic-bezier(.4, 0, .2, 1);

	/*
	| Bootstrap bridge. Utilities such as .text-primary resolve through
	| --bs-*-rgb, so both the hex and the rgb triplet have to be set or half
	| the framework stays blue.
	*/
	--bs-primary:          var(--k-primary-ink);
	--bs-primary-rgb:      var(--k-primary-ink-rgb);
	--bs-secondary:        var(--k-secondary);
	--bs-secondary-rgb:    124, 106, 96;
	--bs-success:          var(--k-success);
	--bs-success-rgb:      75, 139, 59;
	--bs-info:             var(--k-info);
	--bs-info-rgb:         15, 125, 140;
	--bs-warning:          var(--k-warning);
	--bs-warning-rgb:      213, 145, 32;
	--bs-danger:           var(--k-danger);
	--bs-danger-rgb:       164, 19, 60;
	--bs-dark:             var(--k-dark);
	--bs-dark-rgb:         42, 26, 18;

	--bs-link-color:       var(--k-primary-ink);
	--bs-link-color-rgb:   var(--k-primary-ink-rgb);
	--bs-link-hover-color: var(--k-primary-hover);
	--bs-focus-ring-color: rgba(204, 78, 58, .25);

	--bs-border-radius: var(--k-radius);
	--bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Dark theme. Toggled by app.js writing data-bs-theme on <html>. */
[data-bs-theme="dark"] {
	/* Warm near-blacks, so the terracotta still looks like terracotta rather
	   than orange sitting on cold slate. */
	--k-bg:          #17100b;
	--k-surface:     #1f1610;
	--k-surface-alt: #2a1e16;
	--k-border:      #3a291e;
	--k-text:        #f2e9e1;
	--k-text-muted:  #b3a094;
	--k-sidebar-bg:  #120c08;

	/* Lifted a step: the light-mode tones go muddy on a dark backdrop. */
	--k-primary:     #e4674f;
	--k-primary-rgb: 228, 103, 79;
	--k-success-ink: #86c273;
	--k-warning-ink: #e0aa4e;
	--k-info-ink:    #52b6c4;

	--k-shadow:      0 4px 16px rgba(0, 0, 0, .45);
	--k-shadow-lg:   0 12px 32px rgba(0, 0, 0, .55);
}

/* ==================================================================
   2. Base
   ================================================================== */

body {
	font-family: var(--bs-body-font-family);
	background: var(--k-bg);
	color: var(--k-text);
	font-size: .9375rem;
	-webkit-font-smoothing: antialiased;
}

/* Link text is small, so it uses the AA-safe shade rather than raw brand. */
a { color: var(--k-primary-ink); text-decoration: none; transition: color var(--k-transition); }
a:hover { color: var(--k-primary-hover); }

/* On dark surfaces the ink is too heavy — fall back to the lifted brand tone. */
[data-bs-theme="dark"] a { color: var(--k-primary); }

h1, h2, h3, h4, h5, h6 { font-weight: 600; color: var(--k-text); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--k-border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--k-secondary); }

:focus-visible { outline: 2px solid var(--k-primary); outline-offset: 2px; }

/* ==================================================================
   3. Shared components
   ================================================================== */

.card {
	background: var(--k-surface);
	border: 1px solid var(--k-border);
	border-radius: var(--k-radius);
	box-shadow: var(--k-shadow-sm);
}
.card-header {
	background: transparent;
	border-bottom: 1px solid var(--k-border);
	padding: 1rem 1.25rem;
	font-weight: 600;
}
.card-body { padding: 1.25rem; }

.btn { border-radius: var(--k-radius-sm); font-weight: 500; transition: all var(--k-transition); }
.btn:active { transform: translateY(1px); }

/*
| Bootstrap button variants ---------------------------------------------------
|
| Bootstrap 5.3 compiles .btn-* and .btn-outline-* to LITERAL hex through Sass,
| not through --bs-primary, so overriding the custom properties above is not
| enough — without this block the ~100 buttons in the views stay Bootstrap blue.
| Each variant is re-declared through its own --bs-btn-* API so hover, active,
| focus and disabled states all follow.
*/
.btn-primary {
	--bs-btn-bg: var(--k-primary-ink);
	--bs-btn-border-color: var(--k-primary-ink);
	--bs-btn-hover-bg: var(--k-primary-hover);
	--bs-btn-hover-border-color: var(--k-primary-hover);
	--bs-btn-active-bg: var(--k-primary-dark);
	--bs-btn-active-border-color: var(--k-primary-dark);
	--bs-btn-disabled-bg: var(--k-primary-ink);
	--bs-btn-disabled-border-color: var(--k-primary-ink);
	--bs-btn-focus-shadow-rgb: var(--k-primary-rgb);
}
.btn-outline-primary {
	--bs-btn-color: var(--k-primary-ink);
	--bs-btn-border-color: var(--k-primary);
	--bs-btn-hover-bg: var(--k-primary-ink);
	--bs-btn-hover-border-color: var(--k-primary-ink);
	--bs-btn-active-bg: var(--k-primary-hover);
	--bs-btn-active-border-color: var(--k-primary-hover);
	--bs-btn-disabled-color: var(--k-primary-ink);
	--bs-btn-disabled-border-color: var(--k-primary);
	--bs-btn-focus-shadow-rgb: var(--k-primary-rgb);
}
.btn-outline-secondary {
	--bs-btn-color: var(--k-text);
	--bs-btn-border-color: var(--k-border);
	--bs-btn-hover-color: var(--k-text);
	--bs-btn-hover-bg: var(--k-surface-alt);
	--bs-btn-hover-border-color: var(--k-secondary);
	--bs-btn-active-color: var(--k-text);
	--bs-btn-active-bg: var(--k-surface-alt);
	--bs-btn-active-border-color: var(--k-secondary);
	--bs-btn-disabled-color: var(--k-text-muted);
	--bs-btn-disabled-border-color: var(--k-border);
	--bs-btn-focus-shadow-rgb: 124, 106, 96;
}
.btn-danger {
	--bs-btn-bg: var(--k-danger);
	--bs-btn-border-color: var(--k-danger);
	--bs-btn-hover-bg: #870f31;
	--bs-btn-hover-border-color: #870f31;
	--bs-btn-active-bg: #6f0c28;
	--bs-btn-active-border-color: #6f0c28;
	--bs-btn-disabled-bg: var(--k-danger);
	--bs-btn-disabled-border-color: var(--k-danger);
	--bs-btn-focus-shadow-rgb: 164, 19, 60;
}
.btn-outline-danger {
	--bs-btn-color: var(--k-danger);
	--bs-btn-border-color: var(--k-danger);
	--bs-btn-hover-bg: var(--k-danger);
	--bs-btn-hover-border-color: var(--k-danger);
	--bs-btn-active-bg: #870f31;
	--bs-btn-active-border-color: #870f31;
	--bs-btn-disabled-color: var(--k-danger);
	--bs-btn-disabled-border-color: var(--k-danger);
	--bs-btn-focus-shadow-rgb: 164, 19, 60;
}
.btn-success {
	--bs-btn-bg: var(--k-success-fill);
	--bs-btn-border-color: var(--k-success-fill);
	--bs-btn-hover-bg: #3d7530;
	--bs-btn-hover-border-color: #3d7530;
	--bs-btn-focus-shadow-rgb: 75, 139, 59;
}
.btn-dark {
	--bs-btn-bg: var(--k-dark);
	--bs-btn-border-color: var(--k-dark);
	--bs-btn-hover-bg: #1c110b;
	--bs-btn-hover-border-color: #1c110b;
	--bs-btn-focus-shadow-rgb: 42, 26, 18;
}
.btn-light {
	--bs-btn-bg: var(--k-surface-alt);
	--bs-btn-border-color: var(--k-border);
	--bs-btn-color: var(--k-text);
	--bs-btn-hover-bg: var(--k-border);
	--bs-btn-hover-border-color: var(--k-secondary);
	--bs-btn-hover-color: var(--k-text);
}
.btn-link { --bs-btn-color: var(--k-primary); --bs-btn-hover-color: var(--k-primary-hover); }

/* Alerts are compiled the same way. */
.alert-danger  { --bs-alert-color: #7d0e2d; --bs-alert-bg: rgba(164, 19, 60, .10); --bs-alert-border-color: rgba(164, 19, 60, .24); }
.alert-warning { --bs-alert-color: var(--k-warning-ink); --bs-alert-bg: rgba(213, 145, 32, .12); --bs-alert-border-color: rgba(213, 145, 32, .28); }
.alert-success { --bs-alert-color: var(--k-success-ink); --bs-alert-bg: rgba(75, 139, 59, .12); --bs-alert-border-color: rgba(75, 139, 59, .26); }
.alert-info    { --bs-alert-color: var(--k-info-ink); --bs-alert-bg: rgba(15, 125, 140, .10); --bs-alert-border-color: rgba(15, 125, 140, .24); }
.alert-light   { --bs-alert-color: var(--k-text); --bs-alert-bg: var(--k-surface-alt); --bs-alert-border-color: var(--k-border); }

/* Remaining framework bits that hardcode the old accent. */
.form-check-input:checked { background-color: var(--k-primary); border-color: var(--k-primary); }
.form-check-input:focus   { border-color: var(--k-primary); box-shadow: 0 0 0 .25rem var(--k-primary-soft); }
.progress                 { --bs-progress-bar-bg: var(--k-primary); background: var(--k-surface-alt); }
.dropdown-item.active,
.dropdown-item:active     { background-color: var(--k-primary); }
.nav-pills                { --bs-nav-pills-link-active-bg: var(--k-primary); }
.list-group               { --bs-list-group-active-bg: var(--k-primary); --bs-list-group-active-border-color: var(--k-primary); }
.accordion                { --bs-accordion-active-color: var(--k-primary); --bs-accordion-active-bg: var(--k-primary-soft); --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem var(--k-primary-soft); }

.btn-icon {
	width: 38px; height: 38px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0; border-radius: var(--k-radius-sm);
}

.badge-soft { font-weight: 500; padding: .35em .7em; border-radius: 999px; }
.badge-soft-primary   { background: rgba(204, 78, 58, .13);  color: var(--k-primary-dark, var(--k-primary)); }
.badge-soft-success   { background: rgba(75, 139, 59, .14);  color: var(--k-success-ink); }
.badge-soft-danger    { background: rgba(164, 19, 60, .12);  color: var(--k-danger); }
.badge-soft-warning   { background: rgba(213, 145, 32, .16); color: var(--k-warning-ink); }
.badge-soft-info      { background: rgba(15, 125, 140, .13); color: var(--k-info-ink); }
.badge-soft-secondary { background: rgba(124, 106, 96, .14); color: #78675d; }
.badge-soft-dark      { background: rgba(42, 26, 18, .10);   color: var(--k-dark); }

.bg-soft-primary   { background: rgba(204, 78, 58, .13);  color: var(--k-primary-dark, var(--k-primary)); }
.bg-soft-success   { background: rgba(75, 139, 59, .14);  color: var(--k-success-ink); }
.bg-soft-danger    { background: rgba(164, 19, 60, .12);  color: var(--k-danger); }
.bg-soft-warning   { background: rgba(213, 145, 32, .16); color: var(--k-warning-ink); }
.bg-soft-info      { background: rgba(15, 125, 140, .13); color: var(--k-info-ink); }
.bg-soft-secondary { background: rgba(124, 106, 96, .14); color: #78675d; }

/* On the dark theme a 13% tint of a mid-tone disappears; lift both the wash
   and the ink so soft badges keep their contrast. */
[data-bs-theme="dark"] .badge-soft-primary,
[data-bs-theme="dark"] .bg-soft-primary   { background: rgba(228, 103, 79, .20); color: #f0917c; }
[data-bs-theme="dark"] .badge-soft-danger,
[data-bs-theme="dark"] .bg-soft-danger    { background: rgba(164, 19, 60, .26);  color: #eb7f9d; }
[data-bs-theme="dark"] .badge-soft-dark   { background: rgba(255, 255, 255, .10); color: var(--k-text); }

.form-control, .form-select {
	border-radius: var(--k-radius-sm);
	border-color: var(--k-border);
	background: var(--k-surface);
	color: var(--k-text);
	padding: .55rem .85rem;
}
.form-control:focus, .form-select:focus {
	border-color: var(--k-primary);
	box-shadow: 0 0 0 3px var(--k-primary-soft);
}
.form-label { font-weight: 500; margin-bottom: .35rem; font-size: .875rem; }
.required-mark { color: var(--k-danger); }

/* Tables */
.table-card { overflow: hidden; }
.table-responsive { border-radius: var(--k-radius); }
.table {
	margin-bottom: 0;
	color: var(--k-text);
	--bs-table-bg: var(--k-surface);
}
.table > thead > tr > th {
	background: var(--k-surface-alt);
	border-bottom: 1px solid var(--k-border);
	font-size: .75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--k-text-muted);
	white-space: nowrap;
	padding: .85rem 1rem;
}
.table > tbody > tr > td {
	padding: .85rem 1rem;
	vertical-align: middle;
	border-color: var(--k-border);
}
.table > tbody > tr:hover > td { background: var(--k-surface-alt); }

.table-sort { color: inherit; display: inline-flex; align-items: center; gap: .35rem; }
.table-sort:hover, .table-sort.is-active { color: var(--k-primary); }
.table-sort i { opacity: .5; font-size: .75rem; }
.table-sort.is-active i { opacity: 1; }

.table-toolbar {
	display: flex; flex-wrap: wrap; gap: .75rem;
	align-items: center; justify-content: space-between;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--k-border);
}

.bulk-bar {
	display: none;
	align-items: center; gap: .75rem;
	padding: .75rem 1.25rem;
	background: var(--k-primary-soft);
	border-bottom: 1px solid var(--k-border);
}
.bulk-bar.is-visible { display: flex; }

/* Pagination */
.pagination .page-link {
	border-radius: var(--k-radius-sm);
	margin: 0 2px;
	border-color: var(--k-border);
	color: var(--k-text);
	background: var(--k-surface);
}
.pagination .page-item.active .page-link {
	background: var(--k-primary-ink);
	border-color: var(--k-primary-ink);
	color: #fff;
}

/* Empty state */
.empty-state-icon {
	width: 72px; height: 72px; margin: 0 auto;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--k-surface-alt);
	color: var(--k-text-muted);
	font-size: 1.75rem;
}

/* Stat card */
.stat-card { transition: transform var(--k-transition), box-shadow var(--k-transition); }
.stat-card:hover { transform: translateY(-2px); box-shadow: var(--k-shadow); }
.stat-icon {
	width: 48px; height: 48px; flex-shrink: 0;
	display: flex; align-items: center; justify-content: center;
	border-radius: var(--k-radius);
	font-size: 1.15rem;
}
.stat-label { font-size: .8125rem; color: var(--k-text-muted); }
.stat-value { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }

/* Toasts */
.toast-container { z-index: 1090; }
.k-toast {
	min-width: 300px;
	border: none;
	border-left: 4px solid var(--k-primary);
	border-radius: var(--k-radius-sm);
	box-shadow: var(--k-shadow-lg);
	background: var(--k-surface);
	color: var(--k-text);
}
.k-toast.toast-success { border-left-color: var(--k-success); }
.k-toast.toast-error   { border-left-color: var(--k-danger); }
.k-toast.toast-warning { border-left-color: var(--k-warning); }
.k-toast.toast-info    { border-left-color: var(--k-info); }
.k-toast .toast-icon { font-size: 1.1rem; }
.k-toast.toast-success .toast-icon { color: var(--k-success); }
.k-toast.toast-error   .toast-icon { color: var(--k-danger); }
.k-toast.toast-warning .toast-icon { color: var(--k-warning); }
.k-toast.toast-info    .toast-icon { color: var(--k-info); }

/* Confirm modal */
.confirm-icon {
	width: 60px; height: 60px; margin: 0 auto;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: rgba(164, 19, 60, .12);
	color: var(--k-danger);
	font-size: 1.5rem;
}

/* Loading overlay */
.loading-overlay {
	position: fixed; inset: 0; z-index: 2000;
	display: none; align-items: center; justify-content: center;
	background: rgba(255, 255, 255, .7);
	backdrop-filter: blur(2px);
}
[data-bs-theme="dark"] .loading-overlay { background: rgba(23, 16, 11, .72); }
.loading-overlay.is-active { display: flex; }

/* ==================================================================
   4. Admin shell
   ================================================================== */

.admin-body { background: var(--k-bg); }

.admin-layout { display: flex; min-height: 100vh; }

.admin-sidebar {
	width: var(--k-sidebar-width);
	flex-shrink: 0;
	background: var(--k-sidebar-bg);
	color: var(--k-sidebar-text);
	display: flex;
	flex-direction: column;
	position: fixed;
	inset: 0 auto 0 0;
	z-index: 1040;
	transition: transform var(--k-transition);
}

.sidebar-brand {
	height: var(--k-topbar-height);
	display: flex; align-items: center; justify-content: space-between;
	padding: 0 1.25rem;
	border-bottom: 1px solid rgba(255, 255, 255, .08);
	flex-shrink: 0;
}
.sidebar-brand a { color: #fff; font-weight: 700; font-size: 1.05rem; }
.brand-mark {
	width: 34px; height: 34px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: var(--k-radius-sm);
	background: var(--k-primary);
	color: #fff;
}
.brand-logo {
	display: block;
	object-fit: contain;
	max-width: 100%;
}
.brand-logo-store {
	width: 86px;
	height: 86px;
}
.brand-logo-admin {
	width: 54px;
	height: 54px;
	filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .24));
}
.brand-logo-footer {
	width: 116px;
	height: 116px;
}
.brand-logo-auth {
	width: 112px;
	height: 112px;
	object-fit: contain;
}
.sidebar-close { color: var(--k-sidebar-text); }

.sidebar-nav { flex: 1; overflow-y: auto; padding: .75rem 0 1rem; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); }

.dashboard-brand-card {
	overflow: hidden;
	background:
		radial-gradient(circle at 12% 25%, rgba(204, 78, 58, .12), transparent 34%),
		radial-gradient(circle at 88% 80%, rgba(75, 139, 59, .10), transparent 36%),
		linear-gradient(135deg, #fff, #f9f2ea);
}
.dashboard-brand-logo {
	width: 120px;
	height: 120px;
	object-fit: contain;
	flex: 0 0 auto;
}

.sidebar-heading {
	padding: 1rem 1.5rem .4rem;
	font-size: .6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: rgba(196, 171, 156, .62);
}

.admin-sidebar .nav-link {
	display: flex; align-items: center; gap: .75rem;
	padding: .6rem 1.5rem;
	color: var(--k-sidebar-text);
	font-size: .875rem;
	font-weight: 500;
	border-left: 3px solid transparent;
	transition: all var(--k-transition);
}
.admin-sidebar .nav-link:hover {
	color: var(--k-sidebar-active);
	background: rgba(255, 255, 255, .05);
}
.admin-sidebar .nav-link.active {
	color: var(--k-sidebar-active);
	background: rgba(204, 78, 58, .22);
	border-left-color: var(--k-primary);
}
.nav-icon { width: 18px; text-align: center; font-size: .95rem; }
.nav-text { flex: 1; }
.nav-caret { font-size: .7rem; transition: transform var(--k-transition); }
.nav-toggle:not(.collapsed) .nav-caret { transform: rotate(90deg); }

.sidebar-submenu .nav-link { padding-left: 3.1rem; font-size: .8375rem; }
.nav-dot {
	width: 5px; height: 5px; border-radius: 50%;
	background: currentColor; opacity: .5; flex-shrink: 0;
}

.sidebar-footer {
	padding: 1rem 1.25rem;
	border-top: 1px solid rgba(255, 255, 255, .08);
	flex-shrink: 0;
}

.sidebar-backdrop {
	display: none;
	position: fixed; inset: 0; z-index: 1035;
	background: rgba(42, 26, 18, .55);
}
.sidebar-backdrop.is-visible { display: block; }

.admin-main {
	flex: 1;
	min-width: 0;
	margin-left: var(--k-sidebar-width);
	display: flex;
	flex-direction: column;
}

.admin-topbar {
	height: var(--k-topbar-height);
	display: flex; align-items: center; gap: 1rem;
	padding: 0 1.5rem;
	background: var(--k-surface);
	border-bottom: 1px solid var(--k-border);
	position: sticky; top: 0; z-index: 1030;
}
.topbar-title { font-size: 1.05rem; font-weight: 600; margin: 0; }
.sidebar-trigger { display: none; }

.topbar-search { position: relative; max-width: 380px; flex: 1; }
.topbar-search i {
	position: absolute; left: .85rem; top: 50%; transform: translateY(-50%);
	color: var(--k-text-muted); font-size: .875rem; pointer-events: none;
}
.topbar-search .form-control { padding-left: 2.4rem; background: var(--k-surface-alt); }

.topbar-actions { display: flex; align-items: center; gap: .35rem; }

.notification-dot {
	position: absolute; top: 7px; right: 8px;
	width: 8px; height: 8px; border-radius: 50%;
	background: var(--k-danger);
	border: 2px solid var(--k-surface);
}
.notification-menu { width: 340px; max-height: 400px; overflow-y: auto; }

.profile-trigger {
	display: flex; align-items: center; gap: .6rem;
	padding: .3rem .5rem; border: none; background: transparent; color: var(--k-text);
}
.avatar {
	width: 36px; height: 36px; flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--k-primary-ink); color: #fff;
	font-weight: 600; font-size: .875rem;
}
.profile-name { display: block; font-size: .8125rem; font-weight: 600; line-height: 1.2; }
.profile-role { display: block; font-size: .6875rem; color: var(--k-text-muted); }

[data-theme-toggle] .theme-icon-light { display: none; }
[data-bs-theme="dark"] [data-theme-toggle] .theme-icon-dark  { display: none; }
[data-bs-theme="dark"] [data-theme-toggle] .theme-icon-light { display: inline; }

.admin-content { flex: 1; padding: 1.5rem; }
.page-title { font-size: 1.5rem; font-weight: 700; margin: 0; }

.breadcrumb { font-size: .8125rem; }
.breadcrumb-item + .breadcrumb-item::before { content: "\203A"; }

.admin-footer {
	display: flex; align-items: center; justify-content: space-between;
	padding: 1rem 1.5rem;
	border-top: 1px solid var(--k-border);
	background: var(--k-surface);
	font-size: .8125rem;
	color: var(--k-text-muted);
}

/* ==================================================================
   5. Storefront
   ================================================================== */

.announcement-bar {
	background: var(--k-dark);
	color: rgba(255, 255, 255, .85);
	font-size: .8125rem;
	padding: .5rem 0;
}

.store-header {
	background: var(--k-surface);
	border-bottom: 1px solid var(--k-border);
	position: sticky; top: 0; z-index: 1030;
}
.store-header.is-stuck { box-shadow: var(--k-shadow); }

.header-main { padding: .85rem 0; }

.store-brand {
	display: inline-flex; align-items: center; gap: .6rem;
	font-weight: 700; font-size: 1.25rem; color: var(--k-text);
	flex-shrink: 0;
}
.store-brand:hover { color: var(--k-primary); }

.header-search { max-width: 560px; }
.search-wrap { position: relative; display: flex; }
.search-wrap > i {
	position: absolute; left: 1rem; top: 50%; transform: translateY(-50%);
	color: var(--k-text-muted); pointer-events: none; z-index: 3;
}
.search-wrap .form-control {
	padding-left: 2.6rem;
	border-radius: var(--k-radius-sm) 0 0 var(--k-radius-sm);
	background: var(--k-surface-alt);
}
.search-wrap .btn { border-radius: 0 var(--k-radius-sm) var(--k-radius-sm) 0; }

.search-suggestions {
	position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 1050;
	background: var(--k-surface);
	border: 1px solid var(--k-border);
	border-radius: var(--k-radius);
	box-shadow: var(--k-shadow-lg);
	max-height: 380px; overflow-y: auto;
}
.search-suggestions a {
	display: flex; align-items: center; gap: .75rem;
	padding: .6rem 1rem;
	color: var(--k-text);
	border-bottom: 1px solid var(--k-border);
}
.search-suggestions a:last-child { border-bottom: none; }
.search-suggestions a:hover { background: var(--k-surface-alt); }

.btn-icon-label {
	display: inline-flex; align-items: center; gap: .45rem;
	padding: .5rem .7rem; border: none; background: transparent;
	color: var(--k-text); font-size: .875rem;
}
.btn-icon-label:hover { color: var(--k-primary); }

.count-badge {
	position: absolute; top: 2px; right: 0;
	min-width: 18px; height: 18px; padding: 0 4px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px;
	background: var(--k-danger); color: #fff;
	font-size: .6875rem; font-weight: 600;
}

.store-nav { border-top: 1px solid var(--k-border); }
.nav-list {
	display: flex; flex-wrap: wrap; gap: .25rem;
	list-style: none; margin: 0; padding: 0;
}
.nav-list > li > a {
	display: block; padding: .75rem 1rem;
	color: var(--k-text); font-size: .875rem; font-weight: 500;
	border-bottom: 2px solid transparent;
}
.nav-list > li > a:hover { color: var(--k-primary); border-bottom-color: var(--k-primary); }

.has-mega { position: static; }
.mega-menu {
	display: none;
	position: absolute; left: 0; right: 0; z-index: 1040;
	background: var(--k-surface);
	border-top: 1px solid var(--k-border);
	box-shadow: var(--k-shadow-lg);
	padding: 1.5rem 0;
}
.has-mega:hover .mega-menu { display: block; }
.mega-col { min-width: 180px; }
.mega-col h6 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .04em; }
.mega-col ul { list-style: none; padding: 0; margin: 0; }
.mega-col ul a { display: block; padding: .3rem 0; font-size: .875rem; color: var(--k-text-muted); }
.mega-col ul a:hover { color: var(--k-primary); }

.store-main { min-height: 50vh; }
.store-body .container {
	width: 100%;
	max-width: none;
	padding-left: clamp(1rem, 2.5vw, 3rem);
	padding-right: clamp(1rem, 2.5vw, 3rem);
}
.store-body .container-fluid {
	padding-left: clamp(1rem, 2.5vw, 3rem) !important;
	padding-right: clamp(1rem, 2.5vw, 3rem) !important;
}

/* Product card — used across home, shop, category, related */
.product-card {
	background: var(--k-surface);
	border: 1px solid var(--k-border);
	border-radius: var(--k-radius);
	overflow: hidden;
	height: 100%;
	display: flex; flex-direction: column;
	transition: transform var(--k-transition), box-shadow var(--k-transition);
}
.product-card:hover { transform: translateY(-4px); box-shadow: var(--k-shadow-lg); }
.product-thumb { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--k-surface-alt); }
.product-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.product-card:hover .product-thumb img { transform: scale(1.06); }
.product-badge {
	position: absolute; top: .6rem; left: .6rem;
	padding: .2rem .55rem; border-radius: var(--k-radius-sm);
	background: var(--k-danger); color: #fff;
	font-size: .6875rem; font-weight: 600;
}
.product-actions {
	position: absolute; top: .6rem; right: .6rem;
	display: flex; flex-direction: column; gap: .4rem;
	opacity: 0; transform: translateX(8px);
	transition: all var(--k-transition);
}
.product-card:hover .product-actions { opacity: 1; transform: none; }
.product-actions .btn {
	width: 34px; height: 34px; padding: 0;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%; background: var(--k-surface);
	box-shadow: var(--k-shadow-sm); border: 1px solid var(--k-border);
	color: var(--k-text);
}
.product-actions .btn:hover { background: var(--k-primary); color: #fff; border-color: var(--k-primary); }
.product-body { padding: .85rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.product-brand { font-size: .75rem; color: var(--k-text-muted); text-transform: uppercase; letter-spacing: .03em; }
.product-name {
	font-size: .875rem; font-weight: 500; color: var(--k-text); line-height: 1.4;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-rating { font-size: .75rem; color: var(--k-warning); }
.product-price { display: flex; align-items: baseline; gap: .5rem; margin-top: auto; }
.price-now { font-size: 1.05rem; font-weight: 700; }
.price-mrp { font-size: .8125rem; color: var(--k-text-muted); text-decoration: line-through; }
.price-off { font-size: .8125rem; color: var(--k-success); font-weight: 600; }

.section-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.section-heading h2 { font-size: 1.35rem; margin: 0; }

.trust-strip { background: var(--k-surface); border-top: 1px solid var(--k-border); padding: 2rem 0; }
.trust-item { display: flex; align-items: center; gap: .85rem; }
.trust-item i { font-size: 1.4rem; color: var(--k-primary); width: 32px; text-align: center; }
.trust-item strong { display: block; font-size: .9375rem; }
.trust-item span { font-size: .8125rem; color: var(--k-text-muted); }

.newsletter-band { background: var(--k-primary-ink); color: #fff; padding: 2.5rem 0; }
.newsletter-band .form-control { border: none; }

.store-footer { background: var(--k-surface); border-top: 1px solid var(--k-border); padding: 3rem 0 1.5rem; }
.footer-heading { font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 1rem; }
.footer-links a, .footer-contact a { color: var(--k-text-muted); font-size: .875rem; }
.footer-links li { margin-bottom: .5rem; }
.footer-links a:hover, .footer-contact a:hover { color: var(--k-primary); }
.footer-contact li { display: flex; gap: .6rem; margin-bottom: .5rem; font-size: .875rem; color: var(--k-text-muted); }
.footer-contact i { width: 16px; color: var(--k-primary); }
.footer-divider { border-color: var(--k-border); margin: 2rem 0 1.25rem; }
.social-links { display: flex; gap: .5rem; margin-top: 1rem; }
.social-links a {
	width: 34px; height: 34px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%; background: var(--k-surface-alt); color: var(--k-text-muted);
}
.social-links a:hover { background: var(--k-primary); color: #fff; }
.payment-icons { display: flex; gap: .6rem; font-size: 1.5rem; color: var(--k-text-muted); }

.btn-back-to-top {
	position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1035;
	width: 44px; height: 44px; padding: 0; border-radius: 50%;
	display: none; align-items: center; justify-content: center;
	box-shadow: var(--k-shadow-lg);
}
.btn-back-to-top.is-visible { display: flex; }

/* Quantity stepper */
.qty-stepper {
	display: inline-flex; align-items: center;
	border: 1px solid var(--k-border); border-radius: var(--k-radius-sm); overflow: hidden;
}
.qty-stepper button {
	width: 34px; height: 36px; border: none; background: var(--k-surface-alt);
	color: var(--k-text); font-size: .875rem;
}
.qty-stepper button:hover { background: var(--k-primary); color: #fff; }
.qty-stepper input {
	width: 48px; height: 36px; border: none; text-align: center;
	background: var(--k-surface); color: var(--k-text);
	-moz-appearance: textfield;
}
.qty-stepper input::-webkit-outer-spin-button,
.qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ==================================================================
   6. Utilities, animations, responsive
   ================================================================== */

.skeleton {
	background: linear-gradient(90deg, var(--k-surface-alt) 25%, var(--k-border) 50%, var(--k-surface-alt) 75%);
	background-size: 200% 100%;
	animation: shimmer 1.4s infinite;
	border-radius: var(--k-radius-sm);
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

.fade-in-up { animation: fadeInUp 400ms ease both; }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

img[loading="lazy"] { background: var(--k-surface-alt); }

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

@media (max-width: 991.98px) {
	.admin-sidebar { transform: translateX(-100%); }
	.admin-sidebar.is-open { transform: none; }
	.admin-main { margin-left: 0; }
	.sidebar-trigger { display: inline-flex; }
	.admin-content { padding: 1rem; }
	.store-nav { display: none; }
	.store-nav.is-open { display: block; }
}

@media (max-width: 575.98px) {
	.page-title { font-size: 1.25rem; }
	.stat-value { font-size: 1.25rem; }
	.admin-topbar { padding: 0 1rem; }
	.k-toast { min-width: auto; width: calc(100vw - 2rem); }
	.brand-logo-store { width: 68px; height: 68px; }
	.brand-logo-footer,
	.brand-logo-auth,
	.dashboard-brand-logo { width: 92px; height: 92px; }
}

@media print {
	.admin-sidebar, .admin-topbar, .admin-footer,
	.store-header, .store-footer, .newsletter-band,
	.trust-strip, .btn-back-to-top, .toast-container { display: none !important; }
	.admin-main { margin-left: 0; }
	body { background: #fff; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}