/* ---------------------------------------------------------------------------
   Product card box.

   Before this, .product-layout had no background, border or padding of its
   own: the photo sat directly on the page background and the caption text
   started flush at the card's left edge, so nothing marked where one product
   ended and the next began except the gap between them. A light box gives each
   card a boundary of its own.

   Loaded site-wide (catalog/controller/journal3/event/header.php), the same
   way as sponsored-label.css, because .product-layout is the shared card
   markup on many surfaces: category, search, module carousels, the seller
   storefront (customerpartner/collection.twig, customerpartner/sell.twig) and
   the marketplace module.

   It is shared with one thing that is NOT a card, though: journal3's mini
   product row (journal3/side_products.twig) wears the same .product-layout
   wrapper. Giving that a white box put white pills inside the dark footer,
   where the Recently Viewed block lives - and the theme paints the product
   name in that scheme's light grey (#ccc), which against white is a contrast
   ratio of 1.6:1, so the names were effectively unreadable. The name colour
   was right; the box under it was not.

   So every rule here is qualified by .product-thumb, the wrapper each of the
   real card templates opens as its first child and the mini row does not have.
   :has() is already load-bearing for these cards (products.twig sizes their
   bottom margin with it), and the split is exact: of the five templates that
   emit .product-layout, the four that want a box all open a .product-thumb.
   --------------------------------------------------------------------------- */

.product-layout:has(.product-thumb) {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 12px;
  /* Clips the image's square corners to the box's rounded ones - the image is
     the first thing inside the card and spans its full width, so no separate
     radius on the image itself is needed. */
  overflow: hidden;
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}

/* No transform here, deliberately (it used to be translateY(-2px), 2026-09-17).
   A transform puts the card on its own compositing layer, and because the card
   is a rounded box the layer is not a plain opaque rectangle, so the browser
   drops subpixel text antialiasing for everything inside it: the product name,
   the rating and the market buttons all render soft the moment the pointer
   touches the card. The shadow carries the hover on its own, and it is deeper
   than the old one so the card still lifts off the page. */
.product-layout:has(.product-thumb):hover {
  border-color: #ddd;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.11);
}

/* The photo bleeds edge-to-edge to the box - the New/Sale label, the Sponsored
   pill and the quickview button already assume that full width for their own
   positioning; only the caption below gets breathing room, matching where its
   text used to start relative to the page.

   The name sits close under the photo (2026-10-13): 6px of caption padding and
   none of the 12px the skin puts above the name on listing pages, where it
   added up to a 22px band between photo and name. One class more than the
   skin's ".main-products-style.product-grid .product-thumb .name". */
.product-thumb .caption {
  padding: 6px 14px 14px;
}

.main-products-style.product-grid .product-thumb .caption > .name {
  margin-top: 0;
}

/* No separately composited layers inside the card (2026-10-13). The card is a
   rounded box with overflow:hidden, and three theme rules put parts of it on
   layers of their own: the Save/Compare band is placed over the photo with
   translate3d, slides in on hover with another translate3d, and the empty
   overlay on the photo (::before, no background - it draws nothing) carries
   mix-blend-mode:multiply. At a fractional screen scale (Windows 125%) Chrome
   then drew 1px white lines across the photo, the name and the stars - a
   rectangle about one card wide, often over the card next to the hovered one.
   (market-filter-bar.css already sizes its boxes in whole pixels because of
   the same band layer.)
   Here the band sits in the same place with a 2D translate, appears by fading
   only, and the overlay blends normally. Each selector is one class above the
   theme rule it replaces. Above the theme's 500px breakpoint only: below it the
   band is an ordinary row (position:static, no transform). */
@media (min-width: 501px) {
  .main-products-style.product-grid.product-grid .product-layout .product-thumb .buttons-wrapper {
    transform: translate(0, calc(-100% + 1px));
  }
}

.main-products-style.product-grid.product-grid .product-layout .product-thumb .buttons-wrapper .button-group,
.no-touchevents .main-products-style.product-grid.product-grid .product-layout .product-thumb:hover .buttons-wrapper .button-group {
  transform: none;
  transition: opacity 0.2s ease-out, visibility 0.2s;
}

.main-products-style.product-grid .product-layout .product-thumb .image:before {
  mix-blend-mode: normal;
}

/* ---------------------------------------------------------------------------
   Equal card height within a row (2026-09-03 - "Ürün kartlarının hizası aynı
   olmalı. Esnek olmamalı.") A card with no rating, no price and no market
   link (a stub product, or one Journal3's own filters have not caught yet) is
   shorter than its neighbours by exactly those missing lines, so it floats
   higher and its box reads as a different size in the same row.

   The grid row itself already sizes to its tallest card; stretch is CSS
   Grid's own default cross-axis behaviour and nothing here overrides it away
   - align-items: stretch is stated explicitly only as a guarantee against a
   future rule doing that. What actually needs adding is a path for that
   stretched height to reach the visible box: .product-layout was a plain
   block with no height of its own, so "stretch" gave it a tall grid CELL but
   its content still sized to itself, leaving the border+background box
   (added above) short and the empty space outside it. Turning .product-layout
   and .product-thumb into a flex column that fills 100% closes that gap, and
   anchoring the caption's last element (whatever it is - buy buttons, the
   wishlist/compare row, or on a stub card just the name) with margin-top:auto
   keeps that edge at the same height across the row, so a card's action always
   sits on its bottom edge. */
.auto-grid-items {
  align-items: stretch;
}

.product-layout:has(.product-thumb) {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.product-thumb {
  flex: 1 1 auto;
}

.product-thumb .caption {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.product-thumb .caption > *:last-child {
  margin-top: auto;
}