/*
 Theme Name:    Yozi Child
 Theme URI:     https://themeforest.net/item/yozi-multipurpose-electronics-woocommerce-wordpress-theme/21081950
 Description:   Yozi Child Theme
 Author:        ApusTheme
 Author URI:    https://themeforest.net/user/apustheme
 Template:      yozi
 Version:       1.0.0
 Text Domain:   yozi-child
*/

/**
 * Prevent mobile browsers from forcing dark mode
 */
/* ==========================================================================
   GLOBAL DARK MODE PREVENTION (Forces System Theme to Bypass Inversion)
   ========================================================================== */

@media (max-width: 767px) {
    /* 1. Stop the main structural elements from stretching right */
    .widget-products-tabs,
    .widget-products-tabs .widget-content,
    .widget-products-tabs .widget-inner,
    .widget-products-tabs .tab-content,
    .widget-products-tabs .tab-pane {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        height: auto !important;
    }

    /* 2. Neutralize the dynamic height/width/transform injected by the JS slider track */
    .widget-products-tabs .slick-track,
    .widget-products-tabs .slick-list,
    .widget-products-tabs .owl-stage,
    .widget-products-tabs .owl-stage-outer,
    .widget-products-tabs .row {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        transform: none !important; 
        display: flex !important;
        flex-wrap: wrap !important;
    }

    /* 3. Force each product slide to take up exactly HALF (50%) of the row width */
    .widget-products-tabs .tab-pane .slick-slide,
    .widget-products-tabs .tab-pane .owl-item,
    .widget-products-tabs .tab-pane [class*="col-"] {
        width: 50% !important;
        min-width: 50% !important;
        max-width: 50% !important;
        height: auto !important;
        flex: 0 0 50% !important;
        display: block !important;
        float: left !important;
        box-sizing: border-box !important;
    }

    /* 4. Ensure elements inside the product blocks behave natively */
    .widget-products-tabs .tab-pane .product-block,
    .widget-products-tabs .tab-pane .item {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* 5. Force the image wrapper link and figure container to stretch edge-to-edge inside their 50% column */
    .widget-products-tabs .products-grid .image,
    .widget-products-tabs .products-grid .product-image {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 6. Overhaul the image itself to fill its container fluidly */
    .widget-products-tabs .products-grid img.attachment-shop_catalog,
    .widget-products-tabs .products-grid .product-image img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important; 
        object-fit: cover !important;
        display: block !important;
        margin: 0 auto !important; 
    }

    /* 7. Overall section alignment fix (align elements gracefully center) */
    .widget-products-tabs .grid-inner,
    .widget-products-tabs .block-inner {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

@media (max-width: 991px) {
    /* 1. Force the main mobile header row into a full flex wrapper */
    #apus-header-mobile .table-visiable-dk {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        float: none !important;
    }

    #apus-header-mobile .container,
    #apus-header-mobile .row {
        display: block !important;
        width: 100% !important;
    }

    /* 2. Balance the column spacing (Give logo 65% width, icons 35% width) */
    #apus-header-mobile .col-xs-8.text-center {
        width: 65% !important;
        max-width: 65% !important;
        flex: 0 0 65% !important;
        float: none !important;
        text-align: left !important;
        display: block !important;
    }

    /* CRITICAL FIX: Turn the icon column itself into a flex row to force the stacked containers inline */
    #apus-header-mobile .col-xs-3 {
        width: 35% !important;
        max-width: 35% !important;
        flex: 0 0 35% !important;
        float: none !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 15px !important; /* Space between wishlist container and cart container */
    }

    /* 3. Scale up the logo gracefully */
    #apus-header-mobile .logo {
        display: block !important;
    }

    #apus-header-mobile .logo img {
        max-height: 65px !important;
        width: auto !important;
        display: block !important;
    }

    /* 4. Force inner wrappers to layout inline horizontally */
    #apus-header-mobile .box-right,
    #apus-header-mobile .pull-right {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        float: none !important;
        width: auto !important;
        margin: 0 !important;
    }

    /* 5. Normalize icon items and clear default margin blocks */
    #apus-header-mobile .wishlist-icon,
    #apus-header-mobile .dropdown-toggle.mini-cart,
    #apus-header-mobile .dropdown.version-1.cart {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 4px !important;
    }
}
@media (max-width: 991px) {
    /* 1. Nudge the heart icon down slightly to align horizontally with the bag icon */
    #apus-header-mobile a.wishlist-icon {
        display: inline-block !important;
        position: relative !important;
        margin-top: 8px !important; /* Adjust this value if needed to perfectly line up with the cart bag */
    }

    /* 2. Setup the cart button toggle as a relative anchor for its badge */
    #apus-header-mobile .dropdown-toggle.mini-cart {
        position: relative !important;
        display: inline-block !important;
    }

    /* 3. Shift the Black Count Bubbles up and to the right corner */
    #apus-header-mobile a.wishlist-icon span.count,
    #apus-header-mobile .dropdown-toggle.mini-cart span.count {
        position: absolute !important;
        top: -6px !important;       /* Pulls the badge upward over the icon corner */
        right: -8px !important;     /* Pushes the badge to the right corner */
        margin: 0 !important;
        z-index: 2 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
}

@media (max-width: 991px) {
    /* 1. Isolate the bottom mobile menu row bar and force it into a side-by-side flexbox */
    #apus-header-mobile .bottom-mobile,
    #apus-header-mobile .bottom-mobile .row {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;      /* Vertically centers the menu icon and text */
        justify-content: flex-start !important; /* Pulls both elements completely to the left side */
        width: 100% !important;
        gap: 10px !important;                 /* Creates a clean horizontal gap between the icon and text */
    }

    /* 2. Strip width restrictions on these specific columns ONLY inside the bottom menu bar */
    #apus-header-mobile .bottom-mobile .col-xs-3,
    #apus-header-mobile .bottom-mobile .col-xs-9 {
        width: auto !important;
        max-width: none !important;
        flex: 0 0 auto !important;
        float: none !important;
        display: inline-flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. Force the "ALL CATEGORIES" heading text alignment to match left orientation perfectly */
    #apus-header-mobile .bottom-mobile h4.mobile-vertical-menu-title {
        text-align: left !important;
        display: inline-block !important;
        margin: 0 !important;
        padding: 10px 0 !important;          /* Maintains the vertical breathing padding */
    }
}
@media (max-width: 767px) {
    /* Target the Revolution Slider button layer uniquely on mobile */
    #apus-main-content .sr7-btn,
    #apus-main-content [id^="SR7_6_1-22-8"],
    #apus-main-content .sr7-layer.sr7-btn {
        /* Pushes the button down by 25 pixels to clear the text layers above it */
        transform: translateY(15px) !important; 
    }
}
/* ==========================================================================
   SMALL SHOP LIST CONTENT PATCH (Align and Space List-Style Widgets)
   ========================================================================== */
/* ==========================================================================
   SMALL SHOP LIST CONTENT PATCH (Revised Structural Fix)
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. Force the row container into a non-wrapping flex layout row */
    div.item div.products-grid .product-block.shop-list-small {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        padding: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        gap: 20px !important; /* Elegant spacing gap between thumbnail and details */
        float: none !important;
    }

    /* 2. Lock down the thumbnail container dimension parameters */
    .product-block.shop-list-small figure.image,
    .product-block.shop-list-small a.product-image-image-loaded,
    .product-block.shop-list-small a.product-image {
        flex: 0 0 90px !important; /* Retains its footprint cleanly */
        width: 90px !important;
        max-width: 90px !important;
        height: 90px !important;  /* Creates a clean square bounding box */
        margin: 0 !important;
        padding: 0 !important;
        display: block !important;
        float: none !important;
    }

    /* 3. Force thumbnail elements to fill the square box beautifully */
    .product-block.shop-list-small figure.image img,
    .product-block.shop-list-small a.product-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    /* 4. Target the text block wrapper container on the right side */
    .product-block.shop-list-small div.block-inner,
    .product-block.shop-list-small div.metas {
        flex: 1 !important; /* Spans across the remaining layout area */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important; /* Left aligns all metadata text strings */
        text-align: left !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 6px !important; /* Uniform tight spacing between titles and prices */
        float: none !important;
        width: auto !important;
    }

    /* 5. Clean up old clearfixes forcing unexpected line wraps */
    .product-block.shop-list-small::after,
    .product-block.shop-list-small::before,
    .product-block.shop-list-small div.metas::after,
    .product-block.shop-list-small div.metas::before {
        display: none !important;
        content: none !important;
    }
}
/* ==========================================================================
   MOBILE PROMO BANNER ENHANCEMENT (.widget-banner)
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. Make the main banner box larger horizontally and vertically */
    #apus-main-content .widget-banner {
        min-height: 220px !important; /* Expands the background canvas nicely */
        display: flex !important;
        align-items: center !important;
        margin-bottom: 25px !important; /* Spaces it out from sections below */
    }

    /* 2. Transform the text wrapper container into a spacious vertical flex stack */
    #apus-main-content .widget-banner div.infor {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important; /* Aligns content to the left */
        padding: 25px !important;          /* Generates wide inner breathing room */
        height: 100% !important;
        gap: 14px !important;               /* Creates smooth, even spaces between elements */
    }

    /* 3. Strip old theme margins that crunch typography text lines together */
    #apus-main-content .widget-banner h3.title.text-theme,
    #apus-main-content .widget-banner div.info-inner,
    #apus-main-content .widget-banner div.more {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.3 !important;       /* Ensures balanced readability */
    }

    /* 4. Fine-tune the "BUY NOW" button spacing slightly */
    #apus-main-content .widget-banner div.more {
        margin-top: 4px !important;
    }
}
/* ==========================================================================
   MOBILE PROMO BANNER GRAPHIC FIT (.widget-banner)
   ========================================================================== */
/* ==========================================================================
   MOBILE PROMO BANNER BACKGROUND GRAPHIC COVER FIX (.widget-banner)
   ========================================================================== */
/* ==========================================================================
   MOBILE PROMO BANNER POSITION OVERLAY FIX (.widget-banner)
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. Force the parent banner structure to act as a relative anchor box */
    #apus-main-content .widget-banner.medium.has-img {
        position: relative !important;
        min-height: 220px !important; /* Retains the taller spacing canvas size */
        display: block !important;
        overflow: hidden !important;
        width: 100% !important;
    }

    /* 2. Force the text panel container to stretch edge-to-edge OVER the image */
    #apus-main-content .widget-banner div.infor {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;  /* Forces the layout to span full width over the rings */
        height: 100% !important; /* Fills the vertical block area completely */
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: flex-start !important; /* Left aligns typography details beautifully */
        padding: 25px !important;           /* Clean internal perimeter padding */
        box-sizing: border-box !important;
        z-index: 5 !important;              /* Locks text layers safely on top */
        gap: 12px !important;               /* Uniform spacious gaps between elements */
        
        /* Adds a subtle semi-transparent background card for rich text readability if needed */
        background: rgba(255, 255, 255, 0.4) !important; 
    }

    /* 3. If there is a separate theme image link wrapper floating left, keep it full width underneath */
    #apus-main-content .widget-banner a {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }
}
/* ==========================================================================
   VIEWED/RELATED PRODUCTS CAROUSEL MOBILE REPAIR
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. Reset structural content layout rules for the widget wrapper */
    .viewedproducts.products.widget,
    .viewedproducts .widget-content,
    .viewedproducts .slick-list,
    .viewedproducts .slick-track {
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important; 
        display: flex !important;
        flex-wrap: wrap !important;
        height: auto !important;
        overflow: hidden !important;
    }

    /* 2. Clear out forced massive inline widths injected by Slick JS on slides */
    .viewedproducts .slick-slide,
    .viewedproducts .item {
        width: 50% !important;
        min-width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
        display: block !important;
        box-sizing: border-box !important;
        padding: 8px !important; /* Elegant margin gutter between cards */
        float: left !important;
    }

    /* 3. Re-constrain the inner block card architecture */
    .viewedproducts .product-block.grid,
    .viewedproducts .grid-inner,
    .viewedproducts .block-inner {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: space-between !important;
        text-align: center !important;
        padding: 10px !important;
    }

    /* 4. Fix image container to stop stretch distortion pass */
    .viewedproducts .product-block figure.image,
    .viewedproducts .product-block .product-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin-bottom: 10px !important;
    }

    /* 5. Force the shop asset catalog thumbnail image to layout uniformly */
    .viewedproducts .product-block img.attachment-shop_catalog,
    .viewedproducts .product-block img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* 6. Clean up text details block layout */
    .viewedproducts .block-title,
    .viewedproducts .metas {
        width: 100% !important;
        margin: 4px 0 !important;
    }

    /* Hide slider pagination dot lists if they clash on mobile viewports */
    .viewedproducts ul.slick-dots {
        display: none !important;
    }
}
/* ==========================================================================
   VIEWED PRODUCTS CAROUSEL STRUCTURAL FLEX REPAIRS
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. Reset the absolute slider item layouts to prevent vertical runaway lines */
    .viewedproducts .slick-track,
    .viewedproducts .slick-list {
        display: flex !important;
        align-items: stretch !important; /* Forces the columns to be equal height naturally */
        height: auto !important;
    }

    .viewedproducts .item.slick-slide {
        height: auto !important; /* Rips down the broken JS calculated height */
        display: flex !important;
        flex-direction: column !important;
    }

    /* 2. Transform the core product card into a dynamic height column */
    .viewedproducts .product-block.grid,
    .viewedproducts .grid-inner,
    .viewedproducts .block-inner {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 0 auto !important;
        height: 100% !important;
        min-height: 0 !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 12px 8px !important;
    }

    /* 3. Re-anchor image limits cleanly */
    .viewedproducts .product-block figure.image,
    .viewedproducts .product-block .product-image {
        width: 100% !important;
        height: 130px !important; /* Locks down image scaling block boundaries */
        max-height: 130px !important;
        margin: 0 0 10px 0 !important;
        display: block !important;
    }

    .viewedproducts .product-block figure.image img,
    .viewedproducts .product-block .product-image img {
        height: 100% !important;
        width: 100% !important;
        object-fit: contain !important; /* Stops jewelry images from getting cropped */
        display: block !important;
    }

    /* 4. Restore and format text title typography values safely */
    .viewedproducts .block-title,
    .viewedproducts .product-block .block-title h3,
    .viewedproducts .product-block .title {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
        text-align: center !important;
        margin: 4px 0 !important;
        height: auto !important;
    }

    /* 5. Clean layout flow for pricing details matrix */
    .viewedproducts .metas {
        margin-top: auto !important; /* Safely aligns product prices at the baseline */
        padding-top: 6px !important;
        display: block !important;
    }
}
/* ==========================================================================
   RELATED PRODUCTS CAROUSEL MOBILE REPAIR
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. Target the related products container stack to reset track layouts */
    .related.products.widget .slick-track,
    .related.products.widget .slick-list,
    .related.products.widget .widget-content {
        display: flex !important;
        align-items: stretch !important; /* Equal height layout columns naturally */
        flex-wrap: wrap !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        height: auto !important;
    }

    /* 2. Break the 42,000px inline width restriction down to a clean 50% split column */
    .related.products.widget .item.slick-slide {
        width: 50% !important;
        min-width: 50% !important;
        max-width: 50% !important;
        flex: 0 0 50% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
        padding: 8px !important;
    }

    /* 3. Re-anchor internal grid card dimensions */
    .related.products.widget .product-block.grid,
    .related.products.widget .grid-inner,
    .related.products.widget .block-inner {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 0 auto !important;
        height: 100% !important;
        justify-content: flex-start !important;
        align-items: center !important;
        padding: 12px 8px !important;
        text-align: center !important;
        width: 100% !important;
    }

    /* 4. Enforce clean limits on the jewelry thumbnail display box */
    .related.products.widget .product-block figure.image,
    .related.products.widget .product-block .product-image {
        width: 100% !important;
        height: 130px !important;
        max-height: 130px !important;
        margin: 0 0 10px 0 !important;
        display: block !important;
    }

    .related.products.widget .product-block figure.image img,
    .related.products.widget .product-block .product-image img {
        height: 100% !important;
        width: 100% !important;
        object-fit: contain !important; /* Prevents necklaces or rings from getting cropped */
        display: block !important;
    }

    /* 5. Format text titles and cleanly line baseline prices up */
    .related.products.widget .block-title,
    .related.products.widget .title {
        font-size: 13px !important;
        line-height: 1.3 !important;
        margin: 4px 0 !important;
    }

    .related.products.widget .metas {
        margin-top: auto !important; /* Pins pricing data cleanly to the card baseline */
        padding-top: 6px !important;
    }

    /* Hide slider pagination dot lists if they break mobile layout bounds */
    .related.products.widget ul.slick-dots {
        display: none !important;
    }
}
/* ==========================================================================
   MOBILE FOOTER TOP SPACING REPAIR (Collapsing WPBakery Empty Spaces)
   ========================================================================== */
@media (max-width: 767px) {
    /* Force-collapse the stacked empty space blocks inside the footer container */
    #apus-footer .footer-builder-wrapper .vc_empty_space {
        height: 0px !important; /* Reduces the 30px inline runtime heights down cleanly */
        margin: 0 !important;
    }

    /* Neutralize any redundant margin/padding on the initial structural footer row */
    #apus-footer .footer-builder-wrapper > .vc_row:first-of-type {
        margin-top: 0 !important;
        padding-top: 5px !important;
    }
}

/* ==========================================================================
   MOBILE FOOTER COPYRIGHT DISGUISE MASK
   ========================================================================== */
.footer-copyright-text {
    font-size: 0 !important; /* Completely vanishes un-nested raw text nodes */
    color: transparent !important;
}

.footer-copyright-text a {
    font-size: 13px !important; /* Restores crisp, targeted link visibility */
    display: inline-block !important;
}

/* Re-inject a clean structural divider string directly between the inline entities */
.footer-copyright-text a[aria-label="Home"]::after {
    content: "\00a0\00a0|\00a0\00a0"; /* Non-breaking spaces with clean pipe syntax */
    color: #888888 !important; 
    font-size: 13px !important;
}

/* Inject a clean "Copyright 2026 " signature prefix layout string */
.footer-copyright-text::before {
    content: "Copyright 2026 ";
    color: #888888 !important;
    font-size: 13px !important;
    display: inline-block !important;
}





























/* ==========================================================================
   PROJECT PERLATA: ARABIC HERO SLIDER SPACING PATCH
/* ==========================================================================
   PROJECT PERLATA: ARABIC HERO SLIDER SPACING PATCH (DESKTOP & TABLET ONLY)
   ========================================================================== */
@media (min-width: 768px) {
    html[dir="rtl"] #apus-main-content .site-content,
    html[dir="rtl"] #apus-main-content .main-page {
        /* Allows elements inside the main content container to break out on the left side */
        overflow: visible !important;
    }

    html[dir="rtl"] div.vc_column-inner.vc_custom_1512016923140 {
        width: 100% !important;
        max-width: 100% !important;
        
        /* Stronger structural displacement to clear the category curtain */
        margin-right: 293px !important;
        margin-left: -293px !important;
    }
}

/* ==========================================================================
   PROJECT PERLATA: KILL STUCK SLIDER PRELOADER SPIN WHEEL (STAYS GLOBAL)
   ========================================================================== */
/* Forcefully targets and hides Slider Revolution 7's stuck preload elements */
sr7-module sr7-prl,
.sr7-fade-in,
[class*="prlt"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}










/* Shift the image container 15px to the right explicitly in RTL/Arabic mode */
body.rtl .inner-list-small .shop-list-small .content-left {
    transform: translateX(15px) !important;
}



















/* ==========================================================================
   PROJECT PERLATA: BRUTE-FORCE PRELOADER DESTROYER (Global Tree Wipe)
   ========================================================================== */
/* Universal tag-level strike against the preloader asset engine */
sr7-prl, 
.sr7-prl,
div[class^="sr7-prl"],
.sr7-fade-in {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    width: 0 !important;
    max-height: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    content: none !important;
}
/* ==========================================================================
   PROJECT PERLATA: PROMO BANNER COMPONENT HEIGHT EXPANSION
   ========================================================================== */
/* ==========================================================================
   PROJECT PERLATA: PROMO BANNER BRUTE-FORCE HEIGHT OVERRIDE
   ========================================================================== */
/* ==========================================================================
   PROJECT PERLATA: DIRECT WIDGET BANNER HEIGHT FORCE
   ========================================================================== */
/* 1. Force the main banner widget and its structural anchor link container */
/* ==========================================================================
   PROJECT PERLATA: COMPLETE INLINE BACKGROUND BANNER STRETCH
   ========================================================================== */

/* 1. Target the core widget container directly and pull its layout frame taller */
.widget-banner.buy-now-btn {
    display: block !important;
    height: 280px !important; /* Force the exact pixel height footprint you want */
    min-height: 280px !important;
    background-size: cover !important; /* Forces the model/jewelry inline background to scale up */
    background-position: center right !important; /* Prevents cropping out the model's hand */
    position: relative !important;
}

/* 2. Set the text wrapper block to match the new container bounds exactly */
.widget-banner.buy-now-btn .infor {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Centers headline, grey paragraph, and button vertically */
    align-items: flex-start !important;
    padding: 30px !important;
    box-sizing: border-box !important;
}

/* 3. Keep your custom grey paragraph snippet structured beautifully inside the center */
.widget-banner.buy-now-btn .info-inner {
    display: block !important;
    margin-bottom: 15px !important;
}
/* ==========================================================================
   PROJECT PERLATA: MEGA MENU HIGH-PRIORITY TEXTURE GRID
   ========================================================================== */

/* 1. Reset container & force layout structure */
.dropdown-menu-inner .mega-menu-grid {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    gap: 20px !important;
    padding: 30px !important;
    background: #ffffff !important;
    width: 100% !important;
}

/* 2. Configure individual luxury image link blocks */
.dropdown-menu-inner .mega-menu-link {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 120px !important;
    padding: 20px 10px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative !important;
    transition: all 0.3s ease !important;
    color: #ffffff !important; /* Forces link text color to white over the pictures */
    z-index: 1 !important;
}

/* 3. High-contrast tint overlay for clear text legibility */
.dropdown-menu-inner .mega-menu-link::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.4) !important; /* Tint mask layer */
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    z-index: -1 !important; /* Pushes the overlay layer safely behind the text */
}

/* Hover effects */
.dropdown-menu-inner .mega-menu-link:hover::before {
    background: rgba(0, 0, 0, 0.55) !important;
}

.dropdown-menu-inner .mega-menu-link:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important;
    color: #ffffff !important;
}

/* 4. Production Asset Mappings Matrix */
.dropdown-menu-inner .mega-menu-link:nth-child(1)  { background-image: url('https://www.perlatajewelry.com/wp-content/uploads/2026/07/butterflycollection.png') !important; }
.dropdown-menu-inner .mega-menu-link:nth-child(2)  { background-image: url('https://www.perlatajewelry.com/wp-content/uploads/2026/07/customized.png') !important; }
.dropdown-menu-inner .mega-menu-link:nth-child(3)  { background-image: url('https://www.perlatajewelry.com/wp-content/uploads/2026/07/golden.png') !important; }
.dropdown-menu-inner .mega-menu-link:nth-child(4)  { background-image: url('https://www.perlatajewelry.com/wp-content/uploads/2026/07/lebanoncollection.png') !important; }
.dropdown-menu-inner .mega-menu-link:nth-child(5)  { background-image: url('https://www.perlatajewelry.com/wp-content/uploads/2026/07/longNecklaces.png') !important; }
.dropdown-menu-inner .mega-menu-link:nth-child(6)  { background-image: url('https://www.perlatajewelry.com/wp-content/uploads/2026/07/motherofpearl.png') !important; }
.dropdown-menu-inner .mega-menu-link:nth-child(7)  { background-image: url('https://www.perlatajewelry.com/wp-content/uploads/2026/07/mothersGift.png') !important; }
.dropdown-menu-inner .mega-menu-link:nth-child(8)  { background-image: url('https://www.perlatajewelry.com/wp-content/uploads/2026/07/palestinecollection.png') !important; }
.dropdown-menu-inner .mega-menu-link:nth-child(9)  { background-image: url('https://www.perlatajewelry.com/wp-content/uploads/2026/07/pearlsandbeads.png') !important; }
.dropdown-menu-inner .mega-menu-link:nth-child(10) { background-image: url('https://www.perlatajewelry.com/wp-content/uploads/2026/07/bracelets.png') !important; }
.dropdown-menu-inner .mega-menu-link:nth-child(11) { background-image: url('https://www.perlatajewelry.com/wp-content/uploads/2026/07/earrings.png') !important; }
.dropdown-menu-inner .mega-menu-link:nth-child(12) { background-image: url('https://www.perlatajewelry.com/wp-content/uploads/2026/07/necklaces.png') !important; }
.dropdown-menu-inner .mega-menu-link:nth-child(13) { background-image: url('https://www.perlatajewelry.com/wp-content/uploads/2026/07/perlatasPendants.png') !important; }
.dropdown-menu-inner .mega-menu-link:nth-child(14) { background-image: url('https://www.perlatajewelry.com/wp-content/uploads/2026/07/perlatasRings.png') !important; }
.dropdown-menu-inner .mega-menu-link:nth-child(15) { background-image: url('https://www.perlatajewelry.com/wp-content/uploads/2026/07/spiritual.png') !important; }
.dropdown-menu-inner .mega-menu-link:nth-child(16) { background-image: url('https://www.perlatajewelry.com/wp-content/uploads/2026/07/SyriaCollection.png') !important; }

/* 5. Responsive Breakpoints */
@media (max-width: 1024px) {
    .dropdown-menu-inner .mega-menu-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 15px !important; }
}
@media (max-width: 768px) {
    .dropdown-menu-inner .mega-menu-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    .dropdown-menu-inner .mega-menu-grid { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   PROJECT PERLATA: REAL FOOTER COPYRIGHT CONTRAST OVERRIDE
   ========================================================================== */
#apus-footer div.wpb_wrapper p,
#apus-footer div.wpb_wrapper p a {
    color: #ffffff !important;
    opacity: 0.8 !important;
}

/* Make sure the text color stays bright and sharp on hover */
#apus-footer div.wpb_wrapper p a:hover {
    color: #c5a880 !important; /* Elegant gold accent color change on hover */
    opacity: 1 !important;
}















/* Change header cart and wishlist number bubbles to black */
.shopping-cart-items-count, 
.wishlist_products_counter_number,
header .count {
    background-color: #000000 !important;
    color: #ffffff !important;
}


































/* Target the title directly when hovering over the parent block */
.vc_row .widget-categorybanner .category-wrapper a:hover h2.title,
.vc_row .widget-categorybanner .category-wrapper a:hover .title {
    color: #000000 !important;
}

/* Fallback: Direct text selection to force override */
.widget-categorybanner .category-wrapper a:hover * {
    color: #000000 !important;
}














/* Generic class override for Slider Revolution 7 buttons on hover */
.sr7-btn:hover,
.sr7-btn:hover *,
sr7-layer.sr7-btn:hover,
sr7-layer.sr7-btn:hover *,
.sr7-layer.sr7-btn:hover,
.sr7-layer.sr7-btn:hover * {
    color: #ffffff !important;
}









.nav-tabs.style_center.st_thin > li > a::before, .nav-tabs.style_center.st_big > li > a::before, .product-block.grid-item-2 .quickview:hover, .product-block.grid-deal .progress .progress-bar, .wpb-js-composer .vc_tta.vc_general.vc_tta-accordion .vc_active .vc_tta-panel-title::before, .detail-post .entry-tags-list a:hover, .detail-post .entry-tags-list a:active, .apus-pagination > span:hover, .apus-pagination > span.current, .apus-pagination > a:hover, .apus-pagination > a.current, .tabs-v1 .nav-tabs li:focus > a:focus, .tabs-v1 .nav-tabs li:focus > a:hover, .tabs-v1 .nav-tabs li:focus > a, .tabs-v1 .nav-tabs li:hover > a:focus, .tabs-v1 .nav-tabs li:hover > a:hover, .tabs-v1 .nav-tabs li:hover > a, .tabs-v1 .nav-tabs li.active > a:focus, .tabs-v1 .nav-tabs li.active > a:hover, .tabs-v1 .nav-tabs li.active > a, .woocommerce .widget_price_filter .ui-slider .ui-slider-handle, .woocommerce .widget_price_filter .ui-slider .ui-slider-range, .widget-social .social a:hover, .widget-social .social a:active, .widget-social .social a:focus, .tab-product.nav-tabs > li > a::before, .mini-cart .count, .wishlist-icon .count, .slick-carousel .slick-dots li.slick-active button, .widget .widget-title::before, .widget .widgettitle::before, .widget .widget-heading::before, .bg-theme {
    background-color: #000000 !important;
}







#apus-shop-products-wrapper .apus-after-loop-shop ul.page-numbers > li > span.page-numbers.current {
    background: #f5f5f5 !important;
	}


html:root, body:root {
    --gold: #aa945a;
}






/* ==========================================================================
   TAG BANNER COMPONENT: PERFECT SQUARE SPACING MATRIX
   ========================================================================== */

/* 1. Global Flex Container Normalization */
.custom-tagbanner-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    
    /* Set horizontal and vertical spacing to be completely identical */
    gap: 24px !important; 
    
    /* Clear default negative bootstrap margins */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Strip bootstrap floats and pseudo clearfixes that disrupt spacing tracks */
.custom-tagbanner-grid::before,
.custom-tagbanner-grid::after {
    display: none !important;
    content: none !important;
}

/* 2. Item Padding & Margin Baseline Reset */
.custom-tagbanner-grid .tagbanner-item {
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important; /* Spacing is strictly controlled by container gap */
    box-sizing: border-box !important;
}

/* 3. Desktop/Tablet Sizing Rule via CSS Calc (Accounts for Gap) */
@media (min-width: 768px) {
    .custom-tagbanner-grid .tagbanner-item {
        /* Calculates 4 columns minus the fractional distribution of the gaps */
        flex: 0 0 calc((100% - (3 * 24px)) / 4) !important;
        max-width: calc((100% - (3 * 24px)) / 4) !important;
        width: calc((100% - (3 * 24px)) / 4) !important;
    }
}

/* 4. Mobile Layout Rule via CSS Calc (Exactly 2 Columns per Row) */
@media (max-width: 767px) {
    .custom-tagbanner-grid {
        /* Retain identical vertical & horizontal spacing on mobile screens */
        gap: 20px !important; 
    }
    
    .custom-tagbanner-grid .tagbanner-item {
        /* Calculates 2 columns minus the layout gap footprint */
        flex: 0 0 calc((100% - 20px) / 2) !important;
        max-width: calc((100% - 20px) / 2) !important;
        width: calc((100% - 20px) / 2) !important;
    }
}


/* ==========================================================================
   PROJECT PERLATA: CATEGORY BANNER BACKGROUND OVERRIDE
   ========================================================================== */
.widget-categorybanner .category-wrapper {
    padding: 25px 20px !important;
    text-align: center !important;
    background: #faf7f3 !important;
}






































/* ==========================================================================
   GLOBAL MOBILE VIEWPORT EDGES PADDING SAFETY NET
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. Force box-sizing tree-wide to guarantee padding stays inside width tracks */
    html, body, div, section, header, footer {
        box-sizing: border-box !important;
    }

    /* 2. Lock down the absolute layout root boundaries to prevent layout wiggle */
    html, body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 3. Target your theme's outer wrapper layout structure to safely squeeze elements */
    #wrapper-container, 
    .site-content, 
    #apus-main-content,
    #main-container {
        padding-left: 4px !important;
        padding-right: 4px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}
































/**trying to make the products grid centered**/
@media (max-width: 767px) {
    /* Container fix to prevent horizontal overflow and ensure centering */
    .table-visiable-dk {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100vw !important;
        margin: 0 auto !important;
        padding: 0 15px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* Ensure child columns stack and stay centered on small screens */
    .table-visiable-dk > div {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        text-align: center !important;
        padding: 10px 15px !important;
        box-sizing: border-box !important;
    }

    /* Global safety to prevent any horizontal scrolling */
    body, html {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative !important;
    }
}


@media (max-width: 767px) {
/* Prevent the main wrapper from leaking out of the viewport */
#wrapper-container, 
#apus-header-mobile, 
section#main-container {
    width: 100% !important;
    max-width: 100vw !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

/* Fix Bootstrap rows that are pushing content to the right */
section#main-container .row,
.table-visiable-dk .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
}

/* Ensure all columns are centered and contained */
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, 
.col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* Global overflow safety */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative !important;
}
}
/**trying to make the products grid centered**/




















































/** trying to fix the arrows **/

.wcgs-carousel.spswiper .wcgs-spswiper-button-next,
.wcgs-carousel.spswiper .wcgs-spswiper-button-prev {
    z-index: 9999 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Ensure the wrapper doesn't block the buttons */
.spswiper-wrapper {
    z-index: 1 !important;
}

/**trying to fix arrows brp**/




















/* Completely hide WCGS slider arrows */
.wcgs-spswiper-arrow,
.wcgs-spswiper-button-next,
.wcgs-spswiper-button-prev {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


















/* Ensure the wrapper remains the absolute anchor */
.wcgs-slider-image {
    position: relative !important;
}

/* Stretch overlay and explicitly force touch-events to register on mobile */
a.wcgs-slider-lightbox {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 99 !important; /* Bump z-index to sit cleanly above Swiper touch-layers */
    display: block !important;
    cursor: zoom-in !important;
    pointer-events: auto !important; /* Overrides slider plugins disabling link clicks on mobile drag */
    -webkit-tap-highlight-color: rgba(0,0,0,0) !important; /* Prevents ugly grey flash on mobile tap */
}

/* Push the icon overlay to sit safely over Swiper pagination dots and mobile elements */
.wcgs-lightbox, 
.sp_wgs-lightbox,
.sp_wgs-icon-search {
    cursor: pointer !important;
    z-index: 100 !important; /* Ensure it stays above the empty anchor */
    pointer-events: auto !important;
}




/* Hide the gallery magnifier search icon completely */
.wcgs-lightbox, 
.sp_wgs-lightbox {
    display: none !important;
}

/* Mobile only: Hide layout switcher icons and their wrappers */
@media (max-width: 767px) {
    /* Hide the specific Themify grid/list icons */
    .ti-layout-grid3,
    .ti-view-list-alt {
        display: none !important;
    }

    /* Hide the parent containers to prevent empty clickable boxes or gaps on mobile */
    .layout-switcher,
    .grid-list-selector,
    .woocommerce-view-mode {
        display: none !important;
    }
}





/* Force the dropdown mini-cart total text and price to be black */
p.total.text-theme,
p.total.text-theme strong,
p.total.text-theme .woocommerce-Price-amount,
p.total.text-theme .woocommerce-Price-amount bdi,
p.total.text-theme .woocommerce-Price-currencySymbol {
    color: #111111 !important; /* High-contrast rich dark gray/black */
}




/* Force the "Proceed to Checkout" button text on the cart page to be white for readability */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.btn,
.woocommerce-cart .wc-proceed-to-checkout a.wc-forward,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:focus,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:active,
.woocommerce-cart .wc-proceed-to-checkout a.btn:hover,
.woocommerce-cart .wc-proceed-to-checkout a.btn:focus,
.woocommerce-cart .wc-proceed-to-checkout a.btn:active,
.woocommerce-cart .wc-proceed-to-checkout a.wc-forward:hover,
.woocommerce-cart .wc-proceed-to-checkout a.wc-forward:focus,
.woocommerce-cart .wc-proceed-to-checkout a.wc-forward:active {
    color: #ffffff !important;
}











/** fixing mini cart on mobile **/

/* Mobile Off-Canvas Mini Cart Drawer */
/* Mobile Off-Canvas Mini Cart Drawer */
@media (max-width: 991px) {
    /* Transform the mobile topcart dropdown into an off-canvas drawer */
    #apus-header-mobile .apus-topcart .dropdown-menu {
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 320px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        min-height: 100vh !important;
        margin: 0 !important;
        padding: 25px 20px !important;
        background: #ffffff !important;
        z-index: 999999 !important;
        box-shadow: -8px 0 30px rgba(0, 0, 0, 0.12) !important;
        display: block !important;
        opacity: 1 !important;
        visibility: hidden !important;
        transform: translate3d(100%, 0, 0) !important;
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s !important;
        overflow-y: auto !important;
        border: none !important;
        border-radius: 0 !important;
    }

    /* Slide-in transition when active */
    #apus-header-mobile .apus-topcart .dropdown-menu.active {
        visibility: visible !important;
        transform: translate3d(0, 0, 0) !important;
    }

    /* Fixed overlay style inside the cart stacking context */
    #apus-header-mobile .dropdown.version-1.cart #mobile-cart-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 999998 !important;
        pointer-events: auto !important;
        display: block !important;
    }

    /* Force mobile header above other elements when cart is open */
    body.mobile-cart-open #apus-header-mobile {
        z-index: 9999999 !important;
        position: relative !important;
    }

    /* Prevent vertical scrolling on the body while cart drawer is open */
    body.mobile-cart-open {
        overflow: hidden !important;
    }
}

/* Premium Layout for product choices/variations in mini-cart and mobile drawer */
.apus-topcart .dropdown-menu .variation,
#apus-header-mobile .apus-topcart .dropdown-menu .variation {
    display: block !important;
    margin: 8px 0 10px 0 !important;
    padding: 8px 12px !important;
    background: #f7f9fa !important;
    border-left: 3px solid #007bff !important;
    font-size: 11px !important;
    color: #444444 !important;
    clear: both !important;
    border-radius: 2px !important;
}

.apus-topcart .dropdown-menu .variation dt,
#apus-header-mobile .apus-topcart .dropdown-menu .variation dt {
    font-weight: 600 !important;
    color: #111111 !important;
    float: none !important;
    display: inline-block !important;
    margin: 0 4px 2px 0 !important;
    width: auto !important;
}

.apus-topcart .dropdown-menu .variation dd,
#apus-header-mobile .apus-topcart .dropdown-menu .variation dd {
    float: none !important;
    display: inline-block !important;
    margin: 0 0 2px 0 !important;
    width: auto !important;
    color: #444444 !important;
}

.apus-topcart .dropdown-menu .variation dd p,
#apus-header-mobile .apus-topcart .dropdown-menu .variation dd p {
    display: inline !important;
    margin: 0 !important;
}


/** fixing mini cart on mobile **/



/* Force cart and wishlist count bubbles to be perfect circles */
.mini-cart .count, 
.wishlist-icon .count,
.shopping-cart-items-count, 
.wishlist_products_counter_number,
header .count,
#apus-header-mobile a.wishlist-icon span.count,
#apus-header-mobile .dropdown-toggle.mini-cart span.count,
span.count.woosw-custom-menu-item,
#apus-header-mobile span.count {
    width: 18px !important;
    height: 18px !important;
    line-height: 18px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    font-size: 10px !important;
}





















/* ==========================================================================
   MOBILE RESET: RESTORE ORIGINAL LEFT ALIGNMENT
   ========================================================================== */
@media (max-width: 767px) {
    /* 1. Force the features list (Free Delivery, Jewelery Care, etc.) back to left alignment */
    .content-left,
    .content-left .title,
    .content-left .des {
        text-align: left !important;
    }

    /* 2. Force banner text blocks (.info-inner) back to left alignment */
    .info-inner,
    .info-inner * {
        text-align: left !important;
    }

    /* 3. Force single product details (Title, Price, Bullet points) back to left alignment */
    .single-product .summary,
    .single-product .summary .title,
    .single-product .summary .price,
    .single-product .summary .woocommerce-product-details__short-description,
    .single-product .summary * {
        text-align: left !important;
    }
    
    /* Align color/size option circles back to the left */
    .single-product .summary .variable-items-wrapper {
        justify-content: flex-start !important;
    }

    /* 4. Force description tabs back to left alignment */
    .single-product .woocommerce-tabs,
    .single-product .woocommerce-tabs .tab-content,
    .single-product .woocommerce-tabs .panel,
    .single-product .woocommerce-tabs * {
        text-align: left !important;
    }
}








/* Custom fix for mobile off-canvas close behavior in RTL & LTR */
html.mm-blocking #mm-blocker {
    display: block !important;
    transform: none !important;
    -webkit-transform: none !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 998 !important;
    pointer-events: auto !important;
}

/* Ensure the off-canvas menu is positioned above the click blocker */
.mm-menu.mm-offcanvas {
    z-index: 999 !important;
}








/* Custom fix for WooCommerce product review stars */
.woocommerce #respond p.stars {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin: 10px 0 !important;
}

.woocommerce #respond p.stars a {
    position: relative;
    width: 1.5em !important;
    height: 1.5em !important;
    text-indent: -9999px !important;
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    text-decoration: none !important;
}

/* Hide theme's default multi-star text-indent overrides and borders */
.woocommerce #respond p.stars a::after {
    display: none !important;
    content: "" !important;
}

/* Base style for the single empty star */
.woocommerce #respond p.stars a::before {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    text-indent: 0 !important;
    font-family: "FontAwesome" !important;
    content: "\f006" !important; /* fa-star-o (empty star) */
    font-size: 22px !important;
    color: #ffb600 !important; /* Premium golden star color */
    line-height: 1 !important;
    text-align: center !important;
    transition: color 0.15s ease, transform 0.1s ease;
}

/* Scale effect on hover */
.woocommerce #respond p.stars a:hover::before {
    transform: scale(1.15);
}

/* Hover effect: fill all stars up to the hovered one */
.woocommerce #respond p.stars:hover a::before {
    content: "\f005" !important; /* fa-star (filled star) */
}
.woocommerce #respond p.stars:hover a:hover ~ a::before {
    content: "\f006" !important; /* fa-star-o (empty star) */
}

/* Selection state: fill all stars up to the clicked active one */
.woocommerce #respond p.stars.selected a::before {
    content: "\f005" !important; /* fa-star (filled star) */
}
.woocommerce #respond p.stars.selected a.active ~ a::before {
    content: "\f006" !important; /* fa-star-o (empty star) */
}














































































/* Unify website banner and slider buttons to look and hover the same */
.widget-banner a.btn, .widget-banner button, .widget-banner .button, .widget-banner .btn-primary, .widget-banner .btn-secondary, .widget-banner .yozi-btn, .widget-banner .rev-btn, .widget-banner .tp-button,
.yozi-banner a.btn, .yozi-banner button, .yozi-banner .button, .yozi-banner .btn-primary, .yozi-banner .btn-secondary, .yozi-banner .yozi-btn, .yozi-banner .rev-btn, .yozi-banner .tp-button,
.banner a.btn, .banner button, .banner .button, .banner .btn-primary, .banner .btn-secondary, .banner .yozi-btn, .banner .rev-btn, .banner .tp-button,
.rev_slider a.btn, .rev_slider button, .rev_slider .button, .rev_slider .btn-primary, .rev_slider .btn-secondary, .rev_slider .yozi-btn, .rev_slider .rev-btn, .rev_slider .tp-button,
.tp-caption a.btn, .tp-caption button, .tp-caption .button, .tp-caption .btn-primary, .tp-caption .btn-secondary, .tp-caption .yozi-btn, .tp-caption .rev-btn, .tp-caption .tp-button,
.slide a.btn, .slide button, .slide .button, .slide .btn-primary, .slide .btn-secondary, .slide .yozi-btn, .slide .rev-btn, .slide .tp-button,
.slides a.btn, .slides button, .slides .button, .slides .btn-primary, .slides .btn-secondary, .slides .yozi-btn, .slides .rev-btn, .slides .tp-button,
.hero-slider a.btn, .hero-slider button, .hero-slider .button, .hero-slider .btn-primary, .hero-slider .btn-secondary, .hero-slider .yozi-btn, .hero-slider .rev-btn, .hero-slider .tp-button,
.hero a.btn, .hero button, .hero .button, .hero .btn-primary, .hero .btn-secondary, .hero .yozi-btn, .hero .rev-btn, .hero .tp-button,
.hero-section a.btn, .hero-section button, .hero-section .button, .hero-section .btn-primary, .hero-section .btn-secondary, .hero-section .yozi-btn, .hero-section .rev-btn, .hero-section .tp-button,
.banner-countdown-widget a.btn, .banner-countdown-widget button, .banner-countdown-widget .button, .banner-countdown-widget .btn-primary, .banner-countdown-widget .btn-secondary, .banner-countdown-widget .yozi-btn, .banner-countdown-widget .rev-btn, .banner-countdown-widget .tp-button,
.wp-block-cover a.btn, .wp-block-cover button, .wp-block-cover .button, .wp-block-cover .btn-primary, .wp-block-cover .btn-secondary, .wp-block-cover .yozi-btn, .wp-block-cover .rev-btn, .wp-block-cover .tp-button,
.wp-block-button__link {
    background-color: transparent !important;
    background: transparent !important;
    border: 2px solid #111111 !important;
    color: #111111 !important;
    border-radius: 50px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    height: auto !important;
    text-align: center !important;
    text-transform: none !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important;
    box-shadow: none !important;
    outline: none !important;
    cursor: pointer !important;
}









/* Hover state overrides */
.widget-banner a.btn:hover, .widget-banner button:hover, .widget-banner .button:hover, .widget-banner .btn-primary:hover, .widget-banner .btn-secondary:hover, .widget-banner .yozi-btn:hover, .widget-banner .rev-btn:hover, .widget-banner .tp-button:hover,
.yozi-banner a.btn:hover, .yozi-banner button:hover, .yozi-banner .button:hover, .yozi-banner .btn-primary:hover, .yozi-banner .btn-secondary:hover, .yozi-banner .yozi-btn:hover, .yozi-banner .rev-btn:hover, .yozi-banner .tp-button:hover,
.banner a.btn:hover, .banner button:hover, .banner .button:hover, .banner .btn-primary:hover, .banner .btn-secondary:hover, .banner .yozi-btn:hover, .banner .rev-btn:hover, .banner .tp-button:hover,
.rev_slider a.btn:hover, .rev_slider button:hover, .rev_slider .button:hover, .rev_slider .btn-primary:hover, .rev_slider .btn-secondary:hover, .rev_slider .yozi-btn:hover, .rev_slider .rev-btn:hover, .rev_slider .tp-button:hover,
.tp-caption a.btn:hover, .tp-caption button:hover, .tp-caption .button:hover, .tp-caption .btn-primary:hover, .tp-caption .btn-secondary:hover, .tp-caption .yozi-btn:hover, .tp-caption .rev-btn:hover, .tp-caption .tp-button:hover,
.slide a.btn:hover, .slide button:hover, .slide .button:hover, .slide .btn-primary:hover, .slide .btn-secondary:hover, .slide .yozi-btn:hover, .slide .rev-btn:hover, .slide .tp-button:hover,
.slides a.btn:hover, .slides button:hover, .slides .button:hover, .slides .btn-primary:hover, .slides .btn-secondary:hover, .slides .yozi-btn:hover, .slides .rev-btn:hover, .slides .tp-button:hover,
.hero-slider a.btn:hover, .hero-slider button:hover, .hero-slider .button:hover, .hero-slider .btn-primary:hover, .hero-slider .btn-secondary:hover, .hero-slider .yozi-btn:hover, .hero-slider .rev-btn:hover, .hero-slider .tp-button:hover,
.hero a.btn:hover, .hero button:hover, .hero .button:hover, .hero .btn-primary:hover, .hero .btn-secondary:hover, .hero .yozi-btn:hover, .hero .rev-btn:hover, .hero .tp-button:hover,
.hero-section a.btn:hover, .hero-section button:hover, .hero-section .button:hover, .hero-section .btn-primary:hover, .hero-section .btn-secondary:hover, .hero-section .yozi-btn:hover, .hero-section .rev-btn:hover, .hero-section .tp-button:hover,
.banner-countdown-widget a.btn:hover, .banner-countdown-widget button:hover, .banner-countdown-widget .button:hover, .banner-countdown-widget .btn-primary:hover, .banner-countdown-widget .btn-secondary:hover, .banner-countdown-widget .yozi-btn:hover, .banner-countdown-widget .rev-btn:hover, .banner-countdown-widget .tp-button:hover,
.wp-block-cover a.btn:hover, .wp-block-cover button:hover, .wp-block-cover .button:hover, .wp-block-cover .btn-primary:hover, .wp-block-cover .btn-secondary:hover, .wp-block-cover .yozi-btn:hover, .wp-block-cover .rev-btn:hover, .wp-block-cover .tp-button:hover,
.wp-block-button__link:hover,
.sr7-btn:hover,
sr7-layer.sr7-btn:hover,
.sr7-layer.sr7-btn:hover {
    background-color: #111111 !important;
    background: #111111 !important;
    color: #ffffff !important;
    border-color: #111111 !important;
}

/* Force all text/elements inside hovered banner buttons to turn white */
.widget-banner a.btn:hover *, .widget-banner button:hover *, .widget-banner .button:hover *, .widget-banner .btn-primary:hover *, .widget-banner .btn-secondary:hover *, .widget-banner .yozi-btn:hover *, .widget-banner .rev-btn:hover *, .widget-banner .tp-button:hover *,
.yozi-banner a.btn:hover *, .yozi-banner button:hover *, .yozi-banner .button:hover *, .yozi-banner .btn-primary:hover *, .yozi-banner .btn-secondary:hover *, .yozi-banner .yozi-btn:hover *, .yozi-banner .rev-btn:hover *, .yozi-banner .tp-button:hover *,
.banner a.btn:hover *, .banner button:hover *, .banner .button:hover *, .banner .btn-primary:hover *, .banner .btn-secondary:hover *, .banner .yozi-btn:hover *, .banner .rev-btn:hover *, .banner .tp-button:hover *,
.rev_slider a.btn:hover *, .rev_slider button:hover *, .rev_slider .button:hover *, .rev_slider .btn-primary:hover *, .rev_slider .btn-secondary:hover *, .rev_slider .yozi-btn:hover *, .rev_slider .rev-btn:hover *, .rev_slider .tp-button:hover *,
.tp-caption a.btn:hover *, .tp-caption button:hover *, .tp-caption .button:hover *, .tp-caption .btn-primary:hover *, .tp-caption .btn-secondary:hover *, .tp-caption .yozi-btn:hover *, .tp-caption .rev-btn:hover *, .tp-caption .tp-button:hover *,
.slide a.btn:hover *, .slide button:hover *, .slide .button:hover *, .slide .btn-primary:hover *, .slide .btn-secondary:hover *, .slide .yozi-btn:hover *, .slide .rev-btn:hover *, .slide .tp-button:hover *,
.slides a.btn:hover *, .slides button:hover *, .slides .button:hover *, .slides .btn-primary:hover *, .slides .btn-secondary:hover *, .slides .yozi-btn:hover *, .slides .rev-btn:hover *, .slides .tp-button:hover *,
.hero-slider a.btn:hover *, .hero-slider button:hover *, .hero-slider .button:hover *, .hero-slider .btn-primary:hover *, .hero-slider .btn-secondary:hover *, .hero-slider .yozi-btn:hover *, .hero-slider .rev-btn:hover *, .hero-slider .tp-button:hover *,
.hero a.btn:hover *, .hero button:hover *, .hero .button:hover *, .hero .btn-primary:hover *, .hero .btn-secondary:hover *, .hero .yozi-btn:hover *, .hero .rev-btn:hover *, .hero .tp-button:hover *,
.hero-section a.btn:hover *, .hero-section button:hover *, .hero-section .button:hover *, .hero-section .btn-primary:hover *, .hero-section .btn-secondary:hover *, .hero-section .yozi-btn:hover *, .hero-section .rev-btn:hover *, .hero-section .tp-button:hover *,
.banner-countdown-widget a.btn:hover *, .banner-countdown-widget button:hover *, .banner-countdown-widget .button:hover *, .banner-countdown-widget .btn-primary:hover *, .banner-countdown-widget .btn-secondary:hover *, .banner-countdown-widget .yozi-btn:hover *, .banner-countdown-widget .rev-btn:hover *, .banner-countdown-widget .tp-button:hover *,
.wp-block-cover a.btn:hover *, .wp-block-cover button:hover *, .wp-block-cover .button:hover *, .wp-block-cover .btn-primary:hover *, .wp-block-cover .btn-secondary:hover *, .wp-block-cover .yozi-btn:hover *, .wp-block-cover .rev-btn:hover *, .wp-block-cover .tp-button:hover *,
.wp-block-button__link:hover *,
.sr7-btn:hover *,
sr7-layer.sr7-btn:hover *,
.sr7-layer.sr7-btn:hover * {
    color: #ffffff !important;
}


/* Mobile Banner Text & Button Shrink */
@media (max-width: 767px) {
    /* 1. Make the banner title smaller */
    .widget-banner h3.title,
    .widget-banner h3.title span {
        font-size: 16px !important;
        line-height: 1.2 !important;
    }

    /* 2. Make the subtitle container smaller (If you remove/edit the inline style in WPBakery) */
    .widget-banner .info-inner,
    .widget-banner .info-inner span {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    /* 3. Shrink the button text size and its padding */
    .widget-banner .more a,
    .widget-banner a.btn-theme.btn-outline {
        font-size: 11px !important;
        padding-top: 6px !important;
        padding-bottom: 6px !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        line-height: 1.2 !important;
    }
}



/* Shrink the banner button size on Desktop only */
@media (min-width: 768px) {
    .widget-banner .more a,
    .widget-banner a.btn-theme.btn-outline {
        font-size: 12px !important;      /* Default was 14px */
        padding-top: 6px !important;      /* Default was 10px */
        padding-bottom: 6px !important;   /* Default was 10px */
        padding-left: 18px !important;    /* Default was 28px */
        padding-right: 18px !important;   /* Default was 28px */
        line-height: 1.2 !important;
    }
}





















/* Taller aspect ratio for mobile product images (Contain mode) */
@media (max-width: 767px) {
    /* 1. Target the image container and force a 3:4 vertical ratio */
    .products-grid .product-block figure.image,
    .products-grid .product-block .product-image,
    .products .product-block figure.image,
    .products .product-block .product-image {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 3 / 4 !important; /* Taller vertical ratio (3 wide by 4 tall) */
        height: auto !important;
        overflow: hidden !important;
        display: block !important;
        background: #ffffff !important; /* Blends white image background */
    }

    /* 2. Fit the image beautifully inside the box without cropping */
    .products-grid .product-block .product-image img,
    .products .product-block .product-image img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important; /* Prevents jewelry from cutting off */
        display: block !important;
        margin: 0 auto !important;
    }
}
















/* ==========================================================================
   PROJECT PERLATA: HIDE "ON SALE" AND "BEST RATED" PRODUCTS TABS
   ========================================================================== */
/* Hide the tab headers for On Sale and Best Rated */
.widget-products-tabs .nav-tabs > li:nth-child(2),
.widget-products-tabs .nav-tabs > li:nth-child(3),
.widget-products-tabs .nav-tabs > li:has(a[href$="-1"]),
.widget-products-tabs .nav-tabs > li:has(a[href$="-2"]) {
    display: none !important;
}

/* Hide the tab content panes */
.widget-products-tabs .tab-content > .tab-pane[id$="-1"],
.widget-products-tabs .tab-content > .tab-pane[id$="-2"] {
    display: none !important;
}