/*
 * CSi theme — product cards (WooCommerce loop), drawn like the live site's cards: a bordered white
 * card, the photo on a tinted panel, the name, the price (the old price struck through above the sale
 * price) and an ADD TO CART button. A section recolours them through the --card-* variables
 * (sections.css). Inlined where cards show before scrolling, loaded without blocking elsewhere.
 */
ul.products{--card-ratio:2/1;--card-border:#eadcbe;--card-img:#fdf7ee;--card-title:#13241a;--card-price:#1a3d2b;--card-sale:#b91c1c;--card-was:#7c9a82;--card-btn-bg:#ecfdf3;--card-btn:#15803d;--card-btn-line:#16a34a;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (max-width:767px){.csi-b-grid ul.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}
@media (min-width:768px){ul.products,.csi-b-grid ul.products{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}}
@media (min-width:1025px){ul.products,.csi-b-grid ul.products{gap:30px}}
.csi-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:5px;background:#fff;border:2px solid var(--card-border);border-radius:12px;box-shadow:0 2px 6px rgba(60,40,0,.08)}
.csi-card__media{position:relative;display:grid;place-items:center;aspect-ratio:var(--card-ratio);padding:10px;border-radius:10px;background:var(--card-img)}
.csi-card__media img{width:auto;max-height:100%;object-fit:contain}
.csi-card__body{display:flex;flex:1;flex-direction:column;gap:6px;padding:10px 4px 12px}
.csi-card__brand,.csi-card .csi-stars,.csi-card .csi-badges{display:none}
.csi-card__name{font:500 14px/1.6 var(--csi-body)}
.csi-card__name a{display:block;color:var(--card-title);text-decoration:none}
:is(ul.products,.csi-b) .csi-card .price{display:flex;flex-direction:column;align-items:center;margin-top:auto;padding-top:6px;color:var(--card-price);font:600 19px/1.25 var(--csi-body);font-variant-numeric:lining-nums}
:is(ul.products,.csi-b) .csi-card .price del{order:0;color:var(--card-was);font-size:18px;font-weight:600;opacity:1}
:is(ul.products,.csi-b) .csi-card .price ins{order:1;color:var(--card-sale);text-decoration:none}
:is(ul.products,.csi-b) .csi-card .button{display:inline-block;align-self:center;min-height:0;margin-top:8px;padding:8px 16px;border:1px solid var(--card-btn-line);border-radius:5px;background:var(--card-btn-bg);color:var(--card-btn);font:500 14px/1.2 var(--csi-body);text-transform:uppercase}
.csi-card .added_to_cart{align-self:center;font-size:13px}
/* The multi-store plugin's "Out of stock" label (a product the shopper's store can't sell, where a
   list still shows one): a small badge on the photo, not a red bar pushing the card down. */
.csi-card .locsoldout{position:absolute!important;top:12px;left:12px;right:auto;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);text-align:left}
@media (min-width:1025px){.csi-card__name{font-size:15.5px}ul.products .csi-card .price{font-size:21px}ul.products .csi-card .price del{font-size:20px}ul.products .csi-card .button{font-size:15px}}