/* ========================================================== NDH Producto Pro — Frontend Los colores se controlan desde la pestaña "Estilos" del panel (variables inyectadas en por dynamic_css). Estos son fallbacks. ========================================================== */ .ndhpp-form-wrap, .ndhpp-shortcode { --ndhpp-fire: #E0531F; --ndhpp-fire-d: #C0410F; --ndhpp-char: #211C18; --ndhpp-line: #E4DBCC; --ndhpp-input-bg: #ffffff; --ndhpp-input-text:#211C18; --ndhpp-label: #211C18; --ndhpp-qty-bg: #211C18; --ndhpp-qty-text: #ffffff; --ndhpp-qty-hover: #E0531F; --ndhpp-wa-bg: #25D366; --ndhpp-wa-hover: #1EBE5A; --ndhpp-font: inherit; } /* Heredar (o forzar) la fuente en todo el bloque */ .ndhpp-form-wrap, .ndhpp-shortcode, .ndhpp-form-wrap select, .ndhpp-form-wrap input, .ndhpp-form-wrap button, .ndhpp-form-wrap label, .ndhpp-shortcode select, .ndhpp-shortcode input, .ndhpp-shortcode button, .ndhpp-shortcode label { font-family: var(--ndhpp-font); } /* ---------- ATRIBUTOS: layout ---------- */ /* Forzar que la tabla deje de comportarse como tabla (si no, reserva alto extra) */ .ndhpp-active .variations, .ndhpp-shortcode .variations, .ndhpp-active .variations tbody, .ndhpp-shortcode .variations tbody, .ndhpp-active .variations tr, .ndhpp-shortcode .variations tr, .ndhpp-active .variations th, .ndhpp-shortcode .variations th, .ndhpp-active .variations td, .ndhpp-shortcode .variations td { display: block !important; width: 100% !important; height: auto !important; background: transparent !important; } .ndhpp-active .variations, .ndhpp-shortcode .variations { border: none; margin: 0 0 6px !important; border-collapse: collapse; } .ndhpp-active .variations tr, .ndhpp-shortcode .variations tr { margin-bottom: 16px; } .ndhpp-active .variations td, .ndhpp-shortcode .variations td { padding: 0 !important; } /* Título del atributo (Incluye, Color): SIN fondo */ .ndhpp-active .variations th, .ndhpp-active .variations th label, .ndhpp-shortcode .variations th, .ndhpp-shortcode .variations th label { font-weight: 600; font-size: 14px; color: var(--ndhpp-label); margin-bottom: 8px; display: block; background: transparent !important; padding-left: 0; padding-right: 0; } /* ---------- DROPDOWN ---------- */ .ndhpp-attr-dropdown .variations select, .ndhpp-shortcode .variations select { width: 100%; padding: 13px 16px; border: 1px solid var(--ndhpp-line); border-radius: 10px; background-color: var(--ndhpp-input-bg); color: var(--ndhpp-input-text); font-size: 15px; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 14px center; } .ndhpp-attr-dropdown .variations select:focus, .ndhpp-shortcode .variations select:focus { outline: none; border-color: var(--ndhpp-fire); box-shadow: 0 0 0 3px rgba(224,83,31,.12); } /* ---------- BOTONES (estética alternativa) ---------- */ .ndhpp-hidden-select { display: none !important; } .ndhpp-btns { display: flex; flex-wrap: wrap; gap: 10px; } .ndhpp-btn { padding: 11px 20px; border: 1.5px solid var(--ndhpp-line); border-radius: 10px; background: var(--ndhpp-input-bg); font-size: 14px; font-weight: 600; color: var(--ndhpp-input-text); cursor: pointer; transition: all .15s; } .ndhpp-btn:hover { border-color: var(--ndhpp-char); } .ndhpp-btn.selected { background: var(--ndhpp-char); border-color: var(--ndhpp-char); color: #fff; } /* ---------- CASCADA ---------- */ .ndhpp-behavior-cascade .variations tr.ndhpp-locked { display: none; } /* ---------- CANTIDAD: STEPPER ---------- */ /* Bloque de cantidad centrado con título arriba */ .ndhpp-form-wrap .quantity, .ndhpp-shortcode .quantity { margin: 0 auto !important; } .ndhpp-qty-block { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 14px 0 4px !important; } .ndhpp-qty-title { font-size: 14px; font-weight: 600; color: var(--ndhpp-label); text-align: left; } .quantity.ndhpp-stepper { display: inline-flex; align-items: center; border: 1px solid var(--ndhpp-line); border-radius: 10px; overflow: hidden; } .quantity.ndhpp-stepper input.qty { border: none; text-align: center; width: 56px; font-size: 16px; font-weight: 700; color: var(--ndhpp-input-text); background: var(--ndhpp-input-bg); -moz-appearance: textfield; } .quantity.ndhpp-stepper input.qty::-webkit-outer-spin-button, .quantity.ndhpp-stepper input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Botones + / - UNIFICADOS y personalizables */ .ndhpp-qty-btn { width: 44px; height: 46px; border: none; background: var(--ndhpp-qty-bg) !important; color: var(--ndhpp-qty-text) !important; font-size: 20px; font-weight: 700; cursor: pointer; transition: all .15s; line-height: 1; display: flex; align-items: center; justify-content: center; } .ndhpp-qty-btn:hover { background: var(--ndhpp-qty-hover) !important; color: #fff !important; } /* ---------- BOTONES DE ACCIÓN ---------- */ .ndhpp-form-wrap .single_add_to_cart_button, .ndhpp-shortcode .single_add_to_cart_button { background: var(--ndhpp-fire) !important; color: #fff !important; border-radius: 12px !important; padding: 15px 28px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .04em !important; transition: all .18s !important; border: none !important; } .ndhpp-form-wrap .single_add_to_cart_button:hover, .ndhpp-shortcode .single_add_to_cart_button:hover { background: var(--ndhpp-fire-d) !important; transform: translateY(-2px); } .ndhpp-buy-now { display: block; width: 100%; margin-top: 12px; background: var(--ndhpp-char) !important; color: #fff !important; border-radius: 12px !important; padding: 15px 28px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .04em !important; border: none !important; cursor: pointer; transition: all .18s; } .ndhpp-buy-now:hover { filter: brightness(1.15); transform: translateY(-2px); } /* ---------- WHATSAPP ---------- */ .ndhpp-wa-btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 22px !important; background: var(--ndhpp-wa-bg) !important; color: #fff !important; border-radius: 12px !important; padding: 16px 28px !important; font-weight: 700 !important; font-size: 15px !important; text-transform: uppercase; letter-spacing: .03em; text-decoration: none !important; transition: all .18s; } .ndhpp-wa-btn::before { content: ''; width: 20px; height: 20px; background: url("data:image/svg+xml;utf8,") center/contain no-repeat; } .ndhpp-wa-btn:hover { background: var(--ndhpp-wa-hover) !important; transform: translateY(-2px); } /* Espaciado general */ .ndhpp-form-wrap { margin-top: 8px; } .ndhpp-active .woocommerce-variation-add-to-cart, .ndhpp-form-wrap .woocommerce-variation-add-to-cart, .ndhpp-shortcode .woocommerce-variation-add-to-cart { margin-top: 10px; } /* Ocultar el precio duplicado de la variación si el tema lo repite arriba del stepper */ .ndhpp-form-wrap .woocommerce-variation-price, .ndhpp-shortcode .woocommerce-variation-price { margin-bottom: 6px; } /* Aviso del shortcode (solo admins) */ .ndhpp-notice { background: #fff8f4; border: 1px dashed #E0531F; color: #8C2F12; padding: 14px 18px; border-radius: 8px; font-size: 14px; } /* ---------- SEPARACIÓN STEPPER ↔ WHATSAPP (refuerzo) ---------- */ /* El botón de WhatsApp se separa del bloque de cantidad sí o sí */ .ndhpp-form-wrap .ndhpp-wa-btn, .ndhpp-shortcode .ndhpp-wa-btn, .single-product .ndhpp-wa-btn { margin-top: 22px !important; clear: both; } /* Margen bajo el stepper por si el botón queda adyacente sin respetar el top */ .ndhpp-form-wrap .quantity.ndhpp-stepper, .ndhpp-shortcode .quantity.ndhpp-stepper { margin-bottom: 6px; } /* Wrapper del botón WhatsApp: el margen vive acá, imposible de pisar por el tema */ .ndhpp-wa-wrap { margin-top: 22px; width: 100%; display: block; } .ndhpp-wa-wrap .ndhpp-wa-btn { margin-top: 0 !important; } /* ========================================================== ANCHO Y ALINEACIÓN DE BOTONES (configurable) ========================================================== */ /* Contenedor flex que envuelve los botones de acción. Con wrap: si suman <=100% entran juntos, si no se apilan. */ .ndhpp-form-wrap .woocommerce-variation-add-to-cart, .ndhpp-shortcode .woocommerce-variation-add-to-cart, .ndhpp-btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: var(--ndhpp-btn-justify, flex-start); align-items: center; } /* Ancho configurable aplicado a los 3 botones */ .ndhpp-form-wrap .single_add_to_cart_button, .ndhpp-shortcode .single_add_to_cart_button, .ndhpp-buy-now, .ndhpp-wa-wrap { width: var(--ndhpp-btn-width, 100%) !important; flex: 0 1 var(--ndhpp-btn-width, 100%); max-width: 100%; box-sizing: border-box; } .ndhpp-wa-wrap .ndhpp-wa-btn { width: 100% !important; } /* La fila del stepper + WhatsApp también respeta la alineación */ .ndhpp-mode-whatsapp .ndhpp-wa-wrap { display: flex; justify-content: var(--ndhpp-btn-justify, flex-start); } /* ---------- COLAPSAR HUECO VACÍO DE LA VARIACIÓN ---------- */ /* WooCommerce reserva espacio para el precio/desc de la variación aunque esté vacío */ .ndhpp-form-wrap .single_variation_wrap .single_variation:empty, .ndhpp-shortcode .single_variation_wrap .single_variation:empty { margin: 0; padding: 0; min-height: 0; } .ndhpp-form-wrap .woocommerce-variation.single_variation:empty, .ndhpp-shortcode .woocommerce-variation.single_variation:empty { display: none; } .ndhpp-form-wrap .single_variation_wrap, .ndhpp-shortcode .single_variation_wrap { margin-top: 4px; } /* ========================================================== FIX ESPACIO ANTES DE CANTIDAD (v1.4.2) Aplasta el hueco que deja el wrapper de variación de WooCommerce ========================================================== */ .ndhpp-form-wrap .single_variation_wrap, .ndhpp-shortcode .single_variation_wrap, .ndhpp-form-wrap .woocommerce-variation-add-to-cart, .ndhpp-shortcode .woocommerce-variation-add-to-cart { margin-top: 0 !important; padding-top: 0 !important; } /* La variación (precio/desc) sólo ocupa espacio si tiene contenido visible */ .ndhpp-form-wrap .single_variation, .ndhpp-shortcode .single_variation { margin: 0 !important; padding: 0 !important; } .ndhpp-form-wrap .single_variation:empty, .ndhpp-shortcode .single_variation:empty { display: none !important; } /* El bloque de cantidad arranca pegado, con una separación controlada y chica */ .ndhpp-qty-block { margin: 14px 0 4px !important; } /* Reset del reset-variations link que a veces deja espacio */ .ndhpp-form-wrap .reset_variations, .ndhpp-shortcode .reset_variations { margin: 0 !important; line-height: 1; display: inline-block; } /* ========================================================== FIX DEFINITIVO ALTO TABLA VARIACIONES (v1.4.3) La tabla reservaba alto extra; forzamos altura automática real ========================================================== */ .ndhpp-active table.variations, .ndhpp-shortcode table.variations { height: auto !important; min-height: 0 !important; table-layout: auto; } .ndhpp-active table.variations tbody, .ndhpp-shortcode table.variations tbody { height: auto !important; min-height: 0 !important; } /* Las celdas de label y de valor, sin alto reservado */ .ndhpp-active .variations tr td.value, .ndhpp-shortcode .variations tr td.value, .ndhpp-active .variations tr td.label, .ndhpp-shortcode .variations tr td.label { height: auto !important; min-height: 0 !important; vertical-align: top; } /* ========================================================== PRECIO DINÁMICO [ndh_precio] ========================================================== */ .ndhpp-precio { font-family: var(--ndhpp-font); } .ndhpp-precio .ndhpp-precio-valor { font-size: var(--ndhpp-price-size, 34px); font-weight: 800; color: var(--ndhpp-price-color, #211C18); line-height: 1.1; display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .ndhpp-precio .ndhpp-precio-prefijo { font-size: .55em; font-weight: 600; color: var(--ndhpp-price-prefix, #8A7F73); text-transform: none; } /* Normalizar el markup que inyecta WooCommerce/YayCurrency */ .ndhpp-precio .ndhpp-precio-valor .price, .ndhpp-precio .ndhpp-precio-valor .woocommerce-Price-amount { font-size: inherit; font-weight: inherit; color: inherit; } .ndhpp-precio .ndhpp-precio-valor del { opacity: .5; font-size: .7em; font-weight: 500; } .ndhpp-precio .ndhpp-precio-valor ins { text-decoration: none; }