*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    html { width: 100%; }

    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #fff;
      color: #222;
      font-size: 14px;
    }

    img, svg { max-width: 100%; }

    /* ── Logo (now using wosux-logo.png) ── */
    .nav-logo, .mob-logo, .mob-drawer-brand {
      display: flex;
      align-items: center;
      cursor: pointer;
      white-space: nowrap;
    }

    /* ── Search label ── */
    .search-label { padding:12px 20px 4px; font-size:13px; color:#555; }
    .search-label strong { color:#111; }

    /* ── Page layout ── */
    .page-layout { display:flex; max-width:1380px; margin:0 auto; padding:0 16px 40px; }

    /* ── SIDEBAR ── */
    .sidebar {
      width: 232px;
      flex-shrink: 0;
      padding: 16px 16px 16px 0;
      position: sticky;
      top: 60px;
      align-self: flex-start;
      max-height: calc(100vh - 60px);
      overflow-y: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .sidebar::-webkit-scrollbar { display: none; }

    .sidebar-title { font-size:15px; font-weight:700; margin-bottom:14px; color:#111; display:flex; align-items:center; gap:8px; }
    .sidebar-title svg { flex-shrink:0; }

    /* ── Active Filters ── */
    .active-filters-wrap {
      display: none;
      margin-bottom: 14px;
      padding-bottom: 14px;
      border-bottom: 1px solid #ebebeb;
    }
    .active-filters-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      font-weight: 700;
      color: #888;
      text-transform: uppercase;
      letter-spacing: .3px;
      margin-bottom: 8px;
    }
    .clear-all-btn {
      font-size: 12px;
      font-weight: 600;
      color: #63b3ed;
      text-transform: none;
      letter-spacing: 0;
      cursor: pointer;
      user-select: none;
    }
    .clear-all-btn:hover { text-decoration: underline; }
    .active-filters-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .active-filter-chip {
      display: flex;
      align-items: center;
      gap: 6px;
      background: #ebf8ff;
      color: #2b7fc1;
      border: 1px solid #bfe3fb;
      border-radius: 20px;
      padding: 4px 8px 4px 12px;
      font-size: 12px;
      font-weight: 600;
      line-height: 1.4;
      max-width: 100%;
    }
    .active-filter-chip .chip-label {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      max-width: 150px;
    }
    .chip-remove {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      font-size: 13px;
      line-height: 1;
      color: #2b7fc1;
      cursor: pointer;
      flex-shrink: 0;
      transition: background .15s, color .15s;
    }
    .chip-remove:hover { background: #63b3ed; color: #fff; }

    /* Filter section */
    .filter-section { margin-bottom: 4px; border-bottom: 1px solid #ebebeb; }

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: 600;
      font-size: 14px;
      padding: 12px 0;
      cursor: pointer;
      user-select: none;
    }
    .section-header:hover { color: #63b3ed; }
    .section-toggle {
      font-size: 18px;
      font-weight: 300;
      color: #888;
      line-height: 1;
      transition: transform .2s;
    }
    .section-header.collapsed .section-toggle { transform: rotate(0deg); }

    .section-body {
      overflow: hidden;
      transition: max-height .28s ease, opacity .2s;
      max-height: 600px;
      opacity: 1;
    }
    .section-body.collapsed { max-height: 0; opacity: 0; pointer-events: none; }
    .section-body-inner { padding-bottom: 14px; }

    /* ── Category radio ── */
    .cat-option {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 7px; cursor: pointer; font-size: 13px; color: #333;
    }
    .cat-option input[type=radio] {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      width: 15px;
      height: 15px;
      margin: 0;
      border: 1.5px solid #c7c7c7;
      border-radius: 50%;
      outline: none;
      cursor: pointer;
      flex-shrink: 0;
      transition: background .15s, border-color .15s;
    }
    .cat-option input[type=radio]:hover { border-color: #9ec9ec; }
    .cat-option input[type=radio]:checked {
      background: #63b3ed;
      border-color: #63b3ed;
    }
    .view-more { color:#63b3ed; font-size:12px; cursor:pointer; margin-top:2px; display:inline-block; }
    .view-more:hover { text-decoration: underline; }

    /* ── Color grid — swatches only, packed tightly ── */
    .color-grid { display:flex; flex-wrap:wrap; gap:9px; padding-top: 2px; }
    .color-option {
      display:flex; align-items:center; justify-content:center;
      cursor:pointer; padding: 3px; border-radius: 50%;
      border: 2px solid transparent;
      transition: border-color .15s, transform .12s;
      line-height: 0;
    }
    .color-option:hover { transform: scale(1.1); }
    .color-option.selected { border-color:#63b3ed; }
    .color-option.selected .color-dot::after {
      content: '';
      position: absolute; inset: 0;
      border-radius: 50%;
      box-shadow: 0 0 0 2px #fff inset;
    }
    .color-dot { position:relative; width:22px; height:22px; border-radius:50%; border:1px solid #ddd; flex-shrink:0; }
    .color-dot.multi   { background: conic-gradient(red,orange,yellow,green,blue,purple,red); }
    .color-dot.black   { background:#111; }
    .color-dot.white   { background:#fff; border-color:#bbb; }
    .color-dot.grey    { background:#9e9e9e; }
    .color-dot.silver  { background:#c8ccd0; border-color:#aab; }
    .color-dot.blue    { background:#1e88e5; }
    .color-dot.red     { background:#e53935; }
    .color-dot.green   { background:#43a047; }
    .color-dot.yellow  { background:#fdd835; border-color:#e8c400; }
    .color-dot.orange  { background:#fb8c00; }
    .color-dot.purple  { background:#8e24aa; }
    .color-dot.pink    { background:#ec407a; }
    .color-dot.brown   { background:#6d4c33; }
    .color-dot.gold    { background:#d4af37; }
    .color-dot.navy    { background:#1a2a5e; }
    .color-dot.rosegold{ background: linear-gradient(135deg, #f0c4ae, #e8a998); }


    /* ── Checkbox filter items ── */
    .check-option {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 8px; cursor: pointer; font-size: 13px; color: #333;
      user-select: none;
    }
    .check-option:last-child { margin-bottom: 0; }
    .custom-check {
      width: 15px; height: 15px; border: 1.5px solid #bbb;
      border-radius: 3px; flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      transition: background .15s, border-color .15s;
    }
    .check-option.checked .custom-check { background: #63b3ed; border-color: #63b3ed; }
    .check-option.checked .custom-check::after {
      content: '';
      display: block; width: 8px; height: 5px;
      border-left: 2px solid #fff; border-bottom: 2px solid #fff;
      transform: rotate(-45deg) translate(1px,-1px);
    }
    .check-option.checked { color: #63b3ed; font-weight: 600; }

    /* ── Price range ── */
    .price-range {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-bottom: 10px;
    }
    .price-input-wrap {
      flex: 1;
      display: flex;
      align-items: center;
      border: 1px solid #ddd;
      border-radius: 6px;
      overflow: hidden;
      background: #fff;
      transition: border-color .15s;
    }
    .price-input-wrap:focus-within { border-color: #63b3ed; }
    .price-prefix {
      padding: 0 6px 0 8px;
      font-size: 13px;
      color: #aaa;
      user-select: none;
    }
    .price-range input[type=number] {
      width: 100%;
      border: none;
      outline: none;
      padding: 7px 8px 7px 0;
      font-size: 13px;
      color: #222;
      background: transparent;
      -moz-appearance: textfield;
    }
    .price-range input[type=number]::-webkit-outer-spin-button,
    .price-range input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; }
    .price-dash { color: #bbb; font-size: 14px; flex-shrink: 0; }
    .price-btn {
      display: block;
      width: 100%;
      background: #63b3ed;
      color: #fff;
      border: none;
      border-radius: 6px;
      padding: 8px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      letter-spacing: .3px;
      transition: background .15s;
    }
    .price-btn:hover { background: #4299e1; }

    /* ── Rating stars ── */
    .rating-options { display:flex; flex-direction:column; gap:6px; }
    .rating-option {
      display:flex; align-items:center; gap:6px;
      cursor:pointer; font-size:13px; color:#333;
      padding:3px 5px; border-radius:4px;
      border:1.5px solid transparent;
      transition: border-color .15s, background .15s;
    }
    .rating-option:hover { background:#fafafa; }
    .rating-option.selected { border-color:#63b3ed; background:#ebf8ff; color:#63b3ed; }
    .stars { color:#ffc107; font-size:13px; letter-spacing:1px; }
    .stars-label { font-size:12px; color:inherit; }

    /* ── MAIN ── */
    .main-content { flex:1; min-width:0; padding-top:16px; }

    /* Sort bar */
    .sort-bar { display:flex; align-items:center; gap:10px; margin-bottom:16px; flex-wrap:wrap; }
    .sort-bar label { font-size:13px; color:#555; font-weight:600; }
    .sr-only-select { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }

    /* Custom sort dropdown */
    .sort-dropdown { position: relative; }
    .sort-dropdown-btn {
      display:flex; align-items:center; gap:10px;
      border:1.5px solid #dbe7f3; border-radius:8px; padding:8px 14px;
      font-size:13px; font-weight:600; color:#222; background:#fff;
      cursor:pointer; outline:none;
      transition: border-color .15s, box-shadow .15s;
    }
    .sort-dropdown-btn:hover { border-color:#63b3ed; }
    .sort-dropdown-btn:focus { border-color:#63b3ed; box-shadow:0 0 0 3px rgba(99,179,237,.25); }
    .sort-dropdown-arrow { flex-shrink:0; transition: transform .2s; }
    .sort-dropdown.open .sort-dropdown-arrow { transform: rotate(180deg); }

    .sort-dropdown-menu {
      position:absolute; top:calc(100% + 6px); left:0; min-width:190px;
      background:#fff; border:1px solid #dbe7f3; border-radius:10px;
      box-shadow:0 10px 30px rgba(20,40,60,.12);
      list-style:none; padding:6px; margin:0;
      opacity:0; visibility:hidden; transform:translateY(-6px);
      transition: opacity .15s, transform .15s, visibility .15s;
      z-index: 50;
    }
    .sort-dropdown.open .sort-dropdown-menu {
      opacity:1; visibility:visible; transform:translateY(0);
    }
    .sort-dropdown-menu li {
      display:flex; align-items:center; justify-content:space-between;
      padding:9px 10px; border-radius:6px;
      font-size:13px; color:#333; cursor:pointer;
      transition: background .12s, color .12s;
    }
    .sort-dropdown-menu li:hover { background:#f3f9fe; color:#222; }
    .sort-dropdown-menu li.active {
      background:#ebf8ff; color:#2b7fc1; font-weight:700;
    }
    .sort-dropdown-menu li.active::after {
      content:''; width:6px; height:10px;
      border-right:2px solid #63b3ed; border-bottom:2px solid #63b3ed;
      transform: rotate(45deg); margin-left:8px;
    }
    .result-count { font-size:13px; color:#888; }

    /* View toggle */
    .view-toggle { display:flex; align-items:center; gap:4px; margin-left:auto; }
    .view-btn {
      width: 32px; height: 32px;
      border: 1.5px solid #ddd;
      border-radius: 6px;
      background: #fff;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: border-color .15s, background .15s;
      color: #aaa;
    }
    .view-btn:hover { border-color: #999; color: #555; }
    .view-btn.active { border-color: #222; background: #fff; color: #222; }
    .view-btn svg { display:block; }

    /* Product grid — 4-up by default, 5-up on ultra-wide (1900px+) screens */
    .product-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px 16px; transition: gap .2s; }
    .product-grid.view-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }

    @media (min-width: 1900px) {
      .page-layout { max-width: 1720px; }
      .product-grid { grid-template-columns: repeat(5, minmax(0,1fr)); gap:20px; }
    }
    .product-grid.view-list {
      display: flex; flex-direction: column; gap: 10px;
    }

    /* List view card overrides */
    .product-grid.view-list .card {
      display: flex; flex-direction: row; align-items: stretch;
      height: 130px;
    }
    .product-grid.view-list .card-img-wrap {
      width: 110px; min-width: 110px; padding-top: 0; height: 130px;
    }
    .product-grid.view-list .card-body {
      flex: 1; padding: 10px 12px; display: flex; flex-direction: column; justify-content: space-between;
    }

    /* No results */
    .no-results {
      grid-column: 1/-1; text-align:center; padding:60px 20px; color:#aaa;
    }
    .no-results svg { margin-bottom:14px; opacity:.4; }
    .no-results p { font-size:15px; }

    /* Card */
    .card { background:#fff; border-radius:4px; overflow:hidden; cursor:pointer; transition:box-shadow .2s, border-color .2s; position:relative; border: 1px solid #dbe7f3; }
    .card:hover { box-shadow:0 4px 18px rgba(0,0,0,.12); border-color: #b8d7f0; }

    .card-img-wrap { position:relative; width:100%; padding-top:128%; background:#f0f0f0; overflow:hidden; }
    .card-img-wrap img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
    .card-img-primary {
      transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.25,.1,.25,1);
      opacity: 1;
      z-index: 1;
    }
    .card-img-hover {
      transition: opacity .6s cubic-bezier(.4,0,.2,1), transform .6s cubic-bezier(.25,.1,.25,1);
      opacity: 0;
      z-index: 2;
    }
    .card:hover .card-img-primary { opacity: 0; transform: scale(1.04); }
    .card:hover .card-img-hover { opacity: 1; transform: scale(1.04); }

    .discount-badge {
      position:absolute; top:8px; left:8px;
      background:#63b3ed; color:#fff; font-size:10px; font-weight:700;
      border-radius:3px; padding:2px 6px;
    }

    .card-body { padding:10px 10px 6px; }

    .badge-row { display:flex; align-items:center; gap:6px; margin-bottom:6px; flex-wrap:wrap; }
    .badge-trends { background:#2b7fc1; color:#fff; font-size:10px; font-weight:700; border-radius:3px; padding:1px 5px; letter-spacing:.3px; }
    .badge-hashtag { font-size:11px; color:#2b7fc1; font-weight:600; }

    .card-title { font-size:13px; color:#222; line-height:1.4; margin-bottom:6px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

    .card-tags { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:6px; }
    .card-tag { font-size:10px; color:#63b3ed; background:#ebf8ff; border-radius:3px; padding:1px 5px; font-weight:600; }

    .card-price-row { display:flex; align-items:center; justify-content:space-between; }
    .price-block { display:flex; align-items:baseline; gap:5px; flex-wrap:wrap; }
    .price-orig { font-size:12px; color:#bbb; text-decoration:line-through; }
    .price-main { font-size:16px; font-weight:700; color:#0a0a0a; }
    .price-est { font-size:11px; color:#63b3ed; }
    .sold-count { font-size:11px; color:#888; }

    .add-cart-btn {
      width:32px; height:32px; border-radius:2px; border:none;
      background:#1a1a1a; display:flex; align-items:center; justify-content:center;
      cursor:pointer; transition:background .2s; flex-shrink:0;
    }
    .add-cart-btn:hover { background:#63b3ed; }

    .card-swatches {
      position: absolute;
      left: 8px;
      bottom: 8px;
      display: flex;
      gap: 5px;
      z-index: 2;
    }
    .swatch {
      width:16px; height:16px; border-radius:50%; cursor:pointer;
      border: 1.5px solid rgba(255,255,255,.9);
      box-shadow: 0 1px 3px rgba(0,0,0,.3);
      transition: border-color .15s;
    }
    .swatch.active { border-color:#63b3ed; box-shadow:0 0 0 1px #fff inset, 0 1px 3px rgba(0,0,0,.3); }

    /* ── MOBILE FILTER BAR ── */
    .mobile-filter-bar { display: none; }
    .mobile-drawer-overlay { display: none; }
    .mobile-drawer { display: none; }

    @media (max-width: 768px) {
      .sidebar { display: none; }
      .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; }
      .page-layout { display: block; padding: 0 10px 40px; max-width: 100%; }
      .main-content { width: 100%; }
      .card, .card-body, .card-title, .card-price-row, .price-block { min-width: 0; }

      /* Mobile filter bar */
      .mobile-filter-bar {
        display: block;
        background: #fff;
        border-bottom: 1px solid #ebebeb;
        position: sticky;
        top: 52px;
        z-index: 90;
      }

      /* Row 1: Recommended · Most Popular · Price · Filter */
      .mobile-top-row {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #f0f0f0;
        overflow-x: auto;
        scrollbar-width: none;
      }
      .mobile-top-row::-webkit-scrollbar { display: none; }
      .mobile-top-item {
        flex-shrink: 0;
        padding: 10px 14px;
        font-size: 13px;
        color: #555;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 4px;
        border-right: 1px solid #f0f0f0;
        white-space: nowrap;
        transition: color .15s;
      }
      .mobile-top-item:last-child { border-right: none; }
      .mobile-top-item:hover { color: #222; }
      .mobile-top-item.active { color: #222; font-weight: 600; }
      .mobile-top-item.bold { font-weight: 700; color: #111; }
      .mobile-top-item svg { flex-shrink: 0; }
      #mobilePriceArrow { transition: transform .2s ease; }

      /* Row 2: Category · Brand · Color · Connectivity … */
      .mobile-pill-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        overflow-x: auto;
        scrollbar-width: none;
      }
      .mobile-pill-row::-webkit-scrollbar { display: none; }
      .mobile-pill {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        border: 1px solid #d0d0d0;
        border-radius: 20px;
        padding: 5px 12px;
        font-size: 13px;
        color: #333;
        background: #fff;
        cursor: pointer;
        white-space: nowrap;
        transition: border-color .15s, color .15s, background .15s;
      }
      .mobile-pill:hover { border-color: #888; color: #111; }
      .mobile-pill.active { border-color: #63b3ed; color: #63b3ed; background: #ebf8ff; font-weight: 600; }
      .mobile-pill svg { flex-shrink: 0; }

      /* Mobile drawer overlay */
      .mobile-drawer-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,.45);
        z-index: 200;
      }
      .mobile-drawer-overlay.open { display: block; }

      .mobile-drawer {
        display: block;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: #fff;
        border-radius: 16px 16px 0 0;
        max-height: 80vh;
        overflow-y: auto;
        transform: translateY(100%);
        transition: transform .3s ease;
        z-index: 201;
        padding: 0 0 env(safe-area-inset-bottom);
      }
      .mobile-drawer.open { transform: translateY(0); }

      .drawer-handle {
        width: 36px; height: 4px; background: #ddd; border-radius: 2px;
        margin: 12px auto 0;
      }
      .drawer-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 14px 18px 10px;
        border-bottom: 1px solid #ebebeb;
        font-weight: 700; font-size: 15px;
      }
      .drawer-close {
        font-size: 20px; color: #aaa; cursor: pointer; line-height:1;
        background:none; border:none; padding:0;
      }
      .drawer-close:hover { color: #333; }
      .drawer-body { padding: 16px 16px 8px; }

      .drawer-section-title {
        font-size: 13px; font-weight: 600; color: #111;
        margin: 14px 0 10px;
      }
      .drawer-section-title:first-child { margin-top: 0; }

      .drawer-pill-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
      }
      .drawer-pill {
        border: 1.5px solid #e0e0e0;
        border-radius: 10px;
        padding: 16px 10px;
        font-size: 13px;
        color: #222;
        background: #fff;
        cursor: pointer;
        text-align: center;
        line-height: 1.3;
        transition: border-color .15s, background .15s;
        min-height: 56px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .drawer-pill:hover { border-color: #aaa; background: #fafafa; }
      .drawer-pill.selected {
        border-color: #111;
        background: #fff;
        font-weight: 600;
        color: #111;
        box-shadow: 0 0 0 1px #111;
      }

      .drawer-footer {
        display: flex; gap: 10px;
        padding: 14px 18px;
        border-top: 1px solid #ebebeb;
        position: sticky; bottom: 0; background: #fff;
      }
      .drawer-btn-reset {
        flex: 1; border: 1.5px solid #ccc; border-radius: 8px;
        background: #fff; color: #222; font-size: 15px; font-weight: 700;
        padding: 14px; cursor: pointer;
        transition: border-color .15s;
      }
      .drawer-btn-reset:hover { border-color: #555; }
      .drawer-btn-apply {
        flex: 2; border: none; border-radius: 8px;
        background: #111; color: #fff; font-size: 15px; font-weight: 700;
        padding: 14px; cursor: pointer;
        transition: background .15s;
      }
      .drawer-btn-apply:hover { background: #333; }

      /* Mobile sort bar */
      .sort-bar { padding: 0 4px; }
      .view-toggle { gap: 3px; }
    }

    /* ── Very narrow screens: keep the 2-up grid (this IS the intended
       mobile layout); just let tags wrap onto their own line instead of
       forcing nowrap, so two-word tags like "Fast Charging" still fit ── */
    @media (max-width: 380px) {
      .product-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
      .card-tags { overflow: visible; }
      .card-tag { white-space: normal; line-height: 1.3; }
      .card-body { padding: 8px 8px 6px; }
      .price-main { font-size: 14px; }
      .add-cart-btn { width: 28px; height: 28px; }
    }

    /* ── Fix: category strip vanishing on this page at desktop widths ──
       menu-full-white.js toggles nav-categories--hidden (in
       menu-full-white-style.css) as a scroll-direction show/hide effect.
       On this page it's getting stuck applied and never removed, which
       collapses the row to height:0. Root cause lives in that shared
       script/stylesheet — used by every other page too — so rather than
       edit code we haven't reviewed and risk it site-wide, this pins the
       strip visible on desktop only for THIS page. Higher specificity
       than the single-class rule it's beating, so no !important needed.
       Remove this block once the scroll listener itself is fixed. ── */
    @media (min-width: 769px) {
      #desktopNav .nav-categories.nav-categories--hidden {
        height: 44px;
        overflow-x: auto;
        overflow-y: visible;
        border-top-color: var(--border-sub);
      }
    }