/* ==========================================================================
   Sood Studio — USA design: product listing (/category/{seo}, /professional/products)
   Loads on top of usa.css + category.css and only adds what a product card needs
   beyond a collection card: price, add-to-cart form, pagination, empty state.
   Colors and tokens unchanged.
   ========================================================================== */

/* hero size-guide link */
.usa-page .cat-hero-link{
    display:inline-block;
    margin-top:14px;
    font-size:0.86rem;
    font-weight:700;
    color:var(--crimson);
    border-bottom:1px solid transparent;
}
.usa-page .cat-hero-link:hover{ border-bottom-color:var(--crimson); }

/* legacy flash messages sitting inside the USA shell */
.usa-page .plp-alerts{ padding-top:22px; }
.usa-page .plp-alerts .alert{ text-align:left; margin-bottom:0; }

/* listings with nothing to filter get the full width back */
.usa-page .plp-layout--nofilters{ grid-template-columns:1fr; }

/* ---------- card: image link ---------- */
.usa-page .cp-card > a.thumb{ display:block; }

/* ---------- card: price ---------- */
.usa-page .cp-card .cp-price{
    display:flex;
    align-items:baseline;
    gap:2px;
    margin-top:12px;
    font-size:1.05rem;
    font-weight:700;
    color:var(--near-black);
    letter-spacing:0.2px;
}
.usa-page .cp-card .cp-price-symbol{ display:inline-flex; align-items:center; }
.usa-page .cp-card .cp-price-symbol i,
.usa-page .cp-card .cp-price-symbol .priceInner{ font-style:normal; }
.usa-page .cp-card .cp-price-symbol img,
.usa-page .cp-card .cp-price-symbol svg{ width:11px; height:auto; display:inline-block; }

.usa-page .cp-card h3 a{ color:inherit; }
.usa-page .cp-card h3 a:hover{ color:var(--crimson); }
.usa-page .cp-card .shop:hover{ color:var(--crimson); }

/* ---------- card: add to cart ---------- */
.usa-page .cp-cart-form{
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--line);
    display:flex;
    flex-direction:column;
    gap:8px;
}
.usa-page .cp-qty{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0;
    font-size:0.82rem;
    font-weight:600;
    color:var(--ink-soft);
}
.usa-page .cp-qty input,
.usa-page .cp-select,
.usa-page .cp-textarea{
    width:100%;
    font-family:var(--sans);
    border:1.5px solid var(--line);
    border-radius:8px;
    background:var(--paper-alt);
    color:var(--near-black);
    font-size:0.85rem;
    line-height:1.4;
    padding:10px 12px;
    min-height:40px;
    transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease;
}
.usa-page .cp-qty input::placeholder,
.usa-page .cp-textarea::placeholder{ color:var(--ink-faint); }
.usa-page .cp-qty input:hover,
.usa-page .cp-select:hover,
.usa-page .cp-textarea:hover{ border-color:var(--ink-faint); }
.usa-page .cp-qty input{ width:72px; min-height:36px; padding:7px 10px; text-align:center; }

/* Custom chevron - the native select arrow does not follow the palette. */
.usa-page .cp-select{
    -webkit-appearance:none; appearance:none;
    padding-right:34px;
    cursor:pointer;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238C8677' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:11px 8px;
}
.usa-page .cp-select::-ms-expand{ display:none; }

/* Fixed height: the cards sit in a grid, so a drag handle would let one card
   push its row out of shape. No resize - it scrolls once the text runs past
   the visible lines. */
.usa-page .cp-textarea{
    resize:none;
    height:72px;
    min-height:72px;
    overflow-y:auto;
}

.usa-page .cp-qty input:focus,
.usa-page .cp-select:focus,
.usa-page .cp-textarea:focus{
    border-color:var(--crimson);
    background:var(--paper);
    outline:none;
    box-shadow:0 0 0 3px rgba(247,15,5,.12);
}
.usa-page .cp-cart-btn{ width:100%; margin-top:2px; }

/* ---------- empty states ---------- */
.usa-page .plp-empty{
    padding:40px 0;
    font-size:1rem;
    color:var(--ink-soft);
}

/* ---------- pagination ---------- */
.usa-page .plp-pagination{ margin-top:38px; }
.usa-page .plp-pagination .pagination{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    justify-content:center;
    align-items:center;
    padding:0;
    margin:0;
    list-style:none;
    border-radius:0;
}
.usa-page .plp-pagination .page-item{ margin:0; }
.usa-page .plp-pagination .page-link,
.usa-page .plp-pagination .pagination li > a,
.usa-page .plp-pagination .pagination li > span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:38px;
    height:38px;
    padding:0 10px;
    border:1px solid var(--line);
    border-radius:4px;
    background:var(--paper);
    color:var(--ink-soft);
    font-size:0.85rem;
    font-weight:600;
    line-height:1;
    box-shadow:none;
}
.usa-page .plp-pagination .page-link:hover{ border-color:var(--ink); color:var(--near-black); background:var(--paper-alt); }
.usa-page .plp-pagination .page-item.active .page-link,
.usa-page .plp-pagination .pagination li.active > span{
    background:var(--ink);
    border-color:var(--ink);
    color:#fff;
}
.usa-page .plp-pagination .page-item.disabled .page-link,
.usa-page .plp-pagination .pagination li.disabled > span{ opacity:0.45; }
@media (max-width:480px){
    .usa-page .plp-pagination{ margin-top:26px; }
    .usa-page .plp-pagination .page-link,
    .usa-page .plp-pagination .pagination li > a,
    .usa-page .plp-pagination .pagination li > span{ min-width:34px; height:34px; font-size:0.8rem; }
}