/* Yahal — kids and baby. Soft coral and navy, rounded cards, Nunito with Baloo Bhaijaan 2 for Arabic. */

@font-face { font-family: "Nunito"; font-weight: 400; font-display: swap; src: url(fonts/nunito-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-display: swap; src: url(fonts/nunito-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 700; font-display: swap; src: url(fonts/nunito-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 800; font-display: swap; src: url(fonts/nunito-latin-800-normal.woff2) format("woff2"); }
@font-face { font-family: "Baloo Bhaijaan 2"; font-weight: 400; font-display: swap; src: url(fonts/baloo-bhaijaan-2-arabic-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Baloo Bhaijaan 2"; font-weight: 500; font-display: swap; src: url(fonts/baloo-bhaijaan-2-arabic-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Baloo Bhaijaan 2"; font-weight: 600; font-display: swap; src: url(fonts/baloo-bhaijaan-2-arabic-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Baloo Bhaijaan 2"; font-weight: 700; font-display: swap; src: url(fonts/baloo-bhaijaan-2-arabic-700-normal.woff2) format("woff2"); }

body.tothiq-layout-yahal {
	--wp--preset--color--ink: #22304a;
	--wp--preset--color--muted: #6b7486;
	--wp--preset--color--soft: #fbf5ef;
	--wp--preset--color--tile: #fbf5ef;
	--wp--preset--color--divider: #eef0f4;
	--wp--preset--color--accent: #3f5bd9;
	--wp--preset--color--sale: #e0735a;
	--wp--preset--font-family--body: Nunito, "Baloo Bhaijaan 2", sans-serif;
	--wp--preset--font-family--display: Nunito, "Baloo Bhaijaan 2", sans-serif;
	--wp--preset--font-family--arabic: "Baloo Bhaijaan 2", Nunito, sans-serif;
	--tsp-coral: #e8876b;
	--tsp-peach: #f7d9cc;
	--tsp-r: 18px;
	font-size: 15px;
}

.tothiq-layout-yahal :is(h1, h2, h3) {
	font-weight: 800;
}

.tothiq-layout-yahal .wp-element-button,
.tothiq-layout-yahal .wp-block-button__link {
	border-radius: 99px;
	background: var(--wp--preset--color--accent);
	font-weight: 700;
	padding: 13px 28px;
}

/* Header */
.tsp-announce {
	background: var(--tsp-coral);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	padding-block: 9px;
}

.tsp-announce p {
	margin: 0;
}

.tsp-yahal-head {
	padding-block: 14px;
	border-block-end: 1px solid var(--tsp-line);
	background: #fff;
}

.tsp-yahal-head .tsp-head-row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;
}

.tsp-yahal-head .tsp-nav {
	font-weight: 700;
}

.tsp-yahal-head .tsp-brand__name {
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.tsp-yahal-head .tsp-brand__name::before {
	content: "❀ ";
	color: var(--tsp-coral);
}

.tsp-yahal-head .tsp-brand__role {
	font-size: 12px;
	font-weight: 600;
	color: var(--tsp-mut);
}

/* Hero */
.tsp-yahal-hero.wp-block-cover {
	min-height: 600px;
	padding-block: 60px 150px;
	color: #fff;
}

.tsp-yahal-hero h1 {
	font-size: clamp(34px, 4.6vw, 56px);
	line-height: 1.08;
	max-width: 560px;
	margin: 0 0 16px;
	color: #fff;
}

.tothiq-lang-ar.tsp-yahal-hero h1 {
	line-height: 1.35;
}

.tsp-yahal-hero p {
	max-width: 440px;
	font-size: 17px;
	margin: 0 0 26px;
}

.tsp-yahal-hero.tothiq-lang-ar .wp-block-cover__image-background {
	transform: scaleX(-1);
}

.tsp-btn-light .wp-block-button__link {
	background: #fff;
	color: var(--tsp-ink);
}

/* Categories overlap the hero */
.tsp-yahal-cats {
	position: relative;
	z-index: 2;
	margin-block-start: -110px;
}

.tsp-cat-row {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 22px;
}

.tsp-cat-row > * {
	margin: 0;
}

.tsp-cat__img {
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: var(--tsp-r);
	border: 5px solid #fff;
	box-shadow: 0 8px 22px rgb(34 48 74 / .12);
	transition: transform .3s;
}

.tsp-cat__img img,
.tsp-cat__img a {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tsp-cat:hover .tsp-cat__img {
	transform: translateY(-4px);
}

.tsp-cat__name {
	margin: 12px 0 0;
	font-weight: 800;
	font-size: 16px;
	line-height: 1.3;
}

.tsp-cat__name small {
	font-weight: 400;
	font-size: 13px;
	color: var(--tsp-mut);
}

/* Product cards: Add to bag sits on the photo */
.tsp-cards .wc-block-components-product-image {
	border-radius: var(--tsp-r);
}

.tsp-cards .tsp-add {
	position: absolute;
	inset-inline: 12px;
	inset-block-start: calc(133.33cqw - 56px);
	z-index: 2;
	margin: 0;
	opacity: 0;
	transform: translateY(8px);
	transition: .25s;
}

.tsp-cards li:hover .tsp-add,
.tsp-cards li:focus-within .tsp-add {
	opacity: 1;
	transform: none;
}

.tsp-cards .tsp-add .wc-block-components-product-button__button,
.tsp-cards .tsp-add .wp-block-button__link {
	background: #fff;
	color: var(--tsp-ink);
	box-shadow: 0 4px 14px rgb(0 0 0 / .08);
}

/* Promises */
.tsp-promises {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	background: var(--tsp-soft);
	border-radius: var(--tsp-r);
	padding: 30px 34px;
}

.tsp-promise {
	margin: 0;
	display: grid;
	grid-template-columns: 52px 1fr;
	align-items: center;
	column-gap: 14px;
	color: var(--tsp-mut);
	font-size: 13px;
	line-height: 1.5;
}

.tsp-promise strong {
	color: var(--tsp-ink);
	font-size: 15px;
}

.tsp-promise::before {
	grid-row: span 3;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--tsp-coral);
	-webkit-mask-size: 24px;
	mask-size: 24px;
	box-shadow: none;
}

/* Bundle */
.tsp-bundle {
	display: grid;
	grid-template-columns: 5fr 7fr;
	gap: 26px;
}

.tsp-bundle > * {
	margin: 0;
}

.tsp-bundle__photo {
	margin: 0;
	border-radius: var(--tsp-r);
	overflow: hidden;
	min-height: 600px;
}

.tsp-bundle__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tsp-bundle__panel {
	background: var(--tsp-soft);
	border-radius: var(--tsp-r);
	padding: 52px 44px;
	text-align: center;
	gap: 8px;
}

.tsp-bundle__panel .tsp-title {
	margin: 0;
}

.tsp-bundle__products {
	width: 100%;
	margin: 22px 0 !important;
}

.tsp-bundle__products .wc-block-product-template.wc-block-product-template {
	gap: 16px;
}

.tsp-bundle__products .tsp-name {
	font-size: 14px;
}


/* Posts */
.tothiq-layout-yahal .tsp-posts .wp-block-post {
	border: 1px solid var(--tsp-line);
	border-radius: var(--tsp-r);
	overflow: hidden;
	padding-block-end: 18px;
}

.tothiq-layout-yahal .tsp-post-image {
	border-radius: 0;
}

.tothiq-layout-yahal .tsp-posts .wp-block-post > :not(.tsp-post-image) {
	margin-inline: 18px;
}

/* Footer */
.tsp-footer--yahal {
	background: var(--tsp-soft);
	border-radius: 40px 40px 0 0;
}

.tsp-footer--yahal .tsp-brand__name {
	font-size: 28px;
	font-weight: 800;
	text-transform: uppercase;
}

.tsp-footer--yahal .tsp-foot-wa {
	background: #fff;
	border-radius: var(--tsp-r);
	padding: 22px;
}

.tsp-footer--yahal .tsp-foot-bottom {
	border-color: #eadfd4;
}

@media (max-width: 900px) {
	.tsp-yahal-head .tsp-head-row {
		grid-template-columns: auto 1fr auto;
	}

	.tsp-yahal-head .tsp-nav {
		display: none;
	}

	.tsp-yahal-head .tsp-brand {
		align-items: flex-start;
	}

	.tsp-yahal-head .tsp-brand__name {
		font-size: 26px;
	}

	.tsp-yahal-head .tsp-brand__role {
		display: none;
	}

	.tsp-yahal-hero.wp-block-cover {
		min-height: 500px !important;
		padding-block: 40px 110px;
	}

	.tsp-yahal-cats {
		margin-block-start: -70px;
	}

	.tsp-cat-row {
		grid-template-columns: repeat(6, 34%);
		overflow-x: auto;
		gap: 12px;
		padding-block-end: 8px;
		scroll-snap-type: x mandatory;
	}

	.tsp-cat {
		scroll-snap-align: start;
	}

	.tsp-cards .tsp-add {
		opacity: 1;
		transform: none;
	}

	.tsp-promises {
		grid-template-columns: 1fr 1fr;
		padding: 22px;
	}

	.tsp-bundle {
		grid-template-columns: 1fr;
	}

	.tsp-bundle__photo {
		min-height: 360px;
	}

	.tsp-bundle__panel {
		padding: 32px 16px;
	}
}