/*
 * CSi theme — product lists (shop, categories, brands, tags, product search) in the live site's look
 * (owner, stage 4, 3 Oct): the banner strip with the picture and the name, and live's shop card —
 * white, a faint green shadow, the photo edge to edge, the name, the price and a small ADD TO CART
 * on the left, with the bulk-discount badges where the discount is real. Inlined on those pages in
 * place of critical-cards.css (homepage rows keep their own card).
 */

.csi-main--list>.csi-wrap{padding-top:8px}
.csi-banner{position:relative;display:grid;place-items:center;min-height:56px;padding:0 16px;overflow:hidden;background:#f2efe8;text-align:center}
.csi-banner__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.csi-banner__title{position:relative;margin:0;color:#16a34a;font:600 clamp(28px,8vw,40px)/1.4 var(--csi-serif);overflow-wrap:anywhere}

ul.products{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px}
@media (min-width:768px){ul.products{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 20px}}
.csi-card{position:relative;display:flex;flex-direction:column;min-width:0;padding-bottom:18px;background:#fff;box-shadow:0 1px 3px -2px rgba(34,197,84,.12);text-align:left}
.csi-card__media{position:relative;display:block;aspect-ratio:1;background:#fff}
.csi-card__media img{display:block;width:100%;height:100%;object-fit:contain}
.csi-card__body{display:flex;flex:1;flex-direction:column;align-items:flex-start;padding:12px 12px 0}
.csi-card__brand,.csi-card .csi-stars{display:none}
.csi-card .csi-badges{position:absolute;top:8px;left:8px;z-index:1}
.csi-card .is-new{display:none}
.csi-card__deals{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.csi-card__deals span{padding:2px 6px;border-radius:10px;background:#009245;color:#fff;font:400 11px/1.6 var(--csi-body)}
.csi-card__name{margin:0 0 6px;font:600 12.5px/1.15 var(--csi-body)}
.csi-card__name a{color:#1a2e1f;text-decoration:none}
.csi-card .price{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;margin:0 0 9px;color:#16a34a;font:600 18px/1.3 var(--csi-body);font-variant-numeric:lining-nums}
.csi-card .price del{order:1;color:var(--csi-muted);font-size:.7em;font-weight:400}
.csi-card .price ins{text-decoration:none}
.csi-card .button{min-height:0;margin:6px 0 0;padding:10px 12px;border:1px solid rgba(33,196,93,.1);border-radius:8px;background:rgba(33,196,93,.1);color:#16a34a;font:500 11px/1 var(--csi-body);text-transform:uppercase}
.csi-card .added_to_cart{font-size:12px}
ul.products .csi-card .button:hover{background:rgba(33,196,93,.2);color:#15803d}
.csi-card .locsoldout{position:absolute!important;top:8px;left:8px;z-index:2;display:inline-block!important;width:auto;padding:3px 8px;border-radius:7px;background:#b91c1c;color:#fff;font:700 12px/1.4 var(--csi-body)}
@media (min-width:768px){
	.csi-card{padding-bottom:19px}
	.csi-card__body{padding:13px 19px 0}
	.csi-card__name{margin-bottom:7px;font-size:14px}
	.csi-card .price{margin-bottom:11px;font-size:22px}
	.csi-card .button{padding:10px 16px;font-size:12px}
}