/* ============================================================
   UI PRO: classy touches (icons, scroll reveal, wishlist heart, sticky buy button, WhatsApp, polish)
   EDIT HERE: timings and sizes. Loaded after interactions.css.
   ============================================================ */
.ic{width:1.05em;height:1.05em;vertical-align:-.16em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.card .img>.ic-phone,.ci .e>.ic-phone{width:3rem;height:3rem;color:#94A3B8;stroke-width:1.5}
.ci .e img{width:100%;height:100%;object-fit:cover;border-radius:8px}

/* scroll reveal: elements rise in once, as they enter the screen */
.rv:not(.in){opacity:0}
.rv.in{opacity:1;animation:rvIn .55s cubic-bezier(.22,.8,.3,1) backwards}
@keyframes rvIn{from{opacity:0;transform:translateY(18px)}}
/* cards animated by GSAP (ui-extras.js): turn off the CSS fades and let --gy slide the card */
.card.gs{animation:none!important;translate:0 var(--gy,0px)}

/* wishlist heart on every card */
.card .img{position:relative}
.heart{position:absolute;right:8px;bottom:8px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;color:#475569;display:flex;align-items:center;justify-content:center;padding:0;box-shadow:0 2px 8px rgba(11,18,32,.12);z-index:3;transition:transform .15s,color .15s}
.heart .ic{width:18px;height:18px}
.heart.on{color:#E11D48}.heart.on .ic{fill:currentColor}
.heart.pop{animation:heartPop .42s cubic-bezier(.175,.885,.32,1.275)}
@keyframes heartPop{40%{transform:scale(1.35)}}

/* sticky "Add to cart" at the bottom of the phone popup (always reachable on small phones) */
#modalBox>.btn[data-add]{position:sticky;bottom:0;z-index:2;box-shadow:0 -12px 14px -8px #fff}

/* cart rows slide in */
.ci{animation:ciIn .22s ease-out}
@keyframes ciIn{from{opacity:0;transform:translateX(10px)}}

/* header gets a soft shadow once you scroll */
.hdr{transition:box-shadow .2s}.hdr.scrolled{box-shadow:0 6px 20px rgba(11,18,32,.08)}

/* floating WhatsApp help button (shows only when WHATSAPP_NUMBER is set in .env) */
.wa{position:fixed;right:16px;bottom:88px;z-index:30;display:flex;align-items:center;gap:8px;background:#0B7A53;color:#fff;border-radius:99px;padding:12px 16px;font-weight:700;font-size:.9rem;box-shadow:0 10px 24px rgba(7,94,64,.35);text-decoration:none;transition:transform .15s}
.wa:hover{transform:translateY(-2px)}.wa .ic{width:20px;height:20px}
@media(min-width:900px){.wa{bottom:24px}}

@media(prefers-reduced-motion:reduce){.rv:not(.in){opacity:1}.rv.in,.ci,.heart.pop{animation:none}}
.hdr{z-index:50}
@media(max-width:600px){.wa{padding:13px;bottom:84px}.wa{font-size:0}.wa .ic{width:22px;height:22px}}