/* Premium storefront refinement layer: shared, local-first and deliberately subtle. */
:root {
  --eco-section-space: clamp(38px, 4vw, 56px);
  --eco-surface-soft: #f2eee5;
  --eco-shadow-premium: 0 20px 50px rgba(47, 71, 57, 0.12);
}

.eco-homepage {
  background:
    radial-gradient(circle at 88% 14%, rgba(143, 165, 148, .18), transparent 24rem),
    var(--eco-paper);
}

.eco-homepage .eco-section {
  padding-block: var(--eco-section-space);
}

.eco-homepage .eco-section--compact {
  padding-block: clamp(28px, 3vw, 40px);
}

.eco-homepage .eco-section__head {
  display: grid;
  justify-items: center;
  max-width: 800px;
  margin: 0 auto clamp(20px, 2.4vw, 30px);
  text-align: center;
}

.eco-homepage .eco-section__head > div {
  width: 100%;
  text-align: center;
}

.eco-homepage .eco-section__head h2 {
  max-width: 24ch;
  margin: 0 auto;
  font-family: var(--font-heading) !important;
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
  font-weight: 400 !important;
  line-height: 1.1;
  letter-spacing: -.025em;
  text-align: center;
}

.eco-homepage .eco-section__head > div > p:not(.eco-eyebrow) {
  max-width: 680px;
  margin: 10px auto 0;
  color: var(--eco-muted);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.6;
  text-align: center;
}

.eco-homepage .eco-section__head > :is(.eco-text-link, .eco-button) {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.eco-home-hero {
  min-height: clamp(620px, 62vh, 720px);
}

.eco-home-hero__overlay {
  background:
    linear-gradient(90deg, rgba(47, 71, 57, .94) 0%, rgba(47, 71, 57, .81) 40%, rgba(47, 71, 57, .22) 74%, rgba(47, 71, 57, .04) 100%);
}

.eco-home-hero__copy {
  max-width: 790px;
  margin-inline: auto;
  text-align: center;
}

.eco-home-hero .eco-eyebrow {
  display: block;
  font-size: clamp(12px, 0.85vw, 13px);
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #cbe3d2;
  margin-bottom: 12px;
  text-align: center;
}

.eco-home-hero h1 {
  max-width: 16ch;
  margin: 0 auto 20px;
  font-family: var(--font-heading);
  font-size: clamp(2.25rem, 3.8vw, 3.25rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.025em;
  text-align: center;
}

.eco-home-hero__copy > p:not(.eco-eyebrow) {
  max-width: 680px;
  margin: 0 auto 28px;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.65;
  text-align: center;
}

.eco-home-hero__content {
  padding-block: clamp(50px, 5vw, 72px);
}

.eco-home-hero .eco-button-row {
  gap: 14px;
}

.eco-home-hero .eco-button {
  min-height: 50px;
  padding-inline: 26px;
}

.eco-home-hero__proof {
  width: min(100%, 720px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(34px, 4vw, 56px) 0 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 14px;
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(8px);
  list-style: none;
}

.eco-home-hero__proof li {
  min-width: 0;
  padding: 15px 16px;
  background: rgba(8, 38, 24, .18);
}

.eco-home-hero__proof strong,
.eco-home-hero__proof span {
  display: block;
}

.eco-home-hero__proof strong {
  color: white;
  font-size: 13px;
  line-height: 1.3;
}

.eco-home-hero__proof span {
  margin-top: 5px;
  color: rgba(255, 255, 255, .76);
  font-size: 11px;
  line-height: 1.35;
}

.eco-home-promo-section {
  padding-top: clamp(54px, 6vw, 84px) !important;
}

.eco-promo-carousel {
  box-shadow: var(--eco-shadow-premium);
}

.eco-promo-slide__overlay {
  background: linear-gradient(90deg, rgba(8, 38, 24, .90), rgba(8, 38, 24, .58) 52%, rgba(8, 38, 24, .09));
}

.eco-promo-slide__content h2 {
  max-width: 10ch;
  line-height: .99;
  letter-spacing: -.04em;
}

.eco-home-category-section {
  padding-bottom: clamp(40px, 4.5vw, 72px) !important;
}

.eco-carousel-section__head {
  max-width: 760px;
}

.eco-home-category-card,
.eco-material-card {
  box-shadow: 0 16px 38px rgba(47, 71, 57, .12);
}

.eco-home-category-card::after,
.eco-material-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, 0);
  border-radius: 11px;
  pointer-events: none;
  transition: border-color 260ms ease;
}

.eco-home-category-card:hover::after,
.eco-home-category-card:focus-visible::after,
.eco-material-card:hover::after,
.eco-material-card:focus-visible::after {
  border-color: rgba(255, 255, 255, .64);
}

.eco-standard-card {
  border-top: 4px solid #a9c6af;
  box-shadow: none;
}

.eco-standard-card:nth-child(2) { border-top-color: #d7b986; }
.eco-standard-card:nth-child(3) { border-top-color: #7dad8d; }
.eco-standard-card:nth-child(4) { border-top-color: #b6c8aa; }

.eco-whatsapp {
  background: linear-gradient(118deg, #2f4739 0%, #365545 62%, #2a4336 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.eco-impact-section {
  background:
    radial-gradient(circle at 78% 8%, rgba(122, 165, 134, .16), transparent 30rem),
    linear-gradient(135deg, #183628 0%, #203f30 100%);
}

.eco-home-impact-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.3vw, 20px);
}

.eco-home-impact {
  position: relative;
  min-height: 192px;
  padding: clamp(22px, 2vw, 30px);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 16px;
  background: linear-gradient(150deg, rgba(255, 255, 255, .105), rgba(255, 255, 255, .035));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}

.eco-home-impact + .eco-home-impact {
  border-left: 1px solid rgba(255, 255, 255, .15);
}

.eco-home-impact strong {
  font-size: clamp(1.8rem, 2.55vw, 3.25rem);
  letter-spacing: -.04em;
  font-variant-numeric: lining-nums;
}

.eco-home-impact small {
  letter-spacing: .05em;
  text-transform: uppercase;
}

.eco-home-impact--pending { display: none; }

.eco-team-uses {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.eco-team-uses > a {
  position: relative;
  min-height: 440px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--eco-border);
  border-radius: 16px;
  color: var(--eco-ink);
  background: rgba(255, 255, 255, .76);
  box-shadow: 0 10px 26px rgba(47, 71, 57, .05);
  text-decoration: none;
  transition: transform 240ms cubic-bezier(.22, 1, .36, 1), box-shadow 240ms ease, background 240ms ease;
}

.eco-team-uses > a:hover {
  transform: translateY(-5px);
  background: white;
  box-shadow: var(--eco-shadow-premium);
}

.eco-team-use__media {
  position: relative;
  flex: 0 0 auto;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--eco-beige);
}

.eco-team-use__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 440ms cubic-bezier(.22, 1, .36, 1);
}

.eco-team-uses > a:hover .eco-team-use__media img { transform: scale(1.055); }

.eco-team-use__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.25vw, 30px);
}

.eco-team-use__content span {
  color: var(--eco-leaf);
  font: 400 clamp(2rem, 3vw, 3.25rem)/1 var(--eco-font-heading);
}

.eco-team-use__content h3 {
  max-width: 13ch;
  margin: 17px 0 10px;
  color: var(--eco-forest-dark);
  font-size: clamp(1.5rem, 2vw, 2rem);
  line-height: 1.08;
}

.eco-team-use__content p {
  max-width: 34ch;
  margin: 0;
  color: var(--eco-muted);
  font-size: 14px;
  line-height: 1.6;
}

.eco-team-use__content b {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 24px;
  color: var(--eco-forest);
  font: 800 13px/1.35 var(--eco-font-body);
}

.eco-team-use__content b svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.eco-homepage .eco-product-card {
  box-shadow: 0 5px 20px rgba(47, 71, 57, .05);
}

.eco-homepage .eco-product-card__body {
  padding: 20px;
}

.eco-homepage .eco-product-card h3 {
  font-weight: 700;
  line-height: 1.4;
}

.eco-homepage .eco-price {
  min-height: 28px;
  margin: 14px 0 16px;
}

.eco-journal-feed__card {
  box-shadow: none;
}

@media (max-width: 1099px) {
  .eco-home-hero { min-height: 620px; }
  .eco-home-hero h1 { font-size: clamp(2.25rem, 4.2vw, 3rem); }
  .eco-home-impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eco-team-uses { grid-template-columns: repeat(3, minmax(220px, 1fr)); overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
  .eco-team-uses > a { scroll-snap-align: start; }
}

@media (max-width: 767px) {
  .eco-homepage .eco-section__head { display: grid; }
  .eco-homepage .eco-section__head h2 { font-size: clamp(2rem, 8.5vw, 2.6rem); }
  .eco-home-hero { min-height: 640px; }
  .eco-home-hero__content { align-items: end; padding-block: 44px; }
  .eco-home-hero__proof { grid-template-columns: 1fr; gap: 0; margin-top: 30px; }
  .eco-home-hero__proof li + li { border-top: 1px solid rgba(255,255,255,.16); }
  .eco-home-hero__proof li { display: grid; grid-template-columns: minmax(120px, .86fr) minmax(0, 1.14fr); gap: 10px; align-items: baseline; padding: 12px 14px; }
  .eco-home-hero__proof span { margin: 0; }
  .eco-home-impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eco-team-uses { grid-template-columns: repeat(3, minmax(77vw, 1fr)); }
}

@media (max-width: 479px) {
  .eco-home-impact-grid { grid-template-columns: 1fr; }
  .eco-home-impact { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .eco-team-uses > a { transition: none; }
}

/* Editorial desktop composition, inspired by sustainable retail conventions
   but built with Ecosphere's own layout, content and visual assets. */
@media (min-width: 1100px) {
  .eco-announcement {
    min-height: 40px;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    background: #2f4739;
    font-size: 12px;
    letter-spacing: .015em;
  }

  .eco-announcement__control { width: 52px; min-height: 40px; opacity: .72; }
  .eco-announcement__pause { display: none; }

  .eco-site-header {
    min-height: 84px;
    border-bottom: 0;
    background: rgba(255, 255, 255, .97);
    box-shadow: none;
  }

  .eco-site-header.is-scrolled {
    box-shadow: 0 8px 26px rgba(47, 71, 57, .10);
  }

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

  .eco-header__inner {
    width: calc(100% - 64px);
    max-width: none;
    min-height: 84px;
    grid-template-columns: 270px minmax(0, 1fr) auto;
    gap: 18px;
  }

  .eco-site-header.is-scrolled .eco-header__inner { min-height: 72px; }
  .eco-header__brand { width: 270px; }
  .eco-header__brand .eco-brand-lockup__mark { height: 46px; }
  .eco-header__brand img {
    width: auto;
    max-width: 100%;
    height: 46px;
    object-fit: contain;
    object-position: left center;
  }
  /* The compact search control stays visible on every local page.  The large
     inline field was intentionally removed to preserve the editorial nav,
     while this labelled control opens the accessible search drawer. */
  .eco-header__search-form { display: none !important; }

  .eco-header__search {
    width: auto;
    min-width: 40px;
    flex-basis: auto;
    gap: 7px;
    padding-inline: 11px;
    border: 1px solid rgba(47, 71, 57, .16);
    border-radius: 999px;
  }

  .eco-header__search-label {
    display: inline;
    font: 700 13px/1 var(--eco-font-body);
  }

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

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

  .eco-nav__trigger[data-eco-menu-trigger="shop"] {
    padding-inline: 18px;
    border-radius: 6px;
    color: white;
    background: var(--eco-forest);
  }

  .eco-nav__trigger[data-eco-menu-trigger="shop"]:hover,
  .eco-nav__trigger[data-eco-menu-trigger="shop"][aria-expanded="true"] {
    color: white;
    background: var(--eco-forest-dark);
  }

  .eco-header__actions { position: relative; z-index: 3; gap: 6px; }
  .eco-icon-button { width: 40px; height: 40px; flex-basis: 40px; }
  .eco-icon-button svg { width: 20px; height: 20px; }

  .eco-mega-menu {
    top: 100%;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .eco-mega-menu__inner {
    width: min(calc(100% - 64px), 1420px);
    margin-inline: auto;
    padding: 28px clamp(28px, 3vw, 48px) 32px;
    border: 1px solid rgba(47, 71, 57, .14);
    border-radius: 0 0 24px 24px;
    background: rgba(255, 255, 255, .985);
    box-shadow: 0 24px 42px rgba(47, 71, 57, .16);
  }

  .eco-mega-menu__feature { padding: 16px; border-radius: 14px; }
  .eco-mega-menu__feature img { border-radius: 9px; }
  .eco-mega-menu__feature h3 { font-size: 21px; }
  .eco-mega-menu__feature p { margin-bottom: 14px; }

  /* Shop uses a compact category-group selector so a customer chooses a
     shopping dimension first, then sees only the relevant links. */
  .eco-mega-menu--shop .eco-shop-mega__inner {
    width: min(calc(100% - 64px), 1040px);
    grid-template-columns: 184px minmax(0, 1fr) 278px;
    gap: 22px;
    padding: 18px;
    border-radius: 0 0 18px 18px;
  }

  .eco-shop-mega__groups {
    padding: 10px 4px 10px 8px;
    border-right: 1px solid rgba(47, 71, 57, .13);
  }

  .eco-shop-mega__eyebrow {
    margin: 0 0 12px;
    color: var(--eco-muted);
    font: 700 10px/1.4 var(--eco-font-body);
    letter-spacing: .09em;
    text-transform: uppercase;
  }

  .eco-shop-mega__tabs {
    display: grid;
    gap: 4px;
  }

  .eco-shop-mega__tab {
    width: 100%;
    min-height: 38px;
    padding: 8px 10px;
    border: 0;
    border-radius: 7px;
    color: var(--eco-ink);
    background: transparent;
    font: 600 13px/1.3 var(--eco-font-body);
    text-align: left;
    cursor: pointer;
    transition: color 180ms ease, background 180ms ease;
  }

  .eco-shop-mega__tab:hover,
  .eco-shop-mega__tab[aria-selected="true"] {
    color: white;
    background: var(--eco-forest);
  }

  .eco-shop-mega__content {
    display: grid;
    align-content: center;
    min-width: 0;
    padding: 10px 6px;
  }

  .eco-shop-mega__panel-title {
    margin: 0 0 12px;
    color: var(--eco-forest-dark);
    font: 400 clamp(1.45rem, 1.8vw, 1.85rem)/1.1 var(--eco-font-heading);
    letter-spacing: -.02em;
  }

  .eco-shop-mega__panel .eco-mega-menu__list { gap: 4px; }
  .eco-shop-mega__panel .eco-mega-menu__list a { padding: 5px 0; }
  .eco-mega-menu--shop .eco-mega-menu__feature { min-height: 262px; }
  .eco-mega-menu--shop .eco-mega-menu__feature-copy { min-height: 262px; padding: 19px; }
  .eco-mega-menu--shop .eco-mega-menu__feature h3 { font-size: 21px; }

  .eco-home-hero {
    min-height: clamp(620px, 45vw, 720px);
    border-radius: 0 0 26px 26px;
  }

  .eco-home-hero__overlay {
    background:
      linear-gradient(90deg, rgba(47, 71, 57, .62), rgba(47, 71, 57, .28) 48%, rgba(47, 71, 57, .30)),
      linear-gradient(0deg, rgba(47, 71, 57, .26), transparent 38%);
  }

  .eco-home-hero__content {
    display: grid;
    justify-items: center;
    padding: 78px 0 122px;
    text-align: center;
  }

  .eco-home-hero__copy { max-width: 860px; }
  .eco-home-hero h1 { max-width: 16ch; margin-inline: auto; font-size: clamp(2.25rem, 3.8vw, 3.25rem); }
  .eco-home-hero__copy > p:not(.eco-eyebrow) { margin-right: auto; margin-left: auto; }
  .eco-home-hero .eco-button-row { justify-content: center; }

  .eco-home-hero__proof {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: min(calc(100% - 64px), 1800px);
    margin: 0 auto 20px;
    border-color: rgba(255, 255, 255, .2);
    border-radius: 16px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 14px 30px rgba(47, 71, 57, .16);
    backdrop-filter: blur(12px);
  }

  .eco-home-hero__proof li { padding: 16px 20px; background: transparent; text-align: left; }
  .eco-home-hero__proof strong { color: var(--eco-forest-dark); font-size: 14px; }
  .eco-home-hero__proof span { color: var(--eco-muted); font-size: 12px; }
}

@media (min-width: 1100px) and (max-width: 1300px) {
  .eco-header__secondary { right: 170px; left: 292px; }
  .eco-header__search { width: 40px; min-width: 40px; padding-inline: 0; }
  .eco-header__search-label { display: none; }
  .eco-nav__list { gap: 15px; }
  .eco-nav__trigger,
  .eco-nav__link { font-size: 12px; }
  .eco-nav__trigger[data-eco-menu-trigger="shop"] { padding-inline: 13px; }
}