/* Crystalwala storefront -- ported from the block theme on 2026-08-31 (CW-19).

   The design is unchanged: same palette, same type, same choreography. What
   changed is what the rules hang on. The block theme's selectors named
   WordPress and WooCommerce block classes (`.wp-block-post-title`,
   `.wc-block-components-product-sale-badge`) which do not exist in a Blade
   storefront, so each became an explicit `.cw-*` class that our own templates
   emit. The WooCommerce filter-block rules were deleted outright rather than
   renamed -- they styled React components that hydrated from the Store API, and
   our filters have always been server-rendered GET forms.

   Design tokens come from css/tokens.css, generated from the very same
   theme.json the WooCommerce build uses, so the palette cannot drift.
*/

/* Everything expressible as a design token lives in theme.json. What follows is
   only what token syntax cannot reach: component internals, hover choreography,
   and the product gallery. */

/* =========================================================================
   Crystalwala — warm devotional storefront
   Direction set after tearing down gemsmantra.com and divinehindu.in
   (2026-08-31): this category is warm, dense and merchandised by rashi,
   deity and intent — not by editorial "new in / best sellers".
   ========================================================================= */

:root {
	--cw-shadow-sm: 0 1px 2px rgba(42, 29, 22, .05), 0 8px 20px -14px rgba(42, 29, 22, .3);
	--cw-shadow-md: 0 2px 6px rgba(42, 29, 22, .07), 0 22px 44px -24px rgba(42, 29, 22, .42);
	--cw-r: 14px;
}

/* ---------- announcement + header ---------- */

.cw-announce {
	background: var(--wp--preset--color--maroon-dark);
	color: #F6E9CE;
	text-align: center;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	padding: 0.55rem 1rem;
}

.cw-announce strong { color: var(--wp--preset--color--gold); font-weight: 600; }

.cw-header {
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--line);
	position: sticky;
	top: 0;
	z-index: 30;
	transition: box-shadow 260ms ease;
}

.cw-scrolled .cw-header { box-shadow: var(--cw-shadow-sm); }

.cw-header__actions { gap: var(--wp--preset--spacing--20); align-items: center; }

.cw-nav a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	padding: 0.35rem 0;
	border-bottom: 2px solid transparent;
	font-weight: 500;
	transition: color 180ms ease, border-color 180ms ease;
}

.cw-nav a:hover {
	color: var(--wp--preset--color--maroon);
	border-bottom-color: var(--wp--preset--color--gold);
	text-decoration: none;
}

/* ---------- hero ---------- */

.cw-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(115deg, #5E1417 0%, #7A1F23 46%, #9A3A2A 100%);
	color: #FFF6E8;
	isolation: isolate;
}

/* Layered warmth: a gold bloom from the lower right and a faint mandala ring.
   Atmosphere rather than a flat slab — and both are pure CSS, no image request. */
/* Three scenes cross-fading behind fixed copy. Each slide is its own layer so
   the transition is a pure opacity change — no repaint of the image itself. */
.cw-hero__stage { position: absolute; inset: 0; z-index: -2; overflow: hidden; }

.cw-hero__slide {
	position: absolute;
	inset: -4%;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1);
	transition: opacity 1400ms ease;
}

.cw-hero__slide.is-on {
	opacity: 1;
	animation: cw-kenburns 12s ease-out forwards;
}

/* Scrim sits above the slides and below the copy, so contrast is guaranteed for
   every scene rather than depending on the artwork of any one of them. */
.cw-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(28, 7, 8, .95) 0%, rgba(44, 11, 13, .82) 32%, rgba(58, 15, 17, .38) 60%, rgba(70, 20, 20, .16) 100%);
}

@keyframes cw-kenburns {
	from { transform: scale(1); }
	to   { transform: scale(1.07) translate3d(-1%, -0.6%, 0); }
}

/* A hairline gold rule at the fold. */
.cw-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--gold) 22%, #E8C97A 50%, var(--wp--preset--color--gold) 78%, transparent);
	opacity: .85;
}

/* ---------- carousel dots ---------- */

.cw-hero__dots {
	position: absolute;
	left: 50%;
	bottom: 1.9rem;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	gap: .55rem;
}

.cw-dot {
	width: 2.4rem;
	height: 3px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 246, 232, .32);
	cursor: pointer;
	transition: background-color 320ms ease, width 320ms cubic-bezier(.22,.61,.36,1);
}

.cw-dot:hover { background: rgba(255, 246, 232, .6); }

.cw-dot.is-on { background: var(--wp--preset--color--gold); width: 3.6rem; }

.cw-dot:focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 4px; }

.cw-hero__wrap {
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	padding: clamp(6rem, 15vw, 12rem) var(--wp--preset--spacing--30);
	min-height: min(78vh, 720px);
	display: flex;
	align-items: center;
}

.cw-hero__copy { max-width: 40rem; display: flex; flex-direction: column; gap: 1.15rem; }

.cw-tag {
	margin: 0;
	display: inline-flex;
	align-self: flex-start;
	gap: .5rem;
	background: rgba(255, 246, 232, .12);
	border: 1px solid rgba(246, 233, 206, .28);
	border-radius: 999px;
	padding: .45rem 1rem;
	font-size: .74rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #F6E9CE;
}

.cw-hero__title {
	margin: 0;
	color: #FFF6E8;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: clamp(2.7rem, 6.6vw, 5rem);
	line-height: 1.03;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.cw-hero__title span {
	color: var(--wp--preset--color--gold);
	font-style: italic;
	font-weight: 400;
}

.cw-hero__sub {
	margin: 0;
	max-width: 32rem;
	color: rgba(255, 246, 232, .82);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.cw-hero__actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .6rem; }

/* ---------- pills ---------- */

.cw-pill {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .95rem 1.9rem;
	border-radius: 999px;
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .01em;
	text-decoration: none;
	border: 1px solid transparent;
	transition: transform 220ms cubic-bezier(.22,.61,.36,1), background-color 220ms ease, box-shadow 220ms ease;
}

.cw-pill--solid {
	background: var(--wp--preset--color--gold);
	color: #3A2408;
	box-shadow: 0 10px 26px -14px rgba(200, 154, 60, .9);
}

.cw-pill--solid:hover {
	background: #D8AC50;
	color: #3A2408;
	transform: translateY(-2px);
	text-decoration: none;
}

.cw-pill--ghost {
	background: transparent;
	border-color: rgba(246, 233, 206, .42);
	color: #FFF6E8;
}

.cw-pill--ghost:hover {
	background: rgba(255, 246, 232, .12);
	color: #fff;
	transform: translateY(-2px);
	text-decoration: none;
}

.cw-pill:focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 3px; }

/* ---------- usp strip ---------- */

.cw-usp {
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.cw-usp__inner {
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	padding: 1.35rem var(--wp--preset--spacing--30);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.25rem 2rem;
}

.cw-usp__item { display: flex; gap: .8rem; align-items: flex-start; }

.cw-usp__item svg {
	flex: none;
	width: 1.6rem;
	height: 1.6rem;
	fill: none;
	stroke: var(--wp--preset--color--maroon);
	stroke-width: 1.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.cw-usp__item strong { display: block; font-size: .875rem; font-weight: 600; line-height: 1.3; }
.cw-usp__item span   { display: block; font-size: .8125rem; color: var(--wp--preset--color--muted); }

/* ---------- sections ---------- */

/* Full-bleed is done with WordPress's own `alignfull`, applied in the pattern.
   A hand-rolled `calc(50% - 50vw)` computes against the PADDED box of a
   `has-global-padding` container and leaves a bare strip down one side — which
   is exactly the white edge that appeared beside the hero. */
.cw-sec { margin-top: clamp(3.5rem, 8vw, 6rem); }

.cw-sec--rashi,
.cw-sec--intent {
	background: var(--wp--preset--color--ground-alt);
	padding-block: clamp(3rem, 7vw, 5rem);
}

.cw-sec__inner {
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto;
	padding-inline: var(--wp--preset--spacing--30);
}

.cw-sec__head { text-align: center; margin-bottom: var(--wp--preset--spacing--40); }

.cw-sec__head--row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	text-align: left;
	flex-wrap: wrap;
}

.cw-sec__eyebrow {
	margin: 0 0 .45rem;
	font-size: .72rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--saffron);
	font-weight: 600;
}

.cw-sec__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: clamp(1.9rem, 4.2vw, 3rem);
	line-height: 1.06;
	letter-spacing: -0.015em;
}

.cw-sec__title em { color: var(--wp--preset--color--maroon); font-style: italic; }

.cw-sec__note { margin: .6rem 0 0; color: var(--wp--preset--color--muted); }

.cw-more {
	font-size: .875rem;
	font-weight: 600;
	color: var(--wp--preset--color--maroon);
	text-decoration: none;
	white-space: nowrap;
	transition: gap 200ms ease;
	display: inline-flex;
	gap: .35rem;
}

.cw-more:hover { text-decoration: none; gap: .6rem; }

/* ---------- shop by rashi ---------- */

.cw-rashi {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: .8rem;
}

.cw-rashi__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .3rem;
	padding: 1.15rem .6rem 1rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--cw-r);
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	transition: transform 260ms cubic-bezier(.22,.61,.36,1), border-color 260ms ease, box-shadow 260ms ease;
}

.cw-rashi__tile:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--gold);
	box-shadow: var(--cw-shadow-md);
	text-decoration: none;
}

.cw-rashi__glyph {
	width: 3.4rem;
	height: 3.4rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: radial-gradient(circle at 34% 28%, #FBF0D8, var(--wp--preset--color--gold-soft) 68%);
	box-shadow: inset 0 0 0 1px rgba(200, 154, 60, .35);
	color: var(--wp--preset--color--maroon);
	font-size: 1.6rem;
	line-height: 1;
	transition: background 260ms ease, color 260ms ease, transform 320ms cubic-bezier(.22,.61,.36,1);
}

.cw-rashi__tile:hover .cw-rashi__glyph { transform: scale(1.08) rotate(-4deg); }

.cw-rashi__tile:hover .cw-rashi__glyph {
	background: radial-gradient(circle at 34% 28%, #E3BE6A, var(--wp--preset--color--gold) 70%);
	color: #fff;
}

.cw-rashi__en { font-size: .8125rem; font-weight: 600; }
.cw-rashi__hi { font-size: .75rem; color: var(--wp--preset--color--muted); }

/* ---------- shop by intent ---------- */

.cw-intent {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: .8rem;
}

.cw-intent__tile {
	display: flex;
	flex-direction: column;
	gap: .2rem;
	padding: 1.35rem 1.15rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--cw-r);
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	position: relative;
	overflow: hidden;
	transition: transform 260ms cubic-bezier(.22,.61,.36,1), box-shadow 260ms ease, border-color 260ms ease;
}

/* A gold rule that draws in from the left on hover — one small reward for
   pointing at a tile, and it costs a transform rather than a repaint. */
.cw-intent__tile::before {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: var(--wp--preset--color--gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 320ms cubic-bezier(.22,.61,.36,1);
}

.cw-intent__tile:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--gold);
	box-shadow: var(--cw-shadow-md);
	text-decoration: none;
}

.cw-intent__tile:hover::before { transform: scaleX(1); }

.cw-intent__name { font-family: var(--wp--preset--font-family--display); font-size: 1.15rem; font-weight: 600; }
.cw-intent__sub  { font-size: .8125rem; color: var(--wp--preset--color--muted); }

/* ---------- deity ---------- */

.cw-deity { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

.cw-deity__tile {
	padding: .7rem 1.5rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-size: .875rem;
	font-weight: 500;
	text-decoration: none;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.cw-deity__tile:hover {
	background: var(--wp--preset--color--maroon);
	border-color: var(--wp--preset--color--maroon);
	color: #fff;
	text-decoration: none;
}

/* ---------- promise band ---------- */

.cw-promise {
	margin-top: clamp(3.5rem, 8vw, 6rem);
	background: var(--wp--preset--color--maroon);
	color: #FFF6E8;
	padding: clamp(3.5rem, 8vw, 6rem) var(--wp--preset--spacing--30);
	text-align: center;
}

.cw-promise__inner { max-width: 44rem; margin: 0 auto; }

.cw-promise .cw-sec__eyebrow { color: var(--wp--preset--color--gold); }

.cw-promise__title {
	margin: 0;
	color: #FFF6E8;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: clamp(1.9rem, 4.4vw, 3rem);
	line-height: 1.08;
}

.cw-promise__body {
	margin: 1.2rem auto 1.9rem;
	max-width: 36rem;
	color: rgba(255, 246, 232, .82);
	line-height: 1.75;
}

/* ---------- product grid ---------- */

.cw-grid { margin-top: var(--wp--preset--spacing--30); }

.cw-grid--home {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--wp--preset--spacing--30);
	width: 100%;
}

.cw-grid__items { gap: var(--wp--preset--spacing--30) !important; }

/* Fewer, larger cards on the home page — presence over density. The shop page
   keeps four across, where scanning a 1,223-item catalogue is the actual job. */
@media (min-width: 1025px) {
	.cw-grid--home .cw-grid__items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* The card is the storefront's smallest unit and the thing a customer looks at
   most, so it carries the most craft: a borderless white surface, a generous
   4:5 image well, and a lift on hover that the shadow follows. */
.cw-grid__items > li {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--surface);
	border: 1px solid transparent;
	border-radius: var(--cw-r);
	overflow: hidden;
	padding: 0 0 1.1rem;
	box-shadow: var(--cw-shadow-sm);
	transition: transform 320ms cubic-bezier(.22,.61,.36,1), box-shadow 320ms ease, border-color 320ms ease;
}

.cw-grid__items > li:hover {
	transform: translateY(-6px);
	border-color: rgba(200, 154, 60, .55);
	box-shadow: 0 4px 10px rgba(42, 29, 22, .06), 0 34px 60px -30px rgba(42, 29, 22, .5);
}

/* Portrait image well. Jewellery photographs read better tall than square, and
   a taller well makes the product itself bigger on the page — the single change
   that most separates a premium store from a catalogue. */
.cw-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	/* Square, not portrait: the client's source photographs are overwhelmingly
	   square, so a taller well only adds dead space beneath each product. */
	aspect-ratio: 1;
	padding: 3.5%;
	display: grid;
	place-items: center;
	margin: 0 0 .9rem;
	background:
		radial-gradient(120% 90% at 50% 12%, #FFFFFF 0%, #FFFDF9 46%, #F7EFE2 100%);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* The client's photographs arrive on mixed grounds (white, cream, a few black)
   at varying ratios. `contain` never crops a product and the shared white tile
   makes a mixed set read as one catalogue. */
.cw-img { width: 100%; height: 100%; object-fit: contain; display: block; }

.cw-grid__items li img.cw-img { transition: transform 700ms cubic-bezier(.22,.61,.36,1); }
.cw-grid__items li:hover img.cw-img { transform: scale(1.06); }

.cw-card__media-alt {
	position: absolute;
	inset: 0;
	padding: 5%;
	opacity: 0;
	transition: opacity 340ms ease;
}

.cw-card__media:hover .cw-card__media-alt,
.cw-card__media:focus-within .cw-card__media-alt { opacity: 1; }

.cw-card__title { padding-inline: 1rem; font-size: .9375rem; margin: 0; }

.cw-card__title a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: color 200ms ease;
}

.cw-grid__items > li:hover .cw-card__title a { color: var(--wp--preset--color--maroon); }

.cw-card__price {
	padding-inline: 1rem;
	font-size: 1rem;
	font-weight: 600;
}

.cw-money { font-variant-numeric: tabular-nums; }

.cw-money--was { color: var(--wp--preset--color--muted); font-size: .9em; }

.cw-money--now {
	color: var(--wp--preset--color--sale);
	text-decoration: none;
	font-weight: 700;
}

/* Add-to-cart on the card: the whole point of a merchandised grid is that a
   customer can act without a second page load. */
.cw-card__cta { margin-top: auto; padding: .85rem 1rem 0; }

.cw-card__cta a,
.cw-card__cta button {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--wp--preset--color--maroon);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: .7rem 1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: .8125rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 200ms ease;
}

.cw-card__cta a:hover,
.cw-card__cta button:hover {
	background: var(--wp--preset--color--maroon-dark);
	color: #fff;
	transform: translateY(-1px);
}

/* On a pointer device the button rests quietly and firms up on hover; on touch
   there is no hover, so it is always at full strength. */
@media (hover: hover) {
	.cw-card__cta a,
	.cw-card__cta button {
		background: var(--wp--preset--color--gold-soft);
		color: var(--wp--preset--color--maroon);
	}
	.cw-grid__items > li:hover .cw-card__cta a,
	.cw-grid__items > li:hover .cw-card__cta button {
		background: var(--wp--preset--color--maroon);
		color: #fff;
	}
}

/* A sold-out product must not wear the same button as a buyable one. */
.cw-card__cta .cw-btn--soldout {
	background: transparent;
	color: var(--wp--preset--color--muted);
	border: 1px solid var(--wp--preset--color--line);
}

.cw-card__cta .cw-btn--soldout:hover {
	background: var(--wp--preset--color--ground-alt);
	color: var(--wp--preset--color--ink);
}

/* Sale badge: a saving in green is the language this category uses. */
.cw-badge--sale {
	position: absolute;
	top: .55rem;
	left: .55rem;
	z-index: 2;
	background: var(--wp--preset--color--save);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: .25rem .7rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.5;
	min-height: 0;
	min-width: 0;
}

/* ---------- shop page ---------- */

.cw-shophead {
	background: var(--wp--preset--color--ground-alt);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--50);
}

.cw-shophead__inner,
.cw-shop,
.cw-shop__results,
.cw-shop > .cw-toolbar {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	width: 100%;
}

.cw-shop { padding-inline: var(--wp--preset--spacing--30); }

.cw-shophead__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: clamp(2.1rem, 4.6vw, 3.2rem);
	line-height: 1.05;
	margin: .35rem 0 0;
}

.cw-toolbar {
	align-items: center;
	gap: 1rem;
	padding-bottom: 1rem;
	margin-bottom: var(--wp--preset--spacing--40);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.cw-count {
	margin: 0;
	font-size: .8125rem;
	color: var(--wp--preset--color--muted);
}

.cw-sort select {
	appearance: none;
	font-family: var(--wp--preset--font-family--body);
	font-size: .875rem;
	color: var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%237A1F23' stroke-width='1.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .9rem center;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	padding: .6rem 2.2rem .6rem 1.1rem;
	cursor: pointer;
	transition: border-color 200ms ease;
}

.cw-sort select:hover { border-color: var(--wp--preset--color--gold); }

/* ---------- pagination ---------- */

.cw-pagination {
	margin-top: var(--wp--preset--spacing--50);
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
	gap: .35rem;
}

.cw-pagination .page-numbers {
	min-width: 2.6rem;
	height: 2.6rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	font-size: .875rem;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	border: 1px solid transparent;
	transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}

.cw-pagination .page-numbers:hover { border-color: var(--wp--preset--color--line); color: var(--wp--preset--color--maroon); }
.cw-pagination .page-numbers.current { background: var(--wp--preset--color--maroon); border-color: var(--wp--preset--color--maroon); color: #fff; }

/* ---------- product page ---------- */

.cw-gallery { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); }

.cw-gallery__stage {
	background: #fff;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--cw-r);
	overflow: hidden;
	aspect-ratio: 1;
	padding: 3.5%;
}

.cw-gallery__thumbs { display: flex; gap: .5rem; flex-wrap: wrap; }

.cw-gallery__thumb {
	width: 4.6rem;
	height: 4.6rem;
	padding: 4%;
	border: 2px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	overflow: hidden;
	transition: border-color 200ms ease;
}

.cw-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cw-gallery__thumb.is-on,
.cw-gallery__thumb:hover { border-color: var(--wp--preset--color--gold); }

.cw-gallery__thumb:focus-visible,
.cw-swatch:focus-visible { outline: 2px solid var(--wp--preset--color--maroon); outline-offset: 2px; }

.cw-product__title { font-family: var(--wp--preset--font-family--display); font-weight: 600; }

.cw-add {
	background: var(--wp--preset--color--maroon);
	color: #fff;
	border: 0;
	border-radius: 999px;
	padding: 1.05rem 2.6rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: .9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 220ms ease, transform 220ms ease;
}

.cw-add:hover {
	background: var(--wp--preset--color--maroon-dark);
	transform: translateY(-1px);
}

.cw-qty input {
	min-height: 3.3rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	padding-inline: .5rem;
}

.cw-variations__label {
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	font-weight: 600;
	text-align: left;
	padding-bottom: .4rem;
}

/* ---------- swatches ---------- */

.cw-swatches { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; padding: 0; list-style: none; }

.cw-swatch {
	width: 3.9rem;
	height: 3.9rem;
	padding: 4%;
	border: 2px solid var(--wp--preset--color--line);
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
	overflow: hidden;
	position: relative;
	transition: border-color 200ms ease, transform 200ms ease;
}

.cw-swatch:hover { transform: translateY(-2px); border-color: var(--wp--preset--color--gold); }
.cw-swatch img { width: 100%; height: 100%; object-fit: contain; display: block; }
.cw-swatch[aria-pressed="true"] { border-color: var(--wp--preset--color--maroon); }

.cw-swatch__n {
	position: absolute;
	left: 0;
	bottom: 0;
	font-size: .58rem;
	line-height: 1;
	padding: 2px 4px;
	background: var(--wp--preset--color--ground-alt);
	color: var(--wp--preset--color--muted);
	border-top-right-radius: 5px;
}

.cw-has-swatches select.cw-select--replaced {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------- motion ---------- */

.cw-js .cw-reveal { opacity: 0; transform: translateY(16px); }

.cw-js .cw-reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 640ms cubic-bezier(.22,.61,.36,1) var(--d, 0s),
	            transform 640ms cubic-bezier(.22,.61,.36,1) var(--d, 0s);
}

/* Rashi tiles arrive as a wave rather than a block. */
.cw-js .cw-rashi.is-in .cw-rashi__tile {
	animation: cw-rise 560ms cubic-bezier(.22,.61,.36,1) backwards;
	animation-delay: calc(var(--i, 0) * 40ms);
}

.cw-js .cw-grid.is-in .cw-grid__items > li { animation: cw-rise 600ms cubic-bezier(.22,.61,.36,1) backwards; }
.cw-js .cw-grid .cw-grid__items > li:nth-child(1) { animation-delay: 0s; }
.cw-js .cw-grid .cw-grid__items > li:nth-child(2) { animation-delay: .06s; }
.cw-js .cw-grid .cw-grid__items > li:nth-child(3) { animation-delay: .12s; }
.cw-js .cw-grid .cw-grid__items > li:nth-child(4) { animation-delay: .18s; }
.cw-js .cw-grid .cw-grid__items > li:nth-child(n+5) { animation-delay: .24s; }

@keyframes cw-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 1024px) {
	.cw-rashi  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.cw-intent { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
	.cw-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.cw-rashi  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cw-intent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cw-sec__head--row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
	.cw-rashi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Someone who asked for less motion still gets the content. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
	.cw-js .cw-reveal,
	.cw-js .cw-rashi__tile,
	.cw-js .cw-grid .cw-grid__items > li {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}
	.cw-grid__items li:hover img.cw-img { transform: none; }
	.cw-hero__slide { animation: none !important; transform: none !important; }
}

.cw-footer a { color: var(--wp--preset--color--gold); text-decoration: none; }
.cw-footer a:hover { text-decoration: underline; }
.cw-foot-h {
	color: var(--wp--preset--color--gold);
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: .6rem;
}

/* ---------- shop by category ---------- */

/* Editorial 3x2 grid of generated imagery. This is the section that carries the
   most visual weight on the page, so the tiles are large, the images bleed to
   the tile edge, and the label sits on a gradient scrim over the photograph
   rather than in a box beneath it. */
.cw-cats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.1rem;
}

.cw-cat {
	position: relative;
	display: block;
	border-radius: 18px;
	overflow: hidden;
	text-decoration: none;
	color: #FFF6E8;
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--ink);
	box-shadow: var(--cw-shadow-sm);
	transition: transform 420ms cubic-bezier(.22,.61,.36,1), box-shadow 420ms ease;
	isolation: isolate;
}

.cw-cat:hover {
	transform: translateY(-6px);
	box-shadow: 0 6px 14px rgba(42, 29, 22, .10), 0 40px 70px -34px rgba(42, 29, 22, .62);
	text-decoration: none;
	color: #fff;
}

.cw-cat__media { position: absolute; inset: 0; display: block; overflow: hidden; }

.cw-cat__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transform: scale(1.02);
	transition: transform 900ms cubic-bezier(.22,.61,.36,1), filter 500ms ease;
}

.cw-cat:hover .cw-cat__media img { transform: scale(1.1); }

/* Scrim: dark at the foot so the label always reads, lifting on hover to let
   more of the photograph through. */
.cw-cat__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(20, 8, 8, .88) 0%, rgba(20, 8, 8, .45) 34%, rgba(20, 8, 8, .06) 66%, transparent 100%);
	transition: opacity 420ms ease;
}

.cw-cat:hover .cw-cat__media::after { opacity: .82; }

.cw-cat__body {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	padding: 1.4rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: .15rem;
}

.cw-cat__name {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.cw-cat__sub {
	font-size: .8125rem;
	color: rgba(255, 246, 232, .78);
	display: flex;
	align-items: center;
	gap: .4rem;
}

/* An arrow that slides in on hover — the affordance that says "this is a door". */
.cw-cat__sub::after {
	content: "→";
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity 320ms ease, transform 320ms cubic-bezier(.22,.61,.36,1);
	color: var(--wp--preset--color--gold);
}

.cw-cat:hover .cw-cat__sub::after { opacity: 1; transform: none; }

.cw-cat:focus-visible { outline: 3px solid var(--wp--preset--color--gold); outline-offset: 3px; }

/* Tiles arrive in sequence. */
.cw-js .cw-cats.is-in .cw-cat {
	animation: cw-rise 640ms cubic-bezier(.22,.61,.36,1) backwards;
	animation-delay: calc(var(--i, 0) * 70ms);
}

@media (max-width: 1024px) { .cw-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px)  { .cw-cats { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
	.cw-js .cw-cat { animation: none !important; opacity: 1 !important; transform: none !important; }
	.cw-cat:hover .cw-cat__media img { transform: scale(1.02); }
}

/* ---------- shop filters ---------- */

/* A 1,223-product catalogue is unusable without them. WooCommerce ships the
   filter blocks unstyled, so everything below is what turns them from a bare
   list of inputs into a sidebar. */
.cw-shop__cols { align-items: flex-start; }

.cw-filters {
	position: sticky;
	top: 6.5rem;
	font-size: .9375rem;
}

.cw-filter {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--cw-r);
	padding: 1.1rem 1.2rem;
	margin-bottom: .9rem;
}

.cw-filter__title {
	margin: 0 0 .8rem;
	font-size: .72rem !important;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	font-weight: 600;
}


.cw-results { min-width: 0; }

@media (max-width: 900px) {
	.cw-shop__cols { flex-wrap: wrap !important; }
	.cw-filters {
		position: static;
		flex-basis: 100% !important;
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
		gap: .75rem;
	}
	.cw-filter { margin-bottom: 0; }
}

/* ---------- server-rendered filters ---------- */

.cw-filters__form { display: flex; flex-direction: column; gap: .9rem; }

.cw-filter__hint {
	margin: .55rem 0 0;
	font-size: .8125rem;
	color: var(--wp--preset--color--muted);
}

/* A number input has an intrinsic minimum width from its spinner; in a flex row
   that made the second field overflow its card. `min-width: 0` on both the label
   and the input, plus border-box sizing, keeps the pair inside the box. */
.cw-price { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.cw-price label { flex: 1 1 0; min-width: 0; }

.cw-price input {
	width: 100%;
	min-width: 0;
	box-sizing: border-box;
	appearance: textfield;
	-moz-appearance: textfield;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	padding: .5rem .85rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: .875rem;
	font-variant-numeric: tabular-nums;
	background: var(--wp--preset--color--ground);
}

.cw-price input:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--gold);
}

/* A whole row is the hit target, not just the 16px box. */
.cw-check {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .42rem .25rem;
	margin: 0 -.25rem;
	border-radius: 8px;
	cursor: pointer;
	font-size: .9375rem;
	transition: background-color 160ms ease;
}

.cw-check:hover { background: var(--wp--preset--color--ground-alt); }

.cw-check input {
	accent-color: var(--wp--preset--color--maroon);
	width: 1.05rem;
	height: 1.05rem;
	flex: none;
	cursor: pointer;
}

.cw-check span { flex: 1; min-width: 0; }

.cw-check em {
	font-style: normal;
	font-size: .8125rem;
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
}

/* Long attribute lists scroll inside the box rather than pushing the page down. */
.cw-filter__scroll { max-height: 16rem; overflow-y: auto; margin: 0 -.25rem; padding: 0 .25rem; }

.cw-filter__scroll::-webkit-scrollbar { width: 6px; }
.cw-filter__scroll::-webkit-scrollbar-thumb { background: var(--wp--preset--color--line); border-radius: 999px; }

.cw-chips { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }

.cw-chips a {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	background: var(--wp--preset--color--gold-soft);
	border: 1px solid rgba(200, 154, 60, .45);
	border-radius: 999px;
	padding: .28rem .7rem;
	font-size: .8125rem;
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	transition: background-color 180ms ease;
}

.cw-chips a:hover { background: #EFDFBC; text-decoration: none; }
.cw-chips a span[aria-hidden] { color: var(--wp--preset--color--maroon); font-weight: 700; }

.cw-clear { font-size: .8125rem; color: var(--wp--preset--color--maroon); }

.cw-filter__apply {
	width: 100%;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--maroon);
	color: #fff;
	font-family: var(--wp--preset--font-family--body);
	font-size: .875rem;
	font-weight: 600;
	padding: .85rem 1rem;
	cursor: pointer;
	transition: background-color 200ms ease;
}

.cw-filter__apply:hover { background: var(--wp--preset--color--maroon-dark); }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}


/* Hide the spinner arrows — they add width and nobody nudges a price by 1. */
.cw-price input::-webkit-outer-spin-button,
.cw-price input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- brand mark ---------- */

/* The header takes the brand ground rather than white, so the circular mark
   reads as part of the page instead of a pasted-on tile. */
.cw-header { background: var(--wp--preset--color--ground); }

/* ⚠️ NO `mix-blend-mode` HERE ANY MORE. The client's logo (CW-48) is a real
   transparent PNG — scripts/logo/build-logo.py cuts the circle out — so there
   is no cream field left to blend away, and multiplying would only darken the
   artwork against the ground. */
.cw-logo img {
	display: block;
	height: auto;
	max-width: 112px;
}

.cw-scrolled .cw-logo img {
	max-width: 88px;
	transition: max-width 260ms cubic-bezier(.22,.61,.36,1);
}

.cw-foot-title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 1.5rem;
}