/* Button Library V3, approved 2026-10-11 (including the grey arrow exception).
 * Three styles:solid / blue outline / text. Legacy selectors are aliases.
 * Arrow-only paging keeps grey outlines and blue-fill hover. Utility icons stay
 * neutral, and text actions use text-only feedback (user correction 2026-10-11).
 * Scoped !important declarations bridge legacy page/ID rules during migration.
 * Load after page styles; new controls should use .ui-button + optional
 * --solid / --text / --icon / --arrow / --round modifiers.
 */
:root {
  --ui-brand: #0072ce !important;
  --ui-hover: #0054a6 !important;
  --ui-pressed: #003e7d !important;
  --ui-line: #d8dde1 !important;
  --ui-arrow: #4d4d4d !important;
  --ui-soft: #f1f7fc !important;
  --ui-disabled: #e9eef2 !important;
  --ui-disabled-ink: #75818b !important;
  --ui-motion: 180ms ease !important;
  --ui-shadow: 0 6px 16px rgb(0 61 118 / 24%) !important;
}
:root
  body
  :where(
    .cp-btn,
    #successModal .cp-modal-actions .cp-btn,
    #forgotModal .cp-btn,
    .ui-button,
    #newsletterForm button,
    .filter-confirm,
    .filter-clear-all,
    .product-card-add,
    .product-load-more,
    .header-navbar,
    .header-user,
    .header-cart,
    .burger-close,
    .cp-modal-close,
    .footer-social-icon,
    .swiper-button-prev,
    .swiper-button-next,
    .product-search button,
    .order-search button,
    .inquiry-search button,
    .login-forgot,
    .login-apply-link a,
    .member-edit,
    .order-back,
    .single-extra-specs summary,
    .laimu-job-link,
    .cart-list .item-del,
    .filter-tag-remove,
    .caper-captcha-refresh
  ) {
  --button-hover-bg: var(--ui-hover) !important;
  --button-hover-border: var(--ui-hover) !important;
  --button-hover-ink: #fff !important;
  --button-hover-decoration: none !important;
  --button-active-bg: var(--ui-pressed) !important;
  --button-active-border: var(--ui-pressed) !important;
  --button-active-ink: #fff !important;
  --button-bg: transparent !important;
  --button-border: var(--ui-brand) !important;
  --button-ink: var(--ui-brand) !important;
  --button-focus: var(--ui-brand) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-height: 48px !important;
  height: auto !important;
  max-width: 100% !important;
  padding: 12px 24px !important;
  border: 1px solid var(--button-border) !important;
  border-radius: 0 !important;
  background: var(--button-bg) !important;
  color: var(--button-ink) !important;
  box-shadow: none !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  text-align: center !important;
  text-decoration: none !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  cursor: pointer !important;
  transform: none !important;
  transition:
    color var(--ui-motion),
    background-color var(--ui-motion),
    border-color var(--ui-motion),
    box-shadow var(--ui-motion) !important;
}
:root
  body
  :where(
    .cp-btn-solid,
    #forgotModal .cp-btn-solid,
    .ui-button--solid,
    #newsletterForm button,
    .filter-confirm
  ) {
  --button-bg: var(--ui-brand) !important;
  --button-border: var(--ui-brand) !important;
  --button-ink: #fff !important;
}
:root
  body
  :where(
    .cp-btn-text,
    .ui-button--text,
    .product-card-add,
    .filter-clear-all,
    .product-load-more,
    .header-navbar,
    .header-user,
    .header-cart,
    .burger-close,
    .cp-modal-close,
    .product-search button,
    .order-search button,
    .inquiry-search button,
    .login-forgot,
    .login-apply-link a,
    .member-edit,
    .order-back,
    .single-extra-specs summary,
    .laimu-job-link,
    .cart-list .item-del,
    .filter-tag-remove
  ) {
  --button-border: transparent !important;
  --button-hover-bg: transparent !important;
  --button-hover-border: transparent !important;
  --button-hover-ink: var(--ui-hover) !important;
  --button-hover-decoration: underline !important;
  --button-active-bg: transparent !important;
  --button-active-border: transparent !important;
  --button-active-ink: var(--ui-pressed) !important;
  padding-inline: 12px !important;
  text-underline-offset: 4px !important;
}
/* Navigation and utility glyphs are neutral; only the glyph changes on hover. */
:root
  body
  :where(
    .ui-button--icon:not(.ui-button--arrow),
    .header-navbar,
    .header-user,
    .header-cart,
    .burger-close,
    .cp-modal-close,
    .product-search button,
    .order-search button,
    .inquiry-search button,
    .filter-tag-remove
  ) {
  --button-border: transparent !important;
  --button-ink: #333 !important;
  --button-hover-bg: transparent !important;
  --button-hover-border: transparent !important;
  --button-hover-ink: var(--ui-brand) !important;
  --button-hover-decoration: none !important;
  --button-active-bg: transparent !important;
  --button-active-border: transparent !important;
  --button-active-ink: var(--ui-pressed) !important;
}
/* Preserve the original social treatment: black icons within light grey circles. */
:root body .footer-social-icon {
  --button-border: #ddd !important;
  --button-ink: #000 !important;
  --button-hover-bg: transparent !important;
  --button-hover-border: var(--ui-brand) !important;
  --button-hover-ink: var(--ui-brand) !important;
  --button-active-bg: transparent !important;
  --button-active-border: var(--ui-pressed) !important;
  --button-active-ink: var(--ui-pressed) !important;
}
:root body .cp-btn-white {
  --button-border: #fff !important;
  --button-ink: #fff !important;
  --button-focus: #fff !important;
}
:root
  body
  :where(
    .ui-button--icon,
    .header-navbar,
    .header-user,
    .header-cart,
    .burger-close,
    .cp-modal-close,
    .footer-social-icon,
    .swiper-button-prev,
    .swiper-button-next,
    .product-search button,
    .order-search button,
    .inquiry-search button,
    .filter-tag-remove
  ) {
  min-width: 44px !important;
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
}
:root
  body
  :where(
    .swiper-button-prev,
    .swiper-button-next,
    .ui-button--arrow,
    .pager-arrow
  ) {
  --button-border: var(--ui-line) !important;
  --button-ink: var(--ui-arrow) !important;
}
:root body :where(.footer-social-icon, .ui-button--round) {
  border-radius: 50% !important;
}
/* Legacy arrow strokes, close controls and nested labels inherit currentColor. */
:root body .cp-btn::before {
  display: none !important;
}
:root body :where(.cp-btn, #successModal .cp-modal-actions .cp-btn) .cp-arrow,
:root
  body
  :where(.cp-btn, #successModal .cp-modal-actions .cp-btn)
  .cp-arrow::before,
:root
  body
  :where(.cp-btn, #successModal .cp-modal-actions .cp-btn)
  .cp-arrow::after {
  background: currentColor !important;
}
:root body :where(.cp-btn, #successModal .cp-modal-actions .cp-btn) .cp-arrow {
  margin-left: 0 !important;
  transform: none !important;
  transition: transform var(--ui-motion) !important;
  flex: none !important;
}
:root body :where(.swiper-button-prev, .swiper-button-next)::after {
  color: currentColor !important;
}
:root body .header-navbar {
  padding: 8px !important;
}
:root body .header-navbar span {
  background: currentColor !important;
}
:root body :where(.burger-close, .cp-modal-close)::before,
:root body :where(.burger-close, .cp-modal-close)::after {
  background: currentColor !important;
  transition: background-color var(--ui-motion) !important;
}
:root body .burger-close::before,
:root body .burger-close::after {
  width: 24px !important;
  margin-left: -12px !important;
}
:root body .cp-button-copy {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}
:root body .caper-captcha-refresh {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  width: 100% !important;
  padding: 0 !important;
}
:root body .caper-captcha-refresh-copy {
  color: inherit !important;
}
:root body .laimu-carousel-controls {
  width: 104px !important;
  height: 44px !important;
}
:root body #newsletterForm {
  height: auto !important;
  min-height: 48px !important;
  align-items: stretch !important;
}
:root body #newsletter-email {
  height: auto !important;
  min-height: 46px !important;
}
:root body #newsletterForm button {
  margin: -1px -1px -1px 0 !important;
  flex: 0 0 112px !important;
}
:root body .single-actions {
  gap: 16px !important;
}
:root
  body
  :where(
    .filter-trigger,
    .order-tab,
    .inquiry-tab,
    .order-pager a,
    .order-pager button,
    .inquiry-pager a,
    .inquiry-pager button,
    .product-series button,
    .laimu-history-years button
  ) {
  min-height: 44px !important;
  color: var(--ui-brand) !important;
  transition:
    color var(--ui-motion),
    background-color var(--ui-motion),
    border-color var(--ui-motion) !important;
}
:root body :where(.order-pager, .inquiry-pager) :is(a, button) {
  --button-border: var(--ui-brand) !important;
  --button-ink: var(--ui-brand) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  height: 44px !important;
  padding: 0 8px !important;
  border: 1px solid var(--button-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: var(--button-ink) !important;
  font: inherit !important;
  cursor: pointer !important;
}
:root body :where(.order-pager, .inquiry-pager) .pager-arrow {
  --button-border: var(--ui-line) !important;
  --button-ink: var(--ui-arrow) !important;
}
:root body :where(.order-pager, .inquiry-pager) [aria-current="page"] {
  background: var(--ui-brand) !important;
  border-color: var(--ui-brand) !important;
  color: #fff !important;
}
:root body :where(.inquiry-tab, .order-tab) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 12px !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  font: inherit !important;
}
:root body :where(.order-tab, .inquiry-tab)[aria-pressed="true"] {
  color: var(--ui-brand) !important;
  border-bottom-color: var(--ui-brand) !important;
}
@media (hover: hover) and (pointer: fine) {
  :root
    body
    :where(
      .cp-btn,
      #successModal .cp-modal-actions .cp-btn,
      #forgotModal .cp-btn,
      .ui-button,
      #newsletterForm button,
      .filter-confirm,
      .filter-clear-all,
      .product-card-add,
      .product-load-more,
      .header-navbar,
      .header-user,
      .header-cart,
      .burger-close,
      .cp-modal-close,
      .footer-social-icon,
      .swiper-button-prev,
      .swiper-button-next,
      .product-search button,
      .order-search button,
      .inquiry-search button,
      .login-forgot,
      .login-apply-link a,
      .member-edit,
      .order-back,
      .single-extra-specs summary,
      .laimu-job-link,
      .cart-list .item-del,
      .filter-tag-remove,
      .caper-captcha-refresh
    ):not(:disabled):not([aria-disabled="true"]):not(.disabled):not(
      .swiper-button-disabled
    ):not(.is-busy):not(.is-loading):not([aria-busy="true"]):hover,
  :root
    body
    :where(
      .filter-trigger,
      .order-tab,
      .inquiry-tab,
      .order-pager a,
      .order-pager button,
      .inquiry-pager a,
      .inquiry-pager button,
      .product-series button,
      .laimu-history-years button
    ):not(:disabled):not([aria-disabled="true"]):not(.disabled):not(
      .swiper-button-disabled
    ):not(.is-busy):not(.is-loading):not([aria-busy="true"]):hover {
    background: var(--button-hover-bg, var(--ui-hover)) !important;
    border-color: var(--button-hover-border, var(--ui-hover)) !important;
    color: var(--button-hover-ink, #fff) !important;
    text-decoration: var(--button-hover-decoration, none) !important;
  }
  :root
    body
    :where(
      .cp-btn-solid,
      #forgotModal .cp-btn-solid,
      .ui-button--solid,
      #newsletterForm button,
      .filter-confirm
    ):not(:disabled):not([aria-disabled="true"]):not(.disabled):not(
      .swiper-button-disabled
    ):not(.is-busy):not(.is-loading):not([aria-busy="true"]):hover {
    box-shadow: var(--ui-shadow) !important;
  }
  :root
    body
    .cp-btn:not(:disabled):not([aria-disabled="true"]):not(.disabled):not(
      .swiper-button-disabled
    ):not(.is-busy):not(.is-loading):not([aria-busy="true"]):hover
    .cp-arrow {
    transform: translateX(3px) !important;
  }
  :root body .product-series button:hover h3 {
    color: inherit !important;
  }
  :root body .product-series button:hover img {
    filter: brightness(0) invert(1) !important;
  }
}
:root
  body
  :where(
    .cp-btn,
    #successModal .cp-modal-actions .cp-btn,
    #forgotModal .cp-btn,
    .ui-button,
    #newsletterForm button,
    .filter-confirm,
    .filter-clear-all,
    .product-card-add,
    .product-load-more,
    .header-navbar,
    .header-user,
    .header-cart,
    .burger-close,
    .cp-modal-close,
    .footer-social-icon,
    .swiper-button-prev,
    .swiper-button-next,
    .product-search button,
    .order-search button,
    .inquiry-search button,
    .login-forgot,
    .login-apply-link a,
    .member-edit,
    .order-back,
    .single-extra-specs summary,
    .laimu-job-link,
    .cart-list .item-del,
    .filter-tag-remove,
    .caper-captcha-refresh
  ):not(:disabled):not([aria-disabled="true"]):not(.disabled):not(
    .swiper-button-disabled
  ):not(.is-busy):not(.is-loading):not([aria-busy="true"]):active,
:root
  body
  :where(
    .filter-trigger,
    .order-tab,
    .inquiry-tab,
    .order-pager a,
    .order-pager button,
    .inquiry-pager a,
    .inquiry-pager button,
    .product-series button,
    .laimu-history-years button
  ):not(:disabled):not([aria-disabled="true"]):not(.disabled):not(
    .swiper-button-disabled
  ):not(.is-busy):not(.is-loading):not([aria-busy="true"]):active {
  background: var(--button-active-bg, var(--ui-pressed)) !important;
  border-color: var(--button-active-border, var(--ui-pressed)) !important;
  color: var(--button-active-ink, #fff) !important;
  box-shadow: none !important;
}
:root
  body
  :where(
    .cp-btn,
    #successModal .cp-modal-actions .cp-btn,
    #forgotModal .cp-btn,
    .ui-button,
    #newsletterForm button,
    .filter-confirm,
    .filter-clear-all,
    .product-card-add,
    .product-load-more,
    .header-navbar,
    .header-user,
    .header-cart,
    .burger-close,
    .cp-modal-close,
    .footer-social-icon,
    .swiper-button-prev,
    .swiper-button-next,
    .product-search button,
    .order-search button,
    .inquiry-search button,
    .login-forgot,
    .login-apply-link a,
    .member-edit,
    .order-back,
    .single-extra-specs summary,
    .laimu-job-link,
    .cart-list .item-del,
    .filter-tag-remove,
    .caper-captcha-refresh
  ):focus-visible,
:root
  body
  :where(
    .filter-trigger,
    .order-tab,
    .inquiry-tab,
    .order-pager a,
    .order-pager button,
    .inquiry-pager a,
    .inquiry-pager button,
    .product-series button,
    .laimu-history-years button
  ):focus-visible {
  outline: 2px solid var(--button-focus, var(--ui-brand)) !important;
  outline-offset: 4px !important;
}
:root
  body
  :where(
    .cp-btn,
    #successModal .cp-modal-actions .cp-btn,
    #forgotModal .cp-btn,
    .ui-button,
    #newsletterForm button,
    .filter-confirm,
    .filter-clear-all,
    .product-card-add,
    .product-load-more,
    .header-navbar,
    .header-user,
    .header-cart,
    .burger-close,
    .cp-modal-close,
    .footer-social-icon,
    .swiper-button-prev,
    .swiper-button-next,
    .product-search button,
    .order-search button,
    .inquiry-search button,
    .login-forgot,
    .login-apply-link a,
    .member-edit,
    .order-back,
    .single-extra-specs summary,
    .laimu-job-link,
    .cart-list .item-del,
    .filter-tag-remove,
    .caper-captcha-refresh
  ):is(
    :disabled,
    [aria-disabled="true"],
    .disabled,
    .swiper-button-disabled
  ):not(.is-busy):not(.is-loading),
:root
  body
  :where(
    .filter-trigger,
    .order-tab,
    .inquiry-tab,
    .order-pager a,
    .order-pager button,
    .inquiry-pager a,
    .inquiry-pager button,
    .product-series button,
    .laimu-history-years button
  ):is(:disabled, [aria-disabled="true"], .disabled) {
  background: var(--ui-disabled) !important;
  border-color: var(--ui-disabled) !important;
  color: var(--ui-disabled-ink) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}
:root
  body
  :where(
    .cp-btn-text,
    .ui-button--text,
    .product-card-add,
    .filter-clear-all,
    .product-load-more,
    .header-navbar,
    .header-user,
    .header-cart,
    .burger-close,
    .cp-modal-close,
    .product-search button,
    .order-search button,
    .inquiry-search button,
    .login-forgot,
    .login-apply-link a,
    .member-edit,
    .order-back,
    .single-extra-specs summary,
    .laimu-job-link,
    .cart-list .item-del,
    .filter-tag-remove
  ):is(:disabled, [aria-disabled="true"], .disabled):not(.is-busy):not(
    .is-loading
  ) {
  background: transparent !important;
  border-color: transparent !important;
}
:root
  body
  :where(
    .cp-btn,
    #successModal .cp-modal-actions .cp-btn,
    #forgotModal .cp-btn,
    .ui-button,
    #newsletterForm button,
    .filter-confirm,
    .filter-clear-all,
    .product-card-add,
    .product-load-more,
    .header-navbar,
    .header-user,
    .header-cart,
    .burger-close,
    .cp-modal-close,
    .footer-social-icon,
    .swiper-button-prev,
    .swiper-button-next,
    .product-search button,
    .order-search button,
    .inquiry-search button,
    .login-forgot,
    .login-apply-link a,
    .member-edit,
    .order-back,
    .single-extra-specs summary,
    .laimu-job-link,
    .cart-list .item-del,
    .filter-tag-remove,
    .caper-captcha-refresh
  ):is(.is-busy, .is-loading, [aria-busy="true"]) {
  background: var(--button-bg) !important;
  border-color: var(--button-border) !important;
  color: var(--button-ink) !important;
  box-shadow: none !important;
  cursor: wait !important;
}
@media (max-width: 768px) {
  :root body :where(.single-actions, .access-actions, .product-empty-actions) {
    gap: 12px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  :root
    body
    :where(
      .cp-btn,
      #successModal .cp-modal-actions .cp-btn,
      #forgotModal .cp-btn,
      .ui-button,
      #newsletterForm button,
      .filter-confirm,
      .filter-clear-all,
      .product-card-add,
      .product-load-more,
      .header-navbar,
      .header-user,
      .header-cart,
      .burger-close,
      .cp-modal-close,
      .footer-social-icon,
      .swiper-button-prev,
      .swiper-button-next,
      .product-search button,
      .order-search button,
      .inquiry-search button,
      .login-forgot,
      .login-apply-link a,
      .member-edit,
      .order-back,
      .single-extra-specs summary,
      .laimu-job-link,
      .cart-list .item-del,
      .filter-tag-remove,
      .caper-captcha-refresh
    ),
  :root
    body
    :where(
      .filter-trigger,
      .order-tab,
      .inquiry-tab,
      .order-pager a,
      .order-pager button,
      .inquiry-pager a,
      .inquiry-pager button,
      .product-series button,
      .laimu-history-years button
    ) {
    transition: none !important;
  }
  :root body .cp-btn:hover .cp-arrow {
    transform: none !important;
  }
}

/* Small glyphs and compact choice controls follow the shared foreground. */
:root body .filter-trigger .filter-count {
  color: inherit !important;
}
:root body .filter-arrow {
  border-top-color: currentColor !important;
}

/* Visibility belongs to page state, including Swiper overflow locking. */
:root body [hidden],
:root body .swiper-button-lock {
  display: none !important;
}
/* Glyphs must retain their own geometry inside the 44px icon hit area. */
:root body .header-navbar {
  gap: 7px !important;
}
:root body .header-navbar span {
  height: 2px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}
:root body .filter-arrow::before,
:root body .filter-arrow::after {
  background: currentColor !important;
}
@media (max-width: 600px) {
  :root body .filter-bar {
    flex-wrap: wrap;
    gap: 12px;
  }
  :root body .filter-item {
    flex: 1 1 120px;
    min-width: 120px;
  }
  :root body .filter-trigger {
    padding: 12px 4px;
    height: auto;
    gap: 8px;
  }
}