/* Treats N Beans — public website. Brand colors via CSS variables only. */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	scroll-behavior: smooth;
	overflow-x: clip;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body.tnb-body {
	margin: 0;
	font-family: var(--tnb-font, "Cairo", system-ui, sans-serif);
	background: var(--tnb-color-background, #F3F6F4);
	color: var(--tnb-color-body, #1A1A1A);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
	max-width: 100%;
}

/* Match chip/menu typography across the whole site (buttons/inputs don't inherit by default). */
body.tnb-body,
body.tnb-body button,
body.tnb-body input,
body.tnb-body select,
body.tnb-body textarea,
body.tnb-body optgroup {
	font-family: var(--tnb-font, "Cairo", system-ui, sans-serif);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible {
	outline: 3px solid var(--tnb-color-primary, #D4566A);
	outline-offset: 2px;
}

.sr-only, .tnb-hp {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	border: 0;
}

/* Keep skip-link off-screen without expanding RTL scroll width (left:-999px did). */
.tnb-skip {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	transform: translateY(-120%);
	background: var(--tnb-color-surface, #fff);
	padding: .75rem 1rem;
	z-index: 1000;
}
.tnb-skip:focus {
	position: fixed;
	transform: none;
	inset-inline-start: 1rem;
	top: 1rem;
}

.tnb-container {
	width: min(1120px, calc(100% - 2rem));
	margin-inline: auto;
}

.tnb-section { padding: 4rem 0; }
.tnb-section__head { margin-bottom: 1.75rem; }
.tnb-section__head h2,
.tnb-hero h1,
.tnb-about h2,
.tnb-contact h2 {
	color: var(--tnb-color-heading, #1F3D34);
	margin: 0 0 .5rem;
	font-weight: 700;
	letter-spacing: -0.02em;
}

.tnb-muted { color: var(--tnb-color-muted, #6B7280); }

.tnb-btn {
	display: inline-flex; align-items: center; justify-content: center;
	gap: .5rem;
	padding: .75rem 1.25rem;
	border-radius: var(--tnb-radius-button, 999px);
	border: 1px solid transparent;
	text-decoration: none;
	font-family: var(--tnb-font, "Cairo", system-ui, sans-serif);
	font-weight: 600;
	cursor: pointer;
	transition: transform .2s ease, background .2s ease;
}
.tnb-btn:hover { transform: translateY(-1px); }
.tnb-btn--primary {
	background: var(--tnb-color-primary, #D4566A);
	color: #fff;
}
.tnb-btn--ghost {
	background: transparent;
	border-color: var(--tnb-color-border, #E5E7EB);
	color: var(--tnb-color-heading, #1F3D34);
}

.tnb-announcement {
	background: var(--tnb-color-secondary, #1F3D34);
	color: #fff;
	text-align: center;
	padding: .6rem 1rem;
	font-size: .95rem;
}
.tnb-announcement a { color: inherit; text-decoration: underline; }

.tnb-header {
	background: color-mix(in srgb, var(--tnb-color-surface, #fff) 92%, transparent);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--tnb-color-border, #E5E7EB);
	z-index: 50;
}
.tnb-header.is-sticky { position: sticky; top: 0; }
.tnb-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; min-height: 72px;
}
.tnb-brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; }
.tnb-brand__logo { border-radius: 50%; object-fit: cover; }
.tnb-brand__text { display: flex; flex-direction: column; }
.tnb-brand__text strong { color: var(--tnb-color-heading, #1F3D34); font-size: 1rem; }
.tnb-brand__text small { color: var(--tnb-color-muted, #6B7280); font-size: .75rem; }

.tnb-nav-toggle {
	display: none; background: none; border: 0; width: 42px; height: 42px;
	flex-direction: column; justify-content: center; gap: 6px; cursor: pointer;
}
.tnb-nav-toggle span {
	display: block; height: 2px; width: 22px;
	background: var(--tnb-color-heading, #1F3D34);
}

.tnb-nav { display: flex; align-items: center; gap: 1.25rem; }
.tnb-nav ul { display: flex; gap: 1rem; list-style: none; margin: 0; padding: 0; }
.tnb-nav a { text-decoration: none; font-weight: 600; color: var(--tnb-color-heading, #1F3D34); }
.tnb-nav__actions { display: flex; align-items: center; gap: .75rem; }
.tnb-lang { display: inline-flex; border: 1px solid var(--tnb-color-border, #E5E7EB); border-radius: 999px; overflow: hidden; }
.tnb-lang button {
	border: 0; background: transparent; padding: .35rem .7rem; cursor: pointer; font-weight: 700;
}
.tnb-lang button.is-active {
	background: var(--tnb-color-primary, #D4566A); color: #fff;
}

.tnb-hero { position: relative; }
.tnb-hero__slide {
	display: none;
	padding: 3.5rem 0 4rem;
	background:
		radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--tnb-color-accent, #A9C7C0) 42%, transparent), transparent 42%),
		radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--tnb-color-primary, #D4566A) 14%, transparent), transparent 38%),
		var(--tnb-color-background, #F3F6F4);
}
.tnb-hero__slide.is-active { display: block; }
.tnb-hero__grid {
	display: grid; gap: 2rem; align-items: center;
	grid-template-columns: 1.1fr .9fr;
}
.tnb-hero__copy h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.15; }
.tnb-hero__copy p { color: var(--tnb-color-muted, #6B7280); max-width: 36ch; }
.tnb-hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
.tnb-hero__media img {
	width: 100%; border-radius: var(--tnb-radius-card, 16px);
	aspect-ratio: 4/3; object-fit: cover;
	box-shadow: 0 20px 50px color-mix(in srgb, var(--tnb-color-secondary, #1F3D34) 12%, transparent);
}
.tnb-hero__dots {
	display: flex; justify-content: center; gap: .5rem;
	position: absolute; inset-inline: 0; bottom: 1rem;
}
.tnb-hero__dot {
	width: .65rem; height: .65rem; border-radius: 999px;
	border: 0; padding: 0; cursor: pointer;
	background: color-mix(in srgb, var(--tnb-color-secondary, #1F3D34) 25%, transparent);
}
.tnb-hero__dot.is-active { background: var(--tnb-color-primary, #D4566A); }

.tnb-cat-grid, .tnb-menu-grid, .tnb-branch-grid {
	display: grid; gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.tnb-menu-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.tnb-branch-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.tnb-cat-card, .tnb-item-card, .tnb-branch-card, .tnb-promo-card {
	background: var(--tnb-color-surface, #fff);
	border: 1px solid var(--tnb-color-border, #E5E7EB);
	border-radius: var(--tnb-radius-card, 16px);
	overflow: hidden;
	text-decoration: none;
}
.tnb-cat-card {
	display: grid;
	grid-template-rows: 120px auto;
	align-items: stretch;
	padding: 0;
	gap: 0;
	font-weight: 700;
	color: var(--tnb-color-heading, #1F3D34);
	min-height: 168px;
	transition: transform .2s ease, box-shadow .2s ease;
}
.tnb-cat-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px color-mix(in srgb, var(--tnb-color-secondary, #1F3D34) 10%, transparent);
}
.tnb-cat-card img {
	width: 100%;
	height: 120px;
	object-fit: cover;
	border-radius: 0;
	background: var(--tnb-color-accent, #A9C7C0);
}
.tnb-cat-card span {
	display: grid;
	place-items: center;
	padding: .85rem .75rem;
	text-align: center;
}
.tnb-cat-card:not(:has(img)) {
	grid-template-rows: 1fr;
	place-items: center;
	padding: 1.25rem .75rem;
}
.tnb-item-card { cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; }
.tnb-item-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px color-mix(in srgb, var(--tnb-color-secondary, #1F3D34) 10%, transparent); }
.tnb-item-card img { width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--tnb-color-accent, #A9C7C0); }
.tnb-item-card > div { padding: 1rem; }
.tnb-item-card h3 { margin: 0 0 .35rem; font-size: 1.05rem; color: var(--tnb-color-heading, #1F3D34); }
.tnb-price { margin: 0; color: var(--tnb-color-primary, #D4566A); font-weight: 700; }
.tnb-item-card.is-unavailable { opacity: .7; }
.tnb-item-card.is-unavailable::after {
	content: attr(data-unavailable-label);
	display: block; padding: 0 1rem 1rem; color: var(--tnb-color-muted, #6B7280); font-size: .85rem;
}

.tnb-menu__toolbar {
	display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
	justify-content: space-between; margin-bottom: 1rem;
}
.tnb-search input {
	min-width: min(100%, 280px);
	padding: .7rem 1rem;
	border-radius: var(--tnb-radius-button, 999px);
	border: 1px solid var(--tnb-color-border, #E5E7EB);
	background: var(--tnb-color-surface, #fff);
}
.tnb-filters { display: flex; gap: 1rem; flex-wrap: wrap; }
.tnb-chips {
	display: flex; gap: .5rem;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	padding-bottom: .75rem;
	margin-bottom: 1rem;
	max-width: 100%;
	min-width: 0;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}
.tnb-chip {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	border: 1px solid var(--tnb-color-border, #D5E0DB);
	background: var(--tnb-color-surface, #fff);
	border-radius: 999px;
	padding: .35rem .85rem .35rem .4rem;
	cursor: pointer;
	font-family: var(--tnb-font, "Cairo", system-ui, sans-serif);
	font-weight: 600;
	font-size: .95rem;
	line-height: 1.2;
	color: var(--tnb-color-heading, #1F3D34);
	transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.tnb-chip:not(:has(.tnb-chip__img)) { padding-inline: .9rem; }
.tnb-chip__img {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
	background: var(--tnb-color-accent, #A9C7C0);
}
.tnb-chip__label { white-space: nowrap; }
.tnb-chip:hover { transform: translateY(-1px); }
.tnb-chip.is-active {
	background: var(--tnb-color-secondary, #1F3D34);
	color: #fff; border-color: transparent;
}
.tnb-chip.is-active .tnb-chip__img {
	box-shadow: 0 0 0 2px color-mix(in srgb, #fff 55%, transparent);
}

.tnb-about__grid, .tnb-contact__grid {
	display: grid; gap: 2rem; grid-template-columns: 1.2fr .8fr; align-items: start;
}
.tnb-about__media img, .tnb-promo-card img {
	border-radius: var(--tnb-radius-card, 16px);
	width: 100%; object-fit: cover;
}
.tnb-highlights { list-style: none; padding: 0; display: grid; gap: .75rem; }
.tnb-highlights li {
	background: var(--tnb-color-surface, #fff);
	border: 1px solid var(--tnb-color-border, #E5E7EB);
	border-radius: var(--tnb-radius-card, 16px);
	padding: 1rem;
}
.tnb-promo-card { display: grid; grid-template-columns: .8fr 1.2fr; gap: 1rem; padding: 1rem; }
.tnb-branch-card { padding: 1rem; }
.tnb-branch-card img { border-radius: calc(var(--tnb-radius-card, 16px) - 4px); margin-bottom: .75rem; aspect-ratio: 16/10; object-fit: cover; }

.tnb-form { display: grid; gap: .85rem; }
.tnb-form label { display: grid; gap: .35rem; font-weight: 600; }
.tnb-form input, .tnb-form textarea {
	width: 100%; padding: .7rem .85rem;
	border: 1px solid var(--tnb-color-border, #E5E7EB);
	border-radius: 12px; background: var(--tnb-color-surface, #fff);
	font: inherit;
}
.tnb-consent { display: flex !important; align-items: flex-start; gap: .5rem; font-weight: 500; }
.tnb-form__status { min-height: 1.25rem; color: var(--tnb-color-secondary, #1F3D34); }
.tnb-form__status.is-error { color: #b42318; }

.tnb-footer {
	background:
		linear-gradient(180deg, color-mix(in srgb, var(--tnb-color-secondary, #1F3D34) 92%, #000) 0%, var(--tnb-color-secondary, #1F3D34) 100%);
	color: #f3f7f5;
	margin-top: 3rem;
}
.tnb-footer a { color: inherit; text-decoration: none; }
.tnb-footer a:hover { color: #fff; }

.tnb-footer__spotlight {
	padding: 2.5rem 0 1.5rem;
	border-bottom: 1px solid color-mix(in srgb, #fff 12%, transparent);
	background: color-mix(in srgb, #000 12%, transparent);
}
.tnb-footer__spotlight-head {
	display: flex; flex-wrap: wrap; gap: 1rem;
	align-items: end; justify-content: space-between;
	margin-bottom: 1.25rem;
}
.tnb-footer__eyebrow {
	margin: 0 0 .35rem;
	font-size: .85rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .75;
}
.tnb-footer__spotlight-title {
	margin: 0;
	font-size: clamp(1.35rem, 2.5vw, 1.85rem);
	color: #fff;
}
.tnb-footer__spotlight-cta {
	border-color: color-mix(in srgb, #fff 35%, transparent);
	color: #fff;
}
.tnb-footer__gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: .75rem;
}
.tnb-footer__gallery-item { margin: 0; }
.tnb-footer__gallery img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	border-radius: 14px;
	background: color-mix(in srgb, #fff 10%, transparent);
	transition: transform .25s ease, opacity .25s ease;
}
.tnb-footer__gallery-item:hover img { transform: scale(1.02); opacity: .95; }

.tnb-footer__main { padding: 3rem 0 2rem; }
.tnb-footer__grid {
	display: grid;
	gap: 2rem 1.75rem;
	grid-template-columns: 1.35fr .9fr 1fr 1.1fr;
}
.tnb-footer__heading {
	margin: 0 0 1rem;
	font-size: .95rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
}
.tnb-footer__logo {
	width: 64px; height: 64px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: .85rem;
	background: #fff;
	padding: 2px;
}
.tnb-footer__brand-name {
	margin: 0 0 .5rem;
	font-size: 1.25rem;
	color: #fff;
}
.tnb-footer__blurb {
	margin: 0 0 1.15rem;
	max-width: 32ch;
	line-height: 1.65;
	opacity: .88;
}
.tnb-footer__order { margin-top: .25rem; }
.tnb-footer__muted { margin: 0 0 1rem; opacity: .78; line-height: 1.6; max-width: 34ch; }
.tnb-footer__label {
	display: block;
	font-size: .78rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .65;
	margin-bottom: .2rem;
}
.tnb-footer__nav,
.tnb-footer__contact,
.tnb-channels {
	list-style: none; padding: 0; margin: 0;
	display: grid; gap: .7rem;
}
.tnb-footer__nav a {
	display: inline-flex;
	opacity: .9;
	border-bottom: 1px solid transparent;
}
.tnb-footer__nav a:hover { border-bottom-color: color-mix(in srgb, #fff 45%, transparent); }
.tnb-footer__contact li { line-height: 1.45; }
.tnb-footer__map-link {
	display: inline-flex; margin-top: .35rem;
	color: var(--tnb-color-accent, #A9C7C0) !important;
	font-weight: 600;
}
.tnb-footer__channels { margin-top: 1.25rem; }
.tnb-channels { grid-auto-flow: column; grid-auto-columns: max-content; gap: .65rem; }
.tnb-channels a {
	display: inline-flex;
	padding: .4rem .75rem;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, #fff 22%, transparent);
	font-size: .9rem;
}

.tnb-social {
	list-style: none; padding: 0; margin: 0;
	display: grid; gap: .65rem;
}
.tnb-social__btn {
	display: inline-flex; align-items: center; gap: .7rem;
	min-height: 44px;
	padding: .55rem .9rem;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, #fff 20%, transparent);
	background: color-mix(in srgb, #fff 6%, transparent);
	font-weight: 600;
	transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.tnb-social__btn:hover {
	background: color-mix(in srgb, #fff 14%, transparent);
	border-color: color-mix(in srgb, #fff 40%, transparent);
	transform: translateY(-1px);
}
.tnb-social__btn svg { flex: 0 0 auto; }
.tnb-social__btn--instagram:hover { background: color-mix(in srgb, #D4566A 35%, transparent); }
.tnb-social__btn--facebook:hover { background: color-mix(in srgb, #1877F2 35%, transparent); }
.tnb-social__btn--x:hover { background: color-mix(in srgb, #fff 18%, transparent); }
.tnb-footer__handle {
	margin: 1rem 0 0;
	font-weight: 700;
	letter-spacing: .02em;
}
.tnb-footer__handle a { color: var(--tnb-color-accent, #A9C7C0); }

.tnb-footer__bar {
	border-top: 1px solid color-mix(in srgb, #fff 12%, transparent);
	padding: 1rem 0 1.25rem;
	background: color-mix(in srgb, #000 16%, transparent);
}
.tnb-footer__bar-inner {
	display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
	align-items: center; justify-content: space-between;
}
.tnb-copy { margin: 0; opacity: .75; font-size: .92rem; }
.tnb-footer__legal {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-wrap: wrap; gap: .85rem 1.1rem;
	opacity: .85; font-size: .92rem;
}

.tnb-fab {
	position: fixed; inset-inline-end: 1rem; bottom: 1rem; z-index: 60;
	width: 56px; height: 56px; border-radius: 50%;
	background: #25D366; color: #fff; display: grid; place-items: center;
	text-decoration: none; font-weight: 800;
	box-shadow: 0 10px 25px rgba(0,0,0,.18);
}

.tnb-modal {
	border: 0; padding: 0; border-radius: var(--tnb-radius-card, 16px);
	width: min(640px, calc(100% - 2rem));
	background: var(--tnb-color-surface, #fff);
}
.tnb-modal::backdrop { background: rgba(16, 56, 40, .45); }
.tnb-modal__panel { position: relative; display: grid; }
.tnb-modal__close {
	position: absolute; inset-inline-end: .5rem; top: .5rem;
	border: 0; background: var(--tnb-color-surface, #fff);
	width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 1.4rem;
}
.tnb-modal__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.tnb-modal__body { padding: 1.25rem 1.5rem 1.75rem; }
.tnb-modal__price { color: var(--tnb-color-primary, #D4566A); font-weight: 700; font-size: 1.2rem; }

@media (max-width: 1100px) {
	.tnb-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
	.tnb-hero__grid,
	.tnb-about__grid,
	.tnb-contact__grid,
	.tnb-footer__grid,
	.tnb-promo-card { grid-template-columns: 1fr; }
	.tnb-footer__gallery { grid-template-columns: repeat(2, 1fr); }
	.tnb-footer__main { padding: 2.25rem 0 1.5rem; }
	.tnb-channels { grid-auto-flow: row; }
	.tnb-nav-toggle { display: inline-flex; }
	.tnb-nav {
		display: none; position: absolute; inset-inline: 0; top: 72px;
		background: var(--tnb-color-surface, #fff);
		border-bottom: 1px solid var(--tnb-color-border, #E5E7EB);
		padding: 1rem; flex-direction: column; align-items: stretch;
	}
	.tnb-nav.is-open { display: flex; }
	.tnb-nav ul { flex-direction: column; }
	.tnb-header { position: relative; }
	.tnb-header.is-sticky { position: sticky; }
}