/* ============================================================================
   VENDORED COPY — do not edit by hand.
   Source: collection-tiles/extensions/collection-tiles-storefront/assets/collection-tiles.css
   This is the REAL storefront tile stylesheet, copied so the website demo renders
   tiles exactly like the live app. If the app changes tile rendering, re-copy this
   file (and collection-tiles.js) from the extension.
   ============================================================================ */

.collection-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  border-radius: 8px;
  background: #f4f4f4;
  box-sizing: border-box;
  /* Height (tile_size%) and per-side margins are set inline by the injector. */
}

/* The wrapper is a container-query context so its tile's fonts/spacing (emitted by
   the injector as min(px, cqw)) scale with the product column width — keeping text
   inside the tile on narrow mobile columns. */
.collection-tile-wrapper {
  container-type: inline-size;
}

/* Wide tile (Pro): the wrapper spans two product columns (set inline by the
   injector). Its inner tile fills the wider cell just like a standard tile. */
.collection-tile-wrapper--wide {
  box-sizing: border-box;
}
.collection-tile-wrapper--wide .collection-tile {
  width: 100%;
}

.collection-tile__heading {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  line-height: 1.3;
}

.collection-tile__subtext {
  font-size: 14px;
  margin: 0 0 16px;
  line-height: 1.4;
}

.collection-tile__cta {
  display: inline-block;
  padding: 10px 18px;
  background: #111;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
}

/* Image: above/below text. The image area fills the space left after the
   text/button (flex:1); the image is shown whole and shrinks to fit it (max
   width/height set inline from image_size), centred. */
.collection-tile__image-area {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.collection-tile__image-area--top { margin-bottom: 12px; }
.collection-tile__image-area--bottom { margin-top: 12px; }
.collection-tile__image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
  border-radius: 6px;
}

/* Image-only tile: just the image, shown whole and shrunk to fit the (capped)
   tile. Max width/height are set inline from image_size; the image is centred
   horizontally and placed vertically by content_align (justify-content). */
.collection-tile--image-only {
  padding: 0;
  overflow: hidden;
}
.collection-tile__image--full {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  display: block;
}
.collection-tile__link {
  display: block;
  width: 100%;
}

/* Video tile (Pro): a silent looping clip that fills the tile box. The media is
   loaded lazily by the injector (src/iframe attached on scroll). object-fit
   (cover/contain) is set inline from video_fit; overflow:hidden crops "cover". */
.collection-tile--video {
  padding: 0;
  overflow: hidden;
}
.collection-tile__video {
  width: 100%;
  height: 100%;
  display: block;
}
.collection-tile__video-embed {
  position: relative;
  width: 100%;
  height: 100%;
}
/* The iframe ignores pointer events so the whole tile's <a> still captures the
   click (the tile links out; the embed itself is non-interactive). */
.collection-tile__video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  pointer-events: none;
}

/* Countdown timer (Pro) */
.collection-tile__countdown {
  margin: 0 0 16px;
}
.collection-tile__cd-label {
  display: block;
  font-size: var(--cd-label-size, 13px);
  margin-bottom: 6px;
}
.collection-tile__cd-units {
  display: flex;
  gap: var(--cd-gap, 10px);
  justify-content: center;
}
.collection-tile__cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}
.collection-tile__cd-unit b {
  font-size: var(--cd-num-size, 22px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.collection-tile__cd-unit i {
  font-size: var(--cd-sublabel-size, 10px);
  font-style: normal;
  text-transform: uppercase;
  opacity: 0.7;
}
.collection-tile__cd-expired {
  font-weight: 600;
}

/* Image: background (abs-positioned <img> so opacity works reliably). Shown
   whole; size (image_size), object-fit, opacity, and the vertical placement
   (content_align, via directional auto margins) are set inline. */
.collection-tile--bg {
  position: relative;
  overflow: hidden;
}
.collection-tile__bg-img {
  position: absolute;
  inset: 0;
  display: block;
}
.collection-tile__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: inherit;
  width: 100%;
}