/*!
 * Just Print It theme rules.
 *
 * app.css already ships the source preflight, base layer and every utility the
 * source design uses, so this file only contains:
 *   a. styles for markup that has no source equivalent (WooCommerce output,
 *      WordPress notices, the checkout block), and
 *   b. functional rules and JS driven motion.
 * No global element rules and no restyling of elements that carry source
 * classes.
 */

/* -------------------------------------------------------------------------
 * 1. Token aliases (values copied from the source custom properties)
 * ---------------------------------------------------------------------- */

:root {
	--color-surface: hsl(var(--card));
	--color-primary: hsl(var(--primary));
	--color-border: hsl(var(--border));
	--card-radius: var(--radius);
	--section-padding: 2rem;
	--header-height: 96px;
	--checkout-gap: 3rem;
}

/* -------------------------------------------------------------------------
 * 2. Site identity (logo / wordmark)
 * ---------------------------------------------------------------------- */

.site-logo-wrap {
	display: block;
	width: var(--logo-height);
	height: var(--logo-height);
}

.site-logo-img {
	height: var(--logo-height) !important;
	width: auto !important;
	display: block;
}

.site-logo-text {
	line-height: var(--logo-height);
	display: block;
}

/* -------------------------------------------------------------------------
 * 3. JS driven motion
 *
 * The source animates every section child with framer-motion:
 *   hidden  { opacity: 0, y: 28 }
 *   visible { opacity: 1, y: 0, duration: 0.65, delay: index * 0.08,
 *             ease: cubic-bezier(0.25, 0.4, 0.25, 1) }
 * triggered by useInView({ once: true, margin: '-80px' }).
 * ---------------------------------------------------------------------- */

.reveal {
	opacity: 0;
	transform: translateY(28px);
}

.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.65s cubic-bezier(0.25, 0.4, 0.25, 1) var(--reveal-delay, 0s),
		transform 0.65s cubic-bezier(0.25, 0.4, 0.25, 1) var(--reveal-delay, 0s);
}

.reveal-d0 { --reveal-delay: 0s; }
.reveal-d1 { --reveal-delay: 0.08s; }
.reveal-d2 { --reveal-delay: 0.16s; }
.reveal-d3 { --reveal-delay: 0.24s; }
.reveal-d4 { --reveal-delay: 0.32s; }
.reveal-d5 { --reveal-delay: 0.4s; }
.reveal-d6 { --reveal-delay: 0.48s; }
.reveal-d7 { --reveal-delay: 0.56s; }
.reveal-d8 { --reveal-delay: 0.64s; }
.reveal-d9 { --reveal-delay: 0.72s; }
.reveal-d10 { --reveal-delay: 0.8s; }
.reveal-d11 { --reveal-delay: 0.88s; }
.reveal-d12 { --reveal-delay: 0.96s; }
.reveal-d13 { --reveal-delay: 1.04s; }
.reveal-d14 { --reveal-delay: 1.12s; }
.reveal-d15 { --reveal-delay: 1.2s; }
.reveal-d16 { --reveal-delay: 1.28s; }
.reveal-d17 { --reveal-delay: 1.36s; }
.reveal-d18 { --reveal-delay: 1.44s; }
.reveal-d19 { --reveal-delay: 1.52s; }
.reveal-d20 { --reveal-delay: 1.6s; }
.reveal-d21 { --reveal-delay: 1.68s; }
.reveal-d22 { --reveal-delay: 1.76s; }
.reveal-d23 { --reveal-delay: 1.84s; }
.reveal-d24 { --reveal-delay: 1.92s; }

/* Never hide content in the Customizer preview or when script is off. */
body.is-customizer .reveal,
body.is-customizer .reveal.is-visible {
	opacity: 1;
	transform: none;
}

@media (scripting: none) {
	.reveal {
		opacity: 1;
		transform: none;
	}
}

/* Hero entrance: opacity 0 / scale 1.04 for 1.2s, then staggered copy. */
.theme-hero-video {
	opacity: 0;
	animation: themeHeroVideo 1.2s cubic-bezier(0.25, 0.4, 0.25, 1) forwards;
}

@keyframes themeHeroVideo {
	from { opacity: 0; transform: scale(1.04); }
	to { opacity: 1; transform: scale(1); }
}

.theme-hero-h1 {
	opacity: 0;
	animation: themeHeroText 0.8s cubic-bezier(0.25, 0.4, 0.25, 1) 0.2s forwards;
}

.theme-hero-p {
	opacity: 0;
	animation: themeHeroCopy 0.7s cubic-bezier(0.25, 0.4, 0.25, 1) 0.45s forwards;
}

.theme-hero-cta {
	opacity: 0;
	animation: themeHeroFade 0.3s linear 0.7s forwards;
}

@keyframes themeHeroText {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes themeHeroCopy {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes themeHeroFade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (scripting: none) {
	.theme-hero-video,
	.theme-hero-h1,
	.theme-hero-p,
	.theme-hero-cta {
		opacity: 1;
		animation: none;
	}
}

/* Mobile navigation: framer-motion opacity/y -8 spring. */
.theme-menu-in {
	animation: themeMenuIn 0.3s cubic-bezier(0.25, 0.4, 0.25, 1) forwards;
}

.theme-menu-out {
	animation: themeMenuOut 0.3s cubic-bezier(0.25, 0.4, 0.25, 1) forwards;
}

@keyframes themeMenuIn {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes themeMenuOut {
	from { opacity: 1; transform: translateY(0); }
	to { opacity: 0; transform: translateY(-8px); }
}

/* Category cards lift 5px on hover (framer-motion whileHover={{ y: -5 }}). */
.theme-hover-lift-y5 {
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.theme-hover-lift-y5:hover {
	transform: translateY(-5px);
}

/* FAQ answer panels: height 0 -> auto, opacity 0 -> 1 over 0.3s. */
.theme-faq-panel {
	height: 0;
	opacity: 0;
	overflow: hidden;
	transition: height 0.3s cubic-bezier(0.25, 0.4, 0.25, 1),
		opacity 0.3s cubic-bezier(0.25, 0.4, 0.25, 1);
}

.theme-faq-panel[data-open='true'] {
	height: auto;
	opacity: 1;
}

.theme-faq-panel[data-animating='true'] {
	overflow: hidden;
}

/* Form success block: opacity/scale 0.9 -> 1 over 0.4s, icon springs in. */
.theme-success-enter {
	animation: themeSuccessIn 0.4s cubic-bezier(0.25, 0.4, 0.25, 1) forwards;
}

.theme-success-enter [data-theme-success-icon] {
	animation: themeSuccessIcon 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s both;
}

@keyframes themeSuccessIn {
	from { opacity: 0; transform: scale(0.9); }
	to { opacity: 1; transform: scale(1); }
}

@keyframes themeSuccessIcon {
	from { transform: scale(0); }
	to { transform: scale(1); }
}

/* -------------------------------------------------------------------------
 * 4. Product cards
 *
 * Pattern A hit area: the transparent overlay link covers the card, every
 * non interactive descendant ignores pointer events and the add to cart
 * controls re-enable them above the overlay.
 * ---------------------------------------------------------------------- */

.theme-product-card-wrap {
	min-width: 0;
}

.theme-product-card {
	position: relative;
}

.theme-product-card > .theme-card-link {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: auto;
}

.theme-product-card .theme-card-media {
	z-index: 3;
	pointer-events: none;
	transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.theme-product-card:hover .theme-card-media {
	transform: translateY(-3px);
}

.theme-product-card .theme-card-media img {
	transition: transform 0.7s cubic-bezier(0.25, 0.4, 0.25, 1),
		opacity 0.5s ease;
}

.theme-product-card:hover .theme-card-media img {
	transform: scale(1.04);
}

.theme-product-card .theme-card-cta {
	pointer-events: auto;
}

.theme-product-card .theme-card-badge {
	pointer-events: none;
}

.theme-product-grid {
	align-items: stretch;
}

.theme-swatch {
	background-color: var(--swatch, transparent);
}

/* -------------------------------------------------------------------------
 * 5. Price filter: two overlapping full width range inputs (Radix pattern)
 * ---------------------------------------------------------------------- */

.price-range-wrapper {
	position: relative;
	height: 1.25rem;
}

.range-track-bg,
.range-track-fill {
	position: absolute;
	top: 50%;
	height: 0.5rem;
	transform: translateY(-50%);
	border-radius: 9999px;
	pointer-events: none;
}

.range-track-bg {
	left: 0;
	right: 0;
	background-color: hsl(var(--secondary));
}

.range-track-fill {
	background-color: hsl(var(--primary));
}

.range-input {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	pointer-events: none;
}

.range-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	pointer-events: auto;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 9999px;
	border: 2px solid hsl(var(--primary));
	background-color: hsl(var(--background));
	cursor: pointer;
}

.range-input::-moz-range-thumb {
	pointer-events: auto;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 9999px;
	border: 2px solid hsl(var(--primary));
	background-color: hsl(var(--background));
	cursor: pointer;
}

.range-input--max { z-index: 3; }
.range-input--min { z-index: 4; }

/* -------------------------------------------------------------------------
 * 6. WooCommerce: quantity control and add to cart row
 * ---------------------------------------------------------------------- */

.theme-quantity-wrapper {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	height: 3rem;
	width: 7.5rem;
	padding: 0 0.5rem;
	border: 1px solid hsl(var(--border));
	border-radius: 9999px;
	background-color: hsl(var(--background));
}

.theme-quantity-wrapper button {
	padding: 0.25rem;
	color: hsl(var(--muted-foreground));
	background: none;
	border: 0;
	cursor: pointer;
	transition: color 0.2s;
}

.theme-quantity-wrapper button:hover {
	color: hsl(var(--primary));
}

.theme-qty-input {
	width: 2.5rem;
	border: 0;
	background: transparent;
	text-align: center;
	font-family: var(--font-body);
	font-size: 1rem;
	color: hsl(var(--foreground));
	-moz-appearance: textfield;
}

.theme-qty-input::-webkit-outer-spin-button,
.theme-qty-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.theme-add-to-cart-area {
	display: flex;
	align-items: stretch;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.theme-add-to-cart-area .single_add_to_cart_button {
	flex: 1 1 auto;
	min-width: 160px;
	position: relative;
	z-index: 1;
}

/* Disabled add to cart buttons must not look interactive. */
.single_add_to_cart_button.button:disabled,
.single_add_to_cart_button.button.disabled,
.add_to_cart_button.button:disabled,
.add_to_cart_button.button.disabled {
	cursor: not-allowed !important;
	opacity: 0.4 !important;
	pointer-events: none !important;
}

.single_add_to_cart_button.button:disabled:hover,
.single_add_to_cart_button.button.disabled:hover,
.add_to_cart_button.button:disabled:hover,
.add_to_cart_button.button.disabled:hover {
	opacity: 0.4 !important;
}

/* Hide the "View cart" link WooCommerce injects after an AJAX add. */
.woocommerce-page a.added_to_cart.wc-forward,
.single-product a.added_to_cart.wc-forward,
body a.added_to_cart.wc-forward {
	display: none !important;
}

/* WooCommerce spinner replaced by the theme's own loading state. */
.single-product .single_add_to_cart_button.loading::after,
.ajax_add_to_cart.loading::after {
	display: none !important;
}

.ajax_add_to_cart.theme-btn-loading {
	opacity: 0.6 !important;
	pointer-events: none !important;
	cursor: wait !important;
}

/* -------------------------------------------------------------------------
 * 7. WooCommerce: variable product table and attributes
 * ---------------------------------------------------------------------- */

.theme-attr-select-hidden {
	display: none !important;
}

.single-product .variations tbody,
.single-product .variations tbody tr,
.single-product .variations tbody td {
	display: block;
	width: 100%;
}

.single-product .variations tbody td.label {
	padding-bottom: 0.25rem;
}

.single-product .variations tbody td.value {
	padding-top: 0;
	padding-bottom: 1.5rem;
}

.single-product .variations {
	border: 0;
	margin: 0;
}

.single-product .variations .theme-attr-pills {
	margin-top: 0.75rem;
}

/* -------------------------------------------------------------------------
 * 8. WooCommerce single product: responsive safety
 * ---------------------------------------------------------------------- */

.single-product .theme-product-layout,
.single-product .theme-product-gallery,
.single-product .theme-product-info {
	min-width: 0;
	max-width: 100%;
}

.single-product .theme-product-thumbnails {
	flex-wrap: wrap;
	max-width: 100%;
}

.single-product .theme-product-thumbnails button.is-active {
	border-color: hsl(var(--foreground));
}

.single-product .woocommerce-product-details__short-description,
.single-product .woocommerce-variation-description,
.single-product .posted_in,
.single-product .theme-rich-text {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Long description: matches the source description plus its detail list. */
.single-product .theme-rich-text p {
	font-size: 1.0625rem;
	line-height: 1.625;
	color: hsl(var(--muted-foreground));
	margin-bottom: 1rem;
}

.single-product .theme-rich-text ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.single-product .theme-rich-text ul li {
	position: relative;
	font-size: 1.0625rem;
	line-height: 1.5;
	color: hsl(var(--muted-foreground));
	padding-left: 1rem;
	margin-bottom: 0.5rem;
}

.single-product .theme-rich-text ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.55rem;
	width: 0.25rem;
	height: 0.25rem;
	border-radius: 9999px;
	background-color: hsl(var(--foreground));
}

/* -------------------------------------------------------------------------
 * 9. Cart drawer and overlay
 * ---------------------------------------------------------------------- */

#theme-cart-overlay {
	position: fixed;
	inset: 0;
	z-index: 40;
	background-color: hsl(var(--foreground) / 0.2);
	display: none;
}

body.cart-open #theme-cart-overlay {
	display: block;
}

#theme-cart-drawer {
	display: none;
}

body.cart-open #theme-cart-drawer {
	display: flex;
}

#theme-cart-drawer.is-updating > * {
	opacity: 0.6;
	pointer-events: none;
}

.theme-cart-count {
	position: absolute;
	top: 0.25rem;
	right: 0;
	display: flex;
	height: 1.25rem;
	min-width: 1.25rem;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background-color: hsl(var(--primary));
	padding: 0 0.25rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: hsl(var(--primary-foreground));
}

.theme-cart-count:empty {
	display: none;
}

/* -------------------------------------------------------------------------
 * 10. WordPress / WooCommerce chrome
 * ---------------------------------------------------------------------- */

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

.skip-link:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 200;
	padding: 0.75rem 1rem;
	background-color: hsl(var(--background));
	color: hsl(var(--foreground));
}

/* Pagination on archives and blog templates. */
.theme-pagination,
.woocommerce-pagination {
	margin-top: 3rem;
	text-align: center;
}

.woocommerce-pagination ul,
.nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span,
.nav-links a,
.nav-links span.current {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 1rem;
	border: 1px solid hsl(var(--border));
	border-radius: 9999px;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 600;
	color: hsl(var(--foreground));
	text-decoration: none;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.woocommerce-pagination ul li a:hover,
.nav-links a:hover {
	border-color: hsl(var(--foreground));
}

.woocommerce-pagination ul li span.current,
.nav-links span.current {
	background-color: hsl(var(--primary));
	border-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
}

/* Notices: hidden only where the drawer already gives the same feedback. */
.single-product .woocommerce-message,
.single-product .woocommerce-info {
	display: none;
}

#theme-cart-drawer .woocommerce-message {
	display: none;
}

.woocommerce-notices-wrapper {
	margin-bottom: 1.5rem;
}

body.woocommerce-checkout .woocommerce-error,
body.woocommerce-cart .woocommerce-error,
body.woocommerce-account .woocommerce-error,
body.theme-thankyou-page .woocommerce-error {
	display: block;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	position: relative;
	margin: 0 0 1rem;
	padding: 1rem 1.25rem;
	border: 1px solid hsl(var(--border));
	border-left-width: 4px;
	border-radius: var(--radius);
	background-color: hsl(var(--card));
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.5;
	color: hsl(var(--foreground));
	list-style: none;
}

.woocommerce-message { border-left-color: hsl(var(--accent)); }
.woocommerce-info { border-left-color: hsl(var(--primary)); }
.woocommerce-error { border-left-color: hsl(var(--destructive)); }

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	margin-left: 0.75rem;
}

/* Star ratings and sale badges are not part of the source design. */
.woocommerce-product-rating,
.onsale {
	display: none;
}

/* -------------------------------------------------------------------------
 * 11. Checkout block and other WooCommerce pages
 * ---------------------------------------------------------------------- */

/* The title and the block share one container, so the two columns stay 50/50. */
body.woocommerce-checkout .site-main,
body.woocommerce-cart .site-main,
body.woocommerce-account .site-main,
body.theme-thankyou-page .site-main {
	padding-top: var(--header-height);
	padding-bottom: 4rem;
}

.page-title {
	font-family: var(--font-display);
	font-size: 1.875rem;
	line-height: 1.15;
	font-weight: 700;
	margin-bottom: 0.5rem;
}

body.woocommerce-checkout .page-container,
body.woocommerce-cart .page-container,
body.woocommerce-account .page-container,
body.theme-thankyou-page .page-container {
	max-width: 80rem;
	margin-left: auto;
	margin-right: auto;
}

body.woocommerce-checkout .entry-content,
body.woocommerce-cart .entry-content {
	max-width: none;
}

body.woocommerce-checkout .wc-block-checkout__main,
body.woocommerce-checkout .wc-block-checkout__sidebar {
	min-width: 0;
	width: 100%;
	max-width: none;
}

body.woocommerce-checkout .wc-block-checkout {
	display: block;
}

@media (min-width: 768px) {
	body.woocommerce-checkout .wc-block-components-sidebar-layout.wc-block-checkout.is-large {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--checkout-gap);
		align-items: start;
	}
}

body.woocommerce-checkout .wc-block-checkout__sidebar {
	background-color: var(--color-surface);
	border-radius: var(--card-radius);
	padding: var(--section-padding);
}

/* Inputs copy the source input component. Padding and height are left to the
   block so the floating labels keep their spacing. */
body.woocommerce-checkout .wc-block-components-text-input input,
body.woocommerce-checkout .wc-block-components-select select,
body.woocommerce-checkout .wc-block-components-textarea textarea,
body.woocommerce-checkout .wc-blocks-components-select__select,
body.woocommerce-checkout .wc-block-components-combobox .wc-block-components-combobox-control input.components-combobox-control__input {
	width: 100% !important;
	max-width: none !important;
	border: 1px solid hsl(var(--border)) !important;
	border-radius: var(--radius) !important;
	background-color: hsl(var(--background)) !important;
	color: hsl(var(--foreground)) !important;
	font-family: var(--font-body) !important;
	font-size: 1rem !important;
	box-shadow: none !important;
}

body.woocommerce-checkout .wc-block-components-text-input input:focus,
body.woocommerce-checkout .wc-block-components-select select:focus,
body.woocommerce-checkout .wc-block-components-textarea textarea:focus,
body.woocommerce-checkout .wc-blocks-components-select__select:focus {
	outline: none !important;
	border-color: hsl(var(--primary)) !important;
	box-shadow: 0 0 0 1px hsl(var(--primary)) !important;
}

body.woocommerce-checkout .wc-block-components-text-input input::placeholder,
body.woocommerce-checkout .wc-block-components-textarea textarea::placeholder {
	color: hsl(var(--muted-foreground)) !important;
}

body.woocommerce-checkout .wc-block-components-checkout-place-order-button {
	background-color: hsl(var(--primary)) !important;
	border: 1px solid hsl(var(--primary)) !important;
	border-radius: 9999px !important;
	color: hsl(var(--primary-foreground)) !important;
	font-family: var(--font-body) !important;
	font-size: 0.875rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.22em !important;
	text-transform: uppercase !important;
	min-height: 3rem !important;
	box-shadow: none !important;
}

body.woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
	background-color: hsl(var(--background)) !important;
	color: hsl(var(--primary)) !important;
}

body.woocommerce-checkout .wc-block-checkout__main h2,
body.woocommerce-checkout .wc-block-checkout__sidebar h2,
body.woocommerce-checkout .wc-block-components-title,
body.woocommerce-checkout .wc-block-components-checkout-step__title {
	font-family: var(--font-display);
	font-size: 1.25rem;
	font-weight: 700;
	color: hsl(var(--foreground));
}

body.woocommerce-checkout .wc-block-components-checkout-step__description,
body.woocommerce-checkout .wc-block-components-order-summary-item__description {
	font-family: var(--font-body);
	color: hsl(var(--muted-foreground));
}

body.woocommerce-checkout .wc-block-components-notice-banner {
	border-radius: var(--radius);
	border: 1px solid hsl(var(--border));
	background-color: hsl(var(--card));
	color: hsl(var(--foreground));
	font-family: var(--font-body);
}

body.woocommerce-checkout .wc-block-components-notice-banner.is-error {
	border-left: 4px solid hsl(var(--destructive));
}

body.woocommerce-checkout .wc-block-cart-items,
body.woocommerce-checkout .wc-block-components-order-summary {
	border-color: hsl(var(--border));
	font-family: var(--font-body);
}

body.woocommerce-checkout .wc-block-components-totals-item__label,
body.woocommerce-checkout .wc-block-components-totals-item__value,
body.woocommerce-checkout .wc-block-components-order-summary-item__total-price {
	font-family: var(--font-body);
	color: hsl(var(--foreground));
}

body.woocommerce-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-weight: 700;
}

/* Cart block keeps the same width treatment and container as checkout. */
body.woocommerce-cart .wc-block-cart {
	display: block;
}

body.woocommerce-cart .wc-block-cart__main,
body.woocommerce-cart .wc-block-cart__sidebar {
	min-width: 0;
	max-width: none;
}

body.woocommerce-cart .wc-block-components-button,
body.woocommerce-cart .wc-block-cart__submit-button {
	background-color: hsl(var(--primary));
	border-radius: 9999px;
	color: hsl(var(--primary-foreground));
	font-family: var(--font-body);
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * 12. Thank you page
 * ---------------------------------------------------------------------- */

body.theme-thankyou-page {
	overflow-x: hidden;
}

body.theme-thankyou-page .woocommerce-order {
	font-family: var(--font-body);
	color: hsl(var(--foreground));
}

body.theme-thankyou-page .woocommerce-order h2,
body.theme-thankyou-page .woocommerce-order-details__title,
body.theme-thankyou-page .woocommerce-column__title {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: 1.5rem;
	padding: 0 0 1rem;
	display: block;
}

body.theme-thankyou-page .woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 0 0 2rem;
	padding: 1.5rem;
	border: 1px solid hsl(var(--border));
	border-radius: var(--card-radius);
	background-color: hsl(var(--card));
	list-style: none;
}

body.theme-thankyou-page .woocommerce-order-overview li {
	flex: 1 1 12rem;
	min-width: 0;
	overflow-wrap: break-word;
	font-size: 1rem;
	text-transform: none;
}

body.theme-thankyou-page .woocommerce-order-details table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	font-family: var(--font-body);
}

body.theme-thankyou-page .woocommerce-order-details table th,
body.theme-thankyou-page .woocommerce-order-details table td {
	padding: 0.75rem 0;
	border-bottom: 1px solid hsl(var(--border));
	overflow-wrap: break-word;
	word-break: break-word;
}

body.theme-thankyou-page .woocommerce-order-details tfoot th {
	text-align: left;
}

body.theme-thankyou-page .woocommerce-order-details tfoot td {
	text-align: right;
}

body.theme-thankyou-page .woocommerce-customer-details {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin-top: 2rem;
}

body.theme-thankyou-page .woocommerce-customer-details address {
	max-width: 480px;
	overflow-wrap: break-word;
	font-family: var(--font-body);
	font-style: normal;
}

body.theme-thankyou-page .theme-thankyou-heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 3rem 0 2rem;
}

/* -------------------------------------------------------------------------
 * 13. Forms
 * ---------------------------------------------------------------------- */

.theme-form-block[data-submitting='true'] [data-theme-submit] {
	opacity: 0.5;
	pointer-events: none;
}

body.is-customizer .theme-form-block [data-theme-file-empty] {
	display: block;
}

/* -------------------------------------------------------------------------
 * 14. No-script fallbacks and WooCommerce Blocks empty states
 * ---------------------------------------------------------------------- */

@media (scripting: none) {
	.theme-main-image {
		opacity: 1 !important;
		filter: none !important;
	}
}

/* WooCommerce Blocks cart: the empty state and its button follow the design. */
body.woocommerce-cart .wc-block-cart__empty-cart__title,
body.woocommerce-cart .wp-block-woocommerce-empty-cart-block h2 {
	font-family: var(--font-display);
	text-transform: none;
	font-size: 1.5rem;
	font-weight: 700;
	color: hsl(var(--foreground));
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block p {
	font-family: var(--font-body);
	color: hsl(var(--muted-foreground));
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	background-color: hsl(var(--primary));
	border: 1px solid hsl(var(--primary));
	color: hsl(var(--primary-foreground));
	font-family: var(--font-body);
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	padding: 0 2.5rem;
	min-height: 3rem;
	text-decoration: none;
}

body.woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover {
	background-color: hsl(var(--background));
	color: hsl(var(--primary));
}