/* ============================================================
   LOJA BRINQUEDO v2 · COMPONENTES COMPARTILHADOS (home + produto)
   Quadrados com furos e caixas de produto (Magna-Tiles) · faixas onduladas
   (Melissa & Doug) · cartões com moldura · botão de pausar vídeo
   ============================================================ */
/* botão de pausar vídeo */
.vbtn {
  position: absolute; right: 22px; bottom: 22px; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.92); display: grid; place-items: center;
}
.vbtn__pause { width: 12px; height: 14px; border-left: 4px solid var(--ink); border-right: 4px solid var(--ink); }
.vbtn.is-paused .vbtn__pause { width: 0; height: 0; border: none; border-left: 13px solid var(--ink); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }

/* ---------- 03 · Quadrados com furos (Magna-Tiles) ---------- */
.tiles { padding: clamp(56px, 7vw, 100px) var(--pad) clamp(40px, 5vw, 70px); max-width: 1440px; margin: 0 auto; }
.tiles__intro { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 18px 26px; margin-bottom: clamp(28px, 4vw, 48px); text-align: center; }
.tiles__intro h2 { font-size: clamp(28px, 3.2vw, 44px); }
.tiles__grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas: "a b c d" "e b f d";
}
.tile {
  --c: var(--sky);
  position: relative; overflow: hidden;
  aspect-ratio: 1; border-radius: 14px;
  background: var(--c); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.35s var(--ease);
}
.tile--tall { aspect-ratio: auto; }
.tile:hover { transform: translateY(-4px); }
/* os quatro furinhos de canto, como numa peça magnética */
.tile::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(circle, rgba(255,255,255,0.95) 4px, transparent 4.6px) left 14px top 14px / 9px 9px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.95) 4px, transparent 4.6px) right 14px top 14px / 9px 9px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.95) 4px, transparent 4.6px) left 14px bottom 14px / 9px 9px no-repeat,
    radial-gradient(circle, rgba(255,255,255,0.95) 4px, transparent 4.6px) right 14px bottom 14px / 9px 9px no-repeat;
}
.tile--sky { --c: var(--sky); } .tile--coral { --c: var(--coral); } .tile--ink { --c: var(--ink); }
.tile--mint { --c: var(--mint); } .tile--sun { --c: var(--sun); } .tile--grape { --c: var(--grape); }
.tile__label { position: absolute; left: 22px; bottom: 30px; z-index: 2; font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.tile__go { position: absolute; right: 22px; bottom: 28px; z-index: 2; }
.tile__go .ico { width: 20px; height: 20px; }
.tile__badge { position: absolute; top: 30px; left: 30px; z-index: 2; background: var(--white); color: var(--tomato); font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; }
.tile--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile--photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.45)); }
.tile__icon { width: 92px; height: 92px; border-radius: 22px; background: rgba(255,255,255,0.18); display: grid; place-items: center; }
.tile__icon .ico { width: 42px; height: 42px; }
.tile--sun, .tile--sun .tile__label { color: var(--ink); }

/* caixa de produto desenhada (vaga até chegar o packshot real) */
.pbox {
  --pc: var(--sky);
  width: 46%; aspect-ratio: 3 / 4;
  background: var(--white); color: var(--ink);
  border-radius: 8px;
  display: flex; flex-direction: column;
  box-shadow: 10px 12px 0 rgba(0,0,0,0.12), 0 18px 30px rgba(0,0,0,0.12);
  transform: rotate(-4deg);
  overflow: hidden; position: relative; z-index: 1;
  transition: transform 0.4s var(--ease);
}
.tile:hover .pbox, .pcard:hover .pbox { transform: rotate(-1deg) translateY(-4px); }
.pbox--lg { width: 58%; }
.pbox--sm { width: 40%; }
.pbox--sky { --pc: var(--sky); } .pbox--coral { --pc: var(--coral); } .pbox--sun { --pc: var(--sun); }
.pbox--mint { --pc: var(--mint); } .pbox--ink { --pc: var(--ink); }
.pbox__top { background: var(--pc); color: var(--white); display: flex; justify-content: space-between; align-items: center; padding: 7% 9%; font-size: clamp(9px, 0.8vw, 12px); font-weight: 600; }
.pbox--sun .pbox__top { color: var(--ink); }
.pbox__top span { background: rgba(255,255,255,0.9); color: var(--ink); border-radius: 999px; padding: 1px 7px; }
.pbox__win { flex: 1; margin: 8% 9% 4%; border-radius: 6px; background: color-mix(in srgb, var(--pc) 16%, white); display: grid; place-items: center; color: var(--pc); }
.pbox__win .ico { width: 42%; height: 42%; }
.pbox__name { padding: 0 9%; font-size: clamp(10px, 0.9vw, 13px); font-weight: 600; line-height: 1.2; }
.pbox__tag { margin: 4% 9% 9%; font-size: clamp(8px, 0.7vw, 11px); color: var(--ink-3); }

/* ---------- 04 · Faixas onduladas (Melissa & Doug) ---------- */
.band {
  --band: var(--sky-soft);
  position: relative; background: var(--band);
  margin: 70px 0;
  padding: clamp(40px, 5vw, 70px) var(--pad);
}
.band::before, .band::after {
  content: ""; position: absolute; left: 0; right: 0; height: 60px; background: var(--band);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V34C160 14 380 2 640 18s520 38 800 4V60Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'%3E%3Cpath d='M0 60V34C160 14 380 2 640 18s520 38 800 4V60Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.band::before { top: -59px; }
.band::after { bottom: -59px; transform: scale(-1, -1); }
.band--sky { --band: var(--sky-soft); }
.band--mint { --band: var(--mint-soft); }
.band__in { max-width: 1240px; margin: 0 auto; }

.sets__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.pcard { border: 7px solid #dfe1e6; border-radius: 18px; background: var(--white); overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.3s; }
.pcard:hover { border-color: #cfd3da; }
.pcard__media { position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center; }
.pcard__media--sky { background: var(--sky-soft); } .pcard__media--coral { background: var(--coral-soft); } .pcard__media--sun { background: var(--sun-soft); }
.pcard__media .pbox { width: 34%; }
.pbox-pair { display: flex; justify-content: center; align-items: center; width: 100%; }
.pbox-pair .pbox { width: 30%; margin: 0 -2%; }
.pbox-pair .pbox:nth-child(2) { transform: rotate(5deg) translateY(6px); }
.pbox-pair--3 .pbox { width: 26%; }
.pbox-pair--3 .pbox:nth-child(3) { transform: rotate(-8deg) translateY(10px); }
.pcard__badge { position: absolute; top: 16px; left: 16px; z-index: 2; background: var(--tomato); color: var(--white); font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 999px; }
.pcard__badge--new { background: var(--mint); }
.pcard__badge--ink { background: var(--ink); }
.pcard__body { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.pcard__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pcard h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.pcard__price b { font-size: 19px; font-weight: 600; }
.pcard__price s { font-size: 14px; color: var(--ink-4); margin-left: 6px; }
.pcard p { color: var(--ink-3); font-size: 14px; margin-bottom: 12px; }
.pcard .btn { margin-top: auto; }


.tile__icon--ink { background: rgba(255,255,255,0.7); color: var(--ink); }
.tile:not(.tile--photo) .tile__go .ico { transform: rotate(-90deg); }
.band--grape { --band: var(--grape-soft); }
.band--coral { --band: var(--coral-soft); }
@media (max-width: 1000px) {
  .sets__grid { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 640px) {
  .band::before, .band::after { height: 30px; }
  .band::before { top: -29px; }
  .band::after { bottom: -29px; }
}

/* formas de peça Magna (o que tem dentro, menu do celular) */
.shape { width: 30px; height: 30px; flex: none; display: inline-block; }
.shape--sq { background: var(--sky); border-radius: 4px; }
.shape--tri { background: var(--coral); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.shape--dot { background: var(--sun); border-radius: 50%; }
.shape--rsq { background: var(--mint); border-radius: 9px; transform: rotate(12deg); }

/* logo na embalagem desenhada (ativo distintivo "a caixa") */
.pbox__logo { height: 1.15em; width: auto; --logo-ink: #ffffff; display: block; }
.pbox--sun .pbox__logo { --logo-ink: var(--ink); }

/* ícones sobre cor: preenchimento branco; dentro da caixa: acompanha a cor da caixa */
.tile .ico, .vbtn .ico { --ico-tint: #fff; --ico-tint-op: 0.35; }
.pbox__win .ico { --ico-tint: currentColor; --ico-tint-op: 0.22; }
.tile__icon--ink .ico { color: var(--ink); --ico-tint: var(--tomato-2); --ico-tint-op: 0.4; }