.ig-showcase {
    --igs-gap: 20px;
    --igs-radius: 10px;
    --igs-card-w: 300px;   /* largura fixa do card (desktop) */
    --igs-card-h: 400px;   /* altura fixa do card (desktop)  */
    --igs-card-w-mobile: 280px;  /* largura do card no mobile */
    --igs-card-h-mobile: 320px;  /* altura menor no mobile: corta topo/base via object-fit cover */
    --igs-ink: #262626;
    --igs-muted: #8e8e8e;
    --igs-line: #efefef;
    --igs-brand: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--igs-ink);
    /* max-width: 1200px; */
    margin: 0 auto;
    padding-top: 40px;
    /* padding: 8px 12px 24px; */
    box-sizing: border-box;
  }
  .ig-showcase *,
  .ig-showcase *::before,
  .ig-showcase *::after { box-sizing: border-box; }

  /* ---- Header / seguidores ---- */
  .ig-showcase__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 4px 18px;
  }
  .ig-showcase__brand-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    padding: 2px;
    background: var(--igs-brand);
    flex: 0 0 auto;
  }
  .ig-showcase__brand-avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    display: block;
  }
  .ig-showcase__brand-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
  }
  .ig-showcase__brand-handle {
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    color: var(--igs-ink);
  }
  .ig-showcase__brand-handle:hover { text-decoration: underline; }
  .ig-showcase__followers {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--igs-muted);
  }
  .ig-showcase__ig-logo {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    color: var(--igs-ink);
  }
  .ig-showcase__followers b { color: var(--igs-ink); font-weight: 600; }

  /* ---- Grid (desktop) ---- */
  .ig-showcase__grid {
    display: grid;
    grid-template-columns: repeat(4, var(--igs-card-w));
    gap: var(--igs-gap);
    justify-content: left;
  }

  /* Wrapper de cada card. No desktop é transparente (só repassa o card).
     No mobile vira o slide do Slick e centraliza o card reduzido. */
  .ig-showcase__slide {
    display: block;
  }

  /* ---- Card (dimensões fixas) ---- */
  .ig-showcase__card {
    width: var(--igs-card-w);
    height: var(--igs-card-h);
    display: flex;
    flex-direction: column;
    border: 1px solid var(--igs-line);
    border-radius: var(--igs-radius);
    overflow: hidden;
    background: #fff;
    text-decoration: none;
    color: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: box-shadow .2s ease, transform .2s ease;
  }
  .ig-showcase__card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.08);
    transform: translateY(-2px);
  }

  /* ---- Mídia ---- */
  .ig-showcase__media {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* mesmo arredondamento do card, descontando a borda de 1px */
    border-radius: calc(var(--igs-radius) - 1px);
  }
  .ig-showcase__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
  }

  /* ---- Overlay curtidas/comentários (hover) ---- */
  .ig-showcase__stats {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    background: rgba(0,0,0,.35);
    border-radius: inherit;
    opacity: 0;
    transition: opacity .18s ease;
    pointer-events: none;
  }
  .ig-showcase__card:hover .ig-showcase__stats,
  .ig-showcase__card:focus-visible .ig-showcase__stats { opacity: 1; }
  .ig-showcase__stats .stat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
  }
  .ig-showcase__stats svg { width: 20px; height: 20px; fill: #fff; }

  /* ---- Acessibilidade / motion ---- */
  .ig-showcase__card:focus-visible {
    outline: 2px solid #262626;
    outline-offset: 2px;
  }
  @media (prefers-reduced-motion: reduce) {
    .ig-showcase__card { transition: none; }
    .ig-showcase__stats { transition: none; }
  }

  /* ---- Responsivo ---- */
  /* Entre o breakpoint mobile e o desktop, quebra a linha conforme o espaço. */
  @media (min-width: 769px) and (max-width: 1240px) {
    .ig-showcase__grid {
      grid-template-columns: repeat(auto-fit, var(--igs-card-w));
    }
  }

  /* ===== Mobile (<=768px): carrossel Slick ===== */
  @media (max-width: 768px) {
    /* Sem hover no mobile: stats sempre visíveis e centralizados.
       Sem overlay escuro (a imagem não fica "clicada"); a legibilidade
       vem de uma sombra sutil no texto e nos ícones. */
    .ig-showcase__stats {
      opacity: 1;
      background: transparent;
      align-items: center;
      justify-content: center;
      text-shadow: 0 1px 3px rgba(0, 0, 0, .55);
    }
    .ig-showcase__stats svg {
      filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
    }

    /* No mobile o :hover "gruda" ao tocar; anula o efeito de elevação. */
    .ig-showcase__card:hover {
      box-shadow: none;
      transform: none;
    }

    /* Card menor no mobile para não dominar a tela. */
    .ig-showcase__card {
      width: var(--igs-card-w-mobile);
      height: var(--igs-card-h-mobile);
      max-width: var(--igs-card-w-mobile);
    }
    /* Stats menores, proporcionais ao card reduzido. */
    .ig-showcase__stats { font-size: 13px; gap: 16px; }
    .ig-showcase__stats svg { width: 17px; height: 17px; }

    /* O wrapper (slide do Slick) centraliza o card reduzido. */
    .ig-showcase__slide {
      display: flex !important;
      justify-content: center;
      align-items: center;
    }

    /* Enquanto o Slick não inicializa, evita "flash" de todos os cards:
       o grid vira coluna única e só o primeiro slide aparece. */
    .ig-showcase__grid:not(.slick-initialized) {
      display: block;
    }
    .ig-showcase__grid:not(.slick-initialized) .ig-showcase__slide ~ .ig-showcase__slide {
      display: none !important;
    }

    /* Quando o Slick assume, ele controla o layout (não é mais grid). */
    .ig-showcase__grid.slick-initialized {
      display: block;
    }

    /* ---- Setas discretas do carrossel ---- */
    .ig-showcase__arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: none;
      border-radius: 50%;
      background: rgba(255, 255, 255, .55);
      color: #000;
      cursor: pointer;
      opacity: .5;
      transition: opacity .18s ease;
      -webkit-tap-highlight-color: transparent;
      box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
    }
    .ig-showcase__arrow:hover,
    .ig-showcase__arrow:focus-visible { opacity: .85; }
    .ig-showcase__arrow svg { width: 15px; height: 15px; display: block; }
    /* Força a cor da seta (evita vermelho herdado de regras globais do tema). */
    .ig-showcase__arrow svg path { stroke: #000 !important; fill: none !important; }
    .ig-showcase__arrow--prev { left: 6px; }
    .ig-showcase__arrow--next { right: 6px; }
    /* Slick esconde setas quando desabilitadas; garante que não sumam por herança. */
    .ig-showcase__arrow.slick-hidden { display: none; }

    /* O tema tem um .slick-slider .slick-arrow nativo que sobrescreve os
       nossos valores. Escopamos com a classe do grid (maior especificidade)
       para garantir as dimensões ideais. */
    .ig-showcase__grid.slick-slider .slick-arrow {
      width: 40px;
      height: 40px;
      padding: 12px 15px 12px 15px;
      overflow: visible;
    }
    /* Garante que o SVG da seta apareça por cima do box do tema
       (o tema pode escondê-lo/clipá-lo ou zerar font-size). */
    .ig-showcase__grid.slick-slider .slick-arrow svg {
      width: 15px !important;
      height: 15px !important;
      padding: 0 !important;
      margin: 0 !important;
      display: block !important;
      opacity: 1 !important;
      visibility: visible !important;
    }
    .ig-showcase__grid.slick-slider .slick-arrow path {
      stroke: #000 !important;
      fill: none !important;
    }
    /* Remove qualquer ícone via ::before/::after do tema. */
    .ig-showcase__grid.slick-slider .slick-arrow::before,
    .ig-showcase__grid.slick-slider .slick-arrow::after {
      content: none !important;
    }
  }

  /* ---- Fallback do slick.css oficial (caso não esteja carregado na página) ----
     Replica as regras essenciais do slick-carousel para o carrossel funcionar
     com 1 slide por vez, mesmo sem o CSS oficial. */
  .ig-showcase__grid.slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
  }
  .ig-showcase__grid .slick-list {
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;
  }
  .ig-showcase__grid .slick-list:focus { outline: none; }
  .ig-showcase__grid .slick-list.dragging { cursor: pointer; }
  .ig-showcase__grid .slick-slider .slick-track,
  .ig-showcase__grid .slick-slider .slick-list {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .ig-showcase__grid .slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;      /* NÃO flex — o Slick posiciona por float + width inline */
  }
  .ig-showcase__grid .slick-track:before,
  .ig-showcase__grid .slick-track:after { content: ""; display: table; }
  .ig-showcase__grid .slick-track:after { clear: both; }
  .ig-showcase__grid .slick-slide {
    display: none;
    float: left;         /* essencial: sem isto os slides não se alinham em fila */
    height: 100%;
    min-height: 1px;
  }
  .ig-showcase__grid .slick-slide img { display: block; }
  .ig-showcase__grid .slick-initialized .slick-slide { display: block; }
  .ig-showcase__grid .slick-track:after,
  .ig-showcase__grid .slick-track:before { display: table; content: ""; }