/**
 * Novoshop Design System (ns-*)
 * Unified tokens, layout, and component classes for consistent UI/UX.
 */

/* ─── Design Tokens ─────────────────────────────────────────────── */
:root {
	--ns-color-primary: var(--primary-color, var(--primary, #1e3a5f));
	--ns-color-secondary: var(--secondary-color, #152238);
	--ns-color-accent: var(--accent-color, var(--ns-color-primary));
	--ns-color-text: var(--text, #222);
	--ns-color-text-muted: var(--muted, #6b7280);
	--ns-color-border: #e5e7eb;
	--ns-color-border-light: #f0f0f0;
	--ns-color-surface: #fff;
	--ns-color-surface-alt: #f4f5f9;
	--ns-color-surface-muted: #f8f9fa;

	--ns-container-max: var(--container, 1620px);
	--ns-gap-xs: 8px;
	--ns-gap-sm: 12px;
	--ns-gap-md: 18px;
	--ns-gap-lg: 24px;
	--ns-gap-xl: 32px;

	--ns-radius-sm: 4px;
	--ns-radius-md: var(--radius, 8px);
	--ns-radius-lg: 12px;

	--ns-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
	--ns-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.06);
	--ns-shadow-lg: 0 8px 24px rgba(31, 41, 55, 0.08);

	/* Island layout — صفحات فروشگاهی */
	--ns-page-bg: #f5f7fa;
	--ns-island-radius: 12px;
	--ns-island-border: 1px solid rgba(226, 232, 240, 0.85);
	--ns-island-shadow: 0 8px 24px rgba(31, 41, 55, 0.08);
	--ns-island-gap: 24px;
	--ns-island-padding: 24px;
	--ns-shell-padding: 20px;

	--ns-font-body: var(--novoshop-body-font, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
	--ns-font-heading: var(--novoshop-heading-font, var(--ns-font-body));
	--ns-font-size-sm: 13px;
	--ns-font-size-base: 14px;
	--ns-font-size-md: 16px;
	--ns-font-size-lg: 18px;
	--ns-font-size-xl: 22px;

	--ns-transition: 0.2s ease;
	--ns-header-z: 60;
	--ns-panel-z: 9999;
}

/* ─── Layout ────────────────────────────────────────────────────── */
.ns-container,
.container {
	max-width: var(--ns-container-max);
	margin-inline: auto;
	padding-inline: 16px;
	box-sizing: border-box;
}

.ns-site-main {
	display: block;
}

/* ─── Island page layout (یکسان در همه صفحات) ─────────────────── */
body.ns-island-page {
	background: var(--ns-page-bg) !important;
}

body.ns-island-page > .site-main.ns-site-main,
body.ns-island-page > .site-main.ns-site-main.container,
body.ns-island-page > .site-main.ns-site-main.ns-container {
	max-width: none;
	padding: 0;
	padding-inline: 0;
	background: transparent !important;
}

body.ns-island-page #primary.ns-page-shell,
body.ns-island-page #primary.main-con {
	max-width: var(--ns-container-max);
	width: 100%;
	margin-inline: auto;
	padding: var(--ns-shell-padding);
	box-sizing: border-box;
	background: transparent !important;
}

body.ns-island-page #main.site-main {
	max-width: none;
	padding: 0;
	margin: 0;
	background: transparent !important;
}

body.ns-island-page .ns-island-stack {
	display: flex;
	flex-direction: column;
	gap: var(--ns-island-gap);
	width: 100%;
}

body.ns-island-page .ns-island-stack > * {
	margin: 0;
}

/* Empty WC notices must not participate in island-stack flex gap */
body.ns-island-page .ns-island-stack > .woocommerce-notices-wrapper:empty,
body.ns-island-page .ns-island-stack > .woocommerce-notices-wrapper:not(:has(
	.woocommerce-message,
	.woocommerce-error,
	.woocommerce-info,
	.woocommerce-notice,
	[role="alert"]
)) {
	display: none !important;
}

.ns-island {
	width: 100%;
	max-width: none;
	margin: 0;
	box-sizing: border-box;
	background: var(--ns-color-surface);
	border-radius: var(--ns-island-radius);
	box-shadow: var(--ns-island-shadow);
	border: var(--ns-island-border);
	overflow: hidden;
}

/* Breadcrumb جزیره — wrapper همان کارت سفید است */
body.ns-island-page .breadcrumb-wrapper--island.ns-island {
	padding: 16px 24px;
}

body.ns-island-page .breadcrumb-wrapper--island .woocommerce-breadcrumb {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	width: 100% !important;
	box-sizing: border-box !important;
	font-size: 14px !important;
	color: var(--primary-color, #1e3a5f) !important;
	line-height: 1.6;
}

/* خنثی‌سازی پس‌زمینه‌های پراکنده صفحات */
body.ns-island-page .novoshop-checkout-modern,
body.ns-island-page .novoshop-wishlist-redesign,
body.ns-island-page .novoshop-cart-wrapper,
body.ns-island-page .my-account-dashboard,
body.ns-island-page .my-account-login,
body.ns-island-page .cart-page-container {
	background: transparent !important;
	min-height: 0 !important;
}

/* صفحات بدون #primary (سبد، تسویه، wishlist) */
body.ns-island-page.woocommerce-cart .cart-page-container,
body.ns-island-page.woocommerce-checkout .novoshop-checkout-modern,
body.ns-island-page .novoshop-wishlist-redesign {
	max-width: var(--ns-container-max);
	width: 100%;
	margin-inline: auto;
	padding: var(--ns-shell-padding);
	box-sizing: border-box;
}

body.ns-island-page.woocommerce-cart .novoshop-cart-wrapper > .container,
body.ns-island-page .wishlist-container {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: var(--ns-island-padding);
	background: var(--ns-color-surface);
	border-radius: var(--ns-island-radius);
	box-shadow: var(--ns-island-shadow);
	border: var(--ns-island-border);
	box-sizing: border-box;
}

body.ns-island-page.woocommerce-checkout .checkout-container {
	max-width: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ns-island-gap);
}

body.ns-island-page.woocommerce-checkout .checkout-progress-modern,
body.ns-island-page.woocommerce-checkout .checkout-main-grid {
	margin: 0;
	padding: var(--ns-island-padding);
	background: var(--ns-color-surface);
	border-radius: var(--ns-island-radius);
	box-shadow: var(--ns-island-shadow);
	border: var(--ns-island-border);
}

body.ns-island-page.woocommerce-account .woocommerce {
	max-width: var(--ns-container-max);
	width: 100%;
	margin-inline: auto;
	padding: var(--ns-shell-padding);
	box-sizing: border-box;
	background: transparent !important;
}

body.ns-island-page .wishlist-header,
body.ns-island-page .my-account-dashboard,
body.ns-island-page .my-account-login,
body.ns-island-page .my-account-page-container {
    padding-block: 0;
}

body.ns-island-page.woocommerce-checkout .checkout-progress-modern,
body.ns-island-page.woocommerce-cart .checkout-progress {
	margin-bottom: 0;
}

body.ns-island-page .ns-error-404 {
	background: var(--ns-page-bg) !important;
	min-height: auto;
}

@media (max-width: 768px) {
	:root {
		--ns-shell-padding: 15px;
		--ns-island-padding: 20px;
		--ns-island-gap: 20px;
	}
}

@media (max-width: 480px) {
	:root {
		--ns-shell-padding: 12px;
		--ns-island-padding: 16px;
		--ns-island-gap: 16px;
	}
}

.ns-section {
	background: var(--ns-color-surface);
	border: 1px solid var(--ns-color-border-light);
	border-radius: var(--ns-radius-md);
	padding: var(--ns-gap-md);
	margin-bottom: var(--ns-gap-md);
}

.ns-section__header {
	margin-bottom: var(--ns-gap-sm);
	padding-bottom: var(--ns-gap-sm);
	border-bottom: 1px solid var(--ns-color-border-light);
}

.ns-section__title,
.ns-sidebar__title,
.ns-widget__title {
	font-family: var(--ns-font-heading);
	font-size: var(--ns-font-size-lg);
	font-weight: 600;
	color: var(--ns-color-text);
	margin: 0 0 var(--ns-gap-sm);
	line-height: 1.4;
}

.ns-section__body {
	color: var(--ns-color-text-muted);
	font-size: var(--ns-font-size-base);
	line-height: 1.6;
}

/* ─── Widgets (footer, sidebar, shop) ─────────────────────────── */
.ns-widget,
.widget {
	color: var(--footer-text-color, var(--ns-color-text-muted));
	margin-bottom: var(--ns-gap-lg);
}

.ns-widget__title,
.widget-title,
.footer-widget-title {
	font-family: var(--ns-font-heading);
	font-size: var(--ns-font-size-lg);
	font-weight: 600;
	color: var(--footer-title-color, var(--ns-color-text));
	margin: 0 0 var(--ns-gap-sm);
	padding-bottom: var(--ns-gap-xs);
	line-height: 1.4;
}

.ns-widget ul,
.ns-widget .menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ns-widget ul li,
.ns-widget .menu li {
	margin-bottom: var(--ns-gap-xs);
}

.ns-widget a,
.widget a {
	color: var(--footer-text-color, var(--ns-color-text-muted));
	text-decoration: none;
	transition: color var(--ns-transition);
}

.ns-widget a:hover,
.widget a:hover {
	color: var(--ns-color-primary);
}

/* ─── Header ───────────────────────────────────────────────────── */
.ns-site-header,
.site-header {
	background: var(--header-bg-color, var(--ns-color-surface));
	border-bottom: 1px solid var(--ns-color-border-light);
	position: relative;
	z-index: var(--ns-header-z);
}

.ns-site-header .ns-header__top,
.header-top-bar {
	font-size: var(--ns-font-size-sm);
	color: var(--header-text-color, var(--ns-color-text-muted));
}

.ns-site-header .ns-header__main,
.header-main {
	padding-block: var(--ns-gap-sm);
}

.ns-site-header .header-gold-price {
	color: #fff;
	font-weight: 700;
	margin-inline-end: 10px;
}

.ns-site-header .header-gold-price .an-pulse {
	margin-top: 3px;
	margin-inline-end: 5px;
}

.ns-site-header button.user-menu-toggle,
.ns-site-header .user-menu-toggle,
.header-user button.user-menu-toggle,
.header-actions button.user-menu-toggle {
	background: transparent !important;
	border: none !important;
	color: var(--ns-color-primary) !important;
	box-shadow: none !important;
	cursor: pointer;
}

.ns-site-header button.user-menu-toggle:hover,
.ns-site-header .user-menu-toggle:hover {
	opacity: 0.85;
	color: var(--ns-color-primary) !important;
	background: transparent !important;
}

.ns-site-header button.user-menu-toggle:hover i,
.ns-site-header .user-menu-toggle:hover .user-name,
.ns-site-header .user-menu-toggle:hover .user-menu-arrow {
	color: var(--ns-color-primary) !important;
}

/* ─── Footer ───────────────────────────────────────────────────── */
.ns-site-footer,
.site-footer {
	padding-block: 20px;
	margin-top: 28px;
	border-top: 1px solid var(--ns-color-border-light);
	background: var(--ns-footer-bg, var(--ns-color-surface));
	color: var(--footer-text-color, var(--ns-color-text-muted));
}

.ns-footer__widgets,
.footer-widgets {
	margin-bottom: var(--ns-gap-xl);
}

.ns-footer__row,
.footer-widgets-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ns-gap-lg);
}

.ns-footer__column,
.footer-widget-column {
	flex: 1;
	min-width: 250px;
}

.ns-footer__bottom,
.footer-bottom {
	padding-top: var(--ns-gap-lg);
	border-top: 1px solid var(--ns-color-border-light);
	text-align: center;
}

.ns-footer__bottom p,
.footer-bottom p {
	margin: 0;
	font-size: var(--ns-font-size-base);
	color: var(--footer-text-color, var(--ns-color-text-muted));
}

.ns-footer__lazy-placeholder,
.novoshop-footer-lazy-placeholder {
	min-height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ns-color-surface-muted);
	border-radius: var(--ns-radius-sm);
	color: var(--ns-color-text-muted);
	font-size: var(--ns-font-size-base);
}

.ns-footer__lazy-inner {
	text-align: center;
}

.ns-footer__lazy-icon {
	margin-bottom: 10px;
}

.ns-footer__lazy-icon svg {
	opacity: 0.5;
}

/* ─── Mobile Panels (nav, cart, user) ───────────────────────────── */
.ns-panel,
.novoshop-side-panel {
	background: var(--ns-color-surface);
}

.ns-panel__head,
.novoshop-side-panel .side-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--ns-gap-md);
}

.ns-panel__head--primary,
.novoshop-side-cart .side-head,
.novoshop-side-user .side-head {
	background: linear-gradient(
		135deg,
		var(--primary-color, var(--ns-color-primary)) 0%,
		var(--ns-panel-head-end, var(--primary-color, var(--ns-color-primary))) 100%
	);
	color: #fff;
}

.ns-panel__title,
.side-title {
	font-size: var(--ns-font-size-md);
	font-weight: 600;
}

.ns-mobile-menu-logo {
	max-width: 120px;
	height: auto;
	display: block;
	margin: 10px auto;
}

/* ─── Archive / Shop ───────────────────────────────────────────── */
.ns-archive:not(.ns-island),
.novoshop-archive-redesign:not(.ns-island) {
	background-color: transparent;
	padding-block: 0;
}

.ns-archive.ns-island,
.novoshop-archive-redesign.ns-island {
	padding: var(--ns-island-padding);
	background: var(--ns-color-surface);
	border-radius: var(--ns-island-radius);
	box-shadow: var(--ns-island-shadow);
	border: var(--ns-island-border);
	overflow: hidden;
}

.ns-archive__container,
.archive-container {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

.ns-sidebar,
.archive-sidebar-left {
	background: var(--ns-color-surface);
	border: 1px solid var(--ns-color-border-light);
	border-radius: var(--ns-radius-md);
}

.ns-sidebar__section,
.sidebar-section {
	padding: var(--ns-gap-md);
	border-bottom: 1px solid var(--ns-color-border-light);
}

.ns-sidebar__section:last-child,
.sidebar-section:last-child {
	border-bottom: none;
}

.ns-category-list,
.category-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ns-category-list__item,
.category-item {
	margin-bottom: var(--ns-gap-xs);
}

.ns-category-list__link,
.category-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--ns-gap-xs) var(--ns-gap-sm);
	border-radius: var(--ns-radius-sm);
	color: var(--ns-color-text);
	text-decoration: none;
	font-size: var(--ns-font-size-base);
	transition: background var(--ns-transition), color var(--ns-transition);
}

.ns-category-list__link:hover,
.ns-category-list__link.is-active,
.category-list a:hover,
.category-list a.active {
	background: color-mix(in srgb, var(--ns-color-primary) 8%, transparent);
	color: var(--ns-color-primary);
}

.ns-category-list__count,
.category-count {
	color: var(--ns-color-text-muted);
	font-size: var(--ns-font-size-sm);
}

/* ─── Product Card ─────────────────────────────────────────────── */
.ns-product-card,
.product-card {
	background: var(--ns-color-surface);
	border: 1px solid var(--ns-color-border-light);
	border-radius: var(--ns-radius-md);
	overflow: hidden;
	transition: box-shadow var(--ns-transition);
}

.ns-product-card:hover,
.product-card:hover {
	box-shadow: var(--ns-shadow-lg);
}

/* ─── Buttons ──────────────────────────────────────────────────── */
.ns-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ns-gap-xs);
	padding: 10px 16px;
	border: none;
	border-radius: var(--ns-radius-sm);
	background: var(--button-color, var(--ns-color-primary));
	color: var(--button-text-color, #fff);
	font-family: var(--ns-font-body);
	font-size: var(--ns-font-size-base);
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: opacity var(--ns-transition), transform var(--ns-transition);
}

.ns-btn:hover {
	opacity: 0.9;
}

.ns-btn--ghost {
	background: transparent;
	color: var(--ns-color-primary);
	border: 1px solid var(--ns-color-border);
}

.ns-cart__loading[hidden] {
	display: none !important;
}

.ns-text-center { text-align: center; }
.ns-text-muted { color: var(--ns-color-text-muted); }
.ns-sr-only,
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ─── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
	.ns-footer__column,
	.footer-widget-column {
		min-width: 100%;
		flex: 1 1 100%;
	}

	.ns-section__title,
	.ns-widget__title,
	.footer-widget-title {
		font-size: var(--ns-font-size-md);
	}
}