.wcvs-root { --wcvs-radius: 18px; --wcvs-gap: 14px; --wcvs-card-basis: var(--wcvs-desktop-card-basis, clamp(150px, 16vw, 210px)); position: relative; margin: 34px 0; }
.wcvs-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.wcvs-section-heading h2 { margin: 0; font-size: clamp(24px, 3vw, 40px); line-height: 1.1; }
.wcvs-feed-controls, .wcvs-feed-arrow { display: none !important; }
.wcvs-strip { display: flex; gap: var(--wcvs-gap); overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: none; padding: 4px 2px 12px; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: pan-x pan-y; }
.wcvs-strip.is-grabbing { cursor: grabbing; scroll-snap-type: none; }
.wcvs-strip::-webkit-scrollbar { display: none; }
.wcvs-card { flex: 0 0 var(--wcvs-card-basis); scroll-snap-align: start; appearance: none; border: 0; background: transparent; padding: 0; text-align: left; cursor: pointer; color: inherit; font: inherit; user-select: none; -webkit-user-select: none; }
.wcvs-card * { pointer-events: none; }
.wcvs-card-media { display: block; position: relative; aspect-ratio: 9/16; border-radius: var(--wcvs-radius); overflow: hidden; background: #111; box-shadow: 0 10px 30px rgba(0,0,0,.10); transform: translateZ(0); }
.wcvs-card-media > img,
.wcvs-card-preview > video,
.wcvs-card-preview > iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.wcvs-card-preview { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.wcvs-card-gradient { position: absolute; inset: 42% 0 0; z-index: 2; background: linear-gradient(to bottom, transparent, rgba(0,0,0,.72)); }
.wcvs-play-mark { position: absolute; z-index: 3; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: rgba(0,0,0,.34); backdrop-filter: blur(5px); padding: 0 0 0 3px; line-height: 1; }
.wcvs-card.is-previewing .wcvs-play-mark { opacity: 0; }
.wcvs-story-count { position: absolute; z-index: 4; top: 10px; right: 10px; color: #fff; background: rgba(0,0,0,.45); border-radius: 999px; padding: 5px 8px; font-size: 11px; line-height: 1; backdrop-filter: blur(6px); }
.wcvs-card-copy { display: grid; gap: 2px; padding: 9px 4px 0; }
.wcvs-card-copy strong { font-size: 14px; line-height: 1.25; }
.wcvs-card-price { font-size: 13px; opacity: .72; }
.wcvs-root--single { margin-top: 28px; clear: both; }
.wcvs-root--single { --wcvs-card-basis: clamp(140px, 18vw, 190px); }

.wcvs-modal[hidden] { display: none !important; }
.wcvs-modal { position: fixed !important; inset: 0 !important; z-index: 2147483000 !important; display: grid; place-items: center; padding: 18px; isolation: isolate; transform: none !important; filter: none !important; opacity: 1 !important; }
.wcvs-modal-backdrop { position: absolute; inset: 0; background: rgba(8,8,8,.80); backdrop-filter: blur(18px); }
.wcvs-stage { position: relative; z-index: 2; width: min(1220px, 100%); height: min(92vh, 900px); display: grid; grid-template-columns: minmax(150px,.62fr) minmax(300px,430px) minmax(150px,.62fr); gap: clamp(14px,2.2vw,32px); align-items: center; justify-content: center; }
.wcvs-viewer { position: relative; width: 100%; max-height: 90vh; aspect-ratio: 9/16; border-radius: 16px; overflow: hidden; background: #070707; box-shadow: 0 28px 90px rgba(0,0,0,.58); isolation: isolate; }
.wcvs-media-slot { position: absolute; inset: 0; background: #070707; }
.wcvs-media-slot video,
.wcvs-media-slot iframe { width: 100%; height: 100%; display: block; border: 0; object-fit: cover; background: #070707; }
.wcvs-media-slot .wcvs-external-fallback { height: 100%; display: grid; place-items: center; padding: 30px; text-align: center; color: #fff; background-size: cover; background-position: center; position: relative; }
.wcvs-media-slot .wcvs-external-fallback::before { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.58); }
.wcvs-media-slot .wcvs-external-fallback a { position: relative; z-index: 1; color: #fff; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; padding: 9px 14px; text-decoration: none; }

/* Barra no estilo Stories. */
.wcvs-progress { position: absolute; z-index: 11; top: 10px; left: 10px; right: 54px; display: flex; gap: 3px; align-items: center; }
.wcvs-progress button,
.wcvs-progress button:hover,
.wcvs-progress button:focus,
.wcvs-progress button:active { -webkit-appearance: none !important; appearance: none !important; flex: 1 1 0; display: block !important; width: auto !important; min-width: 0 !important; max-width: none !important; min-height: 0 !important; max-height: 3px !important; height: 2.5px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; background: rgba(255,255,255,.30) !important; border-radius: 999px !important; overflow: hidden; cursor: pointer; line-height: 0 !important; font-size: 0 !important; transform: none !important; }
.wcvs-progress button::after { content: ''; display: block; width: var(--wcvs-progress,0%); height: 100%; background: #fff; border-radius: inherit; transition: width .08s linear; }
.wcvs-progress button.is-complete::after { width: 100%; }
.wcvs-progress button.is-active { background: rgba(255,255,255,.42) !important; }

/* Controles quadrados: evita CSS do tema transformando os botões em pílulas. */
.wcvs-close,
.wcvs-product-nav,
.wcvs-comments-close { -webkit-appearance: none !important; appearance: none !important; box-sizing: border-box !important; display: grid !important; place-items: center !important; flex: none !important; padding: 0 !important; margin: 0 !important; border: 0 !important; outline: 0 !important; line-height: 0 !important; font-size: 0 !important; box-shadow: none !important; }
.wcvs-close svg,
.wcvs-product-nav svg,
.wcvs-comments-close svg { display: block !important; margin: 0 !important; position: static !important; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transform: none !important; }
.wcvs-close { position: absolute; z-index: 14; top: 18px; right: 10px; width: 34px !important; height: 34px !important; min-width: 34px !important; min-height: 34px !important; max-width: 34px !important; max-height: 34px !important; aspect-ratio: 1/1 !important; border-radius: 10px !important; background: rgba(13,13,13,.40) !important; color: #fff !important; cursor: pointer; backdrop-filter: blur(7px); }
.wcvs-close:hover,
.wcvs-close:focus { background: rgba(13,13,13,.62) !important; }
.wcvs-close svg { width: 18px !important; height: 18px !important; }

.wcvs-viewer::after { content: ''; position: absolute; z-index: 2; inset: 52% 0 0; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(0,0,0,.72) 88%); }
.wcvs-overlay { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; padding: 22px 70px 18px 18px; color: #fff; pointer-events: none; }
.wcvs-overlay-copy { pointer-events: none; }
.wcvs-product-kicker { display: none; }
.wcvs-viewer-title { margin: 0; color: #fff; font-size: clamp(17px,1.55vw,22px); line-height: 1.08; font-weight: 650; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.wcvs-viewer-price { margin-top: 4px; font-size: 13px; font-weight: 600; opacity: .92; }
.wcvs-viewer-price del { opacity: .58; }
.wcvs-viewer-caption { margin: 6px 0 0; max-width: 26em; font-size: 12px; line-height: 1.32; opacity: .82; }

/* Coluna de ações minimalista, alinhada como Stories/Reels. */
.wcvs-actions { position: absolute; z-index: 12; right: 10px; bottom: 18px; display: flex; flex-direction: column; align-items: center; gap: 9px; pointer-events: auto; }
.wcvs-action,
.wcvs-action:hover,
.wcvs-action:focus,
.wcvs-action:active { -webkit-appearance: none !important; appearance: none !important; position: relative; display: grid !important; place-items: center !important; box-sizing: border-box !important; width: 42px !important; min-width: 42px !important; max-width: 42px !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; aspect-ratio: 1/1 !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: #fff !important; font-size: 0 !important; line-height: 0 !important; text-decoration: none !important; cursor: pointer; box-shadow: none !important; transform: none !important; outline: 0 !important; }
.wcvs-action-icon { box-sizing: border-box !important; width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; aspect-ratio: 1/1 !important; display: grid !important; place-items: center !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: rgba(14,14,14,.42); border: 1px solid rgba(255,255,255,.20); backdrop-filter: blur(9px); box-shadow: 0 5px 18px rgba(0,0,0,.16); line-height: 0 !important; }
.wcvs-action:hover .wcvs-action-icon,
.wcvs-action:focus .wcvs-action-icon { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.34); }
.wcvs-action-icon svg { width: 20px !important; height: 20px !important; min-width: 20px !important; min-height: 20px !important; display: block !important; margin: 0 !important; position: static !important; transform: none !important; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wcvs-action-count { position: absolute; right: -3px; top: -3px; min-width: 16px; height: 16px; padding: 0 4px; display: grid; place-items: center; border-radius: 999px; background: rgba(0,0,0,.78); border: 1px solid rgba(255,255,255,.28); color: #fff; font-size: 9px; line-height: 1; }
.wcvs-action-label { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.wcvs-action[disabled] { opacity: .55; cursor: wait; }
.wcvs-action.is-loading .wcvs-action-icon { animation: wcvs-spin 1s linear infinite; }
@keyframes wcvs-spin { to { transform: rotate(360deg); } }

.wcvs-tap-zone { position: absolute; z-index: 3; top: 48px; bottom: 118px; width: 34%; border: 0 !important; background: transparent !important; padding: 0 !important; margin: 0 !important; cursor: pointer; }
.wcvs-tap-zone--prev { left: 0; }
.wcvs-tap-zone--next { right: 0; }

.wcvs-side-card { position: relative; width: min(100%,260px); aspect-ratio: 9/16; justify-self: center; border: 0 !important; border-radius: 16px !important; overflow: hidden; padding: 0 !important; cursor: pointer; background: #151515 center/cover no-repeat; box-shadow: 0 15px 50px rgba(0,0,0,.30); opacity: .62; transform: scale(.90); transition: transform .18s ease, opacity .18s ease; }
.wcvs-side-card:hover { opacity: .88; transform: scale(.93); }
.wcvs-side-card::after { content: attr(data-title); position: absolute; left: 0; right: 0; bottom: 0; padding: 46px 13px 13px; color: #fff; text-align: left; font-size: 12px; font-weight: 650; background: linear-gradient(to bottom,transparent,rgba(0,0,0,.72)); }
.wcvs-side-card.is-empty { visibility: hidden; pointer-events: none; }

.wcvs-product-nav { position: absolute; z-index: 9; top: 50%; width: 42px !important; height: 42px !important; min-width: 42px !important; min-height: 42px !important; max-width: 42px !important; max-height: 42px !important; aspect-ratio: 1/1 !important; margin-top: -21px !important; border-radius: 50% !important; background: rgba(255,255,255,.14) !important; color: #fff !important; cursor: pointer; backdrop-filter: blur(8px); }
.wcvs-product-nav:hover,
.wcvs-product-nav:focus { background: rgba(255,255,255,.23) !important; }
.wcvs-product-nav svg { width: 19px !important; height: 19px !important; }
.wcvs-product-nav--prev { left: -8px; transform: translateX(-100%) !important; }
.wcvs-product-nav--next { right: -8px; transform: translateX(100%) !important; }

/* Comentários do vídeo. */
.wcvs-comments-panel[hidden] { display: none !important; }
.wcvs-comments-panel { position: absolute; z-index: 30; left: 0; right: 0; bottom: 0; max-height: 72%; display: flex; flex-direction: column; color: #fff; background: rgba(12,12,12,.94); border-radius: 18px 18px 0 0; border-top: 1px solid rgba(255,255,255,.12); box-shadow: 0 -18px 50px rgba(0,0,0,.36); backdrop-filter: blur(20px); overflow: hidden; }
.wcvs-comments-head { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 8px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.wcvs-comments-head strong { font-size: 14px; font-weight: 650; }
.wcvs-comments-close { width: 32px !important; height: 32px !important; min-width: 32px !important; min-height: 32px !important; max-width: 32px !important; max-height: 32px !important; aspect-ratio: 1/1 !important; border-radius: 50% !important; background: rgba(255,255,255,.08) !important; color: #fff !important; cursor: pointer; }
.wcvs-comments-close svg { width: 16px !important; height: 16px !important; }
.wcvs-comments-list { flex: 1 1 auto; min-height: 90px; overflow-y: auto; padding: 12px 14px; display: grid; align-content: start; gap: 13px; scrollbar-width: thin; }
.wcvs-comments-empty { padding: 18px 6px; color: rgba(255,255,255,.64); font-size: 12px; line-height: 1.4; text-align: center; }
.wcvs-comment-item { display: grid; grid-template-columns: 30px 1fr; gap: 9px; align-items: start; }
.wcvs-comment-avatar { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,.11); font-size: 11px; font-weight: 700; }
.wcvs-comment-meta { display: flex; align-items: baseline; gap: 7px; }
.wcvs-comment-meta strong { font-size: 12px; }
.wcvs-comment-meta span { font-size: 9px; color: rgba(255,255,255,.46); }
.wcvs-comment-item p { margin: 3px 0 0; font-size: 12px; line-height: 1.38; color: rgba(255,255,255,.86); }
.wcvs-comment-form { flex: none; display: grid; gap: 7px; padding: 10px 12px 12px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.18); }
.wcvs-comment-row { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.wcvs-comment-form input,
.wcvs-comment-form textarea { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 10px !important; background: rgba(255,255,255,.07) !important; color: #fff !important; box-shadow: none !important; outline: none !important; font: inherit; font-size: 12px !important; }
.wcvs-comment-form input { height: 36px !important; min-height: 36px !important; padding: 0 10px !important; }
.wcvs-comment-form textarea { min-height: 64px !important; resize: vertical; padding: 9px 10px !important; line-height: 1.35; }
.wcvs-comment-form input::placeholder,
.wcvs-comment-form textarea::placeholder { color: rgba(255,255,255,.42); }
.wcvs-comment-form input:focus,
.wcvs-comment-form textarea:focus { border-color: rgba(255,255,255,.38) !important; }
.wcvs-comment-honeypot { position: absolute !important; left: -99999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
.wcvs-comment-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wcvs-comment-status { color: rgba(255,255,255,.50); font-size: 9px; line-height: 1.25; }
.wcvs-comment-submit,
.wcvs-comment-submit:hover,
.wcvs-comment-submit:focus { -webkit-appearance: none !important; appearance: none !important; min-height: 34px !important; height: 34px !important; padding: 0 14px !important; margin: 0 !important; border: 1px solid rgba(255,255,255,.78) !important; border-radius: 999px !important; background: #fff !important; color: #111 !important; font-size: 11px !important; font-weight: 700; line-height: 1 !important; box-shadow: none !important; cursor: pointer; }
.wcvs-comment-submit[disabled] { opacity: .55; cursor: wait; }
body.wcvs-modal-open { overflow: hidden !important; }

@media (max-width: 820px) {
  .wcvs-root { --wcvs-card-basis: clamp(138px,42vw,188px); --wcvs-gap: 10px; }
  .wcvs-modal { padding: 0; }
  .wcvs-stage { width: 100%; height: 100%; display: block; }
  .wcvs-viewer { width: 100%; max-width: none; height: 100%; max-height: none; aspect-ratio: auto; border-radius: 0; }
  .wcvs-side-card, .wcvs-product-nav { display: none !important; }
  .wcvs-progress { top: max(10px,env(safe-area-inset-top)); left: max(10px,env(safe-area-inset-left)); right: 54px; }
  .wcvs-close { top: max(18px,calc(env(safe-area-inset-top) + 8px)); right: max(10px,env(safe-area-inset-right)); }
  .wcvs-overlay { padding: 22px 66px max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
  .wcvs-actions { right: max(8px,env(safe-area-inset-right)); bottom: max(18px,env(safe-area-inset-bottom)); }
  .wcvs-tap-zone { bottom: 118px; }
  .wcvs-comments-panel { max-height: 76%; padding-bottom: env(safe-area-inset-bottom); }
}

@media (prefers-reduced-motion: reduce) {
  .wcvs-side-card { transition: none; }
  .wcvs-action.is-loading .wcvs-action-icon { animation: none; }
}


/* 1.0.6 — preview limpo do YouTube no carrossel.
   O iframe é recortado somente na capa em reprodução, removendo visualmente
   a área superior/inferior em que o YouTube Shorts injeta título e branding. */
.wcvs-card-preview { overflow: hidden; background: transparent; opacity: 0; }
.wcvs-card-preview:not(:empty) { opacity: 1; }
.wcvs-card.is-previewing .wcvs-card-preview { background: #111; }
.wcvs-card-preview--youtube .wcvs-provider-youtube {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
  transform: scale(1.28) !important;
  transform-origin: 50% 50% !important;
}

/* 1.0.5 — modal sempre acima do tema / cabeçalhos sticky. */
body > .wcvs-modal { z-index: 2147483000 !important; }
body.wcvs-modal-open > header,
body.wcvs-modal-open .site-header,
body.wcvs-modal-open .sticky-header,
body.wcvs-modal-open [class*="sticky-header"] { pointer-events: none; }

/* YouTube "clean mode". O próprio YouTube não oferece mais showinfo/modestbranding
   funcionais; controls=0 remove os controles suportados e este recorte visual evita
   que o chrome residual de Shorts ocupe o layout do story. */
.wcvs-media-slot--youtube { overflow: hidden; background: transparent; }
.wcvs-media-slot--youtube .wcvs-provider-youtube {
  position: absolute !important;
  inset: -2px !important;
  width: calc(100% + 4px) !important;
  height: calc(100% + 4px) !important;
  transform: scale(1.17) !important;
  transform-origin: 50% 50% !important;
  border: 0 !important;
  outline: 0 !important;
  background: transparent !important;
}
.wcvs-media-slot--youtube::before,
.wcvs-media-slot--youtube::after { display: none !important; content: none !important; }

/* 1.0.8 — capas estáticas: nenhuma prévia automática no carrossel. */
.wcvs-card:not(.is-previewing) .wcvs-card-preview { display: none !important; }
.wcvs-card-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }