/* ==========================================================================
   VasthuWalk — e-commerce engine (cart drawer, checkout, product modal, Razorpay)
   ========================================================================== */
:root{ --store-radius:14px; }

/* SVG size guards (inline icons must never stretch) */
.cart-eta svg{width:16px;height:16px;flex-shrink:0;}
.co-secure svg{width:16px;height:16px;flex-shrink:0;}
.co-ship svg{width:22px;height:22px;flex-shrink:0;}
.co-summary .ic{flex-shrink:0;}.co-summary .ic svg{width:100%;height:100%;}
.co-addr .pin svg{width:20px;height:20px;}
.pay-head .pi svg{width:100%;height:100%;}
.co-coupon svg{width:18px;height:18px;flex-shrink:0;}

/* header cart button + badge */
.cart-btn{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;color:#fff;transition:.2s var(--t);}
.hdr:not(.scrolled) .cart-btn{color:#fff;}
.hdr.scrolled .cart-btn,.shop-page .cart-btn{color:#fff;}
.cart-btn:hover{background:rgba(255,255,255,.12);}
.cart-btn svg{width:22px;height:22px;}
.cart-badge{position:absolute;top:-2px;right:-2px;min-width:19px;height:19px;padding:0 5px;border-radius:20px;
  background:var(--gg);color:#3a2410;font-size:.68rem;font-weight:800;display:grid;place-items:center;line-height:1;}
.cart-badge[hidden]{display:none;}

/* ---------- generic overlay ---------- */
.vw-scrim{position:fixed;inset:0;background:rgba(20,12,6,.55);backdrop-filter:blur(3px);z-index:1000;opacity:0;
  visibility:hidden;transition:.28s var(--t);}
.vw-scrim.on{opacity:1;visibility:visible;}

/* ==========================================================================
   CART DRAWER
   ========================================================================== */
.cart-drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:#fff;z-index:1001;
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .32s var(--t);
  box-shadow:-24px 0 60px rgba(0,0,0,.28);}
.cart-drawer.on{transform:none;}
.cart-top{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.15rem;border-bottom:1px solid var(--line);}
.cart-top h3{font-size:1.05rem;color:var(--ink);font-family:var(--sans);font-weight:700;}
.cart-top .n{color:var(--muted);font-weight:600;}
.cart-x{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;font-size:1.5rem;color:var(--muted);}
.cart-x:hover{background:var(--cream);}
.cart-eta{background:#20130a;color:#f5e6c8;font-size:.82rem;font-weight:600;text-align:center;padding:.5rem;display:flex;
  align-items:center;justify-content:center;gap:.4rem;}
.cart-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:.3rem;padding:.85rem .6rem;border-bottom:1px solid var(--line);}
.cart-trust div{text-align:center;font-size:.64rem;color:var(--muted);font-weight:600;line-height:1.25;display:flex;
  flex-direction:column;align-items:center;gap:.28rem;}
.cart-trust svg{width:22px;height:22px;color:var(--brown);}
.cart-body{flex:1;overflow-y:auto;padding:.85rem;}
.cart-empty{text-align:center;color:var(--muted);padding:3rem 1rem;font-size:.92rem;}
.cart-empty span{font-size:2.4rem;display:block;margin-bottom:.6rem;}
.cart-line{display:flex;gap:.75rem;border:1px solid var(--line);border-radius:12px;padding:.65rem;margin-bottom:.7rem;position:relative;}
.cart-line img{width:76px;height:76px;border-radius:9px;object-fit:cover;background:var(--cream-2);flex-shrink:0;}
.cart-line .ci-body{flex:1;min-width:0;}
.cart-line .ci-title{font-size:.85rem;font-weight:600;color:var(--ink);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;padding-right:1.2rem;}
.cart-line .ci-var{font-size:.74rem;color:var(--muted);margin:.2rem 0 .45rem;}
.cart-line .ci-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden;}
.qty button{width:30px;height:30px;display:grid;place-items:center;font-size:1.05rem;color:var(--brown);background:#fff;}
.qty button:hover{background:var(--cream);}
.qty b{min-width:30px;text-align:center;font-size:.9rem;font-weight:700;}
.ci-price{font-weight:800;color:var(--ink);font-size:.95rem;}
.ci-price s{color:var(--muted);font-weight:500;font-size:.78rem;margin-right:.3rem;}
.ci-del{position:absolute;top:.5rem;right:.5rem;width:26px;height:26px;display:grid;place-items:center;color:var(--muted);border-radius:7px;}
.ci-del:hover{background:#fbeaea;color:#c0392b;}
.ci-del svg{width:15px;height:15px;}
.cart-foot{border-top:1px solid var(--line);padding:.9rem 1rem 1.1rem;background:#fff;}
.cart-coupon{text-align:center;color:#2e7d32;font-size:.82rem;font-weight:600;background:#eef7ee;border-radius:9px;padding:.5rem;margin-bottom:.85rem;}
.cart-field{margin-bottom:.65rem;}
.cart-field label{display:block;text-align:center;font-size:.8rem;font-weight:700;color:var(--ink);margin-bottom:.3rem;}
.cart-field input{width:100%;border:1px solid var(--line);border-radius:9px;padding:.6rem .8rem;font-family:inherit;font-size:.88rem;outline:0;}
.cart-field input:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.15);}
.cart-checkout{width:100%;background:#20130a;color:#fff;border-radius:11px;padding:.9rem;font-family:inherit;font-weight:700;
  font-size:1rem;margin-top:.4rem;transition:.2s var(--t);display:flex;align-items:center;justify-content:center;gap:.5rem;}
.cart-checkout:hover{background:#2f1d0e;}
.cart-checkout:disabled{opacity:.5;}

/* ==========================================================================
   CHECKOUT MODAL
   ========================================================================== */
.co-modal{position:fixed;z-index:1002;top:50%;left:50%;transform:translate(-50%,-46%);width:min(440px,94vw);
  max-height:92vh;background:#f6f3ef;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:.28s var(--t);box-shadow:0 40px 100px rgba(0,0,0,.4);}
.co-modal.on{opacity:1;visibility:visible;transform:translate(-50%,-50%);}
.co-head{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1.1rem;background:#fff;border-bottom:1px solid var(--line);}
.co-head .co-back{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;color:var(--muted);font-size:1.2rem;}
.co-brand{height:22px;}
.co-secure{font-size:.76rem;color:#2e7d32;font-weight:700;display:flex;align-items:center;gap:.3rem;}
.co-body{flex:1;overflow-y:auto;padding:1rem;}
.co-sec-label{font-size:.7rem;font-weight:800;letter-spacing:.08em;color:var(--muted);margin:.2rem 0 .5rem;}
.co-card{background:#fff;border-radius:13px;padding:.85rem 1rem;margin-bottom:.85rem;border:1px solid #eee;}
.co-summary{display:flex;align-items:center;gap:.7rem;}
.co-summary .ic{width:34px;height:34px;color:var(--brown);flex-shrink:0;}
.co-summary .saved{background:#eef7ee;color:#2e7d32;font-size:.72rem;font-weight:700;padding:.15rem .5rem;border-radius:20px;display:inline-block;margin-top:.2rem;}
.co-summary .amt{margin-left:auto;text-align:right;font-weight:800;color:var(--ink);}
.co-summary .amt s{color:var(--muted);font-weight:500;font-size:.78rem;display:block;}
.co-addr{display:flex;gap:.6rem;}
.co-addr .pin{color:#c0392b;flex-shrink:0;}
.co-addr .who{font-weight:700;color:var(--ink);font-size:.9rem;}
.co-addr p{font-size:.82rem;color:var(--muted);line-height:1.5;}
.co-change{border:1px solid var(--line);border-radius:9px;padding:.35rem .7rem;font-size:.8rem;font-weight:600;height:fit-content;background:#fff;}
.co-change:hover{background:var(--cream);}
.co-ship{background:var(--cream);border-radius:10px;padding:.6rem .8rem;margin-top:.7rem;display:flex;align-items:center;gap:.5rem;font-size:.82rem;color:var(--ink);}
.co-ship .free{background:#2e7d32;color:#fff;font-size:.7rem;font-weight:700;padding:.1rem .45rem;border-radius:5px;}
.co-coupon{display:flex;align-items:center;gap:.5rem;background:#fff;border-radius:11px;padding:.55rem .8rem;border:1px solid #eee;}
.co-coupon svg{width:18px;color:var(--muted);}
.co-coupon input{flex:1;border:0;outline:0;font-family:inherit;font-size:.88rem;background:transparent;}
.pay-opt{background:#fff;border-radius:13px;padding:.9rem 1rem;margin-bottom:.7rem;border:1px solid #eee;cursor:pointer;transition:.18s var(--t);}
.pay-opt:hover{border-color:var(--gold);}
.pay-opt.up{cursor:default;}
.pay-head{display:flex;align-items:center;gap:.6rem;}
.pay-head .pi{width:26px;height:26px;color:var(--brown);}
.pay-head b{font-weight:700;color:var(--ink);}
.pay-head .amt{margin-left:auto;font-weight:800;color:var(--ink);}
.pay-head .chev{margin-left:.4rem;color:var(--muted);}
.upi-row{display:flex;align-items:center;gap:1rem;margin-top:.85rem;}
.upi-qr{width:120px;height:120px;border-radius:10px;position:relative;display:grid;place-items:center;
  background:repeating-conic-gradient(#20130a 0% 25%,#fff 0% 50%) 50%/12px 12px;overflow:hidden;}
.upi-qr .blur{position:absolute;inset:0;backdrop-filter:blur(5px);background:rgba(255,255,255,.15);}
.upi-qr .showqr{position:relative;z-index:2;background:#fff;border-radius:20px;padding:.3rem .7rem;font-size:.76rem;font-weight:700;
  display:flex;align-items:center;gap:.35rem;box-shadow:0 3px 10px rgba(0,0,0,.15);}
.upi-side{flex:1;}
.upi-side p{font-size:.84rem;color:var(--ink);margin-bottom:.6rem;}
.upi-apps{display:flex;gap:.4rem;}
.upi-apps span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:.9rem;background:var(--cream-2);}

/* ==========================================================================
   RICH PRODUCT MODAL
   ========================================================================== */
.pv-modal{position:fixed;z-index:1002;top:50%;left:50%;transform:translate(-50%,-46%);width:min(1040px,96vw);
  max-height:92vh;background:#fff;border-radius:20px;overflow:hidden;display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transition:.28s var(--t);box-shadow:0 40px 100px rgba(0,0,0,.4);}
.pv-modal.on{opacity:1;visibility:visible;transform:translate(-50%,-50%);}
.pv-x{position:absolute;top:.7rem;right:.9rem;z-index:5;width:34px;height:34px;border-radius:50%;background:#fff;
  display:grid;place-items:center;font-size:1.5rem;color:var(--ink);box-shadow:0 3px 12px rgba(0,0,0,.18);}
.pv-scroll{overflow-y:auto;}
.pv-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem;padding:1.6rem;}
.pv-gallery .pv-main{width:100%;aspect-ratio:1;border-radius:14px;overflow:hidden;background:var(--cream-2);}
.pv-gallery .pv-main img{width:100%;height:100%;object-fit:cover;}
.pv-thumbs{display:flex;gap:.5rem;margin-top:.7rem;overflow-x:auto;}
.pv-thumbs img{width:64px;height:64px;border-radius:9px;object-fit:cover;cursor:pointer;border:2px solid transparent;flex-shrink:0;background:var(--cream-2);}
.pv-thumbs img.on{border-color:var(--gold);}
.pv-hot{display:inline-block;background:var(--gg);color:#3a2410;font-size:.72rem;font-weight:800;padding:.28rem .7rem;border-radius:20px;margin-bottom:.7rem;}
.pv-info h2{font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.25;color:var(--ink);margin-bottom:.7rem;}
.pv-cat{font-size:.72rem;font-weight:700;letter-spacing:.06em;color:var(--brown);text-transform:uppercase;}
.pv-prices{display:flex;align-items:center;gap:.6rem;margin:.5rem 0 1rem;flex-wrap:wrap;}
.pv-prices .now{font-size:1.5rem;font-weight:800;color:var(--ink);}
.pv-prices s{color:var(--muted);font-size:1rem;}
.pv-prices .off{border:1px solid #c0392b;color:#c0392b;font-size:.72rem;font-weight:700;padding:.1rem .5rem;border-radius:6px;}
.pv-vlabel{font-size:.8rem;color:var(--muted);margin-bottom:.4rem;}
.pv-vars{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem;}
.pv-var{border:1px solid var(--line);border-radius:9px;padding:.5rem .9rem;font-size:.86rem;font-weight:600;background:#fff;transition:.15s var(--t);}
.pv-var.on{border-color:#2e7d32;color:#2e7d32;background:#f2f9f2;}
.pv-qtyrow{display:flex;align-items:center;gap:1rem;margin-bottom:1rem;}
.pv-add{width:100%;border:1.5px solid #20130a;background:#fff;color:#20130a;border-radius:11px;padding:.9rem;font-family:inherit;
  font-weight:700;font-size:.98rem;letter-spacing:.04em;transition:.2s var(--t);margin-bottom:.4rem;}
.pv-add:hover{background:#20130a;color:#fff;}
.pv-buy{width:100%;background:var(--gg);color:#3a2410;border-radius:11px;padding:.9rem;font-family:inherit;font-weight:800;font-size:.98rem;}
.pv-badges{display:grid;grid-template-columns:repeat(6,1fr);gap:.2rem;background:linear-gradient(180deg,#fff8ec,#fdf1dc);
  border-radius:12px;padding:.8rem .4rem;margin:1.1rem 0;}
.pv-badges div{text-align:center;font-size:.6rem;font-weight:700;color:var(--brown);line-height:1.25;display:flex;flex-direction:column;align-items:center;gap:.3rem;}
.pv-badges svg{width:22px;height:22px;}
.pv-desc{font-size:.9rem;color:#54463a;line-height:1.7;margin-bottom:1rem;}
.pv-time{display:flex;align-items:center;gap:.4rem;margin:1rem 0;}
.pv-time .step{flex:1;background:var(--cream);border-radius:10px;padding:.55rem;text-align:center;}
.pv-time .step b{display:block;font-size:.8rem;color:var(--ink);}
.pv-time .step small{font-size:.68rem;color:var(--muted);}
.pv-time .arr{color:var(--muted);}
.pv-reviews{border-top:1px solid var(--line);padding-top:1rem;}
.pv-reviews h4{font-size:.95rem;margin-bottom:.6rem;display:flex;align-items:center;gap:.4rem;}
.pv-rev{font-size:.86rem;color:#54463a;line-height:1.6;}
.pv-rev cite{display:block;margin-top:.4rem;font-style:normal;font-weight:700;color:var(--ink);font-size:.82rem;}
.pv-rev .stars{color:#e6a817;}

/* toast */
.vw-toast{position:fixed;bottom:1.4rem;left:50%;transform:translateX(-50%) translateY(140%);z-index:1100;
  background:#20130a;color:#fff;padding:.8rem 1.3rem;border-radius:100px;font-size:.9rem;font-weight:600;
  box-shadow:0 10px 30px rgba(0,0,0,.3);transition:transform .32s var(--t);display:flex;align-items:center;gap:.55rem;}
.vw-toast.on{transform:translateX(-50%) translateY(0);}
.vw-toast svg{width:18px;color:#7ee0a0;}

/* responsive */
@media (max-width:820px){
  .pv-grid{grid-template-columns:1fr;gap:1.1rem;padding:1.1rem;}
  .pv-gallery .pv-main{max-width:340px;margin:0 auto;}
}
@media (max-width:480px){
  .pv-badges{grid-template-columns:repeat(3,1fr);gap:.5rem;}
  .co-modal{width:100vw;height:100vh;max-height:100vh;border-radius:0;top:0;left:0;transform:none;}
  .co-modal.on{transform:none;}
}