/* =========================================================
   LUMISCHEMA DEVICE CATEGORY ARCHIVE (card grid)
   taxonomy-device_category.php: /smartphones/, /laptops/, /headphones/ ...
   Page width, gutters and the main/sidebar grid come from layout-system.css.
   Breadcrumb: shared .ls-crumbs in global.css.
   ========================================================= */

.ls-arch { min-width: 0; color: #10233f; }
.ls-arch a:hover,
.ls-arch a:focus { text-decoration: none; }

/* ---------- Title, count, description ---------- */
.ls-arch-head { margin: 0 0 14px; }
.ls-arch-title { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; margin: 0 0 6px; } /* logo, name and device count on one row */
.ls-arch-title h1 { min-width: 0; }
.ls-arch-count { flex: 0 0 auto; margin-left: auto; white-space: nowrap; } /* device count at the far right */
.ls-arch-title h1 { margin: 0; color: #071D33; font-size: clamp(20px, 2vw, 24px); line-height: 1.2; font-weight: 800; letter-spacing: -.3px; }
.ls-arch-count { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: #e7effb; color: #0b2a52; font-size: 12px; font-weight: 700; }
.ls-arch-desc { color: #526477; font-size: 14px; line-height: 1.6; }
.ls-arch-desc p { margin: 0 0 8px; }
.ls-arch-desc p:last-child { margin-bottom: 0; }

/* ---------- Brand chips ---------- */
.ls-arch-chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 4px; margin: 0 0 14px; scrollbar-width: thin; }
.ls-arch-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid #d6e4fb;
    border-radius: 999px;
    background: #fff;
    color: #0b2a52;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}
.ls-arch-chip:hover { border-color: #0b5fd8; color: #0b2a52; }
.ls-arch-chip.is-on { background: #c62828; border-color: #c62828; color: #fff; } /* selected chip: red */
.ls-arch-chip.is-on:hover { color: #fff; }
/* Brand logo on the left, inside the same rounded box (set in Devices > Brand Logos). */
.ls-arch-chip { gap: 7px; padding-left: 6px; }
.ls-arch-chip:first-child { padding-left: 14px; }
.ls-arch-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 24px;
    height: 24px;
    padding: 0 3px;
    border-radius: 999px;
    background: #fff;
    box-sizing: border-box;
    overflow: hidden;
}
.ls-arch-logo img { display: block; max-width: 40px; max-height: 18px; width: auto; height: auto; object-fit: contain; }
.ls-arch-logo.is-letter { width: 24px; padding: 0; background: #e7effb; color: #0b2a52; font-size: 11px; font-weight: 800; }
.ls-arch-chip.is-on .ls-arch-logo { background: #fff; }
.ls-arch-chip.is-on .ls-arch-logo.is-letter { background: #fff; color: #c62828; }

/* ---------- Filter bar ---------- */
.ls-arch-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin: 0 0 16px;
    padding: 10px 12px;
    background: #f4f7fb;
    border: 1px solid #e1e9f4;
    border-radius: 10px;
}
.ls-arch-bar label { display: flex; flex-direction: column; gap: 3px; margin: 0; color: #4a5d7a; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.ls-arch-bar select {
    min-width: 150px;
    min-height: 36px;
    padding: 0 10px;
    border: 1px solid #d3deec;
    border-radius: 8px;
    background-color: #fff;
    color: #10233f;
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}
.ls-arch-apply { min-height: 36px; padding: 0 14px; border: 0; border-radius: 8px; background: #071D33; color: #fff; font-size: 12px; font-weight: 700; }
.ls-arch-showing { margin-left: auto; align-self: center; color: #4a5d7a; font-size: 13px; }
.ls-arch-reset {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 12px;
    border-radius: 8px;
    background: #c62828;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
}
.ls-arch-reset:hover { background: #a61f1f; color: #fff; }

/* ---------- Card grid ---------- */
.ls-arch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.ls-arch-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 12px;
    background: #fff;
    border: 1px solid #dce5ef;
    border-radius: 12px;
}
.ls-arch-card:hover { border-color: #0b5fd8; }
.ls-arch-badge { position: absolute; top: 10px; left: 10px; z-index: 1; padding: 2px 8px; border-radius: 999px; color: #fff; font-size: 11px; font-weight: 700; line-height: 1.5; }
.ls-arch-badge.is-rumored { background: #c62828; }
.ls-arch-badge.is-new { background: #0b5fd8; }
.ls-arch-img { display: flex; align-items: center; justify-content: center; height: 150px; margin: 0 0 10px; }
.ls-arch-img img { display: block; max-width: 100%; max-height: 150px; width: auto; height: auto; object-fit: contain; transition: transform .2s ease; }
.ls-arch-card:hover .ls-arch-img img { transform: scale(1.04); }
.ls-arch-name { margin: 0 0 2px; font-size: 14px; line-height: 1.3; font-weight: 700; }
.ls-arch-name a { color: #071D33; text-decoration: none; }
.ls-arch-name a:hover { color: #0b5fd8; }
.ls-arch-meta { margin: 0 0 8px; color: #667085; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* always one line */
.ls-arch-specs { display: flex; flex-direction: column; gap: 4px; margin: 0 0 10px; padding: 0; list-style: none; }
.ls-arch-specs li { display: flex; align-items: center; gap: 6px; margin: 0; color: #33465f; font-size: 12px; line-height: 1.4; }
.ls-arch-specs li span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* one line per spec */
.ls-arch-specs svg { width: 13px; height: 13px; flex: 0 0 13px; margin-top: 0; fill: none; stroke: #0b5fd8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ls-arch-price { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; margin: auto 0 10px; }
.ls-arch-price b { color: #0b5fd8; font-size: 15px; font-weight: 800; }
.ls-arch-price b.is-tba { color: #4a5d7a; font-size: 13px; font-weight: 700; }
.ls-arch-price small { color: #667085; font-size: 11px; }
.ls-arch-actions { display: flex; gap: 6px; margin-top: auto; } /* buttons line up at the bottom of every card */
.ls-arch-view,
.ls-arch-compare {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.ls-arch-view { flex: 1; background: #0B5FD8; color: #fff; }
.ls-arch-view:hover { background: #0849a8; color: #fff; }
.ls-arch-compare { padding: 0 10px; border: 1px solid #d3deec; background: #fff; color: #071D33; }
.ls-arch-compare:hover { border-color: #071D33; color: #071D33; }

/* ---------- Pagination, empty state, bottom text ---------- */
.ls-arch-pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 22px 0 0; }
.ls-arch-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid #d6e4fb;
    border-radius: 8px;
    color: #071D33;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-sizing: border-box;
}
.ls-arch-pagination .page-numbers.current { background: #071D33; border-color: #071D33; color: #fff; }
.ls-arch-pagination a.page-numbers:hover { border-color: #0b5fd8; }
.ls-arch-pagination .dots { border: 0; }
.ls-arch-empty { padding: 18px; background: #f8fbff; border: 1px solid #e1e9f4; border-radius: 12px; font-size: 14px; }
.ls-arch-bottom { margin: 28px 0 0; padding: 16px; background: #f8fbff; border: 1px solid #e1e9f4; border-radius: 12px; color: #33465f; font-size: 13px; line-height: 1.65; }
.ls-arch-bottom h2,
.ls-arch-bottom h3 { margin: 0 0 6px; color: #071D33; font-size: 16px; }
.ls-arch-bottom p { margin: 0 0 8px; }
.ls-arch-bottom p:last-child { margin-bottom: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .ls-arch-bar label { flex: 1 1 140px; }
    .ls-arch-bar select { width: 100%; min-width: 0; }
    .ls-arch-showing { width: 100%; margin-left: 0; }
    .ls-arch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .ls-arch-card { padding: 10px; }
    .ls-arch-img { height: 120px; }
    .ls-arch-img img { max-height: 120px; }
    .ls-arch-actions { flex-direction: column; }
}

/* ---------- Brand page (/brand/name/) ---------- */
.ls-brand-logo { display: inline-flex; align-items: center; justify-content: center; height: 40px; min-width: 40px; padding: 4px 8px; border: 1px solid #dce5ef; border-radius: 10px; background: #fff; box-sizing: border-box; align-self: center; }
.ls-brand-logo img { display: block; max-height: 30px; max-width: 90px; width: auto; height: auto; object-fit: contain; }
.ls-brand-page .ls-arch-chip { padding-left: 14px; }
.ls-arch-chip small { margin-left: 2px; padding: 0 6px; border-radius: 999px; background: #e7effb; color: #0b2a52; font-size: 11px; font-weight: 700; line-height: 18px; }
.ls-arch-chip.is-on small { background: #fff; color: #c62828; } /* count circle in the selected chip: white with red number */
.ls-arch-meta a { color: inherit; font-weight: 600; text-decoration: none; }
.ls-arch-meta a:hover { color: #0b5fd8; }

/* =========================================================
   BRANDS DIRECTORY (/brands/, page-brands.php)
   ========================================================= */
.ls-brands-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 18px; padding: 10px 12px; background: #f4f7fb; border: 1px solid #e1e9f4; border-radius: 10px; }
.ls-brands-search { position: relative; display: flex; align-items: center; flex: 0 1 260px; margin: 0; }
.ls-brands-search svg { position: absolute; left: 10px; width: 16px; height: 16px; fill: none; stroke: #4a5d7a; stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.ls-brands-search input { width: 100%; min-height: 38px; padding: 0 12px 0 34px; border: 1px solid #d3deec; border-radius: 8px; background: #fff; color: #10233f; font: inherit; font-size: 13px; box-sizing: border-box; }
.ls-brands-search input:focus { border-color: #0b5fd8; outline: none; box-shadow: 0 0 0 2px rgba(11, 95, 216, .15); }
.ls-brands-az { display: flex; flex-wrap: wrap; gap: 2px; flex: 1 1 360px; }
.ls-brands-az a,
.ls-brands-az span { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 28px; border-radius: 6px; font-size: 12px; font-weight: 800; }
.ls-brands-az a { color: #0b2a52; text-decoration: none; }
.ls-brands-az a:hover { background: #c62828; color: #fff; }
.ls-brands-az span { color: #b5c1d1; }

.ls-brands-band { display: flex; align-items: center; justify-content: center; margin: 0 0 12px; padding: 8px 16px; background: #e7effb; color: #0b2a52; font-size: 16px; font-weight: 700; line-height: 1.3; }

.ls-brands-popular { margin: 0 0 24px; }
/* Popular Brands: draggable logo strip */
.ls-brands-strip { position: relative; }
.ls-brands-track {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: auto;
    scrollbar-width: none;
    padding: 2px;
    cursor: grab;
    -webkit-overflow-scrolling: touch;
}
.ls-brands-track::-webkit-scrollbar { display: none; }
.ls-brands-track:focus-visible { outline: 2px solid #0b5fd8; outline-offset: 2px; border-radius: 12px; }
.ls-brands-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.ls-brands-track.is-dragging .ls-brands-pop { pointer-events: none; }
.ls-brands-pop {
    flex: 0 0 132px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 10px 12px;
    border: 1px solid #dce5ef;
    border-radius: 12px;
    background: #fff;
    color: #071D33;
    text-align: center;
    text-decoration: none;
    user-select: none;
    -webkit-user-drag: none;
}
.ls-brands-pop:hover { border-color: #0b5fd8; color: #071D33; }
.ls-brands-pop-logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; margin-bottom: 6px; }
.ls-brands-pop-logo img { display: block; max-height: 48px; max-width: 104px; width: auto; height: auto; object-fit: contain; pointer-events: none; }
.ls-brands-pop-logo.is-letter { width: 52px; border-radius: 999px; background: #e7effb; color: #0b2a52; font-size: 20px; font-weight: 800; }
.ls-brands-pop strong { font-size: 14px; line-height: 1.25; }
.ls-brands-pop small { color: #667085; font-size: 12px; }
.ls-brands-arrow {
    display: none;
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 1px solid #d3deec;
    border-radius: 999px;
    background: #fff;
    color: #071D33;
    box-shadow: 0 2px 8px rgba(7, 29, 51, .12);
    cursor: pointer;
}
.ls-brands-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ls-brands-arrow.is-prev { left: -12px; }
.ls-brands-arrow.is-next { right: -12px; }
.ls-brands-arrow:hover { background: #c62828; border-color: #c62828; color: #fff; }
.ls-brands-arrow:disabled { opacity: 0; pointer-events: none; }
.ls-brands-strip.has-overflow .ls-brands-arrow { display: inline-flex; }

.ls-brands-group { margin: 0 0 16px; scroll-margin-top: 90px; }
.ls-brands-letter { margin: 0 0 8px; padding-left: 10px; border-left: 4px solid #0b5fd8; color: #071D33; font-size: 16px; font-weight: 800; line-height: 1.2; }
.ls-brands-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.ls-brands-item { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 52px; padding: 8px 10px; border: 1px solid #dce5ef; border-radius: 10px; background: #fff; color: #071D33; text-decoration: none; }
.ls-brands-item:hover { border-color: #0b5fd8; color: #071D33; }
.ls-brands-item[hidden], .ls-brands-group[hidden], .ls-brands-popular[hidden] { display: none; }
.ls-brands-item-logo { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; height: 32px; border-radius: 6px; background: #f6f8fb; }
.ls-brands-item-logo img { display: block; max-height: 24px; max-width: 40px; width: auto; height: auto; object-fit: contain; }
.ls-brands-item-logo.is-letter { flex-basis: 32px; border-radius: 999px; background: #e7effb; color: #0b2a52; font-size: 13px; font-weight: 800; }
.ls-brands-item-text { flex: 1 1 auto; min-width: 0; }
.ls-brands-item-text strong { display: block; font-size: 13px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-brands-item-text small { display: block; margin-top: 1px; color: #667085; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-brands-item-count { flex: 0 0 auto; min-width: 22px; padding: 0 7px; border-radius: 999px; background: #e7effb; color: #0b2a52; font-size: 11px; font-weight: 700; line-height: 20px; text-align: center; }
.ls-brands-item:hover .ls-brands-item-count { background: #c62828; color: #fff; }

@media (max-width: 640px) {
    .ls-brands-search { flex-basis: 100%; }
    .ls-brands-az a, .ls-brands-az span { min-width: 22px; height: 26px; }
    .ls-brands-pop { flex-basis: 116px; }
    .ls-brands-arrow { display: none !important; } /* phones swipe */
    .ls-brands-grid { grid-template-columns: minmax(0, 1fr); }
}
.ls-brands-search .screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }