/* ===========================================================
   Choco Pop v2 — Shop / product list
   Templates: products/templates/products/product_list.html,
              components/product_list_category_filter_list.html,
              templates/includes/pagination.html
   Behaviour: js/choco-motion.js (initBlobGroups); filters, accordions,
   infinite scroll and drawers keep their original scripts.
   =========================================================== */

main.shop-page{
  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)) !important;
  margin-top:0 !important;padding-top:8px;padding-bottom:40px;
}

/* ===================== hero ===================== */
.cp-shop-hero{
  position:relative;overflow:hidden;isolation:isolate;min-height:150px;padding:26px 30px;border-radius:34px;
  display:flex;align-items:center;
  background:
    radial-gradient(circle at 15% 30%, rgba(255,255,255,.14) 0 3px, transparent 3.5px) 0 0/70px 60px,
    linear-gradient(135deg,#6b3d28 0%,var(--clay-cocoa) 55%,var(--clay-cocoa-dark) 100%);
  box-shadow:0 9px 0 rgba(38,19,11,.32), 0 22px 36px rgba(38,19,11,.24), inset 0 3px 0 rgba(255,255,255,.14);
}
.cp-shop-hero::after{ /* caramel puddle in the corner */
  content:"";position:absolute;left:-60px;bottom:-90px;width:300px;height:200px;border-radius:50%;z-index:-1;
  background:radial-gradient(ellipse at 50% 40%, rgba(246,200,122,.55), rgba(204,90,0,.25) 55%, transparent 72%);
}
.cp-shop-hero__deco{
  position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);object-fit:contain;z-index:0;
  filter:drop-shadow(0 10px 10px rgba(0,0,0,.35));animation:cpFloat var(--t,4s) ease-in-out infinite;animation-delay:var(--d,0s);
}
.cp-shop-hero__text{position:relative;z-index:1;}
.cp-shop-hero__title{font-size:clamp(1.4rem,3vw,2.2rem);font-weight:900;color:#fff;line-height:1.5;margin:6px 0 4px;text-shadow:0 3px 0 rgba(0,0,0,.25);}
.is-in .cp-shop-hero__title{animation:cpDropIn .8s var(--cp-ease-jelly) both .15s;}
.cp-shop-hero__count{font-size:.85rem;color:var(--clay-cream);}
.cp-shop-hero__count b{display:inline-block;min-width:28px;padding:1px 9px;margin-inline-end:4px;border-radius:999px;text-align:center;color:var(--clay-cocoa-dark);background:linear-gradient(180deg,#FFE9C4,var(--clay-cream-gold));box-shadow:0 2px 0 rgba(0,0,0,.25);}
.cp-crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding:0;list-style:none;}
.cp-crumbs a{display:inline-block;padding:4px 12px;border-radius:999px;font-size:.74rem;font-weight:700;color:var(--clay-cream);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);transition:background .2s ease, transform .4s var(--cp-ease-jelly);}
.cp-crumbs a:hover{background:rgba(255,255,255,.22);transform:translateY(-2px);}
.cp-crumbs a[aria-current]{background:linear-gradient(180deg,var(--clay-amber),var(--clay-gold-deep));color:#fff;border-color:transparent;box-shadow:0 2px 0 #a04700;}
.cp-crumbs__sep{color:rgba(253,227,189,.6);font-weight:900;}

/* ===================== category strip ===================== */
.cp-strip{border-radius:30px !important;}
.cp-strip__title{font-size:.95rem;font-weight:900;color:var(--clay-cocoa-dark);}
.cp-strip__all{display:inline-flex;align-items:center;gap:4px;padding:6px 12px;border-radius:999px;font-size:.75rem;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-strip__all:hover{transform:translateY(-2px);}
.cp-strip__list{padding:6px 2px 10px;scrollbar-width:thin;scrollbar-color:rgba(204,90,0,.3) transparent;}
.cp-strip-tile{
  position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;width:104px;padding:10px 6px 10px;border-radius:24px;text-align:center;
  background:radial-gradient(circle at 30% 18%, #fff, #FFF6EA 60%, #FFEED6 100%);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 5px 0 rgba(204,90,0,.14), 0 10px 16px rgba(79,44,29,.08), inset 0 2px 0 #fff;
  transition:transform .5s var(--cp-ease-jelly), box-shadow .3s ease;
}
.cp-strip-tile__img{width:68px;height:68px;display:flex;align-items:center;justify-content:center;}
.cp-strip-tile__img img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(79,44,29,.2));transition:transform .55s var(--cp-ease-jelly);}
.cp-strip-tile__name{font-size:.72rem;font-weight:800;color:var(--clay-cocoa);min-height:2.4em;line-height:1.2;}
.cp-strip-tile:hover{transform:translateY(-6px) rotate(-2deg);box-shadow:0 9px 0 rgba(204,90,0,.16), 0 16px 22px rgba(79,44,29,.12), inset 0 2px 0 #fff;}
.cp-strip-tile:hover .cp-strip-tile__img img{transform:translateY(-4px) rotate(-10deg) scale(1.12);}
.cp-strip-tile.is-active{background:radial-gradient(circle at 30% 18%, #FFE9C4, var(--clay-cream-gold) 70%);box-shadow:0 5px 0 var(--clay-wine-dark), 0 12px 18px rgba(130,17,35,.2), inset 0 2px 0 rgba(255,255,255,.7);}
.cp-strip-tile.is-active .cp-strip-tile__name{color:var(--clay-wine-dark);}
.cp-strip-tile.is-active::after{content:"";position:absolute;bottom:-5px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--clay-wine);box-shadow:0 0 0 3px #fff;}
html.cp-js .shop-categories-strip:not(.is-in) .cp-strip__list > li{opacity:0;}
.shop-categories-strip.is-in .cp-strip__list > li{animation:cpPopInT .55s var(--cp-ease-jelly) both;animation-delay:calc(var(--i, 0) * 55ms + 100ms);}

/* ===================== mobile tool buttons ===================== */
.cp-shop-tool{
  flex:1;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.9);
  font-size:.9rem;font-weight:800;color:var(--clay-cocoa-dark);
  background:radial-gradient(circle at 30% 20%, #fff, #FFF3DF 60%, var(--clay-cream) 100%);
  box-shadow:0 5px 0 rgba(166,106,41,.25), 0 10px 16px rgba(79,44,29,.12), inset 0 2px 0 #fff;
  transition:transform .45s var(--cp-ease-jelly);
}
.cp-shop-tool img{transition:transform .5s var(--cp-ease-jelly);}
.cp-shop-tool:active{transform:translateY(3px) scale(.97);}
.cp-shop-tool:active img{transform:rotate(-15deg) scale(1.15);}

/* ===================== filter card ===================== */
.cp-filter{border-radius:30px !important;}
.cp-filter__head{display:flex;align-items:center;justify-content:space-between;margin:4px 0 14px;padding-bottom:12px;border-bottom:1px dashed var(--cp-line-strong);}
.cp-filter__head h2{display:flex;align-items:center;gap:8px;font-size:1.02rem;font-weight:900;color:var(--clay-cocoa-dark);}
.cp-filter__head h2 img{width:26px;height:26px;object-fit:contain;animation:cpTitleIcon 4s ease-in-out infinite;}
.cp-filter__clear{padding:5px 12px;border-radius:999px;font-size:.74rem;font-weight:800;color:var(--clay-wine);background:#fff;border:1px dashed rgba(166,25,46,.4);transition:transform .4s var(--cp-ease-jelly), background .2s ease;}
.cp-filter__clear:hover{transform:rotate(-3deg) scale(1.05);background:#FFF0F2;}
.cp-filter__list > li{border-radius:18px;padding:4px 10px;background:rgba(255,255,255,.65);border:1px solid rgba(237,155,51,.14);transition:background .2s ease;}
.cp-filter__list > li:hover{background:#fff;}
.cp-filter__list > li > label,.cp-filter__list [data-accordion-button] > div{font-weight:700;color:var(--clay-cocoa-dark);}
.cp-acc-chev{transition:transform .45s var(--cp-ease-jelly);}
.cp-acc-chev.-rotate-90{transform:rotate(-90deg);}
.cp-filter__list [data-accordion-item].open{background:#fff;box-shadow:0 3px 0 rgba(237,155,51,.16);}
.cp-filter__list label{transition:color .2s ease;}
.cp-filter__list label:hover{color:var(--clay-wine-dark);}

/* candy switch (input.peer.sr-only + .cp-switch) */
.cp-switch{
  position:relative;width:48px;height:28px;border-radius:999px;flex-shrink:0;
  background:var(--clay-cream);box-shadow:inset 0 2px 4px rgba(79,44,29,.15);
  transition:background .35s ease;
}
.cp-switch::after{
  content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, #FFF3DF);box-shadow:0 2px 0 rgba(166,106,41,.3), 0 3px 6px rgba(79,44,29,.15);
  transition:transform .5s var(--cp-ease-jelly), width .25s ease;
}
input.peer:checked + .cp-switch{background:repeating-linear-gradient(-45deg,var(--clay-wine) 0 7px,var(--clay-wine-dark) 7px 14px);}
input.peer:checked + .cp-switch::after{transform:translateX(20px);}
input.peer:active + .cp-switch::after,label:active input.peer + .cp-switch::after{width:28px;}
input.peer:checked:active + .cp-switch::after{transform:translateX(14px);}
input.peer:focus-visible + .cp-switch{box-shadow:inset 0 2px 4px rgba(79,44,29,.15), 0 0 0 3px rgba(237,155,51,.35);}

.cp-mini-search{
  width:100%;padding:9px 14px;border-radius:999px;border:2px solid rgba(246,200,122,.55);background:#fff;color:var(--clay-cocoa-dark);font-size:.82rem;outline:none;
  transition:border-color .2s ease, box-shadow .25s ease;
}
.cp-mini-search:focus{border-color:var(--clay-gold);box-shadow:0 0 0 4px rgba(237,155,51,.18);}

/* ===================== sort bar ===================== */
.cp-sortbar{position:relative;border-radius:999px !important;}
.cp-sort-btn{position:relative;z-index:1;padding:8px 14px;border-radius:999px;font-size:.82rem;font-weight:700;color:var(--clay-cocoa);background:transparent !important;transition:color .25s ease;}
.cp-sort-btn:hover{color:var(--clay-wine-dark);}
.cp-sort-btn.sort-button-active,.cp-sort-btn.is-active{color:#fff !important;font-weight:800;border:0 !important;box-shadow:none !important;}
.cp-blob{
  position:absolute;left:0;top:50%;height:38px;margin-top:-19px;z-index:0;border-radius:999px;pointer-events:none;
  transition:transform .55s var(--cp-ease-jelly), width .55s var(--cp-ease-jelly), background .3s ease;
}
.cp-blob--active{background:linear-gradient(180deg,var(--clay-wine),var(--clay-wine-dark));box-shadow:0 4px 0 var(--clay-wine-deep), 0 8px 14px rgba(130,17,35,.25);}
.cp-blob--hover{background:radial-gradient(circle at 30% 25%, #fff, var(--clay-cream) 90%);box-shadow:0 3px 0 rgba(237,155,51,.25);opacity:0;scale:.7;transition:transform .5s var(--cp-ease-jelly), width .5s var(--cp-ease-jelly), opacity .2s ease, scale .35s var(--cp-ease-jelly);}
.cp-blob--hover.is-on{opacity:1;scale:1;}
.cp-blob.is-jump{transition:none;}

/* ===================== mobile sheets (filter / sort) ===================== */
.cp-sheet--short{border-radius:30px 30px 0 0 !important;overflow:hidden;}
.cp-summary{font-weight:800;color:var(--clay-cocoa-dark);}
.cp-summary > span:last-child img{transition:transform .45s var(--cp-ease-jelly);}
details[open] > .cp-summary{color:var(--clay-wine);}
.cp-sort-opt{
  display:block;width:100%;padding:14px;border-radius:22px;cursor:pointer;text-align:center;font-weight:800;color:var(--clay-cocoa);
  background:#fff;border:2px solid rgba(237,155,51,.18);box-shadow:0 4px 0 rgba(237,155,51,.16);
  transition:transform .45s var(--cp-ease-jelly), background .25s ease, border-color .25s ease, color .25s ease;
}
.cp-sort-opt p{margin:0;color:inherit !important;}
.cp-sort-opt:active{transform:scale(.97);}
input.peer:checked + .cp-sort-opt{background:linear-gradient(180deg,var(--clay-wine),var(--clay-wine-dark));border-color:transparent;color:#fff;box-shadow:0 5px 0 var(--clay-wine-deep);animation:cpJelly .6s ease;}
[data-cp-drawer].is-open fieldset[data-cp-drawer-list] > div{animation:cpRiseIn .45s var(--cp-ease-out) both;animation-delay:calc(var(--i, 0) * 50ms + 120ms);}

/* ===================== infinite loader ===================== */
.shop-page .infinite-loader-shell{border-radius:30px !important;background:radial-gradient(ellipse at 20% 0%, #fff, #FFF6EA 60%) !important;border:1px solid rgba(255,255,255,.9) !important;box-shadow:0 7px 0 rgba(204,90,0,.12), 0 16px 26px rgba(79,44,29,.1) !important;}
.shop-page .infinite-loader-aurora{display:none;}
.cp-loader-head{display:flex;align-items:center;gap:14px;}
.cp-candy-trio{display:inline-flex;gap:6px;}
.cp-candy-trio img{width:30px;height:30px;object-fit:contain;animation:cpBounceDot .9s var(--cp-ease-jelly) infinite;}
.cp-candy-trio img:nth-child(2){animation-delay:.12s;}
.cp-candy-trio img:nth-child(3){animation-delay:.24s;}
.cp-loader-title{font-size:.9rem;font-weight:900;color:var(--clay-wine-dark);}
.cp-loader-sub{font-size:.75rem;color:var(--clay-cocoa-light);}
.shop-page .infinite-sk-card{border-radius:30px !important;}
.shop-page .infinite-sk-shimmer{background:linear-gradient(90deg,#FBE6CC 0%,#FFF6EA 45%,#FBE6CC 90%) !important;background-size:200% 100% !important;}

/* ===================== pagination (shown when infinite scroll is off) ===================== */
.pagination-button{transition:transform .45s var(--cp-ease-jelly) !important;}
.pagination-button:hover{transform:translateY(-3px) rotate(-6deg);}
.pagination-button-active{animation:cpJelly .7s ease;}

/* ===================== phones ===================== */
@media (max-width:767.98px){
  main.shop-page{padding-top:4px;}
  .cp-shop-hero{min-height:120px;padding:20px;border-radius:26px;}
  .cp-shop-hero__deco{opacity:.55;}
  .cp-strip-tile{width:92px;}
  .cp-strip-tile__img{width:56px;height:56px;}
}

@media (prefers-reduced-motion: reduce){
  .cp-shop-hero__deco,.is-in .cp-shop-hero__title,.shop-categories-strip.is-in .cp-strip__list > li,.cp-filter__head h2 img,
  .cp-candy-trio img,input.peer:checked + .cp-sort-opt,[data-cp-drawer] fieldset > div,.pagination-button-active{animation:none !important;}
  html.cp-js .shop-categories-strip:not(.is-in) .cp-strip__list > li{opacity:1;}
}