/*
Theme Name: RefurbishStore Child
Description: Custom child theme to emulate a clean refurbished store design (AsNew style)
Author: Dhiraj Patra
Template: storefront
Version: 1.1.0
Text Domain: refurbishstore-child
*/

.home .woocommerce-breadcrumb {
    display: none !important;
}

/* --- Global Modern Styling --- */
body {
    background-color: #f8fafc;
    /* Professional light grey background */
    color: #334155;
    font-family: 'Inter', -apple-system, sans-serif;
}

/* --- The "AsNew" Product Card Grid --- */
ul.products li.product {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px !important;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left;
}

ul.products li.product:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

.woocommerce-loop-product__title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin: 15px 0 10px !important;
    line-height: 1.4;
}

/* Accent Pricing (Refurbished Store Pink/Purple) */
ul.products li.product .price {
    color: #db2777 !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    display: block;
    margin-bottom: 15px;
}

/* Trust Badge Styling (e.g., "Refurbished" or "Sale") */
.onsale {
    background-color: #10b981 !important;
    /* Trustworthy Green */
    border-radius: 6px !important;
    font-weight: 700 !important;
    padding: 4px 12px !important;
}

/* --- Refined AsNew Header Layout --- */
/* --- Support for Header Background Images --- */
.site-header {
    background-size: cover !important;
    background-position: center !important;
    padding: 0 !important;
    /* Remove !important from background-color if you want Customizer to control it */
    background-color: transparent;
}

/* Row 2: Category bar usually stays solid for readability */
/* --- Row 2: Navigation Bar Fix --- */
.asnew-nav-bar {
    margin-bottom: 0 !important;
    background: #ffffff;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
}

.main-navigation ul.nav-menu li a {
    padding: 12px 15px !important;
    /* Keeps navigation row compact */
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* 1. Logo: Keep it strictly to the left */
.asnew-logo {
    flex: 0 0 auto;
    max-width: 180px;
}

.asnew-logo img {
    height: 50px !important;
    /* Adjust based on your actual logo proportions */
    width: auto;
}

/* 2. Search Bar: Center and Expand */
.asnew-search {
    flex: 1 !important;
    max-width: 600px !important;
    position: relative;
    z-index: 10;
}

.asnew-search form {
    margin: 0 !important;
}

.asnew-search input[type="text"],
.asnew-search input[type="search"] {
    width: 100% !important;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 30px !important;
    /* Rounded pill shape like reference */
    padding: 12px 25px 12px 45px !important;
    font-size: 14px;
}

/* 3. Navigation: Align to the Right */
.asnew-nav {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto;
}

.main-navigation ul {
    display: flex !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.main-navigation ul li {
    margin: 0 10px !important;
}

.main-navigation ul li a {
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    color: #1e293b !important;
}

/* Sub-menu Grid (Rows and Columns) */
/* --- THE SUB-MENU FIX: Hide by default, show ONLY on hover --- */
.main-navigation ul.nav-menu li ul.sub-menu {
    display: none !important;
    /* Force hide */
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 9999;
    flex-wrap: wrap;
    width: 800px;
    padding: 20px !important;
}

/* Correct Hover Logic */
.main-navigation ul.nav-menu li:hover>ul.sub-menu {
    display: flex !important;
    /* Show only when hovering parent */
    visibility: visible;
    opacity: 1;
}

/* Sub-menu Item Styling */
.main-navigation ul.sub-menu li {
    flex: 0 0 25% !important;
    /* 4 items per row */
    padding: 5px !important;
}

.main-navigation ul.sub-menu li a {
    font-size: 12px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    color: #444 !important;
}

/* 4. Secondary Features (Cart/Account) */
.site-header-cart {
    margin-left: 15px !important;
}

/* --- Category Bar Styling --- */
.asnew-category-bar {
    background: #1e293b;
    /* Dark bar for categories */
    color: #fff;
    padding: 8px 0;
}

.category-menu-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.category-menu-list li a {
    color: #fff !important;
    padding: 10px 20px !important;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
}

/* --- Navigation Bar --- */
/* --- Header Row Refinement --- */
/* Ensure Row 1 remains transparent to show the header background */
.asnew-main-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: auto !important;
    /* Remove the 60px height constraint */
    min-height: 0 !important;
    padding: 3px 0 !important;
    /* Controls the exact height of the bar */
}

/* --- RefurbishStore: Final Header Layout Fix --- */

/* 1. Main Container: Force Single Row */
.site-header .col-full {
    max-width: 90% !important;
    display: flex !important;
    flex-flow: row nowrap !important;
    /* Forces single line */
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 0 !important;
}

/* 2. Logo Area */
/* --- Branding: Logo, Title, and Tagline Layout --- */

.asnew-logo {
    display: flex !important;
    align-items: center !important;
    /* Vertically centers the logo with the title */
    flex: 0 0 auto !important;
    gap: 15px !important;
    /* Space between logo and text */
}

/* Ensure the logo itself stays tight */
.logo-image img {
    max-height: 45px !important;
    width: auto !important;
    display: block;
}

/* Text Wrapper */
.asnew-site-branding {
    display: flex;
    flex-direction: column;
    /* Stacks Title above Tagline */
    justify-content: center;
    min-width: 300px;
}

/* Site Title: Right of Logo */
.asnew-site-branding .site-title {
    margin: 0 !important;
    font-size: 20px !important;
    font-weight: bold !important;
    line-height: 1.2 !important;
}

.asnew-site-branding .site-title a {
    /* color: #1e293b !important; */
    font-weight: bolder !important;
    text-decoration: none !important;
}

/* Tagline: Below Title */
.asnew-site-branding .site-description {
    margin: 0 !important;
    width: 100% !important;
    font-size: 12px !important;
    /* color: #64748b !important; */
    /* Professional grey */
    font-weight: 500 !important;
    line-height: 1.1 !important;
}

/* 3. Search Bar: Centered and Responsive */
.asnew-search {
    flex: 0 0 0 !important;
    /* Increased width by 200px (was 500px) */
    margin-left: 60px !important;
    /* Maintains the ~300px distance from edge */
}

.asnew-search input[type="text"],
.asnew-search input[type="search"] {
    width: 100% !important;
    height: 42px !important;
    /* Standard height for search input */
    border-radius: 30px !important;
    border: 1px solid #e2e8f0 !important;
    padding: 0 25px !important;
    background-color: #f8fafc !important;
    font-size: 14px;
}

/* 4. Utilities (Phone, Cart, User, Map) */
.asnew-utilities {
    margin-left: auto !important;
    margin-right: auto !important;
    /* This pushes icons to the far right */
    display: flex !important;
    align-items: center !important;
    gap: 30px !important;
}

.util-item {
    color: #333 !important;
    font-size: 18px !important;
    text-decoration: none !important;
    display: flex;
    align-items: center;
}

.util-item.phone {
    flex-direction: row-reverse;
}

.util-text {
    margin-left: 8px;
    margin-right: 10px;
    font-size: 12px;
    line-height: 1.2;
}

/* Store Address Popup: Stays floating above content */
.store-popup {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #eee;
    padding: 15px;
    width: 280px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    z-index: 99999;
}

.store-trigger:hover .store-popup {
    display: block !important;
}

.main-navigation ul.nav-menu li a {
    padding: 10px 15px !important;
    /* Tighter navigation row */
    font-size: 12px !important;
    /* Professional small caps look */
    font-weight: 700 !important;
}

.main-navigation ul.nav-menu {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 25px;
}

/* Phone Icon Ringing Animation */
@keyframes ring {
    0% {
        transform: rotate(0deg);
    }

    10% {
        transform: rotate(5deg);
    }

    20% {
        transform: rotate(-5deg);
    }

    30% {
        transform: rotate(5deg);
    }

    40% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.util-item.phone .fa {
    animation: ring 2s infinite;
}

/* --- Horizontal Social Icon Menu --- */
.menu-social-menu-container ul,
.menu-social-menu ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    list-style: none !important;
    margin: 15px 0 !important;
    padding: 0 !important;
}

.menu-social-menu ul li {
    list-style: none !important;
    margin: 0 !important;
}

.menu-social-menu ul li a::before {
    font-family: "FontAwesome" !important;
    font-size: 22px !important;
    /* Set icon size */
    display: inline-block;
    content: "\f0ac";
    /* Default globe icon if specific one fails */
}

/* Hover Effects */
.menu-social-menu ul li a:hover {
    color: #db2777 !important;
    /* Pink Accent from AsNew design */
}

/* Hide any remaining text spans */
.menu-social-menu ul li a span {
    display: none !important;
}

.site-footer {
    background-color: #f3f3f3;
    color: #3b3c3f;
    padding: 0 0 0;
}

/* --- Custom Footer Credits Styling --- */
.site-footer .site-info {
    text-align: center;
    padding: 20px 0;
    color: #1e293b !important;
    /* Dark slate text */
    font-size: 13px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.site-footer .site-info a {
    color: #db2777 !important;
    /* Pink accent link */
    font-weight: 700;
}

/* --- Remove Homepage Title --- */
.home .entry-header {
    display: none !important;
}

/* --- Tighten Slider and Shop Content Spacing --- */

/* 1. Remove the gap between the Header/Menu and the Slider */
.site-content {
    padding-top: 0 !important;
}

/* 2. Remove any default margins from the main content area */
.home #content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 2. Remove default WooCommerce header padding/margins */
.home .woocommerce-products-header,
.archive .woocommerce-products-header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* 3. Tighten the space between Slider and Product Grid */
/* Adjust the spacing so the slider sits perfectly */
.home .site-main {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.home .site-content .col-full {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* 2. Ensure the main content area has no side margins */
.home #primary {
    width: 100% !important;
    margin: 0 !important;
}

.home .asnew-home-slider {
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

.home .metaslider {
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    max-width: 100vw !important;
}

/* 2. Remove internal padding from the slider and its list items */
.home .metaslider .slides,
.home .metaslider .slides li {
    margin: 0 !important;
    padding: 0 !important;
}

/* 3. Remove default theme gaps above and below the content area */
.home .site-content,
/* --- Tighten Space Below Slider --- */

/* 1. Remove padding from the main entry content where the title starts */
.home .entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 2. Remove default margin from the Shop by Category heading */
.home section.storefront-product-section h2.section-title {
    margin-top: 10px !important;
    margin-bottom: 25px !important;
    padding-top: 0 !important;
}

/* 3. Ensure the primary content area has no offset */
.home #primary {
    margin-top: 0 !important;
}

/* 4. Fix for any hidden paragraph tags often created by WordPress editor gaps */
.home .entry-content>p:empty {
    display: none !important;
}

/* 4. Ensure images stretch across the entire width */
.home .metaslider img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* --- Remove Space Above Shop by Category --- */

/* 1. Remove padding from the main entry content */
.home .entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 2. Target the specific "Shop by Category" heading if it has a margin */
.home .entry-content h2:first-of-type {
    margin-top: 0 !important;
    padding-top: 10px !important;
    /* Tiny bit of breathing room */
}

/* --- Home Page Layout: Slider & Brands --- */

/* 1. Force Slider to Full Width */
/* --- Home Page Layout: Slider & Brands --- */

/* 1. Force Slider to Full Width */
.asnew-home-slider {
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

.storefront-woocommerce-brands .brand-thumbnails {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
    padding: 0 !important;
    list-style: none !important;
}

.storefront-woocommerce-brands .brand-thumbnails img {
    width: 300px !important;
    height: 300px !important;
}

.storefront-woocommerce-brands .brand-thumbnails li a::after {
    content: attr(title);
    display: block;
    text-align: center;
    margin-top: 10px;
    font-weight: bold;
    color: #333;
}

/* 3. Reduce gap between Navigation and Slider */
.home .site-content {
    padding-top: 0 !important;
}

/* 3. Reduce gap between Navigation and Slider */
.home .site-content {
    padding-top: 0 !important;
}

/* 3. Reduce gap between Navigation and Slider */
.home .site-content {
    padding-top: 0 !important;
}

/* 4. Ensure the site-main area doesn't have a top offset */
.home .site-main {
    padding-top: 0 !important;
}

.home ul.products {
    padding: 0 40px !important;
}

/* --- Ramdev Style Footer Social Bar --- */

.ramdev-footer-style {
    padding: 30px 0 !important;
    text-align: center;
}

/* 1. Circle Social Icons */
.ramdev-social-icons {
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    list-style: none !important;
    margin: 0 0 20px 0 !important;
    padding: 0 !important;
}

.ramdev-social-icons li a {
    font-size: 0 !important;
    /* Hide menu text */
    width: 40px;
    height: 40px;
    background: #ffffff;
    /* White circle */
    color: #0f172a !important;
    /* Dark icon */
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    transition: transform 0.3s ease, background 0.3s ease;
}

.ramdev-social-icons li a:hover {
    transform: translateY(-3px);
    background: #db2777;
    /* Pink accent on hover */
    color: #ffffff !important;
}

/* 2. FontAwesome Icon Assignment */
.ramdev-social-icons li a::before {
    font-family: "FontAwesome" !important;
    font-size: 18px !important;
}

.ramdev-social-icons li a[href*="facebook.com"]::before {
    content: "\f09a";
}

.ramdev-social-icons li a[href*="twitter.com"]::before {
    content: "\f099";
}

.ramdev-social-icons li a[href*="instagram.com"]::before {
    content: "\f16d";
}

.ramdev-social-icons li a[href*="youtube.com"]::before {
    content: "\f167";
}

.ramdev-social-icons li a[href*="linkedin.com"]::before {
    content: "\f0e1";
}

.ramdev-social-icons li a[href*="pinterest.com"]::before {
    content: "\f0d2";
}

/* 3. Credits Text Styling */
.footer-credits-row {
    font-size: 12px;
    opacity: 0.8;
}

.footer-credits-row a {
    color: #db2777 !important;
    font-weight: bold;
    text-decoration: none;
}

.page-template-template-homepage .type-page {
    padding-top: 10px;
    padding-bottom: 0px;
    position: relative;
}

/* --- Yellow Promotion Bar Styling --- */

.asnew-promotion-bar {
    background-color: #faff00 !important;
    /* Bright yellow like reference */
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.asnew-promotion-bar .col-full {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap;
}

.promo-item {
    display: flex !important;
    align-items: center !important;
    gap: 15px;
    flex: 1;
    min-width: 200px;
    padding: 10px;
}

.promo-item i.fa {
    background: #fff;
    color: #000;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 2px solid #000;
}

.promo-text {
    display: flex;
    flex-direction: column;
}

.promo-text strong {
    font-size: 13px;
    font-weight: 800;
    color: #000;
    text-transform: uppercase;
}

.promo-text span {
    font-size: 11px;
    color: #333;
}

/* --- NewJaisa Style Stats Bar --- */

.asnew-stats-bar {
    background: #ffffff !important;
    border-bottom: 1px solid #eeeeee;
    padding: 25px 0 !important;
    width: 100% !important;
}

.asnew-stats-bar .stats-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap;
    max-width: 90% !important;
    margin: 0 auto !important;
}

.stat-item {
    display: flex !important;
    align-items: center !important;
    gap: 15px;
    flex: 1;
    min-width: 220px;
    padding: 10px;
}

.stat-icon {
    width: 50px;
    height: 50px;
    background: #f8fafc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e2e8f0;
}

.stat-icon i.fa {
    font-size: 22px;
    color: #334155;
}

/* Custom Yellow Icon for Ratings */
.stat-item:last-child .stat-icon i.fa {
    color: #fbbf24;
}

.stat-info {
    display: flex;
    flex-direction: column;
}

.stat-info strong {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}

.stat-info span {
    font-size: 10px;
    color: #64748b;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 4px;
}

.stars {
    color: #fbbf24;
    font-size: 14px;
    margin-left: 5px;
}