/** Shopify CDN: Minification failed

Line 16:0 Unexpected "<"
Line 158:0 Unexpected "<"
Line 189:151 Unterminated string token
Line 190:151 Unterminated string token
Line 207:145 Unterminated string token
Line 218:98 Unterminated string token
Line 238:42 Unterminated string token
Line 274:2 Comments in CSS use "/* ... */" instead of "//"
Line 274:64 Unterminated string token
Line 290:28 Expected ":"
... and 41 more hidden warnings

**/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Openlane Collective — Premium Car Accessories</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,700;1,400;1,500&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
  :root{
    --obsidian:#0A0A0A; --smoke:#141414; --carbon:#1E1E1E; --steel:#2A2A2A;
    --mist:#888888; --platinum:#D8D8D8; --white:#F4F4F4;
    --gold:#C9A84C; --gold-light:#E2C97E; --gold-dark:#9B7A2E;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{background:var(--obsidian);color:var(--platinum);font-family:"Inter",sans-serif;font-weight:300;line-height:1.6;}

  /* ===== NAV ===== */
  nav{position:sticky;top:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:18px 40px;background:rgba(10,10,10,0.95);border-bottom:1px solid rgba(201,168,76,0.15);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
  .logo{font-family:"Playfair Display",serif;font-size:20px;font-weight:700;letter-spacing:3px;color:var(--gold);cursor:pointer;text-decoration:none;}
  .logo span{font-weight:400;font-style:italic;}
  .nav-tabs{display:flex;gap:8px;list-style:none;}
  .nav-tab{background:none;border:none;color:var(--platinum);font-family:"Inter",sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:500;cursor:pointer;padding:8px 18px;transition:color 0.2s;}
  .nav-tab:hover,.nav-tab.active{color:var(--gold);}
  .cart-badge{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--platinum);cursor:pointer;border:1px solid rgba(201,168,76,0.3);padding:8px 16px;transition:all 0.2s;}
  .cart-badge:hover{color:var(--gold);border-color:var(--gold);}

  /* ===== TABS ===== */
  .tab-page{display:none;animation:fade 0.4s ease;}
  .tab-page.active{display:block;}
  @keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}

  /* ===== HOME / HERO ===== */
  .hero{min-height:560px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:90px 40px;position:relative;overflow:hidden;}
  .hero-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(ellipse at 50% 40%,rgba(201,168,76,0.08) 0%,transparent 60%),linear-gradient(180deg,#0F0F0F 0%,var(--obsidian) 100%);}
  .hero-grid{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(201,168,76,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(201,168,76,0.04) 1px,transparent 1px);background-size:70px 70px;}
  .hero-content{position:relative;z-index:2;max-width:760px;}
  .eyebrow{font-size:10px;letter-spacing:5px;text-transform:uppercase;color:var(--gold);margin-bottom:22px;display:inline-flex;align-items:center;gap:14px;}
  .eyebrow::before,.eyebrow::after{content:"";display:block;width:34px;height:1px;background:var(--gold);}
  .hero h1{font-family:"Playfair Display",serif;font-size:64px;font-weight:400;line-height:1.05;color:var(--white);margin-bottom:22px;}
  .hero h1 em{font-style:italic;color:var(--gold-light);}
  .hero p{font-size:17px;color:var(--mist);max-width:520px;margin:0 auto 36px;line-height:1.8;}
  .btn{background:var(--gold);color:var(--obsidian);border:none;padding:16px 40px;font-family:"Inter",sans-serif;font-size:11px;font-weight:600;letter-spacing:2.5px;text-transform:uppercase;cursor:pointer;transition:background 0.2s;text-decoration:none;display:inline-block;}
  .btn:hover{background:var(--gold-light);}
  .btn-ghost{background:transparent;color:var(--platinum);border:1px solid rgba(216,216,216,0.25);margin-left:12px;}
  .btn-ghost:hover{border-color:var(--gold);color:var(--gold);background:transparent;}

  /* marquee */
  .marquee{background:var(--gold);padding:11px 0;overflow:hidden;white-space:nowrap;}
  .marquee-track{display:inline-flex;animation:scroll 22s linear infinite;}
  .marquee-track span{font-size:10px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--obsidian);padding:0 36px;}
  .marquee-track span::after{content:"◆";margin-left:36px;opacity:0.4;}
  @keyframes scroll{0%{transform:translateX(0);}100%{transform:translateX(-50%);}}

  /* home featured */
  .home-section{max-width:1200px;margin:0 auto;padding:80px 40px;}
  .section-head{text-align:center;margin-bottom:50px;}
  .section-head .eyebrow{justify-content:center;}
  .section-head h2{font-family:"Playfair Display",serif;font-size:42px;font-weight:400;color:var(--white);}
  .section-head h2 em{font-style:italic;color:var(--gold-light);}

  /* value props */
  .perks{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(201,168,76,0.1);border:1px solid rgba(201,168,76,0.1);margin:0 auto;max-width:1200px;}
  .perk{background:var(--smoke);padding:38px 26px;text-align:center;}
  .perk-ic{font-size:30px;margin-bottom:14px;display:block;}
  .perk h3{font-family:"Playfair Display",serif;font-size:15px;color:var(--white);margin-bottom:7px;font-weight:400;}
  .perk p{font-size:12px;color:var(--mist);line-height:1.6;}

  /* ===== PRODUCT GRID (shared home + catalog) ===== */
  .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;}
  .card{background:var(--smoke);cursor:pointer;position:relative;overflow:hidden;display:flex;flex-direction:column;}
  .card-img{aspect-ratio:1;background:var(--carbon);display:flex;align-items:center;justify-content:center;font-size:72px;position:relative;transition:background 0.3s;}
  .card:hover .card-img{background:var(--steel);}
  .badge{position:absolute;top:12px;left:12px;font-size:9px;letter-spacing:2px;text-transform:uppercase;background:var(--gold);color:var(--obsidian);padding:4px 9px;font-weight:600;}
  .badge.hot{background:#D9542B;color:#fff;}
  .info{padding:18px;flex:1;display:flex;flex-direction:column;}
  .cat-tag{font-size:9px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:7px;}
  .pname{font-family:"Playfair Display",serif;font-size:15px;font-weight:400;color:var(--white);margin-bottom:6px;line-height:1.3;flex:1;}
  .rating{display:flex;align-items:center;gap:5px;margin-bottom:11px;}
  .stars{color:var(--gold);font-size:10px;letter-spacing:1px;}
  .rcount{font-size:10px;color:var(--mist);}
  .price-row{display:flex;justify-content:space-between;align-items:center;}
  .price{font-family:"Playfair Display",serif;font-size:18px;color:var(--white);}
  .old{font-size:12px;color:var(--mist);text-decoration:line-through;margin-left:5px;}
  .add{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);background:none;border:1px solid rgba(201,168,76,0.3);padding:7px 11px;cursor:pointer;font-family:"Inter",sans-serif;font-weight:500;transition:all 0.2s;}
  .add:hover{background:var(--gold);color:var(--obsidian);border-color:var(--gold);}

  /* catalog header */
  .catalog-hero{text-align:center;padding:70px 40px 20px;}
  .catalog-hero h1{font-family:"Playfair Display",serif;font-size:48px;font-weight:400;color:var(--white);margin-bottom:14px;}
  .catalog-hero h1 em{font-style:italic;color:var(--gold-light);}
  .catalog-hero p{font-size:15px;color:var(--mist);max-width:480px;margin:0 auto;}
  .filters{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:30px 40px 40px;}
  .filter{padding:8px 18px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;font-weight:500;cursor:pointer;border:1px solid rgba(201,168,76,0.25);background:transparent;color:var(--mist);transition:all 0.2s;font-family:"Inter",sans-serif;}
  .filter.active,.filter:hover{background:var(--gold);color:var(--obsidian);border-color:var(--gold);}
  .catalog-grid-wrap{max-width:1200px;margin:0 auto;padding:0 40px 90px;}

  /* ===== CONTACT ===== */
  .contact-wrap{max-width:880px;margin:0 auto;padding:70px 40px 90px;}
  .contact-hero{text-align:center;margin-bottom:50px;}
  .contact-hero h1{font-family:"Playfair Display",serif;font-size:48px;font-weight:400;color:var(--white);margin-bottom:14px;}
  .contact-hero h1 em{font-style:italic;color:var(--gold-light);}
  .contact-hero p{font-size:15px;color:var(--mist);max-width:480px;margin:0 auto;}
  .contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin-bottom:50px;}
  .ccard{background:var(--smoke);padding:32px 24px;text-align:center;transition:background 0.2s;}
  .ccard:hover{background:var(--carbon);}
  .ccard-ic{font-size:26px;margin-bottom:13px;display:block;}
  .ccard h3{font-family:"Playfair Display",serif;font-size:16px;color:var(--white);margin-bottom:7px;font-weight:400;}
  .ccard p{font-size:13px;color:var(--mist);margin-bottom:3px;}
  .ccard a{color:var(--gold);text-decoration:none;font-size:13px;}
  .ccard a:hover{color:var(--gold-light);}
  .divider{width:100%;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0.4;margin:0 0 50px;}
  .form{max-width:560px;margin:0 auto;}
  .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px;}
  .field{margin-bottom:14px;}
  .field label{display:block;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:7px;}
  .field input,.field textarea{width:100%;background:var(--smoke);border:1px solid rgba(201,168,76,0.2);color:var(--white);padding:13px 15px;font-family:"Inter",sans-serif;font-size:14px;outline:none;transition:border-color 0.2s;}
  .field input:focus,.field textarea:focus{border-color:var(--gold);}
  .field textarea{min-height:130px;resize:vertical;}

  /* ===== FOOTER ===== */
  footer{background:var(--smoke);border-top:1px solid rgba(201,168,76,0.12);padding:50px 40px 30px;text-align:center;}
  .foot-logo{font-family:"Playfair Display",serif;font-size:18px;letter-spacing:3px;color:var(--gold);margin-bottom:14px;}
  .foot-links{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-bottom:24px;}
  .foot-links button{background:none;border:none;color:var(--mist);font-size:12px;letter-spacing:1px;cursor:pointer;font-family:"Inter",sans-serif;transition:color 0.2s;}
  .foot-links button:hover{color:var(--gold);}
  .foot-copy{font-size:11px;color:var(--mist);opacity:0.7;}

  /* toast */
  .toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--gold);color:var(--obsidian);padding:14px 28px;font-size:12px;letter-spacing:1px;font-weight:600;text-transform:uppercase;z-index:200;transition:transform 0.3s;}
  .toast.show{transform:translateX(-50%) translateY(0);}

  @media(max-width:900px){
    nav{padding:14px 18px;flex-wrap:wrap;gap:10px;}
    .nav-tabs{order:3;width:100%;justify-content:center;}
    .hero h1{font-size:42px;}
    .grid{grid-template-columns:repeat(2,1fr);}
    .perks{grid-template-columns:repeat(2,1fr);}
    .contact-cards{grid-template-columns:1fr;}
    .form-row{grid-template-columns:1fr;}
    .home-section,.catalog-grid-wrap,.contact-wrap{padding-left:18px;padding-right:18px;}
  }
</style>
</head>
<body>

<!-- NAV -->
<nav>
  <a class="logo" onclick="showTab('home')">OPENLANE <span>Collective</span></a>
  <ul class="nav-tabs">
    <li><button class="nav-tab active" data-tab="home" onclick="showTab('home')">Home</button></li>
    <li><button class="nav-tab" data-tab="catalog" onclick="showTab('catalog')">Catalog</button></li>
    <li><button class="nav-tab" data-tab="contact" onclick="showTab('contact')">Contact Us</button></li>
  </ul>
  <div class="cart-badge" onclick="showTab('catalog')">Cart&nbsp; <span id="cart-count">0</span></div>
</nav>

<!-- ============ HOME ============ -->
<div class="tab-page active" id="tab-home">
  <section class="hero">
    <div class="hero-bg"></div>
    <div class="hero-grid"></div>
    <div class="hero-content">
      <div class="eyebrow">Premium car accessories</div>
      <h1>Upgrade your <em>drive</em></h1>
      <p>The 10 most-wanted car accessories of 2026 — handpicked, tested, and built to make every mile better.</p>
      <a class="btn" onclick="showTab('catalog')">Shop the catalog</a>
      <a class="btn btn-ghost" onclick="showTab('contact')">Get in touch</a>
    </div>
  </section>

  <div class="marquee">
    <div class="marquee-track">
      <span>Free shipping over $75</span><span>2026's hottest accessories</span><span>30-day quality guarantee</span><span>50,000+ happy drivers</span>
      <span>Free shipping over $75</span><span>2026's hottest accessories</span><span>30-day quality guarantee</span><span>50,000+ happy drivers</span>
    </div>
  </div>

  <div class="home-section">
    <div class="section-head">
      <div class="eyebrow">Bestsellers</div>
      <h2>Trending <em>now</em></h2>
    </div>
    <div class="grid" id="home-grid"></div>
    <div style="text-align:center;margin-top:40px;">
      <a class="btn" onclick="showTab('catalog')">View all 10 products</a>
    </div>
  </div>

  <div class="perks">
    <div class="perk"><span class="perk-ic">🚚</span><h3>Free shipping</h3><p>On all orders over $75, delivered in 3–5 days.</p></div>
    <div class="perk"><span class="perk-ic">🛡️</span><h3>Quality tested</h3><p>Every product personally vetted before it's listed.</p></div>
    <div class="perk"><span class="perk-ic">🔒</span><h3>Secure checkout</h3><p>256-bit encryption keeps your data safe.</p></div>
    <div class="perk"><span class="perk-ic">⭐</span><h3>4.9 rating</h3><p>Loved by over 50,000 drivers nationwide.</p></div>
  </div>
</div>

<!-- ============ CATALOG ============ -->
<div class="tab-page" id="tab-catalog">
  <div class="catalog-hero">
    <div class="eyebrow" style="justify-content:center;">The collection</div>
    <h1>Shop the <em>catalog</em></h1>
    <p>Ten accessories drivers can't stop buying in 2026. Tap any item to add it to your cart.</p>
  </div>
  <div class="filters" id="filters">
    <button class="filter active" data-cat="all" onclick="filterCat('all',this)">All</button>
    <button class="filter" data-cat="Tech" onclick="filterCat('Tech',this)">Tech</button>
    <button class="filter" data-cat="Interior" onclick="filterCat('Interior',this)">Interior</button>
    <button class="filter" data-cat="Cleaning" onclick="filterCat('Cleaning',this)">Cleaning</button>
    <button class="filter" data-cat="Safety" onclick="filterCat('Safety',this)">Safety</button>
    <button class="filter" data-cat="Lighting" onclick="filterCat('Lighting',this)">Lighting</button>
  </div>
  <div class="catalog-grid-wrap">
    <div class="grid" id="catalog-grid"></div>
  </div>
</div>

<!-- ============ CONTACT ============ -->
<div class="tab-page" id="tab-contact">
  <div class="contact-wrap">
    <div class="contact-hero">
      <div class="eyebrow" style="justify-content:center;">Get in touch</div>
      <h1>We're here to <em>help</em></h1>
      <p>Questions about an order or a product? Our team replies to every message within 24 hours.</p>
    </div>
    <div class="contact-cards">
      <div class="ccard"><span class="ccard-ic">✉️</span><h3>Email</h3><p>Orders &amp; questions</p><a href="mailto:support@openlanecollective.com">support@openlanecollective.com</a></div>
      <div class="ccard"><span class="ccard-ic">💬</span><h3>Live chat</h3><p>9am–6pm CST, Mon–Fri</p><a onclick="return false" href="#">Start a chat</a></div>
      <div class="ccard"><span class="ccard-ic">🕐</span><h3>Response time</h3><p>We reply to everyone</p><a onclick="return false" href="#">Within 24 hours</a></div>
    </div>
    <div class="divider"></div>
    <div class="section-head"><h2 style="font-size:30px;">Send us a <em>message</em></h2></div>
    <form class="form" id="contact-form" onsubmit="submitForm(event)">
      <div class="form-row">
        <div class="field"><label>Name</label><input type="text" required></div>
        <div class="field"><label>Email</label><input type="email" required></div>
      </div>
      <div class="field"><label>Order number (optional)</label><input type="text"></div>
      <div class="field"><label>Message</label><textarea required></textarea></div>
      <div style="text-align:center;"><button type="submit" class="btn">Send message</button></div>
    </form>
  </div>
</div>

<!-- FOOTER -->
<footer>
  <div class="foot-logo">OPENLANE COLLECTIVE</div>
  <div class="foot-links">
    <button onclick="showTab('home')">Home</button>
    <button onclick="showTab('catalog')">Catalog</button>
    <button onclick="showTab('contact')">Contact Us</button>
  </div>
  <div class="foot-copy">© 2026 Openlane Collective. All rights reserved. · Free shipping over $75 · 30-day guarantee</div>
</footer>

<div class="toast" id="toast">Added to cart ✓</div>

<script>
  // ===== PRODUCT DATA — 2026's hottest car accessories =====
  const products = [
    {name:"Magnetic Wireless Phone Mount",cat:"Tech",price:39,old:54,rating:5,reviews:1284,icon:"📱",badge:"Bestseller",hot:true},
    {name:"4K Dual Dash Cam — Night Vision",cat:"Safety",price:129,old:169,rating:5,reviews:942,icon:"📷",badge:"Hot",hot:true},
    {name:"Portable Cordless Car Vacuum",cat:"Cleaning",price:59,old:79,rating:5,reviews:2103,icon:"🧹",badge:"Hot",hot:true},
    {name:"Ambient LED Interior Light Kit",cat:"Lighting",price:44,old:59,rating:4,reviews:867,icon:"🔆",badge:"Trending",hot:false},
    {name:"Leather Backseat Organizer",cat:"Interior",price:34,old:45,rating:5,reviews:1556,icon:"🎒",badge:"",hot:false},
    {name:"Portable Jump Starter & Power Bank",cat:"Safety",price:89,old:119,rating:5,reviews:734,icon:"🔋",badge:"Hot",hot:true},
    {name:"Magnetic Sunshade — Custom Fit",cat:"Interior",price:49,old:65,rating:4,reviews:612,icon:"☀️",badge:"",hot:false},
    {name:"150W Car Power Inverter",cat:"Tech",price:42,old:55,rating:5,reviews:498,icon:"⚡",badge:"",hot:false},
    {name:"All-Weather Floor Mat Set",cat:"Interior",price:98,old:120,rating:5,reviews:1872,icon:"🚙",badge:"Bestseller",hot:false},
    {name:"Smart Tire Pressure Monitor",cat:"Tech",price:69,old:89,rating:4,reviews:421,icon:"🛞",badge:"New",hot:false},
  ];

  let cart = 0;

  function starStr(n){return "★★★★★".slice(0,n)+"☆☆☆☆☆".slice(0,5-n);}

  function cardHTML(p,i){
    return `<div class="card" data-cat="${p.cat}">
      <div class="card-img">${p.icon}${p.badge?`<span class="badge ${p.hot?'hot':''}">${p.badge}</span>`:''}</div>
      <div class="info">
        <div class="cat-tag">${p.cat}</div>
        <div class="pname">${p.name}</div>
        <div class="rating"><span class="stars">${starStr(p.rating)}</span><span class="rcount">(${p.reviews.toLocaleString()})</span></div>
        <div class="price-row">
          <div><span class="price">$${p.price}</span>${p.old?`<span class="old">$${p.old}</span>`:''}</div>
          <button class="add" onclick="addToCart(event)">Add</button>
        </div>
      </div>
    </div>`;
  }

  // Render home grid (top 4) and full catalog
  document.getElementById('home-grid').innerHTML = products.slice(0,4).map(cardHTML).join('');
  document.getElementById('catalog-grid').innerHTML = products.map(cardHTML).join('');

  function showTab(name){
    document.querySelectorAll('.tab-page').forEach(t=>t.classList.remove('active'));
    document.getElementById('tab-'+name).classList.add('active');
    document.querySelectorAll('.nav-tab').forEach(b=>b.classList.toggle('active',b.dataset.tab===name));
    window.scrollTo({top:0,behavior:'smooth'});
  }

  function addToCart(e){
    e.stopPropagation();
    cart++;
    document.getElementById('cart-count').textContent = cart;
    const t = document.getElementById('toast');
    t.classList.add('show');
    clearTimeout(window._toastTimer);
    window._toastTimer = setTimeout(()=>t.classList.remove('show'),1600);
  }

  function filterCat(cat,btn){
    document.querySelectorAll('.filter').forEach(f=>f.classList.remove('active'));
    btn.classList.add('active');
    document.querySelectorAll('#catalog-grid .card').forEach(c=>{
      c.style.display = (cat==='all'||c.dataset.cat===cat)?'flex':'none';
    });
  }

  function submitForm(e){
    e.preventDefault();
    document.getElementById('contact-form').innerHTML =
      '<p style="text-align:center;color:var(--gold-light);font-size:16px;padding:40px;">✓ Thank you — we\'ll be in touch within 24 hours.</p>';
  }
</script>
</body>
</html>