/* ===== DealMirror Card Designs (Category Wise Deals) =====
   Sab kuch `.pcd` ke andar scoped hai, theme/plugin CSS se takrayega nahi. */
.pcd{--pcd-ink:#17181C;--pcd-amber:#FFB400;--pcd-muted:#6A6F7A;
  font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--pcd-ink);
  -webkit-font-smoothing:antialiased;width:100%;margin:0;padding:24px;background:none;box-sizing:border-box}
/* sirf DM Sans: theme ka heading font override na kare */
.pcd,.pcd *{font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif!important}
.pcd *,.pcd *::before,.pcd *::after{box-sizing:border-box}
.pcd h2,.pcd h3,.pcd p,.pcd span,.pcd div,.pcd a,.pcd button{margin:0;padding:0}
.pcd a.pcd-card{color:inherit;text-decoration:none}
.pcd a:focus-visible,.pcd button:focus-visible{outline:3px solid var(--pcd-amber);outline-offset:3px}


.pcd .pcd-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}
.pcd .pcd-h{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.2;color:var(--pcd-ink);text-transform:none}
.pcd .pcd-viewall{flex:none;background:var(--pcd-amber);color:var(--pcd-ink);font-weight:700;font-size:15px;text-decoration:none;padding:10px 24px;border-radius:999px;border:1.5px solid var(--pcd-ink);transition:transform .15s ease}
.pcd .pcd-viewall:hover{transform:translateY(-1px)}

/* grid */
.pcd .pcd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.pcd .pcd-grid-2{grid-template-columns:repeat(2,1fr)}
@media (max-width:1040px){.pcd .pcd-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:760px){.pcd .pcd-grid-2{grid-template-columns:1fr}}
@media (max-width:560px){.pcd .pcd-grid{grid-template-columns:1fr}}

/* common pieces */
.pcd .pcd-thumb{position:relative;overflow:hidden;aspect-ratio:7/6;display:flex;align-items:center;justify-content:center;color:#fff;text-align:center;padding:16px}
.pcd .pcd-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;max-width:none;margin:0}
.pcd .pcd-fb{font-weight:800;font-size:20px;letter-spacing:-.02em;line-height:1.15}
.pcd .pcd-title{font-size:16px;font-weight:700;line-height:1.4;min-height:2.8em;color:var(--pcd-ink);text-transform:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcd .pcd-cat{align-self:flex-start;font-size:12.5px;font-weight:500;line-height:1.4}
.pcd .pcd-card{display:flex;flex-direction:column;min-width:0}
@media (prefers-reduced-motion:reduce){.pcd *{transition:none!important}}

/* ===== A · CLEAN ===== */
.pcd .pcd-a{background:#fff;border-radius:22px;padding:12px;border:1px solid #E4E6EA;transition:box-shadow .25s ease,transform .25s ease}
.pcd .pcd-a:hover{box-shadow:0 18px 40px -18px rgba(23,24,28,.35);transform:translateY(-3px)}
.pcd .pcd-a .pcd-thumb{border-radius:14px}
.pcd .pcd-a .pcd-pill{position:absolute;top:10px;left:10px;z-index:2;background:#fff;color:var(--pcd-ink);font-size:12.5px;font-weight:800;padding:5px 10px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.15)}
.pcd .pcd-a .pcd-body{padding:16px 8px 6px;display:flex;flex-direction:column;gap:8px;flex:1}
.pcd .pcd-a .pcd-cat{color:#5B606B;background:#F1F2F4;padding:4px 10px;border-radius:999px}
.pcd .pcd-a .pcd-row{display:flex;align-items:center;justify-content:space-between;padding:14px 8px 8px;margin-top:6px;border-top:1px solid #ECEEF1}
.pcd .pcd-a .pcd-old{font-size:13px;color:#7A808B;text-decoration:line-through;display:block}
.pcd .pcd-a .pcd-now{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.pcd .pcd-a .pcd-go{width:44px;height:44px;border-radius:50%;background:var(--pcd-ink);color:#fff;display:grid;place-items:center;transition:background .2s ease,color .2s ease}
.pcd .pcd-a:hover .pcd-go{background:var(--pcd-amber);color:var(--pcd-ink)}

/* ===== B · SOFT TINT ===== */
.pcd .pcd-b{position:relative;background:#FFF7DD;border:1.5px solid #F2DFA0;border-radius:20px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.pcd .pcd-b:hover{transform:translateY(-3px);box-shadow:0 16px 32px -16px rgba(180,120,0,.45)}
.pcd .pcd-b .pcd-badge{position:absolute;left:0;top:18px;z-index:2;background:var(--pcd-amber);color:var(--pcd-ink);font-weight:800;font-size:14px;padding:6px 14px 6px 12px;border-radius:0 999px 999px 0}
.pcd .pcd-b .pcd-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.pcd .pcd-b .pcd-cat{font-size:13px;color:#8A6A12}
.pcd .pcd-b .pcd-prices{display:flex;align-items:baseline;gap:10px;margin-top:2px}
.pcd .pcd-b .pcd-now{font-size:28px;font-weight:800;letter-spacing:-.02em}
.pcd .pcd-b .pcd-old{font-size:14px;color:#8F8668;text-decoration:line-through}
.pcd .pcd-b .pcd-save{font-size:13px;color:#0B7A4B;font-weight:700}
.pcd .pcd-b .pcd-btn{margin-top:4px;text-align:center;font-weight:700;font-size:14.5px;padding:11px;border-radius:12px;background:var(--pcd-ink);color:#fff;transition:background .2s ease,color .2s ease}
.pcd .pcd-b:hover .pcd-btn{background:var(--pcd-amber);color:var(--pcd-ink)}

/* ===== C · NEO-POP ===== */
.pcd .pcd-c{position:relative;background:#fff;border:2px solid var(--pcd-ink);border-radius:14px;box-shadow:6px 6px 0 var(--pcd-ink);transition:transform .15s ease,box-shadow .15s ease}
.pcd .pcd-c:hover{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--pcd-ink)}
.pcd .pcd-c .pcd-thumb{border-bottom:2px solid var(--pcd-ink);border-radius:12px 12px 0 0}
.pcd .pcd-c .pcd-sticker{position:absolute;right:-10px;top:-14px;z-index:3;width:70px;height:70px;border-radius:50%;background:var(--pcd-amber);border:2px solid var(--pcd-ink);display:grid;place-items:center;text-align:center;transform:rotate(10deg);font-weight:800;line-height:1}
.pcd .pcd-c .pcd-sticker b{font-size:20px;display:block}
.pcd .pcd-c .pcd-sticker i{font-size:11px;font-weight:700;font-style:normal;display:block}
.pcd .pcd-c .pcd-body{padding:16px 16px 18px;display:flex;flex-direction:column;gap:10px;flex:1}
.pcd .pcd-c .pcd-cat{font-weight:700;border:1.5px solid var(--pcd-ink);border-radius:6px;padding:2px 8px;background:#FFF1BF}
.pcd .pcd-c .pcd-prices{display:flex;align-items:baseline;gap:10px}
.pcd .pcd-c .pcd-now{font-size:28px;font-weight:800;letter-spacing:-.02em}
.pcd .pcd-c .pcd-old{font-size:14px;color:#6B6F78;text-decoration:line-through}
.pcd .pcd-c .pcd-btn{text-align:center;background:var(--pcd-ink);color:#fff;font-weight:700;font-size:14.5px;padding:11px;border-radius:8px}

/* ===== D · HORIZONTAL ===== */
.pcd .pcd-d{display:grid;grid-template-columns:42% 1fr;background:#fff;border:1px solid #E1E3E8;border-radius:20px;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}
.pcd .pcd-d:hover{border-color:var(--pcd-amber);box-shadow:0 0 0 3px rgba(255,180,0,.35)}
.pcd .pcd-d .pcd-thumb{aspect-ratio:auto;min-height:220px;height:100%}
.pcd .pcd-d .pcd-off{position:absolute;left:12px;bottom:12px;z-index:2;width:56px;height:56px;border-radius:50%;background:var(--pcd-amber);color:var(--pcd-ink);display:grid;place-items:center;font-size:15px;font-weight:800;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.pcd .pcd-d .pcd-info{padding:20px 22px;display:flex;flex-direction:column;gap:10px;justify-content:space-between}
.pcd .pcd-d .pcd-cat{color:#5B606B;background:#F1F2F4;padding:4px 10px;border-radius:999px}
.pcd .pcd-d .pcd-title{min-height:0;-webkit-line-clamp:3}
.pcd .pcd-d .pcd-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px dashed #D5D8DE}
.pcd .pcd-d .pcd-old{font-size:13px;color:#7A808B;text-decoration:line-through;display:block}
.pcd .pcd-d .pcd-now{font-size:26px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.pcd .pcd-d .pcd-btn{font-weight:700;font-size:14px;padding:10px 16px;border-radius:12px;background:var(--pcd-ink);color:#fff;white-space:nowrap;transition:background .2s ease,color .2s ease}
.pcd .pcd-d:hover .pcd-btn{background:var(--pcd-amber);color:var(--pcd-ink)}
@media (max-width:560px){.pcd .pcd-d{grid-template-columns:1fr}.pcd .pcd-d .pcd-thumb{aspect-ratio:7/6;min-height:0;height:auto}}

/* ===== SLIDER 5x2 ===== */
.pcd .pcd-slider{--pcd-cols:5;--pcd-gap:20px;position:relative;padding:0 58px}
@media (max-width:1180px){.pcd .pcd-slider{--pcd-cols:4;padding:0 52px}}
@media (max-width:900px){.pcd .pcd-slider{--pcd-cols:3}}
@media (max-width:680px){.pcd .pcd-slider{--pcd-cols:2;--pcd-gap:14px;padding:0}.pcd .pcd-nav{display:none}}
@media (max-width:420px){.pcd .pcd-slider{--pcd-cols:1}}
.pcd .pcd-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding:10px 0 28px;margin:-10px 0 -28px}
.pcd .pcd-viewport::-webkit-scrollbar{display:none}
.pcd .pcd-track{display:grid;grid-template-rows:repeat(2,auto);grid-auto-flow:column;gap:var(--pcd-gap);grid-auto-columns:calc((100% - (var(--pcd-cols) - 1) * var(--pcd-gap)) / var(--pcd-cols))}
.pcd .pcd-track>*{scroll-snap-align:start;min-width:0}
.pcd .pcd-empty{visibility:hidden}
.pcd .pcd-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:5;width:42px;height:42px;border-radius:50%;border:1.5px solid var(--pcd-ink);background:#fff;color:var(--pcd-ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 16px -6px rgba(23,24,28,.4);transition:background .2s ease,opacity .2s ease}
.pcd .pcd-nav:hover:not(:disabled){background:var(--pcd-amber)}
.pcd .pcd-nav:disabled{opacity:.35;cursor:default}
.pcd .pcd-nav.prev{left:0}.pcd .pcd-nav.next{right:0}
.pcd .pcd-dots{display:flex;justify-content:center;gap:8px;margin-top:36px}
.pcd .pcd-dot{width:8px;height:8px;border-radius:999px;border:0;background:#C9CCD3;cursor:pointer;transition:width .25s ease,background .25s ease}
.pcd .pcd-dot[aria-current="true"]{width:26px;background:var(--pcd-ink)}
.pcd .pcd-hidden{display:none!important}

.pcd .pcd-s{background:linear-gradient(#fff,#FBFBFC);border-radius:22px;padding:10px;border:1px solid #E6E8EC;transition:box-shadow .25s ease,transform .25s ease}
.pcd .pcd-s:hover{border-color:var(--pcd-amber);box-shadow:0 18px 36px -18px rgba(23,24,28,.45),0 0 0 3px rgba(255,180,0,.28);transform:translateY(-3px)}
.pcd .pcd-s .pcd-thumb{border-radius:12px;flex-direction:column;gap:4px;padding:12px}
.pcd .pcd-s .pcd-thumb::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(23,24,28,.07);pointer-events:none;z-index:1}
.pcd .pcd-s .pcd-thumb img{transition:transform .5s ease}
.pcd .pcd-s:hover .pcd-thumb img{transform:scale(1.05)}
.pcd .pcd-s .pcd-pill{position:absolute;top:8px;left:8px;z-index:2;display:inline-flex;align-items:center;gap:3px;background:#fff;color:var(--pcd-ink);font-size:12px;font-weight:800;padding:4px 10px 4px 7px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.pcd .pcd-s .pcd-body{padding:12px 6px 4px;display:flex;flex-direction:column;gap:8px;flex:1}
.pcd .pcd-s .pcd-cat{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:#4F5560;background:#F3F4F6;padding:3px 10px 3px 8px;border-radius:999px;max-width:100%;overflow:hidden;white-space:nowrap}
.pcd .pcd-s .pcd-cat::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--pcd-amber)}
.pcd .pcd-s .pcd-title{font-size:16px;font-weight:800;letter-spacing:-.01em;line-height:1.25;min-height:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcd .pcd-s .pcd-desc{font-size:13px;line-height:1.4;color:var(--pcd-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:-3px}
.pcd .pcd-s .pcd-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:12px 6px 6px;margin-top:6px;border-top:1px dashed #DFE2E7}
.pcd .pcd-s .pcd-price{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:7px;min-width:0}
.pcd .pcd-s .pcd-now{font-size:21px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.pcd .pcd-s .pcd-old{font-size:13px;color:#8A8F9A;text-decoration:line-through}
.pcd .pcd-s .pcd-go{flex:none;width:36px;height:36px;border-radius:50%;background:var(--pcd-ink);color:#fff;display:grid;place-items:center;transition:background .2s ease,color .2s ease}
.pcd .pcd-s .pcd-go svg{width:16px;height:16px;transition:transform .25s ease}
.pcd .pcd-s:hover .pcd-go svg{transform:rotate(-45deg)}
.pcd .pcd-s:hover .pcd-go{background:var(--pcd-amber);color:var(--pcd-ink)}
