/** Shopify CDN: Minification failed

Line 36:0 All "@import" rules must come first

**/
/* =========================================================
   VWM THEME — Foundation CSS
   Last updated: 2026
   All custom styles for VendWithMe's Dawn-based theme.
   This file is LOADED BY theme.liquid — don't edit Dawn's base.css.
   ========================================================= */

/* ---------- 1. DESIGN TOKENS (colors, spacing, fonts) ---------- */
:root {
  --vwm-bg:         #0a0b0d;
  --vwm-bg-2:       #111318;
  --vwm-ink:        #f5f3ee;
  --vwm-ink-dim:    #a9a59c;
  --vwm-ink-mute:   #6b6860;
  --vwm-accent:     #ff4d1a;
  --vwm-accent-2:   #ff7a3a;
  --vwm-lime:       #c8ff3a;
  --vwm-gold:       #e8c87a;
  --vwm-line:       #23252b;
  --vwm-card:       #15171c;

  --vwm-serif:      'Fraunces', Georgia, serif;
  --vwm-sans:       'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --vwm-mono:       'JetBrains Mono', ui-monospace, monospace;

  --vwm-wrap:       1400px;
  --vwm-gap:        24px;
}

/* ---------- 2. IMPORT FONTS ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300;9..144,500;9..144,700;9..144,900&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap');

/* ---------- 3. GLOBAL RESETS (scoped to .vwm) ---------- */
/* We scope everything to .vwm so we only override Dawn's styles
   on sections we've explicitly marked as VWM-themed. */
.vwm, .vwm * {
  box-sizing: border-box;
}

.vwm {
  background: var(--vwm-bg);
  color: var(--vwm-ink);
  font-family: var(--vwm-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.vwm ::selection { background: var(--vwm-accent); color: white; }

/* ---------- 4. TYPOGRAPHY ---------- */
.vwm-serif      { font-family: var(--vwm-serif); }
.vwm-sans       { font-family: var(--vwm-sans); }
.vwm-mono       { font-family: var(--vwm-mono); letter-spacing: 0.1em; text-transform: uppercase; font-size: 11px; }

.vwm-h1 {
  font-family: var(--vwm-serif);
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.95;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--vwm-ink);
  margin: 0;
}
.vwm-h1 em { font-style: italic; color: var(--vwm-accent); font-weight: 300; }

.vwm-h2 {
  font-family: var(--vwm-serif);
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--vwm-ink);
  margin: 0;
}
.vwm-h2 em { font-style: italic; color: var(--vwm-accent); font-weight: 300; }

.vwm-h3 {
  font-family: var(--vwm-serif);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}

.vwm-kicker {
  font-family: var(--vwm-mono);
  color: var(--vwm-accent);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  margin-bottom: 16px;
  display: inline-block;
}

.vwm-sub {
  font-size: 19px;
  color: var(--vwm-ink-dim);
  line-height: 1.55;
  max-width: 540px;
}

.vwm-ink-dim  { color: var(--vwm-ink-dim); }
.vwm-ink-mute { color: var(--vwm-ink-mute); }

/* ---------- 5. LAYOUT WRAPPERS ---------- */
.vwm-section {
  padding: 120px 40px;
  position: relative;
}
.vwm-section-sm { padding: 80px 40px; }
.vwm-wrap {
  max-width: var(--vwm-wrap);
  margin: 0 auto;
  width: 100%;
}
.vwm-sec-head { margin-bottom: 64px; }

.vwm-bg-dark-2 { background: var(--vwm-bg-2); }

/* ---------- 6. BUTTONS ---------- */
.vwm-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 100px;
  border: none;
  font-family: var(--vwm-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  letter-spacing: 0.01em;
  line-height: 1;
}
.vwm-btn-primary {
  background: var(--vwm-accent);
  color: white;
}
.vwm-btn-primary:hover {
  background: var(--vwm-accent-2);
  transform: translateY(-1px);
  color: white;
}
.vwm-btn-ghost {
  background: transparent;
  color: var(--vwm-ink);
  border: 1px solid var(--vwm-line);
}
.vwm-btn-ghost:hover {
  border-color: var(--vwm-ink);
  color: var(--vwm-ink);
}
.vwm-btn-lime {
  background: var(--vwm-lime);
  color: #0a0b0d;
}
.vwm-btn-lime:hover {
  transform: translateY(-1px);
  color: #0a0b0d;
}

/* ---------- 7. CARDS (products, paths, features) ---------- */
.vwm-card {
  background: var(--vwm-card);
  border: 1px solid var(--vwm-line);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.3s ease;
  text-decoration: none;
  color: inherit;
  display: block;
}
.vwm-card:hover {
  transform: translateY(-4px);
  border-color: var(--vwm-accent);
  box-shadow: 0 30px 60px rgba(0,0,0,0.4);
  color: inherit;
}

/* ---------- 8. PRODUCT CARD STYLING ---------- */
.vwm-product-img {
  aspect-ratio: 4/5;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #1a1d25 0%, #0d0e12 100%);
  border-bottom: 1px solid var(--vwm-line);
}
.vwm-product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.vwm-card:hover .vwm-product-img img { transform: scale(1.05); }

.vwm-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 5px 10px;
  border-radius: 4px;
  font-family: var(--vwm-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  z-index: 2;
}
.vwm-tag-lime  { background: var(--vwm-lime);   color: #0a0b0d; }
.vwm-tag-gold  { background: var(--vwm-gold);   color: #0a0b0d; }
.vwm-tag-accent{ background: var(--vwm-accent); color: white; }
.vwm-tag-ai    { background: #4fd1ff;           color: #0a0b0d; }
.vwm-tag-custom{ background: #8a5cf6;           color: white; }

.vwm-stock {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 5px 10px;
  border-radius: 4px;
  font-family: var(--vwm-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: rgba(200,255,58,0.15);
  color: var(--vwm-lime);
  border: 1px solid rgba(200,255,58,0.3);
  z-index: 2;
  backdrop-filter: blur(8px);
}
.vwm-stock-low {
  background: rgba(232,200,122,0.15);
  color: var(--vwm-gold);
  border-color: rgba(232,200,122,0.3);
}
.vwm-stock-out {
  background: rgba(255,77,26,0.15);
  color: var(--vwm-accent);
  border-color: rgba(255,77,26,0.3);
}

.vwm-product-body { padding: 24px; }
.vwm-product-cat {
  font-family: var(--vwm-mono);
  font-size: 10px;
  color: var(--vwm-ink-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.vwm-product-name {
  font-family: var(--vwm-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  line-height: 1.15;
  color: var(--vwm-ink);
}
.vwm-product-desc {
  font-size: 13px;
  color: var(--vwm-ink-dim);
  margin-bottom: 20px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.vwm-product-meta {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-top: 20px;
  border-top: 1px solid var(--vwm-line);
  gap: 12px;
}
.vwm-product-price {
  font-family: var(--vwm-serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--vwm-ink);
}
.vwm-product-finance {
  font-family: var(--vwm-mono);
  font-size: 10px;
  color: var(--vwm-ink-mute);
  letter-spacing: 0.05em;
  margin-top: 4px;
}
.vwm-product-finance em { color: var(--vwm-lime); font-style: normal; }

/* ---------- 9. GRIDS ---------- */
.vwm-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.vwm-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.vwm-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* ---------- 10. CATEGORY PILLS (filter bar) ---------- */
.vwm-cats {
  display: flex;
  gap: 10px;
  margin-bottom: 48px;
  overflow-x: auto;
  padding-bottom: 12px;
  scrollbar-width: thin;
}
.vwm-cat-pill {
  padding: 12px 20px;
  background: var(--vwm-card);
  border: 1px solid var(--vwm-line);
  color: var(--vwm-ink-dim);
  font-family: var(--vwm-sans);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 100px;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}
.vwm-cat-pill:hover {
  color: var(--vwm-ink);
  border-color: var(--vwm-ink-mute);
}
.vwm-cat-pill.is-active {
  background: var(--vwm-accent);
  border-color: var(--vwm-accent);
  color: white;
}
.vwm-cat-pill-count {
  font-family: var(--vwm-mono);
  font-size: 10px;
  opacity: 0.7;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,0.1);
}

/* ---------- 11. ANNOUNCEMENT BAR ---------- */
.vwm-announce {
  background: var(--vwm-lime);
  color: #0a0b0d;
  padding: 8px 24px;
  font-size: 12px;
  font-family: var(--vwm-mono);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}
.vwm-announce a { color: inherit; text-decoration: none; }

/* ---------- 12. HERO-SPECIFIC ---------- */
.vwm-hero {
  padding: 80px 40px 120px;
  position: relative;
  overflow: hidden;
  min-height: 85vh;
  background: var(--vwm-bg);
}
.vwm-hero-grid {
  max-width: var(--vwm-wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 80px;
  align-items: center;
}
.vwm-hero-kicker::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--vwm-accent);
  border-radius: 50%;
  display: inline-block;
  margin-right: 10px;
  box-shadow: 0 0 0 4px rgba(255,77,26,0.2);
  vertical-align: middle;
  animation: vwm-pulse 2s infinite;
}
@keyframes vwm-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.vwm-strike {
  position: relative;
  display: inline-block;
}
.vwm-strike::after {
  content: '';
  position: absolute;
  left: -4%;
  right: -4%;
  top: 55%;
  height: 6px;
  background: var(--vwm-lime);
  transform: rotate(-2deg);
}
.vwm-hero-stats {
  display: flex;
  gap: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--vwm-line);
  margin-top: 56px;
}
.vwm-stat-num {
  font-family: var(--vwm-serif);
  font-size: 42px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--vwm-ink);
}
.vwm-stat-label {
  font-family: var(--vwm-mono);
  font-size: 11px;
  color: var(--vwm-ink-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 8px;
}

/* ---------- 13. BUYER PATHS ---------- */
.vwm-paths {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--vwm-line);
  border: 1px solid var(--vwm-line);
  border-radius: 24px;
  overflow: hidden;
}
.vwm-path {
  background: var(--vwm-bg-2);
  padding: 40px 32px;
  text-decoration: none;
  color: inherit;
  transition: background 0.3s ease;
  display: block;
}
.vwm-path:hover {
  background: #181b22;
  color: inherit;
}
.vwm-path-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255,77,26,0.1);
  border: 1px solid rgba(255,77,26,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  font-family: var(--vwm-serif);
  font-size: 20px;
  color: var(--vwm-accent);
}
.vwm-path-link {
  font-family: var(--vwm-mono);
  font-size: 11px;
  color: var(--vwm-accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.vwm-path-link::after {
  content: '→';
  transition: transform 0.2s;
}
.vwm-path:hover .vwm-path-link::after { transform: translateX(4px); }

/* ---------- 14. CHAT WIDGET (floating) ---------- */
.vwm-chat-widget {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 200;
}
.vwm-chat-bubble {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--vwm-accent), var(--vwm-gold));
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--vwm-serif);
  font-size: 22px;
  font-weight: 900;
  color: white;
  text-decoration: none;
  box-shadow: 0 20px 40px rgba(255,77,26,0.4);
  animation: vwm-pulse-btn 3s infinite;
}
@keyframes vwm-pulse-btn {
  0%,100% { box-shadow: 0 20px 40px rgba(255,77,26,0.4), 0 0 0 0 rgba(255,77,26,0.7); }
  50% { box-shadow: 0 20px 40px rgba(255,77,26,0.4), 0 0 0 16px rgba(255,77,26,0); }
}

/* ---------- 15. FORMS ---------- */
.vwm-input, .vwm-textarea, .vwm-select {
  width: 100%;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--vwm-line);
  color: var(--vwm-ink);
  padding: 14px 16px;
  border-radius: 12px;
  font-family: var(--vwm-sans);
  font-size: 14px;
  outline: none;
  font-family: inherit;
}
.vwm-input:focus, .vwm-textarea:focus, .vwm-select:focus {
  border-color: var(--vwm-accent);
}
.vwm-label {
  font-family: var(--vwm-mono);
  font-size: 11px;
  color: var(--vwm-ink-mute);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}

/* ---------- 16. UTILITIES ---------- */
.vwm-hide { display: none !important; }
.vwm-center { text-align: center; }
.vwm-mt-4 { margin-top: 32px; }
.vwm-mt-6 { margin-top: 48px; }
.vwm-mb-4 { margin-bottom: 32px; }
.vwm-flex-gap { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- 17. RESPONSIVE ---------- */
@media (max-width: 1000px) {
  .vwm-hero-grid,
  .vwm-grid-2 { grid-template-columns: 1fr; gap: 40px; }
  .vwm-paths,
  .vwm-grid-4 { grid-template-columns: 1fr 1fr; }
  .vwm-grid-3 { grid-template-columns: 1fr 1fr; }
  .vwm-section { padding: 80px 24px; }
  .vwm-hero { padding: 60px 24px 80px; min-height: auto; }
}
@media (max-width: 600px) {
  .vwm-paths,
  .vwm-grid-4 { grid-template-columns: 1fr; }
  .vwm-grid-3 { grid-template-columns: 1fr; }
  .vwm-hero-stats { gap: 32px; flex-wrap: wrap; }
}