/*
 * ═══════════════════════════════════════════════════════
 *  DWIJA Diamond — Icon Hover Consistency
 *  The base theme (template-color-2) uses a secondary GREEN
 *  accent (#58d173) for icon / link hovers, which clashes
 *  with the rose-gold design. This normalises every icon &
 *  interactive hover to the rose-gold palette.
 *
 *  Loaded after the theme + page styles to win the cascade.
 * ═══════════════════════════════════════════════════════
 */

:root {
    --icon-rose: #B76E79;
    --icon-rose-deep: #8E5158;
    --icon-rose-pale: #E8C4C9;
    --icon-rose-soft: rgba(183, 110, 121, 0.08);
}

/* ═══════════════════════════════════════════════════════
   PRODUCT-CARD ACTION ICONS  (Quick View, Add to Cart, Wishlist,
   Compare) — the circular icon buttons that fill on hover
   ═══════════════════════════════════════════════════════ */
body.template-color-2 .single_product .product-img .add-actions > ul > li > a,
body.template-color-2 .shop-product-wrap .slide-item .single_product .product-img .add-actions > ul > li > a,
body.template-color-2 .shop-product-wrap.grid .slide-item .single_product > .product-img > .add-actions > ul > li > a,
body.template-color-2 [class*="col-"] .list-slide_item .single_product .hiraola-product_content .add-actions > ul > li > a {
    transition: all 0.3s ease;
}

body.template-color-2 .single_product .product-img .add-actions > ul > li > a:hover,
body.template-color-2 .shop-product-wrap .slide-item .single_product .product-img .add-actions > ul > li > a:hover,
body.template-color-2 .shop-product-wrap.grid .slide-item .single_product > .product-img > .add-actions > ul > li > a:hover,
body.template-color-2 [class*="col-"] .list-slide_item .single_product .hiraola-product_content .add-actions > ul > li > a:hover {
    background-color: var(--icon-rose) !important;
    border-color: var(--icon-rose) !important;
    color: #ffffff !important;
}

/* Product card hover border / sticker accents */
body.template-color-2 .hiraola-product_slider .slide-item .single_product:hover,
body.template-color-2 .hiraola-product_slider-2 .slide-item .single_product:hover,
body.template-color-2 .hiraola-product_slider-3 .slide-item .single_product:hover,
body.template-color-2 .hiraola-product-tab_slider-2 .slide-item .single_product:hover,
body.template-color-2 .hiraola-product-tab_slider-3 .slide-item .single_product:hover,
body.template-color-2 .hiraola-product-tab_slider-2 .list-slide_item .single_product:hover,
body.template-color-2 .hiraola-product-tab_slider-3 .list-slide_item .single_product:hover,
body.template-color-2 .sp-slider .slide-item .single_product:hover {
    border-color: rgba(183, 110, 121, 0.5) !important;
}

/* ═══════════════════════════════════════════════════════
   SLIDER / CAROUSEL ARROWS
   ═══════════════════════════════════════════════════════ */
body.template-color-2 .slick-arrow:hover,
body.template-color-2 .hiraola-product_slider .slick-arrow:hover,
body.template-color-2 .hiraola-product_slider-2 .slick-arrow:hover,
body.template-color-2 .hiraola-product-tab_slider-2 .slick-arrow:hover,
body.template-color-2 .hiraola-testimonial_slider .slick-arrow:hover,
body.template-color-2 .hiraola-brand_slider .slick-arrow:hover {
    color: var(--icon-rose) !important;
    border-color: var(--icon-rose) !important;
}

/* ═══════════════════════════════════════════════════════
   SOCIAL ICON LINKS
   The glyph <i> is targeted directly so it turns white even
   though the generic link-hover rule recolours the <a>.
   ═══════════════════════════════════════════════════════ */
body.template-color-2 .hiraola-social_link > ul > li > a:hover {
    background-color: var(--icon-rose) !important;
    border-color: var(--icon-rose) !important;
    color: #ffffff !important;
}
body.template-color-2 .hiraola-social_link > ul > li > a:hover i,
body.template-color-2 .hiraola-social_link > ul > li > a:hover .fa,
body.template-color-2 .hiraola-social_link > ul > li > a:hover [class^="fa"],
body.template-color-2 .hiraola-social_link > ul > li > a:hover [class*=" fa"] {
    color: #ffffff !important;
}

/* Footer social icons (custom-footer.css used gold) → rose */
body.template-color-2 .pf-social__item a:hover {
    background: var(--icon-rose) !important;
    background-color: var(--icon-rose) !important;
    border-color: var(--icon-rose) !important;
    color: #ffffff !important;
}
body.template-color-2 .pf-social__item a:hover i,
body.template-color-2 .pf-social__item a:hover .fab,
body.template-color-2 .pf-social__item a:hover [class^="fa"],
body.template-color-2 .pf-social__item a:hover [class*=" fa"] {
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════
   MODAL / OFF-CANVAS / SEARCH CLOSE & ACTION ICONS
   ═══════════════════════════════════════════════════════ */
body.template-color-2 .modal-body .close:hover,
body.template-color-2 .offcanvas-menu_wrapper .offcanvas-menu-inner .btn-close:hover,
body.template-color-2 .offcanvas-minicart_wrapper .offcanvas-menu-inner .btn-close:hover,
body.template-color-2 .offcanvas-search_wrapper .offcanvas-menu-inner .btn-close:hover,
body.template-color-2 .mobile-menu_wrapper .btn-close:hover,
body.template-color-2 .offcanvas-search_wrapper .offcanvas-menu-inner .offcanvas-search .hm-searchbox > .search_btn:hover {
    color: var(--icon-rose) !important;
}

/* Product-detail (sp-area) quantity / action icons */
body.template-color-2 .sp-area .sp-nav .sp-content .qty-btn_area > ul li > a:hover {
    color: var(--icon-rose) !important;
    border-color: var(--icon-rose) !important;
}
body.template-color-2 .sp-area .sp-nav .sp-content .qty-btn_area > ul li > a.qty-cart_btn:hover {
    background-color: var(--icon-rose) !important;
    border-color: var(--icon-rose) !important;
    color: #ffffff !important;
}
body.template-color-2 .sp-gallery_area .sp-nav .sp-gallery .lg-image:hover {
    border-color: rgba(183, 110, 121, 0.5) !important;
}

/* ═══════════════════════════════════════════════════════
   NAVIGATION / MENU HOVERS
   ═══════════════════════════════════════════════════════ */
body.template-color-2 .header-top_area .ht-menu > ul > li:hover > a,
body.template-color-2 .header-top_area .ht-menu > ul > li .ht-dropdown > li:hover a,
body.template-color-2 .header-top_area .ht-menu > ul > li .ht-dropdown > li.active a,
body.template-color-2 .offcanvas-navigation .mobile-menu li:hover > a,
body.template-color-2 .offcanvas-navigation .mobile-menu li:hover > .menu-expand,
body.template-color-2 .hb-menu > nav > ul > li:hover > a,
body.template-color-2 .hb-menu > nav > ul > li > ul > li.active > a,
.cat-mega-menu > li > ul > li > a:hover,
body.template-color-2 .cat-mega-menu > li > ul > li > a:hover {
    color: var(--icon-rose-deep) !important;
}

/* ═══════════════════════════════════════════════════════
   MISC INTERACTIVE ICON/LINK HOVERS
   ═══════════════════════════════════════════════════════ */
body.template-color-2 .product-tab > ul > li > a.active {
    color: var(--icon-rose-deep) !important;
}

body.template-color-2 .hiraola-sidebar-search-form .hiraola-search-btn:hover i,
body.template-color-2 .hiraola-search_btn:hover,
body.template-color-2 .hiraola-search-btn:hover {
    color: var(--icon-rose) !important;
}

/* ═══════════════════════════════════════════════════════
   TOOLTIPS  (theme used an olive/bronze — normalise to rose-gold)
   Tooltips are appended to <body>, so cover every placement.
   ═══════════════════════════════════════════════════════ */
body.template-color-2 .tooltip-inner,
.tooltip .tooltip-inner {
    background-color: var(--icon-rose) !important;
    color: #ffffff !important;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(45, 36, 36, 0.18);
}

/* Arrow — top placement */
body.template-color-2 .tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before,
body.template-color-2 .tooltip.bs-tooltip-top .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before,
.tooltip.bs-tooltip-top .arrow::before {
    border-top-color: var(--icon-rose) !important;
}

/* Arrow — bottom placement */
body.template-color-2 .tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before,
body.template-color-2 .tooltip.bs-tooltip-bottom .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before,
.tooltip.bs-tooltip-bottom .arrow::before {
    border-bottom-color: var(--icon-rose) !important;
}

/* Arrow — left placement */
body.template-color-2 .tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before,
body.template-color-2 .tooltip.bs-tooltip-left .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="left"] .arrow::before,
.tooltip.bs-tooltip-left .arrow::before {
    border-left-color: var(--icon-rose) !important;
}

/* Arrow — right placement */
body.template-color-2 .tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before,
body.template-color-2 .tooltip.bs-tooltip-right .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="right"] .arrow::before,
.tooltip.bs-tooltip-right .arrow::before {
    border-right-color: var(--icon-rose) !important;
}