/* ============================================================
   Obra Certa · Product Card (Variant C — "Diagonal + faixa de frete")
   Pixel-perfect com o handoff em Product Cards.html.
   Namespace: .mo-pcard. Outer também recebe .mo-tile pra preservar
   o sizing de carrosséis/grids existentes.
   ============================================================ */

/* Tokens — alinhados ao design (não dependem das vars do home pra
   funcionar em arquivos, related, busca, etc.). */
:root {
  --mp-purple:#421685;
  --mp-purple-2:#2e0a64;
  --mp-purple-3:#7641c4;
  --mp-green:#4eb33a;
  --mp-green-2:#3d8f2a;
  --mp-green-50:#eef9eb;
  --mp-ink:#1b1226;
  --mp-ink-2:#3a2e4a;
  --mp-ink-3:#6b6478;
  --mp-ink-4:#a7a0b3;
  --mp-line:#ece8f0;
  --mp-line-2:#dad5e0;
  --mp-warn:#f5a623;
}

/* ─────────────────────────────────────────────────────────────
   OUTER CARD
   ───────────────────────────────────────────────────────────── */
.mo-pcard {
  background:#fff;
  border:1px solid var(--mp-line);
  border-radius:14px;
  display:flex; flex-direction:column;
  position:relative;
  overflow:hidden;
  box-shadow:0 1px 0 rgba(20,8,40,.04);
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  height:100%;                /* iguala altura entre cards na mesma linha */
  /* Min-height calibrado pra altura "cheia" (com sale + variável + a partir de
     + faixa de frete grátis):
     12 (pad-top) + 188 (frame) + ~35 (faixa frete) + 10 (body pad-top) + 14 (brand)
     + 32 (name) + 14 (rating) + 14 (from) + 12 (a partir de) + 30 (price)
     + 14 (install) + 14 (atSight) + 8 (cta-margin) + 38 (cta) + 12 (pad-bottom)
     ≈ 466px. (É um piso; cards numa mesma linha igualam via stretch.) */
  min-height:466px;
  transition: box-shadow .18s ease, transform .18s ease;
  isolation:isolate;          /* contém os z-index internos */
}
.mo-pcard:hover {
  box-shadow:0 6px 18px -8px rgba(20,8,40,.18);
}
.mo-pcard.is-sold-out { opacity:.65; }

/* Quando o card É o próprio item flex/grid da track (classes .mo-pcard.mo-tile
   no mesmo elemento), height:100% resolve contra a track de altura "auto" e vira
   altura-de-conteúdo, anulando o align-items:stretch e deixando os cards desalinhados.
   height:auto devolve o controle pro stretch → todos igualam pela altura do mais alto. */
.mo-pcard.mo-tile { height:auto; }

/* ─────────────────────────────────────────────────────────────
   DIAGONAL CORNER RIBBON (OFF %)
   ───────────────────────────────────────────────────────────── */
.mo-pcard__ribbon {
  position:absolute; top:0; left:14px; z-index:3;
  background:linear-gradient(180deg, var(--mp-green) 0%, var(--mp-green-2) 100%);
  color:#fff;
  padding:8px 10px 14px;
  font-size:13px; font-weight:900; letter-spacing:-.4px;
  -webkit-clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
          clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  min-width:44px; text-align:center; line-height:1;
  box-shadow:0 6px 14px rgba(78,179,58,.32);
  pointer-events:none;
}
.mo-pcard__ribbon-l {
  display:block;
  font-size:7.5px; font-weight:800; letter-spacing:.6px;
  opacity:.85; text-transform:uppercase; margin-bottom:1px;
}
.mo-pcard__ribbon-n { display:block; }

/* ─────────────────────────────────────────────────────────────
   HEART (favoritar) — top-right
   ───────────────────────────────────────────────────────────── */
.mo-pcard__fav {
  position:absolute; top:10px; right:10px; z-index:3;
  width:30px; height:30px;
  background:#fff;
  border:1px solid var(--mp-line);
  border-radius:50%;
  color:var(--mp-ink-3);
  font-size:14px; font-weight:600; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 1px 3px rgba(20,8,40,.06);
  transition: color .15s, border-color .15s, transform .15s;
  padding:0;
}
.mo-pcard__fav:hover {
  color:var(--mp-purple);
  border-color:var(--mp-purple);
  transform:scale(1.06);
}

/* ─────────────────────────────────────────────────────────────
   MEDIA AREA — white-bg image, translucent fast-delivery chip
   ───────────────────────────────────────────────────────────── */
.mo-pcard__media {
  display:block;
  padding:12px 12px 0;
  position:relative;
  text-decoration:none;
}
.mo-pcard__frame {
  height:188px;
  border-radius:10px;
  position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
  border:1px solid #f5f3f8;
}
.mo-pcard__img {
  max-width:88%; max-height:80%;
  width:auto; height:auto;
  object-fit:contain;
  display:block;
}
.mo-pcard__glyph {
  font-size:88px; line-height:1;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.10));
}

/* ─────────────────────────────────────────────────────────────
   SELO "ENTREGA RÁPIDA" sobre a foto (modelo · Variante C).
   Pílula escura translúcida, raio do canto inferior-esquerdo.
   ───────────────────────────────────────────────────────────── */
.mo-pcard__fast {
  position:absolute;
  left:20px; bottom:8px;
  z-index:2;
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px 4px 7px;
  border-radius:999px;
  background:rgba(27,18,38,.86);
  color:#fff;
  font-size:9.5px; font-weight:900;
  letter-spacing:.5px; text-transform:uppercase;
  white-space:nowrap;
  -webkit-backdrop-filter:blur(6px);
          backdrop-filter:blur(6px);
  pointer-events:none;
}
.mo-pcard__fast svg { display:block; flex-shrink:0; color:var(--mp-green); }

/* Sold out overlay */
.mo-pcard__soldout {
  position:absolute; inset:12px 12px 0;
  border-radius:10px;
  background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(2px);
          backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center;
  z-index:2;
}
.mo-pcard__soldout::after {
  content:"esgotado";
  background:#1b1226; color:#fff;
  padding:6px 14px; border-radius:999px;
  font-size:10px; font-weight:900;
  letter-spacing:1.2px; text-transform:uppercase;
}

/* ─────────────────────────────────────────────────────────────
   FAIXA "FRETE GRÁTIS" abaixo da foto (modelo · Variante C):
   ícone caminhão em círculo verde + texto + leader pontilhado.
   ───────────────────────────────────────────────────────────── */
.mo-pcard__ship {
  margin:10px 14px 0;
  padding:6px 4px;
  display:flex; align-items:center; gap:8px;
  border-top:1px solid rgba(78,179,58,.14);
  border-bottom:1px solid rgba(78,179,58,.14);
  background:linear-gradient(90deg, rgba(78,179,58,.07) 0%, transparent 80%);
}
.mo-pcard__ship-icon {
  flex-shrink:0;
  width:22px; height:22px;
  border-radius:999px;
  background:var(--mp-green);
  display:flex; align-items:center; justify-content:center;
}
.mo-pcard__ship-icon svg { display:block; }
.mo-pcard__ship-text {
  font-size:11px; font-weight:900;
  letter-spacing:.2px;
  color:var(--mp-green-2);
  white-space:nowrap;
}
.mo-pcard__ship-leader {
  flex:1; height:1px;
  border-top:1px dotted rgba(78,179,58,.34);
}

/* ─────────────────────────────────────────────────────────────
   BODY
   ───────────────────────────────────────────────────────────── */
.mo-pcard__body {
  padding:10px 14px 12px;
  display:flex; flex-direction:column; gap:5px;
  flex:1;                       /* empurra o CTA pro fundo */
}
.mo-pcard__brand {
  font-size:9px; font-weight:900; letter-spacing:1.4px;
  color:var(--mp-purple); text-transform:uppercase;
}
.mo-pcard .mo-pcard__name,
a.mo-pcard__name {
  font-size:12px; font-weight:800; color:var(--mp-ink);
  line-height:1.3; min-height:32px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
  text-decoration:none;
}
.mo-pcard .mo-pcard__name:hover,
a.mo-pcard__name:hover { color:var(--mp-purple); text-decoration:none; }

.mo-pcard__rating {
  display:flex; align-items:center; gap:5px;
  font-size:10px; font-weight:700; color:var(--mp-ink-3);
}
.mo-pcard__stars {
  display:inline-flex; gap:1px;
  font-size:11px; letter-spacing:.5px;
  color:var(--mp-warn);
}
.mo-pcard__stars span.is-off { color:#e3dfe9; }
.mo-pcard__rate { font-weight:800; color:var(--mp-ink-2); font-size:10px; }
.mo-pcard__count { color:var(--mp-ink-4); font-weight:600; }
.mo-pcard__rating--empty { color:var(--mp-ink-4); font-weight:700; }

.mo-pcard__from {
  font-size:10px; font-weight:600;
  color:var(--mp-ink-3); text-decoration:line-through;
  margin-top:2px;
}

.mo-pcard__price {
  display:flex; align-items:baseline; gap:3px; flex-wrap:wrap;
}
.mo-pcard__price-prefix {
  width:100%;
  font-size:9.5px; font-weight:700;
  color:var(--mp-ink-3); letter-spacing:.2px;
  text-transform:lowercase;
  margin-bottom:-2px;
}
.mo-pcard__price-curr {
  font-size:11px; font-weight:700; color:var(--mp-ink-3);
}
.mo-pcard__price-int {
  font-size:26px; font-weight:900; color:var(--mp-purple);
  letter-spacing:-.7px; line-height:1;
}
.mo-pcard__price-dec {
  font-size:16px; font-weight:900; color:var(--mp-purple);
}

.mo-pcard__install {
  font-size:10px; font-weight:600; color:var(--mp-ink-3);
  line-height:1.3;
}
.mo-pcard__install b { color:var(--mp-ink-2); font-weight:800; }

.mo-pcard__atsight {
  font-size:10px; font-weight:800; color:var(--mp-green-2);
}
.mo-pcard__atsight em {
  font-style:normal; font-weight:700; color:var(--mp-ink-3);
}

/* Spacer empurra CTA pro fundo do card */
.mo-pcard__spacer { flex:1; min-height:4px; }

/* ─────────────────────────────────────────────────────────────
   CTA — "Comprar" único, gradiente verde → checkout
   ───────────────────────────────────────────────────────────── */
.mo-pcard__cta {
  margin-top:8px;
  background:linear-gradient(180deg, var(--mp-green) 0%, var(--mp-green-2) 100%);
  color:#fff;
  border:0; border-radius:9px;
  height:38px; width:100%;
  font-weight:900; font-size:13px;
  letter-spacing:1px; text-transform:uppercase;
  font-family:inherit;
  display:flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; cursor:pointer;
  box-shadow:0 6px 14px rgba(78,179,58,.30), inset 0 -2px 0 rgba(0,0,0,.10);
  transition: transform .12s ease, box-shadow .12s ease;
}
.mo-pcard__cta:hover {
  color:#fff;
  box-shadow:0 8px 18px rgba(78,179,58,.36), inset 0 -2px 0 rgba(0,0,0,.10);
}
.mo-pcard__cta:active { transform: translateY(1px); }
.mo-pcard__cta svg { display:block; }

/* O CTA é um <a> verde preenchido. Em contextos que fazem `wrapper a {
   color:inherit }` (ex.: .pdp-mo a, 0,1,1) o link herdaria o ink e venceria o
   .mo-pcard__cta (0,1,0) — texto escuro sobre verde. Reafirmamos o branco com
   especificidade (0,2,1), que vence qualquer `<wrapper> a` (0,1,1). */
a.mo-pcard__cta:link,
a.mo-pcard__cta:visited,
a.mo-pcard__cta:hover,
a.mo-pcard__cta:focus,
a.mo-pcard__cta:active { color:#fff; }

.mo-pcard__cta.is-disabled,
.mo-pcard__cta[aria-disabled="true"] {
  background:#cfc9d6;
  box-shadow:none; cursor:not-allowed;
  pointer-events:none;
}

/* ─────────────────────────────────────────────────────────────
   QUANDO O CARD VIVE DENTRO DE LI.PRODUCT (arquivos WC)
   ───────────────────────────────────────────────────────────── */
ul.products li.product { padding:0 !important; margin:0; list-style:none; }
ul.products li.product > .mo-pcard,
li.product > .mo-pcard {
  width:100%;
  height:100%;
  margin:0;
}
ul.products li.product::before,
ul.products li.product::after { display:none !important; }

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE — mobile compacta (≤ 640px) o tipográfico e a foto
   ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .mo-pcard { min-height:434px; }
  .mo-pcard__frame { height:160px; }
  .mo-pcard__price-int { font-size:22px; }
  .mo-pcard__price-dec { font-size:14px; }
}

/* ─────────────────────────────────────────────────────────────
   PÍLULA TOPO DO BODY — opcional, parametrizada via top_pill
   ───────────────────────────────────────────────────────────── */
.mo-pcard__pill {
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 9px;
  border-radius:999px;
  font-size:9.5px; font-weight:900;
  letter-spacing:.5px; text-transform:uppercase;
  white-space:nowrap;
  margin:0 0 2px;
  box-shadow:0 2px 8px rgba(0,0,0,.08);
}
.mo-pcard__pill svg { display:block; }

/* Variantes */
.mo-pcard__pill--bestseller       { background:var(--mp-warn);  color:#5a3a00; box-shadow:0 2px 8px rgba(245,166,35,.32); }
.mo-pcard__pill--hot              { background:#e6442a;          color:#fff;    box-shadow:0 2px 8px rgba(230,68,42,.32);  }
.mo-pcard__pill--new              { background:var(--mp-purple-3); color:#fff;  box-shadow:0 2px 8px rgba(118,65,196,.32); }
.mo-pcard__pill--available-today  { background:var(--mp-green); color:#fff;    box-shadow:0 2px 8px rgba(78,179,58,.32);  }
.mo-pcard__pill--combo            { background:#2a6fdb;         color:#fff;    box-shadow:0 2px 8px rgba(42,111,219,.30); }
.mo-pcard__pill--gift             { background:#7e3aa8;         color:#fff;    box-shadow:0 2px 8px rgba(126,58,168,.32); }
.mo-pcard__pill--warranty         { background:var(--mp-purple-2); color:#fff; box-shadow:0 2px 8px rgba(46,10,100,.30);  }
.mo-pcard__pill--cashback         { background:var(--mp-purple); color:#fff;   box-shadow:0 2px 8px rgba(66,22,133,.30);  }
.mo-pcard__pill--outlet           { background:#a06a00;         color:#fff;    box-shadow:0 2px 8px rgba(160,106,0,.30);  }
.mo-pcard__pill--pix              { background:var(--mp-green-2); color:#fff;  box-shadow:0 2px 8px rgba(61,143,42,.32);  }

@media (max-width: 640px) {
  .mo-pcard__pill { font-size:8.5px; padding:2px 7px; }
  .mo-pcard { border-radius:12px; min-height:392px; }
  .mo-pcard__media { padding:9px 9px 0; }
  .mo-pcard__frame { height:132px; border-radius:8px; }
  .mo-pcard__ribbon {
    left:10px; padding:6px 8px 11px;
    font-size:11px; min-width:36px;
  }
  .mo-pcard__ribbon-l { font-size:6.5px; }
  .mo-pcard__fav { width:26px; height:26px; font-size:12px; top:8px; right:8px; }
  .mo-pcard__fast {
    left:16px; bottom:6px;
    font-size:8.5px;
    padding:3px 7px 3px 6px;
  }
  .mo-pcard__ship {
    margin:8px 10px 0;
    padding:5px 3px;
    gap:6px;
  }
  .mo-pcard__ship-icon { width:18px; height:18px; }
  .mo-pcard__ship-text { font-size:9.5px; }
  .mo-pcard__body {
    padding:8px 11px 10px;
    gap:3px;
  }
  .mo-pcard__brand { font-size:8px; letter-spacing:1.2px; }
  .mo-pcard__name { font-size:11px; min-height:28px; }
  .mo-pcard__rating, .mo-pcard__rate, .mo-pcard__count { font-size:9px; }
  .mo-pcard__stars { font-size:10px; }
  .mo-pcard__from { font-size:9px; }
  .mo-pcard__price-curr { font-size:10px; }
  .mo-pcard__price-int { font-size:22px; }
  .mo-pcard__price-dec { font-size:13px; }
  .mo-pcard__install, .mo-pcard__atsight { font-size:9px; }
  .mo-pcard__cta {
    height:32px; font-size:11px;
    border-radius:8px;
    letter-spacing:.8px;
  }
}

/* Selo Black Novembro — tinta da loja, anel verde. Só o selo é escuro. */
.cdc-bn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:96px;
  height:48px;
  padding:0;
  border-radius:50%;
  background:#1b1226;
  color:#fff;
  border:1.5px solid #4eb33a;
  box-shadow:0 8px 18px rgba(27,18,38,.18);
  transform:rotate(-8deg);
  text-align:center;
  line-height:1.05;
  flex-shrink:0;
  pointer-events:none;
}
.cdc-bn__in { display:block; }
.cdc-bn b {
  display:block;
  font-family:'Nunito', system-ui, sans-serif;
  font-size:11px;
  font-weight:900;
  letter-spacing:-.2px;
  text-transform:none;
}
.cdc-bn small {
  display:block;
  margin-top:1px;
  font-family:'Nunito', system-ui, sans-serif;
  font-size:7.5px;
  font-weight:800;
  letter-spacing:.01em;
  color:#b7f0a8;
  text-transform:none;
}
.cdc-bn--sm { width:74px; height:38px; }
.cdc-bn--sm b { font-size:8.5px; }
.cdc-bn--sm small { font-size:6.5px; }
.cdc-bn--card {
  position:absolute;
  left:18px;
  top:16px;
  z-index:3;
  width:68px;
  height:34px;
}
.cdc-bn--card b { font-size:8px; }
.cdc-bn--card small { font-size:6px; }
.cdc-bn--tile {
  position:absolute;
  right:12px;
  bottom:12px;
  z-index:2;
  width:70px;
  height:36px;
}
.cdc-bn--tile b { font-size:8px; }
.cdc-bn--tile small { font-size:6px; }
.mo-pcard__fast { display:none; }

.cdc-rot {
  position:relative;
  display:block;
  height:20px;
  margin:0 0 2px;
}
.cdc-rot__item {
  position:absolute;
  left:0;
  top:0;
  margin:0;
  opacity:0;
  animation:cdc-rot calc(var(--cdc-n, 4) * 3.2s) ease-in-out infinite;
}
@keyframes cdc-rot {
  0% { opacity:0; transform:translateY(4px); }
  5%, 18% { opacity:1; transform:none; }
  24%, 100% { opacity:0; transform:translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .cdc-rot__item { animation:none; opacity:0; }
  .cdc-rot__item:first-child { position:relative; opacity:1; }
  .cdc-bn { transform:none; }
}