Landing

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dejalo Clean — Limpieza con actitud para hogares con mascota</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  :root{
    --cream:#F8F2DF;
    --cream-dim:#F1E9CE;
    --sky:#22B4EA;
    --sky-deep:#1594C8;
    --deep:#0B5E8C;
    --ink:#083047;
    --bubble:#CDEFFB;
    --white:#FFFFFF;
    --radius-lg:28px;
    --radius-sm:14px;
    --maxw:1180px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    font-size:16px;
    line-height:1.55;
  }
  h1,h2,h3,.display{
    font-family:'Baloo 2',sans-serif;
    color:var(--deep);
    margin:0;
    line-height:1.08;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}
  button{font-family:inherit;cursor:pointer;border:none;background:none;}

  :focus-visible{outline:3px solid var(--sky-deep);outline-offset:2px;}

  /* ---------- Header ---------- */
  header{
    position:sticky;top:0;z-index:40;
    background:var(--cream);
    border-bottom:2px solid var(--ink);
  }
  .header-inner{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 28px;max-width:var(--maxw);margin:0 auto;
    gap:16px;
  }
  .brand{display:flex;align-items:center;gap:12px;}
  .brand img{width:46px;height:46px;border-radius:50%;}
  .brand span{font-family:'Baloo 2',sans-serif;font-weight:700;font-size:1.35rem;color:var(--deep);}
  nav{display:flex;gap:28px;}
  nav a{font-weight:600;font-size:0.98rem;color:var(--ink);position:relative;padding:4px 0;}
  nav a:hover{color:var(--sky-deep);}
  .header-actions{display:flex;align-items:center;gap:18px;}
  .cart-btn{
    position:relative;display:flex;align-items:center;gap:8px;
    background:var(--deep);color:var(--white);
    padding:10px 16px;border-radius:999px;font-weight:600;font-size:0.92rem;
    transition:transform .15s ease;
  }
  .cart-btn:hover{transform:translateY(-2px);}
  .cart-count{
    background:var(--sky);color:var(--ink);
    min-width:20px;height:20px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-size:0.72rem;font-weight:700;padding:0 4px;
  }

  /* ---------- Hero ---------- */
  .hero{
    padding:64px 0 40px;
    overflow:hidden;
  }
  .hero-inner{
    display:grid;grid-template-columns:1.05fr 0.95fr;gap:40px;align-items:center;
  }
  .hero h1{font-size:clamp(2.3rem,4.6vw,3.4rem);font-weight:800;}
  .hero p.lead{
    margin-top:20px;font-size:1.14rem;max-width:46ch;color:var(--ink);
  }
  .hero-ctas{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}
  .btn{
    display:inline-flex;align-items:center;gap:8px;
    padding:14px 26px;border-radius:999px;font-weight:700;font-size:0.98rem;
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn-primary{background:var(--sky);color:var(--ink);}
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--sky-deep);}
  .btn-ghost{background:transparent;color:var(--deep);border:2px solid var(--deep);}
  .btn-ghost:hover{background:var(--deep);color:var(--white);}

  .hero-art{position:relative;display:flex;justify-content:center;align-items:center;}
  .hero-blob{
    width:min(400px,100%);aspect-ratio:1;border-radius:50%;
    background:var(--sky);
    display:flex;align-items:center;justify-content:center;
    position:relative;
  }
  .hero-blob img{
    width:82%;border-radius:50%;
  }
  .bubble{
    position:absolute;border-radius:50%;
    background:var(--bubble);
    border:2px solid var(--sky-deep);
    animation:float 6s ease-in-out infinite;
  }
  .b1{width:26px;height:26px;top:6%;left:2%;animation-delay:0s;}
  .b2{width:16px;height:16px;top:20%;right:0%;animation-delay:1.2s;}
  .b3{width:34px;height:34px;bottom:8%;left:-4%;animation-delay:2.1s;}
  .b4{width:20px;height:20px;bottom:0%;right:10%;animation-delay:.6s;}
  @keyframes float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-14px);}
  }
  @media (prefers-reduced-motion:reduce){
    .bubble{animation:none;}
  }

  /* ---------- Trust strip ---------- */
  .trust{
    border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
    background:var(--cream-dim);
  }
  .trust-inner{
    max-width:var(--maxw);margin:0 auto;padding:22px 28px;
    display:grid;grid-template-columns:repeat(3,1fr);gap:20px;
  }
  .trust-item{display:flex;align-items:center;gap:12px;font-weight:600;font-size:0.95rem;}
  .trust-item svg{flex-shrink:0;width:28px;height:28px;}

  /* ---------- Section shell ---------- */
  section.block{padding:76px 0;}
  .section-head{max-width:60ch;margin-bottom:44px;}
  .section-head h2{font-size:clamp(1.8rem,3.2vw,2.4rem);}
  .section-head p{margin-top:14px;color:var(--ink);font-size:1.04rem;}

  /* ---------- Products ---------- */
  .grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:26px;
  }
  .card{
    background:var(--white);
    border:2px solid var(--ink);
    border-radius:var(--radius-lg);
    padding:26px;
    display:flex;flex-direction:column;gap:14px;
    position:relative;
    transition:transform .15s ease;
  }
  .card:hover{transform:translateY(-4px);}
  .card-icon{
    width:64px;height:64px;border-radius:50%;
    background:var(--bubble);
    display:flex;align-items:center;justify-content:center;
  }
  .card-icon svg{width:34px;height:34px;}
  .card h3{font-size:1.18rem;}
  .card p.desc{color:var(--ink);font-size:0.94rem;flex-grow:1;}
  .card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:6px;}
  .price{font-family:'Baloo 2',sans-serif;font-weight:700;color:var(--deep);font-size:1.2rem;}
  .add-btn{
    background:var(--deep);color:var(--white);
    padding:9px 18px;border-radius:999px;font-weight:700;font-size:0.86rem;
    transition:background .15s ease;
  }
  .add-btn:hover{background:var(--sky-deep);}
  .badge{
    position:absolute;top:-10px;right:20px;
    background:var(--ink);color:var(--white);
    font-size:0.72rem;font-weight:700;
    padding:5px 12px;border-radius:999px;
  }

  /* ---------- About ---------- */
  .about{
    display:grid;grid-template-columns:0.85fr 1.15fr;gap:52px;align-items:center;
  }
  .about-art{
    background:var(--sky);border-radius:var(--radius-lg);
    aspect-ratio:1/0.85;display:flex;align-items:center;justify-content:center;
    padding:30px;
  }
  .about-art img{width:60%;border-radius:50%;}
  .about-text p{margin-top:16px;font-size:1.02rem;max-width:52ch;}
  .about-text h2{font-size:clamp(1.8rem,3vw,2.3rem);}

  /* ---------- CTA / Contact ---------- */
  .cta{
    background:var(--deep);color:var(--white);
    border-radius:var(--radius-lg);
    padding:56px 44px;
    display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;
  }
  .cta h2{color:var(--white);font-size:clamp(1.6rem,3vw,2.1rem);}
  .cta p{margin-top:10px;color:var(--bubble);max-width:44ch;}
  .cta .btn-primary:hover{box-shadow:0 6px 0 var(--cream-dim);}

  /* ---------- Footer ---------- */
  footer{border-top:2px solid var(--ink);padding:36px 0;background:var(--cream-dim);}
  .footer-inner{
    display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;
    font-size:0.88rem;color:var(--ink);
  }
  .footer-brand{display:flex;align-items:center;gap:10px;font-family:'Baloo 2',sans-serif;font-weight:700;color:var(--deep);}
  .footer-brand img{width:30px;height:30px;border-radius:50%;}

  /* ---------- Cart drawer ---------- */
  .overlay{
    position:fixed;inset:0;background:rgba(8,48,71,0.45);
    opacity:0;pointer-events:none;transition:opacity .25s ease;z-index:60;
  }
  .overlay.open{opacity:1;pointer-events:auto;}
  .drawer{
    position:fixed;top:0;right:0;height:100%;width:min(400px,92vw);
    background:var(--cream);z-index:70;
    box-shadow:-6px 0 0 var(--ink);
    transform:translateX(100%);transition:transform .3s ease;
    display:flex;flex-direction:column;
  }
  .drawer.open{transform:translateX(0);}
  .drawer-head{
    padding:22px 24px;border-bottom:2px solid var(--ink);
    display:flex;align-items:center;justify-content:space-between;
  }
  .drawer-head h3{font-size:1.3rem;}
  .drawer-close{font-size:1.6rem;line-height:1;color:var(--deep);}
  .drawer-items{flex-grow:1;overflow-y:auto;padding:18px 24px;display:flex;flex-direction:column;gap:16px;}
  .drawer-empty{color:var(--ink);opacity:.7;padding-top:30px;text-align:center;}
  .drawer-item{
    display:flex;gap:12px;align-items:center;
    border-bottom:1px solid var(--cream-dim);padding-bottom:14px;
  }
  .drawer-item .di-icon{
    width:46px;height:46px;border-radius:50%;background:var(--bubble);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
  }
  .drawer-item .di-icon svg{width:24px;height:24px;}
  .di-info{flex-grow:1;}
  .di-info .di-name{font-weight:700;font-size:0.94rem;}
  .di-info .di-price{font-size:0.84rem;color:var(--ink);opacity:.75;}
  .di-qty{display:flex;align-items:center;gap:8px;}
  .di-qty button{
    width:26px;height:26px;border-radius:50%;border:2px solid var(--ink);
    display:flex;align-items:center;justify-content:center;font-weight:700;
  }
  .di-remove{font-size:0.78rem;color:var(--sky-deep);font-weight:600;margin-left:8px;}
  .drawer-foot{
    padding:22px 24px;border-top:2px solid var(--ink);
  }
  .drawer-sub{display:flex;justify-content:space-between;font-weight:700;font-size:1.1rem;margin-bottom:14px;}
  .whatsapp-btn{
    width:100%;background:var(--sky);color:var(--ink);
    padding:15px;border-radius:999px;font-weight:700;font-size:1rem;
    display:flex;align-items:center;justify-content:center;gap:8px;
  }
  .whatsapp-btn:hover{background:var(--sky-deep);color:var(--white);}
  .drawer-note{font-size:0.78rem;color:var(--ink);opacity:.65;margin-top:10px;text-align:center;}

  /* ---------- Toast ---------- */
  .toast{
    position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);
    background:var(--ink);color:var(--white);padding:12px 22px;border-radius:999px;
    font-size:0.9rem;font-weight:600;opacity:0;pointer-events:none;
    transition:opacity .25s ease, transform .25s ease;z-index:80;
  }
  .toast.show{opacity:1;transform:translate(-50%,0);}

  /* ---------- Responsive ---------- */
  @media (max-width:880px){
    nav{display:none;}
    .hero-inner{grid-template-columns:1fr;text-align:center;}
    .hero p.lead{margin-left:auto;margin-right:auto;}
    .hero-ctas{justify-content:center;}
    .hero-art{order:-1;}
    .trust-inner{grid-template-columns:1fr;}
    .grid{grid-template-columns:repeat(2,1fr);}
    .about{grid-template-columns:1fr;}
    .about-art{order:-1;max-width:320px;margin:0 auto;}
    .cta{flex-direction:column;text-align:center;}
  }
  @media (max-width:540px){
    .grid{grid-template-columns:1fr;}
    .header-inner{padding:12px 18px;}
    .wrap{padding:0 18px;}
    .cta{padding:40px 26px;}
  }
</style>
</head>
<body>

<header>
  <div class="header-inner">
    <div class="brand">
      <img src="logo.png" alt="Dejalo Clean">
      <span>Dejalo Clean</span>
    </div>
    <nav>
      <a href="#inicio">Inicio</a>
      <a href="#productos">Productos</a>
      <a href="#nosotros">Nosotros</a>
      <a href="#contacto">Contacto</a>
    </nav>
    <div class="header-actions">
      <button class="cart-btn" id="openCart" aria-label="Abrir carrito">
        🛒 Carrito <span class="cart-count" id="cartCount">0</span>
      </button>
    </div>
  </div>
</header>

<main>

  <!-- HERO -->
  <section class="hero" id="inicio">
    <div class="wrap hero-inner">
      <div>
        <h1>Pelos de mascota, cero drama.</h1>
        <p class="lead">Productos de limpieza pensados para hogares con perro o gato: fáciles de usar, efectivos desde el primer intento y con toda la actitud Dejalo Clean.</p>
        <div class="hero-ctas">
          <a href="#productos" class="btn btn-primary">Ver productos</a>
          <a href="#contacto" class="btn btn-ghost">Escríbenos</a>
        </div>
      </div>
      <div class="hero-art">
        <div class="hero-blob">
          <img src="logo.png" alt="Mascota Dejalo Clean, un gato con lentes de sol">
          <span class="bubble b1"></span>
          <span class="bubble b2"></span>
          <span class="bubble b3"></span>
          <span class="bubble b4"></span>
        </div>
      </div>
    </div>
  </section>

  <!-- TRUST STRIP -->
  <div class="trust">
    <div class="trust-inner">
      <div class="trust-item">
        <svg viewBox="0 0 24 24" fill="none" stroke="var(--deep)" stroke-width="2"><path d="M5 12l4 4 10-10"/></svg>
        Fórmulas seguras para tu mascota
      </div>
      <div class="trust-item">
        <svg viewBox="0 0 24 24" fill="none" stroke="var(--deep)" stroke-width="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 3"/></svg>
        Resultados desde el primer uso
      </div>
      <div class="trust-item">
        <svg viewBox="0 0 24 24" fill="none" stroke="var(--deep)" stroke-width="2"><path d="M21 11.5a8.38 8.38 0 01-8.5 8.5 8.5 8.5 0 01-4-1L3 20l1-5.5A8.5 8.5 0 1121 11.5z"/></svg>
        Atención directa por WhatsApp
      </div>
    </div>
  </div>

  <!-- PRODUCTOS -->
  <section class="block" id="productos">
    <div class="wrap">
      <div class="section-head">
        <h2>Nuestros productos</h2>
        <p>Todo lo que necesitas para mantener tu casa libre de pelos y lista para recibir visitas, sin pasarte el día limpiando.</p>
      </div>
      <div class="grid" id="productGrid"></div>
    </div>
  </section>

  <!-- NOSOTROS -->
  <section class="block" id="nosotros">
    <div class="wrap about">
      <div class="about-art">
        <img src="logo.png" alt="Logo Dejalo Clean">
      </div>
      <div class="about-text">
        <h2>Nacimos por un gato terco y un sofá lleno de pelos.</h2>
        <p>Dejalo Clean empezó como una búsqueda simple: encontrar algo que de verdad funcionara contra el pelo de mascota, sin químicos agresivos ni instrucciones complicadas.</p>
        <p>Hoy diseñamos cada producto pensando en la rutina real de quienes viven con mascota: rápido, efectivo y sin dramas. Menos tiempo limpiando, más tiempo con tu mascota en el sofá que acabas de dejar impecable.</p>
      </div>
    </div>
  </section>

  <!-- CONTACTO -->
  <section class="block" id="contacto">
    <div class="wrap">
      <div class="cta">
        <div>
          <h2>¿Dudas sobre algún producto?</h2>
          <p>Escríbenos por WhatsApp y te ayudamos a elegir lo que tu casa necesita.</p>
        </div>
        <a href="https://wa.me/521234567890?text=Hola%2C%20tengo%20una%20pregunta%20sobre%20sus%20productos" target="_blank" rel="noopener" class="btn btn-primary">Escribir por WhatsApp</a>
      </div>
    </div>
  </section>

</main>

<footer>
  <div class="wrap footer-inner">
    <div class="footer-brand">
      <img src="logo.png" alt="Dejalo Clean">
      Dejalo Clean
    </div>
    <div>© 2026 Dejalo Clean. Todos los derechos reservados.</div>
  </div>
</footer>

<!-- CART DRAWER -->
<div class="overlay" id="overlay"></div>
<aside class="drawer" id="drawer" aria-label="Carrito de compras">
  <div class="drawer-head">
    <h3>Tu carrito</h3>
    <button class="drawer-close" id="closeCart" aria-label="Cerrar carrito">×</button>
  </div>
  <div class="drawer-items" id="drawerItems"></div>
  <div class="drawer-foot">
    <div class="drawer-sub"><span>Subtotal</span><span id="drawerSubtotal">$0</span></div>
    <button class="whatsapp-btn" id="checkoutBtn">Pedir por WhatsApp</button>
    <p class="drawer-note">Al pedir, se abrirá WhatsApp con tu pedido listo para enviar.</p>
  </div>
</aside>

<div class="toast" id="toast"></div>

<script>
  const WHATSAPP_NUMBER = "521234567890"; // reemplaza por el número real del negocio

  const products = [
    {
      id: "roller",
      name: "Rodillo Quitapelos XL",
      desc: "Rodillo reutilizable de alto agarre para sofás, ropa y asientos del auto.",
      price: 149,
      badge: "Más vendido",
      icon: `<circle cx="12" cy="12" r="7" stroke="var(--deep)" stroke-width="2" fill="none"/><rect x="10.5" y="1" width="3" height="6" rx="1.5" fill="var(--deep)"/>`
    },
    {
      id: "brush",
      name: "Cepillo Antipelusa Mágico",
      desc: "Cepillo de silicona que junta el pelo con un solo pase, sin cinta ni recargas.",
      price: 189,
      icon: `<path d="M6 3l12 12M6 15l12-12" stroke="var(--deep)" stroke-width="2" stroke-linecap="round"/><circle cx="12" cy="12" r="9" stroke="var(--deep)" stroke-width="1.6" fill="none"/>`
    },
    {
      id: "spray",
      name: "Spray Quitamanchas Pet",
      desc: "Elimina manchas y olor de accidentes de mascota en telas y alfombras.",
      price: 129,
      icon: `<path d="M9 2h4v4l2 2v14H7V8l2-2V2z" stroke="var(--deep)" stroke-width="2" fill="none" stroke-linejoin="round"/>`
    },
    {
      id: "glove",
      name: "Guante Deshedding",
      desc: "Guante de cepillado suave, ideal para mascotas sensibles al cepillo normal.",
      price: 159,
      icon: `<path d="M8 12V6a2 2 0 014 0v5M12 11V5a2 2 0 014 0v6M16 12V7a2 2 0 014 0v7a6 6 0 01-6 6h-2a6 6 0 01-6-6v-2a2 2 0 014 0" stroke="var(--deep)" stroke-width="1.6" fill="none" stroke-linecap="round" stroke-linejoin="round"/>`
    },
    {
      id: "wipes",
      name: "Toallitas Pet Fresh",
      desc: "Paquete de 40 toallitas para limpieza rápida de patas y pelaje.",
      price: 99,
      icon: `<rect x="4" y="6" width="16" height="13" rx="2" stroke="var(--deep)" stroke-width="2" fill="none"/><path d="M4 10h16" stroke="var(--deep)" stroke-width="2"/>`
    },
    {
      id: "kit",
      name: "Kit Completo Dejalo Clean",
      desc: "Rodillo, cepillo, spray y toallitas juntos, con descuento especial.",
      price: 499,
      badge: "Mejor valor",
      icon: `<rect x="3" y="8" width="18" height="12" rx="2" stroke="var(--deep)" stroke-width="2" fill="none"/><path d="M3 8l9-5 9 5" stroke="var(--deep)" stroke-width="2" fill="none" stroke-linejoin="round"/>`
    }
  ];

  const cart = {}; // { id: qty }

  const grid = document.getElementById("productGrid");
  products.forEach(p => {
    const card = document.createElement("div");
    card.className = "card";
    card.innerHTML = `
      ${p.badge ? `<span class="badge">${p.badge}</span>` : ""}
      <div class="card-icon"><svg viewBox="0 0 24 24">${p.icon}</svg></div>
      <h3>${p.name}</h3>
      <p class="desc">${p.desc}</p>
      <div class="card-foot">
        <span class="price">$${p.price}</span>
        <button class="add-btn" data-id="${p.id}">Agregar</button>
      </div>
    `;
    grid.appendChild(card);
  });

  grid.addEventListener("click", e => {
    const btn = e.target.closest(".add-btn");
    if (!btn) return;
    const id = btn.dataset.id;
    cart[id] = (cart[id] || 0) + 1;
    renderCart();
    showToast("Agregado al carrito");
  });

  const drawer = document.getElementById("drawer");
  const overlay = document.getElementById("overlay");
  const drawerItems = document.getElementById("drawerItems");
  const drawerSubtotal = document.getElementById("drawerSubtotal");
  const cartCount = document.getElementById("cartCount");

  function openDrawer(){ drawer.classList.add("open"); overlay.classList.add("open"); }
  function closeDrawer(){ drawer.classList.remove("open"); overlay.classList.remove("open"); }

  document.getElementById("openCart").addEventListener("click", openDrawer);
  document.getElementById("closeCart").addEventListener("click", closeDrawer);
  overlay.addEventListener("click", closeDrawer);

  function renderCart(){
    const ids = Object.keys(cart).filter(id => cart[id] > 0);
    let totalCount = 0, subtotal = 0;

    if (ids.length === 0){
      drawerItems.innerHTML = `<p class="drawer-empty">Tu carrito está vacío. Agrega algún producto para empezar.</p>`;
    } else {
      drawerItems.innerHTML = ids.map(id => {
        const p = products.find(pr => pr.id === id);
        const qty = cart[id];
        totalCount += qty;
        subtotal += qty * p.price;
        return `
          <div class="drawer-item">
            <div class="di-icon"><svg viewBox="0 0 24 24">${p.icon}</svg></div>
            <div class="di-info">
              <div class="di-name">${p.name}</div>
              <div class="di-price">$${p.price} c/u</div>
            </div>
            <div class="di-qty">
              <button data-action="dec" data-id="${id}" aria-label="Quitar uno">−</button>
              <span>${qty}</span>
              <button data-action="inc" data-id="${id}" aria-label="Agregar uno">+</button>
            </div>
            <span class="di-remove" data-action="remove" data-id="${id}">Quitar</span>
          </div>
        `;
      }).join("");
    }

    cartCount.textContent = totalCount;
    drawerSubtotal.textContent = "$" + subtotal;
  }

  drawerItems.addEventListener("click", e => {
    const target = e.target.closest("[data-action]");
    if (!target) return;
    const { action, id } = target.dataset;
    if (action === "inc") cart[id] = (cart[id] || 0) + 1;
    if (action === "dec") cart[id] = Math.max(0, (cart[id] || 0) - 1);
    if (action === "remove") cart[id] = 0;
    renderCart();
  });

  document.getElementById("checkoutBtn").addEventListener("click", () => {
    const ids = Object.keys(cart).filter(id => cart[id] > 0);
    if (ids.length === 0){
      showToast("Agrega productos antes de pedir");
      return;
    }
    let message = "Hola, quiero pedir:%0A";
    let subtotal = 0;
    ids.forEach(id => {
      const p = products.find(pr => pr.id === id);
      const qty = cart[id];
      subtotal += qty * p.price;
      message += `- ${p.name} x${qty} ($${p.price * qty})%0A`;
    });
    message += `%0ATotal: $${subtotal}`;
    window.open(`https://wa.me/${WHATSAPP_NUMBER}?text=${message}`, "_blank");
  });

  const toast = document.getElementById("toast");
  let toastTimer;
  function showToast(msg){
    toast.textContent = msg;
    toast.classList.add("show");
    clearTimeout(toastTimer);
    toastTimer = setTimeout(() => toast.classList.remove("show"), 1800);
  }

  renderCart();
</script>

</body>
</html>