/* Etheria Lab — the shared site chrome: header (.eth-nav) and footer
   (.eth-contact + .eth-footer).

   One implementation for every front-end page. The landing renders it through
   header-landing.php / footer-landing.php; the WooCommerce and 404 pages render
   the same template parts through Storefront's header/footer hooks (see
   inc/shop-chrome.php). There is deliberately no cart-specific variant — if a
   size changes here it changes everywhere. */

/* The chrome must read the same whether it sits on the landing (line-height
   1.5 from .eth-landing) or inside Storefront's shells (1.618), so it sets its
   own rather than inheriting the host page's. */
.eth-nav,
.eth-contact { line-height: 1.5; }

.eth-h2 { font-family: var(--eth-serif-display); font-weight: 500; line-height: 1.12; color: var(--eth-green); margin: 0; }

.eth-nav img,
.eth-contact img,
.eth-footer img { display: block; max-width: 100%; height: auto; }

/* ---------------- NAV ---------------- */
/* The #top target. It sits above the sticky header — which is where it has to
   be for "back to top" to mean the top — so it must take no space at all:
   a zero-height block generates no line box, unlike an empty inline. */
.eth-top-anchor { display: block; height: 0; overflow: hidden; }

.eth-nav { position: sticky; top: 0; z-index: 50; background: rgba(244, 241, 234, .92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--eth-line); }
.eth-nav__inner { display: flex; align-items: center; justify-content: space-between; padding: 15px 32px; max-width: var(--eth-max); margin: 0 auto; gap: 16px; }
.eth-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.eth-brand img { width: 34px; }
.eth-brand__name { font-family: var(--eth-serif-display); font-weight: 600; font-size: 18px; letter-spacing: .24em; color: var(--eth-green); white-space: nowrap; }
.eth-nav__links { display: flex; flex-wrap: nowrap; align-items: center; gap: 26px; font-family: var(--eth-sans); font-size: 13.5px; letter-spacing: .02em; }
.eth-nav__links a { color: var(--eth-green-soft); text-decoration: none; white-space: nowrap; }
.eth-nav__links a:hover { color: var(--eth-green); }

/* Cart icon in the header (stays visible on mobile). */
.eth-nav__links a.eth-cart { position: relative; display: inline-flex; align-items: center; color: var(--eth-green); margin-left: 4px; }
.eth-nav__links a.eth-cart:hover { color: var(--eth-gold); }
.eth-cart__icon { display: block; }
.eth-cart__count {
	position: absolute; top: -7px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px;
	border-radius: 9px; background: var(--eth-gold); color: #1f2a1d; box-sizing: border-box;
	font-family: var(--eth-sans); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center;
}
.eth-cart:not(.has-items) .eth-cart__count { display: none; }

/* ---------------- CONTACT ---------------- */
.eth-contact { position: relative; overflow: hidden; background: var(--eth-green); color: #e7eee5; scroll-margin-top: 70px; }
.eth-contact__deco { position: absolute; z-index: 0; pointer-events: none; bottom: 0; right: -6px; width: 150px; opacity: .5; }
.eth-contact__inner { position: relative; z-index: 1; max-width: var(--eth-max); margin: 0 auto; padding: 72px 32px 30px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 50px; }
.eth-contact h2 { font-size: 40px; margin: 18px 0 16px; color: #f7f4ec; line-height: 1.1; }
.eth-contact__lede { font-family: var(--eth-serif); font-size: 18px; line-height: 1.65; color: #a9bba6; margin: 0; max-width: 420px; }
.eth-contact__actions { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.eth-contact__ig { border: 1px solid rgba(217, 184, 115, .45); color: #e7dcc4; }
.eth-contact__ig:hover { border-color: var(--eth-gold-light); }
.eth-contact__info { font-family: var(--eth-serif); font-size: 17px; line-height: 1.5; color: #cdd6cb; align-self: center; }
.eth-contact__grid { display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; }
.eth-contact__grid dt { font-family: var(--eth-sans); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: #7f9580; padding-top: 4px; margin: 0; }
.eth-contact__grid dd { color: #f4f1ea; margin: 0; }
.eth-contact__grid dd a { color: #f4f1ea; text-decoration: none; }
.eth-contact__grid small { font-size: 14px; color: #9fb09c; }

/* ---------------- FOOTER BAR ---------------- */
.eth-footer { position: relative; z-index: 1; max-width: var(--eth-max); margin: 0 auto; padding: 24px 32px 34px; border-top: 1px solid rgba(255, 255, 255, .08); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; background: var(--eth-green); }
.eth-footer__brand { display: flex; align-items: center; gap: 12px; }
.eth-footer__brand img { width: 30px; opacity: .95; }
.eth-footer__brand span { font-family: var(--eth-serif-display); font-size: 16px; letter-spacing: .22em; color: var(--eth-gold-light); }
.eth-footer__links { display: flex; align-items: center; gap: 22px; font-family: var(--eth-sans); font-size: 12px; }
.eth-footer__links a { color: #cdd6cb; text-decoration: none; border-bottom: 1px solid rgba(217, 184, 115, .35); padding-bottom: 2px; }
.eth-footer__copy { font-family: var(--eth-sans); font-size: 12px; color: #7f9580; }

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 760px) {
	.eth-contact__inner { grid-template-columns: 1fr; gap: 34px; }
	.eth-contact__info { align-self: start; }
	.eth-nav__inner, .eth-contact__inner, .eth-footer { padding-left: 20px; padding-right: 20px; }
	.eth-contact h2 { font-size: 32px; }
}
/* Laptops and small desktops: tighten the row before it can run out of space.
   The brand wordmark (~207px) plus the four French section links need ~714px
   at full size, so the gap and type step down first. */
@media (max-width: 1024px) {
	.eth-nav__inner { gap: 12px; }
	.eth-nav__links { gap: 18px; font-size: 13px; }
}

/* Tablets and phones: the compact header from the design — brand, language,
   cart. The threshold sits at 860px, not 560px: between 561px and 820px the
   section links wrapped the header onto two and then three rows, which is what
   made the elements collide. 860px keeps a margin above iPad portrait (768px)
   so longer translated labels cannot bring the wrap back. */
@media (max-width: 860px) {
	.eth-nav__links { gap: 16px; font-size: 12px; }
	.eth-nav__links a.eth-nav-hide { display: none; }
}

/* Narrow phones: the wordmark is the only thing left that can crowd the row. */
@media (max-width: 360px) {
	.eth-brand { gap: 9px; }
	.eth-brand img { width: 28px; }
	.eth-brand__name { font-size: 16px; letter-spacing: .18em; }
}