/**
 * Vianke Shop Styles
 * @copyright 2026 Vianke Ltd
 */

/* === PAGE WRAPPER === */
.vs-page-wrapper { max-width: 1200px !important; margin: 0 auto !important; padding: 30px 20px !important; }

/* === RESET & BASE === */
.vs-grid, .vs-product, .vs-checkout { 
    max-width: 1200px !important; 
    margin: 0 auto !important; 
    padding: 20px !important; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important; 
    box-sizing: border-box !important; 
}
.vs-grid *, .vs-product *, .vs-checkout * { box-sizing: border-box !important; }

/* === KNAPPAR === */
.vs-btn { 
    display: inline-block !important; 
    padding: 12px 24px !important; 
    border-radius: 6px !important; 
    font-size: 15px !important; 
    font-weight: 600 !important; 
    text-decoration: none !important; 
    text-align: center !important; 
    cursor: pointer !important; 
    border: none !important; 
    transition: all 0.2s !important; 
    line-height: 1.4 !important;
}
.vs-btn-blue { background: #2563eb !important; color: #fff !important; }
.vs-btn-blue:hover { background: #1d4ed8 !important; color: #fff !important; }
.vs-btn-green { background: #059669 !important; color: #fff !important; }
.vs-btn-green:hover { background: #047857 !important; color: #fff !important; }
.vs-btn-gray { background: #e5e7eb !important; color: #374151 !important; }
.vs-btn-gray:hover { background: #d1d5db !important; color: #374151 !important; }
.vs-btn-lg { font-size: 18px !important; padding: 16px 32px !important; width: 100% !important; }
.vs-btn-full { width: 100% !important; }

/* === PRODUKTLISTA - 3 KOLUMNER === */
.vs-grid { 
    display: grid !important; 
    grid-template-columns: repeat(3, 1fr) !important; 
    gap: 25px !important; 
    width: 100% !important;
}

.vs-card { 
    background: #fff !important; 
    border-radius: 12px !important; 
    overflow: hidden !important; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important; 
    transition: transform 0.2s, box-shadow 0.2s !important; 
    display: flex !important; 
    flex-direction: column !important; 
}
.vs-card:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 25px rgba(0,0,0,0.12) !important; }
.vs-card.vs-expired { opacity: 0.6 !important; }

.vs-card-link { text-decoration: none !important; color: inherit !important; display: block !important; }

.vs-card-img { 
    width: 100% !important; 
    height: 0 !important; 
    padding-bottom: 100% !important; 
    position: relative !important; 
    background: #f3f4f6 !important; 
    overflow: hidden !important; 
}
.vs-card-img img { 
    position: absolute !important; 
    top: 0 !important; 
    left: 0 !important; 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    transition: transform 0.3s !important; 
}
.vs-card:hover .vs-card-img img { transform: scale(1.05) !important; }

.vs-badge { 
    position: absolute !important; 
    top: 10px !important; 
    right: 10px !important; 
    background: #dc2626 !important; 
    color: #fff !important; 
    padding: 4px 10px !important; 
    border-radius: 4px !important; 
    font-size: 12px !important; 
    font-weight: 600 !important; 
}

.vs-no-img { 
    position: absolute !important; 
    top: 0 !important; 
    left: 0 !important; 
    width: 100% !important; 
    height: 100% !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    color: #9ca3af !important; 
    font-size: 14px !important; 
}

.vs-card-title { 
    margin: 15px 15px 8px !important; 
    font-size: 16px !important; 
    font-weight: 600 !important; 
    color: #1f2937 !important; 
}
.vs-card-price { 
    margin: 0 15px 15px !important; 
    font-size: 20px !important; 
    font-weight: 700 !important; 
    color: #059669 !important; 
}

.vs-card .vs-btn { margin: auto 15px 15px !important; }

/* === PRODUKTSIDA - 2 KOLUMNER === */
.vs-back { 
    display: inline-block !important; 
    margin-bottom: 20px !important; 
    color: #dc2626 !important; 
    text-decoration: none !important; 
    font-size: 14px !important; 
    font-weight: 500 !important;
}
.vs-back:hover { color: #2563eb !important; text-decoration: underline !important; }

.vs-product-row { 
    display: grid !important; 
    grid-template-columns: 1fr 1fr !important; 
    gap: 50px !important; 
    align-items: start !important; 
}

/* Bildkolumn */
.vs-product-img { 
    position: sticky !important; 
    top: 20px !important; 
}
.vs-main-img { 
    width: 100% !important; 
    max-width: 500px !important;
    height: auto !important; 
    border-radius: 12px !important; 
    display: block !important; 
}
.vs-no-img-lg { 
    width: 100% !important; 
    padding-bottom: 100% !important; 
    background: #f3f4f6 !important; 
    border-radius: 12px !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    color: #9ca3af !important; 
}

.vs-thumbs { 
    display: flex !important; 
    gap: 10px !important; 
    margin-top: 15px !important; 
    flex-wrap: wrap !important; 
}
.vs-thumb { 
    width: 70px !important; 
    height: 70px !important; 
    object-fit: cover !important; 
    border-radius: 8px !important; 
    cursor: pointer !important; 
    border: 2px solid transparent !important; 
    transition: border-color 0.2s !important; 
}
.vs-thumb:hover, .vs-thumb.active { border-color: #2563eb !important; }

/* Infokolumn */
.vs-product-info h1 { 
    margin: 0 0 15px !important; 
    font-size: 28px !important; 
    font-weight: 700 !important; 
    color: #1f2937 !important; 
    line-height: 1.3 !important; 
}

.vs-desc { 
    font-size: 15px !important; 
    line-height: 1.7 !important; 
    color: #4b5563 !important; 
    margin-bottom: 25px !important; 
}
.vs-desc p { margin: 0 0 12px !important; }
.vs-desc p:last-child { margin-bottom: 0 !important; }

.vs-price { 
    font-size: 32px !important; 
    font-weight: 700 !important; 
    color: #059669 !important; 
    margin-bottom: 25px !important; 
}

/* Deadline box */
.vs-deadline { 
    background: linear-gradient(135deg, #fef3c7, #fde68a) !important; 
    border-radius: 12px !important; 
    padding: 20px !important; 
    margin-bottom: 20px !important; 
}
.vs-deadline.expired { background: linear-gradient(135deg, #fee2e2, #fecaca) !important; }
.vs-deadline-label { font-size: 14px !important; color: #92400e !important; margin-bottom: 12px !important; }
.vs-deadline-label strong { font-size: 16px !important; }
.vs-deadline-expired { font-size: 16px !important; font-weight: 600 !important; color: #991b1b !important; }

.vs-countdown { display: flex !important; gap: 12px !important; }
.vs-cd { 
    background: #fff !important; 
    border-radius: 8px !important; 
    padding: 12px 15px !important; 
    text-align: center !important; 
    min-width: 65px !important; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; 
}
.vs-cd span { display: block !important; font-size: 26px !important; font-weight: 700 !important; color: #1f2937 !important; line-height: 1 !important; }
.vs-cd small { display: block !important; font-size: 11px !important; color: #6b7280 !important; margin-top: 4px !important; text-transform: uppercase !important; }

/* Orders progress */
.vs-orders { background: #f3f4f6 !important; border-radius: 12px !important; padding: 20px !important; margin-bottom: 20px !important; }
.vs-orders-text { font-size: 14px !important; font-weight: 600 !important; color: #374151 !important; margin-bottom: 10px !important; }
.vs-progress { height: 10px !important; background: #e5e7eb !important; border-radius: 5px !important; overflow: hidden !important; }
.vs-progress-bar { height: 100% !important; background: linear-gradient(90deg, #059669, #10b981) !important; border-radius: 5px !important; transition: width 0.5s !important; }
.vs-orders-ok { color: #059669 !important; font-weight: 600 !important; margin-top: 10px !important; font-size: 14px !important; }
.vs-orders-left { color: #6b7280 !important; font-size: 13px !important; margin-top: 8px !important; }

.vs-delivery { background: #eff6ff !important; border-radius: 8px !important; padding: 15px !important; margin-bottom: 20px !important; color: #1e40af !important; font-size: 14px !important; }

/* Formulär */
.vs-form { margin-top: 20px !important; }
.vs-field { margin-bottom: 20px !important; }
.vs-field label { display: block !important; font-weight: 600 !important; margin-bottom: 8px !important; color: #374151 !important; font-size: 14px !important; }
.vs-field .req { color: #dc2626 !important; }

.vs-sizes { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; }
.vs-size { cursor: pointer !important; }
.vs-size input { display: none !important; }
.vs-size span { 
    display: block !important; 
    padding: 12px 18px !important; 
    border: 2px solid #e5e7eb !important; 
    border-radius: 8px !important; 
    font-weight: 600 !important; 
    font-size: 14px !important; 
    transition: all 0.2s !important; 
    background: #fff !important;
    color: #374151 !important;
}
.vs-size:hover span { border-color: #2563eb !important; }
.vs-size input:checked + span { background: #2563eb !important; border-color: #2563eb !important; color: #fff !important; }

.vs-qty { display: inline-flex !important; border: 2px solid #e5e7eb !important; border-radius: 8px !important; overflow: hidden !important; }
.vs-qty button { 
    width: 44px !important; 
    height: 44px !important; 
    border: none !important; 
    background: #f3f4f6 !important; 
    font-size: 20px !important; 
    cursor: pointer !important; 
    color: #374151 !important;
}
.vs-qty button:hover { background: #e5e7eb !important; }
.vs-qty input { 
    width: 60px !important; 
    height: 44px !important; 
    border: none !important; 
    text-align: center !important; 
    font-size: 16px !important; 
    font-weight: 600 !important; 
}
.vs-qty input:focus { outline: none !important; }

.vs-expired-msg { background: #fee2e2 !important; color: #991b1b !important; padding: 20px !important; border-radius: 8px !important; text-align: center !important; font-size: 15px !important; }

.vs-error { text-align: center !important; padding: 40px !important; }

/* === VARUKORG PANEL === */
.vs-cart-panel { 
    position: fixed !important; 
    top: 0 !important; 
    right: -420px !important; 
    width: 400px !important; 
    height: 100vh !important; 
    background: #fff !important; 
    box-shadow: -4px 0 25px rgba(0,0,0,0.15) !important; 
    z-index: 999999 !important; 
    display: flex !important; 
    flex-direction: column !important; 
    transition: right 0.3s !important; 
}
.vs-cart-panel.open { right: 0 !important; }

.vs-cart-head { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 20px !important; border-bottom: 1px solid #e5e7eb !important; }
.vs-cart-head h3 { margin: 0 !important; font-size: 18px !important; }
#vs-cart-close { background: none !important; border: none !important; font-size: 28px !important; cursor: pointer !important; color: #6b7280 !important; line-height: 1 !important; }

.vs-cart-body { flex: 1 !important; overflow-y: auto !important; padding: 15px !important; }
.vs-cart-empty-msg { text-align: center !important; color: #9ca3af !important; padding: 40px 0 !important; }

.vs-cart-item { display: flex !important; align-items: center !important; gap: 12px !important; padding: 12px 0 !important; border-bottom: 1px solid #f3f4f6 !important; }
.vs-cart-item-img { width: 55px !important; height: 55px !important; object-fit: cover !important; border-radius: 6px !important; }
.vs-cart-item-info { flex: 1 !important; }
.vs-cart-item-name { font-weight: 600 !important; color: #1f2937 !important; font-size: 14px !important; margin-bottom: 2px !important; }
.vs-cart-item-meta { font-size: 12px !important; color: #6b7280 !important; }
.vs-cart-item-total { font-weight: 600 !important; color: #059669 !important; font-size: 14px !important; }
.vs-cart-item-remove { background: none !important; border: none !important; font-size: 18px !important; color: #9ca3af !important; cursor: pointer !important; padding: 5px !important; }
.vs-cart-item-remove:hover { color: #dc2626 !important; }

.vs-cart-foot { padding: 20px !important; border-top: 1px solid #e5e7eb !important; background: #f9fafb !important; }
.vs-cart-total { display: flex !important; justify-content: space-between !important; font-size: 18px !important; margin-bottom: 15px !important; }
.vs-cart-total strong { color: #059669 !important; }
.vs-cart-btns { display: flex !important; gap: 10px !important; }
.vs-cart-btns .vs-btn { flex: 1 !important; text-align: center !important; padding: 12px 15px !important; font-size: 14px !important; }

.vs-overlay { 
    position: fixed !important; 
    top: 0 !important; 
    left: 0 !important; 
    width: 100% !important; 
    height: 100% !important; 
    background: rgba(0,0,0,0.5) !important; 
    z-index: 999998 !important; 
    display: none !important; 
}
.vs-overlay.open { display: block !important; }

/* === KASSA === */
.vs-checkout-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 40px !important; margin-top: 30px !important; }

.vs-checkout-left { background: #f9fafb !important; border-radius: 12px !important; padding: 25px !important; }
.vs-checkout-left h3, .vs-checkout-right h3 { margin: 0 0 20px !important; font-size: 18px !important; }

.vs-checkout-items { margin-bottom: 15px !important; }
.vs-checkout-item { display: flex !important; justify-content: space-between !important; padding: 10px 0 !important; border-bottom: 1px solid #e5e7eb !important; font-size: 14px !important; }
.vs-checkout-total { display: flex !important; justify-content: space-between !important; font-size: 18px !important; padding-top: 15px !important; border-top: 2px solid #e5e7eb !important; }
.vs-checkout-total strong { color: #059669 !important; }

.vs-pay-box { background: #eff6ff !important; border-radius: 8px !important; padding: 15px !important; margin-top: 20px !important; }
.vs-pay-box h4 { margin: 0 0 10px !important; color: #1e40af !important; font-size: 14px !important; }
.vs-pay-box p { margin: 4px 0 !important; font-size: 14px !important; }

.vs-pay-note { background: #fef3c7 !important; border-radius: 8px !important; padding: 15px !important; margin-top: 15px !important; color: #92400e !important; font-size: 13px !important; line-height: 1.6 !important; }

.vs-checkout-right input, .vs-checkout-right textarea { 
    width: 100% !important; 
    padding: 12px !important; 
    border: 2px solid #e5e7eb !important; 
    border-radius: 8px !important; 
    font-size: 15px !important; 
    font-family: inherit !important; 
}
.vs-checkout-right input:focus, .vs-checkout-right textarea:focus { outline: none !important; border-color: #2563eb !important; }

.vs-msg { margin-top: 15px !important; padding: 15px !important; border-radius: 8px !important; text-align: center !important; display: none !important; }
.vs-msg.success { display: block !important; background: #d1fae5 !important; color: #065f46 !important; }
.vs-msg.error { display: block !important; background: #fee2e2 !important; color: #991b1b !important; }

.vs-empty-cart { text-align: center !important; padding: 60px 20px !important; }
.vs-empty-cart p { font-size: 18px !important; color: #6b7280 !important; margin-bottom: 20px !important; }

/* === RESPONSIVE === */
@media (max-width: 992px) {
    .vs-product-row, .vs-checkout-row { grid-template-columns: 1fr !important; gap: 30px !important; }
    .vs-product-img { position: static !important; }
}

@media (max-width: 768px) {
    .vs-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 15px !important; }
    .vs-product-info h1 { font-size: 24px !important; }
    .vs-price { font-size: 26px !important; }
    .vs-cart-panel { width: 100% !important; right: -100% !important; }
    .vs-countdown { flex-wrap: wrap !important; gap: 8px !important; }
    .vs-cd { min-width: 55px !important; padding: 10px 12px !important; }
    .vs-cd span { font-size: 22px !important; }
}

@media (max-width: 480px) {
    .vs-grid { grid-template-columns: 1fr !important; }
    .vs-sizes { gap: 8px !important; }
    .vs-size span { padding: 10px 14px !important; font-size: 13px !important; }
}