/* ══════════════════════════════════════════
   ویجت محصولات — داروخانه دکتر فاطمه کریمی
   ══════════════════════════════════════════ */
.dkpp-root{
  --p:#A24FB5; --pd:#7C3691; --pl:#C77FD6;
  --pk:#F6CADC; --pkl:#FCEAF2; --pkx:#FDF4F8;
  --tx:#2B2432; --gr:#7B7385; --ln:#EFE7F2;
  --cr:20px; --arch:130px; --gap:18px; --cols:4;
  font-family:'YekanBakh','Yekan Bakh',Tahoma,sans-serif;
  direction:rtl;position:relative;overflow:hidden;
}
.dkpp-root *{box-sizing:border-box;}
.dkpp-root a{text-decoration:none;color:inherit;}
.dkpp-i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;display:block;flex:none;}
.dkpp-wrap{position:relative;z-index:2;max-width:1240px;margin-inline:auto;padding-inline:12px;}

/* پس‌زمینه */
.dkpp-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.dkpp-bg::before{content:'';position:absolute;inset:0;
  background:
    radial-gradient(620px 300px at 92% -6%,rgba(246,202,220,.5),transparent 65%),
    radial-gradient(560px 280px at 6% 106%,rgba(199,127,214,.2),transparent 65%);}

/* ═══ سربرگ ═══ */
.dkpp-head{position:relative;display:flex;align-items:center;
  justify-content:space-between;gap:24px;
  padding:24px 26px 22px;margin-bottom:0;
  border-radius:26px 26px 0 0;
  background:linear-gradient(170deg,#fff 0%,var(--pkx) 100%);
  border:1.5px solid var(--ln);border-bottom:0;}

/* نوار رنگی بالای سربرگ */
.dkpp-head::before{content:'';position:absolute;top:0;right:26px;left:26px;
  height:4px;border-radius:0 0 4px 4px;
  background:linear-gradient(90deg,var(--pd),var(--p) 45%,var(--pl) 75%,var(--pk));}

/* خط جداکننده پایین */
.dkpp-head::after{content:'';position:absolute;bottom:0;right:26px;left:26px;
  height:1px;
  background:repeating-linear-gradient(90deg,
    var(--ln) 0 8px,transparent 8px 15px);}

/* بدنه کارت‌ها */
.dkpp-body-wrap{position:relative;padding:22px 26px 24px;
  border-radius:0 0 26px 26px;
  background:linear-gradient(180deg,var(--pkx) 0%,#fff 60%);
  border:1.5px solid var(--ln);border-top:0;}
.dkpp-eyebrow{display:inline-flex;align-items:center;gap:8px;
  padding:6px 15px;border-radius:999px;background:#fff;border:1px solid var(--ln);
  box-shadow:0 3px 12px rgba(124,54,145,.07);
  font-size:12px;font-weight:700;color:var(--pd);margin-bottom:13px;}
.dkpp-eb-dot{width:7px;height:7px;border-radius:50%;flex:none;background:var(--p);
  box-shadow:0 0 0 0 rgba(162,79,181,.6);animation:dkppBeat 2.2s infinite;}
@keyframes dkppBeat{70%{box-shadow:0 0 0 9px rgba(162,79,181,0);}100%{box-shadow:0 0 0 0 rgba(162,79,181,0);}}
.dkpp-title{margin:0;font-size:33px;font-weight:400;color:var(--tx);line-height:1.35;}
.dkpp-title b{font-weight:800;position:relative;
  background:linear-gradient(100deg,var(--pd),var(--p) 55%,var(--pl));
  -webkit-background-clip:text;background-clip:text;color:transparent;}
.dkpp-title b::after{content:'';position:absolute;right:0;left:0;bottom:2px;height:9px;
  border-radius:9px;background:var(--pk);z-index:-1;opacity:.85;}
.dkpp-sub{margin:14px 0 0;font-size:13.5px;color:var(--gr);line-height:1.8;}

.dkpp-head-act{display:flex;align-items:center;gap:10px;flex:none;}
/* ── دکمه‌های شناور روی کارت‌ها ── */
.dkpp-navs{display:contents;}

.dkpp-nav{position:absolute;top:50%;z-index:9;
  width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  border:1.5px solid rgba(239,231,242,.8);border-radius:50%;
  background:rgba(255,255,255,.55);color:var(--pd);font-size:20px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 6px 18px -8px rgba(124,54,145,.4);
  opacity:.42;transform:translateY(-50%) scale(.94);
  transition:opacity .3s,transform .3s cubic-bezier(.34,1.4,.64,1),
             background .3s,color .3s,border-color .3s,box-shadow .3s;}

.dkpp-prev{right:-6px;}
.dkpp-next{left:-6px;}

.dkpp-body-wrap:hover .dkpp-nav:not(:disabled){opacity:.92;
  transform:translateY(-50%) scale(1);}

.dkpp-nav:hover:not(:disabled){opacity:1;color:#fff;
  background:linear-gradient(135deg,var(--pd),var(--p));
  border-color:transparent;
  transform:translateY(-50%) scale(1.1);
  box-shadow:0 12px 26px -8px rgba(162,79,181,.85);}

.dkpp-nav:disabled{opacity:.22;pointer-events:none;
  transform:translateY(-50%) scale(.9);}
.dkpp-body-wrap:hover .dkpp-nav:disabled{opacity:.3;
  transform:translateY(-50%) scale(.9);}
.dkpp-all{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;
  border-radius:999px;font-size:13.5px;font-weight:700;color:var(--pd);
  background:#fff;border:1.5px solid var(--ln);transition:.28s cubic-bezier(.34,1.4,.64,1);}
.dkpp-all .dkpp-i{font-size:16px;transition:transform .28s;}
.dkpp-all:hover{background:var(--p);border-color:var(--p);color:#fff;
  box-shadow:0 10px 24px -8px rgba(162,79,181,.65);}
.dkpp-all:hover .dkpp-i{transform:translateX(-4px);}

/* ═══ شبکه / اسلایدر ═══ */
.dkpp.is-grid{display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gap);}
.dkpp.is-slider{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x proximity;
  scroll-behavior:smooth;padding-block:2px 6px;
  scrollbar-width:none;-ms-overflow-style:none;}
.dkpp.is-slider::-webkit-scrollbar{display:none;}
.dkpp.is-slider .dkpp-card{
  flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  scroll-snap-align:start;}

/* نوار پیشرفت */
.dkpp-bar{height:4px;border-radius:99px;background:var(--pkl);
  margin-top:16px;overflow:hidden;}
.dkpp-bar-in{display:block;height:100%;width:30%;border-radius:99px;
  background:linear-gradient(90deg,var(--pd),var(--pl));
  transition:transform .18s linear,width .3s;transform-origin:right;}

/* ═══ کارت ═══ */
.dkpp-card{position:relative;background:#fff;border:1.5px solid var(--ln);
  border-radius:var(--cr);padding:10px 10px 14px;display:flex;flex-direction:column;
  opacity:0;transform:translateY(22px);
  transition:transform .4s cubic-bezier(.34,1.35,.64,1),
             box-shadow .4s ease, border-color .3s ease;
  box-shadow:0 3px 12px rgba(124,54,145,.05);}
.dkpp.is-in .dkpp-card{animation:dkppRise .6s cubic-bezier(.22,1,.36,1) forwards;
  animation-delay:var(--d);}
@keyframes dkppRise{to{opacity:1;transform:translateY(0);}}
.dkpp-card:hover{transform:translateY(-8px);border-color:transparent;
  box-shadow:0 24px 44px -18px rgba(124,54,145,.5);}

/* ── طاق تصویر ── */
.dkpp-media{position:relative;overflow:hidden;
  border-radius:calc(var(--cr) - 4px);
  background:linear-gradient(170deg,#fff 0%,var(--pkx) 55%,var(--pkl) 100%);
  aspect-ratio:1/1;display:grid;place-items:center;
  transition:background .5s ease;}
.dkpp-card:hover .dkpp-media{
  background:linear-gradient(170deg,var(--pl) 0%,var(--p) 55%,var(--pd) 100%);}

/* حلقه چین‌دار */
.dkpp-media::before{content:'';position:absolute;z-index:1;inset:8px;
  border-radius:calc(var(--cr) - 8px);pointer-events:none;
  border:1.5px dashed rgba(162,79,181,.2);transition:border-color .45s;}
.dkpp-card:hover .dkpp-media::before{border-color:rgba(255,255,255,.45);}
.dkpp-media::after{display:none;}

/* براقی */
.dkpp-shine{position:absolute;inset:0;z-index:4;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);
  transform:translateX(-130%);}
.dkpp-card:hover .dkpp-shine{transform:translateX(130%);transition:transform .85s ease;}

/* برچسب تخفیف */
.dkpp-off{position:absolute;top:14px;left:14px;z-index:6;
  display:flex;flex-direction:column;align-items:center;line-height:1;
  padding:8px 11px;border-radius:12px;color:#fff;
  background:linear-gradient(140deg,#E0559B,#B4589A);
  box-shadow:0 6px 14px -4px rgba(180,88,154,.6);
  transform:rotate(-6deg);transition:transform .35s;}
.dkpp-card:hover .dkpp-off{transform:rotate(0) scale(1.06);}
.dkpp-off b{font-size:14px;font-weight:800;}
.dkpp-off i{font-style:normal;font-size:9px;opacity:.85;margin-top:2px;}

.dkpp-oos{position:absolute;top:14px;right:14px;z-index:6;
  padding:6px 12px;border-radius:999px;font-size:11px;font-weight:700;
  background:rgba(43,36,50,.82);color:#fff;}
.dkpp-card.is-oos .dkpp-thumb img{filter:grayscale(1);opacity:.65;}

/* ریل آیکون */
.dkpp-rail{position:absolute;top:14px;right:14px;z-index:7;
  display:flex;flex-direction:column;gap:8px;}
.dkpp-card.is-oos .dkpp-rail{top:52px;}
.dkpp-rail-btn,.dkpp-wish-plug a{
  width:36px;height:36px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  border:0;cursor:pointer;line-height:0;
  border-radius:12px;background:rgba(255,255,255,.94);color:var(--pd);font-size:18px;
  box-shadow:0 4px 12px rgba(124,54,145,.18);
  opacity:0;transform:translateX(14px);
  transition:.3s cubic-bezier(.34,1.4,.64,1);text-decoration:none;}
.dkpp-rail-btn .dkpp-i,.dkpp-wish-plug a .dkpp-i{
  width:19px;height:19px;display:block;}
.dkpp-rail-btn:nth-child(2){transition-delay:.06s;}
.dkpp-card:hover .dkpp-rail-btn,
.dkpp-card:hover .dkpp-wish-plug a{opacity:1;transform:none;}
.dkpp-rail-btn:hover,.dkpp-wish-plug a:hover{background:#fff;color:#E0559B;transform:scale(1.1);}
.dkpp-wish-local.is-on{color:#E0559B;}
.dkpp-wish-local.is-on .dkpp-i{fill:#E0559B;}
.dkpp-wish-plug{display:block;}
.dkpp-wish-plug .tinvwl-icon-heart,
.dkpp-wish-plug .yith-wcwl-add-button{margin:0;}

/* ── بدنه ── */
.dkpp-body{display:flex;flex-direction:column;gap:7px;padding:14px 6px 0;flex:1;}
.dkpp-cat{font-size:10.5px;font-weight:700;color:var(--p);
  letter-spacing:.2px;opacity:.85;}
.dkpp-name{margin:0;font-size:13.5px;font-weight:700;line-height:1.7;min-height:2.9em;}
.dkpp-name a{color:var(--tx);transition:color .2s;
  text-decoration:none!important;border:0!important;box-shadow:none!important;
  background:none!important;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.dkpp-name a:hover{color:var(--p);}

.dkpp-rate{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--gr);}
.dkpp-rate.is-empty{opacity:.5;}
.dkpp-stars{position:relative;display:inline-block;font-size:13px;
  letter-spacing:1.5px;line-height:1;direction:ltr;}
.dkpp-stars-b{color:var(--ln);}
.dkpp-stars-f{position:absolute;inset:0;color:#F0A93C;overflow:hidden;
  width:var(--r);white-space:nowrap;}
.dkpp-rate em{font-style:normal;}

.dkpp-foot{margin-top:auto;padding-top:12px;display:flex;align-items:center;
  justify-content:space-between;gap:8px;flex-wrap:nowrap;
  border-top:1px dashed var(--ln);}
.dkpp-price{display:flex;flex-direction:column-reverse;gap:1px;line-height:1.4;
  flex:1;min-width:0;overflow:hidden;}
.dkpp-price ins{text-decoration:none;font-size:15px;font-weight:800;color:var(--pd);}
.dkpp-price del{font-size:11px;color:var(--gr);opacity:.7;}
.dkpp-price .woocommerce-Price-amount{font-size:14px;font-weight:800;
  color:var(--pd);white-space:nowrap;}
.dkpp-price del .woocommerce-Price-amount{font-size:11px;font-weight:400;color:var(--gr);}
.dkpp-price .woocommerce-Price-currencySymbol{font-size:.72em;font-weight:400;
  color:var(--gr);margin-right:2px;}

/* دکمه خرید */
.dkpp-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  flex:none;width:46px;height:40px;padding:0;border-radius:13px;cursor:pointer; 
  font-size:12.5px;font-weight:700;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(125deg,var(--pd),var(--p));
  box-shadow:0 5px 14px -4px rgba(162,79,181,.55);
  transition:.28s cubic-bezier(.34,1.4,.64,1);}
.dkpp-btn:hover{transform:translateY(-2px);
  box-shadow:0 9px 20px -4px rgba(162,79,181,.75);color:#fff;}
.dkpp-btn-ic{position:relative;width:17px;height:17px;flex:none;}
.dkpp-btn-ic .dkpp-i{position:absolute;inset:0;width:17px;height:17px;
  transition:.32s cubic-bezier(.34,1.5,.64,1);}
.dkpp-ic-ok{opacity:0;transform:scale(.4) rotate(-30deg);}
.dkpp-btn.added .dkpp-ic-cart{opacity:0;transform:scale(.4);}
.dkpp-btn.added .dkpp-ic-ok{opacity:1;transform:none;}
.dkpp-btn.added{background:linear-gradient(125deg,#2FA37E,#3EBE93);
  box-shadow:0 6px 16px -4px rgba(47,163,126,.6);}
.dkpp-btn.loading{pointer-events:none;opacity:.75;}
/* ═══ لودینگ کپسولی ═══ */
.dkpp-cap{position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:26px;height:11px;border-radius:99px;
  border:1.6px solid rgba(255,255,255,.85);
  background:rgba(255,255,255,.14);
  overflow:hidden;opacity:0;visibility:hidden;
  transition:opacity .2s;}
.dkpp-cap::after{content:'';position:absolute;top:0;bottom:0;right:50%;
  width:1.6px;background:rgba(255,255,255,.7);}
.dkpp-cap-fill{position:absolute;top:0;bottom:0;right:0;width:0;
  background:#fff;border-radius:99px;
  animation:dkppCapFill 1.1s cubic-bezier(.65,0,.35,1) infinite;}
@keyframes dkppCapFill{
  0%{width:0;opacity:1;}
  55%{width:100%;opacity:1;}
  80%{width:100%;opacity:1;}
  100%{width:100%;opacity:0;}}

.dkpp-btn.loading .dkpp-cap{opacity:1;visibility:visible;}
.dkpp-btn.loading .dkpp-i{opacity:0;}
.dkpp-btn.loading{pointer-events:none;}
.dkpp-btn .added_to_cart{display:none!important;}

/* ══════════ ریسپانسیو ══════════ */
@media (max-width:1024px){
  .dkpp-title{font-size:28px;}
  .dkpp-head{padding:20px 20px 18px;}
  .dkpp-head::before,.dkpp-head::after{right:20px;left:20px;}
  .dkpp-body-wrap{padding:18px 20px 20px;}
}
@media (max-width:880px){
  .dkpp-head{flex-direction:column;align-items:flex-start;gap:16px;}
  .dkpp-head-act{width:100%;justify-content:space-between;}
}
@media (max-width:767px){
  .dkpp-wrap{padding-inline:4px;}
  .dkpp-title{font-size:18px;}
  .dkpp-sub{font-size:12px;margin-top:8px;}
  .dkpp-head{padding:16px 15px 14px;border-radius:20px 20px 0 0;}
  .dkpp-head::before,.dkpp-head::after{right:15px;left:15px;}
  .dkpp-body-wrap{padding:15px;border-radius:0 0 20px 20px;}
  .dkpp.is-slider{margin-inline:-15px;padding-inline:15px;}
  .dkpp-card{padding:8px 8px 12px;}
  .dkpp-body{padding:11px 4px 0;gap:5px;}
  .dkpp-name{font-size:12px;line-height:1.6;}
  .dkpp-foot{gap:6px;padding-top:10px;}
  .dkpp-btn{width:40px;height:36px;border-radius:11px;}
  .dkpp-btn .dkpp-btn-ic{width:23px;height:20px;}
  .dkpp-btn .dkpp-btn-ic .dkpp-i{width:23px;height:20px;}
  .dkpp-price .woocommerce-Price-amount{font-size:12.5px;}
  .dkpp-rail-btn,.dkpp-wish-plug a{opacity:1;transform:none;width:32px;height:32px;font-size:16px;}
  .dkpp-nav{display:none!important;}
  .dkpp-all{padding:10px 16px;font-size:12.5px;}
}
@media (prefers-reduced-motion:reduce){
  .dkpp-card{opacity:1;transform:none;animation:none!important;}
  .dkpp-root *{transition-duration:.01ms!important;}
}
/* ── تصویر محصول ── */
.dkpp-thumb{position:relative;z-index:4;
  width:calc(100% - 30px);height:calc(100% - 30px);
  display:grid;place-items:center;padding:10px;
  border-radius:calc(var(--cr) - 12px);overflow:hidden;background:#fff;
  box-shadow:0 8px 22px -12px rgba(124,54,145,.35),
             inset 0 0 0 1px rgba(162,79,181,.07);}
.dkpp-thumb img{width:100%;height:100%;object-fit:contain;display:block;
  transition:transform .5s cubic-bezier(.34,1.45,.64,1);}
.dkpp-card:hover .dkpp-thumb img{transform:scale(1.06);}

/* نام محصول */
.dkpp-root .dkpp-name{
  font-size:13.5px!important;
  font-weight:700!important;
  line-height:1.7!important;
  margin:0!important;
  font-family:inherit!important;
}
@media (max-width:767px){
  .dkpp-root .dkpp-name{font-size:12px!important;}
}

/* دکمه فقط آیکون */
.dkpp-btn .dkpp-btn-tx{display:none;}
.dkpp-btn .dkpp-btn-ic{width:26px;height:22px;}
.dkpp-btn .dkpp-btn-ic .dkpp-i{width:26px;height:22px;stroke-width:1.7;}


/* ══════════════════════════════════════════
   دکمه سبد — آیکون همیشه سفید
   ══════════════════════════════════════════ */
.dkpp-root .dkpp-btn,
.dkpp-root a.dkpp-btn,
.dkpp-root a.dkpp-btn:link,
.dkpp-root a.dkpp-btn:visited,
.dkpp-root a.dkpp-btn:hover,
.dkpp-root a.dkpp-btn:focus,
.dkpp-root a.dkpp-btn:active{
  color:#fff!important;text-decoration:none!important;}

.dkpp-root .dkpp-btn .dkpp-i{
  stroke:#fff!important;fill:none!important;}

/* حالت افزوده‌شده — تیک سفید روی سبز */
.dkpp-root .dkpp-btn.added .dkpp-i{stroke:#fff!important;}

/* هاور: پس‌زمینه روشن‌تر می‌شود، آیکون سفید می‌ماند */
.dkpp-root a.dkpp-btn:hover{
  background:linear-gradient(125deg,var(--p),var(--pl))!important;
  box-shadow:0 10px 22px -4px rgba(162,79,181,.8);}