/* Hagoma catalog pages, converted from the reference theme's assets/plp.css:
   banner title, toolbar with the product count and sort menu, the filter
   sidebar (a full-screen sheet below 768px), the product grid and infinite
   scrolling. Cards are in product-card.css. */

/* Banner. Its padding comes from Customizer > Shop > Page Header (defaults in inc/catalog.php). */
.page-header--shop {
  background: var(--hg-banner-bg);
  color: var(--hg-banner-text);
}
/* Kirki prints the catalog title font after this sheet, hence html body. */
html body .page-header--shop .page-header__title {
  margin: 0;
  color: inherit;
  font-family: var(--hg-font-heading);
  font-size: 23px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.page-header--shop .page-header__description {
  max-width: 720px;
  margin: 10px auto 0;
  color: rgb(255 255 255 / 0.8);
}
.page-header--shop .page-header__description a {
  color: inherit;
  text-decoration: underline;
}

/* Category description, below the products (inc/seo.php hg_seo_term_description()): the
   banner shows the name alone. */
.hg-term-description {
  clear: both;
  max-width: 760px;
  margin: 56px auto 0;
  padding-block-start: 28px;
  border-block-start: 1px solid var(--hg-line);
  color: var(--hg-muted);
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
  overflow-wrap: anywhere;
}
.hg-term-description .term-description > * { margin: 0; }
.hg-term-description .term-description > * + * { margin-block-start: 0.8em; }
.hg-term-description a {
  color: inherit;
  text-decoration: underline;
}

/* Page gutters: 20px sides, 95% - 30px from 768px. */
.ecomus-catalog-page #site-content {
  padding: 0 0 36px;
}
.ecomus-catalog-page .site-content-container {
  display: block;
  width: calc(100% - 40px);
  max-width: none;
  padding-inline: 0;
}

/* A landing category (hg_catalog_is_landing()) shows its subcategory tiles alone. Its WPCode
   snippet hides the toolbar and the grid from a script; this hides them before that runs, and
   with scripts off. */
.hg-catalog-landing .catalog-toolbar,
.hg-catalog-landing #ecomus-shop-content {
  display: none !important;
}

/* Toolbar: filter | count, sort */
.catalog-toolbar {
  padding: 0 0 20px;
}
.catalog-toolbar__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.catalog-toolbar__toolbar > .catalog-toolbar__item {
  flex: none;
  height: auto;
  padding: 0;
}
.catalog-toolbar__toolbar > .hg-catalog-count {
  margin: 0 0 0 auto;
  padding-right: 15px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-transform: capitalize;
  white-space: nowrap;
}

.catalog-toolbar .catalog-toolbar__filter-button {
  display: inline-flex;
  align-items: center;
  gap: 0;
  min-height: 0;
  padding: 10px;
  border: 1px solid currentColor;
  border-radius: 10px;
  background: none;
  color: var(--hg-text);
  font-family: var(--hg-font-heading);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: normal;
  text-transform: uppercase;
  white-space: nowrap;
}
.catalog-toolbar .catalog-toolbar__filter-button:hover {
  border-color: currentColor;
  background: none;
  color: var(--hg-text);
}
/* Funnel icon of the reference toolbar in place of the Ecomus lines icon. */
.catalog-toolbar__filter-button .ecomus-svg-icon {
  display: none;
}
.catalog-toolbar__filter-button::before {
  content: "";
  flex: none;
  width: 13px;
  height: 14px;
  margin: 0 4px 1px 0;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 14'%3E%3Cpath d='M.75 1.25h11.5L7.9 6.6v5.6l-2.8 1.3V6.6z' fill='none' stroke='%23000' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 14'%3E%3Cpath d='M.75 1.25h11.5L7.9 6.6v5.6l-2.8 1.3V6.6z' fill='none' stroke='%23000' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Sort: button with a lines icon and chevron, menu below with round markers
   (woocommerce/loop/orderby.php). It replaces the Ecomus mobile sort sheet. */
.catalog-toolbar .catalog-toolbar__orderby-button {
  display: none;
}
.catalog-toolbar__right .woocommerce-ordering.hg-sort-form {
  display: block;
}
.hg-sort {
  position: relative;
}
.hg-sort__summary {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 37px;
  padding: 10px;
  border: 1px solid currentColor;
  border-radius: 10px;
  color: var(--hg-text);
  font-family: var(--hg-font-heading);
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
  list-style: none;
  cursor: pointer;
}
.hg-sort__summary::-webkit-details-marker {
  display: none;
}
.hg-sort__icon {
  flex: none;
  width: 16px;
  height: 10px;
  margin: 0 9px 1px 0;
}
.hg-sort__label {
  padding-inline: 10px;
}
.hg-sort__chev {
  flex: none;
  width: 16px;
  height: 7px;
  margin: 0 5px 1px 4px;
  transition: transform 0.2s;
}
.hg-sort[open] .hg-sort__chev {
  transform: rotate(180deg);
}
.hg-sort__list {
  position: absolute;
  z-index: 20;
  top: 100%;
  right: 0;
  width: 230px;
  background: var(--hg-bg);
  color: var(--hg-text);
  box-shadow: 0 0 4px rgb(0 0 0 / 0.18);
}
.hg-sort .hg-sort__option {
  position: relative;
  display: block;
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 8px 18px;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-family: var(--hg-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  text-align: left;
  text-transform: capitalize;
  cursor: pointer;
}
.hg-sort .hg-sort__option:hover,
.hg-sort .hg-sort__option:focus {
  background: none;
  color: inherit;
}
/* No Ecomus shine sweep on these buttons. */
.hg-sort .hg-sort__option::after,
.hg-filter .hg-filter__close::after,
.hg-filter .hg-filter__more::after,
.hg-filter .products-filter__button .button::after {
  content: none;
}
.hg-sort .hg-sort__option:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}
.hg-sort__dot {
  position: absolute;
  top: 50%;
  left: 18px;
  width: 16px;
  height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  background: #cfcbcb;
  transition: background-color 0.2s;
}
.hg-sort__option:hover .hg-sort__dot {
  background: #a9a5a5;
}
.hg-sort__option[aria-current] .hg-sort__dot {
  background: currentColor;
}
.hg-sort__name {
  display: block;
  padding-left: 25px;
}

/* Our count replaces the duplicate one Ecomus shows beside active filters. */
.catalog-toolbar__active-filters .catalog-toolbar__result-count {
  display: none;
}

/* Filter panel (template-parts/panels/filter-sidebar.php): a sidebar beside the
   grid from 768px, a full-screen sheet below. */
.hg-filter__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 30px 20px 10px;
}
.hg-filter__title {
  margin: 0;
  color: inherit;
  font-family: var(--hg-font-heading);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: normal;
  text-transform: uppercase;
}
.hg-filter .hg-filter__close {
  position: static;
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--hg-text);
  color: var(--hg-bg);
  cursor: pointer;
}
.hg-filter__close svg {
  width: 14.6px;
  height: 14.6px;
}
.hg-filter .products-filter-widget,
.hg-filter .products-filter-widget .products-loader {
  margin: 0;
}

/* Filter groups: open, separated by thin rules. */
.hg-filter .products-filter__filter {
  margin: 0 0 15px;
  padding: 0 0 15px;
  border-bottom: 1px solid rgb(0 0 0 / 0.1);
}
.hg-filter .products-filter__filter:last-of-type {
  padding-bottom: 0;
  border-bottom: 0;
}
/* The groups stay open like the reference facets, so their names do not toggle. */
.hg-filter .products-filter-widget .products-filter__filter .products-filter__filter-name {
  display: flex;
  gap: 8px;
  margin: 0 0 15px;
  padding: 0;
  color: inherit;
  font-family: var(--hg-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: normal;
  text-transform: uppercase;
  pointer-events: none;
}
.hg-filter .products-filter-widget .products-filter__filter .products-filter__filter-name::after {
  display: none;
}
.hg-filter .products-filter-widget .has-collapse .products-filter__filter.ecomus-active .products-filter__filter-control {
  display: block;
}
.hg-filter .products-filter-widget .products-filter__filter-control {
  padding: 0;
}

/* Options: category list and availability checkboxes. */
.hg-filter .products-filter-widget .products-filter__options > li.products-filter__option {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 10px;
  padding: 0;
  color: inherit;
  font-size: 14px;
  line-height: 1.6;
}
.hg-filter .products-filter-widget .products-filter__options > li.products-filter__option:last-child {
  margin-bottom: 0;
}
.hg-filter .products-filter-widget .products-filter__option-name {
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  text-transform: capitalize;
  overflow-wrap: anywhere;
}
.hg-filter .products-filter-widget .filter-list .products-filter__option-name:hover,
.hg-filter .products-filter-widget .filter-list .products-filter__option-name:hover + .products-filter__count {
  color: inherit;
  text-decoration: underline;
}
.hg-filter .products-filter-widget .filter-list .selected > .products-filter__option-name,
.hg-filter .products-filter-widget .filter-list .selected > .products-filter__count {
  color: inherit;
  font-weight: 700;
}
.hg-filter .products-filter-widget .products-filter__count {
  flex: none;
  min-width: 35px;
  margin: 0;
  color: rgb(0 0 0 / 0.5);
  font-size: 14px;
  font-weight: 400;
  text-align: end;
}
.hg-filter .products-filter-widget .products-filter__count::before,
.hg-filter .products-filter-widget .products-filter__count::after {
  content: none;
}
/* An Availability option no product matches (hg_filter_status_count_markup()),
   dimmed and inert like the reference's disabled value. */
.hg-filter .products-filter-widget .hg-filter__option--empty {
  opacity: 0.4;
  cursor: not-allowed;
}
.hg-filter .products-filter-widget .hg-filter__option--empty > * {
  pointer-events: none;
}
.hg-filter .products-filter-widget .products-filter--checkboxes .products-filter__option-name {
  position: relative;
  min-height: 22.4px;
  padding-left: 25px;
}
.hg-filter .products-filter-widget .products-filter--checkboxes .products-filter__option-name::before {
  top: 3px;
  box-sizing: border-box;
  width: 18px;
  height: 18px;
  border: 1px solid #d2cfd5;
  border-radius: 2px;
  background: #fff;
}
.hg-filter .products-filter-widget .products-filter--checkboxes .products-filter__option-name:hover::before {
  border-color: #d2cfd5;
}
.hg-filter .products-filter-widget .products-filter--checkboxes .selected > .products-filter__option-name {
  color: inherit;
}
.hg-filter .products-filter-widget .products-filter--checkboxes .selected > .products-filter__option-name::before {
  border-color: var(--hg-text);
  background: var(--hg-text);
}
.hg-filter .products-filter-widget .products-filter--checkboxes .selected > .products-filter__option-name::after {
  top: 6px;
  left: 6px;
  box-sizing: border-box;
  width: 6px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
}

/* Categories group (hg_filter_category_group()): five options, then "Show more"
   (assets/js/catalog.js), like the reference facets. */
.hg-filter .products-filter-widget .hg-filter__options--more > li.products-filter__option:last-child {
  margin-bottom: 10px;
}
.hg-filter .products-filter-widget .products-filter__options > li.hg-filter__option--extra {
  display: none;
}
.hg-filter .products-filter-widget .hg-filter__options--open > li.hg-filter__option--extra {
  display: flex;
}
.hg-filter .hg-filter__more {
  display: inline-flex;
  align-items: center;
  min-height: 22.4px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}
.hg-filter .hg-filter__more:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.hg-filter__more svg {
  flex: none;
  width: 11px;
  height: 12px;
  margin-inline-end: 4px;
  fill: currentColor;
}
.hg-filter__more[aria-expanded="true"] .hg-filter__more-v {
  display: none;
}
.hg-filter__more:hover .hg-filter__more-label {
  text-decoration: underline;
}

/* Price: 3px track with round handles, From / To fields
   (woocommerce/content-widget-price-filter.php). */
.hg-filter .widget_price_filter {
  margin: 0;
}
.hg-filter .widget_price_filter .widgettitle {
  display: none;
}
.hg-filter .widget_price_filter .price_slider_wrapper .price_slider {
  height: 3px;
  margin: 20px 3.5%;
  border: 0;
  border-radius: 10px;
  background: rgb(0 0 0 / 0.3);
}
.hg-filter .widget_price_filter .ui-slider .ui-slider-range {
  border-radius: 10px;
  background: var(--hg-text);
}
.hg-filter .widget_price_filter .ui-slider .ui-slider-handle,
.hg-filter .widget_price_filter .ui-slider .ui-slider-handle:last-child {
  top: -6px;
  box-sizing: border-box;
  width: 15px;
  height: 15px;
  margin: 0 0 0 -7.5px;
  border: 3px solid var(--hg-text);
  border-radius: 20px;
  background: #fff;
}
.hg-filter .widget_price_filter .ui-slider .ui-slider-handle:hover,
.hg-filter .widget_price_filter .ui-slider .ui-slider-handle.ui-state-active {
  background: #fff;
}
.hg-filter .widget_price_filter .hg-price {
  display: flex;
  justify-content: space-between;
  line-height: normal;
  text-align: left;
}
.hg-price__col {
  flex: 0 0 49%;
  min-width: 0;
  padding-top: 2px;
}
.hg-filter .hg-price__label {
  display: block;
  padding-bottom: 4px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  text-transform: uppercase;
}
.hg-price__field {
  display: flex;
  align-items: center;
  padding: 5px;
  border: 1px solid rgb(0 0 0 / 0.3);
  border-radius: 6px;
}
.hg-price__field:focus-within {
  border-color: currentColor;
}
.hg-price__cur {
  flex: none;
  margin-right: 5px;
  font-size: 14px;
  line-height: 1.6;
}
.hg-filter .hg-price__field input {
  flex: 1;
  width: 100%;
  min-width: 0;
  height: 22.4px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: inherit;
  font: inherit;
  font-size: 13.33px;
}
.hg-filter .hg-price__field input:focus {
  outline: 0;
}

/* Colour dropdown: a field like the price inputs. */
.hg-filter .products-filter-widget .select2-container .select2-selection--single {
  height: 34.4px;
  border: 1px solid rgb(0 0 0 / 0.3);
  border-radius: 6px;
  background: none;
}

/* Apply and Clear: the sheet's footer (hidden beside the grid). Ecomus hides
   them on its instant filter; Apply closes the sheet (assets/js/catalog.js). */
.hg-filter .hg-filter__body .products-filter__button {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.hg-filter .hg-filter__body .instant-filter .products-filter__button .button {
  display: inline-flex;
}
.hg-filter .hg-filter__body .products-filter__button .button {
  align-items: center;
  justify-content: center;
  flex: 0 1 48%;
  min-width: 0;
  min-height: 44px;
  margin: 0;
  padding: 8px 15px;
  border: 1px solid var(--hg-accent);
  border-radius: 4px;
  background: var(--hg-accent);
  color: #fff;
  font-family: var(--hg-font-heading);
  font-size: 13px;
  font-weight: 800;
  line-height: 13px;
  letter-spacing: 0;
  text-transform: uppercase;
}
.hg-filter .hg-filter__body .products-filter__button .filter-button {
  order: 1;
}
.hg-filter .hg-filter__body .products-filter__button .reset-button {
  order: 2;
  border-color: currentColor;
  background: transparent;
  color: var(--hg-text);
}

/* Grid: 2 columns, 3 from 768px, 4 from 992px. */
#ecomus-shop-content ul.products {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 14px;
  margin: 0 0 20px;
}
#ecomus-shop-content ul.products::before,
#ecomus-shop-content ul.products::after {
  content: none;
}
#ecomus-shop-content ul.products > li.product {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Catalog cards: centred, the name on one line. */
#ecomus-shop-content ul.products li.product .product-summary {
  text-align: center;
}
#ecomus-shop-content ul.products li.product .price {
  justify-content: center;
}
#ecomus-shop-content ul.products li.product .woocommerce-loop-product__title a {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Empty state when filters match nothing (inc/catalog.php), as the reference
   .plp-empty; the empty grid beside it waits for the next filter's result. */
.hg-plp-empty {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 64px 16px;
  text-align: center;
}
.hg-plp-empty__title {
  margin: 0;
  font-family: var(--hg-font-heading);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}
.hg-plp-empty__text {
  margin: 0;
}
#ecomus-shop-content ul.products:not(:has(> li)),
.woocommerce-pagination[hidden] {
  display: none;
}
/* The reference button is shorter below 750px. */
@media (max-width: 749px) {
  .hg-plp-empty .hg-btn {
    min-height: 39px;
    padding: 8px 15px;
  }
}

/* Infinite scrolling: the next-page link is an invisible sentinel (shown on
   keyboard focus) and a spinner fills the space while the page loads. */
.woocommerce-pagination--infinite {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 1px;
  margin: 0;
}
.woocommerce-pagination--infinite .woocommerce-pagination-button:not(:focus-visible) {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}
.woocommerce-pagination--infinite .woocommerce-pagination-button:focus-visible {
  min-height: 44px;
  margin: 0 0 20px;
  padding: 8px 24px;
  border: 1px solid currentColor;
}
.woocommerce-pagination--infinite:has(.loading)::after {
  content: "";
  width: 50px;
  height: 50px;
  margin: 100px 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Ccircle cx='25' cy='25' r='17.5' fill='none' stroke='%23d9e2ed' stroke-width='5' stroke-dasharray='82.5 27.5'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: hg-spin 1s linear infinite;
}
@keyframes hg-spin {
  to { transform: rotate(360deg); }
}

/* Numbered pages, if the pagination type is changed in the Customizer. */
.woocommerce-pagination ul.page-numbers {
  gap: 6px;
  margin-top: 40px;
}
.woocommerce-pagination ul.page-numbers .page-numbers {
  width: auto;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border: 1px solid rgb(0 0 0 / 0.15);
  border-radius: 10px;
  background: transparent;
  box-shadow: none;
  color: var(--hg-text);
  font-weight: 400;
}
.woocommerce-pagination ul.page-numbers .page-numbers.current {
  border-color: var(--hg-text);
  background: var(--hg-text);
  color: var(--hg-bg);
}
.woocommerce-pagination ul.page-numbers .page-numbers.dots {
  min-width: 24px;
  border-color: transparent;
}

/* Below 768px: full-bleed sticky toolbar and the filter sheet. */
@media (max-width: 767px) {
  .catalog-toolbar {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0 -20px 15px;
    padding: 15px;
    background: var(--hg-bg);
    color: var(--hg-text);
    box-shadow: 0 2px 5px rgb(0 0 0 / 0.15);
  }
  /* One row whatever the fonts: a four-digit count ("2,982 Products") leaves the
     375px row a few pixels short once Inter replaces the fallback, which used to
     drop the sort to a second row and push the grid down after first paint. The
     count gives way instead: it breaks onto two lines inside the row (two 14px
     lines are shorter than the 37px buttons, so the row keeps its height), with
     10px kept clear of the filter button and the 15px before the sort, on the
     inline sides so RTL mirrors it. */
  .catalog-toolbar__toolbar {
    flex-wrap: nowrap;
  }
  .catalog-toolbar__toolbar > .hg-catalog-count {
    display: block;
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    margin-inline-start: auto;
    padding: 0;
    padding-inline: 10px 15px;
    white-space: normal;
    text-align: end;
  }
  .hg-plp__main {
    padding: 17px 0 40px;
  }

  .hg-filter .panel__backdrop {
    display: none;
  }
  .hg-filter .panel__container {
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    background: var(--hg-bg);
    color: var(--hg-text);
    box-shadow: none;
    transform: translateY(120%);
    transition: transform 0.5s ease;
  }
  .hg-filter.offscreen-panel--open .panel__container {
    transform: none;
  }
  /* The body scrolls; the widget form fills it so Apply and Clear sit at the bottom. */
  .hg-filter .panel__content.hg-filter__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    padding: 20px 30px 0 20px;
    border-top: 1px solid rgb(0 0 0 / 0.1);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .hg-filter .products-filter-widget,
  .hg-filter .products-filter-widget form {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
  }
  .hg-filter .products-filter-widget .products-filter__filters {
    flex: 1 0 auto;
  }
  .hg-filter .hg-filter__body .products-filter__button {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin: 20px -30px 0 -20px;
    padding: 20px;
    border-top: 2px solid rgb(0 0 0 / 0.3);
    background: var(--hg-bg);
  }
}

/* From 768px: the filter panel is a sidebar beside the grid, with dividers. */
@media (min-width: 768px) {
  .ecomus-catalog-page #site-content {
    padding: 36px 0;
  }
  .ecomus-catalog-page .site-content-container {
    width: calc(95% - 30px);
  }
  .catalog-toolbar__toolbar > .catalog-toolbar__right {
    margin-left: 50px;
  }
  .hg-catalog-count {
    font-size: 16px;
  }
  .catalog-toolbar__filter-button::before {
    margin-right: 6px;
  }

  .hg-plp {
    display: grid;
    grid-template-columns: 23% minmax(0, 1fr);
    align-items: start;
  }
  .hg-plp__main {
    min-width: 0;
    padding: 30px 0 80px 30px;
    border-top: 1px solid rgb(0 0 0 / 0.1);
  }
  /* Two classes so the wider sidebar share from 1441px (below) cannot win and
     squeeze the grid into the hidden sidebar's column. */
  .hg-plp.hg-plp--collapsed {
    grid-template-columns: minmax(0, 1fr);
  }
  .hg-plp--collapsed .hg-plp__main {
    padding-inline: 0;
  }
  /* !important: jQuery leaves display:none inline after the sheet closes on a narrow screen. */
  .hg-plp > .hg-filter {
    position: static;
    z-index: auto;
    display: block !important;
    width: auto;
    height: auto;
  }
  .hg-plp.hg-plp--collapsed > .hg-filter {
    display: none !important;
  }
  .hg-plp > .hg-filter .panel__backdrop,
  .hg-plp > .hg-filter .hg-filter__head,
  .hg-plp > .hg-filter .hg-filter__body .products-filter__button {
    display: none;
  }
  .hg-plp > .hg-filter .panel__container {
    position: static;
    display: block;
    width: auto;
    max-width: none;
    height: auto;
    background: none;
    box-shadow: none;
    transform: none;
    transition: none;
  }
  .hg-plp > .hg-filter .panel__content {
    padding: 20px 30px 0 0;
    border-top: 1px solid rgb(0 0 0 / 0.1);
    border-right: 1px solid rgb(0 0 0 / 0.1);
    overflow: visible;
  }

  #ecomus-shop-content ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px 14px;
    margin-bottom: 40px;
  }
}
@media (min-width: 750px) {
  html body .page-header--shop .page-header__title { font-size: 34.5px; }
}
@media (min-width: 992px) {
  #ecomus-shop-content ul.products {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1200px) {
  html body .page-header--shop .page-header__title { font-size: 39px; }
}
@media (min-width: 1441px) {
  .hg-plp {
    grid-template-columns: 20% minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hg-filter .panel__container,
  .hg-sort__chev,
  .hg-sort__dot {
    transition: none;
  }
  .woocommerce-pagination--infinite:has(.loading)::after {
    animation-duration: 3s;
  }
}