/* Cart drawer, mobile menu drawer and mobile dock, laid out like the guardrail
   Shopify theme. Ecomus still positions, opens and slides the cart and menu panels.
   The header search panel is styled in search-panel.css. */

/* Drawer frame */
.hg-cart-panel .panel__backdrop,
.hg-mnav-panel .panel__backdrop {
  background-color: rgb(0 0 0 / 0.5);
}
.hg-cart-panel .panel__container,
.hg-mnav-panel .panel__container {
  display: flex;
  flex-direction: column;
  box-shadow: none;
  line-height: 1.6;
  transition: transform 0.35s ease;
}
/* Ecomus pins its close button to a corner; the drawer heads lay it out instead. */
.hg-cart-panel .panel__button-close,
.hg-mnav-panel .panel__button-close {
  position: static;
  color: inherit;
}
@media (prefers-reduced-motion: reduce) {
  .hg-cart-panel .panel__container,
  .hg-mnav-panel .panel__container {
    transition: none;
  }
}

/* Cart drawer */
.cart-panel .panel__container.hg-cart {
  --hg-cart-line: #eee;
  --hg-cart-muted: rgb(0 0 0 / 0.62);
  width: 100%;
  max-width: none;
  background: #fff;
  color: #111;
  font-size: 14px;
}
@media (min-width: 750px) {
  .cart-panel .panel__container.hg-cart {
    width: 364px;
  }
}

.hg-cart__head {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--hg-cart-line);
}
.hg-cart__title {
  margin: 0;
  /* Keeps the title beside the back button when that shows. */
  margin-inline-end: auto;
  color: inherit;
  font-family: var(--hg-font-heading);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}
/* Ecomus's button shine (button::after at left: 150%, animated on hover) ran across the panel
   from the close button and counted as a layout shift of about 0.9 when the drawer closed. */
.hg-cart__close::after {
  content: none;
}

/* Status line for discount codes; empty, it takes no space but stays announced. */
.hg-cart__status {
  flex: none;
  margin: 0;
  padding: 8px 18px 0;
  font-size: 13px;
}
.hg-cart__status:empty {
  padding: 0;
}
.hg-cart__status[data-tone="error"] {
  color: var(--hg-accent-text);
}

/* As on the reference, the footer follows the lines and both scroll under the head. */
.cart-panel .hg-cart__content {
  flex: 1;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.hg-cart .widget_shopping_cart_content {
  display: block;
  height: auto;
}
.hg-cart__body {
  padding: 8px 18px 18px;
}

.hg-cart__ship-text {
  margin: 0;
}
.hg-cart__ship-bar {
  height: 4px;
  margin: 8px 0 12px;
  overflow: hidden;
  border-radius: 99px;
  background: #e5e5e5;
}
.hg-cart__ship-bar span {
  display: block;
  width: var(--hg-ship-progress, 0%);
  height: 100%;
  background: var(--hg-accent);
}

/* Lines */
.hg-cart .widget_shopping_cart_content .hg-cart__lines {
  flex: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  list-style: none;
}
.hg-cart .widget_shopping_cart_content .hg-cart-line {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  margin: 0;
  padding: 14px 0;
  border-top: 0;
  border-bottom: 1px solid var(--hg-cart-line);
}
.hg-cart-line__media {
  display: block;
  width: 88px;
  height: 110px;
  overflow: hidden;
  background: #f3f3f3;
}
.hg-cart .hg-cart-line__media img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}
.hg-cart-line__info {
  display: grid;
  gap: 4px;
  min-width: 0;
}
/* The title with the remove button at its end, which mirrors in RTL. */
.hg-cart-line__head {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.hg-cart .hg-cart-line__title {
  flex: 1 1 auto;
  min-width: 0;
  color: inherit;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.hg-cart .hg-cart-line__title strong {
  font-weight: 700;
}
/* The options as one muted line of values, like the reference's variant line; long text wraps. */
.hg-cart-line .hg-cart-opts {
  margin: 0;
  color: var(--hg-cart-muted);
  line-height: 1.4;
  overflow-wrap: anywhere;
}
/* Price at the start, quantity at the end. */
.hg-cart-line__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 12px;
  margin-top: 4px;
}
.hg-cart-line__price {
  min-width: 0;
  margin: 0;
}
.hg-cart-line__compare {
  color: var(--hg-cart-muted);
}
.hg-cart .hg-cart-line__qty {
  flex: none;
  margin: 0;
}

.hg-qty {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 999px;
}
.hg-qty .hg-qty__btn {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.hg-qty .hg-qty__btn::after {
  display: none;
}
.hg-qty .hg-qty__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.hg-qty .hg-qty__input {
  width: 36px;
  height: 32px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.hg-qty .hg-qty__input::-webkit-inner-spin-button,
.hg-qty .hg-qty__input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
/* The pill clips outlines drawn outside its controls. */
.hg-qty .hg-qty__btn:focus-visible,
.hg-qty .hg-qty__input:focus-visible {
  outline-offset: -2px;
}

/* Trash button: a 32px target whose icon lines up with the title's first line and the lines' end. */
.hg-cart .widget_shopping_cart_content .hg-cart-line__remove {
  position: static;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-block: -5px 0;
  margin-inline: 0 -7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--hg-cart-muted);
  font-size: inherit;
  line-height: 1;
  opacity: 1;
}
.hg-cart .widget_shopping_cart_content .hg-cart-line__remove:hover {
  background: var(--hg-cart-line);
  color: var(--hg-text);
}
.hg-cart .widget_shopping_cart_content .hg-cart-line__remove:focus-visible {
  outline: 2px solid var(--hg-text);
  outline-offset: -2px;
}
.hg-cart-line__remove .hg-icon {
  display: block;
  width: 18px;
  height: 18px;
}

/* Edit (options) and Show details under the price row. */
.hg-cart-line__links {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.6;
}
.hg-cart .widget_shopping_cart_content :is(.hg-cart-line__edit, .hg-cart-line__details) {
  color: var(--hg-cart-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hg-cart .widget_shopping_cart_content :is(.hg-cart-line__edit, .hg-cart-line__details):hover {
  color: var(--hg-text);
}
/* A details view or sheet on its way (assets/js/drawers.js): a small ring after the control's
   text. Its negative end margin gives back its room, so nothing beside it moves. */
.hg-cart :is(a[data-hg-cart-details], [data-hg-sheet-open][data-hg-cart-key])[aria-busy="true"] {
  cursor: progress;
}
.hg-cart :is(a[data-hg-cart-details], [data-hg-sheet-open][data-hg-cart-key])[aria-busy="true"]::after {
  content: "";
  display: inline-block;
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  margin-inline: 5px -15px;
  vertical-align: -1px;
  border: 1.5px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: hg-cart-spin 0.7s linear infinite;
}

/* Frequently bought together: a framed list under the header's black title bar. */
.hg-cart-fbt {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid var(--hg-header-bg);
  border-radius: 4px;
}
.hg-cart .hg-cart-fbt__title {
  margin: 0;
  padding: 10px 12px;
  background: var(--hg-header-bg);
  color: var(--hg-header-text);
  font-family: var(--hg-font-heading);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}
.hg-cart-fbt__list {
  margin: 0;
  padding: 0 12px;
  list-style: none;
}
.hg-cart-fbt__item {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 12px 0;
}
.hg-cart-fbt__item + .hg-cart-fbt__item {
  border-top: 1px solid var(--hg-cart-line);
}
.hg-cart-fbt__media {
  display: block;
  width: 64px;
  height: 80px;
  overflow: hidden;
  background: #f3f3f3;
}
.hg-cart .hg-cart-fbt__media img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}
.hg-cart-fbt__info {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.hg-cart .hg-cart-fbt__name {
  display: -webkit-box;
  overflow: hidden;
  color: inherit;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.hg-cart-fbt__buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 8px;
}
.hg-cart-fbt__price del {
  color: var(--hg-cart-muted);
}
.hg-cart-fbt__price ins {
  background: none;
  text-decoration: none;
}
/* Outlined, so checkout stays the drawer's one solid button. */
.hg-cart .hg-cart-fbt__add {
  min-height: 34px;
  padding: 8px 12px;
  background: transparent;
  color: var(--hg-accent-text);
  font-size: 12px;
  white-space: nowrap;
}
.hg-cart .hg-cart-fbt__add:hover {
  border-color: var(--hg-accent);
  background: var(--hg-accent);
  color: #fff;
}
.hg-cart-fbt__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}
.hg-cart .hg-cart-fbt__details {
  color: var(--hg-cart-muted);
  font-size: 12px;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.hg-cart .hg-cart-fbt__details:hover {
  color: var(--hg-text);
}

/* Product details view (inc/cart-details.php): takes the cart's place under the head. */
.cart-panel .hg-cart > [hidden],
.hg-cart__head > [hidden] {
  display: none;
}
.hg-cart {
  --hg-cart-slide: 16px;
}
[dir="rtl"] .hg-cart {
  --hg-cart-slide: -16px;
}
.hg-cart__back {
  margin-inline: -10px -4px;
}
.hg-cart__back .hg-icon {
  transform: rotate(90deg);
}
[dir="rtl"] .hg-cart__back .hg-icon {
  transform: rotate(-90deg);
}
.hg-cart-details {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: hg-cart-slide-in 0.3s ease;
}
.hg-cart-details__body {
  padding: 18px 18px calc(24px + env(safe-area-inset-bottom));
}
.hg-cart-details__media {
  overflow: hidden;
  background: #f3f3f3;
}
.hg-cart .hg-cart-details__media img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}
.hg-cart .hg-cart-details__title {
  margin: 16px 0 4px;
  color: inherit;
  font-family: var(--hg-font-body);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  overflow-wrap: anywhere;
}
.hg-cart-details__price,
.hg-cart-sheet__price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  margin: 0;
}
.hg-cart-details__price del,
.hg-cart-sheet__price del {
  color: var(--hg-cart-muted);
}
/* Sale price first, as on the product page and the cart lines. */
.hg-cart-details__price ins,
.hg-cart-sheet__price ins {
  order: -1;
  background: none;
  text-decoration: none;
}
.hg-cart-details__actions {
  display: grid;
  gap: 8px;
  margin: 16px 0 20px;
}
.hg-cart .hg-cart-details__add {
  width: 100%;
}
.hg-cart .hg-cart-details__back {
  justify-self: center;
  margin: 0;
  padding: 6px 4px;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.hg-cart .hg-cart-details__back:hover {
  background: none;
  color: var(--hg-accent-text);
}
.hg-cart-details__desc {
  padding-top: 16px;
  border-top: 1px solid var(--hg-cart-line);
  color: #333;
  overflow-wrap: anywhere;
}
.hg-cart-details__desc > :first-child {
  margin-top: 0;
}
.hg-cart-details__desc :is(p, ul, ol) {
  margin: 0 0 10px;
}
.hg-cart-details__desc :is(ul, ol) {
  padding-inline-start: 1.2em;
}
.hg-cart .hg-cart-details__desc :is(h1, h2, h3, h4, h5, h6) {
  margin: 16px 0 8px;
  color: var(--hg-text);
  font-family: var(--hg-font-heading);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: uppercase;
}
.hg-cart-details__desc :is(img, iframe, video) {
  max-width: 100%;
  height: auto;
}
.hg-cart-details__more {
  margin: 12px 0 0;
  font-size: 13px;
}
.hg-cart .hg-cart-details__more a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* Focus lands on these titles when their view opens; they are not controls. */
:is(.hg-cart-details__title, .hg-cart-sheet__title):focus:not(:focus-visible) {
  outline: 0;
}

/* Options sheet: rises from the drawer's foot over a scrim; the drawer stays behind it. */
.hg-cart-sheet {
  position: absolute;
  z-index: 5;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hg-cart-sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.5);
  animation: hg-cart-fade-in 0.25s ease;
}
.hg-cart-sheet__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: calc(100% - 48px);
  border-radius: 10px 10px 0 0;
  background: #fff;
  animation: hg-cart-sheet-in 0.3s ease;
}
.hg-cart .hg-cart-sheet__close {
  position: absolute;
  z-index: 1;
  top: 8px;
  inset-inline-end: 8px;
}
.hg-cart-sheet__body,
.hg-cart-sheet__form {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.hg-cart-sheet__head {
  display: grid;
  flex: none;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  padding: 18px 18px 14px;
  padding-inline-end: 52px;
  border-bottom: 1px solid var(--hg-cart-line);
}
.hg-cart-sheet__thumb {
  width: 64px;
  height: 80px;
  overflow: hidden;
  background: #f3f3f3;
}
.hg-cart .hg-cart-sheet__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}
.hg-cart-sheet__summary {
  min-width: 0;
}
.hg-cart .hg-cart-sheet__title {
  display: -webkit-box;
  margin: 0 0 4px;
  overflow: hidden;
  color: inherit;
  font-family: var(--hg-font-body);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}
.hg-cart-sheet__fields {
  min-height: 0;
  padding: 16px 18px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.hg-cart-sheet__foot {
  flex: none;
  padding: 12px 18px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hg-cart-line);
}
.hg-cart-sheet__error {
  margin: 0 0 10px;
  color: var(--hg-accent-text);
  font-size: 13px;
}
.hg-cart-sheet__error:empty {
  display: none;
}
.hg-cart .hg-cart-sheet__submit {
  width: 100%;
}

/* WCPA fields in the options sheet and in Ecomus's quick view and quick add, drawn like the
   product page's options on phones (product.css): heading-face names, outlined chips. */
:is(.hg-cart-sheet, #quick-view-modal, #quick-add-modal) .wcpa_wrap {
  --wcpabuttoncolor: var(--hg-text);
  --wcpabuttontextcolor: #fff;
  --wcpabordercolor: var(--hg-line-strong);
  --wcpabordercolorfocus: var(--hg-text);
  --wcpaborderradius: 6px;
  padding: 0;
}
:is(.hg-cart-sheet, #quick-view-modal, #quick-add-modal) .wcpa_wrap .wcpa_section {
  margin: 0;
}
:is(.hg-cart-sheet, #quick-view-modal, #quick-add-modal) .wcpa_wrap .wcpa_field_wrap {
  min-width: 0;
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}
:is(.hg-cart-sheet, #quick-view-modal, #quick-add-modal) .wcpa_wrap .wcpa_field_label {
  display: block;
  width: auto;
  margin: 0 0 8px;
  padding: 0;
  color: var(--hg-text);
  font-family: var(--hg-font-heading);
  font-size: 14px !important;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: uppercase;
}
:is(.hg-cart-sheet, #quick-view-modal, #quick-add-modal) .wcpa_wrap .wcpa_required_ast {
  display: none;
}
/* The chosen value right after the name, "Style: Short Sleeve", as on the product page and in
   Shopify's option legend. WCPA's inline-flex box with 5px margins left a gap before the colon
   and moved a long name's value, colon first, to a line of its own. */
:is(.hg-cart-sheet, #quick-view-modal, #quick-add-modal) .wcpa_wrap .wcpa_selected_items {
  display: inline;
  margin: 0;
}
:is(.hg-cart-sheet, #quick-view-modal, #quick-add-modal) .wcpa_wrap .wcpa_selected_items span {
  color: var(--hg-cart-muted) !important;
  font-family: var(--hg-font-body);
  font-size: 14px !important;
  font-weight: 400;
  text-transform: none;
}
:is(.hg-cart-sheet, #quick-view-modal, #quick-add-modal) .wcpa_wrap .wcpa_selected_items span::before {
  content: ": ";
}
:is(.hg-cart-sheet, #quick-view-modal, #quick-add-modal) .wcpa_type_radio-group .wcpa_group_field,
:is(.hg-cart-sheet, #quick-view-modal, #quick-add-modal) .wcpa_type_color-group .wcpa_group_field {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
:is(.hg-cart-sheet, #quick-view-modal, #quick-add-modal) .wcpa_type_radio-group .wcpa_radio {
  margin: 0;
}
:is(.hg-cart-sheet, #quick-view-modal, #quick-add-modal) .wcpa_type_radio-group .wcpa_radio label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 36px;
  margin: 0;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  outline: 0;
  background: transparent;
  box-shadow: inset 0 0 0 1px currentColor;
  color: var(--hg-text);
  font-family: var(--hg-font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  text-transform: none;
  cursor: pointer;
}
:is(.hg-cart-sheet, #quick-view-modal, #quick-add-modal) .wcpa_type_radio-group .wcpa_radio label input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
:is(.hg-cart-sheet, #quick-view-modal, #quick-add-modal) .wcpa_type_radio-group :is(.wcpa_radio_custom, .wcpa_check) {
  display: none;
}
:is(.hg-cart-sheet, #quick-view-modal, #quick-add-modal) .wcpa_type_radio-group .wcpa_radio label span {
  margin: 0;
  padding: 0;
}
:is(.hg-cart-sheet, #quick-view-modal, #quick-add-modal) .wcpa_type_radio-group .wcpa_radio label:has(input:checked) {
  background: #000;
  box-shadow: inset 0 0 0 1px #000;
  color: #fff;
}
:is(.hg-cart-sheet, #quick-view-modal, #quick-add-modal) .wcpa_type_radio-group .wcpa_radio label:has(input:focus-visible) {
  outline: 2px solid var(--hg-text);
  outline-offset: 2px;
}
:is(.hg-cart-sheet, #quick-view-modal, #quick-add-modal) .wcpa_type_radio-group .wcpa_radio label:has(input:disabled) {
  opacity: 0.4;
  cursor: not-allowed;
}
:is(.hg-cart-sheet, #quick-view-modal, #quick-add-modal) .wcpa_type_color-group .wcpa_color_bg {
  min-height: 36px;
  padding-inline: 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 400;
}
:is(.hg-cart-sheet, #quick-view-modal, #quick-add-modal) .wcpa_wrap :is(input[type="text"], textarea, select) {
  width: 100%;
  min-height: 44px;
  border: 1px solid var(--hg-line-strong);
  border-radius: 6px;
  background-color: #fff;
  color: var(--hg-text);
  font: inherit;
}
:is(.hg-cart-sheet, #quick-view-modal, #quick-add-modal) .wcpa_price_summary:empty {
  display: none;
}
:is(.hg-cart-sheet, #quick-view-modal, #quick-add-modal) .wcpa_wrap :is(.wcpa_field_error, .wcpa_form_error) {
  color: var(--hg-accent-text);
  font-size: 13px;
}

@keyframes hg-cart-slide-in {
  from {
    opacity: 0;
    transform: translateX(var(--hg-cart-slide));
  }
}
@keyframes hg-cart-sheet-in {
  from {
    transform: translateY(100%);
  }
}
@keyframes hg-cart-fade-in {
  from {
    opacity: 0;
  }
}
@keyframes hg-cart-spin {
  to {
    transform: rotate(360deg);
  }
}
@media (max-width: 749px) {
  /* Phones zoom in on smaller text in a focused field. */
  :is(.hg-cart-sheet, #quick-view-modal, #quick-add-modal) .wcpa_wrap :is(input[type="text"], textarea, select) {
    font-size: 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hg-cart-details,
  .hg-cart-sheet__scrim,
  .hg-cart-sheet__panel,
  .hg-cart :is(a[data-hg-cart-details], [data-hg-sheet-open][data-hg-cart-key])[aria-busy="true"]::after {
    animation: none;
  }
}

/* Footer */
.hg-cart__foot {
  flex: none;
  padding: 16px 18px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--hg-cart-line);
  background: #f6f6f6;
}
.hg-cart .widget_shopping_cart_content .hg-cart__sub {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
  color: inherit;
  font-size: inherit;
  font-weight: 700;
}
.hg-cart .widget_shopping_cart_content .hg-cart__sub .woocommerce-Price-amount {
  font-weight: inherit;
}

.hg-cart__codes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
.hg-cart .hg-cart__code {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 3px 8px;
  border: 1px dashed currentColor;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: 12px;
  font-weight: inherit;
  line-height: inherit;
  cursor: pointer;
}
.hg-cart .hg-cart__code::after {
  display: none;
}

.hg-discount {
  display: flex;
  gap: 8px;
  margin: 10px 0;
}
/* Three classes so Ecomus's input:hover and :focus border colours stay out. */
.hg-cart .hg-discount .hg-discount__input {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
}
.hg-cart .hg-discount .hg-discount__input::placeholder {
  color: var(--hg-cart-muted);
  font-size: inherit;
}

.hg-cart__note {
  margin: 0 0 12px;
  color: #666;
  font-size: 12px;
}
.hg-cart .widget_shopping_cart_content .hg-cart__buttons {
  display: block;
  margin: 0;
}
.hg-cart .hg-cart__checkout {
  width: 100%;
}
.hg-cart .hg-cart__link {
  display: block;
  margin-top: 10px;
  color: inherit;
  text-align: center;
  text-decoration: underline;
}

.hg-cart .widget_shopping_cart_content .hg-cart__empty {
  position: static;
  margin: 0;
  padding: 48px 8px;
  color: inherit;
  text-align: center;
}
.hg-cart__empty p {
  margin: 0;
}
.hg-cart__empty .hg-btn {
  margin-top: 16px;
}

/* Mobile menu drawer: the header's black, as the reference drawer is set up. */
.hamburger-panel .panel__container.hg-mnav {
  --hg-mnav-bg: var(--hg-header-bg);
  --hg-mnav-text: var(--hg-header-text);
  --hg-mnav-subtext: #dcdcdc;
  --hg-mnav-border: var(--hg-mnav-bg);
  --hamburger-width: min(338px, 90vw);
  width: var(--hamburger-width);
  max-width: none;
  background: var(--hg-mnav-bg);
  color: var(--hg-mnav-text);
  font-size: 14px;
}

.hg-mnav__head {
  display: flex;
  flex: none;
  justify-content: flex-end;
  padding: 10px 10px 0;
  border-bottom: 1px solid #000;
}
.hg-mnav .hg-mnav__close {
  width: 24px;
  height: 24px;
}

.hamburger-panel .hg-mnav__body {
  flex: 1;
  min-height: 0;
  padding-block: 0 96px;
  padding-inline: 30px 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.hg-mnav .hg-mnav__nav a,
.hg-mnav .hg-mnav__toggle,
.hg-mnav .hg-mnav__account,
.hg-mnav .header-mobile-menu__custom-link a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 16px 12px;
  border: 0;
  border-bottom: 1px solid var(--hg-mnav-border);
  border-radius: 0;
  background: none;
  color: var(--hg-mnav-text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-align: start;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
  /* The reference drawer's links change state at once; Ecomus fades them. */
  transition: none;
}
.hg-mnav .hg-mnav__toggle::after {
  display: none;
}
/* The branch toggle's "+" turns into a "×" while its branch is open (aria-expanded). */
.hg-mnav .hg-mnav__toggle > span {
  display: inline-block;
}
.hg-mnav .hg-mnav__toggle[aria-expanded="true"] > span {
  transform: rotate(45deg);
}
/* Top level: lighter, sentence case and flush with the drawer's inset. */
.hg-mnav .hg-mnav__nav > a,
.hg-mnav .hg-mnav__nav > .hg-mnav__branch > .hg-mnav__toggle {
  padding-block: 18px;
  padding-inline: 0 25px;
  font-size: 15px;
  font-weight: 400;
  line-height: 19.5px;
  letter-spacing: normal;
  text-transform: none;
}
.hg-mnav__sub {
  background: var(--hg-mnav-bg);
}
.hg-mnav__sub[hidden] {
  display: none;
}
.hg-mnav .hg-mnav__sub a {
  padding-inline-start: 22px;
  color: var(--hg-mnav-subtext);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}
.hg-mnav .header-mobile-menu__custom-text {
  padding: 16px 12px;
  color: var(--hg-mnav-subtext);
}
.hg-mnav__foot {
  flex: none;
  padding: 15px 20px calc(15px + env(safe-area-inset-bottom));
  color: var(--hg-mnav-text);
}

/* Mobile dock. Ecomus shows it below its breakpoint and pads the page above it.
   Its height comes from the items, 63px as on the reference. */
.ecomus-mobile-navigation-bar.hg-dock {
  align-items: stretch;
  justify-content: space-around;
  height: auto;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  border-top: 1px solid rgb(255 255 255 / 0.8);
  box-shadow: none;
}
/* Colours picked in Customizer > Mobile > Navigation bar win over these. */
.ecomus-mobile-navigation-bar.hg-dock:not(.hg-dock--custom-bg) {
  background: rgb(255 255 255 / 0.75);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
/* Lite mode: the same white, opaque and unblurred, as the blur of this fixed bar is
   composited again on every scroll frame. */
.hg-lite .ecomus-mobile-navigation-bar.hg-dock:not(.hg-dock--custom-bg) {
  background: rgb(255 255 255);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.ecomus-mobile-navigation-bar.hg-dock:not(.hg-dock--custom-text) {
  color: #111;
}
.hg-dock .ecomus-mobile-navigation-bar__item {
  display: flex;
  flex: 1 1 0;
  align-items: stretch;
  width: auto;
  min-width: 0;
  height: auto;
}
/* Items from the child templates, and any Ecomus item the child does not override. */
.hg-dock .hg-dock__item,
.hg-dock .ecomus-mobile-navigation-bar__icon {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 4px;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
}
.hg-dock .hg-dock__item::after {
  display: none;
}
.hg-dock .hg-dock__icon {
  flex: none;
  width: 22px;
  height: 22px;
}
.hg-dock__label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Product forms printed away from the product page, where product.css does not
   reach: the cards' quick view and the cart drawer's quick add. Moved from the
   Customizer's Additional CSS (bin/data/custom-css-cleanup.php); their WCPA fields
   share the options sheet's rules above. */
:is(#quick-view-modal, #quick-add-modal) .meta.meta-cat {
  display: none;
}
:is(#quick-view-modal, #quick-add-modal) button.single_add_to_cart_button.button.alt {
  margin-top: 6px;
  margin-bottom: 6px;
}

/* Price, quantity and add to cart as on the product page (product.css), so the
   featured product's options popup reads like the rest of the store. The stock
   and sale pills are left out there too. */
:is(#quick-view-modal, #quick-add-modal) .woocommerce-badges--single,
:is(#quick-view-modal, #quick-add-modal) .ecomus-product-price .sale-off {
  display: none;
}
:is(#quick-view-modal, #quick-add-modal) .ecomus-product-price .price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  color: var(--hg-text);
  font-family: var(--hg-font-heading);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.2;
}
:is(#quick-view-modal, #quick-add-modal) .ecomus-product-price .price ins {
  order: -1;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: none;
}
:is(#quick-view-modal, #quick-add-modal) .ecomus-product-price .price del {
  color: var(--hg-muted);
  font-size: 16px;
  font-weight: 500;
}
:is(#quick-view-modal, #quick-add-modal) form.cart .quantity {
  display: flex;
  flex-wrap: nowrap; /* Ecomus wraps it, which drops the input and + below the clipped pill */
  align-items: stretch;
  width: 120px;
  height: 40px;
  overflow: hidden;
  border: 1px solid var(--hg-line-strong);
  border-radius: 30px;
  background: transparent;
}
:is(#quick-view-modal, #quick-add-modal) form.cart .quantity .ecomus-qty-button {
  display: flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 100%;
  color: var(--hg-text);
}
:is(#quick-view-modal, #quick-add-modal) form.cart .quantity .qty {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--hg-text);
  font-size: 16px;
  text-align: center;
}
:is(#quick-view-modal, #quick-add-modal) button.single_add_to_cart_button.button.alt {
  --em-button-bg-color: var(--hg-accent);
  --em-button-border-color: var(--hg-accent);
  --em-button-color: #fff;
  --em-button-bg-color-hover: var(--hg-text);
  --em-button-border-color-hover: var(--hg-text);
  --em-button-color-hover: #fff;
  min-height: 48px;
  border-radius: 4px;
  font-family: var(--hg-font-heading);
  font-size: 14px;
  font-weight: 800;
  line-height: 14px;
  text-transform: uppercase;
}
:is(#quick-view-modal, #quick-add-modal) button.single_add_to_cart_button.button.alt .text {
  font-size: inherit;
  font-weight: inherit;
}
:is(#quick-view-modal, #quick-add-modal) button.single_add_to_cart_button.button.alt:focus-visible {
  outline: 2px solid var(--hg-text);
  outline-offset: 2px;
}
/* Variable products: attribute labels like the option names (product.css). */
:is(#quick-view-modal, #quick-add-modal) table.variations .label label {
  color: var(--hg-text);
  font-family: var(--hg-font-heading);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}
@media (min-width: 750px) {
  :is(#quick-view-modal, #quick-add-modal) .ecomus-product-price .price {
    font-size: 28px;
  }
}

/* A taller quick view, so a long product name still leaves Add to cart in view
   (owner, 2026-10-19). Ecomus sizes the info column to the square image, so a
   five-line name pushed the button below the column's edge. From 768px the image
   frame grows to 4:5 (about 2:3 on portrait tablets) without outgrowing the screen,
   the square photo cropped by Ecomus's `object-fit: cover`; the title drops to the
   phone product page's 23px and, on short or portrait screens, stops at four lines
   (the full name stays in the markup). Phones keep Ecomus's stacked layout. Without
   container units the height is dropped and the frame stays square. */
@media (min-width: 768px) {
  #quick-view-modal .woocommerce-product-gallery {
    container-type: inline-size;
  }
  #quick-view-modal .woocommerce-product-gallery__image > a {
    overflow: hidden; /* Ecomus's square spacer would overflow a frame cut short by the screen */
    height: min(125cqi, calc(100vh - 70px)); /* 70px: the container's margin and padding */
    height: min(125cqi, calc(100svh - 70px));
  }
  #quick-view-modal .product_title {
    font-size: 23px;
    line-height: 1.1;
  }
}
@media (min-width: 768px) and (orientation: portrait) {
  #quick-view-modal .woocommerce-product-gallery__image > a {
    height: min(155cqi, calc(100vh - 70px));
    height: min(155cqi, calc(100svh - 70px));
  }
}
@media (min-width: 768px) and (max-height: 760px), (min-width: 768px) and (orientation: portrait) {
  #quick-view-modal .product_title {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  }
}

/* The quick view (also the featured product's options popup) and the cart's details
   view and options sheet scroll without a visible bar, at the owner's request: the
   grey bar read as clutter beside the options. Only the bar is hidden; wheel, touch,
   keyboard and focus scrolling are unchanged. Ecomus scrolls the info column at
   desktop widths (with `scrollbar-width: thin`) and the whole wrapper on phones; the
   wrapper also overflows by a few pixels on desktop, which drew a second bar. */
#quick-view-modal .modal__wrapper,
#quick-view-modal .entry-summary,
.cart-panel .hg-cart-details,
.cart-panel .hg-cart-sheet__fields {
  scrollbar-width: none;
}
#quick-view-modal .modal__wrapper::-webkit-scrollbar,
#quick-view-modal .entry-summary::-webkit-scrollbar,
.cart-panel .hg-cart-details::-webkit-scrollbar,
.cart-panel .hg-cart-sheet__fields::-webkit-scrollbar {
  display: none;
}

/* UpsellBlast's (Salesgen) slide cart: its stylesheet loads after first paint off the product
   page (inc/asset-scope.php), and its closed state fades and slides out over 0.3s, so a first
   visit flashed a white panel across the screen. Hidden here from the start, the panel has
   nothing to animate when that stylesheet lands. */
.sg-slide-cart-wrapper:not(.active) {
  position: fixed;
  opacity: 0;
  visibility: hidden;
}