/* =============================================================
   SJ Soaps — Huemint Brand Palette — Site-Wide Overrides
   #fbfafd | #082567 | #db2876 | #0076e2
   ============================================================= */

/* ------------------------------------------------------------------
   1. CSS VARIABLE OVERRIDE
   Cascades automatically to all parent-theme selectors that use these
   ------------------------------------------------------------------ */
:root {
  --ecosoap-theme-color:      #db2876;  /* hot pink  → accent / main CTA */
  --ecosoap-link-color:       #0076e2;  /* sapphire  → nav links / text links */
  --ecosoap-link-hover-color: #082567;  /* navy      → hover state */
  --ecosoap-heading-color:    #082567;  /* navy      → h1–h6 */
  /* Product titles & h4–h6: Lora (DB can override via inline). */
  --sj-product-title-font: "Lora", Georgia, serif;
  --sj-small-heading-font: "Lora", Georgia, serif;
}

/* ------------------------------------------------------------------
   2. NAVIGATION — top-level menu items (sapphire blue)
   ------------------------------------------------------------------ */
.main-menu > li > a,
.nav-menu > li > a,
#main-menu > li > a,
.top-menu > li > a {
  color: #ffffff;
}
.main-menu > li > a:hover,
.main-menu > li.current-menu-item > a,
.main-menu > li.current-menu-ancestor > a,
.nav-menu > li > a:hover {
  color: #db2876;
}
/* Dropdown sub-menu items — navy on hover */
.main-menu .sub-menu li a { color: #082567; }
.main-menu .sub-menu li a:hover { color: #db2876; }

/* ------------------------------------------------------------------
   3. HEADER RIGHT ICONS — cart, search, wishlist, account (sapphire)
   ------------------------------------------------------------------ */
.header-right .cart-icon i,
.header-right .wishlist-icon i,
.header-right [class*="icon"] i,
.header-right .btn-search-top i,
.header-right .account-icon i,
.top-wrapper-menu .account-icon i,
.top-wrapper-menu .show-search-header i {
  color: #0076e2;
}
.header-right .cart-icon i:hover,
.header-right .wishlist-icon i:hover,
.header-right .btn-search-top i:hover,
.header-right .account-icon i:hover {
  color: #db2876;
}

/* ------------------------------------------------------------------
   4. WOOCOMMERCE BUTTONS
   ------------------------------------------------------------------ */
/* Primary "Add to cart" / checkout buttons */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button {
  background-color: #db2876 \!important;
  color: #fff \!important;
  border-color: #db2876 \!important;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce-page a.button:hover,
.woocommerce-page button.button:hover {
  background-color: #082567 \!important;
  border-color: #082567 \!important;
  color: #fff \!important;
}
/* Alt / outline buttons */
.woocommerce a.button.alt,
.woocommerce button.button.alt {
  background-color: #082567 \!important;
}
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
  background-color: #db2876 \!important;
}

/* ------------------------------------------------------------------
   4b. PRODUCT LOOP TITLES ONLY — Lora (--sj-product-title-font), NOT Jabula
   (Shop/archive: .product-block h3.name and WooCommerce loop; not single product page)
   ------------------------------------------------------------------ */
body .product-block h3.name,
body .product-block .name a,
body .product-block .title-wrapper .name,
body .product-block .title-wrapper .name a,
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2,
.woocommerce ul.products li.product .woocommerce-loop-product__title a,
.woocommerce ul.products li.product a .woocommerce-loop-product__title,
.woocommerce ul.products li.product .product-block h3.name,
.woocommerce ul.products li.product .product-block .name a,
.woocommerce ul.products .product-block h3.name,
.woocommerce ul.products .product-block .title-wrapper .name,
.woocommerce ul.products .product-block .title-wrapper .name a,
.elementor-widget-woocommerce-products .woocommerce-loop-product__title,
.elementor-widget-woocommerce-products .woocommerce-loop-product__title a {
  font-family: var(--sj-product-title-font, "Lora", Georgia, serif) !important;
  font-weight: 600 !important;
  color: #082567 !important;
  letter-spacing: 0.02em;
  line-height: 1.35 !important;
  font-size: 1.3rem !important;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title:hover,
.woocommerce ul.products li.product .woocommerce-loop-product__title a:hover,
.woocommerce ul.products .product-block .name a:hover,
.elementor-widget-woocommerce-products .woocommerce-loop-product__title a:hover {
  color: #db2876 !important;
}

/* ------------------------------------------------------------------
   5. REVOLUTION SLIDER — CSS fallback for arrow icon color
   (DB update handles the primary color; these handle edge cases)
   ------------------------------------------------------------------ */
.tparrows {
  background: #fff \!important;
  border-color: #0076e2 \!important;
}
.tparrows:hover {
  background: #db2876 \!important;
  border-color: #db2876 \!important;
}
.tparrows:before,
.tparrows .tp-arr-imgholder:before {
  color: #0076e2 \!important;
}
.tparrows:hover:before {
  color: #fff \!important;
}
/* Bullet navigation */
.tp-bullets .tp-bullet { border-color: rgba(8,37,103,0.4) \!important; }
.tp-bullets .tp-bullet.selected,
.tp-bullets .tp-bullet:hover { background: #0076e2 \!important; border-color: #0076e2 \!important; }

/* Revolution Slider text: do not override. Demo slider has its own layer styles; edit in
   Slider Revolution → Edit module → layer Style / Advanced Style (Text Color, Text Stroke). */

/* ------------------------------------------------------------------
   6. MOBILE / OFFCANVAS MENU
   ------------------------------------------------------------------ */
.offcanvas-menu a,
.mobile-menu a { color: #082567; }
.offcanvas-menu a:hover,
.mobile-menu a:hover { color: #db2876; }
.offcanvas-menu .menu-icon span,
.hamburger span { background: #082567; }

/* ------------------------------------------------------------------
   7. LINKS — generic body links (excluding nav, already handled above)
   ------------------------------------------------------------------ */
a { color: #0076e2; }
a:hover { color: #082567; }

/* ==================================================================
   8. ELEMENTOR HEADER (post-16625) EXACT OVERRIDES
   Elementor stores per-element colors in generated CSS with high
   specificity. We match the selectors + add !important to win.
   ================================================================== */

/* -- Header: sapphire blue (#082567) with transparency; gradient fades toward center (softer in middle) -- */
.elementor-location-header,
.elementor-16625 {
  background: linear-gradient(
    to right,
    rgba(8, 37, 103, 0.88) 0%,
    rgba(8, 37, 103, 0.48) 50%,
    rgba(8, 37, 103, 0.88) 100%
  ) !important;
}
/* -- Top bar: same sapphire transparent gradient, fade toward center -- */
.elementor-16625 .elementor-element.elementor-element-6c351a3:not(.elementor-motion-effects-element-type-background),
.elementor-16625 .elementor-element.elementor-element-6c351a3 > .elementor-motion-effects-container > .elementor-motion-effects-layer {
  background: linear-gradient(
    to right,
    rgba(8, 37, 103, 0.88) 0%,
    rgba(8, 37, 103, 0.48) 50%,
    rgba(8, 37, 103, 0.88) 100%
  ) !important;
}

/* -- Megamenu nav links: white → navy -- */
.elementor-16625 .elementor-element.elementor-element-9405c49 .navbar-nav.megamenu > li > a {
  color: #ffffff !important;
}
/* -- Megamenu hover / active: red → hot pink -- */
.elementor-16625 .elementor-element.elementor-element-9405c49 .navbar-nav.megamenu > li:hover > a,
.elementor-16625 .elementor-element.elementor-element-9405c49 .navbar-nav.megamenu > li.active > a {
  color: #db2876 !important;
}
/* -- Active indicator underline bar -- */
.elementor-16625 .elementor-element.elementor-element-9405c49 .megamenu > li:hover > a:before,
.elementor-16625 .elementor-element.elementor-element-9405c49 .megamenu > li.active > a:before {
  background-color: #db2876 !important;
}

/* -- Search icon: white → sapphire, hover → pink -- */
.elementor-16625 .elementor-element.elementor-element-29336ac .show-search-header {
  color: #ffffff !important;
}
.elementor-16625 .elementor-element.elementor-element-29336ac .show-search-header:hover,
.elementor-16625 .elementor-element.elementor-element-29336ac .show-search-header:focus {
  color: #db2876 !important;
}

/* -- Account / login icon: white → sapphire, hover → pink -- */
.elementor-16625 .elementor-element.elementor-element-19bb41f .top-wrapper-menu .drop-dow,
.elementor-16625 .elementor-element.elementor-element-19bb41f .top-wrapper-menu a.login,
.elementor-16625 .elementor-element.elementor-element-19bb41f .top-wrapper-menu .account-icon {
  color: #ffffff !important;
}
.elementor-16625 .elementor-element.elementor-element-19bb41f .top-wrapper-menu .drop-dow:hover,
.elementor-16625 .elementor-element.elementor-element-19bb41f .top-wrapper-menu a.login:hover,
.elementor-16625 .elementor-element.elementor-element-19bb41f .top-wrapper-menu .account-icon:hover {
  color: #db2876 !important;
}

/* -- Wishlist & mini-cart icons: white → sapphire, hover → pink -- */
.elementor-16625 .elementor-element.elementor-element-e1a520f .wishlist-icon,
.elementor-16625 .elementor-element.elementor-element-e1a520f .mini-cart {
  color: #ffffff !important;
}
.elementor-16625 .elementor-element.elementor-element-e1a520f .wishlist-icon:hover,
.elementor-16625 .elementor-element.elementor-element-e1a520f .wishlist-icon:focus,
.elementor-16625 .elementor-element.elementor-element-e1a520f .mini-cart:hover,
.elementor-16625 .elementor-element.elementor-element-e1a520f .mini-cart:focus {
  color: #db2876 !important;
}
/* -- Cart count badge: red bg → pink -- */
.elementor-16625 .elementor-element.elementor-element-e1a520f .count {
  background-color: #db2876 !important;
}

/* ------------------------------------------------------------------
   9. MOBILE PADDING — consistent horizontal spacing so content doesn't hug edges
   NOTE: Elementor container rules scoped to body:not(.home) to avoid
   breaking homepage hero/icon/carousel layouts which use precise widths.
   ------------------------------------------------------------------ */
@media (max-width: 1024px) {
  body:not(.home) .elementor-section .elementor-container,
  body:not(.home) .elementor .elementor-container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  #main-container .container,
  .main-container .container,
  .site-content .container {
    padding-left: 24px;
    padding-right: 24px;
  }
}
@media (max-width: 767px) {
  body:not(.home) .elementor-section .elementor-container,
  body:not(.home) .elementor .elementor-container {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  #main-container .container,
  .main-container .container,
  .site-content .container {
    padding-left: 24px;
    padding-right: 24px;
  }
  .woocommerce .summary.entry-summary,
  .woocommerce .woocommerce-tabs .panel,
  .woocommerce #reviews #comments {
    padding-left: 8px;
    padding-right: 8px;
  }
}
@media (max-width: 480px) {
  body:not(.home) .elementor-section .elementor-container,
  body:not(.home) .elementor .elementor-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  #main-container .container,
  .main-container .container,
  .site-content .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* FIX 13 v2: About Us page padding — desktop + mobile (2026-03-19)
 * About page (ID 322) uses Elementor Flexbox containers (e-con.e-parent, e-child).
 * Root parent containers have left:0/right:0 set in Elementor JSON inline styles.
 * These !important overrides guarantee minimum breathing room at all viewport widths.
 * Selectors confirmed from live page source 2026-03-19.
 */

/* Desktop (>1024px): 40px horizontal padding on outermost section containers */
.page-id-322 .e-con.e-parent,
.page-id-322 .e-con-boxed > .e-con-inner {
    padding-left: 40px !important;
    padding-right: 40px !important;
}
/* Legacy Elementor column layout fallback */
.page-id-322 .elementor-column > .elementor-element-populated {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* Tablet (<=1024px): 24px side padding */
@media (max-width: 1024px) {
    .page-id-322 .e-con.e-parent,
    .page-id-322 .e-con-boxed > .e-con-inner {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    .page-id-322 .elementor-column > .elementor-element-populated {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* Mobile (<=767px): 16px minimum so content never touches viewport edges */
@media (max-width: 767px) {
    .page-id-322 .e-con.e-parent,
    .page-id-322 .e-con-boxed > .e-con-inner {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
    .page-id-322 .elementor-column > .elementor-element-populated {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

/* ------------------------------------------------------------------
   10. SHOP PAGE BANNER — prominent intro text above product grid
   ------------------------------------------------------------------ */
.sj-shop-banner {
    background: linear-gradient(135deg, #f4f1fa 0%, #ede9f8 100%);
    border: 1px solid rgba(219, 40, 118, 0.3); /* side-tab removed 2026-10-16 */
    border-radius: 10px;
    padding: 18px 24px;
    margin: 0 0 16px;
}
.sj-shop-banner__text {
    margin: 0;
    font-family: "Lora", Georgia, serif;
    font-size: 1rem;
    font-style: italic;
    color: #082567;
    line-height: 1.65;
}
@media (max-width: 767px) {
    .sj-shop-banner { padding: 14px 16px; }
    .sj-shop-banner__text { font-size: 0.95rem; }
}

/* ------------------------------------------------------------------
   12. Back-to-top above the reCAPTCHA badge (owner 2026-10-16)
   Badge (Google, z 65535) is fixed at bottom 14px and covered the
   .add-fix-top button (bottom 50px). Lift applies at all widths;
   the badge is scaled down on mobile only.
   Section 11 (homepage slider margin) was removed 2026-10-16: the
   spacing now lives in Elementor section 41dccac top padding.
   ------------------------------------------------------------------ */
.add-fix-top {
  bottom: 90px !important;
}
@media (max-width: 767px) {
  .grecaptcha-badge {
    transform: scale(0.7);
    transform-origin: bottom right;
  }
}