/* Base */
body.site-body,
body {
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	background: #f3f4f6;
	color: #1f2937;
	line-height: 1.5;
}

/* Tokens */
:root {
	--color-primary: #2563eb;
	--color-primary-hover: #1e40af;
	--color-danger: #dc2626;
	--color-danger-hover: #b91c1c;
	--color-success: #16a34a;
	--color-surface: #ffffff;
	--color-bg: #f3f4f6;
	--color-text: #1f2937;
	--color-muted: #6b7280;
	--radius-sm: 6px;
	--radius-md: 8px;
	--shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
}

a {
	text-decoration: none;
	color: inherit;
}

img {
	max-width: 100%;
	display: block;
}

/* Inline icons */
.icon {
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: middle;
	fill: currentColor;
}
.icon-inline {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.icon-inline .icon {
	flex: 0 0 auto;
}
.social-links {
	display: flex;
	gap: 12px;
	margin-top: 12px;
}
.social-links a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14.4px;
}
.container {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 16px;
}
.form-container {
	max-width: 420px;
	margin: 80px auto;
}

/* Visibility */
.page { display: none; }
.page.active { display: block; }
.fade-in { animation: fadeIn .5s ease-in-out; }
@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}
.dropdown-menu { display: none; }
.dropdown-menu.active { display: block; }
.login-form-container,
.register-form-container { display: none; }
.login-form-container.active,
.register-form-container.active { display: block; }
.scroll-container::-webkit-scrollbar { height: 8px; }
.scroll-container::-webkit-scrollbar-thumb { background: #4a5568; border-radius: 4px; }
.scroll-container::-webkit-scrollbar-track { background: #e2e8f0; border-radius: 4px; }

/* Cards */
.card-centered,
.card {
	background: var(--color-surface);
	padding: 24px;
	border-radius: 8px;
	box-shadow: var(--shadow-sm);
}
.card-centered {
	max-width: 672px;
	margin-left: auto;
	margin-right: auto;
}
.card-compact { padding: 16px; }
.card-sm { max-width: 448px; margin: 0 auto; }
.card-lg { max-width: 896px; margin: 0 auto; }
.card-xl {
	background: var(--color-surface);
	border-radius: 12px;
	box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
	padding: 24px;
}
.card-xl-centered { max-width: 320px; margin: 0 auto; }
.card-xl-wide { max-width: 448px; margin: 0 auto; }
.p-8 { padding: 32px !important; }
.product-card-variant {
	background: var(--color-surface);
	border-radius: 8px;
	padding: 16px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05);
	border: 1px solid #e5e7eb;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	cursor: pointer;
	transition: box-shadow .3s ease;
}
.product-card-variant:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
.card-sm-centered { max-width: 384px; margin: 0 auto; }
.card-sm-centered { max-width: 384px; margin: 0 auto; }
.card-p-6 { padding: 24px; }

/* Modal */
.modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 50;
}
.modal-dialog {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 10px 25px rgba(0,0,0,0.12);
	max-width: 672px;
	padding: 20px;
	margin: 0 16px;
}
.modal-body { font-size: 14.4px; color: #374151; margin-bottom: 16px; }
.modal-body ul { margin-left: 20px; }
.modal-footer { display: flex; justify-content: flex-end; gap: 12px; }

/* Buttons */
.btn {
	display: inline-block;
	padding: 8px 16px;
	border-radius: 6px;
	cursor: pointer;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-secondary { background: #e5e7eb; color: #111827; }
.btn-secondary:hover { background: #d1d5db; }
.btn-danger { background: var(--color-danger); color: #fff; }
.btn-danger:hover { background: var(--color-danger-hover); }

/* Inputs */
.qty-input {
	width: 72px;
	padding: 6px 8px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
}

/* Main content */
.main-content { padding: 24px 16px; }
@media (min-width:768px) {
	.main-content { padding: 32px 0; }
}

/* Layout */
.site-header { background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.header-inner { display: flex; justify-content: space-between; align-items: center; padding: 16px; }
.brand { font-size: 28px; font-weight: 700; text-decoration: none; }
.nav-main { display: flex; gap: 16px; }
.nav-main a { text-decoration: none; font-weight: 500; position: relative; padding: 4px 0; transition: color .2s; }
.nav-main a:hover { color: #2563eb; }
.nav-main a.logout { color: #dc2626; }
.nav-main a.logout:hover { color: #b91c1c; }
.category-bar { background: #e5e7eb; border-bottom: 1px solid #d1d5db; }
.category-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 8px 0; margin: 0; list-style: none; }
.category-link { padding: 4px 14.4px; border-radius: 6px; font-size: 14.4px; background: transparent; transition: background .2s, color .2s; }
.category-link:hover { background: #2563eb; color: #ffffff; }
.hero { text-align: center; padding: 64px 16px; background: linear-gradient(90deg,#3b82f6,#4f46e5); color: #ffffff; }
.hero-title { font-size: 40px; font-weight: 700; margin: 0 0 16px; }
.hero-text { font-size: 18px; margin: 0; }
.hero-cta { margin-top: 24px; display: inline-block; background: #ffffff; color: var(--color-primary); padding: 12px 24px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,.1); font-weight: 600; }
.hero-cta:hover { background: #f3f4f6; }
.section { padding: 48px 0; }
.section-title { font-size: 24px; font-weight: 600; margin: 0 0 24px; }

/* Products */
.product-grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width:768px) { .product-grid { grid-template-columns: repeat(3,1fr); } }
.product-card { background: #ffffff; border-radius: 8px; padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.1); text-align: center; display: flex; flex-direction: column; }
.product-card img { border-radius: 8px; aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.product-card-title { font-size: 18px; font-weight: 600; margin: 12px 0 4px; }
.product-card-price { color: #4b5563; font-size: 15px; margin: 0 0 8px; }
.product-card .product-btn { margin-top: auto; background: #2563eb; color: #ffffff; padding: 8px 16px; border-radius: 6px; font-weight: 500; transition: background .2s; text-decoration: none; }
.product-card .product-btn:hover { background: #1e40af; }
.pager { margin-top: 24px; display: flex; justify-content: center; gap: 8px; }
.pager a,
.pager span { padding: 6px 12px; border-radius: 6px; background: #e5e7eb; font-size: 13px; font-weight: 500; color: #111827; text-decoration: none; }
.pager a:hover { background: #d1d5db; }
.pager .active { background: var(--color-primary); color: #ffffff; }

/* Forms */
.form-card { max-width: 448px; margin: 32px auto; }
.form-card h2 { font-size: 24px; font-weight: 600; margin: 0 0 16px; }
.form-input { width: 100%; padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 15px; }
.form-input + .form-input { margin-top: 12px; }
.form-actions { margin-top: 16px; }
.btn-block { width: 100%; text-align: center; }
.btn-sm { padding: 6px 12px; font-size: 13px; }

/* Tables */
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; padding: 12px 8px; font-weight: 600; border-bottom: 1px solid #e5e7eb; font-size: 14px; }
.table td { padding: 12px 8px; vertical-align: top; font-size: 14px; }
.table tbody tr + tr td { border-top: 1px solid #e5e7eb; }
.cart-line { display: flex; align-items: center; gap: 12px; }
.inline-form { display: flex; align-items: center; gap: 8px; }
.space-top-sm { margin-top: 8px !important; }
.space-top-md { margin-top: 16px !important; }
.space-top-lg { margin-top: 24px !important; }
.space-bottom-md { margin-bottom: 16px !important; }

/* Status text */
.status-error,
.message-error { color: var(--color-danger); }
.status-success,
.message-success { color: var(--color-success); }
.message-error,
.message-success { margin-bottom: 16px; font-size: 14px; }
.field-error { color: var(--color-danger); }
.text-muted { color: var(--color-muted); }

/* Footer */
footer.site-footer { background: #111827; color: #ffffff; margin-top: 32px; }
footer .footer-grid { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width:768px) { footer .footer-grid { grid-template-columns: repeat(4,1fr); } }
footer h3 { font-size: 16px; font-weight: 600; margin: 0 0 8px; }
footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer .footer-bottom { background: #1f2937; text-align: center; padding: 12px; font-size: 12px; position: relative; }
footer .footer-toplink { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); }

/* Transition */
.transition { transition: all .2s; }

/* Lists / Layout helpers */
.list-disc { list-style: disc; }
.pl-5 { padding-left: 20px; }
.space-y-2 > * + * { margin-top: 8px; }
.modal-dialog h3 { margin-top: 0; }

/* Headings */
.heading-page { font-size: 24px; font-weight: 600; margin: 0 0 16px; }
.heading-title { font-size: 24px; font-weight: 700; margin: 0; }
.heading-section { font-size: 20px; font-weight: 600; margin: 0 0 12px; }
.heading-sub { font-size: 15px; font-weight: 600; margin: 16px 0 8px; }
.heading-billing { font-size: 18px; font-weight: 600; margin: 0 0 12px; }

/* Text helpers */
.preline { white-space: pre-line; }
.small-muted { font-size: 12px; color: var(--color-muted); }
.error-text-sm { font-size: 12px; }
.para-spaced { margin-top: 16px; font-size: 15px; }

/* Pricing */
.price-sm { font-size: 17px; font-weight: 600; }
.price-lg { font-size: 20px; font-weight: 600; }
.total-amount { font-size: 20px; font-weight: 700; }

/* Images */
.img-card-md { width: 100%; height: 176px; object-fit: cover; border-radius: 8px; }
.img-fluid-rounded { width: 100%; object-fit: cover; border-radius: 8px; }
.img-thumb-sm { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; }

/* Flex */
.row-between { display: flex; align-items: center; justify-content: space-between; }
.row-between-wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.row-inline { display: flex; align-items: center; gap: 8px; }
.row-inline-gap { display: flex; align-items: center; gap: 16px; }
.btn-row { display: flex; gap: 8px; }

/* Grids */
.grid-single { display: grid; grid-template-columns: 1fr; gap: 24px; }
.field-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.address-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.responsive-mini-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 12px; }

/* Lists */
.list-plain { list-style: none; padding: 0; margin: 0 0 16px; }
.order-line { display: flex; justify-content: space-between; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid #e5e7eb; }

/* Labels */
.field-label { display: block; font-size: 12px; margin-bottom: 4px; }

/* Spacing */
.ml-sm { margin-left: 8px; }
.gap-xs { gap: 8px; }
.gap-sm { gap: 12px; }
.gap-md { gap: 16px; }
.mt-section { margin-top: 16px; }

/* Containers */
.actions-end { margin-top: 16px; display: flex; justify-content: flex-end; }
.pad-section { padding: 32px 16px; }

/* Checkout footer */
.form-footer-row { margin-top: 24px; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; width: 100%; }
.form-footer-row { white-space: nowrap; }
.form-footer-row .submit-box { justify-self: end; }
.pay-method-box { display: flex; flex-direction: column; min-width: 0; }
.pay-method-option { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; margin-top: 8px; cursor: pointer; }
.pay-method-option input { width: 16px; height: 16px; }
.submit-box { display: flex; align-items: flex-end; }
.form-footer-flex { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.form-footer-flex .pay-method-box { flex: 1 1 auto; }
.form-footer-flex .submit-box { flex: 0 0 auto; }
.mb-0 { margin-bottom: 0 !important; }

/* Form misc */
.inline-form-gap { display: flex; align-items: center; gap: 16px; }
.modal-title { font-size: 20px; font-weight: 600; margin-bottom: 12px; }
.text-sm { font-size: 13px; }
.remember-option { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 4px 0 12px 2px; cursor: pointer; }
.remember-checkbox { width: 14px; height: 14px; }

/* Toasts */
.toast-container { position: fixed; top: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 1000; pointer-events: none; }
.toast { background: var(--color-primary); color: var(--color-surface); padding: 10px 14px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.15); font-size: 13px; font-weight: 500; opacity: 0; transform: translateX(12px); transition: opacity .3s, transform .3s; pointer-events: auto; }
.toast-success { background: var(--color-success); }
.toast-error { background: var(--color-danger); }
.toast-show { opacity: 1; transform: translateX(0); }

/* Status / feedback */
.status-block { margin-top: 12px; font-size: 13.6px; }
.status-success { color: #16a34a; }
.status-error { color: #dc2626; }

/* Links */
.link-primary { color: var(--color-primary); }
.link-primary:hover { text-decoration: underline; }

/* Product detail */
.product-price-accent { color: var(--color-success); font-size: 20px; font-weight: 600; margin-top: 8px; }
.product-description { margin-top: 16px; color: #374151; white-space: pre-line; }
.product-error { margin-bottom: 12px; font-size: 12px; color: var(--color-danger); }
.product-error span { display: inline-block; }
.product-add-form { margin-top: 24px; display: flex; align-items: center; gap: 16px; }
.product-modal-wide { max-width: 896px; }

/* OTP specific */
.otp-error { color: var(--color-danger); font-weight: 600; margin: 8px 0; }