/* ============================================================
   Anas Cosmetiques — Custom UI Overrides
   ============================================================ */

/* ----------------------------------------------------------
   1. HEADER & NAVIGATION
   ---------------------------------------------------------- */

/* Header container */
.site-header,
#masthead {
    background: #fff !important;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07) !important;
}

/* Logo spacing */
.site-branding,
.ast-site-identity {
    padding: 8px 0;
}

/* Nav links — base */
.main-navigation ul li a,
li.menu-item-wc-mega > a {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.6px !important;
    text-transform: uppercase !important;
    color: #333 !important;
    padding: 6px 2px !important;
    margin: 0 12px !important;
    text-decoration: none !important;
    border-bottom: 2px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease !important;
    display: inline-block;
}

/* Nav hover */
.main-navigation ul li:hover > a,
li.menu-item-wc-mega:hover > a {
    color: #c8a97e !important;
    border-bottom-color: #c8a97e !important;
}

/* Active / current page */
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current-menu-ancestor > a,
.main-navigation ul li.current_page_item > a,
.main-navigation ul li.current_page_ancestor > a {
    color: #c8a97e !important;
    /* border-bottom-color: #c8a97e !important; */
}

/* Remove any Astra default active color overrides */
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a {
    background: transparent !important;
}

/* ----------------------------------------------------------
   2. HERO SLIDER — Swiper / Elementor navigation arrows
   ---------------------------------------------------------- */

/* Set Swiper theme color variable */
:root {
    --swiper-theme-color: #c8a97e;
    --swiper-navigation-color: #c8a97e;
}

/* Button circle */
.elementor-swiper-button-prev,
.elementor-swiper-button-next {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.92) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.18) !important;
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
    cursor: pointer !important;
}

.elementor-swiper-button-prev:hover,
.elementor-swiper-button-next:hover {
    background: #c8a97e !important;
    box-shadow: 0 4px 14px rgba(200,169,126,0.45) !important;
}

/* The eicon <i> tag inside the button */
.elementor-swiper-button-prev i,
.elementor-swiper-button-next i,
.elementor-swiper-button-prev svg,
.elementor-swiper-button-next svg {
    font-size: 16px !important;
    color: #c8a97e !important;
    line-height: 1 !important;
}

.elementor-swiper-button-prev:hover i,
.elementor-swiper-button-next:hover i,
.elementor-swiper-button-prev:hover svg,
.elementor-swiper-button-next:hover svg {
    color: #fff !important;
}

/* Also handle Swiper's own ::after arrows (used in some Elementor versions) */
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 14px !important;
    color: #c8a97e !important;
}

/* Slider pagination dots */
.swiper-pagination-bullet {
    background: #c8a97e !important;
    opacity: 0.4 !important;
}
.swiper-pagination-bullet-active {
    opacity: 1 !important;
    background: #c8a97e !important;
}

/* ----------------------------------------------------------
   3. BUTTONS — Add to Cart
   ---------------------------------------------------------- */

/* WooCommerce "Add to cart" button */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #payment #place_order,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce .cart .button,
a.add_to_cart_button,
button.single_add_to_cart_button {
    background-color: #c8a97e !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px !important;
    padding: 10px 18px !important;
    transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(200,169,126,0.3) !important;
    cursor: pointer !important;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
a.add_to_cart_button:hover,
button.single_add_to_cart_button:hover {
    background-color: #b8956a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 14px rgba(200,169,126,0.45) !important;
}

/* "Added to cart" / loading state */
.woocommerce a.button.loading,
.woocommerce a.button.added {
    background-color: #b8956a !important;
    opacity: 0.85 !important;
}

/* ----------------------------------------------------------
   4. BUTTONS — Shop Now / Elementor buttons
   ---------------------------------------------------------- */

.elementor-button,
.elementor-button-wrapper .elementor-button,
a.elementor-button {
    background-color: transparent !important;
    color: #fff !important;
    border: 2px solid #fff !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    padding: 10px 24px !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.elementor-button:hover,
.elementor-button-wrapper .elementor-button:hover,
a.elementor-button:hover {
    background-color: #c8a97e !important;
    border-color: #c8a97e !important;
    color: #fff !important;
}

/* Shop Now buttons on dark/image backgrounds */
.elementor-widget-button .elementor-button[style*="background"] {
    border-color: transparent !important;
}

/* ----------------------------------------------------------
   5. PRODUCT CARDS
   ---------------------------------------------------------- */

/* Card wrapper */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    border-radius: 10px !important;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;
    background: #fff !important;
}

.woocommerce ul.products li.product:hover,
.woocommerce-page ul.products li.product:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.11) !important;
}

.astra-shop-summary-wrap {
    padding: 5% !important;
}
.tinvwl_add_to_wishlist_button {
    margin-bottom: 10px !important;
    margin-top: 0.3em !important;
}
/* Product image */
.woocommerce ul.products li.product img {
    border-radius: 10px 10px 0 0 !important;
    transition: transform 0.3s ease !important;
}
.woocommerce ul.products li.product:hover img {
    transform: scale(1.03) !important;
}

/* Product title */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product h2 {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #222 !important;
    margin-bottom: 4px !important;
}

/* Product category label */
.woocommerce ul.products li.product .ast-woo-product-category {
    font-size: 11px !important;
    color: #999 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Price */
.woocommerce ul.products li.product .price {
    color: #c8a97e !important;
    font-weight: 700 !important;
    font-size: 15px !important;
}

/* ----------------------------------------------------------
   6. CATEGORY BANNER CARDS (Shop Now sections)
   ---------------------------------------------------------- */

/* Overlay text on image cards */
.elementor-widget-image-box .elementor-image-box-title,
.elementor-widget-image-box .elementor-image-box-description {
    color: #fff !important;
}

/* ----------------------------------------------------------
   7. GENERAL TYPOGRAPHY & ACCENTS
   ---------------------------------------------------------- */

/* Links */
a { color: #c8a97e; }
a:hover { color: #b8956a; }

/* Section headings */
h1, h2, h3 {
    color: #222;
}

/* Woo sale badge */
.woocommerce span.onsale {
    background-color: #c8a97e !important;
    border-radius: 50% !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    min-height: 40px !important;
    min-width: 40px !important;
    line-height: 40px !important;
    padding: 0 !important;
}

/* ----------------------------------------------------------
   8. FEATURE ICONS BAR (delivery, quality, returns, payment)
   ---------------------------------------------------------- */

/* Make icon bar text visible on light background */
.elementor-icon-box-title,
.elementor-icon-box-title a,
.elementor-icon-box-description {
    color: #333 !important;
}

.elementor-icon-box-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
}

.elementor-icon-box-description {
    font-size: 12px !important;
    color: #666 !important;
}

/* Icons color */
.elementor-icon i,
.elementor-icon svg {
    color: #333 !important;
    fill: #333 !important;
}

/* ----------------------------------------------------------
   9. SECTION HEADINGS — underline accent color
   ---------------------------------------------------------- */

/* "Featured Products" and similar WooCommerce/Elementor section titles */
.woocommerce-products-header__title,
.woocommerce h2.woocommerce-loop-product__title,
h2.ast-woocommerce-loop-product__title,
.elementor-heading-widget h2,
.elementor-widget-heading .elementor-heading-title,
.ast-woocommerce-container h2,
.woocommerce h2,
section h2 {
    color: #222 !important;
}

/* Override teal/green underline on section titles — target Elementor divider widget */
.elementor-widget-divider .elementor-divider-separator,
.elementor-divider-separator {
    border-color: #c8a97e !important;
}

/* Astra / WooCommerce section title underline */
.ast-woo-shop-archive-description::after,
.woocommerce-products-header::after,
.entry-title::after {
    background: #c8a97e !important;
}

/* Elementor heading with underline style */
.elementor-widget-heading .elementor-heading-title.elementor-size-default::after,
.elementor-widget-heading h2::after {
    background-color: #c8a97e !important;
    border-color: #c8a97e !important;
}

/* Target the specific teal underline under "Featured Products" */
.elementor-element .elementor-widget-divider .elementor-divider__element,
.e-con .elementor-widget-divider .elementor-divider__element {
    border-color: #c8a97e !important;
}

/* If it's an inline style or CSS variable override */
:root {
    --e-global-color-accent: #c8a97e !important;
}

/* Hide on-card button */
.ast-on-card-button { display: none !important; }

/* ----------------------------------------------------------
   MEGA MENU DROPDOWN
   ---------------------------------------------------------- */
li.menu-item-wc-mega { position: relative !important; }

.wc-mega-drop {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    min-width: 180px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border-top: 3px solid #c8a97e;
    padding: 12px 0;
    z-index: 999999;
    box-sizing: border-box;
}
li.menu-item-wc-mega:hover > .wc-mega-drop,
li.menu-item-wc-mega:focus-within > .wc-mega-drop {
    display: block;
}
.wc-mega-drop .wc-mega-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wc-mega-drop .wc-mega-sublist li { margin: 0; }
.wc-mega-drop .wc-mega-sublist a {
    display: block;
    padding: 7px 18px;
    font-size: 13px;
    color: #444;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, padding-left 0.15s;
}
.wc-mega-drop .wc-mega-sublist a:hover {
    background: #faf7f2;
    color: #c8a97e;
    padding-left: 24px;
}