/* Al-Najah Brands: the brands page and the brand pages.
   Each brand passes its own accent in --nb-rgb (light mode) and --nb-rgb-hi
   (the lifted version used on dark grounds), both sampled from the packaging.
   Logical properties keep the layout correct in Arabic (RTL). */

.nb {
	--nb-r: 24px;
	--nb-ink: #1b2b3b;
	--nb-title: #2a4269;
	--nb-muted: #5a6b7f;
	--nb-surface: #ffffff;
	--nb-line: rgba(42, 66, 105, .12);
	--nb-accent: rgb(var(--nb-rgb));
	margin: 0 auto;
}
.nb *,
.nb *::before,
.nb *::after { box-sizing: border-box; }

/* ---- Brands page -------------------------------------------------------- */

.nb-head {
	max-width: 620px;
	margin: 0 auto 40px;
	text-align: center;
}
.nb-head-title {
	margin: 0 0 10px;
	font-size: clamp(32px, 4vw, 46px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -.01em;
	color: var(--nb-title);
}
.nb-head-text {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--nb-muted);
}

.nb-cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}
@media (max-width: 860px) {
	.nb-cards { grid-template-columns: minmax(0, 1fr); }
	/* One card per row: let the card hug its content instead of stretching. */
	.nb-card { min-height: 0; }
}

.nb-card {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 22px;
	min-height: 470px;
	padding: 34px 34px 28px;
	border: 1px solid rgba(var(--nb-rgb), .16);
	border-radius: var(--nb-r);
	overflow: hidden;
	background: linear-gradient(165deg, rgba(var(--nb-rgb), .12), rgba(var(--nb-rgb), .03) 46%, #fff 100%);
	color: var(--nb-ink);
	text-decoration: none;
	transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease, border-color .45s ease;
}
.nb-card:hover { text-decoration: none; }
.nb-card-glow {
	position: absolute;
	inset: auto -15% -32% -12%;
	height: 72%;
	z-index: -1;
	background: radial-gradient(58% 58% at 50% 62%, rgba(var(--nb-rgb), .3), rgba(var(--nb-rgb), 0) 72%);
	transition: transform .6s ease, opacity .6s ease;
}
.nb-card-count {
	display: inline-flex;
	align-items: center;
	padding: 5px 13px;
	border-radius: 999px;
	background: rgba(var(--nb-rgb), .12);
	color: var(--nb-accent);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .02em;
}
.nb-card-title {
	display: block;
	margin-top: 16px;
	font-size: clamp(28px, 3vw, 38px);
	font-weight: 700;
	line-height: 1.06;
	letter-spacing: -.015em;
	color: var(--nb-title);
}
.nb-card-desc {
	display: block;
	margin-top: 10px;
	max-width: 36ch;
	font-size: 15px;
	line-height: 1.6;
	color: var(--nb-muted);
}
.nb-card-go {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 15px;
	font-weight: 600;
	color: var(--nb-accent);
}

/* Product shots: one centred, or three overlapping with the middle in front.
   Some packshots are JPEGs on white; multiply drops that white into the card so
   cut-out PNGs and photographed packs sit together. On the dark grounds the
   products stand on a pale shelf instead, which keeps multiply readable. */
.nb-card-art,
.nb-hero-art {
	position: relative;
	display: block;
	height: 215px;
}
.nb-card-art img,
.nb-hero-art img {
	position: absolute;
	bottom: 0;
	width: auto;
	max-width: 46%;
	height: auto;
	max-height: 100%;
	object-fit: contain;
	transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.nb-card-art .nb-cut,
.nb-hero-art .nb-cut { filter: drop-shadow(0 18px 26px rgba(15, 28, 48, .16)); }
/* The shelf the packs stand on: photographed packs are shot on white, so a
   white panel hides their edges while cut-out PNGs simply sit on it. */
.nb-card-art::before,
.nb-hero-art::before {
	content: "";
	position: absolute;
	inset: 0 -4px;
	z-index: 0;
	border-radius: 18px;
	background: #ffffff;
	box-shadow: inset 0 0 0 1px rgba(15, 28, 48, .05);
}
.nb-art-1up img {
	left: 50%;
	max-width: 72%;
	transform: translateX(-50%);
}
.nb-art-2up .nb-art-1 { left: 8%; max-height: 88%; transform: rotate(-5deg); }
.nb-art-2up .nb-art-2 { right: 8%; max-height: 100%; transform: rotate(5deg); }
.nb-art-3up .nb-art-1 { left: 2%; max-height: 82%; z-index: 1; transform: rotate(-6deg); }
.nb-art-3up .nb-art-2 { left: 50%; max-height: 100%; max-width: 52%; z-index: 2; transform: translateX(-50%); }
.nb-art-3up .nb-art-3 { right: 2%; max-height: 78%; z-index: 1; transform: rotate(6deg); }

/* A banner picked on the category screen (Brand card image) takes the place of
   the product shots, shown whole at the shape the banners are designed in. */
.nb-card-cover {
	position: relative;
	display: block;
	aspect-ratio: 584 / 347;
	border-radius: 18px;
	overflow: hidden;
	background: #ffffff;
	box-shadow: 0 22px 44px -28px rgba(15, 28, 48, .5);
}
/* Specific enough to outrank the Site Polish fade-in rule, whose opacity
   transition is kept alongside the hover zoom. */
.nb.nb-brands .nb-card .nb-card-cover img {
	display: block;
	width: 100%;
	max-width: none;
	height: 100%;
	object-fit: cover;
	transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}

.nb-arrow { transition: transform .35s ease; }
[dir="rtl"] .nb-arrow { transform: scaleX(-1); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.nb-card:hover {
		transform: translateY(-6px);
		border-color: rgba(var(--nb-rgb), .32);
		box-shadow: 0 32px 60px -32px rgba(var(--nb-rgb), .5);
	}
	.nb-card:hover .nb-card-glow { transform: scale(1.1); }
	.nb-card:hover .nb-card-cover img { transform: scale(1.04); }
	.nb-card:hover .nb-art-1up img { transform: translateX(-50%) translateY(-8px) scale(1.03); }
	.nb-card:hover .nb-art-3up .nb-art-2 { transform: translateX(-50%) translateY(-9px) scale(1.03); }
	.nb-card:hover .nb-art-3up .nb-art-1 { transform: rotate(-9deg) translateY(-5px); }
	.nb-card:hover .nb-art-3up .nb-art-3 { transform: rotate(9deg) translateY(-5px); }
	.nb-card:hover .nb-arrow { transform: translateX(4px); }
	[dir="rtl"] .nb-card:hover .nb-arrow { transform: scaleX(-1) translateX(4px); }
}
.nb-card:focus-visible,
.nb-prod:focus-visible,
.nb-next:focus-visible {
	outline: 2px solid var(--nb-accent);
	outline-offset: 3px;
}

/* ---- Brand page --------------------------------------------------------- */

.nb-hero {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: 30px;
	align-items: center;
	padding: 44px;
	border: 1px solid rgba(var(--nb-rgb), .16);
	border-radius: var(--nb-r);
	overflow: hidden;
	background: linear-gradient(150deg, rgba(var(--nb-rgb), .15), rgba(var(--nb-rgb), .04) 55%, rgba(var(--nb-rgb), .02));
}
.nb-hero-glow {
	position: absolute;
	top: -45%;
	inset-inline-end: -12%;
	width: 62%;
	aspect-ratio: 1;
	z-index: -1;
	background: radial-gradient(circle, rgba(var(--nb-rgb), .32), rgba(var(--nb-rgb), 0) 66%);
}
.nb-hero-title {
	margin: 0;
	font-size: clamp(34px, 4.4vw, 52px);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -.015em;
	color: var(--nb-title);
}
.nb-hero-desc {
	margin: 14px 0 0;
	max-width: 48ch;
	font-size: 16px;
	line-height: 1.65;
	color: var(--nb-muted);
}
.nb-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 22px 0 0;
}
.nb-hero-meta span {
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(var(--nb-rgb), .1);
	color: var(--nb-accent);
	font-size: 13px;
	font-weight: 600;
}
@media (max-width: 860px) {
	.nb-hero { grid-template-columns: minmax(0, 1fr); padding: 30px 22px; }
	.nb-hero-art { height: 175px; order: -1; }
}

.nb-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 34px 0 24px;
}
.nb-filters .nb-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 0;
	height: auto;
	margin: 0;
	padding: 8px 15px;
	border: 1px solid var(--nb-line);
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var(--nb-ink);
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.nb-filters .nb-chip:hover { border-color: rgba(var(--nb-rgb), .45); background: rgba(var(--nb-rgb), .06); color: var(--nb-ink); }
.nb-filters .nb-chip.is-on {
	background: var(--nb-accent);
	border-color: var(--nb-accent);
	color: #fff;
}
.nb-chip-n {
	font-size: 12px;
	font-weight: 600;
	opacity: .6;
}
.nb-chip.is-on .nb-chip-n { opacity: .85; }

.nb-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
	gap: 18px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.nb-grid .nb-item { margin: 0; padding: 0; list-style: none; }
.nb-grid .nb-item::before { content: none; }
.nb-item[hidden] { display: none; }

.nb-prod {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--nb-line);
	border-radius: 16px;
	overflow: hidden;
	background: var(--nb-surface);
	color: var(--nb-ink);
	text-decoration: none;
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease, border-color .35s ease;
}
.nb-prod-media {
	display: block;
	padding: 14px;
	background: #fff;
}
.nb-prod-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: contain;
	border-radius: 10px;
	transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.nb-prod-body {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 15px 16px 18px;
}
.nb-prod-group {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--nb-accent);
}
.nb-prod-name {
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--nb-ink);
}
.nb-prod-opts {
	margin-top: 2px;
	font-size: 13px;
	color: var(--nb-muted);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.nb-prod:hover {
		transform: translateY(-4px);
		border-color: rgba(var(--nb-rgb), .35);
		box-shadow: 0 22px 40px -24px rgba(var(--nb-rgb), .5);
	}
	.nb-prod:hover .nb-prod-media img { transform: scale(1.04); }
}

.nb-none {
	margin: 30px 0 0;
	color: var(--nb-muted);
	text-align: center;
}
.nb-none[hidden] { display: none; }

.nb-next-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 16px;
	margin-top: 48px;
}
.nb-next {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 22px;
	border: 1px solid rgba(var(--nb-rgb), .18);
	border-radius: 18px;
	background: linear-gradient(120deg, rgba(var(--nb-rgb), .1), rgba(var(--nb-rgb), .02));
	color: var(--nb-ink);
	text-decoration: none;
	transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .35s ease, box-shadow .35s ease;
}
.nb-next-art img {
	width: 58px;
	height: 58px;
	object-fit: contain;
	filter: drop-shadow(0 8px 14px rgba(15, 28, 48, .16));
}
.nb-next-label {
	display: block;
	font-size: 12.5px;
	color: var(--nb-muted);
}
.nb-next-name {
	display: block;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.2;
	color: var(--nb-title);
}
.nb-next .nb-arrow {
	margin-inline-start: auto;
	color: var(--nb-accent);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.nb-next:hover {
		transform: translateY(-3px);
		border-color: rgba(var(--nb-rgb), .4);
		box-shadow: 0 22px 40px -26px rgba(var(--nb-rgb), .5);
	}
	.nb-next:hover .nb-arrow { transform: translateX(4px); }
	[dir="rtl"] .nb-next:hover .nb-arrow { transform: scaleX(-1) translateX(4px); }
}

/* A short fade as the filter swaps the grid over. */
@media (prefers-reduced-motion: no-preference) {
	.nb-brand.is-filtering .nb-item:not([hidden]) { animation: nb-fade .3s ease both; }
}
@keyframes nb-fade {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}

/* ---- Dark mode (EVK) ---------------------------------------------------- */

html.evk-dark .nb {
	--nb-ink: #e4e7ec;
	--nb-title: #ffffff;
	--nb-muted: #c0c7d1;
	--nb-surface: #1a1d21;
	--nb-line: rgba(255, 255, 255, .1);
	--nb-accent: rgb(var(--nb-rgb-hi));
}
html.evk-dark .nb-card {
	background: linear-gradient(165deg, rgba(var(--nb-rgb), .38), rgba(var(--nb-rgb), .12) 46%, #15181d 100%);
	border-color: rgba(255, 255, 255, .09);
}
html.evk-dark .nb-card-count,
html.evk-dark .nb-hero-meta span {
	background: rgba(255, 255, 255, .12);
	color: #ffffff;
}
html.evk-dark .nb-hero {
	background: linear-gradient(150deg, rgba(var(--nb-rgb), .4), rgba(var(--nb-rgb), .12) 55%, #15181d);
	border-color: rgba(255, 255, 255, .09);
}
html.evk-dark .nb-card-title,
html.evk-dark .nb-hero-title,
html.evk-dark .nb-next-name,
html.evk-dark .nb-head-title { color: #ffffff !important; }
html.evk-dark .nb-card-desc,
html.evk-dark .nb-hero-desc,
html.evk-dark .nb-head-text,
html.evk-dark .nb-prod-opts,
html.evk-dark .nb-next-label,
html.evk-dark .nb-none { color: var(--nb-muted) !important; }
html.evk-dark .nb-card-go { color: #ffffff; }
html.evk-dark .nb-prod-name { color: var(--nb-ink) !important; }
html.evk-dark .nb-prod-media { background: #ffffff; }
html.evk-dark .nb-filters .nb-chip { color: var(--nb-ink); border-color: rgba(255, 255, 255, .16); }
html.evk-dark .nb-filters .nb-chip.is-on { color: #0e1623; }
/* Kept pure white on the dark ground too: the photographed packs are shot on
   white, so anything off-white would outline them. */
html.evk-dark .nb-card-art::before,
html.evk-dark .nb-hero-art::before { background: #ffffff; box-shadow: none; }
html.evk-dark .nb-next-art img { background: #ffffff; border-radius: 10px; }
html.evk-dark .nb-next { background: linear-gradient(120deg, rgba(var(--nb-rgb), .3), rgba(var(--nb-rgb), .06)); border-color: rgba(255, 255, 255, .1); }