/*
Theme Name: Shoplix Storefront
Theme URI: https://shoplixpk.store
Description: A modern 2026-style child theme of Storefront, built for Shoplix — Pakistan's mobile-first, COD-friendly, WhatsApp-first multi-category store (grocery, home & living, beauty, fashion, jewellery, kids & baby, gifts, electronics). Requires the free "Storefront" parent theme.
Author: Shoplix
Template: storefront
Version: 1.0.0
Text Domain: shoplix-storefront
*/

/* ==========================================================================
   Shoplix Design System — 2026 refresh
   Palette: deep indigo + emerald accent, warm off-white surface
   ========================================================================== */

:root{
  --shx-ink:        #15132b;
  --shx-ink-soft:   #4a4766;
  --shx-indigo:     #1e1b4b;
  --shx-indigo-2:   #2f2a72;
  --shx-emerald:    #10b981;
  --shx-emerald-dk: #0b8f66;
  --shx-amber:      #f59e0b;
  --shx-bg:         #faf9f7;
  --shx-surface:    #ffffff;
  --shx-border:     #ecebf3;
  --shx-radius-lg:  20px;
  --shx-radius-md:  14px;
  --shx-radius-sm:  10px;
  --shx-shadow:     0 6px 24px rgba(21,19,43,.08);
  --shx-shadow-lg:  0 16px 40px rgba(21,19,43,.14);
}

body{
  background: var(--shx-bg);
  color: var(--shx-ink);
  -webkit-font-smoothing: antialiased;
}

a{ color: var(--shx-indigo); }
a:hover{ color: var(--shx-emerald-dk); }

/* ---- Top utility bar: trust badges ---- */
.shx-trust-bar{
  background: var(--shx-indigo);
  color: #fff;
}
.shx-trust-bar .shx-trust-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
}
.shx-trust-bar span{ display:flex; align-items:center; gap:6px; opacity:.95; }
.shx-trust-bar span::before{ content:"✓"; color: var(--shx-emerald); font-weight:800; }

/* ---- Header ---- */
.site-header{
  background: var(--shx-surface);
  border-bottom: 1px solid var(--shx-border);
  box-shadow: none;
}
.site-branding .site-title a{
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--shx-indigo) !important;
  font-size: 1.6em;
}
.site-header-cart .cart-contents{
  background: var(--shx-indigo);
  color:#fff;
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 700;
  transition: transform .15s ease, background .15s ease;
}
.site-header-cart .cart-contents:hover{
  background: var(--shx-emerald-dk);
  transform: translateY(-1px);
}

/* ---- Primary nav ---- */
.main-navigation ul li a{
  font-weight: 600;
  color: var(--shx-ink);
}
.main-navigation ul li a:hover{ color: var(--shx-emerald-dk); }

/* ---- Hero banner ---- */
.shx-hero{
  position: relative;
  overflow: hidden;
  border-radius: var(--shx-radius-lg);
  margin: 28px auto;
  max-width: 1200px;
  padding: 56px 40px;
  background: linear-gradient(135deg, var(--shx-indigo) 0%, var(--shx-indigo-2) 55%, #4338ca 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.shx-hero::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(600px 260px at 85% 20%, rgba(16,185,129,.35), transparent 60%);
  pointer-events:none;
}
.shx-hero h1{
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0;
  max-width: 640px;
}
.shx-hero p{
  font-size: 17px;
  max-width: 520px;
  opacity: .92;
  margin: 0;
}
.shx-hero .shx-hero-ctas{ display:flex; gap:14px; flex-wrap: wrap; }
.shx-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  text-decoration:none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  border: none;
  cursor: pointer;
}
.shx-btn-primary{
  background: var(--shx-emerald);
  color: var(--shx-indigo);
}
.shx-btn-primary:hover{
  background:#fff; color: var(--shx-indigo);
  transform: translateY(-2px);
  box-shadow: var(--shx-shadow-lg);
}
.shx-btn-ghost{
  background: rgba(255,255,255,.12);
  color:#fff;
  border: 1px solid rgba(255,255,255,.35);
}
.shx-btn-ghost:hover{ background: rgba(255,255,255,.22); transform: translateY(-2px); }

/* ---- Category tiles ---- */
.shx-categories{
  max-width: 1200px;
  margin: 40px auto;
  padding: 0 20px;
}
.shx-section-title{
  font-size: 24px;
  font-weight: 800;
  letter-spacing:-.01em;
  margin: 0 0 18px;
  color: var(--shx-ink);
}
.shx-cat-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 900px){ .shx-cat-grid{ grid-template-columns: repeat(2, 1fr); } }
.shx-cat-tile{
  background: var(--shx-surface);
  border: 1px solid var(--shx-border);
  border-radius: var(--shx-radius-md);
  padding: 22px 16px;
  text-align:center;
  text-decoration:none;
  color: var(--shx-ink);
  font-weight: 700;
  font-size: 14px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.shx-cat-tile:hover{
  transform: translateY(-4px);
  box-shadow: var(--shx-shadow);
  border-color: transparent;
  color: var(--shx-indigo);
}
.shx-cat-tile .shx-cat-emoji{ display:block; font-size: 30px; margin-bottom: 10px; }

/* ---- Product cards ---- */
ul.products li.product{
  background: var(--shx-surface);
  border: 1px solid var(--shx-border);
  border-radius: var(--shx-radius-md);
  padding: 14px 14px 18px;
  transition: transform .15s ease, box-shadow .15s ease;
  position: relative;
}
ul.products li.product:hover{
  transform: translateY(-5px);
  box-shadow: var(--shx-shadow-lg);
}
ul.products li.product img{
  border-radius: var(--shx-radius-sm);
}
ul.products li.product .price{
  color: var(--shx-emerald-dk);
  font-weight: 800;
}
ul.products li.product .price del{ color:#9a97ad; font-weight:500; }
ul.products li.product a.add_to_cart_button,
ul.products li.product a.button{
  background: var(--shx-indigo);
  color:#fff;
  border-radius: 999px;
  font-weight: 700;
  border: none;
  padding: 10px 18px;
}
ul.products li.product a.add_to_cart_button:hover,
ul.products li.product a.button:hover{
  background: var(--shx-emerald-dk);
}
.shx-cod-badge{
  position:absolute; top:12px; left:12px;
  background: var(--shx-amber);
  color: var(--shx-ink);
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing:.02em;
  z-index: 2;
}

/* ---- Single product ---- */
.single-product div.product .woocommerce-Price-amount{
  color: var(--shx-emerald-dk);
  font-weight: 800;
  font-size: 1.35em;
}
.single-product div.product .single_add_to_cart_button{
  background: var(--shx-indigo) !important;
  border-radius: 999px !important;
  padding: 15px 34px !important;
  font-weight: 800 !important;
  font-size: 16px !important;
  border:none !important;
}
.single-product div.product .single_add_to_cart_button:hover{
  background: var(--shx-emerald-dk) !important;
}
.shx-whatsapp-inline{
  display:inline-flex; align-items:center; gap:8px;
  margin-top: 14px;
  padding: 12px 20px;
  border-radius: 999px;
  background: #25D366;
  color:#fff !important;
  font-weight:700;
  text-decoration:none;
}
.shx-whatsapp-inline:hover{ background:#1ebc57; }

/* ---- Floating WhatsApp button ---- */
.shx-wa-float{
  position: fixed;
  right: 20px;
  bottom: 22px;
  z-index: 9999;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: #25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 30px rgba(37,211,102,.45);
  transition: transform .15s ease;
}
.shx-wa-float:hover{ transform: scale(1.08); }
.shx-wa-float svg{ width: 30px; height: 30px; }

/* ---- Sticky mobile add-to-cart bar ---- */
.shx-sticky-cta{
  display:none;
}
@media (max-width: 782px){
  .shx-sticky-cta{
    display:flex;
    position: fixed;
    left:0; right:0; bottom:0;
    z-index: 9998;
    background: var(--shx-surface);
    border-top: 1px solid var(--shx-border);
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    gap: 10px;
    box-shadow: 0 -8px 24px rgba(21,19,43,.10);
  }
  .shx-sticky-cta .shx-btn{ flex:1; justify-content:center; }
  body.single-product{ padding-bottom: 76px; }
}

/* ---- Footer ---- */
#colophon{
  background: var(--shx-indigo);
  color: rgba(255,255,255,.85);
}
#colophon a{ color:#fff; }
#colophon .site-info{ opacity:.75; }