/* ===========================================================
   Choco Pop v2 — Product card (shop grid, favorites, wishlist)
   Templates: products/partials/product_card.html (+ product_card_body.html)
   Behaviour: js/choco-motion.js (initQuickAdd)
   =========================================================== */

.cp-pc{
  --t1:#FFF5F6;--t2:#FBDDE2;--ts:201,92,108;
  display:flex;flex-direction:column;height:100%;
  padding:14px 14px 16px;border-radius:30px;
  border:1px solid rgba(255,255,255,.85) !important;
  background:white;
  box-shadow:0 7px 0 rgba(var(--ts),.22), 0 16px 26px rgba(var(--ts),.16), inset 0 3px 0 #fff, inset 0 -6px 12px rgba(var(--ts),.1) !important;
  transition:transform .5s var(--cp-ease-jelly), box-shadow .3s ease !important;
}
/* a bag of different candies: tint rotates through the palette */
.cp-pc:nth-child(4n+2),.cp-tint-2 > .cp-pc{--t1:#FFF8EC;--t2:#FBE3BC;--ts:204,90,0;}
.cp-pc:nth-child(4n+3),.cp-tint-3 > .cp-pc{--t1:#FBF4EF;--t2:#EBD9CC;--ts:125,90,71;}
.cp-pc:nth-child(4n+4),.cp-tint-4 > .cp-pc{--t1:#FFF6EE;--t2:#F9D5B4;--ts:230,126,11;}

.cp-pc:hover{
  transform:translateY(-8px) rotate(-.6deg) !important;
  box-shadow:0 11px 0 rgba(var(--ts),.2), 0 26px 34px rgba(var(--ts),.22), inset 0 3px 0 #fff, inset 0 -6px 12px rgba(var(--ts),.1) !important;
}
.cp-pc:active{transform:translateY(-3px) scale(.985) !important;}

.cp-pc__row{display:flex;flex-direction:column;flex:1;min-height:0;}

/* media: product floats over a cream plate, its shadow squashes when it hops */
.cp-pc__media{position:relative;height:200px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;}
.cp-pc__plate{
  position:absolute;width:76%;aspect-ratio:1;max-height:92%;border-radius:50%;
  background:radial-gradient(circle at 34% 28%, #fff, rgba(255,255,255,.7) 45%, rgba(255,255,255,0) 72%);
  transition:transform .6s var(--cp-ease-jelly);
}
.cp-pc__img-link{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:100%;height:100%;}
.cp-pc__img{
  max-width:86%;max-height:92%;object-fit:contain;
  transition:transform .65s var(--cp-ease-jelly);
}
.cp-pc__shadow{
  position:absolute;bottom:4px;left:50%;width:46%;height:12px;margin-left:-23%;border-radius:50%;
  background:radial-gradient(ellipse, rgba(var(--ts),.35), rgba(var(--ts),0) 70%);
  transition:transform .65s var(--cp-ease-jelly), opacity .4s ease;
}
.cp-pc:hover .cp-pc__plate{transform:scale(1.1);}
.cp-pc:hover .cp-pc__img{transform:translateY(-12px) rotate(-8deg) scale(1.08);}
.cp-pc:hover .cp-pc__shadow{transform:scaleX(.7);opacity:.55;}

/* second gallery image swaps in on hover (cards with .has-alt; mouse/trackpad only) */
.cp-pc__img--alt{
  position:absolute;inset:0;margin:auto;opacity:0;pointer-events:none;
  transform:translateY(10px) rotate(10deg) scale(.82);
  transition:transform .65s var(--cp-ease-jelly), opacity .3s ease;
}
.cp-pc.has-alt .cp-pc__img:not(.cp-pc__img--alt){transition:transform .65s var(--cp-ease-jelly), opacity .3s ease;}
@media (hover:hover){
  .cp-pc.has-alt:hover .cp-pc__img:not(.cp-pc__img--alt){opacity:0;transform:translateY(-6px) rotate(-14deg) scale(.82);}
  .cp-pc.has-alt:hover .cp-pc__img--alt{opacity:1;transform:translateY(-12px) rotate(0) scale(1.06);transition-delay:.06s;}
}

/* same swap for the other product cards (home sliders, recommendation rows, best sellers,
   article embeds): .cp-hover-card is the hover target, .cp-hover-swap wraps the main <img>
   and the .cp-hover-swap__alt one (which repeats the main img's sizing classes) */
.cp-hover-swap{position:relative;}
.cp-hover-swap__alt{position:absolute;inset:0;margin:auto;opacity:0;pointer-events:none;}
.cp-hover-swap > img{transition:transform .6s var(--cp-ease-jelly), opacity .3s ease;}
@media (hover:hover){
  .cp-hover-card:hover .cp-hover-swap > img:not(.cp-hover-swap__alt){opacity:0;}
  .cp-hover-card:hover .cp-hover-swap__alt{opacity:1;transition-delay:.06s;}
}

/* touch preview (phones): holding a card plays its photos — js/choco-motion.js initTouchPreview
   puts .is-previewing on the card and .is-on on the photo that is up */
.cp-pc.is-previewing .cp-pc__img:not(.is-on),
.cp-hover-card.is-previewing .cp-hover-swap > img:not(.is-on){opacity:0;}
.cp-pc.is-previewing .cp-pc__img.is-on,
.cp-hover-card.is-previewing .cp-hover-swap > img.is-on{opacity:1;transform:none;}
/* hard cuts: a cross-fade layers two half-transparent photos (often on white) into a milky veil */
.cp-pc.is-previewing .cp-pc__img,
.cp-hover-card.is-previewing .cp-hover-swap > img{transition:none !important;}
@media (hover:none){
  /* the cursor glare on slider cards sticks after a touch and washes the photo out */
  .dk-incredible-card::after{display:none;}
  /* a long press plays the gallery, so no "save image / open link" callout (iOS) */
  .cp-pc.has-alt,.cp-hover-card{-webkit-touch-callout:none;}
  .cp-pc.has-alt img,.cp-hover-card img{-webkit-user-select:none;user-select:none;}
}

.cp-pc__sticker{
  position:absolute;top:14px;right:14px;z-index:3;padding:4px 10px;border-radius:999px;
  font-size:.78rem;font-weight:900;color:#fff;
  background:linear-gradient(180deg,var(--clay-wine),var(--clay-wine-dark));
  border:1.5px dashed rgba(255,255,255,.6);box-shadow:0 3px 0 var(--clay-wine-deep);
  transform:rotate(-8deg);animation:cpStickerWiggle 3s ease-in-out infinite;
}
@keyframes cpStickerWiggle{0%,100%{rotate:0deg;}25%{rotate:-6deg;}75%{rotate:6deg;}}

.cp-pc__body{display:flex;flex-direction:column;flex:1;min-width:0;gap:10px;}
.cp-pc__title{
  min-height:2.9em;font-size:.9rem;font-weight:800 !important;line-height:1.45;text-align:center;
  color:var(--clay-cocoa-dark) !important;transition:color .2s ease;
}
.cp-pc__title:hover{color:var(--clay-wine) !important;}

.cp-pc__foot{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;}
.cp-pc__prices{display:flex;flex-direction:column;align-items:flex-start;min-width:0;}
.cp-pc__old{font-size:.78rem;color:var(--clay-cocoa-pale);text-decoration-color:var(--clay-wine);}
.cp-pc__price{font-size:1.08rem;font-weight:900;color:var(--clay-wine-dark) !important;white-space:nowrap;}
.cp-pc__unit{font-size:.72rem;font-weight:600;color:var(--clay-cocoa-light);}

/* quick add: caramel candy button → spins while sending → wine with a check */
.cp-pc__add{
  position:relative;flex-shrink:0;width:50px;height:50px;border:0;border-radius:18px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 32% 26%, #FFE3B3, var(--clay-gold) 55%, var(--clay-gold-deep) 100%);
  box-shadow:0 5px 0 #a04700, 0 10px 16px rgba(204,90,0,.3), inset 0 2px 0 rgba(255,255,255,.55);
  transition:transform .45s var(--cp-ease-jelly), box-shadow .2s ease, background .3s ease;
}
.cp-pc__add img{position:absolute;object-fit:contain;transition:transform .45s var(--cp-ease-jelly), opacity .25s ease;}
.cp-pc__add-cart{width:28px;height:28px;}
.cp-pc__add-plus{width:15px;height:15px;top:-3px;left:-3px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));}
.cp-pc__add-ok{width:26px;height:26px;opacity:0;transform:scale(.3) rotate(-90deg);}
.cp-pc__add:hover{transform:translateY(-3px) rotate(-6deg);}
.cp-pc__add:hover .cp-pc__add-cart{transform:rotate(-10deg) scale(1.08);}
.cp-pc__add:hover .cp-pc__add-plus{transform:rotate(90deg) scale(1.15);}
.cp-pc__add:active{transform:translateY(3px) scale(.92,1.06);box-shadow:0 1px 0 #a04700, inset 0 2px 0 rgba(255,255,255,.55);}
.cp-pc__add.is-busy{pointer-events:none;}
.cp-pc__add.is-busy .cp-pc__add-cart{animation:cpCartRattle .5s ease-in-out infinite;}
.cp-pc__add.is-busy .cp-pc__add-plus{opacity:0;}
.cp-pc__add.is-added{background:radial-gradient(circle at 32% 26%, #F0A3AE, var(--clay-wine) 55%, var(--clay-wine-dark) 100%);box-shadow:0 5px 0 var(--clay-wine-deep), 0 10px 16px rgba(130,17,35,.3), inset 0 2px 0 rgba(255,255,255,.4);animation:cpJelly .6s ease;}
.cp-pc__add.is-added .cp-pc__add-cart,.cp-pc__add.is-added .cp-pc__add-plus{opacity:0;transform:scale(.4);}
.cp-pc__add.is-added .cp-pc__add-ok{opacity:1;transform:none;filter:brightness(0) invert(1);}
.cp-pc__add.is-error{animation:cpShakeX .45s ease;}
@keyframes cpCartRattle{0%,100%{transform:rotate(0);}25%{transform:rotate(-12deg) translateY(-2px);}75%{transform:rotate(12deg) translateY(-2px);}}
@keyframes cpShakeX{20%{transform:translateX(-7px);}40%{transform:translateX(6px);}60%{transform:translateX(-4px);}80%{transform:translateX(2px);}}

/* out of stock */
.cp-pc--out .cp-pc__img{filter:grayscale(.65) opacity(.75);}
.cp-pc__soldout{
  align-self:center;padding:3px 12px;border-radius:999px;font-size:.72rem;font-weight:800;color:#fff;
  background:linear-gradient(180deg,var(--clay-cocoa-light),var(--clay-cocoa));box-shadow:0 2px 0 var(--clay-cocoa-dark);
}
.cp-pc__notify{
  margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:10px 12px;border-radius:999px;
  font-size:.78rem;font-weight:800;color:var(--clay-cocoa);background:#fff;border:1px solid var(--cp-line);
  box-shadow:0 3px 0 rgba(237,155,51,.2);transition:transform .45s var(--cp-ease-jelly), background .2s ease, color .2s ease;
}
.cp-pc__notify img{width:20px;height:20px;object-fit:contain;}
.cp-pc__notify:hover{transform:translateY(-2px);background:var(--clay-cream);color:var(--clay-wine-dark);}
.cp-pc__notify:hover img{animation:cpBellRing .8s ease;}
.cp-pc__notify.is-done{opacity:.85;cursor:default;}
@keyframes cpBellRing{0%,100%{transform:rotate(0);}15%{transform:rotate(18deg);}30%{transform:rotate(-16deg);}45%{transform:rotate(12deg);}60%{transform:rotate(-8deg);}75%{transform:rotate(4deg);}}

/* cards rise in as they scroll into view — CSS-only, so AJAX-appended pages
   animate too. Uses `translate`/`scale` so it never fights the hover transform. */
@supports (animation-timeline: view()){
  .cp-pc{animation:cpCardRise linear both;animation-timeline:view();animation-range:entry 0% entry 55%;}
  @keyframes cpCardRise{from{opacity:0;translate:0 40px;scale:.92;}to{opacity:1;translate:0 0;scale:1;}}
}

/* ---------- phones: horizontal card ---------- */
@media (max-width:767.98px){
  .cp-pc{padding:10px;border-radius:24px;}
  .cp-pc__row{flex-direction:row;align-items:stretch;gap:10px;}
  .cp-pc__media{width:112px;height:112px;flex-shrink:0;margin-bottom:0;}
  .cp-pc__sticker{top:8px;right:8px;font-size:.7rem;padding:3px 8px;}
  .cp-pc__title{text-align:right;min-height:0;font-size:.84rem;}
  .cp-pc__add{width:44px;height:44px;border-radius:15px;}
  .cp-pc__add-cart{width:24px;height:24px;}
  .cp-pc__soldout{align-self:flex-start;}
  .cp-pc:hover{transform:translateY(-3px) !important;}
}

@media (prefers-reduced-motion: reduce){
  .cp-pc,.cp-pc__sticker,.cp-pc__add.is-busy .cp-pc__add-cart,.cp-pc__add.is-added,.cp-pc__add.is-error,.cp-pc__notify:hover img{animation:none !important;}
  .cp-pc,.cp-pc__img,.cp-pc__plate,.cp-pc__shadow,.cp-pc__add{transition:none !important;}
  .cp-pc.has-alt:hover .cp-pc__img--alt{transform:none;}
  .cp-hover-swap > img{transition:none !important;}
}