/* Directional carousel controls use one shared source-style treatment:
 * white circular surface, fine neutral edge and a restrained shadow.  Keep
 * positioning, visibility and disabled-state logic in their component files.
 */
.qt-carousel .qt-carousel__arrow,
.qt-product-gallery__arrow,
.qt-product-gallery__thumb-arrow,
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button,
.qt-related .qt-carousel__arrow,
.qt-gallery-lightbox .qt-gallery-lightbox__arrow {
  border: 1px solid #e2e8eb !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #173f50 !important;
  box-shadow: 0 4px 16px rgba(31, 54, 65, .12) !important;
}

.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button {
  width: 30px !important;
  height: 30px !important;
}

.qt-carousel .qt-carousel__arrow:hover:not(:disabled),
.qt-carousel .qt-carousel__arrow:focus-visible,
.qt-product-gallery__arrow:hover:not(:disabled),
.qt-product-gallery__arrow:focus-visible,
.qt-product-gallery__thumb-arrow:hover:not(:disabled),
.qt-product-gallery__thumb-arrow:focus-visible,
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button:hover:not(:disabled),
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button:focus-visible,
.qt-related .qt-carousel__arrow:hover:not(:disabled),
.qt-related .qt-carousel__arrow:focus-visible,
.qt-gallery-lightbox .qt-gallery-lightbox__arrow:hover,
.qt-gallery-lightbox .qt-gallery-lightbox__arrow:focus-visible {
  border-color: #cbd8de !important;
  background: #f8fafb !important;
  color: #0a5576 !important;
  box-shadow: 0 5px 18px rgba(31, 54, 65, .16) !important;
}

.qt-carousel .qt-carousel__arrow:disabled,
.qt-product-gallery__arrow:disabled,
.qt-product-gallery__thumb-arrow:disabled,
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button:disabled,
.qt-related .qt-carousel__arrow:disabled,
.qt-gallery-lightbox .qt-gallery-lightbox__arrow:disabled,
.qt-product-gallery--rebuild .qt-product-gallery__arrow[data-gallery-boundary="true"],
.qt-product-gallery--rebuild .qt-product-gallery__arrow[data-gallery-boundary="true"]:hover {
  border-color: #e3e8eb !important;
  background: #f5f7f8 !important;
  color: #aeb9bf !important;
  box-shadow: none !important;
}

.qt-carousel .qt-carousel__arrow .qt-icon,
.qt-product-gallery__arrow .qt-icon,
.qt-product-gallery__thumb-arrow .qt-icon,
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button .qt-icon,
.qt-related .qt-carousel__arrow .qt-icon,
.qt-gallery-lightbox .qt-gallery-lightbox__arrow .qt-icon {
  color: inherit;
}

.qt-gallery-lightbox .qt-gallery-lightbox__arrow {
  display: grid;
  width: 52px !important;
  height: 52px !important;
  padding: 0 !important;
  place-items: center;
}

.qt-gallery-lightbox .qt-gallery-lightbox__arrow .qt-icon {
  width: 22px !important;
  height: 22px !important;
}

@media (prefers-reduced-motion: reduce) {
  .qt-carousel .qt-carousel__arrow,
  .qt-product-gallery__arrow,
  .qt-product-gallery__thumb-arrow,
  .qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button,
  .qt-related .qt-carousel__arrow,
  .qt-gallery-lightbox .qt-gallery-lightbox__arrow {
    transition-duration: .01ms !important;
  }
}

@media (max-width: 640px) {
  .qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button {
    width: 28px !important;
    height: 28px !important;
  }

  .qt-gallery-lightbox .qt-gallery-lightbox__arrow {
    width: 46px !important;
    height: 46px !important;
  }
}

/* Unified source-style controls for the requested page carousels.
 * The existing templates use shafted arrow SVGs in these buttons; hide that
 * artwork and draw the measured solid chevron so Hero, Testimonials and
 * Certifications share the same visual language as the product gallery. */
.qt-hero .qt-carousel__arrow,
.qt-testimonials .qt-carousel__arrow,
#certifications .qt-carousel__arrow {
  width: 48px !important;
  height: 48px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #003349 !important;
  box-shadow: 0 4px 4px rgba(183, 183, 183, .2) !important;
}
.qt-hero .qt-carousel__arrow .qt-icon,
.qt-testimonials .qt-carousel__arrow .qt-icon,
#certifications .qt-carousel__arrow .qt-icon,
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button .qt-icon {
  display: none !important;
}
.qt-hero .qt-carousel__arrow::before,
.qt-testimonials .qt-carousel__arrow::before,
#certifications .qt-carousel__arrow::before,
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: currentColor;
  clip-path: polygon(39% 2.3%, 28% 13.3%, 64.25% 49.8%, 28% 86%, 39% 97%, 75.25% 60.5%, 86.25% 49.8%, 75.25% 38.8%);
}
.qt-hero .qt-carousel__arrow--prev::before,
.qt-testimonials .qt-carousel__arrow--prev::before,
#certifications .qt-carousel__arrow--prev::before,
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button--prev::before {
  transform: scaleX(-1);
}
.qt-hero .qt-carousel__arrow:hover:not(:disabled),
.qt-testimonials .qt-carousel__arrow:hover:not(:disabled),
#certifications .qt-carousel__arrow:hover:not(:disabled) {
  border: 0 !important;
  background: color-mix(in srgb, #c4cfd5 30%, #fff) !important;
  color: #003349 !important;
  box-shadow: 0 8px 8px rgba(183, 183, 183, .2) !important;
}
.qt-hero .qt-carousel__arrow:focus-visible,
.qt-testimonials .qt-carousel__arrow:focus-visible,
#certifications .qt-carousel__arrow:focus-visible {
  outline: 2px solid #003349;
  outline-offset: 2px;
}
.qt-hero .qt-carousel__arrow:disabled,
.qt-testimonials .qt-carousel__arrow:disabled,
#certifications .qt-carousel__arrow:disabled,
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button:disabled {
  background: #fff !important;
  color: #c1c1c1 !important;
  box-shadow: 0 4px 4px rgba(183, 183, 183, .2) !important;
  opacity: 1 !important;
}
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button {
  border: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #003349 !important;
  box-shadow: 0 4px 4px rgba(183, 183, 183, .2) !important;
}
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button::before {
  width: 14px;
  height: 14px;
}
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button:hover:not(:disabled),
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button:focus-visible {
  background: color-mix(in srgb, #c4cfd5 30%, #fff) !important;
  color: #003349 !important;
  box-shadow: 0 8px 8px rgba(183, 183, 183, .2) !important;
}

@media (max-width: 640px) {
  .qt-hero .qt-carousel__arrow,
  .qt-testimonials .qt-carousel__arrow,
  #certifications .qt-carousel__arrow {
    width: 40px !important;
    height: 40px !important;
  }
  .qt-hero .qt-carousel__arrow::before,
  .qt-testimonials .qt-carousel__arrow::before,
  #certifications .qt-carousel__arrow::before {
    width: 18px;
    height: 18px;
  }
}

/* Product main-gallery controls mirror the measured La-Z-Boy Splide control:
 * 48px white circle, source teal chevron, and the restrained 4px shadow.
 * This is deliberately scoped so thumbnail, hero, summary and drawer arrows
 * keep their existing QIANTONG treatments. */
.qt-product-gallery--rebuild .qt-product-gallery__arrow {
  width: 48px !important;
  height: 48px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #003349 !important;
  box-shadow: 0 4px 4px rgba(183, 183, 183, .2) !important;
}
.qt-product-gallery--rebuild .qt-product-gallery__arrow .qt-icon {
  width: 20px !important;
  height: 20px !important;
}
.qt-product-gallery--rebuild .qt-product-gallery__arrow--prev .qt-icon {
  transform: scaleX(-1);
}
.qt-product-gallery--rebuild .qt-product-gallery__arrow:hover:not([data-gallery-boundary="true"]),
.qt-product-gallery--rebuild .qt-product-gallery__arrow:active:not([data-gallery-boundary="true"]) {
  border: 0 !important;
  background: color-mix(in srgb, #c4cfd5 30%, #fff) !important;
  color: #003349 !important;
  box-shadow: 0 8px 8px rgba(183, 183, 183, .2) !important;
}
.qt-product-gallery--rebuild .qt-product-gallery__arrow:focus-visible:not([data-gallery-boundary="true"]) {
  border: 2px solid #003349 !important;
  background: #fff !important;
  color: #003349 !important;
  box-shadow: 0 4px 4px rgba(183, 183, 183, .2) !important;
}
.qt-product-gallery--rebuild .qt-product-gallery__arrow[data-gallery-boundary="true"],
.qt-product-gallery--rebuild .qt-product-gallery__arrow[data-gallery-boundary="true"]:hover,
.qt-product-gallery--rebuild .qt-product-gallery__arrow[data-gallery-boundary="true"]:active,
.qt-product-gallery--rebuild .qt-product-gallery__arrow[data-gallery-boundary="true"]:focus-visible {
  border: 0 !important;
  background: #fff !important;
  color: #c1c1c1 !important;
  box-shadow: 0 4px 4px rgba(183, 183, 183, .2) !important;
}

@media (max-width: 640px) {
  .qt-product-gallery--rebuild .qt-product-gallery__arrow {
    width: 40px !important;
    height: 40px !important;
  }
  .qt-product-gallery--rebuild .qt-product-gallery__arrow .qt-icon {
    width: 18px !important;
    height: 18px !important;
  }
}

/* Glyph-only refinement: the requested arrow is the chevron itself.
 * Preserve each control's hit area and interaction state, but do not paint
 * a new circle, border, or shadow behind it. */
.qt-carousel .qt-carousel__arrow,
.qt-product-gallery__arrow,
.qt-product-gallery__thumb-arrow,
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button,
.qt-related .qt-carousel__arrow,
.qt-gallery-lightbox .qt-gallery-lightbox__arrow {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
.qt-carousel .qt-carousel__arrow:hover:not(:disabled),
.qt-carousel .qt-carousel__arrow:focus-visible,
.qt-product-gallery__arrow:hover:not(:disabled),
.qt-product-gallery__arrow:focus-visible,
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button:hover:not(:disabled),
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button:focus-visible,
.qt-related .qt-carousel__arrow:hover:not(:disabled),
.qt-related .qt-carousel__arrow:focus-visible,
.qt-gallery-lightbox .qt-gallery-lightbox__arrow:hover,
.qt-gallery-lightbox .qt-gallery-lightbox__arrow:focus-visible {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
.qt-product-gallery--rebuild .qt-product-gallery__arrow[data-gallery-boundary="true"],
.qt-product-gallery--rebuild .qt-product-gallery__arrow[data-gallery-boundary="true"]:hover,
.qt-product-gallery--rebuild .qt-product-gallery__arrow[data-gallery-boundary="true"]:focus-visible,
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button:disabled {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
.qt-product-gallery--rebuild .qt-product-gallery__arrow,
.qt-product-gallery--rebuild .qt-product-gallery__arrow:hover,
.qt-product-gallery--rebuild .qt-product-gallery__arrow:focus-visible,
.qt-product-gallery--rebuild .qt-product-gallery__arrow:active {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}
#certifications .qt-cert-carousel .qt-carousel__arrow,
#certifications .qt-cert-carousel .qt-carousel__arrow:hover,
#certifications .qt-cert-carousel .qt-carousel__arrow:focus-visible,
#certifications .qt-cert-carousel .qt-carousel__arrow:active {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Image/card switching controls keep the circular hit surface used in the
 * earlier gallery treatment. Inline arrows remain glyph-only. */
.qt-carousel .qt-carousel__arrow,
.qt-product-gallery--rebuild .qt-product-gallery__arrow,
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button,
.qt-gallery-lightbox .qt-gallery-lightbox__arrow {
  border: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #003349 !important;
  box-shadow: 0 4px 4px rgba(183, 183, 183, .2) !important;
}
.qt-carousel .qt-carousel__arrow:hover:not(:disabled),
.qt-carousel .qt-carousel__arrow:focus-visible,
.qt-product-gallery--rebuild .qt-product-gallery__arrow:hover:not([data-gallery-boundary="true"]),
.qt-product-gallery--rebuild .qt-product-gallery__arrow:focus-visible:not([data-gallery-boundary="true"]),
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button:hover:not(:disabled),
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button:focus-visible,
.qt-gallery-lightbox .qt-gallery-lightbox__arrow:hover,
.qt-gallery-lightbox .qt-gallery-lightbox__arrow:focus-visible {
  border: 0 !important;
  background: color-mix(in srgb, #c4cfd5 30%, #fff) !important;
  color: #003349 !important;
  box-shadow: 0 8px 8px rgba(183, 183, 183, .2) !important;
}
.qt-product-gallery--rebuild .qt-product-gallery__arrow[data-gallery-boundary="true"],
.qt-product-gallery--rebuild .qt-product-gallery__arrow[data-gallery-boundary="true"]:hover,
.qt-product-gallery--rebuild .qt-product-gallery__arrow[data-gallery-boundary="true"]:focus-visible,
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button:disabled,
.qt-carousel .qt-carousel__arrow:disabled {
  border: 0 !important;
  background: #fff !important;
  color: #c1c1c1 !important;
  box-shadow: 0 4px 4px rgba(183, 183, 183, .2) !important;
  opacity: 1 !important;
}
#certifications .qt-cert-carousel .qt-carousel__arrow,
#certifications .qt-cert-carousel .qt-carousel__arrow:hover,
#certifications .qt-cert-carousel .qt-carousel__arrow:focus-visible {
  border: 0 !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #003349 !important;
  box-shadow: 0 4px 4px rgba(183, 183, 183, .2) !important;
}

/* Thumbnail navigation is an inline control, not an image-surface control.
 * Keep its chevron hit area and disabled color, but remove the circular
 * background that belongs to the large gallery arrows. */
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button,
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button:hover,
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button:focus-visible,
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button:disabled {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Boundary arrows are still usable and turn muted when the gallery is at an
 * edge, but the whole main-image control group stays hidden until the image
 * itself is hovered (or the control receives keyboard focus). */
.qt-product-gallery--rebuild .qt-product-gallery__viewport:not(:hover):not(.is-pointer-active) .qt-product-gallery__arrow:not(:focus-visible) {
  opacity: 0 !important;
  pointer-events: none !important;
}
.qt-product-gallery--rebuild .qt-product-gallery__viewport:hover .qt-product-gallery__arrow,
.qt-product-gallery--rebuild .qt-product-gallery__viewport.is-pointer-active .qt-product-gallery__arrow {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Thumbnail arrows keep a transparent hit area; hover/focus is communicated
 * by the chevron color alone. */
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button {
  color: #003349 !important;
  background-color: transparent !important;
  background-image: none !important;
  transform: none !important;
  transition: color .18s ease, transform .18s ease !important;
}
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button:hover:not(:disabled),
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button:focus-visible {
  color: #7f99a4 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
}
.qt-product-gallery--rebuild .qt-product-gallery__thumb-nav-button:disabled {
  color: #aeb9bf !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

/* Related-product/category arrows remain clickable at the carousel edges,
 * but use the muted source-state treatment both at rest and on hover. */
.qt-related__carousel .qt-carousel__arrow[data-carousel-boundary="true"],
.qt-related__carousel .qt-carousel__arrow[data-carousel-boundary="true"]:hover,
.qt-related__carousel .qt-carousel__arrow[data-carousel-boundary="true"]:focus-visible,
.qt-related__carousel .qt-carousel__arrow[data-carousel-boundary="true"]:active {
  border: 0 !important;
  background: #fff !important;
  color: #c1c1c1 !important;
  box-shadow: 0 4px 4px rgba(183, 183, 183, .2) !important;
  opacity: 1 !important;
  cursor: pointer;
}
