/*===========================================================================
  Product listing arrangements
  ---------------------------------------------------------------------------
  Applies to the three pages that share one grid: shop, search and offers.
  The column counts themselves are Bootstrap row-cols-* classes chosen in
  includes/productlist.php; this file only carries what those classes cannot
  express on their own.

  Everything here is scoped to .sf-pl--<style>, so the Standard grid -- which
  is what every shop renders today -- is untouched by design: it has no rules.
===========================================================================*/

/* --- LARGE CARDS -----------------------------------------------------------
   Fewer per row means each picture is shown much larger, so the fixed 250px
   height the template puts on every thumbnail stops being the right number --
   it crops a tall product into a letterbox. Let the picture keep its shape. */
.sf-pl--roomy .tp-product-thumb-2 img {
  height: auto !important;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: #fff;
}

/* --- DENSE GRID ------------------------------------------------------------
   Six across on a wide screen and three on a phone leaves each card narrow,
   so the picture and the wording both come down to match. Without this the
   product name wraps to four lines in a column 100px wide. */
.sf-pl--compact .tp-product-thumb-2 img { height: 170px !important; }
.sf-pl--compact .tp-product-item-2 { margin-bottom: 22px !important; }
.sf-pl--compact .tp-product-title-2,
.sf-pl--compact .tp-product-title-2 a { font-size: 13px; line-height: 1.35; }
.sf-pl--compact .tp-product-price-wrapper-2 { font-size: 13px; }

@media (max-width: 575px) {
  .sf-pl--compact .tp-product-thumb-2 img { height: 120px !important; }
  .sf-pl--compact .tp-product-title-2,
  .sf-pl--compact .tp-product-title-2 a { font-size: 12px; }
}

/* --- LIST ------------------------------------------------------------------
   One product per row with the picture beside the details rather than above
   them. The card markup is unchanged -- the thumbnail block and the content
   block are simply laid out as a row instead of a column, which is the whole
   reason this is a CSS arrangement and not a fourth copy of the template. */
.sf-pl--list .tp-product-item-2 {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px !important;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.sf-pl--list .tp-product-thumb-2 {
  flex: 0 0 200px;
  max-width: 200px;
}

.sf-pl--list .tp-product-thumb-2 img {
  height: 160px !important;
  object-fit: contain;
  background: #fff;
}

/* Everything that is not the picture shares the rest of the row. */
.sf-pl--list .tp-product-content-2 {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

/* The hover-reveal action column is built for a card; in a row it belongs at
   the end rather than floating over the picture. */
.sf-pl--list .tp-product-action-2 {
  position: static;
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (max-width: 575px) {
  .sf-pl--list .tp-product-thumb-2 { flex-basis: 110px; max-width: 110px; }
  .sf-pl--list .tp-product-thumb-2 img { height: 110px !important; }
  .sf-pl--list .tp-product-item-2 { gap: 12px; }
}

/* --- BOXED CARDS -----------------------------------------------------------
   The whole card in one box, the way the themed home page draws it.

   The listing templates put an inline `border:1px solid grey` on the thumbnail
   alone, so the box stopped at the picture and the brand, name and price sat
   loose underneath it. That inline style can only be beaten with !important --
   the alternative was editing the same line in three page templates, and this
   way the other arrangements keep the border exactly where it has always been.

   Everything else here is shape: one border around the card, a tinted well for
   the picture, and the wording padded inside the box rather than under it. */
.sf-pl--card .tp-product-item-2 {
  display: flex;
  flex-direction: column;
  height: calc(100% - 30px);
  margin-bottom: 30px !important;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .09);
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}

.sf-pl--card .tp-product-item-2:hover {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
  transform: translateY(-3px);
}

/* The picture's own border becomes the card's, so it goes. */
.sf-pl--card .tp-product-thumb-2 {
  border: 0 !important;
  border-radius: 0 !important;
  background: rgba(0, 0, 0, .025);
}

.sf-pl--card .tp-product-thumb-2 img {
  height: 230px !important;
  object-fit: contain;
  padding: 14px;
  mix-blend-mode: multiply;      /* white product cut-outs sit on the tint */
}

/* Inside the box now, not under it. */
.sf-pl--card .tp-product-content-2 {
  padding: 14px 15px 16px !important;
  text-align: left;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sf-pl--card .tp-product-tag-2 {
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, .55);
}

.sf-pl--card .tp-product-title-2 { margin: 0; }
.sf-pl--card .tp-product-title-2 a { font-size: 15px; font-weight: 600; line-height: 1.4; }

/* Price row last, so cards of different name lengths still line their prices
   up with each other down the grid. */
.sf-pl--card .tp-product-price-wrapper-2 {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.sf-pl--card .tp-product-price-2.new-price { font-size: 17px; font-weight: 700; }
.sf-pl--card .tp-product-price-2.old-price { font-size: 13px; opacity: .55; order: 2; }
.sf-pl--card .tp-product-off { order: 3; }

@media (max-width: 575px) {
  .sf-pl--card .tp-product-thumb-2 img { height: 150px !important; padding: 10px; }
  .sf-pl--card .tp-product-title-2 a { font-size: 13.5px; }
  .sf-pl--card .tp-product-price-2.new-price { font-size: 15px; }
}

/* The saving, shown wherever a listing page emits it. Green rather than the
   brand colour: it is the one number on the card that is not a price. */
.tp-product-off {
  font-size: 12px;
  font-weight: 700;
  color: #16a34a;
  white-space: nowrap;
}