.gallery-header {
      padding: 0 24px;
  }

  .gallery-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 18px;
      padding: 0 24px 48px;
  }

  .gallery-card {
      background: var(--panel);
      border: 1px solid var(--divider);
      border-radius: 16px;
      box-shadow: var(--shadow);
      overflow: hidden;
      cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease;
      outline: none;
  }

  .gallery-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 28px rgba(0, 0, 0, .10);
  }

  .gallery-card:focus-visible {
      outline: 3px solid rgba(0, 146, 70, .35);
      outline-offset: 3px;
  }

  .gc-thumb {
      position: relative;
      aspect-ratio: 4/3;
      background: #f2f2f2;
      overflow: hidden;
  }

  .gc-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
  }

  .gc-body {
      padding: 12px 14px 14px;
  }

  .gc-title {
      margin: 0;
      font-size: 16px;
      line-height: 1.25;
      font-weight: 800;
  }

  .gc-desc {
      margin: 6px 0 10px;
      font-size: 13px;
      color: var(--muted);
  }

  .gc-price {
      display: inline-block;
      font-weight: 800;
      padding: 6px 10px;
      border: 1px solid var(--divider);
      border-radius: 999px;
      background: #fff;
  }

  .viewer-price {
      margin-top: 12px;
      font-size: clamp(16px, 2.1vw, 20px);
      font-weight: 800;
  }

  main {
      padding: 28px 24px 72px;
      overflow: auto;
      background: var(--panel);
  }

  @media (max-width:768px) {

      .gallery-header,
      .gallery-grid {
          padding: 0 20px 40px;
      }
  }

  /* ===== Viewer Slider ===== */
  .viewer-slider {
      position: absolute;
      inset: 0;
      overflow: hidden;
      display: grid;
      place-items: center;
      touch-action: pan-y;
  }

  .vs-track {
      display: grid;
      grid-auto-flow: column;
      grid-auto-columns: 100%;
      height: 100%;
      width: 100%;
      transition: transform .28s ease;
  }

  .vs-track img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      user-select: none;
      -webkit-user-drag: none;
      pointer-events: none;
  }

  .vs-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      border: 0;
      border-radius: 999px;
      backdrop-filter: blur(3px);
      background: rgba(255, 255, 255, .18);
      box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
      cursor: pointer;
      z-index: 3;
  }

  .vs-prev {
      left: 10px;
  }

  .vs-next {
      right: 10px;
  }

  .vs-prev::before,
  .vs-next::before {
      content: '';
      display: inline-block;
      width: 10px;
      height: 10px;
      border: 3px solid #fff;
      border-top: 0;
      border-right: 0;
      transform: rotate(45deg);
  }

  .vs-next::before {
      transform: rotate(-135deg);
  }

  .vs-dots {
      position: absolute;
      bottom: 10px;
      display: inline-flex;
      gap: 8px;
      z-index: 3;
      background: rgba(0, 0, 0, .18);
      padding: 6px 10px;
      border-radius: 999px;
      backdrop-filter: blur(3px);
  }

  .vs-dots button {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      border: 0;
      background: rgba(255, 255, 255, .5);
      cursor: pointer;
  }

  .vs-dots button[aria-current="true"] {
      background: #fff;
  }

  /* preview alternativo + zoom */
  .alt-preview {
      position: absolute;
      right: 6px;
      bottom: 6px;
      width: 74px;
      height: 48px;
      border-radius: 6px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border: 1px solid rgba(255, 255, 255, .9);
      box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
      pointer-events: none;
      z-index: 1;
      opacity: .95;
      transform: translateZ(0);
  }

  .alt-preview[hidden] {
      display: none;
  }

  .zoom-icon {
      position: absolute;
      right: 6px;
      bottom: 6px;
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(0, 0, 0, .5);
      backdrop-filter: blur(2px);
      padding: 4px;
      pointer-events: none;
      box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
      z-index: 2;
      transition: transform .2s ease, opacity .2s ease, background-color .2s ease;
  }

  .zoom-svg {
      width: 16px;
      height: 16px;
      display: block;
  }

  .gallery-card:hover .zoom-icon,
  .gallery-card:focus-visible .zoom-icon {
      background: rgba(0, 0, 0, .6);
      transform: scale(1.04);
  }

  .gc-thumb:active .zoom-icon {
      transform: scale(0.92);
      opacity: .85;
  }

  @media (prefers-reduced-motion: reduce) {
      .zoom-icon {
          transition: none;
      }
  }

  /* Botão flutuante */
  .whatsapp-float {
      position: fixed;
      right: 20px;
      bottom: 20px;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background-color: #25D366;
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      z-index: 9999;
      transition: transform 0.2s ease;
      animation: shake 2.5s ease-in-out infinite;
  }

  .whatsapp-float img {
      width: 36px;
      height: 36px;
  }

  .whatsapp-float:hover {
      transform: scale(1.1);
  }

  @keyframes shake {

      0%,
      100% {
          transform: rotate(0deg);
      }

      10% {
          transform: rotate(10deg);
      }

      20% {
          transform: rotate(-10deg);
      }

      30% {
          transform: rotate(8deg);
      }

      40% {
          transform: rotate(-8deg);
      }

      50% {
          transform: rotate(5deg);
      }

      60% {
          transform: rotate(-5deg);
      }

      70% {
          transform: rotate(2deg);
      }

      80% {
          transform: rotate(-2deg);
      }

      90% {
          transform: rotate(0deg);
      }
  }

  @media (max-width:480px) {
      .whatsapp-float {
          width: 56px;
          height: 56px;
          right: 15px;
          bottom: 15px;
      }

      .whatsapp-float img {
          width: 32px;
          height: 32px;
      }
  }

  /* ===================== Subtítulos dentro da grid (Italian vibe) ===================== */
  .gallery-subtitle {
      grid-column: 1 / -1;
      position: relative;
      margin: 8px 0 0;
      padding: 12px 14px 12px 16px;

      /* border: 1px solid var(--divider); */
      border-radius: 16px;

      /* usa as cores do seu tema + transparência */
      background: linear-gradient(180deg,
              rgba(255, 255, 255, .70),
              rgba(255, 255, 255, .52)),
          var(--panel);

      /* box-shadow: var(--shadow); */
      overflow: hidden;
  }

  /* ?faixa? vertical com degradê da bandeira italiana */
  .gallery-subtitle::before {
      content: "";
      position: absolute;
      left: 10px;
      top: 10px;
      bottom: 10px;
      width: 5px;
      border-radius: 999px;
      background: linear-gradient(180deg,
              #009246 0%,
              #009246 33%,
              #FFFFFF 33%,
              #FFFFFF 66%,
              #CE2B37 66%,
              #CE2B37 100%);
      box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
      opacity: .95;
  }

  /* brilho suave ao fundo (bem sutil) */
  .gallery-subtitle::after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(circle at 18% 50%,
              rgba(0, 146, 70, .10),
              rgba(255, 255, 255, 0) 55%);
      pointer-events: none;
  }

  /* tipografia */
  .gallery-subtitle h3 {
      margin: 0;
      padding-left: 10px;
      /* para não encostar na faixa */
      font-size: 14px;
      font-weight: 800;
      letter-spacing: .2px;
      color: #111;
  }

  .gallery-subtitle p {
      margin: 5px 0 0;
      padding-left: 10px;
      font-size: 12.5px;
      color: var(--muted);
      line-height: 1.3;
  }

  /* responsivo */
  @media (max-width: 768px) {
      .gallery-subtitle {
          padding: 12px 12px 12px 16px;
          border-radius: 14px;
      }

      .gallery-subtitle::before {
          left: 8px;
      }
  }

  /* respeita reduzir movimento */
  @media (prefers-reduced-motion: reduce) {
      .gallery-subtitle {
          transition: none;
      }
  }

  /* ===========================
   VIEWER COMO CARD (DESKTOP)
   =========================== */
  @media (min-width: 1024px) {

      /* overlay continua fullscreen */
      .viewer {
          display: flex;
          /* troca grid por flex */
          align-items: center;
          justify-content: center;
          padding: 28px;
          /* ?respiro? nas bordas */
          gap: 0;
          /* cola mídia + meta */
          overflow: hidden;
          /* evita scroll feio no overlay */
      }

      /* quando aberto */
      .viewer:not([hidden]) {
          opacity: 1;
          pointer-events: auto;
      }

      /* MÍDIA (lado esquerdo do card) */
      .viewer-media {
          width: min(62vw, 780px);
          /* controla tamanho do card */
          height: min(72vh, 640px);
          background: #111;
          border-radius: 18px 0 0 18px;
          overflow: hidden;
          box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
          position: relative;
      }

      /* SLIDER ocupa toda a área da mídia */
      .viewer-slider {
          width: 100%;
          height: 100%;
      }

      .vs-track {
          height: 100%;
      }

      .vs-track img {
          width: 100%;
          height: auto;
          object-fit: contain;
          /* ? NÃO DISTORCE */
          background: #111;
          /* fundo para ?barras? */
      }

      /* META (lado direito do card) */
      .viewer-meta {
          width: min(34vw, 420px);
          height: min(72vh, 640px);
          background: #fff;
          border-radius: 0 18px 18px 0;
          overflow: auto;
          /* scroll só dentro da meta */
          box-shadow: 0 30px 80px rgba(0, 0, 0, .35);
          padding: 22px 22px 26px;
      }

      /* no desktop, não precisa daquele "card" embaixo com border-top */
      .viewer-meta {
          border-top-left-radius: 0;
          border-top-right-radius: 18px;
      }

      /* deixa o botão fechar no ?canto? do card */
      .viewer-close {
          top: 14px;
          right: 14px;
      }

      /* logo não invadir o título */
      .viewer-meta h3 {
          padding-right: 74px;
      }
  }