/* ============================================================
   BLUE STAR MALL — Main Stylesheet
   Based on v3 Design
   ============================================================ */
:root{
  --navy:#0C294B;
  --navy-dark:#071A33;
  --navy-light:#1A3D63;
  --navy-mid:#1F4A73;
  --gold:#D4A853;
  --gold-light:#E8CC8A;
  --gold-pale:#F5EBD0;
  --cream:#F5F0E6;
  --warm-white:#FFFAF2;
  --white:#FFF;
  --bg-gray:#F5F7FA;
  --bg-light:#F9FAFB;
  --text:#1F2937;
  --text-secondary:#6B7280;
  --text-muted:#9CA3AF;
  --border:#E5E7EB;
  --border-light:#F0F0F0;
  --red:#EF4444;
  --green:#10B981;
  --shadow:0 4px 16px rgba(12,41,75,0.08);
  --shadow-lg:0 8px 32px rgba(12,41,75,0.12);
  --shadow-xl:0 16px 48px rgba(12,41,75,0.14);
  --radius:8px;
  --radius-lg:12px;
  --radius-xl:16px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--text);line-height:1.5;background:var(--bg-gray);-webkit-font-smoothing:antialiased}
.container{max-width:1280px;margin:0 auto;padding:0 20px}
a{text-decoration:none}
img{max-width:100%;display:block}

/* ==================== ANNOUNCEMENT BAR ==================== */
.announce-bar{background:linear-gradient(90deg,var(--navy-dark),var(--navy));height:36px;display:flex;align-items:center;font-size:12px;color:rgba(255,255,255,0.7)}
.announce-bar .container{display:flex;justify-content:space-between;align-items:center;width:100%}
.announce-bar .left{display:flex;align-items:center;gap:6px}
.announce-bar .left strong{color:var(--gold)}
.announce-bar .right{display:flex;align-items:center;gap:16px}
.announce-bar .right a{color:rgba(255,255,255,0.6);text-decoration:none;font-size:11px;transition:color .2s}
.announce-bar .right a:hover{color:var(--gold)}
.lang-btn{display:flex;align-items:center;gap:4px;color:rgba(255,255,255,0.6);cursor:pointer;font-size:11px;padding:2px 8px;border-radius:3px;transition:all .15s}
.lang-btn:hover{background:rgba(255,255,255,0.08);color:var(--gold)}

/* ==================== HEADER ==================== */
header{background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:100}
.header-main{display:flex;align-items:center;justify-content:space-between;height:76px;gap:20px}
.logo{display:flex;align-items:center;flex-shrink:0;padding:4px 0}
.logo-badge{width:58px;height:58px;background:linear-gradient(135deg,var(--navy),var(--navy-light));border-radius:13px;display:flex;align-items:center;justify-content:center;padding:6px;box-shadow:0 2px 8px rgba(12,41,75,0.15)}
.logo-badge img{width:100%;height:100%;object-fit:contain;display:block}
.logo-text{font-size:22px;font-weight:800;letter-spacing:-0.5px;margin-left:14px;line-height:1.1}
.logo-text .bpi{color:var(--gold);font-size:28px}
.logo-text .home{color:var(--navy);font-size:23px;font-weight:600}
.logo-text .sub{display:block;font-size:10px;font-weight:500;color:var(--text-muted);letter-spacing:2px;text-transform:uppercase;margin-top:1px}

/* Search */
.search-bar{flex:1;max-width:540px;position:relative}
.search-bar input{width:100%;height:42px;border:2px solid var(--border);border-radius:50px;padding:0 46px 0 18px;font-size:14px;color:var(--text);outline:none;background:var(--bg-light);transition:border-color .2s}
.search-bar input:focus{border-color:var(--navy-mid);background:var(--white)}
.search-bar button{position:absolute;right:4px;top:4px;width:34px;height:34px;border:none;background:var(--navy);color:var(--white);border-radius:50%;cursor:pointer;font-size:15px;transition:background .2s;display:flex;align-items:center;justify-content:center}
.search-bar button:hover{background:var(--navy-light)}

/* Header actions */
.header-actions{display:flex;align-items:center;gap:4px;flex-shrink:0}
.header-actions a{display:flex;flex-direction:column;align-items:center;gap:1px;padding:6px 10px;border-radius:var(--radius);color:var(--text-secondary);font-size:9px;font-weight:500;transition:all .15s;position:relative}
.header-actions a:hover{background:var(--bg-light);color:var(--navy)}
.header-actions a .icon{font-size:20px;line-height:1}
.header-actions a .badge{position:absolute;top:2px;right:5px;background:var(--red);color:var(--white);font-size:9px;min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:600}

/* ==================== MEGA NAV ==================== */
.mega-nav{background:var(--white);border-bottom:2px solid var(--bg-gray);position:sticky;top:76px;z-index:99}
.mega-nav-inner{display:flex;align-items:stretch;height:44px}
.mega-nav .all-cat{display:flex;align-items:center;gap:8px;background:var(--navy);color:var(--white);padding:0 20px;font-size:13px;font-weight:600;cursor:pointer;border:none;flex-shrink:0;transition:background .2s}
.mega-nav .all-cat:hover{background:var(--navy-light)}
.nav-links{display:flex;align-items:center;gap:0;flex:1;overflow-x:auto}
.nav-links a{display:flex;align-items:center;gap:4px;padding:0 18px;height:44px;color:var(--text);font-size:13px;font-weight:500;transition:all .2s;white-space:nowrap;border-bottom:2px solid transparent}
.nav-links a:hover{color:var(--navy);background:var(--bg-light);border-bottom-color:var(--gold)}
.nav-links a .hot{background:var(--red);color:var(--white);font-size:9px;padding:1px 6px;border-radius:3px;font-weight:700}
.nav-links a .new-tag{background:var(--green);color:var(--white);font-size:9px;padding:1px 6px;border-radius:3px;font-weight:700}
.nav-links a.active{color:var(--navy);font-weight:600;border-bottom-color:var(--gold);background:var(--bg-light)}

/* ==================== HERO BANNER ==================== */
.hero-carousel{background:linear-gradient(135deg,var(--navy-dark),var(--navy),var(--navy-light));position:relative;overflow:hidden;min-height:400px;display:flex;align-items:center}
.hero-carousel::before{content:'';position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4a853' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");opacity:.4}
.hero-glow{position:absolute;top:-30%;right:-10%;width:500px;height:500px;border-radius:50%;background:radial-gradient(circle,rgba(212,168,83,0.08) 0%,transparent 65%)}
.hero-carousel .container{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;padding:20px 20px}
.hero-tag{display:inline-flex;align-items:center;gap:6px;background:rgba(212,168,83,0.15);border:1px solid rgba(212,168,83,.25);padding:5px 14px;border-radius:50px;font-size:12px;color:var(--gold-pale);margin-bottom:14px}
.hero-tag span{width:5px;height:5px;background:var(--gold);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.hero-title{font-size:40px;color:var(--white);line-height:1.15;margin-bottom:12px;letter-spacing:-.5px}
.hero-title em{color:var(--gold);font-style:normal}
.hero-desc{color:rgba(255,255,255,.6);font-size:14px;line-height:1.7;margin-bottom:24px;max-width:440px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}
.btn-gold{display:inline-flex;align-items:center;gap:8px;background:var(--gold);color:var(--navy-dark);padding:12px 32px;border-radius:50px;font-weight:700;font-size:14px;transition:all .25s;cursor:pointer;border:none;text-decoration:none}
.btn-gold:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 6px 20px rgba(212,168,83,.35)}
.btn-outline{display:inline-flex;align-items:center;gap:8px;background:transparent;color:var(--white);padding:12px 32px;border-radius:50px;font-size:14px;font-weight:600;border:1.5px solid rgba(255,255,255,.2);transition:all .25s;cursor:pointer;text-decoration:none}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}

.hero-product{background:var(--white);border-radius:var(--radius-xl);overflow:hidden;width:340px;box-shadow:0 20px 60px rgba(0,0,0,.3);transition:transform .4s;margin:0 auto}
.hero-product:hover{transform:translateY(-4px)}
.hero-product-img{height:220px;position:relative;overflow:hidden}
.hero-product-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.hero-product:hover .hero-product-img img{transform:scale(1.05)}
.hero-product-img .badge-top{position:absolute;top:12px;left:12px;background:var(--gold);color:var(--navy-dark);padding:4px 12px;border-radius:50px;font-size:11px;font-weight:700;z-index:2}
.hero-product-img .discount{position:absolute;top:12px;right:12px;background:var(--red);color:var(--white);padding:4px 10px;border-radius:50px;font-size:11px;font-weight:700;z-index:2}
.hero-product-info{padding:18px 22px}
.hero-product-info .brand{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--gold);font-weight:600}
.hero-product-info h3{font-size:15px;color:var(--text);margin:3px 0 6px;font-weight:600}
.hero-product-info .stars{color:var(--gold);font-size:12px}
.hero-product-info .stars span{color:var(--text-muted);font-size:11px;margin-left:4px}
.hero-product-info .price{font-size:22px;font-weight:700;color:var(--navy);margin-top:8px}
.hero-product-info .price del{font-size:13px;color:var(--text-muted);font-weight:400;margin-left:8px}

.hero-dots{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);display:flex;gap:8px;z-index:5}
.hero-dots span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;transition:all .3s}
.hero-dots span.active{background:var(--gold);width:24px;border-radius:4px}

/* ==================== QUICK LINKS ==================== */
.quick-strip{background:var(--white);border-bottom:1px solid var(--border)}
.quick-strip .container{display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.quick-item{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-secondary);flex:1;min-width:120px}
.quick-item .qi-icon{width:36px;height:36px;background:var(--gold-pale);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.quick-item strong{color:var(--navy);display:block;font-size:13px}
.quick-item small{font-size:11px;color:var(--text-muted)}

/* ==================== SECTION COMMON ==================== */
.section{padding:40px 0}
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.section-header h2{font-size:22px;font-weight:700;color:var(--navy)}
.section-header a{font-size:13px;color:var(--navy);font-weight:500;display:flex;align-items:center;gap:4px;transition:color .2s}
.section-header a:hover{color:var(--gold)}

/* ==================== CATEGORIES ==================== */
.cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.cat-card{background:var(--white);border-radius:var(--radius-lg);padding:20px 12px;text-align:center;color:var(--text);border:1px solid var(--border-light);transition:all .25s;cursor:pointer;display:block}
.cat-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--gold-pale)}
.cat-card .cat-icon{width:52px;height:52px;border-radius:var(--radius);background:var(--bg-light);display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto 10px;transition:background .2s}
.cat-card:hover .cat-icon{background:var(--gold-pale)}
.cat-card .cat-name{font-size:13px;font-weight:600;color:var(--navy)}
.cat-card .cat-count{font-size:11px;color:var(--text-muted);margin-top:2px}

/* ==================== FLASH DEALS ==================== */
.flash-section{background:linear-gradient(135deg,var(--navy-dark),var(--navy))}
.flash-section .section-header h2{color:var(--white);display:flex;align-items:center;gap:10px}
.flash-section .section-header h2 .flash-icon{color:var(--gold)}
.flash-section .section-header a{color:rgba(255,255,255,.7)}
.flash-section .section-header a:hover{color:var(--gold)}
.countdown{display:flex;align-items:center;gap:6px;font-size:13px;color:rgba(255,255,255,.6)}
.countdown .cd-unit{background:rgba(255,255,255,.12);padding:3px 8px;border-radius:4px;font-weight:700;color:var(--white);font-size:14px;font-variant-numeric:tabular-nums}
.countdown .cd-sep{color:rgba(255,255,255,.3);font-weight:700}
.flash-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

/* ==================== PRODUCT CARDS ==================== */
.product-card{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-light);transition:all .25s;position:relative}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--gold-pale)}
.product-card .pc-badge{position:absolute;top:10px;left:10px;z-index:2;background:var(--red);color:var(--white);padding:2px 10px;border-radius:3px;font-size:10px;font-weight:700}
.product-card .pc-badge.free-ship{background:var(--green)}
.product-card .pc-img{height:200px;position:relative;overflow:hidden}
.product-card .pc-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.product-card:hover .pc-img img{transform:scale(1.05)}
.product-card .pc-actions{position:absolute;right:8px;top:8px;display:flex;flex-direction:column;gap:4px;opacity:0;transition:opacity .2s;z-index:3}
.product-card:hover .pc-actions{opacity:1}
.product-card .pc-actions button{width:30px;height:30px;border:none;border-radius:50%;background:var(--white);box-shadow:var(--shadow);cursor:pointer;font-size:13px;color:var(--text-secondary);transition:all .15s;display:flex;align-items:center;justify-content:center}
.product-card .pc-actions button:hover{background:var(--navy);color:var(--white)}
.product-card .pc-body{padding:14px 16px}
.product-card .pc-brand{font-size:10px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-muted);font-weight:500}
.product-card .pc-name{font-size:14px;font-weight:600;color:var(--text);margin:4px 0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35;min-height:38px}
.product-card .pc-rating{display:flex;align-items:center;gap:4px;font-size:11px;margin-bottom:6px}
.product-card .pc-rating .stars{color:var(--gold)}
.product-card .pc-rating span{color:var(--text-muted)}
.product-card .pc-price{display:flex;align-items:baseline;gap:6px}
.product-card .pc-price .current{font-size:18px;font-weight:700;color:var(--navy)}
.product-card .pc-price .original{font-size:12px;color:var(--text-muted);text-decoration:line-through}
.product-card .pc-price .discount-pct{font-size:11px;color:var(--red);font-weight:600}
.product-card .pc-footer{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-top:8px;border-top:1px solid var(--border-light)}
.product-card .pc-footer .sold{font-size:11px;color:var(--text-muted)}
.product-card .pc-footer .cart-btn{width:32px;height:32px;border:none;border-radius:50%;background:var(--navy);color:var(--white);cursor:pointer;font-size:14px;transition:all .2s;display:flex;align-items:center;justify-content:center}
.product-card .pc-footer .cart-btn:hover{background:var(--gold);color:var(--navy-dark)}
.flash-card .progress-bar{height:4px;background:rgba(255,255,255,.3);border-radius:2px;margin-top:8px;overflow:hidden}
.flash-card .progress-bar .fill{height:100%;background:var(--gold);border-radius:2px}

/* ==================== BANNER GRID ==================== */
.banner-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:14px;margin:32px 0}
.banner-box{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:200px;cursor:pointer;display:flex;flex-direction:column;justify-content:center;padding:28px;background-size:cover;background-position:center;transition:transform .3s}
.banner-box:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.banner-box.b1{background:linear-gradient(135deg,var(--navy-light),var(--navy-mid))}
.banner-box.b2{background:linear-gradient(135deg,var(--gold),var(--gold-light))}
.banner-box.b3{background:linear-gradient(135deg,var(--navy),var(--navy-dark))}
.banner-box .bb-tag{font-size:10px;text-transform:uppercase;letter-spacing:1px;font-weight:600;margin-bottom:6px}
.banner-box .bb-title{font-size:22px;font-weight:700;line-height:1.2;margin-bottom:4px}
.banner-box .bb-sub{font-size:13px;opacity:.8;margin-bottom:12px}
.banner-box .bb-cta{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;transition:gap .2s;text-decoration:none}
.banner-box .bb-cta:hover{gap:10px}
.b1 .bb-tag{color:var(--gold);opacity:.8}
.b1 .bb-title,.b1 .bb-sub,.b1 .bb-cta{color:var(--white)}
.b2 .bb-tag{color:var(--navy);opacity:.7}
.b2 .bb-title,.b2 .bb-sub,.b2 .bb-cta{color:var(--navy-dark)}
.b3 .bb-tag{color:var(--gold);opacity:.8}
.b3 .bb-title,.b3 .bb-sub,.b3 .bb-cta{color:var(--white)}

/* ==================== PRODUCT GRID ==================== */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}

/* ==================== WOOCOMMERCE OVERRIDES ==================== */
.woocommerce .products ul, .woocommerce ul.products{margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.woocommerce ul.products li.product{width:100%!important;margin:0!important}
.woocommerce ul.products li.product .product-card{border:1px solid var(--border-light);border-radius:var(--radius-lg);overflow:hidden}
.woocommerce .price del{color:var(--text-muted)}
.woocommerce .price ins{text-decoration:none}

/* ==================== REVIEWS ==================== */
.reviews-section{background:var(--white)}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.review-card{background:var(--bg-light);border-radius:var(--radius-lg);padding:24px;border:1px solid var(--border-light)}
.review-card .rc-stars{color:var(--gold);font-size:13px;margin-bottom:10px}
.review-card .rc-text{font-size:13px;color:var(--text);line-height:1.6;margin-bottom:12px;font-style:italic}
.review-card .rc-author{display:flex;align-items:center;gap:10px}
.review-card .rc-avatar{width:36px;height:36px;border-radius:50%;background:var(--navy);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600}
.review-card .rc-name{font-size:13px;font-weight:600;color:var(--navy)}
.review-card .rc-meta{font-size:11px;color:var(--text-muted)}

/* ==================== BRAND STRIP ==================== */
.brand-strip{background:var(--white);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.brand-strip .container{display:flex;align-items:center;justify-content:space-around;padding:24px 20px}
.brand-item{font-size:18px;font-weight:700;color:var(--text-muted);opacity:.5;letter-spacing:1px;transition:opacity .2s}
.brand-item:hover{opacity:1;color:var(--navy)}

/* ==================== NEWSLETTER ==================== */
.newsletter{background:linear-gradient(135deg,var(--navy-dark),var(--navy),var(--navy-light));padding:52px 0;text-align:center}
.newsletter h2{font-size:28px;color:var(--white);margin-bottom:8px}
.newsletter p{color:rgba(255,255,255,.6);font-size:14px;margin-bottom:24px;max-width:480px;margin-left:auto;margin-right:auto}
.newsletter-form{display:flex;gap:8px;max-width:460px;margin:0 auto}
.newsletter-form input{flex:1;height:48px;border:none;border-radius:50px;padding:0 20px;font-size:14px;outline:none}
.newsletter-form button{height:48px;padding:0 32px;border:none;border-radius:50px;background:var(--gold);color:var(--navy-dark);font-weight:700;font-size:14px;cursor:pointer;transition:all .25s}
.newsletter-form button:hover{background:var(--gold-light);transform:translateY(-2px)}

/* ==================== FOOTER ==================== */
footer{background:var(--navy-dark);color:rgba(255,255,255,.7);font-size:13px}
.footer-main{padding:44px 0 32px}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.2fr;gap:32px}
.footer-col h4{color:var(--white);font-size:14px;font-weight:600;margin-bottom:14px;position:relative}
.footer-col h4::after{content:'';position:absolute;bottom:-5px;left:0;width:24px;height:2px;background:var(--gold);border-radius:1px}
.footer-col p{font-size:12px;line-height:1.7;margin-bottom:14px}
.footer-col a{color:rgba(255,255,255,.6);display:block;padding:4px 0;transition:color .2s}
.footer-col a:hover{color:var(--gold)}
.footer-col .social{display:flex;gap:10px;margin-top:12px}
.footer-col .social a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;font-size:16px;color:rgba(255,255,255,.7);padding:0;transition:all .2s;text-decoration:none}
.footer-col .social a:hover{background:var(--gold);color:var(--navy-dark)}
.footer-col .payment-icons{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.footer-col .payment-icons span{background:rgba(255,255,255,.08);padding:6px 12px;border-radius:4px;font-size:10px;color:rgba(255,255,255,.6);font-weight:600}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding:16px 0;display:flex;align-items:center;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.4)}
.footer-bottom a{color:rgba(255,255,255,.4);margin:0 8px;text-decoration:none}
.footer-bottom a:hover{color:var(--gold)}

/* ==================== SUPPLIER DASHBOARD ==================== */
.supplier-wrap{max-width:1200px;margin:40px auto;padding:0 20px}
.supplier-header{background:linear-gradient(135deg,var(--navy-dark),var(--navy));color:var(--white);padding:32px;border-radius:var(--radius-xl);margin-bottom:24px}
.supplier-header h1{font-size:24px;margin-bottom:4px}
.supplier-header p{color:rgba(255,255,255,.6)}
.supplier-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px}
.supplier-stat-card{background:var(--white);border-radius:var(--radius-lg);padding:24px;border:1px solid var(--border-light);text-align:center}
.supplier-stat-card .num{font-size:32px;font-weight:700;color:var(--navy)}
.supplier-stat-card .label{font-size:13px;color:var(--text-muted);margin-top:4px}
.supplier-table{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-light)}
.supplier-table table{width:100%;border-collapse:collapse}
.supplier-table th{background:var(--bg-light);padding:12px 16px;text-align:left;font-size:12px;text-transform:uppercase;color:var(--text-muted);font-weight:600}
.supplier-table td{padding:12px 16px;border-top:1px solid var(--border-light);font-size:13px}

/* ==================== RESPONSIVE ==================== */
@media(max-width:1024px){
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .flash-grid,.prod-grid{grid-template-columns:repeat(3,1fr)}
  .review-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(3,1fr);gap:24px}
  .banner-grid{grid-template-columns:1fr 1fr}
  .banner-grid .b1{grid-column:1/-1}
}
@media(max-width:768px){
  .header-main{flex-wrap:wrap;height:auto;padding:10px 0;gap:10px}
  .search-bar{order:3;max-width:100%;flex-basis:100%}
  .logo-badge{width:48px;height:48px;border-radius:10px;padding:5px}
  .hero-carousel .container{grid-template-columns:1fr;gap:30px}
  .hero-product{width:280px}
  .hero-title{font-size:28px}
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .flash-grid,.prod-grid{grid-template-columns:repeat(2,1fr)}
  .review-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
  .banner-grid{grid-template-columns:1fr}
  .quick-strip .container{flex-wrap:wrap;gap:8px}
  .quick-item{flex:1;min-width:120px}
  .newsletter-form{flex-direction:column;padding:0 20px}
  .brand-strip .container{flex-wrap:wrap;gap:8px}
  .brand-item{font-size:14px}
  .header-actions a .label{display:none}
}
@media(max-width:480px){
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .flash-grid,.prod-grid{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
  .mega-nav .all-cat{padding:0 12px;font-size:12px}
  .nav-links a{padding:0 12px;font-size:12px}
}

/* Clickable product card links */
.pc-img-link, .pc-body-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.pc-img-link:hover .pc-img img {
  transform: scale(1.05);
}
.product-card {
  cursor: pointer;
}
/* WooCommerce single product page base styling */
.woo-page {
  display: flex;
  gap: 30px;
  padding: 30px 20px;
}
.woo-content {
  flex: 1;
}
/* Breadcrumb styling */
.woocommerce-breadcrumb {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.woocommerce-breadcrumb a {
  color: var(--navy);
}
/* Product gallery */
.woocommerce-product-gallery {
  float: left;
  width: 48%;
}
.summary.entry-summary {
  float: right;
  width: 48%;
}
.woocommerce-tabs {
  clear: both;
  padding-top: 40px;
}

/* ============================================================
   WOOCOMMERCE BEAUTIFICATION — All Inner Pages
   ============================================================ */

/* ---- Store Notice ---- */
.woocommerce-store-notice{background:var(--navy)!important;color:var(--white)!important;padding:10px!important;font-size:13px!important}

/* ---- Shop Header ---- */
.woocommerce-products-header{margin-bottom:24px}
.woocommerce-products-header h1{font-size:28px;font-weight:700;color:var(--navy);margin-bottom:4px}
.term-description{color:var(--text-secondary);font-size:14px}

/* ---- Breadcrumb ---- */
.woocommerce-breadcrumb{font-size:12px;color:var(--text-muted);margin-bottom:20px;padding:0}
.woocommerce-breadcrumb a{color:var(--navy);text-decoration:none}
.woocommerce-breadcrumb a:hover{color:var(--gold)}

/* ---- Shop Loop Products ---- */
.woocommerce ul.products{display:grid!important;grid-template-columns:repeat(4,1fr);gap:18px;margin:0!important}
.woocommerce ul.products li.product{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-light);transition:all .3s;width:100%!important;margin:0!important;float:none!important;position:relative}
.woocommerce ul.products li.product:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(12,41,75,0.12);border-color:var(--gold-pale)}

.woocommerce ul.products li.product a img{margin:0;border-radius:0;width:100%;height:220px;object-fit:cover;transition:transform .4s}
.woocommerce ul.products li.product:hover a img{transform:scale(1.05)}

.woocommerce ul.products li.product h2{padding:12px 16px 4px;font-size:14px;font-weight:600;color:var(--text);line-height:1.3;min-height:36px;text-overflow:ellipsis;overflow:hidden}

.woocommerce ul.products li.product .price{color:var(--navy);font-size:18px;font-weight:700;padding:0 16px 8px;display:block}
.woocommerce ul.products li.product .price del{color:var(--text-muted);font-size:13px;font-weight:400;margin-right:6px}
.woocommerce ul.products li.product .price ins{text-decoration:none;background:none}

.woocommerce ul.products li.product .star-rating{color:var(--gold);font-size:12px;margin:4px 16px 0;float:none}
.woocommerce ul.products li.product .button{margin:10px 16px 16px!important;border-radius:50px!important;background:var(--navy)!important;color:var(--white)!important;font-size:12px!important;font-weight:600!important;padding:10px 20px!important;border:none!important;transition:all .2s!important;display:inline-block!important}
.woocommerce ul.products li.product .button:hover{background:var(--gold)!important;color:var(--navy-dark)!important;transform:translateY(-1px)!important}

.woocommerce ul.products li.product .added_to_cart{display:none!important}
.woocommerce span.onsale{background:var(--red)!important;color:var(--white)!important;border-radius:3px!important;font-size:10px!important;font-weight:700!important;padding:3px 10px!important;min-height:auto!important;min-width:auto!important;line-height:1.4!important;top:12px!important;left:12px!important;right:auto!important;z-index:2!important;margin:0!important}

/* ---- Sorting & Count ---- */
.woocommerce .woocommerce-result-count{font-size:13px;color:var(--text-muted);margin-bottom:20px!important}
.woocommerce .woocommerce-ordering{margin-bottom:20px!important}
.woocommerce .woocommerce-ordering select{border:2px solid var(--border)!important;border-radius:50px!important;height:40px!important;padding:0 16px!important;background:var(--white);font-size:13px;color:var(--text);cursor:pointer}
.woocommerce .woocommerce-ordering select:focus{border-color:var(--navy-mid)!important}

/* ---- Pagination ---- */
.woocommerce nav.woocommerce-pagination{text-align:center;margin:32px 0!important}
.woocommerce nav.woocommerce-pagination ul{border:none!important}
.woocommerce nav.woocommerce-pagination ul li{border:none!important;margin:0 3px!important}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{border-radius:50%!important;padding:8px 14px!important;font-size:13px!important;font-weight:500!important;background:var(--bg-light)!important;color:var(--text)!important;border:none!important;transition:all .2s!important}
.woocommerce nav.woocommerce-pagination ul li a:hover,.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--navy)!important;color:var(--white)!important}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--navy)!important;color:var(--white)!important;font-weight:600!important}

/* ---- Single Product Page ---- */
.woocommerce div.product{margin-bottom:40px}
.woocommerce div.product .product_title{font-size:30px;font-weight:700;color:var(--navy);margin-bottom:8px;line-height:1.2}

.woocommerce div.product .woocommerce-product-rating{margin-bottom:10px}
.woocommerce div.product .woocommerce-product-rating .star-rating{color:var(--gold);font-size:13px}
.woocommerce div.product .woocommerce-product-rating .woocommerce-review-link{color:var(--text-muted);font-size:13px}

.woocommerce div.product p.price{font-size:28px!important;font-weight:700;color:var(--navy)!important;margin-bottom:16px}
.woocommerce div.product p.price del{font-size:18px;color:var(--text-muted);font-weight:400}
.woocommerce div.product p.price ins{text-decoration:none;background:none;color:var(--red)!important}

.woocommerce div.product .woocommerce-product-details__short-description{color:var(--text-secondary);font-size:14px;line-height:1.7;margin-bottom:20px;padding:16px;background:var(--bg-light);border-radius:var(--radius);border-left:3px solid var(--gold)}

.woocommerce div.product form.cart{margin-bottom:20px;padding:20px 0;border-top:1px solid var(--border-light);border-bottom:1px solid var(--border-light)}
.woocommerce div.product form.cart .quantity{margin-right:12px}
.woocommerce div.product form.cart .quantity .qty{width:70px;height:46px;border:2px solid var(--border);border-radius:var(--radius);text-align:center;font-size:15px;font-weight:600}
.woocommerce div.product form.cart .single_add_to_cart_button{border-radius:50px!important;background:var(--navy)!important;color:var(--white)!important;font-weight:700!important;font-size:14px!important;padding:14px 36px!important;border:none!important;transition:all .2s!important;height:46px!important}
.woocommerce div.product form.cart .single_add_to_cart_button:hover{background:var(--gold)!important;color:var(--navy-dark)!important;transform:translateY(-2px)!important}

.btn-buy-now{width:100%;margin-top:12px;padding:14px;background:var(--gold);color:var(--navy-dark);border:none;border-radius:50px;font-size:15px;font-weight:700;cursor:pointer;transition:all .25s}
.btn-buy-now:hover{background:var(--gold-light);transform:translateY(-2px);box-shadow:0 4px 16px rgba(212,168,83,.3)}

/* ---- Product Meta ---- */
.product_meta{padding:12px 0}
.product_meta>span{display:block;font-size:13px;color:var(--text-muted);padding:4px 0}
.product_meta>span a{color:var(--navy);text-decoration:none}
.product_meta>span a:hover{color:var(--gold)}
.product_meta .sku_wrapper .sku{color:var(--navy);font-weight:600}

/* ---- Tabs ---- */
.woocommerce div.product .woocommerce-tabs{margin:40px 0}
.woocommerce div.product .woocommerce-tabs ul.tabs{margin:0!important;padding:0!important;border-bottom:2px solid var(--border)!important;overflow:visible!important}
.woocommerce div.product .woocommerce-tabs ul.tabs::before{border:none!important}
.woocommerce div.product .woocommerce-tabs ul.tabs li{background:none!important;border:none!important;border-radius:0!important;margin:0!important;padding:0!important}
.woocommerce div.product .woocommerce-tabs ul.tabs li a{font-size:14px;font-weight:500;color:var(--text-secondary);padding:12px 24px!important;display:inline-block;border-bottom:2px solid transparent;margin-bottom:-2px;transition:all .2s}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--navy)!important;font-weight:600!important;border-bottom-color:var(--gold)!important}
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover{color:var(--navy)}
.woocommerce div.product .woocommerce-tabs .panel{margin:0;padding:24px 0;background:transparent;border:none;display:none}
.woocommerce div.product .woocommerce-tabs .panel.active{display:block}
.woocommerce div.product .woocommerce-tabs .panel h2{font-size:20px;color:var(--navy);margin-bottom:16px}

/* ---- Reviews ---- */
.woocommerce-Reviews .commentlist{padding:0;margin:0}
.woocommerce-Reviews .commentlist li.review{margin-bottom:20px;padding:20px;background:var(--bg-light);border-radius:var(--radius-lg);border:1px solid var(--border-light)}
.woocommerce-Reviews .commentlist li.review .comment-text{margin:0;border:none!important;padding:0!important}
.woocommerce-Reviews .commentlist li.review .comment-text .star-rating{color:var(--gold);margin-bottom:8px}
.woocommerce-Reviews .commentlist li.review .comment-text .description p{font-size:14px;color:var(--text);line-height:1.6}
.woocommerce-Reviews .commentlist li.review .comment-text .meta{font-size:12px;color:var(--text-muted)}
.woocommerce-Reviews .commentlist li.review .comment-text .meta strong{color:var(--navy)}
#review_form_wrapper{margin-top:24px;padding:24px;background:var(--white);border-radius:var(--radius-lg);border:1px solid var(--border-light)}
#review_form_wrapper .comment-reply-title{font-size:18px;color:var(--navy)}

/* ---- Related Products ---- */
.woocommerce .related.products,.woocommerce .upsells.products{clear:both;padding-top:32px;border-top:1px solid var(--border-light)}
.woocommerce .related.products h2,.woocommerce .upsells.products h2{font-size:22px;color:var(--navy);margin-bottom:20px}

/* ---- Gallery ---- */
.woocommerce-product-gallery{border-radius:var(--radius-lg);overflow:hidden}
.woocommerce-product-gallery .flex-viewport{border-radius:var(--radius-lg);border:1px solid var(--border-light)}
.woocommerce-product-gallery .flex-control-thumbs{margin-top:10px!important}
.woocommerce-product-gallery .flex-control-thumbs li{margin:0 6px 0 0!important}
.woocommerce-product-gallery .flex-control-thumbs li img{border-radius:var(--radius);border:2px solid transparent;transition:border .2s;cursor:pointer}
.woocommerce-product-gallery .flex-control-thumbs li img.flex-active{border-color:var(--gold)}

/* ---- Cart Page ---- */
.woocommerce-cart .woocommerce{padding:20px 0}
.woocommerce table.shop_table{border-radius:var(--radius-lg)!important;border:1px solid var(--border)!important;overflow:hidden}
.woocommerce table.shop_table th{background:var(--bg-light);padding:14px 16px;font-size:12px;text-transform:uppercase;color:var(--text-muted);font-weight:600}
.woocommerce table.shop_table td{padding:14px 16px;border-top:1px solid var(--border-light)}
.woocommerce table.shop_table .product-thumbnail img{width:60px;border-radius:var(--radius)}
.woocommerce table.shop_table .product-name a{color:var(--navy);font-weight:600;text-decoration:none}
.woocommerce table.shop_table .product-remove .remove{color:var(--red)!important;text-decoration:none;font-size:20px}
.woocommerce .cart_totals h2{font-size:20px;color:var(--navy)}
.woocommerce .cart-collaterals .cart_totals{background:var(--bg-light);padding:24px;border-radius:var(--radius-lg);border:1px solid var(--border)}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{background:var(--gold)!important;color:var(--navy-dark)!important;border-radius:50px!important;font-weight:700!important;font-size:16px!important;padding:16px!important;border:none!important;transition:all .2s!important}
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover{background:var(--gold-light)!important;transform:translateY(-2px)}

/* ---- Checkout ---- */
.woocommerce-checkout .woocommerce{padding:20px 0}
.woocommerce-checkout .col2-set .col-1 h3,.woocommerce-checkout .col2-set .col-2 h3{font-size:18px;color:var(--navy);border-bottom:2px solid var(--gold);padding-bottom:10px;margin-bottom:20px}
.woocommerce form .form-row input,.woocommerce form .form-row textarea,.woocommerce form .form-row select{border-radius:var(--radius)!important;border:2px solid var(--border)!important;padding:12px 14px!important;font-size:14px;transition:border .2s}
.woocommerce form .form-row input:focus,.woocommerce form .form-row textarea:focus{border-color:var(--navy-mid)!important;outline:none!important}
.woocommerce form .form-row label{font-size:13px;font-weight:600;color:var(--text)}
.woocommerce-checkout #payment{background:var(--bg-light)!important;border-radius:var(--radius-lg)!important;border:1px solid var(--border)!important}
.woocommerce-checkout #payment .payment_methods{padding:20px!important}
.woocommerce-checkout #payment .payment_methods li{padding:10px 0}
.woocommerce-checkout #payment div.form-row{padding:20px!important}
.woocommerce-checkout #place_order{background:var(--gold)!important;color:var(--navy-dark)!important;border-radius:50px!important;font-weight:700!important;font-size:16px!important;padding:16px 40px!important;border:none!important;transition:all .2s;width:100%}
.woocommerce-checkout #place_order:hover{background:var(--gold-light)!important;transform:translateY(-2px)}
.woocommerce-checkout .checkout_coupon .button{background:var(--navy)!important;color:var(--white)!important;border-radius:50px!important;border:none!important;padding:12px 24px!important}
.woocommerce-checkout .woocommerce-form-login .button{background:var(--navy)!important;color:var(--white)!important;border-radius:50px!important;border:none!important}

/* ---- My Account ---- */
.woocommerce-MyAccount-navigation{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border);margin-bottom:24px}
.woocommerce-MyAccount-navigation ul{margin:0;padding:0;list-style:none}
.woocommerce-MyAccount-navigation ul li{border-bottom:1px solid var(--border-light);margin:0!important}
.woocommerce-MyAccount-navigation ul li:last-child{border-bottom:none}
.woocommerce-MyAccount-navigation ul li a{padding:14px 20px;display:block;font-size:14px;color:var(--text);text-decoration:none;transition:all .15s}
.woocommerce-MyAccount-navigation ul li a:hover,.woocommerce-MyAccount-navigation ul li.is-active a{background:var(--bg-light);color:var(--navy);font-weight:600}
.woocommerce-MyAccount-content{background:var(--white);border-radius:var(--radius-lg);padding:24px;border:1px solid var(--border)}
.woocommerce-MyAccount-content .button{background:var(--navy)!important;color:var(--white)!important;border-radius:50px!important;border:none!important;padding:10px 24px!important;font-weight:600!important}
.woocommerce-form.woocommerce-form-register{background:var(--white);border-radius:var(--radius-lg);padding:24px;border:1px solid var(--border);margin-top:24px}
.woocommerce-form.woocommerce-form-register h2{font-size:20px;color:var(--navy);margin-bottom:16px}

/* ---- Responsive ---- */
@media(max-width:1024px){.woocommerce ul.products{grid-template-columns:repeat(3,1fr)!important}}
@media(max-width:768px){
  .woocommerce ul.products{grid-template-columns:repeat(2,1fr)!important}
  .woocommerce div.product .product_title{font-size:24px}
  .woocommerce div.product p.price{font-size:22px!important}
  .woocommerce-product-gallery{float:none!important;width:100%!important;margin-bottom:24px}
  .summary.entry-summary{float:none!important;width:100%!important}
}
@media(max-width:480px){.woocommerce ul.products{grid-template-columns:1fr 1fr!important}}

/* Fix: prevent WooCommerce float from conflicting with grid */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    clear: none !important;
    float: none !important;
    margin: 0 !important;
    width: 100% !important;
}
.woocommerce ul.products li.product.first,
.woocommerce-page ul.products li.product.first {
    clear: none !important;
}

/* Ensure product cards render properly */
.product-card .pc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Fix product loop starting correctly */
.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* Responsive */
@media (max-width: 1024px) {
    .woocommerce ul.products { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (max-width: 768px) {
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 480px) {
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr) !important; }
}

/* No gaps from WooCommerce first/last classes */
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last {
    clear: none !important;
    margin-right: 0 !important;
}

/* 🚨 CRITICAL: Fix empty first product position in grid
   WooCommerce's ::before pseudo-element on ul.products creates an 
   invisible first grid child, pushing all products one position right. */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
    display: none !important;
    content: none !important;
}

/* Reset WooCommerce float-based product layout */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
    float: none !important;
    clear: none !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Clean grid */
.woocommerce ul.products,
.woocommerce-page ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    list-style: none !important;
    clear: none !important;
}

/* Related & Up-sells */
.related.products ul.products,
.up-sells.upsells.products ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 18px !important;
}

@media (max-width: 1024px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .related.products ul.products,
    .up-sells.upsells.products ul.products {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}
@media (max-width: 768px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .related.products ul.products,
    .up-sells.upsells.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 480px) {
    .woocommerce ul.products,
    .woocommerce-page ul.products,
    .related.products ul.products,
    .up-sells.upsells.products ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
