/* ============================================================
   Comparei — fotos reais dos produtos
   ============================================================ */

/* ---------- Thumb com foto (fundo branco também no tema escuro: fotos de embalagem têm fundo claro) ---------- */
.thumb--photo { background: #fff; border: 1px solid var(--line); overflow: hidden; padding: 3px; }
.thumb--photo img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: inherit; }
.thumb--lg.thumb--photo { padding: 6px; }
[data-theme="dark"] .thumb--photo { border-color: transparent; }

/* ---------- Foto grande na página do produto ---------- */
.product-photo { margin: 0 0 16px; }
.product-photo img {
    display: block; width: 100%; height: clamp(180px, 56vw, 260px); object-fit: contain;
    background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px;
}
[data-theme="dark"] .product-photo img { border-color: transparent; }
.product-photo figcaption { margin-top: 6px; font-size: 11.5px; color: var(--muted); text-align: right; }

/* ---------- Convite para enviar foto ---------- */
.photo-ask {
    position: relative; display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 14px;
    min-height: 44px; border-radius: var(--r-md); background: var(--brand-tint); border: 1px dashed var(--brand-tint-2);
    cursor: pointer; transition: transform .15s var(--ease-out);
}
.photo-ask:active { transform: scale(.99); }
.photo-ask input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.photo-ask__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 13px; background: var(--surface); color: var(--ink-2); }
.photo-ask__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; font-size: 13px; color: var(--muted); line-height: 1.3; }
.photo-ask__text strong { font-size: 14px; color: var(--ink); }
.photo-ask__cta { flex: none; font-size: 13px; font-weight: 700; color: var(--ink); padding: 8px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.photo-ask--busy { cursor: progress; opacity: .8; }
.photo-ask--busy .photo-ask__icon .icon { animation: photo-ask-spin 1s linear infinite; }
.photo-ask--sent { border-style: solid; background: var(--save-soft); border-color: transparent; cursor: default; }
.photo-ask--sent .photo-ask__icon { color: var(--save); }
@keyframes photo-ask-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .photo-ask--busy .photo-ask__icon .icon { animation: none; } }