/* SIX ACROSS. The home grid was inheriting a 4-column, 298px-wide layout, so
   the shared card rendered nearly a third wider than it does on the
   marketplace and only four fitted in a row. The card is designed around a
   ~228px box; six of those plus five 16px gaps is what the founder asked for.
   The breakpoints below step down rather than letting the card stretch. */
.ib-hm-grid.ib-hm-grid--shared { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1440px) { .ib-hm-grid.ib-hm-grid--shared { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1200px) { .ib-hm-grid.ib-hm-grid--shared { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 980px)  { .ib-hm-grid.ib-hm-grid--shared { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .ib-hm-grid.ib-hm-grid--shared { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }

/* ADD SCALES WITH THE CARD.
   74x50 is the founder's size for a 228px-wide card — 32.5% of its width. Six
   across makes the card ~193px, where that same fixed button eats 38% and
   reads as oversized. These keep the RATIO the founder approved rather than
   the pixels: 63x42 on a 193px card is the same button, just at that card's
   scale. Below 1441px the grid drops to five and the card is back to ~229px,
   so the original size applies again and nothing here fires.
   `.ibk-foot`'s right padding is what stops the follower count running under
   the button, so it has to shrink by the same amount. */
@media (min-width: 1441px) {
  .ib-hm-grid.ib-hm-grid--shared .ibk-frame > .ibk-add {
    width: 63px; height: 42px; border-radius: 8.5px;
    right: -5px; bottom: -5px;
    font-size: 11.5px; letter-spacing: .5px;
  }
  .ib-hm-grid.ib-hm-grid--shared .ibk-add.added { font-size: 19px; }
  .ib-hm-grid.ib-hm-grid--shared .ibk-foot { padding-right: 63px; }
}
.ibk-add.added { background: #0E0E0E; border-color: #0E0E0E; font-size: 22px; }
.ibk-frame { position: relative; overflow: visible; }
.ibk-box {
  position: relative;
  width: 100%;
  aspect-ratio: 228 / 274;                 /* boxH = W x 274/228 */
  background: #FFFFFF;
  border: 1px solid #DADCE1;
  border-radius: 14px;                     /* fallback only — ib-squircle.js
                                              replaces this with the real
                                              superellipse (N=5, p=0.4). A
                                              circular corner at the app's
                                              ratio bulges early enough to
                                              clip the follower label. */
  overflow: hidden;
  box-sizing: border-box;
}
.ibk-box.ibk-clipped { border-color: transparent; }
.ibk-photo {
  position: absolute; inset: 0 0 36px 0;   /* flush; 36 = footerHeight */
  width: 100%; height: calc(100% - 36px);
  object-fit: cover;
  display: block;
  background: #F4ECE6;                     /* photoBg — shows while loading */
}
.ibk-photo-fb {
  position: absolute; inset: 0 0 36px 0;
  display: flex; align-items: center; justify-content: center;
  font: 800 30px/1 var(--body, Inter), sans-serif; color: #fff;
  background: linear-gradient(135deg, #c7cbd4, #9aa1ae);
}
.ibk-divider { position: absolute; left: 0; right: 0; bottom: 36px; height: 1px; background: #E7E9EE; }
.ibk-glyph { position: absolute; top: 6px; left: 6px; width: 36px; height: 36px; line-height: 0; z-index: 2;
             display: flex; align-items: center; justify-content: center; }
.ibk-glyph img { width: 36px !important; height: 36px !important; display: block; }
.ibk-heart {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 28px; height: 28px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer;
  font-size: 28px; line-height: 1; color: #fff;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));   /* legible on a light photo */
}
.ibk-heart.on { color: #E11D48; filter: none; }
/* Paid featured slot — quiet white pill. Top-left is the platform glyph and
   top-right the heart, so it sits bottom-left of the photo, just above the
   white strip (the ADD button lives on the right and never meets it). */
.ibk-box .mega-badge.featured {
  /* top/right reset: inside the marketplace grid a `.mega-badge` rule pins
     top:8px/right:8px, and with left/bottom also set the pill would stretch. */
  position: absolute; left: 8px; bottom: 44px; top: auto; right: auto; z-index: 3;
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.92); color: #6D6D6D;
  border: 1px solid rgba(0,0,0,.08); border-radius: 999px;
  font: 600 10.5px/1.2 var(--body, Inter), sans-serif; letter-spacing: .3px;
  padding: 3px 8px 3px 6px; white-space: nowrap;
}
.ibk-box .mega-badge.featured i { font-size: 12px; line-height: 1; }
.ibk-heart { overflow: visible; }
.ibk-burst { position: absolute; top: -20px; left: -20px; width: 64px; height: 64px;
             pointer-events: none; z-index: 5; }
.ibk-foot {
  position: absolute; left: 0; right: 0; bottom: 0; height: 36px;
  display: flex; flex-direction: column; justify-content: center;
  padding: 3px 74px 4px 14px;               /* right clears the ADD button */
  box-sizing: border-box;
}
.ibk-count { font: 700 15px/19px var(--body, Inter), sans-serif; color: #1F1F1F; letter-spacing: .1px; }
.ibk-unit  { font: 500 9.5px/10px var(--body, Inter), sans-serif; color: #5F5E5A; }
.ibk-frame > .ibk-add {
  /* Straddle the seam. The founder wants the button sitting ON TOP of the
     boundary between the photo and the white strip, not tucked inside the
     strip: bottom = stripH(36) - h(44)/2 = 14px puts its centre exactly on
     that line, half over the photo and half over the white. The shadow is
     what makes it read as raised rather than inlaid. */
  /* Sits LOWER and pokes past the card's bottom edge, which is why it also has
     to be taller: bottom:-6 puts 6px of it outside the card, and h:50 still
     leaves its top 8px above the photo/white seam (seam is 36px up), so it
     keeps straddling instead of sinking into the strip. */
  position: absolute; right: -6px; bottom: -6px; z-index: 4;
  width: 74px; height: 50px;
  /* 10px, not 21.3px. The app's token IS 21.3, but that is the radius of a
     superellipse (N=4.6) which stays visibly flat along the edges. Fed to a
     circular border-radius it becomes a full stadium pill — "it is not round,
     it is normal round" (founder). CreatorAddButton's own docblock describes
     the button as a "10pt radius" pill, which is the shape being described. */
  border-radius: 10px;
  background: #E21058; border: 1.5px solid #E21058; color: #fff;
  font: 800 13px/1 var(--body, Inter), sans-serif; letter-spacing: .6px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 3px 8px rgba(0,0,0,.18);
}
.ibk-add.added { background: #E21058; }
.ibk-add:focus-visible { outline: 2px solid #1F1F1F; outline-offset: 2px; }
.ibk-meta { padding: 8px 2px 0; overflow: hidden; }
/* WRAP, DON'T COLLIDE. Three items — the yellow ticket, "N% OFF on MRP" and
   the blue ticker — were laid on one non-wrapping flex line. In a 193px card
   the OFF text broke onto two lines inside its own box while the ticker, which
   is `white-space: nowrap`, kept its width and sat straight on top of it. With
   wrapping on, the ticket and the OFF share line one and the ticker drops to
   line two cleanly. The OFF label itself must never break: "25% OFF on / MRP"
   is what made the row two lines tall in the first place. */
.ibc-price { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; row-gap: 3px;
             margin-top: 2px; min-width: 0; }
.ibc-unit { flex: none; font: 600 9.5px/1.2 var(--body, Inter), sans-serif; color: #8a8f98; }
.ibc-rate-masked { letter-spacing: .5px; color: #6f6f78; }
.ibc-similar { display: inline-flex; align-items: center; gap: 2px; margin-top: 7px;
  padding: 6px 10px; border-radius: 6px; background: #fce8ef; border: 1px solid #F1AEC6;
  font: 600 10.5px/1 var(--body, Inter), sans-serif; color: #E21058; cursor: pointer; }
/* Stars were 11px and read as specks under the card — founder asked for
   bigger. 14px, with the number moved up to match so the row stays one unit
   instead of a large star beside small type. */
.ibc-rating { display: flex; align-items: center; gap: 1.5px; margin-top: 8px; min-width: 0; }
.ibc-rating svg { flex: none; }
.ibc-collabs { margin-left: 8px; flex: 0 0 auto; white-space: nowrap;
               font: 500 11.5px/1.2 var(--body, Inter), sans-serif; color: #8a8f98; }
.ibc-rating-text { margin-left: 6px; font: 600 12.5px/1.2 var(--body, Inter), sans-serif; color: #5c5c5c;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Events P1 (2026-09-18) — "Accepts N% · replies in Xh" under the stars.
   Green pill family (the app's event badge): the dot is the separator, never
   a character (founder rule). */
.ibc-event { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; max-width: 100%;
             margin-top: 6px; padding: 3px 8px 4px; border-radius: 6px; background: #E9F6EE; border: 1px solid #BFE3CC;
             font: 600 10.5px/1.2 var(--body, Inter), sans-serif; color: #1D7A46; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ibc-event i.ti { font-size: 12px; line-height: 1; }
.ibc-event-dot { display: inline-block; width: 3px; height: 3px; border-radius: 2px; background: currentColor; margin: 0 5px; vertical-align: 2px; }
.ibk-name { display: flex; align-items: flex-start; gap: 3px;
            font: 700 15px/19px var(--body, Inter), sans-serif; color: #1c1c1c; letter-spacing: -.2px; }
.ibk-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ibk-handle { margin-top: 3px; font: 500 10px/1.2 var(--body, Inter), sans-serif;
              color: #8a8f98; letter-spacing: -.05px;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ibc {
  /* App constants — do not retune individually; they are a set. */
  --ibc-yellow: #f6d063;   /* DEAL_YELLOW */
  --ibc-blue:   #366dd5;   /* DEAL_BLUE   */
  --ibc-ink:    #191919;   /* ticketText  */
  --ibc-stat:   #2a2a2a;   /* statText    */
  --ibc-ticket-h: 30px;    /* TICKET_H    */
  --ibc-ticker-h: 19px;    /* TICKER_H    */
  --ibc-notch-r: 2.6px;    /* NOTCH_R     */
  /* The colour the notches are "bitten" out of = the surface the card sits on.
     The app passes this as `notchBg`; on web the card is white, so white. */
  --ibc-notch-bg: #ffffff;
  font-family: var(--body);
}
.ibc-ticket {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: var(--ibc-ticket-h);
  padding: 0 7px;
  border-radius: 4px;
  background: var(--ibc-yellow);
  font-weight: 800;
  font-size: 15px;
  line-height: 17px;
  color: var(--ibc-ink);
  white-space: nowrap;
  /* 5 notch centres at 14.4 / 32.2 / 50 / 67.8 / 85.6 % — the app's NOTCH_FRACS. */
  --n: var(--ibc-notch-r);
  -webkit-mask-image:
    radial-gradient(var(--n) at 0    14.4%, #0000 98%, #000),
    radial-gradient(var(--n) at 0    32.2%, #0000 98%, #000),
    radial-gradient(var(--n) at 0    50.0%, #0000 98%, #000),
    radial-gradient(var(--n) at 0    67.8%, #0000 98%, #000),
    radial-gradient(var(--n) at 0    85.6%, #0000 98%, #000),
    radial-gradient(var(--n) at 100% 14.4%, #0000 98%, #000),
    radial-gradient(var(--n) at 100% 32.2%, #0000 98%, #000),
    radial-gradient(var(--n) at 100% 50.0%, #0000 98%, #000),
    radial-gradient(var(--n) at 100% 67.8%, #0000 98%, #000),
    radial-gradient(var(--n) at 100% 85.6%, #0000 98%, #000);
          mask-image:
    radial-gradient(var(--n) at 0    14.4%, #0000 98%, #000),
    radial-gradient(var(--n) at 0    32.2%, #0000 98%, #000),
    radial-gradient(var(--n) at 0    50.0%, #0000 98%, #000),
    radial-gradient(var(--n) at 0    67.8%, #0000 98%, #000),
    radial-gradient(var(--n) at 0    85.6%, #0000 98%, #000),
    radial-gradient(var(--n) at 100% 14.4%, #0000 98%, #000),
    radial-gradient(var(--n) at 100% 32.2%, #0000 98%, #000),
    radial-gradient(var(--n) at 100% 50.0%, #0000 98%, #000),
    radial-gradient(var(--n) at 100% 67.8%, #0000 98%, #000),
    radial-gradient(var(--n) at 100% 85.6%, #0000 98%, #000);
  -webkit-mask-repeat: no-repeat;  mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;  mask-composite: intersect;
}
.ibc-off {
  margin-top: 0;
  flex: 0 0 auto;
  white-space: nowrap;
  font-weight: 700;
  font-size: 11px;
  color: var(--ibc-blue);
}
.ibc-ticker      { height: var(--ibc-ticker-h); overflow: hidden; margin-top: 0; flex: 0 0 auto; }
.ibc-ticker-tape { will-change: transform; animation: ibc-ticker 5600ms linear infinite; }
.ibc-ticker-line {
  height: var(--ibc-ticker-h);
  display: flex; align-items: center;
  font-weight: 700; font-size: 12.5px; line-height: 16px;
  color: var(--ibc-blue);
  white-space: nowrap;
}
.ibc-ticker-tape { animation-timing-function: cubic-bezier(.45, 0, .55, 1); }
  .ibc-ticker-tape { animation: none; transform: translateY(calc(-1 * var(--ibc-ticker-h))); }
.ibc-rate     { font-weight: 800; font-size: 16px; line-height: 20px; color: #1a1a1a; letter-spacing: -.3px; }
.ibc-rate-was { margin-left: 0; flex: 0 0 auto; white-space: nowrap;
                font-weight: 600; font-size: 11.5px; color: #9aa0a6; text-decoration: line-through; }
.ibc-stats { margin-top: 4px; row-gap: 3px; display: flex; flex-direction: column; min-width: 0; }
.ibc-stat-row  { display: flex; align-items: center; column-gap: 10px; min-width: 0; }
.ibc-stat-cell { display: flex; align-items: center; gap: 4px; flex-shrink: 1; min-width: 0; }
.ibc-stat-cell svg { flex: none; }
.ibc-stat-text {
  font-weight: 700; font-size: 10.5px; color: var(--ibc-stat);
  flex-shrink: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ibc-ico-trend { width: 18px; height: 18px; margin-left: -2px; margin-right: -3px; }
.ibc-niche {
  /* The pill had 3px above and read as 12px below: `inline-block` keeps a
     baseline descender slot under the text, so the visible gap under the pill
     was bigger than its own margin said. `inline-flex` drops that phantom
     space, and 8px above / 8px below (via .ibc-rating) makes the pill sit in
     an even band instead of hugging the handle. */
  align-self: flex-start; display: inline-flex; align-items: center; max-width: 100%;
  margin-top: 8px; padding: 3px 8px 4px;
  border-radius: 6px; background: #fbf6e7; border: 1px solid #e4cd8f;
  font-weight: 600; font-size: 10px; color: #8a6b1e;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}