/* Roy's Wonderland UI polish v1.0: CSS only, no cart/variation logic. */

/* 1) Desktop / laptop page content constrained to 1290px.
   Only content containers are capped; edge-to-edge banners and backgrounds stay full width. */
@media (min-width: 1024px) {
  :root { --roy-ui-container-max: 1290px; }

  body .roy-product .roy-wrap,
  body.roycat-active .roycat-container,
  body .rw-home .rw-container,
  body.roy-cart-polish .woocommerce:has(> form.woocommerce-cart-form):has(> .cart-collaterals),
  body .site-content > .container,
  body #content > .container,
  body #main > .container,
  body .main-content > .container,
  body .page-container,
  body .elementor-section.elementor-section-boxed > .elementor-container,
  body .e-con.e-con-boxed > .e-con-inner,
  body .site-header .container,
  body header .container,
  body .header-wrapper .container,
  body .site-footer .container,
  body footer .container {
    max-width: var(--roy-ui-container-max) !important;
    margin-inline: auto;
  }

  /* These template-specific wrappers already have their own max width;
     let them use the full 1290px layout without changing small-screen padding. */
  body.roycat-active .roycat-container,
  body .rw-home .rw-container {
    width: min(1290px, calc(100% - 40px)) !important;
  }
}

/* 2) Make the installed header heart icon match cart/account action icons.
   JavaScript applies .roy-ui-header-action to the actual cart/account links;
   the ancestor or submenu opening behavior is not modified. */
a.roy-wishlist-header-link,
.roy-ui-header-action {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px;
  min-height: 44px;
  border-radius: 12px !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #eea900 !important;
  box-shadow: none !important;
  text-decoration: none !important;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
a.roy-wishlist-header-link:hover,
a.roy-wishlist-header-link:focus-visible,
.roy-ui-header-action:hover,
.roy-ui-header-action:focus-visible {
  background: #fff5e9 !important;
  color: #980b16 !important;
  border-color: #e9d5b8 !important;
  box-shadow: 0 3px 12px rgba(87,36,15,.08) !important;
}
a.roy-wishlist-header-link svg,
.roy-ui-header-action svg { color: inherit; }

/* The wishlist count is per visitor and is filled from the YITH backend.
   Hide it only until the read-only AJAX request has finished. */
a.roy-wishlist-header-link .roy-ui-wishlist-count {
  position: absolute !important;
  top: -5px !important;
  right: -5px !important;
  z-index: 4 !important;
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 19px;
  height: 19px;
  padding: 0 4px !important;
  margin: 0 !important;
  border-radius: 999px !important;
  border: 2px solid #fff !important;
  background: #c61d28 !important;
  color: #fff !important;
  font-family: Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 15px !important;
  text-align: center !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  box-sizing: content-box !important;
}
a.roy-wishlist-header-link .roy-ui-wishlist-count.roy-ui-count-ready {
  display: inline-flex !important;
}

/* 3) The white full-screen mask around the theme's *existing* side cart
   should be transparent charcoal, so customers can still see the page.
   Never recolor the cart drawer itself or its controls. */
body :is(
  .side-cart-overlay,
  .sidebar-cart-overlay,
  .cart-overlay,
  .cart-drawer-overlay,
  .cart-canvas-overlay,
  .cart-sidebar-overlay,
  .mini-cart-overlay,
  .minicart-overlay,
  .offcanvas-cart-overlay,
  .off-canvas-cart-overlay,
  .swe-cart-overlay,
  .sw-cart-overlay,
  .cart-backdrop,
  .sidecart-backdrop,
  .cart-mask,
  .cart-overlay-mask,
  .sw-overlay-cart,
  .roy-ui-cart-overlay
) {
  background-color: rgba(12, 21, 20, .54) !important;
  background-image: none !important;
}
/* WooCommerce block and Elementor overlays use container/backdrop markup. */
body .wc-block-components-drawer__screen-overlay:not(.wc-block-components-drawer__screen-overlay--is-hidden),
body .elementor-menu-cart__container.elementor-menu-cart--shown {
  background-color: rgba(12, 21, 20, .54) !important;
  background-image: none !important;
}
/* Preserve crisp white inside each drawer regardless of the overlay color. */
body .wc-block-mini-cart__drawer .wc-block-components-drawer__content,
body .elementor-menu-cart__main,
body .roycat-mini-cart-skin {
  background-color: #fff !important;
}

/* Extra known theme implementations that use pseudo-elements as the mask.
   These rules apply only while those cart-specific classes are active. */
body.cart-sidebar-open::before,
body.sidecart-open::before,
body.cart-drawer-open::before,
body.mini-cart-open::before {
  background-color: rgba(12, 21, 20, .54) !important;
}

@media (max-width: 767px) {
  a.roy-wishlist-header-link,
  .roy-ui-header-action { min-width: 40px; min-height: 40px; }
}