/* ===========================================================
   Choco Pop v2 — Product detail page (PDP)
   Templates: products/product_detail.html + components/
     desktop_product_detail, mobile_product_detail, description,
     pdp_discount_countdown, pdp_delivery_cities_desktop
   Recommendation strips reuse the home showcase styles (choco-home.css,
   scoped with :is(.main-home,.cp-pdp)).
   Behaviour: js/choco-motion.js (initPdp, initBlobGroups for the tabs);
   cart / variant / gallery / review scripts are untouched.
   =========================================================== */

main.cp-pdp{
  padding:8px 0 30px;
  background:
    radial-gradient(circle at 18% 22%, rgba(237,155,51,.09) 0 2.5px, transparent 3px) 0 0/120px 90px,
    radial-gradient(circle at 72% 64%, rgba(166,25,46,.06) 0 2.5px, transparent 3px) 0 0/150px 110px,
    linear-gradient(180deg,#FFFBF6,var(--cp-milk));
}
.cp-pdp-shell{background:transparent;}
.cp-pdp .dk-pdp-wrap{
  padding:6px 24px 10px;border-radius:36px;overflow:visible;
  background:radial-gradient(ellipse at 15% 0%, #fff, #FFF8EE 55%, #FFF2E1 100%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 10px 0 rgba(204,90,0,.12), 0 24px 40px rgba(79,44,29,.12), inset 0 3px 0 #fff;
}

/* breadcrumb as candy pills */
.cp-pdp .dk-pdp-breadcrumb{padding:14px 0 4px;}
.cp-pdp .dk-pdp-breadcrumb .dk-pdp-brand-link{display:inline-block;padding:3px 11px;border-radius:999px;background:#fff;border:1px solid var(--cp-line);font-weight:700;transition:transform .4s var(--cp-ease-jelly), color .2s;}
.cp-pdp .dk-pdp-breadcrumb .dk-pdp-brand-link:hover{transform:translateY(-2px);color:var(--clay-wine);}

/* ===================== gallery ===================== */
.cp-pdp .dk-pdp-gallery .dk-pdp-main-stage{
  position:relative;padding:1.4rem;border-radius:34px;border:1px solid rgba(255,255,255,.9);
  background:white;
  box-shadow:0 9px 0 rgba(204,90,0,.16), 0 20px 30px rgba(79,44,29,.14), inset 0 3px 0 #fff, inset 0 -8px 16px rgba(204,90,0,.08);
}
.cp-pdp .dk-pdp-gallery .dk-pdp-main-stage::after{ /* plate shadow under the product */
  content:"";position:absolute;left:28%;right:28%;bottom:9%;height:14px;border-radius:50%;pointer-events:none;
  background:radial-gradient(ellipse, rgba(79,44,29,.22), rgba(79,44,29,0) 70%);
  animation:cpPlateShadow 4.5s ease-in-out infinite;
}
.cp-pdp .dk-pdp-main-stage .dk-pdp-main-image{
  position:relative;z-index:1;
  animation:cpProductFloat 4.5s ease-in-out infinite;transition:transform .35s ease, opacity .2s;
}
.cp-pdp .dk-pdp-main-stage.is-zoom .dk-pdp-main-image{animation-play-state:paused;transform:scale(1.75);cursor:zoom-in;}
@keyframes cpProductFloat{0%,100%{translate:0 0;rotate:-1.5deg;}50%{translate:0 -10px;rotate:1.5deg;}}
@keyframes cpPlateShadow{0%,100%{transform:scaleX(1);opacity:1;}50%{transform:scaleX(.8);opacity:.6;}}
.cp-swap{animation:cpSwapIn .55s var(--cp-ease-jelly) !important;}
@keyframes cpSwapIn{from{opacity:.2;scale:.82;rotate:-8deg;}to{opacity:1;scale:1;rotate:0deg;}}

.cp-gal-btn{width:46px !important;height:46px !important;}
.cp-gal-btn img{width:22px !important;height:22px !important;transition:transform .5s var(--cp-ease-jelly);}
.cp-gal-btn:hover img{transform:scale(1.18) rotate(-10deg);}
.cp-heart-btn.is-on{background:radial-gradient(circle at 32% 28%, #fff, var(--clay-blush-light) 60%, var(--clay-blush) 100%) !important;box-shadow:0 5px 0 rgba(130,17,35,.35), inset 0 2px 0 rgba(255,255,255,.7) !important;}
.cp-heart-btn.is-on img{animation:cpHeartBeat 1.6s ease-in-out infinite;}

.cp-thumb{border-radius:16px !important;background:#fff;border-width:2px !important;box-shadow:0 3px 0 rgba(237,155,51,.18);transition:transform .45s var(--cp-ease-jelly), border-color .2s ease, box-shadow .2s;}
.cp-thumb:hover{transform:translateY(-3px) rotate(-3deg);}
.cp-thumb.border-primary{border-color:var(--clay-gold) !important;box-shadow:0 4px 0 var(--clay-gold-deep);transform:translateY(-2px);}

/* ===================== title / variant / specs ===================== */
.cp-pdp-title{font-size:1.45rem !important;font-weight:900 !important;line-height:1.7 !important;color:var(--clay-cocoa-dark) !important;}
.cp-pdp .dk-pdp-wrap .cp-pdp-title{animation:cpRiseIn .7s var(--cp-ease-out) both .1s;}
.cp-variant{padding:14px;border-radius:24px;background:#fff;border:1px solid var(--cp-line);box-shadow:0 4px 0 rgba(237,155,51,.16);}
.cp-variant__label{display:block;margin-bottom:8px;font-size:.78rem;font-weight:800;color:var(--clay-cocoa-light);}
.cp-select{
  width:100%;max-width:100%;padding:11px 16px;border-radius:999px;font-size:.88rem;font-weight:700;color:var(--clay-cocoa-dark);
  background:linear-gradient(180deg,#fff,var(--cp-milk));border:2px solid rgba(246,200,122,.6);outline:none;cursor:pointer;
  transition:border-color .2s ease, box-shadow .25s ease;
}
.cp-select:focus{border-color:var(--clay-gold);box-shadow:0 0 0 4px rgba(237,155,51,.18);}
.cp-pdp .dk-pdp-spec-card{
  border-radius:18px !important;background:#fff !important;border:1px solid var(--cp-line) !important;
  box-shadow:0 3px 0 rgba(237,155,51,.16) !important;transition:transform .45s var(--cp-ease-jelly);
}
.cp-pdp .dk-pdp-spec-card:hover{transform:translateY(-3px) rotate(-1deg);}
.cp-pdp .dk-pdp-specs-grid > .dk-pdp-spec-card{animation:cpRiseIn .5s var(--cp-ease-out) both;}
.cp-pdp .dk-pdp-specs-grid > .dk-pdp-spec-card:nth-child(2){animation-delay:.05s;}
.cp-pdp .dk-pdp-specs-grid > .dk-pdp-spec-card:nth-child(3){animation-delay:.1s;}
.cp-pdp .dk-pdp-specs-grid > .dk-pdp-spec-card:nth-child(4){animation-delay:.15s;}
.cp-pdp .dk-pdp-specs-grid > .dk-pdp-spec-card:nth-child(n+5){animation-delay:.2s;}
.cp-pill-link{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;font-size:.8rem;font-weight:800;color:var(--clay-wine);background:#fff;border:1px solid var(--cp-line);box-shadow:0 3px 0 rgba(237,155,51,.2);transition:transform .4s var(--cp-ease-jelly);}
.cp-pill-link:hover{transform:translateY(-2px);}
.cp-pill-link img{transition:transform .4s var(--cp-ease-jelly);}
.cp-pill-link:hover img{transform:translateX(-4px);}

/* ===================== buy box ===================== */
.cp-pdp .dk-pdp-buy-box{
  position:relative;overflow:hidden;padding:20px 20px 18px !important;border-radius:30px !important;
  background:radial-gradient(ellipse at 20% 0%, #fff, #FFFAF3 55%, #FFF3E2 100%) !important;
  border:1px solid rgba(255,255,255,.9) !important;
  box-shadow:0 8px 0 rgba(130,17,35,.14), 0 20px 32px rgba(79,44,29,.14), inset 0 3px 0 #fff !important;
}
.cp-pdp .dk-pdp-buy-box::before{ /* candy ribbon on top */
  content:"";position:absolute;top:0;left:0;right:0;height:7px;
  background:repeating-linear-gradient(-45deg,var(--clay-wine) 0 10px,var(--clay-gold) 10px 20px);
  background-size:28px 100%;animation:cpCandyRun 1.2s linear infinite;
}
.cp-pdp .dk-pdp-price-current{font-size:1.7rem !important;font-weight:900 !important;color:var(--clay-wine-dark) !important;}
.cp-pdp .dk-pdp-price-old{color:var(--clay-cocoa-pale) !important;text-decoration-color:var(--clay-wine) !important;}
.cp-pdp .dk-pdp-discount-badge{
  border:1.5px dashed rgba(255,255,255,.6);transform:rotate(-6deg);animation:cpStickerWiggle 3s ease-in-out infinite;
}
.cp-pdp .dk-pdp-stock-ok,.cp-pdp .dk-pdp-stock-low{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;font-weight:800;font-size:.78rem;}
.cp-pdp .dk-pdp-stock-ok{color:#2f8a43;background:#E9F6EC;}
.cp-pdp .dk-pdp-stock-low{color:var(--clay-gold-deep);background:#FFF0DA;}
.cp-pdp .dk-pdp-stock-ok::before,.cp-pdp .dk-pdp-stock-low::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;animation:cpLivePulse 1.6s ease-out infinite;}
@keyframes cpLivePulse{0%{box-shadow:0 0 0 0 currentColor;}70%{box-shadow:0 0 0 7px transparent;}100%{box-shadow:0 0 0 0 transparent;}}

.cp-pdp .dk-pdp-btn-add{position:relative;overflow:hidden;padding:.95rem 1rem;font-size:1rem;box-shadow:0 6px 0 var(--clay-wine-deep), 0 12px 20px rgba(130,17,35,.25), inset 0 1px 0 rgba(255,255,255,.25);transition:transform .4s var(--cp-ease-jelly), box-shadow .15s ease, filter .2s ease;}
.cp-pdp .dk-pdp-btn-add::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;pointer-events:none;
  background:linear-gradient(115deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);
  animation:cpShineSweep 3.6s ease-in-out infinite;
}
@keyframes cpShineSweep{0%,60%{left:-60%;}85%,100%{left:130%;}}
.cp-pdp .dk-pdp-btn-add:hover{transform:translateY(-3px) scale(1.01);}
.cp-pdp .dk-pdp-btn-add:active{transform:translateY(5px) scale(.98,1.02);box-shadow:0 1px 0 var(--clay-wine-deep);}
.cp-pdp a.dk-pdp-btn-add[href*="cart"]{background:linear-gradient(180deg,var(--clay-amber),var(--clay-gold-deep));box-shadow:0 6px 0 #a04700, 0 12px 20px rgba(204,90,0,.25);}

.cp-stepper{height:46px !important;width:128px !important;border-radius:999px !important;border:2px solid rgba(246,200,122,.7) !important;background:#fff !important;box-shadow:0 4px 0 rgba(237,155,51,.22), inset 0 2px 4px rgba(79,44,29,.06) !important;}
.cp-stepper button{transition:transform .35s var(--cp-ease-jelly), background .2s;}
.cp-stepper button:active{transform:scale(.8);}
.cp-stepper input{font-size:1rem !important;font-weight:900 !important;color:var(--clay-wine-dark);}

.cp-pdp .dk-pdp-guarantee{font-size:.78rem;font-weight:700;color:var(--clay-cocoa);}
.cp-pdp .dk-pdp-guarantee img{width:26px !important;height:26px !important;padding:4px;border-radius:9px;background:radial-gradient(circle at 32% 28%, #fff, var(--clay-cream) 85%);box-shadow:0 2px 0 rgba(237,155,51,.25);}

/* ===================== mobile buy row ===================== */
.cp-mbuy{padding:14px;border-radius:24px;background:#fff;border:1px solid var(--cp-line);box-shadow:0 5px 0 rgba(130,17,35,.12), 0 10px 18px rgba(79,44,29,.1);}
.cp-mbuy .dk-pdp-btn-add{width:auto;padding:.8rem 1.2rem;}
#mobile-increase-btn,#mobile-decrease-btn{width:42px !important;height:42px !important;border:0 !important;background:radial-gradient(circle at 32% 28%, #fff, #FFF3DF 60%, var(--clay-cream-gold)) !important;box-shadow:0 4px 0 rgba(166,106,41,.3), inset 0 2px 0 #fff;transition:transform .35s var(--cp-ease-jelly);}
#mobile-increase-btn:active,#mobile-decrease-btn:active{transform:scale(.85);}
#mobile-increase-btn[disabled]{opacity:.45;}
.cp-pdp .dk-pdp-mobile-gallery-stage{border-radius:30px;background:white;box-shadow:0 8px 0 rgba(204,90,0,.14), 0 16px 26px rgba(79,44,29,.12), inset 0 3px 0 #fff;}
.cp-pdp .swiper-slide-active .dk-pdp-mobile-main-image{animation:cpProductFloat 4.5s ease-in-out infinite;}
.cp-mspecs{padding:16px;border-radius:26px;background:#fff;border:1px solid var(--cp-line);box-shadow:0 5px 0 rgba(237,155,51,.16);}

/* ===================== description / specs / reviews ===================== */
.cp-desc{padding:8px 0 10px;border-radius:36px;background:radial-gradient(ellipse at 15% 0%, #fff, #FFF8EE 55%, #FFF2E1 100%);border:1px solid rgba(255,255,255,.9);box-shadow:0 10px 0 rgba(204,90,0,.1), 0 22px 36px rgba(79,44,29,.1), inset 0 3px 0 #fff;}
.cp-tabs{position:relative;margin:6px 10px 0;padding:6px !important;gap:6px !important;border:0 !important;border-radius:999px;background:var(--cp-milk-2);box-shadow:inset 0 2px 4px rgba(79,44,29,.08);width:max-content;max-width:calc(100% - 20px);}
.cp-tabs a{position:relative;z-index:1;margin:0 !important;padding:8px 18px !important;border:0 !important;border-radius:999px;font-weight:800 !important;color:var(--clay-cocoa) !important;transition:color .25s ease;}
.cp-tabs a.active,.cp-tabs a.is-active{color:#fff !important;}
.cp-tabs .cp-blob{height:38px;margin-top:-19px;}
.cp-pdp .dk-pdp-section-title{position:relative;border-bottom:0 !important;padding-bottom:12px !important;font-size:1.1rem;font-weight:900;}
.cp-pdp .dk-pdp-section-title::after{content:"";position:absolute;right:0;bottom:0;width:56px;height:6px;border-radius:6px;background:repeating-linear-gradient(-45deg,var(--clay-wine) 0 7px,var(--clay-gold) 7px 14px);}
.cp-pdp .dk-pdp-specs-table{border-radius:18px;overflow:hidden;}
.cp-pdp #specsContainer > div{border-radius:22px !important;border-color:var(--cp-line) !important;background:#fff;box-shadow:0 4px 0 rgba(237,155,51,.14);}
.cp-pdp .dk-pdp-specs-table tr{transition:background .2s ease;}
.cp-pdp .dk-pdp-specs-table tr:hover{background:#FFF7EC;}

.cp-rating-card{border-radius:26px;background:#fff;border:1px solid var(--cp-line);box-shadow:0 5px 0 rgba(237,155,51,.18), 0 12px 20px rgba(79,44,29,.08);}
.cp-rating-card .text-yellow-400{color:var(--clay-gold) !important;}
.cp-pdp .dk-pdp-rating-bar{background:repeating-linear-gradient(-45deg,var(--clay-gold) 0 6px,var(--clay-cream-gold) 6px 12px) !important;}
.cp-pdp .dk-pdp-btn-review{border-radius:999px !important;font-weight:800;box-shadow:0 5px 0 var(--clay-wine-deep);transition:transform .4s var(--cp-ease-jelly);}
.cp-pdp .dk-pdp-btn-review:hover{transform:translateY(-2px);}
.cp-review-list{border-radius:26px;overflow:hidden;background:#fff;border:1px solid var(--cp-line);box-shadow:0 5px 0 rgba(237,155,51,.14);}
.cp-review-list > li{animation:cpRiseIn .45s var(--cp-ease-out) both;}
.cp-empty-reviews{display:flex;flex-direction:column;align-items:center;gap:6px;padding:34px 16px;border-radius:26px;text-align:center;color:var(--clay-cocoa-light);background:#fff;border:2px dashed rgba(237,155,51,.3);}
.cp-empty-reviews img{width:56px;height:56px;object-fit:contain;animation:cpFloat 3s ease-in-out infinite;margin-bottom:6px;}

/* ===================== recommendation strips (PDP layout: header bar + cream tray) ===================== */
:is(.cp-pdp,.cp-cart) .dk-pdp-recommendations-wrap .dk-incredible-box{
  padding:0;border-radius:34px;
  background:radial-gradient(ellipse at 20% 0%, #fff, #FFF8EE 55%, #FFF0DC 100%);
  box-shadow:0 9px 0 rgba(204,90,0,.14), 0 20px 32px rgba(79,44,29,.14), inset 0 3px 0 #fff;
}
:is(.cp-pdp,.cp-cart) .dk-pdp-recommendations-wrap .dk-incredible-box::before{display:none;}
:is(.cp-pdp,.cp-cart) .dk-pdp-recommendations-wrap .dk-incredible-slider-wrap{background:transparent;}
:is(.cp-pdp,.cp-cart) .dk-pdp-recommendations-wrap .dk-incredible-panel{
  padding:14px 20px;
  background:
    radial-gradient(circle at 15% 30%, rgba(255,255,255,.14) 0 3px, transparent 3.5px) 0 0/60px 50px,
    linear-gradient(135deg,var(--clay-wine),var(--clay-wine-dark));
}
:is(.cp-pdp,.cp-cart) .cp-rec--caramel .dk-incredible-panel{
  background:
    radial-gradient(circle at 15% 30%, rgba(255,255,255,.18) 0 3px, transparent 3.5px) 0 0/60px 50px,
    linear-gradient(135deg,var(--clay-gold),var(--clay-gold-deep));
}
:is(.cp-pdp,.cp-cart) .cp-rec--cocoa .dk-incredible-panel{
  background:
    radial-gradient(circle at 15% 30%, rgba(246,200,122,.14) 0 3px, transparent 3.5px) 0 0/60px 50px,
    linear-gradient(135deg,#6b3d28,var(--clay-cocoa-dark));
}
:is(.cp-pdp,.cp-cart) .dk-pdp-recommendations-wrap .dk-incredible-panel-title{font-weight:900;font-size:1rem;text-shadow:0 2px 0 rgba(0,0,0,.2);}
:is(.cp-pdp,.cp-cart) .dk-pdp-recommendations-wrap .dk-incredible-card{box-shadow:0 5px 0 rgba(204,90,0,.16), 0 10px 16px rgba(79,44,29,.1), inset 0 2px 0 #fff;}
:is(.cp-pdp,.cp-cart) .dk-pdp-recommendations-wrap .dk-incredible-card-more{color:var(--clay-wine);border:2px dashed rgba(166,25,46,.3);background:rgba(255,255,255,.6);}
:is(.cp-pdp,.cp-cart) .dk-pdp-recommendations-wrap .dk-incredible-card-more-link:hover .dk-incredible-card-more{color:var(--clay-wine-dark);border-color:var(--clay-wine);background:#fff;}

/* ===================== "added to cart" popup (desktop) / drawer (mobile) ===================== */
#pdp-desktop-cart-upsell{border-radius:30px !important;box-shadow:0 10px 0 rgba(204,90,0,.16), 0 26px 44px rgba(38,19,11,.28), inset 0 3px 0 #fff !important;}
#pdp-desktop-cart-upsell:not(.hidden){animation:cpUpsellIn .7s var(--cp-ease-jelly) both;}
#pdp-desktop-cart-upsell:not(.hidden) #pdp-desktop-cart-upsell-desc ~ *,#pdp-desktop-cart-upsell:not(.hidden) img[src*="43_check"]{animation:cpPopInT .6s var(--cp-ease-jelly) both .25s;}
@keyframes cpUpsellIn{from{opacity:0;translate:-30px 60px;scale:.7;rotate:6deg;}to{opacity:1;translate:0 0;scale:1;rotate:0deg;}}
#mobile-upsell-drawer-backdrop{background:rgba(38,19,11,.4) !important;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}
#mobile-upsell-drawer-panel{border-radius:30px 30px 0 0 !important;transition-timing-function:cubic-bezier(.32,1.12,.5,1) !important;transition-duration:.5s !important;}

/* ===================== phones ===================== */
@media (max-width:1023.98px){
  main.cp-pdp{padding-top:4px;}
  .cp-pdp-title{font-size:1.15rem !important;}
  .cp-tabs{width:auto;}
  .cp-tabs a{padding:8px 12px !important;font-size:.8rem !important;}
}

@media (prefers-reduced-motion: reduce){
  .cp-pdp .dk-pdp-main-stage .dk-pdp-main-image,.cp-pdp .dk-pdp-gallery .dk-pdp-main-stage::after,.cp-swap,.cp-heart-btn.is-on img,
  .cp-pdp .dk-pdp-buy-box::before,.cp-pdp .dk-pdp-discount-badge,.cp-pdp .dk-pdp-btn-add::after,.cp-pdp .dk-pdp-stock-ok::before,
  .cp-pdp .dk-pdp-stock-low::before,.cp-pdp .swiper-slide-active .dk-pdp-mobile-main-image,.cp-review-list > li,.cp-empty-reviews img,
  .cp-pdp .dk-pdp-specs-grid > .dk-pdp-spec-card,.cp-pdp .dk-pdp-wrap .cp-pdp-title{animation:none !important;}
}