/**
 * Universal close control — appearance only.
 * Edit variables below (or the rules they feed) to change every linked close control at once.
 */
 :root {
  --close-button-size: 4rem;
  --close-button-bg: color-mix(in srgb, color-mix(in srgb, var(--color-primary), white 10%), #393939 15%);
  --close-button-radius: 4rem;
  --close-button-shadow: rgba(0, 0, 0, 0.13) 0px 0.5rem 2rem;
  --close-button-border: none;
  --close-button-icon-bg: white;
  --close-button-icon-mask: url("../images/close.png");
  --close-button-icon-mask-size: 50%;
  --close-button-icon-opacity: 1;
}

/* position: relative so ::before is anchored (fixed/absolute parents already establish a box) */
.close_button,
.cart .close_cart,
.cliente-pedido-embed-close {
  position: relative;
}

.close_button,
.info_container .lity-close,
.product_popup_box .close_product_popup,
.cart .close_cart,
.cliente-modal-close,
.cliente-pedido-embed-close,
#search_close {
  box-sizing: border-box;
  width: var(--close-button-size);
  height: var(--close-button-size);
  margin: 0;
  padding: 0;
  border: var(--close-button-border);
  border-radius: var(--close-button-radius);
  background-color: var(--close-button-bg);
  cursor: pointer;
  box-shadow: var(--close-button-shadow);
  font-size: 0;
  line-height: 0;
  color: transparent;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.close_button::before,
.info_container .lity-close::before,
.product_popup_box .close_product_popup::before,
.cart .close_cart::before,
.cliente-modal-close::before,
.cliente-pedido-embed-close::before,
#search_close::before {
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  background: var(--button-text-color-oscuro);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  mask-image: var(--close-button-icon-mask);
  -webkit-mask-image: var(--close-button-icon-mask);
  mask-size: var(--close-button-icon-mask-size);
  -webkit-mask-size: var(--close-button-icon-mask-size);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center center;
  -webkit-mask-position: center center;
  opacity: var(--close-button-icon-opacity);
}

.close_button:hover::before,
.info_container .lity-close:hover::before,
.product_popup_box .close_product_popup:hover::before,
.cart .close_cart:hover::before,
#search_close:hover::before {
  opacity: 1;
}

[data-theme="dark"] .close_button,
[data-theme="dark"] .info_container .lity-close,
[data-theme="dark"] .product_popup_box .close_product_popup,
[data-theme="dark"] .cart .close_cart,
[data-theme="dark"] .cliente-modal-close,
[data-theme="dark"] .cliente-pedido-embed-close,
[data-theme="dark"] #search_close {
  background-color: color-mix(in srgb, color-mix(in srgb, var(--color-primary), white 15%), #303030 96%);
  opacity: 1;
  border: 1px solid rgba(255, 255, 255, 0.13) !important;
}

[data-theme="dark"] .close_button::before,
[data-theme="dark"] .info_container .lity-close::before,
[data-theme="dark"] .product_popup_box .close_product_popup::before,
[data-theme="dark"] .cart .close_cart::before,
[data-theme="dark"] .cliente-modal-close::before,
[data-theme="dark"] .cliente-pedido-embed-close::before,
[data-theme="dark"] #search_close::before {
  background: var(--color-light-gray);
}