/* Custom Electronic Header Styles */
.elec-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1050; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.elec-topbar { background: #f9fafb; font-size: 12px; font-weight: 500; color: #6b7280; padding: 6px 0; border-bottom: 1px solid #e5e7eb; }
.elec-topbar a { color: #6b7280; text-decoration: none; margin-left: 20px; transition: color 0.2s; }
.elec-topbar a:hover { color: #111827; }

.elec-midbar { border-bottom: 1px solid #e5e7eb; }
.elec-logo img { max-height: 90px; max-width:200px; }
.elec-search { flex: 1; max-width: 600px; margin: 0 40px; position: relative; }
.elec-search input { width: 100%; background: #f3f4f6; border: none; border-radius: 50px; padding: 12px 20px; padding-right: 50px; font-size: 14px; outline: none; }
.elec-search button { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); background: transparent; border: none; font-size: 16px; color: #6b7280; }

.elec-actions { display: flex; align-items: center; gap: 24px; }
.elec-action-btn { display: flex; flex-direction: column; align-items: center; color: #374151; text-decoration: none; font-size: 12px; font-weight: 500; position: relative; transition: color 0.2s; }
.elec-action-btn:hover { color: #000; }
.elec-action-btn i { font-size: 20px; margin-bottom: 4px; }
.elec-badge { position: absolute; top: -5px; right: -5px; background: #2563eb; color: #fff; font-size: 10px; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.elec-cart-btn { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #111827; font-weight: 700; border-left: 1px solid #e5e7eb; padding-left: 24px; }
.elec-cart-btn i { font-size: 24px; }

.elec-botbar { padding: 0; }
.elec-nav { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; }
.elec-nav li { position: relative; }
.elec-nav li a { display: inline-block; padding: 16px 0; color: #374151; font-weight: 600; font-size: 14px; text-decoration: none; transition: color 0.2s; }
.elec-nav li a:hover { color: #000; }

.elec-dropdown { position: absolute; top: 100%; left: 0; background: #fff; border: 1px solid #e5e7eb; box-shadow: 0 4px 6px rgba(0,0,0,0.05); min-width: 220px; z-index: 1060; border-radius: 8px; padding: 8px 0; opacity: 0; visibility: hidden; transition: all 0.2s; transform: translateY(10px); }
.elec-nav li:hover .elec-dropdown, .account-dropdown:hover .elec-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.elec-dropdown li { list-style: none; display: block; }
.elec-dropdown li a { display: block; padding: 8px 20px; font-weight: 500; font-size: 13px; color: #4b5563; text-decoration: none; }
.elec-dropdown li a:hover { background: #f9fafb; color: #111827; }

/* Live Search Dropdown */
.elec-search-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); margin-top: 8px; z-index: 1070; max-height: 400px; overflow-y: auto; display: none; }
.fn-search-item { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid #f3f4f6; text-decoration: none; transition: background 0.2s; }
.fn-search-item:hover { background: #f9fafb; }
.fn-search-item:last-child { border-bottom: none; }
.fn-search-item img { width: 48px; height: 48px; object-fit: contain; border-radius: 6px; margin-right: 16px; }
.fn-search-item-info { display: flex; flex-direction: column; }
.fn-search-item-name { font-size: 14px; font-weight: 600; color: #111827; margin-bottom: 4px; }
.fn-search-item-price { font-size: 13px; font-weight: 700; color: #dc2626; }
.fn-search-empty { padding: 16px; text-align: center; color: #6b7280; font-size: 14px; }

:root {
    --text-dark: #111827;
}

/* Global Product Card Styles */
.screenshot-card { background: #fff; border: 1px solid #f3f4f6; border-radius: 16px; padding: 16px; transition: box-shadow 0.2s; display: flex; flex-direction: column; height: 100%; }
.screenshot-card:hover { box-shadow: 0 10px 25px rgba(0,0,0,0.05); }
.sc-img-wrap { text-align: center; margin-bottom: 16px; height: 160px; display: flex; align-items: center; justify-content: center; position: relative; }
.sc-img-wrap img { max-height: 100%; max-width: 100%; object-fit: contain; }
.sc-brand { font-size: 12px; font-weight: 700; color: #000; margin-bottom: 4px; display: flex; align-items: center; gap: 4px; }
.sc-title { font-size: 14px; font-weight: 600; color: var(--text-dark); margin-bottom: 8px; display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-decoration: none; }
.sc-title:hover { color: #2563eb; }
.sc-rating { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #f59e0b; margin-bottom: 12px; }
.sc-rating span { color: var(--text-muted); font-weight: 500; }
.sc-price-row { display: flex; align-items: flex-end; gap: 8px; margin-bottom: 16px; }
.sc-price { font-size: 18px; font-weight: 800; color: #000; }
.sc-old-price { font-size: 13px; color: #6b7280; text-decoration: line-through; margin-bottom: 2px; }
.sc-actions { display: flex; gap: 8px; align-items: center; margin-top: auto; }
.sc-add-btn { flex: 1; background: #000; color: #fff; border: none; padding: 10px 0; border-radius: 50px; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; text-align: center; }
.sc-add-btn:hover { opacity: 0.8; }
.sc-icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid #e5e7eb; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #6b7280; transition: all 0.2s; }
.sc-icon-btn:hover { border-color: #000; color: #000; }
/* Quick Add Modal Overrides for Electronic Theme */
#qamAddBtn { display: none !important; }