/*
Theme Name: Alkhawatim V2
Description: Mobile-first presentation theme for the Alkhawatim bilingual jewelry catalog.
Version: 1.1.14
Author: Alkhawatim
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alkhawatim-v2
*/

:root {
	--alkhawatim-color-primary: #561925;
	--alkhawatim-color-secondary: #6A2931;
	--alkhawatim-color-champagne: #D9C5AA;
	--alkhawatim-color-background: #f6efe7;
	--alkhawatim-color-surface: #eee2d2;
	--alkhawatim-color-surface-soft: #f2e9de;
	--alkhawatim-color-text: #2f2326;
	--alkhawatim-color-border: #967276;
	--alkhawatim-color-muted: #6e5c60;
	--alkhawatim-color-on-dark: #f4eadc;
	--alkhawatim-font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--alkhawatim-font-display: Georgia, "Times New Roman", serif;
	--alkhawatim-content-width: 80rem;
	--alkhawatim-reading-width: 46rem;
	--alkhawatim-radius: 0.25rem;
	--alkhawatim-radius-medium: 0.375rem;
	--alkhawatim-spacing-4: 0.25rem;
	--alkhawatim-spacing-8: 0.5rem;
	--alkhawatim-spacing-12: 0.75rem;
	--alkhawatim-spacing-16: 1rem;
	--alkhawatim-spacing-24: 1.5rem;
	--alkhawatim-spacing-32: 2rem;
	--alkhawatim-spacing-48: 3rem;
	--alkhawatim-spacing-64: 4rem;
	--alkhawatim-spacing-80: 5rem;
	--alkhawatim-spacing-96: 6rem;
	--alkhawatim-space-1: var(--alkhawatim-spacing-8);
	--alkhawatim-space-2: var(--alkhawatim-spacing-16);
	--alkhawatim-space-3: var(--alkhawatim-spacing-24);
	--alkhawatim-space-4: var(--alkhawatim-spacing-32);
	--alkhawatim-space-5: var(--alkhawatim-spacing-48);
	--alkhawatim-layout-gutter: var(--alkhawatim-spacing-16);
	--alkhawatim-layout-gutter-desktop: 2.5rem;
	--alkhawatim-layout-section: var(--alkhawatim-spacing-48);
	--alkhawatim-type-body: 0.9375rem;
	--alkhawatim-type-section-title: 1.625rem;
	--alkhawatim-type-product-title: 1.15rem;
	--alkhawatim-type-meta: 0.75rem;
	--alkhawatim-type-button: 0.875rem;
	--alkhawatim-size-button: 2.875rem;
	--alkhawatim-size-icon-button: 2.75rem;
	--alkhawatim-size-header: 3.875rem;
	--alkhawatim-button-padding-inline: 1.125rem;
}

@media (min-width: 48rem) {
	:root {
		--alkhawatim-layout-gutter: var(--alkhawatim-spacing-24);
		--alkhawatim-layout-section: var(--alkhawatim-spacing-64);
	}
}

@media (min-width: 64rem) {
	:root {
		--alkhawatim-layout-gutter: var(--alkhawatim-layout-gutter-desktop);
		--alkhawatim-layout-section: var(--alkhawatim-spacing-80);
		--alkhawatim-type-body: 1rem;
		--alkhawatim-type-section-title: 2.25rem;
		--alkhawatim-type-product-title: 1.29375rem;
		--alkhawatim-type-meta: 0.8125rem;
		--alkhawatim-type-button: 0.9375rem;
		--alkhawatim-size-header: 4.5rem;
		--alkhawatim-button-padding-inline: var(--alkhawatim-spacing-24);
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--alkhawatim-color-surface);
	color: var(--alkhawatim-color-text);
	font-family: var(--alkhawatim-font-body);
	font-size: var(--alkhawatim-type-body);
	line-height: 1.7;
	overflow-wrap: break-word;
}

button,
input,
select,
textarea {
	font: inherit;
}

button {
	color: inherit;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: var(--alkhawatim-color-primary);
	text-decoration: none;
}

a:hover {
	color: var(--alkhawatim-color-secondary);
}

:focus-visible {
	outline: 0.2rem solid currentColor;
	outline-offset: 0.2rem;
}

[hidden] {
	display: none !important;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	clip: auto !important;
	width: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	white-space: normal;
}

.site-shell {
	width: min(
		calc(100% - var(--alkhawatim-layout-gutter) - var(--alkhawatim-layout-gutter)),
		var(--alkhawatim-content-width)
	);
	margin-inline: auto;
}

.skip-link {
	position: fixed;
	inset-block-start: var(--alkhawatim-space-1);
	inset-inline-start: var(--alkhawatim-space-1);
	z-index: 1000;
	padding: 0.65rem var(--alkhawatim-space-2);
	background: var(--alkhawatim-color-champagne);
	color: var(--alkhawatim-color-primary);
	font-weight: 700;
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: translateY(0);
}

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--alkhawatim-size-button);
	padding-block: 0;
	padding-inline: var(--alkhawatim-button-padding-inline);
	border: 1px solid transparent;
	border-radius: var(--alkhawatim-radius-medium);
	font-size: var(--alkhawatim-type-button);
	font-weight: 700;
	line-height: 1.25;
	text-decoration: none;
}

.button--burgundy {
	border-color: var(--alkhawatim-color-primary);
	background: var(--alkhawatim-color-primary);
	color: var(--alkhawatim-color-on-dark);
}

.button--burgundy:hover {
	border-color: var(--alkhawatim-color-secondary);
	background: var(--alkhawatim-color-secondary);
	color: var(--alkhawatim-color-on-dark);
}

.button--champagne {
	border-color: var(--alkhawatim-color-champagne);
	background: var(--alkhawatim-color-champagne);
	color: var(--alkhawatim-color-primary);
}

.button--champagne:hover {
	border-color: var(--alkhawatim-color-on-dark);
	background: var(--alkhawatim-color-on-dark);
	color: var(--alkhawatim-color-primary);
}

.text-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--alkhawatim-size-button);
	font-weight: 700;
}

/* Header */

.site-header,
.site-footer {
	background: var(--alkhawatim-color-primary);
	color: var(--alkhawatim-color-on-dark);
}

.site-header {
	position: relative;
	z-index: 20;
	border-block-end: 1px solid rgba(217, 197, 170, 0.32);
}

.site-header__inner {
	display: grid;
	grid-template-columns: var(--alkhawatim-size-icon-button) minmax(0, 1fr) var(--alkhawatim-size-icon-button);
	align-items: center;
	gap: 0 var(--alkhawatim-spacing-12);
	min-height: var(--alkhawatim-size-header);
	padding-block: 0;
}

.site-branding {
	grid-column: 2;
	grid-row: 1;
	justify-self: center;
	min-width: 0;
	max-width: 100%;
	line-height: 0;
	text-align: center;
}

.site-title {
	margin: 0;
	font-family: var(--alkhawatim-font-display);
	font-size: clamp(1.0625rem, 5vw, 1.3125rem);
	font-weight: 650;
	line-height: 1.2;
}

html:not([dir="rtl"]) .site-title {
	letter-spacing: 0.035em;
}

.site-title a,
.site-header a,
.site-footer a {
	color: inherit;
}

.site-title a:hover {
	color: var(--alkhawatim-color-champagne);
}

.custom-logo-link:hover,
.site-footer__logo-link:hover {
	opacity: 0.82;
}

.custom-logo-link {
	display: inline-flex;
	align-items: center;
}

@supports (mask-image: url("assets/images/brand/alkhawatim-mark-light.svg")) or (-webkit-mask-image: url("assets/images/brand/alkhawatim-mark-light.svg")) {
	.site-header .custom-logo-link,
	.site-footer .custom-logo-link {
		background-color: var(--alkhawatim-color-champagne);
		-webkit-mask: url("assets/images/brand/alkhawatim-mark-light.svg") center / contain no-repeat;
		mask: url("assets/images/brand/alkhawatim-mark-light.svg") center / contain no-repeat;
	}

	.site-header .custom-logo,
	.site-footer .custom-logo {
		opacity: 0;
	}

	.site-footer__logo-link {
		background-color: var(--alkhawatim-color-champagne);
	}

	html[dir="rtl"] .site-footer__logo-link {
		-webkit-mask: url("assets/images/brand/alkhawatim-logo-ar-light.svg") center / contain no-repeat;
		mask: url("assets/images/brand/alkhawatim-logo-ar-light.svg") center / contain no-repeat;
	}

	html:not([dir="rtl"]) .site-footer__logo-link {
		-webkit-mask: url("assets/images/brand/alkhawatim-logo-en-light.svg") center / contain no-repeat;
		mask: url("assets/images/brand/alkhawatim-logo-en-light.svg") center / contain no-repeat;
	}

	.site-footer__logo {
		opacity: 0;
	}
}

.custom-logo {
	width: auto;
	max-width: min(12rem, 100%);
	max-height: 2.7rem;
}

.site-header__utilities {
	display: flex;
	grid-column: 3;
	grid-row: 1;
	align-items: center;
	justify-content: center;
	min-width: 0;
}

.site-switch {
	display: inline-flex;
	align-items: center;
	min-height: var(--alkhawatim-size-icon-button);
	padding-inline: var(--alkhawatim-spacing-8);
	font-size: var(--alkhawatim-type-meta);
	font-weight: 700;
	text-decoration: none;
}

.site-switch--desktop {
	display: none;
}

.site-switch--mobile {
	justify-content: center;
	width: 100%;
	border-block-start: 1px solid rgba(217, 197, 170, 0.25);
}

.header-control {
	display: inline-grid;
	place-items: center;
	width: var(--alkhawatim-size-icon-button);
	height: var(--alkhawatim-size-icon-button);
	padding: 0;
	border: 1px solid rgba(217, 197, 170, 0.28);
	border-radius: var(--alkhawatim-radius);
	background: transparent;
	cursor: pointer;
}

.menu-toggle,
.header-search-toggle {
	display: none;
}

.js .menu-toggle,
.js .header-search-toggle {
	display: inline-grid;
}

.menu-toggle {
	grid-column: 1;
	grid-row: 1;
}

.header-control:hover,
.header-control[aria-expanded="true"] {
	background: rgba(217, 197, 170, 0.14);
}

.header-search-toggle svg {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-width: 1.7;
}

.menu-toggle__lines,
.menu-toggle__lines::before,
.menu-toggle__lines::after {
	display: block;
	width: 1.25rem;
	height: 1px;
	background: currentColor;
	content: "";
}

.menu-toggle__lines {
	position: relative;
}

.menu-toggle__lines::before {
	position: absolute;
	inset-block-start: -0.4rem;
}

.menu-toggle__lines::after {
	position: absolute;
	inset-block-start: 0.4rem;
}

.primary-navigation {
	grid-column: 1 / -1;
	grid-row: 2;
	min-width: 0;
	padding-block-end: var(--alkhawatim-spacing-8);
}

.js .primary-navigation[data-open="false"] {
	display: none;
}

.primary-navigation ul,
.footer-navigation ul,
.footer-social ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.primary-navigation__menu {
	display: flex;
	flex-direction: column;
	border-block-start: 1px solid rgba(217, 197, 170, 0.25);
}

.primary-navigation a {
	display: flex;
	align-items: center;
	min-height: var(--alkhawatim-size-icon-button);
	padding-block: var(--alkhawatim-spacing-8);
	font-size: 0.95rem;
	text-decoration: none;
}

.primary-navigation a:hover,
.site-switch:hover {
	background: rgba(217, 197, 170, 0.14);
	color: var(--alkhawatim-color-champagne);
}

.primary-navigation .current-menu-item > a,
.primary-navigation .current_page_item > a,
.primary-navigation .current-menu-parent > a,
.primary-navigation .current-menu-ancestor > a {
	background: transparent;
	color: var(--alkhawatim-color-champagne);
	font-weight: 800;
}

.primary-navigation .sub-menu {
	padding-inline-start: var(--alkhawatim-space-2);
	border-inline-start: 1px solid rgba(217, 197, 170, 0.25);
}

.header-search {
	padding-block: 0 var(--alkhawatim-spacing-12);
}

.js .header-search[data-open="false"] {
	display: none;
}

.header-search .search-form {
	display: flex;
	gap: var(--alkhawatim-spacing-8);
	width: 100%;
	max-width: 36rem;
	margin-inline-start: auto;
}

.header-search .search-form label {
	flex: 1;
}

.header-search .search-field {
	width: 100%;
	min-height: var(--alkhawatim-size-button);
	padding: var(--alkhawatim-spacing-8) var(--alkhawatim-spacing-12);
	border: 1px solid var(--alkhawatim-color-champagne);
	border-radius: var(--alkhawatim-radius);
	background: var(--alkhawatim-color-background);
	color: var(--alkhawatim-color-text);
}

.header-search .search-submit {
	min-height: var(--alkhawatim-size-button);
	padding-inline: var(--alkhawatim-button-padding-inline);
	border: 1px solid var(--alkhawatim-color-champagne);
	border-radius: var(--alkhawatim-radius);
	background: var(--alkhawatim-color-champagne);
	color: var(--alkhawatim-color-primary);
	font-size: var(--alkhawatim-type-button);
	font-weight: 700;
	cursor: pointer;
}

/* General content */

.site-main {
	min-height: 55vh;
	padding-block: var(--alkhawatim-space-4);
}

.home-main {
	padding-block: 0;
}

.listing-header {
	margin-block-end: var(--alkhawatim-space-3);
}

.listing-header__description {
	max-width: var(--alkhawatim-reading-width);
	color: var(--alkhawatim-color-muted);
}

.listing-header__description > :last-child {
	margin-block-end: 0;
}

.page-title {
	margin: 0;
	color: var(--alkhawatim-color-primary);
	font-family: var(--alkhawatim-font-display);
	font-size: clamp(1.75rem, 7vw, 2.75rem);
	line-height: 1.2;
}

.content-list {
	display: grid;
	gap: var(--alkhawatim-space-3);
}

.content-card {
	min-width: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

.content-card__title {
	margin-block: 0 var(--alkhawatim-space-1);
	color: var(--alkhawatim-color-primary);
	font-family: var(--alkhawatim-font-display);
	font-size: clamp(1.35rem, 5vw, 2rem);
	line-height: 1.25;
}

.content-card__title a {
	color: inherit;
}

.content-card__title a:hover {
	color: var(--alkhawatim-color-secondary);
}

.content-card__media {
	display: block;
	width: 100%;
	margin-block-end: var(--alkhawatim-spacing-16);
	overflow: hidden;
	aspect-ratio: var(--alkhawatim-media-ratio, 1 / 1);
	background: transparent;
}

.content-card__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.content-card__image--cover {
	object-fit: cover;
}

/* Reusable catalog cards. */

.product-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--alkhawatim-spacing-16);
}

.catalog-grid .content-card {
	grid-column: 1 / -1;
	padding-block: var(--alkhawatim-spacing-16);
	border-block-start: 1px solid rgba(150, 114, 118, 0.22);
}

.product-card {
	min-width: 0;
}

.product-card__media {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	border: 0;
	border-radius: 0;
	aspect-ratio: var(--alkhawatim-media-ratio, 1 / 1);
	background: transparent;
}

.product-card__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.product-card__image--cover {
	object-fit: cover;
}

.product-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: var(--alkhawatim-spacing-8);
	width: 100%;
	height: 100%;
	padding: var(--alkhawatim-spacing-12);
	background: var(--alkhawatim-color-surface-soft);
	color: var(--alkhawatim-color-muted);
	font-size: var(--alkhawatim-type-meta);
	text-align: center;
}

.product-card__placeholder-mark {
	display: grid;
	place-items: center;
	width: 3.25rem;
	aspect-ratio: 1;
	border: 1px solid var(--alkhawatim-color-border);
	color: var(--alkhawatim-color-primary);
	font-family: var(--alkhawatim-font-display);
	font-size: 1.45rem;
}

.product-card__badges {
	position: absolute;
	inset-block-start: var(--alkhawatim-spacing-8);
	inset-inline-start: var(--alkhawatim-spacing-8);
	display: flex;
	align-items: flex-start;
	flex-direction: column;
	gap: var(--alkhawatim-spacing-4);
}

.product-card__badge {
	display: inline-flex;
	align-items: center;
	min-height: 1.25rem;
	padding: 0.125rem var(--alkhawatim-spacing-8);
	border: 0;
	border-radius: var(--alkhawatim-radius);
	background: var(--alkhawatim-color-primary);
	color: var(--alkhawatim-color-on-dark);
	font-size: var(--alkhawatim-type-meta);
	font-weight: 800;
	letter-spacing: 0.04em;
	line-height: 1;
	text-transform: uppercase;
}

.product-card__badge--unavailable {
	border: 1px solid var(--alkhawatim-color-primary);
	background: var(--alkhawatim-color-surface);
	color: var(--alkhawatim-color-primary);
}

.product-card__content {
	padding-block-start: var(--alkhawatim-spacing-12);
}

.product-card__category {
	display: inline-block;
	margin-block-end: var(--alkhawatim-spacing-4);
	color: var(--alkhawatim-color-muted);
	font-size: var(--alkhawatim-type-meta);
	font-weight: 700;
}

.product-card__title {
	margin: 0;
	font-family: var(--alkhawatim-font-display);
	font-size: var(--alkhawatim-type-product-title);
	font-weight: 650;
	line-height: 1.3;
}

.product-card__title a {
	color: var(--alkhawatim-color-primary);
}

.product-card__title a:hover,
.product-card__category:hover {
	color: var(--alkhawatim-color-secondary);
}

.navigation.posts-navigation a {
	display: inline-flex;
	align-items: center;
	min-height: var(--alkhawatim-size-button);
	font-weight: 700;
}

/* Footer */

.site-footer {
	border-block-start: 1px solid rgba(217, 197, 170, 0.32);
}

.site-footer__inner {
	display: grid;
	gap: var(--alkhawatim-spacing-24);
	padding-block: var(--alkhawatim-spacing-48) var(--alkhawatim-spacing-24);
}

.site-footer__name {
	display: inline-block;
	font-family: var(--alkhawatim-font-display);
	font-size: 1.25rem;
	font-weight: 700;
	text-decoration: none;
}

.site-footer__logo-link {
	display: inline-flex;
	align-items: flex-start;
}

.site-footer__logo {
	display: block;
	width: auto;
	height: 6rem;
	max-width: 100%;
	object-fit: contain;
}

.site-footer__description {
	max-width: 30rem;
	margin-block: var(--alkhawatim-spacing-8) 0;
	color: var(--alkhawatim-color-champagne);
	font-size: var(--alkhawatim-type-meta);
}

.footer-navigation__menu,
.footer-social ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--alkhawatim-spacing-8) var(--alkhawatim-spacing-16);
}

.footer-navigation a,
.footer-social a {
	display: inline-flex;
	align-items: center;
	min-height: var(--alkhawatim-size-icon-button);
	font-size: var(--alkhawatim-type-body);
	text-decoration: none;
}

.site-footer__name:hover,
.footer-navigation a:hover {
	color: var(--alkhawatim-color-on-dark);
}

.social-icon-link {
	display: inline-grid;
	place-items: center;
	width: var(--alkhawatim-size-icon-button);
	height: var(--alkhawatim-size-icon-button);
	padding: 0;
	text-decoration: none;
}

.social-icon-preview {
	display: inline-grid;
	place-items: center;
	width: var(--alkhawatim-size-icon-button);
	height: var(--alkhawatim-size-icon-button);
	padding: 0;
	color: var(--alkhawatim-color-primary);
	opacity: 0.62;
}

.social-icon {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
}

.footer-social .social-icon-link {
	color: var(--alkhawatim-color-champagne);
}

.footer-social .social-icon-link:hover {
	color: var(--alkhawatim-color-on-dark);
}

.site-footer__legal {
	padding-block: var(--alkhawatim-spacing-24);
	border-block-start: 1px solid rgba(217, 197, 170, 0.25);
	color: var(--alkhawatim-color-champagne);
	font-size: var(--alkhawatim-type-meta);
}

.site-footer__legal p {
	margin: 0;
}

@media (min-width: 48rem) {
	.content-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

	.site-footer__inner {
		grid-template-columns: minmax(15rem, 1.4fr) repeat(2, minmax(10rem, 1fr));
		align-items: start;
	}
}

@media (min-width: 64rem) {
	.site-header__inner {
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: var(--alkhawatim-spacing-24);
	}

	.site-branding {
		grid-column: 1;
		justify-self: start;
		text-align: start;
	}

	.custom-logo {
		max-width: 13.2rem;
		max-height: 3.3rem;
	}

	.primary-navigation,
	.js .primary-navigation[data-open="false"] {
		display: block;
		grid-column: 2;
		grid-row: 1;
		padding-block-end: 0;
	}

	.primary-navigation__menu {
		align-items: center;
		justify-content: center;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: 0 var(--alkhawatim-spacing-24);
		border-block-start: 0;
	}

	.primary-navigation .sub-menu {
		padding-inline-start: 0;
		border-inline-start: 0;
	}

	.js .menu-toggle {
		display: none;
	}

	.site-header__utilities {
		grid-column: 3;
		justify-content: flex-end;
		gap: var(--alkhawatim-spacing-4);
	}

	.site-switch--desktop {
		display: inline-flex;
	}

	.primary-navigation .site-switch--mobile {
		display: none;
	}

	.header-search {
		padding-block-end: var(--alkhawatim-spacing-16);
	}

	.site-footer__inner {
		padding-block-start: var(--alkhawatim-spacing-64);
	}

	.site-footer__logo {
		height: 7rem;
	}

	.product-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--alkhawatim-spacing-24);
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}