/* IleraCare Image Edge + Radius Cleanup v1.0
   Scope: front-end visual cleanup only. No WooCommerce data/layout modification. */

:root {
  --ilera-clean-radius: 28px;
  --ilera-clean-radius-soft: 24px;
}

/* 1) Remove the white fading overlays from hero visual blocks. */
body:not(.woocommerce):not(.woocommerce-page) .bkc-hero-screen-v88 .bkc-hero-v88-media--portrait::after,
body:not(.woocommerce):not(.woocommerce-page) .bkc-hero-screen-v88 .bkc-hero-v88-visual::after,
body:not(.woocommerce):not(.woocommerce-page) .bkc-hero-screen-v88 .bkc-hero-v88-visual--center::after,
body:not(.woocommerce):not(.woocommerce-page) .bkc-hero-screen-v88 .bkc-hero-v101-visual--center::after,
body:not(.woocommerce):not(.woocommerce-page) .bkc-hero-screen-v88 .bkc-hero-v88-sidecard::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  filter: none !important;
}

/* 2) Add professional rounded corners to slide 1 left image and slide 2 product image. */
body:not(.woocommerce):not(.woocommerce-page) .bkc-hero-screen-v88 .bkc-hero-v88-slide--one .bkc-hero-v88-media--portrait,
body:not(.woocommerce):not(.woocommerce-page) .bkc-hero-screen-v88 .bkc-hero-v88-slide--two .bkc-hero-v88-visual,
body:not(.woocommerce):not(.woocommerce-page) .bkc-hero-screen-v88 .bkc-hero-v88-slide--two .bkc-hero-v88-visual--center,
body:not(.woocommerce):not(.woocommerce-page) .bkc-hero-screen-v88 .bkc-hero-v88-slide--two .bkc-hero-v101-visual--center {
  border-radius: var(--ilera-clean-radius) !important;
  overflow: hidden !important;
  background: transparent !important;
  isolation: isolate !important;
}

body:not(.woocommerce):not(.woocommerce-page) .bkc-hero-screen-v88 .bkc-hero-v88-slide--one .bkc-hero-v88-media--portrait img,
body:not(.woocommerce):not(.woocommerce-page) .bkc-hero-screen-v88 .bkc-hero-v88-slide--two .bkc-hero-v88-visual img,
body:not(.woocommerce):not(.woocommerce-page) .bkc-hero-screen-v88 .bkc-hero-v88-slide--two .bkc-hero-v88-visual--center img,
body:not(.woocommerce):not(.woocommerce-page) .bkc-hero-screen-v88 .bkc-hero-v88-slide--two .bkc-hero-v101-visual--center img {
  border-radius: var(--ilera-clean-radius) !important;
  display: block !important;
  overflow: hidden !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Make slide 2 image retain its clean transparent/cutout feel while still clipped to a premium radius when a full image is used. */
body:not(.woocommerce):not(.woocommerce-page) .bkc-hero-screen-v88 .bkc-hero-v88-slide--two img[data-ilera-hero-final="hair-food"],
body:not(.woocommerce):not(.woocommerce-page) .bkc-hero-screen-v88 .bkc-hero-v88-slide--two img[data-ilera-hero-cleanup="hair-food-cutout"] {
  border-radius: var(--ilera-clean-radius) !important;
  background: transparent !important;
}

/* 3) Remove white fading overlays from philosophy/about/contact image blocks. */
body:not(.woocommerce):not(.woocommerce-page) .philosophy-img-box::before,
body:not(.woocommerce):not(.woocommerce-page) .philosophy-img-box::after,
body:not(.woocommerce):not(.woocommerce-page) .about-img-side::before,
body:not(.woocommerce):not(.woocommerce-page) .about-img-side::after,
body:not(.woocommerce):not(.woocommerce-page) .contact-img-wrapper::before,
body:not(.woocommerce):not(.woocommerce-page) .contact-img-wrapper::after,
body:not(.woocommerce):not(.woocommerce-page) .contact-img-box::before,
body:not(.woocommerce):not(.woocommerce-page) .contact-img-box::after,
body:not(.woocommerce):not(.woocommerce-page) .contact-image::before,
body:not(.woocommerce):not(.woocommerce-page) .contact-image::after,
body:not(.woocommerce):not(.woocommerce-page) .contact-visual::before,
body:not(.woocommerce):not(.woocommerce-page) .contact-visual::after,
body:not(.woocommerce):not(.woocommerce-page) .bkc-contact-image::before,
body:not(.woocommerce):not(.woocommerce-page) .bkc-contact-image::after {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  filter: none !important;
}

/* 4) Add matching radius to about/contact/philosophy visuals and keep images clean. */
body:not(.woocommerce):not(.woocommerce-page) .philosophy-img-box,
body:not(.woocommerce):not(.woocommerce-page) .about-img-side,
body:not(.woocommerce):not(.woocommerce-page) .contact-img-wrapper,
body:not(.woocommerce):not(.woocommerce-page) .contact-img-box,
body:not(.woocommerce):not(.woocommerce-page) .contact-image,
body:not(.woocommerce):not(.woocommerce-page) .contact-visual,
body:not(.woocommerce):not(.woocommerce-page) .bkc-contact-image,
body.page-template-page-about:not(.woocommerce):not(.woocommerce-page) main figure,
body.page-template-page-contact:not(.woocommerce):not(.woocommerce-page) main figure {
  border-radius: var(--ilera-clean-radius) !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

body:not(.woocommerce):not(.woocommerce-page) .philosophy-img-box > img,
body:not(.woocommerce):not(.woocommerce-page) .about-img-side > img,
body:not(.woocommerce):not(.woocommerce-page) .contact-img-wrapper img,
body:not(.woocommerce):not(.woocommerce-page) .contact-img-box > img,
body:not(.woocommerce):not(.woocommerce-page) .contact-image img,
body:not(.woocommerce):not(.woocommerce-page) .contact-visual img,
body:not(.woocommerce):not(.woocommerce-page) .bkc-contact-image img,
body.page-template-page-about:not(.woocommerce):not(.woocommerce-page) main figure img,
body.page-template-page-contact:not(.woocommerce):not(.woocommerce-page) main figure img {
  border-radius: var(--ilera-clean-radius) !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Preserve correct image fitting: people photos cover cleanly; product photos remain visible. */
body:not(.woocommerce):not(.woocommerce-page) .philosophy-img-box > img,
body:not(.woocommerce):not(.woocommerce-page) .about-img-side > img,
body:not(.woocommerce):not(.woocommerce-page) .contact-img-wrapper img,
body:not(.woocommerce):not(.woocommerce-page) .contact-visual img {
  object-fit: cover !important;
  object-position: center center !important;
}

/* Responsive radius tuning: still premium but not too heavy on small screens. */
@media (max-width: 767px) {
  :root {
    --ilera-clean-radius: 20px;
    --ilera-clean-radius-soft: 18px;
  }

  body:not(.woocommerce):not(.woocommerce-page) .bkc-hero-screen-v88 .bkc-hero-v88-slide--one .bkc-hero-v88-media--portrait,
  body:not(.woocommerce):not(.woocommerce-page) .bkc-hero-screen-v88 .bkc-hero-v88-slide--two .bkc-hero-v88-visual,
  body:not(.woocommerce):not(.woocommerce-page) .bkc-hero-screen-v88 .bkc-hero-v88-slide--two .bkc-hero-v101-visual--center,
  body:not(.woocommerce):not(.woocommerce-page) .philosophy-img-box,
  body:not(.woocommerce):not(.woocommerce-page) .about-img-side,
  body:not(.woocommerce):not(.woocommerce-page) .contact-img-wrapper,
  body:not(.woocommerce):not(.woocommerce-page) .contact-img-box,
  body:not(.woocommerce):not(.woocommerce-page) .contact-image,
  body:not(.woocommerce):not(.woocommerce-page) .contact-visual,
  body:not(.woocommerce):not(.woocommerce-page) .bkc-contact-image {
    border-radius: var(--ilera-clean-radius) !important;
  }
}