/* ===== Destaques da loja: vitrine 3D (coverflow) =====
     Ajustes: --cf-glow (brilho do card central), --cf-spot (força do holofote),
     data-autoplay no .sy-cf (ms entre trocas). */
  .sy-hl {
    --cf-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --cf-red: rgb(var(--bfd,225,29,42));
    --cf-red-hi: rgb(var(--bfa,255,59,69));
    --cf-glow: 0.55;
    --cf-spot: 1;
    --cw: min(78vw, 330px);
    position: relative;
    padding: 28px 0 64px;
  }

  @media (min-width: 768px) { .sy-hl { --cw: 380px; } }
  @media (min-width: 1024px) { .sy-hl { --cw: 440px; } }
  @media (min-width: 1280px) { .sy-hl { --cw: 470px; } }

  .sy-hl-giant {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
  }

  .sy-hl-giant span {
    position: absolute;
    left: 50%;
    top: 20%;
    translate: -50% -50%;
    white-space: nowrap;
    font-size: clamp(90px, 17vw, 300px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    color: transparent;
    -webkit-text-stroke: 1.5px rgba(var(--bfd,225,29,42), 0.16);
    user-select: none;
  }

  /* cabeçalho */
  .sy-hl-head { position: relative; text-align: center; margin: 0 auto 10px; max-width: 42rem; padding: 0 8px; }

  .sy-hl-title { position: relative; display: inline-block; }
  .sy-hl-title .ch { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.06em; }
  .sy-hl-title .ch > span { display: inline-block; transition: transform 0.9s var(--cf-ease) calc(var(--i, 0) * 32ms); }

  /* brilho que passa só dentro das letras (ativado depois da revelação) */
  .sy-hl-title.is-shine {
    color: transparent;
    background: linear-gradient(100deg, #fff 0 42%, rgb(var(--bfl,255,154,160)) 48%, #ffffff 50%, rgb(var(--bfl,255,154,160)) 52%, #fff 58% 100%);
    background-size: 320% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    animation: sy-hl-shine 6s ease-in-out 2;
  }

  .sy-hl-title.is-shine .ch > span { transition: none; }

  @keyframes sy-hl-shine {
    0%, 62% { background-position: 100% 0; }
    88%, 100% { background-position: 0 0; }
  }

  .sy-js:not(.sy-cf-fallback) .sy-hl-head:not(.is-in) .sy-hl-title .ch > span { transform: translateY(110%); }
  .sy-js:not(.sy-cf-fallback) .sy-hl-head .sy-eyebrow::before,
  .sy-js:not(.sy-cf-fallback) .sy-hl-head .sy-eyebrow::after { transition: transform 0.9s var(--cf-ease) 0.15s; }
  .sy-js:not(.sy-cf-fallback) .sy-hl-head .sy-eyebrow::before { transform-origin: 100% 50%; }
  .sy-js:not(.sy-cf-fallback) .sy-hl-head .sy-eyebrow::after { transform-origin: 0 50%; }
  .sy-js:not(.sy-cf-fallback) .sy-hl-head:not(.is-in) .sy-eyebrow::before,
  .sy-js:not(.sy-cf-fallback) .sy-hl-head:not(.is-in) .sy-eyebrow::after { transform: scaleX(0); }
  .sy-hl-head .sy-eyebrow::before, .sy-hl-head .sy-eyebrow::after { width: 34px; }

  /* palco */
  .sy-cf { position: relative; margin-top: 8px; }

  .sy-cf-spot {
    position: absolute;
    left: 50%;
    top: -70px;
    width: min(820px, 96%);
    height: 560px;
    translate: -50% 0;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(var(--bfa,255,59,69), 0.34), rgba(var(--bfd,225,29,42), 0.08) 52%, transparent 82%);
    clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%);
    opacity: 0;
    transition: opacity 1.4s ease 0.1s;
  }

  .sy-cf-spot::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 22%;
    height: 22px;
    translate: -50% -40%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(var(--bfl,255,210,212), 0.9), rgba(var(--bfa,255,59,69), 0.4) 45%, transparent 72%);
  }

  .sy-cf-fog {
    position: absolute;
    left: 50%;
    bottom: 60px;
    width: min(900px, 100%);
    height: 220px;
    translate: -50% 0;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(var(--bfd,225,29,42), 0.22), rgba(var(--bfd,225,29,42), 0.05) 50%, transparent 72%);
    opacity: 0;
    transition: opacity 1.6s ease 0.3s;
  }

  .sy-cf.is-in .sy-cf-spot { opacity: var(--cf-spot); }
  .sy-cf.is-in .sy-cf-fog { opacity: 1; }

  @media (min-width: 768px) {
    .sy-cf-spot { filter: blur(14px); }
  }

  .sy-cf-viewport {
    position: relative;
    height: calc(var(--cw) * 0.5625 + 66px + 120px);
    perspective: 1500px;
    perspective-origin: 50% 40%;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 13%, #000 87%, transparent);
    touch-action: pan-y;
    user-select: none;
    cursor: grab;
  }

  .sy-cf-viewport.is-drag { cursor: grabbing; }

  .sy-cf-stage { position: relative; height: 100%; transform-style: preserve-3d; }

  .sy-cf-item {
    position: absolute;
    left: 50%;
    top: 34px;
    width: var(--cw);
    margin-left: calc(var(--cw) / -2);
    transform-style: preserve-3d;
    will-change: transform;
  }

  .sy-cf-in {
    transform-style: preserve-3d;
    transition: transform 1.1s var(--cf-ease) var(--d, 0ms), opacity 0.9s ease var(--d, 0ms);
  }

  .sy-js:not(.sy-cf-fallback) .sy-cf:not(.is-in) .sy-cf-in { opacity: 0; transform: translateZ(-700px) scale(0.6); }

  /* card */
  .sy-cf-card {
    position: relative;
    display: block;
    border-radius: 18px;
    background: #0d0708;
    color: #fff;
    text-decoration: none;
    transform: translateY(var(--lift, 0)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 0.5s var(--cf-ease);
  }

  .sy-cf-card.is-tilting { transition: transform 0.14s ease-out; }

  .sy-cf-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 4;
    border-radius: inherit;
    border: 1px solid rgba(255, 255, 255, 0.08);
    pointer-events: none;
  }

  .sy-cf-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    box-shadow: 0 26px 60px -22px rgba(var(--bfd,225,29,42), 0.9), 0 0 46px -12px rgba(var(--bfa,255,59,69), 0.7);
    opacity: 0;
    transition: opacity 0.5s ease;
  }

  .sy-cf-item.is-center .sy-cf-card::after { opacity: var(--cf-glow); }
  .sy-cf-item.is-center .sy-cf-card:hover::after { opacity: 1; }
  .sy-cf-item.is-center .sy-cf-card:hover { --lift: -8px; }

  .sy-cf-border {
    position: absolute;
    inset: -1px;
    z-index: 5;
    overflow: hidden;
    padding: 1.5px;
    border-radius: 19px;
    pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    opacity: 0.3;
    transition: opacity 0.5s ease;
  }

  .sy-cf-border span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 160%;
    aspect-ratio: 1;
    translate: -50% -50%;
    background: conic-gradient(from 0deg, transparent 0 66%, rgba(var(--bfa,255,59,69), 0.9) 84%, #fff 87%, transparent 91%);
    animation: sy-cf-spin 5s linear infinite;
  }

  .sy-cf-item.is-center .sy-cf-border { opacity: 1; }

  @keyframes sy-cf-spin { to { transform: rotate(360deg); } }

  .sy-cf-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 18px 18px 0 0;
    background: #140b0c;
  }

  .sy-cf-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--cf-ease);
  }

  .sy-cf-item.is-center .sy-cf-card:hover .sy-cf-media img { transform: scale(1.06); }

  .sy-cf-shine {
    position: absolute;
    top: 0;
    left: 0;
    width: 38%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22) 50%, transparent);
    transform: translateX(-160%) skewX(-16deg);
    animation: sy-cf-sweep 5.5s var(--cf-ease) infinite;
    pointer-events: none;
  }

  @keyframes sy-cf-sweep {
    0%, 60% { transform: translateX(-160%) skewX(-16deg); }
    85%, 100% { transform: translateX(380%) skewX(-16deg); }
  }

  .sy-cf-dim {
    position: absolute;
    inset: 0;
    z-index: 8;
    border-radius: inherit;
    background: #050203;
    opacity: var(--dim, 0);
    pointer-events: none;
  }

  /* selos */
  .sy-cf-badge,
  .sy-cf-auto,
  .sy-cf-off {
    position: absolute;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    background: rgba(8, 4, 5, 0.88);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
  }

  .sy-cf-badge { left: 10px; top: 10px; padding: 5px 10px 5px 8px; border: 1px solid rgba(var(--bfa,255,59,69), 0.55); }
  .sy-cf-badge svg, .sy-cf-badge i { width: 13px; height: 13px; color: #ff6b3d; }

  .sy-cf-rank {
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 3;
    display: grid;
    min-width: 42px;
    height: 34px;
    padding: 0 8px;
    place-items: center;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(180deg, rgba(var(--bfd,225,29,42), 0.9), rgba(var(--bfe,140,10,22), 0.9));
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -0.01em;
    box-shadow: 0 8px 20px -8px rgba(var(--bfd,225,29,42), 0.9);
  }

  .sy-cf-auto { left: 10px; bottom: 10px; padding: 5px 10px; border: 1px solid rgba(255, 255, 255, 0.14); letter-spacing: 0.08em; }
  .sy-cf-off { right: 10px; bottom: 10px; padding: 5px 9px; border: 1px solid rgba(var(--bfa,255,59,69), 0.5); color: rgb(var(--bfa,255,107,114)); letter-spacing: 0.04em; }

  .sy-ping { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
  .sy-ping::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #22c55e;
    animation: sy-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;
  }

  @keyframes sy-ping { 75%, 100% { transform: scale(2.6); opacity: 0; } }

  /* rodapé do card */
  .sy-cf-foot {
    position: relative;
    display: flex;
    height: 66px;
    align-items: center;
    gap: 12px;
    padding: 0 12px 0 14px;
    border-radius: 0 0 18px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, #140b0c, #0a0506);
  }

  .sy-cf-info { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; text-align: left; }
  .sy-cf-name { overflow: hidden; font-size: 13px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
  .sy-cf-price { display: flex; align-items: baseline; gap: 6px; font-size: 15px; font-weight: 900; color: rgb(var(--bfa,255,77,87)); }
  .sy-cf-price s { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.4); }

  .sy-cf-cta {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    padding: 9px 12px;
    border-radius: 11px;
    background: var(--cf-red);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }

  .sy-cf-cta span { transition: transform 0.4s var(--cf-ease); }
  .sy-cf-cta svg, .sy-cf-cta i { width: 14px; height: 14px; transition: transform 0.4s var(--cf-ease); }
  .sy-cf-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.35) 50%, transparent 80%);
    transform: translateX(-120%);
    transition: transform 0.7s var(--cf-ease);
  }

  .sy-cf-card:hover .sy-cf-cta span { transform: translateX(-2px); }
  .sy-cf-card:hover .sy-cf-cta svg, .sy-cf-card:hover .sy-cf-cta i { transform: translateX(4px); }
  .sy-cf-card:hover .sy-cf-cta::after { transform: translateX(120%); }

  @media (max-width: 420px) {
    .sy-cf-cta { padding: 8px 10px; font-size: 10.5px; }
    .sy-cf-name { font-size: 12px; }
  }

  /* controles */
  .sy-cf-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: -48px;
    position: relative;
    z-index: 2;
  }

  .sy-cf-btn {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    cursor: pointer;
    transition: transform 0.35s var(--cf-ease), border-color 0.35s ease, background-color 0.35s ease;
  }

  .sy-cf-btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  /* hover só com mouse: no toque ele "grudava" e as duas setas pareciam acionadas */
  @media (hover: hover) and (pointer: fine) {
    .sy-cf-btn:hover { transform: translateY(-2px); border-color: rgba(var(--bfa,255,59,69), 0.6); background: rgba(var(--bfd,225,29,42), 0.14); }
  }
  .sy-cf-btn:active { transform: scale(0.9); border-color: rgba(var(--bfa,255,59,69), 0.6); background: rgba(var(--bfd,225,29,42), 0.18); transition-duration: 0.08s; }
  .sy-cf-btn svg, .sy-cf-btn i { width: 18px; height: 18px; }

  .sy-cf-progress { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 700; color: rgba(255, 255, 255, 0.55); font-variant-numeric: tabular-nums; }
  .sy-cf-progress b { color: #fff; }
  .sy-cf-track { position: relative; width: 120px; height: 2px; overflow: hidden; border-radius: 2px; background: rgba(255, 255, 255, 0.1); }
  .sy-cf-fill { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(var(--bfe,139,10,20)), rgb(var(--bfa,255,59,69))); transform: scaleX(0); transform-origin: 0 50%; }

  /* botão magnético */
  .sy-hl-more { display: flex; justify-content: center; margin-top: 30px; }

  .sy-magnet {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-decoration: none;
    transition: transform 0.5s var(--cf-ease), background-color 0.4s ease;
  }

  .sy-magnet:hover { background: rgba(var(--bfd,225,29,42), 0.1); }
  .sy-magnet .sy-cf-border { opacity: 0.85; border-radius: 15px; }
  .sy-magnet .sy-cf-border span { width: 140%; }
  .sy-magnet svg, .sy-magnet i { width: 17px; height: 17px; transition: transform 0.4s var(--cf-ease); }
  .sy-magnet:hover svg, .sy-magnet:hover i { transform: translateX(5px); }

  @media (prefers-reduced-motion: reduce) {
    .sy-cf-border span, .sy-cf-shine, .sy-hl-title.is-shine, .sy-ping::after { animation: none; }
    .sy-cf-in { transition: opacity 0.6s ease; }
    .sy-js:not(.sy-cf-fallback) .sy-cf:not(.is-in) .sy-cf-in { transform: none; }
    .sy-hl-title .ch > span { transition: none; }
  }

  /* desempenho: só o palco desenha; efeitos contínuos só no cartaz central e com a seção na tela */
  .sy-cf-item.is-far { visibility: hidden; will-change: auto; }
  .sy-cf-item:not(.is-center) .sy-cf-border { display: none; }
  .sy-cf-item:not(.is-center) .sy-cf-shine { display: none; }
  .sy-cf-item:not(.is-center) .sy-ping::after { animation: none; }
  .sy-cf:not(.is-vis) .sy-cf-border span, .sy-cf:not(.is-vis) .sy-cf-shine, .sy-cf:not(.is-vis) .sy-ping::after { animation: none; }
  @media (max-width: 767px), (hover: none) {
    .sy-cf-viewport { -webkit-mask-image: none; mask-image: none; }
    .sy-cf-shine { display: none; }
  }