/* ============ Punkiez.Shop - Ultra Modern Design ============ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root{
  --bg-primary:#F8F9FA;
  --bg-secondary:#FFFFFF;
  --bg-tertiary:#F1F3F5;
  --bg-card:#FFFFFF;
  --txt-primary:#1A1F2E;
  --txt-secondary:#4A5568;
  --txt-muted:#718096;
  --accent:#10B981;
  --accent-secondary:#059669;
  --accent-light:#34D399;
  --accent-glow:rgba(16,185,129,0.2);
  --purple:#A855F7;
  --green:#10B981;
  --orange:#F59E0B;
  --red:#EF4444;
  --border:rgba(26,31,46,0.08);
  --border-subtle:rgba(26,31,46,0.05);
  --shadow-sm: 0 1px 2px rgba(26,31,46,0.04);
  --shadow-md: 0 4px 12px rgba(26,31,46,0.06);
  --shadow-lg: 0 12px 24px rgba(26,31,46,0.08);
  --shadow-xl: 0 24px 48px rgba(26,31,46,0.12);
  --shadow-2xl: 0 32px 64px rgba(26,31,46,0.16);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-2xl: 36px;
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-2xl: 64px;
  --spacing-3xl: 96px;
}

/* ============ Base Styles ============ */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  font-size:16px;
  scroll-behavior:smooth;
}

body{
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background:var(--bg-primary);
  color:var(--txt-primary);
  line-height:1.6;
  font-weight:400;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
  min-height:100vh;
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  background:
    radial-gradient(circle at 20% 10%, rgba(99,102,241,0.04) 0%, transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(139,92,246,0.04) 0%, transparent 40%);
  pointer-events:none;
  z-index:0;
}

/* ============ Animated Grid Background ============ */
#bg-particles{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0.3;
}

.orb{
  position:fixed;
  filter:blur(100px);
  opacity:0.08;
  border-radius:50%;
  z-index:1;
  pointer-events:none;
  animation:floatOrb 35s ease-in-out infinite;
}

.orb-a{
  top:10vh;
  left:5vw;
  width:400px;
  height:400px;
  background:radial-gradient(circle, rgba(99,102,241,0.4) 0%, transparent 70%);
  animation-delay:0s;
}

.orb-b{
  bottom:15vh;
  right:10vw;
  width:500px;
  height:500px;
  background:radial-gradient(circle, rgba(139,92,246,0.4) 0%, transparent 70%);
  animation-delay:-12s;
}

.orb-c{
  top:50vh;
  left:50vw;
  width:350px;
  height:350px;
  background:radial-gradient(circle, rgba(16,185,129,0.3) 0%, transparent 70%);
  animation-delay:-24s;
}

@keyframes floatOrb{
  0%, 100%{transform:translate(0, 0) scale(1)}
  25%{transform:translate(-30px, -50px) scale(1.1)}
  50%{transform:translate(40px, -30px) scale(0.9)}
  75%{transform:translate(-25px, 40px) scale(1.05)}
}

main, header, footer, .age-gate{
  position:relative;
  z-index:2;
}

/* ============ Typography ============ */
h1, h2, h3, h4, h5, h6{
  font-weight:800;
  line-height:1.1;
  letter-spacing:-0.02em;
  color:var(--txt-primary);
}

h1{font-size:clamp(48px, 8vw, 80px)}
h2{font-size:clamp(36px, 6vw, 64px)}
h3{font-size:clamp(24px, 4vw, 40px)}
h4{font-size:clamp(20px, 3vw, 28px)}

/* ============ Header ============ */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(248,249,250,0.95);
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--border);
  transition:all 0.3s ease;
}

.header-container{
  max-width:1400px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 32px;
  gap:var(--spacing-lg);
}

/* Logo */
.logo-wrap{
  display:flex;
  align-items:center;
  gap:14px;
  cursor:pointer;
  transition:transform 0.3s ease;
}

.logo-wrap:hover{
  transform:scale(1.02);
}

.logo-image{
  height: 140px;
  width: auto;
  display: block;
  object-fit: contain;
  transition: all 0.3s ease;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.logo-wrap:hover .logo-image{
  filter: drop-shadow(0 4px 8px rgba(16,185,129,0.3));
  transform: translateY(-2px);
}

.logo-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  background:linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.1));
  border-radius:12px;
  transition:all 0.3s ease;
}

.logo-wrap:hover .logo-icon{
  background:linear-gradient(135deg, rgba(99,102,241,0.15), rgba(139,92,246,0.15));
  transform:rotate(-5deg);
}

.logo-icon svg{
  width:28px;
  height:28px;
  transition:transform 0.3s ease;
}

.logo-text-wrap{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.logo-text{
  font-size:20px;
  font-weight:800;
  color:var(--txt-primary);
  letter-spacing:-0.02em;
  line-height:1;
}

.logo-tagline{
  font-size:11px;
  font-weight:500;
  color:var(--txt-muted);
  text-transform:uppercase;
  letter-spacing:0.5px;
}

/* Navigation */
.nav-main{
  display:flex;
  gap:8px;
  align-items:center;
}

.nav-link{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 18px;
  color:var(--txt-secondary);
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  border-radius:var(--radius-md);
  transition:all 0.3s ease;
  position:relative;
}

.nav-link svg{
  width:18px;
  height:18px;
  opacity:0.6;
  transition:opacity 0.3s ease;
}

.nav-link:hover{
  color:var(--accent);
  background:rgba(99,102,241,0.08);
}

.nav-link:hover svg{
  opacity:1;
}

/* Header Actions */
.header-actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.location-btn{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 16px;
  background:transparent;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  color:var(--txt-secondary);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.3s ease;
  font-family:inherit;
}

.location-btn:hover{
  background:var(--bg-secondary);
  border-color:var(--accent);
  color:var(--accent);
}

.location-btn svg{
  width:16px;
  height:16px;
  stroke:currentColor;
}

.search-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  background:transparent;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  color:var(--txt-secondary);
  cursor:pointer;
  transition:all 0.3s ease;
}

.search-btn:hover{
  background:var(--bg-secondary);
  border-color:var(--accent);
  color:var(--accent);
}

.cart-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  background:linear-gradient(135deg, var(--accent), var(--accent-secondary));
  border:none;
  border-radius:var(--radius-md);
  color:#fff;
  cursor:pointer;
  transition:all 0.3s ease;
  position:relative;
  box-shadow:0 4px 12px rgba(99,102,241,0.3);
}

.cart-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(99,102,241,0.4);
}

.cart-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:20px;
  height:20px;
  padding:0 6px;
  background:var(--red);
  color:#fff;
  font-size:11px;
  font-weight:700;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 2px 8px rgba(239,68,68,0.4);
}

/* Mobile Menu Button */
.mobile-menu-btn{
  display:none;
  flex-direction:column;
  gap:5px;
  width:40px;
  height:40px;
  background:transparent;
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:8px;
  cursor:pointer;
  transition:all 0.3s ease;
}

.mobile-menu-btn span{
  display:block;
  width:100%;
  height:2px;
  background:var(--txt-primary);
  border-radius:2px;
  transition:all 0.3s ease;
}

.mobile-menu-btn:hover{
  background:var(--bg-secondary);
  border-color:var(--accent);
}

.mobile-menu-btn:hover span{
  background:var(--accent);
}

/* Mobile Navigation */
.mobile-nav{
  display:none;
  max-height:0;
  overflow:hidden;
  transition:max-height 0.3s ease;
  background:var(--bg-secondary);
  border-bottom:1px solid var(--border);
}

.mobile-nav.active{
  display:block;
  max-height:400px;
  padding:var(--spacing-md);
}

.mobile-nav-link{
  display:block;
  padding:14px 20px;
  color:var(--txt-secondary);
  text-decoration:none;
  font-size:15px;
  font-weight:600;
  border-radius:var(--radius-md);
  margin-bottom:8px;
  transition:all 0.3s ease;
}

.mobile-nav-link:hover{
  background:var(--bg-card);
  color:var(--accent);
}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 28px;
  border-radius:var(--radius-md);
  border:none;
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  letter-spacing:0.3px;
  cursor:pointer;
  transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration:none;
  white-space:nowrap;
  position:relative;
}

.btn::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.1), transparent);
  opacity:0;
  transition:opacity 0.3s;
  border-radius:var(--radius-md);
}

.btn:hover::before{
  opacity:1;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(99,102,241,0.25);
}

.btn:active{
  transform:translateY(0) scale(0.98);
}

.btn-primary{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%);
  color:#fff;
  box-shadow:0 4px 16px rgba(99,102,241,0.3);
  border:1px solid rgba(255,255,255,0.2);
}

.btn-primary:hover{
  box-shadow:0 8px 32px rgba(99,102,241,0.4), 0 0 60px rgba(99,102,241,0.2);
  transform:translateY(-3px);
}

.btn-ghost{
  background:rgba(255,255,255,0.7);
  color:var(--txt-primary);
  border:1px solid var(--border);
  backdrop-filter:blur(10px);
}

.btn-ghost:hover{
  background:rgba(255,255,255,0.95);
  border-color:var(--accent);
  box-shadow:0 4px 20px rgba(99,102,241,0.2);
}

.btn.small{
  padding:10px 20px;
  font-size:12px;
}

.btn.large, .btn-lg{
  padding:18px 40px;
  font-size:16px;
  gap:12px;
}

.btn-outline{
  background:transparent;
  border:2px solid var(--border);
  color:var(--txt-primary);
}

.btn-outline:hover{
  background:var(--bg-secondary);
  border-color:var(--accent);
  color:var(--accent);
}

/* ============ Hero ============ */.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(59,130,246,0.25);
}

.btn:active{
  transform:translateY(0) scale(0.98);
}

.btn-primary{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%);
  color:#fff;
  box-shadow:0 4px 16px rgba(59,130,246,0.3);
  border:1px solid rgba(255,255,255,0.2);
}

.btn-primary:hover{
  box-shadow:0 8px 32px rgba(59,130,246,0.4), 0 0 60px rgba(59,130,246,0.2);
  transform:translateY(-3px);
}

.btn-ghost{
  background:rgba(255,255,255,0.7);
  color:var(--txt-primary);
  border:1px solid var(--border);
  backdrop-filter:blur(10px);
}

.btn-ghost:hover{
  background:rgba(255,255,255,0.95);
  border-color:var(--accent);
  box-shadow:0 4px 20px rgba(59,130,246,0.2);
}

.btn.small{
  padding:10px 20px;
  font-size:12px;
}

.btn.large, .btn-lg{
  padding:18px 40px;
  font-size:16px;
  gap:12px;
}

.btn-outline{
  background:transparent;
  border:2px solid var(--border);
  color:var(--txt-primary);
}

.btn-outline:hover{
  background:var(--bg-secondary);
  border-color:var(--accent);
  color:var(--accent);
}

/* ============ Hero ============ */
.hero{
  padding:var(--spacing-3xl) var(--spacing-lg) var(--spacing-2xl);
  max-width:1400px;
  margin:0 auto;
  position:relative;
  overflow:hidden;
}

.hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--spacing-2xl);
  align-items:center;
}

.hero-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 16px;
  background:linear-gradient(135deg, rgba(99,102,241,0.1), rgba(139,92,246,0.1));
  border:1px solid rgba(99,102,241,0.2);
  border-radius:100px;
  font-size:13px;
  font-weight:600;
  color:var(--accent);
  margin-bottom:var(--spacing-md);
}

.hero-badge svg{
  width:16px;
  height:16px;
  stroke:var(--accent);
}

.hero-title{
  font-size:clamp(42px, 6vw, 72px);
  font-weight:900;
  letter-spacing:-0.03em;
  line-height:1.1;
  color:var(--txt-primary);
  margin:0 0 var(--spacing-md) 0;
}

.gradient-text{
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-secondary) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  display:inline-block;
}

.hero-description{
  font-size:20px;
  line-height:1.6;
  color:var(--txt-secondary);
  margin:0 0 var(--spacing-xl) 0;
  max-width:540px;
}

.hero-stats{
  display:flex;
  align-items:center;
  gap:var(--spacing-lg);
  margin-bottom:var(--spacing-xl);
  padding:var(--spacing-md) 0;
}

.stat-item{
  text-align:left;
}

.stat-number{
  font-size:32px;
  font-weight:800;
  color:var(--txt-primary);
  line-height:1;
  margin-bottom:4px;
}

.stat-label{
  font-size:13px;
  color:var(--txt-muted);
  font-weight:500;
}

.stat-divider{
  width:1px;
  height:40px;
  background:var(--border);
}

.hero-actions{
  display:flex;
  gap:var(--spacing-sm);
  flex-wrap:wrap;
}

.hero-visual{
  position:relative;
  height:600px;
}

.product-showcase{
  position:relative;
  width:100%;
  height:100%;
}

.showcase-card{
  position:absolute;
  background:var(--bg-card);
  border-radius:var(--radius-2xl);
  overflow:hidden;
  box-shadow:var(--shadow-2xl);
  border:1px solid var(--border);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.showcase-card:hover{
  transform:translateY(-12px) scale(1.02);
  box-shadow:0 40px 80px rgba(26,31,46,0.2);
}

.card-1{
  top:10%;
  right:5%;
  width:55%;
  z-index:2;
  animation:float 6s ease-in-out infinite;
}

.card-2{
  bottom:15%;
  left:0;
  width:48%;
  z-index:1;
  animation:float 6s ease-in-out infinite 3s;
}

@keyframes float{
  0%, 100%{transform:translateY(0)}
  50%{transform:translateY(-20px)}
}

.product-image{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  padding-top: 12px;
}

.product-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.08));
  border-radius:var(--radius-lg);
}

.product-placeholder svg{
  stroke:var(--accent);
  opacity:0.4;
}

.card-badge{
  position:absolute;
  top:16px;
  left:16px;
  padding:8px 16px;
  background:linear-gradient(135deg, var(--accent), var(--accent-secondary));
  color:#fff;
  font-size:12px;
  font-weight:700;
  border-radius:100px;
  box-shadow:0 4px 12px rgba(99,102,241,0.4);
}

.floating-tag{
  position:absolute;
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 20px;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:100px;
  font-size:14px;
  font-weight:600;
  color:var(--txt-primary);
  box-shadow:var(--shadow-lg);
  animation:floatTag 4s ease-in-out infinite;
}

.floating-tag svg{
  width:16px;
  height:16px;
  stroke:var(--accent);
}

.tag-1{
  top:20%;
  left:-5%;
  animation-delay:0s;
}

.tag-2{
  bottom:20%;
  right:-5%;
  animation-delay:2s;
}

@keyframes floatTag{
  0%, 100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-15px) rotate(2deg)}
}

/* ============ Sections ============ */
.section{
  padding:var(--spacing-3xl) var(--spacing-lg);
  max-width:1400px;
  margin:0 auto;
  position:relative;
}

.section-alt{
  background:#FAFBFC;
  position:relative;
}

.section-head{
  text-align:center;
  margin-bottom:var(--spacing-2xl);
}

.section-title{
  font-size:clamp(36px, 5vw, 56px);
  font-weight:900;
  margin:0 0 16px 0;
  background:linear-gradient(135deg, var(--txt-primary) 0%, var(--accent) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.section-subtitle{
  font-size:20px;
  font-weight:400;
  color:var(--txt-secondary);
  margin:0 auto;
  max-width:600px;
  line-height:1.6;
}

.accent{
  background:linear-gradient(135deg, var(--accent), var(--accent-secondary));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:800;
}

/* Delivery Estimate Box */
.delivery-estimate{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  border-radius:var(--radius-lg);
  margin:48px auto;
  max-width:700px;
  gap:32px;
  background:var(--bg-card);
  border:1px solid var(--border);
  box-shadow:0 10px 30px rgba(59,130,246,0.12), 0 4px 12px rgba(15,23,42,0.05);
  position:relative;
  overflow:hidden;
}

.delivery-estimate::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(59,130,246,0.08) 0%, transparent 50%, rgba(139,92,246,0.08) 100%);
  opacity:1;
}

.estimate-icon svg{
  width:44px;
  height:44px;
  stroke:var(--accent);
  filter:drop-shadow(0 4px 12px rgba(59,130,246,0.35));
}

.estimate-info, .estimate-price{
  text-align:left;
  position:relative;
  z-index:1;
}

.estimate-info strong, .estimate-price strong{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--txt-muted);
  margin-bottom:6px;
  font-weight:600;
}

.estimate-info span, .estimate-price span{
  display:block;
  font-size:24px;
  font-weight:800;
  background:linear-gradient(135deg, var(--accent), var(--purple));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.cta-row{
  display:flex;
  gap:16px;
  justify-content:center;
  margin:48px 0;
  flex-wrap:wrap;
}

/* Trust Badges */
.trust-badges{
  display:flex;
  gap:48px;
  justify-content:center;
  margin-top:80px;
  flex-wrap:wrap;
}

.badge{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--txt-secondary);
  font-size:14px;
  transition:all 0.3s;
}

.badge:hover{
  color:var(--txt-primary);
  transform:translateY(-4px);
}

.badge-icon{
  width:48px;
  height:48px;
  background:linear-gradient(135deg, rgba(59,130,246,0.1), rgba(139,92,246,0.1));
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  box-shadow:var(--shadow-sm);
}

.badge-icon::before{
  content:'';
  position:absolute;
  inset:-1px;
  background:linear-gradient(135deg, var(--accent), var(--accent-secondary));
  border-radius:var(--radius-md);
  opacity:0;
  transition:opacity 0.3s;
  z-index:-1;
}

.badge:hover .badge-icon::before{
  opacity:0.15;
}

.badge-icon svg{
  stroke:var(--accent);
  width:24px;
  height:24px;
  filter:drop-shadow(0 2px 8px rgba(59,130,246,0.3));
}

/* ============ Sections ============ */
.section{
  padding:100px 32px;
  max-width:1400px;
  margin:0 auto;
  position:relative;
}

.section-alt{
  background:#FAFBFC;
  position:relative;
}

.section-alt::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--border) 50%, transparent);
}

.section-head{
  text-align:center;
  margin-bottom:64px;
}

.section-title{
  font-size:clamp(36px, 6vw, 64px);
  font-weight:900;
  margin:0 0 16px 0;
  background:linear-gradient(135deg, var(--txt-primary) 0%, var(--accent) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.section-subtitle{
  font-size:20px;
  font-weight:400;
  color:var(--txt-secondary);
  margin:0;
  max-width:600px;
  margin:0 auto;
  line-height:1.6;
}

.accent{
  background:linear-gradient(135deg, var(--accent), var(--accent-secondary));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-weight:800;
}

/* ============ Categories Grid ============ */
.categories-grid{
  display:grid;
  gap:20px;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  max-width:1400px;
  margin:0 auto;
}

.category-card{
  padding:40px 32px;
  border-radius:var(--radius-lg);
  text-align:center;
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor:pointer;
  background:var(--bg-card);
  border:1px solid var(--border);
  position:relative;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}

.category-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, var(--accent-glow), transparent);
  opacity:0;
  transition:opacity 0.4s;
}

.category-card::after{
  content:'';
  position:absolute;
  inset:-1px;
  background:linear-gradient(135deg, var(--accent), var(--purple));
  border-radius:var(--radius-lg);
  opacity:0;
  transition:opacity 0.4s;
  z-index:-1;
}

.category-card:hover::before{
  opacity:0.1;
}

.category-card:hover::after{
  opacity:1;
}

.category-card:hover{
  transform:translateY(-12px) scale(1.03);
  box-shadow:0 20px 40px rgba(15,23,42,0.12), 0 0 80px rgba(59,130,246,0.15);
}

.category-icon{
  margin-bottom:24px;
  position:relative;
  z-index:1;
}

.category-icon svg{
  width:56px;
  height:56px;
  stroke:var(--accent);
  filter:drop-shadow(0 4px 12px rgba(59,130,246,0.3));
  transition:all 0.4s;
}

.category-card:hover .category-icon svg{
  transform:scale(1.15) rotate(8deg);
  filter:drop-shadow(0 8px 20px rgba(59,130,246,0.5));
}

.category-card h3{
  margin:0 0 12px 0;
  font-size:24px;
  font-weight:700;
  position:relative;
  z-index:1;
  color:var(--txt-primary);
}

.category-card p{
  color:var(--txt-secondary);
  font-size:14px;
  margin:0 0 20px 0;
  line-height:1.6;
  position:relative;
  z-index:1;
}

/* ============ Filter Bar ============ */
.filter-bar{
  display:flex;
  gap:12px;
  justify-content:center;
  padding:20px;
  border-radius:var(--radius-lg);
  margin-top:32px;
  flex-wrap:wrap;
  background:var(--bg-card);
  border:1px solid var(--border);
}

.filter-btn{
  padding:12px 24px;
  border-radius:var(--radius-md);
  background:transparent;
  border:1px solid var(--border);
  color:var(--txt-secondary);
  cursor:pointer;
  transition:all 0.3s;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
  position:relative;
}

.filter-btn::before{
  content:'';
  position:absolute;
  inset:-1px;
  background:linear-gradient(135deg, var(--accent), var(--purple));
  border-radius:var(--radius-md);
  opacity:0;
  transition:opacity 0.3s;
  z-index:-1;
}

.filter-btn:hover{
  color:var(--txt-primary);
  border-color:transparent;
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(59,130,246,0.2);
}

.filter-btn:hover::before{
  opacity:0.15;
}

.filter-btn.active{
  color:#fff;
  border-color:transparent;
  box-shadow:0 4px 16px rgba(59,130,246,0.35);
}

.filter-btn.active::before{
  opacity:1;
}

/* ============ Products Grid ============ */
.products-grid{
  display:grid;
  gap:24px;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  max-width:1400px;
  margin:0 auto;
}

.product-card{
  border-radius:var(--radius-lg);
  padding:0;
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--bg-card);
  border:1px solid var(--border);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}

.product-card::after{
  content:'';
  position:absolute;
  inset:-1px;
  background:linear-gradient(135deg, var(--accent), var(--purple));
  border-radius:var(--radius-lg);
  opacity:0;
  transition:opacity 0.4s;
  z-index:-1;
}

.product-card:hover{
  transform:translateY(-12px);
  box-shadow:0 20px 40px rgba(15,23,42,0.15), 0 0 100px rgba(59,130,246,0.2);
}

.product-card:hover::after{
  opacity:0.7;
}

.product-badge{
  position:absolute;
  top:16px;
  right:16px;
  padding:8px 14px;
  border-radius:8px;
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  background:linear-gradient(135deg, var(--accent), var(--accent-secondary));
  color:#fff;
  z-index:3;
  box-shadow:0 4px 12px rgba(59,130,246,0.35);
}

.product-badge.new{
  background:linear-gradient(135deg, var(--green), #059669);
}

.product-badge.sale{
  background:linear-gradient(135deg, var(--red), #DC2626);
}

.product-image{
  position:relative;
  border-radius:0;
  overflow:hidden;
  aspect-ratio:1;
  background:var(--bg-secondary);
  padding-top: 12px;
}

.product-img-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  background:linear-gradient(135deg, rgba(59,130,246,0.08), rgba(139,92,246,0.08));
}

.product-img-placeholder.sativa-grad{
  background:linear-gradient(135deg, rgba(34,197,94,0.15), rgba(52,211,153,0.08));
}

.product-img-placeholder.hybrid-grad{
  background:linear-gradient(135deg, rgba(249,115,22,0.15), rgba(251,191,36,0.08));
}

.strain-initial{
  font-size:100px;
  font-weight:900;
  color:rgba(0,0,0,0.03);
  letter-spacing:-0.05em;
}

.wishlist-btn{
  position:absolute;
  top:16px;
  left:16px;
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(10px);
  border:1px solid var(--border);
  font-size:20px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:all 0.3s;
  color:var(--txt-primary);
  box-shadow:var(--shadow-sm);
}

.wishlist-btn:hover{
  transform:scale(1.15);
  background:#fff;
  box-shadow:var(--shadow-md);
}

.product-info{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:24px;
}

.product-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  margin-bottom:12px;
  gap:12px;
}

.product-header h3{
  margin:0;
  font-size:20px;
  font-weight:700;
  line-height:1.3;
  flex:1;
  color:var(--txt-primary);
}

.pill{
  font-size:10px;
  padding:6px 10px;
  border-radius:6px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.03);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.5px;
  flex-shrink:0;
}

.pill-indica{
  background:rgba(168,85,247,0.15);
  border-color:rgba(168,85,247,0.3);
  color:var(--purple);
  box-shadow:0 0 12px rgba(168,85,247,0.2);
}

.pill-sativa{
  background:rgba(16,185,129,0.15);
  border-color:rgba(16,185,129,0.3);
  color:var(--green);
  box-shadow:0 0 12px rgba(16,185,129,0.2);
}

.pill-hybrid{
  background:rgba(245,158,11,0.15);
  border-color:rgba(245,158,11,0.3);
  color:var(--orange);
  box-shadow:0 0 12px rgba(245,158,11,0.2);
}

.product-stats{
  display:flex;
  gap:16px;
  margin-bottom:12px;
  font-size:13px;
  color:var(--txt-secondary);
}

.thc{
  font-weight:700;
  color:var(--accent);
}

.rating{
  color:var(--orange);
}

.product-desc{
  font-size:14px;
  color:var(--txt-secondary);
  line-height:1.6;
  margin:0 0 16px 0;
}

.product-effects{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:20px;
}

.effect{
  font-size:11px;
  padding:6px 12px;
  border-radius:6px;
  background:rgba(0,102,255,0.05);
  color:var(--accent);
  border:1px solid rgba(0,102,255,0.15);
  font-weight:500;
  text-transform:capitalize;
}

.product-footer{
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding-top:20px;
  border-top:1px solid var(--border);
}

.price{
  display:flex;
  flex-direction:column;
}

.price-label{
  font-size:11px;
  color:var(--txt-muted);
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:600;
}

.price-value{
  font-size:28px;
  font-weight:900;
  color:var(--txt-primary);
}

.old-price{
  font-size:16px;
  color:var(--txt-muted);
  text-decoration:line-through;
  margin-left:8px;
  font-weight:400;
}

/* ============ Delivery Info ============ */
.delivery-info{
  max-width:1400px;
  margin:0 auto;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}

.delivery-map{
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--bg-card);
  border:1px solid var(--border);
  box-shadow:var(--shadow-md);
}

.map-placeholder{
  aspect-ratio:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:48px;
  background:linear-gradient(135deg, rgba(0,102,255,0.02), rgba(123,47,255,0.02));
}

.map-marker svg{
  width:80px;
  height:80px;
  stroke:var(--accent);
  margin-bottom:24px;
  filter:drop-shadow(0 0 12px var(--accent-glow));
}

.delivery-details h3{
  margin:0 0 40px 0;
  font-size:36px;
  font-weight:900;
  color:var(--txt-primary);
}

.delivery-feature{
  display:flex;
  gap:20px;
  margin-bottom:32px;
  align-items:flex-start;
}

.feature-icon{
  width:56px;
  height:56px;
  background:var(--bg-secondary);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:var(--shadow-sm);
}

.feature-icon svg{
  width:28px;
  height:28px;
  stroke:var(--accent);
  filter:drop-shadow(0 0 4px var(--accent-glow));
}

.delivery-feature strong{
  display:block;
  margin-bottom:6px;
  font-size:18px;
  font-weight:700;
  color:var(--txt-primary);
}

.delivery-feature p{
  margin:0;
  font-size:14px;
  color:var(--txt-secondary);
  line-height:1.6;
}

.address-checker{
  margin-top:40px;
  padding-top:40px;
  border-top:1px solid var(--border);
}

.address-input{
  width:100%;
  padding:16px 20px;
  border-radius:var(--radius-md);
  background:var(--bg-tertiary);
  border:1px solid var(--border);
  color:var(--txt-primary);
  font-size:15px;
  font-family:inherit;
  margin-bottom:16px;
  transition:all 0.3s;
}

.address-input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-glow), 0 0 20px var(--accent-glow);
  background:var(--bg-card);
}

.address-input::placeholder{
  color:var(--txt-muted);
}

.delivery-result{
  margin-top:16px;
  font-weight:700;
  color:var(--green);
  font-size:15px;
}

/* ============ Rewards ============ */
/* ============ Rewards Section ============ */
.rewards-section{
  background:linear-gradient(180deg, transparent 0%, var(--bg-secondary) 50%, transparent 100%);
  padding:var(--spacing-3xl) 0;
}

.rewards-showcase{
  max-width:1400px;
  margin:0 auto;
  padding:0 var(--spacing-md);
}

/* Rewards Hero */
.rewards-hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--spacing-xl);
  align-items:center;
  background:var(--bg-card);
  border-radius:var(--radius-xl);
  padding:var(--spacing-xl);
  margin-bottom:var(--spacing-2xl);
  border:1px solid var(--border);
  box-shadow:var(--shadow-lg);
  position:relative;
  overflow:hidden;
}

.rewards-hero::before{
  content:'';
  position:absolute;
  top:0;
  right:0;
  width:400px;
  height:400px;
  background:radial-gradient(circle, rgba(99,102,241,0.08), transparent);
  pointer-events:none;
}

.rewards-hero-content .rewards-icon{
  width:64px;
  height:64px;
  background:linear-gradient(135deg, var(--accent), var(--accent-secondary));
  border-radius:var(--radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:var(--spacing-md);
  box-shadow:0 8px 24px var(--accent-glow);
}

.rewards-hero-content .rewards-icon svg{
  stroke:#fff;
}

.rewards-hero-content h3{
  font-size:36px;
  font-weight:800;
  margin:0 0 var(--spacing-sm) 0;
  color:var(--txt-primary);
}

.rewards-hero-text{
  font-size:18px;
  color:var(--txt-secondary);
  line-height:1.7;
  margin-bottom:var(--spacing-lg);
}

.rewards-stats-mini{
  display:flex;
  gap:var(--spacing-lg);
  margin-bottom:var(--spacing-lg);
}

.mini-stat{
  flex:1;
}

.mini-stat-value{
  font-size:28px;
  font-weight:800;
  color:var(--accent);
  margin-bottom:4px;
}

.mini-stat-label{
  font-size:14px;
  color:var(--txt-muted);
  font-weight:500;
}

.rewards-hero-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--spacing-xl);
}

.points-circle{
  position:relative;
  width:200px;
  height:200px;
}

.points-inner{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  text-align:center;
}

.points-amount{
  font-size:48px;
  font-weight:900;
  color:var(--accent);
  line-height:1;
}

.points-label{
  font-size:14px;
  color:var(--txt-muted);
  text-transform:uppercase;
  letter-spacing:1px;
  font-weight:600;
}

.points-ring{
  width:100%;
  height:100%;
  transform:rotate(0deg);
  animation:rotateRing 20s linear infinite;
}

@keyframes rotateRing{
  to{transform:rotate(360deg);}
}

.floating-perk{
  position:absolute;
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:8px 16px;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  font-weight:600;
  color:var(--txt-primary);
  box-shadow:var(--shadow-md);
  animation:floatPerk 3s ease-in-out infinite;
}

.floating-perk svg{
  stroke:var(--accent);
}

.floating-perk.perk-1{
  top:20%;
  left:5%;
  animation-delay:0s;
}

.floating-perk.perk-2{
  top:60%;
  right:0;
  animation-delay:1s;
}

.floating-perk.perk-3{
  bottom:15%;
  left:10%;
  animation-delay:2s;
}

@keyframes floatPerk{
  0%, 100%{transform:translateY(0px);}
  50%{transform:translateY(-10px);}
}

/* Tier Cards */
.rewards-tiers{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
  gap:var(--spacing-lg);
  margin-bottom:var(--spacing-2xl);
}

.tier-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--spacing-lg);
  transition:all 0.3s ease;
  position:relative;
  overflow:hidden;
}

.tier-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, var(--accent-glow), transparent);
  opacity:0;
  transition:opacity 0.3s;
}

.tier-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-xl);
}

.tier-card:hover::before{
  opacity:1;
}

.popular-badge{
  position:absolute;
  top:-1px;
  right:-1px;
  background:linear-gradient(135deg, var(--accent), var(--accent-secondary));
  color:#fff;
  padding:8px 20px;
  border-radius:0 var(--radius-lg) 0 var(--radius-md);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  box-shadow:0 4px 12px var(--accent-glow);
}

.tier-header{
  display:flex;
  align-items:center;
  gap:var(--spacing-md);
  margin-bottom:var(--spacing-lg);
  position:relative;
  z-index:1;
}

.tier-icon{
  width:56px;
  height:56px;
  background:linear-gradient(135deg, var(--bg-tertiary), var(--bg-secondary));
  border-radius:var(--radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.bronze-tier .tier-icon{
  background:linear-gradient(135deg, rgba(205,127,50,0.1), rgba(184,115,63,0.1));
}

.bronze-tier .tier-icon svg{
  stroke:#CD7F32;
}

.silver-tier .tier-icon{
  background:linear-gradient(135deg, rgba(192,192,192,0.15), rgba(168,168,168,0.15));
}

.silver-tier .tier-icon svg{
  stroke:#A8A8A8;
}

.gold-tier .tier-icon{
  background:linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,199,0,0.15));
}

.gold-tier .tier-icon svg{
  stroke:#FFD700;
}

.tier-title-wrap{
  flex:1;
}

.tier-badge{
  display:inline-block;
  padding:4px 12px;
  border-radius:6px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:4px;
}

.tier-badge.bronze{
  background:linear-gradient(135deg, #CD7F32, #B8733F);
  color:#fff;
}

.tier-badge.silver{
  background:linear-gradient(135deg, #C0C0C0, #A8A8A8);
  color:#fff;
}

.tier-badge.gold{
  background:linear-gradient(135deg, #FFD700, #FFC700);
  color:#1A1F2E;
}

.tier-title{
  font-size:24px;
  font-weight:800;
  margin:0;
  color:var(--txt-primary);
}

.tier-requirement{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:var(--spacing-sm);
  background:var(--bg-tertiary);
  border-radius:var(--radius-sm);
  margin-bottom:var(--spacing-md);
  position:relative;
  z-index:1;
}

.requirement-label{
  font-size:12px;
  color:var(--txt-muted);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.requirement-value{
  font-size:18px;
  font-weight:800;
  color:var(--accent);
}

.tier-benefits{
  display:flex;
  flex-direction:column;
  gap:12px;
  position:relative;
  z-index:1;
}

.benefit-item{
  display:flex;
  align-items:center;
  gap:12px;
  font-size:14px;
  color:var(--txt-secondary);
  padding:12px;
  background:var(--bg-secondary);
  border-radius:var(--radius-sm);
  transition:all 0.2s;
}

.benefit-item:hover{
  background:var(--bg-tertiary);
  transform:translateX(4px);
}

.benefit-item svg{
  flex-shrink:0;
  stroke:var(--accent);
}

.benefit-item.highlight{
  background:linear-gradient(135deg, rgba(99,102,241,0.05), rgba(139,92,246,0.05));
  font-weight:600;
  color:var(--txt-primary);
}

.featured-tier{
  border:2px solid var(--accent);
  box-shadow:0 8px 32px var(--accent-glow);
}

.featured-tier .tier-icon{
  background:linear-gradient(135deg, var(--accent), var(--accent-secondary));
}

.featured-tier .tier-icon svg{
  stroke:#fff;
}

/* How It Works */
.rewards-how-it-works{
  background:var(--bg-card);
  border-radius:var(--radius-xl);
  padding:var(--spacing-xl);
  border:1px solid var(--border);
}

.how-it-works-title{
  text-align:center;
  font-size:32px;
  font-weight:800;
  margin:0 0 var(--spacing-xl) 0;
  color:var(--txt-primary);
}

.steps-grid{
  display:grid;
  grid-template-columns:1fr auto 1fr auto 1fr;
  gap:var(--spacing-md);
  align-items:center;
  max-width:1100px;
  margin:0 auto;
}

.step-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:var(--spacing-lg);
  background:var(--bg-secondary);
  border-radius:var(--radius-md);
  border:1px solid var(--border);
  transition:all 0.3s;
}

.step-item:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-md);
}

.step-number{
  width:56px;
  height:56px;
  background:linear-gradient(135deg, var(--accent), var(--accent-secondary));
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
  font-weight:800;
  margin-bottom:var(--spacing-md);
  box-shadow:0 4px 16px var(--accent-glow);
}

.step-content h4{
  font-size:18px;
  font-weight:700;
  margin:0 0 8px 0;
  color:var(--txt-primary);
}

.step-content p{
  font-size:14px;
  color:var(--txt-secondary);
  margin:0;
  line-height:1.6;
}

.step-arrow{
  display:flex;
  align-items:center;
  justify-content:center;
}

.step-arrow svg{
  stroke:var(--accent);
  opacity:0.5;
}

/* Responsive */
@media(max-width:1024px){
  .rewards-hero{
    grid-template-columns:1fr;
    text-align:center;
  }
  
  .rewards-hero-visual{
    order:-1;
  }
  
  .rewards-stats-mini{
    justify-content:center;
  }
  
  .steps-grid{
    grid-template-columns:1fr;
    gap:var(--spacing-lg);
  }
  
  .step-arrow{
    display:none;
  }
}

@media(max-width:768px){
  .rewards-tiers{
    grid-template-columns:1fr;
  }
  
  .rewards-hero{
    padding:var(--spacing-lg);
  }
  
  .rewards-hero-content h3{
    font-size:28px;
  }
  
  .floating-perk{
    font-size:12px;
    padding:6px 12px;
  }
}

/* ============ Newsletter ============ */
.newsletter-section{
  background:#FFFFFF;
  position:relative;
}

.newsletter-box{
  max-width:700px;
  margin:0 auto;
  padding:64px 48px;
  border-radius:var(--radius-xl);
  text-align:center;
  background:#FFFFFF;
  border:1px solid var(--border);
  box-shadow:0 10px 30px rgba(15,23,42,0.06), 0 4px 12px rgba(15,23,42,0.03);
  position:relative;
  overflow:hidden;
}

.newsletter-box::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(59,130,246,0.04), transparent, rgba(139,92,246,0.04));
  opacity:1;
}

.newsletter-box h2{
  margin:0 0 16px 0;
  font-size:40px;
  font-weight:900;
  position:relative;
  z-index:1;
  color:var(--txt-primary);
}

.newsletter-box p{
  color:var(--txt-secondary);
  margin:0 0 36px 0;
  font-size:18px;
  line-height:1.6;
  position:relative;
  z-index:1;
}

.newsletter-form{
  display:flex;
  gap:12px;
  max-width:500px;
  margin:0 auto;
  position:relative;
  z-index:1;
}

.newsletter-form input{
  flex:1;
  padding:16px 20px;
  border-radius:var(--radius-md);
  background:var(--bg-tertiary);
  border:1px solid var(--border);
  color:var(--txt-primary);
  font-size:15px;
  font-family:inherit;
  transition:all 0.3s;
}

.newsletter-form input:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(0,102,255,0.1);
  background:var(--bg-card);
}

.newsletter-form input::placeholder{
  color:var(--txt-muted);
}

.thanks{
  margin-top:20px;
  color:var(--green);
  font-weight:700;
  font-size:15px;
  position:relative;
  z-index:1;
}

/* ============ Footer ============ */
.site-footer{
  padding:64px 32px 32px;
  background:var(--bg-secondary);
  border-top:1px solid var(--border);
  margin-top:100px;
  position:relative;
}

.site-footer::before{
  content:'';
  position:absolute;
  top:-1px;
  left:0;
  right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--accent) 50%, transparent);
}

.footer-content{
  max-width:1400px;
  margin:0 auto 48px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:48px;
}

.footer-section h4{
  margin:0 0 20px 0;
  color:var(--accent);
  font-size:14px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:1px;
}

.footer-section a{
  display:block;
  padding:8px 0;
  color:var(--txt-secondary);
  text-decoration:none;
  transition:color 0.3s;
  font-size:14px;
}

.footer-section a:hover{
  color:var(--txt-primary);
  transform:translateX(4px);
}

.footer-bottom{
  text-align:center;
  padding-top:32px;
  border-top:1px solid var(--border);
  color:var(--txt-secondary);
  font-size:13px;
  max-width:1400px;
  margin:0 auto;
}

.footer-bottom .link{
  color:var(--accent);
  text-decoration:none;
  transition:color 0.3s;
}

.footer-bottom .link:hover{
  color:var(--purple);
}

.disclaimer-small{
  font-size:12px;
  display:block;
  margin-top:12px;
  opacity:0.7;
}

/* ============ Chat Widget ============ */
.chat-widget{
  position:fixed;
  bottom:32px;
  right:32px;
  width:68px;
  height:68px;
  background:linear-gradient(135deg, var(--accent), var(--accent-secondary));
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:1000;
  box-shadow:0 10px 30px rgba(59,130,246,0.35), 0 0 60px rgba(59,130,246,0.15);
  transition:all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border:2px solid rgba(255,255,255,0.3);
}

.chat-widget:hover{
  transform:scale(1.15) rotate(5deg);
  box-shadow:0 15px 40px rgba(59,130,246,0.5), 0 0 100px rgba(59,130,246,0.25);
}

.chat-notification{
  position:absolute;
  top:-6px;
  right:-6px;
  width:26px;
  height:26px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--red), #DC2626);
  color:#fff;
  font-size:12px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  border:3px solid var(--bg-primary);
  box-shadow:0 4px 12px rgba(239,68,68,0.5);
}

/* ============ Delivery Tracker ============ */
.delivery-tracker{
  position:fixed;
  bottom:32px;
  right:32px;
  width:400px;
  padding:32px;
  border-radius:var(--radius-xl);
  background:#FFFFFF;
  border:1px solid var(--border);
  box-shadow:0 20px 50px rgba(15,23,42,0.1), 0 8px 20px rgba(15,23,42,0.05);
  z-index:1000;
  display:none;
  backdrop-filter:blur(20px);
}

.delivery-tracker.active{
  display:block;
  animation:slideInRight 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slideInRight{
  from{transform:translateX(450px); opacity:0}
  to{transform:translateX(0); opacity:1}
}

.tracker-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:24px;
}

.tracker-header h3{
  margin:0;
  font-size:22px;
  font-weight:800;
  color:var(--txt-primary);
}

.close-tracker{
  background:none;
  border:none;
  color:var(--txt-muted);
  font-size:32px;
  cursor:pointer;
  padding:0;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:color 0.3s;
}

.close-tracker:hover{
  color:var(--txt-primary);
}

.tracker-status{
  margin-bottom:24px;
}

.status-step{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 0;
  color:var(--txt-muted);
  font-size:14px;
  transition:all 0.3s;
}

.status-step.active{
  color:var(--accent);
}

.status-step.current{
  color:var(--txt-primary);
  font-weight:700;
}

.step-icon{
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--bg-tertiary);
  border:2px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  transition:all 0.3s;
}

.status-step.active .step-icon,
.status-step.current .step-icon{
  background:linear-gradient(135deg, var(--accent), var(--purple));
  border-color:transparent;
  box-shadow:0 4px 12px rgba(0,102,255,0.2);
}

.status-step.active .step-icon svg,
.status-step.current .step-icon svg{
  stroke:#fff;
}

.tracker-eta{
  padding:20px;
  border-radius:var(--radius-md);
  background:linear-gradient(135deg, rgba(0,102,255,0.05), rgba(123,47,255,0.05));
  text-align:center;
  margin-bottom:20px;
  border:1px solid var(--border);
}

.tracker-eta strong{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:1px;
  color:var(--txt-muted);
  margin-bottom:6px;
  font-weight:700;
}

.eta-time{
  display:block;
  font-size:36px;
  font-weight:900;
  background:linear-gradient(135deg, var(--accent), var(--purple));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.tracker-driver{
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px;
  border-radius:var(--radius-md);
  background:var(--bg-tertiary);
  border:1px solid var(--border);
}

.driver-avatar{
  width:52px;
  height:52px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--accent), var(--purple));
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 4px 12px rgba(0,102,255,0.2);
}

.driver-avatar svg{
  stroke:#fff;
  width:28px;
  height:28px;
}

.driver-info{
  flex:1;
}

.driver-info strong{
  display:block;
  font-size:16px;
  font-weight:700;
  margin-bottom:4px;
  color:var(--txt-primary);
}

.driver-info span{
  font-size:13px;
  color:var(--txt-secondary);
}

/* ============ Age Gate ============ */
.age-gate{
  position:fixed;
  inset:0;
  background:rgba(255,255,255,0.98);
  backdrop-filter:blur(20px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.age-card{
  padding:64px 56px;
  border-radius:var(--radius-xl);
  max-width:560px;
  text-align:center;
  background:#FFFFFF;
  border:1px solid var(--border);
  box-shadow:0 20px 60px rgba(15,23,42,0.1), 0 8px 24px rgba(15,23,42,0.05);
  position:relative;
  overflow:hidden;
}

.age-card::before{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(59,130,246,0.04), transparent, rgba(139,92,246,0.04));
  opacity:1;
}

.age-card h2{
  margin:0 0 20px 0;
  font-size:48px;
  font-weight:900;
  position:relative;
  z-index:1;
  background:linear-gradient(135deg, var(--txt-primary) 0%, var(--accent) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.age-card p{
  color:var(--txt-secondary);
  margin:0 0 36px 0;
  line-height:1.6;
  font-size:17px;
  position:relative;
  z-index:1;
}

.age-actions{
  display:flex;
  gap:16px;
  justify-content:center;
  margin-bottom:20px;
  position:relative;
  z-index:1;
}

.disclaimer{
  font-size:12px;
  color:var(--txt-muted);
  display:block;
  margin-top:24px;
  line-height:1.6;
  position:relative;
  z-index:1;
}

/* ============ Glass Effect ============ */
.glass{
  background:rgba(255,255,255,0.9);
  border:1px solid var(--border-subtle);
  backdrop-filter:blur(20px) saturate(180%);
  box-shadow:var(--shadow-md);
}

.tilt{
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform 0.2s ease;
}

/* ============ Responsive ============ */
@media (max-width:1024px){
  .hero-grid{
    grid-template-columns:1fr;
    gap:var(--spacing-xl);
  }
  
  .hero-visual{
    height:400px;
  }
  
  .delivery-info{
    grid-template-columns:1fr;
    gap:48px;
  }
}

@media (max-width:768px){
  html{
    font-size:15px;
  }
  
  .hero-grid{
    grid-template-columns:1fr;
  }
  
  .hero{
    padding:var(--spacing-2xl) var(--spacing-md);
  }
  
  .hero-visual{
    height:300px;
    order:-1;
  }
  
  .hero-stats{
    flex-wrap:wrap;
  }
  
  .hero-actions{
    flex-direction:column;
  }
  
  .hero-actions .btn{
    width:100%;
    justify-content:center;
  }
  
  .site-header{
    background:rgba(248,249,250,0.95);
    backdrop-filter:blur(20px);
  }
  
  .header-container{
    padding:16px 20px;
  }
  
  .nav-main{
    display:none;
  }
  
  .product-image{
    padding-top: 16px;
  }
  
  .product-card{
    padding: 16px;
  }
  
  .location-btn span{
    display:none;
  }
  
  .search-btn{
    display:none;
  }
  
  .mobile-menu-btn{
    display:flex;
  }
  
  .logo-text{
    font-size:18px;
  }
  
  .logo-tagline{
    font-size:10px;
  }
  
  .hero{
    padding:80px 20px 60px;
  }
  
  .section{
    padding:64px 20px;
  }
  
  .delivery-estimate{
    flex-direction:column;
    text-align:center;
    gap:24px;
  }
  
  .estimate-info, .estimate-price{
    text-align:center;
  }
  
  .newsletter-form{
    flex-direction:column;
  }
  
  .delivery-tracker{
    width:calc(100vw - 40px);
    bottom:20px;
    right:20px;
  }
  
  .chat-widget{
    width:56px;
    height:56px;
    bottom:20px;
    right:20px;
  }
}

@media (max-width:480px){
  .logo-image{
    height: 85px;
  }
  
  .logo-text{
    font-size:18px;
  }
  
  .header-actions .btn span:not(.cart-count){
    display:none;
  }
  
  .cta-row{
    flex-direction:column;
    align-items:stretch;
  }
  
  .trust-badges{
    flex-direction:column;
    align-items:center;
    gap:28px;
  }
  
  .categories-grid{
    grid-template-columns:1fr;
  }
  
  .products-grid{
    grid-template-columns:1fr;
  }
  
  .product-image{
    padding-top: 20px;
  }
  
  .product-card{
    padding: 20px 16px;
    margin-bottom: 20px;
  }
  
  .product-info{
    padding: 16px !important;
  }
  
  .btn{
    min-height: 44px;
    padding: 12px 20px;
  }
  
  .wishlist-btn{
    width: 44px;
    height: 44px;
    font-size: 20px;
  }
  
  section{
    padding: 48px 16px;
  }
}

/* ============ New Arrivals & Top Sellers - Modern Styling ============ */

/* Hover Effects for Product Cards */
.new-arrivals-section .product-card,
.top-sellers-section .product-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.new-arrivals-section .product-card:hover,
.top-sellers-section .product-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(99, 102, 241, 0.15);
}

/* Badge Animations */
.new-badge,
.bestseller-badge {
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Gradient Text Animation */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.top-sellers-section .product-card:first-child .price-value {
  background-size: 200% 200%;
  animation: gradientShift 3s ease infinite;
}

/* Wishlist Button Hover */
.new-arrivals-section .wishlist-btn:hover,
.top-sellers-section .wishlist-btn:hover {
  transform: scale(1.2) rotate(10deg);
  color: #EF4444;
}

/* Add to Cart Button Effects */
.new-arrivals-section .add-to-cart,
.top-sellers-section .add-to-cart {
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.new-arrivals-section .add-to-cart:hover,
.top-sellers-section .add-to-cart:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}

.new-arrivals-section .add-to-cart::before,
.top-sellers-section .add-to-cart::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.new-arrivals-section .add-to-cart:active::before,
.top-sellers-section .add-to-cart:active::before {
  width: 300px;
  height: 300px;
}

/* Effect Tags Hover */
.new-arrivals-section .effect:hover,
.top-sellers-section .effect:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(99, 102, 241, 0.2);
}

/* Section Badge Animation */
@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.section-head > div > div:first-child {
  animation: slideInFromLeft 0.6s ease-out;
}

/* Gold Shimmer Effect for #1 Best Seller */
@keyframes goldShimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.top-sellers-section .product-card:first-child::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 215, 0, 0.1),
    transparent
  );
  animation: goldShimmer 3s infinite;
  pointer-events: none;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .new-arrivals-section,
  .top-sellers-section {
    padding: 48px 16px !important;
  }
  
  .section-head {
    flex-direction: column !important;
    align-items: flex-start !important;
  }
  
  .new-arrivals-section .product-card,
  .top-sellers-section .product-card {
    margin-bottom: 20px;
  }
}

/* Stagger Animation for Product Cards */
.new-arrivals-section .product-card:nth-child(1) { animation-delay: 0.1s; }
.new-arrivals-section .product-card:nth-child(2) { animation-delay: 0.2s; }
.new-arrivals-section .product-card:nth-child(3) { animation-delay: 0.3s; }
.new-arrivals-section .product-card:nth-child(4) { animation-delay: 0.4s; }

.top-sellers-section .product-card:nth-child(1) { animation-delay: 0.1s; }
.top-sellers-section .product-card:nth-child(2) { animation-delay: 0.2s; }
.top-sellers-section .product-card:nth-child(3) { animation-delay: 0.3s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.new-arrivals-section .product-card,
.top-sellers-section .product-card {
  animation: fadeInUp 0.6s ease-out both;
}

/* Stats Highlight Hover */
.new-arrivals-section .product-stats,
.top-sellers-section .product-stats {
  transition: all 0.3s ease;
}

.new-arrivals-section .product-card:hover .product-stats,
.top-sellers-section .product-card:hover .product-stats {
  color: var(--accent);
}

/* ============ MODERN MOBILE OPTIMIZATIONS - NO CONTENT CUT OFF ============ */

/* Base mobile adjustments */
@media (max-width: 768px) {
  /* Ensure no horizontal overflow */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  
  /* Header - Mobile optimized */
  .site-header {
    padding: 14px 16px;
  }
  
  .logo-text {
    font-size: 22px;
  }
  
  .header-nav {
    display: none;
  }
  
  /* Hero - Single column, modern stacked layout */
  .hero {
    padding: 80px 16px 50px;
  }
  
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .hero-title {
    font-size: clamp(32px, 8vw, 56px);
    line-height: 1.15;
  }
  
  .hero-description {
    font-size: 16px;
    line-height: 1.6;
    max-width: 100%;
  }
  
  .hero-badge {
    font-size: 12px;
    padding: 6px 12px;
  }
  
  /* Hero stats - Horizontal scroll if needed */
  .hero-stats {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 8px;
  }
  
  .hero-stats::-webkit-scrollbar {
    display: none;
  }
  
  .stat-item {
    min-width: 120px;
    flex-shrink: 0;
  }
  
  .stat-divider {
    flex-shrink: 0;
  }
  
  /* Hero visual - Show but contained */
  .hero-visual {
    height: 350px;
    width: 100%;
    overflow: hidden;
  }
  
  .showcase-card {
    max-width: 100%;
  }
  
  /* Hero actions - Stack on very small screens */
  .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .hero-actions .btn-lg {
    flex: 1 1 auto;
    min-width: 140px;
  }
  
  /* Product grids - Responsive columns */
  .products-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 20px;
  }
  
  .product-card {
    max-width: 100%;
  }
  
  /* Sections - Proper mobile spacing */
  .new-arrivals-section,
  .top-sellers-section,
  .popular-section,
  .reviews-section,
  .delivery-section,
  .trust-section {
    padding: 50px 16px;
  }
  
  .section-head h2 {
    font-size: clamp(28px, 6vw, 48px);
  }
  
  .section-head p {
    font-size: 15px;
  }
  
  /* Popular grid - 2 columns on tablet, responsive */
  .popular-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 16px;
  }
  
  /* Reviews - Single column on mobile, responsive */
  .reviews-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 20px;
  }
  
  /* Delivery areas - 2-3 columns responsive */
  .delivery-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 12px;
  }
  
  /* Stats grid - 2x2 on mobile */
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: 16px;
  }
  
  .stat-box {
    padding: 28px 20px;
  }
  
  /* Trust badges - Stack vertically */
  .trust-badges {
    flex-direction: column;
    gap: 12px;
    align-items: stretch;
  }
  
  .trust-badge {
    justify-content: center;
  }
  
  /* Categories - Responsive grid */
  .categories-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 16px;
  }
  
  /* Newsletter - Stack form on mobile */
  .newsletter-box {
    padding: 40px 20px;
  }
  
  .newsletter-box h2 {
    font-size: clamp(24px, 5vw, 40px);
  }
  
  .newsletter-form {
    flex-direction: column;
    gap: 12px;
  }
  
  .newsletter-form input,
  .newsletter-form .btn {
    width: 100%;
  }
  
  /* Footer - Stack sections */
  .footer-content {
    flex-direction: column;
    gap: 32px;
    text-align: left;
  }
  
  .footer-bottom {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }
}

/* Small phones - Extra adjustments */
@media (max-width: 480px) {
  .hero {
    padding: 60px 16px 40px;
  }
  
  .hero-title {
    font-size: clamp(28px, 9vw, 42px);
  }
  
  .hero-visual {
    height: 300px;
  }
  
  .hero-actions {
    flex-direction: column;
  }
  
  .hero-actions .btn-lg {
    width: 100%;
    min-width: 100%;
  }
  
  /* Single column for products on small phones */
  .products-grid {
    grid-template-columns: 1fr;
  }
  
  .popular-grid {
    grid-template-columns: 1fr;
  }
  
  .delivery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .reviews-grid {
    grid-template-columns: 1fr;
  }
  
  .categories-grid {
    grid-template-columns: 1fr;
  }
  
  /* Reduce section padding */
  .new-arrivals-section,
  .top-sellers-section,
  .popular-section,
  .reviews-section,
  .delivery-section,
  .trust-section {
    padding: 40px 16px;
  }
  
  /* Product card optimizations */
  .product-title {
    font-size: 18px;
  }
  
  .product-description {
    font-size: 14px;
  }
  
  .effect-tag {
    font-size: 11px;
    padding: 4px 8px;
  }
  
  /* Price section - keep horizontal */
  .price-section {
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .btn {
    flex: 1 1 auto;
    min-width: 120px;
  }
}

/* Landscape phones */
@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    padding: 40px 16px 30px;
  }
  
  .hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  
  .hero-visual {
    height: 280px;
  }
  
  .hero-title {
    font-size: clamp(24px, 5vw, 36px);
  }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects, add active states */
  .product-card:hover,
  .btn:hover,
  .showcase-card:hover {
    transform: none;
  }
  
  .product-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
  
  .btn:active {
    transform: scale(0.97);
    transition: transform 0.1s ease;
  }
  
  /* Better tap targets */
  .btn {
    min-height: 44px;
    padding: 12px 20px;
  }
  
  .wishlist-btn {
    min-width: 44px;
    min-height: 44px;
  }
  
  a {
    min-height: 44px;
  }
  
  /* Smooth scrolling on touch */
  * {
    -webkit-tap-highlight-color: rgba(99, 102, 241, 0.1);
  }
}

/* Prevent content overflow */
* {
  box-sizing: border-box;
}

img,
video {
  max-width: 100%;
  height: auto;
}

.showcase-card,
.product-card,
.review-card,
.popular-item,
.area-card,
.stat-box,
.trust-badge,
.category-card {
  max-width: 100%;
  overflow: hidden;
}

/* ============ PREMIUM FEATURES SECTION ============ */
.premium-features-section .feature-card {
  cursor: pointer;
}

.premium-features-section .feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 48px rgba(99,102,241,0.15) !important;
}

.premium-features-section .feature-card:hover > div:first-child {
  transform: scale(1.2);
  opacity: 0.8;
}

/* Responsive adjustments for features */
@media (max-width: 768px) {
  .premium-features-section {
    padding: 60px 20px !important;
  }
  
  .premium-features-section h2 {
    font-size: 32px !important;
  }
  
  .premium-features-section p {
    font-size: 16px !important;
  }
}

@media (max-width: 480px) {
  .premium-features-section {
    padding: 48px 16px !important;
  }
  
  .premium-features-section .feature-card {
    padding: 32px 24px !important;
  }
  
  .premium-features-section h2 {
    font-size: 28px !important;
  }
}