/* created-rid-2026-09-11 */

/* =========================================================
   1. CSS CUSTOM PROPERTIES
   ========================================================= */
:root {
	/* Primary navy/blue palette */
	--color-navy-900: #0a1f3d;
	--color-navy-800: #102c54;
	--color-navy-700: #173b6e;
	--color-primary: var(--color-navy-800);
	--color-primary-dark: var(--color-navy-900);
	--color-primary-light: var(--color-navy-700);

	/* Warm gold/amber accent */
	--color-accent: #c8932a;
	--color-accent-dark: #a3771e;
	--color-accent-light: #e0ac4c;

	/* Backgrounds */
	--color-bg: #ffffff;
	--color-bg-alt: #f6f7f9;
	--color-bg-muted: #eef1f5;

	/* Text */
	--color-text: #1c2430;
	--color-text-muted: #57616f;
	--color-text-inverse: #ffffff;

	/* Borders */
	--color-border: #dde2e8;
	--color-border-strong: #c3cad3;

	/* State colors */
	--color-success: #2f7d52;
	--color-error: #b3413a;

	/* Layout */
	--container-width: 1280px;
	--container-padding: 1rem;
	--header-height: 6.25rem;

	/* Spacing scale */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem;

	/* Border radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;
	--radius-pill: 999px;

	/* Shadows */
	--shadow-sm: 0 1px 2px rgba(10, 31, 61, 0.06);
	--shadow-md: 0 4px 12px rgba(10, 31, 61, 0.08);
	--shadow-lg: 0 12px 32px rgba(10, 31, 61, 0.14);

	/* Transitions */
	--transition-fast: 150ms ease;
	--transition-base: 250ms ease;

	/* Typography */
	--font-primary: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-secondary: 'Merriweather', Georgia, 'Times New Roman', serif;
}

/* =========================================================
   2. GLOBAL RESET / BASE
   ========================================================= */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scrollbar-gutter: stable;
}

body {
	margin: 0;
	font-family: var(--font-primary);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--color-text);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--space-4);
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-primary-dark);
}

p {
	margin: 0 0 var(--space-4);
}

ul,
ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

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

a:hover,
a:focus {
	color: var(--color-accent);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

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

button {
	font-family: inherit;
	font-size: 1rem;
	color: inherit;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}

input,
textarea,
select {
	font-family: inherit;
	font-size: 1rem;
	color: inherit;
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: var(--space-2) var(--space-3);
}

textarea {
	resize: vertical;
}

/* =========================================================
   3. TYPOGRAPHY
   ========================================================= */
h1 {
	font-size: clamp(1.875rem, 1.6rem + 1.5vw, 3rem);
	font-weight: 700;
}

h2 {
	font-size: clamp(1.5rem, 1.3rem + 1vw, 2.25rem);
	font-weight: 700;
}

h3 {
	font-size: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
	font-weight: 600;
}

h4 {
	font-size: 1.125rem;
	font-weight: 600;
}

h5,
h6 {
	font-size: 1rem;
	font-weight: 600;
}

body {
	font-weight: 400;
}

strong,
b {
	font-weight: 600;
}

/* =========================================================
   4. LAYOUT UTILITIES
   ========================================================= */
.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

section {
	padding-block: var(--space-7);
}

@media (min-width: 768px) {
	:root {
		--container-padding: 2rem;
	}

	section {
		padding-block: var(--space-9);
	}
}

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

/* =========================================================
   5. WORDPRESS BASICS
   ========================================================= */

/* Alignment helpers */
.alignleft {
	float: left;
	margin: 0 var(--space-5) var(--space-4) 0;
}

.alignright {
	float: right;
	margin: 0 0 var(--space-4) var(--space-5);
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignwide {
	max-width: calc(var(--container-width) * 0.85);
	margin-left: auto;
	margin-right: auto;
}

.alignfull {
	max-width: 100%;
}

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

.skip-link.screen-reader-text:focus {
	position: fixed;
	top: var(--space-2);
	left: var(--space-2);
	width: auto;
	height: auto;
	clip: auto;
	overflow: visible;
	z-index: 10000;
	padding: var(--space-2) var(--space-4);
	background-color: var(--color-primary-dark);
	color: var(--color-text-inverse);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-md);
}

/* Basic pagination */
.pagination,
.navigation.pagination {
	display: flex;
	justify-content: center;
	margin-top: var(--space-7);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: var(--space-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-primary);
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.pagination .page-numbers:hover,
.pagination .page-numbers:focus {
	background-color: var(--color-bg-muted);
}

.pagination .page-numbers.current {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-text-inverse);
}

/* Basic WordPress content formatting */
.entry-content,
.page-content {
	color: var(--color-text);
}

.entry-content h2,
.entry-content h3,
.entry-content h4,
.page-content h2,
.page-content h3,
.page-content h4 {
	margin-top: var(--space-6);
}

.entry-content p,
.entry-content ul,
.entry-content ol,
.page-content p,
.page-content ul,
.page-content ol {
	margin-bottom: var(--space-4);
}

.entry-content ul,
.page-content ul {
	list-style: disc;
	padding-left: var(--space-5);
}

.entry-content ol,
.page-content ol {
	list-style: decimal;
	padding-left: var(--space-5);
}

.entry-content blockquote,
.page-content blockquote {
	margin: var(--space-5) 0;
	padding: var(--space-4) var(--space-5);
	border-left: 3px solid var(--color-accent);
	background-color: var(--color-bg-alt);
	color: var(--color-text-muted);
	font-family: var(--font-secondary);
	font-style: italic;
}

.entry-content figcaption,
.page-content figcaption {
	margin-top: var(--space-2);
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

/* =========================================================
   6. HEADER
   ========================================================= */
.announcement-bar {
	overflow: hidden;
	background-color: var(--color-primary);
	color: rgba(255, 255, 255, 0.92);
}

.announcement-bar__track {
	display: flex;
	align-items: center;
	width: max-content;
	white-space: nowrap;
	padding: 0.3125rem 0;
	animation: announcement-bar-scroll 40s linear infinite;
}

.announcement-bar:hover .announcement-bar__track {
	animation-play-state: paused;
}

.announcement-bar__item {
	flex: 0 0 auto;
	padding: 0 var(--space-5);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.01em;
}

.announcement-bar__item:not(:last-child) {
	border-right: 1px solid rgba(255, 255, 255, 0.2);
}

@keyframes announcement-bar-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

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

	.announcement-bar {
		overflow-x: auto;
	}
}

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
	box-shadow: var(--shadow-sm);
}

.site-header__container,
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: var(--header-height);
}

.site-header__branding,
.site-branding {
	display: flex;
	align-items: center;
	min-width: 0;
}

.site-logo-image {
	display: inline-flex;
	align-items: center;
}

.site-logo-image img {
	max-height: calc(var(--header-height) - var(--space-2));
	width: auto;
}

.custom-logo {
	max-height: calc(var(--header-height) - var(--space-2));
	width: auto;
}

.site-title {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.1;
}

.site-title a {
	color: var(--color-primary-dark);
}

.site-description {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--color-text-muted);
}

/* =========================================================
   7. PRIMARY NAVIGATION
   ========================================================= */
.primary-navigation {
	display: none;
}

@media (min-width: 960px) {
	.primary-navigation {
		display: block;
	}
}

.primary-menu {
	display: flex;
	align-items: center;
	gap: var(--space-6);
}

.primary-menu li {
	position: relative;
}

.primary-menu > li > a {
	display: inline-flex;
	align-items: center;
	padding: var(--space-2) 0;
	color: var(--color-text);
	font-weight: 500;
	border-bottom: 2px solid transparent;
	transition: color var(--transition-fast), border-color var(--transition-fast);
}

.primary-menu > li > a:hover,
.primary-menu > li > a:focus {
	color: var(--color-primary);
}

.primary-menu .current-menu-item > a,
.primary-menu .current_page_item > a {
	color: var(--color-primary);
	border-bottom-color: var(--color-accent);
	font-weight: 600;
}

/* CSS-only dropdown support (no JavaScript required) */
.primary-menu ul.sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	margin-top: var(--space-2);
	padding: var(--space-2) 0;
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
	z-index: 50;
}

.primary-menu li:hover > ul.sub-menu,
.primary-menu li:focus-within > ul.sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.primary-menu ul.sub-menu li {
	width: 100%;
}

.primary-menu ul.sub-menu a {
	display: block;
	padding: var(--space-2) var(--space-4);
	color: var(--color-text);
	border-bottom: none;
	white-space: nowrap;
}

.primary-menu ul.sub-menu a:hover,
.primary-menu ul.sub-menu a:focus {
	background-color: var(--color-bg-alt);
	color: var(--color-primary);
}

/* Mobile navigation panel */
.mobile-navigation[hidden] {
	display: none;
}

.mobile-navigation {
	position: fixed;
	inset: 0;
	z-index: 200;
	overflow-y: auto;
	background-color: var(--color-bg);
	padding: var(--space-6) var(--container-padding);
}

@media (min-width: 960px) {
	.mobile-navigation {
		display: none !important;
	}
}

.mobile-navigation nav {
	margin-top: var(--space-8);
}

.mobile-menu {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.mobile-menu a {
	display: block;
	padding: var(--space-3) var(--space-2);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--color-primary-dark);
	border-bottom: 1px solid var(--color-border);
}

.mobile-menu a:hover,
.mobile-menu a:focus {
	color: var(--color-accent-dark);
}

.mobile-menu-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--space-4);
	width: 100%;
	padding-block: var(--space-3);
	font-weight: 600;
}

.mobile-menu-close {
	position: absolute;
	top: var(--space-4);
	right: var(--container-padding);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	color: var(--color-primary-dark);
	transition: background-color var(--transition-fast);
}

.mobile-menu-close:hover,
.mobile-menu-close:focus {
	background-color: var(--color-bg-alt);
}

/* =========================================================
   8. HEADER ACTIONS
   ========================================================= */
.site-header__actions,
.header-actions {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	flex-shrink: 0;
}

.search-toggle,
.mobile-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	color: var(--color-primary-dark);
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.search-toggle:hover,
.search-toggle:focus,
.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus {
	background-color: var(--color-bg-alt);
	color: var(--color-primary);
}

@media (min-width: 960px) {
	.mobile-menu-toggle {
		display: none;
	}
}

.header-cta {
	white-space: nowrap;
}

@media (max-width: 479.98px) {
	.header-cta {
		padding-inline: var(--space-3);
		font-size: 0.875rem;
	}
}

/* Below ~420px (e.g. a 375px viewport) the header-actions row — search,
   account, wishlist, cart, this CTA, and the hamburger — no longer fits
   alongside even a shrunk logo without wrapping/overflowing. The CTA is
   the one purely promotional item in that row (Contact is still reachable
   from the mobile nav), so it's what gives way first here rather than
   any of the icon links, which all lead to functionality with no other
   entry point in the header. */
@media (max-width: 419.98px) {
	.header-cta {
		display: none !important;
	}
}

/* =========================================================
   9. SEARCH PANEL
   ========================================================= */
.header-search-bar[hidden],
.header-search[hidden] {
	display: none;
}

.header-search-bar,
.header-search {
	border-top: 1px solid var(--color-border);
	background-color: var(--color-bg-alt);
}

.header-search-bar .search-form,
.header-search .search-form {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	max-width: var(--container-width);
	margin-inline: auto;
	padding: var(--space-4) var(--container-padding);
}

.header-search-bar .search-field,
.header-search .search-field {
	flex: 1 1 auto;
	min-height: 44px;
}

.header-search-bar .search-submit,
.header-search .search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	border-radius: var(--radius-sm);
	color: var(--color-primary-dark);
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.header-search-bar .search-submit:hover,
.header-search-bar .search-submit:focus,
.header-search .search-submit:hover,
.header-search .search-submit:focus {
	background-color: var(--color-bg);
	color: var(--color-primary);
}

/* =========================================================
   10. BUTTONS
   ========================================================= */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 44px;
	padding: var(--space-3) var(--space-5);
	border: 2px solid transparent;
	border-radius: var(--radius-sm);
	font-family: var(--font-primary);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.btn:active {
	transform: translateY(1px);
}

.btn--primary {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-text-inverse);
}

.btn--primary:hover,
.btn--primary:focus {
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	color: var(--color-text-inverse);
}

.btn--secondary {
	background-color: transparent;
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.btn--secondary:hover,
.btn--secondary:focus {
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
}

.btn--outline {
	background-color: transparent;
	border-color: var(--color-accent);
	color: var(--color-accent-dark);
}

.btn--outline:hover,
.btn--outline:focus {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-primary-dark);
}

/* =========================================================
   11. HERO
   ========================================================= */
.hero {
	background-color: var(--color-bg-alt);
	overflow: hidden;
}

.hero__container,
.hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-7);
}

@media (min-width: 960px) {
	.hero__container,
	.hero__inner {
		flex-direction: row;
		align-items: center;
		gap: var(--space-8);
	}

	.hero__content {
		flex: 1 1 50%;
	}

	.hero__media {
		flex: 1 1 45%;
	}
}

.hero__content {
	width: 100%;
	text-align: center;
}

@media (min-width: 960px) {
	.hero__content {
		text-align: left;
	}
}

.hero__eyebrow {
	display: inline-block;
	margin-bottom: var(--space-3);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	background-color: rgba(200, 147, 42, 0.12);
	color: var(--color-accent-dark);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.hero__heading,
.hero__title {
	color: var(--color-primary-dark);
	margin-bottom: var(--space-4);
}

.hero__text {
	color: var(--color-text-muted);
	font-size: 1.125rem;
	max-width: 42ch;
	margin-inline: auto;
	margin-bottom: var(--space-6);
}

@media (min-width: 960px) {
	.hero__text {
		margin-inline: 0;
	}
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
}

@media (min-width: 960px) {
	.hero__actions {
		justify-content: flex-start;
	}
}

.hero__media {
	width: 100%;
}

.hero__media-placeholder {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-md);
	background-image: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
	box-shadow: var(--shadow-lg);
}

.hero__media-placeholder::after {
	content: '';
	position: absolute;
	inset: var(--space-5);
	border: 2px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--radius-sm);
}

/* =========================================================
   12. TRUST / CREDIBILITY STRIP
   ========================================================= */
.trust-strip {
	background-color: var(--color-primary-dark);
	color: var(--color-text-inverse);
}

.trust-strip__list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-5);
	text-align: center;
}

@media (min-width: 768px) {
	.trust-strip__list {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		text-align: left;
	}
}

.trust-strip__item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-weight: 600;
	color: var(--color-text-inverse);
}

.trust-strip__item svg {
	color: var(--color-accent-light);
	flex-shrink: 0;
}

/* =========================================================
   13. ABOUT / COMPANY INTRODUCTION
   ========================================================= */
.about-intro {
	background-color: var(--color-bg);
}

.about-intro__container {
	max-width: 760px;
	margin-inline: auto;
	text-align: center;
}

.about-intro__heading {
	margin-bottom: var(--space-4);
}

.about-intro__text {
	color: var(--color-text-muted);
	font-size: 1.0625rem;
	margin-bottom: var(--space-5);
}

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: 600;
	color: var(--color-primary);
}

.link-arrow svg {
	transition: transform var(--transition-fast);
}

.link-arrow:hover,
.link-arrow:focus {
	color: var(--color-accent-dark);
}

.link-arrow:hover svg,
.link-arrow:focus svg {
	transform: translateX(4px);
}

/* =========================================================
   14. WHAT WE OFFER / PRODUCT CATEGORIES
   ========================================================= */
.offerings {
	background-color: var(--color-bg-alt);
}

.offerings__container {
	text-align: center;
}

.offerings__heading {
	margin-bottom: var(--space-6);
}

.offerings__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
	text-align: left;
}

@media (min-width: 640px) {
	.offerings__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.offerings__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.offerings__card {
	padding: var(--space-5);
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.offerings__card:hover {
	border-color: var(--color-primary-light);
	box-shadow: var(--shadow-sm);
}

.offerings__card h3 {
	margin: 0;
	font-size: 1.125rem;
	color: var(--color-primary-dark);
}

/* =========================================================
   15. WHY SAITRAYAA
   ========================================================= */
.why-us {
	background-color: var(--color-bg);
}

.why-us__container {
	text-align: center;
}

.why-us__heading {
	margin-bottom: var(--space-6);
}

.why-us__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	text-align: left;
}

@media (min-width: 640px) {
	.why-us__list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.why-us__list {
		grid-template-columns: repeat(4, 1fr);
	}
}

.why-us__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	padding: var(--space-4);
	background-color: var(--color-bg-alt);
	border-radius: var(--radius-sm);
	font-weight: 600;
	color: var(--color-text);
}

.why-us__item svg {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--color-accent-dark);
}

/* =========================================================
   16. FEATURED PRODUCTS
   ========================================================= */
.featured-products {
	background-color: var(--color-bg-alt);
}

.featured-products__container {
	text-align: center;
}

.featured-products__heading {
	margin-bottom: var(--space-6);
}

.product-card-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
	text-align: left;
}

@media (min-width: 640px) {
	.product-card-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 960px) {
	.product-card-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.product-card {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 96px;
	padding: var(--space-4);
	text-align: center;
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.product-card:hover,
.product-card:focus-within {
	border-color: var(--color-accent);
	box-shadow: var(--shadow-sm);
}

.product-card__name {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-primary-dark);
}

/* =========================================================
   17. WHO WE SERVE
   ========================================================= */
.who-we-serve {
	background-color: var(--color-bg);
}

.who-we-serve__container {
	text-align: center;
}

.who-we-serve__heading {
	margin-bottom: var(--space-6);
}

.who-we-serve__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-3);
}

@media (min-width: 640px) {
	.who-we-serve__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 960px) {
	.who-we-serve__list {
		grid-template-columns: repeat(5, 1fr);
	}
}

.who-we-serve__item {
	padding: var(--space-4);
	background-color: var(--color-bg-alt);
	border-radius: var(--radius-sm);
	font-weight: 600;
	color: var(--color-primary-dark);
}

/* =========================================================
   18. FINAL CTA
   ========================================================= */
.final-cta {
	background-color: var(--color-primary-dark);
	color: var(--color-text-inverse);
	text-align: center;
}

.final-cta__heading {
	color: var(--color-text-inverse);
}

.final-cta__text {
	max-width: 56ch;
	margin-inline: auto;
	margin-bottom: var(--space-6);
	color: rgba(255, 255, 255, 0.8);
}

.final-cta .btn--primary {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-primary-dark);
}

.final-cta .btn--primary:hover,
.final-cta .btn--primary:focus {
	background-color: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
	color: var(--color-text-inverse);
}

/* =========================================================
   19. BLOG / ARCHIVE LISTING
   ========================================================= */

/* Category filter pills */
.blog-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-7);
}

.blog-filters__link {
	display: inline-flex;
	align-items: center;
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text-muted);
	transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.blog-filters__link:hover,
.blog-filters__link:focus {
	border-color: var(--color-primary-light);
	color: var(--color-primary);
}

.blog-filters__link.is-active {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-text-inverse);
}

/* Featured (latest) post */
.featured-post {
	display: flex;
	flex-direction: column;
	margin-bottom: var(--space-8);
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
	.featured-post {
		flex-direction: row;
	}
}

.featured-post__media {
	display: block;
	flex: 1 1 50%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-image: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}

.featured-post__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}

.featured-post:hover .featured-post__media img,
.featured-post:focus-within .featured-post__media img {
	transform: scale(1.05);
}

.featured-post__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	flex: 1 1 50%;
	padding: var(--space-6);
}

@media (min-width: 768px) {
	.featured-post__body {
		padding: var(--space-8);
	}
}

.featured-post__eyebrow {
	display: inline-block;
	margin-bottom: var(--space-3);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	background-color: var(--color-bg-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
}

.featured-post__title {
	margin-bottom: var(--space-3);
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}

.featured-post__title a {
	color: var(--color-primary-dark);
}

.featured-post__title a:hover,
.featured-post__title a:focus {
	color: var(--color-primary);
}

.featured-post__meta {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
	font-size: 0.9375rem;
	color: var(--color-text-muted);
}

.featured-post__excerpt {
	margin-bottom: var(--space-5);
	color: var(--color-text-muted);
}
.archive-header {
	text-align: center;
}

.archive-title {
	margin-bottom: var(--space-2);
}

.archive-description {
	max-width: 60ch;
	margin-inline: auto;
	color: var(--color-text-muted);
}

.post-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

@media (min-width: 640px) {
	.post-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.post-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

.post-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.post-card:hover,
.post-card:focus-within {
	border-color: var(--color-primary-light);
	box-shadow: var(--shadow-md);
	transform: translateY(-4px);
}

.post-card__media {
	position: relative;
}

.post-card__thumbnail {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: var(--color-bg-alt);
}

.post-card__thumbnail--placeholder {
	background-image: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
}

.post-card__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-base);
}

.post-card:hover .post-card__thumbnail img,
.post-card:focus-within .post-card__thumbnail img {
	transform: scale(1.05);
}

.post-card__category {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 1;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	background-color: var(--color-accent);
	color: var(--color-primary-dark);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.post-card__category:hover,
.post-card__category:focus {
	background-color: var(--color-accent-dark);
	color: var(--color-text-inverse);
}

.post-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: var(--space-5);
}

.post-card__title {
	margin-bottom: var(--space-2);
	font-size: 1.25rem;
}

.post-card__title a {
	color: var(--color-primary-dark);
}

.post-card__title a:hover,
.post-card__title a:focus {
	color: var(--color-primary);
}

.post-card__meta {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

.post-card__meta-dot {
	color: var(--color-border-strong);
}

.post-card__excerpt {
	color: var(--color-text-muted);
	margin-bottom: var(--space-4);
	overflow: hidden;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.post-card__read-more {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: auto;
	font-weight: 600;
	color: var(--color-primary);
}

.post-card__read-more svg {
	transition: transform var(--transition-fast);
}

.post-card__read-more:hover,
.post-card__read-more:focus {
	color: var(--color-accent-dark);
}

.post-card__read-more:hover svg,
.post-card__read-more:focus svg {
	transform: translateX(4px);
}

.post-list__empty {
	padding: var(--space-8) var(--space-5);
	border: 1px dashed var(--color-border);
	border-radius: var(--radius-md);
	text-align: center;
	color: var(--color-text-muted);
}

/* =========================================================
   20. SINGLE POST
   ========================================================= */
.single-post .entry-header {
	max-width: 760px;
	margin-inline: auto;
	margin-bottom: var(--space-6);
	text-align: center;
}

.entry-title {
	margin-bottom: var(--space-3);
}

.entry-meta {
	font-size: 0.9375rem;
	color: var(--color-text-muted);
}

.entry-thumbnail {
	max-width: var(--container-width);
	margin-inline: auto;
	margin-bottom: var(--space-6);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.entry-thumbnail img {
	width: 100%;
	height: auto;
}

.single-post .entry-content {
	max-width: 760px;
	margin-inline: auto;
}

.entry-footer {
	max-width: 760px;
	margin-inline: auto;
	margin-top: var(--space-6);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}

.entry-categories,
.entry-tags {
	margin-bottom: var(--space-2);
	font-size: 0.9375rem;
	color: var(--color-text-muted);
}

.entry-categories a,
.entry-tags a {
	color: var(--color-primary);
}

.entry-categories a:hover,
.entry-categories a:focus,
.entry-tags a:hover,
.entry-tags a:focus {
	color: var(--color-accent-dark);
}

.entry-taxonomy__label {
	margin-right: var(--space-2);
	font-weight: 600;
	color: var(--color-text);
}

.page-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-5);
}

.page-links__title {
	font-weight: 600;
	margin-right: var(--space-2);
}

.page-links a,
.page-links > span:not(.page-links__title) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding-inline: var(--space-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

/* =========================================================
   21. GENERIC PAGES
   ========================================================= */
.page-header {
	max-width: 760px;
	margin-inline: auto;
	margin-bottom: var(--space-6);
	text-align: center;
}

/* Cart/Checkout use this plain title band (no decorative hero photo — see
   page.php) sitting directly under the site header, which otherwise had no
   breathing room above it at all. margin-bottom:0 overrides the generic
   .page-header rule above (space-6) — like .page-hero (section 39), this
   relies solely on the *following* section's own generic top padding
   ("section { padding-block: ... }", section 4) for the gap before its
   content. Cart/Checkout used to also add their own margin-bottom
   (originally space-7, still space-6 once just inherited from
   .page-header), which stacked on top of that same 96px section padding
   and left well over 100px of empty space between the title and the
   actual cart/checkout content for what should have read as one normal
   section gap. */
.cart-page__header,
.checkout-page__header {
	padding-top: var(--space-7);
	margin-bottom: 0;
}

.page-title {
	margin-bottom: 0;
}

.page-thumbnail {
	max-width: var(--container-width);
	margin-inline: auto;
	margin-bottom: var(--space-6);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.page-thumbnail img {
	width: 100%;
	height: auto;
}

.page-content {
	max-width: 760px;
	margin-inline: auto;
}

/* =========================================================
   22. 404 PAGE
   ========================================================= */
.error-404 {
	text-align: center;
}

.error-404__container {
	max-width: 640px;
	margin-inline: auto;
}

.error-404__code {
	margin-bottom: var(--space-2);
	font-size: clamp(3rem, 2.5rem + 2vw, 5rem);
	font-weight: 700;
	line-height: 1;
	color: var(--color-accent);
}

.error-404__heading {
	margin-bottom: var(--space-3);
}

.error-404__text {
	color: var(--color-text-muted);
	margin-bottom: var(--space-6);
}

.error-404__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
}

/* =========================================================
   23. SEARCH PAGE
   ========================================================= */
.search-results-header {
	text-align: center;
	margin-bottom: var(--space-6);
}

.search-results-title span {
	color: var(--color-accent-dark);
}

.search-results-empty {
	max-width: 480px;
	margin-inline: auto;
	text-align: center;
}

.search-results-empty p {
	color: var(--color-text-muted);
	margin-bottom: var(--space-5);
}

.search-results-empty .search-form {
	display: flex;
	gap: var(--space-3);
}

.search-results-empty .search-field {
	flex: 1 1 auto;
	min-height: 44px;
}

.search-results-empty .search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
	border-radius: var(--radius-sm);
	transition: background-color var(--transition-fast);
}

.search-results-empty .search-submit:hover,
.search-results-empty .search-submit:focus {
	background-color: var(--color-primary-dark);
}

/* =========================================================
   24. CONTACT / FORMS
   ========================================================= */
/*
 * No dedicated contact-form template/markup exists in the theme yet
 * (a contact form would typically be embedded via the_content(), e.g. a
 * shortcode). These rules style native form elements generically so any
 * form added later inherits the Saitrayaa visual language automatically.
 */
.entry-content form,
.page-content form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: 640px;
}

@media (min-width: 640px) {
	.entry-content form,
	.page-content form {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.entry-content form p,
	.page-content form p {
		grid-column: span 2;
	}
}

.entry-content label,
.page-content label {
	display: block;
	margin-bottom: var(--space-2);
	font-weight: 600;
	color: var(--color-text);
}

.entry-content input[type='text'],
.entry-content input[type='email'],
.entry-content input[type='tel'],
.entry-content input[type='url'],
.entry-content input[type='search'],
.entry-content textarea,
.entry-content select,
.page-content input[type='text'],
.page-content input[type='email'],
.page-content input[type='tel'],
.page-content input[type='url'],
.page-content input[type='search'],
.page-content textarea,
.page-content select {
	width: 100%;
	min-height: 44px;
	padding: var(--space-3);
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition-fast);
}

.entry-content textarea,
.page-content textarea {
	min-height: 140px;
}

.entry-content input:focus,
.entry-content textarea:focus,
.entry-content select:focus,
.page-content input:focus,
.page-content textarea:focus,
.page-content select:focus {
	border-color: var(--color-primary);
}

.entry-content input:invalid:not(:placeholder-shown),
.page-content input:invalid:not(:placeholder-shown) {
	border-color: var(--color-error);
}

.entry-content input[type='checkbox'],
.entry-content input[type='radio'],
.page-content input[type='checkbox'],
.page-content input[type='radio'] {
	width: auto;
	min-height: 0;
	margin-right: var(--space-2);
}

.entry-content button[type='submit'],
.entry-content input[type='submit'],
.page-content button[type='submit'],
.page-content input[type='submit'] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--space-3) var(--space-5);
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
	border: 2px solid var(--color-primary);
	border-radius: var(--radius-sm);
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.entry-content button[type='submit']:hover,
.entry-content button[type='submit']:focus,
.entry-content input[type='submit']:hover,
.entry-content input[type='submit']:focus,
.page-content button[type='submit']:hover,
.page-content button[type='submit']:focus,
.page-content input[type='submit']:hover,
.page-content input[type='submit']:focus {
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
}

.form-success {
	color: var(--color-success);
}

.form-error {
	color: var(--color-error);
}

/* =========================================================
   25. FOOTER
   ========================================================= */
.cta-band {
	background-color: var(--color-bg-alt);
	text-align: center;
}

.cta-band__heading {
	margin-bottom: var(--space-3);
}

.cta-band__text {
	max-width: 56ch;
	margin-inline: auto;
	margin-bottom: var(--space-6);
	color: var(--color-text-muted);
}

.cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
}

.site-footer {
	background-color: var(--color-primary-dark);
	color: rgba(255, 255, 255, 0.85);
	padding-top: var(--space-9);
}

.footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7);
	padding-bottom: var(--space-8);
}

@media (min-width: 640px) {
	.footer-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 960px) {
	.footer-grid {
		grid-template-columns: 1.3fr minmax(140px, 0.55fr) 1.25fr 1.3fr;
		gap: var(--space-6);
	}
}

.footer-col__heading {
	position: relative;
	margin-bottom: var(--space-5);
	padding-bottom: var(--space-3);
	color: var(--color-text-inverse);
	font-size: 0.9375rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.footer-col__heading::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 32px;
	height: 2px;
	background-color: var(--color-accent);
	border-radius: var(--radius-pill);
}

.footer-logo-frame {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-5);
	padding: var(--space-3) var(--space-4);
	background-color: var(--color-text-inverse);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

.footer-logo-image {
	display: inline-flex;
}

.footer-logo-image img,
.footer-col--brand .custom-logo {
	display: block;
	max-height: 110px;
	width: auto;
	height: auto;
}

.footer-tagline {
	max-width: 32ch;
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--font-secondary);
	font-style: italic;
	margin-bottom: var(--space-5);
}

.footer-social {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--radius-sm);
	color: var(--color-text-inverse);
	transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.social-link:hover,
.social-link:focus {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-primary-dark);
}

.footer-menu {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.footer-menu a {
	color: rgba(255, 255, 255, 0.85);
	transition: color var(--transition-fast);
}

.footer-menu a:hover,
.footer-menu a:focus {
	color: var(--color-accent-light);
}

.footer-products-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: var(--space-5);
	row-gap: var(--space-2);
}

.footer-products {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-products li {
	color: rgba(255, 255, 255, 0.7);
	font-size: 0.9375rem;
	line-height: 1.3;
}

.footer-contact {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin-bottom: var(--space-5);
}

.footer-contact__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	color: rgba(255, 255, 255, 0.85);
}

.footer-contact__item svg {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--color-accent-light);
}

.footer-contact__item a {
	color: rgba(255, 255, 255, 0.85);
	transition: color var(--transition-fast);
}

.footer-contact__item a:hover,
.footer-contact__item a:focus {
	color: var(--color-accent-light);
}

.footer-enquire-btn {
	display: inline-flex;
	min-height: 40px;
	padding: var(--space-2) var(--space-5);
	background-color: var(--color-accent);
	border: 2px solid var(--color-accent);
	color: var(--color-primary-dark);
	font-size: 0.9375rem;
}

.footer-enquire-btn:hover,
.footer-enquire-btn:focus {
	background-color: var(--color-accent-light);
	border-color: var(--color-accent-light);
	color: var(--color-primary-dark);
}

.site-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	background-color: rgba(0, 0, 0, 0.12);
}

.site-footer__bottom-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	padding-block: var(--space-5);
}

@media (min-width: 640px) {
	.site-footer__bottom-container {
		flex-direction: row;
		justify-content: space-between;
	}
}

.footer-copyright {
	margin: 0;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.65);
}

.back-to-top {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: var(--radius-sm);
	color: var(--color-text-inverse);
	transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.back-to-top:hover,
.back-to-top:focus {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-primary-dark);
}

.footer-watermark {
	overflow: hidden;
	padding-block: var(--space-4);
	text-align: center;
	font-size: clamp(3rem, 2rem + 8vw, 8rem);
	font-weight: 700;
	line-height: 1;
	color: rgba(255, 255, 255, 0.06);
	white-space: nowrap;
}

/* =========================================================
   26. GENERAL REUSABLE COMPONENTS
   ========================================================= */
.eyebrow {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	background-color: rgba(200, 147, 42, 0.12);
	color: var(--color-accent-dark);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.card {
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: var(--space-5);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.card:hover,
.card:focus-within {
	border-color: var(--color-primary-light);
	box-shadow: var(--shadow-sm);
}

.icon-container {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-sm);
	background-color: var(--color-bg-alt);
	color: var(--color-primary);
	flex-shrink: 0;
}

.divider {
	height: 1px;
	margin-block: var(--space-6);
	background-color: var(--color-border);
	border: none;
}

/* =========================================================
   27. RESPONSIVE REFINEMENTS
   ========================================================= */

/* Small phones: stack action groups into full-width buttons for
   easier tapping and to avoid cramped inline rows. */
@media (max-width: 479.98px) {
	.hero__actions,
	.cta-band__actions,
	.error-404__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.hero__actions .btn,
	.cta-band__actions .btn,
	.error-404__actions .btn {
		width: 100%;
	}

	.trust-strip__item {
		font-size: 0.9375rem;
	}

	.footer-products-grid {
		grid-template-columns: 1fr;
	}

	.footer-enquire-btn {
		width: 100%;
	}

	/* My Account's bordered cards (section 52) use the same space-6 (2rem)
	   padding as their desktop size — fine at 480px+, but on the smallest
	   phones that's over a third of the available width gone to padding
	   alone, so it's tightened here rather than in section 52 itself. */
	.account-sidebar,
	.account-panel {
		padding: var(--space-4);
	}

	.account-module {
		padding: var(--space-4);
	}

	.account-saved-grid {
		gap: var(--space-4);
	}
}

/* Tablet: tighten footer spacing and let columns wrap naturally
   before the four-column desktop layout kicks in. */
@media (min-width: 640px) and (max-width: 959.98px) {
	.footer-grid {
		gap: var(--space-5) var(--space-6);
	}

	.footer-col--brand {
		grid-column: 1 / -1;
	}
}

/* Large desktop: a little more breathing room once space allows. */
@media (min-width: 1200px) {
	:root {
		--container-padding: 3rem;
	}

	.post-list {
		gap: var(--space-8);
	}

	.hero__text {
		max-width: 46ch;
	}
}

/* =========================================================
   28. ACCESSIBILITY AND INTERACTION POLISH
   ========================================================= */

/* Respect reduced-motion preferences site-wide. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Prevent long unbroken strings (emails, URLs) from overflowing
   their containers. */
body {
	overflow-wrap: break-word;
}

/* Contain the sticky header so it can never introduce horizontal
   scroll, without clipping the fixed-position mobile nav panel. */
.site-header {
	overflow-x: hidden;
}

/* Responsive embeds/iframes and WordPress content tables that may
   appear inside post/page content. */
.entry-content iframe,
.entry-content embed,
.entry-content object,
.page-content iframe,
.page-content embed,
.page-content object {
	max-width: 100%;
}

.entry-content table,
.page-content table {
	width: 100%;
	margin-bottom: var(--space-4);
	border-collapse: collapse;
}

.entry-content table {
	display: block;
	overflow-x: auto;
}

.entry-content th,
.entry-content td,
.page-content th,
.page-content td {
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border);
	text-align: left;
}

.entry-content th,
.page-content th {
	background-color: var(--color-bg-alt);
	font-weight: 600;
}

.entry-content pre,
.page-content pre {
	padding: var(--space-4);
	overflow-x: auto;
	background-color: var(--color-primary-dark);
	color: var(--color-text-inverse);
	border-radius: var(--radius-sm);
	margin-bottom: var(--space-4);
}

.entry-content code,
.page-content code {
	padding: 0.15em 0.4em;
	background-color: var(--color-bg-muted);
	border-radius: var(--radius-sm);
	font-size: 0.9em;
}

.entry-content pre code,
.page-content pre code {
	padding: 0;
	background-color: transparent;
}

/* Bring a couple of smaller interactive targets up to the
   44px minimum touch-target size. */
.social-link {
	min-width: 44px;
	min-height: 44px;
}

.pagination .page-numbers {
	min-width: 2.75rem;
	height: 2.75rem;
}

.page-links a,
.page-links > span:not(.page-links__title) {
	min-width: 2.75rem;
	height: 2.75rem;
}

/* =========================================================
   29. HOMEPAGE HERO (.home-hero) — full-bleed video
   ========================================================= */
.home-hero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	min-height: 86vh;
	padding-block: var(--space-8);
	color: var(--color-text-inverse);
}

@media (min-width: 768px) {
	.home-hero {
		min-height: 92vh;
	}
}

.home-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.home-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: linear-gradient(0deg, rgba(10, 31, 61, 0.92) 5%, rgba(10, 31, 61, 0.6) 50%, rgba(10, 31, 61, 0.35) 100%);
}

@media (min-width: 768px) {
	.home-hero::after {
		background-image: linear-gradient(100deg, rgba(10, 31, 61, 0.9) 0%, rgba(10, 31, 61, 0.6) 42%, rgba(10, 31, 61, 0.22) 75%, rgba(10, 31, 61, 0.3) 100%);
	}
}

.home-hero__container {
	position: relative;
	z-index: 2;
	width: 100%;
}

.home-hero__content {
	max-width: 620px;
	text-align: center;
	margin-inline: auto;
}

@media (min-width: 768px) {
	.home-hero__content {
		text-align: left;
		margin-inline: 0;
	}
}

.home-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-light);
}

.home-hero__eyebrow::before {
	content: '';
	width: 8px;
	height: 8px;
	background-color: var(--color-accent);
	flex-shrink: 0;
}

.home-hero__heading {
	font-size: clamp(2.5rem, 2rem + 3vw, 4.25rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin-bottom: var(--space-5);
	color: var(--color-text-inverse);
}

.home-hero__text {
	font-size: 1.125rem;
	line-height: 1.7;
	max-width: 46ch;
	margin-inline: auto;
	margin-bottom: var(--space-7);
	color: rgba(255, 255, 255, 0.88);
}

@media (min-width: 768px) {
	.home-hero__text {
		margin-inline: 0;
	}
}

.home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3);
}

@media (min-width: 768px) {
	.home-hero__actions {
		justify-content: flex-start;
	}
}

@media (max-width: 479.98px) {
	.home-hero__actions .btn {
		width: 100%;
	}
}

.home-hero .btn--secondary {
	border-color: var(--color-text-inverse);
	color: var(--color-text-inverse);
}

.home-hero .btn--secondary:hover,
.home-hero .btn--secondary:focus {
	background-color: var(--color-text-inverse);
	color: var(--color-primary-dark);
}

.home-hero__badge {
	position: absolute;
	z-index: 2;
	right: var(--container-padding);
	bottom: var(--space-6);
	padding: var(--space-2) var(--space-4);
	background-color: rgba(10, 31, 61, 0.55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border-top: 2px solid var(--color-accent);
	border-radius: var(--radius-sm);
	color: var(--color-text-inverse);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
	.home-hero__badge {
		right: var(--space-7);
		bottom: var(--space-7);
	}
}

/* =========================================================
   30. HOMEPAGE TRUST BAND (.home-trust)
   ========================================================= */
.home-trust {
	background-color: var(--color-bg-alt);
	border-top: 1px solid var(--color-border);
	border-bottom: 1px solid var(--color-border);
	padding-block: var(--space-6);
}

.home-trust__list {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
	text-align: center;
}

@media (min-width: 640px) {
	.home-trust__list {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0;
	}
}

.home-trust__item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding-inline: var(--space-5);
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--color-primary-dark);
}

@media (min-width: 640px) {
	.home-trust__item:not(:first-child) {
		border-left: 1px solid var(--color-border);
	}
}

.home-trust__item svg {
	flex-shrink: 0;
	color: var(--color-accent-dark);
}

/* =========================================================
   31. HOMEPAGE STORY (.home-story)
   ========================================================= */
.home-story {
	background-color: var(--color-bg);
	overflow: hidden;
}

.home-story__container {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7);
}

@media (min-width: 960px) {
	.home-story__container {
		grid-template-columns: 1.15fr 0.85fr;
		align-items: center;
		gap: var(--space-8);
	}
}

.home-story__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
}

@media (min-width: 960px) {
	.home-story__media {
		aspect-ratio: 4 / 3;
	}
}

.home-story__media img,
.home-story__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}

.home-story__media img {
	object-position: center 20%;
}

.home-story__media:hover img,
.home-story__media:hover video {
	transform: scale(1.05);
}

.home-story__content {
	position: relative;
	padding: var(--space-6);
	background-color: var(--color-bg-alt);
	border-left: 3px solid var(--color-accent);
}

@media (min-width: 960px) {
	.home-story__content {
		z-index: 1;
		max-width: 480px;
		margin-top: calc(var(--space-8) * -1);
		margin-left: calc(var(--space-7) * -1);
		box-shadow: var(--shadow-md);
	}
}

.home-story__eyebrow {
	display: inline-block;
	margin-bottom: var(--space-3);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
}

.home-story__heading {
	margin-bottom: var(--space-4);
}

.home-story__text {
	color: var(--color-text-muted);
	margin-bottom: var(--space-5);
}

/* Longer copy (e.g. About page history) is nearly as tall as the media,
   so the homepage's overlap offset would push the card above the image. */
@media (min-width: 960px) {
	.home-story--history .home-story__container {
		grid-template-columns: 0.85fr 1.15fr;
		align-items: stretch;
	}

	.home-story--history .home-story__media {
		position: relative;
		aspect-ratio: auto;
		height: 100%;
	}

	.home-story--history .home-story__media video {
		position: absolute;
		inset: 0;
	}

	.home-story--history .home-story__content {
		margin-top: 0;
		margin-left: 0;
		margin-right: calc(var(--space-7) * -1);
	}
}

/* =========================================================
   32. HOMEPAGE PRODUCTS (.home-products)
   ========================================================= */
.home-products {
	position: relative;
	overflow: hidden;
	background-color: var(--color-bg);
}

.home-products::before,
.home-products::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}

.home-products::before {
	top: -14%;
	right: -10%;
	width: 42vw;
	height: 42vw;
	max-width: 560px;
	max-height: 560px;
	background: radial-gradient(circle, rgba(200, 147, 42, 0.1), transparent 70%);
}

.home-products::after {
	bottom: -18%;
	left: -12%;
	width: 34vw;
	height: 34vw;
	max-width: 420px;
	max-height: 420px;
	background: radial-gradient(circle, rgba(10, 31, 61, 0.06), transparent 70%);
}

.home-products__container {
	position: relative;
	z-index: 1;
}

.home-products__intro {
	max-width: 620px;
	margin-bottom: var(--space-8);
}

.home-products__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
}

.home-products__eyebrow::before {
	content: '';
	width: 32px;
	height: 2px;
	background-color: var(--color-accent);
}

.home-products__heading {
	max-width: 18ch;
	margin-bottom: var(--space-4);
}

.home-products__heading em {
	display: block;
	margin-top: var(--space-1);
	font-family: var(--font-secondary);
	font-style: italic;
	font-weight: 700;
	color: var(--color-accent-dark);
}

.home-products__text {
	color: var(--color-text-muted);
	font-size: 1.0625rem;
	max-width: 54ch;
	margin-bottom: 0;
}

/* ---- Mosaic grid ------------------------------------------ */
.home-products__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	margin-bottom: var(--space-7);
}

.home-products__tile {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-lg);
	background-color: var(--color-bg-alt);
}

@media (min-width: 600px) {
	.home-products__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.home-products__tile--1 {
		grid-column: 1 / 3;
		aspect-ratio: 20 / 9;
	}
}

@media (min-width: 960px) {
	.home-products__grid {
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: clamp(220px, 22vw, 300px);
		gap: var(--space-5);
		margin-bottom: var(--space-8);
	}

	.home-products__tile {
		aspect-ratio: auto;
	}

	.home-products__tile--1 {
		grid-column: 1 / 3;
		grid-row: 1 / 3;
	}

	.home-products__tile--2 {
		grid-column: 3 / 4;
		grid-row: 1 / 2;
	}

	.home-products__tile--3 {
		grid-column: 3 / 4;
		grid-row: 2 / 3;
	}

	.home-products__tile--4 {
		grid-column: 1 / 2;
		grid-row: 3 / 4;
	}

	.home-products__tile--5 {
		grid-column: 2 / 3;
		grid-row: 3 / 4;
	}

	.home-products__tile--6 {
		grid-column: 3 / 4;
		grid-row: 3 / 4;
	}
}

.home-products__tile:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: -4px;
}

.home-products__tile-photo {
	position: absolute;
	inset: 9% 10% 34%;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #ffffff;
	border-radius: var(--radius-md);
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
	overflow: hidden;
	transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.home-products__tile--1 .home-products__tile-photo {
	inset: 7% 8% 30%;
}

.home-products__tile-image {
	display: block;
	width: 100%;
	height: 100%;
	padding: 4%;
	box-sizing: border-box;
	object-fit: contain;
	transform: scale(1.22);
}

.home-products__tile:hover .home-products__tile-photo,
.home-products__tile:focus-visible .home-products__tile-photo {
	transform: scale(1.035);
	box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14);
}

.home-products__tile-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 31, 61, 0.95) 0%, rgba(10, 31, 61, 0.85) 16%, rgba(10, 31, 61, 0) 48%);
	transition: opacity var(--transition-base);
}

.home-products__tile:hover .home-products__tile-overlay,
.home-products__tile:focus-visible .home-products__tile-overlay {
	opacity: 0.85;
}

.home-products__tile--noimage {
	background-color: var(--color-primary-dark);
}

.home-products__tile-monogram {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-secondary);
	font-size: clamp(3rem, 2.4rem + 3vw, 5rem);
	font-weight: 700;
	color: var(--color-accent-light);
	opacity: 0.5;
}

.home-products__tile-arrow {
	position: absolute;
	top: var(--space-4);
	right: var(--space-4);
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.45);
	color: var(--color-text-inverse);
	opacity: 0;
	transform: translate(-4px, 4px);
	transition: opacity var(--transition-base), transform var(--transition-base), background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.home-products__tile--noimage .home-products__tile-arrow {
	opacity: 0.85;
	transform: translate(0, 0);
}

.home-products__tile-arrow svg {
	width: 16px;
	height: 16px;
}

.home-products__tile:hover .home-products__tile-arrow,
.home-products__tile:focus-visible .home-products__tile-arrow {
	opacity: 1;
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-primary-dark);
	transform: translate(0, 0);
}

.home-products__tile-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-4);
}

.home-products__tile--1 .home-products__tile-content {
	padding: var(--space-6);
}

.home-products__tile-number {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.75);
}

.home-products__tile-name {
	font-family: var(--font-secondary);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--color-text-inverse);
}

.home-products__tile--1 .home-products__tile-name {
	font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem);
}

.home-products__cta {
	display: flex;
	width: fit-content;
	margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
	.home-products__tile-photo,
	.home-products__tile-overlay,
	.home-products__tile-arrow {
		transition: none;
	}
}

/* =========================================================
   33. HOMEPAGE WHY SAITRAYAA (.home-why)
   ========================================================= */
.home-why {
	background-color: var(--color-bg-alt);
}

.home-why__intro {
	max-width: 640px;
	margin-bottom: var(--space-7);
}

.home-why__eyebrow {
	display: inline-block;
	margin-bottom: var(--space-3);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
}

.home-why__heading {
	margin-bottom: var(--space-4);
}

.home-why__text {
	color: var(--color-text-muted);
	font-size: 1.0625rem;
	margin-bottom: 0;
}

.home-why__list {
	counter-reset: saitrayaa-why;
	border-top: 1px solid var(--color-border);
}

.home-why__item {
	position: relative;
	counter-increment: saitrayaa-why;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding-block: var(--space-5);
	border-bottom: 1px solid var(--color-border);
}

.home-why__item::before {
	content: counter(saitrayaa-why, decimal-leading-zero);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--color-accent-dark);
}

.home-why__item svg {
	color: var(--color-accent-dark);
}

.home-why__item-title {
	margin: 0;
	font-size: 1.25rem;
	color: var(--color-primary-dark);
}

.home-why__item-text {
	margin: 0;
	color: var(--color-text-muted);
}

@media (min-width: 768px) {
	.home-why__item {
		flex-direction: row;
		align-items: center;
		gap: var(--space-6);
		padding-block: var(--space-6);
	}

	.home-why__item::before {
		flex: 0 0 56px;
		font-size: 1rem;
	}

	.home-why__item svg {
		flex: 0 0 auto;
	}

	.home-why__item-title {
		flex: 0 0 200px;
	}

	.home-why__item-text {
		flex: 1 1 auto;
	}
}

/* =========================================================
   33a. HOMEPAGE TESTIMONIALS (.home-testimonials)
   ========================================================= */
.home-testimonials {
	background-color: var(--color-bg-alt);
}

.home-testimonials__intro {
	max-width: 640px;
	margin-bottom: var(--space-7);
}

.home-testimonials__eyebrow {
	display: inline-block;
	margin-bottom: var(--space-3);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
}

.home-testimonials__heading {
	margin-bottom: var(--space-4);
}

.home-testimonials__text {
	color: var(--color-text-muted);
	font-size: 1.0625rem;
	margin-bottom: 0;
}

.home-testimonials__track {
	display: flex;
	gap: var(--space-5);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--container-padding);
	padding: var(--space-2) var(--space-2) var(--space-4);
	margin: calc(var(--space-2) * -1) calc(var(--space-2) * -1) calc(var(--space-4) * -1);
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.home-testimonials__track::-webkit-scrollbar {
	display: none;
}

.home-testimonials__track:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 4px;
}

.home-testimonials__slide {
	flex: 0 0 85%;
	max-width: 420px;
	margin: 0;
	display: flex;
	flex-direction: column;
	padding: var(--space-6);
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	scroll-snap-align: start;
}

@media (min-width: 700px) {
	.home-testimonials__slide {
		flex-basis: 46%;
	}
}

@media (min-width: 1080px) {
	.home-testimonials__slide {
		flex-basis: 31%;
	}
}

.home-testimonials__quote-mark {
	display: inline-flex;
	margin-bottom: var(--space-4);
	color: var(--color-accent);
}

.home-testimonials__quote-mark svg {
	width: 32px;
	height: 32px;
}

.home-testimonials__quote {
	margin: 0 0 var(--space-5);
	flex: 1 1 auto;
}

.home-testimonials__quote p {
	margin: 0;
	font-family: var(--font-secondary);
	font-style: italic;
	font-size: 1.125rem;
	line-height: 1.55;
	color: var(--color-text);
}

.home-testimonials__author {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-border);
}

.home-testimonials__author-name {
	font-weight: 700;
	color: var(--color-primary-dark);
}

.home-testimonials__author-role {
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

.home-testimonials__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-5);
	margin-top: var(--space-6);
}

.home-testimonials__nav-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border: 1px solid var(--color-border-strong);
	border-radius: 50%;
	background-color: var(--color-bg);
	color: var(--color-primary-dark);
	cursor: pointer;
	transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.home-testimonials__nav-btn--prev svg {
	transform: scaleX(-1);
}

.home-testimonials__nav-btn:hover,
.home-testimonials__nav-btn:focus-visible {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-primary-dark);
}

.home-testimonials__nav-btn:disabled {
	opacity: 0.35;
	cursor: default;
	pointer-events: none;
}

.home-testimonials__dots {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.home-testimonials__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: var(--radius-pill);
	background-color: var(--color-border-strong);
	cursor: pointer;
	transition: width var(--transition-base), background-color var(--transition-base);
}

.home-testimonials__dot.is-active {
	width: 24px;
	background-color: var(--color-accent);
}

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

	.home-testimonials__dot {
		transition: none;
	}
}

/* =========================================================
   34. HOMEPAGE BRAND MOMENT (.home-moment)
   ========================================================= */
.home-moment {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	min-height: 46vh;
	padding-block: 0;
}

@media (min-width: 768px) {
	.home-moment {
		align-items: center;
		min-height: 60vh;
	}
}

.home-moment__image {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-moment__overlay {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: var(--space-7) var(--container-padding) var(--space-8);
	background-image: linear-gradient(0deg, rgba(10, 31, 61, 0.82) 0%, rgba(10, 31, 61, 0.35) 55%, rgba(10, 31, 61, 0) 100%);
	color: var(--color-text-inverse);
}

@media (min-width: 768px) {
	.home-moment__overlay {
		max-width: 640px;
		padding: var(--space-8);
		background-image: linear-gradient(90deg, rgba(10, 31, 61, 0.85) 0%, rgba(10, 31, 61, 0.55) 70%, rgba(10, 31, 61, 0) 100%);
	}
}

.home-moment__heading {
	margin-bottom: var(--space-3);
	color: var(--color-text-inverse);
}

.home-moment__text {
	margin-bottom: var(--space-5);
	color: rgba(255, 255, 255, 0.85);
}

.home-moment .btn--secondary {
	border-color: var(--color-text-inverse);
	color: var(--color-text-inverse);
}

.home-moment .btn--secondary:hover,
.home-moment .btn--secondary:focus {
	background-color: var(--color-text-inverse);
	color: var(--color-primary-dark);
}

/* =========================================================
   35. HOMEPAGE AUDIENCE (.home-audience)
   ========================================================= */
.home-audience {
	background-color: var(--color-bg);
	text-align: center;
}

.home-audience__container {
	max-width: 900px;
	margin-inline: auto;
}

.home-audience__eyebrow {
	display: inline-block;
	margin-bottom: var(--space-5);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
}

.home-audience__list {
	margin: 0;
	font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2.25rem);
	line-height: 1.6;
	font-weight: 600;
	color: var(--color-primary-dark);
}

.home-audience__item {
	display: inline;
}

.home-audience__item:nth-child(even) {
	color: var(--color-text-muted);
}

.home-audience__item:not(:last-child)::after {
	content: '/';
	display: inline-block;
	margin-inline: var(--space-3);
	color: var(--color-accent);
	font-weight: 400;
}

/* =========================================================
   36. HOMEPAGE TIMELINE (.home-timeline)
   ========================================================= */
.home-timeline {
	background-color: var(--color-bg-alt);
}

.home-timeline__container {
	text-align: center;
}

.home-timeline__eyebrow {
	display: inline-block;
	margin-bottom: var(--space-3);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
}

.home-timeline__heading {
	margin-bottom: var(--space-8);
}

.home-timeline__list {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-7);
	max-width: 640px;
	margin-inline: auto;
	padding-left: var(--space-6);
	text-align: left;
}

.home-timeline__list::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 5px;
	width: 2px;
	background-color: var(--color-border);
}

.home-timeline__item {
	position: relative;
	padding-left: var(--space-6);
}

.home-timeline__item::before {
	content: '';
	position: absolute;
	left: calc(var(--space-6) * -1 + 1px);
	top: 4px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background-color: var(--color-accent);
	border: 2px solid var(--color-bg-alt);
}

.home-timeline__year {
	display: block;
	margin-bottom: var(--space-1);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-primary-dark);
}

.home-timeline__text {
	display: block;
	color: var(--color-text-muted);
}

@media (min-width: 960px) {
	.home-timeline__list {
		flex-direction: row;
		max-width: none;
		padding-left: 0;
		gap: var(--space-5);
	}

	.home-timeline__list::before {
		top: 9px;
		left: 0;
		right: 0;
		bottom: auto;
		width: auto;
		height: 2px;
	}

	.home-timeline__item {
		flex: 1;
		padding-left: 0;
		padding-top: var(--space-7);
		text-align: center;
	}

	.home-timeline__item::before {
		left: 50%;
		top: 0;
		transform: translateX(-50%);
	}
}

/* =========================================================
   36a. HOMEPAGE ENQUIRE STEPS (.home-enquire)
   ========================================================= */
.home-enquire {
	background-color: var(--color-bg);
	overflow: hidden;
}

.home-enquire__container {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7);
}

@media (min-width: 960px) {
	.home-enquire__container {
		grid-template-columns: 0.85fr 1.15fr;
		align-items: center;
		gap: var(--space-8);
	}
}

.home-enquire__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
}

@media (min-width: 960px) {
	.home-enquire__media {
		aspect-ratio: 3 / 4;
	}
}

.home-enquire__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.home-enquire__eyebrow {
	display: inline-block;
	margin-bottom: var(--space-3);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
}

.home-enquire__heading {
	margin-bottom: var(--space-4);
}

.home-enquire__text {
	max-width: 520px;
	margin-bottom: var(--space-6);
	color: var(--color-text-muted);
}

.home-enquire__steps {
	counter-reset: saitrayaa-enquire;
	border-top: 1px solid var(--color-border);
}

.home-enquire__step {
	position: relative;
	counter-increment: saitrayaa-enquire;
	padding-block: var(--space-5);
	padding-left: 3.25rem;
	border-bottom: 1px solid var(--color-border);
}

.home-enquire__step::before {
	content: counter(saitrayaa-enquire, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: var(--space-5);
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--color-accent-dark);
}

.home-enquire__step-title {
	display: block;
	margin-bottom: var(--space-1);
	font-family: var(--font-secondary);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-primary-dark);
}

.home-enquire__step-text {
	display: block;
	color: var(--color-text-muted);
}

/* =========================================================
   36b. HOMEPAGE ENQUIRE CTA BANNER (.home-enquire-cta)
   ========================================================= */
.home-enquire-cta {
	background-color: var(--color-primary-dark);
	color: var(--color-text-inverse);
}

.home-enquire-cta__container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-6);
}

@media (min-width: 860px) {
	.home-enquire-cta__container {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-7);
	}
}

.home-enquire-cta__eyebrow {
	display: inline-block;
	margin-bottom: var(--space-3);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-light);
}

.home-enquire-cta__heading {
	margin-bottom: var(--space-2);
	color: var(--color-text-inverse);
}

.home-enquire-cta__subtext {
	margin: 0;
	color: rgba(255, 255, 255, 0.8);
}

.home-enquire-cta__actions {
	display: flex;
	flex-wrap: wrap;
	flex-shrink: 0;
	gap: var(--space-3);
}

@media (max-width: 479.98px) {
	.home-enquire-cta__actions .btn {
		width: 100%;
	}
}

.home-enquire-cta .btn--primary {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-primary-dark);
}

.home-enquire-cta .btn--primary:hover,
.home-enquire-cta .btn--primary:focus {
	background-color: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
	color: var(--color-text-inverse);
}

.home-enquire-cta .btn--secondary,
.home-enquire-cta .btn--outline {
	border-color: var(--color-text-inverse);
	color: var(--color-text-inverse);
}

.home-enquire-cta .btn--secondary:hover,
.home-enquire-cta .btn--secondary:focus,
.home-enquire-cta .btn--outline:hover,
.home-enquire-cta .btn--outline:focus {
	background-color: var(--color-text-inverse);
	color: var(--color-primary-dark);
}

/* =========================================================
   37. HOMEPAGE FINAL CTA (.home-cta)
   ========================================================= */
.home-cta {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	min-height: 50vh;
	padding-block: var(--space-8);
}

@media (min-width: 768px) {
	.home-cta {
		min-height: 64vh;
	}
}

.home-cta__image {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 60%;
}

.home-cta::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background-color: rgba(10, 31, 61, 0.62);
}

.home-cta__overlay {
	position: relative;
	z-index: 2;
	max-width: 620px;
	padding-inline: var(--container-padding);
	color: var(--color-text-inverse);
}

.home-cta__heading {
	margin-bottom: var(--space-4);
	color: var(--color-text-inverse);
}

.home-cta__text {
	margin-bottom: var(--space-6);
	color: rgba(255, 255, 255, 0.85);
}

.home-cta .home-hero__actions {
	justify-content: center;
}

.home-cta .btn--primary {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-primary-dark);
}

.home-cta .btn--primary:hover,
.home-cta .btn--primary:focus {
	background-color: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
	color: var(--color-text-inverse);
}

.home-cta .btn--secondary {
	border-color: var(--color-text-inverse);
	color: var(--color-text-inverse);
}

.home-cta .btn--secondary:hover,
.home-cta .btn--secondary:focus {
	background-color: var(--color-text-inverse);
	color: var(--color-primary-dark);
}

/* =========================================================
   38. HOMEPAGE MOTION / INTERACTION SYSTEM
   =========================================================
   Progressive enhancement: [data-reveal] elements only animate once
   main.js confirms it's running (adds a "js" class to <html>) and
   IntersectionObserver marks them "is-visible". Without JavaScript,
   or before that class lands, content is fully visible by default.
   ========================================================= */
.js [data-reveal] {
	opacity: 0;
	transition: opacity 700ms cubic-bezier(0.16, 0.84, 0.44, 1), transform 700ms cubic-bezier(0.16, 0.84, 0.44, 1);
}

.js [data-reveal="up"] {
	transform: translateY(28px);
}

.js [data-reveal="left"] {
	transform: translateX(-32px);
}

.js [data-reveal="right"] {
	transform: translateX(32px);
}

.js [data-reveal="scale"] {
	transform: scale(0.94);
}

.js [data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

/* The timeline connecting line "draws" in; its items fade in staggered
   by the --i custom property set per <li> in the markup. */
.js .home-timeline__list[data-reveal="line"] {
	opacity: 1;
	transform: none;
}

.js .home-timeline__list[data-reveal="line"]::before {
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 900ms cubic-bezier(0.16, 0.84, 0.44, 1);
}

.js .home-timeline__list[data-reveal="line"].is-visible::before {
	transform: scaleY(1);
}

@media (min-width: 960px) {
	.js .home-timeline__list[data-reveal="line"]::before {
		transform: scaleX(0);
		transform-origin: left;
	}

	.js .home-timeline__list[data-reveal="line"].is-visible::before {
		transform: scaleX(1);
	}
}

.js .home-timeline__list[data-reveal="line"] .home-timeline__item {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 600ms ease, transform 600ms ease;
	transition-delay: calc(var(--i, 0) * 120ms);
}

.js .home-timeline__list[data-reveal="line"].is-visible .home-timeline__item {
	opacity: 1;
	transform: none;
}

/* Respect reduced motion: skip reveal animation entirely. */
@media (prefers-reduced-motion: reduce) {
	.js [data-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.js .home-timeline__list[data-reveal="line"]::before {
		transform: none !important;
		transition: none !important;
	}

	.page-hero__media img,
	.about-quote__media img,
	.home-story__media img,
	.home-story__media video {
		transition: none !important;
	}

	.product-detail__main-image img,
	.product-detail__thumb,
	.product-detail__add-to-cart .single_add_to_cart_button {
		transition: none !important;
		transform: none !important;
	}

	.product-accordion__item[open] > .product-accordion__content {
		animation: none !important;
	}
}

/* =========================================================
   39. GENERIC PAGE HERO (.page-hero)
   Reusable image+text hero for interior pages (About, Contact, …).
   ========================================================= */
.page-hero {
	background-color: var(--color-bg-alt);
	overflow: hidden;
}

.page-hero__container {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	gap: var(--space-7);
}

@media (min-width: 960px) {
	.page-hero__container {
		flex-direction: row;
		gap: var(--space-9);
	}

	.page-hero__media {
		flex: 1 1 48%;
	}

	.page-hero__content {
		flex: 1 1 48%;
	}
}

.page-hero__media {
	width: 100%;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
}

.page-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}

.page-hero__media:hover img,
.page-hero__media:focus-within img {
	transform: scale(1.05);
}

.page-hero__content {
	text-align: center;
}

@media (min-width: 960px) {
	.page-hero__content {
		text-align: left;
	}
}

.page-hero__eyebrow {
	display: inline-block;
	margin-bottom: var(--space-3);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
}

.page-hero__heading {
	margin-bottom: var(--space-4);
}

.page-hero__text {
	max-width: 52ch;
	margin-inline: auto;
	color: var(--color-text-muted);
	font-size: 1.0625rem;
}

@media (min-width: 960px) {
	.page-hero__content .page-hero__text {
		margin-inline: 0;
	}
}

/* =========================================================
   40. ABOUT PAGE (.about-channels, .about-quote, .about-team)
   ========================================================= */
.about-channels {
	background-color: var(--color-bg);
}

.about-channels__intro {
	max-width: 640px;
	margin-bottom: var(--space-7);
}

.about-channels__eyebrow {
	display: inline-block;
	margin-bottom: var(--space-3);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
}

.about-channels__heading {
	margin-bottom: 0;
}

.about-channels__list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
}

@media (min-width: 640px) {
	.about-channels__list {
		grid-template-columns: repeat(4, 1fr);
	}
}

.about-channels__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-5);
	background-color: var(--color-bg-alt);
	border-radius: var(--radius-sm);
	text-align: center;
	font-weight: 600;
	color: var(--color-primary-dark);
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.about-channels__item:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-sm);
}

.about-channels__item svg {
	color: var(--color-accent-dark);
}

.about-quote {
	background-color: var(--color-bg-alt);
}

.about-quote__container {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7);
	align-items: center;
}

@media (min-width: 960px) {
	.about-quote__container {
		grid-template-columns: 0.8fr 1.2fr;
		gap: var(--space-8);
	}
}

.about-quote__media {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
}

.about-quote__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms ease;
}

.about-quote__media:hover img {
	transform: scale(1.05);
}

.about-quote__content {
	margin: 0;
	padding-left: var(--space-6);
	border-left: 3px solid var(--color-accent);
	font-family: var(--font-secondary);
	font-style: italic;
	font-size: 1.25rem;
	line-height: 1.6;
	color: var(--color-primary-dark);
}

.about-quote__content p {
	margin: 0;
}

.about-team {
	background-color: var(--color-bg);
}

.about-team__intro {
	max-width: 640px;
	margin-bottom: var(--space-7);
}

.about-team__eyebrow {
	display: inline-block;
	margin-bottom: var(--space-3);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
}

.about-team__heading {
	margin-bottom: 0;
}

.about-team__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

@media (min-width: 640px) {
	.about-team__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

.about-team__item {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.about-team__item:hover {
	border-color: var(--color-primary-light);
	box-shadow: var(--shadow-sm);
}

.about-team__name {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-primary-dark);
}

.about-team__role {
	color: var(--color-text-muted);
	font-size: 0.9375rem;
}

/* =========================================================
   41. CONTACT PAGE (.contact-main, .contact-info, .contact-form)
   ========================================================= */
.contact-main {
	background-color: var(--color-bg);
}

.contact-main__container {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

@media (min-width: 960px) {
	.contact-main__container {
		grid-template-columns: 0.9fr 1.1fr;
		gap: var(--space-9);
	}
}

.contact-info__heading,
.contact-form__heading {
	margin-bottom: var(--space-5);
}

.contact-info__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
}

.contact-info__item {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	color: var(--color-text);
}

.contact-info__item svg {
	flex-shrink: 0;
	margin-top: 2px;
	color: var(--color-accent-dark);
}

.contact-info__item a {
	color: var(--color-primary);
	font-weight: 600;
}

.contact-info__item a:hover,
.contact-info__item a:focus {
	color: var(--color-accent-dark);
}

.contact-info__map {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

.contact-info__map iframe {
	width: 100%;
	height: 100%;
	border: 0;
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.contact-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-form__row {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.contact-form__row label {
	font-weight: 600;
	color: var(--color-text);
}

.contact-form__row input,
.contact-form__row select,
.contact-form__row textarea {
	width: 100%;
	min-height: 44px;
	padding: var(--space-3);
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: var(--font-primary);
	transition: border-color var(--transition-fast);
}

.contact-form__row textarea {
	min-height: 140px;
	resize: vertical;
}

.contact-form__row input:focus,
.contact-form__row select:focus,
.contact-form__row textarea:focus {
	border-color: var(--color-primary);
}

.contact-form .btn {
	align-self: flex-start;
	border: none;
	cursor: pointer;
}

.form-message {
	margin-bottom: var(--space-5);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-sm);
	font-weight: 600;
}

.form-message--success {
	background-color: rgba(47, 125, 82, 0.12);
	color: var(--color-success);
}

.form-message--error {
	background-color: rgba(179, 65, 58, 0.12);
	color: var(--color-error);
}

/* =========================================================
   42. ENQUIRY MODAL (#enquiry-modal)
   ========================================================= */
body.has-modal-open {
	overflow: hidden;
}

.enquiry-modal[hidden] {
	display: none;
}

.enquiry-modal {
	position: fixed;
	inset: 0;
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
}

.enquiry-modal__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(10, 31, 61, 0.72);
	backdrop-filter: blur(2px);
}

.enquiry-modal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: 960px;
	max-height: min(720px, 92vh);
	overflow-y: auto;
	background-color: var(--color-bg);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

@media (min-width: 860px) {
	.enquiry-modal__dialog {
		flex-direction: row;
		max-height: min(680px, 92vh);
		overflow: hidden;
	}
}

.enquiry-modal__close {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-pill);
	background-color: rgba(255, 255, 255, 0.92);
	color: var(--color-primary-dark);
	box-shadow: var(--shadow-sm);
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.enquiry-modal__close svg {
	width: 18px;
	height: 18px;
}

.enquiry-modal__close:hover,
.enquiry-modal__close:focus {
	background-color: var(--color-accent);
	color: var(--color-primary-dark);
}

/* --- Media pane (video) --- */
.enquiry-modal__media {
	position: relative;
	flex-shrink: 0;
	min-height: 220px;
	overflow: hidden;
	background-color: var(--color-primary-dark);
}

@media (min-width: 860px) {
	.enquiry-modal__media {
		width: 42%;
		min-height: 100%;
	}
}

.enquiry-modal__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.enquiry-modal__media-overlay {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 220px;
	justify-content: flex-end;
	padding: var(--space-6) var(--space-5) var(--space-5);
	background: linear-gradient(180deg, rgba(10, 31, 61, 0.1) 0%, rgba(10, 31, 61, 0.88) 78%);
	color: var(--color-text-inverse);
}

.enquiry-modal__badge {
	display: inline-block;
	align-self: flex-start;
	margin-bottom: var(--space-4);
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	background-color: var(--color-accent);
	color: var(--color-primary-dark);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.enquiry-modal__media-heading {
	margin-bottom: var(--space-2);
	color: var(--color-text-inverse);
	font-family: var(--font-secondary);
	font-size: 1.375rem;
}

.enquiry-modal__media-text {
	margin-bottom: var(--space-4);
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.9375rem;
}

.enquiry-modal__checklist {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.enquiry-modal__checklist li {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: 0.9375rem;
	font-weight: 600;
}

.enquiry-modal__checklist svg {
	flex-shrink: 0;
	color: var(--color-accent-light);
}

/* --- Form pane --- */
.enquiry-modal__form-col {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--space-6) var(--space-5) var(--space-5);
}

@media (min-width: 860px) {
	.enquiry-modal__form-col {
		padding: var(--space-7) var(--space-6) var(--space-6);
		overflow-y: auto;
	}
}

.enquiry-modal__eyebrow {
	display: block;
	margin-bottom: var(--space-2);
	color: var(--color-accent-dark);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.enquiry-modal__heading {
	margin-bottom: var(--space-4);
}

.enquiry-modal__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin-bottom: var(--space-5);
	padding: var(--space-1);
	background-color: var(--color-bg-muted);
	border-radius: var(--radius-pill);
}

.enquiry-modal__tab {
	flex: 1 1 auto;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-pill);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--color-text-muted);
	white-space: nowrap;
	text-align: center;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.enquiry-modal__tab.is-active {
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
}

.enquiry-modal__tab:hover,
.enquiry-modal__tab:focus-visible {
	color: var(--color-primary-dark);
}

.enquiry-modal__tab.is-active:hover,
.enquiry-modal__tab.is-active:focus-visible {
	color: var(--color-text-inverse);
}

.enquiry-modal__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.enquiry-modal__form-grid {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

@media (min-width: 520px) {
	.enquiry-modal__form-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-4);
	}

	.enquiry-modal__form-grid .contact-form__row--full {
		grid-column: 1 / -1;
	}
}

.enquiry-modal__form .contact-form__row[hidden] {
	display: none;
}

.enquiry-modal__optional {
	font-weight: 400;
	color: var(--color-text-muted);
}

.enquiry-modal .form-message {
	margin-bottom: 0;
}

@media (max-width: 479.98px) {
	.enquiry-modal {
		padding: 0;
	}

	.enquiry-modal__dialog {
		max-height: 100vh;
		height: 100%;
		border-radius: 0;
	}

	.enquiry-modal__media {
		min-height: 160px;
	}

	.enquiry-modal__media-overlay {
		min-height: 160px;
		padding: var(--space-5) var(--space-4) var(--space-4);
	}
}

/* =========================================================
   43. SHOP / PRODUCTS CATALOGUE (.shop-catalogue, .shop-card)
   ========================================================= */
/* No hero on the Products page (see woocommerce/archive-product.php) — the
   title bar, category nav, and grid start right under the header. */
.shop-catalogue {
	padding-block: var(--space-7) var(--space-9);
	background-color: var(--color-bg);
}

.shop-catalogue__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2) var(--space-4);
	margin-bottom: var(--space-6);
}

.shop-catalogue__title {
	margin: 0;
	font-size: clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem);
}

/* WooCommerce's own woocommerce_result_count() output (loop/result-count.php). */
.woocommerce-result-count {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 0.875rem;
}

/* Category nav — horizontally scrollable pills, same idiom as the Journal
   page's .blog-filters (section 19) but its own component: it needs an
   active state driven by is_shop()/is_product_category() (see
   saitrayaa_shop_category_nav() in inc/woocommerce.php) rather than always
   pointing at the current page. */
.shop-cat-nav {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--space-2);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	padding-bottom: var(--space-3);
	margin-bottom: var(--space-6);
	border-bottom: 1px solid var(--color-border);
}

@media (min-width: 768px) {
	.shop-cat-nav {
		flex-wrap: wrap;
		overflow-x: visible;
	}
}

.shop-cat-nav__item {
	flex: none;
}

.shop-cat-nav__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	white-space: nowrap;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text-muted);
	transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}

.shop-cat-nav__link:hover,
.shop-cat-nav__link:focus {
	border-color: var(--color-primary-light);
	color: var(--color-primary);
}

.shop-cat-nav__link.is-active {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-text-inverse);
}

.shop-cat-nav__count {
	opacity: 0.7;
	font-size: 0.75rem;
	font-weight: 700;
}

/* Toolbar: mobile "Filters" toggle + WooCommerce's own catalog ordering
   dropdown (woocommerce_catalog_ordering(), called directly from the
   template — see the "Shop catalogue toolbar" section of
   inc/woocommerce.php for why that needs no extra loop setup). */
.shop-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
}

.shop-filter-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-4);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-primary-dark);
	transition: border-color var(--transition-fast), color var(--transition-fast);
}

.shop-filter-toggle:hover,
.shop-filter-toggle:focus {
	border-color: var(--color-primary-light);
	color: var(--color-primary);
}

.shop-filter-toggle svg {
	width: 18px;
	height: 18px;
}

/* A filled dot marks the toggle when a price filter is currently applied,
   even while the panel itself is closed. */
.shop-filter-toggle.is-active {
	border-color: var(--color-accent);
	color: var(--color-accent-dark);
}

.shop-filter-toggle.is-active::after {
	content: '';
	width: 8px;
	height: 8px;
	border-radius: var(--radius-pill);
	background-color: var(--color-accent);
}

@media (min-width: 1024px) {
	.shop-filter-toggle {
		display: none;
	}
}

.woocommerce-ordering {
	display: flex;
}

.woocommerce-ordering .orderby {
	min-height: 44px;
	padding-inline: var(--space-3);
	border-radius: var(--radius-md);
	font-size: 0.875rem;
}

/* Two-column layout below the toolbar: price filter (sidebar on desktop,
   off-canvas drawer on mobile) + the product grid. */
.shop-layout {
	display: grid;
	grid-template-columns: 1fr;
	align-items: start;
	gap: var(--space-6);
}

@media (min-width: 1024px) {
	.shop-layout {
		grid-template-columns: 240px 1fr;
	}
}

.shop-filters-backdrop[hidden] {
	display: none;
}

.shop-filters-backdrop {
	position: fixed;
	inset: 0;
	z-index: 8000;
	background-color: rgba(10, 31, 61, 0.72);
}

@media (min-width: 1024px) {
	.shop-filters-backdrop {
		display: none !important;
	}
}

.shop-filters[hidden] {
	display: none;
}

.shop-filters {
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-5);
	box-shadow: var(--shadow-sm);
}

/* Mobile: an off-canvas drawer using the same fixed + [hidden] idiom as
   #enquiry-modal (section 42) rather than a slide-in transform, matching
   this theme's existing no-animation modal treatment. */
@media (max-width: 1023px) {
	.shop-filters {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		z-index: 8001;
		width: min(320px, 85vw);
		border: none;
		border-radius: 0;
		overflow-y: auto;
		box-shadow: var(--shadow-lg);
	}
}

/* Desktop: always a static sidebar column, regardless of the [hidden]
   attribute JS toggles for the mobile drawer (assets/js/main.js). */
@media (min-width: 1024px) {
	.shop-filters[hidden] {
		display: block;
	}
}

.shop-filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.shop-filters__title {
	margin: 0;
	font-size: 1.125rem;
}

.shop-filters__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--radius-pill);
	color: var(--color-text-muted);
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.shop-filters__close:hover,
.shop-filters__close:focus {
	background-color: var(--color-bg-muted);
	color: var(--color-primary);
}

.shop-filters__close svg {
	width: 18px;
	height: 18px;
}

@media (min-width: 1024px) {
	.shop-filters__close {
		display: none;
	}
}

.shop-price-filter__fieldset {
	margin: 0 0 var(--space-4);
	padding: 0;
	border: none;
}

.shop-price-filter__legend {
	padding: 0 0 var(--space-3);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.shop-price-filter__row {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.shop-price-filter__row input {
	width: 0;
	flex: 1 1 auto;
	min-height: 40px;
}

.shop-price-filter__sep {
	color: var(--color-text-muted);
}

.shop-price-filter__actions {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}

.shop-price-filter__submit {
	flex: 1 1 auto;
	text-align: center;
}

.shop-price-filter__clear {
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

.shop-price-filter__clear:hover,
.shop-price-filter__clear:focus {
	color: var(--color-accent-dark);
}

/* "No products found" state — same understated icon/heading/text pattern
   as .wishlist-empty (section 53) rather than a plain line of text. */
.shop-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	max-width: 44ch;
	margin-inline: auto;
	padding-block: var(--space-8);
	text-align: center;
	color: var(--color-text-muted);
}

.shop-empty__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin-bottom: var(--space-2);
	border-radius: 50%;
	background-color: var(--color-bg-alt);
	color: var(--color-accent-dark);
}

.shop-empty__icon svg {
	width: 28px;
	height: 28px;
}

.shop-empty__heading {
	margin: 0;
	font-size: 1.375rem;
}

.shop-empty__text {
	margin: 0 0 var(--space-2);
}

.shop-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

@media (min-width: 640px) {
	.shop-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.shop-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.shop-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	/* A faint resting shadow rather than the heavier, always-on tint this
	   used to share with the homepage tiles — quieter at rest, so the hover
	   state (below) is what actually reads as "lifted". */
	box-shadow: var(--shadow-sm);
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.shop-card:hover,
.shop-card:focus-within {
	border-color: var(--color-primary-light);
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
}

.shop-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	padding: var(--space-4);
	background-color: var(--color-bg-muted);
}

.shop-card__badge {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 1;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	background-color: var(--color-accent);
	color: var(--color-primary-dark);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.shop-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	transition: transform 500ms ease;
}

.shop-card:hover .shop-card__media img,
.shop-card:focus-within .shop-card__media img {
	transform: scale(1.05);
}

.shop-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-3);
	padding: var(--space-5);
}

.shop-card__name {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
}

.shop-card__name a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	color: var(--color-primary-dark);
}

.shop-card__name a:hover,
.shop-card__name a:focus {
	color: var(--color-accent-dark);
}

/* The subtle "view product" arrow riding alongside the name — the name
   itself is the link to the product page, so this replaces a separate
   "View Product" control (see woocommerce/archive-product.php). Reuses
   the theme's own 'arrow' icon rather than a one-off SVG, rotated to read
   as an outward/external link cue instead of the "next" arrow it is
   elsewhere (the Journal cards, etc). */
.shop-card__name a svg {
	flex: none;
	width: 16px;
	height: 16px;
	color: var(--color-text-muted);
	transform: rotate(-45deg);
	transition: color var(--transition-fast), transform var(--transition-fast);
}

.shop-card__name a:hover svg,
.shop-card__name a:focus svg {
	color: var(--color-accent-dark);
	transform: rotate(0deg);
}

.shop-card__excerpt {
	flex: 1;
	margin: 0;
	overflow: hidden;
	color: var(--color-text-muted);
	font-size: 0.9375rem;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/* Price + stock status share one row (see woocommerce/archive-product.php)
   instead of stacking as two separate full-width lines, so a scannable
   "₹price · availability" pairing reads the way the rest of the card's
   info-dense layout does. */
.shop-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
}

.shop-card__meta .shop-card__price {
	margin: 0;
}

.shop-card__price {
	margin: 0;
	font-weight: 700;
	color: var(--color-primary-dark);
}

/* Sale price markup (get_price_html()'s <del>/<ins> pair) has no styling of
   its own now that WooCommerce's core stylesheet is deliberately unloaded
   (see inc/woocommerce.php) — without this, the new price would inherit the
   browser's default <ins> underline, which reads as a typo rather than a
   sale. */
.shop-card__price del,
.product-detail__price del,
.woocommerce-variation-price del {
	font-weight: 400;
	color: var(--color-text-muted);
	opacity: 0.75;
}

.shop-card__price ins,
.product-detail__price ins,
.woocommerce-variation-price ins {
	margin-left: var(--space-2);
	text-decoration: none;
	color: inherit;
}

/* No price entered yet for this product (see woocommerce/archive-product.php
   and woocommerce/single-product.php) — a distinct, non-price-shaped label
   so it never reads as "free" or as a real amount. */
.shop-card__price--enquire,
.product-detail__price--enquire {
	font-weight: 600;
	font-style: italic;
	color: var(--color-text-muted);
}

/* =========================================================
   44. SINGLE PRODUCT PAGE (.product-detail, .product-accordion, .product-related)
   ========================================================= */
.product-detail__breadcrumb-bar {
	padding-block: var(--space-4);
	background-color: var(--color-bg-alt);
	border-bottom: 1px solid var(--color-border);
}

.product-detail__breadcrumb {
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

.product-detail__breadcrumb a {
	color: var(--color-text-muted);
}

.product-detail__breadcrumb a:hover,
.product-detail__breadcrumb a:focus {
	color: var(--color-accent-dark);
}

.product-detail__breadcrumb-sep {
	margin-inline: var(--space-1);
	color: var(--color-border-strong);
}

.product-detail {
	background-color: var(--color-bg);
}

.product-detail__container {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

@media (min-width: 960px) {
	.product-detail__container {
		grid-template-columns: 0.9fr 1.1fr;
		gap: var(--space-9);
		align-items: start;
	}

	/* Keep the product image in view as the (often much longer) info column
	   is read, via position:sticky alone — .product-detail__main used to
	   also get its own max-height + overflow-y:auto so it could scroll
	   independently of the page, which produced a second, visibly dated
	   scrollbar nested inside the page's own. Sticky positioning already
	   keeps the gallery in view without that: it flows with the page and
	   only "sticks" while its column is taller than the viewport, so the
	   browser's main scrollbar is the only one that ever appears here. */
	.product-detail__gallery {
		position: sticky;
		top: calc(var(--header-height) + var(--space-6));
	}
}

.product-detail__main-image {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	padding: var(--space-7);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	background-color: var(--color-bg-muted);
}

.product-detail__badge {
	top: var(--space-5);
	left: var(--space-5);
	font-size: 0.8125rem;
	padding: var(--space-2) var(--space-4);
}

.product-detail__main-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	transition: opacity 220ms ease;
}

/* Subtle cross-fade while a thumbnail swap is loading the new full-size
   image (assets/js/main.js's "Single WooCommerce product gallery"
   section) instead of an instant, jarring swap. */
.product-detail__main-image img.is-fading {
	opacity: 0.35;
}

.product-detail__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

.product-detail__thumb {
	width: 68px;
	height: 68px;
	padding: var(--space-1);
	overflow: hidden;
	background-color: var(--color-bg-muted);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
}

.product-detail__thumb:hover,
.product-detail__thumb:focus-visible {
	border-color: var(--color-primary-light);
	transform: translateY(-2px);
}

.product-detail__thumb.is-active {
	border-color: var(--color-accent);
	box-shadow: 0 0 0 1px var(--color-accent);
}

.product-detail__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	pointer-events: none;
}

/* Small "category" kicker above the product name — plain small-caps text
   rather than a bordered pill, so it reads as an editorial standfirst
   rather than a UI tag. Shared by the single product page, the Wishlist
   page's per-card version (page-wishlist.php), and the Shop grid's own
   .shop-card__category (section 43, woocommerce/archive-product.php) so
   all three listings/pages read as one consistent design language. */
.product-detail__kicker,
.wishlist-item__category,
.shop-card__category {
	margin: 0 0 var(--space-2);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent-dark);
}

.product-detail__kicker a,
.wishlist-item__category a,
.shop-card__category a {
	color: inherit;
}

.product-detail__kicker a:hover,
.product-detail__kicker a:focus,
.wishlist-item__category a:hover,
.wishlist-item__category a:focus,
.shop-card__category a:hover,
.shop-card__category a:focus {
	color: var(--color-primary);
}

.product-detail__title {
	max-width: 20ch;
	margin-bottom: var(--space-4);
	font-size: clamp(1.875rem, 1.5rem + 2vw, 3.25rem);
}

.product-detail__short-description {
	max-width: 60ch;
	margin-bottom: var(--space-6);
	color: var(--color-text-muted);
	font-size: 1.0625rem;
	line-height: 1.75;
}

.product-detail__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-5);
	margin-bottom: var(--space-3);
}

.product-detail__price {
	margin: 0;
	font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
	font-weight: 700;
	color: var(--color-primary-dark);
}

/* Calm, minimal stock-availability line (saitrayaa_stock_line() in
   inc/woocommerce.php) — a small colour-coded dot plus WooCommerce's own
   availability text, not a filled badge. Shared by this meta row and the
   Wishlist grid's .shop-card__meta (page-wishlist.php). */
.stock-line {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text-muted);
}

.stock-line__dot {
	width: 7px;
	height: 7px;
	flex: none;
	border-radius: 50%;
	background-color: var(--color-success);
}

.stock-line--out-of-stock {
	color: var(--color-error);
}

.stock-line--out-of-stock .stock-line__dot {
	background-color: var(--color-error);
}

.stock-line--available-on-backorder {
	color: var(--color-accent-dark);
}

.stock-line--available-on-backorder .stock-line__dot {
	background-color: var(--color-accent);
}

.product-detail__sku {
	margin: 0 0 var(--space-6);
	color: var(--color-text-muted);
	font-size: 0.8125rem;
}

/* Accordion of per-product aspects (Description + whichever WooCommerce
   attributes the admin has filled in, e.g. Key Ingredients, Composition,
   Pack Sizes, Recommended Dose), sitting below the purchase action so the
   above-the-fold column stays focused on name/price/availability/buy.
   Built on native <details>/<summary> so it works — open state included —
   with no JavaScript. */
.product-accordion {
	margin-top: var(--space-7);
	margin-bottom: var(--space-6);
	border-top: 1px solid var(--color-border);
}

.product-accordion__item {
	border-bottom: 1px solid var(--color-border);
}

.product-accordion__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding-block: var(--space-5);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--color-primary-dark);
	cursor: pointer;
	list-style: none;
	transition: color var(--transition-fast);
}

.product-accordion__summary:hover,
.product-accordion__summary:focus-visible {
	color: var(--color-accent-dark);
}

.product-accordion__summary::-webkit-details-marker {
	display: none;
}

.product-accordion__summary svg {
	flex-shrink: 0;
	color: var(--color-accent-dark);
	transition: transform var(--transition-fast);
}

.product-accordion__item[open] > .product-accordion__summary svg {
	transform: rotate(180deg);
}

.product-accordion__content {
	padding-bottom: var(--space-4);
	color: var(--color-text-muted);
}

/* A subtle one-shot fade+settle each time a section opens — native
   <details> has no way to animate the open/closed toggle itself (the
   content's display:none/block flip is instant either way), but the
   content that appears can still ease in rather than just snapping into
   place. Reduced-motion users get this switched off in section 38. */
@keyframes saitrayaa-accordion-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.product-accordion__item[open] > .product-accordion__content {
	animation: saitrayaa-accordion-in 220ms ease;
}

.product-accordion__content :first-child {
	margin-top: 0;
}

.product-accordion__content :last-child {
	margin-bottom: 0;
}

/* Rich-text body of a Saitrayaa product-information section (see
   inc/product-info.php): lists, paragraphs, and admin-entered HTML tables
   all inherit the accordion's readable body typography. */
.product-accordion__rich-text {
	font-size: 1rem;
	line-height: 1.7;
}

.product-accordion__rich-text ul,
.product-accordion__rich-text ol {
	padding-left: 1.25em;
}

.product-accordion__rich-text table {
	width: 100%;
	border-collapse: collapse;
	margin-block: var(--space-3);
}

.product-accordion__rich-text th,
.product-accordion__rich-text td {
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border);
	text-align: left;
	vertical-align: top;
}

.product-accordion__rich-text + .product-spec-table {
	margin-top: var(--space-4);
}

/* Structured key/value rows for a section (e.g. Specifications). A
   definition list rather than a literal <table> so it can restack to a
   single column on narrow screens without ever needing horizontal scroll. */
.product-spec-table {
	margin: 0;
	border-top: 1px solid var(--color-border);
}

.product-spec-table__row {
	display: grid;
	grid-template-columns: minmax(120px, 200px) 1fr;
	gap: var(--space-4);
	padding-block: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.product-spec-table__row dt {
	margin: 0;
	color: var(--color-text-muted);
	font-weight: 600;
}

.product-spec-table__row dd {
	margin: 0;
	word-break: break-word;
}

@media (max-width: 480px) {
	.product-spec-table__row {
		grid-template-columns: 1fr;
		gap: var(--space-1);
	}
}

/* The enquiry-only alternative to .product-detail__add-to-cart (section
   49) — never both at once, see woocommerce/single-product.php — so it
   gets the same hairline "here's the action" divider above it. */
.product-detail__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}

/* =========================================================
   45. RELATED PRODUCTS (.product-related)
   ========================================================= */
.product-related {
	background-color: var(--color-bg-alt);
}

.product-related__heading {
	margin-bottom: var(--space-6);
	text-align: center;
}

/* =========================================================
   46. HEADER ACCOUNT & CART LINKS
   ========================================================= */
.header-icon-link {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	color: var(--color-primary-dark);
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.header-icon-link:hover,
.header-icon-link:focus {
	background-color: var(--color-bg-alt);
	color: var(--color-primary);
}

.header-cart-count,
.header-wishlist-count {
	position: absolute;
	top: 2px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-pill);
	background-color: var(--color-accent);
	color: var(--color-primary-dark);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
}

.header-cart-count[data-count="0"],
.header-wishlist-count[data-count="0"] {
	display: none;
}

/* =========================================================
   47. WOOCOMMERCE FORMS, BUTTONS & NOTICES (GLOBAL)
   Shared styling for every core WooCommerce form/button/notice — cart,
   my account, login/register, checkout notices — so theme-wide it all
   matches the site's existing .btn / .contact-form__row conventions
   without needing to fork every WooCommerce template.
   ========================================================= */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
.woocommerce-page input.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 44px;
	padding: var(--space-3) var(--space-5);
	border: 2px solid var(--color-primary);
	border-radius: var(--radius-sm);
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
	font-family: var(--font-primary);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.woocommerce a.button:hover,
.woocommerce a.button:focus,
.woocommerce button.button:hover,
.woocommerce button.button:focus,
.woocommerce input.button:hover,
.woocommerce input.button:focus,
.woocommerce-page a.button:hover,
.woocommerce-page a.button:focus,
.woocommerce-page button.button:hover,
.woocommerce-page button.button:focus,
.woocommerce-page input.button:hover,
.woocommerce-page input.button:focus {
	background-color: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
	color: var(--color-text-inverse);
}

.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce input.button:active {
	transform: translateY(1px);
}

.woocommerce a.button.loading,
.woocommerce button.button.loading {
	opacity: 0.6;
	pointer-events: none;
}

.woocommerce a.added_to_cart {
	display: inline-flex;
	align-items: center;
	margin-left: var(--space-3);
	font-weight: 600;
	color: var(--color-primary);
}

.woocommerce a.added_to_cart:hover,
.woocommerce a.added_to_cart:focus {
	color: var(--color-accent-dark);
}

.woocommerce form .form-row {
	margin-bottom: var(--space-4);
}

.woocommerce form .form-row label {
	display: block;
	margin-bottom: var(--space-2);
	font-weight: 600;
	color: var(--color-text);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce table.shop_table td .input-text {
	width: 100%;
	min-height: 44px;
	padding: var(--space-3);
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	font-family: var(--font-primary);
	transition: border-color var(--transition-fast);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--color-primary);
}

/* Two-column field pairs (e.g. First/Last name, City/Postcode) use CSS
   Grid rather than the classic float+clearfix technique. WooCommerce's own
   form-edit-address.php loops through fields with no ".clear" element
   between rows at all, so the floats-and-manually-placed-.clear approach
   silently overlapped whatever field came after a First/Last pair —
   Grid needs no clearing markup, so it can't have that failure mode. */
.woocommerce-EditAccountForm,
.woocommerce-address-fields__field-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 var(--space-5);
}

.woocommerce-EditAccountForm > *,
.woocommerce-address-fields__field-wrapper > * {
	grid-column: 1 / -1;
}

@media (min-width: 640px) {
	.woocommerce-EditAccountForm,
	.woocommerce-address-fields__field-wrapper {
		grid-template-columns: repeat(2, 1fr);
	}

	.woocommerce-EditAccountForm > .form-row-first,
	.woocommerce-EditAccountForm > .form-row-last,
	.woocommerce-address-fields__field-wrapper > .form-row-first,
	.woocommerce-address-fields__field-wrapper > .form-row-last {
		grid-column: auto;
	}
}

.woocommerce-EditAccountForm .clear {
	display: none;
}

.woocommerce form .form-row .required {
	color: var(--color-error);
	text-decoration: none;
}

.woocommerce div.quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	overflow: hidden;
	transition: border-color var(--transition-fast);
}

.woocommerce div.quantity:focus-within {
	border-color: var(--color-primary);
}

.woocommerce div.quantity .qty {
	width: 56px;
	min-height: 44px;
	padding: var(--space-2);
	text-align: center;
	background-color: var(--color-bg);
	border: none;
	border-radius: 0;
	-moz-appearance: textfield;
}

.woocommerce div.quantity .qty:focus {
	outline: none;
}

.woocommerce div.quantity .qty::-webkit-inner-spin-button,
.woocommerce div.quantity .qty::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* The +/- buttons (cart page only — see the "Cart quantity stepper" block
   in assets/js/main.js) are injected around the .qty input at runtime; on
   the single-product add-to-cart form div.quantity has no such buttons and
   this just renders as a plain bordered number field, unchanged. */
.woocommerce div.quantity .qty-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	min-height: 44px;
	padding: 0;
	background-color: var(--color-bg-alt);
	border: none;
	color: var(--color-primary-dark);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.woocommerce div.quantity .qty-btn:hover,
.woocommerce div.quantity .qty-btn:focus-visible {
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
}

.woocommerce div.quantity .qty-btn--minus {
	border-right: 1px solid var(--color-border);
}

.woocommerce div.quantity .qty-btn--plus {
	border-left: 1px solid var(--color-border);
}

.woocommerce .stock {
	display: block;
	margin-bottom: var(--space-3);
	color: var(--color-text-muted);
	font-size: 0.9375rem;
}

.woocommerce .stock.out-of-stock {
	color: var(--color-error);
	font-weight: 600;
}

.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noticegroup {
	margin: 0 0 var(--space-5);
	padding: var(--space-4);
	border-radius: var(--radius-sm);
	font-weight: 600;
}

/* WooCommerce's own notice strings often mix a bare <a class="button"> with
   plain text and nothing else (no wrapping <span>/<p>) — sometimes button
   first (e.g. "Confirm email address" on the Orders tab), sometimes text
   first ("No order has been made yet. Browse products"). Flex handles both
   orders correctly: text runs become anonymous flex items automatically,
   so the button and the text get a consistent gap and wrap onto their own
   line together instead of the text butting up against the button. */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
}

.woocommerce-message {
	background-color: rgba(47, 125, 82, 0.12);
	color: var(--color-success);
}

.woocommerce-error {
	background-color: rgba(179, 65, 58, 0.12);
	color: var(--color-error);
}

.woocommerce-error li {
	list-style: none;
}

.woocommerce-info {
	background-color: var(--color-bg-alt);
	color: var(--color-text);
}

/* Checkout is the one screen where WooCommerce's own stylesheet is still
   loaded (see saitrayaa_woocommerce_enqueue_styles() in
   inc/woocommerce.php). It draws a decorative icon-font glyph on every
   notice via ::before, absolutely positioned at left:1.5em and sized for
   WC's own 3.5em left padding — with this theme's smaller padding above it
   lands on top of the notice text as a stray blue box (e.g. over "Have a
   coupon?"). The theme's notices carry no icon, so drop it. "body" only
   raises specificity above WC's .woocommerce-info::before regardless of
   which stylesheet loads last. */
body .woocommerce-info::before,
body .woocommerce-message::before,
body .woocommerce-error::before {
	content: none;
	display: none;
}

/* =========================================================
   48. SHOP CARD ADD-TO-CART (extends section 43, .shop-card)
   ========================================================= */
.shop-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-2);
}

.shop-card__actions .button {
	flex: 1 1 auto;
	white-space: nowrap;
}

/* =========================================================
   49. SINGLE PRODUCT ADD TO CART (extends section 44, .product-detail)
   ========================================================= */
.product-detail__add-to-cart {
	margin-bottom: var(--space-5);
	padding-top: var(--space-5);
	border-top: 1px solid var(--color-border);
}

.product-detail__add-to-cart form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
}

.product-detail__add-to-cart .quantity {
	min-height: 48px;
	border-radius: var(--radius-md);
}

.product-detail__add-to-cart .qty {
	min-height: 48px;
}

.product-detail__add-to-cart .single_add_to_cart_button {
	min-width: 200px;
	min-height: 48px;
	transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.product-detail__add-to-cart .single_add_to_cart_button:not(.buy-now-button):hover,
.product-detail__add-to-cart .single_add_to_cart_button:not(.buy-now-button):focus {
	box-shadow: var(--shadow-md);
	transform: translateY(-1px);
}

/* Buy Now: same size/shape as the primary Add to Cart button (both share
   .single_add_to_cart_button, including WooCommerce's own variation-JS
   disabled state), styled as an outline secondary so the two never read as
   equally weighted — see saitrayaa_buy_now_button() in inc/woocommerce.php. */
.product-detail__add-to-cart .single_add_to_cart_button.buy-now-button {
	background-color: transparent;
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.product-detail__add-to-cart .single_add_to_cart_button.buy-now-button:hover,
.product-detail__add-to-cart .single_add_to_cart_button.buy-now-button:focus {
	background-color: var(--color-bg-alt);
	border-color: var(--color-primary-dark);
	color: var(--color-primary-dark);
}

.product-detail__add-to-cart table.variations {
	width: 100%;
	margin-bottom: var(--space-4);
	border-collapse: collapse;
}

.product-detail__add-to-cart table.variations td {
	padding: var(--space-2) 0;
	vertical-align: middle;
}

.product-detail__add-to-cart table.variations label {
	display: inline-block;
	margin-right: var(--space-3);
	font-weight: 600;
}

.product-detail__add-to-cart table.variations select {
	min-height: 44px;
	min-width: 200px;
	padding: var(--space-2) var(--space-3);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.product-detail__add-to-cart .reset_variations {
	margin-left: var(--space-3);
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

.woocommerce-variation-price {
	margin-bottom: var(--space-3);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-primary-dark);
}

.woocommerce-variation-add-to-cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	width: 100%;
}

/* =========================================================
   50. (Cart / My Account now reuse .page-hero — section 39 — for their
   title band, so no separate header component is needed here.)
   ========================================================= */

/* =========================================================
   51. CART PAGE (.cart-page)
   WooCommerce's own cart.php markup (table.cart + .cart-collaterals) is
   used as-is; this restyles it to match the Saitrayaa design language and
   reimplements the responsive row-to-card stacking that WooCommerce's own
   (deliberately unloaded — see inc/woocommerce.php) stylesheet normally
   provides.
   ========================================================= */
.cart-page__container {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

/* The [woocommerce_cart] shortcode wraps its whole output in a
   <div class="woocommerce"> and, whenever it prints notices, a further
   <div class="woocommerce-notices-wrapper"> around those — one or two
   levels deeper than the grid above expects. display:contents on both
   makes their real children (table.cart's form, .cart-collaterals, any
   notices, cart-empty's messages) participate in the grid directly.
   Note: a ">" combinator would NOT reach through these — child combinators
   match actual DOM structure, not the display:contents render tree — so
   every rule below deliberately uses a descendant selector instead. */
.cart-page__container .woocommerce,
.cart-page__container .woocommerce-notices-wrapper {
	display: contents;
}

@media (min-width: 960px) {
	.cart-page__container {
		grid-template-columns: 1.6fr 1fr;
		/* column-gap/row-gap split rather than a single gap: the wide
		   gutter (space-9) is for the cart-form/cart-totals columns sitting
		   side by side — reused as the ROW gap too (the "gap" shorthand
		   sets both), it left a large dead gap above .cart-related (section
		   51a below), which spans both columns on its own row and only
		   needs a normal section gap there. */
		column-gap: var(--space-9);
		row-gap: var(--space-6);
		align-items: start;
	}

	.cart-page__container .woocommerce-message,
	.cart-page__container .woocommerce-error,
	.cart-page__container .woocommerce-info {
		grid-column: 1 / -1;
	}

	.cart-page__container .woocommerce-cart-form {
		grid-column: 1;
	}

	/* The sticky element is the inner .cart_totals card, NOT this grid
	   cell: a sticky grid item is only constrained by the grid container
	   (not its own row), so a sticky .cart-collaterals kept sliding down
	   past its row and painted over the full-width .cart-related row
	   below. Stretching the cell to its row height gives the sticky
	   card a containing block that ends where the row does. */
	.cart-page__container .cart-collaterals {
		grid-column: 2;
		align-self: stretch;
	}

	.cart-page__container .cart-collaterals .cart_totals {
		position: sticky;
		top: calc(var(--header-height) + var(--space-6));
	}
}

/* Empty cart (cart-empty.php renders none of cart.php's markup at all, so
   this is the entire content of the page — see wc-cart-functions.php's
   WC_Shortcode_Cart::output(), which picks cart-empty.php over cart.php
   whenever WC()->cart->is_empty()): a centered, generously-spaced column
   rather than a couple of bare lines lost in the wide two-column grid track
   .cart-page__container otherwise uses for the cart table + totals
   sidebar. Centering the icon/message/button as grid items
   (grid-column:1/-1 + margin-inline:auto) turned out to depend on exactly
   how a browser resolves auto-margins on a display:contents-flattened grid
   item — inconsistent in practice — so this instead switches the whole
   container to plain block layout for this one state, via the
   body.woocommerce-cart-is-empty class (see
   saitrayaa_cart_page_body_class() in inc/woocommerce.php). No grid, no
   auto-margin-on-a-flattened-item ambiguity: it's just a centered column
   of ordinary block boxes. */
body.woocommerce-cart-is-empty .cart-page__container {
	display: block;
	max-width: 480px;
	margin-inline: auto;
	text-align: center;
}

.cart-page__container .cart-empty-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	margin: var(--space-8) auto var(--space-5);
	border-radius: var(--radius-pill);
	background-color: rgba(200, 147, 42, 0.12);
	color: var(--color-accent-dark);
}

.cart-page__container .cart-empty-icon svg {
	width: 32px;
	height: 32px;
}

.cart-page__container .cart-empty {
	margin-bottom: var(--space-5);
	font-size: 1.125rem;
}

.cart-page__container .return-to-shop {
	margin-bottom: var(--space-8);
}

/* The form itself (not the <table>) is the card — border-radius/overflow
   on a <table> with border-collapse is unreliable across browsers, and the
   form is a plain, always-present wrapper around it. Per-cell grid lines
   (the old look) read as a spreadsheet; a single card with row dividers
   reads as a product list instead. */
.woocommerce-cart-form {
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

/* Not laid out as a real HTML table anymore at any width — table, tbody,
   and tr below are all display:block, and each cart_item row is its own
   small grid (see tr.woocommerce-cart-form__cart-item below) rather than
   a shared table-wide column layout. table.cart's real markup (thead,
   colspan, cellspacing) stays as WooCommerce renders it — semantics for
   assistive tech and any no-CSS fallback are unaffected — this only
   changes how it paints. */
.woocommerce-cart-form table.cart {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-cart-form table.cart thead {
	display: none;
}

.woocommerce-cart-form table.cart,
.woocommerce-cart-form table.cart tbody,
.woocommerce-cart-form table.cart tr {
	display: block;
	width: 100%;
}

/* saitrayaa_cart_items_heading() in inc/woocommerce.php — replaces the
   table's own column-header row (hidden above) with a "Your Cart · N
   items" label, reusing that header row's old shaded-band treatment. */
.cart-items-heading {
	margin: 0;
	padding: var(--space-4);
	background-color: var(--color-bg-alt);
	border-bottom: 1px solid var(--color-border);
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-primary-dark);
}

/* Each cart line item as a small card-row grid — product image spanning
   the full row height in column 1, name/quantity stacked in the wide
   column 2+3, and the unit-price/line-total pair on their own row below,
   left/right aligned within that same width. One layout at every viewport
   width, rather than a real table down to 700px and a separate stacked
   layout below it. */
.woocommerce-cart-form table.cart tr.woocommerce-cart-form__cart-item {
	position: relative;
	display: grid;
	grid-template-columns: 72px 1fr auto;
	grid-template-areas:
		"thumb name  name"
		"thumb qty   qty"
		"thumb price subtotal";
	column-gap: var(--space-4);
	row-gap: var(--space-2);
	padding: var(--space-5) var(--space-4);
	border-bottom: 1px solid var(--color-border);
}

.woocommerce-cart-form table.cart td {
	display: block;
	padding: 0;
	border: none;
	text-align: left;
}

.woocommerce-cart-form table.cart td.product-thumbnail {
	grid-area: thumb;
}

.woocommerce-cart-form table.cart td.product-thumbnail a {
	display: block;
	width: 72px;
}

/* WooCommerce prints its own width/height HTML attributes on this <img>
   (from the image size registered for get_image()) — some browsers derive
   an implicit aspect-ratio from those and can render a collapsed sliver
   instead of the intended square once the surrounding cart-table cascade
   (several other WooCommerce-table selectors share specificity with this
   one) gets involved. Pin every box dimension explicitly, including on the
   <a> above, so nothing upstream can leave the box unconstrained. */
.woocommerce-cart-form table.cart td.product-thumbnail img {
	display: block !important;
	width: 72px !important;
	height: 72px !important;
	max-width: 72px !important;
	min-width: 72px;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	background-color: var(--color-bg-muted);
	border-radius: var(--radius-sm);
	padding: var(--space-2);
	box-sizing: border-box;
}

.woocommerce-cart-form table.cart td.product-name {
	grid-area: name;
	/* Room for the remove icon (top-right of the row, position:absolute —
	   see td.product-remove below) so a long product name can't run under it. */
	padding-right: var(--space-8);
}

.woocommerce-cart-form table.cart td.product-name a {
	font-weight: 600;
	color: var(--color-primary-dark);
	overflow-wrap: break-word;
}

/* saitrayaa_cart_item_sku() in inc/woocommerce.php — WooCommerce shows this
   on the single product page but never in the cart by default. */
.cart-item-sku {
	margin: var(--space-1) 0 0;
	font-size: 0.8125rem;
	color: var(--color-text-muted);
}

/* Variable-product line items: the attribute name/value pair(s) WooCommerce
   prints under the product name (wc_get_formatted_cart_item_data(), see
   woocommerce/cart/cart-item-data.php in WC core). Rendered as an inline
   "Label: Value" run rather than a definition list so it reads as a single
   line of item detail instead of a second, differently-styled heading. */
.woocommerce-cart-form table.cart td.product-name dl.variation {
	margin: var(--space-2) 0 0;
	font-size: 0.875rem;
	color: var(--color-text-muted);
	overflow-wrap: break-word;
}

.woocommerce-cart-form table.cart td.product-name dl.variation dt,
.woocommerce-cart-form table.cart td.product-name dl.variation dd,
.woocommerce-cart-form table.cart td.product-name dl.variation dd p {
	display: inline;
	margin: 0;
}

.woocommerce-cart-form table.cart td.product-name dl.variation dt {
	font-weight: 600;
}

.woocommerce-cart-form table.cart td.product-name dl.variation dt::after {
	content: ": ";
}

.woocommerce-cart-form table.cart td.product-name dl.variation dd:not(:last-child)::after {
	content: ", ";
}

.woocommerce-cart-form table.cart td.product-quantity {
	grid-area: qty;
}

.woocommerce-cart-form table.cart td.product-price {
	grid-area: price;
}

.woocommerce-cart-form table.cart td.product-subtotal {
	grid-area: subtotal;
	text-align: right;
	white-space: nowrap;
}

.woocommerce-cart-form table.cart td.product-price,
.woocommerce-cart-form table.cart td.product-subtotal {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--color-primary-dark);
}

/* saitrayaa_cart_item_price_label() / saitrayaa_cart_item_subtotal_label()
   in inc/woocommerce.php prepend "Unit Price:" / "Total:" — a plainer,
   translatable substitute for the meaning the (now-hidden) column headers
   used to carry. */
.cart-item-price-label {
	margin-right: var(--space-1);
	font-weight: 400;
	font-size: 0.8125rem;
	color: var(--color-text-muted);
}

/* saitrayaa_cart_item_sale_price_html() in inc/woocommerce.php adds the
   struck-through regular price here for on-sale items. */
.woocommerce-cart-form table.cart td.product-price del {
	display: block;
	margin-bottom: var(--space-1);
	margin-left: calc(var(--space-1) + 3.5em); /* roughly under the price value, past the "Unit Price:" label */
	font-weight: 400;
	font-size: 0.875rem;
	color: var(--color-text-muted);
	opacity: 0.75;
}

.woocommerce-cart-form table.cart td.product-price ins {
	text-decoration: none;
	color: inherit;
}

/* saitrayaa_cart_item_remove_icon() in inc/woocommerce.php swaps WooCommerce's
   plain "×" for a real icon; taken out of the row's grid flow entirely
   (position:absolute) and pinned to the top-right corner, matching the
   reference's per-row remove-icon placement. The link itself — href,
   nonce, data-product_id/sku, aria-label — stays 100% native; assets/js/
   main.js's quantity stepper still finds and clicks this exact element
   when decreasing quantity below 1, unaffected by this restyle. */
.woocommerce-cart-form table.cart td.product-remove {
	position: absolute;
	top: var(--space-4);
	right: var(--space-4);
}

.woocommerce-cart-form table.cart td.product-remove a.remove {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-pill);
	color: var(--color-text-muted);
	transition: background-color var(--transition-fast), color var(--transition-fast);
}

.woocommerce-cart-form table.cart td.product-remove a.remove:hover,
.woocommerce-cart-form table.cart td.product-remove a.remove:focus-visible {
	background-color: var(--color-bg-alt);
	color: var(--color-primary-dark);
}

.woocommerce-cart-form table.cart td.actions {
	padding: var(--space-4);
	background-color: var(--color-bg-alt);
}

/* Specificity note: the shared field-width rule above
   (".woocommerce table.shop_table td .input-text", used for order-pay /
   other in-table fields) outranks a plain ".coupon .input-text" — 3 classes
   + 2 types beats 3 classes + 0 types — and was silently winning here,
   forcing the coupon field to width:100%. Match its specificity structure
   exactly (2 types + more classes) so this one wins instead. */
.woocommerce-cart-form table.cart td.actions .coupon .input-text {
	width: auto;
	min-width: 180px;
	flex: 1 1 180px;
}

.woocommerce-cart-form .coupon {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	align-items: center;
	max-width: 100%;
}

/* "Apply coupon" and "Update cart" are secondary, in-page actions — giving
   them the same solid navy treatment as "Proceed to Checkout" made every
   button on the page compete for attention and read as a stack of
   unrelated form controls rather than one cart. Outline styling (their
   .woocommerce button.button border already suits this) demotes them
   visually while keeping the same hit target and focus styling. */
.woocommerce-cart-form .coupon button.button,
.woocommerce-cart-form table.cart td.actions > button.button {
	background-color: transparent;
	color: var(--color-primary);
}

.woocommerce-cart-form .coupon button.button:hover,
.woocommerce-cart-form .coupon button.button:focus,
.woocommerce-cart-form table.cart td.actions > button.button:hover,
.woocommerce-cart-form table.cart td.actions > button.button:focus {
	background-color: var(--color-bg);
	border-color: var(--color-primary-dark);
	color: var(--color-primary-dark);
}

@media (min-width: 700px) {
	/* display:flex directly on a <td> — especially one with colspan="6",
	   like this row — is unreliable for width: some engines stop treating
	   it as part of the table's column layout once its display is
	   overridden, and size it to its own content instead of the full
	   spanned width. That was silently collapsing this row to a few
	   hundred pixels, which is why "Coupon code" / "Apply coupon" /
	   "Update cart" were each wrapping onto their own line even after the
	   coupon-field width fix above. Floats don't have that ambiguity — the
	   <td> itself keeps its normal table-cell display (so its width is
	   resolved purely, and correctly, by the table algorithm), and these
	   two groups just float to either side of that guaranteed-correct box. */
	.woocommerce-cart-form table.cart td.actions::after {
		content: "";
		display: table;
		clear: both;
	}

	.woocommerce-cart-form .coupon {
		float: left;
	}

	.woocommerce-cart-form table.cart td.actions > button.button {
		float: right;
		margin-left: var(--space-4);
	}

	.cart-continue-shopping {
		float: right;
		height: 44px;
	}
}

/* The coupon/actions row (not a cart_item row — see the card-row grid
   above, scoped to tr.woocommerce-cart-form__cart-item only) still stacks
   "Coupon code"/"Apply coupon" and "Update cart" below 700px, same as
   before this section's redesign. */
@media (max-width: 699.98px) {
	.woocommerce-cart-form table.cart td.actions {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.woocommerce-cart-form table.cart td.actions > button.button {
		margin-left: 0;
	}
}

.cart-continue-shopping {
	display: inline-flex;
	align-items: center;
	font-weight: 600;
	color: var(--color-primary);
	text-decoration: none;
}

.cart-continue-shopping:hover,
.cart-continue-shopping:focus-visible {
	color: var(--color-primary-dark);
	text-decoration: underline;
}

.cart-collaterals {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.cart_totals {
	padding: var(--space-5);
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.cart_totals h2 {
	margin-bottom: var(--space-5);
	font-size: 1.25rem;
}

/* cart-totals.php's <table class="shop_table"> has no explicit widths on
   its cells, so table-layout:auto is free to size the label column to
   whatever its widest word needs ("Subtotal" vs "Shipment") rather than a
   deliberate ratio, and — as found while redesigning the cart items table —
   table-layout:fixed plus border-collapse both carry their own cross-browser
   width/border-conflict quirks once a row's content varies in height the
   way the multi-line shipping row does here. Restyling the real table as a
   CSS grid sidesteps both: display:contents on <tbody>/<tr> promotes every
   <th>/<td> to a direct child of the grid, so a single
   grid-template-columns controls the exact label/value ratio everywhere,
   each th+td pair becomes its own row sized to its own content (so the
   3-line shipping row doesn't stretch "Subtotal" or "Total"), and every
   border is a plain per-element border-bottom with no collapse-conflict
   resolution to second-guess. Markup, hooks, and functionality (shipping
   calculation, coupons, taxes, checkout) are all still 100% native
   WooCommerce — this only changes how the existing table is laid out. */
.cart_totals table.shop_table {
	display: grid;
	grid-template-columns: 34% 1fr;
	width: 100%;
	/* The last row (Total) deliberately has no border-bottom of its own —
	   see .order-total below — so without this the table just stops with
	   no closing edge before the "Proceed to Checkout" button. This closes
	   it off properly. */
	border-bottom: 1px solid var(--color-border);
}

.cart_totals table.shop_table tbody,
.cart_totals table.shop_table tr {
	display: contents;
}

.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
	padding: var(--space-4) 0;
	border-bottom: 1px solid var(--color-border);
	text-align: left;
	overflow-wrap: break-word;
}

.cart_totals table.shop_table th {
	padding-left: var(--space-2);
	padding-right: var(--space-4);
	font-weight: 600;
	color: var(--color-text-muted);
}

.cart_totals table.shop_table td {
	padding-left: var(--space-4);
	padding-right: var(--space-2);
}

/* Shipping method text can run to several lines ("Free shipping" / "Shipping
   to <address>." / a "Change address" link) — WooCommerce wraps each in its
   own <p>, which otherwise inherit the theme's default paragraph spacing and
   drift apart instead of reading as one compact block. */
.cart_totals table.shop_table td > p,
.cart_totals table.shop_table td > ul {
	margin: 0 0 var(--space-2);
}

.cart_totals table.shop_table td > p:last-child,
.cart_totals table.shop_table td > ul:last-child {
	margin-bottom: 0;
}

/* Multiple available shipping methods render as a list of radio options
   instead of the single fixed "Free shipping" line — space them so each
   option is a clearly separate, tappable row rather than a run-on block. */
.cart_totals .woocommerce-shipping-methods li {
	margin-bottom: var(--space-2);
}

.cart_totals .woocommerce-shipping-methods li:last-child {
	margin-bottom: 0;
}

.cart_totals .woocommerce-shipping-methods input[type="radio"] {
	width: auto;
	min-height: 0;
	margin-right: var(--space-2);
}

.cart_totals table.shop_table tr:last-child th,
.cart_totals table.shop_table tr:last-child td {
	border-bottom: none;
}

/* The link that reveals the shipping-address form inline in this row — a
   plain-colour <a> with no underline (the site-wide default, see the base
   "a" rule) reads as regular text sitting inside already-muted shipping
   copy. An explicit underline is the one unambiguous "this is a link"
   signal that doesn't depend on surrounding colour contrast. */
.cart_totals .shipping-calculator-button,
.cart_totals .woocommerce-remove-coupon {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cart_totals .shipping-calculator-button:hover,
.cart_totals .shipping-calculator-button:focus-visible,
.cart_totals .woocommerce-remove-coupon:hover,
.cart_totals .woocommerce-remove-coupon:focus-visible {
	color: var(--color-accent-dark);
}

.cart_totals .woocommerce-remove-coupon {
	margin-left: var(--space-2);
	font-size: 0.875rem;
	color: var(--color-error);
}

/* Total keeps the same padding-block as every other row for an even
   rhythm, and is set apart instead by weight, size, and a stronger border —
   a deliberate "final line of a receipt" treatment, not incidental extra
   spacing. */
.cart_totals .order-total th,
.cart_totals .order-total td {
	border-top: 2px solid var(--color-border-strong);
	border-bottom: none;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-primary-dark);
}

.cart_totals .wc-proceed-to-checkout {
	margin-top: var(--space-6);
}

.cart_totals .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	width: 100%;
}

/* "You May Also Like" (saitrayaa_cart_related_products_section() in
   inc/woocommerce.php) — a full-width horizontal carousel below the cart +
   totals grid. grid-column:1/-1 pulls it out of .cart-page__container's
   own two-column track (this section is a direct grid child, since
   .woocommerce there is display:contents) and padding-block:0 cancels the
   generic "section { padding-block: ... }" rule (section 4) meant for
   full-bleed page sections, not this in-page sub-component — left
   inherited, it stacks on top of the grid's own row-gap.
   A sidebar list and a wide shop-card grid were both tried first: the
   sidebar kept it visible but couldn't fit more than a couple of compact
   rows, and the grid's tall multi-row cards pushed the section below the
   fold. A single scrollable row stays compact regardless of how many
   products are in it. */
.cart-page__container .cart-related {
	grid-column: 1 / -1;
	padding-block: 0;
}

.cart-related__heading {
	margin-bottom: var(--space-5);
	font-size: 1.375rem;
}

.cart-related__carousel {
	position: relative;
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

/* overflow-x:auto + scroll-snap gives touch/trackpad swipe for free — the
   prev/next buttons (assets/js/main.js) just scroll this by one slide's
   width, they don't reimplement scrolling itself. The scrollbar is hidden
   since the prev/next buttons are the primary control and a native
   scrollbar directly under a card row reads as a layout glitch more than
   a control. */
.cart-related__track {
	display: flex;
	gap: var(--space-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.cart-related__track::-webkit-scrollbar {
	display: none;
}

.cart-related__slide {
	flex: 0 0 auto;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	width: 168px;
	padding: var(--space-4);
	background-color: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.1);
}

.cart-related__slide-media {
	display: block;
	aspect-ratio: 1 / 1;
	padding: var(--space-3);
	background-color: var(--color-bg-muted);
	border-radius: var(--radius-sm);
	box-sizing: border-box;
}

.cart-related__slide-media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.cart-related__slide-name {
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--color-primary-dark);
	overflow-wrap: break-word;
}

.cart-related__slide-name:hover,
.cart-related__slide-name:focus {
	color: var(--color-accent-dark);
}

.cart-related__slide-price {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-text-muted);
}

/* No price entered yet for this product — same treatment as
   .shop-card__price--enquire (section 43): a distinct, non-price-shaped
   label so it never reads as "free" or as a real amount. */
.cart-related__slide-price--enquire {
	font-style: italic;
}

.cart-related__slide-cta {
	margin-top: auto;
	padding: var(--space-2) var(--space-3);
	font-size: 0.8125rem;
	text-align: center;
}

.cart-related__nav {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-pill);
	background-color: var(--color-bg);
	color: var(--color-primary-dark);
	transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.cart-related__nav:hover,
.cart-related__nav:focus-visible {
	background-color: var(--color-bg-alt);
	border-color: var(--color-primary-light);
}

/* Reuses the 'chevron' icon (default: points down) rather than adding two
   more entries to inc/template-tags.php's icon registry for what's the
   same shape rotated. */
.cart-related__nav--prev svg {
	transform: rotate(90deg);
}

.cart-related__nav--next svg {
	transform: rotate(-90deg);
}

/* =========================================================
   52. MY ACCOUNT PAGE (.account-page)
   A premium customer portal: a persistent sidebar "account card" (identity
   greeting + icon nav + a brand photo, woocommerce/myaccount/navigation.php)
   beside the content column — no page-hero/greeting band above it (see
   page.php); dashboard.php's own .account-intro supplies the Overview
   screen's welcome heading instead.
   ========================================================= */
.account-page__container {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

@media (min-width: 780px) {
	.account-page__container {
		grid-template-columns: 300px 1fr;
		align-items: start;
		gap: var(--space-8);
	}
}

/* The [woocommerce_my_account] shortcode (login/register form included)
   wraps its whole output in a <div class="woocommerce"> and, whenever it
   prints notices, a further <div class="woocommerce-notices-wrapper">
   around those (even the "log out?" or lost-password confirmations) — one
   or two levels deeper than the grid above expects. display:contents on
   both makes their real children (the sidebar/content, or #customer_login)
   participate in the grid directly. */
.account-page__container .woocommerce,
.account-page__container .woocommerce-notices-wrapper {
	display: contents;
}

/* Logged-out visitors get only the login/register form — no sidebar, no
   content column — so it must span the full width instead of being
   auto-placed into just the narrow 300px sidebar track. */
.account-page__container .woocommerce-message,
.account-page__container .woocommerce-error,
.account-page__container .woocommerce-info,
.account-page__container #customer_login,
.account-page__container form.woocommerce-form-login,
.account-page__container form.woocommerce-ResetPassword,
.account-page__container .woocommerce-lost-password-confirmation {
	grid-column: 1 / -1;
}

#customer_login,
form.woocommerce-form-login,
form.woocommerce-ResetPassword {
	max-width: 900px;
	margin-inline: auto;
}

/* Sidebar account card (woocommerce/myaccount/navigation.php) — greeting,
   icon nav, and a brand photo inside one bordered card, sticky under the
   header on desktop so it's reachable while a long content column (e.g.
   Orders) scrolls. Stacks as a normal block above the content on mobile. */
.account-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

@media (min-width: 780px) {
	.account-sidebar {
		position: sticky;
		top: calc(var(--header-height) + var(--space-6));
	}
}

.account-sidebar__heading {
	margin-bottom: var(--space-1);
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-primary-dark);
}

.account-sidebar__avatar,
.account-intro__avatar {
	display: block;
	width: 72px;
	height: 72px;
	overflow: hidden;
	border: 3px solid rgba(200, 147, 42, 0.3);
	border-radius: var(--radius-pill);
	background-color: var(--color-bg-alt);
}

.account-sidebar__avatar {
	transition: transform var(--transition-fast), border-color var(--transition-fast);
}

.account-sidebar__avatar:hover,
.account-sidebar__avatar:focus-visible {
	border-color: var(--color-accent);
	transform: translateY(-2px);
}

.account-sidebar__avatar-image,
.account-intro__avatar-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.account-sidebar__eyebrow {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.woocommerce-MyAccount-navigation-link a {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font-weight: 500;
	color: var(--color-text-muted);
	transition: color var(--transition-fast), border-color var(--transition-fast), background-color var(--transition-fast);
}

.woocommerce-MyAccount-navigation-link a svg {
	flex-shrink: 0;
}

.woocommerce-MyAccount-navigation-link a:hover,
.woocommerce-MyAccount-navigation-link a:focus {
	color: var(--color-primary-dark);
}

.woocommerce-MyAccount-navigation-link.is-active a {
	border-color: var(--color-accent);
	background-color: rgba(200, 147, 42, 0.08);
	color: var(--color-primary-dark);
	font-weight: 700;
}

.woocommerce-MyAccount-navigation-link--customer-logout {
	margin-top: var(--space-2);
	padding-top: var(--space-3);
	border-top: 1px solid var(--color-border);
}

.account-nav-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 var(--space-1);
	margin-left: auto;
	border-radius: var(--radius-pill);
	background-color: rgba(200, 147, 42, 0.15);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--color-accent-dark);
}

.account-sidebar__media {
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-md);
	overflow: hidden;
}

.account-sidebar__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.woocommerce-MyAccount-content:focus {
	outline: none;
}

/* Brief dim while the AJAX tab-switch in main.js is in flight (see "My
   Account instant tab-switching"). Native <a href> navigation still works
   identically without JS — this is a purely visual loading cue. */
.woocommerce-MyAccount-navigation.is-loading,
.woocommerce-MyAccount-content.is-loading {
	opacity: 0.5;
	transition: opacity var(--transition-fast);
}

/* ---------------------------------------------------------
   Account Overview (woocommerce/myaccount/dashboard.php)
   The Overview screen's own content: a large welcome heading, four
   at-a-glance modules, and a two-column split of a visual Recent Orders
   list against a Saved Products wishlist preview — replaces the old
   "Hello X" greeting entirely.
   --------------------------------------------------------- */
.account-overview {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
}

.account-intro__heading {
	margin-bottom: var(--space-2);
	font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem);
}

.account-intro {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: var(--space-4);
	align-items: center;
}

.account-intro__avatar {
	grid-row: span 2;
}

.account-intro__text {
	margin: 0;
	max-width: 60ch;
	color: var(--color-text-muted);
}

@media (max-width: 479.98px) {
	.account-intro {
		grid-template-columns: 56px 1fr;
		column-gap: var(--space-3);
	}

	.account-intro__avatar {
		width: 56px;
		height: 56px;
	}
}

/* Overview modules — one uniform icon-left card style for all four; Orders
   and Wishlist carry a real count, Addresses a real saved-address count,
   Account details the customer's real account email. */
.account-modules {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

@media (min-width: 560px) {
	.account-modules {
		grid-template-columns: repeat(2, 1fr);
	}
}

.account-module {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	color: var(--color-text);
	transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.account-module:hover,
.account-module:focus-visible {
	border-color: var(--color-primary-light);
	transform: translateY(-2px);
}

.account-module__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: var(--radius-sm);
	background-color: rgba(200, 147, 42, 0.12);
	color: var(--color-accent-dark);
}

.account-module__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	min-width: 0;
}

.account-module__label {
	font-weight: 700;
	color: var(--color-primary-dark);
}

.account-module__desc {
	overflow: hidden;
	font-size: 0.875rem;
	color: var(--color-text-muted);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Recent Orders / Saved Products — side-by-side panels at desktop. */
.account-panels {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

@media (min-width: 960px) {
	.account-panels {
		grid-template-columns: repeat(2, 1fr);
	}
}

.account-panel {
	padding: var(--space-6);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}

.account-panel__title {
	margin-bottom: var(--space-5);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-border);
	font-size: 1.25rem;
}

/* Recent Orders — an open, divided list rather than boxed cards, so it
   reads as one continuous editorial block instead of another stack of UI
   components. */
.account-orders-list {
	display: flex;
	flex-direction: column;
}

.account-order {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-4);
	padding: var(--space-5) 0;
	border-bottom: 1px solid var(--color-border);
}

.account-order:first-child {
	padding-top: 0;
}

.account-order:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.account-order__thumbs {
	display: flex;
	flex: none;
}

.account-order__thumb,
.account-order__thumb-more {
	width: 48px;
	height: 48px;
	border-radius: var(--radius-sm);
	overflow: hidden;
	border: 2px solid var(--color-bg);
	background-color: var(--color-bg-alt);
}

.account-order__thumb:not(:first-child),
.account-order__thumb-more:not(:first-child) {
	margin-left: -14px;
}

.account-order__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.account-order__thumb-more {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--color-text-muted);
}

.account-order__info {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	flex: 1 1 140px;
	min-width: 0;
}

.account-order__number {
	font-weight: 700;
	color: var(--color-primary-dark);
}

.account-order__date {
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

.account-order__total {
	flex: none;
	font-weight: 700;
	color: var(--color-primary-dark);
}

.account-order__link {
	flex: 0 0 100%;
	order: 1;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-1);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-primary);
}

.account-order__link:hover,
.account-order__link:focus {
	color: var(--color-accent-dark);
}

.account-order__link svg {
	width: 16px;
	height: 16px;
}

@media (min-width: 640px) {
	.account-order__total {
		margin-left: auto;
	}

	.account-order__link {
		flex: none;
		order: 0;
		margin-top: 0;
	}
}

/* Shared empty state — Recent Orders / Saved Products. */
.account-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	padding: var(--space-6) 0;
}

.account-empty__heading {
	margin: 0;
	font-weight: 700;
	color: var(--color-primary-dark);
}

.account-empty__text {
	margin: 0 0 var(--space-2);
	color: var(--color-text-muted);
}

.account-empty__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: 600;
	color: var(--color-primary);
}

.account-empty__cta:hover,
.account-empty__cta:focus {
	color: var(--color-accent-dark);
}

.account-empty__cta svg {
	width: 16px;
	height: 16px;
}

/* Saved Products — a compact 2-column grid of wishlist items with working
   Add to Cart buttons (mirrors the same purchasable/not-purchasable branch
   saitrayaa_wishlist_render_grid() in inc/wishlist.php uses on the full
   Wishlist page), sized for the narrower panel column rather than the
   Wishlist page's own full-width .shop-card grid. */
.account-saved-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-5);
}

.account-saved-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}

.account-saved-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background-color: var(--color-bg-alt);
}

.account-saved-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--transition-base);
}

.account-saved-card__media:hover img,
.account-saved-card__media:focus-visible img {
	transform: scale(1.05);
}

.account-saved-card__name {
	display: -webkit-box;
	overflow: hidden;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--color-primary-dark);
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.account-saved-card__cta {
	width: 100%;
	min-height: auto;
	padding: var(--space-2) var(--space-3);
	justify-content: center;
	font-size: 0.8125rem;
}

/* Account details form (First/Last name, Display name, Email, Password) */
.woocommerce-EditAccountForm fieldset {
	margin: var(--space-6) 0 var(--space-2);
	padding: 0;
	border: none;
}

.woocommerce-EditAccountForm legend {
	width: 100%;
	padding: 0;
	margin-bottom: var(--space-4);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--color-primary-dark);
}

.woocommerce-EditAccountForm span[id$="_description"] {
	display: block;
	margin-top: var(--space-2);
	font-size: 0.875rem;
	font-style: normal;
	color: var(--color-text-muted);
}

.saitrayaa-profile-avatar {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	margin: var(--space-7) 0 var(--space-2);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-border);
}

.saitrayaa-profile-avatar__heading h2 {
	margin-bottom: var(--space-2);
	font-size: 1.0625rem;
	color: var(--color-primary-dark);
}

.saitrayaa-profile-avatar__heading p,
.saitrayaa-profile-avatar__hint {
	margin: 0;
	font-size: 0.875rem;
	color: var(--color-text-muted);
}

.saitrayaa-profile-avatar__controls {
	display: flex;
	align-items: center;
	gap: var(--space-5);
}

.saitrayaa-profile-avatar__preview {
	flex: 0 0 112px;
	width: 112px;
	height: 112px;
	overflow: hidden;
	border: 3px solid rgba(200, 147, 42, 0.3);
	border-radius: var(--radius-pill);
	background: var(--color-bg-alt);
}

.saitrayaa-profile-avatar__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.saitrayaa-profile-avatar__actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	min-width: 0;
}

.saitrayaa-profile-avatar__upload {
	cursor: pointer;
}

.saitrayaa-profile-avatar__actions input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

.saitrayaa-profile-avatar__error {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: #a12626;
}

.saitrayaa-profile-avatar__buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin-top: var(--space-2);
}

.saitrayaa-profile-avatar__save {
	min-height: 40px;
}

.saitrayaa-profile-avatar__remove {
	padding: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--color-primary);
	cursor: pointer;
}

.saitrayaa-profile-avatar__remove:hover,
.saitrayaa-profile-avatar__remove:focus {
	color: var(--color-accent-dark);
}

@media (max-width: 479.98px) {
	.saitrayaa-profile-avatar__controls {
		align-items: flex-start;
		flex-direction: column;
	}

	.saitrayaa-profile-avatar__preview {
		width: 96px;
		height: 96px;
		flex-basis: 96px;
	}

	.saitrayaa-profile-avatar__actions,
	.saitrayaa-profile-avatar__upload,
	.saitrayaa-profile-avatar__save {
		width: 100%;
	}
}

table.shop_table {
	width: 100%;
	border-collapse: collapse;
}

table.shop_table th,
table.shop_table td {
	padding: var(--space-3);
	border: 1px solid var(--color-border);
	text-align: left;
}

table.shop_table th {
	font-weight: 700;
	color: var(--color-primary-dark);
	background-color: var(--color-bg-alt);
}

/* The Actions cell (View / Pay / Cancel) can hold more than one button;
   without a flex wrapper they just sit as bare inline-flex elements with
   inconsistent browser whitespace between them and the same oversized
   sizing as a hero CTA button, which reads as misaligned inside a compact
   table row. Give the cell its own gap and size its buttons down instead. */
.woocommerce-orders-table__cell-order-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
}

.woocommerce-orders-table__cell-order-actions .button {
	min-height: 36px;
	padding: var(--space-2) var(--space-4);
	font-size: 0.875rem;
}

/* The Orders list can have 5 columns (Order, Date, Status, Total, Actions)
   — too many for a phone screen. WooCommerce already renders each cell
   with a data-title attribute for exactly this case (the same pattern the
   Cart page's table.cart uses — see section 51), so reuse that: hide the
   header row and turn each row into a stack of labelled "field: value"
   lines instead of a horizontally-scrolling table. */
@media (max-width: 699.98px) {
	.woocommerce-orders-table thead {
		display: none;
	}

	.woocommerce-orders-table,
	.woocommerce-orders-table tbody,
	.woocommerce-orders-table tr,
	.woocommerce-orders-table td,
	.woocommerce-orders-table th {
		display: block;
		width: 100%;
	}

	.woocommerce-orders-table tr {
		padding: var(--space-4) 0;
		border-bottom: 1px solid var(--color-border);
	}

	.woocommerce-orders-table td,
	.woocommerce-orders-table th {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-3);
		padding: var(--space-1) 0;
		border: none;
		text-align: right;
	}

	.woocommerce-orders-table td[data-title]::before,
	.woocommerce-orders-table th[data-title]::before {
		content: attr(data-title);
		font-weight: 600;
		color: var(--color-text-muted);
		text-align: left;
		margin-right: auto;
	}

	.woocommerce-orders-table__cell-order-actions {
		flex-wrap: wrap;
		justify-content: flex-end;
	}
}

mark.order-status {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	background-color: var(--color-bg-muted);
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--color-primary-dark);
}

mark.order-status.status-completed {
	background-color: rgba(47, 125, 82, 0.12);
	color: var(--color-success);
}

mark.order-status.status-processing {
	background-color: rgba(23, 59, 110, 0.1);
	color: var(--color-primary);
}

mark.order-status.status-on-hold,
mark.order-status.status-pending {
	background-color: rgba(200, 147, 42, 0.15);
	color: var(--color-accent-dark);
}

mark.order-status.status-cancelled,
mark.order-status.status-failed,
mark.order-status.status-refunded {
	background-color: rgba(179, 65, 58, 0.12);
	color: var(--color-error);
}

.woocommerce-Addresses {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}

@media (min-width: 640px) {
	.woocommerce-Addresses {
		grid-template-columns: repeat(2, 1fr);
	}
}

.woocommerce-Address {
	padding: var(--space-5);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition-fast);
}

.woocommerce-Address:hover,
.woocommerce-Address:focus-within {
	border-color: var(--color-primary-light);
}

.woocommerce-Address-title {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
}

/* WooCommerce core renders this as an <h2> (see templates/myaccount/my-address.php) */
.woocommerce-Address-title h2 {
	margin-bottom: 0;
	font-size: 1.125rem;
}

.woocommerce-Address-title .edit {
	font-size: 0.875rem;
	font-weight: 600;
	white-space: nowrap;
}

.woocommerce-Address address {
	font-style: normal;
	line-height: 1.7;
	color: var(--color-text-muted);
}

#customer_login.u-columns.col2-set {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

@media (min-width: 780px) {
	#customer_login.u-columns.col2-set {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--space-7);
	}

	/* A vertical rule between "Login" and "Register" reads as one
	   deliberately-split panel instead of two unrelated forms that happen
	   to sit side by side. */
	#customer_login.u-columns.col2-set .u-column2 {
		padding-left: var(--space-5);
		border-left: 1px solid var(--color-border);
	}
}

#customer_login h2 {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-5);
}

#customer_login h2 svg {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	padding: var(--space-2);
	border-radius: var(--radius-pill);
	background-color: rgba(200, 147, 42, 0.12);
	color: var(--color-accent-dark);
}

#customer_login input.input-text {
	transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

#customer_login input.input-text:focus {
	box-shadow: 0 0 0 3px rgba(23, 59, 110, 0.12);
}

.woocommerce-form-login__rememberme {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
	font-weight: 400;
}

.woocommerce-form-login__rememberme input[type="checkbox"] {
	width: auto;
	min-height: auto;
}

.woocommerce-LostPassword {
	margin-top: var(--space-3);
	font-size: 0.9375rem;
}

/* =========================================================
   53. WISHLIST (.wishlist-toggle, .wishlist-page)
   The heart toggle button shared by shop cards, the single product page,
   and the dedicated Wishlist page's own items (see
   saitrayaa_wishlist_button() in inc/wishlist.php), plus the wishlist
   page itself. The add/remove label swap and heart fill are pure CSS,
   driven off the "is-active" class assets/js/main.js's Wishlist section
   toggles after each AJAX response — no JS text manipulation needed.
   ========================================================= */
.wishlist-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	border: none;
	background: none;
	padding: 0;
	color: var(--color-primary-dark);
	font-family: var(--font-primary);
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
	transition: color var(--transition-fast);
}

.wishlist-toggle svg {
	fill: none;
	stroke: currentColor;
	transition: fill var(--transition-fast), stroke var(--transition-fast);
}

.wishlist-toggle:hover,
.wishlist-toggle:focus {
	color: var(--color-accent-dark);
}

.wishlist-toggle.is-active {
	color: var(--color-accent-dark);
}

.wishlist-toggle.is-active svg {
	fill: var(--color-accent);
	stroke: var(--color-accent-dark);
}

.wishlist-toggle:disabled {
	opacity: 0.6;
	cursor: default;
}

.wishlist-toggle__label-remove {
	display: none;
}

.wishlist-toggle.is-active .wishlist-toggle__label-add {
	display: none;
}

.wishlist-toggle.is-active .wishlist-toggle__label-remove {
	display: inline;
}

/* Shop card / related-products variant: a circular button pinned to the
   top-right corner of the product image, mirroring .shop-card__badge's
   top-left placement (see section 43, .shop-card is position:relative). */
.wishlist-toggle--card {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	z-index: 2;
	width: 36px;
	height: 36px;
	justify-content: center;
	border-radius: var(--radius-pill);
	background-color: rgba(255, 255, 255, 0.92);
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}

.wishlist-toggle--card:hover,
.wishlist-toggle--card:focus {
	background-color: var(--color-bg);
}

/* Single product page variant: the same circular icon-only treatment as
   .wishlist-toggle--card above, pinned to the top-right corner of the
   main product image — mirroring .product-detail__badge's top-left sale
   badge (section 44, .product-detail__main-image is position:relative)
   — instead of sitting as a separate labelled control next to Add to
   Cart, so it never competes with that primary action. */
.wishlist-toggle--image {
	position: absolute;
	top: var(--space-5);
	right: var(--space-5);
	z-index: 2;
	width: 40px;
	height: 40px;
	justify-content: center;
	border-radius: var(--radius-pill);
	background-color: rgba(255, 255, 255, 0.92);
	box-shadow: 0 2px 6px rgba(15, 23, 42, 0.18);
}

.wishlist-toggle--image:hover,
.wishlist-toggle--image:focus {
	background-color: var(--color-bg);
}

/* Wishlist page's own grid variant: a full labelled outline button sitting
   in .shop-card__actions next to Add to Cart (see
   saitrayaa_wishlist_render_grid(), inc/wishlist.php) rather than the small
   circular icon-only overlay above — every card here is already saved, so
   there's no "add" state to show, just a clear "Remove". Overrides
   .wishlist-toggle's icon-link styling (border:none/padding:0/etc.) with a
   proper button treatment matching .btn's sizing. */
.wishlist-toggle--remove-btn {
	flex: 1 1 auto;
	justify-content: center;
	min-height: 44px;
	padding: var(--space-3) var(--space-5);
	border: 2px solid var(--color-accent);
	border-radius: var(--radius-sm);
	background-color: transparent;
	color: var(--color-accent-dark);
	font-size: 1rem;
	white-space: nowrap;
}

.wishlist-toggle--remove-btn:hover,
.wishlist-toggle--remove-btn:focus {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-primary-dark);
}

.wishlist-toggle--remove-btn svg {
	display: none;
}

/* Dedicated Wishlist page (page-wishlist.php) — reuses .shop-card /
   .shop-grid styling (section 43) for its items via the .wishlist-item /
   .wishlist-grid classes below, so it matches the Products page and
   Related Products grid look without duplicating that CSS. Its remove
   control is the labelled .wishlist-toggle--remove-btn button below
   (in .shop-card__actions, alongside Add to Cart) rather than the small
   on-image heart overlay used elsewhere. */

/* Full-bleed photo banner — a direct sibling of <section class="wishlist-
   page">, outside .container, so it runs edge-to-edge right under the
   header instead of sitting inside the page's max-width column. Title +
   subtitle sit top-left over the image; a gradient scrim darkens the top
   and bottom edges so the white text stays legible over any photo. Kept
   short so the saved-items grid below is reachable with little scrolling. */
/* Tighter than the generic `section { padding-block: var(--space-7) }`
   (section 4) — the hero above already provides the visual separation from
   the header, so the full 3rem top gap would just push the grid down
   further with nothing to show for it. */
.wishlist-page {
	padding-top: var(--space-5);
}

.wishlist-hero {
	position: relative;
	overflow: hidden;
}

.wishlist-hero__image {
	display: block;
	width: 100%;
	height: clamp(200px, 25vw, 290px);
	object-fit: cover;
	object-position: 50% 30%;
}

.wishlist-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(10, 31, 61, 0.72) 0%,
		rgba(10, 31, 61, 0.28) 55%,
		rgba(10, 31, 61, 0.15) 100%
	);
}

.wishlist-hero__content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-5) var(--container-padding);
}

.wishlist-hero__title {
	margin: 0;
	color: #fff;
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
	text-shadow: 0 1px 4px rgba(10, 31, 61, 0.45);
}

.wishlist-hero__subtitle {
	margin: 0;
	color: rgba(255, 255, 255, 0.88);
	font-size: 0.9375rem;
	text-shadow: 0 1px 3px rgba(10, 31, 61, 0.45);
}

/* Summary line ("Wishlist Formulas | N Items | View Cart") overlaid in the
   hero itself, under the title/subtitle, rather than as plain text below the
   image — a light/gold variant of the same label · count · action grouping
   used elsewhere, readable against the scrim. */
.wishlist-hero__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
}

.wishlist-hero__bar-label {
	color: #fff;
	text-shadow: 0 1px 3px rgba(10, 31, 61, 0.45);
}

.wishlist-hero__bar-sep {
	color: rgba(255, 255, 255, 0.45);
}

.wishlist-hero__bar-count {
	color: rgba(255, 255, 255, 0.92);
	font-weight: 500;
}

.wishlist-hero__bar-cart {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color var(--transition-fast);
}

.wishlist-hero__bar-cart:hover,
.wishlist-hero__bar-cart:focus {
	color: #fff;
}

.wishlist-page__meta {
	margin: 0 0 var(--space-5);
	color: var(--color-text-muted);
	font-size: 0.875rem;
}

/* Named grid sections ("Ready to Buy" / "Price on Enquiry" — split by
   is_purchasable(), see saitrayaa_wishlist_render_grid() in
   inc/wishlist.php) rather than one flat grid. Each is itself a <section>
   for heading semantics, so it needs its own padding-block: 0 to cancel the
   generic `section { padding-block: var(--space-7) }` rule (section 4) —
   otherwise every section here would add an extra 2 x 3rem of dead space on
   top of its own margin-bottom below. */
.wishlist-section {
	padding-block: 0;
	margin-bottom: var(--space-8);
}

.wishlist-section:last-of-type {
	margin-bottom: var(--space-6);
}

.wishlist-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2) var(--space-4);
	margin-bottom: var(--space-5);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--color-border);
}

.wishlist-section__title {
	margin: 0;
	font-size: 1.375rem;
}

.wishlist-section__count {
	margin: 0;
	color: var(--color-text-muted);
	font-size: 0.875rem;
}

.wishlist-page__continue-row {
	margin-top: var(--space-2);
	text-align: center;
}

.wishlist-page__continue {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: 600;
	color: var(--color-primary);
}

/* Reuses the theme's 'arrow' icon (elsewhere a forward/"next" cue) rotated
   to point back — this link returns to browsing the catalogue, the
   opposite direction from e.g. a shop card's "view product" arrow. */
.wishlist-page__continue svg {
	width: 18px;
	height: 18px;
	transform: rotate(180deg);
}

.wishlist-page__continue:hover,
.wishlist-page__continue:focus {
	color: var(--color-accent-dark);
}

.wishlist-empty[hidden] {
	display: none;
}

/* No icon here — just heading/text/CTA, directly under the .wishlist-hero
   banner above. */
.wishlist-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	max-width: 44ch;
	margin-inline: auto;
	padding: var(--space-6) var(--space-4);
	text-align: center;
	color: var(--color-text-muted);
}

.wishlist-empty__heading {
	margin: 0;
	font-size: 1.375rem;
}

.wishlist-empty__text {
	margin: 0 0 var(--space-2);
}

.wishlist-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
}

@media (min-width: 640px) {
	.wishlist-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.wishlist-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.wishlist-item {
	transition: opacity var(--transition-base), transform var(--transition-base);
}

.wishlist-item.is-removing {
	opacity: 0;
	transform: scale(0.96);
}

/* =========================================================
   54. COMMUNITIES — SHARED
   Pet Lover Communities (inc/communities.php, archive-pet_community.php,
   single-pet_community.php). Deliberately its own cream + forest-green
   palette (--comm-* tokens below) rather than the site's navy/gold system
   — a warmer, more editorial "pet wellness community" look, scoped
   entirely to .communities-page / .community-* selectors so nothing
   elsewhere on the site is affected.
   ========================================================= */
:root {
	--comm-bg: #f8f3e7;
	--comm-bg-card: #ffffff;
	--comm-green: #1e3a34;
	--comm-green-dark: #12211d;
	--comm-green-light: #2f5148;
	--comm-text: #23302b;
	--comm-text-muted: #6c7a73;
	--comm-border: #e8e0cd;
	--comm-radius-lg: 24px;
	--comm-radius-md: 16px;
	--comm-radius-sm: 10px;
	--comm-font-script: 'Caveat', cursive;
}

.communities-page,
.community-page {
	background-color: var(--comm-bg);
	color: var(--comm-text);
}

.communities-page h1,
.communities-page h2,
.communities-page h3,
.community-page h1,
.community-page h2,
.community-page h3 {
	font-family: var(--font-secondary);
	color: var(--comm-green);
}

.communities-page__container,
.community-page__container {
	padding-block: var(--space-6);
}

/* The sitewide "section { padding-block: 3rem, 6rem from 768px }" rule
   (assets/css/main.css, LAYOUT UTILITIES) is sized for the homepage's one
   big section per screen. The single community page's own <section>
   elements (.community-hero, .community-picks, .community-feed) set their
   own deliberate margin for a tighter rhythm but never touch padding-block
   themselves, so without this reset they were silently inheriting that
   ~96px-top-and-bottom sitewide default on top of their own spacing —
   which is what was reading as oversized gaps. Scoped to .community-page
   only (the single page), not .communities-page (the landing page).
   */
.community-page section {
	padding-block: 0;
}

.btn--community-primary {
	background-color: var(--comm-green);
	border-color: var(--comm-green);
	border-radius: var(--radius-pill);
	color: #fff;
}

.btn--community-primary:hover,
.btn--community-primary:focus {
	background-color: var(--comm-green-dark);
	border-color: var(--comm-green-dark);
	color: #fff;
}

.btn--community-primary.is-joined,
.community-hero__join.is-joined {
	background-color: var(--comm-green-light);
	border-color: var(--comm-green-light);
}

/* Ghost variant — sits beside .btn--community-primary wherever a page
   offers two CTAs of unequal weight (e.g. "Be Part of the Community" +
   "Create a PawReel" on the communities-banner). White-on-scrim by
   default since every current use sits over a dark photo scrim. */
.btn--community-secondary {
	background-color: transparent;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: var(--radius-pill);
	color: #fff;
}

.btn--community-secondary:hover,
.btn--community-secondary:focus {
	background-color: rgba(255, 255, 255, 0.14);
	border-color: #fff;
	color: #fff;
}

/* Member face-pile */
.community-avatars {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	margin: var(--space-3) 0;
}

.community-avatars__stack {
	display: flex;
}

.community-avatars__item {
	width: 32px;
	height: 32px;
	border-radius: var(--radius-pill);
	border: 2px solid var(--comm-bg-card);
	margin-left: -10px;
}

.community-avatars__stack .community-avatars__item:first-child {
	margin-left: 0;
}

.community-avatars__count {
	font-size: 0.875rem;
	color: var(--comm-text-muted);
}

/* Generic community modal shell — composer + per-post comments both use
   this; matches the [data-modal-dismiss]/Escape handling the enquiry
   modal already established, generalized in assets/js/main.js's
   "Community modals" section for any [id][data-community-modal-root]. */
.community-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-4);
}

/* Higher specificity than the bare .community-modal rule above (needed
   since it otherwise wins the cascade over the browser's default
   [hidden] { display: none }) — without this every comments/composer
   modal renders open on page load. */
.community-modal[hidden] {
	display: none;
}

.community-modal__backdrop {
	position: absolute;
	inset: 0;
	background-color: rgba(18, 33, 29, 0.55);
}

.community-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 480px;
	max-height: calc(100vh - var(--space-6));
	overflow-y: auto;
	background-color: var(--comm-bg-card);
	border-radius: var(--comm-radius-md);
	padding: var(--space-5);
	box-shadow: 0 20px 60px rgba(18, 33, 29, 0.25);
}

.community-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--space-4);
}

.community-modal__head h2 {
	margin: 0;
	font-size: 1.25rem;
}

.community-modal__close {
	display: inline-flex;
	border: none;
	background: none;
	color: var(--comm-text-muted);
	cursor: pointer;
	padding: var(--space-1);
}

.community-modal__close:hover {
	color: var(--comm-green);
}

/* =========================================================
   55. COMMUNITIES — LANDING PAGE (/communities/)
   ========================================================= */
.communities-hero {
	display: grid;
	gap: var(--space-5);
	background-color: var(--comm-bg-card);
	border-radius: var(--comm-radius-lg);
	padding: var(--space-6);
	margin-block: var(--space-5);
}

.communities-hero__eyebrow {
	display: block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--comm-text-muted);
	margin-bottom: var(--space-3);
}

.communities-hero__title {
	font-size: 2.25rem;
	line-height: 1.1;
	margin: 0 0 var(--space-4);
}

.communities-hero__desc {
	color: var(--comm-text-muted);
	margin: 0 0 var(--space-5);
	max-width: 42ch;
}

.communities-hero__media {
	position: relative;
	border-radius: var(--comm-radius-md);
	overflow: hidden;
}

.communities-hero__media img {
	display: block;
	width: 100%;
	height: 260px;
	object-fit: cover;
}

.communities-hero__scribble {
	position: absolute;
	top: var(--space-3);
	right: var(--space-4);
	font-family: var(--comm-font-script);
	font-size: 1.5rem;
	color: #fff;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	line-height: 1.1;
}

@media (min-width: 960px) {
	.communities-hero {
		grid-template-columns: 1fr 1fr;
		align-items: center;
		padding: var(--space-8);
	}

	.communities-hero__title {
		font-size: 3rem;
	}

	.communities-hero__media img {
		height: 100%;
		min-height: 360px;
	}
}

.communities-explore {
	text-align: center;
	background-color: var(--comm-bg-card);
	border: 1px solid var(--comm-border);
	border-radius: var(--comm-radius-lg);
	padding: var(--space-7) var(--space-5);
	margin-block: var(--space-7);
}

.communities-explore__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background-color: var(--comm-bg);
	border: 1px solid var(--comm-border);
	border-radius: var(--radius-pill);
	padding: var(--space-2) var(--space-4);
	margin-bottom: var(--space-4);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--comm-green);
}

.communities-explore__eyebrow svg {
	color: var(--color-accent);
	width: 16px;
	height: 16px;
}

.communities-explore__head h2 {
	font-size: 2rem;
	margin: 0 0 var(--space-2);
}

.communities-explore__head p {
	color: var(--comm-text-muted);
	max-width: 46ch;
	margin: 0 auto var(--space-7);
}

.communities-grid {
	display: grid;
	gap: var(--space-5);
	max-width: 62rem;
	margin-inline: auto;
	text-align: left;
}

@media (min-width: 640px) {
	.communities-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.communities-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.community-card {
	background-color: var(--comm-bg-card);
	border-radius: var(--comm-radius-md);
	overflow: hidden;
	border: 1px solid var(--comm-border);
	display: flex;
	flex-direction: column;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.community-card:hover {
	transform: translateY(-4px);
	border-color: var(--comm-green-light);
	box-shadow: 0 16px 32px rgba(18, 33, 29, 0.14);
}

.community-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	/* Redundant with .community-card's own overflow:hidden/border-radius in
	   normal layout (this only clips visually the same way) — needed so the
	   photo is still correctly rounded on its own once the cross-document
	   view transition below hoists it out of this parent's clip for the
	   card → community-hero morph. */
	border-radius: var(--comm-radius-md) var(--comm-radius-md) 0 0;
}

.community-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.community-card:hover .community-card__media img {
	transform: scale(1.06);
}

.community-card__cta svg {
	transition: transform var(--transition-fast);
}

.community-card:hover .community-card__cta svg {
	transform: translateX(3px);
}

.community-card__body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: var(--space-5);
}

.community-card__title {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: 1.375rem;
	margin: 0 0 var(--space-2);
}

.community-card__title svg {
	color: var(--color-accent);
	flex-shrink: 0;
}

.community-card__desc {
	color: var(--comm-text-muted);
	margin: 0 0 var(--space-2);
	flex-grow: 1;
}

.community-card__cta {
	margin-top: var(--space-3);
	width: 100%;
}

/* Currently-ongoing events/challenges surfaced right on the landing card
   (see the additive block in saitrayaa_render_community_card(),
   inc/communities.php) — reuses the trophy/calendar icons and green accent
   already established for events elsewhere, just as a compact link chip. */
.community-card__events {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.community-card__event-chip {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	background-color: rgba(30, 58, 52, 0.06);
	border: 1px solid rgba(30, 58, 52, 0.14);
	border-radius: var(--radius-pill);
	padding: var(--space-2) var(--space-3);
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--comm-green);
	transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.community-card__event-chip:hover {
	background-color: rgba(30, 58, 52, 0.12);
	border-color: var(--comm-green);
}

.community-card__event-chip svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

.community-card__event-chip span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.communities-banner {
	position: relative;
	border-radius: var(--comm-radius-lg);
	overflow: hidden;
	margin-block: var(--space-7);
	min-height: 320px;
	display: flex;
	align-items: center;
}

.communities-banner__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.communities-banner__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(18, 33, 29, 0.75) 0%, rgba(18, 33, 29, 0.25) 65%, rgba(18, 33, 29, 0) 100%);
}

.communities-banner__content {
	position: relative;
	z-index: 1;
	color: #fff;
	padding: var(--space-6);
	max-width: 32rem;
}

.communities-banner__content h1,
.communities-banner__content h2 {
	color: #fff;
	font-size: 1.75rem;
	margin: 0 0 var(--space-3);
}

.communities-banner__content p {
	margin: 0 0 var(--space-4);
	opacity: 0.9;
}

.communities-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
}

.communities-banner__scribble {
	position: relative;
	z-index: 1;
	margin-left: auto;
	margin-right: var(--space-6);
	font-family: var(--comm-font-script);
	font-size: 1.5rem;
	color: #fff;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
	display: none;
}

@media (min-width: 960px) {
	.communities-banner__scribble {
		display: block;
	}
}

/* =========================================================
   56. COMMUNITIES — SINGLE COMMUNITY PAGE (/community/{slug}/)
   ========================================================= */
.community-breadcrumb {
	font-size: 0.875rem;
	color: var(--comm-text-muted);
	display: flex;
	gap: var(--space-2);
	padding-top: var(--space-4);
}

.community-breadcrumb a {
	color: var(--comm-text-muted);
}

.community-hero {
	position: relative;
	border-radius: var(--comm-radius-lg);
	overflow: hidden;
	margin-block: var(--space-4) var(--space-6);
	min-height: 360px;
	display: flex;
	align-items: flex-end;
}

.community-hero__media,
.community-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Same self-clipping note as .community-card__media above: redundant with
   .community-hero's own overflow:hidden/border-radius normally, needed so
   the image keeps its shape once hoisted for the view transition. */
.community-hero__media img {
	border-radius: var(--comm-radius-lg);
}

.community-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(18, 33, 29, 0.8) 0%, rgba(18, 33, 29, 0.1) 55%, rgba(18, 33, 29, 0) 100%);
}

.community-hero__scribble {
	position: absolute;
	top: var(--space-4);
	right: var(--space-5);
	z-index: 1;
	font-family: var(--comm-font-script);
	font-size: 1.5rem;
	color: #fff;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.community-hero__content {
	position: relative;
	z-index: 1;
	color: #fff;
	padding: var(--space-6);
	max-width: 40rem;
}

.community-hero__content h1 {
	color: #fff;
	font-size: 2.25rem;
	margin: 0 0 var(--space-3);
}

.community-hero__content p {
	opacity: 0.9;
	margin: 0 0 var(--space-2);
	max-width: 55ch;
}

.community-hero__content .community-avatars__count {
	color: rgba(255, 255, 255, 0.85);
}

.community-hero__join {
	margin-top: var(--space-3);
}

.community-hero__join-label-joined {
	display: none;
	align-items: center;
	gap: var(--space-2);
}

.community-hero__join.is-joined .community-hero__join-label-join {
	display: none;
}

.community-hero__join.is-joined .community-hero__join-label-joined {
	display: inline-flex;
}

@media (min-width: 768px) {
	.community-hero__content h1 {
		font-size: 3rem;
	}
}

.community-tabs {
	display: flex;
	gap: var(--space-6);
	border-bottom: 1px solid var(--comm-border);
	margin-bottom: var(--space-6);
}

.community-tabs__tab {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: var(--space-3) 0;
	font-family: var(--font-primary);
	font-weight: 600;
	color: var(--comm-text-muted);
	cursor: pointer;
}

.community-tabs__tab.is-active {
	color: var(--comm-green);
	border-bottom-color: var(--comm-green);
}

/* Community Picks (admin-controlled product promotion) — wrapped in its
   own bordered card panel, distinct from the organic feed's loose cards
   directly on the page background, so a Saitrayaa-curated product module
   reads as clearly separate from member content (see the "Product
   Promotion" transparency guidance this feature was built around). */
.community-picks {
	margin-top: var(--space-7);
	margin-bottom: var(--space-7);
	position: relative;
	background-color: #eeeade;
	background-image: linear-gradient(135deg, #fefffe 0%, #dbebdb 100%);
	border: 1px solid rgba(30, 58, 52, 0.1);
	border-radius: 24px;
	padding: clamp(2.25rem, 4vw, 3.75rem) clamp(1.5rem, 3vw, 2.75rem);
	box-shadow: 0 10px 28px rgba(30, 58, 52, 0.06);
}

@media (min-width: 768px) {
	.community-picks {
		padding: 4rem var(--space-7) 4.5rem;
	}
}

.community-picks__head {
	max-width: 56rem;
	margin: 1.5rem auto var(--space-6);
	text-align: left;
}

.community-picks__title {
	margin: 0 0 var(--space-2);
	font-size: clamp(1.75rem, 1.4rem + 1vw, 2.35rem);
	letter-spacing: -0.02em;
}

.community-picks__subtitle {
	max-width: 42rem;
	color: var(--comm-text-muted);
	margin: 0;
	font-size: 1.05rem;
}

.community-picks__view-all {
	display: flex;
	width: fit-content;
	margin: var(--space-7) auto 1.5rem;
	align-items: center;
	gap: var(--space-2);
	font-weight: 600;
	color: var(--comm-green);
}

.community-picks__view-all svg {
	width: 18px;
	height: 18px;
	transition: transform var(--transition-fast);
}

.community-picks__view-all:hover svg,
.community-picks__view-all:focus svg {
	transform: translateX(4px);
}

/* Keep the curated rail fluid while respecting the number of picks selected
	by the community editor. Below 640px, cards stack for comfortable reading. */
.community-picks__grid {
	width: min(100%, 920px);
	margin: 0 auto;
	grid-template-columns: 1fr;
	gap: var(--space-5);
}

@media (min-width: 640px) {
	.community-picks__grid {
		grid-template-columns: repeat(var(--picks-cols, 4), minmax(0, 1fr));
	}
}

.community-picks .shop-card {
	border-color: rgba(30, 58, 52, 0.1);
	border-radius: 14px;
	box-shadow: 0 4px 12px rgba(30, 58, 52, 0.08);
}

.community-picks .shop-card:hover,
.community-picks .shop-card:focus-within {
	border-color: var(--comm-green);
	box-shadow: 0 12px 24px rgba(30, 58, 52, 0.14);
}

.community-picks .shop-card__media {
	aspect-ratio: 1.15 / 1;
	padding: 1.25rem;
	background-color: #e8edf0;
}

.community-picks .shop-card__body {
	min-height: 15rem;
	padding: 1.25rem 1.35rem 1.4rem;
	gap: 0.8rem;
}

.community-picks .shop-card__name {
	font-size: 1.2rem;
}

.community-picks .shop-card__meta {
	gap: 0.45rem 0.7rem;
}

.community-picks .shop-card__actions {
	margin-top: auto;
}

@media (max-width: 639px) {
	.community-picks__head {
		margin-top: 0;
		text-align: center;
	}

	.community-picks__subtitle {
		margin-inline: auto;
	}

	.community-picks .shop-card__body {
		min-height: 0;
	}
}

/* Feed */
.community-feed__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-4);
}

.community-feed__head h2 {
	font-size: 1.5rem;
	margin: 0;
}

.community-feed__layout {
	display: grid;
	gap: var(--space-5);
}

@media (min-width: 960px) {
	.community-feed__layout {
		grid-template-columns: 2fr 1fr;
		align-items: start;
	}
}

.community-feed__posts {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
}

.community-feed__empty {
	color: var(--comm-text-muted);
	background-color: var(--comm-bg-card);
	border: 1px dashed var(--comm-border);
	border-radius: var(--comm-radius-md);
	padding: var(--space-6);
	text-align: center;
}

.community-feed-post {
	background-color: var(--comm-bg-card);
	border: 1px solid var(--comm-border);
	border-radius: var(--comm-radius-md);
	padding: var(--space-4);
}

.community-feed-post__head {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
}

.community-feed-post__avatar {
	border-radius: var(--radius-pill);
}

.community-feed-post__byline {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

.community-feed-post__author {
	font-weight: 600;
	font-size: 0.9375rem;
}

.community-feed-post__time {
	font-size: 0.8125rem;
	color: var(--comm-text-muted);
}

.community-feed-post__menu {
	color: var(--comm-text-muted);
	font-size: 1.25rem;
	line-height: 1;
}

/* Marks a feed post as a challenge entry and links back to the event (see
   the additive block in saitrayaa_render_community_feed_post(),
   inc/communities.php) — same visual language as .community-card__event-chip,
   its own class since the surrounding spacing context differs. */
.community-feed-post__challenge-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background-color: rgba(30, 58, 52, 0.06);
	border: 1px solid rgba(30, 58, 52, 0.14);
	border-radius: var(--radius-pill);
	padding: var(--space-1) var(--space-3);
	margin-bottom: var(--space-3);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--comm-green);
	max-width: 100%;
}

.community-feed-post__challenge-badge:hover {
	background-color: rgba(30, 58, 52, 0.12);
	border-color: var(--comm-green);
}

.community-feed-post__challenge-badge svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.community-feed-post__caption {
	margin: 0 0 var(--space-3);
	/* Keep the paragraph breaks members (and launch posts) type into a caption. */
	white-space: pre-line;
}

.community-feed-post__media {
	border-radius: var(--comm-radius-sm);
	overflow: hidden;
	margin-bottom: var(--space-3);
}

.community-feed-post__media img {
	display: block;
	width: 100%;
	height: auto;
}

.community-feed-post__video {
	display: block;
	width: 100%;
	max-height: 640px;
	background-color: #000;
}

.community-feed-post__foot {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	padding-top: var(--space-2);
	border-top: 1px solid var(--comm-border);
}

.community-feed-post__like,
.community-feed-post__comment,
.community-feed-post__report {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	border: none;
	background: none;
	color: var(--comm-text-muted);
	font-family: var(--font-primary);
	font-size: 0.875rem;
	cursor: pointer;
	padding: 0;
}

.community-feed-post__report {
	margin-left: auto;
}

.community-feed-post__like:hover,
.community-feed-post__comment:hover,
.community-feed-post__report:hover {
	color: var(--comm-green);
}

.community-feed-post__like svg {
	transition: fill var(--transition-fast), stroke var(--transition-fast);
}

.community-feed-post__like.is-active {
	color: #b3413a;
}

.community-feed-post__like.is-active svg {
	fill: #b3413a;
	stroke: #b3413a;
}

.community-feed__cta {
	background-color: var(--comm-green);
	color: #fff;
	border-radius: var(--comm-radius-md);
	padding: var(--space-6);
	position: relative;
	overflow: hidden;
}

.community-feed__cta svg {
	color: #fff;
	opacity: 0.85;
	width: 28px;
	height: 28px;
}

.community-feed__cta h3 {
	color: #fff;
	font-size: 1.25rem;
	margin: var(--space-3) 0 var(--space-2);
}

.community-feed__cta p {
	opacity: 0.85;
	margin: 0 0 var(--space-4);
}

.community-feed__cta-stats {
	display: flex;
	gap: var(--space-5);
	font-size: 0.875rem;
	padding-top: var(--space-4);
	border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.community-feed__cta-stats strong {
	display: block;
	font-size: 1.125rem;
}

.community-feed__cta-scribble {
	display: block;
	margin-top: var(--space-5);
	font-family: var(--comm-font-script);
	font-size: 1.375rem;
	opacity: 0.9;
}

.community-about {
	max-width: 65ch;
	color: var(--comm-text);
}

/* =========================================================
   57. COMMUNITIES — COMPOSER + COMMENTS MODALS
   ========================================================= */
.community-composer-form,
.community-comments-modal__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.community-composer-form__drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	border: 2px dashed var(--comm-border);
	border-radius: var(--comm-radius-sm);
	padding: var(--space-7) var(--space-4);
	cursor: pointer;
	color: var(--comm-text-muted);
	text-align: center;
}

.community-composer-form__drop:hover {
	border-color: var(--comm-green);
	color: var(--comm-green);
}

.community-composer-form__drop input[type='file'] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}

.community-composer-form__drop-label {
	font-weight: 600;
}

.community-composer-form__drop-hint {
	font-size: 0.8125rem;
}

.community-composer-form__preview {
	border-radius: var(--comm-radius-sm);
	overflow: hidden;
	max-height: 320px;
	background-color: #000;
}

.community-composer-form__preview-media {
	display: block;
	width: 100%;
	max-height: 320px;
	object-fit: contain;
}

.community-composer-form__file-error {
	color: #b3413a;
	font-size: 0.875rem;
	margin: 0;
}

.community-event-composer__photo-note {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	background-color: rgba(30, 58, 52, 0.06);
	border: 1px solid rgba(30, 58, 52, 0.14);
	border-radius: var(--comm-radius-sm);
	padding: var(--space-3);
	margin: 0 0 var(--space-4);
	font-size: 0.8125rem;
	color: var(--comm-green);
}

.community-event-composer__photo-note svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.community-composer-form__caption {
	min-height: 100px;
	border: 1px solid var(--comm-border);
	border-radius: var(--comm-radius-sm);
	padding: var(--space-3);
	font-family: var(--font-primary);
	resize: vertical;
}

.community-composer-form__submit {
	width: 100%;
}

.community-comments-modal__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-height: 40vh;
	overflow-y: auto;
	margin-bottom: var(--space-4);
}

.community-comments-modal__empty {
	color: var(--comm-text-muted);
	text-align: center;
	padding: var(--space-5) 0;
}

.community-comment {
	display: flex;
	gap: var(--space-3);
}

.community-comment__avatar {
	display: block;
	width: 36px;
	height: 36px;
	object-fit: cover;
	border-radius: var(--radius-pill);
	flex-shrink: 0;
}

.community-comment__body {
	flex: 1 1 auto;
	min-width: 0;
}

.community-comment__meta {
	display: flex;
	gap: var(--space-2);
	margin: 0 0 var(--space-1);
	font-size: 0.8125rem;
}

.community-comment__author {
	font-weight: 600;
	color: var(--comm-text);
}

.community-comment__time {
	color: var(--comm-text-muted);
}

.community-comment__text {
	margin: 0;
}

.community-comments-modal__form {
	flex-direction: column;
	align-items: stretch;
	gap: var(--space-3);
	border-top: 1px solid var(--comm-border);
	padding-top: var(--space-4);
}

.community-comments-modal__form .comment-respond {
	width: 100%;
}

.community-comments-modal__form .comment-form-comment,
.community-comments-modal__form .comment-form-author,
.community-comments-modal__form p {
	flex-grow: 1;
	margin: 0;
}

.community-comments-modal__form textarea,
.community-comments-modal__form input[type='text'] {
	width: 100%;
	border: 1px solid var(--comm-border);
	border-radius: var(--radius-pill);
	padding: var(--space-3) var(--space-4);
	font-family: var(--font-primary);
	resize: none;
}

.community-comments-modal__form textarea {
	min-height: 44px;
}

.community-comments-modal__submit {
	flex-shrink: 0;
	border-radius: var(--radius-pill);
	padding: var(--space-3);
	min-height: 44px;
	width: 44px;
}

.community-comments-modal__form .comment-form-comment,
.community-comments-modal__form .comment-form-comment textarea {
	width: 100%;
}

/* Overrides the row/flex-grow rules above (this is the form area's only
   child when logged out) with its own centered, stacked layout. */
.community-comments-modal__login-prompt {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	width: 100%;
	color: var(--comm-text-muted);
	font-size: 0.9375rem;
	text-align: center;
}

/* =========================================================
   58. COMMUNITY EVENTS & CHALLENGES (inc/events.php,
   single-community_event.php). Lives inside .community-page /
   .communities-page, so it inherits the --comm-* tokens above rather than
   introducing a new palette.
   ========================================================= */
.community-events__head {
	margin-bottom: var(--space-4);
}

.community-events__head h2 {
	font-size: 1.5rem;
	margin: 0;
}

.community-events__empty {
	color: var(--comm-text-muted);
	background-color: var(--comm-bg-card);
	border: 1px dashed var(--comm-border);
	border-radius: var(--comm-radius-md);
	padding: var(--space-6);
	text-align: center;
}

.community-events__grid {
	display: grid;
	gap: var(--space-5);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.community-events__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.community-events__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.event-card {
	background-color: var(--comm-bg-card);
	border: 1px solid var(--comm-border);
	border-radius: var(--comm-radius-md);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.event-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px rgba(18, 33, 29, 0.14);
}

.event-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	background-color: var(--comm-border);
	overflow: hidden;
}

.event-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.event-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4);
}

.event-card__type {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--comm-green);
}

.event-card__type svg {
	width: 16px;
	height: 16px;
}

.event-card__title {
	font-size: 1.125rem;
	margin: 0;
}

.event-card__dates,
.event-card__count {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: 0.875rem;
	color: var(--comm-text-muted);
	margin: 0;
}

.event-card__dates svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.event-card__cta {
	margin-top: var(--space-2);
	width: 100%;
}

/* Status/type pill, reused on the card media overlay and the single
   event hero. */
.event-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	background-color: var(--comm-bg-card);
	color: var(--comm-green);
}

.event-card__media .event-badge {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
}

.event-badge--status-ongoing {
	background-color: var(--comm-green);
	color: #fff;
}

.event-badge--status-upcoming {
	background-color: var(--color-accent);
	color: #2b1d05;
}

.event-badge--status-completed {
	background-color: var(--comm-border);
	color: var(--comm-text-muted);
}

.event-hero .community-hero__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
}

.event-hero .event-badge {
	background-color: rgba(255, 255, 255, 0.16);
	color: #fff;
}

.event-hero h1 {
	margin: var(--space-1) 0 0;
}

.event-hero .community-hero__content p {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.event-hero .btn,
.event-hero .event-badge:last-of-type {
	margin-top: var(--space-3);
}

.event-detail__about h3 {
	margin-top: var(--space-5);
	font-size: 1.125rem;
}

/* "Watch PawReel" overlay on a community feed post's thumbnail, when that
   post was created from PawReels' "Post to Community" action (see the
   additive block in saitrayaa_render_community_feed_post(),
   inc/communities.php). */
.community-feed-post__media {
	position: relative;
}

.community-feed-post__pawreel-badge {
	position: absolute;
	left: var(--space-3);
	bottom: var(--space-3);
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background-color: rgba(18, 33, 29, 0.75);
	color: #fff;
	font-size: 0.8125rem;
	font-weight: 600;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-pill);
}

.community-feed-post__pawreel-badge svg {
	width: 16px;
	height: 16px;
}

/* Challenge entries — a compact photo-grid (single-community_event.php),
   deliberately much smaller than the full .community-feed-post cards used
   in a community's normal feed, plus a "Most Liked" leaderboard panel
   beside it. saitrayaa_render_event_entry_card() / …leaderboard()
   (inc/events.php). */
.event-entries__count {
	font-size: 0.875rem;
	color: var(--comm-text-muted);
}

.event-entries__layout {
	display: grid;
	gap: var(--space-5);
}

@media (min-width: 860px) {
	.event-entries__layout {
		grid-template-columns: 1fr 280px;
		align-items: start;
	}
}

.event-entries-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: var(--space-3);
}

.event-entry {
	background-color: var(--comm-bg-card);
	border: 1px solid var(--comm-border);
	border-radius: var(--comm-radius-sm);
	overflow: hidden;
}

.event-entry__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	background-color: var(--comm-border);
}

/* :not(.event-entry__avatar) matters here — the avatar overlay below is
   also a plain <img> inside .event-entry__media, and without this
   exclusion it inherited this rule's 100%/100% sizing too, stretching a
   28px avatar into a giant circle covering the whole card. */
.event-entry__media img:not(.event-entry__avatar) {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.event-entry__leading {
	position: absolute;
	top: var(--space-2);
	left: var(--space-2);
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background-color: var(--color-accent);
	color: #2b1d05;
	font-size: 0.6875rem;
	font-weight: 700;
	padding: 3px var(--space-2);
	border-radius: var(--radius-pill);
}

.event-entry__leading svg {
	width: 11px;
	height: 11px;
}

.event-entry__avatar {
	position: absolute;
	bottom: var(--space-2);
	right: var(--space-2);
	width: 28px;
	height: 28px;
	object-fit: cover;
	border-radius: 50%;
	border: 2px solid #fff;
}

.event-entry__footer {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-3);
}

.event-entry__like,
.event-entry__comment {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: none;
	background: none;
	color: var(--comm-text-muted);
	font-size: 0.75rem;
	font-family: var(--font-primary);
	cursor: pointer;
	padding: 0;
}

.event-entry__like svg,
.event-entry__comment svg {
	width: 15px;
	height: 15px;
}

.event-entry__like.is-active {
	color: #b3413a;
}

.event-entry__like.is-active svg {
	fill: #b3413a;
	stroke: #b3413a;
}

.event-leaderboard {
	position: sticky;
	top: var(--space-5);
	background-color: var(--comm-green);
	color: #fff;
	border-radius: var(--comm-radius-md);
	padding: var(--space-5);
}

.event-leaderboard > svg {
	width: 26px;
	height: 26px;
	color: var(--color-accent);
}

.event-leaderboard h3 {
	color: #fff;
	font-size: 1.0625rem;
	margin: var(--space-2) 0 var(--space-1);
}

.event-leaderboard__subtitle {
	font-size: 0.75rem;
	opacity: 0.75;
	margin: 0 0 var(--space-4);
}

.event-leaderboard__empty {
	font-size: 0.875rem;
	opacity: 0.75;
	margin: 0;
}

.event-leaderboard__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.event-leaderboard__item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.event-leaderboard__rank {
	width: 20px;
	flex-shrink: 0;
	text-align: center;
	font-size: 0.9375rem;
	font-weight: 700;
}

.event-leaderboard__avatar {
	border-radius: 50%;
	flex-shrink: 0;
}

.event-leaderboard__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 0.875rem;
	font-weight: 600;
}

.event-leaderboard__likes {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	flex-shrink: 0;
	font-size: 0.8125rem;
	opacity: 0.85;
}

.event-leaderboard__likes svg {
	width: 13px;
	height: 13px;
}

/* =========================================================
   59. PAWREELS (inc/pawreels.php, page-pawreels.php, single-pawreel.php,
   assets/js/pawreels.js). Also lives inside .community-page, sharing the
   same --comm-* tokens.
   ========================================================= */
.pawreel-page__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	background-color: var(--comm-bg-card);
	border: 1px solid var(--comm-border);
	border-radius: var(--radius-pill);
	padding: var(--space-2) var(--space-4);
	margin-bottom: var(--space-3);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--comm-green);
}

.pawreel-page__eyebrow svg {
	width: 16px;
	height: 16px;
	color: var(--color-accent);
}

.pawreel-page__head {
	max-width: 42rem;
	margin: var(--space-5) auto var(--space-6);
}

.pawreel-page__head h1 {
	margin: 0 0 var(--space-2);
}

.pawreel-page__head p {
	color: var(--comm-text-muted);
	margin: 0;
}

.pawreel-builder {
	max-width: 42rem;
	margin-inline: auto;
}

.pawreel-page .pawreel-step {
	background-color: var(--comm-bg-card);
	border: 1px solid var(--comm-border);
	border-radius: var(--comm-radius-md);
	padding: var(--space-5);
	margin-bottom: var(--space-5);
	transition: border-color var(--transition-fast);
}

.pawreel-step__title {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	font-size: 1.125rem;
	margin: 0 0 var(--space-2);
}

.pawreel-step__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex-shrink: 0;
	border-radius: 50%;
	background-color: var(--comm-green);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 700;
}

.pawreel-step__hint {
	color: var(--comm-text-muted);
	font-size: 0.875rem;
	margin: 0 0 var(--space-4);
}

.pawreel-builder__drop {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	border: 2px dashed var(--comm-border);
	border-radius: var(--comm-radius-sm);
	padding: var(--space-7) var(--space-4);
	cursor: pointer;
	color: var(--comm-text-muted);
	text-align: center;
	position: relative;
	background-color: var(--comm-bg);
	transition: border-color var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
}

.pawreel-builder__drop-icon {
	display: inline-flex;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--comm-bg-card);
	color: var(--comm-green);
	margin-bottom: var(--space-2);
}

.pawreel-builder__drop-icon svg {
	width: 22px;
	height: 22px;
}

.pawreel-builder__drop-label {
	font-weight: 600;
	color: var(--comm-text);
}

.pawreel-builder__drop-hint {
	font-size: 0.8125rem;
}

.pawreel-builder__drop:hover,
.pawreel-builder__drop.is-dragover,
.pawreel-builder__drop:focus-within {
	border-color: var(--comm-green);
	background-color: rgba(30, 58, 52, 0.05);
	color: var(--comm-green);
}

.pawreel-builder__drop.is-full {
	opacity: 0.6;
	cursor: not-allowed;
}

.pawreel-builder__drop input[type='file'] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	overflow: hidden;
}

.pawreel-photo-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

.pawreel-photo-thumb {
	position: relative;
	width: 84px;
	height: 84px;
	border-radius: var(--comm-radius-sm);
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(18, 33, 29, 0.12);
}

.pawreel-photo-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pawreel-photo-thumb__index {
	position: absolute;
	left: 4px;
	bottom: 4px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: var(--radius-pill);
	background-color: rgba(18, 33, 29, 0.75);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pawreel-photo-thumb__remove {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	border: none;
	background-color: rgba(18, 33, 29, 0.75);
	color: #fff;
	line-height: 1;
	cursor: pointer;
}

.pawreel-photo-list__count {
	margin: var(--space-3) 0 0;
	font-size: 0.8125rem;
	color: var(--comm-text-muted);
}

.pawreel-builder__name-field {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	border: 1px solid var(--comm-border);
	border-radius: var(--comm-radius-sm);
	padding: 0 var(--space-4);
	background-color: var(--comm-bg);
}

.pawreel-builder__name-field svg {
	color: var(--comm-text-muted);
	flex-shrink: 0;
}

.pawreel-builder__name-field:focus-within {
	border-color: var(--comm-green);
}

.pawreel-builder__name-input {
	flex: 1 1 auto;
	width: 100%;
	border: none;
	background: none;
	padding: var(--space-3) 0;
	font-family: var(--font-primary);
	font-size: 1rem;
}

.pawreel-builder__name-input:focus {
	outline: none;
}

.pawreel-templates {
	display: grid;
	gap: var(--space-3);
}

@media (min-width: 560px) {
	.pawreel-templates {
		grid-template-columns: repeat(2, 1fr);
	}
}

.pawreel-template-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	border: 2px solid var(--comm-border);
	border-radius: var(--comm-radius-sm);
	padding: var(--space-4);
	cursor: pointer;
	transition: border-color var(--transition-fast), background-color var(--transition-fast), transform var(--transition-fast);
}

.pawreel-template-card:hover {
	border-color: var(--comm-green-light);
}

.pawreel-template-card input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.pawreel-template-card:has(input:checked) {
	border-color: var(--comm-green);
	background-color: rgba(30, 58, 52, 0.06);
}

.pawreel-template-card:has(input:focus-visible) {
	outline: 2px solid var(--comm-green);
	outline-offset: 2px;
}

.pawreel-template-card__icon {
	display: inline-flex;
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	border-radius: var(--comm-radius-sm);
	background-color: var(--comm-bg);
	color: var(--comm-green);
}

.pawreel-template-card--main-character .pawreel-template-card__icon {
	background-color: rgba(200, 149, 60, 0.14);
	color: var(--color-accent-dark, var(--comm-green));
}

.pawreel-template-card__check {
	position: absolute;
	top: var(--space-3);
	right: var(--space-3);
	display: none;
	width: 22px;
	height: 22px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--comm-green);
	color: #fff;
}

.pawreel-template-card__check svg {
	width: 13px;
	height: 13px;
}

.pawreel-template-card:has(input:checked) .pawreel-template-card__check {
	display: flex;
}

.pawreel-template-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.pawreel-template-card__body span {
	color: var(--comm-text-muted);
	font-size: 0.875rem;
}

.pawreel-builder__audio-note,
.pawreel-share__audio-note {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--comm-text-muted);
	font-size: 0.8125rem;
	margin: 0 0 var(--space-4);
}

.pawreel-builder__audio-note svg,
.pawreel-share__audio-note svg {
	width: 15px;
	height: 15px;
	flex-shrink: 0;
}

.pawreel-builder__generate {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	font-size: 1rem;
	padding-block: var(--space-4);
}

.pawreel-builder__generate:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.pawreel-builder__progress {
	margin-top: var(--space-5);
	text-align: center;
	color: var(--comm-text-muted);
	background-color: var(--comm-bg-card);
	border: 1px solid var(--comm-border);
	border-radius: var(--comm-radius-md);
	padding: var(--space-6);
}

.pawreel-builder__progress-icon {
	display: inline-flex;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--comm-bg);
	color: var(--comm-green);
	margin-bottom: var(--space-3);
	animation: saitrayaa-pawreel-pulse 1.4s ease-in-out infinite;
}

@keyframes saitrayaa-pawreel-pulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.08); opacity: 0.7; }
}

.pawreel-builder__progress-track {
	width: 100%;
	max-width: 280px;
	height: 8px;
	border-radius: var(--radius-pill);
	background-color: var(--comm-border);
	overflow: hidden;
	margin: var(--space-3) auto 0;
}

.pawreel-builder__progress-bar {
	height: 100%;
	width: 0;
	background-color: var(--comm-green);
	transition: width 120ms linear;
}

.pawreel-builder__progress-percent {
	margin: var(--space-2) 0 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--comm-green);
}

.pawreel-builder__preview {
	margin-top: var(--space-5);
	text-align: center;
}

.pawreel-builder__preview-label {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-weight: 600;
	color: var(--comm-green);
	margin: var(--space-4) 0 0;
}

.pawreel-builder__preview-frame {
	display: inline-block;
	padding: 10px;
	border-radius: 28px;
	background-color: var(--comm-green-dark);
	box-shadow: 0 20px 48px rgba(18, 33, 29, 0.28);
}

.pawreel-builder__preview-video {
	width: 100%;
	max-width: 280px;
	aspect-ratio: 9 / 16;
	border-radius: 20px;
	background-color: #000;
	object-fit: contain;
	display: block;
}

.pawreel-builder__preview-actions {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	max-width: 280px;
	margin: var(--space-5) auto 0;
}

.pawreel-builder__start-over {
	background: none;
	border: none;
	color: var(--comm-text-muted);
	text-decoration: underline;
	cursor: pointer;
}

.pawreel-builder__save-status {
	max-width: 280px;
	margin: var(--space-4) auto 0;
	text-align: center;
}

.pawreel-builder__save-status-track {
	width: 100%;
	height: 6px;
	border-radius: var(--radius-pill);
	background-color: var(--comm-border);
	overflow: hidden;
}

.pawreel-builder__save-status-bar {
	height: 100%;
	width: 0;
	background-color: var(--comm-green);
	transition: width 200ms linear;
}

/* Once the upload itself finishes, real progress can no longer be
   measured (the remaining wait is server-side processing) — an
   indeterminate sweep communicates "still working", honestly, rather than
   a percentage that would just be made up. */
.pawreel-builder__save-status-bar.is-indeterminate {
	width: 40% !important;
	animation: saitrayaa-save-indeterminate 1.2s ease-in-out infinite;
}

@keyframes saitrayaa-save-indeterminate {
	0% { margin-left: 0; }
	50% { margin-left: 60%; }
	100% { margin-left: 0; }
}

.pawreel-builder__save-status-text {
	margin: var(--space-2) 0 0;
	font-size: 0.8125rem;
	color: var(--comm-text-muted);
}

/* Single reel share page */
.pawreel-share {
	display: grid;
	gap: var(--space-6);
	margin: var(--space-5) 0 var(--space-7);
}

@media (min-width: 860px) {
	.pawreel-share {
		grid-template-columns: 340px 1fr;
		align-items: start;
	}
}

.pawreel-share__player {
	width: 100%;
	max-width: 360px;
	justify-self: center;
	background-color: #000;
	border-radius: var(--comm-radius-lg);
	overflow: hidden;
	box-shadow: 0 16px 40px rgba(18, 33, 29, 0.18);
}

.pawreel-share__video {
	width: 100%;
	max-height: 640px;
	aspect-ratio: 9 / 16;
	display: block;
	object-fit: contain;
}

.pawreel-share__info h1 {
	margin: var(--space-2) 0 var(--space-3);
	font-size: 2rem;
}

.pawreel-share__meta {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--comm-text-muted);
	font-size: 0.875rem;
	margin-bottom: var(--space-5);
}

.pawreel-share__meta-avatar {
	border-radius: var(--radius-pill);
}

.pawreel-share__actions {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
	margin-bottom: var(--space-5);
}

.pawreel-share__posted,
.pawreel-share__hint {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--comm-text-muted);
}

.pawreel-share__another {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-top: var(--space-4);
	color: var(--comm-green);
	font-weight: 600;
	font-size: 0.9375rem;
}

.pawreel-share__another svg {
	width: 16px;
	height: 16px;
}

.pawreel-post-form {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	background-color: var(--comm-bg-card);
	border: 1px solid var(--comm-border);
	border-radius: var(--comm-radius-md);
	padding: var(--space-5);
	max-width: 420px;
}

.pawreel-post-form h2 {
	font-size: 1.125rem;
	margin: 0;
}

.pawreel-post-form select,
.pawreel-post-form textarea {
	width: 100%;
	border: 1px solid var(--comm-border);
	border-radius: var(--comm-radius-sm);
	padding: var(--space-3);
	font-family: var(--font-primary);
}

.pawreel-post-form textarea {
	min-height: 80px;
	resize: vertical;
}

.pawreel-post-form__message {
	color: #b3413a;
	font-size: 0.875rem;
	margin: 0;
}

/* Viral loop CTA for a non-owner viewing a shared reel link */
.pawreel-cta-banner {
	text-align: center;
	background-color: var(--comm-green);
	color: #fff;
	border-radius: var(--comm-radius-lg);
	padding: var(--space-7) var(--space-5);
	margin-bottom: var(--space-7);
}

.pawreel-cta-banner svg {
	width: 32px;
	height: 32px;
	color: var(--color-accent);
	margin-bottom: var(--space-3);
}

.pawreel-cta-banner h2 {
	color: #fff;
	margin: 0 0 var(--space-2);
}

.pawreel-cta-banner p {
	opacity: 0.85;
	max-width: 40ch;
	margin: 0 auto var(--space-5);
}

/* ==========================================================================
   PawWise — question & answer communities
   (inc/community-qa-views.php, single-community-question.php,
   assets/js/community-qa.js). Uses the same --comm-* tokens as the rest of
   the community pages; mobile-first, with the wider layout from 640px.
   ========================================================================== */

.community-purpose-label {
	display: inline-block;
	margin-bottom: var(--space-2);
	padding: 0.2rem 0.75rem;
	border-radius: var(--radius-pill);
	background-color: rgba(47, 81, 72, 0.12);
	color: var(--comm-green-light);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.community-hero__content .community-purpose-label {
	background-color: rgba(255, 255, 255, 0.2);
	color: #fff;
}

.qa-join-hint {
	margin: 0 0 var(--space-4);
	color: var(--comm-text-muted);
	font-size: 0.9375rem;
}

/* Filters ---------------------------------------------------------------- */
.qa-filters {
	display: grid;
	gap: var(--space-4);
	margin-bottom: var(--space-4);
}

.qa-views {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.qa-views__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--space-4);
	border: 1px solid var(--comm-border);
	border-radius: var(--radius-pill);
	background-color: var(--comm-bg-card);
	color: var(--comm-text);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.qa-views__link:hover,
.qa-views__link:focus-visible {
	border-color: var(--comm-green);
	color: var(--comm-green);
}

.qa-views__link.is-active {
	background-color: var(--comm-green);
	border-color: var(--comm-green);
	color: #fff;
}

.qa-filters__form {
	display: grid;
	gap: var(--space-3);
}

.qa-filters__search {
	position: relative;
	display: block;
}

.qa-filters__search svg {
	position: absolute;
	top: 50%;
	left: var(--space-3);
	transform: translateY(-50%);
	color: var(--comm-text-muted);
}

.qa-filters__search input,
.qa-filters__field select,
.qa-form input[type="text"],
.qa-form select,
.qa-form textarea,
.qa-reply-form textarea {
	width: 100%;
	min-height: 44px;
	border: 1px solid var(--comm-border);
	border-radius: var(--comm-radius-sm);
	background-color: var(--comm-bg-card);
	color: var(--comm-text);
	font-family: var(--font-primary);
	font-size: 1rem;
	padding: 0 var(--space-3);
}

.qa-filters__search input {
	padding-left: 2.5rem;
}

.qa-form textarea,
.qa-reply-form textarea {
	padding: var(--space-3);
	resize: vertical;
}

.qa-filters__submit {
	min-height: 44px;
}

.qa-filters__clear {
	justify-self: start;
	color: var(--comm-green);
	font-weight: 600;
}

.qa-results-count {
	margin: 0 0 var(--space-3);
	color: var(--comm-text-muted);
	font-size: 0.875rem;
}

/* Question list ---------------------------------------------------------- */
.qa-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.qa-card {
	background-color: var(--comm-bg-card);
	border: 1px solid var(--comm-border);
	border-left: 4px solid var(--comm-border);
	border-radius: var(--comm-radius-md);
	padding: var(--space-4);
}

.qa-card--answered {
	border-left-color: #3f8f5a;
}

.qa-card--unanswered {
	border-left-color: var(--color-accent);
}

.qa-card--has-answers {
	border-left-color: var(--comm-green-light);
}

.qa-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-bottom: var(--space-2);
}

.qa-card__time {
	color: var(--comm-text-muted);
	font-size: 0.8125rem;
}

.qa-card__title {
	margin: 0 0 var(--space-2);
	font-size: 1.125rem;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

.qa-card__title a {
	color: var(--comm-green);
	text-decoration: none;
}

.qa-card__title a:hover,
.qa-card__title a:focus-visible {
	text-decoration: underline;
}

.qa-card__excerpt {
	margin: 0 0 var(--space-3);
	color: var(--comm-text);
	overflow-wrap: anywhere;
}

.qa-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-4);
	color: var(--comm-text-muted);
	font-size: 0.875rem;
}

.qa-card__author,
.qa-card__count {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

.qa-card__avatar {
	border-radius: var(--radius-pill);
}

.qa-card__count svg {
	width: 16px;
	height: 16px;
}

.qa-status {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 0.2rem 0.65rem;
	border-radius: var(--radius-pill);
	font-size: 0.8125rem;
	font-weight: 700;
}

.qa-status svg {
	width: 14px;
	height: 14px;
}

.qa-status--answered {
	background-color: #e2f2e8;
	color: #245c39;
}

.qa-status--unanswered {
	background-color: #fbf0d9;
	color: #7a5510;
}

.qa-status--has-answers {
	background-color: #e6ede9;
	color: var(--comm-green-light);
}

.qa-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: 0 0 var(--space-3);
	padding: 0;
}

.qa-tag {
	padding: 0.15rem 0.6rem;
	border-radius: var(--radius-pill);
	background-color: #f1ece0;
	color: var(--comm-text);
	font-size: 0.75rem;
	font-weight: 600;
}

.qa-empty {
	padding: var(--space-5) var(--space-4);
	border: 1px dashed var(--comm-border);
	border-radius: var(--comm-radius-md);
	background-color: var(--comm-bg-card);
	color: var(--comm-text-muted);
	text-align: center;
}

.qa-pagination {
	margin-top: var(--space-5);
}

.qa-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.qa-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--space-3);
	border: 1px solid var(--comm-border);
	border-radius: var(--radius-pill);
	background-color: var(--comm-bg-card);
	color: var(--comm-text);
	text-decoration: none;
}

.qa-pagination .page-numbers.current {
	background-color: var(--comm-green);
	border-color: var(--comm-green);
	color: #fff;
}

/* Ask-a-question + answer forms ------------------------------------------ */
.qa-form {
	display: grid;
	gap: var(--space-4);
}

.qa-form__field {
	display: grid;
	gap: var(--space-2);
}

.qa-form__label {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--comm-green);
}

.qa-form__row {
	display: grid;
	gap: var(--space-4);
}

.qa-form__note,
.qa-form__hint {
	margin: 0;
	color: var(--comm-text-muted);
	font-size: 0.8125rem;
}

.qa-form__error,
.qa-answer__error {
	margin: 0;
	color: #a3302a;
	font-size: 0.875rem;
}

.qa-form__submit {
	min-height: 44px;
	width: 100%;
}

.qa-composer .community-modal__dialog {
	max-width: 560px;
}

/* Question page ---------------------------------------------------------- */
.qa-question {
	background-color: var(--comm-bg-card);
	border: 1px solid var(--comm-border);
	border-radius: var(--comm-radius-md);
	padding: var(--space-4);
	margin-bottom: var(--space-6);
}

.qa-question__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin-bottom: var(--space-3);
}

.qa-question__top .qa-tags {
	margin: 0;
}

.qa-question__title {
	margin: 0 0 var(--space-3);
	font-size: 1.5rem;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.qa-question__byline,
.qa-comment__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
	margin-bottom: var(--space-3);
}

.qa-comment__avatar {
	border-radius: var(--radius-pill);
}

.qa-comment__author {
	font-weight: 700;
}

.qa-comment__time {
	color: var(--comm-text-muted);
	font-size: 0.8125rem;
}

.qa-comment__badge {
	padding: 0.1rem 0.55rem;
	border-radius: var(--radius-pill);
	background-color: #f1ece0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

.qa-question__body,
.qa-answer__body,
.qa-comment__text {
	overflow-wrap: anywhere;
}

.qa-question__body p,
.qa-answer__body p,
.qa-comment__text p {
	margin: 0 0 var(--space-3);
}

.qa-question__image {
	margin: 0 0 var(--space-3);
}

.qa-question__image img {
	max-width: 100%;
	height: auto;
	border-radius: var(--comm-radius-sm);
}

.qa-question__foot {
	display: flex;
	gap: var(--space-4);
	align-items: center;
}

/* Answers ---------------------------------------------------------------- */
.qa-answers {
	margin-bottom: var(--space-6);
}

.qa-answers h2,
.qa-answer-form h2 {
	font-size: 1.25rem;
	margin: 0 0 var(--space-4);
}

.qa-answer {
	background-color: var(--comm-bg-card);
	border: 1px solid var(--comm-border);
	border-radius: var(--comm-radius-md);
	padding: var(--space-4);
	margin-bottom: var(--space-4);
}

.qa-answer.is-accepted {
	border-color: #3f8f5a;
	box-shadow: 0 0 0 1px #3f8f5a;
}

.qa-answer__accepted {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-3);
	padding: 0.2rem 0.75rem;
	border-radius: var(--radius-pill);
	background-color: #e2f2e8;
	color: #245c39;
	font-size: 0.8125rem;
	font-weight: 700;
}

.qa-answer__accepted svg {
	width: 14px;
	height: 14px;
}

.qa-answer__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-3);
	margin-top: var(--space-2);
}

.qa-action {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	padding: 0 var(--space-3);
	border: 1px solid var(--comm-border);
	border-radius: var(--radius-pill);
	background-color: transparent;
	color: var(--comm-text-muted);
	font-family: var(--font-primary);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
}

.qa-action svg {
	width: 16px;
	height: 16px;
}

.qa-action:hover:not(:disabled),
.qa-action:focus-visible {
	border-color: var(--comm-green);
	color: var(--comm-green);
}

.qa-action:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.qa-action.is-active {
	background-color: var(--comm-green);
	border-color: var(--comm-green);
	color: #fff;
}

.qa-action--report {
	margin-left: auto;
	border-color: transparent;
}

.qa-action__count {
	font-variant-numeric: tabular-nums;
}

.qa-replies {
	margin-top: var(--space-3);
	padding-left: var(--space-3);
	border-left: 2px solid var(--comm-border);
}

.qa-reply {
	padding: var(--space-2) 0;
}

.qa-reply .qa-comment__head {
	margin-bottom: var(--space-1);
}

.qa-reply-form {
	display: grid;
	gap: var(--space-3);
	margin-top: var(--space-3);
}

.qa-reply-form[hidden] {
	display: none;
}

.qa-answer-form {
	margin-bottom: var(--space-5);
}

.qa-login-prompt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
	margin: 0;
}

.qa-back {
	margin: 0;
}

.qa-back a {
	color: var(--comm-green);
	font-weight: 600;
}

@media (min-width: 640px) {
	.qa-form__row {
		grid-template-columns: 1fr 1fr;
	}

	.qa-form__submit {
		width: auto;
		justify-self: start;
		min-width: 12rem;
	}

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

	.qa-filters__search {
		grid-column: 1 / -1;
	}

	.qa-question__title {
		font-size: 1.875rem;
	}
}

@media (min-width: 960px) {
	.qa-filters__form {
		grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) auto auto;
		align-items: center;
	}

	.qa-filters__search {
		grid-column: auto;
	}

	.qa-question,
	.qa-answer {
		padding: var(--space-5);
	}
}

/* Anchors used by the Q&A pages (#community-feed after filtering, #answer-N
   after replying, #your-answer) must land below the sticky site header. */
.community-feed--qna,
.qa-answer,
.qa-answer-form {
	scroll-margin-top: 7.5rem;
}

/* ==========================================================================
   Pawprints — pet journeys & memories communities
   (inc/community-pawprints-views.php, assets/js/community-pawprints.js).
   Same --comm-* tokens and the shared feed card; mobile-first, wider layouts
   from 640px and 960px.
   ========================================================================== */

.pp-join-hint {
	margin: 0 0 var(--space-4);
	color: var(--comm-text-muted);
	font-size: 0.9375rem;
}

/* Guide: the three things to share --------------------------------------- */
.pp-guide {
	display: grid;
	gap: var(--space-3);
	margin: 0 0 var(--space-5);
	padding: 0;
	list-style: none;
}

.pp-guide__item {
	display: grid;
	align-content: start;
	gap: var(--space-2);
	padding: var(--space-4);
	background-color: var(--comm-bg-card);
	border: 1px solid var(--comm-border);
	border-radius: var(--comm-radius-md);
}

.pp-guide__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-pill);
	background-color: #e6ede9;
	color: var(--comm-green);
}

.pp-guide__item--milestone .pp-guide__icon {
	background-color: #fbf0d9;
	color: #7a5510;
}

.pp-guide__item--story .pp-guide__icon {
	background-color: #f7e4e1;
	color: #9a3b32;
}

.pp-guide__icon svg {
	width: 20px;
	height: 20px;
}

.pp-guide__title {
	margin: 0;
	font-size: 1.0625rem;
}

.pp-guide__text {
	margin: 0;
	color: var(--comm-text-muted);
	font-size: 0.9375rem;
}

.pp-guide__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	justify-self: start;
	min-height: 44px;
	margin-top: var(--space-2);
	padding: 0;
	border: none;
	background: none;
	color: var(--comm-green);
	font-family: var(--font-primary);
	font-size: 0.9375rem;
	font-weight: 700;
	cursor: pointer;
}

.pp-guide__cta[hidden] {
	display: none;
}

.pp-guide__cta:hover,
.pp-guide__cta:focus-visible {
	text-decoration: underline;
}

.pp-guide__cta svg {
	width: 16px;
	height: 16px;
}

/* Post-type filter ------------------------------------------------------- */
.pp-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}

.pp-filters__link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 var(--space-4);
	border: 1px solid var(--comm-border);
	border-radius: var(--radius-pill);
	background-color: var(--comm-bg-card);
	color: var(--comm-text);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.pp-filters__link:hover,
.pp-filters__link:focus-visible {
	border-color: var(--comm-green);
	color: var(--comm-green);
}

.pp-filters__link.is-active {
	background-color: var(--comm-green);
	border-color: var(--comm-green);
	color: #fff;
}

.pp-empty a {
	margin-left: var(--space-2);
	color: var(--comm-green);
	font-weight: 600;
}

/* Cards: label, pet details, extra photos -------------------------------- */
.community-feed-post--pp {
	border-left: 4px solid var(--comm-border);
}

.community-feed-post--pp-introduction {
	border-left-color: var(--comm-green-light);
}

.community-feed-post--pp-milestone {
	border-left-color: var(--color-accent);
}

.community-feed-post--pp-story {
	border-left-color: #c9736a;
}

.pp-post-label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
	margin-bottom: var(--space-3);
}

.pp-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 0.2rem 0.7rem;
	border-radius: var(--radius-pill);
	font-size: 0.8125rem;
	font-weight: 700;
	background-color: #e6ede9;
	color: var(--comm-green-light);
}

.pp-badge svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.pp-badge--milestone {
	background-color: #fbf0d9;
	color: #7a5510;
}

.pp-badge--story {
	background-color: #f7e4e1;
	color: #9a3b32;
}

.pp-post-label__type,
.pp-post-label__date {
	color: var(--comm-text-muted);
	font-size: 0.875rem;
}

.pp-post-label__type {
	font-weight: 600;
	color: var(--comm-text);
}

.pp-pet-facts {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-1) var(--space-2);
	margin: 0 0 var(--space-2);
	color: var(--comm-text-muted);
	font-size: 0.9375rem;
	overflow-wrap: anywhere;
}

.pp-pet-facts__name {
	flex-basis: 100%;
	color: var(--comm-text);
	font-size: 1.0625rem;
}

/* The pet's name sits on its own line, so no separator is needed after it
   (otherwise a wrapped line can start with a stray dot). */
.pp-pet-facts__name + .pp-pet-facts__sep {
	display: none;
}

.community-feed-post--pp .community-feed-post__caption {
	overflow-wrap: anywhere;
	white-space: pre-line;
}

.pp-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.pp-gallery--1 {
	grid-template-columns: minmax(0, 1fr);
}

.pp-gallery__item {
	border-radius: var(--comm-radius-sm);
	overflow: hidden;
	background-color: #f1ece0;
}

.pp-gallery__image {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.pp-pagination {
	margin-top: var(--space-2);
}

.pp-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.pp-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--space-3);
	border: 1px solid var(--comm-border);
	border-radius: var(--radius-pill);
	background-color: var(--comm-bg-card);
	color: var(--comm-text);
	text-decoration: none;
}

.pp-pagination .page-numbers.current {
	background-color: var(--comm-green);
	border-color: var(--comm-green);
	color: #fff;
}

/* Share dialog ----------------------------------------------------------- */
.pp-composer .community-modal__dialog {
	max-width: 600px;
}

.pp-form {
	display: grid;
	gap: var(--space-4);
}

.pp-form [hidden] {
	display: none !important;
}

.pp-form__row {
	display: grid;
	gap: var(--space-4);
}

.pp-form__field {
	display: grid;
	gap: var(--space-2);
}

.pp-form__label {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--comm-green);
}

.pp-form input[type="text"],
.pp-form input[type="date"],
.pp-form select,
.pp-form textarea {
	width: 100%;
	min-height: 44px;
	border: 1px solid var(--comm-border);
	border-radius: var(--comm-radius-sm);
	background-color: var(--comm-bg-card);
	color: var(--comm-text);
	font-family: var(--font-primary);
	font-size: 1rem;
	padding: 0 var(--space-3);
}

.pp-form textarea {
	padding: var(--space-3);
	resize: vertical;
}

.pp-form input[type="file"] {
	width: 100%;
	font-size: 0.9375rem;
}

.pp-form__note,
.pp-form__hint {
	margin: 0;
	color: var(--comm-text-muted);
	font-size: 0.8125rem;
}

.pp-form__error {
	margin: 0;
	color: #a3302a;
	font-size: 0.875rem;
}

.pp-form__submit {
	min-height: 44px;
	width: 100%;
}

.pp-kind-picker {
	margin: 0;
	padding: 0;
	border: none;
	min-width: 0;
}

.pp-kind-picker legend {
	padding: 0;
	margin-bottom: var(--space-2);
}

.pp-kind-picker__options {
	display: grid;
	gap: var(--space-2);
}

.pp-kind-picker__option {
	position: relative;
	display: block;
}

.pp-kind-picker__option input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.pp-kind-picker__face {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	padding: 0 var(--space-4);
	border: 1px solid var(--comm-border);
	border-radius: var(--comm-radius-sm);
	background-color: var(--comm-bg-card);
	color: var(--comm-text);
	font-weight: 600;
}

.pp-kind-picker__face svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.pp-kind-picker__option input:checked + .pp-kind-picker__face {
	background-color: var(--comm-green);
	border-color: var(--comm-green);
	color: #fff;
}

.pp-kind-picker__option input:focus-visible + .pp-kind-picker__face {
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
}

.pp-previews {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-2);
}

.pp-previews__item {
	border-radius: var(--comm-radius-sm);
	overflow: hidden;
	background-color: #f1ece0;
	aspect-ratio: 1;
}

.pp-previews__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pp-previews__item--video {
	grid-column: 1 / -1;
	aspect-ratio: auto;
	padding: var(--space-3);
	font-size: 0.875rem;
	overflow-wrap: anywhere;
}

@media (min-width: 640px) {
	.pp-guide {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

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

	.pp-form__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pp-form__submit {
		width: auto;
		justify-self: start;
		min-width: 12rem;
	}

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

/* The #community-feed anchor (after filtering or sharing) must land below the sticky header. */
.community-feed--pp {
	scroll-margin-top: 7.5rem;
}

/* ==========================================================================
   Street Paws — street-animal support communities
   (inc/community-street-views.php, single-community-street.php,
   assets/js/community-street.js). Same --comm-* tokens and the shared feed
   card; mobile-first, wider layouts from 640px and 960px. Each post type has
   its own colour pair (soft background + dark text) so it reads at a glance.
   ========================================================================== */

.sp-join-hint {
	margin: 0 0 var(--space-4);
	color: var(--comm-text-muted);
	font-size: 0.9375rem;
}

/* Safety reminder -------------------------------------------------------- */
.sp-safety {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	margin: 0 0 var(--space-4);
	padding: var(--space-3) var(--space-4);
	background-color: #eaf1ee;
	border-left: 4px solid var(--comm-green-light);
	border-radius: var(--comm-radius-sm);
	font-size: 0.9375rem;
}

.sp-safety p {
	margin: 0;
	overflow-wrap: anywhere;
}

.sp-safety__icon {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--comm-green);
}

.sp-safety__icon svg {
	width: 22px;
	height: 22px;
}

/* Post-type tiles (also the filter) --------------------------------------- */
.sp-tiles {
	margin: 0 0 var(--space-4);
}

.sp-tiles__all {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	margin-bottom: var(--space-3);
	padding: 0 var(--space-4);
	border: 1px solid var(--comm-border);
	border-radius: var(--radius-pill);
	background-color: var(--comm-bg-card);
	color: var(--comm-text);
	font-size: 0.9375rem;
	font-weight: 700;
	text-decoration: none;
}

.sp-tiles__all:hover,
.sp-tiles__all:focus-visible {
	border-color: var(--comm-green);
	color: var(--comm-green);
}

.sp-tiles__all.is-active {
	background-color: var(--comm-green);
	border-color: var(--comm-green);
	color: #fff;
}

.sp-tiles__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	padding: 0 0.4rem;
	border-radius: var(--radius-pill);
	background-color: rgba(0, 0, 0, 0.08);
	font-size: 0.8125rem;
}

.sp-tiles__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sp-tile {
	--sp-bg: #e1eee6;
	--sp-ink: #1f5a3a;
	--sp-edge: #4a9a6a;
	min-width: 0;
}

.sp-tile--help,
.sp-badge--help,
.sp-focus--help,
.sp-kind-picker__face--help {
	--sp-bg: #dfeaf4;
	--sp-ink: #1f4a73;
	--sp-edge: #4f86b8;
}

.sp-tile--care,
.sp-badge--care,
.sp-focus--care,
.sp-kind-picker__face--care {
	--sp-bg: #e1eee6;
	--sp-ink: #1f5a3a;
	--sp-edge: #4a9a6a;
}

.sp-tile--adoption,
.sp-badge--adoption,
.sp-focus--adoption,
.sp-kind-picker__face--adoption {
	--sp-bg: #fbf0d9;
	--sp-ink: #7a5510;
	--sp-edge: #d9a441;
}

.sp-tile--resources,
.sp-badge--resources,
.sp-focus--resources,
.sp-kind-picker__face--resources {
	--sp-bg: #ebe5f3;
	--sp-ink: #4b3a78;
	--sp-edge: #8a73b8;
}

.sp-tile__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--space-1) var(--space-2);
	height: 100%;
	min-height: 44px;
	padding: var(--space-3);
	border: 1px solid var(--comm-border);
	border-top: 4px solid var(--sp-edge);
	border-radius: var(--comm-radius-md);
	background-color: var(--comm-bg-card);
	color: var(--comm-text);
	text-decoration: none;
}

.sp-tile__link:hover,
.sp-tile__link:focus-visible {
	background-color: var(--sp-bg);
}

.sp-tile.is-active .sp-tile__link {
	background-color: var(--sp-bg);
	border-color: var(--sp-edge);
	box-shadow: 0 0 0 2px var(--sp-edge);
}

.sp-tile__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: var(--radius-pill);
	background-color: var(--sp-bg);
	color: var(--sp-ink);
}

.sp-tile__icon svg {
	width: 18px;
	height: 18px;
}

.sp-tile__name {
	font-weight: 700;
	font-size: 0.9375rem;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.sp-tile__count {
	justify-self: end;
	padding: 0 0.5rem;
	border-radius: var(--radius-pill);
	background-color: var(--sp-bg);
	color: var(--sp-ink);
	font-size: 0.8125rem;
	font-weight: 700;
}

/* The short description only appears where there is room for it. */
.sp-tile__blurb {
	display: none;
	grid-column: 1 / -1;
	color: var(--comm-text-muted);
	font-size: 0.875rem;
}

/* The active type's reminder ------------------------------------------- */
.sp-focus {
	/* Colours come from the per-type --sp-* values above; these fallbacks only apply without one. */
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2) var(--space-4);
	margin: 0 0 var(--space-4);
	padding: var(--space-3) var(--space-4);
	background-color: var(--sp-bg, #eaf1ee);
	border-left: 4px solid var(--sp-edge, var(--comm-green-light));
	border-radius: var(--comm-radius-sm);
	font-size: 0.9375rem;
}

.sp-focus__text {
	flex: 1 1 18rem;
	margin: 0;
	overflow-wrap: anywhere;
}

.sp-focus__text strong {
	display: block;
	color: var(--sp-ink, var(--comm-green));
}

.sp-focus__all {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--sp-ink, var(--comm-green));
	font-weight: 700;
}

.sp-empty a {
	margin-left: var(--space-2);
	color: var(--comm-green);
	font-weight: 600;
}

/* Cards: type badge, details, title -------------------------------------- */
.community-feed-post--sp {
	border-left: 4px solid var(--comm-border);
}

.community-feed-post--sp-help {
	border-left-color: #4f86b8;
}

.community-feed-post--sp-care {
	border-left-color: #4a9a6a;
}

.community-feed-post--sp-adoption {
	border-left-color: #d9a441;
}

.community-feed-post--sp-resources {
	border-left-color: #8a73b8;
}

.sp-post-labels {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.sp-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 0.2rem 0.7rem;
	border-radius: var(--radius-pill);
	background-color: var(--sp-bg, #e1eee6);
	color: var(--sp-ink, #1f5a3a);
	font-size: 0.8125rem;
	font-weight: 700;
}

.sp-badge svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

.sp-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	max-width: 100%;
	padding: 0.2rem 0.65rem;
	border: 1px solid var(--comm-border);
	border-radius: var(--radius-pill);
	color: var(--comm-text);
	font-size: 0.8125rem;
	overflow-wrap: anywhere;
}

.sp-chip svg {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
	color: var(--comm-text-muted);
}

.sp-post-title {
	margin: 0 0 var(--space-2);
	font-size: 1.125rem;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.sp-post-title a {
	color: inherit;
	text-decoration: none;
}

.sp-post-title a:hover,
.sp-post-title a:focus-visible {
	text-decoration: underline;
}

.community-feed-post--sp .community-feed-post__caption {
	overflow-wrap: anywhere;
	white-space: pre-line;
}

.sp-aside__list {
	margin: 0 0 var(--space-4);
	padding-left: 1.1rem;
	font-size: 0.9375rem;
}

.sp-pagination {
	margin-top: var(--space-2);
}

.sp-pagination ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--space-3);
	border: 1px solid var(--comm-border);
	border-radius: var(--radius-pill);
	background-color: var(--comm-bg-card);
	color: var(--comm-text);
	text-decoration: none;
}

.sp-pagination .page-numbers.current {
	background-color: var(--comm-green);
	border-color: var(--comm-green);
	color: #fff;
}

/* Share dialog ----------------------------------------------------------- */
.sp-composer .community-modal__dialog {
	max-width: 620px;
}

.sp-form {
	display: grid;
	gap: var(--space-4);
}

.sp-form [hidden] {
	display: none !important;
}

.sp-form__row {
	display: grid;
	gap: var(--space-4);
}

.sp-form__field {
	display: grid;
	gap: var(--space-2);
}

.sp-form__label {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--comm-green);
}

.sp-form input[type="text"],
.sp-form select,
.sp-form textarea {
	width: 100%;
	min-height: 44px;
	border: 1px solid var(--comm-border);
	border-radius: var(--comm-radius-sm);
	background-color: var(--comm-bg-card);
	color: var(--comm-text);
	font-family: var(--font-primary);
	font-size: 1rem;
	padding: 0 var(--space-3);
}

.sp-form textarea {
	padding: var(--space-3);
	resize: vertical;
}

.sp-form input[type="file"] {
	width: 100%;
	font-size: 0.9375rem;
}

.sp-form__hint {
	margin: 0;
	color: var(--comm-text-muted);
	font-size: 0.8125rem;
}

.sp-form__reminder {
	margin: 0;
	padding: var(--space-3);
	background-color: #eaf1ee;
	border-left: 4px solid var(--comm-green-light);
	border-radius: var(--comm-radius-sm);
	font-size: 0.875rem;
}

.sp-form__error {
	margin: 0;
	color: #a3302a;
	font-size: 0.875rem;
}

.sp-form__submit {
	min-height: 44px;
	width: 100%;
}

.sp-kind-picker {
	margin: 0;
	padding: 0;
	border: none;
	min-width: 0;
}

.sp-kind-picker legend {
	padding: 0;
	margin-bottom: var(--space-2);
}

.sp-kind-picker__options {
	display: grid;
	gap: var(--space-2);
}

.sp-kind-picker__option {
	position: relative;
	display: block;
}

.sp-kind-picker__option input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.sp-kind-picker__face {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	padding: 0 var(--space-4);
	border: 1px solid var(--comm-border);
	border-left: 4px solid var(--sp-edge, #4a9a6a);
	border-radius: var(--comm-radius-sm);
	background-color: var(--comm-bg-card);
	color: var(--comm-text);
	font-weight: 600;
}

.sp-kind-picker__face svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--sp-ink, #1f5a3a);
}

.sp-kind-picker__option input:checked + .sp-kind-picker__face {
	background-color: var(--sp-bg, #e1eee6);
	border-color: var(--sp-edge, #4a9a6a);
	box-shadow: 0 0 0 2px var(--sp-edge, #4a9a6a);
	color: var(--sp-ink, #1f5a3a);
}

.sp-kind-picker__option input:focus-visible + .sp-kind-picker__face {
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
}

.sp-preview {
	max-width: 12rem;
	border-radius: var(--comm-radius-sm);
	overflow: hidden;
	background-color: #f1ece0;
}

.sp-preview img {
	display: block;
	width: 100%;
	height: auto;
}

/* Post page -------------------------------------------------------------- */
.sp-post {
	margin-bottom: var(--space-6);
	padding: var(--space-4);
	background-color: var(--comm-bg-card);
	border: 1px solid var(--comm-border);
	border-left: 4px solid var(--comm-border);
	border-radius: var(--comm-radius-md);
}

.sp-post--help {
	border-left-color: #4f86b8;
}

.sp-post--care {
	border-left-color: #4a9a6a;
}

.sp-post--adoption {
	border-left-color: #d9a441;
}

.sp-post--resources {
	border-left-color: #8a73b8;
}

.sp-post__top {
	margin-bottom: var(--space-3);
}

.sp-post__title {
	margin: 0 0 var(--space-3);
	font-size: 1.5rem;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.sp-post__byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
	margin-bottom: var(--space-4);
}

.sp-post__avatar {
	border-radius: var(--radius-pill);
}

.sp-post__author {
	font-weight: 700;
}

.sp-post__time {
	color: var(--comm-text-muted);
	font-size: 0.8125rem;
}

.sp-post__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-5);
	margin: 0 0 var(--space-4);
	padding: var(--space-3) var(--space-4);
	background-color: #f6f1e4;
	border-radius: var(--comm-radius-sm);
}

.sp-post__fact {
	min-width: 0;
}

.sp-post__fact dt {
	color: var(--comm-text-muted);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.sp-post__fact dd {
	margin: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.sp-post__body {
	overflow-wrap: anywhere;
}

.sp-post__body p {
	margin: 0 0 var(--space-3);
}

.sp-post__image {
	margin: 0 0 var(--space-3);
}

.sp-post__image img {
	max-width: 100%;
	height: auto;
	border-radius: var(--comm-radius-sm);
}

.sp-post__note {
	margin: 0 0 var(--space-4);
	padding: var(--space-3);
	background-color: #eaf1ee;
	border-left: 4px solid var(--comm-green-light);
	border-radius: var(--comm-radius-sm);
	color: var(--comm-text);
	font-size: 0.875rem;
}

.sp-post__foot {
	display: flex;
	gap: var(--space-4);
	align-items: center;
}

.sp-back {
	margin: 0;
}

.sp-back a {
	color: var(--comm-green);
	font-weight: 600;
}

@media (min-width: 640px) {
	.sp-tiles__list {
		gap: var(--space-4);
	}

	.sp-tile__blurb {
		display: block;
	}

	.sp-kind-picker__options {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sp-form__row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sp-form__submit {
		width: auto;
		justify-self: start;
		min-width: 12rem;
	}
}

@media (min-width: 960px) {
	.sp-tiles__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* The #community-feed anchor (after filtering or sharing) must land below the sticky header. */
.community-feed--sp {
	scroll-margin-top: 7.5rem;
}

/* ==========================================================================
   Street Paws — Adoption & Rehoming room and Community Impact
   (inc/community-street-adoption-views.php, single-community-street.php,
   assets/js/community-adoption.js). Same --comm-* tokens as the rest of the
   community pages, with a warmer accent for a hopeful feel. Mobile-first,
   wider layouts from 640px and 960px.
   ========================================================================== */

/* Community impact (Street Paws landing page) ----------------------------- */
.ad-impact {
	margin: 0 0 var(--space-5);
	padding: var(--space-5) var(--space-4);
	background: linear-gradient(135deg, #fff7e8 0%, #f8ecd5 100%);
	border: 1px solid #ecdcb8;
	border-radius: var(--comm-radius-md);
}

.ad-impact__head h2 {
	margin: 0 0 var(--space-1);
	font-size: 1.5rem;
}

.ad-impact__lead {
	margin: 0 0 var(--space-4);
	color: var(--comm-text-muted);
}

.ad-impact__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-3);
	margin: 0 0 var(--space-4);
	padding: 0;
	list-style: none;
}

.ad-impact__metric {
	min-width: 0;
}

.ad-impact__link {
	display: grid;
	gap: var(--space-1);
	height: 100%;
	padding: var(--space-3) var(--space-4);
	background-color: rgba(255, 255, 255, 0.85);
	border: 1px solid #ecdcb8;
	border-radius: var(--comm-radius-md);
	color: var(--comm-text);
	text-decoration: none;
}

.ad-impact__link:hover,
.ad-impact__link:focus-visible {
	background-color: #fff;
	border-color: var(--color-accent);
}

.ad-impact__number {
	font-family: var(--font-secondary);
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1.1;
	color: #8a5a12;
}

.ad-impact__label {
	font-weight: 700;
}

.ad-impact__sub {
	color: var(--comm-text-muted);
	font-size: 0.8125rem;
	overflow-wrap: anywhere;
}

.ad-impact__total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--space-2) var(--space-4);
	margin-bottom: var(--space-3);
}

.ad-impact__total a {
	display: inline-flex;
	align-items: baseline;
	gap: var(--space-2);
	min-height: 44px;
	color: var(--comm-text);
	text-decoration: none;
}

.ad-impact__total-number {
	font-family: var(--font-secondary);
	font-size: 1.75rem;
	font-weight: 700;
	color: #8a5a12;
}

.ad-impact__total-label {
	font-weight: 700;
}

.ad-impact__total-sub {
	color: var(--comm-text-muted);
	font-size: 0.875rem;
}

.ad-impact__empty {
	margin: 0 0 var(--space-3);
	padding: var(--space-3);
	background-color: rgba(255, 255, 255, 0.7);
	border-radius: var(--comm-radius-sm);
	font-size: 0.9375rem;
}

.ad-impact__note {
	margin: 0;
	color: var(--comm-text-muted);
	font-size: 0.8125rem;
}

/* Entry point on the Street Paws page ------------------------------------ */
.ad-banner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--space-3) var(--space-4);
	margin: 0 0 var(--space-4);
	padding: var(--space-4);
	background-color: var(--comm-green);
	border-radius: var(--comm-radius-md);
	color: #fff;
	text-decoration: none;
}

.ad-banner:hover,
.ad-banner:focus-visible {
	background-color: var(--comm-green-dark);
	color: #fff;
}

.ad-banner__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-pill);
	background-color: rgba(255, 255, 255, 0.15);
}

.ad-banner__icon svg {
	width: 24px;
	height: 24px;
}

.ad-banner__body {
	display: grid;
	gap: var(--space-1);
	min-width: 0;
}

.ad-banner__title {
	font-family: var(--font-secondary);
	font-size: 1.25rem;
	font-weight: 700;
}

.ad-banner__text {
	font-size: 0.9375rem;
	opacity: 0.92;
}

.ad-banner__count {
	font-size: 0.875rem;
	font-weight: 700;
	color: #f6d98f;
}

.ad-banner__cta {
	grid-column: 1 / -1;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	font-weight: 700;
}

.ad-banner__cta svg {
	width: 16px;
	height: 16px;
}

/* The room --------------------------------------------------------------- */
.ad-room__back {
	margin: 0 0 var(--space-3);
}

.ad-room__back a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--comm-green);
	font-weight: 600;
}

.ad-room__intro {
	display: grid;
	gap: var(--space-3);
	margin: 0 0 var(--space-4);
	padding: var(--space-5) var(--space-4);
	background: linear-gradient(135deg, #fff7e8 0%, #f8ecd5 100%);
	border: 1px solid #ecdcb8;
	border-radius: var(--comm-radius-md);
}

.ad-room__intro h2 {
	margin: 0 0 var(--space-2);
	font-size: 1.5rem;
}

.ad-room__intro p {
	margin: 0;
}

.ad-room__filter-note {
	margin: 0 0 var(--space-4);
	color: var(--comm-text-muted);
	font-size: 0.9375rem;
}

.ad-room__filter-note a {
	margin-left: var(--space-2);
	color: var(--comm-green);
	font-weight: 600;
}

.ad-safeguards {
	margin: 0 0 var(--space-4);
	padding: var(--space-3) var(--space-4);
	background-color: #eaf1ee;
	border-left: 4px solid var(--comm-green-light);
	border-radius: var(--comm-radius-sm);
	font-size: 0.9375rem;
}

.ad-safeguards__title {
	margin: 0 0 var(--space-2);
	font-size: 1rem;
}

.ad-safeguards__list {
	margin: 0;
	padding-left: 1.1rem;
	overflow-wrap: anywhere;
}

.ad-safeguards__list li + li {
	margin-top: var(--space-1);
}

.ad-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0 0 var(--space-3);
}

.ad-tabs__link,
.ad-species__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	min-height: 44px;
	padding: 0 var(--space-4);
	border: 1px solid var(--comm-border);
	border-radius: var(--radius-pill);
	background-color: var(--comm-bg-card);
	color: var(--comm-text);
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
}

.ad-tabs__link:hover,
.ad-tabs__link:focus-visible,
.ad-species__link:hover,
.ad-species__link:focus-visible {
	border-color: var(--comm-green);
	color: var(--comm-green);
}

.ad-tabs__link.is-active,
.ad-species__link.is-active {
	background-color: var(--comm-green);
	border-color: var(--comm-green);
	color: #fff;
}

.ad-tabs__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	padding: 0 0.4rem;
	border-radius: var(--radius-pill);
	background-color: rgba(0, 0, 0, 0.08);
	font-size: 0.8125rem;
}

.ad-species {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0 0 var(--space-4);
}

.ad-species__link {
	min-height: 40px;
	font-size: 0.875rem;
}

.ad-empty a {
	margin-left: var(--space-2);
	color: var(--comm-green);
	font-weight: 600;
}

.ad-aside__steps {
	margin: 0 0 var(--space-4);
	padding-left: 1.2rem;
	font-size: 0.9375rem;
}

.ad-aside__steps li + li {
	margin-top: var(--space-2);
}

/* Share dialog ----------------------------------------------------------- */
.ad-composer .community-modal__dialog {
	max-width: 640px;
}

.ad-choice {
	margin: 0;
	padding: 0;
	border: none;
	min-width: 0;
}

.ad-choice legend {
	padding: 0;
	margin-bottom: var(--space-2);
}

.ad-choice__options {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2);
}

.ad-choice__option {
	position: relative;
	display: block;
}

.ad-choice__option input {
	position: absolute;
	opacity: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	cursor: pointer;
}

.ad-choice__face {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 var(--space-3);
	border: 1px solid var(--comm-border);
	border-radius: var(--comm-radius-sm);
	background-color: var(--comm-bg-card);
	color: var(--comm-text);
	font-weight: 600;
	text-align: center;
}

.ad-choice__option input:checked + .ad-choice__face {
	background-color: #fbf0d9;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 2px var(--color-accent);
	color: #7a5510;
}

.ad-choice__option input:focus-visible + .ad-choice__face {
	outline: 3px solid var(--color-accent);
	outline-offset: 2px;
}

.ad-ack {
	display: flex;
	align-items: flex-start;
	gap: var(--space-3);
	font-size: 0.875rem;
}

.ad-ack input {
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-top: 2px;
}

.ad-previews {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-2);
	max-width: none;
	background: none;
}

.ad-previews__item {
	border-radius: var(--comm-radius-sm);
	overflow: hidden;
	background-color: #f1ece0;
	aspect-ratio: 1;
}

.ad-previews__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Status pill, details and photos on cards and the post page ---------------- */
.community-feed-post--ad {
	border-left-color: #d9a441;
}

.ad-status {
	--ad-bg: #fbf0d9;
	--ad-ink: #7a5510;
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-2);
	padding: 0.25rem 0.75rem;
	border-radius: var(--radius-pill);
	background-color: var(--ad-bg);
	color: var(--ad-ink);
	font-size: 0.8125rem;
	font-weight: 700;
}

.ad-status--progress {
	--ad-bg: #dfeaf4;
	--ad-ink: #1f4a73;
}

.ad-status--adopted {
	--ad-bg: #dff0e4;
	--ad-ink: #1f5a3a;
}

.ad-status--fostered {
	--ad-bg: #ece3f4;
	--ad-ink: #5a3c80;
}

.ad-status__review {
	font-weight: 600;
	font-size: 0.75rem;
	opacity: 0.9;
}

.ad-status__review::before {
	content: "·";
	margin-right: var(--space-2);
}

.ad-card-meta {
	display: grid;
	justify-items: start;
	gap: var(--space-2);
	margin: 0 0 var(--space-3);
}

.ad-card-meta__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-4);
	margin: 0;
	font-size: 0.875rem;
}

.ad-card-meta__facts div {
	display: flex;
	gap: var(--space-1);
	min-width: 0;
}

.ad-card-meta__facts dt {
	color: var(--comm-text-muted);
}

.ad-card-meta__facts dt::after {
	content: ":";
}

.ad-card-meta__facts dd {
	margin: 0;
	font-weight: 600;
	overflow-wrap: anywhere;
}

.ad-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--space-2);
	margin-bottom: var(--space-3);
}

.ad-gallery--1 {
	grid-template-columns: minmax(0, 1fr);
}

.ad-gallery__item {
	border-radius: var(--comm-radius-sm);
	overflow: hidden;
	background-color: #f1ece0;
}

.ad-gallery__image {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.sp-post--listing .sp-post__top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-3);
}

.ad-care {
	margin: 0 0 var(--space-4);
	padding: var(--space-3) var(--space-4);
	background-color: #fff7e8;
	border-radius: var(--comm-radius-sm);
}

.ad-care__title {
	margin: 0 0 var(--space-2);
	font-size: 1rem;
}

.ad-care .sp-post__body p:last-child {
	margin-bottom: 0;
}

.ad-outcome-note {
	display: grid;
	gap: var(--space-1);
	margin: 0 0 var(--space-4);
	padding: var(--space-3) var(--space-4);
	background-color: #eaf5ee;
	border-radius: var(--comm-radius-sm);
	overflow-wrap: anywhere;
}

.ad-reply-guidance {
	margin: 0 0 var(--space-4);
	font-size: 0.9375rem;
	overflow-wrap: anywhere;
}

/* Managing a listing ----------------------------------------------------- */
.ad-btn-outline {
	min-height: 44px;
	padding: 0 var(--space-4);
	background-color: transparent;
	border: 1px solid var(--comm-green);
	border-radius: var(--radius-pill);
	color: var(--comm-green);
	font-weight: 700;
	cursor: pointer;
}

.ad-btn-outline:hover,
.ad-btn-outline:focus-visible {
	background-color: #eaf1ee;
}

.ad-manage {
	margin: 0 0 var(--space-5);
	padding: var(--space-4);
	background-color: var(--comm-bg-card);
	border: 1px solid var(--comm-border);
	border-radius: var(--comm-radius-md);
	scroll-margin-top: 7.5rem;
}

.ad-manage h2 {
	margin: 0 0 var(--space-3);
	font-size: 1.125rem;
}

.ad-manage__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: 0 0 var(--space-3);
}

.ad-manage__form {
	display: grid;
	gap: var(--space-3);
}

.ad-manage__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.ad-manage__buttons .btn,
.ad-manage__outcome .btn {
	min-height: 44px;
}

.ad-manage__help {
	margin: 0;
	color: var(--comm-text-muted);
	font-size: 0.9375rem;
}

.ad-manage__outcome {
	padding: var(--space-3);
	border: 1px solid var(--comm-border);
	border-radius: var(--comm-radius-sm);
}

.ad-manage__outcome summary {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-weight: 700;
	cursor: pointer;
}

.ad-manage__outcome[open] summary {
	margin-bottom: var(--space-3);
}

.ad-manage__outcome > * + * {
	margin-top: var(--space-3);
}

.ad-manage__outcome textarea {
	width: 100%;
	border: 1px solid var(--comm-border);
	border-radius: var(--comm-radius-sm);
	padding: var(--space-3);
	font-family: var(--font-primary);
	font-size: 1rem;
}

.ad-manage__mod {
	padding-top: var(--space-3);
	border-top: 1px dashed var(--comm-border);
}

@media (min-width: 640px) {
	.ad-impact {
		padding: var(--space-5);
	}

	.ad-impact__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.ad-banner {
		grid-template-columns: auto minmax(0, 1fr) auto;
	}

	.ad-banner__cta {
		grid-column: auto;
	}

	.ad-room__intro {
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
	}

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