/* ===================================================================
   PSIU — redesign do catálogo (verde neon, animado, mais recursos)
   Escopo: body.clip-blue-theme (só a loja pública, nunca admin/pickup/tracking)
   =================================================================== */

body.clip-blue-theme{
  --neon:#22c55e;
  --neon-2:#16a34a;
  --neon-bright:#4ade80;
  --neon-lime:#a3e635;
  --neon-deep:#15803d;
  --neon-text:#0d3320;
  --neon-dark:#052e14;
  --neon-dark-2:#08130c;
  --neon-glow:rgba(34,197,94,.45);
  --neon-glow-soft:rgba(34,197,94,.22);
  --neon-soft:#e9fdf0;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
}

/* ---------- keyframes ---------- */
@keyframes psiuFadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes psiuFadeIn{from{opacity:0}to{opacity:1}}
@keyframes psiuPopIn{from{opacity:0;transform:scale(.92) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes psiuPulseBadge{0%,100%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}50%{box-shadow:0 0 0 7px rgba(34,197,94,0)}}
@keyframes psiuShimmer{0%{background-position:-300px 0}100%{background-position:300px 0}}
@keyframes psiuBounce{0%,100%{transform:scale(1)}30%{transform:scale(1.22)}55%{transform:scale(.92)}75%{transform:scale(1.08)}}
@keyframes psiuGlowPulse{0%,100%{box-shadow:0 8px 26px rgba(34,197,94,.28)}50%{box-shadow:0 10px 34px rgba(34,197,94,.5)}}
@keyframes psiuHeartPop{0%{transform:scale(1)}35%{transform:scale(1.4) rotate(-6deg)}60%{transform:scale(.9)}100%{transform:scale(1)}}
@keyframes psiuFloatSlow{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes psiuSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  body.clip-blue-theme *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ---------- topbar / brand ---------- */
body.clip-blue-theme .topbar{
  background:linear-gradient(180deg,var(--neon-dark) 0%,var(--neon-dark-2) 100%);
  border-bottom:1px solid rgba(74,222,128,.14);
}
body.clip-blue-theme .brand-mark{
  background:linear-gradient(135deg,var(--neon) 0%,var(--neon-lime) 100%);
  box-shadow:0 6px 18px var(--neon-glow);
  transition:transform .35s var(--ease-spring);
}
body.clip-blue-theme .brand:hover .brand-mark{transform:rotate(-4deg) scale(1.06)}
body.clip-blue-theme .cart-top,
body.clip-blue-theme .fav-top{
  background:linear-gradient(135deg,var(--neon) 0%,var(--neon-2) 100%);
  color:#fff;
  transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
body.clip-blue-theme .cart-top:hover,
body.clip-blue-theme .fav-top:hover{transform:translateY(-2px);box-shadow:0 8px 20px var(--neon-glow-soft)}
body.clip-blue-theme .cart-top b,
body.clip-blue-theme .fav-top b{background:#fff;color:var(--neon-deep)}
body.clip-blue-theme .fav-top{position:relative;overflow:visible}
body.clip-blue-theme .fav-top.pulse b{animation:psiuBounce .5s var(--ease-spring)}
body.clip-blue-theme .fav-top.active{box-shadow:0 0 0 3px rgba(74,222,128,.45)}
body.clip-blue-theme .action-btn:not(.cart-top):not(.fav-top):hover{background:rgba(74,222,128,.16)}

/* ---------- hero banner ---------- */
body.clip-blue-theme .hero{
  border-radius:22px;
  box-shadow:0 18px 44px rgba(5,46,20,.28);
  animation:psiuFadeUp .5s var(--ease-out) both;
}
body.clip-blue-theme .banner-slide{transition:opacity .5s var(--ease-out)}
body.clip-blue-theme .banner-arrow{
  background:rgba(5,46,20,.55);
  backdrop-filter:blur(3px);
  transition:transform .2s var(--ease-out),background .2s;
}
body.clip-blue-theme .banner-arrow:hover{background:var(--neon-2);transform:translateY(-50%) scale(1.08)}
body.clip-blue-theme .banner-dots button.active{background:var(--neon-bright);box-shadow:0 0 0 3px rgba(74,222,128,.35)}

/* ---------- category chips ---------- */
body.clip-blue-theme .category-strip button{
  transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),background .18s,color .18s,border-color .18s;
}
body.clip-blue-theme .category-strip button:hover{transform:translateY(-2px);border-color:var(--neon-bright)}
body.clip-blue-theme .category-strip button.active{
  background:linear-gradient(135deg,var(--neon) 0%,var(--neon-2) 100%);
  border-color:transparent;
  box-shadow:0 8px 20px var(--neon-glow-soft);
}

/* ---------- filter / sort bar ---------- */
.filter-bar{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0 0 16px;
}
.filter-bar-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.filter-toggle-btn,.fav-filter-chip,.sort-field{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:42px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
  font-weight:800;
  font-size:.82rem;
  cursor:pointer;
  transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),border-color .18s,background .18s,color .18s;
}
.filter-toggle-btn:hover,.fav-filter-chip:hover{transform:translateY(-2px);border-color:var(--neon-bright)}
.filter-toggle-btn.active,.fav-filter-chip.active{
  background:linear-gradient(135deg,var(--neon) 0%,var(--neon-2) 100%);
  border-color:transparent;color:#fff;box-shadow:0 8px 18px var(--neon-glow-soft);
}
.sort-field{padding:0 6px 0 14px;cursor:default}
.sort-field span{color:var(--muted);font-weight:800;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.sort-field select{
  border:0;background:transparent;color:var(--text);font-weight:800;font-size:.82rem;
  padding:10px 6px;outline:none;cursor:pointer;
}
.price-range-panel{
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition:max-height .3s var(--ease-out),opacity .25s var(--ease-out);
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--card);
}
.price-range-panel.open{max-height:140px;opacity:1;padding:16px 18px}
.price-range-labels{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;font-size:.8rem}
.price-range-labels span{color:var(--muted);font-weight:800;text-transform:uppercase;font-size:.68rem;letter-spacing:.05em}
.price-range-labels b{color:var(--neon-deep);font-size:.92rem}
.price-range-slider{position:relative;height:34px}
.price-range-slider .range-track{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);height:6px;border-radius:99px;background:var(--line)}
.price-range-slider .range-fill{position:absolute;top:0;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--neon) 0%,var(--neon-bright) 100%)}
.price-range-slider input[type=range]{
  position:absolute;top:50%;left:0;width:100%;
  margin:0;transform:translateY(-50%);
  -webkit-appearance:none;appearance:none;background:transparent;pointer-events:none;
}
.price-range-slider input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;pointer-events:auto;
  width:22px;height:22px;border-radius:50%;
  background:#fff;border:3px solid var(--neon-2);
  box-shadow:0 3px 10px rgba(5,46,20,.28);
  cursor:grab;transition:transform .15s var(--ease-out),box-shadow .15s;
}
.price-range-slider input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.12);box-shadow:0 0 0 8px var(--neon-glow-soft)}
.price-range-slider input[type=range]::-moz-range-thumb{
  pointer-events:auto;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid var(--neon-2);cursor:grab;
}
.price-range-slider input[type=range]::-moz-range-track{background:transparent}

/* ---------- product grid stagger + skeleton ---------- */
body.clip-blue-theme .product-card{
  animation:psiuFadeUp .45s var(--ease-out) both;
  transition:transform .28s var(--ease-out),box-shadow .28s var(--ease-out),border-color .28s;
}
body.clip-blue-theme .product-card:nth-child(1){animation-delay:.02s}
body.clip-blue-theme .product-card:nth-child(2){animation-delay:.06s}
body.clip-blue-theme .product-card:nth-child(3){animation-delay:.10s}
body.clip-blue-theme .product-card:nth-child(4){animation-delay:.14s}
body.clip-blue-theme .product-card:nth-child(5){animation-delay:.18s}
body.clip-blue-theme .product-card:nth-child(6){animation-delay:.22s}
body.clip-blue-theme .product-card:nth-child(n+7){animation-delay:.24s}
body.clip-blue-theme .product-card:hover{
  transform:translateY(-6px);
  border-color:var(--neon-bright);
  box-shadow:0 20px 40px -12px rgba(5,46,20,.28),0 0 0 1px rgba(74,222,128,.18);
}
body.clip-blue-theme .product-image img{transition:transform .45s var(--ease-out)}
body.clip-blue-theme .product-card:hover .product-image img{transform:scale(1.08)}
body.clip-blue-theme .product-media{position:relative}
body.clip-blue-theme .product-offer-badge{animation:psiuPulseBadge 2.4s ease-in-out infinite}

.skeleton-card{
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--card);
}
.skeleton-block{
  background:linear-gradient(90deg,rgba(148,163,184,.16) 25%,rgba(148,163,184,.28) 37%,rgba(148,163,184,.16) 63%);
  background-size:600px 100%;
  animation:psiuShimmer 1.4s linear infinite;
}
.skeleton-card .skeleton-image{aspect-ratio:1/1}
.skeleton-card .skeleton-body{padding:14px;display:grid;gap:8px}
.skeleton-card .skeleton-line{height:11px;border-radius:6px}
.skeleton-card .skeleton-line.w60{width:60%}
.skeleton-card .skeleton-line.w80{width:80%}
.skeleton-card .skeleton-line.w40{height:20px;width:40%;margin-top:6px}
.skeleton-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media(max-width:900px){.skeleton-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.skeleton-grid{grid-template-columns:repeat(2,1fr);gap:10px}}
body.compact-products .skeleton-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:900px){body.compact-products .skeleton-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:720px){body.compact-products .skeleton-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- favorite (heart) button on card ---------- */
.fav-btn{
  position:absolute;
  z-index:5;
  top:8px;right:8px;
  width:34px;height:34px;
  display:grid;place-items:center;
  border:0;border-radius:50%;
  background:rgba(255,255,255,.92);
  color:#94a3b8;
  font-size:1rem;
  box-shadow:0 4px 12px rgba(5,46,20,.16);
  cursor:pointer;
  transition:transform .18s var(--ease-spring),color .18s,background .18s;
}
.fav-btn:hover{transform:scale(1.1)}
.fav-btn i{pointer-events:none}
.fav-btn.active{color:#ef4444;background:#fff}
.fav-btn.active i{font-weight:900}
.fav-btn.pop i{animation:psiuHeartPop .45s var(--ease-spring)}
body.dark-theme .fav-btn{background:rgba(23,32,51,.88);color:#94a3b8}
body.dark-theme .fav-btn.active{background:rgba(23,32,51,.95);color:#f87171}

/* ---------- buttons / CTA glow ---------- */
body.clip-blue-theme .primary-btn{
  background:linear-gradient(135deg,var(--neon) 0%,var(--neon-2) 100%);
  box-shadow:0 8px 20px var(--neon-glow-soft);
  transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out),filter .18s;
}
body.clip-blue-theme .primary-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px var(--neon-glow)}
body.clip-blue-theme .primary-btn:active{transform:translateY(0) scale(.97)}
body.clip-blue-theme .whatsapp-btn{transition:transform .18s var(--ease-out),box-shadow .18s var(--ease-out)}
body.clip-blue-theme .whatsapp-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(6,118,71,.35)}
body.clip-blue-theme .whatsapp-btn:active,body.clip-blue-theme .primary-btn:active{transform:scale(.97)}
body.clip-blue-theme .secondary-btn{transition:transform .18s var(--ease-out),border-color .18s}
body.clip-blue-theme .secondary-btn:hover{transform:translateY(-2px);border-color:var(--neon-bright)}

/* ---------- floating cart ---------- */
body.clip-blue-theme .floating-cart{
  background:linear-gradient(135deg,var(--neon) 0%,var(--neon-2) 100%);
  animation:psiuFloatSlow 3.4s ease-in-out infinite;
  transition:transform .2s var(--ease-spring),box-shadow .2s;
}
body.clip-blue-theme .floating-cart:hover{transform:scale(1.08);box-shadow:0 14px 30px var(--neon-glow)}
body.clip-blue-theme .floating-cart.bump{animation:psiuBounce .5s var(--ease-spring)}
body.clip-blue-theme .floating-cart span{background:#fff;color:var(--neon-deep)}

/* ---------- modal entrance ---------- */
body.clip-blue-theme .modal:not(.hidden){animation:psiuFadeIn .2s var(--ease-out) both}
body.clip-blue-theme .modal:not(.hidden) .modal-card{animation:psiuPopIn .28s var(--ease-out) both}

/* image zoom in quick view */
.product-detail-image{position:relative;cursor:zoom-in;overflow:hidden}
.product-detail-image img{transition:transform .35s var(--ease-out)}
.product-detail-image.zoomed img{transform:scale(1.9)}
.product-detail-image.zoomed{cursor:zoom-out}

/* ---------- recently viewed ---------- */
.recent-section{margin:6px 0 26px}
.recent-scroll{
  display:flex;gap:12px;overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x proximity;
}
.recent-scroll::-webkit-scrollbar{height:6px}
.recent-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.recent-card{
  flex:0 0 auto;width:150px;scroll-snap-align:start;
  border:1px solid var(--line);border-radius:16px;background:var(--card);overflow:hidden;
  text-decoration:none;color:inherit;display:block;
  transition:transform .2s var(--ease-out),border-color .2s,box-shadow .2s;
}
.recent-card:hover{transform:translateY(-4px);border-color:var(--neon-bright);box-shadow:0 14px 26px rgba(5,46,20,.16)}
.recent-card-image{aspect-ratio:1/1;display:grid;place-items:center;background:#f1f5fa;padding:10px}
.recent-card-image img{width:100%;height:100%;object-fit:contain}
.recent-card-info{padding:9px 10px 11px}
.recent-card-info b{display:block;font-size:.72rem;line-height:1.25;margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.recent-card-info span{color:var(--neon-deep);font-weight:900;font-size:.78rem}
@media(max-width:720px){.recent-card{width:128px}}

/* ---------- category logo idle float ---------- */
body.clip-blue-theme .cat-logo{transition:transform .25s var(--ease-out)}
body.clip-blue-theme .category-strip button:hover .cat-logo{transform:scale(1.12) rotate(-3deg)}

/* ---------- scroll reveal (opt-in via JS, IntersectionObserver) ---------- */
.reveal-on-scroll{opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.reveal-on-scroll.is-visible{opacity:1;transform:translateY(0)}

/* ---------- misc ---------- */
body.clip-blue-theme .empty,body.clip-blue-theme .loading{animation:psiuFadeIn .3s var(--ease-out) both}
body.clip-blue-theme .loading span{border-top-color:var(--neon);animation:psiuSpin .7s linear infinite}

@media(max-width:720px){
  .filter-bar-row{gap:8px}
  .filter-toggle-btn,.fav-filter-chip,.sort-field{min-height:40px;padding:0 12px;font-size:.76rem}
  .sort-field span{display:none}
}