/*
 * Vilma Gold — the jewellery layer, loaded after app.css and vilma.css.
 *
 * The idea: a velvet jewellery box. A deep green velvet band holds the pieces; each one stands in a
 * Persian arch like a niche in a jeweller's window, with the «۷۵۰» hallmark beside it (the stamp on
 * every piece of 18-carat gold in Iran). Everything else stays quiet: pearl paper, ink type, gold only
 * where it means gold. Headings in Naskh, the calligraphy of the old goldsmiths' signs; the interface,
 * prices and weights in Vazirmatn.
 */

@font-face {
	font-family: "Noto Naskh Arabic";
	src: url("../fonts/noto-naskh-arabic-variable.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200E, U+FB50-FDFF, U+FE70-FEFC;
}

:root {
	--paper: #f5f3ee;
	--paper-2: #ebe7df;
	--paper-3: #ddd7cc;
	--card: #fbfaf7;
	--ink: #1e1d1b;
	--ink-2: #45423d;
	--muted: #6b675f;
	--plum: #866322;
	--plum-2: #6b4f18;
	--plum-tint: #f1e8d2;
	--plum-light: #d9bc74;
	--velvet: #1d3b30;
	--velvet-2: #132a22;
	--gold: #d9bc74;
	--gold-line: rgb(217 188 116 / 0.5);
	--pearl: #f3eee4;
	--display: "Noto Naskh Arabic", "Vazirmatn FD", serif;
	--r-card: 8px;
	--r-panel: 10px;
	/* The niche: a round-headed arch over straight sides. */
	--arch: 50% 50% 6px 6px / 34% 34% 6px 6px;
}

/* Type ---------------------------------------------------------------------------------------- */

.section-title,
.stage__title,
.product_title,
.page-title,
.entry-title,
.shop-hero__title,
.wood-note__title,
.footer-brand__tagline {
	font-family: var(--display);
	letter-spacing: 0;
}

.section-title {
	font-size: clamp(30px, 3.1vw, 48px);
	font-weight: 500;
	line-height: 1.55;
}

/* One voice per heading: no word picked out in another colour. */
.section-title em,
.stage__line + .stage__line > span {
	color: inherit;
	font-weight: inherit;
}

/* The home page's headings say what each section is; the dotted labels above them only repeated it. */
.home .section-head .eyebrow,
.home .care__intro .eyebrow,
.home .story .eyebrow {
	display: none;
}

.product_title {
	font-size: clamp(28px, 2.6vw, 40px);
	font-weight: 600;
	line-height: 1.6;
}

/* Buttons: velvet, not ink; squared off a little, like a box's lid. */
.button,
a.button,
button.button,
input.button,
.wp-element-button,
.comment-form .submit {
	border-color: var(--velvet);
	border-radius: 6px;
	background: var(--velvet);
	color: var(--pearl);
}

@media (hover: hover) {
	.button:hover,
	.comment-form .submit:hover {
		border-color: var(--velvet-2);
		background: var(--velvet-2);
		color: var(--gold);
	}
}

.button--ghost,
a.button--ghost,
button.button--ghost {
	border-color: var(--line-strong);
	background: transparent;
	color: var(--ink);
}

@media (hover: hover) {
	.button--ghost:hover {
		border-color: var(--velvet);
		background: transparent;
		color: var(--velvet);
	}
}

/* The strip above the header. */
.announcement {
	background: var(--velvet-2);
	color: rgb(243 238 228 / 0.86);
}

.announcement__text .icon--sparkle {
	color: var(--gold);
}

/* Hero: the velvet band ---------------------------------------------------------------------- */

.stage {
	max-width: none;
	margin: 0;
	padding: clamp(36px, 5vw, 80px) max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))) clamp(48px, 6vw, 96px);
	/* the nap of velvet: lighter where the light falls on it */
	background:
		radial-gradient(110% 85% at 28% 42%, #26493c 0%, var(--velvet) 48%, var(--velvet-2) 100%);
	color: var(--pearl);
}

.stage__eyebrow {
	color: rgb(243 238 228 / 0.7);
}

.stage__eyebrow::before {
	background: var(--gold);
}

.stage__title {
	margin-top: 22px;
	font-size: clamp(40px, 4.6vw, 74px);
	font-weight: 600;
	line-height: 1.55;
	letter-spacing: 0;
}

.stage__lead {
	color: rgb(243 238 228 / 0.8);
}

.stage .button {
	border-color: var(--gold);
	background: var(--gold);
	color: var(--velvet-2);
	font-weight: 600;
}

@media (hover: hover) {
	.stage .button:hover {
		border-color: #e8d29a;
		background: #e8d29a;
		color: var(--velvet-2);
	}
}

.stage .button--ghost {
	border-color: rgb(243 238 228 / 0.38);
	background: transparent;
	color: var(--pearl);
	font-weight: 500;
}

@media (hover: hover) {
	.stage .button--ghost:hover {
		border-color: var(--gold);
		background: transparent;
		color: var(--gold);
	}
}

.stage :focus-visible {
	outline-color: var(--gold);
}

.stage__facts {
	border-top-color: rgb(217 188 116 / 0.28);
}

.stage__fact-number {
	color: var(--gold);
}

.stage__fact-label {
	color: rgb(243 238 228 / 0.66);
}

/* The niche: the frame becomes an arch, a gold hairline drawn just outside it. */
.stage__piece {
	padding: 18px;
}

.stage__piece::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border: 1px solid var(--gold-line);
	border-radius: var(--arch);
	pointer-events: none;
}

.stage__frame {
	z-index: 1;
	border-radius: var(--arch);
	background: var(--paper-2);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35), 0 40px 80px -40px rgb(0 0 0 / 0.6);
}

.stage__shot img {
	object-position: 50% 50%;
}

/* «۷۵۰»: the 18-carat hallmark, stamped where the arch meets the ground. */
.stage__hallmark {
	position: absolute;
	z-index: 4;
	inset-inline-end: -6px;
	bottom: 30%;
	display: grid;
	place-content: center;
	width: 76px;
	height: 76px;
	border: 1px solid var(--gold-line);
	border-radius: 50%;
	background: var(--velvet-2);
	box-shadow: 0 0 0 5px var(--velvet-2), 0 0 0 6px var(--gold-line);
	color: var(--gold);
	text-align: center;
	line-height: 1.2;
}

.stage__hallmark b {
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0.04em;
}

.stage__hallmark span {
	font-size: 11px;
	opacity: 0.8;
}

.stage__card {
	border-color: var(--gold-line);
	border-radius: 8px;
	background: rgb(251 250 247 / 0.95);
	color: var(--ink);
}

.stage__thumb {
	border-radius: 50%;
}

.stage__thumb[aria-current="true"] {
	box-shadow: 0 0 0 2px var(--gold);
}

.stage__pause {
	color: var(--pearl);
	border-color: rgb(243 238 228 / 0.38);
}

@media (max-width: 899px) {
	.stage__piece {
		width: min(100%, 420px);
		margin-inline: auto;
		padding: 12px;
	}

	.stage__hallmark {
		width: 62px;
		height: 62px;
		inset-inline-end: -2px;
	}

	.stage__hallmark b {
		font-size: 18px;
	}
}

/* Categories: a row of niches ---------------------------------------------------------------- */

.cat-grid {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: clamp(12px, 1.6vw, 24px);
}

.cat-card {
	display: grid;
	justify-items: center;
	gap: 14px;
	overflow: visible;
	border-radius: 0;
	background: none;
	color: var(--ink);
	text-align: center;
}

.cat-card__media {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: var(--arch);
	background: var(--paper-2);
	box-shadow: inset 0 0 0 1px var(--line);
}

.cat-card__media::after {
	content: none;
}

.cat-card__media img {
	mix-blend-mode: multiply;
}

.cat-card__label {
	position: static;
	justify-items: center;
	gap: 2px;
}

.cat-card__name {
	color: var(--ink);
	font-family: var(--display);
	font-size: clamp(17px, 1.3vw, 21px);
	font-weight: 600;
	text-shadow: none;
}

.cat-card__count {
	padding: 0;
	background: none;
	color: var(--muted);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.cat-card__go {
	display: none;
}

@media (hover: hover) {
	.cat-card:hover .cat-card__media {
		box-shadow: inset 0 0 0 1px var(--plum);
	}

	.cat-card:hover .cat-card__name {
		color: var(--plum);
	}
}

@media (max-width: 1023px) {
	.cat-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Phones: the niches scroll sideways in one row. */
@media (max-width: 640px) {
	.cat-grid {
		display: flex;
		gap: 12px;
		margin-inline: calc(-1 * var(--gutter));
		padding-inline: var(--gutter);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.cat-grid > li {
		flex: 0 0 38%;
		scroll-snap-align: start;
	}

	.cat-grid::-webkit-scrollbar {
		display: none;
	}
}

/* Product cards: quiet. The photo, the name, weight and price — nothing competing with the piece. */
.product-card__media,
.product-card__image-link {
	border-radius: var(--r-card);
}

.product-card .price,
.product-card .woocommerce-Price-amount {
	color: var(--ink);
	font-weight: 600;
}

.collection-tile,
.collection-tile__media,
.story__media,
.story__inner {
	border-radius: var(--r-panel);
}

/* Footer: the inside of the box's lid. */
.site-footer {
	background: var(--velvet-2);
	color: rgb(243 238 228 / 0.72);
}

.site-footer a {
	color: var(--pearl);
}

@media (hover: hover) {
	.site-footer a:hover {
		color: var(--gold);
	}
}

.footer-brand__mark .wordmark,
.site-footer .wordmark {
	color: var(--gold);
}

@media (prefers-reduced-motion: reduce) {
	.stage__frame {
		animation: none;
	}
}

/* Gold, not wood: the style swatches are a polished disc (a highlight, the metal, its shadow),
   never plank grain. */
.wood-tab__swatch,
.wood-note__swatch {
	background:
		radial-gradient(circle at 34% 28%, rgb(255 255 255 / 0.75) 0 8%, transparent 34%),
		radial-gradient(circle at 50% 50%, var(--tone) 0 52%, var(--ring) 100%);
}

.club-tier__swatch {
	background: linear-gradient(90deg, var(--ring), var(--tone) 45%, var(--ring));
}

/* Collections: no veil over the photo; the name sits on a velvet label, like the tag on a box. */
.collection-tile::after {
	content: none;
}

.collection-tile__text {
	inset-inline: 14px auto;
	bottom: 14px;
	max-width: calc(100% - 28px);
	padding: 14px 18px;
	border-radius: 6px;
	background: var(--velvet);
	color: var(--pearl);
}

.collection-tile__name {
	font-family: var(--display);
	font-weight: 600;
}

/* The pieces' white studio backdrops take the niche's pearl instead of glaring. */
.stage__shot img,
.collection-tile__media img {
	mix-blend-mode: multiply;
}

.collection-tile {
	background: var(--paper-2);
}

/* The floating chat button: velvet. */
.talk {
	background: linear-gradient(135deg, #26493c 0%, var(--velvet-2) 70%);
}

/* Care tips: plain cards, a gold rule on the reading edge. */
.care-card--tip {
	border: 0;
	border-inline-start: 2px solid var(--plum-light);
	border-radius: 0;
	background: transparent;
	padding-block: 4px;
}

.care-card--tip .care-card__title {
	font-family: var(--display);
	font-weight: 600;
}