/* =========================================================
   MASABIEH — Skeuomorphic layer
   Material realism: linen grain, letterpress type, embossed
   controls, real physical depth. Loaded after masabieh.css.

   Light source is CONSISTENT: top-left. Every highlight sits
   on the top edge, every shadow falls to the bottom-right.
   Breaking that is what makes skeuomorphism look fake.
   ========================================================= */

:root {
	/* Depth ramp — reused everywhere so surfaces stay consistent */
	--sk-lift-1:
		inset 0 1px 0 rgba(255, 255, 255, 0.70),
		0 1px 1px rgba(32, 38, 43, 0.10),
		0 2px 4px rgba(32, 38, 43, 0.08);
	--sk-lift-2:
		inset 0 1px 0 rgba(255, 255, 255, 0.75),
		0 1px 2px rgba(32, 38, 43, 0.12),
		0 4px 10px rgba(32, 38, 43, 0.12),
		0 12px 24px rgba(32, 38, 43, 0.08);
	--sk-lift-3:
		inset 0 1px 0 rgba(255, 255, 255, 0.80),
		0 2px 4px rgba(32, 38, 43, 0.14),
		0 10px 20px rgba(32, 38, 43, 0.14),
		0 26px 48px rgba(32, 38, 43, 0.12);
	--sk-carve:
		inset 0 1px 2px rgba(32, 38, 43, 0.22),
		inset 0 -1px 0 rgba(255, 255, 255, 0.55);
	--sk-edge: rgba(32, 38, 43, 0.14);
	--sk-radius: 6px;

	/* Woven linen: two crossed hatches + fine grain. Pure CSS, no image request. */
	--sk-linen:
		repeating-linear-gradient(90deg,
			rgba(32, 38, 43, 0.030) 0 1px,
			rgba(255, 255, 255, 0.030) 1px 2px,
			transparent 2px 4px),
		repeating-linear-gradient(0deg,
			rgba(32, 38, 43, 0.026) 0 1px,
			rgba(255, 255, 255, 0.026) 1px 2px,
			transparent 2px 4px);
}

/* ---------------------------------------------------------
   The page itself becomes a physical surface
   --------------------------------------------------------- */
body {
	background-color: var(--wp--preset--color--gardenia);
	background-image: var(--sk-linen);
	background-attachment: fixed;
}

/* A fine paper grain over everything. Non-interactive. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 1;
	opacity: 0.40;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E");
}

/* Keep real content above the grain. */
header.wp-block-template-part,
main,
footer.wp-block-template-part {
	position: relative;
	z-index: 2;
}

/* ---------------------------------------------------------
   Letterpress type — ink pressed INTO the paper
   --------------------------------------------------------- */
h1, h2, h3,
.wp-block-site-title {
	text-shadow:
		0 1px 0 rgba(255, 255, 255, 0.75),
		0 -1px 0 rgba(32, 38, 43, 0.06);
}

/* On dark grounds the press reverses: light ink, dark relief. */
.masabieh-footer h1, .masabieh-footer h2,
.masabieh-footer h3, .masabieh-footer h4,
.masabieh-gifting-section h2,
.masabieh-gifting-section p {
	text-shadow:
		0 1px 1px rgba(0, 0, 0, 0.45),
		0 -1px 0 rgba(255, 255, 255, 0.06);
}

.masabieh-eyebrow {
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* ---------------------------------------------------------
   Header — a raised rail with a machined bottom edge
   --------------------------------------------------------- */
.masabieh-header {
	background-image:
		linear-gradient(180deg,
			rgba(255, 255, 255, 0.55) 0%,
			rgba(255, 255, 255, 0.10) 46%,
			rgba(32, 38, 43, 0.04) 100%),
		var(--sk-linen);
	border-bottom: 1px solid var(--sk-edge) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.85),
		0 1px 0 rgba(255, 255, 255, 0.55),
		0 4px 10px rgba(32, 38, 43, 0.07);
}

/* ---------------------------------------------------------
   Buttons — struck metal. Highlight top, shadow bottom,
   and they physically depress when pressed.
   --------------------------------------------------------- */
.wp-block-button__link,
.wc-block-components-button,
button.single_add_to_cart_button,
.woocommerce button.button,
.woocommerce a.button {
	position: relative;
	border-radius: var(--sk-radius) !important;
	background-image: linear-gradient(180deg,
		rgba(255, 255, 255, 0.26) 0%,
		rgba(255, 255, 255, 0.06) 48%,
		rgba(0, 0, 0, 0.10) 100%);
	border: 1px solid rgba(32, 38, 43, 0.28) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.45),
		inset 0 -1px 0 rgba(0, 0, 0, 0.16),
		0 1px 1px rgba(32, 38, 43, 0.18),
		0 3px 6px rgba(32, 38, 43, 0.16),
		0 8px 16px rgba(32, 38, 43, 0.10);
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.28);
	transition: transform 90ms ease, box-shadow 90ms ease, filter 160ms ease;
}

.wp-block-button__link:hover,
.wc-block-components-button:hover,
button.single_add_to_cart_button:hover,
.woocommerce button.button:hover {
	filter: brightness(1.05);
}

/* The press: the control actually sinks. */
.wp-block-button__link:active,
.wc-block-components-button:active,
button.single_add_to_cart_button:active,
.woocommerce button.button:active {
	transform: translateY(2px);
	box-shadow:
		inset 0 2px 4px rgba(0, 0, 0, 0.32),
		inset 0 -1px 0 rgba(255, 255, 255, 0.18),
		0 1px 1px rgba(32, 38, 43, 0.12);
	filter: brightness(0.97);
}

/* Outline buttons are engraved rather than raised. */
.wp-block-button.is-style-outline .wp-block-button__link {
	background-image: linear-gradient(180deg,
		rgba(255, 255, 255, 0.55) 0%,
		rgba(255, 255, 255, 0.12) 100%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.85),
		0 1px 2px rgba(32, 38, 43, 0.12),
		0 3px 6px rgba(32, 38, 43, 0.08);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* ---------------------------------------------------------
   Images — mounted behind a mat board, in a real frame
   --------------------------------------------------------- */
.masabieh-hero .wp-block-image,
.masabieh-craft .wp-block-image,
.masabieh-materials .wp-block-image,
.masabieh-gifting-section .wp-block-image,
.masabieh-collection .wc-block-product-image,
.woocommerce div.product div.images .woocommerce-product-gallery__image {
	padding: 10px;
	border-radius: var(--sk-radius);
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.30)),
		var(--sk-linen);
	background-color: #FBF6EF;
	border: 1px solid var(--sk-edge);
	box-shadow: var(--sk-lift-2);
}

.masabieh-hero .wp-block-image {
	box-shadow: var(--sk-lift-3);
}

.masabieh-hero .wp-block-image img,
.masabieh-craft .wp-block-image img,
.masabieh-materials .wp-block-image img,
.masabieh-gifting-section .wp-block-image img,
.woocommerce div.product div.images img {
	border-radius: 3px;
	/* the print sits slightly recessed inside its mount */
	box-shadow:
		inset 0 0 0 1px rgba(32, 38, 43, 0.10),
		0 1px 3px rgba(32, 38, 43, 0.18);
}

/* Placeholder tiles read as empty mounts, not flat rectangles. */
.masabieh-materials .wp-block-group[style*="aspect-ratio"],
.masabieh-craft .wp-block-group[style*="aspect-ratio"] {
	border-radius: var(--sk-radius);
	border: 1px solid var(--sk-edge);
	box-shadow: var(--sk-carve);
}

/* ---------------------------------------------------------
   Section surfaces
   --------------------------------------------------------- */
.masabieh-craft {
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, 0.40), rgba(32, 38, 43, 0.05)),
		var(--sk-linen);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.70),
		inset 0 -1px 0 rgba(255, 255, 255, 0.35),
		inset 0 8px 18px -12px rgba(32, 38, 43, 0.30);
}

/* The gifting band becomes dyed, stitched cloth. */
.masabieh-gifting-section {
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(0, 0, 0, 0.20)),
		var(--sk-linen);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.28),
		inset 0 -2px 6px rgba(0, 0, 0, 0.28);
	position: relative;
}

.masabieh-gifting-section::before,
.masabieh-gifting-section::after {
	content: "";
	position: absolute;
	inset-inline: 22px;
	height: 1px;
	background-image: repeating-linear-gradient(90deg,
		rgba(241, 231, 218, 0.55) 0 7px,
		transparent 7px 14px);
}

.masabieh-gifting-section::before { top: 14px; }
.masabieh-gifting-section::after  { bottom: 14px; }

/* Brand promise: carved divider rules. */
.masabieh-promise {
	border-top: 1px solid rgba(255, 255, 255, 0.85) !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.85) !important;
	box-shadow:
		inset 0 1px 0 var(--sk-edge),
		inset 0 -1px 0 var(--sk-edge);
}

/* ---------------------------------------------------------
   Product page furniture
   --------------------------------------------------------- */
.masabieh-specs {
	border-radius: var(--sk-radius);
	overflow: hidden;
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, 0.60), rgba(255, 255, 255, 0.16)),
		var(--sk-linen);
	border: 1px solid var(--sk-edge);
	box-shadow: var(--sk-lift-1);
}

.masabieh-specs th,
.masabieh-specs td {
	padding-inline: 0.9rem;
	border-block-end: 1px solid rgba(32, 38, 43, 0.10);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

.masabieh-specs tr:last-child th,
.masabieh-specs tr:last-child td {
	border-block-end: 0;
	box-shadow: none;
}

/* Stock label: a stamped brass plate. */
.masabieh-stock-label {
	border-radius: 3px;
	background-image: linear-gradient(180deg,
		rgba(255, 255, 255, 0.65), rgba(32, 38, 43, 0.06));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 1px 2px rgba(32, 38, 43, 0.16);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

/* Gift panel: a recessed tray cut into the page. */
.masabieh-gift {
	border-radius: var(--sk-radius);
	background-image:
		linear-gradient(180deg, rgba(32, 38, 43, 0.06), rgba(255, 255, 255, 0.30)),
		var(--sk-linen);
	border: 1px solid var(--sk-edge);
	box-shadow: var(--sk-carve);
}

.masabieh-gift__message textarea {
	border-radius: 4px;
	box-shadow:
		inset 0 2px 4px rgba(32, 38, 43, 0.16),
		0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Quantity + form inputs are inset, like machined slots. */
.woocommerce .quantity .qty,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce select,
.wc-block-components-text-input input {
	border-radius: 4px;
	border: 1px solid rgba(32, 38, 43, 0.22);
	background-image: linear-gradient(180deg, rgba(32, 38, 43, 0.05), rgba(255, 255, 255, 0.45));
	box-shadow:
		inset 0 2px 3px rgba(32, 38, 43, 0.14),
		0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Product cards in the grid lift off the page. */
.masabieh-collection .wc-block-product,
.wp-block-woocommerce-product-collection .wc-block-product {
	padding: 12px 12px 18px;
	border-radius: var(--sk-radius);
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.18)),
		var(--sk-linen);
	border: 1px solid var(--sk-edge);
	box-shadow: var(--sk-lift-1);
	transition: box-shadow 220ms ease, transform 220ms ease;
}

.masabieh-collection .wc-block-product:hover,
.wp-block-woocommerce-product-collection .wc-block-product:hover {
	transform: translateY(-2px);
	box-shadow: var(--sk-lift-2);
}

/* Tabs read as physical file tabs. */
.woocommerce-tabs ul.tabs li a {
	border-radius: 4px 4px 0 0;
}

.woocommerce-tabs ul.tabs li.active a {
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.15));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.9),
		0 -1px 2px rgba(32, 38, 43, 0.08);
}

/* ---------------------------------------------------------
   Footer — dyed leather with a stitched seam
   --------------------------------------------------------- */
.masabieh-footer {
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(0, 0, 0, 0.34)),
		var(--sk-linen);
	box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.40);
	position: relative;
}

.masabieh-footer::before {
	content: "";
	position: absolute;
	inset-inline: 24px;
	top: 16px;
	height: 1px;
	background-image: repeating-linear-gradient(90deg,
		rgba(241, 231, 218, 0.40) 0 8px,
		transparent 8px 16px);
}

/* ---------------------------------------------------------
   Honest constraints
   --------------------------------------------------------- */

/* Depth must never cost legibility: keep focus rings on top. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
	position: relative;
	z-index: 3;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link,
	.wc-block-components-button,
	.wc-block-product {
		transition: none !important;
	}

	.wp-block-button__link:active,
	.wc-block-components-button:active {
		transform: none;
	}
}

/* Phones: keep the material, drop the expensive layers.
   Large blurred shadows are the most costly thing to paint
   while scrolling, and the grain overlay is invisible at
   this size anyway. */
@media (max-width: 781px) {
	:root {
		--sk-lift-2:
			inset 0 1px 0 rgba(255, 255, 255, 0.7),
			0 1px 2px rgba(32, 38, 43, 0.12),
			0 4px 8px rgba(32, 38, 43, 0.10);
		--sk-lift-3: var(--sk-lift-2);
	}

	body::after {
		display: none;
	}

	body {
		background-attachment: scroll;
	}
}

/* =========================================================
   COMMERCE SURFACES — cart, checkout, account
   These render client-side, so everything below targets the
   documented wc-block-components-* classes.
   ========================================================= */

/* --- Panels, summaries and steps become mounted cards --- */
.wc-block-components-sidebar,
.wc-block-components-order-summary,
.wc-block-checkout__sidebar .wc-block-components-panel,
.woocommerce-MyAccount-navigation,
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-order,
.woocommerce-customer-details {
	padding: 20px 22px;
	border-radius: var(--sk-radius);
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.18)),
		var(--sk-linen);
	border: 1px solid var(--sk-edge);
	box-shadow: var(--sk-lift-1);
}

.wc-block-checkout__sidebar {
	position: relative;
}

/* Checkout steps: each is its own leaf of paper */
.wc-block-components-checkout-step {
	padding: 18px 20px;
	margin-block-end: 1.25rem;
	border-radius: var(--sk-radius);
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.12)),
		var(--sk-linen);
	border: 1px solid var(--sk-edge);
	box-shadow: var(--sk-lift-1);
}

.wc-block-components-checkout-step__title,
.wc-block-components-title,
.wc-block-cart__totals-title,
.woocommerce-MyAccount-navigation li a {
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

/* --- Every input is a machined slot --- */
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__select,
.wc-block-components-combobox-control input,
.woocommerce-input-wrapper input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
	border-radius: 4px !important;
	border: 1px solid rgba(32, 38, 43, 0.22) !important;
	background-image: linear-gradient(180deg, rgba(32, 38, 43, 0.05), rgba(255, 255, 255, 0.5)) !important;
	box-shadow:
		inset 0 2px 3px rgba(32, 38, 43, 0.13),
		0 1px 0 rgba(255, 255, 255, 0.8) !important;
}

.wc-block-components-text-input input:focus,
.woocommerce form .form-row input.input-text:focus {
	box-shadow:
		inset 0 2px 3px rgba(32, 38, 43, 0.13),
		0 0 0 3px rgba(96, 133, 160, 0.28) !important;
}

/* --- Radio / checkbox controls: physical switches --- */
.wc-block-components-radio-control-accordion-option,
.wc-block-components-radio-control__option {
	border-radius: 4px;
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.10));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.wc-block-components-radio-control-accordion-option--checked-option,
.wc-block-components-radio-control__option--checked {
	background-image: linear-gradient(180deg, rgba(96, 133, 160, 0.14), rgba(96, 133, 160, 0.05));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.85),
		inset 0 0 0 1px rgba(96, 133, 160, 0.40);
}

/* --- Totals: an engraved ledger --- */
.wc-block-components-totals-wrapper,
.wc-block-components-totals-footer-item {
	border-block-start: 1px solid rgba(32, 38, 43, 0.12) !important;
	box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.8);
}

.wc-block-components-totals-footer-item .wc-block-formatted-money-amount {
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* --- Cart line items sit on a ruled sheet --- */
.wc-block-cart-items {
	border-radius: var(--sk-radius);
	overflow: hidden;
	background-image:
		linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.14)),
		var(--sk-linen);
	border: 1px solid var(--sk-edge);
	box-shadow: var(--sk-lift-1);
}

.wc-block-cart-items__row {
	border-block-end: 1px solid rgba(32, 38, 43, 0.10);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
}

.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img {
	border-radius: 3px;
	padding: 5px;
	background: #FBF6EF;
	border: 1px solid var(--sk-edge);
	box-shadow: var(--sk-lift-1);
}

/* Gift box / gift message rows read as a stamped note */
.wc-block-components-product-details {
	padding: 0.5rem 0.7rem;
	border-radius: 3px;
	background-image: linear-gradient(180deg, rgba(137, 185, 185, 0.16), rgba(137, 185, 185, 0.05));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* --- Quantity stepper: real pressed buttons --- */
.wc-block-components-quantity-selector {
	border-radius: 4px;
	overflow: hidden;
	border: 1px solid rgba(32, 38, 43, 0.22);
	box-shadow: var(--sk-carve);
}

.wc-block-components-quantity-selector__button {
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(32, 38, 43, 0.06));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.wc-block-components-quantity-selector__button:active {
	box-shadow: inset 0 2px 4px rgba(32, 38, 43, 0.28);
}

/* --- Notices: embossed labels, not flat strips --- */
.wc-block-components-notice-banner,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-radius: var(--sk-radius);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.7),
		var(--sk-lift-1);
}

/* --- Account navigation reads as tabbed dividers --- */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-MyAccount-navigation li {
	border-block-end: 1px solid rgba(32, 38, 43, 0.10);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75);
}

.woocommerce-MyAccount-navigation li:last-child {
	border-block-end: 0;
	box-shadow: none;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 0.7rem 0.2rem;
	text-decoration: none;
}

.woocommerce-MyAccount-navigation li.is-active a {
	font-weight: 600;
	color: var(--wp--preset--color--blue-haven);
}

/* =========================================================
   CONTENT PAGES — story, contact, policies
   Long Arabic prose needs a comfortable measure and real
   typographic rhythm, not a wall of text.
   ========================================================= */

.masabieh-page__body {
	max-width: 62ch;
}

.masabieh-page__body h2 {
	margin-block: 2.5rem 0.75rem;
	font-size: 1.5rem;
}

.masabieh-page__body h3 {
	margin-block: 1.75rem 0.5rem;
	font-size: 1.1875rem;
}

.masabieh-page__body p,
.masabieh-page__body li {
	color: var(--wp--preset--color--charcoal-soft);
}

.masabieh-page__body ul {
	padding-inline-start: 1.2rem;
}

.masabieh-page__body li {
	margin-block-end: 0.4rem;
}

/* A carved rule between policy sections */
.masabieh-page__body hr {
	border: 0;
	border-block-start: 1px solid rgba(32, 38, 43, 0.14);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
	margin-block: 2.5rem;
}

/* Anything still bracketed is unfinished — make it impossible to miss. */
.masabieh-todo {
	display: inline-block;
	padding: 0.15rem 0.5rem;
	border-radius: 3px;
	background: rgba(200, 120, 60, 0.16);
	box-shadow: inset 0 0 0 1px rgba(160, 90, 40, 0.45);
	color: #7A4418;
	font-weight: 600;
}

/* =========================================================
   CATEGORY TILES + MATERIAL PANELS
   Where a real photograph does not exist yet, the surface
   shows the MATERIAL itself — a polished resin swatch — so
   the page reads as designed rather than as a missing image.
   ========================================================= */

:root {
	/* Real material colours, layered like polished resin under light */
	--sk-bakelite:
		radial-gradient(120% 90% at 24% 16%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 46%),
		radial-gradient(80% 70% at 76% 82%, rgba(70,36,10,0.55) 0%, rgba(70,36,10,0) 60%),
		linear-gradient(152deg, #D9A863 0%, #B87C3C 38%, #8A5A28 72%, #6B431C 100%);
	--sk-faturan:
		radial-gradient(120% 90% at 26% 14%, rgba(255,235,220,0.50) 0%, rgba(255,235,220,0) 44%),
		radial-gradient(90% 80% at 78% 86%, rgba(48,8,4,0.60) 0%, rgba(48,8,4,0) 62%),
		linear-gradient(152deg, #C4573C 0%, #9E3524 40%, #71200F 74%, #4E1409 100%);
	--sk-amberfill:
		radial-gradient(120% 90% at 24% 16%, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 46%),
		linear-gradient(152deg, #E9B24B 0%, #C98A2A 44%, #96601A 100%);
}

.masabieh-cat {
	display: block;
	text-decoration: none;
	border-radius: var(--sk-radius);
	overflow: hidden;
	border: 1px solid var(--sk-edge);
	box-shadow: var(--sk-lift-1);
	background-image:
		linear-gradient(180deg, rgba(255,255,255,0.60), rgba(255,255,255,0.16)),
		var(--sk-linen);
	transition: transform 220ms var(--masabieh-ease), box-shadow 220ms var(--masabieh-ease);
}

.masabieh-cat:hover,
.masabieh-cat:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--sk-lift-2);
}

/* The swatch: a curved, polished bead surface catching one light. */
.masabieh-cat__swatch {
	display: block;
	aspect-ratio: 4 / 5;
	background-image: var(--sk-bakelite);
	box-shadow:
		inset 0 2px 0 rgba(255, 255, 255, 0.30),
		inset 0 -18px 30px rgba(0, 0, 0, 0.30);
	position: relative;
}

/* A soft specular streak — what makes resin read as resin. */
.masabieh-cat__swatch::after {
	content: "";
	position: absolute;
	inset-inline-start: 14%;
	top: 8%;
	width: 34%;
	height: 26%;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255,255,255,0.50), rgba(255,255,255,0));
	transform: rotate(-18deg);
}

.masabieh-cat--faturan .masabieh-cat__swatch { background-image: var(--sk-faturan); }
.masabieh-cat--amber   .masabieh-cat__swatch { background-image: var(--sk-amberfill); }

/* Where a real photograph exists it must beat the material swatch, so this
   selector is deliberately as specific as the material rules above. */
.masabieh-cat .masabieh-cat__swatch--photo {
	background-image: url("/wp-content/uploads/2026/08/category-amber.jpg");
	background-size: cover;
	background-position: center;
	box-shadow: inset 0 0 0 1px rgba(32, 38, 43, 0.12);
}

.masabieh-cat .masabieh-cat__swatch--photo::after { display: none; }

.masabieh-cat__body {
	display: block;
	padding: 0.95rem 1.1rem 1.15rem;
	text-align: center;
}

.masabieh-cat__name {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.375rem;
	color: var(--wp--preset--color--charcoal);
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.masabieh-cat__desc {
	display: block;
	margin-block-start: 0.2rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--charcoal-soft);
}

/* ---------------------------------------------------------
   Material cards and the craftsmanship mount reuse the same
   swatches until their photographs arrive.
   --------------------------------------------------------- */
.masabieh-materials .wp-block-column:first-child .wp-block-group[style*="aspect-ratio"] {
	background-image: var(--sk-bakelite) !important;
	box-shadow:
		inset 0 2px 0 rgba(255, 255, 255, 0.28),
		inset 0 -18px 30px rgba(0, 0, 0, 0.28);
}

.masabieh-materials .wp-block-column:last-child .wp-block-group[style*="aspect-ratio"] {
	background-image: var(--sk-faturan) !important;
	box-shadow:
		inset 0 2px 0 rgba(255, 255, 255, 0.24),
		inset 0 -18px 30px rgba(0, 0, 0, 0.30);
}

/* The caption inside a filled swatch must stay readable. */
.masabieh-materials .wp-block-group[style*="aspect-ratio"] p {
	color: rgba(255, 255, 255, 0.82) !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

.masabieh-craft .wp-block-group[style*="aspect-ratio"] {
	background-image:
		radial-gradient(120% 90% at 24% 16%, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0) 48%),
		linear-gradient(152deg, #C9B79C 0%, #A9927A 46%, #7E6A55 100%) !important;
}

.masabieh-craft .wp-block-group[style*="aspect-ratio"] p {
	color: rgba(255, 255, 255, 0.85) !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.40);
}

/* ---------------------------------------------------------
   Featured collection: hold its shape with few products
   --------------------------------------------------------- */
.masabieh-collection .wc-block-product-template,
.masabieh-collection .wp-block-post-template {
	gap: var(--wp--preset--spacing--30);
}

@media (min-width: 782px) {
	/* Cap card width so a single product does not stretch across the row. */
	.masabieh-collection .wc-block-product {
		max-width: 380px;
	}
}