@php
    $cartItemCount = \App\Services\ThemeCartService::count();
@endphp
<script>
window.STORE_CART = {
    cartUrl: @json(route('cart.add')),
    cartBatchUrl: @json(route('cart.add-batch')),
    cartUpdateUrl: @json(route('cart.update')),
    cartRemoveUrl: @json(route('cart.remove')),
    couponApplyUrl: @json(route('coupon.apply')),
    cartPageUrl: @json(route('frontend.cart')),
    checkoutUrl: @json(route('frontend.checkout')),
    quickViewUrl: @json(url('/product/__ID__/quick-view')),
    variantsUrl: @json(url('/product/__ID__/variants')),
    csrf: @json(csrf_token()),
    initialCount: {{ (int) $cartItemCount }},
};
</script>
<script src="{{ asset('js/store-cart.js') }}?v={{ filemtime(public_path('js/store-cart.js')) }}"></script>
<script src="{{ asset('js/product-variant-picker.js') }}?v={{ filemtime(public_path('js/product-variant-picker.js')) }}"></script>
<script src="{{ asset('js/variant-buy-modal.js') }}?v={{ filemtime(public_path('js/variant-buy-modal.js')) }}"></script>
<style>
.variant-buy-modal { display:none; position:fixed; inset:0; z-index:10050; align-items:center; justify-content:center; padding:16px; }
.variant-buy-modal.is-open { display:flex; }
.variant-buy-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.55); }
.variant-buy-dialog { position:relative; background:#fff; border-radius:14px; width:100%; max-width:520px; max-height:90vh; overflow:auto; padding:20px; box-shadow:0 20px 50px rgba(0,0,0,.25); }
.variant-buy-close { position:absolute; top:10px; right:12px; border:none; background:none; font-size:24px; line-height:1; cursor:pointer; color:#6b7280; }
.variant-buy-header { display:flex; gap:12px; align-items:center; margin-bottom:16px; padding-right:24px; }
.variant-buy-thumb { width:64px; height:64px; object-fit:cover; border-radius:10px; border:1px solid #e5e7eb; }
.variant-buy-title { font-size:18px; font-weight:700; margin:0; }
.variant-buy-list { display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.variant-buy-row { display:flex; gap:10px; align-items:center; border:2px solid #e5e7eb; border-radius:12px; padding:10px; transition:border-color .15s, background .15s; }
.variant-buy-row.is-selected { border-color:#65971e; background:#fdfff8; }
.variant-buy-row.is-disabled { opacity:.55; }
.variant-buy-row-thumb img, .variant-buy-row-thumb-empty { width:52px; height:52px; border-radius:8px; object-fit:cover; }
.variant-buy-row-thumb-empty { display:flex; align-items:center; justify-content:center; background:#f3f4f6; color:#9ca3af; }
.variant-buy-row-body { flex:1; min-width:0; }
.variant-buy-row-label { font-weight:700; font-size:14px; margin-bottom:4px; }
.variant-buy-row-meta { display:flex; gap:10px; flex-wrap:wrap; font-size:12px; color:#6b7280; }
.variant-buy-row-price { color:#65971e; font-weight:700; }
.variant-buy-row-qty { display:flex; align-items:center; gap:4px; }
.variant-buy-qty-btn { width:30px; height:30px; border:1px solid #d1d5db; background:#fff; border-radius:8px; font-weight:700; cursor:pointer; }
.variant-buy-qty { width:44px; height:30px; text-align:center; border:1px solid #d1d5db; border-radius:8px; font-weight:700; }
.variant-buy-footer { border-top:1px solid #e5e7eb; padding-top:14px; }
.variant-buy-total { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; font-size:15px; }
.variant-buy-total-amount { color:#65971e; font-size:20px; }
@media (max-width: 576px) {
.variant-buy-modal { padding:0; align-items:flex-end; }
.variant-buy-dialog {
    max-width:none;
    width:100%;
    max-height:85vh;
    border-radius:16px 16px 0 0;
    padding:18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    margin-top:auto;
}
.variant-buy-close { top:12px; right:14px; width:40px; height:40px; font-size:28px; }
.variant-buy-header { margin-bottom:14px; padding-right:32px; }
.variant-buy-title { font-size:16px; }
.variant-buy-row { padding:12px; gap:12px; }
.variant-buy-qty-btn { width:40px; height:40px; font-size:18px; -webkit-tap-highlight-color:transparent; }
.variant-buy-qty { width:48px; height:40px; font-size:16px; }
.variant-buy-submit { min-height:48px; font-size:16px; }
body.variant-buy-modal-open { overflow:hidden; touch-action:none; }
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
    if (window.STORE_CART.initialCount > 0 && typeof window.updateCartBadge === 'function') {
        window.updateCartBadge(window.STORE_CART.initialCount);
    }
});
</script>