/*
Theme Name:   Charmory
Theme URI:    https://charmory.shop/
Description:  Charmory — premium 3D-printed keychains and charms, playful but polished. A child theme of Storefront.
Author:       Charmory
Author URI:   https://charmory.shop/
Template:     storefront
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  charmory
Tags:         e-commerce, custom-menu, sticky-post, two-columns
*/

/* ==========================================================================
   Design tokens (from the Charmory reference design)
   ========================================================================== */
:root {
	--cream: #F4F2E6;       /* page background */
	--cream-light: #FBFAF3; /* cards, header surface */
	--green: #26593A;       /* primary green */
	--green-dark: #163524;  /* text, footer, hover */
	--green-mid: #4F8464;   /* muted green, prices */
	--sage: #DCE8DF;        /* light sage — bands, badges */
	--tan: #DDD6BD;         /* borders */
	--pink-bg: #F5E0E6;     /* blush section */
	--pink-dark: #7A3A4B;
	--pink-mid: #B97186;
	--pink: #E5AFBD;
	--gold: #E8A33D;

	--font-display: 'Fredoka', sans-serif;
	--font-body: 'Poppins', sans-serif;

	--content-width: 1280px;
	--radius: 20px;
	--radius-sm: 12px;
	--nav-height: 72px;
	--marquee-h: 46px;
}

/* ==========================================================================
   Base
   ========================================================================== */
body {
	background-color: var(--cream);
	color: var(--green-dark);
	font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--green-dark);
}

a {
	color: var(--green);
}

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

/* Wider than Storefront's ~1064px default; padding matches the header/footer
   so the content edges line up. */
.col-full {
	max-width: var(--content-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
	box-sizing: border-box;
}

/* Sticky footer — keep the footer pinned to the viewport bottom on short pages */
#page.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

#page.site > #content {
	flex: 1 0 auto;
}

#page.site > .ch-footer {
	flex-shrink: 0;
}

/* Shared inner wrapper for full-bleed bands */
.ch-container {
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 24px;
}

/* ==========================================================================
   Header
   ========================================================================== */
.ch-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background-color: rgba(251, 250, 243, 0.92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--tan);
}

.ch-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	min-height: var(--nav-height);
	max-width: var(--content-width);
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}

/* Logo (left) */
.ch-logo {
	justify-self: start;
	display: inline-flex;
	align-items: center;
}

.ch-logo svg {
	display: block;
	height: 40px;
	width: auto;
}

/* Primary nav (center) */
.ch-nav {
	justify-self: center;
}

.ch-nav ul {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ch-nav a {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 15px;
	color: var(--green);
	text-decoration: none;
	padding: 8px 16px;
	border-radius: 999px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ch-nav a:hover,
.ch-nav a:focus-visible {
	background-color: rgba(38, 89, 58, 0.10);
	color: var(--green-dark);
}

.ch-nav a.is-active {
	font-weight: 600;
	background-color: var(--green);
	color: var(--cream-light);
}

/* Account shown inside the mobile nav only */
.ch-nav__mobile-only {
	display: none;
}

/* Actions (right) */
.ch-actions {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 20px;
}

.ch-account {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	color: var(--green);
	text-decoration: none;
}

.ch-account:hover,
.ch-account:focus {
	color: var(--green-dark);
}

.ch-bag {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	color: var(--green-dark);
	text-decoration: none;
}

.ch-bag:hover,
.ch-bag:focus {
	color: var(--green);
}

.ch-bag svg {
	width: 22px;
	height: 22px;
	display: block;
}

.ch-bag__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background-color: var(--green);
	color: var(--cream-light);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}

/* Otter mascot — flaps its wings on add-to-cart */
.ch-otter {
	display: inline-flex;
	align-items: center;
}

.ch-otter__svg {
	width: 32px;
	height: auto;
	display: block;
}

.ch-otter__wing {
	transform-box: fill-box;
}

.ch-otter__wing--l {
	transform-origin: 90% 12%;
}

.ch-otter__wing--r {
	transform-origin: 10% 12%;
}

.ch-otter.is-flapping .ch-otter__wing--l {
	animation: ch-flap-l 0.28s ease-in-out 3;
}

.ch-otter.is-flapping .ch-otter__wing--r {
	animation: ch-flap-r 0.28s ease-in-out 3;
}

@keyframes ch-flap-l {
	0%, 100% { transform: rotate(0); }
	50% { transform: rotate(-38deg); }
}

@keyframes ch-flap-r {
	0%, 100% { transform: rotate(0); }
	50% { transform: rotate(38deg); }
}

@media (prefers-reduced-motion: reduce) {
	.ch-otter.is-flapping .ch-otter__wing--l,
	.ch-otter.is-flapping .ch-otter__wing--r {
		animation: none;
	}
}

/* Hamburger (mobile only) */
.ch-burger {
	display: none;
	justify-self: end;
	width: 44px;
	height: 44px;
	padding: 10px;
	background: none;
	border: 0;
	cursor: pointer;
}

.ch-burger span {
	display: block;
	width: 100%;
	height: 2px;
	margin: 4px 0;
	background-color: var(--green);
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.ch-burger.is-open span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}
.ch-burger.is-open span:nth-child(2) {
	opacity: 0;
}
.ch-burger.is-open span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Newsletter band */
.ch-newsletter {
	background-color: var(--sage);
	padding: 64px 24px;
}

.ch-newsletter__inner {
	max-width: 640px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
	text-align: center;
}

.ch-newsletter__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 30px;
	color: var(--green-dark);
	margin: 0 0 12px;
}

.ch-newsletter__sub {
	color: var(--green);
	margin: 0 0 28px;
}

.ch-newsletter__form {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
}

.ch-newsletter__form input[type="email"] {
	flex: 1 1 260px;
	padding: 14px 18px;
	border-radius: 999px;
	border: 1px solid var(--green-mid);
	background-color: var(--cream-light);
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--green-dark);
	outline: none;
}

.ch-newsletter__form input[type="email"]:focus {
	border-color: var(--green);
	box-shadow: 0 0 0 3px rgba(38, 89, 58, 0.15);
}

.ch-newsletter__form button {
	background-color: var(--green);
	color: var(--cream-light);
	border: 0;
	border-radius: 999px;
	padding: 14px 28px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.ch-newsletter__form button:hover,
.ch-newsletter__form button:focus {
	background-color: var(--green-dark);
}

.ch-newsletter__done {
	margin: 0;
	font-family: var(--font-display);
	font-size: 18px;
	color: var(--green-dark);
}

/* The Newsletter Plugin form — restyled to match the placeholder */
.ch-newsletter__plugin .tnp-field {
	margin: 0;
}

.ch-newsletter__plugin form,
.ch-newsletter__plugin .tnp-form {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
}

.ch-newsletter__plugin input.tnp-email,
.ch-newsletter__plugin input[type="email"] {
	flex: 1 1 260px;
	padding: 14px 18px;
	border-radius: 999px;
	border: 1px solid var(--green-mid);
	background-color: var(--cream-light);
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--green-dark);
	outline: none;
}

.ch-newsletter__plugin input.tnp-submit,
.ch-newsletter__plugin input[type="submit"] {
	background-color: var(--green);
	color: var(--cream-light);
	border: 0;
	border-radius: 999px;
	padding: 14px 28px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.ch-newsletter__plugin input.tnp-submit:hover,
.ch-newsletter__plugin input[type="submit"]:hover {
	background-color: var(--green-dark);
}

/* Main footer */
.ch-footer {
	background-color: var(--green-dark);
	color: var(--cream-light);
	padding: 64px 24px 32px;
}

.ch-footer__inner {
	max-width: var(--content-width);
	margin: 0 auto;
	box-sizing: border-box;
}

.ch-footer__cols {
	display: flex;
	flex-wrap: wrap;
	gap: 48px;
	justify-content: space-between;
}

.ch-footer__brand {
	flex: 2 1 280px;
}

.ch-footer__logo {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 26px;
	color: var(--cream-light);
}

.ch-footer__tagline {
	margin-top: 14px;
	color: var(--sage);
	font-size: 14px;
	line-height: 1.6;
	max-width: 34ch;
}

.ch-footer__col {
	flex: 1 1 140px;
}

.ch-footer__heading {
	font-family: var(--font-display);
	font-size: 14px;
	color: var(--sage);
	margin: 0 0 14px;
}

/* Footer nav — 2×2 grid of links */
.ch-footer__nav {
	flex: 1 1 220px;
}

.ch-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 24px;
}

.ch-footer__links a,
.ch-footer__col a,
.ch-footer__col span {
	color: var(--cream-light);
	opacity: 0.85;
	font-family: var(--font-body);
	font-size: 14px;
	text-decoration: none;
}

.ch-footer__links a:hover,
.ch-footer__links a:focus,
.ch-footer__col a:hover,
.ch-footer__col a:focus {
	opacity: 1;
	color: var(--cream-light);
	text-decoration: underline;
}

.ch-footer__email {
	color: var(--cream-light);
	opacity: 0.85;
	font-size: 14px;
	margin: 0 0 12px;
}

.ch-footer__social {
	display: flex;
	gap: 10px;
}

.ch-footer__ig {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: rgba(251, 250, 243, 0.12);
	color: var(--cream-light);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.ch-footer__ig:hover,
.ch-footer__ig:focus {
	background-color: rgba(251, 250, 243, 0.22);
	color: var(--cream-light);
	transform: translateY(-2px);
}

.ch-footer__bottom {
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid rgba(251, 250, 243, 0.15);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 13px;
	color: var(--sage);
}

.ch-footer__legal {
	display: flex;
	gap: 20px;
}

.ch-footer__legal a {
	color: var(--sage);
	opacity: 0.85;
	text-decoration: none;
}

.ch-footer__legal a:hover,
.ch-footer__legal a:focus {
	opacity: 1;
	text-decoration: underline;
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 900px) {
	.ch-header__inner {
		grid-template-columns: auto 1fr auto;
	}

	.ch-logo {
		grid-column: 2;
		justify-self: center;
	}

	.ch-burger {
		display: block;
		grid-column: 1;
		justify-self: start;
	}

	.ch-actions {
		grid-column: 3;
	}

	/* Hide the desktop account link (it moves into the mobile menu) */
	.ch-account {
		display: none;
	}

	/* Nav becomes a dropdown panel */
	.ch-nav {
		grid-column: 1 / -1;
		justify-self: stretch;
		display: none;
		padding: 8px 0 16px;
		border-top: 1px solid var(--tan);
	}

	.ch-nav.is-open {
		display: block;
	}

	.ch-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.ch-nav li {
		border-bottom: 1px solid var(--tan);
	}

	.ch-nav a {
		display: block;
		padding: 14px 4px;
		border-bottom: 0;
	}

	.ch-nav a.is-active {
		border-bottom: 0;
	}

	.ch-nav__mobile-only {
		display: block;
	}
}

@media (max-width: 600px) {
	.ch-footer {
		padding: 48px 24px 28px;
	}

	.ch-footer__cols {
		gap: 32px;
	}

	.ch-footer__bottom {
		justify-content: center;
		text-align: center;
	}
}

/* ==========================================================================
   Shared homepage / about helpers
   ========================================================================== */

/* Remove Storefront's default content spacing on full-width templates */
.home .col-full,
.page-template-about .col-full,
.ch-home,
.ch-about {
	padding-top: 0;
	padding-bottom: 0;
}

/* Full-bleed colour bands break out of the centered .col-full container */
.ch-hero,
.ch-marquee,
.ch-studio,
.ch-newsletter,
.ch-about__hero {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Newsletter collapses away once joined */
.ch-newsletter {
	transition: opacity 0.35s ease;
}

.ch-newsletter.is-leaving {
	opacity: 0;
}

.ch-eyebrow {
	font-family: var(--font-body);
	font-size: 13px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--green-mid);
	font-weight: 600;
	margin: 0;
}

.ch-eyebrow--pink {
	color: var(--pink-mid);
}

.ch-link {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	color: var(--green);
	text-decoration: none;
}

.ch-link:hover,
.ch-link:focus {
	color: var(--green-dark);
}

/* Buttons */
.ch-btn {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 17px;
	line-height: 1;
	border: none;
	border-radius: 999px;
	padding: 16px 32px;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.ch-btn--pop {
	background-color: var(--cream-light);
	color: var(--green);
	box-shadow: 0 6px 0 var(--green-dark);
}

.ch-btn--pop:hover,
.ch-btn--pop:focus {
	color: var(--green);
	transform: translateY(-2px);
}

.ch-btn--ghost {
	background: transparent;
	color: var(--cream-light);
	border: 2px solid rgba(251, 250, 243, 0.4);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	padding: 14px 28px;
}

.ch-btn--ghost:hover,
.ch-btn--ghost:focus {
	color: var(--cream-light);
	border-color: var(--cream-light);
}

.ch-btn--pink {
	background-color: var(--pink-dark);
	color: var(--pink-bg);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	padding: 14px 28px;
}

.ch-btn--pink:hover,
.ch-btn--pink:focus {
	color: var(--pink-bg);
	background-color: #602c3a;
}

/* ==========================================================================
   Homepage — hero
   ========================================================================== */
.ch-hero {
	background-color: var(--green);
	min-height: 75vh;
	display: flex;
	padding: 40px 0;
	box-sizing: border-box;
}

/* Content vertically centred in the green banner, left-aligned on desktop */
.ch-hero__inner {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
}

.ch-hero__content {
	max-width: 640px;
}

.ch-hero__eyebrow {
	font-family: var(--font-body);
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--sage);
	font-weight: 600;
	margin: 0 0 20px;
}

.ch-hero__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(52px, 10vw, 110px);
	line-height: 0.9;
	color: var(--cream-light);
	margin: 0;
	letter-spacing: -2px;
}

.ch-hero__sub {
	font-family: var(--font-body);
	font-size: 20px;
	color: var(--sage);
	max-width: 38ch;
	margin: 24px 0 0;
	line-height: 1.55;
}

.ch-hero__actions {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-top: 36px;
	flex-wrap: wrap;
}

.ch-hero__cta-wrap {
	position: relative;
	display: inline-block;
}

.ch-hero__duck {
	position: absolute;
	top: -30px;
	right: 2px;
	pointer-events: none;
	transform: rotate(-8deg);
}

.ch-hero__duck svg {
	display: block;
}

/* Duck: asleep by default, wakes up angry when the CTA is hovered/pressed */
.ch-duck__angry {
	opacity: 0;
}

.ch-hero__cta-wrap:hover .ch-duck__sleep,
.ch-hero__cta-wrap:focus-within .ch-duck__sleep,
.ch-hero__cta-wrap:active .ch-duck__sleep {
	opacity: 0;
}

.ch-hero__cta-wrap:hover .ch-duck__angry,
.ch-hero__cta-wrap:focus-within .ch-duck__angry,
.ch-hero__cta-wrap:active .ch-duck__angry {
	opacity: 1;
}

.ch-hero__cta-wrap:hover .ch-duck,
.ch-hero__cta-wrap:focus-within .ch-duck,
.ch-hero__cta-wrap:active .ch-duck {
	animation: ch-duck-wake 0.4s ease-in-out;
}

@keyframes ch-duck-wake {
	0% { transform: translateY(0) rotate(0); }
	30% { transform: translateY(-4px) rotate(9deg); }
	60% { transform: translateY(0) rotate(-6deg); }
	100% { transform: translateY(0) rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
	.ch-hero__cta-wrap:hover .ch-duck,
	.ch-hero__cta-wrap:focus-within .ch-duck,
	.ch-hero__cta-wrap:active .ch-duck {
		animation: none;
	}
}

/* Featured charm wall — left-aligned on desktop */
.ch-hero__charms {
	display: flex;
	gap: 20px;
	margin-top: 44px;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: flex-start;
}

.ch-hero__charm {
	background-color: var(--cream-light);
	border-radius: var(--radius);
	padding: 12px;
	width: 148px;
	box-shadow: 0 16px 30px rgba(0, 0, 0, 0.28);
	text-decoration: none;
	transition: transform 0.15s ease;
}

.ch-hero__charm:hover,
.ch-hero__charm:focus {
	transform: translateY(-6px);
}

.ch-hero__charm img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius-sm);
	display: block;
}

.ch-hero__charm-name {
	display: block;
	margin-top: 10px;
	font-family: var(--font-display);
	font-weight: 500;
	font-size: 13px;
	color: var(--green);
	text-align: center;
}

/* Marquee */
.ch-marquee {
	height: var(--marquee-h);
	display: flex;
	align-items: center;
	overflow: hidden;
	background-color: var(--green-dark);
}

.ch-marquee__track {
	display: flex;
	white-space: nowrap;
	width: max-content;
	animation: ch-marquee 22s linear infinite;
}

.ch-marquee__group {
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 0 20px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--sage);
}

@keyframes ch-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

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

/* ==========================================================================
   Homepage — new this week
   ========================================================================== */
.ch-drops {
	padding: 80px 0;
}

.ch-drops__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 44px;
	flex-wrap: wrap;
}

.ch-drops__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 38px;
	margin: 8px 0 0;
	color: var(--green-dark);
}

.ch-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr); /* space for 5 products on desktop */
	gap: 22px;
}

@media (max-width: 1100px) {
	.ch-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Mobile: 2 columns (fits a 2×3 grid) */
@media (max-width: 640px) {
	.ch-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}
}

.ch-card {
	background-color: var(--cream-light);
	border: 1px solid var(--tan);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.ch-card__media {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background-color: var(--cream);
}

.ch-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.2s ease;
}

.ch-card__media:hover img {
	transform: scale(1.04);
}

.ch-card__tag {
	position: absolute;
	top: 12px;
	left: 12px;
	background-color: var(--cream-light);
	color: var(--green);
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: 999px;
	border: 1px solid var(--tan);
}

.ch-card__body {
	padding: 18px 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.ch-card__name {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 19px;
	color: var(--green-dark);
}

.ch-card__name a {
	color: inherit;
	text-decoration: none;
}

.ch-card__price {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 16px;
	color: var(--green-mid);
}

.ch-card__price .amount,
.ch-card__price bdi {
	color: var(--green-mid);
}

.ch-card__add {
	margin-top: auto;
	background-color: var(--green);
	color: var(--cream-light);
	border: none;
	border-radius: var(--radius-sm);
	padding: 11px 16px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.ch-card__add:hover,
.ch-card__add:focus {
	background-color: var(--green-dark);
	color: var(--cream-light);
}

.ch-card__add.added::after {
	content: none;
}

.ch-card--next {
	border: 2px dashed var(--tan);
	background: transparent;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 40px 20px;
	min-height: 260px;
	text-align: center;
}

.ch-card--next .ch-card__plus {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background-color: var(--sage);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
	color: var(--green);
}

.ch-card--next p {
	font-family: var(--font-display);
	color: var(--green-mid);
	margin: 0;
}

/* ==========================================================================
   Homepage — studio band
   ========================================================================== */
.ch-studio {
	background-color: var(--pink-bg);
	padding: 88px 0;
}

.ch-studio__inner {
	display: flex;
	gap: 64px;
	flex-wrap: wrap;
	align-items: center;
}

.ch-studio__copy {
	flex: 1 1 380px;
}

.ch-studio__title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 36px;
	color: var(--pink-dark);
	margin: 12px 0 20px;
	line-height: 1.15;
}

.ch-studio__text {
	font-size: 16px;
	line-height: 1.7;
	color: var(--pink-dark);
	max-width: 46ch;
	margin: 0 0 24px;
}

.ch-studio__images {
	flex: 1 1 320px;
	display: flex;
	gap: 20px;
	justify-content: center;
}

.ch-studio__img {
	width: 176px;
	border-radius: var(--radius);
	box-shadow: 0 20px 40px rgba(122, 58, 75, 0.25);
	object-fit: cover;
}

.ch-studio__img--a {
	transform: rotate(4deg);
	height: 236px;
}

.ch-studio__img--b {
	transform: rotate(-5deg);
	margin-top: 40px;
	height: 201px;
}

/* ==========================================================================
   About page
   ========================================================================== */
.ch-about__hero {
	background-color: var(--green);
	color: var(--cream-light);
	padding: 80px 0;
	text-align: center;
}

.ch-about__eyebrow {
	font-family: var(--font-body);
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--sage);
	font-weight: 600;
	margin: 0 0 16px;
}

.ch-about__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(34px, 6vw, 46px);
	color: var(--cream-light);
	margin: 0;
}

.ch-about__lede {
	max-width: 56ch;
	margin: 20px auto 0;
	color: var(--sage);
	font-size: 18px;
	line-height: 1.6;
}

.ch-about__body {
	max-width: 900px;
	margin: 0 auto;
	padding: 72px 24px;
	display: flex;
	flex-direction: column;
	gap: 56px;
	box-sizing: border-box;
}

.ch-about__row {
	display: flex;
	gap: 40px;
	flex-wrap: wrap;
	align-items: center;
}

.ch-about__row--reverse {
	flex-wrap: wrap-reverse;
}

.ch-about__photo {
	flex: 1 1 200px;
	width: 100%;
	max-width: 320px;
	border-radius: var(--radius);
	object-fit: cover;
}

.ch-about__text {
	flex: 2 1 320px;
}

.ch-about__text h2 {
	font-family: var(--font-display);
	color: var(--green-dark);
	margin: 0 0 12px;
}

.ch-about__text p {
	color: var(--green);
	line-height: 1.7;
	margin: 0;
}

.ch-about__values {
	background-color: var(--pink-bg);
	border-radius: 24px;
	padding: 40px;
	text-align: center;
}

.ch-about__values-title {
	font-family: var(--font-display);
	color: var(--pink-dark);
	margin: 0;
}

.ch-about__values-grid {
	display: flex;
	gap: 32px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 28px;
}

.ch-about__value {
	max-width: 200px;
}

.ch-about__value-name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 17px;
	color: var(--pink-dark);
	margin: 0 0 6px;
}

.ch-about__value-desc {
	color: var(--pink-mid);
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

/* ==========================================================================
   Homepage / about responsive
   ========================================================================== */

/* Tablet / mobile: hero centres (centre alignment is mobile-only) */
@media (max-width: 900px) {
	.ch-hero {
		height: auto;
		min-height: 0;
		padding: 56px 0;
	}

	.ch-hero__inner {
		height: auto;
	}

	.ch-hero__content {
		max-width: none;
		text-align: center;
	}

	.ch-hero__sub {
		margin-left: auto;
		margin-right: auto;
	}

	.ch-hero__actions,
	.ch-hero__charms {
		justify-content: center;
	}
}

@media (max-width: 768px) {
	.ch-hero__sub {
		font-size: 17px;
	}

	.ch-drops {
		padding: 56px 0;
	}

	.ch-studio {
		padding: 56px 0;
	}

	.ch-studio__inner {
		gap: 32px;
	}

	.ch-about__body {
		padding: 48px 24px;
		gap: 40px;
	}

	.ch-about__values {
		padding: 32px 24px;
	}
}

/* ==========================================================================
   WooCommerce — account, cart & checkout (brand restyle)
   ========================================================================== */

/* Page titles */
.woocommerce-account .entry-title,
.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-page h1.entry-title {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--green-dark);
}

/* Buttons */
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce-page a.button,
.woocommerce-page button.button {
	background-color: var(--green);
	color: var(--cream-light);
	border-radius: 999px;
	font-family: var(--font-body);
	font-weight: 600;
	padding: 0.7em 1.6em;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background-color: var(--green-dark);
	color: var(--cream-light);
}

/* Form fields */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-page form .form-row input.input-text,
.woocommerce .select2-container .select2-selection--single,
.woocommerce form .form-row select,
.woocommerce-account .woocommerce-EditAccountForm input.input-text {
	border-radius: var(--radius-sm);
	border: 1px solid var(--tan);
	background-color: var(--cream-light);
	padding: 12px 16px;
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--green-dark);
	box-shadow: none;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus {
	border-color: var(--green-mid);
	outline: 2px solid rgba(38, 89, 58, 0.15);
	outline-offset: 0;
}

.woocommerce .select2-container .select2-selection--single {
	height: auto;
	display: flex;
	align-items: center;
}

/* Cards, boxes & tables share a rounded cream surface */
.woocommerce .cart-collaterals .cart_totals,
.woocommerce-checkout #order_review,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2,
.woocommerce form.login,
.woocommerce form.register,
.woocommerce-account .woocommerce-MyAccount-content,
.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details {
	background-color: var(--cream-light);
	border: 1px solid var(--tan);
	border-radius: var(--radius);
	padding: 28px;
	box-sizing: border-box;
}

.woocommerce table.shop_table {
	border-radius: var(--radius);
	border-color: var(--tan);
}

.woocommerce table.shop_table th {
	font-family: var(--font-body);
	color: var(--green-dark);
}

/* Order-summary panels get the sage tint from the reference */
.woocommerce-checkout #order_review,
.woocommerce .cart-collaterals .cart_totals {
	background-color: var(--sage);
	border-color: transparent;
}

.woocommerce-checkout #payment {
	background-color: var(--cream-light);
	border-radius: var(--radius);
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom-color: var(--tan);
}

.woocommerce #payment #place_order,
.woocommerce-checkout #payment #place_order {
	width: 100%;
}

/* ---- My Account ---- */
.woocommerce-account .woocommerce {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: flex-start;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
	flex: 1 1 220px;
	max-width: 260px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	border: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
	border: 0;
	margin: 0;
	padding: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 15px 24px !important;
	margin: 0;
	border-radius: 999px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.2;
	color: var(--green);
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
	background-color: rgba(38, 89, 58, 0.08);
	color: var(--green-dark);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
	background-color: var(--green);
	color: var(--cream-light);
}

/* Keep Storefront's right-side dashicons readable on the active pill */
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::after,
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a::before {
	color: var(--cream-light);
}

/* Notices: recolour WooCommerce's blue info bar to brand blush */
.woocommerce-info,
.woocommerce-account .woocommerce-info,
.woocommerce-page .woocommerce-info {
	background-color: var(--pink) !important;
	color: var(--green-dark) !important;
	border-top-color: var(--pink-mid) !important;
}

.woocommerce-info::before {
	color: var(--green-dark) !important;
}

.woocommerce-info a {
	color: var(--green-dark);
	text-decoration: underline;
}

/* ---- Block-based Cart & Checkout (newer WooCommerce) ---- */
.wc-block-components-button:not(.is-link),
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button,
.wp-block-woocommerce-cart .wc-block-cart__submit-button {
	background-color: var(--green) !important;
	color: var(--cream-light) !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	border-radius: 999px !important;
	font-family: var(--font-body) !important;
	font-weight: 600 !important;
}

/* Kill the white pseudo-border WooCommerce blocks draw on buttons */
.wc-block-components-button:not(.is-link)::before,
.wc-block-components-button:not(.is-link)::after {
	display: none !important;
	border: none !important;
}

.wc-block-components-button:not(.is-link):hover {
	background-color: var(--green-dark) !important;
}

/* Block cart line items — tidy spacing, no odd borders */
.wc-block-cart-items {
	max-width: 100%;
}

.wc-block-cart-items__row,
.wc-block-cart-item {
	box-sizing: border-box;
}

.wc-block-cart-item__image img,
td.wc-block-cart-item__image img {
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: var(--radius-sm);
	border: 1px solid var(--tan);
}

.wc-block-components-product-name {
	font-family: var(--font-display) !important;
	font-weight: 600;
	color: var(--green-dark) !important;
}

.wc-block-cart-item__total .wc-block-components-product-price,
.wc-block-components-product-price__value {
	color: var(--green-mid);
	font-weight: 600;
}

/* Quantity stepper in the block cart */
.wc-block-components-quantity-selector {
	border-radius: var(--radius-sm);
	border-color: var(--tan);
}

.wc-block-components-text-input input,
.wc-block-components-text-input .input-text,
.wc-block-checkout__form input[type="text"],
.wc-block-checkout__form input[type="email"],
.wc-block-checkout__form input[type="tel"] {
	border-radius: var(--radius-sm) !important;
	border: 1px solid var(--tan) !important;
	background-color: var(--cream-light) !important;
}

/* Order-summary / cart-totals card */
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper,
.wp-block-woocommerce-checkout-order-summary-block,
.wc-block-components-sidebar {
	background-color: var(--sage);
	border-radius: var(--radius);
	padding: 24px;
	box-sizing: border-box;
}

/* Block Cart: constrain the totals column so it isn't over-wide */
.wp-block-woocommerce-cart .wc-block-cart {
	gap: 40px;
	align-items: flex-start;
}

.wp-block-woocommerce-cart .wc-block-cart__main {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
}

.wp-block-woocommerce-cart .wc-block-cart__sidebar {
	flex: 0 1 380px;
	max-width: 380px;
	box-sizing: border-box;
}

/* The sage card fills the whole totals area */
.wp-block-woocommerce-cart .wc-block-cart__sidebar .wc-block-components-sidebar {
	width: 100%;
	margin: 0;
	box-sizing: border-box;
}

.wc-block-checkout__sidebar h2,
.wp-block-woocommerce-checkout h2,
.wc-block-cart__totals-title,
.wc-block-components-title {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--green-dark);
}

@media (max-width: 860px) {
	.wp-block-woocommerce-cart .wc-block-cart__sidebar {
		flex-basis: 100%;
		max-width: 100%;
	}
}

.woocommerce-account .woocommerce-MyAccount-content {
	flex: 3 1 420px;
}

/* Login / register two-up on the account page */
.woocommerce-account:not(.logged-in) .woocommerce > .u-columns,
.woocommerce .col2-set {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
}

.woocommerce-account:not(.logged-in) .woocommerce .u-column1,
.woocommerce-account:not(.logged-in) .woocommerce .u-column2 {
	flex: 1 1 320px;
}

/* Cart & checkout headings */
.woocommerce-checkout h3,
.woocommerce-cart h2,
.woocommerce-checkout #order_review_heading {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--green-dark);
}

@media (max-width: 768px) {
	.woocommerce-account .woocommerce {
		flex-direction: column;
	}

	.woocommerce-account .woocommerce-MyAccount-navigation {
		max-width: none;
	}
}


/* ==========================================================================
   Green page hero (Shop, Contact, My Account, …) — matches About header
   ========================================================================== */
.ch-page-hero {
	background-color: var(--green);
	color: var(--cream-light);
	padding: 56px 0;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	text-align: center;
}

.ch-page-hero__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(32px, 5vw, 46px);
	color: var(--cream-light);
	margin: 0;
}

.ch-page-hero__sub {
	max-width: 52ch;
	margin: 14px auto 0;
	color: var(--sage);
	font-size: 17px;
	line-height: 1.6;
}

/* The banner sits flush under the header on inner pages */
.page:not(.home) .site-content > .col-full,
.woocommerce-account .site-content > .col-full,
.woocommerce-shop .site-content > .col-full {
	padding-top: 0;
}

.page:not(.home) #primary,
.page:not(.home) .content-area,
.woocommerce-account #primary,
.woocommerce-shop #primary {
	margin-top: 0;
}

.page:not(.home) .entry-header,
.woocommerce-account .entry-header {
	margin-bottom: 32px;
}

/* Give hero'd pages some breathing room below the banner */
.ch-page-hero + * {
	margin-top: 40px;
}

/* ==========================================================================
   WooCommerce shop / product archive cards (matches the reference grid)
   ========================================================================== */

/* Replace Storefront's floated columns with a responsive grid */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 26px;
	margin: 0 0 32px;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	position: relative;
	background-color: var(--cream-light);
	border: 1px solid var(--tan);
	border-radius: var(--radius);
	overflow: hidden;
	padding-bottom: 18px;
	text-align: left;
	display: flex;
	flex-direction: column;
}

/* Square product images */
.woocommerce ul.products li.product a img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0 0 14px;
	border-radius: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 18px;
	color: var(--green-dark);
	padding: 0 18px;
}

.woocommerce ul.products li.product .price {
	color: var(--green-mid);
	font-family: var(--font-body);
	font-weight: 600;
	padding: 0 18px;
	display: block;
}

.woocommerce ul.products li.product .price del {
	color: var(--pink-mid);
	opacity: 0.8;
}

.woocommerce ul.products li.product .button {
	margin: 12px 18px 0;
	align-self: flex-start;
	border-radius: 999px;
	font-family: var(--font-body);
	font-weight: 600;
}

/* "Sale" tag badge, top-left over the image */
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	right: auto;
	margin: 0;
	background-color: var(--pink);
	color: var(--green-dark);
	border-radius: 999px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.5px;
	min-height: auto;
	min-width: auto;
	line-height: 1;
	padding: 6px 12px;
}

/* "View cart" link shown after adding — light pink shade */
.woocommerce a.added_to_cart {
	display: inline-block;
	margin: 10px 18px 0;
	padding: 0.55em 1.4em;
	background-color: var(--pink) !important;
	color: var(--green-dark) !important;
	border-radius: 999px;
	font-family: var(--font-body);
	font-weight: 600;
	text-decoration: none;
}

.woocommerce a.added_to_cart:hover,
.woocommerce a.added_to_cart:focus {
	background-color: var(--pink-mid) !important;
	color: var(--cream-light) !important;
}

/* ==========================================================================
   Pixel-cat pet (roams, kneads buttons, flees the cursor, sleeps on shop)
   ========================================================================== */
.ch-cat {
	position: fixed;
	top: 0;
	left: 0;
	width: 66px;
	height: 54px;
	z-index: 30;
	pointer-events: none;
	will-change: transform;
	transform: translate(-300px, -300px); /* JS positions it once ready */
}

.ch-cat__inner {
	width: 100%;
	height: 100%;
	transition: transform 0.2s ease; /* smooth turn/flip */
}

.ch-cat__px {
	display: block;
	width: 100%;
	height: 100%;
	shape-rendering: crispEdges;
	image-rendering: pixelated;
	filter: drop-shadow(0 4px 6px rgba(22, 53, 36, 0.22));
}

/* Pose visibility toggles */
.ch-cat__eyes-sleep,
.ch-cat__brows-angry,
.ch-cat__zzz {
	display: none;
}

.ch-cat.is-sleeping .ch-cat__eyes-open {
	display: none;
}

.ch-cat.is-sleeping .ch-cat__eyes-sleep,
.ch-cat.is-sleeping .ch-cat__zzz {
	display: block;
}

.ch-cat.is-angry .ch-cat__brows-angry {
	display: block;
}

/* Legs */
.ch-cat__leg,
.ch-cat__paw {
	transform-box: fill-box;
	transform-origin: 50% 0;
}

.ch-cat.is-walking .ch-cat__leg--a {
	animation: ch-step-a 0.34s steps(2, end) infinite;
}

.ch-cat.is-walking .ch-cat__leg--b {
	animation: ch-step-b 0.34s steps(2, end) infinite;
}

@keyframes ch-step-a {
	0%, 100% { transform: translateY(-2px); }
	50% { transform: translateY(1px); }
}

@keyframes ch-step-b {
	0%, 100% { transform: translateY(1px); }
	50% { transform: translateY(-2px); }
}

/* Kneading — front paws pump up and down */
.ch-cat.is-kneading .ch-cat__paw--a {
	animation: ch-knead-a 0.26s steps(2, end) infinite;
}

.ch-cat.is-kneading .ch-cat__paw--b {
	animation: ch-knead-b 0.26s steps(2, end) infinite;
}

@keyframes ch-knead-a {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-3px); }
}

@keyframes ch-knead-b {
	0%, 100% { transform: translateY(-3px); }
	50% { transform: translateY(0); }
}

/* Sleepy Zzz drift */
.ch-cat.is-sleeping .ch-cat__zzz {
	animation: ch-zzz 2.4s ease-in-out infinite;
}

@keyframes ch-zzz {
	0%, 100% { opacity: 0.4; transform: translateY(0); }
	50% { opacity: 1; transform: translateY(-3px); }
}

/* Angry shake */
.ch-cat.is-angry .ch-cat__px {
	animation: ch-angry 0.1s steps(2, end) infinite;
}

@keyframes ch-angry {
	0%, 100% { transform: translateX(-1px); }
	50% { transform: translateX(1px); }
}

@media (max-width: 600px) {
	.ch-cat {
		width: 52px;
		height: 42px;
	}
}

/* ==========================================================================
   Contact page
   ========================================================================== */
.ch-contact__body {
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 56px;
	padding: 64px 24px 88px;
	box-sizing: border-box;
}

.ch-contact__heading {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 28px;
	margin: 0 0 12px;
}

.ch-contact__lead {
	color: var(--green);
	line-height: 1.7;
	margin: 0 0 28px;
	max-width: 42ch;
}

.ch-contact__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.ch-contact__list li {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ch-contact__label {
	font-family: var(--font-body);
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--green-mid);
	font-weight: 600;
}

.ch-contact__list a {
	color: var(--green-dark);
	font-weight: 600;
	text-decoration: none;
}

.ch-contact__list a:hover,
.ch-contact__list a:focus {
	color: var(--green);
}

.ch-contact__form-wrap {
	background-color: var(--cream-light);
	border: 1px solid var(--tan);
	border-radius: var(--radius);
	padding: 32px;
	box-sizing: border-box;
}

.ch-contact__form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
}

.ch-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ch-field span {
	font-family: var(--font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--green-dark);
}

.ch-field input,
.ch-field textarea {
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--green-dark);
	background-color: var(--cream);
	border: 1px solid var(--tan);
	border-radius: var(--radius-sm);
	padding: 12px 16px;
	width: 100%;
	box-sizing: border-box;
	resize: vertical;
}

.ch-field input:focus,
.ch-field textarea:focus {
	outline: 2px solid rgba(38, 89, 58, 0.15);
	border-color: var(--green-mid);
}

.ch-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ch-contact__notice {
	border-radius: var(--radius-sm);
	padding: 12px 16px;
	font-family: var(--font-body);
	font-weight: 600;
	margin: 0 0 20px;
}

.ch-contact__notice--ok {
	background-color: var(--sage);
	color: var(--green-dark);
}

.ch-contact__notice--err {
	background-color: var(--pink);
	color: var(--green-dark);
}

.ch-btn--solid {
	background-color: var(--green);
	color: var(--cream-light);
	align-self: flex-start;
}

.ch-btn--solid:hover,
.ch-btn--solid:focus {
	background-color: var(--green-dark);
	color: var(--cream-light);
}

@media (max-width: 820px) {
	.ch-contact__body {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 48px 24px 64px;
	}
}

/* ==========================================================================
   WooCommerce Cart / Checkout / Account — full width & no overflow
   ========================================================================== */

/* Match the site width: drop the sidebar so these pages are full-width */
.woocommerce-cart .content-area,
.woocommerce-checkout .content-area,
.woocommerce-account .content-area {
	width: 100%;
	float: none;
	margin: 0;
}

.woocommerce-cart #secondary,
.woocommerce-checkout #secondary,
.woocommerce-account #secondary {
	display: none;
}

/* Keep all cart content inside the container (fixes horizontal overflow) */
.woocommerce-cart .woocommerce,
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-cart .cart-collaterals,
.woocommerce-cart table.cart,
.wp-block-woocommerce-cart,
.wc-block-cart {
	max-width: 100%;
	box-sizing: border-box;
}

.woocommerce-cart table.cart {
	width: 100%;
	table-layout: auto;
}

.woocommerce-cart table.cart img {
	width: 64px;
	height: auto;
}

/* Cart totals: a tidy card, right-aligned on desktop, full-width on mobile */
.woocommerce-cart .cart-collaterals {
	width: 100%;
	float: none;
	display: block;
}

.woocommerce-cart .cart-collaterals .cart_totals {
	width: 100%;
	max-width: 420px;
	float: none;
	margin-left: auto;
	box-sizing: border-box;
}

.woocommerce-cart .cart-collaterals .cross-sells {
	width: 100%;
	float: none;
}

.woocommerce-cart .cart_totals table,
.woocommerce-cart .cart_totals table td,
.woocommerce-cart .cart_totals table th {
	box-sizing: border-box;
	word-break: break-word;
}

.woocommerce-cart .actions .coupon input.input-text {
	width: auto;
	max-width: 100%;
	box-sizing: border-box;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	box-sizing: border-box;
}

/* ==========================================================================
   Single product page
   ========================================================================== */
.single-product div.product {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
	position: relative;
}

.single-product div.product .woocommerce-product-gallery {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
}

.single-product div.product .woocommerce-product-gallery img {
	border-radius: var(--radius);
}

.single-product div.product .summary.entry-summary {
	width: 100% !important;
	margin: 0 !important;
	float: none !important;
}

.single-product .product_title.entry-title {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(28px, 4vw, 40px);
	margin: 0 0 14px;
}

.single-product div.product p.price,
.single-product div.product .summary .price {
	color: var(--green-mid);
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 22px;
	margin-bottom: 18px;
}

.single-product div.product .price del {
	color: var(--pink-mid);
	opacity: 0.8;
	font-weight: 500;
}

.single-product .woocommerce-product-details__short-description {
	color: var(--green);
	line-height: 1.7;
}

.single-product form.cart {
	margin: 26px 0;
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
}

.single-product .quantity input.qty {
	border: 1px solid var(--tan);
	border-radius: var(--radius-sm);
	background-color: var(--cream-light);
	padding: 12px 10px;
	width: 74px;
	box-sizing: border-box;
	font-family: var(--font-body);
	color: var(--green-dark);
}

.single-product .single_add_to_cart_button {
	background-color: var(--green) !important;
	color: var(--cream-light) !important;
	border-radius: 999px !important;
	font-family: var(--font-body);
	font-weight: 600;
	padding: 0.85em 2.2em !important;
}

.single-product .single_add_to_cart_button:hover,
.single-product .single_add_to_cart_button:focus {
	background-color: var(--green-dark) !important;
}

.single-product .product_meta {
	font-family: var(--font-body);
	font-size: 13px;
	color: var(--green-mid);
	margin-top: 20px;
}

.single-product span.onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
}

/* Tabs (description, reviews …) as pills */
.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0 0 20px;
	margin: 48px 0 0;
	list-style: none;
}

.woocommerce-tabs ul.tabs::before {
	display: none;
}

.woocommerce-tabs ul.tabs li {
	background-color: var(--cream-light);
	border: 1px solid var(--tan);
	border-radius: 999px;
	margin: 0;
	padding: 0;
}

.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce-tabs ul.tabs li a {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	color: var(--green);
	padding: 10px 20px;
	display: block;
}

.woocommerce-tabs ul.tabs li.active {
	background-color: var(--green);
	border-color: var(--green);
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--cream-light);
}

.woocommerce-tabs .panel h2 {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--green-dark);
}

.single-product .related.products > h2,
.single-product .up-sells > h2 {
	font-family: var(--font-display);
	font-weight: 600;
	color: var(--green-dark);
}

@media (max-width: 860px) {
	.single-product div.product {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* ==========================================================================
   Shop filters + ordering (brand-styled, per brief)
   ========================================================================== */
.woocommerce .woocommerce-result-count {
	font-family: var(--font-body);
	color: var(--green-mid);
	font-size: 14px;
}

.woocommerce .woocommerce-ordering select.orderby,
.woocommerce-page .woocommerce-ordering select.orderby {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--green-dark);
	background-color: var(--cream-light);
	border: 1px solid var(--tan);
	border-radius: 999px;
	padding: 10px 42px 10px 18px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2326593A' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	cursor: pointer;
}

/* Category filter pills */
.ch-shop-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 32px;
	clear: both;
}

.ch-pill {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	color: var(--green);
	background-color: var(--cream-light);
	border: 1px solid var(--tan);
	border-radius: 999px;
	padding: 10px 20px;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.ch-pill:hover,
.ch-pill:focus {
	background-color: rgba(38, 89, 58, 0.08);
	color: var(--green-dark);
}

.ch-pill.is-active {
	background-color: var(--green);
	border-color: var(--green);
	color: var(--cream-light);
}

/* ==========================================================================
   Single product — reference layout refinements
   ========================================================================== */
.ch-product__eyebrow {
	font-family: var(--font-body);
	font-size: 12px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--green-mid);
	font-weight: 600;
	margin: 0 0 10px;
}

.single-product .product_title.entry-title {
	font-size: clamp(34px, 5vw, 56px);
	line-height: 1;
	letter-spacing: -0.5px;
}

.single-product div.product p.price,
.single-product div.product .summary .price {
	font-size: 28px;
}

/* Availability with a status dot */
.single-product .summary .stock.in-stock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--green-mid);
}

.single-product .summary .stock.in-stock::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background-color: var(--gold);
}

/* Quantity + full-width add-to-bag (reference row) */
.single-product form.cart {
	align-items: stretch;
}

.single-product form.cart .quantity {
	flex: 0 0 auto;
}

.single-product .single_add_to_cart_button {
	flex: 1 1 auto;
	text-align: center;
}

/* Single product — mobile: photo centred, details stacked below */
@media (max-width: 860px) {
	.single-product div.product {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.single-product div.product .woocommerce-product-gallery {
		max-width: 440px;
		margin: 0 auto !important;
	}

	.single-product div.product .summary.entry-summary {
		text-align: left;
	}
}