/*
Design tokens extracted from the original Shopify (Dawn) theme's
config/settings_data.json for the 224 storefront rebuild.
Do not hand-edit values here without checking settings_data.json first.
*/
form.cart .store224-buy-now-button {
	margin-left: 12px !important;
}
body.home .main-header-menu-toggle {
	color: #ffffff;
}
:root {
	/* Typography */
	--font-heading: 'DM Serif Display', Georgia, serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

	/* Color scheme 1 - default/global (background) */
	--color-bg: #ffffff;
	--color-text: #121212;
	--color-button-bg: #121212;
	--color-button-label: #ffffff;

	/* Color scheme 2 - cards */
	--color-card-bg: #f3f3f3;
	--color-card-text: #121212;

	/* Color scheme 3 - sold out badge */
	--color-soldout-bg: #242833;
	--color-soldout-text: #ffffff;

	/* Color scheme 4 - sale badge */
	--color-sale-bg: #121212;
	--color-sale-text: #ffffff;

	/* Layout */
	--page-width: 1200px;

	/* Buttons */
	--button-border-width: 1px;
	--button-radius: 0px;

	/* Variant pills (swatch buttons) */
	--pill-border-width: 1px;
	--pill-border-color: rgba(18, 18, 18, 0.55);
	--pill-radius: 40px;

	/* Inputs */
	--input-border-width: 1px;
	--input-border-color: rgba(18, 18, 18, 0.55);
	--input-radius: 0px;

	/* Badges (sale + sold out share the same shape) */
	--badge-radius: 40px;

	/* Astra's own global color tokens drive nav hover states, the cart
	   count bubble, focus rings, etc. Overriding them to the Shopify
	   button color keeps the whole theme on-palette instead of Astra's
	   default blue accent. */
	--ast-global-color-0: #121212;
	--ast-global-color-1: #2b2b2b;

	/* Measured directly from the live site (twotwennyfour.com) via
	   getComputedStyle - headings and nav both carry this tracking. */
	--letter-spacing-heading: 0.6px;
}

body,
button,
input,
select,
textarea {
	font-family: var(--font-body);
	color: var(--color-text);
	background-color: var(--color-bg);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.ast-woocommerce-container .product_title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--font-heading);
	font-weight: 400;
	letter-spacing: var(--letter-spacing-heading);
}

/* Main nav: measured at 14px / 0.6px tracking / 75% opacity text on the
   live site, rather than Astra's default nav type scale. */
.main-header-menu .menu-item > a,
.ast-builder-menu-1 .menu-item > a {
	font-size: 14px;
	letter-spacing: var(--letter-spacing-heading);
	color: rgba(18, 18, 18, 0.75);
}

.site-title a,
.ast-site-identity .site-title a {
	letter-spacing: var(--letter-spacing-heading);
}

/* Logo width matches the live site's rendered logo (measured at 90px). */
.custom-logo {
	max-width: 90px;
	height: auto;
}

/* The logo image IS the "224." wordmark, so the separate text site-title
   Astra still prints alongside it (even with logo-title-inline off) is a
   redundant duplicate - hide it whenever a custom logo is set. */
.wp-custom-logo .ast-site-identity .site-title {
	display: none;
}

/* Page width container, matches Shopify's 1200px page-width setting */
.ast-container,
.woocommerce.archive .ast-container,
.site-content > .ast-container {
	max-width: var(--page-width);
}

/* ---------------- Buttons ---------------- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button,
a.ast-button,
button.ast-button,
.ast-button,
.elementor-button,
/* WooCommerce Cart/Checkout blocks (React-rendered, active by default on
   WC 8.3+) use their own "wc-block-components-*" class scheme, entirely
   separate from the classic ".woocommerce .button" selectors above - the
   classic rules silently don't match them at all without these. */
.wc-block-components-button,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-button {
	background-color: var(--color-button-bg);
	color: var(--color-button-label);
	border: var(--button-border-width) solid var(--color-button-bg);
	border-radius: var(--button-radius) !important;
	box-shadow: none;
	font-family: var(--font-body);
	text-transform: none;
	letter-spacing: normal;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
a.ast-button:hover,
button.ast-button:hover,
.ast-button:hover,
.wc-block-components-button:hover {
	background-color: var(--color-bg);
	color: var(--color-button-bg);
	border-color: var(--color-button-bg);
}
form.cart .store224-buy-now-button {
	margin-left: 12px !important;
}
/* ---------------- Inputs ---------------- */
.woocommerce table.shop_table td input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce div.quantity input.qty,
.select2-container--default .select2-selection--single,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
/* WooCommerce Blocks checkout form fields (React-rendered). */
.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-select select {
	border: var(--input-border-width) solid var(--input-border-color);
	border-radius: var(--input-radius) !important;
	box-shadow: none;
}

/* ---------------- Product cards (archive/shop loop) ----------------
   Measured on the live site: no card background, no border, no padding
   around the image - just image, then title (DM Serif Display 18px),
   then price (Inter 16px) underneath with plain white space between
   cards. The "Select options" button is not part of the card body on
   the live site (Dawn reveals it as a hover quick-add) - closest,
   lowest-risk equivalent here is keeping the button but demoting it
   visually (smaller, no fill) so the image + type carries the design
   instead of a heavy black button block under every product. */
.woocommerce ul.products li.product {
	background-color: transparent;
	border-radius: 0;
	border: none;
	box-shadow: none;
	padding: 0;
	margin-bottom: 32px;
}

.woocommerce ul.products li.product img {
	border-radius: 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	color: var(--color-text);
	font-size: 18px;
	margin: 12px 0 4px;
}

.woocommerce ul.products li.product .price {
	color: var(--color-text);
	font-size: 16px;
	font-family: var(--font-body);
}

.woocommerce ul.products li.product a.button,
.woocommerce ul.products li.product a.add_to_cart_button {
	background: transparent;
	color: var(--color-text);
	border: none;
	text-decoration: underline;
	padding: 8px 0 0;
	font-size: 13px;
}

.woocommerce ul.products li.product a.button:hover {
	background: transparent;
	color: var(--color-text);
	opacity: 0.7;
}
/* "View cart" link after AJAX add-to-cart - reset Astra's floating/absolute
   tooltip positioning, make it a clean underlined text link below the button. */
.woocommerce a.added_to_cart.wc-forward {
	position: static !important;
	display: block !important;
	background: transparent !important;
	color: var(--color-text, #121212) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	box-shadow: none !important;
	border: none !important;
	padding: 0 !important;
	margin: 8px 0 0 !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;
	white-space: normal !important;
	width: auto !important;
	max-width: 100% !important;
}
/* ---------------- Sale / sold-out badges ----------------
   Astra's "modern shop style" (the active default) swaps WooCommerce's
   normal span.onsale markup for its own .ast-onsale-card element with
   inline-generated customizer CSS (top-left, rounded pill, theme colors).
   Both selectors are targeted here with !important so the Shopify tokens
   (bottom-left, #121212/#fff, 40px radius) win regardless of shop style. */
.woocommerce span.onsale,
.ast-onsale-card,
.wc-block-grid__product-onsale {
	background-color: #e02020 !important;
	color: #ffffff !important;
	border-radius: var(--badge-radius) !important;
	left: 8px !important;
	right: auto !important;
	top: 8px !important;
	bottom: auto !important;
	min-height: auto;
	min-width: auto;
	line-height: 1;
	padding: 6px 12px !important;
	font-family: var(--font-body);
	font-weight: 500;
	text-transform: uppercase;
	font-size: 11px;
	box-shadow: none !important;
	opacity: 1 !important;
	visibility: visible !important;
}
.store224-buy-now-button {
	margin-left: 12px;
}
.product-badge--sold-out {
	position: absolute;
	left: 8px;
	bottom: 8px;
	background-color: var(--color-soldout-bg);
	color: var(--color-soldout-text);
	border-radius: var(--badge-radius);
	padding: 6px 12px;
	font-family: var(--font-body);
	font-weight: 500;
	text-transform: uppercase;
	font-size: 11px;
	z-index: 2;
}

/* ---------------- Variant pills (product page attribute swatches) ---------------- */
.product-224-variant-picker {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 16px;
}

.product-224-variant-picker .pill-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.product-224-variant-picker .pill-label {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	padding: 8px 16px;
	border: var(--pill-border-width) solid var(--pill-border-color);
	border-radius: var(--pill-radius);
	font-family: var(--font-body);
	font-size: 14px;
	cursor: pointer;
	background: var(--color-bg);
	color: var(--color-text);
	transition: background-color 0.15s ease, color 0.15s ease;
}

.product-224-variant-picker .pill-input:checked + .pill-label {
	background: var(--color-button-bg);
	color: var(--color-button-label);
	border-color: var(--color-button-bg);
}

.product-224-variant-picker .pill-label.is-disabled {
	opacity: 0.4;
	text-decoration: line-through;
	cursor: not-allowed;
}

/* Hides WooCommerce's native variation <select> while keeping it
   functional for add-to-cart-variation.js (the pill buttons drive it). */
.variation-select-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

.product-224-attribute {
	margin-bottom: 16px;
}

.product-224-attribute .form__label {
	display: block;
	font-family: var(--font-body);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 8px;
}

/* ---------------- Product page share links ---------------- */
.product-224-share {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0;
	font-family: var(--font-body);
	font-size: 13px;
}

.product-224-share a {
	color: var(--color-text);
	text-decoration: underline;
}

/* ---------------- Related products heading ---------------- */
.related.products > h2 {
	font-family: var(--font-heading);
	text-align: center;
}

/* ==================== Homepage (front-page.php) ==================== */

.page-width {
	width: 100%;
	max-width: var(--page-width);
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}

#store224-home {
	display: flex;
	flex-direction: column;
	gap: 56px;
	padding-bottom: 56px;
}

.store224-hero {
	position: relative;
	background-color: var(--color-button-bg);
	background-size: cover;
	background-position: center;
	color: var(--color-button-label);
	padding: 160px 0;
	text-align: center;
	/* Full-bleed edge-to-edge regardless of Astra's .ast-container side
	   padding (0 at desktop, ~8px+ at mobile/tablet breakpoints - this
	   value isn't fixed, so we break out of it rather than guess it). */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Dark scrim so white type stays legible over the photo, same as the
   live site's banner color-overlay. */
.store224-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
}

.store224-hero__inner {
	position: relative;
	z-index: 1;
}

/* Measured on the live site: 52px / 400 weight / 0.6px tracking / white,
   centered (40px on mobile - also measured live, not guessed). */
.store224-hero__heading {
	font-family: var(--font-heading);
	color: #ffffff;
	font-size: 52px;
	letter-spacing: var(--letter-spacing-heading);
	line-height: 1.3;
	margin: 0 0 24px;
}

@media screen and (max-width: 749px) {
	.store224-hero {
		padding: 96px 0;
	}

	.store224-hero__heading {
		font-size: 40px;
	}
}

/* Inverted (Shopify scheme-4 style): the hero panel is already
   button-colored, so the CTA flips to white bg / dark text to stay
   visible against it. */
.store224-hero__cta {
	display: inline-block;
	background-color: var(--color-button-label);
	color: var(--color-button-bg);
	border: var(--button-border-width) solid var(--color-button-label);
	border-radius: var(--button-radius);
	padding: 12px 28px;
	text-decoration: none;
	font-family: var(--font-body);
}

.store224-hero__cta:hover {
	background-color: transparent;
	color: var(--color-button-label);
}

.store224-section__heading {
	font-family: var(--font-heading);
	font-size: 28px;
	margin: 0 0 24px;
	text-align: center;
}

/* Horizontal-scroll carousel: WooCommerce's own .products loop, just
   reflowed onto one scrollable row instead of a wrapping grid. */
.store224-carousel ul.products.store224-product-strip {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 24px;
	padding-bottom: 8px;
	margin: 0;
}

.store224-carousel ul.products.store224-product-strip li.product {
	flex: 0 0 320px;
	scroll-snap-align: start;
}

ul.products.store224-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin: 0;
	list-style: none;
	padding: 0;
}

@media screen and (max-width: 767px) {
	ul.products.store224-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

.store224-category-blocks {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media screen and (max-width: 767px) {
	.store224-category-blocks {
		grid-template-columns: 1fr;
	}
}

.store224-category-block {
	text-align: center;
}

.store224-category-block__image {
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	margin-bottom: 16px;
	background: var(--color-card-bg);
}

.store224-category-block__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.store224-category-block h3 {
	font-family: var(--font-heading);
	margin: 0 0 8px;
}

.store224-category-block__link {
	color: var(--color-text);
	text-decoration: underline;
}

.store224-reviews {
	text-align: center;
}

.store224-reviews__gap-note {
	color: #767676;
	font-size: 13px;
	border: 1px dashed #ccc;
	padding: 16px;
	display: inline-block;
}

/* ==================== Site footer ==================== */

.store224-footer {
	padding: 48px 24px;
}

.store224-footer__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 32px;
}

@media screen and (max-width: 767px) {
	.store224-footer__grid {
		grid-template-columns: 1fr;
	}
}

.store224-footer__logo {
	font-family: var(--font-heading);
	font-size: 24px;
	margin: 0 0 12px;
}

.store224-footer__social {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.store224-footer__social a,
.store224-footer__links a {
	color: var(--color-text);
	text-decoration: none;
}

.store224-footer__social a:hover,
.store224-footer__links a:hover {
	text-decoration: underline;
}

.store224-footer__links h3,
.store224-footer__newsletter h3 {
	font-family: var(--font-heading);
	font-size: 16px;
	margin: 0 0 12px;
}

.store224-footer__links ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.store224-footer__newsletter-form {
	display: flex;
	gap: 0;
}

.store224-footer__newsletter-form input[type="email"] {
	flex: 1;
	border: var(--input-border-width) solid var(--input-border-color);
	border-radius: var(--input-radius);
	padding: 10px 12px;
}

.store224-footer__newsletter-form button {
	background: var(--color-button-bg);
	color: var(--color-button-label);
	border: var(--button-border-width) solid var(--color-button-bg);
	border-radius: var(--button-radius);
	padding: 10px 16px;
	cursor: pointer;
}

.store224-footer__gap-note {
	font-size: 11px;
	color: #999;
	margin-top: 8px;
}