/* =============================================================================
   ERA — custom.css
   Everything theme.json's Global Styles cannot express. Kept deliberately
   short: a simple sticky header, forms, notices, product cards, and the
   WooCommerce screens (cart/checkout/account/order confirmation).
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2.5px solid var(--wp--preset--color--cherry);
	outline-offset: 3px;
	border-radius: var(--wp--custom--radius--sm);
}

/* =============================================================================
   == HEADER (desktop: normal sticky top bar) ==
   ========================================================================= */

:root { --era-safe-bottom: env(safe-area-inset-bottom, 0px); }

/* The floating island tab bar shows on every screen size, so every page
   needs bottom clearance so footer content never sits underneath it. */
body.era-theme { padding-bottom: calc(96px + var(--era-safe-bottom)); }

.era-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--preset--color--dusty-rose);
}

/* Primary bar: logo, search, account + cart. */
.era-header__primary {
	align-items: center;
	gap: 1.5rem;
	padding: 0.85rem clamp(1rem, 4vw, 2.5rem);
}

/* Secondary bar: the nav menu only, in its own row directly beneath. */
.era-header__secondary {
	border-top: 1px solid var(--wp--preset--color--blush);
	padding: 0.5rem clamp(1rem, 4vw, 2.5rem);
}

.era-header__brand { flex-shrink: 0; display: flex; align-items: center; }
/* The Site Logo block sets its own inline width= on the <img>, which beats
   a plain external rule — !important is required here so the header shows
   a consistent size regardless of what width was chosen in the editor. */
.era-logo img, .era-logo .custom-logo {
	max-height: 44px !important;
	width: auto !important;
	height: auto !important;
	display: block;
}
.era-logo-fallback {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: var(--wp--preset--font-size--md);
	color: var(--wp--preset--color--cherry);
	letter-spacing: -0.01em;
	white-space: nowrap;
	margin: 0;
}
/* Show only one: the real logo once uploaded, the text wordmark until then. */
.era-header__brand:has(.era-logo img) .era-logo-fallback { display: none; }

/* Search sits in its own centered zone between the logo and the
   nav/icons group, so it reads as the header's focal point. */
.era-header__search-wrap { flex: 1 1 auto; justify-content: center; min-width: 0; }
.era-header__search { width: min(380px, 100%); }
/* buttonPosition:"button-inside" puts input+icon in one shared wrapper —
   style THAT as the single pill, and strip the input's own border/radius,
   so the icon reads as part of the search bar rather than a second control. */
.era-header__search .wp-block-search__inside-wrapper {
	display: flex !important;
	align-items: center;
	height: 42px;
	padding: 0 !important;
	margin: 0 !important;
	gap: 0 !important;
	border: 1.5px solid var(--wp--preset--color--dusty-rose) !important;
	border-radius: var(--wp--custom--radius--pill) !important;
	overflow: hidden;
	background: var(--wp--preset--color--white);
	transition: border-color var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base);
}
.era-header__search .wp-block-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	margin: 0 !important;
	border: none !important;
	background: transparent !important;
	padding-left: 1.1rem !important;
	padding-right: 0.4rem !important;
	box-shadow: none !important;
}
.era-header__search .wp-block-search__button {
	height: 100%;
	width: 42px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	background: transparent !important;
	color: var(--wp--preset--color--cocoa);
	border: none !important;
	border-radius: 0 !important;
	transition: background var(--wp--custom--transition--base), color var(--wp--custom--transition--base);
}
.era-header__search .wp-block-search__button:hover { background: var(--wp--preset--color--pink) !important; color: var(--wp--preset--color--cherry); }
.era-header__search .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--cherry) !important;
	box-shadow: 0 0 0 3px rgba(91, 16, 31, 0.12);
}

.era-header__right { flex-shrink: 0; align-items: center; gap: 0.5rem; }

.era-header__nav { justify-content: center; flex-wrap: wrap; }
.era-header .wp-block-navigation-item > a {
	color: var(--wp--preset--color--cocoa);
	text-decoration: none;
	padding-block: 0.35rem;
	border-bottom: 2px solid transparent;
	transition: color var(--wp--custom--transition--base), border-color var(--wp--custom--transition--base);
}
.era-header .wp-block-navigation-item > a:hover,
.era-header .wp-block-navigation-item > a:focus-visible {
	color: var(--wp--preset--color--cherry);
	border-bottom-color: var(--wp--preset--color--cherry);
}

@media (max-width: 480px) {
	.era-header__search { max-width: 220px; }
	.era-header__nav .wp-block-navigation-item > a { font-size: var(--wp--preset--font-size--xs); }
}

.era-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: transparent;
	border: none;
	color: var(--wp--preset--color--cocoa);
	cursor: pointer;
	transition: background var(--wp--custom--transition--base), color var(--wp--custom--transition--base);
}
.era-icon-btn:hover, .era-icon-btn:focus-visible {
	background: var(--wp--preset--color--pink);
	color: var(--wp--preset--color--cherry);
}

/* Mini Cart block's own trigger button, restyled to match the icon buttons
   beside it in the header. */
.era-mini-cart .wc-block-mini-cart__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--wp--preset--color--cocoa);
	transition: background var(--wp--custom--transition--base), color var(--wp--custom--transition--base);
}
.era-mini-cart .wc-block-mini-cart__button:hover { background: var(--wp--preset--color--pink); color: var(--wp--preset--color--cherry); }

/* =============================================================================
   == APP-STYLE FLOATING ISLAND TAB BAR ==
   Shown on every screen size, alongside the normal sticky header. Rendered
   by [era_bottom_nav] in inc/setup.php — active state comes from real WP
   conditional tags, so it's always correct with no JavaScript. Styled to
   feel like a native app tab bar: filled icons on the active tab, a
   tactile press animation, and a floating "island" silhouette.
   ========================================================================= */

.era-bottom-nav {
	display: flex;
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(14px + var(--era-safe-bottom));
	/* Scales with the viewport (roughly 46% of it) instead of a fixed width,
	   so it looks proportioned on a wide laptop screen too — never edge to
	   edge (always at least 16px margin either side), never absurdly wide. */
	width: min(calc(100vw - 32px), clamp(320px, 46vw, 760px));
	z-index: 100;
	justify-content: space-around;
	align-items: stretch;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(20px) saturate(1.5);
	backdrop-filter: blur(20px) saturate(1.5);
	border-radius: 28px;
	box-shadow: 0 16px 40px rgba(58, 23, 32, 0.2), 0 2px 8px rgba(58, 23, 32, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.6);
	padding: 0.35rem;
}
.era-bottom-nav__item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-height: 54px;
	padding: 0.3rem 0.2rem;
	border-radius: 22px;
	color: var(--wp--preset--color--cocoa-40);
	text-decoration: none;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	position: relative;
	transition: color 160ms ease, transform 120ms ease;
}
.era-bottom-nav__item:active { transform: scale(0.88); }
.era-bottom-nav__item .era-icon {
	width: 23px;
	height: 23px;
	stroke-width: 1.7;
	transition: transform 160ms cubic-bezier(0.34, 1.56, 0.64, 1), fill 160ms ease, stroke-width 160ms ease;
}
/* App-like toggle: outline icon at rest, filled + bolder on the active tab. */
.era-bottom-nav__item.is-active {
	color: var(--wp--preset--color--cherry);
}
.era-bottom-nav__item.is-active .era-icon {
	fill: var(--wp--preset--color--pink);
	stroke-width: 2;
	transform: translateY(-1px) scale(1.08);
}
.era-bottom-nav__item.is-active .era-bottom-nav__label { font-weight: 800; }
.era-bottom-nav__badge {
	position: absolute;
	top: 0;
	right: calc(50% - 20px);
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--wp--preset--color--cherry);
	color: var(--wp--preset--color--white);
	font-size: 0.6rem;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92);
}

/* =============================================================================
   == BUTTONS ==
   ========================================================================= */

.wp-block-button__link { transition: transform var(--wp--custom--transition--base), background-color var(--wp--custom--transition--base); }
.wp-block-button__link:hover { transform: scale(1.02); }

.is-style-era-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--cherry);
	box-shadow: inset 0 0 0 1.5px var(--wp--preset--color--cherry);
}
.is-style-era-outline .wp-block-button__link:hover { background-color: var(--wp--preset--color--cherry); color: var(--wp--preset--color--white); }

/* =============================================================================
   == REUSABLE EDITORIAL STYLES ==
   ========================================================================= */

.is-style-era-card {
	background: var(--wp--preset--color--blush);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--40, 2rem) !important;
}
.is-style-era-editorial-panel {
	background: var(--wp--preset--color--cherry);
	color: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--50, 3.25rem) !important;
}
.is-style-era-editorial-panel :where(h1, h2, h3, h4) { color: var(--wp--preset--color--white); }
.is-style-era-editorial-panel .wp-block-button__link { background-color: var(--wp--preset--color--white); color: var(--wp--preset--color--cherry); }
.is-style-era-editorial-panel .wp-block-button__link:hover { background-color: var(--wp--preset--color--pink); }
.is-style-era-soft-frame img { border-radius: var(--wp--custom--radius--lg); box-shadow: var(--wp--custom--shadow--soft); }

/* Graceful placeholder for patterns shipped with an empty <img src=""> —
   shows a calm blush box instead of a broken-image icon until the merchant
   replaces it with real photography. */
.wp-block-image img[src=""] { display: none; }
.wp-block-image:has(img[src=""]) {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	background: var(--wp--preset--color--blush);
	border-radius: var(--wp--custom--radius--lg);
}
.wp-block-image:has(img[src=""])::after {
	content: "Add an image";
	color: var(--wp--preset--color--cocoa-40);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
}

/* =============================================================================
   == FAQ ACCORDION (core/details) ==
   ========================================================================= */

.is-style-era-faq { border-bottom: 1px solid var(--wp--preset--color--dusty-rose); }
.is-style-era-faq summary {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--md);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-block: 1.1rem;
}
.is-style-era-faq summary::-webkit-details-marker { display: none; }
.is-style-era-faq summary::after { content: "+"; font-size: 1.5rem; color: var(--wp--preset--color--cherry); margin-left: 1rem; }
.is-style-era-faq[open] summary::after { content: "–"; }
.is-style-era-faq > :not(summary) { padding-bottom: 1.25rem; color: var(--wp--preset--color--cocoa); }

/* =============================================================================
   == FORMS (contact, newsletter, login, checkout, account, comments, search) ==
   ========================================================================= */

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea,
.wc-block-components-text-input input,
.wc-block-components-textarea textarea {
	background: var(--wp--preset--color--white);
	border: 1.5px solid var(--wp--preset--color--dusty-rose) !important;
	border-radius: var(--wp--custom--radius--md) !important;
	color: var(--wp--preset--color--cocoa) !important;
	padding: 0.8rem 1.1rem !important;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--base);
	width: 100%;
	transition: border-color var(--wp--custom--transition--base), box-shadow var(--wp--custom--transition--base);
}
input:focus, select:focus, textarea:focus,
.wc-block-components-text-input input:focus {
	border-color: var(--wp--preset--color--cherry) !important;
	box-shadow: 0 0 0 3px rgba(91, 16, 31, 0.12);
	outline: none;
}
label, .wc-block-components-text-input label {
	font-weight: 600;
	color: var(--wp--preset--color--cocoa);
	font-size: var(--wp--preset--font-size--sm);
}
::placeholder { color: var(--wp--preset--color--cocoa-40); opacity: 1; }
.wp-block-search__input { border-radius: var(--wp--custom--radius--pill) !important; }

/* Generic unified search pill (404 page, search results page) — labeled
   button merged flush into the same rounded field as the input. */
.era-search-pill .wp-block-search__inside-wrapper {
	display: flex !important;
	align-items: center;
	padding: 0 !important;
	margin: 0 !important;
	gap: 0 !important;
	border: 1.5px solid var(--wp--preset--color--dusty-rose) !important;
	border-radius: var(--wp--custom--radius--pill) !important;
	overflow: hidden;
	background: var(--wp--preset--color--white);
}
.era-search-pill .wp-block-search__inside-wrapper:focus-within {
	border-color: var(--wp--preset--color--cherry) !important;
	box-shadow: 0 0 0 3px rgba(91, 16, 31, 0.12);
}
.era-search-pill .wp-block-search__input {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 !important;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
}
.era-search-pill .wp-block-search__button {
	flex-shrink: 0;
	margin: 0 !important;
	border-radius: 0 !important;
	background: var(--wp--preset--color--cherry) !important;
	color: var(--wp--preset--color--white) !important;
	border: none !important;
}
.era-search-pill .wp-block-search__button:hover { background: var(--wp--preset--color--cherry-dark) !important; }

/* WooCommerce / core notices (success, error, info) */
.era-notice,
.woocommerce-message, .woocommerce-error, .woocommerce-info,
.wc-block-components-notice-banner {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	background: var(--wp--preset--color--blush) !important;
	color: var(--wp--preset--color--cocoa) !important;
	border: none !important;
	border-left: 4px solid var(--wp--preset--color--cherry) !important;
	border-radius: var(--wp--custom--radius--md) !important;
	padding: 1.1rem 1.3rem !important;
	margin: 0 0 1.25rem !important;
	list-style: none !important;
}
.woocommerce-error, .era-notice--error, .wc-block-components-notice-banner.is-error {
	border-left-color: var(--wp--preset--color--cherry-dark) !important;
	background: #FBEAEA !important;
}
.woocommerce-info, .era-notice--info, .wc-block-components-notice-banner.is-info {
	border-left-color: var(--wp--preset--color--dusty-rose) !important;
}
.woocommerce-message::before, .woocommerce-error::before, .woocommerce-info::before { content: none !important; }
.era-notice__icon { flex-shrink: 0; margin-top: 0.1rem; color: var(--wp--preset--color--cherry); }
.era-notice__body :last-child { margin-bottom: 0; }
.woocommerce-message a.button, .woocommerce-error a.button {
	display: inline-block;
	margin: 0.5rem 0 0;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--cherry);
	color: var(--wp--preset--color--white);
	padding: 0.5rem 1.1rem;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--sm);
	white-space: nowrap;
}

/* =============================================================================
   == PRODUCT CARDS (shop loop) ==
   ========================================================================= */

ul.products, .wc-block-grid__products, .wp-block-woocommerce-product-collection ul {
	display: grid !important;
	gap: var(--wp--preset--spacing--30, 1.25rem) !important;
}
li.product, .wc-block-grid__product {
	background: var(--wp--preset--color--blush);
	border-radius: var(--wp--custom--radius--lg);
	padding: var(--wp--preset--spacing--20, 0.85rem) !important;
	transition: transform var(--wp--custom--transition--base);
}
li.product:hover, .wc-block-grid__product:hover { transform: translateY(-3px); }
.woocommerce ul.products li.product img,
.wc-block-grid__product-image img {
	border-radius: var(--wp--custom--radius--md);
	aspect-ratio: 4 / 5;
	object-fit: cover;
	margin-bottom: 0.85rem;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.wc-block-grid__product-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	color: var(--wp--preset--color--cocoa);
	margin: 0 0 0.2rem;
}
.woocommerce ul.products li.product .price,
.wc-block-grid__product-price {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	color: var(--wp--preset--color--cherry);
}
.woocommerce ul.products li.product .price del { color: var(--wp--preset--color--cocoa-40); opacity: 1; }
.woocommerce ul.products li.product .price ins { text-decoration: none; }
.woocommerce ul.products li.product a.button {
	display: inline-block;
	margin-top: 0.6rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--cherry);
	color: var(--wp--preset--color--white) !important;
	padding: 0.55rem 1.1rem;
	font-size: var(--wp--preset--font-size--sm);
	text-decoration: none !important;
}
.woocommerce ul.products li.product a.button:hover { background: var(--wp--preset--color--cherry-dark); }
.star-rating { color: var(--wp--preset--color--cherry) !important; }
.star-rating::before { color: var(--wp--preset--color--dusty-rose) !important; }
@media (max-width: 600px) { ul.products, .wc-block-grid__products { grid-template-columns: repeat(2, 1fr) !important; } }

/* =============================================================================
   == SHOP BY CATEGORY (WooCommerce Product Categories block) ==
   ========================================================================= */

.era-category-grid,
.era-category-grid ul {
	display: grid !important;
	list-style: none !important;
	gap: var(--wp--preset--spacing--20, 0.85rem) !important;
	margin: var(--wp--preset--spacing--40, 2rem) 0 0 !important;
	padding: 0 !important;
	grid-template-columns: repeat(5, 1fr);
}
.era-category-grid li { background: var(--wp--preset--color--white); border-radius: var(--wp--custom--radius--lg); overflow: hidden; text-align: center; }
.era-category-grid img { aspect-ratio: 1/1; object-fit: cover; width: 100%; display: block; }
.era-category-grid a { color: var(--wp--preset--color--cocoa); text-decoration: none; font-weight: 600; display: block; padding: 0.85rem 0.5rem; }
@media (max-width: 900px) { .era-category-grid, .era-category-grid ul { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .era-category-grid, .era-category-grid ul { grid-template-columns: repeat(2, 1fr); } }

/* =============================================================================
   == SINGLE PRODUCT PAGE ==
   ========================================================================= */

.woocommerce div.product .woocommerce-product-gallery { border-radius: var(--wp--custom--radius--lg); overflow: hidden; }
@media (min-width: 1024px) {
	.single-product .summary.entry-summary { position: sticky; top: 96px; align-self: start; }
}
.woocommerce div.product p.price, .woocommerce div.product span.price {
	color: var(--wp--preset--color--cherry);
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--lg);
}
.woocommerce div.product .product_title { font-size: var(--wp--preset--font-size--2xl); }
.woocommerce-tabs ul.tabs { border-bottom: 1px solid var(--wp--preset--color--dusty-rose); display: flex; gap: 1.5rem; list-style: none; padding: 0; margin: 2.5rem 0 0; }
.woocommerce-tabs ul.tabs li { margin: 0; padding: 0; }
.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding-bottom: 0.9rem;
	text-decoration: none;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	color: var(--wp--preset--color--cocoa-40);
	border-bottom: 2px solid transparent;
}
.woocommerce-tabs ul.tabs li.active a { color: var(--wp--preset--color--cherry); border-bottom-color: var(--wp--preset--color--cherry); }
.woocommerce-tabs .panel { padding-top: 1.75rem; }
.woocommerce-tabs table.shop_attributes { border: none; }
.woocommerce-tabs table.shop_attributes th { background: var(--wp--preset--color--blush); font-weight: 600; }
.woocommerce-tabs table.shop_attributes td, .woocommerce-tabs table.shop_attributes th { border: none; border-bottom: 1px solid var(--wp--preset--color--dusty-rose); padding: 0.75rem 1rem; }
.related.products, .up-sells.upsells { border-top: 1px solid var(--wp--preset--color--dusty-rose); padding-top: var(--wp--preset--spacing--40, 2rem); margin-top: var(--wp--preset--spacing--50, 3.25rem); }

/* =============================================================================
   == CART / CHECKOUT / MINI CART DRAWER ==
   ========================================================================= */

.woocommerce-cart table.cart img, .wc-block-cart-item__image img { border-radius: var(--wp--custom--radius--md); }
.wc-block-components-totals-wrapper, .wc-block-checkout__sidebar { background: var(--wp--preset--color--blush); border-radius: var(--wp--custom--radius--lg); }
.wc-block-components-panel, .wc-block-components-radio-control__option { border-color: var(--wp--preset--color--dusty-rose) !important; border-radius: var(--wp--custom--radius--md) !important; }
.wc-block-components-button, button.checkout-button, #place_order {
	border-radius: var(--wp--custom--radius--pill) !important;
	background-color: var(--wp--preset--color--cherry) !important;
	color: var(--wp--preset--color--white) !important;
	font-weight: 700 !important;
}
.wc-block-components-button:hover, #place_order:hover { background-color: var(--wp--preset--color--cherry-dark) !important; }
.wc-block-components-order-summary-item, .wc-block-cart-item { border-color: var(--wp--preset--color--dusty-rose) !important; }

.wc-block-components-drawer__content { background: var(--wp--preset--color--white) !important; }
.wc-block-mini-cart__title, .wc-block-mini-cart-items__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	color: var(--wp--preset--color--cocoa);
}
.wc-block-mini-cart__footer { background: var(--wp--preset--color--blush); border-radius: var(--wp--custom--radius--md); }
.wc-block-cart-item { border-color: var(--wp--preset--color--dusty-rose) !important; }
.wc-block-components-quantity-selector { border-color: var(--wp--preset--color--dusty-rose) !important; border-radius: var(--wp--custom--radius--pill) !important; overflow: hidden; }
[class*="wc-block-mini-cart"] .wc-block-components-button { border-radius: var(--wp--custom--radius--pill) !important; }
.wc-block-mini-cart__badge { background: var(--wp--preset--color--pink) !important; color: var(--wp--preset--color--cherry) !important; font-weight: 700; }

/* Order confirmation ("Thank you") — WooCommerce's own bundled default
   template is used (no theme override); resilient substring selectors
   apply brand polish on top. */
[class*="order-confirmation-status"] { text-align: center; }
[class*="order-confirmation"] th, [class*="order-confirmation"] td { border-color: var(--wp--preset--color--dusty-rose) !important; }
[class*="order-confirmation-totals"], [class*="order-confirmation-address"] { background: var(--wp--preset--color--blush); border-radius: var(--wp--custom--radius--lg); padding: var(--wp--preset--spacing--30, 1.25rem); }

/* =============================================================================
   == MY ACCOUNT ==
   ========================================================================= */

.woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.woocommerce-account .woocommerce-MyAccount-navigation li a { display: block; padding: 0.75rem 1.1rem; border-radius: var(--wp--custom--radius--pill); text-decoration: none; color: var(--wp--preset--color--cocoa); font-weight: 600; }
.woocommerce-account .woocommerce-MyAccount-navigation li.is-active a, .woocommerce-account .woocommerce-MyAccount-navigation li a:hover { background: var(--wp--preset--color--pink); color: var(--wp--preset--color--cherry); }
.woocommerce-account .woocommerce-MyAccount-content { background: var(--wp--preset--color--blush); border-radius: var(--wp--custom--radius--lg); padding: var(--wp--preset--spacing--40, 2rem); }
.woocommerce-orders-table, .shop_table { border: none; border-collapse: separate; border-spacing: 0 0.5rem; }
.woocommerce-orders-table th { text-align: left; color: var(--wp--preset--color--cocoa-40); font-size: var(--wp--preset--font-size--xs); text-transform: uppercase; }
.woocommerce-orders-table td, .shop_table td { background: var(--wp--preset--color--white); padding: 0.9rem 1rem; border: none; }
mark.order-status { background: var(--wp--preset--color--pink); color: var(--wp--preset--color--cherry); padding: 0.25rem 0.75rem; border-radius: var(--wp--custom--radius--pill); font-size: var(--wp--preset--font-size--xs); }

/* =============================================================================
   == JOURNAL / BLOG ==
   ========================================================================= */

.era-journal-grid {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--wp--preset--spacing--40, 2rem);
	list-style: none !important;
	padding: 0 !important;
	margin: var(--wp--preset--spacing--40, 2rem) 0 0 !important;
}
@media (max-width: 782px) { .era-journal-grid { grid-template-columns: 1fr; } }
.era-journal-card { background: var(--wp--preset--color--blush); border-radius: var(--wp--custom--radius--lg); overflow: hidden; }
.era-journal-card img { aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.era-journal-card .era-journal-card__body { padding: var(--wp--preset--spacing--30, 1.25rem); }
.era-journal-card__meta { font-size: var(--wp--preset--font-size--xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--wp--preset--color--cocoa-40); }
.era-journal-card__title { font-family: var(--wp--preset--font-family--display); margin: 0.4rem 0; }

/* =============================================================================
   == EMPTY STATES, 404 ==
   ========================================================================= */

.era-empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.75rem; padding: var(--wp--preset--spacing--60, 5rem) var(--wp--preset--spacing--30, 1.25rem); }
.era-empty-state__title { display: block; font-family: var(--wp--preset--font-family--serif); font-style: italic; font-size: var(--wp--preset--font-size--xl); color: var(--wp--preset--color--cocoa); }
.era-empty-state__body { display: block; color: var(--wp--preset--color--cocoa-40); }

.era-pill-links { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.era-pill-links a {
	display: inline-block;
	padding: 0.5rem 1.1rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--pink);
	color: var(--wp--preset--color--cocoa);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 500;
}
.era-pill-links a:hover { background: var(--wp--preset--color--dusty-rose); }