/*
 * Chatify site kit — the default look of the promotion slots and feed bindings. Load it before the site's
 * own stylesheet, and override any rule there: the slots take the site's fonts and colours by design.
 *
 *     <link rel="stylesheet" href="/chatify-kit.css">
 */
/* A slot with no promotion takes no room — not even a cell in a grid of products. */
[data-chatify-slot]:empty { display: none; }

.ck-card { position: relative; overflow: hidden; border-radius: 16px; background: #f4f4f2; }
.ck-media { display: block; width: 100%; height: 100%; }

/* The five slot shapes. A PHOTO fills the shape and crops around its focal point; a POSTER is never
   cropped — it keeps the shape on its own background colour, and its words sit below rather than on it. */
.ck-hero { aspect-ratio: 16 / 9; }
.ck-tile { aspect-ratio: 1 / 1; }
.ck-popup { aspect-ratio: 4 / 5; }
.ck-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; }
.ck-carousel > .ck-card { aspect-ratio: 16 / 9; scroll-snap-align: start; }
/* On a phone a 16:9 photo is too short for a headline, a line and a button on top of it: it is taller there,
   cropped around the same focal point. */
@media (max-width: 600px) {
  .ck-hero:not(.ck-poster), .ck-carousel > .ck-card:not(.ck-poster) { aspect-ratio: 4 / 5; }
}

.ck-card .ck-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); }
.ck-headline { font-weight: 700; font-size: 1.25em; line-height: 1.2; }
.ck-line { margin-top: 4px; opacity: 0.92; }
/* A tile is small: the headline and a compact button only. */
.ck-tile .ck-text { padding: 12px 14px; }
.ck-tile .ck-headline { font-size: 1em; }
.ck-tile .ck-line { display: none; }
.ck-tile .ck-btn { margin-top: 6px; padding: 6px 12px; font-size: 0.85em; }

.ck-card.ck-poster { aspect-ratio: auto; background: transparent; }
.ck-poster .ck-media { height: auto; aspect-ratio: 16 / 9; border-radius: 16px; }
.ck-tile.ck-poster .ck-media { aspect-ratio: 1 / 1; }
.ck-popup.ck-poster .ck-media { aspect-ratio: 4 / 5; }
.ck-poster .ck-text { position: static; padding: 12px 4px 0; color: inherit; background: none; }

.ck-btn { display: inline-block; margin-top: 10px; padding: 9px 16px; border-radius: 999px; background: #25d366; color: #fff; font-weight: 600; text-decoration: none; }
.ck-strip { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; padding: 8px 16px; background: #111; color: #fff; font-size: 14px; text-align: center; }
.ck-strip .ck-btn { margin-top: 0; padding: 5px 12px; }

.ck-popup-wrap { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0, 0, 0, 0.5); }
.ck-popup-inner { position: relative; width: min(480px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 10px; border-radius: 20px; background: #fff; color: #111; }
.ck-close { position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border: 0; border-radius: 999px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; }

/* The site feed's "open now" line. */
.ck-open { color: #16a34a; font-weight: 600; }
.ck-closed { color: #b91c1c; font-weight: 600; }