/* Dar — home and decor. Sage and sand, square edges, light Jost headings (IBM Plex Sans Arabic in Arabic). */

body.tothiq-layout-dar {
	--wp--preset--color--ink: #2d2d2b;
	--wp--preset--color--muted: #7c7a74;
	--wp--preset--color--soft: #f4f1ec;
	--wp--preset--color--tile: #f7f6f3;
	--wp--preset--color--divider: #e7e3dc;
	--wp--preset--color--accent: #5d7b70;
	--wp--preset--color--sale: #5d7b70;
	--wp--preset--font-family--body: Jost, "IBM Plex Sans Arabic", sans-serif;
	--wp--preset--font-family--display: Jost, "IBM Plex Sans Arabic", sans-serif;
	--tsp-sage: #a9bdb3;
	font-size: 15px;
}

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

.tothiq-layout-dar .tothiq-lang-ar :is(h1, h2, h3),
.tothiq-layout-dar.is-arabic :is(h1, h2, h3) {
	font-weight: 500;
}

.tothiq-layout-dar .wp-element-button,
.tothiq-layout-dar .wp-block-button__link {
	border-radius: 0;
	background: var(--tsp-ac);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 13px 26px;
}

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

.tsp-btn-outline .wp-block-button__link {
	background: transparent;
	color: currentColor;
	border: 1px solid currentColor;
}

/* Header */
.tsp-dar-bar {
	background: var(--tsp-ac);
	color: #fff;
	font-size: 12px;
	padding-block: 9px;
}

.tsp-dar-bar p {
	margin: 0;
}

.tsp-dar-bar .tothiq-lang-switch a {
	color: #fff;
	text-decoration: underline;
}

.tsp-dar-head {
	border-block-end: 1px solid var(--tsp-line);
	padding-block: 20px;
}

.tsp-dar-head .tsp-head-row {
	gap: 36px;
}

.tsp-dar-head .tsp-brand__name {
	font-size: 30px;
	font-weight: 500;
	letter-spacing: .02em;
	text-transform: lowercase;
}

.tsp-dar-head .tsp-nav {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
}

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

.tsp-search--box {
	margin-inline-start: auto !important;
	width: 280px;
}

.tsp-search--box .wp-block-search__inside-wrapper {
	border: 1px solid var(--tsp-line);
	padding: 2px 8px;
}

.tsp-search--box .wp-block-search__input {
	border: 0;
	font-size: 13px;
	background: none;
}

.tsp-dar-icons {
	border-block-end: 1px solid var(--tsp-line);
}

.tsp-iconbar {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.tsp-iconbar > p {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 14px;
	padding-block: 18px;
	color: var(--tsp-ac);
}

.tsp-iconbar > p::before {
	width: 34px;
	height: 34px;
}

.tsp-iconbar a {
	color: var(--tsp-ink);
	line-height: 1.35;
}

.tsp-iconbar small {
	color: var(--tsp-mut);
	font-size: 12px;
}

/* Hero */
.tsp-dar-hero-wrap {
	padding-block-start: 26px;
}

.tsp-dar-hero {
	display: grid;
	grid-template-columns: 4fr 8fr;
	min-height: 540px;
}

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

.tsp-dar-hero__panel {
	background: var(--tsp-sage);
	color: #fff;
	padding: 60px 48px;
	gap: 14px;
}

.tsp-dar-hero__panel .tsp-eyebrow {
	color: #fff;
	letter-spacing: .2em;
}

.tsp-dar-hero__panel h1 {
	margin: 0;
	font-size: clamp(34px, 4vw, 50px);
	line-height: 1.1;
	color: #fff;
}

.tothiq-lang-ar .tsp-dar-hero__panel h1 {
	line-height: 1.45;
}

.tsp-dar-hero__price {
	font-size: 17px;
	margin: 0 0 10px;
}

.tsp-dar-hero__panel .tsp-btn-outline .wp-block-button__link {
	color: #fff;
}

.tsp-dar-hero__photo {
	margin: 0;
	overflow: hidden;
}

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

/* Brands */
.tsp-brands {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: 18px 40px;
	margin: 0;
	padding-block: 40px;
	border-block-end: 1px solid var(--tsp-line);
	color: #a6a39c;
	font-size: 20px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
}

/* Mosaic */
.tsp-mosaic {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 26px;
	min-height: 640px;
}

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

.tsp-mosaic__tile {
	position: relative;
	overflow: hidden;
}

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

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

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

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

.tsp-mosaic__label {
	position: absolute;
	inset-inline-start: 0;
	inset-block-end: 0;
	margin: 0;
	max-width: 300px;
	background: var(--tsp-sage);
	font-size: 24px;
	font-weight: 300;
	line-height: 1.25;
}

.tsp-mosaic__label a {
	display: block;
	padding: 24px 28px;
	color: #fff;
}

.tsp-mosaic__label small {
	display: inline-block;
	margin-block-start: 10px;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-block-end: 1px solid;
}

/* Products */
.tothiq-layout-dar .tsp-products .wc-block-components-product-image {
	background: var(--wp--preset--color--tile);
}

.tothiq-layout-dar .tsp-products li {
	text-align: center;
}

.tothiq-layout-dar .tsp-name {
	font-weight: 500;
}

.tothiq-layout-dar .tsp-price {
	color: var(--tsp-ac);
	font-weight: 500;
}

.tothiq-layout-dar .tsp-products .wc-block-components-product-sale-badge {
	background: var(--tsp-ac);
	color: #fff;
}

.tothiq-layout-dar .tsp-add {
	position: absolute;
	inset-inline: 0;
	inset-block-start: calc(100cqw - 42px);
	margin: 0;
	opacity: 0;
	transition: opacity .25s;
}

.tothiq-layout-dar li:hover .tsp-add,
.tothiq-layout-dar li:focus-within .tsp-add {
	opacity: 1;
}

.tothiq-layout-dar .tsp-add .wc-block-components-product-button__button,
.tothiq-layout-dar .tsp-add .wp-block-button__link {
	border-radius: 0;
	width: 100%;
}

.tothiq-layout-dar .tsp-section .wp-block-buttons {
	margin-block-start: 40px;
}

/* Styled room */
.tsp-split {
	display: grid;
	grid-template-columns: 5fr 6fr;
	gap: 60px;
	align-items: center;
	background: var(--tsp-soft);
	padding-inline-end: 60px;
}

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

.tsp-split__media {
	position: relative;
	height: 620px;
}

.tsp-split__media figure,
.tsp-split__media img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

.tsp-split__label {
	position: absolute;
	inset-inline-end: 0;
	inset-block-end: 40px;
	margin: 0;
	background: var(--tsp-sage);
	color: #fff;
	padding: 20px 28px;
	font-size: 22px;
	font-weight: 300;
}

.tsp-split__copy .tsp-title {
	font-size: clamp(30px, 3.4vw, 44px);
	margin-block-end: 14px;
}

.tsp-split__pair {
	margin-block: 26px !important;
}

.tsp-split__pair img {
	aspect-ratio: 3 / 2;
}

/* Promise cards */
.tsp-cards3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
}

.tsp-card3 {
	margin: 0;
	border: 1px solid var(--tsp-line);
	padding: 40px 30px;
	color: var(--tsp-mut);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.tsp-card3 strong {
	color: var(--tsp-ink);
	font-size: 18px;
	font-weight: 500;
}

.tsp-card3::before {
	width: 44px;
	height: 44px;
	color: var(--tsp-ac);
	margin-block-end: 10px;
}

/* Journal: photo beside text */
.tsp-posts--side .wp-block-post-template {
	gap: 34px;
}

.tsp-posts--side .wp-block-post {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto 1fr;
	column-gap: 24px;
	align-items: start;
}

.tsp-posts--side .tsp-post-image {
	grid-row: 1 / span 3;
	margin: 0;
}

.tsp-posts--side .tsp-post-title {
	font-weight: 400;
	font-size: 22px;
}

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

.tsp-footer--dar .tsp-brand__name {
	font-size: 28px;
	font-weight: 500;
	text-transform: lowercase;
}

.tsp-footer--dar .tsp-foot-title {
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: 12px;
}

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

@media (max-width: 900px) {
	.tsp-dar-bar .wp-block-group {
		flex-wrap: wrap;
	}

	.tsp-dar-head .tsp-head-row {
		gap: 14px;
	}

	.tsp-dar-head .tsp-nav,
	.tsp-search--box {
		display: none;
	}

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

	.tsp-iconbar {
		grid-template-columns: repeat(5, 62%);
		overflow-x: auto;
		gap: 10px;
	}

	.tsp-dar-hero {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.tsp-dar-hero__photo {
		order: -1;
		height: 320px;
	}

	.tsp-dar-hero__panel {
		padding: 34px 20px;
	}

	.tsp-brands {
		justify-content: center;
		font-size: 15px;
	}

	.tsp-mosaic {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		min-height: 0;
		gap: 14px;
	}

	.tsp-mosaic__tile {
		height: 260px;
	}

	.tsp-mosaic__tile:first-child {
		grid-row: auto;
		height: 400px;
	}

	.tothiq-layout-dar .tsp-add {
		opacity: 1;
	}

	.tsp-split {
		grid-template-columns: 1fr;
		padding: 0 0 30px;
		gap: 24px;
	}

	.tsp-split__media {
		height: 380px;
	}

	.tsp-split__copy {
		padding-inline: 20px;
	}

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

	.tsp-posts--side .wp-block-post {
		grid-template-columns: 1fr;
	}

	.tsp-posts--side .tsp-post-image {
		grid-row: auto;
	}
}
