/* ==========================================================================
   NOVACART — DESIGN SYSTEM
   Primary #0F62FE · Secondary #111827 · Accent #14B8A6 · BG #FFFFFF · Text #111111
   Font: Inter (all roles — personality comes from scale/weight/tracking)
   Signature element: "Smart Tiles" — soft gradient rounded tiles carrying
   custom minimal-line device glyphs, replacing stock product photography
   with one consistent illustrated language across the whole store.
   ========================================================================== */

:root {
  --nc-primary: #0F62FE;
  --nc-primary-dark: #0A47C2;
  --nc-secondary: #111827;
  --nc-bg: #FFFFFF;
  --nc-text: #111111;
  --nc-accent: #14B8A6;
  --nc-muted: #6B7280;
  --nc-line: #E5E7EB;
  --nc-tile-1: #EFF4FF;
  --nc-tile-2: #E9FBF7;
  --radius-lg: 1.5rem;
  --radius-md: 1rem;
  --shadow-soft: 0 10px 30px -12px rgba(17,24,39,.12);
  --shadow-soft-lg: 0 25px 60px -20px rgba(17,24,39,.22);
}

html { scroll-behavior: smooth; font-feature-settings: "ss01" on, "cv11" on; }
body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; color: var(--nc-text); background: var(--nc-bg); -webkit-font-smoothing: antialiased; }

.display { font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -.045em; line-height: .98; }
.display-tight { letter-spacing: -.06em; }
.eyebrow { font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; }

/* ---------- Glassmorphism (sparingly: nav + popups only) ---------- */
.glass { background: rgba(255,255,255,.72); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); border-bottom: 1px solid rgba(17,24,39,.06); }
.glass-panel { background: rgba(255,255,255,.85); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid rgba(255,255,255,.5); }

/* ---------- Gradients ---------- */
.grad-primary { background: linear-gradient(135deg,#0F62FE 0%,#4C8DFF 100%); }
.grad-hero { background: radial-gradient(120% 120% at 100% 0%, rgba(20,184,166,.16) 0%, rgba(20,184,166,0) 55%), radial-gradient(90% 90% at 0% 100%, rgba(15,98,254,.14) 0%, rgba(15,98,254,0) 55%), #FFFFFF; }
.grad-cta { background: linear-gradient(135deg,#0F62FE 0%,#0A47C2 100%); }
.grad-dark { background: linear-gradient(160deg,#111827 0%,#1C2536 100%); }
.text-grad { background: linear-gradient(120deg,#0F62FE,#14B8A6); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Smart Tile system (signature element) ---------- */
.tile { position: relative; border-radius: var(--radius-lg); overflow: hidden; display: flex; align-items: center; justify-content: center; isolation: isolate; }
.tile-blue { background: linear-gradient(150deg,#EAF1FF 0%,#DCE8FF 100%); }
.tile-teal { background: linear-gradient(150deg,#E7FBF6 0%,#D6F5EC 100%); }
.tile-dark { background: linear-gradient(150deg,#1B2434 0%,#111827 100%); }
.tile::after { content:""; position:absolute; inset:0; background: radial-gradient(60% 60% at 30% 20%, rgba(255,255,255,.55), rgba(255,255,255,0) 60%); pointer-events:none; }
.tile-glyph { position:absolute; width:60%; height:60%; transition: opacity .45s ease, transform .6s cubic-bezier(.16,1,.3,1); }
.tile-glyph.tile-base { position: relative; opacity:1; }
.tile:hover .tile-glyph.tile-base { opacity:0; transform: scale(.94) rotate(2deg); }
.tile-glyph.tile-alt { opacity:0; transform: scale(1.08) rotate(-2deg); }
.tile:hover .tile-glyph.tile-alt { opacity:1; transform: scale(1) rotate(0); }

/* ---------- Cards ---------- */
.card-product { border:1px solid var(--nc-line); border-radius: var(--radius-lg); background:#fff; transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease; }
.card-product:hover { box-shadow: var(--shadow-soft-lg); transform: translateY(-4px); border-color: rgba(15,98,254,.18); }

.btn-primary { background: var(--nc-primary); color:#fff; transition: background .25s ease, transform .2s ease; }
.btn-primary:hover { background: var(--nc-primary-dark); }
.btn-primary:active { transform: scale(.97); }
.btn-outline { border:1.5px solid var(--nc-secondary); color: var(--nc-secondary); transition: all .25s ease; }
.btn-outline:hover { background: var(--nc-secondary); color:#fff; }

.badge-sale { background:#FEE2E2; color:#B91C1C; }
.badge-new { background: var(--nc-tile-2); color:#0F766E; }
.badge-ship { background: var(--nc-tile-1); color: var(--nc-primary-dark); }

/* ---------- Trust badge marquee ---------- */
.marquee-track { display:flex; width:max-content; animation: marquee 32s linear infinite; }
@keyframes marquee { from{transform:translateX(0);} to{transform:translateX(-50%);} }
.marquee-wrap:hover .marquee-track { animation-play-state: paused; }

/* ---------- Nav underline ---------- */
.nav-link { position: relative; }
.nav-link::after { content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background: var(--nc-primary); transition: width .25s ease; }
.nav-link:hover::after { width:100%; }

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

/* ---------- Cart drawer ---------- */
#cart-drawer { transform: translateX(100%); transition: transform .4s cubic-bezier(.16,1,.3,1); }
#cart-drawer.open { transform: translateX(0); }
#cart-overlay { opacity:0; pointer-events:none; transition: opacity .3s ease; }
#cart-overlay.open { opacity:1; pointer-events:auto; }

/* ---------- Popups / toasts ---------- */
#exit-popup, #recent-purchase-toast, #newsletter-toast { transition: opacity .35s ease, transform .35s ease; }

.stars { color:#F59E0B; }

::-webkit-scrollbar { width:8px; height:8px; }
::-webkit-scrollbar-thumb { background:#D1D5DB; border-radius:10px; }
::-webkit-scrollbar-track { background:transparent; }

#back-to-top { opacity:0; pointer-events:none; transition: opacity .3s ease, transform .3s ease; }
#back-to-top.show { opacity:1; pointer-events:auto; }

a:focus-visible, button:focus-visible, input:focus-visible { outline:2px solid var(--nc-primary); outline-offset:2px; border-radius:4px; }

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

.container-nc { max-width: 1400px; }
.section-pad { padding-top: 6rem; padding-bottom: 6rem; }
@media (max-width: 768px) { .section-pad { padding-top: 3.5rem; padding-bottom: 3.5rem; } }