/* Catalogue only: denser product cards make it easier to compare parts
   without changing the larger promotional cards used on the homepage. */
body.storefront .catalog-grid{
    grid-template-columns:repeat(5, minmax(0, 1fr));
    gap:12px;
}

body.storefront .catalog-grid .product-card{
    min-width:0;
    border-radius:16px;
}

body.storefront .catalog-grid .product-photo{
    height:112px;
    min-height:112px;
    background:
        radial-gradient(circle at 50% 34%, rgba(255,123,0,.12), transparent 50%),
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.008)),
        #0b0c0e;
}

body.storefront .catalog-grid .product-photo img{
    padding:7px;
}

body.storefront .catalog-grid .product-body{
    gap:8px;
    padding:10px;
}

body.storefront .catalog-grid .product-meta{
    flex-wrap:nowrap;
    gap:5px;
    overflow:hidden;
}

body.storefront .catalog-grid .pill{
    min-width:0;
    min-height:22px;
    padding:4px 7px;
    overflow:hidden;
    font-size:10px;
    line-height:1.1;
    text-overflow:ellipsis;
    white-space:nowrap;
}

body.storefront .catalog-grid .product-title{
    display:-webkit-box;
    min-height:2.7em;
    overflow:hidden;
    font-size:13px;
    line-height:1.34;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}

body.storefront .catalog-grid .product-desc-marketplace{
    min-height:28px;
    height:28px;
}

body.storefront .catalog-grid .product-seller-line{
    font-size:10px;
}

body.storefront .catalog-grid .product-compatibility-line{
    font-size:9.5px;
}

body.storefront .catalog-grid .price-row{
    gap:6px;
    min-height:28px;
}

body.storefront .catalog-grid .price{
    font-size:16px;
    line-height:1;
}

body.storefront .catalog-grid .stock-badge{
    min-width:0;
    margin-left:auto;
    padding:4px 6px;
    overflow:hidden;
    font-size:9.5px;
    text-overflow:ellipsis;
}

body.storefront .catalog-grid .product-actions{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:6px;
}

body.storefront .catalog-grid .product-actions :is(form, a){
    min-width:0;
}

body.storefront .catalog-grid .product-actions :is(.btn, .btn-secondary, .btn-outline){
    min-height:36px;
    padding:7px 8px;
    overflow:hidden;
    font-size:9.5px;
    line-height:1.1;
    text-align:center;
    text-overflow:ellipsis;
    white-space:nowrap;
}

body.storefront .catalog-grid .product-actions > form:last-child{
    grid-column:1 / -1;
}

body.storefront .catalog-grid .catalog-cart-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:5px;
}

body.storefront .catalog-grid .catalog-cart-button__icon{
    width:14px;
    height:14px;
    flex:0 0 auto;
    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* Catalogue pagination is a clear navigation station rather than a pair of
   loose text links at the bottom of the product feed. */
body.storefront .catalog-pagination{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    gap:18px;
    margin-top:8px;
    padding:14px 16px;
    border:1px solid rgba(255,142,66,.20);
    border-radius:18px;
    background:
        radial-gradient(circle at 88% 50%, rgba(255,107,0,.10), transparent 34%),
        linear-gradient(135deg, rgba(255,255,255,.045), rgba(255,255,255,.012));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 18px 34px rgba(0,0,0,.18);
}

body.storefront .catalog-pagination__status{
    display:grid;
    gap:3px;
}

body.storefront .catalog-pagination__status span{
    color:#ff9d5c;
    font-size:9px;
    font-weight:850;
    letter-spacing:.14em;
    text-transform:uppercase;
}

body.storefront .catalog-pagination__status strong{
    color:#fff;
    font-size:13px;
    letter-spacing:-.01em;
}

body.storefront .catalog-pagination__links,
body.storefront .catalog-pagination__pages{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
}

body.storefront .catalog-pagination__ellipsis{
    width:18px;
    color:rgba(255,255,255,.48);
    font-size:15px;
    font-weight:850;
    letter-spacing:.08em;
    text-align:center;
}

body.storefront .catalog-pagination__control,
body.storefront .catalog-pagination__page{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    border:1px solid rgba(255,255,255,.11);
    border-radius:11px;
    background:rgba(0,0,0,.18);
    color:rgba(255,255,255,.84);
    font-size:11px;
    font-weight:800;
    text-decoration:none;
    transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
}

body.storefront .catalog-pagination__control{
    gap:7px;
    min-width:88px;
    padding:8px 12px;
}

body.storefront .catalog-pagination__control > span:first-child[aria-hidden],
body.storefront .catalog-pagination__control > span:last-child[aria-hidden]{
    color:#ffad71;
    font-size:16px;
    line-height:1;
}

body.storefront .catalog-pagination__page{
    width:38px;
    padding:0;
}

body.storefront .catalog-pagination__control:hover,
body.storefront .catalog-pagination__page:hover{
    transform:translateY(-1px);
    border-color:rgba(255,126,28,.56);
    background:rgba(255,106,0,.12);
    color:#fff;
    box-shadow:0 10px 22px rgba(0,0,0,.20);
}

body.storefront .catalog-pagination__page.is-current{
    border-color:rgba(255,136,45,.78);
    background:linear-gradient(180deg, #f27616, #bd4500);
    box-shadow:0 8px 18px rgba(255,91,0,.22), inset 0 1px 0 rgba(255,255,255,.24);
    color:#fff;
}

body.storefront .catalog-pagination__control.is-next{
    border-color:rgba(255,131,35,.52);
    background:linear-gradient(180deg, rgba(255,123,17,.24), rgba(186,62,0,.15));
    color:#fff;
}

body.storefront .catalog-pagination__control.is-disabled{
    border-color:rgba(255,255,255,.055);
    background:rgba(255,255,255,.015);
    color:rgba(255,255,255,.26);
    cursor:not-allowed;
}

body.storefront .catalog-pagination__control.is-disabled [aria-hidden]{
    color:rgba(255,255,255,.25);
}

@media (max-width:1180px){
    body.storefront .catalog-grid{
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
}

/* The product comparison screen earns a broader canvas on a desktop. Five
   usable cards are better than five squeezed ones in a narrow homepage shell. */
@media (min-width:1301px){
    body.storefront.storefront-catalog .store-wrap{
        width:min(1520px, calc(100% - 48px));
        max-width:none;
    }
}

@media (max-width:1300px){
    body.storefront .catalog-grid{
        grid-template-columns:repeat(4, minmax(0, 1fr));
    }
}

@media (max-width:860px){
    body.storefront .catalog-grid{
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:10px;
    }

    body.storefront .catalog-grid .product-photo{
        height:104px;
        min-height:104px;
    }
}

@media (max-width:620px){
    body.storefront .catalog-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    body.storefront .catalog-grid .product-body{
        gap:8px;
        padding:9px;
    }

    /* Cart and details form a balanced row; the direct checkout below is the
       single, obvious primary action. */
    body.storefront .catalog-grid .product-actions > form:nth-of-type(1){
        justify-self:stretch;
        width:auto;
    }

    body.storefront .catalog-grid .product-actions :is(.btn, .btn-secondary, .btn-outline){
        font-size:10px;
    }

    body.storefront .catalog-pagination{
        grid-template-columns:1fr;
        justify-items:center;
        gap:12px;
        padding:14px 12px;
        text-align:center;
    }

    body.storefront .catalog-pagination__links{
        width:100%;
        justify-content:space-between;
    }

    body.storefront .catalog-pagination__control{
        min-width:42px;
        padding:8px 10px;
    }

    body.storefront .catalog-pagination__control > span:not([aria-hidden]){
        display:none;
    }
}

@media (max-width:390px){
    body.storefront .catalog-grid .product-photo{
        height:92px;
        min-height:92px;
    }

    body.storefront .catalog-grid .product-actions :is(.btn, .btn-secondary, .btn-outline){
        padding-inline:5px;
        font-size:9.5px;
    }
}