/* Home only. The native header, menu, search and cart remain the platform's controls. */
body.template-home { --ms-motion-header-height: 135px; }
body.template-home .head-main {
  --ms-motion-header-ink: #304737;
  --header-foreground: var(--ms-motion-header-ink);
  position: sticky !important;
  top: 0;
  z-index: 1040;
  color: var(--ms-motion-header-ink);
  background: transparent !important;
  border-bottom-color: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.template-home .head-main[data-ms-motion-header="decants"] { --ms-motion-header-ink: #fffdf5; }
body.template-home .head-main[data-ms-motion-header="outside"] {
  --ms-motion-header-ink: #2c302b;
  background: #f8f7f3 !important;
  border-bottom-color: #daddd2;
}
body.template-home .head-main .ms-header-brand img { height: auto; aspect-ratio: 458 / 56; object-fit: contain; }
body.template-home .head-main[data-ms-motion-header="decants"] .ms-header-brand img { filter: brightness(0) invert(1); }
body.template-home .head-main .utilities-item,
body.template-home .head-main .nav-desktop > .nav-desktop-list > .nav-item > .nav-list-link,
body.template-home .head-main .nav-desktop > .nav-desktop-list > .nav-item > .nav-item-container > .nav-list-link {
  color: var(--ms-motion-header-ink);
}
/* Panels have their own readable paper surface, including while the hero is dark. */
body.template-home .head-main .desktop-dropdown,
body.template-home .head-main .ms-products-menu,
body.template-home #nav-hamburger,
body.template-home #nav-search,
body.template-home .head-main .search-suggestions {
  --header-foreground: #2c302b;
  --header-background: #f8f7f3;
  color: #2c302b;
  background-color: #f8f7f3;
}
body.template-home .ms-home-v2 { margin-top: calc(-1 * var(--ms-motion-header-height)); }
.ms-home-v2 .ms-motion-hero {
  --ms-motion-ink: #304737;
  --ms-motion-surface: #dfe2d5;
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--ms-motion-ink);
  background: var(--ms-motion-surface);
}
.ms-motion-hero[data-ms-motion-active="decants"] { --ms-motion-ink: #fffdf5; --ms-motion-surface: #183a29; }
.ms-motion-hero__stage { position: relative; display: grid; aspect-ratio: 16 / 9; overflow: hidden; }
.ms-motion-hero__slide {
  grid-area: 1 / 1;
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 700ms ease, visibility 0s 700ms;
}
.ms-motion-hero__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; z-index: 1; transition-delay: 0s; }
.ms-motion-hero__poster,
.ms-motion-hero__poster > img,
.ms-motion-hero__video {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: contain;
}
.ms-motion-hero__poster { position: absolute; inset: 0; }
.ms-motion-hero__video { display: block !important; position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 240ms ease; }
.ms-motion-hero__slide.is-playing .ms-motion-hero__video { opacity: 1; }
.ms-motion-hero__copy { position: absolute; z-index: 2; inset: auto 20px 2.5%; text-align: center; }
.ms-home-v2 .ms-motion-hero__copy h1 { margin: 0 0 10px; color: #304737; font: 400 clamp(18px, 1.65vw, 31px)/1.3 'Gelasio', Georgia, serif; letter-spacing: -.025em; }
.ms-home-v2 .ms-motion-hero__cta { display: inline-flex; gap: 34px; align-items: center; justify-content: space-between; min-height: 44px; padding: 12px 25px; border: 1px solid #304737; border-radius: 50px; background: #304737; color: #fffdf5; font: 400 13px/1.3 'DM Sans', sans-serif; }
.ms-motion-hero__cta > span { font-size: 18px; }
.ms-motion-hero__promo-link { position: absolute; inset: 0; z-index: 2; }
.ms-motion-hero__controls { position: absolute; inset: auto 94px 18px 30px; z-index: 3; display: flex; justify-content: space-between; align-items: center; gap: 18px; pointer-events: none; }
.ms-motion-hero__controls[hidden] { display: none; }
.ms-motion-hero__tabs,
.ms-motion-hero__navigation { display: flex; align-items: center; gap: 2px; padding: 1px 4px; border: 1px solid currentColor; border-radius: 30px; background: #f7f5ed22; pointer-events: auto; }
.ms-motion-hero__controls button { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 44px; min-height: 44px; margin: 0; padding: 8px; border: 0; border-radius: 24px; color: inherit; background: transparent; font: 400 11px/1 'DM Sans', sans-serif; cursor: pointer; }
.ms-motion-hero__tabs button[aria-selected="true"] { color: var(--ms-motion-surface); background: var(--ms-motion-ink); }
.ms-motion-hero__controls svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.ms-motion-hero__controls .ms-motion-hero__pause { padding-inline: 10px; }
.ms-motion-hero__controls .ms-motion-hero__play-icon,
.ms-motion-hero__pause[aria-pressed="true"] .ms-motion-hero__pause-icon { display: none; }
.ms-motion-hero__pause[aria-pressed="true"] .ms-motion-hero__play-icon { display: block; }
.ms-home-v2 .ms-motion-hero :focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.ms-home-v2 .ms-motion-hero__promo-link:focus-visible { outline-offset: -8px; }
.ms-motion-hero__sr { 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; white-space: nowrap !important; border: 0 !important; }
@media (max-width: 767px) {
  body.template-home { --ms-motion-header-height: 66px; }
  .ms-motion-hero__stage { aspect-ratio: 9 / 16; }
  .ms-motion-hero__copy { inset: auto 22px 16px; }
  .ms-home-v2 .ms-motion-hero__copy h1 { max-width: none; margin: 0 auto 10px; font-size: clamp(14px, 4.1vw, 16px); line-height: 1.3; }
  .ms-home-v2 .ms-motion-hero__cta { min-height: 44px; gap: 8px; padding: 12px; font-size: 11px; }
  .ms-motion-hero__cta > span { flex: 0 0 16px; font-size: 16px; }
  .ms-motion-hero__controls { inset: auto 12px 16px; gap: 10px; }
  .ms-motion-hero__tabs { gap: 0; }
  .ms-motion-hero__tabs button { min-width: 32px; min-height: 44px; }
  .ms-motion-hero__navigation [data-ms-motion-prev],
  .ms-motion-hero__navigation [data-ms-motion-next] { display: none; }
  .ms-motion-hero__pause-label { display: none; }
  .ms-motion-hero__controls .ms-motion-hero__pause { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-motion-hero__slide, .ms-motion-hero__video { transition: none; }
}

.ms-motion-hero__controls button[hidden] { display: none; }