/*
 * Shared Ecosphere chrome for the rebuilt homepage and mirrored content pages.
 * Everything is scoped to the injected shell/footer so the original page body
 * keeps its own Shopify theme presentation and content.
 */
:root {
  --eco-forest: #2f4739;
  --eco-forest-dark: #24392e;
  --eco-leaf: #65786a;
  --eco-paper: #fbf8f1;
  --eco-beige: #f4f0e6;
  --eco-ink: #252925;
  --eco-muted: #687069;
  --eco-border: #dadfd8;
  --eco-white: #fff;
  --eco-sale: #b5453a;
  --eco-radius-sm: 8px;
  --eco-radius-md: 12px;
  --eco-shadow-sm: 0 8px 24px rgba(47, 71, 57, .08);
  --eco-shadow-md: 0 18px 44px rgba(47, 71, 57, .14);
  --eco-font-heading: "Cardo", Georgia, serif;
  --eco-font-body: "Nunito Sans", Arial, sans-serif;
  --font-heading: var(--eco-font-heading);
  --font-body: var(--eco-font-body);
  --eco-transition: 200ms ease;
}

.eco-shell,
.eco-shell *,
.eco-shell *::before,
.eco-shell *::after,
.eco-shell-layers,
.eco-shell-layers *,
.eco-shell-layers *::before,
.eco-shell-layers *::after,
.eco-footer,
.eco-footer *,
.eco-footer *::before,
.eco-footer *::after {
  box-sizing: border-box;
}

.eco-shell,
.eco-shell-layers,
.eco-footer {
  font-family: var(--eco-font-body);
  font-size: 16px;
  line-height: 1.5;
}

.eco-shell,
.eco-shell-layers {
  color: var(--eco-ink);
}

.eco-footer {
  color: var(--eco-white);
}

.eco-footer :where(p, address, span, strong, summary, h2, a) {
  color: inherit !important;
}

.eco-footer .eco-button--light,
.eco-footer__socials a:hover {
  color: var(--eco-forest-dark) !important;
}

.eco-shell :where(button, input),
.eco-shell-layers :where(button, input),
.eco-footer :where(button, input) {
  min-width: 0;
  max-width: 100%;
  font: inherit;
}

/* Shopify's mirrored theme has broad button rules. Keep the shared header
   controls compact and icon-only on every page. */
.eco-shell button.eco-icon-button,
.eco-shell-layers button.eco-drawer__close,
.eco-shell-layers button.eco-search__close {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background-color: transparent;
  box-shadow: none !important;
  line-height: 1 !important;
  appearance: none;
}

/* Neutralise broad Shopify button pseudo-elements so the search trigger stays
   a clean icon instead of inheriting a large outlined button or visible label. */
.eco-shell button.eco-icon-button::before,
.eco-shell button.eco-icon-button::after,
.eco-shell-layers button.eco-drawer__close::before,
.eco-shell-layers button.eco-drawer__close::after,
.eco-shell-layers button.eco-search__close::before,
.eco-shell-layers button.eco-search__close::after {
  content: none !important;
  display: none !important;
  box-shadow: none !important;
}

.eco-shell button.eco-header__search {
  overflow: hidden;
  color: var(--eco-ink);
  text-indent: 0;
  white-space: nowrap;
}

.eco-shell button.eco-header__search > svg {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
}

.eco-shell button.eco-header__search > .eco-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.eco-shell :where(img, svg),
.eco-shell-layers :where(img, svg),
.eco-footer :where(img, svg) {
  display: block;
  max-width: 100%;
}

.eco-shell .eco-container,
.eco-footer .eco-container {
  width: min(calc(100% - 64px), 1800px);
  max-width: none;
  margin-inline: auto;
}

.eco-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

.eco-skip-link {
  position: fixed;
  z-index: 2000;
  top: 12px;
  left: 12px;
  padding: 11px 16px;
  border-radius: var(--eco-radius-sm);
  color: var(--eco-white);
  background: var(--eco-forest-dark);
  font: 700 15px/1.2 var(--eco-font-body);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform var(--eco-transition);
}

.eco-skip-link:focus { transform: translateY(0); }
body.eco-scroll-lock { overflow: hidden !important; }

.eco-shell :where(a, button, input, summary):focus-visible,
.eco-shell-layers :where(a, button, input, summary):focus-visible,
.eco-footer :where(a, button, input, summary):focus-visible {
  outline: 3px solid #819b87 !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

.eco-button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border: 1px solid var(--eco-forest);
  border-radius: var(--eco-radius-sm);
  color: var(--eco-white);
  background: var(--eco-forest);
  font: 700 15px/1.35 var(--eco-font-body);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--eco-transition), border-color var(--eco-transition), color var(--eco-transition), transform var(--eco-transition);
}

.eco-button:hover {
  border-color: var(--eco-forest-dark);
  color: var(--eco-white);
  background: var(--eco-forest-dark);
  transform: translateY(-1px);
}

.eco-button--secondary { color: var(--eco-forest); background: transparent; }
.eco-button--secondary:hover { color: var(--eco-white); }
.eco-button--light { border-color: var(--eco-white); color: var(--eco-forest-dark); background: var(--eco-white); }
.eco-button--light:hover { border-color: var(--eco-beige); color: var(--eco-forest-dark); background: var(--eco-beige); }

.eco-field {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-sm);
  color: var(--eco-ink);
  background: var(--eco-white);
  font: 500 16px/1.4 var(--eco-font-body);
}

.eco-field::placeholder { color: var(--eco-muted); opacity: 1; }

/* Brown Living-inspired single-row desktop header used everywhere. */
@media (min-width: 1100px) {
  .eco-site-header {
    min-height: 84px;
    border-bottom: 0;
    background: rgba(255, 255, 255, .98);
  }

  .eco-header__primary { position: relative; z-index: 1; background: #fff; }

  .eco-header__inner {
    min-height: 84px;
    grid-template-columns: minmax(230px, 270px) minmax(0, 1fr) auto;
    gap: 18px;
  }

  .eco-site-header.is-scrolled .eco-header__inner { min-height: 72px; }
  .eco-header__brand { width: 260px; justify-self: start; }
  .eco-header__brand .eco-brand-lockup__mark { height: 42px; }
  .eco-header__brand .eco-brand-lockup,
  .eco-header__brand .eco-brand-lockup__mark { width: 100% !important; max-width: 100% !important; overflow: visible !important; }
  .eco-header__brand img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 42px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }
  .eco-header__search-form { display: none !important; }

  .eco-header__actions { min-width: 176px; gap: 2px; }
  .eco-header__search {
    width: 44px;
    min-width: 44px;
    height: 44px;
    display: inline-grid !important;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
  }

  .eco-header__secondary {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 208px;
    left: 306px;
    height: 84px;
    display: grid !important;
    place-items: center;
    border: 0;
    background: transparent;
    pointer-events: none;
  }

  .eco-site-header.is-scrolled .eco-header__secondary { height: 72px; }
  .eco-nav { width: 100%; max-width: 1120px; pointer-events: auto; }
  .eco-nav__list { width: 100%; justify-content: center; gap: clamp(12px, 1.35vw, 26px); }
  .eco-nav__trigger,
  .eco-nav__link { min-height: 38px; padding: 7px 0; font-size: clamp(12px, .82vw, 15px); font-weight: 600; }

  .eco-shell .eco-nav__trigger.eco-nav__trigger--featured {
    min-height: 42px !important;
    padding: 9px 18px !important;
    border: 0 !important;
    border-radius: 6px !important;
    color: #fff !important;
    background: var(--eco-forest) !important;
    box-shadow: none !important;
  }

  .eco-shell .eco-nav__trigger.eco-nav__trigger--featured:hover,
  .eco-shell .eco-nav__trigger.eco-nav__trigger--featured[aria-expanded="true"] {
    color: #fff !important;
    background: var(--eco-forest-dark) !important;
  }
}

@media (min-width: 1100px) and (max-width: 1370px) {
  .eco-header__inner { grid-template-columns: 230px minmax(0, 1fr) 142px; }
  .eco-header__brand { width: 225px; }
  .eco-header__secondary { right: 160px; left: 258px; }
  .eco-nav__list { gap: 13px; }
  .eco-nav__trigger,
  .eco-nav__link { font-size: 12px; }
  .eco-header__search { width: 42px; min-width: 42px; padding: 0; }
}

/* Keep drawer/search controls independent from legacy Shopify form styles. */
.eco-search__head h2 { margin: 0; color: var(--eco-ink); font: 400 30px/1.1 var(--eco-font-heading); }
.eco-search__form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
.eco-search__field-wrap {
  min-width: 0;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--eco-border);
  border-radius: var(--eco-radius-sm);
  background: #fff;
}
.eco-search__field-wrap:focus-within { border-color: var(--eco-forest); box-shadow: 0 0 0 3px rgba(47, 71, 57, .12); }
.eco-search__field-wrap > svg { width: 22px; height: 22px; fill: none; stroke: var(--eco-forest); stroke-linecap: round; stroke-width: 1.8; }
.eco-search__field-wrap .eco-field { min-height: 50px; padding: 9px 0; border: 0; outline: 0; box-shadow: none; }
.eco-search__collections { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--eco-border); }
.eco-search__collections strong { display: block; margin-bottom: 10px; color: var(--eco-ink); font: 700 13px/1.3 var(--eco-font-body); letter-spacing: .06em; text-transform: uppercase; }
.eco-search__collections div { display: flex; flex-wrap: wrap; gap: 8px; }
.eco-search__collections a { padding: 8px 11px; border: 1px solid var(--eco-border); border-radius: 999px; color: var(--eco-forest); background: #fff; font: 700 13px/1.2 var(--eco-font-body); text-decoration: none; }

.eco-footer { margin-top: 0; }

@media (max-width: 1099px) {
  .eco-shell .eco-container,
  .eco-footer .eco-container { width: min(calc(100% - 32px), 1800px); }
  .eco-header__search-form { display: none !important; }
  .eco-header__secondary,
  .eco-mega-menu { display: none !important; }
  .eco-header__menu-button { display: inline-grid; }
  .eco-header__search { display: inline-grid !important; }
  .eco-header__search-label { display: none !important; }
}

@media (max-width: 640px) {
  .eco-search__form { grid-template-columns: 1fr; }
  .eco-search__form .eco-button { width: 100%; }
  .eco-footer__bottom { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  .eco-shell *,
  .eco-shell *::before,
  .eco-shell *::after,
  .eco-shell-layers *,
  .eco-shell-layers *::before,
  .eco-shell-layers *::after,
  .eco-footer *,
  .eco-footer *::before,
  .eco-footer *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}