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

/* =====================================================================
   AAPNI SHOP THEME  (storefront only — customer pages)
   ---------------------------------------------------------------------
   Idea: deep-green chrome, white product cards on a faint green-tinted page,
   pink "ADD" actions, green ONLY for savings / stock. Everything lives in
   this one file — delete the <link> to aapni-theme.css to go back to the
   old look. No PHP logic is touched.

   Loaded AFTER each page's own <style>, so equal-specificity rules here win.
   ===================================================================== */

:root{
  /* palette */
  --aapni-purple:      #0c831f;   /* brand, links, active states            */
  --aapni-purple-mid:  #0a7a1e;   /* header body / sticky search strip      */
  --aapni-purple-deep: #08621a;   /* header top, pressed states             */
  --aapni-purple-soft: #e6f4e8;   /* tints, selected rows                   */
  --aapni-pink:        #e0245e;   /* ADD / primary actions                  */
  --aapni-pink-press:  #c41c51;
  --aapni-pink-soft:   #fdeaf1;
  --aapni-green:       #15803d;   /* savings + stock only                   */
  --aapni-ink:         #1a2a1f;
  --aapni-muted:       #5f6f64;
  --aapni-line:        #e3ece5;
  --aapni-wash:        #f3f8f4;   /* page + image tiles                     */

  /* re-point the variables the old stylesheet already uses */
  --primary:       var(--aapni-purple);
  --primary-dark:  var(--aapni-purple-deep);
  --primary-light: var(--aapni-purple-soft);
  --accent:        var(--aapni-pink);
  --bg:            var(--aapni-wash);
  --text:          var(--aapni-ink);
  --text-muted:    var(--aapni-muted);
  --border:        var(--aapni-line);
  --card-shadow:   none;
}

/* ---------- base ---------- */
body{
  font-family:'DM Sans',Arial,sans-serif;
  background:var(--aapni-wash);
  color:var(--aapni-ink);
}

/* keyboard focus must be visible everywhere */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--aapni-purple);
  outline-offset:2px;
}

/* =====================================================================
   HEADERS
   ===================================================================== */

/* inner pages (header.php) */
.topbar{
  background:linear-gradient(180deg,var(--aapni-purple-deep) 0%,var(--aapni-purple-mid) 100%);
  box-shadow:0 4px 14px rgba(8,98,26,.22);
}
.iconBtn, .walletBox{background:rgba(255,255,255,.14);}
.iconBtn:hover{background:rgba(255,255,255,.24);}
.cartIcon{background:rgba(255,255,255,.14);}
.cartBadge{background:var(--aapni-pink);border-color:var(--aapni-purple-mid);}

/* simple title bars on cart / orders / addresses / returns ... */
.header{
  background:linear-gradient(180deg,var(--aapni-purple-deep) 0%,var(--aapni-purple-mid) 100%);
  color:#fff;
}

/* search results page */
.searchRow{background:var(--aapni-purple-mid);}
.searchRow .backBtn{color:#fff;}
.cartWrap{background:rgba(255,255,255,.14);}
.cartWrap .badge{background:var(--aapni-pink);border-color:var(--aapni-purple-mid);}

/* ---------- home header ---------- */
.mainHeader{
  background:linear-gradient(180deg,var(--aapni-purple-deep) 0%,var(--aapni-purple-mid) 100%);
  border-bottom:0;
  padding-bottom:4px;
}
/* the header markup uses inline colours, so these need to match the inline value */
.mainHeader div[style*="color:#111827" i],
.mainHeader a[style*="color:#111827" i],
.mainHeader a[style*="color:#374151" i]{color:#fff !important;}
.mainHeader div[style*="color:#6b7280" i]{color:rgba(255,255,255,.74) !important;}
.mainHeader span[style*="color:#C0392B" i]{color:#ffc4d8 !important;}
.mainHeader span[style*="background:#C0392B" i]{background:var(--aapni-pink) !important;}

.stickyNav{
  background:var(--aapni-purple-mid);
  box-shadow:0 6px 16px rgba(8,98,26,.2);
}
.topRow{background:transparent;padding:6px 14px 14px;}
.searchBar{
  background:#fff;border:0;border-radius:12px;height:46px;
}
.searchBar span.ico{color:var(--aapni-purple);}
.searchBar span.txt{color:var(--aapni-muted);}
.searchBar span.txt.hasSearch{color:var(--aapni-ink);}
.searchBar .extraIco{color:#b6c2b9;}
.scanBox, .headerCart{
  background:rgba(255,255,255,.14);
  color:#fff;
  border-radius:12px;
}
.headerCart .badge{
  background:var(--aapni-pink);
  border-color:var(--aapni-purple-mid);
  box-shadow:none;
  animation:none;
}

/* =====================================================================
   HOME — categories, sections, product rows
   ===================================================================== */

.catRow{border-bottom:1px solid var(--aapni-line);}
.catIcon{background:var(--aapni-purple-soft);border-color:transparent;}
.catItem span{color:var(--aapni-ink);}
.catItem.active{border-bottom-color:var(--aapni-purple);}
.catItem.active .catIcon{border-color:var(--aapni-purple);background:var(--aapni-purple-soft);}
.catItem.active span{color:var(--aapni-purple);}

.deptTitle{color:var(--aapni-ink);}
.deptTile{color:var(--aapni-ink);}
.deptTile .box{border-radius:16px;}
.deptGrid .deptTile:nth-child(6n+1) .box{background:#ecf8ee;}
.deptGrid .deptTile:nth-child(6n+2) .box{background:#fdeaf1;}
.deptGrid .deptTile:nth-child(6n+3) .box{background:#e5f6ec;}
.deptGrid .deptTile:nth-child(6n+4) .box{background:#fff1e0;}
.deptGrid .deptTile:nth-child(6n+5) .box{background:#e6effd;}
.deptGrid .deptTile:nth-child(6n+6) .box{background:#ecf8ee;}
.deptTile .box img{mix-blend-mode:multiply;}
.deptTile span.label{font-weight:700;color:var(--aapni-ink);}

.secTitle h2, .bkHead h2, .sectionTitle h2{color:var(--aapni-ink);font-weight:800;}
.secTitle a, .bkHead a, .boxSection .boxHead a{color:var(--aapni-purple);}
.btnSmall{color:var(--aapni-purple);border-color:var(--aapni-purple);}

/* horizontal product rows on the home page */
.bkCard{border-color:var(--aapni-line);border-radius:12px;}
/* tile colour lives on the link around the image; the image multiplies into it,
   so white-background product photos blend instead of showing a white box */
.bkCard > a:has(> .bkImg){display:block;background:var(--aapni-wash);border-radius:10px;}
.bkCard .bkImg{background:transparent;border-radius:10px;mix-blend-mode:multiply;}
.bkCard .bkOff{background:var(--aapni-purple);}
.bkCard .bkName{color:var(--aapni-ink);font-weight:600;}
.bkCard .bkUnit{color:var(--aapni-muted);}
.bkCard .bkPrice{color:var(--aapni-ink);}
.bkAdd{
  border-color:#0c831f !important;background:#0c831f !important;color:#fff !important;
}
.bkAdd.done{background:#08621a !important;border-color:#08621a !important;color:#fff !important;}
.bkNote{color:var(--aapni-muted);}

/* hot-deal cards */
.hotCard{
  border:1px solid var(--aapni-line);border-radius:12px;box-shadow:none;
}
.hotCard img{background:#fff;}
.hotCard .offTag{background:var(--aapni-purple);border-radius:6px;}
.hotCard .hName{color:var(--aapni-ink);font-weight:600;}
.hotCard .hPrice{color:var(--aapni-ink);font-weight:800;}
.hotCard .hBtn{
  background:#0c831f !important;color:#fff !important;border:1.5px solid #0c831f !important;
}
.hotCard .hBtn.oos{background:var(--aapni-wash) !important;color:#9ba89f !important;border-color:transparent !important;}

/* coloured highlight blocks */
.boxSection.pink{background:var(--aapni-pink-soft);}
.boxSection.yellow{background:var(--aapni-purple-soft);}
.boxSection .boxHead h2{color:var(--aapni-ink);}
.boxSection .hotCard{border-color:rgba(12,131,31,.08);}
.subcatTile span{color:var(--aapni-ink);}

/* banners, stores, brands, explore tiles: borders instead of drop shadows */
.bannerCarousel img{box-shadow:none;border-radius:14px;}
.storeCard .storeLogo{border-color:var(--aapni-line);box-shadow:none;}
.storeCard .storeName{color:var(--aapni-ink);}
.exploreItem{border:1px solid var(--aapni-line);box-shadow:none;}
.exploreItem span.exLabel{color:var(--aapni-ink);}
.brandChip{border:1px solid var(--aapni-line);box-shadow:none;}
.nearbyStripCard{background:#fff;border-color:var(--aapni-line);}
.nearbyStripPrompt{background:var(--aapni-purple-soft);color:var(--aapni-purple-deep);}

/* =====================================================================
   PRODUCT GRIDS (style.css .pCard, search results, category page)
   ===================================================================== */

.pCard{
  border:1px solid var(--aapni-line);
  border-radius:12px;
  box-shadow:none;
}
.pCard:hover{transform:none;box-shadow:none;}   /* no hover lift on a touch app */
.pImg, .pCard img{background:transparent;}
.pImgBox{background:var(--aapni-wash);border-color:transparent;}
.pImgBox img{background:transparent;mix-blend-mode:multiply;}
.pName{color:var(--aapni-ink);}
.pPrice b, .pPriceRow b{color:var(--aapni-ink);}
.offTag, .offBadge{background:var(--aapni-purple);border-radius:6px;}
.wishBtn{box-shadow:none;border:1px solid var(--aapni-line);}

/* ADD buttons */
.addBtn{
  background:#0c831f !important;color:#fff !important;
  border:1.5px solid #0c831f !important;
  border-radius:10px;
}
.addBtn:hover{background:#0a6e1b !important;}
.addBtn.outStock, .addBtn.oos{
  background:var(--aapni-wash) !important;color:#9ba89f !important;border-color:transparent !important;
}

/* category page */
.addBtnOverlay{
  background:#0c831f !important;color:#fff !important;border-color:#0c831f !important;
  box-shadow:none;
}
.addBtnOverlay.added{background:#08621a !important;color:#fff !important;border-color:#08621a !important;}
.addBtnOverlay.hasVariants .optTag{color:#d8f0dc !important;}
.variantRow .vAddBtn{background:#0c831f !important;color:#fff !important;border-color:#0c831f !important;}
.variantRow .vAddBtn.added{background:#08621a !important;color:#fff !important;}
.variantRow .vOffBadge{background:var(--aapni-purple);}
.pPriceBadge{background:var(--aapni-purple);}
.sideItem.active{
  background:var(--aapni-purple-soft);border-left-color:var(--aapni-purple);color:var(--aapni-purple);
}
.sideItem.active .ic{background:#daf1de;}
.subPill{border-color:var(--aapni-purple);}
.subPill.active{background:var(--aapni-purple);color:#fff;}
.nearbyToggleBtn.on{background:var(--aapni-purple);border-color:var(--aapni-purple);}

/* floating "view cart" bar */
.floatCart{
  background:var(--aapni-pink);
  box-shadow:0 8px 20px rgba(224,36,94,.32);
}

/* search page */
.emptyBox a{background:var(--aapni-pink);}
.resultBar a{color:var(--aapni-purple);}
.sgItem .sgPrice{color:var(--aapni-ink);}

/* =====================================================================
   PRODUCT DETAIL
   ===================================================================== */
.pdOptionPill.active{
  border-color:var(--aapni-purple);background:var(--aapni-purple-soft);color:var(--aapni-purple-deep);
}
.pdSecondaryRow a.active{color:var(--aapni-purple);}
.miniCard .mPrice{color:var(--aapni-ink);}
.reviewForm button{background:var(--aapni-purple);}
.stickyBuyBar{box-shadow:0 -6px 18px rgba(8,98,26,.08);border-top-color:var(--aapni-line);}
.stickyAddBtn{background:#0c831f !important;color:#fff !important;border-color:#0c831f !important;}
.stickyBuyBtn{background:var(--aapni-pink);color:#fff;border-color:var(--aapni-pink);}

/* =====================================================================
   CART / CHECKOUT / FORMS / SHARED
   ===================================================================== */
.card{
  border:1px solid var(--aapni-line);
  box-shadow:none;
  border-radius:14px;
}
.addr.active{border-color:var(--aapni-purple);background:var(--aapni-purple-soft);}
.footer{box-shadow:0 -6px 18px rgba(8,98,26,.08);}

/* main action buttons (cart "Checkout", checkout "Place order", shared) */
.btn{
  background:var(--aapni-pink);
  color:#fff;
}
.btnPrimary{background:var(--aapni-pink);}
.btnPrimary:hover{background:var(--aapni-pink-press);}
.btnOutline{color:var(--aapni-purple);border-color:var(--aapni-purple);}
.btnOutline:hover{background:var(--aapni-purple-soft);}
.formInput:focus, .formSelect:focus{border-color:var(--aapni-purple);}

/* =====================================================================
   BOTTOM NAV
   ===================================================================== */
.bottomNav{
  border-top:1px solid var(--aapni-line);
  box-shadow:0 -6px 18px rgba(8,98,26,.06);
}
.navItem{position:relative;color:var(--aapni-muted);}
.navItem:hover, .navItem.active, .navItem.on{color:var(--aapni-purple);}
/* small bar above the active tab, so "where am I" is readable without colour alone */
.navItem.active::before, .navItem.on::before{
  content:"";position:absolute;top:-8px;left:50%;
  width:28px;height:3px;margin-left:-14px;
  border-radius:0 0 3px 3px;background:var(--aapni-purple);
}

/* =====================================================================
   motion: respect the user's setting
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important;}
}