/* 
Theme Name: Hello Elementor Child
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Crazy Web Studio.
Author: Crazy Web Studio
Author URI: https://www.crazywebstudio.co.th/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* Add your custom styles here */

/* ------------------------------------------------------------------
   Product spec list, generated by the importer (scraper/afdescribe.py):
   <h3 class="af-specs-title">…</h3>
   <ul class="af-specs"><li class="af-spec">
     <span class="af-spec-label">Peso netto</span> <span class="af-spec-value">225 kg</span>
   </li></ul>
   Colours use custom properties so the Elementor design can override them.
   ------------------------------------------------------------------ */
.af-specs {
	--af-specs-line: rgba(0, 0, 0, 0.12);
	list-style: none;
	margin: 0 0 1.5em;
	padding: 0;
	border-top: 1px solid var(--af-specs-line);
}

.af-specs .af-spec {
	display: grid;
	grid-template-columns: minmax(10em, 40%) 1fr;
	gap: 0.25em 1em;
	margin: 0;
	padding: 0.55em 0;
	border-bottom: 1px solid var(--af-specs-line);
}

.af-spec-label {
	font-weight: 600;
}

.af-specs-title {
	font-size: 1.1em;
	margin: 1.2em 0 0.5em;
}

/* Label above value on narrow screens. */
@media (max-width: 600px) {
	.af-specs .af-spec {
		grid-template-columns: 1fr;
		gap: 0.1em;
	}
}

/* ------------------------------------------------------------------
   Google Maps embed on the Contatti page: <div class="af-map"><iframe>
   ------------------------------------------------------------------ */
.af-map iframe {
	display: block;
	width: 100%;
	height: 450px;
	border: 0;
}

@media (max-width: 600px) {
	.af-map iframe {
		height: 320px;
	}
}

/* ------------------------------------------------------------------
   Site header (Theme Builder template 1406)
   ------------------------------------------------------------------ */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

body.admin-bar .elementor-location-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/*
 * Header nav menu: widget with CSS class "af-header-nav" (Advanced tab).
 * The doubled class outranks the colours Elementor prints for the widget
 * (.elementor-1406 .elementor-element.elementor-element-<id> …).
 * Colours are the Elementor global colours of kit 7.
 */
.elementor-location-header .af-header-nav.af-header-nav .elementor-nav-menu--main .elementor-item,
.elementor-location-header .af-header-nav.af-header-nav .elementor-nav-menu--main .elementor-item:focus {
	color: var(--e-global-color-afwhite);
	fill: var(--e-global-color-afwhite);
}

.elementor-location-header .af-header-nav.af-header-nav .elementor-nav-menu--main .elementor-item:hover,
.elementor-location-header .af-header-nav.af-header-nav .elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-location-header .af-header-nav.af-header-nav .elementor-nav-menu--main .elementor-item.highlighted {
	color: var(--e-global-color-secondary);
	fill: var(--e-global-color-secondary);
}

.elementor-location-header .af-header-nav.af-header-nav .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item::before,
.elementor-location-header .af-header-nav.af-header-nav .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item::after {
	background-color: var(--e-global-color-secondary);
}

.elementor-location-header .af-header-nav.af-header-nav .elementor-nav-menu--dropdown {
	background-color: var(--e-global-color-afwhite);
	border-color: var(--e-global-color-afgrey2);
}

.elementor-location-header .af-header-nav.af-header-nav .elementor-nav-menu--dropdown a {
	color: var(--e-global-color-text);
	fill: var(--e-global-color-text);
}

.elementor-location-header .af-header-nav.af-header-nav .elementor-nav-menu--dropdown a:hover,
.elementor-location-header .af-header-nav.af-header-nav .elementor-nav-menu--dropdown a.highlighted,
.elementor-location-header .af-header-nav.af-header-nav .elementor-nav-menu--dropdown a.elementor-item-active {
	background-color: var(--e-global-color-primary);
	color: var(--e-global-color-afwhite);
}

.elementor-location-header .af-header-nav.af-header-nav .elementor-nav-menu--dropdown li:not(:last-child) {
	border-color: var(--e-global-color-afgrey2);
}

.elementor-location-header .af-header-nav.af-header-nav div.elementor-menu-toggle,
.elementor-location-header .af-header-nav.af-header-nav div.elementor-menu-toggle:hover,
.elementor-location-header .af-header-nav.af-header-nav div.elementor-menu-toggle:focus {
	color: var(--e-global-color-afwhite);
}

.elementor-location-header .af-header-nav.af-header-nav div.elementor-menu-toggle svg {
	fill: var(--e-global-color-afwhite);
}

/* ------------------------------------------------------------------
   Category sidebar: shortcode [af_category_nav] (functions.php).
   Hidden on mobile, like the old PrestaShop sidebar; also set
   "Hide on Mobile" on its Elementor container so the column collapses.
   ------------------------------------------------------------------ */
.af-category-nav {
	font-size: 15px;
	line-height: 1.35;
}

.af-category-nav__title {
	margin: 0;
	padding: 0.6em 0.9em;
	border-bottom: 2px solid var(--e-global-color-primary);
	background: var(--e-global-color-afgrey1);
	color: var(--e-global-color-text);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.af-category-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.af-category-nav__list {
	border: 1px solid var(--e-global-color-afgrey2);
	border-top: 0;
}

.af-category-nav li {
	position: relative;
	margin: 0;
}

.af-category-nav__list > li + li {
	border-top: 1px solid var(--e-global-color-afgrey2);
}

.af-category-nav a,
.af-category-nav a:visited {
	display: block;
	padding: 0.55em 2.6em 0.55em 0.9em;
	color: var(--e-global-color-text);
	text-decoration: none;
}

.af-category-nav__list > li > a {
	font-weight: 700;
}

.af-category-nav a:hover,
.af-category-nav a:focus {
	color: var(--e-global-color-primary);
}

.af-category-nav .current-menu-item > a {
	color: var(--e-global-color-primary);
	font-weight: 700;
	box-shadow: inset 3px 0 0 var(--e-global-color-primary);
}

.af-category-nav .sub-menu {
	display: none;
	padding-bottom: 0.4em;
	background: var(--e-global-color-afgrey1);
}

.af-category-nav .is-open > .sub-menu {
	display: block;
}

.af-category-nav .sub-menu a {
	padding-top: 0.35em;
	padding-bottom: 0.35em;
	padding-left: 1.6em;
	font-size: 0.93em;
}

.af-category-nav .sub-menu .sub-menu a {
	padding-left: 2.4em;
}

.af-category-nav__toggle,
.af-category-nav__toggle:hover,
.af-category-nav__toggle:focus {
	position: absolute;
	top: 0.2em;
	right: 0.3em;
	width: 2em;
	height: 2em;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: transparent;
	color: var(--e-global-color-text);
	font-size: 1.1em;
	line-height: 2em;
	text-align: center;
	cursor: pointer;
}

.af-category-nav__toggle::before {
	content: "+";
}

.af-category-nav .is-open > .af-category-nav__toggle::before {
	content: "\2212";
}

.af-category-nav__toggle:hover {
	color: var(--e-global-color-primary);
}

@media (max-width: 767px) {
	.af-category-nav {
		display: none;
	}
}

/* ------------------------------------------------------------------
   Condition badge on product cards (functions.php):
   <span class="af-condition-badge af-condition-badge--usato">Usato</span>
   ------------------------------------------------------------------ */
.woocommerce ul.products li.product {
	position: relative;
}

.af-condition-badge {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	padding: 0.3em 0.65em;
	border-radius: 3px;
	background: var(--e-global-color-text);
	color: var(--e-global-color-afwhite);
	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	pointer-events: none;
}

.af-condition-badge--nuovo {
	background: var(--e-global-color-secondary);
	color: var(--e-global-color-text);
}

.af-condition-badge--ricondizionato {
	background: var(--e-global-color-afgrey3);
}

/* ------------------------------------------------------------------
   WooCommerce buttons in the brand colours (product cards, product
   page, notices). The kit's link hover colour would turn the text red,
   so every state sets its own colour.
   ------------------------------------------------------------------ */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce ul.products li.product .button {
	padding: 0.75em 1.3em;
	border: 0;
	border-radius: 4px;
	background: var(--e-global-color-primary);
	color: var(--e-global-color-afwhite);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	transition: background-color 0.2s;
}

.woocommerce a.button:hover,
.woocommerce a.button:focus,
.woocommerce button.button:hover,
.woocommerce button.button:focus,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce a.button.alt:focus,
.woocommerce button.button.alt:hover,
.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .button:focus {
	background: var(--e-global-color-afred2);
	color: var(--e-global-color-afwhite);
}

.af-price-on-request {
	color: var(--e-global-color-text);
	font-weight: 600;
}

/* [af_condizione] on the product page: same badge, not in the corner. */
.af-condition .af-condition-badge {
	position: static;
	display: inline-block;
}

/* ------------------------------------------------------------------
   Product page (Elementor template "Prodotto"): price.
   ------------------------------------------------------------------ */
.woocommerce div.product .price,
.woocommerce div.product .price .amount {
	color: var(--e-global-color-text);
	font-weight: 700;
}

/* Two product cards per row on phones: full-width, one-line quote button. */
@media (max-width: 767px) {
	.woocommerce ul.products li.product .button {
		display: block;
		width: 100%;
		padding: 0.7em 0.4em;
		font-size: 13px;
		text-align: center;
		white-space: nowrap;
	}
}

/* ------------------------------------------------------------------
   Less red. Elementor widgets default their titles and prices to the
   Primary global colour (our red); here they default to the text colour.
   Red stays for the header, buttons and links in body text. A colour set
   on a single widget in the editor still wins (more specific selector).
   ------------------------------------------------------------------ */
body .elementor-widget-heading .elementor-heading-title,
body .elementor-widget-theme-archive-title .elementor-heading-title,
body .elementor-widget-woocommerce-product-title .elementor-heading-title,
body.woocommerce .elementor-widget-woocommerce-product-related.elementor-wc-products .products > h2,
body.woocommerce .elementor-widget-woocommerce-product-price .price,
body .elementor-wc-products.elementor-wc-products ul.products li.product .woocommerce-loop-product__title,
body .elementor-wc-products.elementor-wc-products ul.products li.product .woocommerce-loop-category__title,
body .elementor-wc-products.elementor-wc-products ul.products li.product .price,
body .elementor-wc-products.elementor-wc-products ul.products li.product .price .amount,
body.woocommerce div.product p.price {
	color: var(--e-global-color-text);
}

body .elementor-wc-products.elementor-wc-products ul.products li.product a:hover .woocommerce-loop-product__title {
	color: var(--e-global-color-primary);
}

/* "IVA esclusa" after the price: quieter than the amount. */
body.woocommerce .price .woocommerce-price-suffix {
	color: var(--e-global-color-afgrey3);
	font-weight: 400;
}

/* Product cards: title, price and quote button centred (all grids). */
body .woocommerce ul.products li.product,
body .elementor-wc-products.elementor-wc-products ul.products li.product {
	text-align: center;
}

body .woocommerce ul.products li.product .button {
	margin-left: auto;
	margin-right: auto;
}