/* Card alignment on the shop grid, and the shop's opening band.
   ==========================================================================
   The companion to odoo/addons/hbe_product/static/src/css/shop-card.css,
   which carries two extra rules this copy does not need.

   There, the price-and-button row on each card was losing its `margin-top:
   auto` — the rule that pins the row to the bottom so the prices line up
   across a row of cards. The row's class is `row`, which is also Bootstrap's
   grid class, and Bootstrap ships in Odoo's frontend bundle on every page.
   This site has no Bootstrap on it, the site's own rule wins, and re-stating
   it here with !important would only be noise. The clamp below is the half of
   that fix that belongs to the design rather than to the collision.

   Load order matters: after the page's own stylesheet, which is where
   .sw-card is defined. */

/* With the row pinned, the descriptions are what differ, and a card whose
   description runs to four lines pushes its neighbours' text apart. Two
   lines, then an ellipsis: enough to say what the thing is, and the same
   height on every card so the block reads as a grid rather than a ragged
   set of paragraphs. The full description is on the product page. */
.sw-card > p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Two lines at this size and leading, so a one-line description holds the
     same space as a two-line one and the cards stay even. */
  min-height: calc(2 * 1.6 * 14.8px);
}

/* The shop's opening band.
   ==========================================================================
   Heading only. The paragraph that sat here was removed at the client's
   request, and with it the assurance column that had been added to balance
   the empty right-hand third — with no copy to balance, a lone column of
   claims floating beside a heading reads as an afterthought.

   Both are in the history of the Odoo stylesheet if they are wanted back. */

.shop-intro h2 { margin: 0; }

/* ---- four to a row --------------------------------------------------------
   The grid packs as many columns as fit at a minimum width; 320px gave three
   on a desktop. 250px gives four on a desktop - from about 1180px wide - then
   three, two and one as the screen narrows, by the same rule as before.
   Scoped to the shop's own grid: other listings on the site use .sw-list too
   and keep their three. */
.sw-list[data-shop-grid] {
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
}

/* ---- transparent image backgrounds ----------------------------------------
   A product photographed on plain white loses its bordered tile and sits
   straight on the card. The white of the photo is the white of the card, so
   the product reads as cut out without the photo being edited. Which photos
   qualify is decided per image by scripts/shop/catalogue.py (imageOnWhite);
   studio colours and scenes keep the tile, which is the client's rule: keep
   the background wherever going transparent would look worse. */
.sw-card .shot.on-white {
  background: transparent;
  border-color: transparent;
}

/* In the dark theme the card is dark and the photo is still white, so the
   tile comes back - a white rectangle with no frame would look like an error. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sw-card .shot.on-white {
    background: #fff;
    border-color: var(--line-soft);
  }
}

:root[data-theme="dark"] .sw-card .shot.on-white {
  background: #fff;
  border-color: var(--line-soft);
}