/* ============================================================
   ObraX Original — camada do skin (carregada por último)
   ------------------------------------------------------------
   As folhas do ObraX entram sem alteração (FROM_REF 2ca431a). Aqui ficam só:
     1. base (suavização da fonte, números tabulares nos preços);
     2. tema do financiamento do motor no visual do .lo-financing da origem;
     3. o que o motor acrescentou à vitrine do ObraX, no desenho dela: favoritos (header e card), linhas de
        parcelas/financiamento/frete no card, faixa de vantagem de frete na categoria, newsletter no rodapé e a
        bolinha de WhatsApp do motor com o visual do botão flutuante da origem;
     4. PDP: financiamento no desenho do .lo-financing, "Simular" e Pix na sticky bar, frete com lastro, favoritos
        na galeria e o chip de financiamento no hero da categoria;
     5. acabamento (skill make-interfaces-feel-better): transições explícitas, números tabulares, text-wrap, contorno
        nas fotos, alvos de 40px, :active .96, raios, sombras em camadas, foco visível e movimento reduzido;
     6. /cupons/: o card canônico do motor (.lcc) nas cores do ObraX.
   Cores: só literais do ObraX (--ob-*, --lo-*, --obp-*). Nada de transition: all.
   ============================================================ */

/* ---- 1. Base -------------------------------------------------------------- */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Fundo da página: o setup.php do motor pinta html/body com o lilás do MegaObra (#f6f4f9 !important, estilo inline
   no wp_head); o fundo do ObraX é --ob-bg (#F4F4F4), também na conta (folhas tokenizadas do motor). Carrinho e
   checkout (checkout-mp) ficam como estão. */
html:has(> body:not(.woocommerce-cart):not(.woocommerce-checkout)),
body:not(.woocommerce-cart):not(.woocommerce-checkout) {
  background-color: var(--ob-bg, #F4F4F4) !important;
}

.ob-card-price__main,
.ob-card-price__was,
.ob-card-price__pix,
.ob-card-price__inst,
.lo-hdr__cart .ob-cart-count,
.lo-hdr__cart-count,
.lo-archive-hero__count strong,
.ob-toolbar__count strong {
  font-variant-numeric: tabular-nums;
}

/* ---- 2. Financiamento (tokens do componente do motor) ---------------------- */
:root {
  --lc-fin-bg: linear-gradient(135deg, #FFFFFF 0%, #FFF8F0 100%);
  --lc-fin-ink: #0E2A5C;
  --lc-fin-muted: #666666;
  --lc-fin-accent: #F58220;
  --lc-fin-border: rgba(245, 130, 32, .35);
  --lc-fin-r: 10px;
  --lc-fin-btn-r: 6px;
  --lc-fin-font: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lc-fin-cta-bg: #F58220;
  --lc-fin-cta-ink: #FFFFFF;
  --lc-fin-cta-hover: #E26F0E;
  --lc-fin-scroll-mt: 16px; /* na PDP o header do ObraX não é fixo */
  --lc-fin-line-ink: #0D1B4B;
  --lc-fin-line-hover: #FF6B00;
  --lc-sim-r: 16px;
  --lc-sim-accent: #0E2A5C;
  --lc-sim-accent-ink: #FFFFFF;
  --lc-sim-font: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---- 3a. Header: link de Favoritos (mesmo desenho do "Conta") -------------- */
.lo-hdr__inner {
  grid-template-columns: auto minmax(280px, 1fr) auto auto auto;
}
@media (max-width: 1100px) {
  .lo-hdr__inner { grid-template-columns: auto 1fr auto auto auto; }
}
@media (max-width: 767px) {
  /* celular: layout da origem (logo · conta · carrinho · menu); favoritos ficam no drawer */
  .lo-hdr__icon-btn--fav { display: none; }
  .lo-hdr__inner { grid-template-columns: auto 1fr auto auto; }
}
.ob-mobile-nav__footer {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px 20px;
}
/* Pílula "Orçamento": numa linha só; entre 901 e 1180px sai o "Clique aqui" (na origem ela quebrava em 2-3 linhas) */
.lo-nav__quote { white-space: nowrap; }
@media (max-width: 1180px) {
  .lo-nav__quote em { display: none; }
}

/* ---- 3b. Card: favoritos, parcelas, financiamento e frete ------------------ */
.ob-product-card__wishlist.is-fav {
  color: #FF6B00;
  border-color: #FF6B00;
}
.ob-product-card__wishlist.is-fav svg { fill: currentColor; }

.ob-card-price__inst {
  margin-top: 4px;
  font-size: 11.5px;
  line-height: 1.35;
  color: #777777;
  text-wrap: pretty;
}
.ob-card-price__inst strong { font-weight: 700; color: #333333; }
.ob-card-price__inst .woocommerce-Price-amount { color: inherit; font-size: inherit; }

.ob-product-card .lc-fin-line.ob-card-fin {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 700;
}

.ob-card-ship {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}
.ob-card-ship svg { flex: 0 0 auto; }
.ob-card-ship--always,
.ob-card-ship--threshold { color: #1A7A45; }
.ob-card-ship--flat { color: #0D1B4B; }

/* ---- 3c. Categoria: faixa de vantagem de frete do motor no hero navy -------- */
.lo-archive-hero .lc-perk-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin: 16px 0 0;
  padding: 6px 18px 6px 6px;
  border-radius: 999px; /* pílula: o ícone de 36px com 6px de folga fica concêntrico (18 + 6) */
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .82);
  font-size: 14px;
  line-height: 1.4;
}
.lo-archive-hero .lc-perk-strip__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #27AE60;
  color: #FFFFFF;
}
.lo-archive-hero .lc-perk-strip--flat .lc-perk-strip__icon { background: #F58220; }
.lo-archive-hero .lc-perk-strip__txt { min-width: 0; text-wrap: pretty; }
.lo-archive-hero .lc-perk-strip__txt strong { font-weight: 800; color: #FFFFFF; }
.lo-archive-hero .lc-perk-strip__link {
  position: relative;
  flex: none;
  font-weight: 700;
  color: #FF8533;
  text-decoration: none;
  white-space: nowrap;
}
.lo-archive-hero .lc-perk-strip__link::after { content: ""; position: absolute; inset: -12px -6px; } /* alvo de 40px */
.lo-archive-hero .lc-perk-strip__link:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 640px) {
  .lo-archive-hero .lc-perk-strip { border-radius: 24px; font-size: 13px; }
  .lo-archive-hero .lc-perk-strip__link { display: none; }
}

/* ---- 3d. Rodapé: newsletter do motor no desenho do rodapé navy ------------- */
.ob-footer__news {
  max-width: var(--ob-container, 1320px);
  margin: -40px auto 56px;
  padding: 0 var(--ob-container-pad, clamp(16px, 4vw, 40px));
}
.ob-footer__news-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 40px;
  padding: 24px 28px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.ob-footer__news-txt { flex: 1 1 320px; min-width: 0; }
.ob-footer__news-title {
  margin: 0 0 4px;
  font-family: var(--ob-font-heading, 'Nunito Sans', sans-serif);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.25;
  color: #FFFFFF;
  text-wrap: balance;
}
.ob-footer__news-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .6);
  text-wrap: pretty;
}
.ob-footer__news-sub strong { color: #FFFFFF; font-weight: 800; }
.ob-footer__news-form {
  display: flex;
  gap: 8px;
  flex: 1 1 360px;
  max-width: 480px;
  margin: 0;
}
.ob-footer__news-form .ob-footer__news-input {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: 46px;
  margin: 0;
  padding: 0 16px;
  border: 0;
  border-radius: 6px;
  background: #FFFFFF;
  color: #1A1A1A;
  font-family: var(--ob-font-body, 'Nunito Sans', sans-serif);
  font-size: 15px;
  box-shadow: none;
  transition-property: box-shadow;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.ob-footer__news-form .ob-footer__news-input::placeholder { color: #9A9A9A; opacity: 1; }
.ob-footer__news-form .ob-footer__news-input:focus { outline: none; box-shadow: 0 0 0 3px rgba(245, 130, 32, .45); }
.ob-footer__news-form .ob-footer__news-btn {
  flex: 0 0 auto;
  height: 46px;
  margin: 0;
  padding: 0 22px;
  border: 0;
  border-radius: 6px;
  background: #FF6B00;
  color: #FFFFFF;
  font-family: var(--ob-font-heading, 'Nunito Sans', sans-serif);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  transition-property: background-color, transform;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.ob-footer__news-form .ob-footer__news-btn:hover { background: #E05A00; }
.ob-footer__news-form .ob-footer__news-btn:active { transform: scale(.96); }
.ob-footer__news-form .ob-footer__news-btn:focus-visible { outline: 2px solid #FF8533; outline-offset: 2px; }
@media (max-width: 600px) {
  .ob-footer__news { margin: -48px auto 40px; }
  .ob-footer__news-inner { padding: 20px; }
  .ob-footer__news-form { flex-basis: 100%; max-width: none; }
}

/* ---- 3e. WhatsApp: bolinha do motor com o visual do botão flutuante do ObraX --- */
body .lc-wa-fab {
  left: 18px;
  right: auto;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  width: auto;
  height: auto;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px 0 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #25D366 0%, #1EBE5D 100%);
  box-shadow: 0 14px 34px rgba(37, 211, 102, .32);
  color: #FFFFFF;
  font-family: 'Nunito Sans', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1;
  text-decoration: none;
}
body .lc-wa-fab .lc-wa-logo {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  filter: none;
}
body .lc-wa-fab::after { content: "WhatsApp"; white-space: nowrap; }
@media (max-width: 900px) {
  body .lc-wa-fab {
    left: 14px;
    right: auto;
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    width: auto;
    height: auto;
    min-height: 54px;
    padding: 0 16px 0 10px;
    gap: 8px;
    font-size: 13px;
  }
  body .lc-wa-fab .lc-wa-logo { flex-basis: 32px; width: 32px; height: 32px; }
}

/* ---- 4a. PDP: preços (números tabulares, "a partir de" da variável) --------- */
#ob-price-main,
#ob-pix-val,
.lo-price-card__meta,
.lo-price-was,
.ob-sticky-bar__price-main,
.ob-sticky-bar__price-old,
.ob-sticky-bar__pix,
.ob-sticky-qty-input,
.ob-pcard-qty__input,
.lo-fomo-chip strong,
.ob-pcard-rating__count {
  font-variant-numeric: tabular-nums;
}
.lo-price-card__amount .ob-price-from {
  flex-basis: 100%;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  color: #777777;
}
.lo-price-card__meta[hidden],
.lo-price-was[hidden],
.lo-price-was__badge[hidden] { display: none !important; }
.ob-pcard-title { text-wrap: balance; }
/* "COMPRAR AGORA" (rótulo do fluxo carrinho-primeiro do motor) numa linha só no celular */
@media (max-width: 480px) {
  .ob-pcard-add-btn,
  .ob-var-qty-wrap .single_add_to_cart_button { padding-left: 10px !important; padding-right: 10px !important; white-space: nowrap; min-width: 0; }
  .ob-pcard-add-btn { font-size: 14px !important; gap: 6px !important; } /* a linha cabe no card de 360px (antes vazava 5–7px) */
  .ob-var-qty-wrap .single_add_to_cart_button { font-size: 14px !important; letter-spacing: .02em !important; }
}
@media (max-width: 359px) {
  .ob-pcard-add-btn,
  .ob-var-qty-wrap .single_add_to_cart_button { white-space: normal; line-height: 1.15; }
}

/* ---- 4b. PDP: financiamento do motor no desenho do .lo-financing da origem ----
   Mesmo bloco (fundo branco→#FFF8F0, borda laranja com 5px à esquerda, ícone laranja redondo); agora com a
   parcela do lc_fin_offer(), a linha de crédito, o aviso de simulação e o "Simular" que abre o modal do motor. */
.lo-financing--sim {
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 4px 14px;
  margin: 12px 0 0;
  cursor: default;
  scroll-margin-top: var(--lc-fin-scroll-mt, 16px);
}
.lo-financing--sim[hidden] { display: none !important; }
.lo-financing--sim:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--lo-orange, #F58220);
}
/* ícone e "Simular" centrados na altura do bloco (a nota ocupa a 2ª linha, na coluna do texto) */
.lo-financing--sim .lo-financing__ico { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.lo-financing--sim .lo-financing__cta { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.lo-financing--sim .lo-financing__tag { line-height: 1.35; text-wrap: balance; }
.lo-financing--sim .lo-financing__lines { letter-spacing: .06em; opacity: .8; }
.lo-financing--sim .lo-financing__title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 6px;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0;
  color: #666666;
}
.lo-financing__value {
  font-size: 19px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.2px;
  color: var(--lo-navy, #0E2A5C);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lo-financing--sim .lo-financing__sub { font-variant-numeric: tabular-nums; text-wrap: pretty; }
.lo-financing--sim .lo-financing__cta {
  min-height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 6px;
  background: var(--lo-navy, #0E2A5C);
  color: #FFFFFF;
  font-family: inherit;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition-property: background-color, transform;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.lo-financing--sim .lo-financing__cta:hover,
.lo-financing--sim:hover .lo-financing__cta { background: #0A1F44; }
.lo-financing--sim .lo-financing__cta:active { transform: scale(.96); }
.lo-financing--sim .lo-financing__cta:focus-visible { outline: 2px solid #F58220; outline-offset: 2px; }
.lo-financing__note {
  grid-column: 2;
  z-index: 1;
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: #777777;
  text-wrap: pretty;
}
.lo-financing__note a {
  position: relative;
  color: var(--lo-navy, #0E2A5C);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.lo-financing__note a::after { content: ""; position: absolute; inset: -12px -4px; } /* alvo de 40px */
.lo-financing__note a:hover { color: #FF6B00; }
.lo-financing--sim.is-flash { animation: ox-fin-flash 1.2s cubic-bezier(.2, 0, 0, 1) 1; }
@keyframes ox-fin-flash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 130, 32, 0); }
  25%, 60% { box-shadow: 0 0 0 4px rgba(245, 130, 32, .35); }
}
@media (max-width: 600px) {
  .lo-financing--sim { grid-template-columns: auto minmax(0, 1fr); }
  .lo-financing--sim .lo-financing__ico { grid-row: 1; }
  .lo-financing--sim .lo-financing__cta { grid-column: 1 / -1; grid-row: auto; justify-content: center; min-height: 42px; font-size: 13px; }
  .lo-financing__note { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  .lo-financing--sim.is-flash { animation: none; box-shadow: 0 0 0 3px rgba(245, 130, 32, .35); }
}
/* Modal do motor: fonte do ObraX (tokens em :root, seção 2). */
.lc-sim--ox .lc-sim__title { font-weight: 800; }

/* ---- 4c. PDP: sticky bar — Pix e "Simular" -------------------------------- */
.ob-sticky-bar__pix {
  margin-top: 3px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.2;
  color: #0F6B39;
  white-space: nowrap;
}
.ob-sticky-bar__pix b { font-weight: 800; }
.ob-sticky-bar__pix .woocommerce-Price-amount { color: inherit; font-size: inherit; }
.ob-sticky-bar__sim {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid var(--lo-navy, #0E2A5C);
  border-radius: 8px;
  background: #FFFFFF;
  color: var(--lo-navy, #0E2A5C);
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition-property: background-color, color, transform;
  transition-duration: 150ms;
  transition-timing-function: ease-out;
}
.ob-sticky-bar__sim svg { flex: 0 0 auto; color: #F58220; }
.ob-sticky-bar__sim:hover { background: var(--lo-navy, #0E2A5C); color: #FFFFFF; }
.ob-sticky-bar__sim:active { transform: scale(.96); }
.ob-sticky-bar__sim:focus-visible { outline: 2px solid #F58220; outline-offset: 2px; }
.ob-sticky-bar__sim[hidden] { display: none !important; }
/* select da variação na sticky bar com largura limitada: opções longas não espremem o nome do produto */
.ob-sticky-bar__select { max-width: 240px; text-overflow: ellipsis; }
@media (max-width: 1180px) { .ob-sticky-bar__select { max-width: 180px; } }
@media (max-width: 767px) {
  .ob-sticky-bar__sim { height: 38px; padding: 0 11px; gap: 5px; font-size: 12px; }
  .ob-sticky-bar__sim svg { width: 14px; height: 14px; }
}
/* Bolinha do WhatsApp sobe junto com a sticky bar (na origem ela cobria a foto e a quantidade da barra). */
body.single-product .lc-wa-fab { transition-property: scale, translate, transform; }
body.single-product:has(#ob-sticky-bar.is-visible) .lc-wa-fab { transform: translateY(calc(-1 * var(--ox-sbar-lift, 72px))); }
@media (max-width: 767px) {
  body.single-product { --ox-sbar-lift: 104px; }
}

/* ---- 4d. PDP: frete com lastro, estoque, favoritos na galeria -------------- */
.ob-delivery-promise__note { /* o bloco da origem é um grid (ícone | textos): a nota fica na coluna dos textos */
  grid-column: 2;
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #555555;
  text-wrap: pretty;
}
.ob-delivery-promise__date { text-wrap: balance; }
.ob-freight-free-tip--flat {
  color: #A34800 !important;
  background: #FFF4ED !important;
  border-color: #FFD2B4 !important;
}
.ob-gallery__action-btn { width: 40px; height: 40px; }
.ob-gallery__action-btn:active { transform: scale(.96); }
.ob-gallery__action-btn--fav.is-fav { color: #FF6B00; border-color: rgba(255, 107, 0, .35); }
.ob-gallery__action-btn--fav.is-fav svg { fill: currentColor; }
@media (prefers-reduced-motion: reduce) {
  .ob-fomo-item--stock .ob-fomo-item__dot { animation: none; }
}

/* ---- 4e. Categoria: chip "Financiamento em até N×" ao lado da contagem ------ */
.lo-archive-hero__chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.lo-archive-hero__chips .lo-archive-hero__count { margin-top: 0; }
.lo-archive-hero__count--fin svg { color: #FF8533; }
/* Filtro de categorias: a contagem não quebra em duas linhas ao lado de nomes longos ("2" / "8" na origem). */
.ob-filter-list .ob-filter-count { flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* ============================================================
   5. Acabamento (skill make-interfaces-feel-better)
   ------------------------------------------------------------
   Só overrides por cima das folhas verbatim da origem: nenhuma cor muda. A tabela
   "Antes/Depois" com cada item está no README do skin (seção "Acabamento").
   ============================================================ */

/* ---- 5a. Transições com propriedades explícitas (a origem usava transition: all) ---- */
.ob-btn { transition-property: color, background-color, border-color, box-shadow, transform, scale; }
.ob-product-card__wishlist { transition-property: color, background-color, border-color, scale; }
.ob-tab-btn { transition-property: color, border-color, background-color; }
.ob-variation-opt { transition-property: color, background-color, border-color, scale; }
.ob-view-btn,
.ob-page-btn { transition-property: color, background-color, border-color, scale; }
.ob-cart-item__remove,
.ob-cart-sidebar__continue { transition-property: color, background-color, border-color; }
.ob-social-link { transition-property: color, background-color, border-color, scale; }
.splide__arrow.ob-splide-prev,
.splide__arrow.ob-splide-next { transition-property: color, background-color, border-color, box-shadow, opacity, transform, scale; }
.ob-hero-splide .splide__pagination__page { transition-property: background-color, transform, opacity !important; }
.ob-wup-ctrl { transition-property: color, background-color, border-color !important; }
.ob-wup-chk-box { transition-property: background-color, border-color !important; }
.woocommerce-pagination ul li a,
.woocommerce-pagination ul li span { transition-property: color, background-color, border-color, scale !important; }
/* setas de quantidade do Blocksy (escondidas no ObraX); segmento PF/PJ da conta e busca do blog (folhas do motor
   carregadas depois desta, por isso o "body" na frente) */
div.quantity .ct-increase,
div.quantity .ct-decrease { transition-property: color, background-color, border-color, opacity; }
body .ob-acc-segment button { transition-property: color, background-color, box-shadow; }
body .nob-blog-search button { transition-property: color, background-color; }
/* CTAs que ganham o :active da seção 5f: a lista da origem + scale */
.ob-product-card__add-btn { transition-property: background-color, border-color, color, transform, scale; }
.lo-hdr__search-btn,
.lo-hdr__cart,
.lo-nav__deps,
.lo-hero__arrow { transition-property: background-color, scale; }
.lo-hdr__icon-btn,
.lo-hero__ph-cta,
.lo-catban__cta { transition-property: background-color, transform, scale; }
.lo-hdr__mobile { transition-property: background-color, color, scale; }
.lo-hero__dot { transition-property: background-color, transform, scale; }
.lo-nav__quote { transition-property: color, scale; }
.lo-benefit { transition-property: transform, box-shadow, border-color, scale; }
.lo-ship-banner__cta,
.ob-footer__support-btn { transition-property: transform, box-shadow, background-color, scale; }
.lo-quote-banner__card { transition-property: transform, background-color, border-color, box-shadow, scale; }
.lo-cats .splide__arrow { transition-property: background-color, transform, scale; }
.ob-pcard-add-btn { transition-property: background-color, transform, box-shadow, scale !important; }
.ob-variable-form .single_add_to_cart_button,
.ob-freight-btn { transition-property: background-color, scale !important; }
.ob-pcard-qty__btn { transition-property: background-color, scale; }
.ob-sticky-qty-minus,
.ob-sticky-qty-plus { transition-property: background-color, scale !important; }
.ob-gallery__thumb { transition-property: transform, border-color, box-shadow, background-color, scale; }
.ob-pcard-whatsapp { transition-property: color, background-color, border-color, scale; }

/* ---- 5b. Números tabulares (preços, parcelas, contagens e o simulador) ---- */
.lc-fin-line,
.lo-archive-hero__count,
.ob-toolbar__count,
.woocommerce-result-count,
.ob-page-btn,
.woocommerce-pagination,
.lo-price-card__amount,
#ob-inst-meta,
.ob-mega-menu__subcat-count,
.lc-sim__result,
.lc-sim__row,
.lc-sim [data-lc-sim-entry-out] {
  font-variant-numeric: tabular-nums;
}

/* ---- 5c. Quebra de texto: títulos equilibrados, textos curtos sem palavra órfã ---- */
h1, h2, h3,
.lo-hero__ph-headline { text-wrap: balance; }
.ob-product-card__name,
.lo-hero__ph-tagline,
.lo-benefit__txt,
.lo-ship-banner__sub,
.lo-quote-banner__card-txt,
.lo-archive-hero__subtitle,
.ob-footer__desc,
.ob-pcard-short-desc,
.ob-tab-panel p { text-wrap: pretty; }

/* ---- 5d. Contorno de 1px nas fotos de produto (JPG/WebP de fundo branco; recortes PNG ficam sem) ---- */
:is(.ob-product-card__img,
    .ob-cat-card-v2__img,
    .lo-catban__media img,
    .lo-archive-hero__media img,
    .ob-gallery__main img,
    .ob-gallery__thumb img,
    .ob-sticky-bar__thumb):not([src*=".png"]) {
  outline: 1px solid rgba(0, 0, 0, .1);
  outline-offset: -1px;
}
/* fotos com padding na origem: o contorno acompanha a foto (caixa de conteúdo), não a borda do quadro */
.ob-gallery__main img:not([src*=".png"]) { outline-offset: -19px; }
.ob-gallery__thumb img:not([src*=".png"]) { outline-offset: -7px; }
@media (max-width: 768px) {
  .ob-gallery__main img:not([src*=".png"]) { outline-offset: -13px; }
}

/* ---- 5e. Áreas de toque de 40px (pseudo-elemento quando o desenho é menor, sem invadir o vizinho) ---- */
/* coração do card: desenho de 30px, alvo de 40px */
.ob-product-card__wishlist::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; } /* 1px de borda: 28 + 12 */
/* pontos do hero: 10px com 8px de vão → alvo de 18×40 (metade do vão de cada lado); o ativo tem scale(1.25) */
.lo-hero__dot { position: relative; }
.lo-hero__dot::after { content: ""; position: absolute; inset: -15px -4px; }
.lo-hero__dot.is-active::after { inset: -12px -2px; }
/* Celular, slides de cor (sem banner enviado): na origem o conteúdo passava dos 280px do hero, o "SAIBA MAIS" ficava
   cortado embaixo e os pontos caíam em cima dele. Tipografia um pouco menor e folga de 36px embaixo: tudo cabe na
   mesma altura e os pontos (com alvo de 30px de altura) não encostam no botão. */
@media (max-width: 767px) {
  .lo-hero__slide--placeholder .lo-hero__ph { align-content: center; gap: 12px; padding: 12px 18px 36px; }
  .lo-hero__slide--placeholder .lo-hero__ph-eyebrow { padding: 8px 16px; font-size: clamp(22px, 6.4vw, 32px); }
  .lo-hero__slide--placeholder .lo-hero__ph-tagline { margin-top: 8px; font-size: 12px; }
  .lo-hero__slide--placeholder .lo-hero__ph-right { gap: 12px; }
  .lo-hero__slide--placeholder .lo-hero__ph-headline { font-size: clamp(26px, 8vw, 38px); }
  .lo-hero__slide--placeholder .lo-hero__ph-cta { padding: 11px 24px; font-size: 13px; }
  .lo-hero__slider:has(.lo-hero__slide--placeholder) .lo-hero__dot::after { inset: -6px -4px -14px; }
  .lo-hero__slider:has(.lo-hero__slide--placeholder) .lo-hero__dot.is-active::after { inset: -4px -2px -11px; }
}
/* hambúrguer (38px) e ícone social (36px) */
.lo-hdr__mobile,
.ob-social-link { position: relative; }
.lo-hdr__mobile::after { content: ""; position: absolute; inset: -3px; border-radius: 6px; }
.ob-social-link::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; } /* 1px de borda: 34 + 6 */
/* pílula "Orçamento" (22px de altura): alvo na altura inteira da barra de 44px */
.lo-nav__quote { position: relative; }
.lo-nav__quote::after { content: ""; position: absolute; inset: -11px -6px; }
/* setas do hero no celular (36px) */
@media (max-width: 767px) {
  .lo-hero__arrow::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; }
}
/* setas dos carrosséis de produto: 40px e inteiras. A origem as pendurava meio para fora (style.css: padding 22px
   no carrossel); o CSS crítico zerou o padding e deixou overflow: hidden, cortando a seta pela metade. */
@media (min-width: 769px) {
  .ob-products-splide { overflow: visible !important; }
}
.ob-products-splide .splide__arrow.ob-splide-prev,
.ob-products-splide .splide__arrow.ob-splide-next { width: 40px; height: 40px; }
.ob-products-splide .splide__arrow.ob-splide-prev { left: -20px; }
.ob-products-splide .splide__arrow.ob-splide-next { right: -20px; }
@media (max-width: 900px) {
  .lo-cats .splide__arrow { width: 40px; height: 40px; }
}
/* grade/lista da categoria: 34 → 40px (mesma altura do select de ordenação) */
.ob-view-btn { width: 40px; height: 40px; }
/* título do filtro (o lojaobra-filters.js o marca como botão) e links da lista de categorias */
@media (min-width: 769px) {
  .ob-filter-card__title[role="button"] { position: relative; }
  .ob-filter-card__title[role="button"]::after { content: ""; position: absolute; inset: -5px 0 -6px; }
}
.ob-filter-list li > a { position: relative; }
.ob-filter-list li > a::after { content: ""; position: absolute; inset: -4px 0; }
.ob-breadcrumb a { position: relative; }
.ob-breadcrumb a::after { content: ""; position: absolute; inset: -8px -2px; }
/* mega menu (39px) e rodapé do drawer (21px) */
.ob-mega-menu__parent { min-height: 40px; }
.ob-mobile-nav__footer .ob-mobile-nav__account { min-height: 40px; }
/* variações em pílula da origem (39px) */
.ob-variation-opt { padding-top: 8px; padding-bottom: 8px; }
/* PDP: botões da galeria no celular (34 → 40px) e "Não sei meu CEP" */
.ob-gallery__actions .ob-gallery__action-btn { width: 40px !important; height: 40px !important; }
.ob-freight-cep-link { position: relative; width: fit-content; }
.ob-freight-cep-link::after { content: ""; position: absolute; inset: -4px -4px -10px; }
/* sticky bar: − e + com 40px (a origem tinha 34 no desktop e 28, espremido a 23, no celular) */
.ob-sticky-bar .ob-sticky-qty-minus,
.ob-sticky-bar .ob-sticky-qty-plus { width: 40px !important; flex: 0 0 40px; }
@media (max-width: 768px) {
  .ob-sticky-bar .ob-sticky-bar__qty { height: 44px !important; flex: 0 0 auto; } /* 1,5px de borda: botões de 41px */
  .ob-sticky-bar .ob-sticky-bar__sim { height: 44px; }
  .ob-sticky-bar .ob-sticky-qty-input { width: 40px !important; }
  .ob-sticky-bar .ob-sticky-bar__btn { flex: 1 1 auto; min-width: 0; padding-left: 12px; padding-right: 12px; } /* ocupa o resto da linha */
}
@media (max-width: 400px) {
  .ob-sticky-bar__sim svg { display: none; }
}

/* ---- 5f. :active com scale .96 nos CTAs (a propriedade scale soma com os transform de hover da origem) ---- */
.ob-product-card__add-btn:active,
.lo-hdr__search-btn:active,
.lo-hdr__cart:active,
.lo-hdr__icon-btn:active,
.lo-hdr__mobile:active,
.lo-nav__deps:active,
.lo-nav__quote:active,
.lo-hero__arrow:active,
.lo-hero__ph-cta:active,
.lo-benefit--cta:active,
.lo-catban:active .lo-catban__cta,
.lo-ship-banner__cta:active,
.lo-quote-banner__card:active,
.ob-btn:active,
.ob-products-splide .splide__arrow:active,
.lo-cats .splide__arrow:active,
.ob-footer__support-btn:active,
.ob-social-link:active,
.ob-product-card__wishlist:active,
.ob-view-btn:active,
.ob-page-btn:active,
.woocommerce-pagination ul li a:active,
.ob-pcard-add-btn:active,
.single_add_to_cart_button:active,
.ob-pcard-qty__btn:active,
.ob-sticky-qty-minus:active,
.ob-sticky-qty-plus:active,
.ob-freight-btn:active,
.ob-gallery__thumb:active,
.ob-pcard-whatsapp:active,
.ob-variation-opt:active,
.lo-hero__dot:active {
  scale: .96;
}
/* seta das categorias: no hover a origem cresce 6% (transform); ao apertar, volta ao tamanho e encolhe .96 */
.lo-cats .splide__arrow:active { transform: translateY(-50%); }

/* ---- 5g. Raios: superfícies internas do card de compra em 8px (--obp-radius-sm), como os cartões de preço ---- */
.lo-financing--sim { border-radius: 8px; }
.ob-sticky-bar .ob-sticky-bar__btn { border-radius: 8px; } /* irmão do "Simular" (8) e da quantidade (8); a origem tinha 4 */

/* ---- 5h. Sombras em camadas (mesmo peso visual da origem, com borda de luz e profundidade separadas) ---- */
:root {
  --ob-shadow-sm: 0 0 0 1px rgba(0, 0, 0, .03), 0 1px 2px rgba(0, 0, 0, .08);
  --ob-shadow: 0 0 0 1px rgba(0, 0, 0, .03), 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .08);
  --ob-shadow-lg: 0 0 0 1px rgba(0, 0, 0, .03), 0 2px 4px rgba(0, 0, 0, .05), 0 8px 28px rgba(0, 0, 0, .12);
  --ob-shadow-xl: 0 0 0 1px rgba(0, 0, 0, .04), 0 4px 8px rgba(0, 0, 0, .06), 0 20px 56px rgba(0, 0, 0, .16);
  --obp-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 12px rgba(0, 0, 0, .05);
  --obp-shadow-md: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 8px rgba(0, 0, 0, .04), 0 12px 24px rgba(0, 0, 0, .07);
  --obs-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 12px rgba(0, 0, 0, .05);
}
.ob-product-card:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 8px rgba(0, 0, 0, .04), 0 12px 24px rgba(0, 0, 0, .08); }
.ob-mega-menu { box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 8px 16px rgba(0, 0, 0, .06), 0 24px 48px rgba(0, 0, 0, .12); }
.splide__arrow.ob-splide-prev,
.splide__arrow.ob-splide-next { box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 4px 10px rgba(0, 0, 0, .08); }
.ob-purchase-card { box-shadow: 0 1px 2px rgba(13, 27, 75, .05), 0 4px 12px rgba(13, 27, 75, .04), 0 18px 40px rgba(13, 27, 75, .07); }
@media (max-width: 768px) {
  .ob-purchase-card { box-shadow: 0 1px 2px rgba(13, 27, 75, .05), 0 8px 20px rgba(13, 27, 75, .06) !important; }
}
.ob-sticky-bar { box-shadow: 0 -1px 2px rgba(0, 0, 0, .04), 0 -8px 24px rgba(0, 0, 0, .08) !important; }
.lo-benefit:hover { box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 20px rgba(0, 0, 0, .05); }
.lo-catban { box-shadow: 0 1px 2px rgba(14, 42, 92, .06), 0 10px 28px rgba(14, 42, 92, .08); }
.lo-catban:hover { box-shadow: 0 2px 4px rgba(14, 42, 92, .08), 0 18px 38px rgba(14, 42, 92, .13); }
body .lc-wa-fab { box-shadow: 0 1px 2px rgba(0, 0, 0, .10), 0 4px 10px rgba(37, 211, 102, .20), 0 14px 30px rgba(37, 211, 102, .24); }

/* ---- 5i. Foco visível (teclado) nos controles da vitrine, na cor da marca; nada muda no clique ---- */
:where(.lo-hdr, .lo-nav, .ob-mega-menu, .ob-mobile-nav, main, .ob-footer, .ob-sticky-bar) :where(a, button, [role="button"], summary, select):focus-visible {
  outline: 2px solid #FF6B00;
  outline-offset: 2px;
}

/* ---- 5j. Movimento reduzido: sem pulsos e balanços infinitos, rolagem sem animação ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .lo-ship-banner__dot,
  .lo-ship-banner__truck,
  .ob-pcard-whatsapp svg,
  .ob-countdown-bar--urgent,
  .ob-floating-whatsapp__pulse { animation: none !important; }
}

/* ============================================================
   6. /cupons/: card canônico do motor (.lcc, product-card.css) nos tons do ObraX
   ------------------------------------------------------------
   Só nessa página (page-cupons.php do motor). O desenho é o do motor (superfície branca, foto com contorno,
   CTA de 40px com :active .96); aqui só trocamos o azul/verde dele pelas cores do ObraX: preço marinho, Pix
   verde, selo −% laranja e "Comprar" verde como o botão do card do ObraX.
   ============================================================ */
.mo-inst .lcc {
  --lcc-navy: #0E2A5C;
  --lcc-green: #1A7A45;
  --lcc-blue: #FFFFFF;
  --lcc-blue-soft: #25D366;
  --lcc-blue-soft-hover: #1AB854;
}
.mo-inst .lcc .lcc__off { background: #FF6B00; }
.mo-inst .lcc .lcc__cta { font-weight: 700; }
.mo-inst .lcc .lcc__fin,
.mo-inst .lcc .lcc__fin:visited { color: #0D1B4B !important; font-weight: 700; }
.mo-inst .lcc .lcc__fin:hover { color: #FF6B00 !important; }
.mo-inst .lcc .lcc__pill--blue { background: #E6E9EF; color: #0E2A5C; }
/* linha "Financie desde" (16px): alvo de 40px subindo sobre o texto de preço, 4px antes do "Comprar" */
.mo-inst .lcc .lcc__fin::after { content: ""; position: absolute; inset: -18px 0 -6px; }