/* Basket line photos (owner option B, 2026-10-13), drawn by static/js/cart-line-photo.js.
   Phone / portrait: the photo replaces the bag tile in the first column (56px square, cropped to fill).
   Desktop (menu basket and checkout summary): a 44px square photo column in front of each line; lines without a
   photo get a neutral tile so the text stays aligned. Source photos are 800x800, so they stay sharp on
   high-density screens; object-fit crops them to the square without distortion. Presentation only. */
.cart-line-photo { display: none; }
.cart-line-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }

body:is([data-layout="mobile"], [data-layout="portrait"]) #cart > li.cart-item[data-cart-photo="ready"] {
  grid-template-columns: 56px minmax(0, 1fr) auto;
}
body:is([data-layout="mobile"], [data-layout="portrait"]) #cart > li.cart-item[data-cart-photo="ready"]::before,
body:is([data-layout="mobile"], [data-layout="portrait"]) #cart > li.cart-item[data-cart-photo="ready"]::after { content: none; display: none; }
body:is([data-layout="mobile"], [data-layout="portrait"]) #cart > li.cart-item[data-cart-photo="ready"] > .cart-line-photo {
  display: block; grid-column: 1; grid-row: 1 / 4; align-self: start; width: 56px; height: 56px;
  border-radius: 12px; overflow: hidden; background: rgba(120, 128, 112, .16);
}

@media (min-width: 1367px) {
  body[data-layout="desktop"] #cart > li.cart-item[data-cart-photo] {
    display: grid !important; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 0; align-items: start;
  }
  body[data-layout="desktop"] #cart > li.cart-item[data-cart-photo] > :not(.cart-line-photo) { grid-column: 2; min-width: 0; }
  body[data-layout="desktop"] #cart > li.cart-item[data-cart-photo] > .cart-line-photo {
    display: grid; place-items: center; grid-column: 1; grid-row: 1 / span 8; width: 44px; height: 44px;
    border-radius: 10px; overflow: hidden; background: var(--site-raised, #f0f1eb); color: var(--site-muted, #62695f);
  }
  body[data-layout="desktop"] #cart > li.cart-item[data-cart-photo] > .cart-line-photo.is-empty svg { width: 22px; height: 22px; }
}