/* Hugo-specific glue so Horizon CSS works without Shopify web-component JS. */

#header-component {
  --top-row-height: 72px;
  --header-height: 120px;
  --header-logo-image-width: 264px;
  --header-logo-image-height: 36px;
  --header-logo-image-width-mobile: 205px;
  --header-logo-image-height-mobile: 28px;
  --color-submenu: #ffffff;
  position: relative;
  overflow: visible;
}

.announcement-bar__text a {
  color: inherit;
  text-decoration: none;
  letter-spacing: inherit;
}

@media screen and (max-width: 749px) {
  #header-component .header-menu {
    display: none;
  }

  #header-component .header__drawer {
    display: flex;
    grid-area: leftA;
  }

  #header-component .search-action {
    grid-area: rightA;
    display: flex;
    justify-content: center;
  }

  #header-component header-actions {
    grid-area: rightB;
    display: flex;
    justify-content: center;
  }

  #header-component {
    --header-height: var(--top-row-height);
  }
}

@media screen and (min-width: 750px) {
  #header-component .header__drawer {
    display: none;
  }

  #header-component .header__row--top .header__columns {
    grid-template-columns: minmax(0, 1fr) max-content;
    grid-template-areas: 'left right';
  }

  /* Live production fills the white bar edge-to-edge; Horizon page-width
     would inset the tabs. */
  #header-component .header__row--bottom {
    grid-template-columns: minmax(0, 1fr);
  }

  #header-component .header__row--bottom > * {
    grid-column: 1 / -1;
    padding-inline: 0;
  }

  #header-component .header__row--bottom .header__columns {
    grid-template-columns: 1fr;
    grid-template-areas: 'center';
    --header-left: 0px;
    --header-center: minmax(0, 1fr);
    --header-right: 0px;
    grid-gap: 0;
    padding-inline: 0;
  }

  #header-component .header__row--bottom .menu-list__link-title {
    padding-inline: 0;
  }

  #header-component .header__row--bottom :is(.header__column, .header-menu, .header-menu__inner, .menu-list) {
    width: 100%;
  }

  #header-component .header__row--bottom .header-menu {
    display: flex;
    width: 100%;
  }

  #header-component .header__row--bottom .header-menu .menu-list__list {
    justify-content: stretch;
    flex-wrap: nowrap;
    overflow: visible;
    width: 100%;
    gap: 0;
    column-gap: 0;
    margin-inline: 0;
  }

  #header-component .header__row--bottom {
    overflow: visible;
  }
}

.header-menu .menu-list__list {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  gap: var(--menu-horizontal-gap, var(--gap-xl));
  margin: 0;
  padding: 0;
  list-style: none;
}

.header-drawer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
  padding: var(--padding-lg);
  list-style: none;
  margin: 0;
}

.header-drawer-nav a {
  color: inherit;
  text-decoration: none;
  font-size: var(--menu-font-xl--size);
  padding-block: var(--padding-xs);
}

.menu-drawer {
  display: block;
  position: fixed;
  inset: var(--header-group-height, 60px) auto 0 0;
  transform: none;
  visibility: hidden;
  height: auto;
  max-height: calc(100dvh - var(--header-group-height, 60px));
  width: min(100%, 500px);
  background: var(--color-background);
  color: var(--color-foreground);
  z-index: var(--layer-overlay);
  overflow: auto;
  box-shadow: var(--shadow-popover);
}

.menu-drawer-container[open] .menu-drawer {
  visibility: visible;
  transform: none;
  display: block;
}

.menu-drawer-container[open] .header__icon--menu .header-drawer-icon--close {
  display: flex;
}

.menu-drawer-container[open] .header__icon--menu .header-drawer-icon--open {
  display: none;
}

.header-section {
  position: relative;
  overflow: visible;
}

search-button.search-action {
  display: flex;
  align-items: center;
}

search-button.search-action .header-actions__action {
  cursor: pointer;
}

cart-icon {
  display: contents;
}

add-to-cart-component {
  display: contents;
}

add-to-cart-component.product-card__quick-add {
  display: block;
}

header-component.header {
  display: block;
  contain: none;
}

product-component.product-information__grid {
  display: grid;
}

header-actions {
  display: flex;
}

media-gallery {
  display: block;
  width: 100%;
}

media-gallery.media-gallery--grid .media-gallery__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--image-gap, 4px);
}

@media screen and (min-width: 750px) {
  media-gallery.media-gallery--grid.media-gallery--two-column .media-gallery__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

product-card {
  display: block;
  position: relative;
}

product-recommendations {
  display: block;
}

product-price {
  display: block;
}

variant-picker {
  display: block;
  width: 100%;
}

quantity-selector-component.quantity-selector {
  display: flex;
}

rte-formatter,
announcement-bar-component {
  display: block;
}

results-list,
collection-component,
blog-posts-list,
accordion-custom {
  display: block;
}

sorting-filter-component,
facets-form-component,
facet-status-component,
facet-remove-component,
facet-clear-component,
facet-inputs-component,
price-facet-component {
  display: block;
}

.product-grid__item[hidden],
.product-grid__item.is-hidden,
.product-grid__item.is-filtered-out {
  display: none;
}

.hugo-collection-scroller {
  display: flex;
  gap: var(--resource-list-column-gap, 8px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block-end: var(--padding-sm);
}

.hugo-collection-scroller .resource-list__item {
  flex: 0 0 calc((100% - 7 * 8px) / 8);
  min-width: 8rem;
  scroll-snap-align: start;
}

@media screen and (max-width: 749px) {
  .hugo-collection-scroller .resource-list__item {
    flex-basis: 60cqw;
  }
}

.header-menu .menu-list__list {
  overflow: visible;
}

header-menu {
  display: block;
  height: 100%;
}

#header-component .header-menu .menu-list__submenu {
  content-visibility: visible;
}

#header-component .menu-list__submenu-inner {
  transform: none;
  opacity: 1;
  background-color: #ffffff;
}

#header-component .menu-list__list-item:is(:hover, :focus-within):has(.menu-list__submenu) > .menu-list__submenu,
#header-component .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu {
  top: 100%;
  clip-path: none;
  visibility: visible;
  content-visibility: visible;
  --submenu-content-opacity: 1;
  --color-background: #ffffff;
  --color-foreground: #111111;
  --color-foreground-rgb: 17 17 17;
  background-color: #ffffff;
  color: #111111;
  z-index: calc(var(--layer-header-menu) + 2);
}

#header-component .menu-list__list-item:is(:hover, :focus-within):has(.menu-list__submenu) > .menu-list__submenu .menu-list__submenu-inner,
#header-component .menu-list__list-item:has([aria-expanded='true']) > .menu-list__submenu .menu-list__submenu-inner {
  transform: none;
  opacity: 1;
}

#header-component .menu-list__disclosure {
  pointer-events: none;
  opacity: 0;
}

#header-component .menu-list__disclosure:focus-visible {
  pointer-events: auto;
  opacity: 1;
}

.menu-drawer__submenu {
  list-style: none;
  margin: 0;
  padding-inline-start: var(--padding-lg);
}

.card-gallery img,
.collection-card img,
.image-block img,
.blog-post-card__image-container img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Header height lives on body so the first-section hero can subtract it
   (Horizon JS writes this on :root; #header-group inline vars do not inherit into main). */
body {
  --header-group-height: 168px;
}

@media screen and (max-width: 749px) {
  body {
    --header-group-height: 118px;
  }
}

.hero-wrapper:first-child {
  --hero-height-offset: var(--header-group-height);
}

@media screen and (max-width: 749px) {
  .section.section--full-width > .layout-panel-flex {
    flex-direction: column;
  }

  .section.section--full-width .image-block {
    width: 100% !important;
  }
}

.logo-block__image {
  height: 48px;
  width: auto;
}

.page-content {
  width: 100%;
  max-width: var(--normal-content-width, 42rem);
}

.facets__remove {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-2xs);
  border: 1px solid rgb(var(--color-foreground-rgb) / var(--opacity-10-25));
  border-radius: 100px;
  padding: 0.25rem 0.75rem;
  background: transparent;
  cursor: pointer;
}

a.button {
  text-decoration: none;
}

a.button-secondary,
.color-custom-footer a.button {
  background-color: var(--color-background);
  color: var(--color-foreground);
  box-shadow: inset 0 0 0 1px currentcolor;
}

.color-custom-footer a.button-secondary {
  background-color: transparent;
  color: var(--color-foreground);
}