/*
Theme Name: Hello Commerce Child
Template: hello-commerce
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Sell smart from the start with Hello Commerce. Hello Commerce is a free WordPress ecommerce theme designed to help you launch your online store quickly and professionally. Built for WooCommerce and powered by the flexibility of Elementor, it offers a lightweight, responsive foundation that’s perfect for beginners and growing businesses alike. Whether you're selling products or services, the Hello Commerce theme gives you the freedom to build your store your way, launch fast, and scale with confidence. Start strong with a guided setup, ready-made shop templates, and intuitive styling controls. Customize your storefront’s style and layout, including product grids, cart, and checkout pages, with intuitive controls, directly within the Elementor ecosystem without code. Manage your site efficiently using the dedicated Home screen that brings key tools and actions together. Why Hello Commerce? - Seamless integration with Elementor and WooCommerce - Fast, flexible, and performance-optimized - Beginner-friendly, no code or technical skills required - Complete site template kits to launch your store quickly. Report security bugs through the Patchstack Vulnerability Disclosure Program. The Patchstack team validates, triages, and handles vulnerabilities. Report here https://patchstack.com/database.
Tags: flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready,style-variations
Version: 1.0.1.1762823505
Updated: 2025-11-10 19:11:45

*/

/* ==============================================
   Quantity + / – Button Styles con !important en colores
   ============================================== */

/* Contenedor flex para input + botones */
.woocommerce div.product form.cart .quantity,
.elementor-widget-woocommerce-product-add-to-cart .quantity {
  display: inline-flex;
  align-items: center;
}

/* Estilos comunes para ambos botones */
.quantity-button.minus,
.quantity-button.plus {
  background-color: #F5F5F5;   /* fondo gris claro fijo */
  border: none;
    width: 40px;
  height: 40px;
  border-radius: 13px;         /* radio de 13px */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;           /* negrita */
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: none;            /* sin efecto hover */
}

/* Color del signo “–” */
.quantity-button.minus {
  margin-right: 8px;
}

/* Color del signo “+” */
.quantity-button.plus {
  margin-left: 8px;
}

/* Mantener fondo fijo al hover */
.quantity-button.minus:hover,
.quantity-button.plus:hover {
  background-color: #F5F5F5;
}

/* Input de cantidad centrado y sin bordes */
.quantity input.qty {
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  text-align: center;
  font-size: 1rem;
  line-height: 1;
  -moz-appearance: textfield;
}
.quantity input.qty::-webkit-inner-spin-button,
.quantity input.qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Estado “–” deshabilitado */
.quantity-button.minus:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}


button.single_add_to_cart_button.button.alt {
    padding: 15px 30px !important;
    border-radius: 0px !important;
}

button.quantity-button.minus {
    border-radius: 0px !important;
}



/* ==============================================
   Review Shortcode
   ============================================== */

/* — CONTENEDOR GENERAL — */
.fc-rating-breakdown {
  background-color: #F37022;
  padding: 2rem;
  border-radius: 8px;
  color: #fff;
}

/* — PROMEDIO — */
.fc-rating-breakdown .avg {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 2rem;
}
.fc-rating-breakdown .avg strong {
  font-size: 6rem;
  line-height: 1;
  color: #fff;
}

/* Ocultamos posibles SVGs viejos */
.fc-rating-breakdown .avg .stars svg {
  display: none !important;
}

/* Estrellas WooCommerce (star-rating) a gran tamaño */
.fc-rating-breakdown .avg .star-rating,
.fc-rating-breakdown .avg .star-rating span {
  font-size: 1.8rem !important;   /* ancho de cada estrella */
  line-height: 1 !important;
  color: #fff !important;         /* estrellas blancas */
}

/* Texto “(X opiniones)” justo abajo */
.fc-rating-breakdown .avg small {
  margin-top: .5rem;
  font-size: 1.1rem;
  color: rgba(255,255,255,0.85);
}

/* — DESGLOSE POR ESTRELLAS — */
.fc-rating-breakdown .row {
  display: flex;
  align-items: center;
  margin-bottom: .75rem;
}
.fc-rating-breakdown .row .star-label {
  width: 3rem;
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
}
.fc-rating-breakdown .row .bar {
  flex: 1;
  height: 8px;
  margin: 0 1rem;
  background: transparent;
  border-radius: 4px;
  overflow: hidden;
}
.fc-rating-breakdown .row .bar .fill {
  height: 100%;
  background: #fff;
  border-radius: 4px;
}
.fc-rating-breakdown .row .count {
  width: 2rem;
  text-align: right;
  font-size: 1.5rem;
  color: #fff;
}