/*
Theme Name: OceanWP Child
Theme URI: https://talhodoprado.pt
Description: Child theme do OceanWP para TalhoDoPrado
Author: TalhoDoPrado
Template: oceanwp
Version: 4.1.7
Text Domain: oceanwp-child
*/

/* === Sufixo "kg" colado ao número, conjunto centrado no wrapper ============= */

/* Wrapper = caixa visual centrada (flex centro) */
body.single-product .tdp-qty-wrap {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.15em !important;
  background: #fff !important;
  border: 1px solid #d6d6d6 !important;
  border-radius: 3px !important;
  padding: 0 0.55em !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  min-width: 5em;
}

/* Input com largura fixa e número CENTRADO dentro dele */
body.single-product .tdp-qty-wrap input.qty,
body.single-product .quantity .tdp-qty-wrap input.qty,
body.single-product .elementor-widget-wc-add-to-cart .quantity .tdp-qty-wrap input.qty {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  padding: 0.6em 0 !important;
  margin: 0 !important;
  width: 2.8em !important;
  min-width: 2.8em !important;
  max-width: 2.8em !important;
  text-align: center !important;
  font: inherit !important;
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}

/* Sufixo de unidade colado ao número.
   O conteúdo (kg/un) é definido pela body class tdp-unit-* abaixo. */
body.single-product .tdp-qty-wrap::after {
  content: '';
  font-weight: 700;
  color: #5a1212;
  font-size: 0.9em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  letter-spacing: 0.01em;
  flex: 0 0 auto;
}
body.tdp-unit-kg .tdp-qty-wrap::after { content: 'kg'; }
body.tdp-unit-un .tdp-qty-wrap::after { content: 'un'; }

/* Esconde setinhas spinner */
body.single-product .tdp-qty-wrap input.qty::-webkit-outer-spin-button,
body.single-product .tdp-qty-wrap input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* === Fix: SVG do botão X (fechar off-canvas/popup mobile) ====================
   O ícone X é um widget Elementor icon.default isolado, com SVG que tem
   width="800px" inline. Quando o CSS do Elementor não o constrange, fica
   gigante e parece sumido. Alvo por href (mais preciso, sem afetar outros).
*/
a.elementor-icon[href*="off_canvas"] {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  color: #ffffff;
}
a.elementor-icon[href*="off_canvas"] svg {
  width: 1em !important;
  height: 1em !important;
  max-width: 1em !important;
  max-height: 1em !important;
  display: block;
}