:root{
      --bg:#0b0f19;
      --card:#111827;
      --muted:#9ca3af;
      --text:#f9fafb;
      --line:rgba(255,255,255,.08);
      --brand:#ff4d8d;
      --brand2:#7c3aed;
      --ok:#22c55e;
      --warn:#f59e0b;
      --shadow: 0 20px 60px rgba(0,0,0,.45);
      --radius:18px;
    }
    

    *{ box-sizing:border-box; }
    body{
      margin:0;
      font-family: Arial, sans-serif;
      background: radial-gradient(1200px 600px at 20% 0%, rgba(255, 0, 93, 0.18), transparent 60%),
                  radial-gradient(900px 500px at 90% 10%, rgba(124,58,237,.18), transparent 60%),
                  var(--bg);
      color:var(--text);
      min-width: 370px;
    }

    a{ color:inherit; text-decoration:none; }

    /* Header */
    .topbar{
      position:sticky;
      top:0;
      z-index:50;
      backdrop-filter: blur(10px);
      background: rgba(11,15,25,.65);
      border-bottom: 1px solid var(--line);
    }
    
    .container{
      width:min(1200px, 92%);
      margin: 0 auto;
    }

    .header{
      display:flex;
      align-items:center;
      justify-content:space-between;
      padding: 14px 0;
      gap:12px;
    }

    .brand{
      display:flex;
      align-items:center;
      gap:10px;
      /* min-width: 180px; */
    }

    .logo{
      width:42px;
      height:42px;
      border-radius:14px;
      background: url('img/IvoryMizuki_logo.png') no-repeat center/cover;
      box-shadow: 0 10px 30px rgba(255, 0, 93, 0.25);
    }

    .brand h1{
      font-size: 1.05rem;
      margin:0;
      line-height:1.1;
      letter-spacing:.2px;
    }
    .brand p{
      margin:0;
      font-size:.82rem;
      color:var(--muted);
    }

    .searchbar{
      flex:1;
      display:flex;
      gap:10px;
      align-items:center;
    }

    .input{
      width:90%;
      padding: 12px 14px;
      border-radius: 14px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.04);
      color: var(--text);
      outline:none;
    }
    .input::placeholder{ color: rgba(255,255,255,.55); }

    .header-limpiar{
      flex-shrink:0;
      position: absolute;
      right: 0;
    }

    .txt-mobile{
      display:none;
    }

    .btn{
      padding: 12px 14px;
      border:none;
      border-radius: 14px;
      cursor:pointer;
      font-weight: 700;
      color: var(--text);
      background: rgba(255,255,255,.06);
      border:1px solid var(--line);
      transition: .15s ease;
      white-space:nowrap;
    }
    .btn:hover{ transform: translateY(-1px); }
    .btn:active{ transform: scale(.99); } 

    .btn-primary{
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      border: none;
    }

    .cart-btn{
      width: 120px;
      display:flex;
      align-items:center;
      gap:8px;
      position:relative;
      min-width: 75px;
      justify-content:center;
    }

    .badge{
      position:absolute;
      top:-6px;
      right:-6px;
      background: var(--ok);
      color:#001b0a;
      font-weight:900;
      font-size:.70rem;
      padding: 4px 6px;
      border-radius: 999px;
      border:2px solid rgba(11,15,25,.9);
    }

    /* Hero */
    .hero{
      padding: 26px 0 18px;
    }

    .hero-grid{
      display:grid;
      grid-template-columns: 1.35fr .65fr;
      gap:16px;
    }

    .hero-card{
      border:1px solid var(--line);
      background: rgba(255,255,255,.04);
      border-radius: var(--radius);
      padding: 18px;
      box-shadow: var(--shadow);
      overflow:hidden;
      position:relative;
    }

    .hero-card:before{
      content:"";
      position:absolute;
      inset:-2px;
      background: radial-gradient(900px 300px at 15% 0%, rgba(255,77,141,.25), transparent 55%),
                  radial-gradient(700px 300px at 90% 0%, rgba(124,58,237,.25), transparent 55%);
      opacity:.9;
      pointer-events:none;
    }

    .hero-inner{
      position:relative;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:18px;
    }

    .hero-text h2{
      margin:0;
      font-size: 1.8rem;
      letter-spacing:.2px;
    }

    .hero-text p{
      margin:10px 0 0;
      color: rgba(255,255,255,.75);
      line-height:1.4;
      max-width: 520px;
    }

    .chips{
      margin-top: 14px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }

    .chip{
      padding: 8px 10px;
      border-radius: 999px;
      font-size:.8rem;
      border:1px solid var(--line);
      background: rgba(255,255,255,.05);
      color: rgba(255,255,255,.85);
    }

    .promo{
      display:grid;
      gap:16px;
    }

    .promo-box{
      border:1px solid var(--line);
      background: rgba(255,255,255,.04);
      border-radius: var(--radius);
      padding: 16px;
      box-shadow: var(--shadow);
    }

    .promo-box p{
      margin:0;
      color: rgba(255,255,255,.75);
      font-size:.9rem;
      line-height:1.35;
    }

    /* Filters + products */
    .section{
      padding: 12px 0 40px;
    }

    .section-head{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      margin: 10px 0 14px;
    }

    .section-head h3{
      margin:0;
      font-size: 1.05rem;
    }

    .filters{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      align-items:center;
    }

    select{
      display: auto;
      cursor:pointer;
      padding: 10px 12px;
      border-radius: 14px;
      border:1px solid var(--line);
      background: rgb(255, 0, 98);
      color: var(--text);
      outline:none;
    }

    .grid{
      display:grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 14px;
    }

    .product{
      border:1px solid var(--line);
      background: rgba(255,255,255,.04);
      border-radius: var(--radius);
      overflow:hidden;
      box-shadow: var(--shadow);
      display:flex;
      flex-direction:column;
      min-height: 100%;
    }

    .pimg{
      height: 210px;
      /* background: linear-gradient(135deg, rgb(255, 0, 0), rgb(93, 0, 255)); */
      position:relative;
      display:flex;
      align-items:flex-end;
      padding: auto;
    }

    .tag{
      background: rgba(0,0,0,.45);
      border:1px solid rgba(255,255,255,.12);
      color:#fff;
      font-size:.75rem;
      padding: 6px 10px;
      border-radius: 999px;
    }

    .pbody{
      padding: 12px;
      display:flex;
      flex-direction:column;
      gap:10px;
      flex:1;
    }

    .ptitle{
      margin:0;
      font-size: 1rem;
      line-height:1.2;
    }

    .meta{
      display:flex;
      justify-content:space-between;
      align-items:center;
      color: rgba(255,255,255,.75);
      font-size:.86rem;
      gap:10px;
    }

    .price{
      font-weight: 900;
      color: #fff;
    }

    .old{
      text-decoration: line-through;
      opacity:.55;
      font-weight: 600;
      font-size:.85rem;
    }

    .actions{
      display:flex;
      gap:10px;
      margin-top:auto;
    }

    .actions a{
      text-align:center;
      text-decoration:none;
    }

    .btn-small{
      flex:1;
      padding: 10px 12px;
      border-radius: 14px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.05);
      color: var(--text);
      cursor:pointer;
      font-weight:800;
    }
    .btn-small:hover{ opacity:.92; }

    .btn-add{
      background: linear-gradient(135deg, var(--brand), var(--brand2));
      border:none;
    }

    /* Drawer (cart) */
    .overlay{
      position:fixed;
      inset:0;
      background: rgba(0,0,0,.55);
      display:none;
      z-index:80;
    }
    .overlay.show{ display:block; }

    .drawer{
      position:fixed;
      top:0;
      right:-460px;
      height:100%;
      width:min(460px, 92vw);
      background: rgba(17,24,39,.96);
      border-left: 1px solid var(--line);
      backdrop-filter: blur(10px);
      z-index:90;
      transition: right .22s ease;
      display:flex;
      flex-direction:column;
    }

    .drawer.show{
      right:0;
    }

    .drawer-head{
      padding: 16px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      border-bottom: 1px solid var(--line);
    }

    .drawer-head h3{
      margin:0;
      font-size: 1.05rem;
    }

    .drawer-body{
      padding: 12px 16px;
      overflow:auto;
      flex:1;
    }

    .cart-item{
      display:flex;
      gap:12px;
      padding: 12px 0;
      border-bottom: 1px solid var(--line);
      align-items:center;
    }

    .thumb{
      width:60px;
      height:60px;
      border-radius:16px;
      background: linear-gradient(135deg, rgba(255,77,141,.25), rgba(124,58,237,.25));
      border:1px solid var(--line);
    }

    .ci-info{
      flex:1;
      min-width: 0;
    }
    .ci-info h4{
      margin:0;
      font-size:.95rem;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .ci-info p{
      margin:4px 0 0;
      color: rgba(255,255,255,.65);
      font-size:.85rem;
    }

    .qty{
      display:flex;
      align-items:center;
      gap:8px;
    }

    .qbtn{
      width:32px;
      height:32px;
      border-radius:12px;
      border:1px solid var(--line);
      background: rgba(255,255,255,.05);
      color:#fff;
      cursor:pointer;
      font-weight:900;
    }

    .drawer-foot{
      border-top: 1px solid var(--line);
      padding: 16px;
      display:grid;
      gap:12px;
    }

    .totals{
      display:grid;
      gap:6px;
      font-size:.95rem;
      color: rgba(255,255,255,.85);
    }

    .trow{
      display:flex;
      justify-content:space-between;
      align-items:center;
    }

    .trow strong{ color:#fff; }

    .checkout{
      display:grid;
      gap:10px;
      padding-top: 6px;
    }

    .small-note{
      font-size:.82rem;
      color: rgba(255,255,255,.6);
      line-height:1.3;
    }

    .empty{
      padding: 30px 0;
      text-align:center;
      color: rgba(255,255,255,.75);
    }

    /* Modal checkout */
    .modal{
      position:fixed;
      inset:0;
      display:none;
      z-index:120;
      align-items:center;
      justify-content:center;
      padding: 18px;
      background: rgba(245, 245, 220, 0.322);
    }
    .modal.show{ display:flex; }

    .modal-card{
      width:min(520px, 96vw);
      border-radius: 22px;
      border:1px solid var(--line);
      background: rgba(17,24,39,.98);
      box-shadow: var(--shadow);
      overflow:hidden;
    }

    .modal-head{
      padding: 14px 16px;
      display:flex;
      justify-content:space-between;
      align-items:center;
      border-bottom:1px solid var(--line);
    }

    .modal-body{
      padding: 16px;
      display:grid;
      gap:10px;
    }

    .grid2{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:10px;
    }

    .modal-body input{
      background: rgba(255,255,255,.05);
      border:1px solid var(--line);
      color:#fff;
      border-radius: 14px;
      padding: 12px 14px;
      outline:none;
    }

    .modal-body input::placeholder{
      color: rgba(255,255,255,.55);
    }

    .footer{
      border-top:1px solid var(--line);
      padding: 16px;
      display:flex;
      justify-content:space-between;
      gap:12px;
      align-items:center;
      flex-wrap:wrap;
    }

    .toast{
      position:fixed;
      left:50%;
      bottom:20px;
      transform: translateX(-50%);
      background: rgba(17,24,39,.95);
      border:1px solid var(--line);
      color:#fff;
      padding: 12px 14px;
      border-radius: 14px;
      box-shadow: var(--shadow);
      display:none;
      z-index:200;
      min-width: 260px;
      text-align:center;
    }
    .toast.show{ display:block; }

    .footer {
      background: #0b0f19;
      color: #fff;
      padding: 50px 20px 20px;
      font-family: Arial, sans-serif;
}

.whatsapp-float{
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  background: #25D366;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size: 1.8rem;
  box-shadow: 0 12px 35px rgba(37, 211, 102, 0.35);
  z-index: 9999;
  text-decoration:none;
  transition: .2s ease;
}

.whatsapp-float:hover{
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 18px 45px rgba(37, 211, 102, 0.45);
}

.wa-tooltip{
  position:absolute;
  right: 70px;
  background: rgba(17,24,39,.95);
  border: 1px solid rgba(255,255,255,.12);
  color:#fff;
  padding: 10px 12px;
  border-radius: 14px;
  font-size: .85rem;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(10px);
  pointer-events:none;
  transition: .2s ease;
}

.whatsapp-float:hover .wa-tooltip{
  opacity: 1;
  transform: translateX(0);
}

.footer-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.footer-brand h2 {
  font-size: 1.8rem;
  margin-bottom: 8px;
  letter-spacing: 1px;
}

.footer-brand p {
  opacity: 0.75;
  max-width: 350px;
  line-height: 1.4;
}

.footer-social {
  display: flex;
  gap: 15px;
}

.social-icon {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 1.3rem;
  color: white;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.social-icon:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.45);
}

/* Colores por red */
.facebook:hover { background: #1877f2; }
.telegram:hover { background: #00aeff; }
.instagram:hover { background: linear-gradient(45deg, #f58529, #dd2a7b, #8134af, #515bd4); }
.tiktok:hover { background: #111; box-shadow: 0 0 20px rgba(255, 0, 80, 0.4); }

.footer-bottom {
  margin-top: 35px;
  padding-top: 15px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.9rem;
  opacity: 0.6;
}

/* Responsive */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 5fr; }
  .brand{ min-width: 220px; }
}
@media (max-width: 520px){
  .section-head{
    justify-content:none;
    gap:12px;
    margin: 10px 0 14px;
  } 

  select{
    font-size: 12px;
  }

  .grid{ grid-template-columns: 1fr; }
  .searchbar{
   align-items:stretch; 
  }

  .cart-btn{ 
    width:80px;
    font-size: 15px;
  }
  .grid {
  display: grid; 
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  }
  .wa-tooltip{
  display:none;
  position: absolute;
  }

  .topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9;
  transition: transform 0.3s ease;
  }

  .topbar.hide {
    transform: translateY(-100%);
  }

  .topbar.show {
    transform: translateY(0);
  }

  body {
    padding-top: 100px; 
  }

  .txt-desktop{
    display:none;
  }

  .txt-mobile{
    display:inline;
  }
}