/* ==========================================================================
   Global site chrome: hamburger trigger, full-screen overlay nav, cart icon.
   Replaces the parent theme's default header/nav site-wide (hidden in style.css).
   ========================================================================== */

.artist-hamburger {
	position: fixed;
	top: 2rem;
	left: 2rem;
	z-index: 1000;
	display: flex;
	flex-direction: column;
	gap: 6px;
	cursor: pointer;
	padding: 10px 8px;
	background: rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(8px);
	border-radius: 40px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	transition: background-color 0.3s ease;
}

.artist-hamburger:hover {
	background: rgba(255, 255, 255, 0.12);
}

.artist-hamburger span {
	display: block;
	width: 28px;
	height: 2px;
	background: #fff;
	border-radius: 4px;
	opacity: 0.95;
}

.artist-hamburger span:nth-child(2) {
	width: 20px;
}

/* ==========================================================================
   Permanent desktop nav bar — replaces the hamburger trigger above the
   desktop breakpoint (hamburger + overlay remain for smaller screens).
   ========================================================================== */
.artist-desktop-nav {
	display: none;
}

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

	.artist-desktop-nav {
		/* A solid, always-dark bar (not a translucent/blurred one) — this is
		   deliberate, not just a look: on light-background pages a
		   near-transparent bar all but disappears, leaving white text
		   unreadable against the page behind it. Solid color fixes contrast
		   on every page and removes the frosted-glass "gloss" look. */
		position: fixed;
		top: 1.5rem;
		left: 1.5rem;
		right: 1.5rem;
		z-index: 1000;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
		padding: 1.1rem 2rem;
		background: var(--artist-color-ink);
		border-radius: 10px;
	}

	.artist-desktop-nav__brand,
	.artist-desktop-nav__brand:hover,
	.artist-desktop-nav__brand:focus {
		color: #fff !important;
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 0.18em;
		font-size: 1rem;
		font-weight: 300;
		white-space: nowrap;
	}

	.artist-desktop-nav__links {
		display: flex;
		align-items: center;
		gap: 2.25rem;
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.artist-desktop-nav__links a {
		color: rgba(255, 255, 255, 0.85);
		text-decoration: none;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		font-size: 0.8rem;
		font-weight: 400;
		white-space: nowrap;
		transition: opacity 0.2s ease;
	}

	.artist-desktop-nav__links a:hover,
	.artist-desktop-nav__links a:focus {
		color: #fff !important;
		opacity: 0.65;
	}
}

/* Cart icon, mirrored top-right (the template has no e-commerce, but a
   store can't hide the cart entirely). */
.artist-cart-icon {
	position: fixed;
	top: 2rem;
	right: 2rem;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(8px);
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.12);
	color: #fff;
	text-decoration: none;
	font-size: 1.05rem;
	transition: background-color 0.3s ease;
}

.artist-cart-icon:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

@media (min-width: 1024px) {
	/* Folded into .artist-desktop-nav instead, so it can't collide with it. */
	.artist-cart-icon {
		display: none;
	}

	/* Higher specificity than .artist-desktop-nav__links a (which otherwise
	   wins the cascade and shrinks the icon to the nav links' small text
	   size — 12.8px is basically imperceptible, which is why the cart icon
	   was effectively invisible, leaving only its count badge visible). */
	.artist-desktop-nav__links .artist-desktop-nav__cart {
		position: relative;
		display: flex;
		align-items: center;
		color: rgba(255, 255, 255, 0.85) !important;
		text-decoration: none;
		font-size: 1.15rem !important;
	}

	.artist-desktop-nav__links .artist-desktop-nav__cart:hover {
		color: #fff !important;
		opacity: 1;
	}
}

.artist-cart-icon__count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	background: var(--artist-color-ink);
	color: #fff;
	font-size: 0.65rem;
	line-height: 18px;
	text-align: center;
}

/* Once we're off a dark hero (i.e. everywhere except the Home slider), the
   hamburger/cart need a dark-on-light look instead of white-on-dark. */
body:not(.home) .artist-hamburger,
body:not(.home) .artist-cart-icon {
	background: rgba(255, 255, 255, 0.85);
	border-color: var(--artist-color-border);
}

body:not(.home) .artist-hamburger span {
	background: var(--artist-color-ink);
}

body:not(.home) .artist-cart-icon {
	color: var(--artist-color-ink);
}

/* ----- full-screen nav overlay ----- */
.artist-nav-overlay {
	position: fixed;
	inset: 0;
	background: rgba(10, 10, 10, 0.95);
	backdrop-filter: blur(12px);
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.artist-nav-overlay.is-active {
	opacity: 1;
	pointer-events: all;
}

.artist-nav-overlay__close {
	position: absolute;
	top: 2rem;
	right: 2rem;
	color: #fff;
	font-size: 2.2rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0.6;
	background: none;
	border: none;
	transition: 0.2s;
}

.artist-nav-overlay__close:hover {
	opacity: 1;
	transform: rotate(90deg);
}

.artist-nav-links {
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
	text-align: center;
}

.artist-nav-links a {
	color: #fff;
	text-decoration: none;
	font-size: 1.6rem;
	font-weight: 300;
	letter-spacing: 6px;
	text-transform: uppercase;
	opacity: 0.6;
	transition: 0.2s;
}

.artist-nav-links a:hover,
.artist-nav-links a.is-current {
	opacity: 1;
	letter-spacing: 10px;
}

.artist-nav-links a i {
	margin-right: 0.8rem;
	font-size: 1.1rem;
	opacity: 0.4;
}

@media (max-width: 640px) {
	.artist-hamburger,
	.artist-cart-icon {
		top: 1.2rem;
	}
	.artist-hamburger {
		left: 1.2rem;
	}
	.artist-cart-icon {
		right: 1.2rem;
	}
	.artist-nav-links a {
		font-size: 1.2rem;
		letter-spacing: 4px;
	}
}

/* ==========================================================================
   Global clearance below the fixed nav (hamburger on mobile, the floating
   bar on desktop) — applied once, site-wide, to whatever wraps page
   content on every template (the parent theme's own .content-area), rather than
   only to our custom `.artist-page-content` pages. That per-page approach
   missed WooCommerce's own default templates (single product, cart,
   checkout, my-account) and any other template we haven't overridden,
   which is why product pages were rendering underneath the nav bar.
   ========================================================================== */
body:not(.home) .content-area {
	padding-top: 8rem;
}

@media (max-width: 768px) {
	body:not(.home) .content-area {
		padding-top: 6rem;
	}
}

/* ==========================================================================
   Page content wrapper (About / Blog / Reviews / FAQ / Contact) — width and
   internal spacing only now; top clearance comes from .content-area above.
   ========================================================================== */
.artist-page-content {
	padding: 0 2rem 4rem;
	max-width: 1100px;
	margin: 0 auto;
}

.artist-page-header {
	margin: 0 auto 3rem;
	border-bottom: 1px solid var(--artist-color-border);
	padding-bottom: 1.5rem;
}

.artist-page-header h1 {
	font-size: 2.4rem;
	font-weight: 300;
	letter-spacing: 5px;
	text-transform: uppercase;
	margin: 0;
}

.artist-page-header h1 strong {
	font-weight: 600;
}

.artist-page-header .artist-page-subtitle {
	font-size: 0.95rem;
	color: var(--artist-color-muted);
	letter-spacing: 1px;
	margin-top: 0.5rem;
}

/* ==========================================================================
   About page (image + text + signature + socials)
   ========================================================================== */
.artist-about-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4rem;
	align-items: center;
}

.artist-about-grid img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 8px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
	display: block;
}

.artist-about-text h3 {
	font-size: 1.7rem;
	font-weight: 300;
	letter-spacing: 1px;
	margin: 0 0 1.5rem;
}

.artist-about-text p {
	font-size: 1rem;
	line-height: 1.8;
	color: var(--artist-color-muted);
	margin: 0 0 1.2rem;
}

.artist-signature {
	font-size: 1.1rem;
	font-weight: 300;
	letter-spacing: 3px;
	margin-top: 2rem;
	color: var(--artist-color-ink);
	border-top: 1px solid var(--artist-color-border);
	padding-top: 1.5rem;
}

.artist-social-icons {
	display: flex;
	gap: 1.2rem;
	margin-top: 1.5rem;
}

.artist-social-icons a {
	color: var(--artist-color-ink);
	font-size: 1.3rem;
	opacity: 0.55;
	transition: 0.2s;
}

.artist-social-icons a:hover {
	opacity: 1;
	transform: translateY(-2px);
}

/* ==========================================================================
   Gallery (WooCommerce shop, restyled — see woocommerce/ overrides)
   ========================================================================== */
.artist-gallery-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem 1.5rem;
	max-width: 1200px;
	margin: 0 auto 2.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid var(--artist-color-border);
}

.artist-gallery-filters button {
	background: transparent;
	border: none;
	padding: 0.4rem 0.2rem;
	font-family: inherit;
	font-size: 0.75rem;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--artist-color-muted);
	cursor: pointer;
	border-bottom: 2px solid transparent;
}

/* The text color rule alone wasn't the issue — the parent theme's own button
   focus/hover styling also fills in a background color (its accent blue),
   which was showing through since these text-only tabs never had their
   own background/outline override. Reset all of it explicitly. */
.woocommerce .artist-gallery-filters button:hover,
.woocommerce .artist-gallery-filters button:focus,
.woocommerce .artist-gallery-filters button:focus-visible,
.woocommerce .artist-gallery-filters button:active {
	color: var(--artist-color-ink) !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
}

.woocommerce .artist-gallery-filters button:focus-visible {
	outline: 1px solid var(--artist-color-ink) !important;
	outline-offset: 3px;
}

.woocommerce .artist-gallery-filters button.is-active {
	color: var(--artist-color-ink) !important;
	background: transparent !important;
	border-bottom-color: var(--artist-color-ink);
	font-weight: 600;
}

.woocommerce ul.products.artist-gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 2rem;
	max-width: 1200px;
	margin: 0 auto;
}

.woocommerce ul.products.artist-gallery-grid li.product {
	background: var(--artist-color-surface);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
	border: 1px solid var(--artist-color-border);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce ul.products.artist-gallery-grid li.product:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

/* Shop-loop pagination (Page 1 / 2 / Next) — was rendering with the parent theme's
   default link-highlight blue, never styled for our palette. */
.woocommerce nav.woocommerce-pagination {
	margin-top: 2.5rem;
	text-align: center;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li {
	list-style: none;
}

.woocommerce nav.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.5rem;
	border: 1px solid var(--artist-color-border);
	border-radius: 3px;
	color: var(--artist-color-ink) !important;
	background: transparent !important;
	text-decoration: none;
	font-size: 0.85rem;
}

.woocommerce nav.woocommerce-pagination .page-numbers:hover,
.woocommerce nav.woocommerce-pagination .page-numbers.current {
	color: #fff !important;
	background: var(--artist-color-ink) !important;
	border-color: var(--artist-color-ink);
}

.artist-gallery-image {
	/* `aspect-ratio` has no effect on inline elements — <a> defaults to
	   inline, which is why cards weren't sizing equally: without a display
	   change here, the anchor just wrapped tightly around each image's own
	   natural (varying) aspect ratio instead of enforcing a square crop. */
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.artist-gallery-image img {
	/* !important because the parent theme's own responsive-image reset (img{height:auto})
	   otherwise wins the cascade and lets each image keep its own natural
	   aspect ratio inside the (correctly square) container — the images
	   inside the cards weren't actually filling them despite the container
	   itself being sized correctly. */
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover !important;
}

.artist-gallery-badge {
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	padding: 0.25rem 0.9rem;
	font-size: 0.55rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	border-radius: 20px;
}

.artist-gallery-info {
	padding: 1.2rem 1.2rem 1.5rem;
}

.artist-gallery-info .artist-gallery-title {
	font-size: 1rem;
	font-weight: 500;
	margin: 0 0 0.3rem;
}

.artist-gallery-info .artist-gallery-title a {
	color: inherit;
	text-decoration: none;
}

.artist-gallery-info .price {
	font-size: 0.85rem;
	color: var(--artist-color-muted);
}

.artist-gallery-cart {
	margin-top: 1.25rem;
}

.artist-gallery-cart a.button {
	/* !important: the parent theme's own button rules were stripping horizontal
	   padding to 0 and forcing font-weight 700 despite this being a more
	   specific selector — same cascade issue as elsewhere in this theme. */
	display: inline-block;
	width: 100% !important;
	white-space: normal !important;
	box-sizing: border-box;
	text-align: center;
	padding: 0.8rem 1.25rem !important;
	margin: 0;
	background: var(--artist-color-ink);
	color: #fff;
	text-decoration: none;
	font-size: 0.75rem;
	font-weight: 400 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 3px;
	transition: background-color 0.2s ease;
}

.artist-gallery-cart a.button:hover {
	background: var(--artist-color-ink);
	filter: brightness(1.2);
}

.artist-gallery-cart a.button.loading {
	opacity: 0.6;
	pointer-events: none;
}

/* ==========================================================================
   Blog (home.php card grid)
   ========================================================================== */
.artist-blog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 2.5rem;
	max-width: 1100px;
	margin: 0 auto;
}

.artist-blog-card {
	background: var(--artist-color-surface);
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
	border: 1px solid var(--artist-color-border);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.artist-blog-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.artist-blog-card img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

.artist-blog-card__content {
	padding: 1.5rem;
}

.artist-blog-card__meta {
	font-size: 0.7rem;
	color: var(--artist-color-muted);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

.artist-blog-card h2,
.artist-blog-card h3 {
	font-size: 1.2rem;
	font-weight: 500;
	margin: 0 0 0.8rem;
	line-height: 1.3;
}

.artist-blog-card p {
	font-size: 0.9rem;
	color: var(--artist-color-muted);
	line-height: 1.6;
	margin: 0 0 1rem;
}

.artist-blog-card .artist-read-more {
	color: var(--artist-color-ink);
	text-decoration: none;
	font-size: 0.75rem;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-weight: 500;
	border-bottom: 1px solid var(--artist-color-ink);
	padding-bottom: 2px;
}

/* ==========================================================================
   Reviews / testimonials
   ========================================================================== */
.artist-reviews-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	max-width: 900px;
	margin: 0 auto;
}

.artist-review-card {
	background: var(--artist-color-surface);
	padding: 2rem;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
	border: 1px solid var(--artist-color-border);
}

.artist-review-card .artist-review-stars {
	color: #d99a2b;
	font-size: 1rem;
	margin-bottom: 0.8rem;
	letter-spacing: 2px;
}

.artist-review-card blockquote {
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--artist-color-ink);
	font-style: italic;
	margin: 0 0 1rem;
}

.artist-review-card .artist-reviewer {
	font-weight: 500;
	font-size: 0.9rem;
}

.artist-review-card .artist-reviewer-role {
	font-size: 0.75rem;
	color: var(--artist-color-muted);
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.artist-faq-list {
	max-width: 800px;
	margin: 0 auto;
}

.artist-faq-item {
	background: var(--artist-color-surface);
	border-radius: 8px;
	margin-bottom: 1rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	border: 1px solid var(--artist-color-border);
	overflow: hidden;
}

.artist-faq-question {
	padding: 1.2rem 1.5rem;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-weight: 500;
	font-size: 1rem;
	background: none;
	border: none;
	width: 100%;
	text-align: left;
	font-family: inherit;
	color: inherit;
}

.artist-faq-question i {
	transition: transform 0.3s ease;
	color: var(--artist-color-muted);
}

.artist-faq-item.is-active .artist-faq-question i {
	transform: rotate(180deg);
}

.artist-faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease, padding 0.3s ease;
	padding: 0 1.5rem;
	color: var(--artist-color-muted);
	line-height: 1.7;
	font-size: 0.95rem;
}

.artist-faq-item.is-active .artist-faq-answer {
	max-height: 400px;
	padding: 0 1.5rem 1.5rem;
}

/* ==========================================================================
   Contact (two-column: info + form)
   ========================================================================== */
.artist-contact-grid {
	display: grid;
	grid-template-columns: 1fr 1.5fr;
	gap: 4rem;
	max-width: 1100px;
	margin: 0 auto;
}

.artist-contact-info h3 {
	font-size: 1.5rem;
	font-weight: 300;
	letter-spacing: 1px;
	margin: 0 0 1.5rem;
}

.artist-contact-info p {
	color: var(--artist-color-muted);
	line-height: 1.8;
	margin: 0 0 2rem;
}

.artist-contact-detail {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.2rem;
}

.artist-contact-detail i {
	width: 2rem;
	font-size: 1.1rem;
	opacity: 0.6;
}

.artist-contact-form-wrap {
	background: var(--artist-color-surface);
	padding: 2.5rem;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
	border: 1px solid var(--artist-color-border);
}

@media (max-width: 768px) {
	.artist-about-grid,
	.artist-contact-grid,
	.artist-reviews-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.artist-page-content {
		padding: 0 1.2rem 2rem;
	}
	.artist-page-header h1 {
		font-size: 1.8rem;
	}
}

/* ==========================================================================
   Enquiry mode: "Want to Buy?" button and popup
   ========================================================================== */
.artist-enquiry {
	margin: 1.5rem 0;
}

.artist-enquiry__toggle {
	display: inline-block;
	text-align: center;
}

body.artist-modal-open {
	overflow: hidden;
}

.artist-modal {
	width: min(32rem, calc(100% - 2rem));
	max-height: calc(100vh - 2rem);
	max-height: calc(100dvh - 2rem);
	padding: 0;
	overflow: auto;
	border: 0;
	border-radius: 12px;
	background: var(--artist-color-surface);
	color: var(--artist-color-ink);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.artist-modal::backdrop {
	background: rgba(20, 18, 16, 0.6);
}

.artist-modal__inner {
	position: relative;
	padding: 2rem 1.75rem 1.75rem;
}

.artist-modal__title {
	margin: 0 2.5rem 0.25rem 0;
	font-size: 1.35rem;
	font-weight: 400;
	line-height: 1.3;
}

.artist-modal__painting {
	margin: 0 0 1rem;
	color: var(--artist-color-muted);
}

.artist-modal__close {
	position: absolute;
	top: 0.5rem;
	right: 0.6rem;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--artist-color-ink) !important;
	font-size: 1.9rem !important;
	line-height: 1 !important;
	cursor: pointer;
}

.artist-modal__body[hidden],
.artist-modal__status[hidden] {
	display: none;
}

.artist-modal__status {
	margin: 0 0 1rem;
	padding: 0.85rem 1rem;
	border-radius: 3px;
	font-size: 0.95rem;
	line-height: 1.5;
}

.artist-modal__status--ok {
	background: #eef4ee;
}

.artist-modal__status--error {
	background: #f7ecea;
}

.artist-enquiry__form label {
	display: block;
	font-size: 0.85rem;
	color: var(--artist-color-muted);
}

.artist-enquiry__form input[type="text"],
.artist-enquiry__form input[type="email"],
.artist-enquiry__form input[type="tel"],
.artist-enquiry__form textarea {
	width: 100%;
	margin-top: 0.3rem;
	padding: 0.7rem 0.8rem;
	border: 1px solid var(--artist-color-border);
	border-radius: 3px;
	background: #fff;
	color: var(--artist-color-ink);
	font: inherit;
	font-size: 16px; /* 16px stops iPhones zooming the page when a field is focused */
}

.artist-enquiry__hp {
	position: absolute !important;
	left: -9999px !important;
	height: 0;
	overflow: hidden;
}

@media (max-width: 600px) {
	/* On phones the popup becomes a sheet that rises from the bottom edge. */
	.artist-modal {
		width: 100%;
		max-width: 100%;
		margin: auto 0 0;
		max-height: 92vh;
		max-height: 92dvh;
		border-radius: 14px 14px 0 0;
	}
	.artist-modal__inner {
		padding: 1.6rem 1.25rem 1.25rem;
	}
}

/* ==========================================================================
   Commissions page
   ========================================================================== */
.artist-cm {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 2rem 4rem;
}

.artist-cm-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 28rem;
	overflow: hidden;
	border-radius: 14px;
	background-color: var(--artist-color-ink);
	background-position: center;
	background-size: cover;
	color: #fff;
}

.artist-cm-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(10, 9, 8, 0.82) 0%, rgba(10, 9, 8, 0.35) 55%, rgba(10, 9, 8, 0.15) 100%);
}

.artist-cm-hero__inner {
	position: relative;
	max-width: 38rem;
	padding: 3rem;
}

.artist-cm-eyebrow {
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	opacity: 0.85;
}

.artist-cm-hero h1 {
	margin: 0 0 1rem;
	color: #fff !important;
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: 300;
	line-height: 1.15;
}

.artist-cm-hero .artist-cm-lead {
	margin: 0 0 1.75rem;
	color: rgba(255, 255, 255, 0.92);
	font-size: 1.1rem;
	line-height: 1.6;
}

.artist-cm-section {
	margin-top: 4rem;
}

.artist-cm-section h2,
.artist-cm-cta h2 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 300;
	letter-spacing: 0.02em;
}

.artist-cm-intro {
	max-width: 40rem;
	margin: 0 0 2rem;
	color: var(--artist-color-muted);
}

.artist-cm-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: cm;
}

.artist-cm-steps li {
	counter-increment: cm;
	padding: 1.5rem 1.25rem;
	border: 1px solid var(--artist-color-border);
	border-radius: 12px;
	background: var(--artist-color-surface);
}

.artist-cm-steps li::before {
	content: counter(cm);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: var(--artist-color-ink);
	color: #fff;
	font-size: 0.9rem;
}

.artist-cm-steps h3 {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
	font-weight: 500;
}

.artist-cm-steps p {
	margin: 0;
	color: var(--artist-color-muted);
	font-size: 0.95rem;
	line-height: 1.6;
}

.artist-cm-brief {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 2.5rem;
	align-items: start;
}

.artist-cm-checklist {
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--artist-color-border);
	list-style: none;
}

.artist-cm-checklist li {
	display: flex;
	gap: 0.9rem;
	padding: 0.95rem 0;
	border-bottom: 1px solid var(--artist-color-border);
	line-height: 1.5;
}

.artist-cm-checklist i {
	margin-top: 0.2rem;
	opacity: 0.55;
}

.artist-cm-note {
	padding: 1.75rem;
	border: 1px solid var(--artist-color-border);
	border-radius: 12px;
	background: var(--artist-color-surface);
}

.artist-cm-note h3 {
	margin: 0 0 0.75rem;
	font-size: 1.1rem;
	font-weight: 500;
}

.artist-cm-note p {
	margin: 0 0 0.75rem;
	color: var(--artist-color-muted);
	line-height: 1.65;
}

.artist-cm-note p:last-child {
	margin-bottom: 0;
}

.artist-cm-cta {
	margin-top: 4rem;
	padding: 3rem 2rem;
	border-radius: 14px;
	background: var(--artist-color-ink);
	color: #fff;
	text-align: center;
}

.artist-cm-cta h2 {
	color: #fff !important;
}

.artist-cm-cta p {
	max-width: 34rem;
	margin: 0 auto 1.5rem;
	color: rgba(255, 255, 255, 0.85);
}

/* ==========================================================================
   Teaching page
   ========================================================================== */
.artist-tc {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 2rem 4rem;
}

.artist-tc-intro {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: 3.5rem;
	align-items: center;
}

.artist-tc-eyebrow {
	margin: 0 0 0.75rem;
	color: var(--artist-color-muted);
	font-size: 0.75rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.artist-tc-intro h1 {
	margin: 0 0 1.25rem;
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: 300;
	line-height: 1.15;
}

.artist-tc-lead {
	margin: 0 0 1.75rem;
	color: var(--artist-color-muted);
	font-size: 1.1rem;
	line-height: 1.7;
}

.artist-tc-figure {
	margin: 0;
}

.artist-tc-figure img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 14px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.artist-tc-body {
	display: grid;
	grid-template-columns: 1.6fr 1fr;
	gap: 3rem;
	margin-top: 4.5rem;
	align-items: start;
}

.artist-tc-body h2 {
	margin: 0 0 1.75rem;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 300;
	letter-spacing: 0.02em;
}

.artist-tc-steps {
	position: relative;
	margin: 0;
	padding: 0 0 0 2.9rem;
	list-style: none;
	counter-reset: tc;
}

.artist-tc-steps::before {
	content: "";
	position: absolute;
	top: 0.8rem;
	bottom: 0.8rem;
	left: 0.8rem;
	width: 1px;
	background: var(--artist-color-border);
}

.artist-tc-steps li {
	position: relative;
	counter-increment: tc;
	padding-bottom: 2.25rem;
}

.artist-tc-steps li:last-child {
	padding-bottom: 0;
}

.artist-tc-steps li::before {
	content: counter(tc);
	position: absolute;
	top: 0;
	left: -2.9rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background: var(--artist-color-ink);
	color: #fff;
	font-size: 0.75rem;
}

.artist-tc-steps h3 {
	margin: 0 0 0.35rem;
	font-size: 1.1rem;
	font-weight: 500;
}

.artist-tc-steps p {
	margin: 0;
	color: var(--artist-color-muted);
	line-height: 1.65;
}

.artist-tc-aside {
	position: sticky;
	top: 7rem;
	padding: 1.75rem;
	border: 1px solid var(--artist-color-border);
	border-radius: 12px;
	background: var(--artist-color-surface);
}

.artist-tc-aside h3 {
	margin: 0 0 0.75rem;
	font-size: 1.1rem;
	font-weight: 500;
}

.artist-tc-aside p {
	margin: 0 0 1.25rem;
	color: var(--artist-color-muted);
	line-height: 1.65;
}

@media (max-width: 900px) {
	.artist-cm-steps {
		grid-template-columns: repeat(2, 1fr);
	}
	.artist-cm-brief,
	.artist-tc-intro,
	.artist-tc-body {
		grid-template-columns: 1fr;
	}
	.artist-tc-intro {
		gap: 2rem;
	}
	.artist-tc-figure img {
		aspect-ratio: 16 / 10;
	}
	.artist-tc-aside {
		position: static;
	}
}

@media (max-width: 600px) {
	.artist-cm,
	.artist-tc {
		padding: 0 1.2rem 3rem;
	}
	.artist-cm-hero {
		min-height: 24rem;
	}
	.artist-cm-hero__inner {
		padding: 2rem 1.5rem;
	}
	.artist-cm-steps {
		grid-template-columns: 1fr;
	}
	.artist-cm-section,
	.artist-cm-cta {
		margin-top: 3rem;
	}
	.artist-tc-body {
		margin-top: 3rem;
	}
}

/* The parent theme pads every ol/ul inside content; these lists manage their own spacing. */
.artist-cm ol.artist-cm-steps,
.artist-cm ul.artist-cm-checklist {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.artist-tc ol.artist-tc-steps {
	margin: 0 !important;
	padding: 0 0 0 2.9rem !important;
	list-style: none !important;
}

.artist-cm-hero .artist-cm-lead,
.artist-tc-lead {
	font-weight: 300;
}

.artist-tc-intro h1,
.artist-cm-hero h1 {
	margin-top: 0 !important;
}

/* ==========================================================================
   About page (artist profile)
   ========================================================================== */
.artist-ab {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 2rem 4rem;
}

.artist-ab-intro {
	display: grid;
	grid-template-columns: 0.9fr 1.1fr;
	gap: 3.5rem;
	align-items: center;
}

.artist-ab-portrait {
	margin: 0;
}

.artist-ab-portrait img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 14px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

.artist-ab-eyebrow {
	margin: 0 0 0.75rem;
	color: var(--artist-color-muted);
	font-size: 0.75rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.artist-ab-intro h1 {
	margin: 0 0 0.5rem !important;
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: 300;
	line-height: 1.15;
}

.artist-ab-sub {
	margin: 0 0 1.25rem;
	color: var(--artist-color-muted);
	font-size: 0.8rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.artist-ab-meta {
	margin: -0.5rem 0 1.25rem;
	color: var(--artist-color-muted);
	font-size: 0.9rem;
}

.artist-ab-bio p {
	margin: 0 0 1rem;
	color: var(--artist-color-muted);
	font-size: 1.05rem;
	font-weight: 300;
	line-height: 1.75;
}

/* Every button on this page is the same size and shape: filled for the main action, outline for the second. */
.artist-ab-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1.75rem;
}

.artist-ab .wp-block-button {
	display: inline-block;
	margin: 0;
}

.artist-ab .wp-block-button__link {
	display: inline-block;
	min-width: 10.5rem;
	text-align: center;
}

.artist-ab-intro .artist-social-icons {
	margin-top: 1.5rem;
}

.artist-ab-expect {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
	margin-top: 4rem;
}

.artist-ab-expect__item {
	padding: 1.5rem 1.25rem;
	border: 1px solid var(--artist-color-border);
	border-radius: 12px;
	background: var(--artist-color-surface);
}

.artist-ab-expect__item i {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: var(--artist-color-ink);
	color: #fff;
	font-size: 0.95rem;
}

.artist-ab-expect__item h3 {
	margin: 0 0 0.4rem;
	font-size: 1.05rem;
	font-weight: 500;
}

.artist-ab-expect__item p {
	margin: 0;
	color: var(--artist-color-muted);
	font-size: 0.92rem;
	line-height: 1.6;
}

.artist-ab-section {
	margin-top: 4rem;
}

.artist-ab-section h2 {
	margin: 0 0 1.5rem;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 300;
	letter-spacing: 0.02em;
}

.artist-ab-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1.5rem;
	margin-bottom: 1.5rem;
}

.artist-ab-section__head h2 {
	margin: 0;
}

.artist-ab-section__note {
	margin: 0;
	color: var(--artist-color-muted);
	font-size: 0.9rem;
}

.artist-ab-statement {
	margin: 0;
	padding: 0.25rem 0 0.25rem 1.75rem;
	border-left: 2px solid var(--artist-color-ink);
	font-style: normal;
}

.artist-ab-statement p {
	margin: 0 0 0.75rem !important;
	font-family: var(--wp--preset--font-family--display, serif);
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
	font-weight: 400;
	line-height: 1.6;
}

/* Small tiles: four across, titles underneath. */
.artist-ab ul.artist-ab-works {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.artist-ab-works li {
	margin: 0;
}

.artist-ab-works a {
	display: block;
	text-decoration: none;
}

.artist-ab-works img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.artist-ab-works a:hover img,
.artist-ab-works a:focus img {
	transform: translateY(-3px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.artist-ab-works__title {
	display: block;
	margin-top: 0.6rem;
	color: var(--artist-color-ink);
	font-size: 0.9rem;
	line-height: 1.35;
}

.artist-ab-more {
	margin-top: 1.75rem;
	text-align: center;
}

.artist-ab-background {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
}

.artist-ab-background--single {
	grid-template-columns: 1fr;
	max-width: 40rem;
}

.artist-ab-background h3 {
	margin: 0 0 0.75rem;
	color: var(--artist-color-muted);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.artist-ab ul.artist-ab-list {
	margin: 0 !important;
	padding: 0 !important;
	border-top: 1px solid var(--artist-color-border);
	list-style: none !important;
}

.artist-ab-list li {
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--artist-color-border);
	line-height: 1.5;
}

.artist-ab-next {
	text-align: center;
}

.artist-ab-next h2 {
	margin-bottom: 0.5rem;
}

.artist-ab-next__intro {
	margin: 0 0 2rem;
	color: var(--artist-color-muted);
}

.artist-ab-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
	text-align: left;
}

.artist-ab-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 1.75rem 1.5rem;
	border: 1px solid var(--artist-color-border);
	border-radius: 12px;
	background: var(--artist-color-surface);
}

.artist-ab-card h3 {
	margin: 0 0 0.5rem;
	font-size: 1.15rem;
	font-weight: 500;
}

.artist-ab-card p {
	flex: 1;
	margin: 0 0 1.5rem;
	color: var(--artist-color-muted);
	line-height: 1.6;
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.artist-ct {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 2rem 4rem;
}

.artist-ct-intro {
	max-width: 42rem;
	margin: 0 auto 3.5rem;
	text-align: center;
}

.artist-ct-eyebrow {
	margin: 0 0 0.75rem;
	color: var(--artist-color-muted);
	font-size: 0.75rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.artist-ct-intro h1 {
	margin: 0 0 1rem !important;
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: 300;
	line-height: 1.15;
}

.artist-ct-lead {
	margin: 0;
	color: var(--artist-color-muted);
	font-size: 1.1rem;
	font-weight: 300;
	line-height: 1.7;
}

.artist-ct-grid {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 3rem;
	align-items: start;
}

.artist-ct-side h2,
.artist-ct-form h2 {
	margin: 0 0 1.5rem;
	font-size: 1.5rem;
	font-weight: 300;
	letter-spacing: 0.02em;
}

.artist-ct ul.artist-ct-topics {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.artist-ct-topics li {
	display: flex;
	gap: 1rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--artist-color-border);
}

.artist-ct-topics li:first-child {
	border-top: 1px solid var(--artist-color-border);
}

.artist-ct-topics i {
	display: flex;
	flex: 0 0 2.5rem;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 50%;
	background: var(--artist-color-ink);
	color: #fff;
	font-size: 0.95rem;
}

.artist-ct-topics h3 {
	margin: 0 0 0.25rem;
	font-size: 1.05rem;
	font-weight: 500;
}

.artist-ct-topics p {
	margin: 0;
	color: var(--artist-color-muted);
	line-height: 1.6;
}

.artist-ct-topics a {
	color: var(--artist-color-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.artist-ct-note {
	margin: 1.5rem 0 0;
	color: var(--artist-color-muted);
	font-size: 0.95rem;
}

.artist-ct-side .artist-social-icons {
	margin-top: 1.25rem;
}

.artist-ct-form {
	padding: 2rem;
	border: 1px solid var(--artist-color-border);
	border-radius: 14px;
	background: var(--artist-color-surface);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
}

/* WPForms, restyled to match the rest of the site. */
.artist-ct-form .wpforms-container {
	margin: 0;
}

.artist-ct-form .wpforms-field {
	padding: 0 0 1.1rem !important;
}

.artist-ct-form .wpforms-field-label {
	display: block;
	margin: 0 0 0.35rem !important;
	color: var(--artist-color-muted) !important;
	font-size: 0.85rem !important;
	font-weight: 400 !important;
}

.artist-ct-form .wpforms-required-label {
	color: var(--artist-color-muted) !important;
}

.artist-ct-form input[type="text"],
.artist-ct-form input[type="email"],
.artist-ct-form input[type="tel"],
.artist-ct-form input[type="number"],
.artist-ct-form select,
.artist-ct-form textarea {
	width: 100% !important;
	max-width: 100% !important;
	padding: 0.75rem 0.85rem !important;
	border: 1px solid var(--artist-color-border) !important;
	border-radius: 3px !important;
	background: #fff !important;
	color: var(--artist-color-ink) !important;
	font-size: 16px !important;
	box-shadow: none !important;
}

.artist-ct-form textarea {
	min-height: 9rem;
}

.artist-ct-form input:focus,
.artist-ct-form select:focus,
.artist-ct-form textarea:focus {
	border-color: var(--artist-color-ink) !important;
	outline: 2px solid rgba(43, 41, 38, 0.15);
}

.artist-ct-form .wpforms-submit-container {
	padding: 0.5rem 0 0 !important;
}

.artist-ct-form .wpforms-confirmation-container-full {
	border-radius: 3px;
}

/* ==========================================================================
   How to Buy: care tips (the intro, steps and card reuse the .artist-tc-* styles)
   ========================================================================== */
.artist-tc-care {
	margin-top: 4.5rem;
}

.artist-tc-care h2 {
	margin: 0 0 0.5rem;
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 300;
	letter-spacing: 0.02em;
}

.artist-tc-care__intro {
	margin: 0 0 2rem;
	color: var(--artist-color-muted);
}

.artist-tc ul.artist-tc-tips {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.25rem;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

.artist-tc-tips li {
	padding: 1.4rem 1.25rem;
	border: 1px solid var(--artist-color-border);
	border-radius: 12px;
	background: var(--artist-color-surface);
}

.artist-tc-tips h3 {
	margin: 0 0 0.4rem;
	font-size: 1rem;
	font-weight: 500;
}

.artist-tc-tips p {
	margin: 0;
	color: var(--artist-color-muted);
	font-size: 0.92rem;
	line-height: 1.6;
}

@media (max-width: 900px) {
	.artist-ab-intro,
	.artist-ab-background,
	.artist-ct-grid {
		grid-template-columns: 1fr;
	}
	.artist-ab-intro {
		gap: 2rem;
	}
	.artist-ab-portrait img {
		aspect-ratio: 16 / 10;
	}
	.artist-ab-expect,
	.artist-tc ul.artist-tc-tips {
		grid-template-columns: repeat(2, 1fr);
	}
	.artist-ab-cards {
		grid-template-columns: 1fr;
	}
	.artist-ab ul.artist-ab-works {
		grid-template-columns: repeat(2, 1fr);
	}
	.artist-ct-grid {
		gap: 2.5rem;
	}
}

@media (max-width: 600px) {
	.artist-ab,
	.artist-ct {
		padding: 0 1.2rem 3rem;
	}
	.artist-ab-section,
	.artist-ab-expect,
	.artist-tc-care {
		margin-top: 3rem;
	}
	.artist-ab-expect,
	.artist-tc ul.artist-tc-tips {
		grid-template-columns: 1fr;
	}
	.artist-ab .wp-block-button,
	.artist-ab .wp-block-button__link {
		width: 100%;
	}
	.artist-ct-intro {
		margin-bottom: 2.5rem;
	}
	.artist-ct-form {
		padding: 1.4rem 1.1rem;
	}
}

/* Filled and outline buttons share one border width and height so a row of them lines up exactly. */
.artist-ab .wp-block-button__link,
.artist-ct .wp-block-button__link,
.artist-tc .wp-block-button__link {
	box-sizing: border-box;
	min-height: 3.1rem;
	border-width: 1px !important;
	border-style: solid !important;
}