/* =============================================================================
   ECONUR — SHARED COMPONENTS
   Header, footer, buttons, chips, FAB, mobile nav, utilities.
   Mobile-first. 100% token-driven — no raw hex/px colour values here. (spec §11)
   ============================================================================= */

/* ---------- Utilities ---------------------------------------------------- */
.econ-section { padding-block: var(--section-gap); }
.econ-main { display: block; min-height: 55vh; }

.econ-eyebrow {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: var(--space-3);
}

.econ-skip-link {
  position: absolute;
  left: var(--space-3);
  top: -60px;
  z-index: calc(var(--z-header) + 10);
  padding: var(--space-3) var(--space-4);
  background: var(--forest);
  color: var(--white);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  transition: top var(--transition);
}
.econ-skip-link:focus { top: 0; color: var(--white); }

/* Scroll-reveal (fade/slide-up on view). JS adds .is-inview. */
[data-econ-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}
[data-econ-reveal].is-inview { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-econ-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---------- Buttons ------------------------------------------------------ */
.econ-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: 1rem;
  line-height: 1;
  padding: 16px 28px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: transform var(--transition), background var(--transition),
    color var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.econ-btn:active { transform: translateY(1px); }
.econ-btn--primary { background: var(--forest); color: var(--white); }
.econ-btn--primary:hover { background: var(--forest-light); color: var(--white); box-shadow: var(--shadow-md); }
.econ-btn--ghost { background: transparent; color: var(--forest); border-color: var(--sage); }
.econ-btn--ghost:hover { background: var(--pale); color: var(--forest); }
.econ-btn--light { background: var(--white); color: var(--forest); }
.econ-btn--light:hover { background: var(--pale); color: var(--forest-light); box-shadow: var(--shadow-md); }

/* THE main CTA — unique to the "Order" action, used on NO other button so the
   primary purchase path is never visually ambiguous. (client rule) */
.econ-btn--order {
  background: linear-gradient(135deg, var(--order-grad-a), var(--order-grad-b));
  color: var(--white);
  border: 0;
  font-weight: var(--fw-bold);
  box-shadow: var(--order-shadow);
}
.econ-btn--order:hover { color: var(--white); transform: translateY(-2px); box-shadow: var(--order-shadow-strong); }
.econ-btn--order .econ-icon { width: 20px; height: 20px; }

.econ-btn--block { width: 100%; }
.econ-btn--lg { padding: 18px 34px; font-size: 1.05rem; }
.econ-btn[disabled], .econ-btn.is-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* ---------- Chips (filters / tags) --------------------------------------- */
.econ-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: var(--pale);
  color: var(--text-mid);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.econ-chip:hover { background: var(--sage); color: var(--forest); }
.econ-chip[aria-pressed="true"], .econ-chip.is-active { background: var(--forest); color: var(--white); }
.econ-chip--static { cursor: default; }
.econ-chip--static:hover { background: var(--pale); color: var(--text-mid); }
.econ-chip--soon { opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.econ-chip--soon::after {
  content: "Soon";
  font-size: 10px;
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--mint);
  color: var(--forest);
  padding: 2px 6px;
  border-radius: 8px;
}

/* ---------- Header ------------------------------------------------------- */
.econ-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--glass-border);
  transition: box-shadow var(--transition);
}
.econ-header.is-scrolled { box-shadow: var(--shadow-sm); }
.econ-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--header-h);
}
.econ-header__brand { order: 1; margin-inline: auto; display: flex; align-items: center; }
.econ-header__brand img { max-height: 44px; width: auto; }
.econ-logo {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 1.35rem;
  color: var(--text-dark);
  letter-spacing: 0.01em;
}

/* Image brand mark (assets/images/logo.png, 858×189 — a wide lockup, so it is
 * capped by height and allowed to size itself horizontally). */
.econ-logo--mark { display: inline-flex; line-height: 0; }
.econ-logo--mark img { display: block; max-height: 32px; width: auto; }

/* Below 480px the header is logo + two action buttons on a 375px viewport;
 * 40px tall would render ~182px wide and crowd them. */
@media (max-width: 479.98px) {
  .econ-logo--mark img { max-height: 30px; }
}
.econ-header__actions { order: 2; display: flex; align-items: center; gap: var(--space-1); }

.econ-icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-dark);
  transition: background var(--transition), color var(--transition);
}
.econ-icon-btn:hover { background: var(--pale); color: var(--forest); }
/* Signed-in state on the account control — a quiet dot, not a badge. */
.econ-icon-btn.is-signed-in { color: var(--forest); }
.econ-icon-btn.is-signed-in::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 2px var(--white);
}
.econ-cart-count {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--emerald);
  color: var(--white);
  font-size: 11px;
  font-weight: var(--fw-bold);
  line-height: 18px;
  text-align: center;
}

/* Burger */
.econ-header__burger {
  order: 0;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 11px;
  border: 0;
  background: transparent;
}
.econ-header__burger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--text-dark);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.econ-nav-open .econ-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.econ-nav-open .econ-header__burger span:nth-child(2) { opacity: 0; }
.econ-nav-open .econ-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Navigation — mobile drawer by default */
.econ-nav {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  height: 100dvh;
  width: min(82vw, 320px);
  background: var(--white);
  box-shadow: var(--shadow-lg);
  padding: calc(var(--header-h) + var(--space-4)) var(--space-5) var(--space-5);
  transform: translateX(-100%);
  transition: transform var(--transition);
  z-index: var(--z-drawer);
  overflow-y: auto;
}
.econ-nav-open .econ-nav { transform: none; }
.econ-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.econ-nav__list a {
  display: block;
  padding: var(--space-3) 0;
  font-weight: var(--fw-medium);
  font-size: 1.05rem;
  color: var(--text-dark);
  border-bottom: 1px solid var(--pale);
}
.econ-nav__list a:hover { color: var(--forest); }

.econ-nav-scrim {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  z-index: calc(var(--z-drawer) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}
.econ-nav-open .econ-nav-scrim { opacity: 1; pointer-events: auto; }
.econ-nav-open { overflow: hidden; }
/* Keep the header (and its hamburger → ✕) above the open drawer so the close
   control is tappable — otherwise the drawer panel occludes it. */
.econ-nav-open .econ-header { z-index: calc(var(--z-drawer) + 1); }

/* Desktop navigation */
@media (min-width: 900px) {
  .econ-header__burger { display: none; }
  .econ-header__brand { order: 0; margin-inline: 0; }
  .econ-header__actions { order: 2; margin-inline-start: auto; gap: var(--space-2); }
  .econ-nav {
    order: 1;
    position: static;
    height: auto;
    width: auto;
    background: transparent;
    box-shadow: none;
    padding: 0;
    transform: none;
    overflow: visible;
    z-index: auto;
    margin-inline-start: var(--space-6);
  }
  .econ-nav__list { flex-direction: row; align-items: center; gap: var(--space-6); }
  .econ-nav__list a { padding: var(--space-2) 0; border-bottom: 0; }
  .econ-nav-scrim { display: none; }
}

/* ---------- Footer ------------------------------------------------------- */
.econ-footer { background: var(--forest); color: var(--sage); margin-top: var(--section-gap); }
.econ-footer__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-6); padding-block: var(--space-8); }
.econ-footer__tagline { color: var(--sage); max-width: 40ch; font-size: var(--fs-sm); }
.econ-footer__heading { color: var(--white); font-size: 1.1rem; margin-bottom: var(--space-3); }
.econ-footer__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.econ-footer a { color: var(--sage); }
.econ-footer a:hover { color: var(--white); }
.econ-footer .econ-logo, .econ-logo--light { color: var(--white); }
.econ-footer__brand img { max-height: 48px; width: auto; margin-bottom: var(--space-3); filter: brightness(0) invert(1); }
.econ-social { list-style: none; display: flex; gap: var(--space-3); padding: 0; margin: 0 0 var(--space-4); }
.econ-social a {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-pill);
  background: var(--forest-light);
  color: var(--white);
  transition: background var(--transition), transform var(--transition);
}
.econ-social a:hover { background: var(--emerald); color: var(--white); transform: translateY(-2px); }
.econ-footer__trust { font-size: var(--fs-sm); color: var(--sage); }
.econ-footer__bar { border-top: 1px solid var(--forest-light); }
.econ-footer__bar-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-block: var(--space-4);
  font-size: var(--fs-sm);
  color: var(--sage);
}
.econ-footer__bar-inner p { margin: 0; }
@media (min-width: 760px) {
  .econ-footer__inner { grid-template-columns: 1.6fr 1fr 1.1fr; }
  .econ-footer__bar-inner { flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ---------- Carousel (homepage showcase: featured products + offers) ----- */
.econ-carousel { position: relative; }
.econ-carousel__viewport { overflow: hidden; border-radius: var(--radius-card); }
.econ-carousel__track { display: flex; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
@media (prefers-reduced-motion: reduce) { .econ-carousel__track { transition: none; } }
.econ-carousel__slide { flex: 0 0 100%; min-width: 100%; display: flex; }
.econ-carousel__slide > * { width: 100%; } /* child fills the (equal-height) slide, no whitespace on shorter slides */
.econ-carousel__btn {
  position: absolute; top: 42%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; border-radius: var(--radius-pill);
  background: var(--glass-bg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--forest); box-shadow: var(--shadow-sm);
  display: inline-flex; align-items: center; justify-content: center; z-index: 2; cursor: pointer;
  transition: background var(--transition);
}
.econ-carousel__btn:hover { background: var(--white); }
.econ-carousel__btn--prev { inset-inline-start: 8px; }
.econ-carousel__btn--next { inset-inline-end: 8px; }
.econ-carousel__dots { display: flex; justify-content: center; gap: 2px; margin-top: var(--space-4); }

/* The dot LOOKS 9px but the button is 24px square, so the hit area clears the
 * WCAG 2.5.8 minimum. Previously the whole control was 9px — effectively
 * untappable on a phone, and it is the carousel's only direct navigation.
 * The visible dot is drawn with ::before so appearance and target size are
 * independent. */
.econ-carousel__dot {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
}
.econ-carousel__dot::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sage);
  transition: background var(--transition), transform var(--transition);
}
.econ-carousel__dot.is-active::before { background: var(--forest); transform: scale(1.25); }
.econ-carousel__dot:hover::before { background: var(--emerald); }
.econ-carousel--single .econ-carousel__btn,
.econ-carousel--single .econ-carousel__dots { display: none; }

/* Mobile: move the arrows out of the slide and into a control row.
 *
 * The overlay position is `top: 42%` of the whole .econ-carousel. Above 880px the
 * showcase is a two-column grid, so that lands over the image. Below it the grid
 * stacks (image ~193px, then the info column), the carousel becomes ~670px tall,
 * and 42% falls straight onto the product name — the arrows covered the bar name
 * and, being z-index 2, swallowed taps meant for it.
 *
 * Rather than re-deriving a magic offset from the image aspect ratio (brittle, and
 * it breaks again whenever the info column changes height), the arrows become a
 * real control row beneath the carousel: [←] [• • •] [→]. Nothing can overlap the
 * content, the 44px targets sit in comfortable thumb reach, and the dots keep
 * their place in the middle.
 *
 * Breakpoint matches the showcase grid in homepage.css.
 */
@media (max-width: 879.98px) {
  .econ-carousel {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "viewport viewport viewport"
      "prev     dots     next";
    align-items: center;
  }

  .econ-carousel__viewport { grid-area: viewport; }
  .econ-carousel__btn--prev { grid-area: prev; }
  .econ-carousel__btn--next { grid-area: next; }
  .econ-carousel__dots { grid-area: dots; }

  .econ-carousel__btn {
    position: static;
    inset: auto;
    transform: none;
    margin-top: var(--space-4);
  }

  /* Solid rather than glass: it now sits on the page background, not on an image. */
  .econ-carousel__btn {
    background: var(--white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .econ-carousel__dots { margin-top: var(--space-4); }
}

/* Offer slide */
.econ-offer { position: relative; min-height: 320px; display: flex; align-items: center; border-radius: var(--radius-card); overflow: hidden; background: linear-gradient(140deg, var(--forest), var(--emerald-dark)); color: var(--white); }
.econ-offer__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.econ-offer__inner { position: relative; z-index: 1; padding: clamp(28px, 5vw, 56px); max-width: 640px; }
.econ-offer__eyebrow { color: var(--mint); }
.econ-offer__title { color: var(--white); font-size: var(--fs-h1); margin: 0 0 var(--space-3); }
.econ-offer__sub { color: var(--sage); font-size: 1.1rem; margin: 0 0 var(--space-5); max-width: 46ch; }

/* =============================================================================
   SHARED PRODUCT UI  (used on BOTH the homepage and the single-product page)
   Section head · size selector · product card · add-to-cart feedback.
   ============================================================================= */
.econ-section-head { text-align: center; max-width: 640px; margin: 0 auto var(--space-7); }
.econ-section-head__title { font-size: var(--fs-h2); margin: 0 0 var(--space-3); }
.econ-section-head__sub { color: var(--text-mid); margin: 0; }

/* Size / weight selector */
.econ-sizes { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-5); }
.econ-size {
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--sage);
  background: var(--white);
  color: var(--text-mid);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.econ-size:hover { border-color: var(--emerald); color: var(--forest); }
.econ-size.is-active { background: var(--forest); border-color: var(--forest); color: var(--white); }

/* Product card — image, name, short blurb (hero ingredients + target skin),
   inline size selector, and Order + Add-to-Cart actions. (client card spec) */
.econ-card { display: flex; flex-direction: column; background: var(--white); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform var(--transition), box-shadow var(--transition); }
.econ-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.econ-card.is-hidden { display: none; }
.econ-card__media { display: block; aspect-ratio: 1 / 1; background: var(--pale); overflow: hidden; }
.econ-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); }
.econ-card:hover .econ-card__img { transform: scale(1.04); }
.econ-card__body { display: flex; flex-direction: column; gap: 8px; padding: var(--space-4); flex: 1; }
.econ-card__cat { font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-light); }
.econ-card__title { font-family: var(--font-display); font-size: 1.2rem; font-weight: var(--fw-semibold); margin: 0; line-height: 1.25; }
.econ-card__title a { color: var(--text-dark); }
.econ-card__title a:hover { color: var(--forest); }
.econ-card__desc { font-size: var(--fs-sm); color: var(--text-mid); margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.econ-card__meta { font-size: var(--fs-xs); color: var(--text-light); margin: 0; line-height: 1.5; }
.econ-card__meta b { color: var(--text-mid); font-weight: var(--fw-semibold); }
.econ-card__buy { margin-top: auto; padding-top: var(--space-3); display: flex; flex-direction: column; gap: 10px; }
.econ-card__price { color: var(--forest); font-weight: var(--fw-bold); font-size: 1.15rem; margin: 0; }
.econ-card .econ-sizes { margin-bottom: 0; gap: 6px; }
.econ-card .econ-size { padding: 6px 13px; font-size: var(--fs-xs); }
.econ-card__actions { display: flex; flex-direction: column; gap: 8px; }
.econ-card__actions .econ-btn { width: 100%; padding: 12px 16px; font-size: var(--fs-sm); }

/* Buy-button feedback (Order + Add) */
.econ-btn.is-loading { opacity: 0.7; pointer-events: none; }
.econ-add.is-added { background: var(--emerald-dark); color: var(--white); border-color: var(--emerald-dark); }

/* ---------- Header language switcher (GTranslate) ------------------------- */
/* GTranslate's "Dropdown" widget look renders a NATIVE <select class="gt_selector">
 * (not the .gt_switcher div structure its other looks use). A native select cannot
 * have its closed appearance restyled reliably across browsers, so instead we lay a
 * transparent, full-size select over our own globe icon: the visitor sees a 44px
 * icon button, and clicking it opens the browser's real dropdown — which also gives
 * us the native language picker on mobile for free.
 *
 * Keeping the real <select> (rather than building a custom menu) preserves keyboard
 * support and screen-reader semantics; header.php adds the aria-label. */

.econ-lang {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  color: var(--text-dark);
  transition: background var(--transition), color var(--transition);
}
.econ-lang:hover { background: var(--pale); color: var(--forest); }
.econ-lang:focus-within { background: var(--pale); color: var(--forest); }

.econ-lang__icon { width: 22px; height: 22px; pointer-events: none; }

/* GTranslate floats its wrapper by default; inside the header it must sit inline. */
.econ-lang .gtranslate_wrapper,
.econ-lang .gt_switcher_wrapper {
  position: static !important;
  inset: auto !important;
  z-index: auto !important;
}
.econ-lang #google_translate_element2 { display: none !important; }

/* The real control: invisible, but exactly covering the button. */
.econ-lang .gt_selector {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* Hide any SECOND switcher the plugin renders (floating selector / menu item).
 * Guarded by :has() so this only applies once our header instance exists — a
 * misconfigured plugin can never leave the visitor with no switcher at all. */
body:has(.econ-lang .gt_selector) > .gtranslate_wrapper { display: none !important; }
body:has(.econ-lang .gt_selector) .econ-nav .gtranslate_wrapper,
body:has(.econ-lang .gt_selector) .econ-nav .gt_selector { display: none !important; }