/*
Theme Name: Noor Universal
Theme URI: https://noor-traders.com.pk
Author: M. Ashfaq Noor
Author URI: https://noor-traders.com.pk
Description: A complete, general-purpose WooCommerce store theme. Works for any kind of product - not just one category. Includes an editable welcome banner, a homepage slider for new/sale items, and a product grid built with its own CSS so it never breaks from plugin conflicts. Every page (About, Contact, etc.) is fully editable, including with Elementor. Logo, welcome text, and contact details are all managed from Appearance > Customize - nothing is hardcoded.
Version: 1.0.0
Requires at least: 5.9
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: noor-universal
*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');

:root {
    --nu-primary: #4c1d95;
    --nu-primary-dark: #37146e;
    --nu-accent: #f5b700;
    --nu-dark: #161221;
    --nu-light-bg: #faf8fc;
    --nu-sale: #e63946;
    --nu-text: #2b2b2b;
    --nu-muted: #767676;
    --nu-card-shadow: 0 2px 12px rgba(22,18,33,0.08);
    --nu-radius: 12px;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--nu-light-bg);
    color: var(--nu-text);
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}
h1, h2, h3, h4, .nu-logo-text, .nu-nav-menu li a, .nu-btn {
    font-family: 'Poppins', sans-serif;
}
a { color: inherit; }
img { max-width: 100%; display: block; }
.nu-container { max-width: 1280px; margin: 0 auto; padding: 0 5%; }

/* ===== Top Bar ===== */
.nu-topbar {
    background: var(--nu-dark);
    color: #cfc7dd;
    font-size: 13px;
    padding: 7px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}
.nu-topbar a { color: #cfc7dd; text-decoration: none; }
.nu-topbar i { color: var(--nu-accent); margin-right: 5px; }
.nu-topbar .nu-topbar-right { display: flex; gap: 18px; flex-wrap: wrap; }

/* ===== Header ===== */
.nu-header { background: #fff; padding: 16px 5%; box-shadow: var(--nu-card-shadow); position: sticky; top: 0; z-index: 999; }
.nu-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.nu-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.nu-logo img,
.nu-logo .custom-logo { max-height: 52px; width: auto; }
.nu-logo-text { font-size: 26px; font-weight: 800; color: var(--nu-dark); letter-spacing: -0.5px; }
.nu-logo-text span { color: var(--nu-primary); }

.nu-search { flex-grow: 1; max-width: 480px; display: flex; }
.nu-search input[type="search"] {
    width: 100%; border: 2px solid var(--nu-primary); border-right: none;
    border-radius: 6px 0 0 6px; padding: 10px 14px; font-size: 14px; outline: none;
}
.nu-search button { background: var(--nu-primary); color: #fff; border: none; padding: 0 18px; border-radius: 0 6px 6px 0; cursor: pointer; font-size: 15px; }
.nu-search button:hover { background: var(--nu-primary-dark); }

.nu-header-actions { display: flex; align-items: center; gap: 22px; }
.nu-action-item { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--nu-dark); font-weight: 600; font-size: 13px; }
.nu-action-item i { font-size: 21px; color: var(--nu-primary); }
.nu-action-item .nu-action-label { color: var(--nu-muted); font-size: 11px; font-weight: 400; display: block; }
.nu-cart-link { position: relative; }
.nu-cart-link i { font-size: 23px; color: var(--nu-dark); }
.nu-cart-count { position: absolute; top: -8px; right: -10px; background: var(--nu-accent); color: var(--nu-dark); font-size: 11px; font-weight: 700; border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }

/* ===== Navigation ===== */
.nu-nav { background: var(--nu-dark); }
.nu-nav-inner { padding: 0 5%; display: flex; align-items: center; }
.nu-nav-toggle { display: none; background: none; border: none; color: #fff; padding: 14px 0; font-size: 16px; cursor: pointer; width: 100%; text-align: left; }
.nu-nav-menu { list-style: none; display: flex; margin: 0; padding: 0; flex-wrap: wrap; }
.nu-nav-menu li a { display: block; color: #e8e8e8; text-decoration: none; padding: 13px 18px; font-size: 14px; font-weight: 600; transition: 0.2s; }
.nu-nav-menu li a:hover { background: var(--nu-primary); color: #fff; }
.nu-nav-menu li.current-menu-item > a,
.nu-nav-menu li.current_page_item > a,
.nu-nav-menu li.current-menu-parent > a,
.nu-nav-menu li.current-product_cat-ancestor > a {
    background: var(--nu-primary);
    color: #fff;
    position: relative;
}

@media (max-width: 780px) {
    .nu-nav-toggle { display: block; }
    .nu-nav-menu { display: none; flex-direction: column; width: 100%; }
    .nu-nav-menu.nu-nav-open { display: flex; }
    .nu-nav-menu li a { border-top: 1px solid rgba(255,255,255,0.08); }
}

/* ===== Welcome / Hero Banner ===== */
.nu-hero {
    background: linear-gradient(120deg, var(--nu-primary), var(--nu-primary-dark));
    color: #fff; padding: 60px 5%; margin-bottom: 10px;
}
.nu-hero-inner { max-width: 1280px; margin: 0 auto; }
.nu-hero h1 { font-size: 36px; margin: 0 0 12px; }
.nu-hero p { font-size: 16px; opacity: 0.92; max-width: 640px; margin: 0 0 22px; }
.nu-hero-btn { display: inline-block; background: var(--nu-accent); color: var(--nu-dark); font-weight: 700; padding: 13px 30px; border-radius: 8px; text-decoration: none; }
.nu-hero-btn:hover { background: #ffcc33; }

/* ===== Slider (New / Hot Sale) ===== */
.nu-slider-section { padding: 20px 5% 10px; max-width: 1280px; margin: 0 auto; }
.nu-slider-title { font-size: 22px; font-weight: 700; color: var(--nu-dark); margin: 20px 0 16px; display: flex; align-items: center; gap: 10px; }
.nu-slider-title .nu-badge-fire { background: var(--nu-sale); color: #fff; font-size: 12px; padding: 3px 10px; border-radius: 20px; }
.nu-slider { position: relative; overflow: hidden; border-radius: var(--nu-radius); background: #fff; box-shadow: var(--nu-card-shadow); }
.nu-slider-track { display: flex; transition: transform 0.5s ease; }
.nu-slide { min-width: 100%; display: flex; align-items: center; gap: 30px; padding: 30px; }
.nu-slide-img { width: 220px; height: 220px; object-fit: contain; background: #f5f2f9; border-radius: 10px; flex-shrink: 0; }
.nu-slide-info h3 { font-size: 24px; margin: 0 0 10px; color: var(--nu-dark); }
.nu-slide-price { font-size: 22px; font-weight: 700; color: var(--nu-primary); margin-bottom: 6px; }
.nu-slide-price del { color: var(--nu-muted); font-weight: 400; font-size: 15px; margin-right: 8px; }
.nu-slide-badge { display: inline-block; background: var(--nu-sale); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px; margin-bottom: 12px; }
.nu-slide-btn { display: inline-block; margin-top: 10px; background: var(--nu-primary); color: #fff; padding: 10px 24px; border-radius: 6px; text-decoration: none; font-weight: 600; }
.nu-slide-btn:hover { background: var(--nu-primary-dark); }
.nu-slider-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(22,18,33,0.6); color: #fff; border: none; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 16px; z-index: 5; }
.nu-slider-prev { left: 14px; }
.nu-slider-next { right: 14px; }
.nu-slider-dots { display: flex; justify-content: center; gap: 8px; padding: 14px 0; }
.nu-slider-dots span { width: 9px; height: 9px; border-radius: 50%; background: #ddd; cursor: pointer; }
.nu-slider-dots span.nu-active { background: var(--nu-primary); }

@media (max-width: 680px) {
    .nu-slide { flex-direction: column; text-align: center; padding: 24px; }
    .nu-slide-img { width: 160px; height: 160px; }
}

/* ===== Product Grid (our own markup, no WooCommerce ul.products used) ===== */
.nu-section { max-width: 1280px; margin: 0 auto; padding: 10px 5% 50px; }
.nu-section-title { font-size: 22px; font-weight: 700; color: var(--nu-dark); margin: 30px 0 18px; position: relative; padding-bottom: 10px; }
.nu-section-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 60px; height: 3px; background: var(--nu-primary); }

.nu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.nu-card { background: #fff; border-radius: var(--nu-radius); box-shadow: var(--nu-card-shadow); padding: 16px; position: relative; transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; }
.nu-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(22,18,33,0.15); }
.nu-card-badge { position: absolute; top: 12px; left: 12px; background: var(--nu-sale); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.nu-card-img { height: 170px; object-fit: contain; background: #f7f5fa; border-radius: 8px; margin-bottom: 10px; }
.nu-card-cat { font-size: 11px; color: var(--nu-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.nu-card-title { font-size: 14px; font-weight: 600; color: var(--nu-dark); margin: 6px 0; text-decoration: none; display: block; }
.nu-card-price { color: var(--nu-primary); font-weight: 700; font-size: 16px; margin-bottom: 10px; }
.nu-card-price del { color: var(--nu-muted); font-weight: 400; font-size: 13px; margin-right: 6px; }
.nu-card-actions { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.nu-btn-cart, .nu-btn-whatsapp {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    border: none; border-radius: 6px; padding: 10px; font-weight: 600; font-size: 13px;
    text-decoration: none; cursor: pointer; width: 100%;
}
.nu-btn-cart { background: var(--nu-primary); color: #fff; }
.nu-btn-cart:hover { background: var(--nu-primary-dark); }
.nu-btn-whatsapp { background: #25D366; color: #fff; }
.nu-btn-whatsapp:hover { background: #1ebd59; }

@media (max-width: 980px) { .nu-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 680px) { .nu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .nu-grid { grid-template-columns: repeat(1, 1fr); } }

/* ===== Category tiles (Shop by category) ===== */
.nu-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
.nu-cat-tile { background: #fff; border-radius: var(--nu-radius); box-shadow: var(--nu-card-shadow); padding: 20px; text-align: center; text-decoration: none; color: var(--nu-dark); font-weight: 600; transition: 0.2s; }
.nu-cat-tile:hover { background: var(--nu-primary); color: #fff; }
.nu-cat-tile img { width: 64px; height: 64px; object-fit: contain; margin: 0 auto 10px; }

/* ===== Generic page wrapper (non-Elementor pages) ===== */
.nu-page-wrap { max-width: 1000px; margin: 40px auto; padding: 0 5%; }
.nu-page-card { background: #fff; border-radius: var(--nu-radius); box-shadow: var(--nu-card-shadow); }
.nu-page-card h1 { padding: 40px 40px 0; font-size: 30px; color: var(--nu-dark); }
.nu-page-card .nu-entry-content { padding: 30px 40px 40px; }

/* ===== Footer ===== */
.nu-footer { background: var(--nu-dark); color: #b3aac2; padding: 50px 5% 20px; margin-top: 30px; overflow-x: hidden; }
.nu-footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 30px; margin-bottom: 30px; }
.nu-footer-col h3, .nu-footer-col h4 { color: #fff; font-size: 16px; margin-bottom: 14px; }
.nu-footer-col p { font-size: 13px; margin-bottom: 8px; overflow-wrap: break-word; word-break: break-word; }
.nu-footer-col ul { list-style: none; padding: 0; margin: 0; }
.nu-footer-col ul li { margin-bottom: 8px; font-size: 13px; }
.nu-footer-col a { color: #b3aac2; text-decoration: none; overflow-wrap: break-word; word-break: break-word; }
.nu-footer-col a:hover { color: var(--nu-accent); }
.nu-footer-bottom { text-align: center; border-top: 1px solid rgba(255,255,255,0.1); padding-top: 18px; font-size: 12px; }
.nu-footer .widget ul { list-style: none; padding: 0; margin: 0; }
.nu-footer .widget-title { color: #fff; font-size: 16px; margin-bottom: 14px; }
.nu-footer .nu-nav-menu { flex-wrap: wrap; gap: 4px; }
.nu-footer .nu-nav-menu li a { padding: 8px 14px; }

@media (max-width: 700px) {
    .nu-footer-grid { grid-template-columns: 1fr; }
}

/* ===== WooCommerce default pages we don't override (single product, cart, checkout) ===== */
.woocommerce main.site-main,
.woocommerce-page main.site-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 30px 5% 60px;
}
.woocommerce .single_add_to_cart_button,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce #respond input#submit,
.woocommerce input.button {
    background: var(--nu-primary) !important;
    color: #fff !important;
    border-radius: 6px !important;
    border: none !important;
}
.woocommerce .single_add_to_cart_button:hover,
.woocommerce button.button:hover,
.woocommerce a.button:hover {
    background: var(--nu-primary-dark) !important;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
    color: var(--nu-primary);
}

/* ===== Payment Methods Section ===== */
.nu-payment-section { background: #fff; border-radius: var(--nu-radius); box-shadow: var(--nu-card-shadow); padding: 30px; margin-top: 20px; }
.nu-payment-section h3 { font-size: 20px; color: var(--nu-dark); border-bottom: 2px solid #f0edf5; padding-bottom: 14px; margin: 0 0 20px; }
.nu-payment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.nu-payment-card { background: var(--nu-light-bg); border-radius: 10px; padding: 24px; text-align: center; }
.nu-payment-card i { font-size: 30px; color: var(--nu-primary); margin-bottom: 12px; }
.nu-payment-card h4 { margin: 8px 0; font-size: 16px; color: var(--nu-dark); }
.nu-payment-card p { font-size: 13px; color: var(--nu-muted); margin: 4px 0; }
.nu-payment-card strong { color: var(--nu-text); }

/* ===== About / Contact page special layouts ===== */
.nu-page-hero { background: linear-gradient(120deg, var(--nu-primary), var(--nu-primary-dark)); color: #fff; padding: 50px 5%; text-align: center; margin-bottom: 40px; }
.nu-page-hero h1 { font-size: 32px; margin: 0; }

.nu-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin: 40px auto; max-width: 1000px; padding: 0 5%; }
.nu-feature-card { background: #fff; border-radius: var(--nu-radius); box-shadow: var(--nu-card-shadow); padding: 26px 20px; text-align: center; }
.nu-feature-card i { font-size: 30px; color: var(--nu-primary); margin-bottom: 12px; }
.nu-feature-card h4 { font-size: 15px; color: var(--nu-dark); margin: 8px 0 0; }

.nu-contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; max-width: 1000px; margin: 0 auto 30px; padding: 0 5%; }
.nu-contact-card { background: #fff; border-radius: var(--nu-radius); box-shadow: var(--nu-card-shadow); padding: 26px 20px; text-align: center; }
.nu-contact-card i { font-size: 26px; color: var(--nu-primary); margin-bottom: 12px; display: block; }
.nu-contact-card h4 { font-size: 14px; color: var(--nu-muted); margin: 0 0 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.nu-contact-card p { font-size: 15px; color: var(--nu-dark); font-weight: 600; margin: 0; }
.nu-contact-whatsapp { text-align: center; margin-bottom: 40px; }
.nu-contact-whatsapp a { display: inline-flex; align-items: center; gap: 10px; background: #25D366; color: #fff; padding: 14px 30px; border-radius: 8px; text-decoration: none; font-weight: 700; }
.nu-contact-whatsapp a:hover { background: #1ebd59; }

/* ===== Empty state ===== */
.nu-empty { text-align: center; padding: 50px; background: #fff; border-radius: var(--nu-radius); color: var(--nu-muted); }