/* EM Tech Shop v1.9.5 */

/* ===== RESET ===== */
/* ===== LAYOUT ===== */
.em-tech-shop .em-shop-layout {
    display:grid;
    grid-template-columns:252px 1fr;
    gap:24px;
    align-items:start;
}
@media (max-width:991px) {
    .em-tech-shop .em-shop-layout { grid-template-columns:1fr; }
}

/* ===== MOBILE FILTER TOGGLE ===== */
.em-tech-shop .em-filter-toggle {
    display:none;
    width:100%;
    padding:12px 16px;
    background:#0c1832;
    color:#fff;
    border:none;
    border-radius:8px;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    margin-bottom:16px;
    align-items:center;
    gap:8px;
    justify-content:center;
}
.em-tech-shop .em-filter-toggle:hover { background:#152349; }
.em-tech-shop .em-filter-toggle svg { stroke:#fff; }

.em-tech-shop .em-filter-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#D62604;
    color:#fff;
    font-size:11px;
    font-weight:700;
    min-width:18px;
    height:18px;
    border-radius:999px;
    padding:0 5px;
    margin-left:4px;
}

/* ===== SIDEBAR ===== */
.em-tech-shop .em-sidebar {
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:10px;
    overflow:hidden;
    position:sticky;
    top:24px;
}

.em-tech-shop .em-sidebar-header {
    padding:14px 16px;
    background:#0c1832;
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:0;
}
.em-tech-shop .em-sidebar-header h3 {
    margin:0;
    font-size:15px;
    font-weight:700;
    color:#fff;
    letter-spacing:0.01em;
}

.em-tech-shop .em-filter-close {
    display:none;
    background:none;
    border:none;
    cursor:pointer;
    padding:4px;
    color:rgba(255,255,255,0.7);
    line-height:1;
}
.em-tech-shop .em-filter-close:hover { color:#fff; }
.em-tech-shop .em-filter-close svg { stroke:currentColor; }

/* ===== SEARCH ===== */
.em-tech-shop .em-filter-block {
    border-bottom:1px solid #e5e7eb;
    padding:12px 14px;
}
.em-tech-shop .em-filter-block:last-child { border-bottom:none; }
.em-tech-shop .em-filter-block h4 { display:none; } /* labels replaced by section toggles */

.em-tech-shop .em-search-form {
    display:flex;
    align-items:center;
    background:#f9fafb;
    border:1px solid #d1d5db;
    border-radius:7px;
    overflow:hidden;
}
.em-tech-shop .em-search-form input {
    flex:1;
    border:none;
    background:transparent;
    padding:8px 10px;
    font-size:13px;
    outline:none;
    color:#111827;
    min-width:0;
}
.em-tech-shop .em-search-form input::placeholder { color:#9ca3af; }
.em-tech-shop #em-search-btn {
    background:#0c1832;
    border:none;
    padding:8px 14px;
    color:#fff;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
    flex-shrink:0;
    border-radius:0;
}
.em-tech-shop #em-search-btn:hover { background:#152349; }

/* ===== FILTER SECTION TOGGLES (categories, price, specs) ===== */
.em-tech-shop .em-spec-group,
.em-tech-shop .em-filter-section {
    border-bottom:1px solid #e5e7eb;
}
.em-tech-shop .em-spec-group:last-child { border-bottom:none; }

/* Spec group toggle button — matches filter section style */
.em-tech-shop .em-spec-group-toggle {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 16px;
    background:none;
    border:none;
    cursor:pointer;
    font-family:inherit;
    text-align:left;
    gap:8px;
}
.em-tech-shop .em-spec-group-toggle:hover { background:#f9fafb; }

.em-tech-shop .em-spec-group-label {
    font-size:13px;
    font-weight:600;
    color:#111827;
    flex:1;
}

.em-tech-shop .em-spec-count {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:#0c1832;
    color:#fff;
    font-size:10px;
    font-weight:700;
    min-width:18px;
    height:18px;
    border-radius:10px;
    padding:0 5px;
    flex-shrink:0;
}

.em-tech-shop .em-chevron {
    flex-shrink:0;
    stroke:#9ca3af;
    transition:transform 0.2s;
    width:14px;
    height:14px;
}
.em-tech-shop .em-spec-open > .em-spec-group-toggle .em-chevron { transform:rotate(180deg); }

.em-tech-shop .em-spec-options {
    display:none;
    padding:0 14px 12px;
    max-height:200px;
    overflow-y:auto;
    scrollbar-width:thin;
    scrollbar-color:#d1d5db transparent;
}
.em-tech-shop .em-spec-options::-webkit-scrollbar       { width:3px; }
.em-tech-shop .em-spec-options::-webkit-scrollbar-track  { background:transparent; }
.em-tech-shop .em-spec-options::-webkit-scrollbar-thumb  { background:#d1d5db; border-radius:3px; }
.em-tech-shop .em-spec-options-open { display:block; }

/* Checkbox rows */
.em-tech-shop .em-spec-label {
    display:flex;
    align-items:center;
    gap:8px;
    padding:4px 0;
    cursor:pointer;
    user-select:none;
}
.em-tech-shop .em-spec-label:hover .em-spec-label-text { color:#0c1832; }
.em-tech-shop .em-spec-cb {
    width:15px;
    height:15px;
    flex-shrink:0;
    accent-color:#0c1832;
    cursor:pointer;
}
.em-tech-shop .em-spec-label-text {
    flex:1;
    font-size:13px;
    color:#374151;
    line-height:1.4;
}
.em-tech-shop .em-spec-label-count {
    font-size:11px;
    color:#9ca3af;
    flex-shrink:0;
}

/* Spec filters wrapper */
#em-spec-filters-wrap .em-spec-filters {
    border-bottom:1px solid #e5e7eb;
}

/* ===== CATEGORY LIST ===== */
.em-tech-shop .em-cat-list,
.em-tech-shop .em-subcats {
    list-style:none;
    margin:0;
    padding:0;
}
.em-tech-shop .em-cat-item { margin-bottom:1px; }
.em-tech-shop .em-cat-row  { display:flex; align-items:center; gap:4px; }

.em-tech-shop .em-cat-row a {
    flex:1;
    display:flex;
    align-items:center;
    color:#374151;
    text-decoration:none;
    font-size:13px;
    padding:4px 6px;
    border-radius:6px;
    transition:background 0.1s, color 0.1s;
}
.em-tech-shop .em-cat-row a:hover { background:#f3f4f6; color:#0c1832; }
.em-tech-shop .em-cat-row .em-filter-active {
    color:#0c1832;
    font-weight:600;
    background:#eef2fb;
}
/* Active left-bar indicator */
.em-tech-shop .em-cat-row .em-filter-active::before {
    content:'';
    display:inline-block;
    width:3px;
    height:14px;
    background:#0c1832;
    border-radius:2px;
    margin-right:6px;
    flex-shrink:0;
}

.em-tech-shop .em-subcat-toggle {
    background:none;
    border:none;
    cursor:pointer;
    font-size:9px;
    color:#9ca3af;
    padding:2px 4px;
    line-height:1;
    flex-shrink:0;
}
.em-tech-shop .em-subcat-toggle:hover { color:#0c1832; }

.em-tech-shop .em-subcats {
    margin:2px 0 2px 14px;
    padding-left:8px;
    border-left:2px solid #e5e7eb;
}

/* More Categories toggle */
.em-tech-shop .em-accessories-toggle { margin-top:2px; }
.em-tech-shop .em-cat-toggle {
    display:flex;
    align-items:center;
    gap:6px;
    font-size:12px;
    font-weight:600;
    color:#6b7280;
    text-decoration:none;
    padding:4px 6px;
    cursor:pointer;
    user-select:none;
    border-radius:6px;
    background:none;
    border:none;
    font-family:inherit;
    width:100%;
    text-align:left;
}
.em-tech-shop .em-cat-toggle:hover { background:#f3f4f6; color:#0c1832; }
.em-tech-shop .em-toggle-icon { font-size:9px; width:10px; display:inline-block; }
.em-tech-shop .em-accessories-list { margin-top:4px; margin-left:10px; }

/* ===== PRICE FILTER ===== */
.em-tech-shop .em-price-row { display:flex; gap:6px; margin-bottom:8px; }
.em-tech-shop .em-price-row .em-price-input { flex:1; min-width:0; }

.em-tech-shop .em-price-input {
    width:100%;
    padding:7px 9px;
    border:1px solid #d1d5db;
    border-radius:6px;
    background:#f9fafb;
    font-size:13px;
    box-sizing:border-box;
    color:#111827;
    outline:none;
}
.em-tech-shop .em-price-input:focus { border-color:#0c1832; background:#fff; }

.em-tech-shop .em-price-btn,
.em-tech-shop #em-price-btn {
    width:100%;
    padding:8px;
    background:#0c1832;
    color:#fff;
    border-radius:6px;
    border:none;
    cursor:pointer;
    font-size:13px;
    font-weight:600;
    font-family:inherit;
}
.em-tech-shop .em-price-btn:hover,
.em-tech-shop #em-price-btn:hover { background:#152349; }

/* ===== ACTIVE FILTER PILLS ===== */
.em-tech-shop .em-active-filters {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:12px;
    align-items:center;
}
.em-tech-shop .em-active-label {
    font-size:12px;
    font-weight:600;
    color:#6b7280;
}
.em-tech-shop .em-pill {
    display:inline-flex;
    align-items:center;
    gap:5px;
    background:#eef2fb;
    color:#0c1832;
    border:1px solid #c7d5ed;
    border-radius:5px;
    padding:3px 8px 3px 10px;
    font-size:12px;
    font-weight:500;
    cursor:pointer;
    transition:background 0.1s;
    white-space:nowrap;
}
.em-tech-shop .em-pill:hover { background:#dde8f9; }
.em-tech-shop .em-pill svg { stroke:#6b7280; flex-shrink:0; }
.em-tech-shop .em-pill-clear-all {
    background:#0c1832;
    color:#fff;
    border-color:#0c1832;
}
.em-tech-shop .em-pill-clear-all:hover { background:#152349; }
.em-tech-shop .em-pill-clear-all svg { stroke:#fff; }

/* ===== TOOLBAR ===== */
.em-tech-shop .em-section-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:16px;
    flex-wrap:wrap;
    gap:10px;
}
.em-tech-shop .em-section-title { font-size:18px; font-weight:700; color:#0c1832; margin-bottom:16px; }
.em-tech-shop .em-results-count { font-size:13px; color:#6b7280; }

.em-tech-shop .em-sort-select {
    padding:7px 10px;
    border:1px solid #d1d5db;
    border-radius:7px;
    font-size:13px;
    background:#fff;
    color:#111827;
    cursor:pointer;
    min-width:160px;
    outline:none;
}
.em-tech-shop .em-sort-select:focus { border-color:#0c1832; }

/* ===== PAGINATION ===== */
.em-tech-shop .em-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    margin-top: 36px;
    flex-wrap: wrap;
}
.em-tech-shop .em-page-btn {
    padding: 8px 13px;
    background: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.15s;
    min-width: 38px;
    text-align: center;
}
.em-tech-shop .em-page-btn:hover    { background: #f3f4f6; border-color: #9ca3af; color: #0c1832; }
.em-tech-shop .em-page-active       { background: #0c1832 !important; color: #fff !important; border-color: #0c1832 !important; font-weight: 700; }
.em-tech-shop .em-page-ellipsis     { padding: 8px 4px; color: #9ca3af; font-size: 13px; }

/* ===== GRID ===== */
.em-tech-shop .em-grid {
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:20px;
}
@media (max-width:1199px) { .em-tech-shop .em-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:991px)  { .em-tech-shop .em-grid { grid-template-columns:minmax(0,1fr); } }

/* ===== CARD ===== */
.em-tech-shop .em-card {
    position:relative;
    border:1px solid #e4e7eb;
    border-radius:16px;
    padding:16px;
    background:#fff;
    display:flex;
    flex-direction:column;
    height:100%;
    text-align: center;
    transition: box-shadow 0.2s, transform 0.2s;
}
.em-tech-shop .em-card:hover {
    box-shadow: 0 8px 28px rgba(12,24,50,0.14);
    transform: translateY(-3px);
}

/* Badge — anchored to image corner */
.em-tech-shop .em-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    color: #fff;
    padding: 3px 9px;
    font-size: 11px;
    font-weight: 700;
    border-radius: 6px;
    z-index: 5;
    letter-spacing: 0.02em;
}
.em-tech-shop .em-badge-featured,
.em-tech-shop .em-badge-black-friday,
.em-tech-shop .em-badge-christmas,
.em-tech-shop .em-badge-valentines,
.em-tech-shop .em-badge-easter,
.em-tech-shop .em-badge-summer,
.em-tech-shop .em-badge-back-to-school { background:#D62604; }
.em-tech-shop .em-badge-new-years { background:#D62604; color:#000; }
.em-tech-shop .em-badge-best-value { background:#047857; }
.em-tech-shop .em-badge-popular    { background:#1d4ed8; }

/* Stronger visual weight on decision-badged cards */
.em-tech-shop .em-card.em-card-badged {
    border-top: 4px solid transparent;
    box-shadow: 0 4px 16px rgba(12,24,50,0.10);
}
.em-tech-shop .em-card.em-card-badged:hover {
    box-shadow: 0 10px 32px rgba(12,24,50,0.18);
    transform: translateY(-4px);
}
.em-tech-shop .em-card:has(.em-badge-best-value) { border-top-color: #047857; }
.em-tech-shop .em-card:has(.em-badge-popular)    { border-top-color: #1d4ed8; }

/* Image */
.em-tech-shop .em-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-height: 220px;
    overflow: hidden;
    margin-bottom: 10px;
    background: #fafafa;
    border-radius: 8px;
    padding: 16px;
    box-sizing: border-box;
}
.em-tech-shop .em-image-wrap img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    transform: scale(1.15);
    transform-origin: center center;
}
/* Hide broken/missing product images gracefully — products with no image are excluded at query level */

/* Title */
.em-tech-shop .em-title {
    font-size: 15px; font-weight: 600; color: #0c1832; margin-bottom: 4px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Benefit / use-case line */
.em-tech-shop .em-benefit {
    font-size: 12px; color: #6b7280; font-style: italic; margin-bottom: 10px; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* Spec subline — fallback when no benefit line is available */
.em-tech-shop .em-specs {
    font-size: 11px; color: #6b7280; margin-bottom: 10px; line-height: 1.4;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Meta */
.em-tech-shop .em-meta { font-size:12px; color:#6b7280; margin-bottom:12px; }

/* Fulfilment row: stock pill + delivery countdown side by side */
.em-tech-shop .em-fulfil {
    display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
}

/* Stock */
.em-tech-shop .em-stock { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 5px; display: inline-block; flex-shrink: 0; }
.em-tech-shop .em-stock-high { background: #ecfdf5; color: #047857; }
.em-tech-shop .em-stock-low  { background: #fffbeb; color: #b45309; }
.em-tech-shop .em-stock-out  { background: #fef2f2; color: #b91c1c; }

/* Price */
.em-tech-shop .em-price { font-size: 22px; font-weight: 700; color: #0c1832; margin-bottom: 10px; line-height: 1.2; }
.em-tech-shop .em-each  { font-size: 11px; color: #9ca3af; margin-left: 4px; font-weight: 400; }
/* Ensure WooCommerce price HTML inherits sizing */
.em-tech-shop .em-price .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; }

/* Delivery timer — inline inside .em-fulfil */
.em-tech-shop .em-delivery { font-size: 12px; color: #374151; line-height: 1.3; }

/* Urgent delivery — same/next-day — gets stronger treatment */
.em-tech-shop .em-delivery.em-delivery-urgent {
    font-size: 13px; font-weight: 700; color: #b45309;
}

/* Trust line above CTA */
.em-tech-shop .em-trust {
    font-size: 11px; color: #9ca3af; margin-bottom: 12px; line-height: 1.4;
}

/* Bottom bar */
.em-tech-shop .em-bottom {
    margin: 0 -16px -16px;
    padding: 12px;
    background:#f8f9fc;
    border-top:1px solid #e4e7eb;
    border-radius: 0 0 16px 16px;
    display:flex;
    gap:12px;
    margin-top:auto;
}

/* Add to cart */
.em-tech-shop .em-add {
    flex: 1 1 auto; width: 100%; height: 48px;
    background: #0c1832 !important; border-radius: 12px;
    display: flex; align-items: center; justify-content: center; gap: 8px;
    color: #fff; font-size: 14px; font-weight: 600;
    text-decoration: none; white-space: nowrap;
}
.em-tech-shop .em-add:hover { background: #1a2e5a !important; }
.em-tech-shop .em-card:hover .em-add { background: #152349 !important; }
.em-tech-shop .em-add svg   { fill: #fff; flex-shrink: 0; }

.em-tech-shop .em-view-details {
    flex:1; display:flex; align-items:center; justify-content:center;
    background:#f3f4f6; color:#0c1832; border-radius:12px;
    font-size:14px; font-weight:600; text-decoration:none; height:48px;
}
.em-tech-shop .em-view-details:hover { background:#e5e7eb; }

/* Out-of-stock CTA */
.em-tech-shop .em-notify {
    flex: 1 1 auto; width: 100%; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: #f3f4f6; color: #6b7280; border-radius: 12px;
    font-size: 14px; font-weight: 600; text-decoration: none;
    border: 1px solid #e5e7eb; transition: background 0.15s, color 0.15s;
}
.em-tech-shop .em-notify:hover { background: #e5e7eb; color: #0c1832; }

/* No results */
.em-tech-shop .em-no-results {
    text-align:center;
    padding:60px 20px;
    color:#6b7280;
}
.em-tech-shop .em-no-results svg { margin-bottom:12px; }
.em-tech-shop .em-no-results p   { font-size:16px; margin-bottom:16px; }
.em-tech-shop .em-btn-outline {
    padding:10px 20px;
    border:2px solid #0c1832;
    background:none;
    color:#0c1832;
    border-radius:10px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
}
.em-tech-shop .em-btn-outline:hover { background:#0c1832; color:#fff; }

/* ===== MOBILE ===== */
@media (max-width:991px) {
    .em-tech-shop .em-filter-toggle { display:flex; }
    .em-tech-shop .em-sidebar {
        position:fixed; top:0; left:-100%; width:85%; max-width:320px;
        height:100vh; overflow-y:auto; z-index:1000; background:#fff;
        transition:left 0.3s ease; border-radius:0; border:none;
    }
    .em-tech-shop .em-sidebar.em-sidebar-open { left:0; box-shadow:4px 0 24px rgba(0,0,0,0.2); }
    .em-tech-shop .em-filter-close { display:block; }
    .em-tech-shop .em-filter-overlay {
        position:fixed; top:0; left:0; right:0; bottom:0;
        background:rgba(0,0,0,0.45); z-index:999; display:none;
    }
    .em-tech-shop .em-filter-overlay.active { display:block; }
    .em-tech-shop .em-bottom { gap:8px; padding:10px; margin:0 -16px -16px; }
    .em-tech-shop .em-add  { height:44px; }
}
@media (max-width:480px) {
    .em-tech-shop .em-bottom { gap:8px; }
    .em-tech-shop .em-add { height:44px; }
}

.em-tech-shop .em-products-wrap { display:block; width:100%; }
.em-tech-shop #em-products-container { width:100%; }

/* v1.8.0 fixes */
.em-tech-shop .em-meta { display: none; }

/* v1.8.2 */
/* Featured section uses same card dimensions as regular grid — no overrides needed */

.em-tech-shop .em-section-divider {
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 36px 0 32px;
    position: relative;
}
.em-tech-shop .em-section-divider::after {
    content: 'All Products';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    padding: 0 14px;
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}


.em-group-more-wrap { text-align:center; margin-top:18px; }
.em-group-more-btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding:12px 22px; border-radius:8px; border:1px solid #102b57;
  background:#fff; color:#102b57; font-weight:600; cursor:pointer;
}
.em-group-more-btn:hover { background:#f5f7fb; }
