:root {
    --container-max: 1260px;
    --blue-grad: linear-gradient(90deg, #1c2746, #1f2e57);
    --red-grad: linear-gradient(90deg, #ff4a2a, #e43f22);
  }
  body { background:#fafcff; color:#1f2937; overflow-x:hidden; }
  .safe-container { max-width: var(--container-max); width:100%; margin:0 auto; padding:0 12px; }
  /* Header and nav styles fully inherit from res/style.css to match homepage. */
  .menu-item.all-categories > a { background:rgba(0,0,0,.16); }
  .menu-item.all-categories:hover > a { background:rgba(0,0,0,.24); }

  .allcat-dropdown {
    width: 318px;
    padding:0;
    border-top:none;
    overflow: visible;
    background:#fff;
  }
  .allcat-dropdown {
    list-style:none;
  }
  .allcat-dropdown > li {
    position:static; overflow:visible; display:flex; align-items:center; gap:10px; min-height:52px; padding:0 14px; border-bottom:1px solid #f3f4f6; cursor:pointer; background:#fff;
  }
  .allcat-dropdown > li:last-child { border-bottom:none; }
  .allcat-dropdown > li::after { content:"\25B8"; margin-left:auto; color:#a3afc9; font-size:12px; }
  .allcat-dropdown > li:hover { background:#fff3ef; color:#e43f22; }
  .allcat-dropdown .category-flyout {
    position:absolute; left:100%; top:0px; margin-top:0; transform:none; width:calc(var(--container-max) - 100% - 24px); min-height:100%; height:auto; background:#fff; box-shadow:0 12px 30px rgba(0,0,0,.1);
    display:none; padding:16px; white-space:normal; border:none;
  }
  /* Keep homepage hover behavior inside submenu context. */
  .allcat-dropdown .category-flyout .sub-col-title a:hover,
  .allcat-dropdown .category-flyout .sub-links a:hover { background:transparent !important; }
  .allcat-dropdown > li:hover .category-flyout { display:block; }
  .filter-strip { background:transparent; border:none;}
  .filter-row { display:flex;  background:#fff; }
  .filter-label {
    flex:0 0 180px;
    padding:10px 12px;
    font-weight:700;
    color:#374151;
    background:#fbfcff;
    white-space:nowrap;
  }
  .filter-links {
    flex:1 1 auto;
    padding:10px 12px;
    display:flex;
    flex-wrap:wrap;
    gap:8px 18px;
  }
  .filter-links a {
    color:#325f8d;
    text-decoration:none;
    font-size:14px;
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 12px;
    border:1px solid #dbe5f2;
    background:#fff;
    transition:all .2s ease;
  }
  .filter-links a:hover { color:#e43f22; background:#fff3ef; border-color:#ffc9bd; }

  .breadcrumb-strip { background:#f3f6fb; border-top:1px solid #e8edf6; border-bottom:1px solid #e8edf6; }
  .breadcrumb-strip .breadcrumb { margin:0; padding:10px 0; }
  .breadcrumb a{text-decoration: none;}

  .list-layout { display:grid; grid-template-columns:286px 1fr; gap:20px; }
  .left-filter-sticky {
    position:sticky;
    top:142px;
    z-index:5;
  }
  .side-filter-tophead {
    display:flex;
    align-items:center;
    gap:9px;
    padding:12px 14px;
    background:linear-gradient(90deg, #1c2746, #24335d);
    color:#fff;
    font-size:15px;
    font-weight:700;
    letter-spacing:.02em;
    margin-bottom:10px;
  }
  .side-filter-tophead i { font-size:16px; }
  .side-filter-block {
    background:#fff;
    overflow:hidden;
    margin-bottom:12px;
  }
  .side-filter-block:last-child { margin-bottom:0; }
  .side-filter-block .sfb-head {
    display:flex;
    align-items:center;
    gap:8px;
    padding:9px 14px;
    background:#f3f6fb;
    color:#1f2e57;
    font-size:14px;
    font-weight:700;
    border-bottom:1px solid #e3eaf5;
    letter-spacing:.01em;
  }
  .side-filter-block .sfb-head i { font-size:14px; opacity:.9; color:#6f86a8; }
  .side-filter-block .sfb-body { padding:10px 14px 12px 30px; }
  .side-filter-block .filter-links {
    padding:0;
    gap:7px;
    display:grid;
    grid-template-columns:1fr;
  }
.sfb-head a {
    color: #325f8d;
    text-decoration:none;
}
.sfb-head a:hover {
    color: #e43f22;
}
.side-filter-block .filter-links a {
    width: 100%;
    min-height: 30px;
    padding: 0 10px 0 20px;
    font-size: 13px;
    justify-content: flex-start;
    border: none;
    background: transparent;
    color: #325f8d;
    position: relative;
}
  .side-filter-block .filter-links a::before {
    content:"";
    width:5px;
    height:5px;
    border-radius:50%;
    background:#b7c4d8;
    position:absolute;
    left:8px;
    top:50%;
    transform:translateY(-50%);
  }
  .side-filter-block .filter-links a:hover {
    border:none;
    background:#f5f8ff;
    color:#1f2e57;
  }
  .side-filter-block .filter-links a:hover::before { background:#5d7397; }
  .side-filter-block .filter-links a.active {
    background:#eef3ff;
    color:#1f2e57;
    font-weight:700;
  }
  .side-filter-block .filter-links a.active::before { background:#ff4a2a; }
  .recent-viewed-card {
    background:#fff;
    margin-bottom:14px;
    overflow:hidden;
  }
  .recent-viewed-card .rv-head {
    display:flex;
    align-items:center;
    gap:10px;
    padding:12px 14px;
    background:var(--red-grad);
    color:#fff;
    font-size:15px;
    font-weight:700;
    letter-spacing:.02em;
  }
  .recent-viewed-card .rv-head i { font-size:18px; opacity:.95; }
  .recent-viewed-card .rv-list {
    list-style:none;
    margin:0;
    padding:0;
  }
  .recent-viewed-card .rv-list > li { border-bottom:1px solid #eef2f8; }
  .recent-viewed-card .rv-link {
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 5px;
    text-decoration:none;
    color:inherit;
    transition:background .18s ease;
  }
  .recent-viewed-card .rv-link:hover { background:#f8fafc; }
  .recent-viewed-card .rv-thumb {
    flex:0 0 64px;
    width:64px;
    height:64px;
    overflow:hidden;
    background:#f1f4f9;
  }
  .recent-viewed-card .rv-thumb img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }
  .recent-viewed-card .rv-body {
    flex:1 1 auto;
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  .recent-viewed-card .rv-name {
    font-size:13px;
    font-weight:600;
    line-height:1.35;
    color:#1f2937;
    display:-webkit-box;
    -webkit-line-clamp:2;
    line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .recent-viewed-card .rv-price {
    font-size:14px;
    font-weight:700;
    color:#e43f22;
  }
  .recent-viewed-card .rv-chevron {
    flex:0 0 auto;
    font-size:14px;
    color:#c5cedd;
    transition:color .18s ease, transform .18s ease;
  }
  .recent-viewed-card .rv-link:hover .rv-chevron { color:#e43f22; transform:translateX(2px); }

  .product-toolbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
  .product-toolbar h5 { white-space:normal; }
  .sort-row {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    border:1px solid #e8edf6;
    padding:8px;
    margin-bottom:12px;
    background:#fff;
  }
  .sort-row .sort-btn {
    border:1px solid #d8e0ee;
    background:#fff;
    color:#355e89;
    font-size:13px;
    padding:6px 12px;
    cursor:pointer;
    transition:all .2s ease;
    text-decoration:none;
  }
  .sort-row .sort-btn:hover { background:#fff3ef; border-color:#ffc9bd; color:#e43f22; }
  .sort-row .sort-btn.active { background:#198754; color:#fff; border-color:#198754; }
  .products-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
  .products-grid .product-card { margin-bottom:0; }
  .pagination-wrap { margin-top:18px; display:flex; justify-content:center; }
  .pagination .page-link { color:#1f2e57; }
  .pagination .active .page-link { background:#ff4a2a; border-color:#ff4a2a; color:#fff; }
 .page-link:focus { box-shadow:none !important; }

  @media (max-width: 992px) {
    .menu-bar .safe-container > ul { flex-wrap:wrap; }
    .menu-item > a { padding:12px 12px; }
    .header-tools { display:none; }
    .list-layout { grid-template-columns:1fr; }
    .left-filter-sticky { position:static; }
    .filter-row { display:block; }
    .filter-label { border-right:none; border-bottom:1px solid #edf1f7; }
    .products-grid { grid-template-columns:repeat(2,1fr); }
    .allcat-dropdown { width:100%; }
    .allcat-dropdown .category-flyout { position:static; width:100%; box-shadow:none; display:none !important; }
    .mobile_bottom span a { display:block; white-space:nowrap; }
  }