:root {
     --wp-brown: #9C8665;
     --wp-green: #2f7d3a;
     --wp-cream: #faf6f0;
 }

 /* ---------- Small popup (bottom-left, WhatsApp icon ke upar) ---------- */
 #wp-pop {
     position: fixed;
     right: 16px;
     bottom: 24px;
     z-index: 9998;
     width: 300px;
     background: var(--wp-cream);
     border-radius: 14px;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
      font-family: 'Roboto', sans-serif;
     transform: translateY(20px);
     opacity: 0;
     pointer-events: none;
     transition: transform .4s ease, opacity .4s ease;
 }

 #wp-pop.wp-show {
     transform: none;
     opacity: 1;
     pointer-events: auto;
 }

 #wp-pop .wp-stage {
     position: relative;
     height: 350px;
     cursor: zoom-in;
     background: #ddd;
 }

 #wp-pop .wp-stage img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     opacity: 0;
     transition: opacity .5s ease;
 }

 #wp-pop .wp-stage img.wp-on {
     opacity: 1;
 }

 #wp-pop .wp-close {
     position: absolute;
     top: 6px;
     right: 6px;
     z-index: 3;
     width: 26px;
     height: 26px;
     border: 0;
     border-radius: 50%;
     background: rgba(0, 0, 0, .55);
     color: #fff;
     font-size: 16px;
     line-height: 26px;
     cursor: pointer;
     padding: 0;
 }

 #wp-pop .wp-nav {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 2;
     width: 28px;
     height: 28px;
     border: 0;
     border-radius: 50%;
     background: rgba(255, 255, 255, .85);
     color: var(--wp-brown);
     font-size: 16px;
     cursor: pointer;
     padding: 0;
     line-height: 28px;
 }

 #wp-pop .wp-prev {
     left: 6px;
 }

 #wp-pop .wp-next {
     right: 6px;
 }

 #wp-pop .wp-foot {
     padding: 8px 10px 10px;
     text-align: center;
 }

 #wp-pop .wp-title {
     color: var(--wp-brown);
     font-size: 15px;
     font-weight: bold;
     margin: 0 0 6px;
 }

 #wp-pop .wp-dots {
     display: flex;
     gap: 6px;
     justify-content: center;
 }

 #wp-pop .wp-dots button {
     width: 8px;
     height: 8px;
     border-radius: 50%;
     border: 0;
     padding: 0;
     cursor: pointer;
     background: #cfc6bb;
 }

 #wp-pop .wp-dots button.wp-on {
     background: var(--wp-green);
 }

 /* ---------- Reopen button (popup band hone par dikhta hai) ---------- */
 #wp-reopen {
     position: fixed;
     right: 16px;
     bottom: 24px;
     z-index: 9998;
     background: var(--wp-brown);
     color: #fff;
     border: 0;
     cursor: pointer;
     padding: 10px 16px;
     border-radius: 999px;
     font: bold 14px Georgia, 'Times New Roman', serif;
     box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
     border-left: 5px solid var(--wp-green);
     transform: translateY(20px);
     opacity: 0;
     pointer-events: none;
     transition: transform .3s ease, opacity .3s ease, background .2s ease;
 }

 #wp-reopen.wp-show {
     transform: none;
     opacity: 1;
     pointer-events: auto;
 }

 #wp-reopen:hover {
     background: #3f2816;
 }

 #wp-reopen:focus-visible {
     outline: 3px solid var(--wp-green);
     outline-offset: 2px;
 }

 @media (max-width:600px) {
     #wp-reopen {
         right: 10px;
         bottom: 8px;
         font-size: 13px;
         padding: 9px 14px;
     }
 }

 @media (prefers-reduced-motion:reduce) {
     #wp-reopen {
         transition: none;
     }
 }

 /* ---------- Fullscreen view ---------- */
 #wp-full {
     position: fixed;
     inset: 0;
     z-index: 99999;
     background: rgba(0, 0, 0, .92);
     display: none;
     align-items: center;
     justify-content: center;
     flex-direction: column;
 }

 #wp-full.wp-open {
     display: flex;
 }

 #wp-full img {
     max-width: 94vw;
     max-height: 82vh;
     object-fit: contain;
     border-radius: 6px;
 }

 #wp-full .wp-cap {
     color: #fff;
     margin-top: 12px;
     font: bold 18px Georgia, serif;
     text-align: center;
     padding: 0 16px;
 }

 #wp-full button {
     position: absolute;
     border: 0;
     cursor: pointer;
     color: #fff;
     background: rgba(255, 255, 255, .15);
     border-radius: 50%;
     width: 46px;
     height: 46px;
     font-size: 24px;
     line-height: 46px;
     padding: 0;
 }

 #wp-full button:hover {
     background: rgba(255, 255, 255, .3);
 }

 #wp-full .wp-x {
     top: 18px;
     right: 18px;
 }

 #wp-full .wp-fprev {
     left: 18px;
     top: 50%;
     transform: translateY(-50%);
 }

 #wp-full .wp-fnext {
     right: 18px;
     top: 50%;
     transform: translateY(-50%);
 }

 @media (max-width:600px) {
     #wp-pop {
         width: 190px;
         right: 10px;
         bottom: 8px;
     }

     #wp-pop .wp-stage {
         height: 235px;
     }

     #wp-full .wp-fprev,
     #wp-full .wp-fnext {
         width: 38px;
         height: 38px;
         line-height: 38px;
     }
 }

 @media (prefers-reduced-motion:reduce) {

     #wp-pop,
     #wp-pop .wp-stage img {
         transition: none;
     }
 }