/*
 * PartyCraze storefront design — hand-written companion to pcx.css.
 *
 * pcx.css is the design's compiled Tailwind, scoped under `.pcx` and not
 * edited by hand. This file holds (1) the few utilities the templates need
 * that the design never compiled, (2) behaviour the design did in React
 * (sticky chrome, Ken Burns, confetti, mega menu), and (3) the site-wide
 * alignment that brings WooCommerce pages into the same look.
 */

/* ---------------------------------------------------------------------
 * 1. Utilities missing from the compiled design CSS
 * ------------------------------------------------------------------ */
.pcx [hidden] { display: none !important; }

/* The theme colours h1-h6 globally; inside the design they must inherit so
   headings on dark panels stay white, as in the design. */
.pcx h1, .pcx h2, .pcx h3, .pcx h4, .pcx h5, .pcx h6 { color: inherit; }
.pcx .block { display: block; }
.pcx .justify-end { justify-content: flex-end; }
.pcx .mt-auto { margin-top: auto; }
.pcx .mr-10 { margin-right: 2.5rem; }
.pcx .pt-5 { padding-top: 1.25rem; }
.pcx .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.pcx .pb-24 { padding-bottom: 6rem; }
.pcx .bottom-24 { bottom: 6rem; }
.pcx .min-w-\[40px\] { min-width: 40px; }
.pcx .z-\[110\] { z-index: 110; }
.pcx .shadow-\[0_12px_24px_rgba\(0\2c 0\2c 0\2c 0\.25\)\] { box-shadow: 0 12px 24px rgba(0, 0, 0, .25); }
.pcx .hover\:opacity-100:hover { opacity: 1; }
.pcx .hover\:bg-\[\#a0004b\]:hover { background-color: #a0004b; }
.pcx .hover\:text-\[\#FFB8D0\]:hover { color: #FFB8D0; }
.pcx .line-clamp-2,
.pcx .pcx-clamp-2 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
@media (min-width: 768px) {
	.pcx .md\:bottom-8 { bottom: 2rem; }
	.pcx .md\:pb-16 { padding-bottom: 4rem; }
	.pcx .md\:min-w-\[150px\] { min-width: 150px; }
}

.pcx .pcx-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------
 * 2. Design behaviour
 * ------------------------------------------------------------------ */

/* The design pins the announcement bar and header; one sticky wrapper keeps
   both pinned and lets the header move up when the bar is closed. */
.pcx-head {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 70;
}

.pcx .pcx-logo-img {
	display: block;
	width: auto;
	height: 40px;
	max-width: 170px;
	object-fit: contain;
}

@media (min-width: 768px) {
	.pcx .pcx-logo-img { height: 46px; }
}

.pcx .pcx-footer-logo {
	display: inline-flex;
	padding: 6px 10px;
	border-radius: 12px;
	background: #fff;
}

.pcx .pcx-footer-logo .pcx-logo-img { height: 34px; }

/* Ken Burns on the visible hero slide. */
.pcx [data-pcx-hero-slide] .pcx-kenburns { transform-origin: center; }
.pcx [data-pcx-hero-slide].is-active .pcx-kenburns { animation: pcx-kenBurns 6s ease-out forwards; }

/* Slides without a photo yet fall back to the category emoji, floating as in
   the approved prototype. */
.pcx [data-pcx-hero-slide].is-active .pcx-hero-emoji { animation: pcx-float 5s ease-in-out infinite; }


/* Photo zoom on card hover (the design scaled its emoji). */
.pcx .group:hover .pcx-zoom { transform: scale(1.06); }
.pcx .group\/card:hover .pcx-card-zoom { transform: scale(1.1); }

/* Confetti burst layer (tiles in "What are you celebrating"). */
.pcx-confetti { position: fixed; inset: 0; z-index: 120; pointer-events: none; }
.pcx-confetti span {
	position: absolute;
	width: 8px;
	height: 12px;
	border-radius: 2px;
	animation: pcx-confettiPop .9s cubic-bezier(.22, 1, .36, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
	html:not(.pcx-force-motion) .pcx *,
	html:not(.pcx-force-motion) .pcx *::before,
	html:not(.pcx-force-motion) .pcx *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}


/* ---------------------------------------------------------------------
 * Utilities the compiled design CSS does not carry
 *
 * assets/css/pcx.css is generated from the approved prototype, so it only
 * contains the utilities that prototype happened to use. Anything the
 * storefront needs beyond that is declared here by hand rather than by
 * hand-editing the generated file.
 * ------------------------------------------------------------------ */

.pcx .leading-snug { line-height: 1.375; }
.pcx .normal-case { text-transform: none; }
.pcx .tracking-normal { letter-spacing: 0; }
.pcx .border-dashed { border-style: dashed; }
.pcx .border-white\/40 { border-color: rgba(255, 255, 255, .4); }
.pcx .ring-4 { box-shadow: 0 0 0 4px var(--pcx-ring, rgba(255, 255, 255, .1)); }
.pcx .ring-white\/10 { --pcx-ring: rgba(255, 255, 255, .1); }
.pcx .hover\:bg-white\/20:hover { background-color: rgba(255, 255, 255, .2); }
.pcx .hover\:bg-\[\#C0005A\]:hover { background-color: #C0005A; }
.pcx .text-\[\#FFD37A\] { color: #FFD37A; }
.pcx .text-\[11\.5px\] { font-size: 11.5px; }
.pcx .pr-3\.5 { padding-right: 14px; }
.pcx .min-w-\[30px\] { min-width: 30px; }
.pcx .max-w-\[720px\] { max-width: 720px; }
.pcx .max-w-\[520px\] { max-width: 520px; }
.pcx .text-\[17px\] { font-size: 17px; }
.pcx .bg-black\/\[0\.05\] { background-color: rgba(0, 0, 0, .05); }
.pcx .z-\[105\] { z-index: 105; }
.pcx .p-8 { padding: 32px; }
.pcx .object-contain { object-fit: contain; }
.pcx .gap-x-2 { column-gap: 8px; }
.pcx .gap-y-1 { row-gap: 4px; }
.pcx .h-\[205px\] { height: 205px; }
.pcx .min-w-\[230px\] { min-width: 230px; }
.pcx .tracking-\[0\.1em\] { letter-spacing: .1em; }
.pcx .bottom-2\.5 { bottom: 10px; }
.pcx .h-\[150px\] { height: 150px; }
.pcx .from-black\/55 { --tw-gradient-from: rgba(0, 0, 0, .55) var(--tw-gradient-from-position); --tw-gradient-to: rgba(0, 0, 0, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.pcx .shadow-\[0_8px_20px_rgba\(255\2c 184\2c 0\2c 0\.35\)\] { box-shadow: 0 8px 20px rgba(255, 184, 0, .35); }

.pcx .text-\[30px\] { font-size: 30px; }
.pcx .text-\[40px\] { font-size: 40px; }
.pcx .text-\[44px\] { font-size: 44px; }
.pcx .text-white\/80 { color: rgba(255, 255, 255, .8); }
.pcx .bg-black\/25 { background-color: rgba(0, 0, 0, .25); }
.pcx .border-white\/25 { border-color: rgba(255, 255, 255, .25); }
/* Gradient stops follow the generated file's own custom-property contract. */
.pcx .from-black\/75 { --tw-gradient-from: rgba(0, 0, 0, .75) var(--tw-gradient-from-position); --tw-gradient-to: rgba(0, 0, 0, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.pcx .via-black\/55 { --tw-gradient-to: rgba(0, 0, 0, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), rgba(0, 0, 0, .55) var(--tw-gradient-via-position), var(--tw-gradient-to); }
.pcx .to-black\/20 { --tw-gradient-to: rgba(0, 0, 0, .2) var(--tw-gradient-to-position); }
.pcx .via-\[\#FF2D6B\] { --tw-gradient-to: rgba(255, 45, 107, 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), #FF2D6B var(--tw-gradient-via-position), var(--tw-gradient-to); }
.pcx .to-\[\#FF6B2B\] { --tw-gradient-to: #FF6B2B var(--tw-gradient-to-position); }

@media (min-width: 640px) {
	.pcx .sm\:flex-row { flex-direction: row; }
	.pcx .sm\:items-end { align-items: flex-end; }
	.pcx .sm\:text-\[12px\] { font-size: 12px; }
}

@media (min-width: 1024px) {
	.pcx .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
	.pcx .md\:px-6 { padding-right: 24px; padding-left: 24px; }
	.pcx .md\:px-12 { padding-right: 48px; padding-left: 48px; }
	.pcx .md\:text-\[48px\] { font-size: 48px; }
	.pcx .md\:mt-12 { margin-top: 48px; }
	.pcx .md\:text-\[46px\] { font-size: 46px; }
	.pcx .md\:h-\[52px\] { height: 52px; }
	.pcx .md\:w-\[52px\] { width: 52px; }
	.pcx .md\:text-\[26px\] { font-size: 26px; }
	.pcx .md\:text-\[13\.5px\] { font-size: 13.5px; }
	.pcx .md\:text-\[14\.5px\] { font-size: 14.5px; }
	.pcx .md\:text-\[17px\] { font-size: 17px; }
	.pcx .md\:p-3\.5 { padding: 14px; }
	.pcx .md\:h-\[186px\] { height: 186px; }
	.pcx .md\:h-\[220px\] { height: 220px; }
}

/* The offer line is client-editable, so cap it at two lines instead of
   letting a long sentence push the countdown and button out of the strip. */
.pcx .pcx-clamp-2 {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}


/* ---------------------------------------------------------------------
 * Sub-pages: long-form content, shop toolbar, pagination
 * ------------------------------------------------------------------ */

.pcx .pcx-prose { font-size: 15px; line-height: 1.75; color: rgba(26, 26, 26, .82); }
.pcx .pcx-prose > :first-child { margin-top: 0; }
.pcx .pcx-prose h2 { font-family: var(--pc-font-display, 'Fraunces', serif); font-size: 26px; font-weight: 700; letter-spacing: -.01em; margin: 32px 0 10px; color: #1a1a1a; }
.pcx .pcx-prose h3 { font-size: 18px; font-weight: 800; margin: 24px 0 8px; color: #1a1a1a; }
.pcx .pcx-prose p { margin: 0 0 14px; }
.pcx .pcx-prose ul,
.pcx .pcx-prose ol { margin: 0 0 16px; padding-left: 22px; }
.pcx .pcx-prose li { margin-bottom: 7px; }
.pcx .pcx-prose a { color: #C0005A; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.pcx .pcx-prose img { max-width: 100%; height: auto; border-radius: 18px; }
.pcx .pcx-prose table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.pcx .pcx-prose th,
.pcx .pcx-prose td { padding: 10px 12px; border: 1px solid rgba(0, 0, 0, .07); text-align: left; }
.pcx .pcx-prose blockquote { margin: 0 0 16px; padding: 14px 18px; border-radius: 16px; background: #FFF0F5; border: 1px solid rgba(0, 0, 0, .05); }

.pcx .pcx-shop-toolbar .woocommerce-result-count { margin: 0; font-size: 12px; font-weight: 600; opacity: .6; }
.pcx .pcx-shop-toolbar .woocommerce-ordering { margin: 0; }
.pcx .pcx-shop-toolbar select {
	height: 40px;
	padding: 0 34px 0 14px;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 999px;
	background-color: #fff;
	font-size: 12px;
	font-weight: 700;
	color: #1a1a1a;
}

.pcx .pcx-shop-pagination .woocommerce-pagination ul { display: flex; gap: 6px; padding: 0; margin: 0; border: 0; list-style: none; }
.pcx .pcx-shop-pagination .woocommerce-pagination li { border: 0; margin: 0; }
.pcx .pcx-shop-pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	font-weight: 700;
	color: #1a1a1a;
	transition: background-color .2s ease, color .2s ease;
}
.pcx .pcx-shop-pagination .page-numbers:hover { background: #FFF0F5; color: #C0005A; }
.pcx .pcx-shop-pagination .page-numbers.current { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }


/* Single product: the WooCommerce summary keeps its own markup, so the
   storefront language is applied to it here rather than by rebuilding it. */
.pcx .pcx-crumbs { overflow-x: auto; white-space: nowrap; -ms-overflow-style: none; scrollbar-width: none; }
.pcx .pcx-crumbs::-webkit-scrollbar { display: none; }
.pcx .pcx-crumbs .pc-breadcrumbs { padding: 0; margin: 0; }
.pcx .pcx-crumbs a { color: inherit; }
.pcx .pcx-crumbs a:hover { color: #C0005A; }

.pcx.pc-single-product .pc-product-shell { width: 100%; max-width: none; }
.pcx.pc-single-product div.product { gap: 28px; }
.pcx.pc-single-product .woocommerce-product-gallery,
.pcx.pc-single-product div.product .summary,
.pcx.pc-single-product .pc-product-extra,
.pcx.pc-single-product .pc-booking-fields {
	border-radius: 24px;
}
.pcx.pc-single-product .product_title {
	font-family: var(--pc-font-display, 'Fraunces', serif);
	font-weight: 700;
	letter-spacing: -.01em;
}
.pcx.pc-single-product .related.products > h2,
.pcx.pc-single-product .upsells.products > h2 {
	font-family: var(--pc-font-display, 'Fraunces', serif);
	font-size: 26px;
	font-weight: 700;
}

/* The search form appears on the 404 page and in empty archives. */
.pcx .search-form,
.pcx .pc-search-form--inline { display: flex; gap: 8px; }
.pcx .search-form input[type="search"],
.pcx .pc-search-form--inline input[type="search"] {
	flex: 1;
	height: 48px;
	padding: 0 18px;
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 999px;
	background: #fff;
	font-size: 14px;
}
.pcx .search-form button,
.pcx .search-form input[type="submit"],
.pcx .pc-search-form--inline button {
	height: 48px;
	padding: 0 22px;
	border: 0;
	border-radius: 999px;
	background: #C0005A;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
}


/* Legacy sections reused inside the storefront shell (SEO copy, FAQ, service
   areas). They bring their own centred container, which would double up on
   the shell's, and their own card chrome, which is updated here to match. */
.pcx .pc-container { max-width: none; padding-right: 0; padding-left: 0; }
.pcx .pc-section { padding: 0; }
.pcx .pc-content-seo,
.pcx .pc-content-faq,
.pcx .pc-service-areas { margin-top: 40px; }
.pcx .pc-content-seo__inner,
.pcx .pc-content-faq__inner {
	padding: 24px;
	border: 1px solid rgba(0, 0, 0, .06);
	border-radius: 28px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .04);
}
.pcx .pc-content-seo__head h2,
.pcx .pc-content-faq__head h2,
.pcx .pc-service-areas h2 {
	font-family: var(--pc-font-display, 'Fraunces', serif);
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -.01em;
}
.pcx .pc-content-kicker {
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #C0005A;
}
.pcx .pc-faq-item { border-radius: 18px; }

@media (min-width: 768px) {
	.pcx .pc-content-seo__inner,
	.pcx .pc-content-faq__inner { padding: 40px; }
}


/* ---------------------------------------------------------------------
 * Sign-in screen
 *
 * One card, centred, sized to the viewport so the page does not scroll.
 * ------------------------------------------------------------------ */

body.woocommerce-account:not(.logged-in) #page.site {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}
body.woocommerce-account:not(.logged-in) #swup { flex: 1 1 auto; display: flex; }
body.woocommerce-account:not(.logged-in) .pcx-page { flex: 1 1 auto; display: flex; }

body.woocommerce-account:not(.logged-in) .pcx-page > div {
	display: flex;
	flex: 1 1 auto;
	align-items: center;
	justify-content: center;
	padding-top: 4px;
	padding-bottom: 4px;
}

body.woocommerce-account:not(.logged-in) .pcx-page > div { padding-bottom: 4px !important; }
body.woocommerce-account:not(.logged-in) .pcx-page article { width: 100%; max-width: 440px; margin: 0; }
body.woocommerce-account:not(.logged-in) .pcx-page article > div {
	position: relative;
	padding: 18px 20px;
	border: 1px solid rgba(0, 0, 0, .07);
	border-radius: 28px;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 20px 56px rgba(67, 35, 49, .10);
}

body.woocommerce-account:not(.logged-in) .pcx-prose a.pc-google-btn,
body.woocommerce-account:not(.logged-in) .pcx-prose .woocommerce-LostPassword a { text-decoration: none; }
body.woocommerce-account:not(.logged-in) .pcx-prose a.pc-google-btn { color: #1a1a1a; font-weight: 700; }

body.woocommerce-account:not(.logged-in) .pcx-foot,
body.woocommerce-account:not(.logged-in) .pcx-live-proof,
body.woocommerce-account:not(.logged-in) [data-pcx-mobilebar],
body.woocommerce-account:not(.logged-in) .hidden.md\:flex.fixed { display: none !important; }

.pcx .pc-auth-shell {
	display: block;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}
body.woocommerce-account:not(.logged-in) .pcx-page .woocommerce { padding: 0; }
.pcx .pc-auth-panel { padding: 0; border: 0; background: none; box-shadow: none; }

/* Card header: the eyebrow-and-serif pairing the storefront opens every
   section with. */
.pcx .pcx-auth-header { margin-bottom: 9px; text-align: center; }
.pcx .pcx-auth-eyebrow {
	display: block;
	margin-bottom: 6px;
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #C0005A;
}
.pcx .pcx-auth-head[hidden] { display: none; }

/* Pane heading. */
.pcx .pcx-auth-head { margin-bottom: 0; text-align: center; }
.pcx .pcx-auth-head h2 {
	display: block;
	margin: 0;
	font-family: var(--pc-font-display, 'Fraunces', serif);
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.015em;
	line-height: 1.1;
	color: #1a1a1a;
}
.pcx .pcx-auth-head p {
	margin: 3px 0 0;
	font-size: 12.5px;
	font-weight: 500;
	color: rgba(26, 26, 26, .55);
}

/* Log In / Register toggle. */
.pcx .pc-auth-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
	padding: 4px;
	margin-bottom: 10px;
	border-radius: 999px;
	background: #FFF0F5;
}
.pcx .pc-auth-tab {
	height: 38px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-size: 13.5px;
	font-weight: 700;
	color: rgba(26, 26, 26, .55);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.pcx .pc-auth-tab.is-active { background: #1a1a1a; color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }

.pcx .pc-auth-pane { display: none; }
.pcx .pc-auth-pane.is-active { display: block; }

.pcx .pcx-auth-note {
	margin: 0 0 8px;
	font-size: 12.5px;
	font-weight: 500;
	text-align: center;
	color: rgba(26, 26, 26, .55);
}

/* Fields. */
.pcx .pc-auth-panel .woocommerce-form-row { margin-bottom: 7px; }
.pcx .pc-auth-panel label {
	display: block;
	margin-bottom: 5px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: rgba(26, 26, 26, .7);
}
.pcx .pc-auth-panel .required { color: #C0005A; border: 0; }
.pcx .pc-auth-panel input[type="text"],
.pcx .pc-auth-panel input[type="email"],
.pcx .pc-auth-panel input[type="tel"],
.pcx .pc-auth-panel input[type="password"] {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 14px;
	background: #fff;
	font-size: 14px;
}
.pcx .pc-auth-panel input:focus { border-color: #C0005A; background-color: #fff; outline: none; box-shadow: 0 0 0 4px rgba(192, 0, 90, .08); }

.pcx .pc-auth-panel .woocommerce-form-login__rememberme { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 12.5px; font-weight: 600; }
.pcx .pc-auth-panel .woocommerce-form-login__rememberme span { text-transform: none; letter-spacing: 0; }

.pcx .pc-auth-panel button[type="submit"],
.pcx .pc-auth-panel .woocommerce-form-login__submit,
.pcx .pc-auth-panel .woocommerce-form-register__submit {
	width: 100%;
	height: 44px;
	border: 0;
	border-radius: 999px;
	background: #1a1a1a;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s ease;
}
.pcx .pc-auth-panel button[type="submit"]:hover { background: #C0005A; }

.pcx .pc-auth-panel .woocommerce-LostPassword {
	margin: 8px 0 0;
	font-size: 12.5px;
	text-align: center;
}
.pcx .pc-auth-panel .woocommerce-LostPassword a { color: rgba(26, 26, 26, .6); text-decoration: none; font-weight: 600; }
.pcx .pc-auth-panel .woocommerce-LostPassword a:hover { color: #C0005A; }

/* The older account styling sets a gradient on the submit button and tiles an
   icon into the first two fields; both are stated again here at a specificity
   that wins, rather than edited in the file they came from. */
body.woocommerce-account .pcx .pc-auth-panel button[type="submit"],
body.woocommerce-account .pcx .pc-auth-panel button.woocommerce-button,
body.woocommerce-account .pcx .pc-auth-panel input[type="submit"] {
	background: #1a1a1a !important;
	background-image: none !important;
	border: 0;
	border-radius: 999px;
	color: #fff;
	height: 44px;
	font-size: 14px;
	font-weight: 700;
}
body.woocommerce-account .pcx .pc-auth-panel button[type="submit"]:hover { background: #C0005A !important; }

body.woocommerce-account .pcx .pc-auth-panel input {
	background-image: none !important;
	background-color: #FFFBF8;
	padding: 0 14px;
	height: 44px;
	border: 1.5px solid rgba(0, 0, 0, .1);
	border-radius: 14px;
	font-size: 14px;
}

/* Register asks for five things, so its own spacing is tighter and the
   privacy note is set small rather than as a paragraph of body copy. */
.pcx .pc-auth-pane .woocommerce-privacy-policy-text p {
	margin: 8px 0 10px;
	font-size: 11px;
	line-height: 1.5;
	color: rgba(26, 26, 26, .5);
}
.pcx .pc-auth-pane .woocommerce-privacy-policy-text a { color: rgba(26, 26, 26, .7); }
.pcx .pc-auth-panel .woocommerce-form-register .woocommerce-form-row { margin-bottom: 8px; }
.pcx .pc-auth-panel .woocommerce-form-register label { margin-bottom: 3px; font-size: 11.5px; }
.pcx .pc-auth-panel .woocommerce-form-register input { height: 42px; }

/* Google. */
.pcx .pc-auth-divider { margin: 9px 0; }
.pcx .pc-auth-divider span { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; color: rgba(26, 26, 26, .4); background: #fff; }
.pcx .pc-google-btn,
.pcx .pc-auth-panel a[href*="google-login"] {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 46px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 999px;
	background: #fff;
	font-size: 13.5px;
	font-weight: 700;
	color: #1a1a1a;
	text-decoration: none;
}
.pcx .pc-google-btn:hover,
.pcx .pc-auth-panel a[href*="google-login"]:hover { background: #FFFBF8; border-color: rgba(0, 0, 0, .2); }

/* ---------------------------------------------------------------------
 * Signed-in account
 *
 * WooCommerce floats a 25% navigation column next to its content, which left
 * the dashboard as a narrow strip inside the storefront's own container. It
 * is laid out here as a two-column grid with the navigation as cards.
 * ------------------------------------------------------------------ */

.pcx .woocommerce-MyAccount-navigation ul { padding: 0; margin: 0; list-style: none; }
.pcx .pcx-prose .woocommerce-MyAccount-navigation li a,
.pcx .pcx-prose a.pcx-account-card,
.pcx .pcx-prose a.pcx-account-greet__cta,
.pcx .pcx-prose a.pcx-account-greet__wa { text-decoration: none; font-weight: 700; }

.pcx .pcx-prose .woocommerce-MyAccount-navigation li a { color: #1a1a1a; }
.pcx .pcx-prose .woocommerce-MyAccount-navigation li.is-active a { color: #fff; }
.pcx .pcx-prose .woocommerce-MyAccount-navigation li--logout a { color: #C0005A; }
.pcx .pcx-prose a.pcx-account-card { color: #1a1a1a; font-weight: 400; }
.pcx .pcx-prose a.pcx-account-greet__cta { color: #fff; }
.pcx .pcx-prose a.pcx-account-greet__wa { color: #0a7a2e; }

@media (min-width: 900px) {
	.pcx .woocommerce-account .woocommerce {
		display: grid;
		grid-template-columns: 250px minmax(0, 1fr);
		align-items: start;
		gap: 24px;
	}
	.pcx .woocommerce-MyAccount-navigation,
	.pcx .woocommerce-MyAccount-content { width: auto; float: none; margin: 0; padding: 0; }
	.pcx .woocommerce-account .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; grid-row: 1; }
	.pcx .woocommerce-MyAccount-navigation { grid-column: 1; grid-row: 2; position: sticky; top: 92px; }
	.pcx .woocommerce-MyAccount-content { grid-column: 2; grid-row: 2; }
}

.pcx .woocommerce-MyAccount-navigation {
	padding: 8px;
	border: 1px solid rgba(0, 0, 0, .06);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .04);
}

.pcx .woocommerce-MyAccount-navigation li { margin: 0; border: 0; }

.pcx .woocommerce-MyAccount-navigation li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-radius: 16px;
	font-size: 13.5px;
	font-weight: 700;
	color: #1a1a1a;
	transition: background-color .2s ease, color .2s ease;
}

.pcx .woocommerce-MyAccount-navigation li a:hover { background: #FFF0F5; color: #C0005A; }

.pcx .woocommerce-MyAccount-navigation li.is-active a {
	background: #1a1a1a;
	color: #fff;
}

.pcx .woocommerce-MyAccount-navigation li--logout a { color: #C0005A; }

.pcx .woocommerce-MyAccount-content { font-size: 14px; line-height: 1.7; }
.pcx .woocommerce-MyAccount-content > p { margin: 0 0 14px; }
.pcx .woocommerce-MyAccount-content h2,
.pcx .woocommerce-MyAccount-content h3 {
	font-family: var(--pc-font-display, 'Fraunces', serif);
	font-size: 22px;
	font-weight: 700;
	margin: 0 0 12px;
}

/* Dashboard greeting. */
.pcx .pcx-account-greet {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	padding: 20px;
	margin-bottom: 22px;
	border: 1px solid rgba(0, 0, 0, .06);
	border-radius: 24px;
	background: linear-gradient(135deg, #FFF0F5, #fff 55%, #FFFBEB);
}
.pcx .pcx-account-greet__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 18px;
	background: linear-gradient(135deg, #C0005A, #FF5A8A);
	color: #fff;
	font-size: 22px;
	font-weight: 800;
	flex-shrink: 0;
	box-shadow: 0 10px 22px rgba(192, 0, 90, .28);
}
.pcx .pcx-account-greet__body { flex: 1 1 200px; min-width: 0; }
.pcx .pcx-account-greet__body h2 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.pcx .pcx-account-greet__body p { margin: 2px 0 0; font-size: 13px; font-weight: 500; opacity: .6; }
.pcx .pcx-account-greet__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.pcx .pcx-account-greet__cta,
.pcx .pcx-account-greet__wa {
	display: inline-flex;
	align-items: center;
	height: 42px;
	padding: 0 18px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 700;
}
.pcx .pcx-account-greet__cta { background: #1a1a1a; color: #fff; }
.pcx .pcx-account-greet__cta:hover { background: #C0005A; }
.pcx .pcx-account-greet__wa { background: #E6F9ED; color: #0a7a2e; }

/* Dashboard shortcuts. */
.pcx .pcx-account-cards { display: grid; gap: 10px; }
.pcx .pcx-account-card {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	border: 1px solid rgba(0, 0, 0, .06);
	border-radius: 20px;
	background: #fff;
	color: #1a1a1a;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .04);
	transition: transform .2s ease, box-shadow .2s ease;
}
.pcx .pcx-account-card:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0, 0, 0, .08); }
.pcx .pcx-account-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 13px;
	background: #FFF0F5;
	color: #C0005A;
	flex-shrink: 0;
}
.pcx .pcx-account-card__body { flex: 1; min-width: 0; }
.pcx .pcx-account-card__title { display: block; font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; }
.pcx .pcx-account-card__text { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 500; opacity: .55; }
.pcx .pcx-account-card__go { opacity: .35; }
.pcx .pcx-account-card:hover .pcx-account-card__go { opacity: 1; color: #C0005A; }

@media (min-width: 640px) {
	.pcx .pcx-account-cards { grid-template-columns: 1fr 1fr; }
}

/* Orders table and the account forms. */
.pcx .woocommerce-orders-table,
.pcx .woocommerce-table--order-details {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid rgba(0, 0, 0, .06);
	border-radius: 18px;
	overflow: hidden;
}
.pcx .woocommerce-orders-table th,
.pcx .woocommerce-table--order-details th { background: #FFFBF8; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.pcx .woocommerce-orders-table th,
.pcx .woocommerce-orders-table td,
.pcx .woocommerce-table--order-details th,
.pcx .woocommerce-table--order-details td { padding: 12px 14px; border-bottom: 1px solid rgba(0, 0, 0, .05); text-align: left; }
.pcx .woocommerce-orders-table tr:last-child td { border-bottom: 0; }
.pcx .woocommerce-orders-table .button { height: 38px; padding: 0 16px; font-size: 12px; }

.pcx .woocommerce-EditAccountForm fieldset { margin-top: 18px; padding: 18px; border: 1px solid rgba(0, 0, 0, .06); border-radius: 18px; }
.pcx .woocommerce-EditAccountForm legend { padding: 0 6px; font-size: 13px; font-weight: 800; }
.pcx .woocommerce-form-row label,
.pcx .woocommerce-EditAccountForm label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; opacity: .7; }

.pcx .woocommerce-info,
.pcx .woocommerce-message,
.pcx .woocommerce-error {
	padding: 14px 16px;
	border-radius: 18px;
	border: 1px solid rgba(0, 0, 0, .06);
	background: #FFF0F5;
	font-size: 13.5px;
}

/* WooCommerce cart, checkout and account inside the storefront shell. */
.pcx .pc-wc-page .woocommerce-message,
.pcx .pc-wc-page .woocommerce-info,
.pcx .pc-wc-page .woocommerce-error { border-radius: 18px; }
.pcx .pc-wc-page table.shop_table { border-radius: 18px; overflow: hidden; }
.pcx .pc-wc-page .button,
.pcx .pc-wc-page button.button,
.pcx .pc-wc-page input.button,
.pcx .pc-wc-page a.button {
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 22px;
	border: 0;
	border-radius: 999px;
	background: #1a1a1a;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .01em;
	transition: background-color .2s ease;
}
.pcx .pc-wc-page .button:hover,
.pcx .pc-wc-page button.button:hover,
.pcx .pc-wc-page a.button:hover { background: #C0005A; color: #fff; }
.pcx .pc-wc-page .button.alt,
.pcx .pc-wc-page button.button.alt { background: #C0005A; }
.pcx .pc-wc-page input[type="text"],
.pcx .pc-wc-page input[type="email"],
.pcx .pc-wc-page input[type="tel"],
.pcx .pc-wc-page input[type="password"],
.pcx .pc-wc-page textarea,
.pcx .pc-wc-page select {
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 14px;
	padding: 11px 14px;
	font-size: 14px;
}


/* ---------------------------------------------------------------------
 * Mobile navigation drawer
 * ------------------------------------------------------------------ */

.pcx-drawer { position: fixed; inset: 0; z-index: 120; }
.pcx-drawer[hidden] { display: none; }

.pcx-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 8, 14, .45);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
	opacity: 0;
	transition: opacity .28s ease;
}

.pcx-drawer__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	display: flex;
	width: min(88vw, 360px);
	flex-direction: column;
	border-radius: 0 24px 24px 0;
	background: #FFFBF8;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
	transform: translateX(-102%);
	transition: transform .32s cubic-bezier(.22, 1, .36, 1);
}

.pcx-drawer.is-open .pcx-drawer__backdrop { opacity: 1; }
.pcx-drawer.is-open .pcx-drawer__panel { transform: none; }

.pcx-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid rgba(0, 0, 0, .06);
	background: #fff;
	border-radius: 0 24px 0 0;
}
.pcx-drawer__head .pcx-logo-img { width: auto; height: 32px; max-width: 150px; }

.pcx-drawer__body { flex: 1; padding: 14px 16px 18px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

.pcx-drawer__searchbox {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 46px;
	padding: 0 6px 0 14px;
	border: 1.5px solid rgba(0, 0, 0, .1);
	border-radius: 999px;
	background: #fff;
}
.pcx-drawer__searchbox input[type="search"] {
	flex: 1;
	min-width: 0;
	height: 100%;
	border: 0;
	background: transparent;
	font-size: 13.5px;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}
.pcx-drawer__searchgo {
	height: 34px;
	padding: 0 16px;
	border: 0;
	border-radius: 999px;
	background: #1a1a1a;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}

.pcx-drawer__quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.pcx-drawer__quicklink {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 11px 12px;
	border: 1px solid rgba(0, 0, 0, .06);
	border-radius: 16px;
	background: #fff;
	font-size: 12.5px;
	font-weight: 700;
	color: #1a1a1a;
}
.pcx-drawer__quickicon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 10px;
	background: #FFF0F5;
	color: #C0005A;
	flex-shrink: 0;
}

.pcx-drawer__label {
	margin: 20px 0 8px;
	font-size: 10.5px;
	font-weight: 900;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(26, 26, 26, .45);
}

.pcx-drawer .pcx-drawer__tree { padding: 0; margin: 0; list-style: none; }
.pcx-drawer__branch { border-bottom: 1px solid rgba(0, 0, 0, .06); }
.pcx-drawer__branch:last-child { border-bottom: 0; }
.pcx-drawer__branchrow { display: flex; align-items: center; gap: 6px; }
.pcx-drawer__branchlink { display: flex; flex: 1; min-width: 0; align-items: center; gap: 10px; padding: 12px 2px; color: #1a1a1a; }
.pcx-drawer__emoji {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid rgba(0, 0, 0, .06);
	font-size: 17px;
	flex-shrink: 0;
}
.pcx-drawer__branchname { display: block; font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; }
.pcx-drawer__branchcount { display: block; margin-top: 1px; font-size: 11px; font-weight: 500; opacity: .55; }
.pcx-drawer__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 999px;
	background: #fff;
	color: #1a1a1a;
	flex-shrink: 0;
	transition: transform .25s ease, background-color .2s ease;
}
.pcx-drawer__toggle[aria-expanded="true"] { transform: rotate(90deg); background: #1a1a1a; color: #fff; }

.pcx-drawer .pcx-drawer__kids { padding: 0 0 10px 46px; margin: 0; list-style: none; }
.pcx-drawer .pcx-drawer__kids[hidden] { display: none; }
.pcx-drawer__kids a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 0;
	font-size: 12.5px;
	font-weight: 600;
	color: rgba(26, 26, 26, .78);
}
.pcx-drawer__kids a span { font-size: 11px; font-weight: 700; opacity: .4; }
.pcx-drawer__kidsall { color: #C0005A !important; font-weight: 800 !important; }

.pcx-drawer__foot {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	border-top: 1px solid rgba(0, 0, 0, .06);
	background: #fff;
}
.pcx-drawer__wa,
.pcx-drawer__call {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	flex-shrink: 0;
}
.pcx-drawer__wa { background: #E6F9ED; color: #0a7a2e; }
.pcx-drawer__call { border: 1px solid rgba(0, 0, 0, .1); background: #fff; color: #1a1a1a; }
.pcx-drawer__book {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	border-radius: 999px;
	background: #C0005A;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

/* Live search suggestions, shared by the drawer and the header's mobile form. */
.pcx-livesearch-results {
	margin-top: 8px;
	padding: 6px;
	border: 1px solid rgba(0, 0, 0, .07);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 12px 30px rgba(0, 0, 0, .07);
	max-height: 46vh;
	overflow-y: auto;
}
.pcx-livesearch-results[hidden] { display: none; }
.pcx-livesearch-results a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-radius: 14px;
	color: #1a1a1a;
}
.pcx-livesearch-results a:hover,
.pcx-livesearch-results a:focus { background: #FFF0F5; }
.pcx-livesearch-results img { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex-shrink: 0; }
.pcx-livesearch-results__title { display: block; font-size: 12.5px; font-weight: 700; line-height: 1.3; }
.pcx-livesearch-results__price { display: block; margin-top: 2px; font-size: 12px; font-weight: 800; color: #C0005A; }
.pcx-livesearch-results__empty { padding: 12px; margin: 0; font-size: 12.5px; font-weight: 600; text-align: center; opacity: .6; }

body.pcx-drawer-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	html:not(.pcx-force-motion) .pcx-drawer__panel,
	html:not(.pcx-force-motion) .pcx-drawer__backdrop { transition: none; }
}

/* Collections mega menu (header). Reuses the category nav markup and lays
   every parent category out as a column with its busiest sub-categories. */
.pcx .pcx-nav-menu { position: relative; }

.pcx .pcx-nav-menu__panel {
	position: absolute;
	top: calc(100% + 22px);
	left: -28px;
	z-index: 80;
	width: min(900px, calc(100vw - 48px));
	padding: 26px 28px;
	border: 1px solid rgba(0, 0, 0, .06);
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 24px 64px rgba(0, 0, 0, .12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .22s ease, transform .22s ease, visibility .22s;
	pointer-events: none;
}

.pcx .pcx-nav-menu__panel::before {
	position: absolute;
	top: -24px;
	right: 0;
	left: 0;
	height: 24px;
	content: '';
}

.pcx .pcx-nav-menu.is-open .pcx-nav-menu__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

/* The columns inside the panel re-declare visibility so they lay out inline,
   and "visible" on a child beats "hidden" on its parent — which left a
   900x475 invisible but hit-testable block sitting over the page, so moving
   the pointer anywhere under the header opened the menu. While the menu is
   closed its columns are hidden too. */
.pcx .pcx-nav-menu:not(.is-open) .pcx-nav-menu__list,
.pcx .pcx-nav-menu:not(.is-open) .pcx-nav-menu__list .mega-menu-panel {
	visibility: hidden;
	pointer-events: none;
}

.pcx .pcx-nav-menu.is-open > a { color: #C0005A; opacity: 1; }

.pcx .pcx-nav-menu__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px 26px;
}

.pcx .pcx-nav-menu__list > li > .nav-top-link {
	display: block;
	margin-bottom: 6px;
	color: #1a1a1a;
	font-family: 'Fraunces', serif;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -.01em;
}

.pcx .pcx-nav-menu__list > li > .nav-top-link:hover { color: #C0005A; }
.pcx .pcx-nav-menu__list .chevron { display: none; }

.pcx .pcx-nav-menu__list .mega-menu-panel {
	position: static;
	display: block;
	width: auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}

.pcx .pcx-nav-menu__list .mega-menu-list {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.pcx .pcx-nav-menu__list .mega-menu-list > li:nth-child(n+7):not(:last-child) { display: none; }

.pcx .pcx-nav-menu__list .nav-sub-link {
	display: block;
	padding: 3px 0;
	border-radius: 0;
	background: none;
	color: rgba(0, 0, 0, .55);
	font-size: 12.5px;
	font-weight: 500;
}

.pcx .pcx-nav-menu__list .nav-sub-link:hover { background: none; color: #C0005A; }
.pcx .pcx-nav-menu__list .nav-sub-link--all { color: #C0005A; font-weight: 700; }

/* Header search: the existing live-search dropdown, restyled. */
.pcx [data-pcx-search] .pc-search-results {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	left: 0;
	z-index: 90;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, .06);
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 24px 48px rgba(0, 0, 0, .12);
}

/* ---------------------------------------------------------------------
 * 3. Site-wide alignment — map the theme's tokens onto the design's so
 *    category, product, checkout and account pages share its look.
 * ------------------------------------------------------------------ */
:root {
	--pc-purple-900: #1a1a1a;
	--pc-purple-800: #2a0a14;
	--pc-purple-700: #C0005A;
	--pc-purple-600: #FF4D8E;
	--pc-magenta: #C0005A;
	--pc-magenta-light: #FF5A8A;
	--pc-berry: #C0005A;
	--pc-berry-dark: #9A0048;
	--pc-gold: #FFB800;
	--pc-gold-light: #FFD66B;
	--pc-cream: #FFFBF8;
	--pc-cream-dark: #FFF0F5;
	--pc-ink: #1a1a1a;
	--pc-ink-soft: #6b6b6b;
	--pc-success: #0a7a2e;

	--pc-gradient-brand: linear-gradient(90deg, #C0005A 0%, #FF4D8E 55%, #FFB800 100%);
	--pc-gradient-gold: linear-gradient(135deg, #FFB800 0%, #FF8A00 100%);

	--pc-font-heading: "Fraunces", Georgia, "Times New Roman", serif;
	--pc-font-body: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--pc-radius-sm: 12px;
	--pc-radius-md: 20px;
	--pc-radius-lg: 28px;

	--pc-shadow-sm: 0 8px 24px rgba(0, 0, 0, .04);
	--pc-shadow-md: 0 16px 48px rgba(0, 0, 0, .06);
	--pc-shadow-lg: 0 24px 64px rgba(0, 0, 0, .12);
}

body {
	background: #fff;
	color: #1a1a1a;
	font-family: var(--pc-font-body);
}

/* The design sets section headings in Fraunces and card titles in Outfit. */
h3, h4, h5, h6 { font-family: var(--pc-font-body); }
h1, h2 { letter-spacing: -.02em; }

/* Container: match the design's 1280px frame (1216px content + 32px gutters). */
:root { --pc-container: 1216px; }

/* Product cards (category grids, related products) — the design's
   best-seller card: white tile, rounded photo, bold price, dark pill CTA. */
.pc-product-card {
	padding: 12px;
	border: 1px solid rgba(0, 0, 0, .06);
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .04);
	transition: transform .3s ease, box-shadow .3s ease;
}

.pc-product-card:hover {
	transform: translateY(-4px);
	border-color: rgba(0, 0, 0, .06);
	box-shadow: 0 20px 48px rgba(0, 0, 0, .10);
}

.pc-product-card__media { overflow: hidden; border-radius: 16px; }
.pc-product-card__image { transition: transform .5s ease; }
.pc-product-card:hover .pc-product-card__image { transform: scale(1.06); }

.pc-product-card__body { padding: 12px 6px 4px; }

.pc-product-card__title,
.pc-product-card__title a {
	color: #1a1a1a;
	font-family: var(--pc-font-body);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.25;
}

.pc-product-card__price {
	margin-top: 8px;
	padding: 0;
	border: 0;
	background: none;
}

.pc-product-card__price-label { display: none; }
.pc-product-card__price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.pc-product-card__price-row .price { display: inline-flex; flex-direction: row-reverse; align-items: baseline; gap: 8px; }
.pc-product-card__price-row .price ins,
.pc-product-card__price-row .price > .amount { color: #1a1a1a; font-size: 18px; font-weight: 800; text-decoration: none; }
.pc-product-card__price-row .price del { color: rgba(26, 26, 26, .4); font-size: 12px; font-weight: 500; }

.pc-product-card__discount {
	padding: 2px 8px;
	border-radius: 999px;
	background: #E6F9ED;
	color: #0a7a2e;
	font-size: 11px;
	font-weight: 700;
}

.pc-product-card__book {
	display: flex;
	height: 44px;
	margin-top: 12px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: 999px;
	background: #1a1a1a;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	transition: background .25s ease;
}

.pc-product-card:hover .pc-product-card__book,
.pc-product-card__book:hover { background: #C0005A; color: #fff; }

/* WooCommerce "Sale!" flash in the design's pill style. */
.woocommerce span.onsale {
	min-width: 0;
	min-height: 0;
	padding: 4px 10px;
	border-radius: 999px;
	background: #C0005A;
	box-shadow: 0 6px 16px rgba(192, 0, 90, .4);
	color: #fff;
	font-size: 11px;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.pc-product-card .pc-product-card__price-row .price { display: inline-flex; flex-direction: row-reverse; align-items: baseline; gap: 8px; }

/* Reviews: keep every slide the same height so the carousel doesn't jump
   between short and long reviews. */
@media (min-width: 768px) {
	.pcx [data-pcx-reviews-track] > div > .grid { min-height: 250px; }
	.pcx [data-pcx-reviews-track] > div > .grid > div:first-child { display: flex; flex-direction: column; }
	.pcx [data-pcx-reviews-track] > div > .grid > div:first-child > .inline-flex:last-child { margin-top: auto; align-self: flex-start; }
}

/* ---------------------------------------------------------------------
 * 4. Smoothness
 * ------------------------------------------------------------------ */


/* Backdrop blur on a sticky header is repainted on every scroll frame; on
   phones use the near-identical solid fill instead. */
@media (max-width: 767px) {
	.pcx-head .backdrop-blur-xl { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: rgba(255, 255, 255, .97); }
	.pcx-head .pcx-header-row { padding-right: 108px; }
	.pcx-head .pcx-header-brand { width: 100%; min-width: 0; overflow: hidden; }
	.pcx-head .pcx-header-brand > a { min-width: 0; }
	.pcx-head .pcx-logo-img { width: auto; height: 34px; max-width: 118px; }
	.pcx-head .pcx-header-actions { position: absolute !important; top: 50%; right: 16px; z-index: 10; display: flex !important; gap: 6px; visibility: visible !important; opacity: 1 !important; transform: translateY(-50%); }
	.pcx-head .pcx-mobile-search,
	.pcx-head .pcx-mobile-basket { display: flex !important; visibility: visible !important; opacity: 1 !important; }
	.pcx-head .pcx-header-actions > a,
	.pcx-head .pcx-header-actions > button { width: 38px; height: 38px; }
	.pcx .pcx-live-proof { left: 10px; bottom: 82px; display: block; }
	.pcx .pcx-live-proof > div { width: min(272px, calc(100vw - 20px)); }
	.pcx [data-pcx-mobilebar] > div { gap: 8px; padding: 8px; }
	.pcx [data-pcx-mobilebar] .pcx-mobile-wa,
	.pcx [data-pcx-mobilebar] .pcx-mobile-call { width: 40px; height: 40px; }
	.pcx [data-pcx-mobilebar] .pcx-mobile-book { height: 40px; padding-right: 13px; padding-left: 13px; font-size: 12.5px; }
}


/* iOS Safari zooms the page in whenever a field it focuses is set below 16px,
   and leaves it zoomed. Every control on a phone is 16px for that reason; the
   fields keep their height through padding instead. */
@media (max-width: 767px) {
	.pc-booking-fields input,
	.pc-booking-fields select,
	.pc-booking-fields textarea,
	.pcx input[type="text"],
	.pcx input[type="search"],
	.pcx input[type="email"],
	.pcx input[type="tel"],
	.pcx input[type="number"],
	.pcx input[type="password"],
	.pcx input[type="date"],
	.pcx input[type="time"],
	.pcx select,
	.pcx textarea,
	.woocommerce input.input-text,
	.woocommerce select,
	.woocommerce textarea { font-size: 16px !important; }
}

/* Sentinel for the category listing's load-as-you-scroll. */
.pcx .pcx-infinite__dot {
	width: 22px;
	height: 22px;
	border: 2px solid rgba(0, 0, 0, .12);
	border-top-color: #C0005A;
	border-radius: 50%;
	animation: pcx-spin360 .8s linear infinite;
}
.pcx .pcx-infinite.is-complete .pcx-infinite__dot,
.pcx .pcx-infinite.has-error .pcx-infinite__dot { display: none; }
.pcx .pcx-infinite.is-complete { opacity: .45; }

/* A card's title is a link of its own; at a line's height it is a poor target
   on a phone, so it carries a little vertical padding there. */
@media (max-width: 767px) {
	.pcx .pcx-page .group > .p-3 > a[href]:first-child,
	.pcx .pcx-home .group > .p-3 > a[href]:first-child { padding-top: 4px; padding-bottom: 4px; }
}

/* The announcement bar's close button is 24px by design; give it a 34px
   target so it can be dismissed without several tries. */
.pcx [data-pcx-topbar-close] { position: relative; }
.pcx [data-pcx-topbar-close]::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 34px;
	height: 34px;
	content: '';
	transform: translate(-50%, -50%);
}

/* The carousel dots stay 8px, as designed, but a finger needs more than that
   to aim at, so each one carries an invisible 32px target. */
.pcx .pcx-hero-dot { position: relative; }
.pcx .pcx-hero-dot::after {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 32px;
	content: '';
	transform: translate(-50%, -50%);
}

/* Floating hero emoji: lift them off busy photos. */
.pcx .pcx-accent { filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .28)); }

/* Quick view: show the whole product photo over a blurred fill of itself. */
.pcx .pcx-quick { max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.pcx .pcx-quick__media { aspect-ratio: 16 / 9; max-height: 46vh; overflow: hidden; }
.pcx .pcx-quick__bg { position: absolute; inset: -20px; width: calc(100% + 40px); height: calc(100% + 40px); object-fit: cover; filter: blur(22px) saturate(1.2); opacity: .55; transform: scale(1.05); }
.pcx .pcx-quick__img { position: relative; width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 767px) { .pcx .pcx-quick__media { aspect-ratio: 4 / 3; } }

/* Click ripple (design's rippleAnim). */
.pcx [data-pcx-ripple] { position: relative; overflow: hidden; }
.pcx .pcx-ripple { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 999px; background: rgba(0, 0, 0, .12); pointer-events: none; animation: pcx-rippleAnim .6s ease-out forwards; }
.pcx [data-pcx-confetti] .pcx-ripple { background: rgba(255, 255, 255, .7); }

/* Combo cards: the whole flyer, centred over a blurred fill of itself. */
.pcx .pcx-combo-fill { position: absolute; inset: -24px; width: calc(100% + 48px); height: calc(100% + 48px); object-fit: cover; filter: blur(18px) saturate(1.15); opacity: .7; }
.pcx .pcx-combo-img { position: absolute; inset: 10px 10px 42px; width: calc(100% - 20px); height: calc(100% - 52px); object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .18)); }
.pcx .h-\[240px\] { height: 240px; }
@media (min-width: 768px) { .pcx .md\:h-\[280px\] { height: 280px; } }

/* ------------------------------------------------------------------
 * Blog (journal)
 *
 * The utilities the blog templates need but the generated pcx.css never
 * saw, plus the two pieces of blog furniture: the reading-progress bar
 * and the category chip row.
 * ------------------------------------------------------------------ */
.pcx .py-8 { padding-top: 32px; padding-bottom: 32px; }
.pcx .leading-relaxed { line-height: 1.625; }
.pcx .leading-\[1\.05\] { line-height: 1.05; }
.pcx .max-w-\[820px\] { max-width: 820px; }
.pcx .text-white\/75 { color: rgba(255, 255, 255, .75); }
.pcx .border-black\/\[0\.07\] { border-color: rgba(0, 0, 0, .07); }
.pcx .border-black\/\[0\.08\] { border-color: rgba(0, 0, 0, .08); }
.pcx .shadow-\[0_16px_48px_rgba\(0\2c 0\2c 0\2c 0\.06\)\] { box-shadow: 0 16px 48px rgba(0, 0, 0, .06); }
.pcx .hover\:opacity-90:hover { opacity: .9; }
@media (min-width: 768px) { .pcx .md\:py-10 { padding-top: 40px; padding-bottom: 40px; } }

/* Category chips scroll sideways on a phone without showing a scrollbar. */
.pcx .pcx-no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.pcx .pcx-no-scrollbar::-webkit-scrollbar { display: none; }

/* How far through the guide the reader is. The bar is moved to <body> by
   pcx.js, because the page sits inside a transformed container and a fixed
   element inside one of those resolves against the container, not the
   viewport — so these rules must not require a .pcx ancestor. */
.pcx-read-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: 3px; background: rgba(0, 0, 0, .06); pointer-events: none; }
.pcx-read-progress > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #C0005A, #FF6B2B); transition: width .12s linear; }

@media (prefers-reduced-motion: reduce) {
	.pcx-read-progress > span { transition: none; }
}

/* The blog card's featured (wide) variant, built in PHP rather than markup. */
.pcx .h-\[190px\] { height: 190px; }
.pcx .leading-\[1\.1\] { line-height: 1.1; }
.pcx .text-\[15\.5px\] { font-size: 15.5px; }
@media (min-width: 768px) {
	.pcx .md\:col-span-3 { grid-column: span 3 / span 3; }
	.pcx .md\:h-auto { height: auto; }
	.pcx .md\:min-h-\[300px\] { min-height: 300px; }
	.pcx .md\:w-\[46\%\] { width: 46%; }
	.pcx .md\:w-\[54\%\] { width: 54%; }
	.pcx .md\:text-\[16\.5px\] { font-size: 16.5px; }
	.pcx .md\:text-\[30px\] { font-size: 30px; }
}

/* Homepage tiles: a long label borrows the tile's side padding on phones. */
.pcx .-mx-2 { margin-left: -8px; margin-right: -8px; }
@media (min-width: 768px) { .pcx .md\:mx-0 { margin-left: 0; margin-right: 0; } }

/* Reviews carousel reused outside the homepage (product pages, above the footer). */
.pcx .leading-\[1\] { line-height: 1; }
.pcx .pb-12 { padding-bottom: 48px; }
.pcx .text-black\/15 { color: rgba(0, 0, 0, .15); }