/* =============================================================
   BestDealz International — SUBCATEGORY theme
   Used by: /subcategory/{id}/{slug}
   Extends bd-alibaba.css — relies on its CSS variables and base.
============================================================= */

/* ===== Breadcrumb (same look as section page) ===== */
.bj-breadcrumb {
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 10px 0;
    font-size: 12.5px;
}
.bj-breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.bj-breadcrumb li { color: var(--ink-500); display: inline-flex; align-items: center; gap: 6px; }
.bj-breadcrumb li::after { content: '›'; color: var(--ink-300); margin-left: 4px; }
.bj-breadcrumb li:last-child::after { content: ''; }
.bj-breadcrumb li a { color: var(--ink-700); text-decoration: none; font-weight: 500; }
.bj-breadcrumb li a:hover { color: var(--bd-orange); }
.bj-breadcrumb li.current { color: var(--ink-900); font-weight: 700; }

/* ===== Compact subcategory hero ===== */
.sub-hero {
    background:
        linear-gradient(115deg, rgba(0,31,91,.96) 0%, rgba(0,60,140,.88) 55%, rgba(0,60,140,.6) 100%),
        var(--hero-bg, linear-gradient(135deg, #0f172a, #1e293b)) center/cover;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.sub-hero::after {
    content: '';
    position: absolute; right: -80px; bottom: -80px;
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(240,140,0,.32) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.sub-hero-inner {
    position: relative; z-index: 1;
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 22px;
    align-items: center;
    padding: 26px 0 24px;
}
.sub-hero-thumb {
    width: 110px; height: 110px;
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(4px);
    display: grid; place-items: center;
    color: rgba(255,255,255,.7);
}
.sub-hero-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sub-hero-thumb svg { width: 36px; height: 36px; }
.sub-hero-body h1 {
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 900;
    margin: 0 0 6px;
    letter-spacing: -.018em;
    line-height: 1.12;
}
.sub-hero-body h1 .pill {
    display: inline-block;
    background: var(--bd-orange);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    padding: 4px 11px;
    border-radius: 50px;
    vertical-align: 5px;
    margin-left: 8px;
    letter-spacing: .3px;
}
.sub-hero-body .lede {
    font-size: 13.5px;
    opacity: .9;
    margin: 0;
    line-height: 1.5;
    max-width: 640px;
}
.sub-hero-tally {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 12px;
}
.sub-hero-tally .t {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(4px);
    padding: 6px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 700;
}
.sub-hero-tally .t .dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #cbd5e1;
}
.sub-hero-tally .t.a .dot { background: #60a5fa; }
.sub-hero-tally .t.b .dot { background: #fbbf24; }
.sub-hero-tally .t.c .dot { background: #4ade80; }
.sub-hero-actions {
    display: flex; flex-direction: column; gap: 8px;
    align-items: flex-end;
}
.sub-hero-rfq {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--bd-orange);
    color: #fff;
    text-decoration: none;
    padding: 11px 18px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 13px;
    transition: background .15s;
    white-space: nowrap;
}
.sub-hero-rfq:hover { background: var(--bd-orange-dk); color: #fff; }
.sub-hero-rfq svg { width: 14px; height: 14px; }
.sub-hero-share {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent;
    color: #fff;
    text-decoration: none;
    padding: 7px 14px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 12px;
    border: 1px solid rgba(255,255,255,.3);
    transition: all .15s;
    white-space: nowrap;
    cursor: pointer;
}
.sub-hero-share:hover { background: rgba(255,255,255,.12); color: #fff; }
.sub-hero-share svg { width: 12px; height: 12px; }

/* ===== Sibling subcategory chip rail (lateral nav) ===== */
.sib-rail {
    background: #fff;
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 30;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.sib-rail-row {
    display: flex; align-items: center;
    gap: 8px;
    padding: 10px 0;
    overflow-x: auto;
    scrollbar-width: none;
}
.sib-rail-row::-webkit-scrollbar { display: none; }
.sib-rail-row > * { flex-shrink: 0; }
.sib-rail-label {
    font-size: 11.5px;
    font-weight: 800;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: .5px;
    padding-right: 6px;
    border-right: 1px solid var(--line);
}
.sib-rail a {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px;
    background: var(--bg-tint);
    color: var(--ink-700);
    border-radius: 50px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    transition: all .15s;
    border: 1px solid transparent;
}
.sib-rail a:hover {
    background: var(--bd-orange-soft);
    color: var(--bd-orange);
}
.sib-rail a.active {
    background: var(--bd-blue);
    color: #fff;
    border-color: var(--bd-blue);
}
.sib-rail a .ct {
    font-size: 10.5px;
    background: rgba(0,0,0,.08);
    padding: 1px 7px;
    border-radius: 50px;
    font-weight: 700;
}
.sib-rail a.active .ct { background: rgba(255,255,255,.22); }
.sib-rail-parent {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--ink-500) !important;
    font-size: 12px;
    text-decoration: none;
    font-weight: 600;
    padding: 7px 10px;
    white-space: nowrap;
    background: transparent !important;
    border: 0 !important;
}
.sib-rail-parent:hover { color: var(--bd-orange) !important; }
.sib-rail-parent svg { width: 13px; height: 13px; }

/* ===== Class-strip dominant class banner ===== */
.class-strip {
    background: linear-gradient(95deg, var(--bd-orange) 0%, #d97706 100%);
    color: #fff;
    padding: 12px 0;
}
.class-strip.a { background: linear-gradient(95deg, var(--bd-blue) 0%, #001f5b 100%); }
.class-strip.c { background: linear-gradient(95deg, #15803d 0%, #14532d 100%); }
.class-strip-row {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
}
.class-strip-left {
    display: flex; align-items: center; gap: 14px;
    font-size: 13px;
    font-weight: 700;
}
.class-strip-left .ic {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(6px);
    display: grid; place-items: center;
}
.class-strip-left .ic svg { width: 19px; height: 19px; }
.class-strip-left .h {
    font-size: 14px;
    font-weight: 900;
    display: block;
    letter-spacing: -.01em;
}
.class-strip-left .h + span {
    font-size: 12px;
    opacity: .92;
    font-weight: 500;
}
.class-strip-right {
    display: flex; gap: 18px; flex-wrap: wrap;
    font-size: 12px;
    font-weight: 600;
}
.class-strip-right .m {
    display: inline-flex; align-items: center; gap: 6px;
}
.class-strip-right .m svg { width: 13px; height: 13px; }

/* ===== Main layout: sidebar + grid ===== */
.shell {
    padding: 24px 0 36px;
    background: var(--bg-tint);
}
.shell-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 22px;
    align-items: flex-start;
}

/* ===== Sidebar ===== */
.side {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0;
    overflow: hidden;
    position: sticky;
    top: 70px;
}
.side-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, #fff 0%, var(--bg-tint) 100%);
}
.side-head h4 {
    font-size: 13px;
    font-weight: 900;
    color: var(--ink-900);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: .5px;
    display: inline-flex; align-items: center; gap: 7px;
}
.side-head h4 svg { width: 14px; height: 14px; color: var(--bd-orange); }
.side-head .clear {
    font-size: 11.5px;
    color: var(--bd-orange);
    text-decoration: none;
    font-weight: 700;
}
.side-head .clear:hover { text-decoration: underline; }

.side-group {
    border-bottom: 1px solid var(--line);
    padding: 14px 16px;
}
.side-group:last-child { border-bottom: 0; }
.side-group h6 {
    font-size: 12px;
    font-weight: 800;
    color: var(--ink-900);
    margin: 0 0 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    display: flex; justify-content: space-between; align-items: center;
    cursor: pointer;
}
.side-group h6 svg { width: 12px; height: 12px; opacity: .5; transition: transform .2s; }
.side-group.collapsed h6 svg { transform: rotate(-90deg); }
.side-group.collapsed .side-body { display: none; }

/* Class chips inside sidebar */
.side-class { display: grid; grid-template-columns: 1fr; gap: 6px; }
.side-class label {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px;
    border: 1px solid var(--line);
    border-radius: 8px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-700);
    transition: all .12s;
}
.side-class label:hover { border-color: var(--bd-orange); background: var(--bd-orange-soft); }
.side-class label.active { background: var(--bd-blue); color: #fff; border-color: var(--bd-blue); }
.side-class .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bd-blue); flex-shrink: 0; }
.side-class .dot.b { background: var(--bd-orange); }
.side-class .dot.c { background: #15803d; }
.side-class label.active .dot { background: #fff; }
.side-class .lbl { flex: 1; }
.side-class .ct {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ink-500);
    background: var(--bg-tint);
    padding: 1px 7px;
    border-radius: 50px;
}
.side-class label.active .ct { background: rgba(255,255,255,.22); color: #fff; }

/* Price inputs */
.side-price {
    display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px;
    margin-bottom: 10px;
}
.side-price input {
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-900);
    font-family: inherit;
    width: 100%;
    outline: none;
}
.side-price input:focus { border-color: var(--bd-orange); }
.side-price button {
    background: var(--bd-blue);
    color: #fff;
    border: 0;
    border-radius: 6px;
    padding: 0 12px;
    cursor: pointer;
    display: grid; place-items: center;
}
.side-price button svg { width: 12px; height: 12px; }
.side-price-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.side-price-presets button {
    background: var(--bg-tint);
    border: 1px solid transparent;
    border-radius: 50px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-700);
    cursor: pointer;
    font-family: inherit;
    transition: all .12s;
}
.side-price-presets button:hover { background: var(--bd-orange-soft); color: var(--bd-orange); }

/* Filter checkbox rows */
.side-list { max-height: 200px; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.side-list::-webkit-scrollbar { width: 4px; }
.side-list::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.side-row {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 4px;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--ink-700);
    border-radius: 4px;
}
.side-row:hover { background: var(--bd-orange-soft); color: var(--bd-orange); }
.side-row input[type="checkbox"], .side-row input[type="radio"] { accent-color: var(--bd-orange); width: 14px; height: 14px; flex-shrink: 0; }
.side-row .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-row .ct { color: var(--ink-400); font-size: 11px; font-weight: 600; }
.side-stars { color: #ff9900; font-size: 12px; letter-spacing: 1px; }
.side-stars .empty { color: var(--ink-300); }
.side-show-more {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--bd-orange);
    background: none;
    border: 0;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    padding: 0;
}
.side-show-more svg { width: 10px; height: 10px; }

/* Sidebar trust block */
.side-trust {
    background: linear-gradient(180deg, var(--bd-blue-soft) 0%, #fff 100%);
    padding: 14px 16px;
    border-top: 2px solid var(--bd-blue);
}
.side-trust h6 {
    font-size: 11.5px;
    font-weight: 900;
    color: var(--bd-blue);
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.side-trust-row {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 6px 0;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--ink-700);
}
.side-trust-row svg { width: 16px; height: 16px; color: #15803d; flex-shrink: 0; margin-top: 1px; }
.side-trust-row strong { display: block; color: var(--ink-900); font-size: 12px; font-weight: 800; }

/* ===== Main column ===== */
.main { min-width: 0; }

/* Toolbar above grid */
.toolbar {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 11px 14px;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}
.tb-left {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
.tb-count { font-size: 12.5px; color: var(--ink-500); }
.tb-count strong { color: var(--ink-900); }
.tb-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.tb-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--bd-orange-soft);
    color: var(--bd-orange-dk);
    border: 1px solid rgba(240,140,0,.3);
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
}
.tb-chip .x { font-weight: 900; opacity: .65; font-size: 12px; line-height: 1; }
.tb-chip:hover { background: var(--bd-orange); color: #fff; }
.tb-clear {
    color: var(--ink-500);
    font-size: 11.5px;
    text-decoration: underline;
    font-weight: 600;
}
.tb-right { display: flex; align-items: center; gap: 8px; }
.tb-sort {
    padding: 7px 30px 7px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-700);
    background: #fff
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 8px center / 11px;
    appearance: none;
    font-family: inherit;
    cursor: pointer;
}
.tb-view {
    display: inline-flex;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}
.tb-view button {
    border: 0;
    background: #fff;
    padding: 7px 9px;
    cursor: pointer;
    color: var(--ink-500);
    display: grid; place-items: center;
}
.tb-view button.active { background: var(--bd-blue); color: #fff; }
.tb-view button svg { width: 14px; height: 14px; }

/* ===== Product grid container ===== */
.products-wrap {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    margin-bottom: 18px;
}
.products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.products-grid.list-view {
    grid-template-columns: 1fr;
}
.products-grid.list-view .cc-card {
    grid-template-columns: 200px 1fr;
    display: grid;
}
.products-grid.list-view .cc-img { aspect-ratio: 1/1; }
.products-grid.list-view .cc-body { padding: 16px 18px; }

/* ===== Load More button + AJAX loading overlay ===== */
.load-more-row {
    display: flex;
    justify-content: center;
    padding: 24px 0 8px;
}
.load-more-btn {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 13px 38px;
    background: #fff;
    border: 2px solid var(--bd-blue);
    border-radius: 50px;
    color: var(--bd-blue);
    font-family: inherit;
    font-weight: 800;
    font-size: 13.5px;
    cursor: pointer;
    transition: all .18s cubic-bezier(.4,0,.2,1);
    min-width: 240px;
}
.load-more-btn:hover {
    background: var(--bd-blue);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 60, 140, .22);
}
.load-more-btn:active { transform: translateY(0); }
.load-more-btn .lm-label {
    display: inline-flex; align-items: center; gap: 8px;
    letter-spacing: .2px;
}
.load-more-btn .lm-label::after {
    content: '↓';
    font-weight: 900;
    font-size: 15px;
    transition: transform .25s;
}
.load-more-btn:hover .lm-label::after { transform: translateY(2px); }
.load-more-btn .lm-meta {
    font-size: 10.5px;
    font-weight: 600;
    opacity: .65;
    letter-spacing: .3px;
}
.load-more-btn.is-loading {
    color: transparent !important;
    pointer-events: none;
    background: var(--bd-blue);
    border-color: var(--bd-blue);
}
.load-more-btn.is-loading::before {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    top: 50%; left: 50%;
    margin-left: -9px; margin-top: -9px;
    border: 2.5px solid rgba(255,255,255,.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: lm-spin .65s linear infinite;
}
@keyframes lm-spin { to { transform: rotate(360deg); } }

/* Loading overlay (filter / sort change) */
.products-wrap { position: relative; }
.loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .8);
    backdrop-filter: blur(2px);
    z-index: 5;
    display: none;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    transition: opacity .15s;
}
.loading-overlay.show {
    display: flex;
    animation: lo-fade-in .15s ease-out;
}
@keyframes lo-fade-in { from { opacity: 0; } to { opacity: 1; } }
.loading-overlay .spinner {
    width: 36px; height: 36px;
    border: 3px solid #e2e8f0;
    border-top-color: var(--bd-blue);
    border-radius: 50%;
    animation: lm-spin .7s linear infinite;
}
.products-wrap.is-loading .products-grid { opacity: .5; transition: opacity .18s; }

/* Fade-in for newly inserted cards */
@keyframes cc-fade-in-anim {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.cc-card.cc-fade-in {
    animation: cc-fade-in-anim .35s cubic-bezier(.4,0,.2,1) backwards;
}

/* ===== Pagination ===== */
.pag {
    display: flex; align-items: center; justify-content: center;
    gap: 6px;
    padding: 18px 0 8px;
    flex-wrap: wrap;
}
.pag a, .pag span {
    min-width: 36px; height: 36px;
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink-700);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--line);
    transition: all .12s;
}
.pag a:hover { border-color: var(--bd-orange); color: var(--bd-orange); }
.pag .current, .pag .active {
    background: var(--bd-blue);
    color: #fff;
    border-color: var(--bd-blue);
}
.pag .ellipsis, .pag .disabled { border: 0; background: transparent; color: var(--ink-400); }
.pag .nav { display: inline-flex; align-items: center; gap: 6px; padding: 0 14px; }
.pag .nav svg { width: 12px; height: 12px; }

/* Laravel default pagination integration */
.pag ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.pag li { display: inline-flex; }
.pag li a, .pag li span {
    min-width: 36px; height: 36px;
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 10px;
    font-size: 12.5px; font-weight: 700;
    color: var(--ink-700);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--line);
}
.pag li.active span { background: var(--bd-blue); color: #fff; border-color: var(--bd-blue); }

/* ============================================================
   "Editorial" product cards (same as section page)
============================================================ */
.cc-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: all .25s cubic-bezier(.4, 0, .2, 1);
    display: flex;
    flex-direction: column;
}
.cc-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--bd-blue);
    transition: width .2s;
    z-index: 2;
}
.cc-card.cls-b::before { background: var(--bd-orange); }
.cc-card.cls-c::before { background: #15803d; }
.cc-card:hover {
    border-color: transparent;
    box-shadow: 0 14px 32px rgba(0, 31, 91, .14);
    transform: translateY(-4px);
}
.cc-card:hover::before { width: 5px; }

.cc-img {
    position: relative;
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg, #f5f7fa 0%, #eaeef3 100%);
    overflow: hidden;
}
.cc-img img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 0;
    transition: transform .45s cubic-bezier(.4, 0, .2, 1);
}
.cc-card:hover .cc-img img { transform: scale(1.07); }
.cc-img::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.18) 100%);
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s;
}
.cc-card:hover .cc-img::after { opacity: 1; }

.cc-discount {
    position: absolute;
    top: 9px; right: 9px;
    background: var(--ali-red);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    width: 40px; height: 40px;
    border-radius: 50%;
    display: grid; place-items: center;
    z-index: 3;
    box-shadow: 0 4px 12px rgba(216, 35, 42, .4);
    border: 2px solid #fff;
    line-height: 1;
}
.cc-discount.hot { background: linear-gradient(135deg, #ff6b35, #d8232a); }
.cc-discount.bulk { background: var(--bd-orange); box-shadow: 0 4px 12px rgba(240, 140, 0, .4); }

.cc-img-pill {
    position: absolute;
    bottom: 10px; left: 10px;
    background: rgba(15, 23, 42, .82);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 50px;
    z-index: 3;
    display: inline-flex; align-items: center; gap: 5px;
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.15);
}
.cc-img-pill.stock { background: rgba(21, 128, 61, .92); }
.cc-img-pill.warn  { background: rgba(245, 158, 11, .92); }
.cc-img-pill.fast  { background: rgba(0, 60, 140, .92); }
.cc-img-pill svg { width: 11px; height: 11px; }

.cc-actions {
    position: absolute;
    bottom: 10px; right: 10px;
    display: flex; gap: 5px;
    z-index: 3;
    opacity: 0;
    transform: translateY(8px);
    transition: all .25s cubic-bezier(.4, 0, .2, 1);
}
.cc-card:hover .cc-actions {
    opacity: 1;
    transform: translateY(0);
}
.cc-act {
    width: 32px; height: 32px;
    background: rgba(255, 255, 255, .98);
    border: 0;
    border-radius: 50%;
    display: grid; place-items: center;
    color: var(--ink-700);
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .22);
    transition: all .15s;
    text-decoration: none;
}
.cc-act:hover {
    background: var(--bd-orange);
    color: #fff;
    transform: scale(1.12);
}
.cc-act svg { width: 14px; height: 14px; }

.cc-body {
    padding: 12px 14px 14px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cc-sup {
    display: flex; align-items: center; gap: 6px;
    font-size: 10.5px;
    color: var(--ink-500);
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line-soft);
}
.cc-sup .flag {
    width: 14px; height: 10px;
    background: linear-gradient(0deg, #007749 33%, #fff 33% 66%, #de3831 66%);
    border-radius: 1px;
    flex-shrink: 0;
}
.cc-sup .flag.cn { background: #d8232a; position: relative; }
.cc-sup .flag.cn::before {
    content: '★';
    position: absolute;
    color: #ffd700;
    font-size: 7px;
    top: 0; left: 1px;
    line-height: 1;
}
.cc-sup .name {
    color: var(--ink-700);
    font-weight: 600;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cc-sup .verified {
    color: #15803d;
    font-weight: 800;
    font-size: 9.5px;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: #dcfce7;
    padding: 2px 7px;
    border-radius: 50px;
    white-space: nowrap;
}
.cc-sup .verified svg { width: 9px; height: 9px; }

.cc-title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink-900);
    line-height: 1.38;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 38px;
}
.cc-title a { color: inherit; text-decoration: none; }
.cc-title a:hover { color: var(--bd-orange); }

.cc-price-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
}
.cc-price {
    font-size: 18px;
    font-weight: 900;
    color: var(--ali-red);
    letter-spacing: -.015em;
    line-height: 1;
}
.cc-price .from {
    font-size: 11px;
    font-weight: 600;
    color: var(--ink-500);
    margin-right: 2px;
}
.cc-price-range {
    font-size: 12.5px;
    color: var(--ink-500);
    font-weight: 600;
}
.cc-price-was {
    font-size: 12px;
    color: var(--ink-400);
    text-decoration: line-through;
}
.cc-save-pill {
    display: inline-block;
    background: #dcfce7;
    color: #166534;
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 50px;
    margin-left: auto;
}

.cc-rating {
    display: flex; align-items: center; gap: 6px;
    font-size: 11px;
    color: var(--ink-500);
}
.cc-rating .stars {
    color: #ff9900;
    display: inline-flex;
    gap: 1px;
}
.cc-rating .stars svg { width: 11px; height: 11px; fill: currentColor; }
.cc-rating strong { color: var(--ink-900); font-weight: 800; font-size: 12px; }
.cc-rating .sep { color: var(--ink-300); }

.cc-moq {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    color: var(--ink-700);
    background: var(--bd-orange-soft);
    padding: 4px 9px;
    border-radius: 4px;
    font-weight: 700;
    align-self: flex-start;
}
.cc-moq strong { color: var(--bd-orange-dk); font-weight: 900; }

/* Tier pricing ladder (Class B) */
.cc-tiers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--line);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--line);
    margin-top: 2px;
}
.cc-tier { background: #fff; padding: 7px 4px; text-align: center; }
.cc-tier .q {
    font-size: 9.5px;
    color: var(--ink-500);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .3px;
    display: block;
}
.cc-tier .p {
    font-size: 12.5px;
    color: var(--ink-900);
    font-weight: 800;
    margin-top: 2px;
}
.cc-tier.best { background: var(--bd-orange-soft); position: relative; }
.cc-tier.best::after {
    content: 'BEST';
    position: absolute;
    top: -1px; right: 2px;
    font-size: 7px;
    color: var(--bd-orange);
    font-weight: 900;
    letter-spacing: .3px;
}
.cc-tier.best .p { color: var(--bd-orange-dk); }

/* Trade Assurance strip */
.cc-ta {
    margin: 0 -14px -14px;
    background: linear-gradient(90deg, var(--bd-blue-soft) 0%, #fff 100%);
    color: var(--bd-blue);
    padding: 8px 14px;
    font-size: 10.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--line-soft);
}
.cc-ta .left { display: inline-flex; align-items: center; gap: 5px; }
.cc-ta .left svg { width: 12px; height: 12px; }
.cc-ta .right {
    font-weight: 800;
    font-size: 10px;
    background: #fff;
    padding: 2px 7px;
    border-radius: 50px;
    border: 1px solid var(--bd-blue);
}

/* ===== Buying guide / FAQ band ===== */
.guide-band {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    margin-top: 24px;
    margin-bottom: 24px;
}
.guide-band-head {
    background: linear-gradient(115deg, var(--bd-blue-soft) 0%, #fff 100%);
    padding: 18px 22px;
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center; gap: 14px;
}
.guide-band-head .ic {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--bd-blue);
    color: #fff;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.guide-band-head .ic svg { width: 20px; height: 20px; }
.guide-band-head h3 {
    font-size: 17px;
    font-weight: 900;
    color: var(--ink-900);
    margin: 0 0 3px;
    letter-spacing: -.01em;
}
.guide-band-head p {
    font-size: 12.5px;
    color: var(--ink-500);
    margin: 0;
}
.guide-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.guide-col { padding: 20px 22px; }
.guide-col + .guide-col { border-left: 1px solid var(--line); }
.guide-col h5 {
    font-size: 13.5px;
    font-weight: 900;
    color: var(--ink-900);
    margin: 0 0 12px;
    display: inline-flex; align-items: center; gap: 7px;
    letter-spacing: -.01em;
}
.guide-col h5 svg { width: 14px; height: 14px; color: var(--bd-orange); }
.guide-col p {
    font-size: 12.5px;
    color: var(--ink-700);
    line-height: 1.55;
    margin: 0 0 11px;
}
.guide-col ul { padding-left: 18px; margin: 0 0 10px; font-size: 12.5px; color: var(--ink-700); line-height: 1.6; }
.guide-col ul li::marker { color: var(--bd-orange); }
.faq-item { padding: 9px 0; border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 0; }
.faq-q {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ink-900);
    margin: 0 0 4px;
    display: flex; align-items: center; gap: 7px;
    cursor: pointer;
}
.faq-q::before {
    content: 'Q';
    background: var(--bd-orange);
    color: #fff;
    width: 18px; height: 18px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 900;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.faq-a {
    font-size: 12px;
    color: var(--ink-500);
    line-height: 1.5;
    margin: 0;
    padding-left: 25px;
}

/* ===== Featured brands ===== */
.brands-section {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    margin-bottom: 24px;
}
.section-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--bd-blue);
}
.section-head h3 {
    font-size: 16px;
    font-weight: 900;
    color: var(--ink-900);
    margin: 0;
    display: inline-flex; align-items: center; gap: 9px;
    letter-spacing: -.01em;
}
.section-head h3 .ic {
    width: 28px; height: 28px;
    border-radius: 7px;
    background: var(--bd-orange-soft);
    color: var(--bd-orange);
    display: grid; place-items: center;
}
.section-head h3 .ic svg { width: 14px; height: 14px; }
.section-head .right-link {
    font-size: 12px;
    color: var(--bd-orange);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 4px;
}
.section-head .right-link svg { width: 11px; height: 11px; }
.brand-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 10px;
}
.brand-tile {
    aspect-ratio: 16/9;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid; place-items: center;
    text-align: center;
    text-decoration: none;
    color: var(--ink-700);
    font-weight: 800;
    font-size: 13px;
    transition: all .12s;
    padding: 6px;
}
.brand-tile:hover {
    border-color: var(--bd-orange);
    color: var(--bd-orange);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}
.brand-tile .small {
    display: block;
    font-size: 9.5px;
    color: var(--ink-400);
    font-weight: 600;
    margin-top: 3px;
}

/* ===== Related (sibling) subcategories ===== */
.related-cats {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    margin-bottom: 24px;
}
.related-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}
.related-tile {
    text-decoration: none;
    text-align: center;
    padding: 12px 8px;
    border-radius: 10px;
    transition: all .15s;
    border: 1px solid transparent;
}
.related-tile:hover {
    background: var(--bd-orange-soft);
    border-color: var(--bd-orange);
    transform: translateY(-2px);
}
.related-tile .img {
    width: 64px; height: 64px;
    border-radius: 50%;
    margin: 0 auto 8px;
    background: var(--bg-tint);
    overflow: hidden;
    border: 2px solid var(--line);
    display: grid; place-items: center;
}
.related-tile:hover .img { border-color: var(--bd-orange); }
.related-tile .img img { width: 100%; height: 100%; object-fit: cover; }
.related-tile .img svg { width: 26px; height: 26px; color: var(--bd-orange); }
.related-tile h5 {
    font-size: 12px;
    font-weight: 800;
    color: var(--ink-900);
    margin: 0 0 2px;
    line-height: 1.3;
}
.related-tile .ct {
    font-size: 10px;
    color: var(--ink-500);
    font-weight: 600;
}

/* ===== Trust strip ===== */
.trust-strip {
    background: linear-gradient(180deg, #fff 0%, var(--bg-tint) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-bottom: 24px;
}
.trust-item { display: flex; align-items: center; gap: 12px; }
.trust-item .ic {
    width: 46px; height: 46px;
    border-radius: 12px;
    background: var(--bd-blue-soft);
    color: var(--bd-blue);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.trust-item .ic svg { width: 22px; height: 22px; }
.trust-item strong {
    display: block;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ink-900);
    margin-bottom: 1px;
}
.trust-item span {
    display: block;
    font-size: 11.5px;
    color: var(--ink-500);
    line-height: 1.45;
}

/* ===== RFQ band ===== */
.rfq-band {
    background: linear-gradient(115deg, var(--bd-blue) 0%, #001f5b 100%);
    border-radius: var(--radius);
    color: #fff;
    padding: 26px 30px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 22px;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.rfq-band::before {
    content: '';
    position: absolute; right: -90px; top: -90px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(240,140,0,.22) 0%, transparent 70%);
    border-radius: 50%;
}
.rfq-band-text { position: relative; z-index: 1; }
.rfq-band-text h3 {
    font-size: 19px;
    font-weight: 900;
    margin: 0 0 5px;
    letter-spacing: -.015em;
}
.rfq-band-text p {
    font-size: 13px;
    margin: 0;
    opacity: .92;
    max-width: 520px;
    line-height: 1.5;
}
.rfq-band-actions { position: relative; z-index: 1; display: flex; gap: 8px; flex-wrap: wrap; }
.rfq-band-actions a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 20px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: all .12s;
}
.rfq-band-actions a.primary { background: var(--bd-orange); color: #fff; }
.rfq-band-actions a.primary:hover { background: var(--bd-orange-dk); color: #fff; }
.rfq-band-actions a.ghost {
    background: rgba(255,255,255,.12);
    color: #fff;
    border: 1px solid rgba(255,255,255,.3);
}
.rfq-band-actions a.ghost:hover { background: rgba(255,255,255,.2); color: #fff; }
.rfq-band-actions a svg { width: 14px; height: 14px; }

/* ===== AI indexing progress chip (in sidebar) ===== */
.ai-indexing-chip {
    display: flex; align-items: center; gap: 8px;
    margin: 0 16px 12px;
    padding: 9px 12px;
    background: linear-gradient(135deg, var(--bd-blue-soft) 0%, #fff 100%);
    border: 1px solid var(--bd-blue);
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--bd-blue);
    line-height: 1.4;
}
.ai-indexing-chip .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--bd-blue);
    flex-shrink: 0;
    animation: ai-pulse 1.4s ease-in-out infinite;
}
@keyframes ai-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .35; transform: scale(.7); }
}

/* ===== Buying-guide skeleton loader ===== */
.bg-skeleton { padding: 4px 0; }
.skl {
    background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
    background-size: 200% 100%;
    border-radius: 4px;
    height: 11px;
    animation: skl-pulse 1.4s ease-in-out infinite;
}
.skl-line { width: 100%; }
.skl-line.w-50 { width: 50%; }
.skl-line.w-55 { width: 55%; }
.skl-line.w-60 { width: 60%; }
.skl-line.w-65 { width: 65%; }
.skl-line.w-70 { width: 70%; }
.skl-line.w-75 { width: 75%; }
.skl-line.w-80 { width: 80%; }
.skl-line.w-85 { width: 85%; }
.skl-line.w-90 { width: 90%; }
@keyframes skl-pulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.bg-loading-hint {
    font-size: 11.5px;
    color: var(--bd-blue);
    font-weight: 700;
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px dashed var(--line);
    display: flex; align-items: center; gap: 6px;
}
.bg-error-hint {
    font-size: 12px;
    color: var(--ali-red);
    font-weight: 600;
    margin: 14px 0 0;
}
.bg-error-hint button {
    background: transparent;
    border: 0;
    color: var(--bd-orange);
    font-weight: 800;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

/* Empty state */
.products-empty {
    padding: 60px 24px;
    text-align: center;
    color: var(--ink-500);
}
.products-empty .ic {
    width: 72px; height: 72px;
    margin: 0 auto 16px;
    background: var(--bd-orange-soft);
    color: var(--bd-orange);
    border-radius: 50%;
    display: grid; place-items: center;
}
.products-empty .ic svg { width: 32px; height: 32px; }
.products-empty h3 { font-size: 17px; font-weight: 800; color: var(--ink-900); margin: 0 0 6px; }
.products-empty p { font-size: 13px; margin: 0 auto 18px; max-width: 460px; line-height: 1.55; }
.products-empty .actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.products-empty .actions a {
    padding: 9px 18px;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    background: var(--bd-blue);
    color: #fff;
    transition: opacity .15s;
}
.products-empty .actions a:hover { opacity: .9; color: #fff; }
.products-empty .actions a.ghost {
    background: #fff;
    color: var(--ink-700);
    border: 1px solid var(--line);
}

/* Mobile filter trigger + backdrop */
.mobile-filter-btn {
    display: none;
    background: var(--bd-blue);
    color: #fff;
    border: 0;
    padding: 9px 16px;
    border-radius: 6px;
    font-weight: 800;
    font-size: 13px;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    margin-bottom: 12px;
}
.mobile-filter-btn svg { width: 14px; height: 14px; }
.side-backdrop {
    display: none;
    position: fixed; inset: 0;
    background: rgba(15,23,42,.5);
    z-index: 100;
}
.side-backdrop.show { display: block; }

/* ===== Responsive ===== */
@media (max-width: 1200px) {
    .shell-grid { grid-template-columns: 240px 1fr; }
    .products-grid { grid-template-columns: repeat(3, 1fr); }
    .brand-grid { grid-template-columns: repeat(4, 1fr); }
    .related-grid { grid-template-columns: repeat(4, 1fr); }
    .trust-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .shell-grid { grid-template-columns: 1fr; }
    .side {
        position: fixed; top: 0; left: -100%;
        bottom: 0; width: 86%; max-width: 320px;
        z-index: 110; overflow-y: auto;
        border-radius: 0;
        transition: left .25s;
    }
    .side.open { left: 0; }
    .mobile-filter-btn { display: inline-flex; }
    .sub-hero-inner { grid-template-columns: 90px 1fr; }
    .sub-hero-actions { grid-column: 1 / -1; flex-direction: row; align-items: center; }
    .guide-grid { grid-template-columns: 1fr; }
    .guide-col + .guide-col { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 600px) {
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .brand-grid { grid-template-columns: repeat(2, 1fr); }
    .related-grid { grid-template-columns: repeat(3, 1fr); }
    .trust-strip { grid-template-columns: 1fr; }
    .rfq-band { grid-template-columns: 1fr; padding: 22px; }
    .sub-hero-inner { grid-template-columns: 1fr; }
    .sub-hero-thumb { width: 70px; height: 70px; }
    .class-strip-right { gap: 10px; font-size: 11px; }
}
@media (max-width: 480px) {
    /* Alibaba-style 2-column mobile grid (replaces the old single-column stack) */
    .products-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .related-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE PRODUCT CARD — Alibaba-style compact 2-column layout (≤600px)
   Strips hover-only chrome (action overlay, scale-up), shrinks every
   sub-element so a card fits comfortably in half a 375px viewport
   without truncating the price or feeling cramped.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {

    /* ── Card frame ── */
    .cc-card {
        border-radius: 9px;
        border-color: #ececec;
    }
    .cc-card::before { display: none; }              /* hide side colour-strip — too thin to see */
    .cc-card:hover {
        transform: none;
        box-shadow: 0 2px 8px rgba(0,0,0,.06);
        border-color: #ececec;
    }
    .cc-card:hover .cc-img img { transform: none; }
    .cc-img::after { display: none; }

    /* ── Image badges & pills ── */
    .cc-discount {
        top: 6px; right: 6px;
        width: 34px; height: 34px;
        font-size: 9.5px;
        border-width: 1.5px;
    }
    .cc-img-pill {
        bottom: 6px; left: 6px;
        font-size: 9px;
        padding: 3px 7px;
        gap: 3px;
    }
    .cc-img-pill svg { width: 9px; height: 9px; }

    /* Hover-overlay action buttons hidden on touch (no hover anyway) */
    .cc-actions { display: none !important; }

    /* ── Body ── */
    .cc-body {
        padding: 8px 9px 10px !important;
        gap: 5px !important;
    }

    /* Supplier row — compact, still useful */
    .cc-sup {
        font-size: 9.5px !important;
        padding-bottom: 5px;
        gap: 4px;
    }
    .cc-sup .name { font-size: 9.5px; max-width: 90px; }
    .cc-sup .flag { width: 11px; height: 8px; }
    .cc-sup .verified {
        font-size: 8.5px;
        padding: 1px 5px;
    }
    .cc-sup .verified svg { width: 8px; height: 8px; }

    /* Title — 2 lines tight */
    .cc-title {
        font-size: 12.5px !important;
        line-height: 1.35;
        min-height: 34px;
        -webkit-line-clamp: 2;
        font-weight: 600;
    }

    /* Price row */
    .cc-price-row {
        gap: 5px !important;
        flex-wrap: nowrap;
        align-items: baseline;
    }
    .cc-price { font-size: 15.5px !important; }
    .cc-price .from { font-size: 10.5px; }
    .cc-price-was, .cc-price-range {
        font-size: 10.5px;
    }
    .cc-moq {
        font-size: 9.5px;
        margin-left: 0 !important;
    }
    .cc-moq strong { font-size: 9.5px; }
    .cc-save-pill {
        font-size: 9px;
        padding: 2px 6px;
    }

    /* Volume tier ladder + Trade Assurance strip — too wide for 2-col mobile,
       people can see them on the product detail page */
    .cc-tiers,
    .cc-ta { display: none !important; }

    /* Rating row */
    .cc-rating {
        font-size: 10px !important;
        gap: 3px;
        flex-wrap: nowrap;
    }
    .cc-rating .stars { gap: 1px; }
    .cc-rating .stars svg { width: 10px; height: 10px; }
    .cc-rating .sep { display: none; }
    .cc-rating strong { font-size: 10.5px; }
}

@media (max-width: 380px) {
    /* Very small phones — tighten further so nothing overflows */
    .products-grid { gap: 6px; }
    .cc-body { padding: 7px 8px 9px !important; }
    .cc-title { font-size: 12px !important; min-height: 32px; }
    .cc-price { font-size: 14.5px !important; }
    .cc-sup .name { max-width: 70px; }
}

/* ═══════════════════════════════════════════════════════════════════
   MOBILE EDGE-TIGHTENING — give the product grid more horizontal room
   by shrinking the surrounding container & wrap padding on small screens.
═══════════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    /* The white "card" that wraps the products list */
    .products-wrap {
        padding: 8px !important;
        border-radius: 8px;
        margin-bottom: 12px;
    }
    /* Outer container — pull the wrap closer to the screen edges */
    .bd-container { padding-left: 8px !important; padding-right: 8px !important; }
}
@media (max-width: 380px) {
    .products-wrap { padding: 6px !important; }
    .bd-container { padding-left: 6px !important; padding-right: 6px !important; }
}