/* ==========================================================================
   Browse / category page (PLP). Scoped to .plp-page — never leak.
   Fully responsive + jQuery slide-in filter drawer (CSS handles animation,
   JS toggles .is-open / slideToggle). Colors unchanged.
   ========================================================================== */

/* ---------- section spacing ---------- */
.plp-page .plp-section { padding: 52px 0 50px; }
@media (max-width: 768px){ .plp-page .plp-section{ padding: 32px 0 36px; } }
@media (max-width: 480px){ .plp-page .plp-section{ padding: 24px 0 28px; } }

/* ---------- category hero ---------- */
.usa-page .cat-hero {
    background: var(--paper-alt);
    padding: 38px 0 44px;
    position: relative;
    min-height: 245px;
}
.usa-page .breadcrumb {
    font-size: 1rem;
    color: var(--ink-faint);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.usa-page .breadcrumb a:hover { color: var(--crimson); }
.usa-page .cat-hero-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 30px;
    flex-wrap: wrap;
}
.usa-page .cat-hero-copy{ flex:1 1 520px; min-width: 280px; }
.usa-page .cat-hero h1 {
    font-size: clamp(1.85rem, 3.6vw, 2.9rem);
    line-height: 1.1;
}
.usa-page .cat-hero p {
    margin-top: 12px;
    font-size: clamp(0.92rem, 1.6vw, 0.98rem);
    color: var(--ink-soft);
    max-width: 60ch;
    line-height: 1.65;
}
.usa-page .cat-count {
    font-family: var(--mono);
    font-size: 1rem;
    letter-spacing: 0.06em;
    color: var(--ink);
    text-transform: uppercase;
    white-space: nowrap;
    padding-bottom: 6px;
    font-weight: 600;
}
@media (max-width: 768px){
    .usa-page .cat-hero{ padding: 28px 0 30px; }
    .usa-page .cat-hero-row{ gap:18px; align-items:flex-start; }
    .usa-page .cat-count{font-size: 1rem;padding-bottom:0;}
}
@media (max-width: 480px){
    .usa-page .cat-hero{ padding: 22px 0 26px; min-height: auto; }
    .usa-page .breadcrumb{ font-size:0.9rem; margin-bottom:12px; }
}

/* ---------- toolbar legacy ---------- */
.usa-page .toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0;
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 14px;
}
.usa-page .chip-row { display:flex; gap:10px; flex-wrap:wrap; }
.usa-page .chip {
    font-size:0.78rem; font-weight:600; padding:8px 16px;
    border-radius:999px; border:1.5px solid var(--line);
    background:var(--paper); color:var(--ink-soft);
    cursor:pointer; transition:all .2s ease;
}
.usa-page .chip:hover{ border-color:var(--crimson); color:var(--ink); }
.usa-page .chip.active{ background:var(--ink); border-color:var(--ink); color:#fff; }

.usa-page .sort-select {
    font-family:var(--sans);
    font-size:1rem; font-weight:500;
    color:var(--ink-soft);
    padding:9px 34px 9px 12px;
    border-radius:6px;
    border:1.5px solid var(--line);
    background:var(--paper-alt);
    cursor:pointer;
    min-width: 160px;
    appearance:auto;
}
@media (max-width: 480px){
    .usa-page .sort-select{/* flex:1 1 100%; *//* min-width:0; *//* width:100%; */}
}

/* ---------- layout ---------- */
.usa-page .plp-layout {
    display:grid;
    grid-template-columns: 272px 1fr;
    gap:44px;
    align-items:start;
}
@media (max-width: 1100px){ .usa-page .plp-layout{ gap:32px; grid-template-columns: 260px 1fr; } }
@media (max-width: 900px){ .usa-page .plp-layout{ grid-template-columns:1fr; gap:0; } }
/* Nothing to filter on: the sidebar is not rendered, so the grid takes the
   whole row instead of leaving a 272px gap where it would have been. */
.usa-page .plp-layout--nofilters{ grid-template-columns:1fr; }

/* ---------- filter overlay ---------- */
.usa-page .filter-overlay{
    position:fixed;
    inset:0;
    background:rgba(20,18,16,0.42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition: opacity .32s ease, visibility .32s ease;
    z-index: 99999;
}
.usa-page .filter-overlay.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}
@media (min-width:901px){
    .usa-page .filter-overlay{ display:none !important; }
}

/* body lock when drawer open */
body.plp-drawer-open{ overflow:hidden; }
@media (min-width:901px){ body.plp-drawer-open{ overflow:auto; } }

/* ---------- sidebar ---------- */
.usa-page .filter-sidebar {
    position:sticky;
    top: 170px;
    background:var(--paper-alt);
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    max-height: calc(100dvh - 190px);
}
.usa-page .filter-sidebar-scroll{
    overflow:auto;
    overscroll-behavior:contain;
    flex:1 1 auto;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}
.usa-page .filter-sidebar-scroll::-webkit-scrollbar{ width:6px; }
.usa-page .filter-sidebar-scroll::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }

/* drawer on mobile */
@media (max-width: 900px){
    .usa-page .filter-sidebar{
        position:fixed;
        inset:0 auto 0 0;
        width:min(88vw, 360px);
        max-width:360px;
        height:100dvh;
        max-height:100dvh;
        top:0;
        z-index: 100000;
        border-radius:0 12px 12px 0;
        border-left:none;
        transform: translateX(-104%);
        transition: transform .34s cubic-bezier(.32,.72,0,1), box-shadow .34s ease;
        box-shadow:none;
        will-change: transform;
    }
    .usa-page .filter-sidebar.is-open{
        transform: translateX(0);
        box-shadow: 0 20px 60px rgba(20,18,16,0.18), 0 8px 20px rgba(20,18,16,0.12);
    }
    .usa-page .filter-sidebar-scroll{
        max-height:none;
        height:auto;
    }
}

.usa-page .filter-sidebar-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px 20px;
    border-bottom:1px solid var(--line);
    background:var(--paper-alt);
    position:sticky;
    top:0;
    z-index:2;
    flex-shrink:0;
}
.usa-page .filter-head-actions{
    display:flex;
    align-items:center;
    gap:12px;
}
.usa-page .filter-sidebar-head h3 {
    font-family:var(--sans);
    font-size:14px;
    font-weight:600;
    color:var(--ink);
    display:flex;
    align-items:center;
    gap:8px;
}
.usa-page .filter-active-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:20px;
    height:20px;
    padding:0 6px;
    border-radius:999px;
    background:var(--ink);
    color:#fff;
    font-size:11px;
    font-weight:700;
    line-height:1;
}
.usa-page .clear-filters {
    font-size:14px; font-weight:500;
    color:var(--near-black);
    background:none; border:none;
    cursor:pointer; padding:0;
    white-space:nowrap;
}
.usa-page .clear-filters:hover{ text-decoration:underline; }

/* close btn — visible only on drawer */
.usa-page .filter-close-btn{
    display:none;
    width:36px; height:36px;
    border-radius:999px;
    border:1.5px solid var(--line);
    background:var(--paper);
    color:var(--near-black);
    cursor:pointer;
    align-items:center;
    justify-content:center;
    transition: all .2s ease;
    flex-shrink:0;
}
.usa-page .filter-close-btn svg{ width:12px; height:12px; display:block; }
.usa-page .filter-close-btn:hover{ border-color:var(--ink); background:var(--paper-alt); }
@media (max-width:900px){ .usa-page .filter-close-btn{ display:inline-flex; } }

/* footer inside drawer */
.usa-page .filter-drawer-footer{
    display:none;
    padding:16px 20px 18px;
    border-top:1px solid var(--line);
    background:var(--paper-alt);
    gap:10px;
    flex-shrink:0;
    position:sticky;
    bottom:0;
}
.usa-page .filter-drawer-footer .btn{
    width:100%;
    justify-content:center;
}
.usa-page .filter-drawer-footer .filter-clear-mobile{
    font-size:13px;
    text-align:center;
    width:100%;
    padding:6px 0 2px;
}
@media (max-width:900px){ .usa-page .filter-drawer-footer{ display:flex; flex-direction:column; } }
@media (min-width:901px){ .usa-page .filter-drawer-footer{ display:none !important; } }

/* pills */
.usa-page .active-pills {
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    padding:14px 20px;
    border-bottom:1px solid var(--line);
}
.usa-page .active-pills:empty{ display:none; }
.usa-page .pill {
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:var(--gold-tint);
    color:var(--near-black);
    font-size:0.72rem;
    font-weight:700;
    padding:5px 9px 5px 11px;
    border-radius:999px;
    max-width:100%;
}
.usa-page .pill button {
    background:none; border:none;
    color:var(--near-black);
    font-size:0.85rem; line-height:1;
    cursor:pointer; padding:0;
    font-weight:700; opacity:0.7;
    flex-shrink:0;
}
.usa-page .pill button:hover{ opacity:1; }

/* facet */
.usa-page .facet-block{ border-bottom:1px solid var(--line); }
.usa-page .facet-block:last-child{ border-bottom:none; }
.usa-page .facet-toggle{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 20px;
    background:none; border:none;
    cursor:pointer;
    font-family:var(--sans);
    font-size:1rem; font-weight:500;
    color:var(--near-black);
    text-align:left;
    gap:12px;
}
.usa-page .facet-toggle .chev{
    width:9px; height:9px;
    border-right:1.5px solid var(--ink-faint);
    border-bottom:1.5px solid var(--ink-faint);
    transform: rotate(45deg);
    transition: transform .22s ease;
    flex-shrink:0;
    margin-top:-2px;
}
.usa-page .facet-toggle.collapsed .chev{ transform: rotate(-45deg); }
.usa-page .facet-body{
    padding:2px 20px 18px;
    display:flex;
    flex-direction:column;
    gap:2px;
}
/* collapsed hidden via JS slideToggle, but keep CSS fallback */
.usa-page .facet-body.collapsed{ display:none; }

.usa-page .facet-option{
    display:flex;
    align-items:center;
    gap:10px;
    padding:7px 2px;
    cursor:pointer;
    user-select:none;
    border-radius:6px;
    transition: background .15s ease;
}
.usa-page .facet-option:hover{ background: rgba(227,217,191,0.18); }
.usa-page .facet-option input{ display:none; }
.usa-page .facet-option .box{
    width:16px; height:16px;
    border-radius:4px;
    border:1.5px solid var(--line);
    background:var(--paper);
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
    transition: all .15s ease;
}
.usa-page .facet-option .box svg{
    width:10px; height:10px;
    opacity:0; transform:scale(0.6);
    transition: all .15s ease;
    stroke:#fff;
}
.usa-page .facet-option input:checked + .box{ background:var(--ink); border-color:var(--ink); }
.usa-page .facet-option input:checked + .box svg{ opacity:1; transform:scale(1); }
.usa-page .facet-option:hover .box{ border-color:var(--crimson); }
.usa-page .facet-option .flabel{
    flex:1;
    font-size:1rem;
    color:var(--ink-soft);
    line-height:1.3;
}
.usa-page .facet-option input:checked ~ .flabel{ color:var(--ink); font-weight:600; }
.usa-page .facet-option .fcount{
    font-size:1rem;
    color:var(--ink-faint);
    font-family:var(--mono);
    flex-shrink:0;
}

/* ---------- main area ---------- */
.usa-page .filter-main{ min-width:0; }
.usa-page .filter-main-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    flex-wrap:wrap;
    gap:12px;
}
.usa-page .grid-heading{
    font-size:1.05rem;
    font-weight:600;
    margin:0 0 20px;
    color:var(--ink-faint);
    text-transform:uppercase;
    letter-spacing:0.06em;
    font-family:var(--sans);
}
@media (max-width: 640px){
    .usa-page .filter-main-top{ gap:10px; }
    .usa-page .grid-heading{ margin-bottom:14px; font-size:0.95rem; }
}
.usa-page .result-count{
    font-size:1rem;
    color:var(--ink-soft);
}
.usa-page .result-count b{ color:var(--near-black); font-weight:700; }
.usa-page .no-results{
    display:none;
    text-align:center;
    padding:70px 20px;
    color:var(--ink-faint);
    font-size:0.94rem;
    border:1px dashed var(--line);
    border-radius:8px;
    margin-top:18px;
}
.usa-page .no-results.show{ display:block; }

/* mobile filter button — hidden on desktop */
.usa-page .mobile-filter-btn{
    display:none;
    align-items:center;
    gap:8px;
    font-family:var(--sans);
    font-size:14px;
    font-weight:600;
    color:var(--near-black);
    background:var(--paper-alt);
    border:1.5px solid var(--line);
    padding:10px 16px;
    border-radius:999px;
    cursor:pointer;
    transition: all .2s ease;
    white-space:nowrap;
}
.usa-page .mobile-filter-btn:hover{ border-color:var(--ink); background:var(--paper); }
.usa-page .mobile-filter-btn svg{ flex-shrink:0; }
.usa-page .filter-count-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:22px;
    height:22px;
    padding:0 6px;
    border-radius:999px;
    background:var(--ink);
    color:#fff;
    font-size:11px;
    font-weight:700;
    line-height:1;
}
@media (max-width:900px){
    .usa-page .mobile-filter-btn{ display:inline-flex; }
    .usa-page .filter-main-top .result-count{ flex:1 1 auto; text-align:right; font-size:0.92rem; }
}
@media (max-width: 480px){
    .usa-page .filter-main-top{align-items: center;}
    .usa-page .filter-main-top .result-count{order: 4;text-align:left;flex:1 1 100%;}
    .usa-page .mobile-filter-btn{ order:1; }
    .usa-page .sort-select{ order:3; }
}

/* ---------- shop by material ---------- */
.usa-page .material-rows{ padding:50px 0 50px 0; }
@media (max-width:768px){ .usa-page .material-rows{ padding:36px 0; } }
@media (max-width:480px){ .usa-page .material-rows{ padding:28px 0; } }
.usa-page .material-row + .material-row{ margin-top:44px; }
@media (max-width:768px){ .usa-page .material-row + .material-row{ margin-top:32px; } }
.usa-page .row-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    margin-bottom:18px;
    gap:16px;
    flex-wrap:wrap;
}
.usa-page .row-head h3{
    font-size:1.3rem;
    font-weight:500;
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
@media (max-width:640px){ .usa-page .row-head h3{ font-size:1.15rem; } }
.usa-page .row-head h3 span.tag{
    font-family:var(--mono);
    font-size:0.62rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--near-black);
    background:var(--gold-tint);
    padding:6px 9px 4px 9px;
    border-radius:3px;
    white-space:nowrap;
}
.usa-page .row-head p{
    font-size:14px;
    color:var(--ink-soft);
    margin-top:4px;
    line-height:1.5;
}
.usa-page .row-view-all{
    font-size:14px;
    font-weight:700;
    color:var(--ink);
    white-space:nowrap;
}
.usa-page .row-view-all:hover{ color:var(--crimson); }

/* grid on desktop, horizontal scroll on tablet/mobile */
.usa-page .row-scroll{
    display:grid;
    gap:16px;
    padding-bottom:8px;
    grid-template-columns: repeat(3, 1fr);
}
@media (min-width:1100px){ .usa-page .row-scroll{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:1099px) and (min-width:901px){ .usa-page .row-scroll{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width:900px){
    .usa-page .row-scroll{
        display: grid;
        scroll-snap-type:x mandatory;
        -webkit-overflow-scrolling:touch;
        gap:14px;
        padding-bottom:12px;
        scroll-padding: 0 20px;
        grid-template-columns: repeat(2, 1fr);
    }
    .usa-page .row-scroll::-webkit-scrollbar{ height:6px; }
    .usa-page .row-scroll::-webkit-scrollbar-thumb{ background:var(--line); border-radius:3px; }
}
.usa-page .mini-card{
    flex:0 0 auto;
    scroll-snap-align:start;
    background:var(--paper-alt);
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden;
    transition: transform .25s ease, box-shadow .25s ease;
    min-width:0;
}
@media (min-width:901px){ .usa-page .mini-card{ width:auto; } }
@media (max-width:900px){ .usa-page .mini-card{/* width: 280px; */} }
@media (max-width:640px){ .usa-page .mini-card{/* width: 260px; */ } .usa-page .row-scroll { grid-template-columns: 1fr;} }
@media (max-width:480px){ .usa-page .mini-card{/* width: 82vw; *//* max-width:300px; */} }
.usa-page .mini-card:hover{ transform:translateY(-3px); box-shadow:0 16px 30px rgba(20,18,16,0.09); }
.usa-page .mini-card .thumb{
    position:relative;
    aspect-ratio:4/3;
    overflow:hidden;
    background:var(--paper);
}
.usa-page .mini-card .thumb .img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    background:var(--g);
    transition: transform .5s ease;
}
.usa-page .mini-card:hover .thumb .img{ transform:scale(1.07); }
.usa-page .mini-card .mbody{ padding:14px 16px 16px; }
.usa-page .mini-card h4{ font-family:var(--serif); font-weight:500; font-size:16px; line-height:1.25; }
.usa-page .mini-card p{
    font-size:1rem;
    color:var(--ink-soft);
    line-height:1.5;
    margin-top:5px;
    min-height:34px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
@media (max-width:480px){
    .usa-page .mini-card p{ min-height:0; -webkit-line-clamp:2; }
}
.usa-page .mini-card .shop{
    font-size:1rem;
    font-weight:700;
    color:var(--ink);
    margin-top:10px;
    display:inline-block;
}

/* legacy gradients keep for fallback */
.usa-page .m1{ --g: linear-gradient(155deg,#d8b48f,#7a4d29 65%); }
.usa-page .m2{ --g: linear-gradient(155deg,#c9a668,#6d4f21 70%); }
.usa-page .m3{ --g: linear-gradient(155deg,#eae4d6,#c9bfa4 70%); }
.usa-page .m4{ --g: linear-gradient(155deg,#c9ccc4,#6b7069 65%); }
.usa-page .m5{ --g: linear-gradient(155deg,#c3ccd3,#5c6b78 70%); }
.usa-page .m6{ --g: linear-gradient(155deg,#b8935a,#5c4322 70%); }
.usa-page .m7{ --g: linear-gradient(155deg,#9a3346,#4a1420 70%); }
.usa-page .m8{ --g: linear-gradient(155deg,#8fa0ab,#33424f 70%); }

/* ---------- product / collection grid ---------- */
.usa-page .cat-product-grid{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:26px;
}
@media (max-width: 1100px){ .usa-page .cat-product-grid{ gap:20px; } }
@media (max-width: 980px){ .usa-page .cat-product-grid{ grid-template-columns:repeat(2,1fr); gap:18px; } }
@media (max-width: 640px){ .usa-page .cat-product-grid{ gap:14px; } }
@media (max-width: 520px){ .usa-page .cat-product-grid{ grid-template-columns:1fr; gap:16px; } }

.usa-page .cp-card{
    background:var(--paper-alt);
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden;
    transition: transform .25s ease, box-shadow .25s ease;
    display:flex;
    flex-direction:column;
    min-width:0;
}
.usa-page .cp-card:hover{ transform:translateY(-4px); box-shadow:0 20px 40px rgba(20,18,16,0.10); }
.usa-page .cp-card .thumb{
    position:relative;
    aspect-ratio:4/3;
    background:var(--g);
    overflow:hidden;
    flex-shrink:0;
}
.usa-page .cp-card .thumb .img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    background:var(--g);
    transition: transform .6s ease;
}
.usa-page .cp-card:hover .thumb .img{ transform:scale(1.06); }
.usa-page .cp-card .thumb .badge{
    position:absolute;
    top:12px; left:12px;
    background:var(--ink);
    color:#fff;
    font-family:var(--mono);
    font-size:0.62rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    padding:5px 10px;
    border-radius:3px;
    z-index:2;
    line-height:1;
}
.usa-page .cp-card .pbody{
    padding:20px 20px 22px;
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
}
@media (max-width:640px){ .usa-page .cp-card .pbody{ padding:16px 16px 18px; } }
.usa-page .cp-card h3{ font-size:16px; font-weight:500; line-height:1.3; }
@media (max-width:640px){ .usa-page .cp-card h3{ font-size:15px; } }
.usa-page .cp-card p{
    font-size:1rem;
    color:var(--ink-soft);
    line-height:1.55;
    margin-top:8px;
    /* min-height:42px; */
    letter-spacing:0.5px;
    /* flex:1 1 auto; */
    margin-bottom: 10px;
}
@media (max-width:640px){ .usa-page .cp-card p{ min-height:0; font-size:0.95rem; } }
.usa-page .cp-card .row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top: auto;
}
.usa-page .cp-card .shop{
    font-size:1rem;
    font-weight:700;
    color:var(--ink);
    display:inline-flex;
    align-items:center;
    gap:5px;
}
.usa-page .cp-card .thumb img{
    position:absolute; inset:0;
    width:100%; height:100%;
    object-fit:cover;
    transition: transform .5s ease;
}
.usa-page .cp-card:hover .thumb img{ transform:scale(1.06); }

/* ---------- new arrivals ---------- */
.usa-page .new-arrivals{
    background:var(--paper-alt);
    padding:50px 0;
}
@media (max-width:768px){ .usa-page .new-arrivals{ padding:36px 0; } }
@media (max-width:480px){ .usa-page .new-arrivals{ padding:28px 0; } }
.usa-page .new-arrivals .section-label{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:30px;
    flex-wrap:wrap;
    gap:14px;
}
@media (max-width:640px){ .usa-page .new-arrivals .section-label{ margin-bottom:22px; } }
.usa-page .new-arrivals .section-label h3{
    font-size:1.6rem;
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}
@media (max-width:640px){ .usa-page .new-arrivals .section-label h3{ font-size:1.25rem; } }
@media (max-width:480px){ .usa-page .new-arrivals .section-label h3{ font-size:1.15rem; } }
.usa-page .new-arrivals .section-label h3 span{
    font-family:var(--mono);
    font-size:0.62rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:#fff;
    background:var(--ink);
    padding:5px 10px;
    border-radius:3px;
    white-space:nowrap;
}
.usa-page .new-arrivals .section-label p{
    font-size:0.88rem;
    color:var(--ink-soft);
    margin-top:6px;
    line-height:1.5;
}
.usa-page .c1{ --g: linear-gradient(155deg,#c9ccc4,#6b7069 65%); }
.usa-page .c2{ --g: linear-gradient(155deg,#c3ccd3,#5c6b78 70%); }
.usa-page .c3{ --g: linear-gradient(155deg,#eae4d6,#c9bfa4 70%); }
.usa-page .c4{ --g: linear-gradient(155deg,#c9a668,#6d4f21 70%); }
.usa-page .c5{ --g: linear-gradient(155deg,#d8b48f,#7a4d29 65%); }
.usa-page .c6{ --g: linear-gradient(155deg,#9a3346,#4a1420 70%); }
.usa-page .c7{ --g: linear-gradient(155deg,#b8935a,#5c4322 70%); }
.usa-page .c8{ --g: linear-gradient(155deg,#8fa0ab,#33424f 70%); }
.usa-page .c9{ --g: linear-gradient(155deg,#e7d3b0,#b78a4e 65%); }
.usa-page .section-intro{ padding-bottom:0; }
.usa-page .section-intro h3{ font-size:1.5rem; }
@media (max-width:640px){ .usa-page .section-intro h3{ font-size:1.25rem; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
    .usa-page .filter-sidebar,
    .usa-page .filter-overlay,
    .usa-page .cp-card,
    .usa-page .mini-card{ transition:none !important; }
}

/* ---------- tiny phones ---------- */
@media (max-width: 360px){
    .usa-page .cat-product-grid{ gap:12px; }
    .usa-page .cp-card .pbody{ padding:14px; }
    .usa-page .row-scroll{ gap:12px; }
}
.usa-page .cat-hero .cat_img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right;
}

.usa-page .cat-hero .wrap {
    position: relative;
    z-index: 2;
}

@media (max-width: 991px){
    .usa-page .cat-hero .cat_img {
        object-position: left;
    }

}