.htsk-wrap {
    max-width: 800px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
.htsk-card {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 6px 18px rgba(28,30,33,0.06);
    margin-top: 16px;
}
.htsk-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f1f1;
}
.htsk-row:last-child { border-bottom: none; }
.htsk-label { font-weight: 600; color: #222; flex: 0 0 45%; }
.htsk-control { flex: 1; }
.htsk-toggle { position: relative; display:inline-block; width:64px; height:36px; }
.htsk-toggle input { opacity:0; width:0; height:0; }
.htsk-toggle-slider {
    position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0;
    background:#e6e6e6; border-radius: 36px; transition: background .25s ease;
}
.htsk-toggle-slider:before{ content:""; position:absolute; left:6px; top:6px; width:24px; height:24px; background:white; border-radius:50%; transition: transform .25s cubic-bezier(.2,.9,.3,1); box-shadow: 0 2px 6px rgba(16,24,40,0.08); }
.htsk-toggle input:checked + .htsk-toggle-slider{ background: linear-gradient(90deg,#6ee7b7,#10b981); }
.htsk-toggle input:checked + .htsk-toggle-slider:before{ transform: translateX(28px); }
.htsk-color { width:140px; padding:6px 8px; border-radius:6px; border:1px solid #e6e6e6; }
.htsk-preview { margin-top:16px; padding:14px; background:#fbfdff; border-radius:8px; border:1px dashed #eef2f7; }
.htsk-preview-sample { font-size:15px; color:#333; }
.htsk-sample { padding:2px 6px; border-radius:4px; }

.description {
    padding: 15px 0 !important;
}

p.title {
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
}

.products {
    display: flex;
    gap: 10px;
}

.products a {
    font-size: 14px;
    background: #4252d0;
    color: #fff;
    display: inline-block;
    padding: 10px 16px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    transition: 0.25s;
    border: none;
}

.products a:hover {
    background: #099765;
}

/* Responsive tweaks */
@media (max-width:720px){
    .htsk-row { flex-direction: column; align-items:flex-start; }
    .htsk-label { margin-bottom:6px; }
}