/* چای‌زی — playful bento styles on top of theme.json.
   Colours come from the theme.json palette (--wp--preset--color--*).
   Text rule: cream/white on the greens, ink on every bright colour. */

:root {
	--cz-ghazi: var(--wp--preset--color--ghazi);
	--cz-forest: var(--wp--preset--color--forest);
	--cz-cream: var(--wp--preset--color--cream);
	--cz-paper: var(--wp--preset--color--paper);
	--cz-mist: var(--wp--preset--color--mist);
	--cz-saffron: var(--wp--preset--color--saffron);
	--cz-narenj: var(--wp--preset--color--narenj);
	--cz-ink: var(--wp--preset--color--ink);
	--cz-muted: var(--wp--preset--color--muted);
	--cz-line: var(--wp--preset--color--line);
	--cz-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--cz-shadow: 0 24px 50px -28px rgb(6 46 39 / 0.45);
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
::selection {
	background: var(--cz-saffron);
	color: var(--cz-ink);
}
:focus-visible {
	outline: 2px solid var(--cz-ghazi);
	outline-offset: 3px;
}
img {
	height: auto;
}

/* ── Header: floating pill ───────────────────────────────── */
.cz-header {
	position: sticky;
	top: 0;
	z-index: 50;
	padding-top: 0.75rem;
	transition: transform 0.45s var(--cz-ease);
}
.cz-header.is-hidden {
	transform: translateY(-130%);
}
.cz-pill {
	min-height: 4rem;
	border: 1px solid color-mix(in srgb, var(--cz-line) 80%, transparent);
	border-radius: 999px;
	background: color-mix(in srgb, var(--cz-paper) 80%, transparent);
	backdrop-filter: blur(14px);
	transition: box-shadow 0.3s ease;
}
.cz-header.is-solid .cz-pill {
	box-shadow: 0 12px 40px -18px rgb(6 46 39 / 0.35);
}
.cz-logo {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--cz-ink);
	font-weight: 900;
	font-size: 1.2rem;
	text-decoration: none;
}
.cz-logo svg {
	height: 1.9rem;
	width: auto;
	color: var(--cz-ghazi);
}
.cz-header .wp-block-navigation-item__content {
	border-radius: 999px;
	padding: 0.45rem 0.9rem;
	transition: background-color 0.2s ease;
}
.cz-header .wp-block-navigation-item__content:hover {
	background: var(--cz-mist);
}
.cz-header .current-menu-item > .wp-block-navigation-item__content,
.cz-header [aria-current='page'] {
	background: var(--cz-ink);
	color: var(--cz-cream) !important;
}

/* ── Tiles and stickers ──────────────────────────────────── */
.cz-tile {
	position: relative;
	overflow: hidden;
	border-radius: 2rem;
	isolation: isolate;
	transition:
		transform 0.5s var(--cz-ease),
		box-shadow 0.5s ease;
}
.cz-tile.cz-hover:hover,
.cz-cat:hover {
	transform: translateY(-4px) rotate(-0.6deg);
	box-shadow: var(--cz-shadow);
}
.cz-sticker {
	display: inline-block !important;
	width: fit-content;
	border-radius: 999px;
	padding: 0.3rem 0.95rem !important;
	font-size: 0.82rem !important;
	font-weight: 800;
	line-height: 1.7 !important;
	background: var(--cz-saffron);
	color: var(--cz-ink);
	box-shadow: 0 6px 16px -8px rgb(14 33 29 / 0.5);
	transform: rotate(-4deg);
}
.cz-sticker.is-paper {
	background: var(--cz-paper);
}
.cz-sticker.is-narenj {
	background: var(--cz-narenj);
}

/* Headline word with a hand-drawn saffron underline. */
.cz-hl {
	background: none;
	color: var(--cz-saffron);
	padding-bottom: 0.1em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M2 14C40 4 70 18 102 9s70-6 96 3' fill='none' stroke='%23F4B840' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: bottom center;
	background-size: 100% 0.28em;
}

/* Outline button (cream on green, ink elsewhere). */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border: 2px solid currentColor;
	color: inherit;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--cz-ink);
	color: var(--cz-cream);
	border-color: var(--cz-ink);
}
.has-ghazi-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.has-forest-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--cz-cream);
	color: var(--cz-ghazi);
}
.wp-block-button__link {
	transition:
		transform 0.25s ease,
		background-color 0.25s ease;
}
.wp-block-button__link:hover {
	transform: translateY(-2px);
}

/* ── Bento grid (home) ───────────────────────────────────── */
.cz-bento {
	display: grid;
	gap: 1rem;
}
.cz-bento > * {
	margin: 0 !important;
}
@media (min-width: 1024px) {
	.cz-bento {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}
	.cz-span-7 {
		grid-column: span 7;
	}
	.cz-span-5 {
		grid-column: span 5;
	}
	.cz-span-12 {
		grid-column: span 12;
	}
	.cz-row-2 {
		grid-row: span 2;
	}
}
.cz-hero-text {
	display: flex !important;
	flex-direction: column;
	justify-content: space-between;
	min-height: 30rem;
}
@media (min-width: 1024px) {
	.cz-hero-text,
	.cz-hero-3d {
		min-height: 36rem;
	}
}
.cz-hero-text .cz-bg-mark {
	position: absolute;
	bottom: -2.5rem;
	left: -2.5rem;
	width: 18rem;
	opacity: 0.07;
	color: var(--cz-paper);
	pointer-events: none;
	z-index: -1;
}

/* 3D tile */
.cz-hero-3d {
	min-height: 26rem;
	background: radial-gradient(circle at 50% 60%, var(--cz-paper), var(--cz-mist) 70%);
	padding: 0 !important;
}
.cz-teacup {
	position: absolute;
	inset: 0;
}
.cz-teacup canvas {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1s ease;
	-webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 94%, transparent);
	mask-image: linear-gradient(to bottom, transparent, black 10%, black 94%, transparent);
}
.cz-teacup.is-ready canvas {
	opacity: 1;
}
.cz-teacup__fallback {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	transition: opacity 0.7s ease;
}
.cz-teacup__fallback svg {
	width: 46%;
	max-width: 16rem;
	color: var(--cz-ghazi);
}
.cz-teacup.is-ready .cz-teacup__fallback {
	opacity: 0;
}

/* Rotating round badge */
.cz-badge {
	position: absolute;
	top: 1.25rem;
	left: 1.25rem;
	z-index: 2;
	width: 8rem;
	aspect-ratio: 1;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--cz-saffron);
	color: var(--cz-ink);
	box-shadow: 0 12px 30px -12px rgb(14 33 29 / 0.5);
}
.cz-badge > svg:first-child {
	position: absolute;
	inset: 0.25rem;
	animation: cz-spin 18s linear infinite;
}
.cz-badge > svg:last-child {
	width: 38%;
}
@keyframes cz-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Photo tile */
.cz-photo {
	min-height: 18rem !important;
}
.cz-photo .cz-sticker {
	position: absolute;
	bottom: 1.25rem;
	right: 1.25rem;
}

/* Category tiles: the whole tile is the link */
.cz-cats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}
.cz-cats > * {
	margin: 0 !important;
}
.cz-cat {
	display: flex !important;
	flex-direction: column;
	justify-content: space-between;
	min-height: 9rem;
	color: var(--cz-ink);
}
.cz-cat h2,
.cz-cat h3 {
	font-size: clamp(1.25rem, 2vw, 1.6rem) !important;
	margin: 0;
}
.cz-cat a {
	color: inherit;
	text-decoration: none;
}
.cz-cat a::after {
	content: '';
	position: absolute;
	inset: 0;
}
.cz-cat p {
	margin: 0.25rem 0 0;
	font-size: 0.9rem;
	opacity: 0.75;
}
.cz-cat .cz-icon {
	width: 2.6rem;
	height: 2.6rem;
	transition: transform 0.5s var(--cz-ease);
}
.cz-cat:hover .cz-icon {
	transform: rotate(-12deg) scale(1.1);
}

/* ── Marquee ─────────────────────────────────────────────── */
.cz-marquee {
	overflow: hidden;
	background: var(--cz-ink);
	color: var(--cz-saffron);
	transform: rotate(-1deg);
	padding: 1rem 0;
	font-size: clamp(1.25rem, 2.4vw, 1.6rem);
	font-weight: 900;
}
.cz-marquee__track {
	display: flex;
	width: max-content;
	animation: cz-marquee 32s linear infinite;
}
.cz-marquee:hover .cz-marquee__track {
	animation-play-state: paused;
}
.cz-marquee ul {
	display: flex;
	flex-shrink: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.cz-marquee li {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 0 1.5rem;
	white-space: nowrap;
}
.cz-marquee li::after {
	content: '';
	width: 0.8em;
	height: 0.8em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4C11 4 5 9 5 16c0 1.5.3 2.8.8 3.8C6.6 12.5 12 8 17 7c-4.5 2-8.5 6.4-10 12.6.5.1 1 .1 1.5.1C15 19.7 20 13 20 4Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4C11 4 5 9 5 16c0 1.5.3 2.8.8 3.8C6.6 12.5 12 8 17 7c-4.5 2-8.5 6.4-10 12.6.5.1 1 .1 1.5.1C15 19.7 20 13 20 4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes cz-marquee {
	to {
		transform: translateX(50%);
	}
}

/* ── Horizontal, draggable rows (product shelf, tea journey) ── */
.cz-shelf ul.products,
.cz-shelf .wc-block-product-template,
.cz-row {
	display: flex !important;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	cursor: grab;
	padding: 0.5rem 0 1.5rem !important;
	margin: 0 !important;
}
.cz-shelf ul.products::-webkit-scrollbar,
.cz-row::-webkit-scrollbar {
	display: none;
}
.cz-shelf ul.products::before,
.cz-shelf ul.products::after {
	display: none !important;
}
.cz-shelf ul.products > li,
.cz-shelf .wc-block-product,
.cz-row > * {
	flex: 0 0 min(72vw, 17rem) !important;
	width: auto !important;
	margin: 0 !important;
	scroll-snap-align: start;
}
.is-dragging {
	cursor: grabbing !important;
	scroll-snap-type: none !important;
}
.is-dragging a {
	pointer-events: none;
}
.cz-row > * {
	flex-basis: min(78vw, 22rem) !important;
}

/* ── Product cards (shortcodes, shop archive and product blocks) ── */
.woocommerce ul.products li.product,
.wc-block-product {
	position: relative;
	border-radius: 2rem;
	background: var(--cz-paper);
	padding: 0.6rem 0.6rem 1rem !important;
	transition:
		transform 0.5s var(--cz-ease),
		box-shadow 0.5s ease;
	text-align: start !important;
}
.woocommerce ul.products li.product:hover,
.wc-block-product:hover {
	transform: translateY(-4px) rotate(-0.6deg);
	box-shadow: var(--cz-shadow);
}
.woocommerce ul.products li.product a img,
.wc-block-product img {
	border-radius: 1.5rem;
	background: var(--cz-mist);
	aspect-ratio: 1;
	object-fit: cover;
	margin: 0 0 0.75rem !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-product .wp-block-post-title {
	font-size: 1.05rem !important;
	font-weight: 900;
	padding: 0 0.5rem !important;
	color: var(--cz-ink);
}
.woocommerce ul.products li.product .price,
.wc-block-product .wc-block-components-product-price {
	display: inline-block !important;
	margin: 0.4rem 0.5rem 0 !important;
	border-radius: 999px;
	background: var(--cz-saffron);
	color: var(--cz-ink) !important;
	padding: 0.1rem 0.75rem;
	font-weight: 800;
	font-size: 0.9rem !important;
}
.woocommerce ul.products li.product .price del {
	opacity: 0.6;
}
.woocommerce ul.products li.product .button,
.wc-block-product .wp-block-button__link {
	margin: 0.75rem 0.5rem 0 !important;
	border-radius: 999px !important;
	background: var(--cz-ghazi) !important;
	color: var(--cz-paper) !important;
	font-weight: 800;
	font-size: 0.85rem;
}
.woocommerce span.onsale {
	top: 1rem !important;
	right: 1rem !important;
	left: auto !important;
	min-height: 0;
	min-width: 0;
	border-radius: 999px;
	background: var(--cz-narenj);
	color: var(--cz-ink);
	padding: 0.2rem 0.8rem;
	line-height: 1.7;
	font-weight: 800;
	transform: rotate(-4deg);
}

/* Single product / cart / checkout: rounded, friendly controls */
.woocommerce div.product .product_title {
	font-weight: 900;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	display: inline-block;
	border-radius: 999px;
	background: var(--cz-saffron);
	color: var(--cz-ink);
	padding: 0.2rem 1.1rem;
	font-weight: 900;
	transform: rotate(-2deg);
}
.woocommerce .button,
.woocommerce button.button,
.woocommerce a.button,
.wc-block-components-button:not(.is-link) {
	border-radius: 999px !important;
	font-weight: 800 !important;
}
.woocommerce .button.alt,
.woocommerce button.button.alt,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--cz-narenj) !important;
	color: var(--cz-ink) !important;
}
.woocommerce div.product div.images img,
.wc-block-components-product-image img {
	border-radius: 2rem;
}
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select,
.wc-block-components-text-input input {
	border-radius: 1rem !important;
}

/* ── Inner page header tile ──────────────────────────────── */
.cz-page-head {
	position: relative;
}
.cz-page-head::after {
	content: '';
	position: absolute;
	top: 1.5rem;
	left: 1.5rem;
	width: 4rem;
	height: 4rem;
	border-radius: 1rem;
	background: var(--cz-saffron);
	transform: rotate(12deg);
}

/* ── Footer ──────────────────────────────────────────────── */
.cz-footer a {
	color: var(--wp--preset--color--mist);
	text-decoration: none;
}
.cz-footer a:hover {
	color: var(--cz-saffron);
}
.cz-footer .cz-logo {
	color: var(--cz-paper);
}
.cz-footer .cz-logo svg {
	color: var(--cz-saffron);
}
.cz-giant {
	margin: 1.5rem 0 -0.32em !important;
	text-align: center;
	font-size: clamp(5rem, 22vw, 15rem) !important;
	line-height: 1 !important;
	font-weight: 900;
	color: var(--cz-ghazi);
	user-select: none;
	pointer-events: none;
}
.cz-giant a {
	color: inherit !important;
}

/* ── Scroll reveal (only when JS runs; respects reduced motion) ── */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
	.cz-reveal {
		opacity: 0;
		transform: translateY(40px);
		transition:
			opacity 0.9s var(--cz-ease),
			transform 0.9s var(--cz-ease);
	}
	.cz-reveal.is-in {
		opacity: 1;
		transform: none;
	}
	.cz-pop > * {
		animation: cz-pop 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) both;
	}
	.cz-pop > *:nth-child(2) {
		animation-delay: 0.07s;
	}
	.cz-pop > *:nth-child(3) {
		animation-delay: 0.14s;
	}
	.cz-pop > *:nth-child(4) {
		animation-delay: 0.21s;
	}
}
@keyframes cz-pop {
	from {
		opacity: 0;
		transform: translateY(40px) scale(0.94);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Lists without bullets (footer links). */
.cz-plain {
	list-style: none;
	padding-inline-start: 0;
}
.cz-plain li + li {
	margin-top: 0.5rem;
}

/* Tile padding (photo and 3D tiles are edge-to-edge). */
.cz-tile {
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
}
.cz-tile.cz-hero-3d,
.cz-tile.cz-photo {
	padding: 0;
}
.cz-photo .cz-photo__img {
	position: absolute;
	inset: 0;
	margin: 0;
}
.cz-photo .cz-photo__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cz-hero-text h1 {
	margin-top: 0;
}
.cz-cat .cz-icon {
	display: block;
}

/* Tea journey step tiles */
.cz-step__num {
	margin: 0 !important;
	font-size: 3.5rem;
	font-weight: 900;
	line-height: 1;
	opacity: 0.2;
}
.cz-step__art svg {
	display: block;
	width: 100%;
	aspect-ratio: 5 / 4;
	border-radius: 1.5rem;
	background: var(--cz-forest);
}
.cz-step h3 {
	margin-bottom: 0;
	font-size: 1.5rem;
}
.cz-step p {
	margin-top: 0.4rem;
	line-height: 1.9;
}
@media (min-width: 768px) {
	.cz-row > .cz-step:nth-child(odd) {
		transform: rotate(-1deg);
	}
	.cz-row > .cz-step:nth-child(even) {
		transform: translateY(2rem) rotate(1deg);
	}
	.cz-row {
		padding-bottom: 3rem !important;
	}
}
.cz-quote-mark {
	margin: 0 !important;
	font-size: 5rem;
	font-weight: 900;
	line-height: 1;
	opacity: 0.3;
}

/* Post cards (latest posts, archives) */
.cz-posts .wp-block-post {
	border-radius: 2rem;
	background: var(--cz-paper);
	padding: 0.6rem 0.6rem 1.25rem;
	transition:
		transform 0.5s var(--cz-ease),
		box-shadow 0.5s ease;
}
.cz-posts .wp-block-post:hover {
	transform: translateY(-4px) rotate(-0.6deg);
	box-shadow: var(--cz-shadow);
}
.cz-posts .wp-block-post > :not(.wp-block-post-featured-image) {
	padding-inline: 0.75rem;
}
.cz-posts .wp-block-post-featured-image img {
	border-radius: 1.5rem;
}
.cz-posts .wp-block-post-title a {
	color: var(--cz-ink);
	text-decoration: none;
}
.cz-posts .wp-block-post-date {
	color: var(--cz-muted);
}

/* Menu links: no underline; pills instead. */
.cz-header .wp-block-navigation a,
.cz-header .wp-block-page-list a {
	text-decoration: none;
}
.cz-giant {
	white-space: nowrap;
}

/* ── Photo hero (front page) ─────────────────────────────── */
/* Full-bleed photo behind the floating header; a green gradient keeps the
   title readable on any photo. Set the photo in the editor: select the
   hero → Styles → Background → image. Without one, a soft green glow shows. */
.cz-hero-photo {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: min(94vh, 58rem);
	/* Pull up under the floating header (header + WordPress's gap above <main>). */
	margin-top: -9rem !important;
	padding-top: 10rem !important;
	padding-bottom: 4rem !important;
	overflow: hidden;
	background-image: radial-gradient(ellipse at 20% 30%, #1c6a59 0%, transparent 55%), radial-gradient(ellipse at 85% 90%, #0c4a3e 0%, transparent 60%);
	background-size: cover;
	background-position: center;
}
.cz-hero-photo::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to left, rgb(6 46 39 / 0.94) 0%, rgb(6 46 39 / 0.72) 42%, rgb(6 46 39 / 0.2) 100%),
		linear-gradient(to top, rgb(6 46 39 / 0.7), transparent 40%);
}
.cz-hero-photo::after {
	content: '';
	position: absolute;
	inset-inline: 0;
	bottom: -1px;
	height: 5rem;
	z-index: -1;
	background: linear-gradient(to top, var(--cz-cream), transparent);
}
.cz-hero-grid {
	display: grid;
	gap: 2rem;
	align-items: center;
	width: 100%;
}
.cz-hero-grid > * {
	margin: 0 !important;
}
@media (min-width: 1024px) {
	.cz-hero-grid {
		grid-template-columns: 1.15fr 0.85fr;
	}
}
.cz-hero-title {
	margin: 1.25rem 0 0 !important;
	font-size: clamp(2.8rem, 7vw, 6.2rem) !important;
	line-height: 1.15 !important;
	letter-spacing: -0.01em;
	text-shadow: 0 2px 30px rgb(6 46 39 / 0.35);
}
.cz-hero-lead {
	max-width: 32rem;
	margin-top: 1.5rem !important;
	color: var(--wp--preset--color--mist);
	line-height: 2 !important;
}
.cz-hero-copy .wp-block-buttons {
	margin-top: 2rem !important;
}
.cz-hero-copy .wp-block-button__link {
	font-size: 1.05rem;
	padding: 0.95rem 1.9rem;
}
.cz-hero-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin-top: 2.25rem !important;
	font-size: 0.85rem;
	font-weight: 700;
}
.cz-hero-chips span {
	border: 1px solid rgb(255 255 255 / 0.22);
	border-radius: 999px;
	padding: 0.35rem 0.9rem;
	background: rgb(255 255 255 / 0.08);
	backdrop-filter: blur(6px);
}
.cz-hero-cup {
	position: relative;
	min-height: 22rem;
}
@media (min-width: 1024px) {
	.cz-hero-cup {
		min-height: 34rem;
	}
}
.cz-hero-cup .cz-teacup__fallback svg {
	color: var(--cz-paper);
	opacity: 0.85;
}
.cz-hero-cup .cz-badge {
	top: 0.5rem;
	left: 0.5rem;
}
/* Glow behind the estekan so it reads on a dark photo. */
.cz-hero-cup::before {
	content: '';
	position: absolute;
	inset: 12% 10%;
	border-radius: 50%;
	background: radial-gradient(circle, rgb(245 240 230 / 0.35), transparent 65%);
	filter: blur(10px);
}