/* ===========================================================
   Choco Pop v2 — Home page
   Templates: main/templates/main/home.html + components/
     banner_slider, product_categories, home_page_section,
     includes/components/incredible_recommendations, top_products,
     best_sellers, home_articles, home_dynamic_blocks
   Behaviour: js/choco-motion.js (initHero, initTicks, initTilt)

   The .dk-incredible-* / .dk-section classes are shared with the PDP and
   cart recommendation strips, so everything here is scoped to .main-home;
   those pages get their own pass in their step.
   =========================================================== */

main.main-home{
  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 0%,var(--cp-milk) 40%,#FFF6EA 100%);
}
.main-home .main-home-gap{margin-bottom:3.25rem;}

/* ===================== hero banner ===================== */
.main-home .banner-slider{
  width:min(calc(100% - 32px), 1400px);margin:8px auto 0;border-radius:36px;isolation:isolate;
  box-shadow:0 10px 0 rgba(94,13,26,.16), 0 26px 44px rgba(79,44,29,.22);
}
.main-home .banner-slider .swiper-slide{overflow:hidden;border-radius:36px;}
.main-home .banner-slider .banner-slide-img{transform-origin:70% 50%;}
.main-home .banner-slider .swiper-slide-active .banner-slide-img{animation:cpKenBurns 7.5s ease-out both;}
@keyframes cpKenBurns{from{transform:scale(1.09);}to{transform:scale(1);}}

.cp-hero-overlay{position:absolute;inset:0;pointer-events:none;}
.cp-hero-copy{
  pointer-events:auto;max-width:min(520px,62%);padding:22px 26px;border-radius:30px;margin-inline-start:0;
  background:linear-gradient(160deg, rgba(255,251,245,.94), rgba(255,241,222,.9));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 8px 0 rgba(94,13,26,.22), 0 18px 34px rgba(38,19,11,.28), inset 0 2px 0 #fff;
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
}
.cp-hero-tag{
  display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:999px;font-size:.78rem;font-weight:800;color:#fff;
  background:linear-gradient(180deg,var(--clay-amber),var(--clay-gold-deep));box-shadow:0 3px 0 #a04700;
}
.cp-hero-title{font-size:clamp(1.05rem,2.5vw,2.1rem);font-weight:900;line-height:1.55;color:var(--clay-cocoa-dark);}
.cp-hero-cta{padding:12px 22px;font-size:.88rem;}
/* custom.css makes every link in the slider display:block;width:100% */
.main-home .banner-slider .cp-hero-copy a.cp-hero-cta{display:inline-flex;width:auto;flex-wrap:nowrap;white-space:nowrap;}
.cp-hero-cta img{width:20px;height:20px;flex-shrink:0;transition:transform .4s var(--cp-ease-jelly);}
.cp-hero-cta:hover img{transform:translateX(-4px);}
.swiper-slide-active .cp-hero-copy{animation:cpHeroCard .8s var(--cp-ease-jelly) both .15s;}
.swiper-slide-active .cp-hero-copy > *{animation:cpRiseIn .6s var(--cp-ease-out) both;}
.swiper-slide-active .cp-hero-copy > *:nth-child(1){animation-delay:.35s;}
.swiper-slide-active .cp-hero-copy > *:nth-child(2){animation-delay:.47s;}
.swiper-slide-active .cp-hero-copy > *:nth-child(3){animation-delay:.6s;}
@keyframes cpHeroCard{from{opacity:0;transform:translateX(40px) rotate(2deg) scale(.92);}to{opacity:1;transform:none;}}

.main-home .banner-slider .swiper-button-next,
.main-home .banner-slider .swiper-button-prev{
  width:46px !important;height:46px !important;border-radius:50% !important;
  background:radial-gradient(circle at 32% 28%, #fff, #FFF3DF 60%, var(--clay-cream-gold) 100%) !important;
  box-shadow:0 4px 0 rgba(166,106,41,.3), 0 8px 14px rgba(38,19,11,.2), inset 0 2px 0 #fff !important;
  transition:transform .35s var(--cp-ease-jelly) !important;
}
.main-home .banner-slider .swiper-button-next:hover,
.main-home .banner-slider .swiper-button-prev:hover{transform:scale(1.12) rotate(-6deg) !important;}
.main-home .banner-slider .swiper-button-next:active,
.main-home .banner-slider .swiper-button-prev:active{transform:scale(.9) !important;}

/* autoplay countdown as a candy-cane bar */
.cp-hero-progress{position:absolute;left:28px;right:140px;bottom:18px;height:6px;border-radius:6px;z-index:5;background:rgba(255,255,255,.35);overflow:hidden;pointer-events:none;}
.cp-hero-progress i{
  display:block;height:100%;border-radius:6px;transform-origin:right center;transform:scaleX(0);
  background:repeating-linear-gradient(-45deg,#fff 0 8px,var(--clay-cream-gold) 8px 16px);
}

/* ===================== section headers ===================== */
.main-home .dk-section-header{position:relative;margin-bottom:1.25rem;}
.main-home .dk-section-title{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-size:1.2rem;font-weight:900;color:var(--clay-cocoa-dark);padding-bottom:12px;
}
.main-home .dk-section-title::before{
  content:"";width:30px;height:30px;flex-shrink:0;background:url("../../../icons/23_chocolate.png") center/contain no-repeat;
  animation:cpTitleIcon 4s ease-in-out infinite;
}
.main-home .dk-section-title::after{
  content:"";position:absolute;left:50%;bottom:0;width:58px;height:6px;margin-left:-29px;border-radius:6px;
  background:repeating-linear-gradient(-45deg,var(--clay-wine) 0 7px,var(--clay-gold) 7px 14px);
  transform:scaleX(0);transition:transform .8s var(--cp-ease-jelly) .3s;
}
.main-home .is-in .dk-section-title::after,html:not(.cp-js) .main-home .dk-section-title::after{transform:scaleX(1);}
@keyframes cpTitleIcon{0%,100%{transform:rotate(-8deg) translateY(0);}50%{transform:rotate(8deg) translateY(-3px);}}
.main-home .dk-section-more{
  padding:7px 14px;border-radius:999px;font-weight:800;font-size:.75rem;color:var(--clay-wine) !important;
  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), box-shadow .2s ease, background .2s ease;
}
.main-home .dk-section-more:hover{transform:translateY(-2px);background:var(--clay-cream);opacity:1 !important;box-shadow:0 5px 0 rgba(237,155,51,.3);}
.main-home .dk-section-more img{transition:transform .4s var(--cp-ease-jelly);}
.main-home .dk-section-more:hover img{transform:translateX(-4px);}

/* ===================== categories: floating candy bubbles ===================== */
.main-home .dk-section--categories{padding-top:.25rem;}
.main-home .category-slider{padding:16px 4px 6px;}
.cp-catb{display:flex;flex-direction:column;align-items:center;gap:12px;padding:8px 6px 10px;min-width:0;-webkit-tap-highlight-color:transparent;}
.cp-catb__bubble{
  position:relative;width:118px;height:118px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 32% 26%, #fff, #FFF1DE 58%, var(--clay-cream) 100%);
  box-shadow:0 7px 0 rgba(204,90,0,.16), 0 16px 24px rgba(79,44,29,.14), inset 0 3px 0 #fff, inset 0 -6px 12px rgba(204,90,0,.08);
  animation:cpBob 4.2s ease-in-out infinite;animation-delay:calc(var(--i, 0) * -.55s);
  transition:box-shadow .3s ease;
}
.cp-catb__bubble::after{ /* candy gloss */
  content:"";position:absolute;top:12%;left:20%;width:30%;height:18%;border-radius:50%;
  background:radial-gradient(ellipse, rgba(255,255,255,.95), rgba(255,255,255,0) 70%);transform:rotate(-24deg);pointer-events:none;
}
.cp-catb__bubble img{width:72%;height:72%;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(79,44,29,.25));transition:transform .6s var(--cp-ease-jelly);}
.cp-catb__name{
  padding:5px 12px;border-radius:999px;font-size:.78rem;font-weight:800;color:var(--clay-cocoa);text-align:center;
  background:#fff;border:1px solid var(--cp-line);box-shadow:0 3px 0 rgba(237,155,51,.16);
  transition:background .25s ease, color .25s ease, transform .45s var(--cp-ease-jelly);
}
.cp-catb:hover .cp-catb__bubble,.cp-catb:focus-visible .cp-catb__bubble{animation-play-state:paused;box-shadow:0 10px 0 rgba(204,90,0,.2), 0 22px 30px rgba(79,44,29,.18), inset 0 3px 0 #fff;}
.cp-catb:hover .cp-catb__bubble img,.cp-catb:focus-visible .cp-catb__bubble img{transform:translateY(-10px) rotate(-12deg) scale(1.14);}
.cp-catb:hover .cp-catb__name{background:linear-gradient(180deg,var(--clay-wine),var(--clay-wine-dark));color:#fff;transform:translateY(-2px);}
.cp-catb:active .cp-catb__bubble{transform:scale(.92,1.06);}
@keyframes cpBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
html.cp-js .main-home [data-reveal]:not(.is-in) .cp-catb{opacity:0;}
.main-home .is-in .cp-catb{animation:cpPopInT .6s var(--cp-ease-jelly) both;animation-delay:calc(var(--i, 0) * 70ms + 150ms);}
@media (max-width:767.98px){
  .cp-catb__bubble{width:84px;height:84px;}
  .cp-catb__name{font-size:.7rem;padding:4px 10px;}
}

/* ===================== product / article showcase boxes ===================== */
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-box{
  position:relative;isolation:isolate;border-radius:36px;padding:14px 0;
  background:
    radial-gradient(circle at 15% 30%, rgba(255,255,255,.12) 0 3px, transparent 3.5px) 0 0/70px 60px,
    radial-gradient(circle at 60% 75%, rgba(246,200,122,.16) 0 2.5px, transparent 3px) 0 0/90px 70px,
    linear-gradient(135deg,var(--clay-wine) 0%,var(--clay-wine-dark) 60%,var(--clay-wine-deep) 100%);
  box-shadow:0 10px 0 rgba(94,13,26,.3), 0 24px 40px rgba(94,13,26,.28), inset 0 3px 0 rgba(255,255,255,.18);
}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-box::before{ /* glossy top sheen */
  content:"";position:absolute;inset:0 0 auto 0;height:46%;z-index:-1;border-radius:36px 36px 50% 50%/36px 36px 30px 30px;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0));pointer-events:none;
}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-box.cp-box--caramel{
  background:
    radial-gradient(circle at 15% 30%, rgba(255,255,255,.16) 0 3px, transparent 3.5px) 0 0/70px 60px,
    radial-gradient(circle at 60% 75%, rgba(166,25,46,.14) 0 2.5px, transparent 3px) 0 0/90px 70px,
    linear-gradient(135deg,var(--clay-gold) 0%,var(--clay-amber) 55%,var(--clay-gold-deep) 100%);
  box-shadow:0 10px 0 rgba(160,71,0,.32), 0 24px 40px rgba(204,90,0,.25), inset 0 3px 0 rgba(255,255,255,.3);
}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-box.cp-box--cocoa{
  background:
    radial-gradient(circle at 15% 30%, rgba(246,200,122,.12) 0 3px, transparent 3.5px) 0 0/70px 60px,
    radial-gradient(circle at 60% 75%, rgba(255,255,255,.07) 0 2.5px, transparent 3px) 0 0/90px 70px,
    linear-gradient(135deg,#6b3d28 0%,var(--clay-cocoa) 55%,var(--clay-cocoa-dark) 100%);
  box-shadow:0 10px 0 rgba(38,19,11,.35), 0 24px 40px rgba(38,19,11,.28), inset 0 3px 0 rgba(255,255,255,.14);
}
:is(.main-home,.cp-pdp,.cp-cart) .cp-box--caramel .dk-incredible-panel-title{text-shadow:0 2px 0 rgba(160,71,0,.5);}

/* panel */
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-panel-title{font-size:1.15rem;font-weight:900;line-height:1.6;}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-panel-heart-icon{
  width:34px;height:34px;background:radial-gradient(circle at 32% 28%, #fff, var(--clay-cream) 85%);
  box-shadow:0 3px 0 rgba(0,0,0,.2);animation:cpPanelHop 2.4s var(--cp-ease-jelly) infinite;
}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-panel-heart-icon img{width:22px;height:22px;}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-panel-heart-left{animation-delay:0s;--r:-24deg;}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-panel-heart-center{animation-delay:.18s;--r:-6deg;}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-panel-heart-right{animation-delay:.36s;--r:20deg;}
@keyframes cpPanelHop{0%,55%,100%{transform:rotate(var(--r,0)) translateY(0);}20%{transform:rotate(var(--r,0)) translateY(-9px) scale(1.08,.94);}35%{transform:rotate(var(--r,0)) translateY(0) scale(.96,1.04);}}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-panel-more{
  padding:7px 14px;background:rgba(255,255,255,.16);border:1.5px dashed rgba(255,255,255,.55);
  transition:transform .4s var(--cp-ease-jelly), background .2s ease;
}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-panel-more:hover{transform:translateY(-2px);background:rgba(255,255,255,.28);}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-panel-more-arrow img{transition:transform .4s var(--cp-ease-jelly);}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-panel-more:hover .dk-incredible-panel-more-arrow img{transform:translateX(-4px);}

/* countdown boxes flip on every tick */
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-timer-unit{min-width:2.4rem;height:2.2rem;border-radius:12px;overflow:hidden;box-shadow:0 3px 0 rgba(94,13,26,.35), inset 0 2px 0 #fff;}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-timer-value{font-size:1rem;}
.cp-tick{animation:cpTick .45s var(--cp-ease-jelly);}
@keyframes cpTick{0%{transform:translateY(-70%) rotateX(70deg);opacity:.2;}100%{transform:none;opacity:1;}}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-timer-sep{animation:cpBlink 1s steps(1) infinite;}
@keyframes cpBlink{50%{opacity:.25;}}

/* cards */
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-swiper{padding:14px 12px 16px 22px;}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-slide-link{border-radius:26px;overflow:visible;}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-card{
  position:relative;border-radius:26px;overflow:hidden;
  background:white;
  box-shadow:0 6px 0 rgba(38,19,11,.2), 0 12px 18px rgba(38,19,11,.16), inset 0 2px 0 #fff;
  transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift,0px));
  transition:transform .45s var(--cp-ease-jelly), box-shadow .3s ease;
}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-card:hover{--lift:-6px;transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--lift));box-shadow:0 10px 0 rgba(38,19,11,.18), 0 20px 26px rgba(38,19,11,.2), inset 0 2px 0 #fff;}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-card.is-tilting{transition:transform .12s linear, box-shadow .3s ease;}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-card::after{ /* glare that follows the cursor */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s ease;
  background:radial-gradient(circle at var(--mx,50%) var(--my,30%), rgba(255,255,255,.65), rgba(255,255,255,0) 45%);
}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-card:hover::after{opacity:1;}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-card .dk-incredible-card-image img{transition:transform .6s var(--cp-ease-jelly), opacity .3s ease;}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-card:hover .dk-incredible-card-image img{transform:translateY(-6px) rotate(-7deg) scale(1.1);}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-card .dk-incredible-card-title{font-size:12.5px;font-weight:700;color:var(--clay-cocoa-dark);}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-card .dk-incredible-price{font-size:15px;font-weight:900;color:var(--clay-wine-dark);}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-card .dk-incredible-price-unit{color:var(--clay-cocoa-light);}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-card .dk-incredible-old-price{color:var(--clay-cocoa-pale);}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-card .dk-incredible-discount{
  border:1.5px dashed rgba(255,255,255,.6);padding:2px 9px;animation:clayWiggle 2.8s ease-in-out infinite;
}
.main-home .home-articles-showcase .dk-incredible-card .dk-incredible-card-image{border-radius:18px;}
.main-home .home-articles-showcase .dk-incredible-card .dk-incredible-card-image img{border-radius:18px;filter:none;}
.main-home .home-articles-showcase .dk-incredible-card:hover .dk-incredible-card-image img{transform:scale(1.08);}
.main-home .home-article-card-meta{color:var(--clay-cocoa-light);font-weight:600;}

:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-card-more{
  border-radius:26px;border:2px dashed rgba(255,255,255,.7);color:#fff;
  background:rgba(255,255,255,.12);
}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-card-more-link:hover .dk-incredible-card-more{background:rgba(255,255,255,.22);color:#fff;border-color:#fff;}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-card-more .dk-incredible-card-more-icon{width:52px;height:52px;animation:cpNudge 1.6s ease-in-out infinite;}
@keyframes cpNudge{0%,100%{transform:translateX(0);}50%{transform:translateX(-7px);}}

/* cards deal in one after another when the section scrolls into view */
html.cp-js :is(.main-home,.cp-pdp,.cp-cart) [data-reveal]:not(.is-in) .dk-incredible-swiper .swiper-slide{opacity:0;}
:is(.main-home,.cp-pdp,.cp-cart) .is-in .dk-incredible-swiper .swiper-slide{animation:cpDealIn .65s var(--cp-ease-jelly) both;}
:is(.main-home,.cp-pdp,.cp-cart) .is-in .dk-incredible-swiper .swiper-slide:nth-child(2){animation-delay:.07s;}
:is(.main-home,.cp-pdp,.cp-cart) .is-in .dk-incredible-swiper .swiper-slide:nth-child(3){animation-delay:.14s;}
:is(.main-home,.cp-pdp,.cp-cart) .is-in .dk-incredible-swiper .swiper-slide:nth-child(4){animation-delay:.21s;}
:is(.main-home,.cp-pdp,.cp-cart) .is-in .dk-incredible-swiper .swiper-slide:nth-child(5){animation-delay:.28s;}
:is(.main-home,.cp-pdp,.cp-cart) .is-in .dk-incredible-swiper .swiper-slide:nth-child(6){animation-delay:.35s;}
:is(.main-home,.cp-pdp,.cp-cart) .is-in .dk-incredible-swiper .swiper-slide:nth-child(n+7){animation-delay:.42s;}
@keyframes cpDealIn{from{opacity:0;transform:translateX(-60px) rotate(-6deg) scale(.85);}to{opacity:1;transform:none;}}

:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-box .swiper-button-next,
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-box .swiper-button-prev{width:42px !important;height:42px !important;}
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-box .swiper-button-next:hover,
:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-box .swiper-button-prev:hover{transform:scale(1.14) rotate(-8deg) !important;}

/* ===================== best sellers ===================== */
.main-home .dk-section:not(.dk-section--categories){
  border-radius:36px;padding:1.5rem 1.75rem;border:1px solid rgba(255,255,255,.9);
  background:radial-gradient(ellipse at 20% 0%, #fff, #FFF7EC 50%, #FFF0DC 100%);
  box-shadow:0 10px 0 rgba(204,90,0,.12), 0 22px 36px rgba(79,44,29,.12), inset 0 3px 0 #fff;
}
.main-home .cp-bs-row{border-radius:20px !important;padding:10px !important;transition:background .25s ease, transform .45s var(--cp-ease-jelly);}
.main-home .cp-bs-row:hover{background:#fff !important;transform:translateY(-3px);box-shadow:0 4px 0 rgba(237,155,51,.18);}
.main-home .cp-bs-row img{transition:transform .55s var(--cp-ease-jelly);}
.main-home .cp-bs-row:hover img{transform:rotate(-10deg) scale(1.12);}
.main-home .best-sellers-grid > a{border-bottom-style:dashed !important;border-bottom-color:rgba(237,155,51,.25) !important;}
.main-home .home-best-seller-rank,.main-home .best-sellers-mobile-rank{transition:transform .5s var(--cp-ease-jelly) !important;}
.main-home [data-rank="1"] .home-best-seller-rank,.main-home .best-sellers-mobile-card[data-rank="1"] .best-sellers-mobile-rank{
  background:radial-gradient(circle at 32% 28%, #FFE9C4, var(--clay-gold) 60%, var(--clay-gold-deep)) !important;color:#fff !important;text-shadow:0 1px 0 rgba(160,71,0,.6);
}
.main-home [data-rank="2"] .home-best-seller-rank,.main-home .best-sellers-mobile-card[data-rank="2"] .best-sellers-mobile-rank{
  background:radial-gradient(circle at 32% 28%, #fff, var(--clay-blush-light) 60%, var(--clay-blush)) !important;color:#fff !important;text-shadow:0 1px 0 rgba(130,17,35,.5);
}
.main-home [data-rank="3"] .home-best-seller-rank,.main-home .best-sellers-mobile-card[data-rank="3"] .best-sellers-mobile-rank{
  background:radial-gradient(circle at 32% 28%, #E9D5C8, var(--clay-cocoa-pale) 60%, var(--clay-cocoa-light)) !important;color:#fff !important;text-shadow:0 1px 0 rgba(38,19,11,.5);
}
.main-home .cp-bs-row:hover .home-best-seller-rank{transform:rotate(-360deg) scale(1.12) !important;}
html.cp-js .main-home [data-reveal]:not(.is-in) .cp-bs-row{opacity:0;}
.main-home .is-in .cp-bs-row{animation:cpRiseIn .5s var(--cp-ease-out) both;animation-delay:calc(var(--i, 0) * 45ms + 120ms);}
.main-home .is-in .cp-bs-row .home-best-seller-rank{animation:cpSpinIn .7s var(--cp-ease-jelly) both;animation-delay:calc(var(--i, 0) * 45ms + 200ms);}
.main-home .best-sellers-mobile-card{border-radius:20px;background:#fff;box-shadow:0 4px 0 rgba(237,155,51,.18);border:1px solid var(--cp-line);}

/* ===================== admin-placed banners (home_dynamic_blocks) ===================== */
.main-home .home-dynamic-block__frame{border-radius:28px;overflow:hidden;transition:transform .5s var(--cp-ease-jelly), box-shadow .3s ease;box-shadow:0 8px 0 rgba(79,44,29,.1), 0 16px 26px rgba(79,44,29,.12);}
.main-home .home-dynamic-block__frame:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:0 12px 0 rgba(79,44,29,.1), 0 24px 34px rgba(79,44,29,.16);}
.main-home .home-dynamic-block__frame img{transition:transform .8s var(--cp-ease-out);}
.main-home .home-dynamic-block__frame:hover img{transform:scale(1.04);}

/* ===================== phones ===================== */
@media (max-width:767.98px){
  .main-home .banner-slider{width:calc(100% - 24px);margin-top:6px;border-radius:26px;}
  .main-home .banner-slider .swiper-slide{border-radius:26px;}
  .cp-hero-copy{max-width:78%;padding:12px 14px;border-radius:20px;gap:6px;}
  .cp-hero-tag{font-size:.65rem;padding:4px 10px;}
  .cp-hero-cta{padding:7px 14px;font-size:.72rem;}
  .cp-hero-progress{left:14px;right:14px;bottom:8px;height:4px;}
  .main-home .banner-slider .swiper-button-next,.main-home .banner-slider .swiper-button-prev{display:none !important;} /* swipe instead; they covered the CTA */
  :is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-box{border-radius:28px;}
  .main-home .dk-section:not(.dk-section--categories){border-radius:28px;padding:1.1rem 1rem;}
  .main-home .dk-section-title{font-size:1.02rem;}
}

@media (prefers-reduced-motion: reduce){
  .main-home .banner-slider .swiper-slide-active .banner-slide-img,.swiper-slide-active .cp-hero-copy,.swiper-slide-active .cp-hero-copy > *,
  .main-home .dk-section-title::before,.cp-catb__bubble,.main-home .is-in .cp-catb,:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-panel-heart-icon,
  .cp-tick,:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-timer-sep,:is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-card .dk-incredible-discount,
  :is(.main-home,.cp-pdp,.cp-cart) .dk-incredible-card-more .dk-incredible-card-more-icon,:is(.main-home,.cp-pdp,.cp-cart) .is-in .dk-incredible-swiper .swiper-slide,
  .main-home .is-in .cp-bs-row,.main-home .is-in .cp-bs-row .home-best-seller-rank{animation:none !important;}
  html.cp-js .main-home [data-reveal]:not(.is-in) .cp-catb,html.cp-js :is(.main-home,.cp-pdp,.cp-cart) [data-reveal]:not(.is-in) .dk-incredible-swiper .swiper-slide,
  html.cp-js .main-home [data-reveal]:not(.is-in) .cp-bs-row{opacity:1;}
}