/* Shared responsive cascade. Loaded after component styles. */

html,
body,
.eco-shell,
.eco-storefront,
#MainContent {
  width: 100%;
  max-width: 100%;
}

.eco-storefront,
.eco-storefront > *,
.eco-section,
.eco-section > *,
.eco-page-hero,
.eco-values-strip {
  min-width: 0;
}

.eco-section :where(img, picture, video, iframe),
.eco-modal :where(img, picture, video, iframe),
.eco-cart-drawer :where(img, picture, video, iframe) {
  max-width: 100%;
}

.eco-product-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.eco-product-card {
  width: 100%;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.eco-product-card__media-gallery,
.eco-product-card__media,
.eco-product-card__media-track {
  width: 100%;
  max-width: 100%;
}

.eco-product-card__media-gallery,
.eco-product-card__media {
  aspect-ratio: 1 / 1;
}

.eco-product-card__image,
.eco-product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
}

.eco-product-card__body {
  min-width: 0;
  height: 100%;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.eco-product-card h3 {
  min-height: 4.2em;
  font-size: clamp(14px, 1.05vw, 16px);
  overflow-wrap: anywhere;
}

.eco-product-card h3 a {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.eco-product-card .eco-price {
  min-height: 1.5em;
  margin-block: 12px;
  font-size: clamp(14px, 1vw, 16px);
}

.eco-product-card__meta,
.eco-product-card__meta > * {
  min-width: 0;
}

.eco-product-card__actions {
  width: 100%;
  margin-top: auto;
}

.eco-product-card__actions :where(.eco-button, button, a) {
  min-width: 0;
  min-height: 44px;
  white-space: normal;
}

.eco-category-grid,
.eco-feature-grid,
.eco-purpose-grid,
.eco-material-grid,
.eco-process-grid,
.eco-impact-grid,
.eco-sdg-grid,
.eco-logo-grid,
.eco-blog-grid,
.eco-values,
.eco-form-grid,
.eco-intro,
.eco-purpose,
.eco-business-banner,
.eco-newsletter,
.eco-product-layout,
.eco-cart-page__layout,
.eco-bulk-layout,
.eco-footer__top,
.eco-footer__business,
.eco-quick-view {
  width: 100%;
  min-width: 0;
}

.eco-category-grid > *,
.eco-feature-grid > *,
.eco-purpose-grid > *,
.eco-material-grid > *,
.eco-process-grid > *,
.eco-impact-grid > *,
.eco-sdg-grid > *,
.eco-logo-grid > *,
.eco-blog-grid > *,
.eco-values > * {
  min-width: 0;
  max-width: 100%;
}

.eco-section__head h2,
.eco-content-block h2 {
  font-size: clamp(2.25rem, 3.6vw, 3.25rem);
}

.eco-hero__copy h1 {
  font-size: clamp(2.25rem, 3.8vw, 3.25rem);
}

.eco-page-hero h1,
.eco-cart-page h1 {
  font-size: clamp(34px, 4.3vw, 62px);
}

.eco-product-info h1 {
  font-size: clamp(32px, 3.5vw, 54px);
  overflow-wrap: anywhere;
}

.eco-hero__content,
.eco-intro,
.eco-purpose,
.eco-business-banner,
.eco-product-layout,
.eco-cart-page__layout,
.eco-bulk-layout {
  max-width: 100%;
}

.eco-modal__dialog,
.eco-quick-view,
.eco-search-drawer,
.eco-mobile-drawer,
.eco-cart-drawer,
.eco-filter-drawer {
  max-width: 100%;
}

.eco-modal__dialog,
.eco-quick-view > *,
.eco-cart-line > *,
.eco-product-layout > *,
.eco-cart-page__layout > * {
  min-width: 0;
}

.eco-quick-view__image img,
.eco-business-banner img,
.eco-feature-card img,
.eco-purpose-card img,
.eco-blog-card img,
.eco-intro__image img {
  max-width: 100%;
}

.eco-cart-line h3,
.eco-product-info,
.eco-quick-view__copy,
.eco-search__results a {
  overflow-wrap: anywhere;
}

.eco-collection-toolbar,
.eco-filter-chips,
.eco-related-links,
.eco-button-row,
.eco-product-actions {
  max-width: 100%;
}

.eco-footer__top {
  grid-template-columns: minmax(280px, 1.45fr) repeat(3, minmax(150px, 1fr));
  gap: clamp(24px, 3vw, 52px);
}

.eco-footer__business {
  grid-template-columns: minmax(0, 1.2fr) minmax(250px, .75fr);
}

.eco-drawer__body,
.eco-cart-drawer__body,
.eco-search__body,
.eco-modal__dialog,
.eco-filter-drawer {
  overscroll-behavior: contain;
}

.quick-order-list__container,
.quick-order-list__table-wrapper,
.cart-items,
.order-history,
.rte table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1439px) {
  .eco-product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }

  .eco-category-grid,
  .eco-process-grid,
  .eco-sdg-grid,
  .eco-logo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .eco-category-grid {
    gap: 20px;
  }

  .eco-footer__top { grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(140px, 1fr)); }
}

@media (min-width: 1100px) and (max-width: 1260px) {
  .eco-nav__list {
    gap: 10px;
  }

  .eco-nav__trigger,
  .eco-nav__link {
    font-size: 13px;
  }

  .eco-header__brand {
    width: 330px;
  }
}

@media (max-width: 1099px) {
  .eco-product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .eco-header__inner {
    min-height: 72px;
    grid-template-columns: 48px minmax(0, 1fr) 120px;
    gap: 8px;
  }

  .eco-header__menu-button {
    display: inline-grid;
  }

  .eco-header__brand {
    justify-self: center;
    width: min(210px, 46vw);
  }

  .eco-header__search-form {
    display: none;
  }

  .eco-header__brand img {
    object-position: center;
  }

  .eco-header__secondary,
  .eco-nav,
  .eco-mega-menu {
    display: none;
  }

  .eco-header__actions {
    min-width: 120px;
    gap: 0;
  }

  .eco-header__actions .eco-header__account {
    display: none;
  }

  .eco-header__actions .eco-header__search,
  .eco-header__actions .eco-header__wishlist,
  .eco-header__actions a[href="/cart"] {
    display: inline-grid !important;
  }

  .eco-header__search-label {
    display: none !important;
  }

  .eco-category-grid,
  .eco-purpose-grid,
  .eco-process-grid,
  .eco-sdg-grid,
  .eco-logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .eco-feature-grid,
  .eco-material-grid,
  .eco-impact-grid,
  .eco-blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .eco-intro,
  .eco-purpose,
  .eco-business-banner,
  .eco-bulk-layout {
    gap: clamp(28px, 5vw, 54px);
  }

  .eco-product-layout {
    grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
    gap: 30px;
  }

  .eco-cart-page__layout {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
    gap: 30px;
  }

  .eco-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .eco-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 899px) {
  .eco-product-layout,
  .eco-cart-page__layout,
  .eco-bulk-layout,
  .eco-intro,
  .eco-purpose,
  .eco-business-banner {
    grid-template-columns: 1fr;
  }

  .eco-product-gallery,
  .eco-cart-page__summary {
    position: static;
  }

  .eco-purpose__visual {
    order: -1;
  }
}

@media (max-width: 767px) {
  :root {
    --eco-gutter: 16px;
  }

  .eco-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .eco-section {
    padding-block: clamp(28px, 6vw, 42px);
  }

  .eco-section__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .eco-section__head .eco-text-link {
    display: inline-block;
    margin-top: 16px;
    text-align: center;
  }

  .eco-hero {
    min-height: min(680px, calc(100svh - 96px));
  }

  .eco-hero__slide::after {
    background: linear-gradient(0deg, rgba(14,42,27,.9), rgba(14,42,27,.2));
  }

  .eco-hero__content {
    align-content: end;
    padding-block: 64px 104px;
  }

  .eco-hero__copy h1 {
    font-size: clamp(38px, 11vw, 48px);
  }

  .eco-hero__copy p,
  .eco-section__head p,
  .eco-content-block > p {
    font-size: 16px;
  }

  .eco-hero__controls {
    right: 16px;
    bottom: 18px;
  }

  .eco-category-grid,
  .eco-purpose-grid,
  .eco-material-grid,
  .eco-process-grid,
  .eco-impact-grid,
  .eco-sdg-grid,
  .eco-logo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .eco-feature-grid,
  .eco-blog-grid,
  .eco-newsletter,
  .eco-footer__top,
  .eco-footer__business,
  .eco-quick-view,
  .eco-form-grid {
    grid-template-columns: 1fr;
  }

  .eco-values {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .eco-product-card__body {
    padding: 14px;
  }

  .eco-product-card h3 {
    min-height: 4.2em;
    font-size: 14px;
  }

  .eco-product-card__actions {
    grid-template-columns: 1fr;
  }

  .eco-product-card__quick {
    display: none;
  }

  .eco-feature-card {
    min-height: clamp(320px, 105vw, 440px);
  }

  .eco-purpose__visual img {
    height: clamp(220px, 68vw, 330px);
  }

  .eco-purpose__visual img:last-child {
    margin-top: 28px;
  }

  .eco-intro__image {
    min-height: clamp(280px, 84vw, 420px);
  }

  .eco-business-banner img {
    min-height: 280px;
  }

  .eco-product-actions,
  .eco-product-benefits,
  .eco-search-page__form {
    grid-template-columns: 1fr;
  }

  .eco-product-actions .eco-button:first-child,
  .eco-form-grid .span-2 {
    grid-column: auto;
  }

  .eco-search-page__form {
    max-width: 100%;
  }

  .eco-collection-toolbar {
    top: 68px;
    align-items: stretch;
  }

  .eco-collection-toolbar > .eco-filter-chips {
    display: none;
  }

  .eco-mobile-filter {
    display: inline-flex;
  }

  .eco-filter-drawer {
    width: 100%;
    max-height: min(82svh, 720px);
    overflow-y: auto;
  }

  .eco-modal {
    padding: 12px;
  }

  .eco-modal__dialog {
    width: 100%;
    max-height: calc(100svh - 24px);
  }

  .eco-quick-view__image {
    min-height: min(76vw, 360px);
  }

  .eco-cart-drawer,
  .eco-search-drawer,
  .eco-mobile-drawer {
    width: min(100%, 440px);
  }

  .eco-cart-line {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
  }

  .eco-cart-line img {
    width: 72px;
    height: 72px;
  }

  .eco-cart-line__row {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .eco-sticky-atc {
    right: 0;
    left: 0;
    max-width: 100%;
  }

  .eco-footer__top {
    gap: 0;
  }

  .eco-footer__brand {
    grid-column: auto;
  }

  .auth-main {
    width: min(calc(100% - 32px), 1600px);
    max-width: 100%;
    margin-inline: auto;
    padding-inline: 0;
  }

  .auth-panel,
  .email-control,
  .email-control input,
  .shop-button {
    max-width: 100%;
    min-width: 0;
  }
}

@media (max-width: 479px) {
  .eco-product-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .eco-product-card h3 {
    min-height: auto;
    font-size: 15px;
  }

  .eco-product-card__actions {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .eco-category-grid,
  .eco-purpose-grid,
  .eco-material-grid,
  .eco-process-grid,
  .eco-impact-grid,
  .eco-sdg-grid,
  .eco-logo-grid,
  .eco-values,
  .eco-purpose__visual {
    grid-template-columns: 1fr;
  }

  .eco-purpose__visual img:last-child {
    margin-top: 0;
  }

  .eco-header__inner {
    width: min(calc(100% - 20px), 1600px) !important;
    grid-template-columns: 44px minmax(0, 1fr) 120px;
    gap: 4px;
  }

  .eco-header__brand {
    width: min(170px, 100%);
  }

  .eco-announcement {
    grid-template-columns: 32px minmax(0, 1fr) 32px 32px;
  }

  .eco-announcement__control {
    width: 32px;
  }

  .eco-button-row,
  .eco-button-row .eco-button,
  .eco-newsletter .eco-button,
  .eco-cart-page__summary .eco-button {
    width: 100%;
  }

  .eco-product-benefits,
  .eco-form-grid {
    grid-template-columns: 1fr;
  }

  .eco-cart-line {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .eco-cart-line img {
    width: 64px;
    height: 64px;
  }

  .eco-cart-drawer__head,
  .eco-cart-drawer__body,
  .eco-cart-drawer__foot,
  .eco-search__body,
  .eco-drawer__body {
    padding-inline: 16px;
  }

  .eco-toast {
    right: 12px;
    bottom: 12px;
    left: 12px;
    max-width: none;
  }

  .eco-gallery-lightbox {
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    padding: 8px;
  }

  .eco-gallery-lightbox button {
    width: 42px;
    height: 42px;
  }

  .auth-panel h1 {
    font-size: clamp(26px, 9vw, 31px);
  }

  .subheading,
  .marketing-option,
  .terms-copy {
    font-size: 16px;
  }
}

@media (max-width: 339px) {
  .eco-header__inner {
    grid-template-columns: 40px minmax(0, 1fr) 108px;
  }

  .eco-icon-button {
    width: 36px;
    height: 44px;
    flex-basis: 36px;
  }

  .eco-header__brand {
    width: 132px;
  }

  .eco-brand-lockup__taglines strong {
    font-size: 7.5px;
  }

  .eco-announcement {
    grid-template-columns: 28px minmax(0, 1fr) 28px 28px;
  }

  .eco-announcement__control {
    width: 28px;
  }
}