/* ==========================================================
   IPLUG STORE — Design Tokens & Shared Styles
   Palette: White #FFFFFF · Black #0A0A0A · Blue #0066FF
   ========================================================== */

:root{
  --c-white:#ffffff;
  --c-black:#0a0a0a;
  --c-blue:#0066ff;
  --c-blue-dark:#0047b3;
  --c-blue-light:#e8f0ff;
  --c-gray-50:#f7f8fa;
  --c-gray-100:#eef1f5;
  --c-gray-300:#d7dce3;
  --c-gray-500:#7a8290;
  --c-gray-700:#3b4250;
  --radius-sm:10px;
  --radius-md:16px;
  --radius-lg:24px;
  --shadow-sm:0 2px 10px rgba(10,10,10,0.05);
  --shadow-md:0 8px 30px rgba(10,10,10,0.08);
  --shadow-lg:0 20px 60px rgba(10,10,10,0.12);
  --shadow-blue:0 10px 30px rgba(0,102,255,0.25);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color:var(--c-black);
  background:var(--c-white);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- Utility layer ---------- */
.container-x{ max-width:1280px; margin:0 auto; padding-left:20px; padding-right:20px; }
.text-blue{ color:var(--c-blue); }
.bg-blue{ background:var(--c-blue); }
.section-pad{ padding-top:88px; padding-bottom:88px; }
@media (max-width:768px){ .section-pad{ padding-top:56px; padding-bottom:56px; } }

/* ---------- Sticky header ---------- */
#site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,0.85);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--c-gray-100);
  transition:box-shadow .3s ease;
}
#site-header.scrolled{ box-shadow:var(--shadow-sm); }

.nav-link{
  position:relative; font-weight:500; color:var(--c-black); font-size:14.5px;
  padding:8px 2px; transition:color .2s ease;
}
.nav-link::after{
  content:""; position:absolute; left:0; bottom:2px; width:0; height:2px;
  background:var(--c-blue); transition:width .25s ease;
}
.nav-link:hover{ color:var(--c-blue); }
.nav-link:hover::after{ width:100%; }
.nav-link.active{ color:var(--c-blue); }
.nav-link.active::after{ width:100%; }

/* Mega menu */
.mega-menu{
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s;
}
.group:hover .mega-menu, .mega-menu:hover{
  opacity:1; visibility:visible; transform:translateY(0);
}

/* ---------- Buttons ---------- */
.btn{
  position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center;
  gap:8px; font-weight:600; font-size:15px; border-radius:999px; padding:14px 28px;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  cursor:pointer; white-space:nowrap;
}
.btn:active{ transform:scale(0.97); }
.btn-primary{ background:var(--c-blue); color:#fff; box-shadow:var(--shadow-blue); }
.btn-primary:hover{ background:var(--c-blue-dark); box-shadow:0 14px 34px rgba(0,102,255,.32); transform:translateY(-2px); }
.btn-dark{ background:var(--c-black); color:#fff; }
.btn-dark:hover{ background:#1e1e1e; transform:translateY(-2px); }
.btn-outline{ background:transparent; color:var(--c-black); border:1.5px solid var(--c-gray-300); }
.btn-outline:hover{ border-color:var(--c-blue); color:var(--c-blue); transform:translateY(-2px); }
.btn-whatsapp{ background:#25D366; color:#fff; }
.btn-whatsapp:hover{ background:#1ebe5a; transform:translateY(-2px); box-shadow:0 14px 30px rgba(37,211,102,.32); }
.btn-sm{ padding:9px 18px; font-size:13.5px; }

/* Ripple */
.ripple{ position:absolute; border-radius:50%; transform:scale(0); animation:ripple-anim .6s linear; background:rgba(255,255,255,0.55); pointer-events:none; }
.btn-outline .ripple, .btn-outline.ripple-dark .ripple{ background:rgba(0,102,255,0.18); }
@keyframes ripple-anim{ to{ transform:scale(3); opacity:0; } }

/* ---------- Cards ---------- */
.card{
  background:#fff; border-radius:var(--radius-md); border:1px solid var(--c-gray-100);
  box-shadow:var(--shadow-sm); transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:var(--c-gray-100); }
.product-card img{ transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.product-card:hover img{ transform:scale(1.06); }

.badge{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.03em;
  padding:5px 11px; border-radius:999px; text-transform:uppercase;
}
.badge-new{ background:var(--c-blue-light); color:var(--c-blue); }
.badge-sale{ background:#0a0a0a; color:#fff; }
.badge-best{ background:#fff4d9; color:#8a6400; }

/* ---------- Animations (scroll reveal handled by AOS, these are extras) ---------- */
.hover-lift{ transition:transform .3s ease, box-shadow .3s ease; }
.hover-lift:hover{ transform:translateY(-4px); }

@keyframes fadeInUp{ from{ opacity:0; transform:translateY(24px);} to{ opacity:1; transform:translateY(0);} }
.fade-up{ animation:fadeInUp .7s ease both; }

@keyframes floatY{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-10px);} }
.float-y{ animation:floatY 4s ease-in-out infinite; }

@keyframes pulseRing{ 0%{ box-shadow:0 0 0 0 rgba(37,211,102,.55);} 70%{ box-shadow:0 0 0 14px rgba(37,211,102,0);} 100%{ box-shadow:0 0 0 0 rgba(37,211,102,0);} }
.pulse-ring{ animation:pulseRing 2.2s infinite; }

/* Image reveal */
.reveal-img{ position:relative; overflow:hidden; }
.reveal-img::before{
  content:""; position:absolute; inset:0; background:var(--c-white); transform-origin:left;
  animation:revealSweep 1s cubic-bezier(.65,0,.35,1) forwards;
}
@keyframes revealSweep{ to{ transform:scaleX(0); } }

/* Loading spinner */
.spinner{
  width:44px; height:44px; border-radius:50%;
  border:4px solid var(--c-gray-100); border-top-color:var(--c-blue);
  animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
#page-loader{
  position:fixed; inset:0; z-index:9999; background:#fff; display:flex; align-items:center; justify-content:center;
  transition:opacity .4s ease, visibility .4s ease;
}
#page-loader.hidden{ opacity:0; visibility:hidden; }

/* Page transition overlay */
#page-transition{
  position:fixed; inset:0; z-index:9998; background:var(--c-black); transform:translateY(101%);
  transition:transform .5s cubic-bezier(.65,0,.35,1); pointer-events:none;
}
#page-transition.active{ transform:translateY(0); }

/* ---------- Counters ---------- */
.counter{ font-weight:800; font-size:2.6rem; color:var(--c-black); }

/* ---------- WhatsApp float ---------- */
#wa-float{
  position:fixed; bottom:22px; right:22px; z-index:200;
  width:60px; height:60px; border-radius:50%; background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px rgba(37,211,102,.4);
  transition:transform .25s ease;
}
#wa-float:hover{ transform:scale(1.08); }

/* ---------- Back to top ---------- */
#back-to-top{
  position:fixed; bottom:22px; left:22px; z-index:200; width:46px; height:46px; border-radius:50%;
  background:var(--c-black); color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(10px); transition:all .3s ease;
}
#back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* ---------- Cart drawer ---------- */
#cart-overlay{ position:fixed; inset:0; background:rgba(10,10,10,.45); z-index:299; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease; }
#cart-overlay.open{ opacity:1; visibility:visible; }
#cart-drawer{
  position:fixed; top:0; right:0; height:100%; width:100%; max-width:420px; background:#fff; z-index:300;
  transform:translateX(100%); transition:transform .4s cubic-bezier(.65,0,.35,1); box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column;
}
#cart-drawer.open{ transform:translateX(0); }

/* Quantity control */
.qty-btn{ width:28px; height:28px; border-radius:8px; background:var(--c-gray-100); display:flex; align-items:center; justify-content:center; font-weight:700; transition:background .2s; }
.qty-btn:hover{ background:var(--c-blue-light); color:var(--c-blue); }

/* Inputs */
.input-field{
  width:100%; border:1.5px solid var(--c-gray-300); border-radius:var(--radius-sm); padding:12px 16px;
  font-size:14.5px; transition:border-color .2s ease, box-shadow .2s ease; background:#fff;
}
.input-field:focus{ outline:none; border-color:var(--c-blue); box-shadow:0 0 0 4px var(--c-blue-light); }

/* Accordion (FAQ) */
.accordion-body{ max-height:0; overflow:hidden; transition:max-height .35s ease; }
.accordion-item.open .accordion-body{ max-height:400px; }
.accordion-item.open .chev{ transform:rotate(180deg); }
.chev{ transition:transform .3s ease; }

/* Filter chip */
.filter-chip{
  padding:8px 16px; border-radius:999px; border:1.5px solid var(--c-gray-300); font-size:13.5px; font-weight:500;
  transition:all .2s ease; cursor:pointer; user-select:none;
}
.filter-chip.active{ background:var(--c-black); color:#fff; border-color:var(--c-black); }
.filter-chip:hover:not(.active){ border-color:var(--c-blue); color:var(--c-blue); }

/* Lazy image fade */
img.lazy-fade{ opacity:0; transition:opacity .5s ease; }
img.lazy-fade.loaded{ opacity:1; }

/* Skip link */
.skip-link{ position:absolute; left:-999px; top:0; background:var(--c-blue); color:#fff; padding:10px 16px; z-index:9999; border-radius:0 0 8px 0; }
.skip-link:focus{ left:0; }

/* Scrollbar niceties (optional, non-critical) */
::selection{ background:var(--c-blue-light); color:var(--c-blue-dark); }

.no-scrollbar::-webkit-scrollbar{ display:none; }
.no-scrollbar{ -ms-overflow-style:none; scrollbar-width:none; }

/* Focus visibility for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible{ outline:2px solid var(--c-blue); outline-offset:2px; }

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
}