/*
 * ROSECAL — Sistema visual de esquinas redondeadas
 * ------------------------------------------------
 * Reemplaza al viejo "look cuadrado" (`* { border-radius: 0 !important }` que
 * vivia en style.css). Ahora todo lo que es cuadrado lleva radio, aplicado por
 * familia de componente y nunca con comodines.
 *
 * Tokens (definidos en :root mas abajo):
 *   --rose-radius        8px   radio base: botones, inputs, selects, cajas chicas
 *   --rose-radius-sm     6px   piezas chicas: swatches, badges, chips, numeros de paso
 *   --rose-radius-lg    12px   superficies grandes: tarjetas, paneles, modales, drawers
 *   --rose-radius-pill 999px   pildoras intencionales (swatch de talle, burbuja de cantidad)
 *   --rose-radius-round  50%   circulos intencionales (avatares, spinners, radios de oferta)
 *
 * IMPORTANTE: el bloque final "EXCEPCIONES CIRCULARES" va ultimo a proposito.
 * Todo lo que deba seguir siendo redondo se declara ahi, para que gane por orden.
 *
 * Se encola en inc/enqueue.php con prioridad 999 (despues de los mu-plugins),
 * asi las reglas con !important de este archivo ganan los empates por orden.
 */

:root {
	--rose-radius: 8px;
	--rose-radius-sm: 6px;
	--rose-radius-lg: 12px;
	--rose-radius-pill: 999px;
	--rose-radius-round: 50%;
}

/* ==========================================================================
   1. BOTONES Y CTAs
   El kit de Elementor inyecta `border-radius: 20px` en `button`, `.elementor-button`
   e `input[type=submit]` (especificidad 0,1,1). Por eso aca va !important.
   ========================================================================== */

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
.button,
a.button,
.wp-element-button,
.elementor-button,
.elementor-button-link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.single_add_to_cart_button,
.wc-proceed-to-checkout .checkout-button,
.woocommerce .wc-proceed-to-checkout .checkout-button,
.elementor-menu-cart__footer-buttons .elementor-button,
.md-size-chart-btn,
[class*="__button"],
[class*="__btn"],
[class$="-btn"],
[class*="-btn "] {
	border-radius: var(--rose-radius) !important;
}

/* Botones del tema hijo que declaran su propio radio 0 o que quedan tapados
   por reglas de mu-plugins con especificidad alta. */
body .rosecal-hollow-demo .single_add_to_cart_button,
body.rosecal-product-demo-page .rcpdp-sticky-buy-bar .rcpdp-sticky-buy-bar__cta,
body .rose-qv .single_add_to_cart_button,
body .rose-qv__simple-cart .button,
/* CTA y stepper de cantidad del carrito lateral (hollow-cart.css los deja en 4px). */
.rose-hollow-cart .elementor-menu-cart__footer-buttons .elementor-button--checkout,
.rose-hollow-cart__quantity,
.rose-hollow-cart__qty-button {
	border-radius: var(--rose-radius) !important;
}

/* ==========================================================================
   2. CONTROLES DE FORMULARIO (inputs, selects, textareas)
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
input[type="url"],
input[type="date"],
select,
textarea,
.select2-container .select2-selection,
.select2-container .select2-selection--single,
.select2-container .select2-dropdown,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.quantity input.qty,
input.qty {
	border-radius: var(--rose-radius) !important;
}

input[type="checkbox"] {
	border-radius: var(--rose-radius-sm) !important;
}

/* ==========================================================================
   3. TARJETAS DE PRODUCTO (home, tienda, categoria, resultados)
   ========================================================================== */

.rose-product-card,
.rose-product-card__media,
.woocommerce ul.products li.product,
.e-loop-item.product > .elementor-element,
.e-loop-item.product .catprod,
.e-loop-item.product .elementor-widget-image img,
.rose-qv__card,
.rcpdp-use-card,
.rcpdp-pack-card {
	border-radius: var(--rose-radius-lg) !important;
}

/* ==========================================================================
   4. CAJAS, PANELES Y CONTENEDORES
   ========================================================================== */

.rose-filter-sidebar,
.rose-mega-dropdown,
.e-checkout__order_review,
.woocommerce-checkout-review-order-table,
table.shop_table.woocommerce-checkout-review-order-table,
.rose-accordion-group,
.rose-accordion-content,
.hello-child-product-search__suggestions,
.hello-child-variation-msg,
.rose-price-inputs,
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notices-wrapper > *,
.woocommerce-checkout .woocommerce-checkout-review-order,
.rose-step,
.rose-step__body,
.rose-step__summary,
.rose-co-trust,
.rose-co-trust-card,
.rose-co-review,
.rose-co-reviews,
.rose-co-coupon,
.rose-co-pay,
.rose-co-noship,
.rose-co-checkrow,
.rose-cf__inner,
.rose-hollow-cart__trust,
.rose-hollow-cart__perks,
.rose-hollow-cart__progress,
.rose-hollow-cart__item,
.elementor-menu-cart__product,
.rcpdp-compare-wrap,
.rcpdp-product-details__accordions {
	border-radius: var(--rose-radius-lg) !important;
}

/* Cajas chicas: usan el radio base para no verse infladas. */
.rose-co-line,
.rose-co-product,
.rose-co-product__media,
.rose-co-tax__line,
.rose-co-ssl,
.rose-co-pay__cards,
.rose-co-thumb,
.hello-child-product-search__form,
.rose-checkbox-label,
.rose-filter-group,
.rose-sub-item,
.rose-dropdown-inner,
.hello-child-swatches,
.rose-hollow-cart__media,
.elementor-menu-cart__product-image,
.elementor-menu-cart__product-image img {
	border-radius: var(--rose-radius) !important;
}

/* ==========================================================================
   5. BADGES, CHIPS Y ETIQUETAS
   ========================================================================== */

.onsale,
.woocommerce span.onsale,
.rose-product-card__badge,
.rose-product-card__more,
.rose-step__num,
.rose-co-product-discount,
.rose-ico,
[class*="badge"],
[class*="__tag"],
[class*="__chip"] {
	border-radius: var(--rose-radius-sm) !important;
}

/* ==========================================================================
   6. SWATCHES DE COLOR
   Los colores usan el mismo radio base que los botones tanto en la ficha como
   en el catalogo.
   Los selectores largos igualan la especificidad de rosecal-product-demo.css,
   que forzaba `border-radius: 50% !important`; al cargar despues, ganamos.
   ========================================================================== */

.swatch-color,
.swatch-item.swatch-color,
.rose-product-card__swatch,
.rose-qv__swatch,
.rose-qv .swatch-color,
.hello-child-swatches .swatch-item.swatch-color,
.e-loop-item.product .hello-child-loop-swatches .swatch-color,
.rosecal-hollow-demo .swatch-item.swatch-color,
body.rosecal-product-demo-page .rosecal-hollow-demo .swatch-item.swatch-color,
body.rosecal-product-demo-page .rosecal-hollow-demo .hello-child-swatches .swatch-item.swatch-color {
	border-radius: var(--rose-radius) !important;
}

/* El estado activo se dibuja con un anillo exterior. Reservamos exactamente el
   espacio que ocupa dentro de su contenedor: el margen negativo anterior lo
   sacaba de `table.variations`, cuyo overflow recortaba el primer color. */
.rose-product-card__swatches {
	padding: 3px;
	margin-left: 0;
}

.hello-child-swatches,
body.rosecal-product-demo-page .rosecal-hollow-demo .hello-child-swatches {
	padding: 2px;
	margin-left: 0;
}

/* Los talles son controles chicos, no pildoras: usan el mismo radio base que
   botones e inputs del sitio. Los selectores largos pisan el 999px del demo. */
.swatch-item.swatch-size,
.rosecal-hollow-demo .swatch-item.swatch-size,
body.rosecal-product-demo-page .rosecal-hollow-demo .swatch-item.swatch-size {
	border-radius: var(--rose-radius) !important;
}

/* Las filas de especificaciones necesitan bordes rectos y continuos. El radio
   global curvaba cada linea por separado y daba la sensacion de estar cortada. */
body.rosecal-product-demo-page .rosecal-hollow-demo .rcpdp-product-details .rcpdp-product-details__facts,
body.rosecal-product-demo-page .rosecal-hollow-demo .rcpdp-product-details .rcpdp-product-details__facts > div {
	border-radius: 0 !important;
}

/* ==========================================================================
   7. MODALES, DRAWERS Y OVERLAYS
   Los drawers pegados a un borde de la pantalla solo redondean el lado interno,
   si no queda un hueco raro contra el borde del viewport.
   ========================================================================== */

.remodal,
.md-size-chart-modal-body,
.md-size-chart-modal-body.medium,
.md-size-chart-modal-body.small,
.md-size-chart-modal-body.large,
.rcpdp-review-modal__panel,
.rcpdp-size-drawer__panel,
.rose-modal,
.rose-qv__content {
	border-radius: var(--rose-radius-lg) !important;
}

.rose-qv__panel,
.elementor-menu-cart__main,
.rose-hollow-cart {
	border-top-left-radius: var(--rose-radius-lg) !important;
	border-bottom-left-radius: var(--rose-radius-lg) !important;
	border-top-right-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

/* ==========================================================================
   8. MEDIA E IMAGENES DENTRO DE TARJETAS
   ========================================================================== */

.rose-product-card__media img,
.rose-qv__image,
.woocommerce-product-gallery__image,
.woocommerce-product-gallery__wrapper,
/* Los wrappers de la galeria no tienen overflow:hidden (romperia el zoom), asi
   que redondeamos la imagen misma. */
.woocommerce-product-gallery__image img,
.woocommerce-product-gallery .flex-control-thumbs img,
.rcpdp-performance__media {
	border-radius: var(--rose-radius-lg) !important;
}

/* ==========================================================================
   9. EXCEPCIONES CIRCULARES — VA ULTIMO A PROPOSITO
   Piezas que deben seguir siendo circulos o pildoras. Si agregas una familia
   nueva arriba, revisa que no pise nada de esta lista.
   ========================================================================== */

/* --- Circulos (50%) --- */
input[type="radio"],
.rpb-offer > i,
.rpb-offers .rpb-offer > i,
.rose-atc-spinner,
.rose-step__spin,
.avatar,
img.avatar,
[class*="avatar"],
.rcpdp-junip-review__avatar,
.rcpdp-guarantee__icon,
.rcpdp-ship-dot,
.rcpdp-review-modal__close,
.elementor-shape-circle .elementor-icon,
.elementor-view-framed.elementor-shape-circle .elementor-icon,
.rose-chevron-down,
.rose-co-review__check circle {
	border-radius: var(--rose-radius-round) !important;
}

/* --- Pildoras (999px) --- */
.rose-co-product-qty,
.rcpdp-gauge__bar,
.rcpdp-ship-banner,
.rpb-offer > b,
.rcpdp-junip__bars button i,
.rcpdp-junip__bars button i b,
.rcpdp-junip__trait > div i,
.rose-hollow-cart__progress-bar,
.rose-hollow-cart__progress-fill {
	border-radius: var(--rose-radius-pill) !important;
}

/* El tilde del checkout es un SVG: `border-radius` no aplica al <circle>, pero
   dejamos la regla arriba por si alguna vez se reemplaza por un <span>. */