/* Layla — modest fashion. White, pale grey tiles, one muted gold, square edges, Playfair Display with Noto Naskh Arabic for headlines. */

@font-face { font-family: "Playfair Display"; font-weight: 400; font-display: swap; src: url(fonts/playfair-display-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Playfair Display"; font-weight: 500; font-display: swap; src: url(fonts/playfair-display-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Noto Naskh Arabic"; font-weight: 500; font-display: swap; src: url(fonts/noto-naskh-arabic-arabic-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Noto Naskh Arabic"; font-weight: 600; font-display: swap; src: url(fonts/noto-naskh-arabic-arabic-600-normal.woff2) format("woff2"); }

body.tothiq-layout-layla {
	--wp--preset--color--ink: #1a1a1a;
	--wp--preset--color--muted: #7a7a7a;
	--wp--preset--color--soft: #f5f5f3;
	--wp--preset--color--tile: #f5f5f3;
	--wp--preset--color--divider: #ececec;
	--wp--preset--color--accent: #b89b5e;
	--wp--preset--color--sale: #b89b5e;
	--tsp-serif: "Playfair Display", "Noto Naskh Arabic", Georgia, serif;
}

.tothiq-layout-layla .tsp-serif,
.tothiq-layout-layla .tsp-serif a {
	font-family: var(--tsp-serif);
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
}

.tothiq-layout-layla .tothiq-lang-ar .tsp-serif,
.tothiq-layout-layla .tothiq-lang-ar.tsp-serif,
.tothiq-layout-layla.is-arabic .tsp-serif {
	font-family: "Noto Naskh Arabic", var(--tsp-serif);
	font-weight: 600;
}

.tothiq-layout-layla .wp-element-button,
.tothiq-layout-layla .wp-block-button__link {
	border-radius: 0;
	background: var(--tsp-ink);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 14px 30px;
}

.tothiq-layout-layla .tothiq-lang-ar .wp-block-button__link,
.tothiq-layout-layla.is-arabic .wp-block-button__link {
	text-transform: none;
	letter-spacing: 0;
	font-size: 14px;
}

.tsp-btn-gold .wp-block-button__link,
.tsp-layla-join .wp-block-button__link {
	background: var(--tsp-ac) !important;
	color: #fff !important;
}

.tsp-section-gap {
	margin-block-start: var(--tsp-gap) !important;
}

/* Header */
.tsp-layla-head {
	border-block-end: 1px solid var(--tsp-line);
	padding-block: 18px;
}

.tsp-layla-head .tsp-head-row {
	gap: 40px;
}

.tsp-layla-head .tsp-brand__name {
	font-family: var(--tsp-serif);
	font-size: 30px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.tsp-layla-head.tothiq-lang-ar .tsp-brand__name {
	font-family: "Noto Naskh Arabic", var(--tsp-serif);
	font-weight: 600;
	letter-spacing: 0;
}

.tsp-layla-head .tsp-nav {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.tsp-layla-head.tothiq-lang-ar .tsp-nav {
	text-transform: none;
	letter-spacing: 0;
	font-size: 15px;
	font-weight: 500;
}

.tsp-layla-head .tsp-tools {
	margin-inline-start: auto;
}

/* Hero */
.tsp-layla-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 640px;
	background: var(--tsp-soft);
	margin: 0 !important;
}

.tsp-layla-hero > * {
	margin: 0;
}

.tsp-layla-hero__copy {
	align-self: center;
	padding-block: 60px;
	padding-inline: max(24px, calc((100vw - 1360px) / 2 + 24px)) 60px;
}

.tsp-layla-hero__copy h1 {
	margin: 14px 0 20px;
	font-size: clamp(36px, 4.4vw, 60px);
	line-height: 1.1;
	text-wrap: balance;
}

.tsp-layla-hero.tothiq-lang-ar h1 {
	line-height: 1.5;
}

.tsp-layla-hero__copy .tsp-muted {
	max-width: 440px;
	margin-block-end: 30px;
	font-size: 15px;
}

.tsp-layla-hero__photo {
	margin: 0;
}

.tsp-layla-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
}

/* Tiles */
.tsp-layla-tiles {
	padding-block-start: 20px;
}

.tsp-tile-row {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

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

.tsp-tile {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--tsp-tile);
}

.tsp-tile figure,
.tsp-tile figure a,
.tsp-tile img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.tsp-tile img {
	transition: transform .5s;
}

.tsp-tile:hover img {
	transform: scale(1.04);
}

.tsp-tile__label {
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: 0;
	margin: 0;
	min-width: 60%;
	background: rgb(255 255 255 / .94);
	line-height: 1.3;
}

.tsp-tile__label a {
	display: block;
	padding: 14px 20px;
}

.tsp-tile__label strong {
	font-size: 20px;
}

.tsp-tile__label span {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: underline;
}

.tsp-layla-tiles.tothiq-lang-ar .tsp-tile__label span {
	letter-spacing: 0;
	text-transform: none;
	font-size: 13px;
}

/* Category mosaic */
.tsp-catmosaic {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 20px;
	height: 720px;
}

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

.tsp-catmosaic__tile {
	position: relative;
	overflow: hidden;
	background: var(--tsp-tile);
}

.tsp-catmosaic__tile:first-child {
	grid-row: span 2;
}

.tsp-catmosaic__tile figure,
.tsp-catmosaic__tile figure a,
.tsp-catmosaic__tile img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.tsp-catmosaic__tile img {
	transition: transform .6s;
}

.tsp-catmosaic__tile:hover img {
	transform: scale(1.04);
}

.tsp-catmosaic__label {
	position: absolute;
	inset-inline-start: 24px;
	inset-block-end: 22px;
	margin: 0;
	background: #fff;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.tothiq-lang-ar .tsp-catmosaic__label {
	letter-spacing: 0;
	text-transform: none;
	font-size: 15px;
}

/* Product cards: flat, centred */
.tsp-flat li {
	text-align: center;
}

.tsp-flat .tsp-name {
	font-weight: 500;
	font-size: 14px;
}

.tsp-flat .tsp-price {
	font-weight: 600;
	font-size: 14px;
}

.tsp-flat .wc-block-components-product-sale-badge {
	border-radius: 0;
	background: var(--tsp-ac);
	color: #fff;
}

.tothiq-layout-layla .tsp-tab.is-active {
	border-color: var(--tsp-ink);
}

/* Story banner */
.tsp-story.wp-block-cover {
	color: #fff;
	padding-block: 60px;
}

.tsp-story__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 40px;
}

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

.tsp-story__play {
	justify-self: center;
	display: grid;
	place-items: center;
	width: 92px;
	height: 92px;
	border-radius: 50%;
	border: 1px solid rgb(255 255 255 / .6);
	background: rgb(255 255 255 / .16);
	position: relative;
	margin: 0;
}

.tsp-story__play::before {
	width: 30px;
	height: 30px;
	background: #fff;
}

.tsp-story__play a {
	position: absolute;
	inset: 0;
	font-size: 0;
	border-radius: 50%;
}

.tsp-story__copy {
	max-width: 480px;
}

.tsp-story .tsp-eyebrow,
.tsp-layla-join .tsp-eyebrow {
	color: #e8d9b8;
}

.tsp-story h2,
.tsp-layla-join h2 {
	margin: 10px 0 14px;
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1.15;
	color: #fff;
}

.tsp-story.tothiq-lang-ar h2,
.tsp-layla-join.tothiq-lang-ar h2 {
	line-height: 1.5;
}

.tsp-story p:not(.tsp-eyebrow) {
	opacity: .92;
	margin-block-end: 24px;
}

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

/* Posts: magazine */
.tothiq-layout-layla .tsp-posts .wp-block-post {
	text-align: center;
}

.tothiq-layout-layla .tsp-post-title {
	font-weight: 500;
	font-size: 16px;
}

.tothiq-layout-layla .tsp-post-more {
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Join */
.tsp-layla-join.wp-block-cover {
	color: #fff;
	padding-block: 60px;
}

/* Promise */
.tsp-promise-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: center;
}

.tsp-promise-row.is-alone {
	grid-template-columns: 1fr;
	max-width: 720px;
	margin-inline: auto !important;
	text-align: center;
}

.tsp-promise-row.is-alone .wp-block-buttons {
	justify-content: center;
}

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

.tsp-brand-grid--3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 0;
	border-block-start: 1px solid var(--tsp-line);
	border-inline-start: 1px solid var(--tsp-line);
}

.tsp-brand-grid--3 span {
	border-block-end: 1px solid var(--tsp-line);
	border-inline-end: 1px solid var(--tsp-line);
	padding: 34px 10px;
	text-align: center;
	font-size: 20px;
	letter-spacing: .14em;
	color: #9b9b9b;
	font-weight: 500;
}

/* Instagram wall */
.tsp-wall {
	position: relative;
}

.tsp-wall__grid .wc-block-product-template.wc-block-product-template {
	gap: 0;
}

.tsp-wall__grid .wc-block-components-product-image {
	border-radius: 0;
}

.tsp-wall__card {
	position: absolute;
	inset: 0;
	margin: auto !important;
	width: 280px;
	height: max-content;
	background: #fff;
	padding: 26px 20px;
	box-shadow: 0 10px 30px rgb(0 0 0 / .12);
	line-height: 1.6;
}

.tsp-wall__card strong {
	font-size: 13px;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.tsp-wall__card a {
	font-size: 22px;
}

.tsp-wall__card small {
	color: var(--tsp-mut);
}

/* Only whole rows: with fewer than 12 products the wall keeps one full row. */
.tsp-wall .tsp-gallery ul:not(:has(> li:nth-child(12))) > li:nth-child(n+7) {
	display: none;
}

/* Footer */
.tsp-footer--layla {
	border-block-start: 1px solid var(--tsp-line);
	margin-block-start: 0;
}

.tsp-footer--layla .tsp-brand__name {
	font-family: var(--tsp-serif);
	font-size: 28px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.tsp-footer--layla .tsp-foot-title {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.tsp-footer--layla.tothiq-lang-ar .tsp-foot-title {
	text-transform: none;
	letter-spacing: 0;
	font-size: 14px;
}

@media (max-width: 900px) {
	.tsp-layla-head .tsp-nav,
	.tsp-layla-head .tothiq-lang-switch {
		display: none;
	}

	.tsp-layla-head .tsp-brand__name {
		font-size: 24px;
	}

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

	.tsp-layla-hero__photo {
		order: -1;
		height: 440px;
	}

	.tsp-layla-hero__copy {
		padding: 30px 20px;
	}

	.tsp-tile-row {
		grid-template-columns: repeat(4, 70%);
		overflow-x: auto;
		gap: 12px;
	}

	.tsp-catmosaic {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: none;
		height: auto;
		gap: 10px;
	}

	.tsp-catmosaic__tile {
		aspect-ratio: 4 / 5;
	}

	.tsp-catmosaic__tile:first-child {
		grid-column: 1 / -1;
		grid-row: auto;
		aspect-ratio: 1;
	}

	.tsp-story__row {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.tsp-promise-row {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.tsp-brand-grid--3 span {
		font-size: 15px;
		padding: 22px 6px;
	}

	.tsp-wall__grid .wc-block-product-template.wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.tsp-wall .tsp-gallery li:nth-child(n+5) {
		display: list-item;
	}

	.tsp-wall .tsp-gallery li:nth-child(n+10) {
		display: none;
	}

	.tsp-wall .tsp-gallery ul:not(:has(> li:nth-child(6))) > li:nth-child(n+4) {
		display: none;
	}

	.tsp-wall__card {
		width: 220px;
	}
}