.hqpx-enhanced-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 0;
  min-width: 0;
  container-type: inline-size;
}

/* Elementor's percentage-height wrapper must grow with enhanced card controls. */
.elementor-widget-woocommerce-products.hqpx-card-widget {
  min-height: var(--hqpx-card-grid-height, 0px);
}

.elementor-widget-woocommerce-products:has(ul.products.hqpx-card-layout) > .elementor-widget-container {
  height: auto !important;
}

.hqpx-enhanced-card .woocommerce-LoopProduct-link {
  display: block;
  color: inherit;
}

/* Shared slots align titles, prices and controls; ratings live on the photo. */
.hqpx-card-layout > .hqpx-enhanced-card > .woocommerce-LoopProduct-link {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto;
  align-content: start;
}

.hqpx-card-layout > .hqpx-enhanced-card .woocommerce-loop-product__title {
  grid-row: 2;
  min-height: var(--hqpx-card-title-height, 0px);
}

.hqpx-enhanced-card .star-rating {
  display: none !important;
}

.hqpx-card-layout > .hqpx-enhanced-card .price {
  grid-row: 3;
  min-height: var(--hqpx-card-price-height, 0px);
}

.hqpx-card-layout > .hqpx-enhanced-card > .hqpx-loop-form {
  display: grid !important;
  grid-template-rows: var(--hqpx-card-options-height, auto) auto auto;
  margin: 0 !important;
}

.hqpx-card-layout > .hqpx-enhanced-card .hqpx-card-options { grid-row: 1; }
.hqpx-card-layout > .hqpx-enhanced-card .hqpx-card-actions { grid-row: 2; }
.hqpx-card-layout > .hqpx-enhanced-card .hqpx-card-status { grid-row: 3; }
.hqpx-card-layout > .hqpx-enhanced-card > .hqpx-card-details {
  margin-top: var(--hqpx-card-options-height, 0px) !important;
}

.hqpx-card-media {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  background: #f4f4f2;
  isolation: isolate;
}

.hqpx-enhanced-card .hqpx-card-rating-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 7px;
  border: 0;
  border-radius: 3px;
  /* Soften the photo overlay without fading the star or rating text. */
  background: rgba(255, 255, 255, 0.65);
  color: #111;
  font-family: inherit;
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}

.hqpx-card-media > picture { display: contents; }

.hqpx-card-media > img,
.hqpx-card-media > picture > img {
  display: block;
  width: 100% !important;
  margin: 0 !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: opacity .42s ease, transform .55s cubic-bezier(.2,.65,.25,1);
}

.hqpx-card-media > img:not(.hqpx-card-secondary-image),
.hqpx-card-media > picture > img:not(.hqpx-card-secondary-image) {
  position: relative;
  z-index: 1;
}

.hqpx-card-media .hqpx-card-secondary-image {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  transform: scale(1.025);
}

@media (hover: hover) and (pointer: fine) {
  .hqpx-enhanced-card .woocommerce-LoopProduct-link:hover .hqpx-card-media > img:first-of-type,
  .hqpx-enhanced-card .hqpx-product-card-link:hover .hqpx-card-media > img:first-of-type,
  .hqpx-enhanced-card .woocommerce-LoopProduct-link:hover .hqpx-card-media > picture > img:not(.hqpx-card-secondary-image),
  .hqpx-enhanced-card .hqpx-product-card-link:hover .hqpx-card-media > picture > img:not(.hqpx-card-secondary-image) {
    opacity: 0;
    transform: scale(1.018);
  }

  .hqpx-enhanced-card .woocommerce-LoopProduct-link:hover .hqpx-card-secondary-image,
  .hqpx-enhanced-card .hqpx-product-card-link:hover .hqpx-card-secondary-image {
    opacity: 1;
    transform: scale(1);
  }
}

.hqpx-enhanced-card .woocommerce-loop-product__title {
  margin: 16px 0 5px !important;
  font-size: clamp(15px, 1.15vw, 18px) !important;
  font-weight: 650;
  line-height: 1.25;
}

.hqpx-enhanced-card .price {
  display: block !important;
  margin: 0 0 14px !important;
  color: #111 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
}

.hqpx-loop-form {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  clear: both;
}

.hqpx-card-options {
  display: grid;
  gap: 9px;
  margin: 0 0 10px;
}

.hqpx-card-option {
  display: grid;
  grid-template-columns: minmax(54px, auto) 1fr;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: #171717;
  font-size: 12px;
  font-weight: 650;
}

.hqpx-card-option-label--visually-hidden {
  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;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.hqpx-card-option--size {
  display: block;
  min-width: 0;
}

.hqpx-card-select {
  width: 100%;
  min-width: 0;
  height: 42px;
  padding: 0 34px 0 12px;
  border: 1px solid #d7d7d4;
  border-radius: 0;
  background-color: #fff;
  color: #111;
  font: inherit;
}

.hqpx-card-select.hqpx-select-enhanced {
  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;
}

.hqpx-card-swatches {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.hqpx-card-option:not(.hqpx-card-option--size) {
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  text-align: center;
}

.hqpx-card-option--size .hqpx-card-swatches {
  flex-wrap: nowrap;
  width: 100%;
  max-width: 100%;
  padding: 1px 0 5px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: #aaa transparent;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.hqpx-card-size-rail {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 0 minmax(0, 1fr) 0;
  align-items: center;
  min-width: 0;
}

.hqpx-card-size-rail .hqpx-card-swatches {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  grid-column: 2;
  grid-row: 1;
}

/* Only a real overflow row needs a left-aligned scroll origin. */
.hqpx-card-size-rail.is-overflowing .hqpx-card-swatches {
  justify-content: flex-start;
}

.hqpx-card-size-rail.is-overflowing {
  grid-template-columns: 0 minmax(0, 1fr) 28px;
}

.hqpx-card-size-rail.is-overflowing.can-scroll-prev {
  grid-template-columns: 28px minmax(0, 1fr) 28px;
}

.hqpx-card-size-scroll {
  position: static !important;
  grid-row: 1;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 28px;
  min-width: 28px;
  height: var(--hqpx-size-control-height, 38px) !important;
  align-self: start;
  margin: 1px 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #111 !important;
  font-size: 22px !important;
  line-height: 1 !important;
  cursor: pointer;
  transform: none !important;
}

.hqpx-card-size-scroll svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.hqpx-card-size-scroll[hidden] {
  display: none !important;
}

.hqpx-card-size-scroll--prev { grid-column: 1; }
.hqpx-card-size-scroll--next { grid-column: 3; }
.hqpx-card-size-scroll:hover { background: #f3f3f1 !important; }
.hqpx-card-size-scroll:focus-visible {
  outline: 2px solid #111 !important;
  outline-offset: 0;
}

.hqpx-card-option--size .hqpx-card-swatch {
  flex: 0 0 auto;
  scroll-snap-align: start;
}

.hqpx-enhanced-card button.hqpx-card-swatch {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 38px;
  margin: 0 !important;
  padding: 0 11px !important;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #151515 !important;
  border-radius: 0 !important;
  background: #fff !important;
  color: #151515 !important;
  font: inherit !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.hqpx-enhanced-card button.hqpx-card-swatch:hover,
.hqpx-enhanced-card button.hqpx-card-swatch:focus-visible {
  background: #f3f3f1 !important;
  color: #151515 !important;
}

.hqpx-enhanced-card button.hqpx-card-swatch:focus-visible,
.hqpx-enhanced-card .hqpx-loop-add:focus-visible,
.hqpx-enhanced-card .hqpx-card-details:focus-visible,
.hqpx-card-actions .qty:focus-visible {
  outline: 2px solid #111 !important;
  outline-offset: 2px;
}

.hqpx-enhanced-card button.hqpx-card-swatch.is-selected {
  background: #151515 !important;
  color: #fff !important;
}

.hqpx-enhanced-card button.hqpx-card-swatch:disabled,
.hqpx-enhanced-card button.hqpx-card-swatch.is-unavailable {
  border-color: #d5d5d2 !important;
  background: #f4f4f2 !important;
  color: #989894 !important;
  text-decoration: line-through !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

.hqpx-card-actions {
  display: grid;
  width: 100%;
  max-width: 100%;
  grid-template-columns: 68px minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}

.hqpx-card-actions .quantity {
  width: 68px !important;
  margin: 0 !important;
}

.hqpx-card-actions .qty {
  width: 100% !important;
  height: 44px;
  margin: 0 !important;
  border: 1px solid #cfcfcb;
  border-radius: 0;
  background: #fff;
  color: #111;
  text-align: center;
}

.hqpx-enhanced-card .hqpx-loop-add,
.hqpx-enhanced-card .hqpx-card-details {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px;
  margin: 0 !important;
  padding: 11px 14px !important;
  border: 1px solid #111 !important;
  border-radius: 0 !important;
  background: #111 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  text-align: center;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}

.hqpx-enhanced-card .hqpx-card-details {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.hqpx-enhanced-card .hqpx-loop-add:hover,
.hqpx-enhanced-card .hqpx-loop-add:focus-visible,
.hqpx-enhanced-card .hqpx-card-details:hover,
.hqpx-enhanced-card .hqpx-card-details:focus-visible {
  background: #fff !important;
  color: #111 !important;
}

.hqpx-enhanced-card .hqpx-loop-add:disabled {
  cursor: not-allowed;
  opacity: 1 !important;
  border-color: #111 !important;
  background: #111 !important;
  color: #fff !important;
}

.hqpx-enhanced-card .hqpx-loop-add.is-loading {
  cursor: progress;
  opacity: .7;
}

.hqpx-card-status {
  min-height: 18px;
  margin: 6px 0 0;
  color: #5b5b57;
  font-size: 11px;
  line-height: 1.35;
}

.hqpx-card-status:empty { min-height: 0; margin-top: 0; }

.hqpx-card-status[data-state="success"] { color: #176b42; }
.hqpx-card-status[data-state="error"] { color: #a12622; }

/* The card owns its compact success message. Woo's generic loop handler may
   append a second View cart link and a theme checkmark after added_to_cart. */
.hqpx-enhanced-card .added_to_cart.wc-forward {
  display: none !important;
}

.hqpx-enhanced-card .hqpx-loop-add.added::after,
.hqpx-enhanced-card .hqpx-loop-add.added::before {
  display: none !important;
  content: none !important;
}

.hqpx-card-status[data-state="success"] {
  color: #111;
  font-weight: 600;
  text-align: right;
}

/* Native overlay scrollbars otherwise cover Elementor's right-edge remove
   icons while the product list is scrolling. Keep native cart links/transport;
   reserve content-side clearance on both desktop and mobile. */
.elementor-menu-cart__main .elementor-menu-cart__products {
  box-sizing: border-box;
  padding-inline-end: 18px !important;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
}

/* Let the list, not the footer, absorb the space used by close/badge rows.
   Elementor's auto minimum plus viewport-minus-constant list height otherwise
   overflows the fixed drawer and clips Checkout after the close target grows. */
.elementor-menu-cart__main > .widget_shopping_cart_content {
  flex: 1 1 auto;
  min-height: 0;
}

/* Elementor's empty icon div otherwise has height:0. Give the already
   keyboard-enabled control a real hit/focus box, retaining its native X. Its
   centered target also clears the logged-in mobile toolbar at the page top. */
.elementor-menu-cart__main .elementor-menu-cart__close-button {
  box-sizing: border-box;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  flex-shrink: 0;
}

.elementor-menu-cart__main .elementor-menu-cart__close-button::before,
.elementor-menu-cart__main .elementor-menu-cart__close-button::after {
  width: 18px !important;
  left: 13px !important;
  top: 20.5px !important;
}

.elementor-menu-cart__main .elementor-menu-cart__close-button:focus-visible {
  outline: 2px solid #111;
  outline-offset: 2px;
}

/* uiXpress can wrap its logged-in toolbar controls below the nominal32px
   admin bar on narrow landscape. Keep the close target center below that row;
   ordinary customers' cart spacing is unchanged. Flex sizing absorbs this. */
body.admin-bar .elementor-menu-cart__main .elementor-menu-cart__close-button {
  margin-top: 12px !important;
}

/* Standard Woo notices are also used on single-product pages. Keep them in
   the same black/white visual language as HQ buttons on desktop and mobile. */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error,
.wc-block-components-notice-banner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 12px 20px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 20px !important;
  padding: 16px 18px !important;
  border: 1px solid #111 !important;
  border-top-width: 1px !important;
  border-radius: 0 !important;
  background: #fff !important;
  box-shadow: none !important;
  color: #111 !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
  box-sizing: border-box !important;
}

.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before {
  color: #111 !important;
}

/* Classic notices outside the product template (cart updates/removals, coupon
   errors and account information) also inherit Woo's absolute icon/clearfix.
   Reserve an actual icon column rather than covering the first text character.
   Keep error lists intact and keep their links/buttons keyboard-focusable. */
.woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error),
.woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
  grid-template-columns: 20px minmax(0, 1fr) auto !important;
  gap: 12px !important;
  outline: 0 !important;
  overflow-wrap: anywhere;
}

.woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):focus-visible,
.woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error):focus-visible {
  box-shadow: 0 0 0 2px #111 !important;
}

.woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::after,
.woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::after {
  display: none !important;
  content: none !important;
}

.woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before,
.woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error)::before {
  position: static !important;
  inset: auto !important;
  display: inline-grid !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  place-items: center !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: #111 !important;
  color: #fff !important;
  content: "\2713" !important;
  font-family: Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transform: none !important;
}

.woocommerce-notices-wrapper .woocommerce-info::before,
.woocommerce .woocommerce-info::before { content: "i" !important; }
.woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce .woocommerce-error::before { content: "!" !important; }

.woocommerce-notices-wrapper .woocommerce-error > li,
.woocommerce .woocommerce-error > li { grid-column: 2 / -1 !important; }

.woocommerce-notices-wrapper .hqpx-woo-notice-content,
.woocommerce .hqpx-woo-notice-content {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

.woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info) > .button,
.woocommerce :is(.woocommerce-message, .woocommerce-info) > .button {
  grid-column: 3 !important;
  grid-row: 1 !important;
}

.woocommerce-notices-wrapper .button,
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button,
.wc-block-components-notice-banner .wc-block-components-notice-banner__content .button {
  float: none !important;
  justify-self: end !important;
  min-height: 40px !important;
  margin: 0 !important;
  padding: 10px 16px !important;
  border: 1px solid #111 !important;
  border-radius: 0 !important;
  background: #111 !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.35 !important;
}

.woocommerce-notices-wrapper .button:hover,
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-error .button:hover {
  background: #fff !important;
  color: #111 !important;
}

/* Single-product notices sit outside the Elementor content container on the
   live template. Give that surface its own bounded layout, and explicitly
   reset Woo's absolutely positioned status glyph so it cannot cover text. */
.single-product .woocommerce-notices-wrapper:not(:empty) {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.single-product .woocommerce-notices-wrapper .woocommerce-message {
  grid-template-columns: 20px minmax(0, 1fr) auto !important;
  gap: 12px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 14px clamp(20px, 3vw, 48px) !important;
  outline: 0 !important;
}

.single-product .woocommerce-notices-wrapper .woocommerce-message::after {
  display: none !important;
  content: none !important;
}

.single-product .woocommerce-notices-wrapper .woocommerce-message::before {
  position: static !important;
  inset: auto !important;
  display: inline-grid !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
  place-items: center !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  border-radius: 50% !important;
  background: #111 !important;
  color: #fff !important;
  content: "\2713" !important;
  font-family: Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  transform: none !important;
}

.single-product .woocommerce-notices-wrapper .woocommerce-message .button {
  grid-column: 3 !important;
  grid-row: 1 !important;
  min-width: 112px !important;
  white-space: nowrap !important;
}

@media (min-width: 768px) {
  .single-product .woocommerce-notices-wrapper .woocommerce-message .button {
    min-width: 0 !important;
    min-height: 48px !important;
    padding: 15px 40px !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
  }
}

@media (max-width: 767px) {
  ul.products.hqpx-card-layout:not(.hqpx-product-rail-track) { row-gap: 28px !important; }

  /* Keep the mobile card's metadata in normal flow. Nested auto grid tracks
     can stretch independently in WebKit, separating prices and purchase rows. */
  .hqpx-card-layout > .hqpx-enhanced-card > .woocommerce-LoopProduct-link,
  .hqpx-card-layout > .hqpx-enhanced-card > .hqpx-loop-form {
    display: block !important;
  }
  .hqpx-card-layout > .hqpx-enhanced-card .hqpx-card-options {
    box-sizing: border-box;
    min-height: var(--hqpx-card-options-height, 0px);
    margin: 0 !important;
    padding-bottom: 10px;
  }
  .hqpx-card-layout > .hqpx-enhanced-card > .hqpx-loop-form--simple {
    padding-top: var(--hqpx-card-options-height, 0px);
  }

  .woocommerce-notices-wrapper .woocommerce-message,
  .woocommerce-notices-wrapper .woocommerce-info,
  .woocommerce-notices-wrapper .woocommerce-error,
  .woocommerce .woocommerce-message,
  .woocommerce .woocommerce-info,
  .woocommerce .woocommerce-error,
  .wc-block-components-notice-banner {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 14px !important;
  }

  .woocommerce-notices-wrapper .button,
  .woocommerce-message .button,
  .woocommerce-info .button,
  .woocommerce-error .button,
  .wc-block-components-notice-banner .wc-block-components-notice-banner__content .button {
    justify-self: stretch !important;
    width: 100% !important;
    text-align: center !important;
  }

  .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error),
  .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
    grid-template-columns: 20px minmax(0, 1fr) !important;
  }

  .woocommerce-notices-wrapper :is(.woocommerce-message, .woocommerce-info) > .button,
  .woocommerce :is(.woocommerce-message, .woocommerce-info) > .button {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
  }

  .single-product .woocommerce-notices-wrapper:not(:empty) {
    width: calc(100% - 24px) !important;
    margin: 12px auto 18px !important;
  }

  .single-product .woocommerce-notices-wrapper .woocommerce-message {
    grid-template-columns: 20px minmax(0, 1fr) !important;
    gap: 10px 12px !important;
    padding: 14px !important;
  }

  .single-product .woocommerce-notices-wrapper .woocommerce-message .button {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    min-width: 0 !important;
  }

  .hqpx-enhanced-card .woocommerce-loop-product__title {
    margin-top: 11px !important;
    font-size: 14px !important;
    padding: 0 !important;
  }

  .hqpx-card-size-rail.is-overflowing .hqpx-card-swatches {
    scroll-snap-type: x mandatory;
  }

  /* Keep the viewport stable while paging; both controls follow the blocks. */
  .hqpx-card-size-rail.is-overflowing,
  .hqpx-card-size-rail.is-overflowing.can-scroll-prev {
    grid-template-columns: minmax(0, 1fr) 28px 28px;
  }
  .hqpx-card-size-rail.is-overflowing .hqpx-card-swatches { grid-column: 1; }
  .hqpx-card-size-rail.is-overflowing .hqpx-card-size-scroll--prev { grid-column: 2; }
  .hqpx-card-size-rail.is-overflowing .hqpx-card-size-scroll--next { grid-column: 3; }

  .hqpx-enhanced-card .hqpx-card-size-rail.is-overflowing button.hqpx-card-swatch {
    flex: 0 0 var(--hqpx-size-slot-width, 44px);
    width: var(--hqpx-size-slot-width, 44px);
    min-width: var(--hqpx-size-slot-width, 44px);
  }

  .hqpx-enhanced-card .price {
    margin-bottom: 10px !important;
    font-size: 13px !important;
  }

  .hqpx-card-option {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .hqpx-card-select,
  .hqpx-card-actions .qty,
  .hqpx-enhanced-card .hqpx-loop-add {
    min-height: 42px;
    font-size: 16px !important;
  }

  .hqpx-card-actions {
    grid-template-columns: 58px minmax(0, 1fr);
  }

  .hqpx-enhanced-card .hqpx-loop-add {
    padding-right: 7px !important;
    padding-left: 7px !important;
    white-space: nowrap;
  }

  .hqpx-card-actions .quantity {
    width: 58px !important;
  }

  .hqpx-enhanced-card button.hqpx-card-swatch {
    min-width: 38px;
    height: 38px;
    padding: 0 8px !important;
  }
}

@container (max-width: 230px) {
  .hqpx-card-actions {
    grid-template-columns: minmax(0, 1fr);
  }

  .hqpx-card-actions .quantity {
    width: 100% !important;
  }

  .hqpx-enhanced-card .woocommerce-loop-product__title {
    min-height: 2.5em;
    margin-top: 10px !important;
    font-size: 13px !important;
  }

  .hqpx-enhanced-card .price {
    margin-bottom: 8px !important;
  }

  .hqpx-enhanced-card button.hqpx-card-swatch {
    min-width: 36px;
    height: 36px;
    padding: 0 7px !important;
    font-size: 11px !important;
  }
}

.hqpx-product-hotspot-card .hqpx-card-option--size .hqpx-card-swatches {
  mask-image: none;
}

.hqpx-product-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.hqpx-product-card-view {
  display: inline-flex;
  margin-top: 9px;
  color: #111;
  font-size: 12px;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hqpx-product-rail {
  --hqpx-rail-columns: 4;
  --hqpx-rail-gap: clamp(16px, 2vw, 28px);
  position: relative;
  min-width: 0;
  max-width: 100%;
}

.hqpx-product-rail-viewport {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

.hqpx-product-rail-viewport::-webkit-scrollbar {
  display: none;
}

.hqpx-product-rail-viewport:focus-visible {
  outline: 2px solid #111;
  outline-offset: 4px;
}

.hqpx-product-rail .hqpx-product-rail-track,
.hqpx-product-rail ul.products.hqpx-product-rail-track {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  gap: var(--hqpx-rail-gap) !important;
  width: 100% !important;
  min-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}

.hqpx-product-rail .hqpx-product-rail-track > li.product {
  flex: 0 0 calc((100% - (var(--hqpx-rail-columns) - 1) * var(--hqpx-rail-gap)) / var(--hqpx-rail-columns));
  width: calc((100% - (var(--hqpx-rail-columns) - 1) * var(--hqpx-rail-gap)) / var(--hqpx-rail-columns)) !important;
  max-width: calc((100% - (var(--hqpx-rail-columns) - 1) * var(--hqpx-rail-gap)) / var(--hqpx-rail-columns));
  margin: 0 !important;
  scroll-snap-align: start;
}

.hqpx-product-rail-navigation {
  position: absolute;
  z-index: 6;
  top: var(--hqpx-rail-navigation-top, 50%);
  right: 8px;
  left: 8px;
  height: 40px;
  margin: 0;
  pointer-events: none;
  transform: translateY(-50%);
}

.hqpx-product-rail-navigation.is-unneeded {
  display: none;
}

.hqpx-product-rail-navigation button {
  position: absolute;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 1px solid #111 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.13) !important;
  color: #111 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  pointer-events: auto;
  cursor: pointer;
}

.hqpx-product-rail-prev { left: 0; }
.hqpx-product-rail-next { right: 0; }

.hqpx-product-rail-navigation button:hover,
.hqpx-product-rail-navigation button:focus-visible {
  background: #111 !important;
  color: #fff !important;
  outline: 2px solid #111;
  outline-offset: 2px;
}

.hqpx-product-rail-navigation button:disabled {
  visibility: hidden;
  pointer-events: none;
}

.hqpx-product-rail.is-dragging,
.hqpx-product-rail.is-dragging * {
  cursor: grabbing !important;
  user-select: none !important;
}

@media (min-width: 768px) and (max-width: 1023px) {
  .hqpx-product-rail { --hqpx-rail-columns: 3; }
}

@media (max-width: 767px) {
  .hqpx-product-rail {
    --hqpx-rail-columns: 2;
    --hqpx-rail-gap: 14px;
  }

  .hqpx-product-rail-navigation {
    right: 4px;
    left: 4px;
  }

  .hqpx-product-rail-navigation button {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    font-size: 18px !important;
  }
}

/* A small script measures the rendered title position, so metadata can sit
   immediately below it without relying on a fragile fixed thumbnail width. */
.woocommerce-checkout-review-order-table td.product-name {
  position: relative !important;
}

/* The checkout template makes the title container as tall as the thumbnail,
   then centres its text. Start both title and selected variation at the image
   top instead, which keeps each product row visually aligned. */
.hq-shopify-checkout .woocommerce-checkout-review-order-table .hq-checkout-product-row,
.hq-shopify-checkout .woocommerce-checkout-review-order-table .hq-checkout-product-info {
  align-items: flex-start !important;
}

.woocommerce-checkout-review-order-table td.product-name > .variation,
.woocommerce-checkout-review-order-table td.product-name > .wc-item-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  gap: 0 4px !important;
  clear: none !important;
  position: absolute !important;
  top: var(--hqpx-checkout-meta-top, auto) !important;
  left: var(--hqpx-checkout-meta-left, 0px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: #686864 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

.woocommerce-checkout-review-order-table td.product-name > .variation dt,
.woocommerce-checkout-review-order-table td.product-name > .variation dd,
.woocommerce-checkout-review-order-table td.product-name > .wc-item-meta li {
  margin: 0 !important;
  padding: 0 !important;
  font: inherit !important;
  line-height: inherit !important;
}

/* Atomic cart titles can retain width:100% plus a 25px start margin.
   Fit only their direct heading owner; never clip the page to hide overflow. */
body.woocommerce-cart main .e-con.e-atomic-element:has(> .e-heading-base) {
  width: auto !important;
  min-width: 0;
  margin-inline-end: 0 !important;
}

.elementor-menu-cart__wrapper .elementor-menu-cart__close-button:focus-visible {
  outline: 2px solid #111;
  outline-offset: 4px;
}

/* Cart and checkout share WooCommerce variation markup. Keep the value in
   the product-name column and directly beneath the title at every breakpoint. */
.woocommerce-cart-form .product-name > .variation,
.woocommerce-cart-form .product-name > .wc-item-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: baseline !important;
  gap: 0 4px !important;
  width: 100% !important;
  margin: 7px 0 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.woocommerce-cart-form .product-name > .variation dt,
.woocommerce-cart-form .product-name > .variation dd,
.woocommerce-cart-form .product-name > .wc-item-meta li {
  margin: 0 !important;
  padding: 0 !important;
  font: inherit !important;
}

/* WooCommerce’s block checkout renders a separate order-summary component.
   For a variation, show the selected value directly beneath its title before
   the price, without changing ordinary product-description cards. */
.wc-block-components-order-summary-item__description.hqpx-checkout-has-variation .wc-block-components-product-metadata {
  order: 1 !important;
  margin-top: 6px !important;
}

.wc-block-components-order-summary-item__description.hqpx-checkout-has-variation .wc-block-cart-item__prices {
  order: 2 !important;
  margin-top: 6px !important;
}

.wc-block-components-order-summary-item__description.hqpx-checkout-has-variation .wc-block-components-product-details {
  margin: 0 !important;
  color: #686864 !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
}

@media (max-width: 767px) {
  .woocommerce-checkout-review-order-table td.product-name > .variation,
  .woocommerce-checkout-review-order-table td.product-name > .wc-item-meta {
    font-size: 12px !important;
  }

  .wc-block-components-order-summary-item__description.hqpx-checkout-has-variation .wc-block-components-product-details {
    font-size: 12px !important;
  }
}

/* Compact catalogue cards: one action, with the original variable form in a
   native top-layer dialog. Standalone hotspot cards retain their own surface. */
.hqpx-compact-card-layout > .hqpx-enhanced-card > .hqpx-loop-form--simple {
  display: block !important;
  padding-top: 0 !important;
}
.hqpx-compact-card-layout > .hqpx-enhanced-card > .hqpx-loop-form--simple .quantity { display: none !important; }
.hqpx-compact-card-layout > .hqpx-enhanced-card > .hqpx-loop-form--simple .hqpx-card-actions { grid-template-columns: minmax(0, 1fr) !important; }
.hqpx-enhanced-card .hqpx-card-choose,
.hqpx-compact-card-layout > .hqpx-enhanced-card > .hqpx-loop-form--simple .hqpx-loop-add {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 11px 12px !important;
  border: 1px solid #111 !important;
  border-radius: 0 !important;
  background: #111 !important;
  color: #fff !important;
  font: inherit;
  font-size: 13px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;
  letter-spacing: 0 !important;
  text-align: center;
  cursor: pointer;
}
.hqpx-enhanced-card .hqpx-card-choose:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
.hqpx-picker-card-status { margin: 7px 0 0; font-size: 12px; line-height: 1.35; text-align: center; }
.hqpx-picker-card-status:empty { display: none; }
body.hqpx-options-open { overflow: hidden; }
dialog.hqpx-options-dialog {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: min(480px, calc(100% - 40px));
  max-width: none;
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 24px 28px 28px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #ddd;
  border-radius: 4px;
  background: #fff;
  color: #111;
  text-align: left;
  font-family: inherit;
  box-shadow: 0 20px 80px rgba(0,0,0,.18);
}
dialog.hqpx-options-dialog::backdrop { background: rgba(0,0,0,.46); }
.hqpx-options-dialog .hqpx-picker-back {
  min-height: 44px;
  margin: -8px 0 16px !important;
  padding: 0 8px 0 0 !important;
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  color: #555 !important;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: none !important;
}
.hqpx-options-dialog .hqpx-picker-back:focus {
  outline: 2px solid #111 !important;
  outline-offset: 3px;
  box-shadow: none !important;
}
.hqpx-options-dialog.hqpx-picker-pointer-focus .hqpx-picker-back:focus {
  outline: none !important;
}
.hqpx-options-dialog .hqpx-picker-title { margin: 0 0 10px !important; color: #111; font-size: clamp(22px, 5vw, 28px); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; }
.hqpx-options-dialog .hqpx-picker-price { margin-bottom: 24px; font-size: 16px; font-weight: 500; }
.hqpx-options-dialog .price { min-height: 0 !important; margin: 0 !important; font-size: inherit !important; }
.hqpx-card-layout > .hqpx-enhanced-card .hqpx-options-dialog .hqpx-loop-form { display: block !important; margin: 0 !important; }
.hqpx-card-layout > .hqpx-enhanced-card .hqpx-options-dialog .hqpx-card-options { min-height: 0 !important; margin: 0 0 24px !important; padding: 0 !important; gap: 20px; }
.hqpx-options-dialog .hqpx-card-option { display: block; }
.hqpx-options-dialog .hqpx-card-option-label { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 600; text-align: left; }
.hqpx-options-dialog .hqpx-card-option-label--visually-hidden { position: static !important; width: auto !important; height: auto !important; margin: 0 0 10px !important; clip: auto !important; clip-path: none !important; white-space: normal !important; overflow: visible !important; }
.hqpx-options-dialog .hqpx-card-size-rail { display: block !important; }
.hqpx-options-dialog .hqpx-card-swatches { flex-wrap: wrap !important; justify-content: center !important; overflow: visible !important; padding: 0 !important; gap: 8px; }
.hqpx-options-dialog .hqpx-card-size-scroll { display: none !important; }
.hqpx-enhanced-card .hqpx-options-dialog .hqpx-card-size-rail button.hqpx-card-swatch,
.hqpx-enhanced-card .hqpx-options-dialog button.hqpx-card-swatch { flex: 0 0 auto; width: auto !important; min-width: 48px !important; height: 44px !important; padding: 0 14px !important; font-size: 13px !important; }
.hqpx-enhanced-card .hqpx-options-dialog .hqpx-card-option--size button.hqpx-card-swatch { flex: 0 0 calc((100% - 16px) / 3); width: calc((100% - 16px) / 3) !important; }
.hqpx-options-dialog .hqpx-card-actions { grid-template-columns: 68px minmax(0, 1fr) !important; gap: 10px; }
.hqpx-options-dialog .hqpx-card-actions .quantity { display: block !important; width: 68px !important; }
.hqpx-options-dialog .hqpx-card-actions .qty,
.hqpx-options-dialog .hqpx-loop-add { min-height: 48px !important; height: 48px !important; font-size: 15px !important; }
@media (max-width: 767px) {
  dialog.hqpx-options-dialog { inset: auto 0 0; width: 100%; max-height: 86vh; max-height: 86dvh; margin: 0; padding: 20px 22px calc(24px + env(safe-area-inset-bottom)); border-width: 1px 0 0; border-radius: 14px 14px 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .hqpx-card-media > img,
  .hqpx-card-media > picture > img,
  .hqpx-enhanced-card .hqpx-loop-add,
  .hqpx-enhanced-card .hqpx-card-details {
    transition: none !important;
  }
}