/* assets/css/custom.css
   Overrides globais (frontend) – tipografia e cores
   Ajuste estes tokens em :root para mudar o site inteiro.
*/

:root{
  /* Cores */
  --ub-text: #0f172a;     /* slate-900 */
  --ub-muted: #dfe8f5; /*#475569;     slate-600 */

  --ub-slate-400: #94a3b8;
  --ub-slate-500: #64748b;
  --ub-slate-600: #475569;
  --ub-slate-700: #334155;
  --ub-slate-900: #0f172a;

  /* Escala tipográfica (edite aqui) */
  --ub-text-10: 0.625rem;     /* 10px */
  --ub-text-11: 0.6875rem;    /* 11px */
  --ub-text-12: 0.75rem;      /* 12px */

  --ub-text-xs: 0.8rem;       /* antes: 0.75rem */
  --ub-text-sm: 0.92rem;      /* antes: 0.875rem */
  --ub-text-base: 1rem;
  --ub-text-lg: 1.125rem;
  --ub-text-xl: 1.25rem;
  --ub-text-2xl: 1.55rem;
  --ub-text-3xl: 1.95rem;

  --ub-leading: 1.45;
  --ub-leading-tight: 1.15;

  /* Títulos (padrão quando NÃO há classes Tailwind no elemento) */
  --ub-h1: 2.00rem;
  --ub-h2: 1.55rem;
  --ub-h3: 1.25rem;
  --ub-h4: 1.10rem;
  --ub-h5: 1.00rem;
  --ub-h6: 0.95rem;

  /* =========================================================
     Marketplaces (pastel) – configurável via CSS
     Ajuste estas variáveis para mudar a cor de fundo dos botões.
     ========================================================= */
  --ub-mp-bg-default: #ded5bd;
  --ub-mp-bg-mercadolivre: #fff3b0;
  --ub-mp-bg-amazon: #dbeafe;
  --ub-mp-bg-shopee: #ffe4e6;
}

/* Fonte global */
body{
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Baseline (quando o elemento não tem classes de tamanho/cor) */
main p{
  color: var(--ub-muted);
  font-size: var(--ub-text-sm);
  line-height: var(--ub-leading);
}

main h1, main h2, main h3, main h4, main h5, main h6{
/*  color: var(--ub-text);*/
  font-weight: 700;
  line-height: var(--ub-leading-tight);
}

main h1{ font-size: var(--ub-h1); }
main h2{ font-size: var(--ub-h2); }
main h3{ font-size: var(--ub-h3); }
main h4{ font-size: var(--ub-h4); }
main h5{ font-size: var(--ub-h5); }
main h6{ font-size: var(--ub-h6); }

/* =========================================================
   Overrides de utilitárias Tailwind MAIS usadas no site
   (escopadas em <main> para não mexer no header/botões)
   ========================================================= */

/* Tamanhos */
main .text-\[10px\]{ font-size: var(--ub-text-10) !important; }
main .text-\[11px\]{ font-size: var(--ub-text-11) !important; }
main .text-\[12px\]{ font-size: var(--ub-text-12) !important; }

main .text-xs{ font-size: var(--ub-text-xs) !important; line-height: var(--ub-leading) !important; }
main .text-sm{ font-size: var(--ub-text-sm) !important; line-height: var(--ub-leading) !important; }
main .text-base{ font-size: var(--ub-text-base) !important; }
main .text-lg{ font-size: var(--ub-text-lg) !important; }
main .text-xl{ font-size: var(--ub-text-xl) !important; }
main .text-2xl{ font-size: var(--ub-text-2xl) !important; line-height: var(--ub-leading-tight) !important; }
main .text-3xl{ font-size: var(--ub-text-3xl) !important; line-height: var(--ub-leading-tight) !important; }

/* Cores Slate */
main .text-slate-400{ color: var(--ub-slate-400) !important; }
main .text-slate-500{ color: var(--ub-slate-500) !important; }
main .text-slate-600{ color: var(--ub-slate-600) !important; }
main .text-slate-700{ color: var(--ub-slate-700) !important; }
main .text-slate-900{ color: var(--ub-slate-900) !important; }

/* Estilos que estavam inline nas páginas (Hero dots etc.) */
.hero-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.45);
  transition: all .25s ease;
}
.hero-dot.active{
  width: 20px;
  background: rgba(255,255,255,.9);
}
.hero-bg-gradient{
  background: radial-gradient(1200px 600px at 50% 20%, rgba(255,255,255,.18), transparent 60%);
}

/* Pill (usado em alguns destaques) */
.ub-pill{
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .6rem;
  border-radius: 999px;
  font-size: var(--ub-text-11);
}

/* === Marketplace buttons (cards / produto.php) === */

/* Acessibilidade (caso não exista no tema) */
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

/* Botão de marketplace padronizado */
.ub-mp-btn{
  background: var(--ub-mp-bg-default) !important;
  color: #111827 !important; /* slate-900 */
  text-decoration: none;
  position: relative;
}

/* Background por marketplace (classes vêm de ub_marketplace_pill_classes) */
.ub-mp-btn.ub-mp-mercadolivre{ background: var(--ub-mp-bg-mercadolivre) !important; }
.ub-mp-btn.ub-mp-amazon{ background: var(--ub-mp-bg-amazon) !important; }
.ub-mp-btn.ub-mp-shopee{ background: var(--ub-mp-bg-shopee) !important; }
.ub-mp-btn.ub-mp-default{ background: var(--ub-mp-bg-default) !important; }

.ub-mp-btn:hover{
  filter: brightness(0.97);
}

/* Bloco "VER FOTO" dentro do botão */
.ub-mp-photo-trigger{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-right: 8px;
  margin-right: 8px;
  user-select: none;
  cursor: pointer;
  flex-shrink: 0;
  /* Para permitir o logo extrapolar a altura do botão */
  align-self: stretch;
  height: 100%;
  overflow: visible;
}

.ub-mp-photo-trigger.is-disabled{
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}

.ub-mp-photo-icon{
  width: 22px;
  height: 22px;
  display: block;
  object-fit: contain;
}

/* Logo do marketplace */
.ub-mp-market-icon {
  width: 23px;
  height: 23px;
  object-fit: contain;
  display: block;
  transform: scale(2.1);
  transform-origin: center;
  margin-right: 20px;
  border-color: #ffffff;
  border-radius: 8px;
  border-width: 3px 3px 3px 3px;
}

/* Troca VER FOTO / FOTO ACIMA por ícones de olho */
.ub-mp-eye{
  display: inline-flex;
  align-items: center;
}
.ub-mp-eye-icon{
  width: 20px;
  height: 20px;
  display: block;
}
.ub-mp-photo-trigger .ub-eye-open{ display: none; }
.ub-mp-photo-trigger.is-active .ub-eye-open{ display: block; }
.ub-mp-photo-trigger.is-active .ub-eye-closed{ display: none; }

.ub-mp-photo-text{
  font-size: 9px;
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  display: inline-block;
}

/* =========================================================
   Cards - imagem 1:1 garantida (sem depender do plugin aspect-ratio)
   ========================================================= */
.ub-card-image{
  position: relative;
  width: 100%;
  background: #ffffff !important;
  overflow: hidden;
  display: block !important;
}
.ub-card-image::before{
  content: "";
  display: block;
  padding-top: 100%;
}

/* Importante:
   NUNCA deixar .ub-card-main-image como position:absolute global.
   Isso faz a imagem "estourar" e sobrepor elementos quando usada fora do wrapper.
*/
.ub-card-image > img.ub-card-main-image,
.ub-card-image > img.ub-card-image__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Fallback seguro quando o class estiver fora do wrapper */
img.ub-card-main-image,
img.ub-card-image__img{
  display: block;
  max-width: 100%;
  height: auto;
}

.ub-mp-price{
  white-space: nowrap;
}

/* Ofertas similares: esconder preço por padrão e revelar apenas via ícone de olho (hover/click) */
.ub-mp-btn.ub-is-similar .ub-similar-price{ display:none; }
.ub-mp-btn.ub-is-similar .ub-similar-label{ display:inline; }
.ub-mp-btn.ub-is-similar.ub-similar-show-price .ub-similar-price{ display:inline; }
.ub-mp-btn.ub-is-similar.ub-similar-show-price .ub-similar-label{ display:none; }

.ub-mp-btn.ub-is-similar .ub-mp-eye.ub-similar-reveal{
  cursor: pointer;
}


/* UB - Dual range slider (faixa de preço) */
.ub-range-wrap{position:relative;height:34px;}
.ub-range-track{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);height:6px;border-radius:9999px;background:#e2e8f0;}
.ub-range-fill{position:absolute;top:50%;transform:translateY(-50%);height:6px;border-radius:9999px;background:#4f46e5;}
.ub-range-wrap input[type=range]{-webkit-appearance:none;appearance:none;position:absolute;left:0;top:0;width:100%;height:34px;background:transparent;pointer-events:none;}
.ub-range-wrap input[type=range]::-webkit-slider-runnable-track{height:6px;background:transparent;}
.ub-range-wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:9999px;background:#fff;border:3px solid #4f46e5;box-shadow:0 1px 2px rgba(0,0,0,.15);pointer-events:auto;cursor:pointer;margin-top:-8px;}
.ub-range-wrap input[type=range]::-moz-range-track{height:6px;background:transparent;}
.ub-range-wrap input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:9999px;background:#fff;border:3px solid #4f46e5;box-shadow:0 1px 2px rgba(0,0,0,.15);pointer-events:auto;cursor:pointer;}

/* UB HERO HEIGHT STANDARDIZATION */
#hero-slider{
  height: 360px;
}

/* WhatsApp: dobra o ícone sem aumentar o botão */
.ub-wa-icon{
  display:block;
  transform: scale(2);
  transform-origin: center;
}

.px-4 {
  padding-left: 0.5rem !important;
  padding-right: 1rem;
}

/* =========================
   GUTTER GLOBAL (MOBILE)
   Objetivo: padronizar e ampliar as margens laterais no mobile sem mexer
   no espaçamento interno de cards/boxes.
   ========================= */
:root{
  --ub-page-gutter-mobile: 20px; /* ajuste fino: 18–22px */
}

@media (max-width: 768px){
  /* Wrappers de página (Tailwind max-w + mx-auto) */
  .max-w-6xl.mx-auto,
  .max-w-5xl.mx-auto,
  .max-w-4xl.mx-auto,
  .max-w-3xl.mx-auto,
  .max-w-2xl.mx-auto,
  .max-w-xl.mx-auto{
    padding-left: var(--ub-page-gutter-mobile) !important;
    padding-right: var(--ub-page-gutter-mobile) !important;
  }
}

/* =========================
   LOGO SEM DISTORÇÃO
   ========================= */
#ubSiteHeader .ub-site-logo{
  height: 40px;
  width: auto !important;
  object-fit: contain;
  display: block;
}