/* Etheria Lab — Storefront-page glue and the custom 404.

   The header and footer themselves are NOT defined here: cart, checkout, account
   and 404 render the same .eth-nav / .eth-contact components as the homepage
   (chrome.css + template-parts/landing/*). Everything below only stops
   Storefront's own masthead/colophon shells from re-boxing, re-colouring or
   re-underlining that shared chrome. */

/* --- Neutralise Storefront's header/footer shells ------------------------ */
.site-header,
#masthead,
.site-footer,
#colophon {
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}
#masthead .col-full,
#colophon .col-full {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}
/* Storefront lets the masthead clip; the header is sticky. */
#masthead { overflow: visible !important; }

/* Storefront ships #colophon heading/link colours that win on specificity and
   would make the shared footer's text vanish on the green. Values mirror
   chrome.css exactly — this restores them, it does not restyle anything. */
#colophon .eth-contact h2 { color: #f7f4ec !important; }
#colophon .eth-contact__lede { color: #a9bba6 !important; }
#colophon .eth-contact__grid dt { color: #7f9580 !important; }
#colophon .eth-contact__grid dd,
#colophon .eth-contact__grid dd a { color: #f4f1ea !important; text-decoration: none !important; }
#colophon .eth-contact__grid small { color: #9fb09c !important; }
#colophon .eth-contact__ig { color: #e7dcc4 !important; }
#colophon .eth-btn--gold { color: #1f2a1d !important; }
#colophon .eth-footer__brand span { color: var(--eth-gold-light) !important; }
#colophon .eth-footer__links a { color: #cdd6cb !important; text-decoration: none !important; }
#colophon .eth-footer__copy { color: #7f9580 !important; }

/* --- 404 ----------------------------------------------------------------- */
/* Break out of Storefront's constrained content column so the green section
   runs edge-to-edge (immersive, like the mockup) and drop the breadcrumb. */
.error404 #content,
.error404 #content.site-content { padding: 0 !important; }
.error404 #content .col-full { max-width: 100% !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; margin: 0 !important; }
.error404 .woocommerce-breadcrumb,
.error404 .storefront-breadcrumb,
.error404 nav.woocommerce-breadcrumb { display: none !important; }

.eth-404 { position: relative; overflow: hidden; background: var(--eth-green); }
.eth-404__deco { position: absolute; width: 200px; opacity: .5; pointer-events: none; }
.eth-404__deco--left { left: -24px; bottom: -30px; }
.eth-404__deco--right { right: -30px; top: -24px; width: 190px; opacity: .42; transform: rotate(18deg); }
.eth-404__inner { position: relative; z-index: 1; box-sizing: border-box; max-width: 560px; margin: 0 auto; text-align: center; padding: 64px 24px 72px; }
.eth-404__num { font-family: var(--eth-serif-display); font-size: 74px; font-weight: 500; color: var(--eth-gold-light); line-height: 1; letter-spacing: .04em; }
.eth-404__kicker { font-family: var(--eth-mono); font-size: 10px; letter-spacing: .24em; color: #8ea083; text-transform: uppercase; margin-top: 14px; }
.eth-404__title { font-family: var(--eth-serif-display); font-weight: 500; font-size: 38px; line-height: 1.12; color: var(--eth-bg); margin: 12px 0 0; }
.eth-404__lede { font-family: var(--eth-serif); font-size: 16.5px; line-height: 1.6; color: #b9c4b2; margin: 14px auto 30px; max-width: 420px; }
.eth-404__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.eth-404__track { display: inline-block; margin-top: 22px; text-decoration: underline; text-underline-offset: 3px; font-family: var(--eth-serif); font-size: 14.5px; color: #8ea083; }
.eth-404__track:hover { color: var(--eth-gold-light); }

/* Light ghost button (on dark green: footer + 404) */
.eth-btn--ghost-light { background: none; color: #e9ede4; border-color: rgba(233,237,228,.35); }
.eth-btn--ghost-light:hover { border-color: var(--eth-gold-light); color: #fff; }

@media (max-width: 560px) {
	.eth-404__num { font-size: 60px; }
	.eth-404__title { font-size: 30px; }
	.eth-404__inner { padding: 48px 20px 56px; }
}