:root{
      --bg:#0f1020; --card:#ffffff; --muted:#6b7280; --primary:#5b21ff; --primary-2:#6c4cff; --ring:rgba(91,33,255,.25);
      --radius:18px; --shadow:0 10px 30px rgba(15,16,32,.18);
    }
    *{box-sizing:border-box}
    html,body{margin:0; background:linear-gradient(180deg,var(--bg),#1b1d36 60%, #111222); font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color:#111827}
    .wrap{max-width:980px; margin:auto; padding:28px 16px 60px}

    input[type=text],input[type=tel], select, textarea{font-size:16px; appearance:none; -webkit-appearance:none; -moz-appearance:none; background:#fff; color:#111827; border:2px solid #e5e7eb; border-radius:14px; padding:14px 16px; outline:none; transition:border-color .2s, box-shadow .2s; width:100%; min-height:52px; line-height:1.2;} 
    select{background:#fff none no-repeat right 12px center; background-size:18px; padding-right:48px; color:#111827; min-height:52px;} 
    input:focus, select:focus, textarea:focus{border-color:var(--primary); box-shadow:0 0 0 6px var(--ring)}

    .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px}
    .step{background:rgba(255,255,255,.06); color:#e5e7eb; border:1px solid rgba(255,255,255,.08); border-radius:14px; padding:10px 12px; text-align:center; font-weight:600}
    .step b{color:#fff}

    .ribbons{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:8px 0 18px}
    .ribbon{display:flex; align-items:center; gap:10px; background:#ffffff12; color:#f9fafb; border:1px dashed #ffffff2a; border-radius:14px; padding:0px; cursor:default}
    .ribbon .dot{width:34px; height:34px; border-radius:10px; background:#ffffff18; display:grid; place-items:center}
    .ribbon .k{font-weight:800}

    .grid{display:grid; grid-template-columns:1fr; gap:18px}
    @media(min-width:860px){.grid{grid-template-columns: 1.1fr .9fr}}

    .card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow)}

    .packs{padding:18px}
    .packs h3{margin:4px 6px 14px; color:#111827}
    .pack{position:relative; border:2px solid #e5e7eb; border-radius:16px; padding:16px; transition:.2s; background:#fff; cursor:pointer}
    .pack:hover{border-color:#d1d5db}
    .pack.selected{border-color:var(--primary); box-shadow:0 0 0 8px var(--ring)}
    .pack + .pack{margin-top:14px}
    .pack-header{display:flex; align-items:center; gap:12px}
    .radio{width:22px; height:22px; border-radius:50%; border:2px solid var(--primary); display:inline-grid; place-items:center}
    .radio .dot{width:12px; height:12px; background:var(--primary); border-radius:50%; opacity:0; transition:.2s}
    .pack.selected .radio .dot{opacity:1}
    .badge{margin-left:auto; font-size:12px; font-weight:700; background:linear-gradient(45deg,#ff8a2b,#ff3d60); color:#fff; padding:6px 10px; border-radius:999px}
    .pack-title{margin:10px 0 6px; font-weight:800; font-size:18px}
    .pack-sub{color:#6b7280; font-weight:600; font-size:14px}
    .prices{margin-top:12px}
    .now{font-weight:900; font-size:26px; color:var(--primary)}
    .old{color:#9ca3af; text-decoration:line-through; font-weight:700}

    .form{padding:18px}
    .field{margin-bottom:16px} 
    label{display:block; font-size:14px; color:#374151; margin:0 0 8px 2px; font-weight:700} 

    .phone{display:grid; grid-template-columns:140px 1fr; gap:12px} 
    @media(max-width:480px){.phone{grid-template-columns:1fr;}} 

    textarea{min-height:140px; resize:vertical}

    .pay-note{display:flex; gap:10px; align-items:flex-start; background:#f9fafb; border:1px dashed #e5e7eb; border-radius:12px; padding:10px 12px; color:#374151; font-size:14px}

    .submit{display:block; width:100%; border:none; background:linear-gradient(180deg,var(--primary-2),var(--primary)); color:#fff; padding:16px 18px; border-radius:14px; font-weight:900; font-size:16px; cursor:pointer; box-shadow:0 10px 24px rgba(91,33,255,.32); transition:transform .08s ease; min-height:54px} 
    .submit:active{transform:translateY(1px)}

    .tiny{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; color:#f3f4f6; margin-top:14px; font-size:12px}
    .tiny .pill{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:10px; font-weight:700; color:#fff; box-shadow:0 6px 12px rgba(0,0,0,.15)}
    .tiny .pill--ship{background:linear-gradient(45deg,#0ea5e9,#22c55e)}
    .tiny .pill--cod{background:linear-gradient(45deg,#7c3aed,#3b82f6)}
  

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

.product-card{
  position:relative;
  display:flex;
  flex-direction:column;
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
  overflow:hidden;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  border:2px solid transparent;
  -webkit-tap-highlight-color: transparent;
}

.product-card:hover{ transform:translateY(-2px); }

.product-card img{
  width:100%;
  aspect-ratio:1/1;      
  object-fit:cover;
  display:block;
}

.product-card .title{
  font-size:14px;
  line-height:1.3;
  text-align:center;
  padding:10px 8px;
}

.product-card .check-badge{
  position:absolute;
  top:8px; right:8px;
  width:24px; height:24px;
  border-radius:50%;
  background:#10b981;    
  color:#fff;
  font-weight:700;
  font-size:16px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 10px rgba(16,185,129,.35);
  transform:scale(.8);
  opacity:0;
  transition:transform .12s ease, opacity .12s ease;
  pointer-events:none;
}


.product-card .product-check{
  position:absolute;
  inset:0;               
  opacity:0;
}


.product-card.selected{
  border-color:#10b981;
  box-shadow:0 10px 22px rgba(16,185,129,.18), 0 6px 16px rgba(0,0,0,.06);
}
.product-card.selected .check-badge{
  transform:scale(1);
  opacity:1;
}


.product-card .product-check:focus-visible + img,
.product-card .product-check:focus-visible ~ .title{
  outline:2px solid #2563eb; outline-offset:2px;
}

		

  #salesco {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    color: black;
    border-radius: 10px;
    padding: 10px;
    margin: 0;
    z-index: 9999;
    box-sizing: border-box;
    display: none;
    flex-direction: column;
  }

  
  #salesco .content {
    flex: 1; 
    overflow-y: auto;
    padding-right: 10px; 
  }

  
  #salesco .footer {
    position: sticky;
    bottom: 0;
    background: white;
    border-top: 1px solid #ddd;
    text-align: center;
    padding: 12px 0;
  }

  #salesco button {
    background: black;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 16px;
  }

  #salesco button:active {
    opacity: 0.8;
  }


.woss-import-1{display:none}
.woss-import-2{display:none}
.woss-import-3{display:none}
.woss-import-4{display:none}
.woss-import-5{display:none}
.woss-import-6{display:none}