/*
Theme Name:   Storefront Bahaar Child
Theme URI:    https://demo.nationalfinance.ae/
Description:  Child theme of Storefront for Bahaar Flavors. Holds theme-level CSS that Elementor's global settings cannot reach - notably container and card border-radius on WooCommerce and Storefront surfaces. Elementor widget output is deliberately left alone and stays governed by Elementor Site Settings.
Author:       Bahaar Flavors
Template:     storefront
Version:      1.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  storefront-bahaar
Tags:         woocommerce, e-commerce, child-theme
*/

/* ==========================================================================
   1. Design tokens
   Mirrors the values already set as Elementor globals so the two systems
   stay in step. Elementor owns its widgets; this file owns theme surfaces.
   ========================================================================== */

:root {
	/* Radii */
	--bf-radius-card:     14px; /* matches Elementor image_border_radius */
	--bf-radius-control:   8px; /* matches Elementor button_border_radius */

	/* Palette - mirrors Elementor Global Colors */
	--bf-primary:    #5FAD2E;
	--bf-secondary:  #376B1C;
	--bf-text:       #28212F;
	--bf-background: #EAE6D5;
	--bf-accent:     #8A6B3E;

	/* Derived neutrals */
	--bf-border-soft: #CFC9B4;
	--bf-surface:     #FFFFFF;
	--bf-shadow-card: 0 2px 8px rgba(40, 33, 47, .08);
}

/* ==========================================================================
   2. Product cards
   The :not(.elementor *) guard keeps every rule below off anything rendered
   inside an Elementor page - including product grids output by the native
   Shortcode widget - so Elementor output stays governed by Elementor alone.
   ========================================================================== */

.woocommerce ul.products li.product:not(.elementor *),
.woocommerce-page ul.products li.product:not(.elementor *) {
	border-radius: var(--bf-radius-card);
}

/* Radius on the thumbnail is what actually reads on Storefront's unboxed cards. */
.woocommerce ul.products li.product a img:not(.elementor *),
.woocommerce-page ul.products li.product a img:not(.elementor *) {
	border-radius: var(--bf-radius-card);
}

/* Single product gallery */
.woocommerce div.product div.images img:not(.elementor *),
.woocommerce div.product div.images .woocommerce-product-gallery__image:not(.elementor *) {
	border-radius: var(--bf-radius-card);
}

/* Storefront's homepage product sections and category tiles */
.storefront-product-section ul.products li.product img:not(.elementor *),
.woocommerce ul.products li.product-category img:not(.elementor *) {
	border-radius: var(--bf-radius-card);
}

/* ==========================================================================
   3. Content boxes
   Surfaces that already carry a background or border, where radius is visible
   immediately without altering layout.
   ========================================================================== */

.woocommerce-message:not(.elementor *),
.woocommerce-info:not(.elementor *),
.woocommerce-error:not(.elementor *),
.woocommerce-noreviews:not(.elementor *),
.woocommerce p.no-comments:not(.elementor *) {
	border-radius: var(--bf-radius-card);
}

.woocommerce .cart-collaterals .cart_totals:not(.elementor *),
.woocommerce-checkout #payment:not(.elementor *),
.woocommerce .woocommerce-tabs .panel:not(.elementor *),
.woocommerce form.login:not(.elementor *),
.woocommerce form.register:not(.elementor *),
.woocommerce form.checkout_coupon:not(.elementor *),
.woocommerce-account .woocommerce-MyAccount-navigation:not(.elementor *) {
	border-radius: var(--bf-radius-card);
}

/* Storefront widgets and comment surfaces */
.site-header-cart .widget_shopping_cart:not(.elementor *),
.widget:not(.elementor *) .wp-block-search__input,
#comments .comment-list .comment-content:not(.elementor *) {
	border-radius: var(--bf-radius-card);
}

/* ==========================================================================
   4. Controls
   Theme-rendered buttons and fields are NOT reachable by Elementor's global
   button settings, which only style .elementor-button. Matching the control
   radius here keeps Storefront pages consistent with Elementor pages.
   ========================================================================== */

.woocommerce #respond input#submit:not(.elementor *),
.woocommerce a.button:not(.elementor *),
.woocommerce button.button:not(.elementor *),
.woocommerce input.button:not(.elementor *),
.woocommerce a.button.alt:not(.elementor *),
.woocommerce button.button.alt:not(.elementor *),
button:not(.elementor *),
input[type="button"]:not(.elementor *),
input[type="reset"]:not(.elementor *),
input[type="submit"]:not(.elementor *) {
	border-radius: var(--bf-radius-control);
}

input[type="text"]:not(.elementor *),
input[type="email"]:not(.elementor *),
input[type="tel"]:not(.elementor *),
input[type="url"]:not(.elementor *),
input[type="password"]:not(.elementor *),
input[type="search"]:not(.elementor *),
input[type="number"]:not(.elementor *),
textarea:not(.elementor *),
select:not(.elementor *),
.select2-container .select2-selection--single:not(.elementor *) {
	border-radius: var(--bf-radius-control);
}