/* RUNA — utilitários complementares (classes ausentes no CSS compilado original,
   usados pelas páginas novas: checkout e minha-conta). Valores idênticos ao Tailwind. */

/* ---------- Tipografia ampliada (legibilidade em todas as páginas) ----------
   Base de 16px → 18px: todos os tamanhos em rem (text-xs, text-sm…) sobem ~12%.
   Os micro-textos em px do design original sobem ~3px cada. */

html { font-size: 18px; }

.text-\[7px\]  { font-size: 10px; }
.text-\[8px\]  { font-size: 11px; }
.text-\[9px\]  { font-size: 12px; }
.text-\[10px\] { font-size: 13px; }
.text-\[11px\] { font-size: 14.5px; }

@media (min-width: 768px) {
  .md\:text-\[10px\] { font-size: 13px; }
}

/* variantes responsivas ausentes no CSS purgado (usadas nos títulos/abas) */
@media (min-width: 640px) {
  .sm\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .sm\:text-lg { font-size: 1.125rem; line-height: 1.75rem; }
  .sm\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
}

.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.opacity-100 { opacity: 1; }
.left-4 { left: 1rem; }
.w-44 { width: 11rem; }
.h-44 { height: 11rem; }
.bg-secondary\/40 { background-color: hsl(var(--secondary) / 0.4); }
.break-all { word-break: break-all; }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.col-span-2 { grid-column: span 2 / span 2; }
.accent-primary { accent-color: hsl(var(--primary)); }

@media (min-width: 640px) {
  .sm\:col-span-2 { grid-column: span 2 / span 2; }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .lg\:col-span-2 { grid-column: span 2 / span 2; }
  .lg\:col-span-3 { grid-column: span 3 / span 3; }
}

/* ---------- Visualizador de imagem do produto (zoom / pan / rotação) ---------- */

.rn-zoom-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: hsl(var(--card));
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.rn-zoom-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center center;
  transition: transform 0.18s ease-out;
  will-change: transform;
  cursor: zoom-in;
}

.rn-zoom-stage.rn-zoomed img { cursor: grab; }
.rn-zoom-stage.rn-dragging img { cursor: grabbing; transition: none; }

.rn-zoom-controls {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.375rem;
  z-index: 5;
}

.rn-zoom-controls button {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--background) / 0.75);
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  font-size: 0.625rem;
  letter-spacing: 0.05em;
  backdrop-filter: blur(4px);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.rn-zoom-controls button:hover {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
}

.rn-zoom-stage:fullscreen { aspect-ratio: auto; }
.rn-zoom-stage:fullscreen img { object-fit: contain; }

/* ---------- Visualizador de giro 360° ---------- */

.rn-spin-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: hsl(var(--card));
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: ew-resize;
}

.rn-spin-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transform-origin: center center;
  transition: transform 0.18s ease-out;
  will-change: transform;
}

.rn-spin-stage.rn-zoomed { cursor: grab; }
.rn-spin-stage.rn-dragging { cursor: grabbing; }
.rn-spin-stage.rn-dragging img { transition: none; }

.rn-spin-stage:fullscreen { aspect-ratio: auto; }
.rn-spin-stage:fullscreen img { object-fit: contain; }

.rn-spin-hint {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.25rem 0.75rem;
  background: hsl(var(--background) / 0.75);
  border: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  pointer-events: none;
  transition: opacity 0.4s;
}

.rn-spin-stage.rn-spin-touched .rn-spin-hint { opacity: 0; }

.rn-spin-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.rn-thumb-spin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: hsl(var(--secondary) / 0.6);
  color: hsl(var(--primary));
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}