/* ==========================================================================
   produto-variacao.css  [PROD-VARIACAO]
   Seletor de cor e tamanho da pagina de produto + bolinhas do card.

   Referencias de padrao: Zara, Uniqlo, Zalando, ASOS. O que foi copiado de
   proposito: swatch circular com a cor REAL da peca, nome da cor sempre
   visivel ao lado do rotulo, esgotado riscado na diagonal (nunca escondido)
   e anel de selecao com folga - anel colado no swatch some quando a cor da
   peca e parecida com a da marca.
   ========================================================================== */

:root {
  --pv-marca: var(--dbf-orange, #ff5500);
  --pv-borda: #d8d8d8;
  --pv-texto: #1a1a1a;
  --pv-suave: #6b6b6b;
  --pv-fundo-off: #f5f5f5;
}

/* ---------------------------------------------------------------- BLOCO */
.pv-bloco { margin: 1.1rem 0 .25rem; }
.pv-bloco + .pv-bloco { margin-top: 1.25rem; }

.pv-rotulo {
  display: flex; align-items: baseline; gap: .4rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--pv-suave);
  margin-bottom: .55rem;
}
.pv-rotulo .pv-valor {
  font-weight: 600; letter-spacing: 0; text-transform: none;
  font-size: .95rem; color: var(--pv-texto);
}
.pv-rotulo .pv-link-medidas {
  margin-left: auto; font-size: .78rem; font-weight: 600;
  text-transform: none; letter-spacing: 0;
  color: var(--pv-suave); text-decoration: underline; cursor: pointer;
  background: none; border: 0; padding: 0;
}
.pv-rotulo .pv-link-medidas:hover { color: var(--pv-marca); }

/* ---------------------------------------------------------------- CORES */
.pv-cores {
  display: flex; flex-wrap: wrap; gap: .6rem;
  /* No celular a lista rola na horizontal em vez de quebrar em 3 linhas e
     empurrar o botao de comprar para fora da tela. */
}
.pv-sw {
  position: relative; display: block;
  width: 40px; height: 40px; border-radius: 50%;
  padding: 3px; background: transparent;
  border: 1px solid var(--pv-borda);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
  text-decoration: none; flex: 0 0 auto;
}
.pv-sw-in {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: var(--c1, #ccc);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .10);
}
/* Estampa/bicolor: metade e metade, como ASOS e Zalando fazem. */
.pv-sw-in.is-duo { background: linear-gradient(135deg, var(--c1) 0 50%, var(--c2) 50% 100%); }

.pv-sw:hover { border-color: #9a9a9a; transform: translateY(-1px); }
.pv-sw:focus-visible { outline: 2px solid var(--pv-marca); outline-offset: 3px; }

/* SELECIONADO: anel NEUTRO ESCURO separado da peca por uma folga BRANCA.
   O anel NAO pode ser a cor da marca: uma peca laranja - justamente a cor
   da DBF - engoliria o anel e ninguem saberia qual cor esta escolhida.
   A folga branca resolve o outro extremo: contra uma peca preta, anel
   escuro colado tambem sumiria. Branco+escuro funciona contra QUALQUER cor,
   inclusive branco (a peca branca ja tem borda propria no .pv-sw-in). */
.pv-sw.is-on {
  border-color: var(--pv-anel, #111);
  border-width: 2px;
  padding: 3px;
  background: var(--pv-folga, #fff);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .06);
}

/* [PROD-COR-UNICA v2] Swatch com FOTO da cor — padrao Shein/Shopee/Amazon:
   quando a cor tem foto marcada, a bolinha vira MINIATURA da peca naquela
   cor. A bolinha pequena no canto mantem a leitura rapida da cor. */
.pv-swf {
  position: relative; display: block; flex: 0 0 auto;
  width: 54px; height: 70px; border-radius: 10px; overflow: hidden;
  border: 2px solid var(--pv-borda); background: #fff;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
  text-decoration: none;
}
.pv-swf img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv-swf .pv-swf-dot {
  position: absolute; top: 3px; left: 3px; width: 12px; height: 12px;
  border-radius: 50%; border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .2);
  background: var(--c1, #ccc);
}
.pv-swf .pv-swf-dot.is-duo { background: linear-gradient(135deg, var(--c1) 0 50%, var(--c2) 50% 100%); }
.pv-swf:hover { border-color: #9a9a9a; transform: translateY(-1px); }
.pv-swf:focus-visible { outline: 2px solid var(--pv-marca); outline-offset: 3px; }
.pv-swf.is-on { border-color: var(--pv-anel, #111); box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.pv-swf.is-on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--pv-anel, #111);
}
.pv-swf.is-off img { opacity: .4; filter: grayscale(.6); }
.pv-swf.is-off::before {
  content: "Esgotada"; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  background: rgba(0, 0, 0, .6); color: #fff; font-size: .58rem;
  text-align: center; padding: 1px 0;
}

/* Esgotado: risco diagonal. NAO some da lista - o cliente precisa saber que
   a cor existe (e pode encomendar), so nao esta disponivel agora. */
.pv-sw.is-off .pv-sw-in { opacity: .45; }
.pv-sw.is-off::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(to top left,
    transparent calc(50% - 1px), #8a8a8a calc(50% - 1px),
    #8a8a8a calc(50% + 1px), transparent calc(50% + 1px));
}

/* Cor cadastrada mas ainda sem foto: so aparece no ADMIN. */
.pv-sw.is-sem-foto { border-style: dashed; border-color: #e0a800; }

/* ------------------------------------------------------------- TAMANHOS */
.pv-tams { display: flex; flex-wrap: wrap; gap: .5rem; }
.pv-tam { position: relative; margin: 0; }
.pv-tam input { position: absolute; opacity: 0; width: 0; height: 0; }
.pv-tam span {
  display: flex; align-items: center; justify-content: center;
  min-width: 48px; height: 44px; padding: 0 .7rem;
  border: 1px solid var(--pv-borda); border-radius: 8px;
  font-size: .92rem; font-weight: 600; color: var(--pv-texto);
  background: #fff; cursor: pointer; user-select: none;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.pv-tam span:hover { border-color: #9a9a9a; }
.pv-tam input:checked + span {
  border-color: var(--pv-texto); background: var(--pv-texto); color: #fff;
}
.pv-tam input:focus-visible + span { outline: 2px solid var(--pv-marca); outline-offset: 2px; }

.pv-tam.is-off span {
  color: #b0b0b0; background: var(--pv-fundo-off); cursor: not-allowed;
  border-color: #e8e8e8;
  background-image: linear-gradient(to top right,
    transparent calc(50% - .5px), #c4c4c4 calc(50% - .5px),
    #c4c4c4 calc(50% + .5px), transparent calc(50% + .5px));
}

/* Pedido sem tamanho: a chamada de atencao e visual E textual, porque cor
   sozinha nao comunica para quem nao enxerga cor. */
.pv-tams.pv-erro .pv-tam span { border-color: #d10a2e; }
.pv-aviso {
  display: none; align-items: center; gap: .35rem;
  margin-top: .5rem; font-size: .85rem; font-weight: 600; color: #d10a2e;
}
.pv-aviso.is-on { display: flex; animation: pv-shake .35s ease; }
@keyframes pv-shake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .pv-aviso.is-on { animation: none; }
  .pv-sw, .pv-tam span { transition: none; }
}

/* ------------------------------------------------- BOLINHAS NO CARD */
.pv-card-cores {
  display: flex; align-items: center; gap: .28rem;
  margin-top: .4rem; min-height: 18px;
}
.pv-card-sw {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .18);
  background: var(--c1, #ccc); flex: 0 0 auto;
  cursor: pointer; padding: 0;
  transition: transform .12s ease, box-shadow .12s ease;
}
.pv-card-sw.is-duo { background: linear-gradient(135deg, var(--c1) 0 50%, var(--c2) 50% 100%); }
.pv-card-sw:hover, .pv-card-sw.is-on {
  transform: scale(1.25); box-shadow: 0 0 0 1.5px var(--pv-marca);
}
.pv-card-sw:focus-visible { outline: 2px solid var(--pv-marca); outline-offset: 2px; }
.pv-card-mais { font-size: .72rem; color: var(--pv-suave); margin-left: .15rem; }

/* ------------------------------------------------- TABELA DE MEDIDAS */
.pv-medidas-tab { width: 100%; border-collapse: collapse; font-size: .9rem; }
.pv-medidas-tab th, .pv-medidas-tab td {
  border: 1px solid #e4e4e4; padding: .5rem .6rem; text-align: center;
}
.pv-medidas-tab thead th { background: var(--pv-fundo-off); font-weight: 700; }

/* ------------------------------------------------------------- MOBILE */
@media (max-width: 575.98px) {
  .pv-cores {
    flex-wrap: nowrap; overflow-x: auto; padding-bottom: .35rem;
    scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  }
  .pv-sw { width: 38px; height: 38px; }
  .pv-tam span { min-width: 44px; height: 42px; }
}

/* --------------------------------------------------------- TEMA ESCURO */
@media (prefers-color-scheme: dark) {
  .pv-bloco:not([data-pv-tema="claro"]) {
    --pv-texto: #f2f2f2; --pv-suave: #b6b6b6;
    --pv-borda: #4a4a4a; --pv-fundo-off: #2a2a2a;
    /* No escuro o par se inverte: folga escura, anel claro. Manter o par do
       tema claro faria o anel branco sumir no fundo da pagina. */
    --pv-anel: #f2f2f2; --pv-folga: #1e1e1e;
  }
  .pv-bloco:not([data-pv-tema="claro"]) .pv-tam span { background: #1e1e1e; }
  .pv-bloco:not([data-pv-tema="claro"]) .pv-tam input:checked + span { background: #f2f2f2; color: #111; }
}