/**
 * Shared masonry template-card styles (free-page parity).
 * Scoped to .cb2-products-grid and .grid for home/category/product.
 * Keep separate until pages are verified; merge into page CSS later.
 */

/* Layout stability.
 * Use `contain: layout` only (NOT `layout paint`). `paint` containment clips all
 * descendant painting to the card's border-box; the thumbnail sits flush at the card
 * top and its box-shadow bleeds ~7px above that edge, so `paint` silently cut off the
 * top shadow (card looked "clipped" at the top). Production cards use no paint
 * containment and render the full shadow — this matches that. `layout` alone still
 * isolates internal layout for the virtualized masonry windowing. */
.cb2-products-grid .grid-item.template-card,
.grid .grid-item.template-card {
  contain: layout;
}
.cb2-products-grid .grid-col,
.grid .grid-col {
  contain: layout;
}
/* Column-width fix for the product/home/category `.grid` (NOT the free/categoryblog
   `.cb2-products-grid`, which has its own correct widths). Their legacy width rules stop at
   25% (4 cols @1080), but column VISIBILITY shows 5 cols @1350 and 6 cols @1600 — so at
   >=1350px the columns stayed 25% and 5x25%=125% overflowed the page horizontally. Add the
   matching 20% / 16.66% widths. `:not(.cb2-products-grid)` keeps the free page untouched. */
@media (min-width: 1350px) {
  .grid:not(.cb2-products-grid) .grid-col { width: 20%; }
}
@media (min-width: 1600px) {
  .grid:not(.cb2-products-grid) .grid-col { width: 16.6667%; }
}
.cb2-grid-scroll-wrap {
  overflow-anchor: none;
}

/* Virtualization spacers */
.cb2-products-grid .empty-item,
.grid .empty-item {
  display: block;
  width: 100%;
  min-height: 1px;
  flex-shrink: 0;
  overflow: hidden;
  box-sizing: border-box;
  pointer-events: none;
  visibility: hidden;
  margin: 0;
  padding: 0;
  border: 0;
}

/* Thumbnail: 10px side inset + aspect-ratio reservation.
 * box-shadow/border-radius/transition declared explicitly here (not left to the legacy
 * .grid-thumbnail rule in common.css) so the card shadow can't silently disappear if that
 * unrelated global rule ever changes, and so `transition: all` from common.css never animates
 * this box's height when --img-w/--img-h are written by JS — animating a layout-affecting
 * property here is a CLS source and can make the image look "clipped" mid-transition. */
.cb2-products-grid .template-card .grid-thumbnail,
.grid .template-card .grid-thumbnail {
  width: calc(100% - 20px);
  margin-left: 10px;
  margin-right: 10px;
  height: auto;
  aspect-ratio: var(--img-w, 224) / var(--img-h, 156);
  box-sizing: border-box;
  /* 10px matches the legacy .grid-thumbnail (common.css) that paints at first paint AND the
     production product-page card — keeping them identical means no radius flash when this
     deferred sheet applies. */
  border-radius: 10px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.19), 0 3px 10px 0 rgba(0, 0, 0, 0.19);
  /* transition:none (NOT the legacy .15s linear) — a transition here would animate the
     JS-written aspect-ratio/height and cause CLS + a "clipped" look mid-animation. */
  transition: none;
  overflow: hidden;
}
.cb2-products-grid .template-card .grid-thumbnail > a,
.grid .template-card .grid-thumbnail > a {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
}

/* Image fills aspect box */
.cb2-products-grid .template-card-img,
.cb2-products-grid .grid-item img.template-card-img,
.grid .template-card-img,
.grid .grid-item img.template-card-img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  /* fill (production/legacy default) — the thumbnail's aspect-ratio box already matches the
     image's real ratio (card height is derived from real dims), so fill draws the whole slide
     with no crop and no distortion, exactly like the product page. */
  object-fit: fill;
  border-radius: 3px;
  position: relative;
  z-index: -1;
}
.cb2-products-grid .grid-thumbnail .template-card-img,
.grid .grid-thumbnail .template-card-img {
  z-index: -1;
}

.cb2-products-grid .template-card .grid-instant-option svg use,
.grid .template-card .grid-instant-option svg use {
  pointer-events: none;
}

/* Text block: 86px box + 4px margin-top = 90px reserved in JS */
.cb2-products-grid .template-card .grid-text,
.grid .template-card .grid-text {
  height: 86px;
  min-height: 86px;
  box-sizing: border-box;
  overflow: hidden;
  padding: 4px 15px 20px;
  margin-top: 4px;
  line-height: 1.35;
}
.cb2-products-grid .template-card .grid-link,
.grid .template-card .grid-link {
  display: inline-block;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  color: #000;
  text-transform: capitalize;
  box-sizing: border-box;
}