/* OrderBox Storefront Listing Page Styles (views/storefront/listing.php) */

:root { --ai-blue: #2563EB; --ai-blue-dark: #1E3A6E; --ai-blue-deeper: #0F1E3D; }

/* 2-Column Layout */
.store-layout { display: flex; min-height: calc(100vh - 105px); }

/* Left Sidebar */
.store-sidebar {
    width: 260px; min-width: 260px; background: #fff;
    border-right: 1px solid var(--bs-gray-200, #e9ecef);
    position: sticky; top: 105px; height: calc(100vh - 105px);
    overflow: hidden; z-index: 90; display: flex; flex-direction: column;
}
.sidebar-header { padding: 20px 20px 12px; flex-shrink: 0; }
.sidebar-menu-scroll {
    flex: 1; overflow-y: auto; scrollbar-width: thin;
    scrollbar-color: var(--bs-gray-300, #dee2e6) transparent; padding: 0 12px;
}
.sidebar-menu-scroll::-webkit-scrollbar { width: 4px; }
.sidebar-menu-scroll::-webkit-scrollbar-thumb { background: var(--bs-gray-300, #dee2e6); border-radius: 4px; }
.sidebar-menu-scroll::-webkit-scrollbar-track { background: transparent; }
.sidebar-footer { flex-shrink: 0; border-top: 1px solid var(--bs-gray-200, #e9ecef); }

.sidebar-menu .menu-item { margin-bottom: 2px; }
.sidebar-menu .menu-link {
    display: flex; align-items: center; padding: 10px 20px;
    color: var(--bs-gray-700, #495057); font-weight: 500; font-size: 0.9rem;
    border-radius: 0; transition: all 0.2s; border-left: 3px solid transparent;
    text-decoration: none; gap: 10px;
}
.sidebar-menu .menu-link:hover { background: rgba(37,99,235,0.04); color: var(--ai-blue); }
.sidebar-menu .menu-link.active {
    color: var(--ai-blue); background: rgba(37,99,235,0.06);
    border-left-color: var(--ai-blue); font-weight: 600;
}
.sidebar-menu .menu-link.active .menu-icon { background: rgba(37,99,235,0.1); }
.sidebar-menu .menu-link .menu-icon {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 6px; flex-shrink: 0;
}
.sidebar-menu .menu-link .menu-badge {
    margin-left: auto; font-size: 0.75rem; padding: 2px 8px; border-radius: 10px;
    background: var(--bs-gray-100, #f8f9fa); color: var(--bs-gray-600, #6c757d); font-weight: 600;
}
.sidebar-menu .menu-link.active .menu-badge { background: rgba(37,99,235,0.1); color: var(--ai-blue); }

.sidebar-help-card {
    margin: 16px; padding: 20px;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8eeff 100%);
    border-radius: 12px; text-align: center;
}

/* Right Content Area */
.store-content { flex: 1; min-width: 0; }

/* Compact Header */
.compact-header {
    background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 100%);
    border-bottom: 1px solid var(--bs-gray-200, #e9ecef); padding: 24px 32px;
}
.compact-header .breadcrumb { margin-bottom: 8px; }
.compact-header .breadcrumb-item a { color: var(--bs-gray-500, #adb5bd); font-size: 0.85rem; }
.compact-header .breadcrumb-item.active { color: var(--bs-gray-700, #495057); font-size: 0.85rem; }
.compact-header .breadcrumb-item + .breadcrumb-item::before { content: "/"; color: var(--bs-gray-400, #ced4da); }
.compact-search { max-width: 360px; position: relative; }
.compact-search .form-control {
    height: 42px; padding-left: 42px; border: 1px solid var(--bs-gray-300, #dee2e6);
    border-radius: 8px; font-size: 0.9rem; background: #fff;
}
.compact-search .form-control:focus { border-color: var(--ai-blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }
.compact-search .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--bs-gray-400, #ced4da); }
.stat-badges { display: inline-flex; gap: 12px; flex-wrap: wrap; }
.stat-badges .stat-badge {
    font-size: 0.8rem; font-weight: 600; color: var(--bs-gray-600, #6c757d);
    background: #fff; border: 1px solid var(--bs-gray-200, #e9ecef);
    padding: 4px 12px; border-radius: 20px;
}

/* Sort / View toolbar */
.toolbar-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 32px; border-bottom: 1px solid var(--bs-gray-100, #f8f9fa);
    background: #fff; flex-wrap: wrap; gap: 10px;
}
.view-toggle .btn { padding: 8px 12px; }
.view-toggle .btn.active { background: var(--ai-blue) !important; color: #fff !important; border-color: var(--ai-blue) !important; }

/* Product cards grid */
.products-area { padding: 24px 32px; background: #eaecf3; border-radius: 0 0 12px 12px; min-height: 400px; }

.product-card { transition: transform 0.2s ease, box-shadow 0.2s ease; border-radius: 12px; overflow: hidden; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.1) !important; }
.product-card .card-img-wrapper { position: relative; overflow: hidden; aspect-ratio: 1 / 1; }
.product-card .card-img-wrapper.v2-hero::before,
.product-card .card-img-wrapper.v2-hero::after { display: none; }
.product-card .card-img-top { width: 100%; height: 100%; object-fit: contain; padding: 16px; display: block; position: relative; z-index: 1; transition: transform 0.3s ease; }
.product-card:hover .card-img-wrapper img { transform: scale(1.03); }
.product-card .overlay-badges { position: absolute; top: 12px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: flex-start; z-index: 2; }
.product-card .card-icon { margin-top: -26px; position: relative; z-index: 2; width: 46px; height: 46px; border: 3px solid #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.product-card .product-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card .feature-list { list-style: none; padding: 0; margin: 0; }
.product-card .feature-list li { font-size: 0.8rem; color: var(--bs-gray-700, #495057); padding: 2px 0; display: flex; align-items: center; gap: 6px; }
.product-card .feature-list li i { color: var(--ai-blue); font-size: 0.75rem; flex-shrink: 0; }
.product-card .price-section .price-prefix { font-size: 0.7rem; color: var(--bs-gray-600, #6c757d); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; width: 100%; margin-bottom: -4px; }
.product-card .price-section .price-current { font-size: 1.35rem; font-weight: 800; color: var(--bs-gray-900, #212529); }
.product-card .price-section .price-original { font-size: 0.85rem; color: var(--bs-gray-500, #adb5bd); text-decoration: line-through; }
.product-card .price-section .price-period { font-size: 0.8rem; color: var(--bs-gray-500, #adb5bd); }
.product-card .price-section .price-note { font-size: 0.7rem; color: var(--bs-warning-text-emphasis, #997404); background: rgba(var(--bs-warning-rgb), 0.12); padding: 2px 8px; border-radius: 6px; width: 100%; margin-top: 2px; display: inline-flex; align-items: center; }

/* Product cards list view */
.product-card-list { transition: transform 0.2s ease, box-shadow 0.2s ease; border-radius: 12px; overflow: hidden; border: 1px solid var(--bs-gray-200, #e9ecef); }
.product-card-list:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important; }
.product-card-list .list-img-wrapper { width: 200px; min-height: 200px; flex-shrink: 0; position: relative; overflow: hidden; }
.product-card-list .list-img-wrapper img { width: 100%; height: 100%; object-fit: cover; }
.product-card-list .overlay-badges { position: absolute; top: 12px; left: 12px; z-index: 2; display: flex; gap: 6px; }
.product-card-list .list-title { font-size: 1.15rem; font-weight: 700; }
.product-card-list .list-features { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; }
.product-card-list .list-features li { font-size: 0.82rem; color: var(--bs-gray-700, #495057); display: flex; align-items: center; gap: 5px; }
.product-card-list .list-features li i { color: var(--ai-blue); font-size: 0.75rem; }
.product-card-list .list-price-col {
    min-width: 220px; display: flex; flex-direction: column; align-items: stretch;
    justify-content: center; padding: 20px 24px;
    border-left: 1px solid var(--bs-gray-100, #f8f9fa); text-align: right;
}
.product-card-list .list-price-col .price-current { font-size: 1.5rem; font-weight: 800; color: var(--bs-gray-900, #212529); }
.product-card-list .list-price-col .price-original { font-size: 0.85rem; color: var(--bs-gray-500, #adb5bd); text-decoration: line-through; }
.product-card-list .list-price-col .price-period { font-size: 0.8rem; color: var(--bs-gray-500, #adb5bd); }
.product-card-list .list-price-col .list-cta-wrap { display: flex; gap: 8px; margin-top: 12px; }
.product-card-list .list-price-col .list-cta-wrap .btn-primary,
.product-card-list .list-price-col .list-cta-wrap .btn-light-primary:first-child { flex: 1; }
.product-card-list .list-price-col .list-cta-wrap .btn { font-size: 0.82rem; padding: 8px 12px; }

/* Mobile category dropdown */
.mobile-category-dropdown {
    display: none; padding: 14px 16px; background: #fff;
    border-bottom: 1px solid var(--bs-gray-200, #e9ecef);
    position: sticky; top: 60px; z-index: 90;
}
.mobile-category-dropdown label {
    display: block; font-size: 0.75rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px;
    color: var(--bs-gray-500, #adb5bd); margin-bottom: 6px;
}
.mobile-category-dropdown .form-select {
    font-weight: 600; color: var(--bs-gray-800, #343a40);
    border: 2px solid var(--bs-gray-200, #e9ecef); border-radius: 10px;
    padding: 11px 40px 11px 16px; font-size: 0.92rem;
    background-color: #fff; transition: border-color 0.2s;
}
.mobile-category-dropdown .form-select:focus { border-color: var(--ai-blue); box-shadow: 0 0 0 3px rgba(37,99,235,0.1); }

/* Empty state */
.empty-state { padding: 60px 20px; text-align: center; }
.empty-state i { font-size: 4rem; color: var(--bs-gray-300, #dee2e6); }

/* Responsive */
@media (max-width: 991px) {
    .store-sidebar { display: none; }
    .mobile-category-dropdown { display: block; }
    .compact-header { padding: 16px; }
    .compact-header nav[aria-label="breadcrumb"] { display: none !important; }
    .toolbar-row { padding: 12px 16px; }
    .toolbar-row > .d-flex { width: 100%; }
    .toolbar-row > .d-flex > .d-flex:first-child { flex: 1; }
    .toolbar-row > .d-flex > .d-flex:first-child .form-select { width: 100% !important; }
    .products-area { padding: 16px; }
    .products-area .row .col-lg-4 { flex: 0 0 100%; max-width: 100%; }
    .product-card-list .list-img-wrapper { width: 140px; min-height: 140px; }
    .product-card-list .list-price-col { border-left: 0; border-top: 1px solid var(--bs-gray-100, #f8f9fa); flex-direction: row; justify-content: space-between; align-items: center; min-width: auto; width: 100%; }
}
@media (max-width: 575px) {
    .product-card-list .list-img-wrapper { width: 110px; min-height: 110px; }
    .product-card-list .list-price-col { flex-direction: column; align-items: stretch; }
    .product-card-list .list-price-col .btn { width: 100%; }
}