/*
 * Tothiq Store Pro — shared layout structure. Each layout file (yahal.css,
 * dar.css, volt.css, layla.css) sets its own tokens, fonts and details on
 * top. Logical properties keep everything right in Arabic.
 */

body[class*="tothiq-layout-"] {
	--tsp-ink: var(--wp--preset--color--ink);
	--tsp-mut: var(--wp--preset--color--muted);
	--tsp-line: var(--wp--preset--color--divider);
	--tsp-soft: var(--wp--preset--color--soft);
	--tsp-tile: var(--wp--preset--color--tile);
	--tsp-ac: var(--wp--preset--color--accent);
	--tsp-r: 0px;
	--tsp-gap: clamp(64px, 8vw, 96px);
}

.tsp-section {
	padding-block-start: var(--tsp-gap);
}

.tothiq-home > .tsp-section:first-child,
.tothiq-home > *:first-child {
	padding-block-start: 0;
}

.tsp-eyebrow {
	margin: 0;
	color: var(--tsp-ac);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.tothiq-lang-ar .tsp-eyebrow,
.is-arabic .tsp-eyebrow {
	letter-spacing: 0;
	text-transform: none;
	font-size: 14px;
}

.tsp-title {
	margin: 4px 0 30px;
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.2;
	text-wrap: balance;
}

.tothiq-lang-ar .tsp-title {
	line-height: 1.5;
}

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

.tsp-note {
	color: var(--tsp-mut);
	font-size: 13px;
	margin: 10px 0 0;
}

/* ---------- Header basics ---------- */

.tsp-head-row p,
.tsp-brand p {
	margin: 0;
}

.tsp-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.tsp-nav a:hover {
	text-decoration: none;
	opacity: .75;
}

.tsp-brand {
	gap: 4px;
	text-align: center;
}

.tsp-brand__name a:hover {
	text-decoration: none;
}

.tsp-brand .wp-block-site-logo + .tsp-brand__name {
	display: none;
}

.tsp-tools {
	gap: 16px;
	align-items: center;
}

.tsp-tools .tothiq-lang-switch {
	margin: 0;
	font-size: 13px;
}

.tsp-tools .tothiq-lang-switch a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.tsp-search.wp-block-search {
	margin: 0;
}

.tsp-search .wp-block-search__button,
.tsp-search .wp-block-search__button.wp-element-button {
	background: none;
	color: inherit;
	padding: 4px;
	margin: 0;
	border: 0;
}

.tsp-search .wp-block-search__button svg {
	width: 24px;
	height: 24px;
	fill: currentColor;
}

.tsp-search .wp-block-search__inside-wrapper {
	border: 0;
	padding: 0;
}

.wc-block-mini-cart__button,
.wc-block-customer-account a {
	color: inherit;
}

/* ---------- Product cards ---------- */

.tsp-cols-1 { --tsp-cols: 1; }
.tsp-cols-2 { --tsp-cols: 2; }
.tsp-cols-3 { --tsp-cols: 3; }
.tsp-cols-4 { --tsp-cols: 4; }
.tsp-cols-5 { --tsp-cols: 5; }
.tsp-cols-6 { --tsp-cols: 6; }

.tsp-gallery .wc-block-product-template.wc-block-product-template {
	gap: 12px;
}

.tsp-gallery .wc-block-components-product-image {
	margin: 0;
}

.tsp-products .wc-block-product-template.wc-block-product-template {
	display: grid;
	grid-template-columns: repeat(var(--tsp-cols, 4), minmax(0, 1fr));
	gap: 40px 24px;
}

.tsp-products.tsp-products .wc-block-product-template.wc-block-product-template > li.wc-block-product {
	width: 100%;
	max-width: none;
	margin: 0;
	position: relative;
	container-type: inline-size;
}

.tsp-products .wp-block-woocommerce-product-collection {
	margin: 0;
}

.tsp-products .wc-block-components-product-image {
	position: relative;
	margin: 0 0 12px;
	overflow: hidden;
	background: var(--tsp-tile);
	border-radius: var(--tsp-r);
}

.tsp-products .wc-block-components-product-image img {
	transition: transform .5s ease;
}

.tsp-products li:hover .wc-block-components-product-image img {
	transform: scale(1.04);
}

.tsp-products .wc-block-components-product-sale-badge {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-start: 12px;
	inset-inline-end: auto !important;
	z-index: 2;
	border: 0;
	border-radius: 99px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--sale);
	padding: 3px 10px;
	font-size: 12px;
	font-weight: 600;
	text-transform: none;
}

.tsp-name {
	margin: 0 0 2px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.tsp-name a:hover {
	text-decoration: underline;
}

.tsp-price {
	font-weight: 700;
	font-size: 15px;
}

.tsp-price del {
	color: var(--tsp-mut);
	font-weight: 400;
	margin-inline-end: 6px;
}

.tsp-price ins {
	text-decoration: none;
	color: var(--wp--preset--color--sale);
}

.tsp-cat.wp-block-post-terms {
	margin: 0;
	color: var(--tsp-mut);
	font-size: 12px;
}

.tsp-cat a {
	color: inherit;
}

.tsp-sizes {
	margin: 0 0 2px;
	color: var(--tsp-mut);
	font-size: 11px;
	letter-spacing: .14em;
}

.tsp-swatches {
	display: flex;
	gap: 6px;
	margin: 6px 0 0;
}

.tsp-swatches span {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--tsp-dot);
	border: 2px solid var(--wp--preset--color--base);
	box-shadow: 0 0 0 1px var(--tsp-line);
}

.tsp-rating .wc-block-components-product-rating__stars {
	font-size: 13px;
	color: #f5a524;
}

.tsp-add {
	margin: 10px 0 0;
}

.tsp-add .wp-block-button__link,
.tsp-add .wc-block-components-product-button__button {
	width: 100%;
	border-radius: 99px;
	font-size: 13px;
	padding: 9px 12px;
}

/* ---------- Countdown ---------- */

.tsp-countdown-label {
	margin: 14px 0 6px;
	text-align: center;
	color: var(--tsp-mut);
	font-size: 12px;
}

.tsp-countdown {
	display: flex;
	justify-content: center;
	gap: 8px;
}

.tsp-countdown span {
	display: grid;
	width: 60px;
	padding: 8px 0;
	text-align: center;
	background: var(--tsp-tile);
	border-radius: 8px;
	line-height: 1.1;
}

.tsp-countdown b {
	font-size: 20px;
	font-variant-numeric: tabular-nums;
}

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

/* ---------- Posts ---------- */

.tsp-posts .wp-block-post-template {
	gap: 24px;
}

.tsp-post-image {
	margin: 0 0 12px;
	overflow: hidden;
	border-radius: var(--tsp-r);
}

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

.tsp-post-title {
	margin: 4px 0 6px;
	font-size: 17px;
	line-height: 1.35;
}

.tsp-post-more {
	color: var(--tsp-ac);
	font-weight: 600;
	font-size: 13px;
}

/* ---------- Promise icons ---------- */

[class*="tsp-icon-"]::before {
	content: "";
	display: inline-block;
	flex: none;
	width: 24px;
	height: 24px;
	background: currentColor;
	-webkit-mask: var(--tsp-i) center / contain no-repeat;
	mask: var(--tsp-i) center / contain no-repeat;
}

.tsp-icon-truck { --tsp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M3 6h11v10H3zM14 10h4l3 3v3h-7z'/%3E%3Ccircle cx='7' cy='18' r='1.6'/%3E%3Ccircle cx='17' cy='18' r='1.6'/%3E%3C/svg%3E"); }
.tsp-icon-return { --tsp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 12a8 8 0 1 0 2.3-5.7L4 8.6'/%3E%3Cpath d='M4 4v4.6h4.6'/%3E%3C/svg%3E"); }
.tsp-icon-gift { --tsp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='3' y='8' width='18' height='4'/%3E%3Cpath d='M5 12v9h14v-9M12 8v13M12 8S10 3 7.5 4.5 9 8 12 8zm0 0s2-5 4.5-3.5S15 8 12 8z'/%3E%3C/svg%3E"); }
.tsp-icon-leaf { --tsp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M5 19c0-9 6-14 15-14 0 9-5 15-14 15'/%3E%3Cpath d='M5 19 14 10'/%3E%3C/svg%3E"); }
.tsp-icon-chat { --tsp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M4 19l1.3-3.9A8 8 0 1 1 8.8 18.7z'/%3E%3C/svg%3E"); }
.tsp-icon-shield { --tsp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8-8 9-4.6-1-8-4.5-8-9V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.tsp-icon-card { --tsp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Crect x='3' y='6' width='18' height='12' rx='1.5'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E"); }
.tsp-icon-lamp { --tsp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M8 3h8l3 8H5z'/%3E%3Cpath d='M12 11v8M8 21h8'/%3E%3C/svg%3E"); }
.tsp-icon-vase { --tsp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M9 3h6M10 3v3c-3 2-4 5-4 8a6 6 0 0 0 12 0c0-3-1-6-4-8V3'/%3E%3C/svg%3E"); }
.tsp-icon-frame { --tsp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='1'/%3E%3Cpath d='m4 16 5-5 4 4 3-3 4 4'/%3E%3C/svg%3E"); }
.tsp-icon-sofa { --tsp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M4 11V8a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M2 12a2 2 0 0 1 4 0v2h12v-2a2 2 0 0 1 4 0v6H2zM5 18v2M19 18v2'/%3E%3C/svg%3E"); }
.tsp-icon-candle { --tsp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M9 10h6v11H9zM12 10V7'/%3E%3Cpath d='M12 3c1.5 1.5 1.5 3 0 4-1.5-1-1.5-2.5 0-4z'/%3E%3C/svg%3E"); }
.tsp-icon-bowl { --tsp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M3 11h18a9 7 0 0 1-18 0zM9 18l-1 3h8l-1-3'/%3E%3C/svg%3E"); }
.tsp-icon-screen { --tsp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Crect x='3' y='4' width='18' height='12' rx='1'/%3E%3Cpath d='M9 20h6M12 16v4'/%3E%3C/svg%3E"); }
.tsp-icon-cpu { --tsp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Crect x='6' y='6' width='12' height='12' rx='1'/%3E%3Cpath d='M9 2v4M15 2v4M9 18v4M15 18v4M2 9h4M2 15h4M18 9h4M18 15h4'/%3E%3C/svg%3E"); }
.tsp-icon-battery { --tsp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4'%3E%3Crect x='3' y='7' width='16' height='10' rx='1.5'/%3E%3Cpath d='M21 11v2M6 10v4M9 10v4'/%3E%3C/svg%3E"); }
.tsp-icon-wifi { --tsp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M2 9a15 15 0 0 1 20 0M5 12.5a10 10 0 0 1 14 0M8.5 16a5 5 0 0 1 7 0'/%3E%3Ccircle cx='12' cy='19.5' r='.8'/%3E%3C/svg%3E"); }
.tsp-icon-bolt { --tsp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E"); }
.tsp-icon-play { --tsp-i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E"); }

/* ---------- Footer structure ---------- */

.tsp-footer {
	margin-block-start: var(--tsp-gap);
	padding-block: 56px 26px;
}

.tsp-foot-cols {
	display: grid;
	grid-template-columns: 1.4fr;
	grid-auto-columns: minmax(0, 1fr);
	grid-auto-flow: column;
	gap: 30px;
}

.tsp-foot-cols > *,
.tsp-foot-col > *,
.tsp-foot-brand > * {
	margin: 0;
}

.tsp-foot-title {
	margin-block-end: 12px !important;
	font-size: 14px;
	font-weight: 700;
	font-family: inherit;
}

.tsp-foot-links {
	line-height: 2.1;
	font-size: 14px;
}

.tsp-foot-links a {
	color: var(--tsp-mut);
}

.tsp-foot-wa .tsp-muted {
	font-size: 13px;
	margin-block-end: 8px !important;
}

.tsp-foot-phone {
	font-weight: 600;
	margin-block-end: 14px !important;
}

.tsp-foot-bottom {
	margin-block-start: 40px;
	padding-block-start: 20px;
	border-block-start: 1px solid var(--tsp-line);
	color: var(--tsp-mut);
	font-size: 12px;
}

.tsp-foot-bottom p {
	margin: 0;
}

/* The theme's own header strip is replaced by each layout's header. */
body[class*="tothiq-layout-"]:not(.tothiq-layout-noor) .tothiq-trust {
	display: none;
}

@media (max-width: 900px) {
	.tsp-products .wc-block-product-template.wc-block-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 12px;
	}

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

	.tsp-posts .wp-block-post-template {
		display: grid;
		grid-template-columns: repeat(4, 78%);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}

	.tsp-posts .wp-block-post-template > li {
		scroll-snap-align: start;
	}

	.tsp-foot-cols {
		grid-template-columns: 1fr 1fr;
		grid-auto-flow: row;
	}

	.tsp-foot-brand,
	.tsp-foot-wa {
		grid-column: 1 / -1;
	}

	.tsp-foot-bottom {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tsp-products .wc-block-components-product-image img {
		transition: none;
	}
}

/* ---------- Tabs ---------- */

.tsp-tab-nav {
	display: flex;
	justify-content: center;
	gap: 26px;
	margin: 0 0 28px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.tothiq-lang-ar .tsp-tab-nav,
.is-arabic .tsp-tab-nav {
	text-transform: none;
	letter-spacing: 0;
	font-size: 15px;
}

.tsp-tab {
	color: var(--tsp-mut);
	padding-block-end: 4px;
	border-block-end: 2px solid transparent;
}

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

.tsp-tab:hover {
	text-decoration: none;
	color: var(--tsp-ink);
}

.tsp-tabs.is-ready .tsp-tab-panel:not(.is-active) {
	display: none;
}

.tsp-tab-panel + .tsp-tab-panel {
	margin-block-start: 30px;
}

.tsp-tabs.is-ready .tsp-tab-panel {
	margin-block-start: 0;
}

/* The theme's WhatsApp buttons keep their own shape and colour in every layout. */
body[class*="tothiq-layout-"] .tothiq-btn--float .wp-block-button__link {
	width: 52px;
	height: 52px;
	padding: 0;
	border-radius: 50%;
	font-size: 0;
	letter-spacing: 0;
	background: var(--wp--preset--color--whatsapp);
}

body[class*="tothiq-layout-"] .tothiq-btn--whatsapp .wp-block-button__link {
	background: var(--wp--preset--color--whatsapp);
	color: #fff;
}