/*
 * Armeria 3S — elementor.css
 * Compatibility fixes between the theme and Elementor (free). No design here.
 * Sections 2 and 4 only matter on a site that also runs Elementor Pro: they are optional and inert without it.
 *
 * Load order: after Elementor's frontend CSS (dependency added in inc/elementor.php), before the kit CSS
 * and widget CSS. Selectors sit just above Elementor's defaults, so Site Settings > Theme Style and every
 * widget setting (element-level CSS, 0-3-0 and up) still win.
 * Tokens come from base.css (they already follow the kit Global Colours / Fonts).
 */

/* ==========================================================================
   1. Layout: no double side padding, theme grid classes on boxed containers
   ========================================================================== */

/* Elementor content inside a theme container (shortcode [elementor-template], product description
   built with Elementor, Pro single with "Elementor Theme" layout): the theme container already pads. */
.a3s-container :where(.elementor) > .e-con {
	--padding-left: 0px;
	--padding-right: 0px;
}
/* ponytail: legacy Sections (pre-Flexbox) keep their 10px column gap inside theme containers. */

/* base.css grid classes on a *boxed* container style its .e-con-inner; Elementor's
   `.e-con > .e-con-inner { display: var(--display) }` has the same specificity and may load later. */
.e-con:is(.a3s-cat-tiles, .a3s-banners, .a3s-posts:not(.a3s-carousel)) > .e-con-inner {
	display: grid;
}

.e-con.a3s-carousel > .e-con-inner:not(:has(ul.products)) {
	display: flex;
}

/* A class set in Advanced > CSS Classes lands on the widget wrapper, not on the <hN>: let the title
   take the size/case of base.css title classes (Elementor's own settings stay more specific). */
:where(.a3s-hero__title, .a3s-section-title, .a3s-band-title, .a3s-banner__title, .a3s-banner-card__title) :where(.elementor-heading-title) {
	font-size: inherit;
	line-height: inherit;
	text-transform: inherit;
}

/* ==========================================================================
   2. (Optional, Pro only) Stacking: Elementor Pro sticky header vs theme layers
   Theme: header 100, back-to-top 120, sticky bar 5000, drawers 5005 (base.css --a3s-z-*).
   Pro: sticky 99, nav dropdown 9997, Menu Cart side cart 9998, popups 9999, Off-Canvas / Mega Menu
   ~2147483600 — all above the theme already. Only Pro's sticky header is too low: theme layers
   (facet panel, gallery, badges) would slide over it. Set through --z-index so a Z-Index chosen in
   the editor (Advanced > Layout) still wins.
   ========================================================================== */
.elementor-location-header .elementor-sticky--active,
.elementor-location-header.elementor-sticky--active {
	--z-index: var(--a3s-z-sticky);
}

/* Legacy Sections do not read --z-index. */
.elementor-location-header .elementor-section.elementor-sticky--active {
	z-index: var(--a3s-z-sticky);
}

/* ==========================================================================
   3. Elementor buttons: the default background is the kit Accent (3S yellow) but the default
   text is white (fails contrast). Charcoal text unless the widget or Theme Style sets one.
   ========================================================================== */
:where(.elementor) .elementor-button,
:where(.elementor) .elementor-button:hover,
:where(.elementor) .elementor-button:focus,
:where(.elementor) .elementor-button:visited {
	color: var(--a3s-color-primary-contrast);
	fill: currentColor;
}

/* ==========================================================================
   4. (Optional, Pro only) Elementor Pro WooCommerce widgets
   Pro ships its own palette (cyan #5bc0de buttons, grey #69727d text) and Roboto. Default their
   CSS variables to the theme tokens (= kit globals). Values chosen in the widget panel still win.
   ========================================================================== */
body :is(
	.elementor-widget-woocommerce-cart,
	.elementor-widget-woocommerce-checkout-page,
	.elementor-widget-woocommerce-my-account,
	.elementor-widget-woocommerce-purchase-summary
) {
	color: var(--a3s-color-text);
	font-family: var(--a3s-font-body);

	--general-text-color: var(--a3s-color-text);
	--sections-background-color: var(--a3s-color-bg);
	--sections-border-color: var(--a3s-color-border);
	--sections-border-radius: var(--a3s-radius);
	--sections-title-color: var(--a3s-color-heading);
	--sections-secondary-title-color: var(--a3s-color-muted);
	--sections-descriptions-color: var(--a3s-color-muted);
	--sections-messages-color: var(--a3s-color-text);
	--sections-checkboxes-color: var(--a3s-color-text);
	--sections-radio-buttons-color: var(--a3s-color-text);
	--typography-section-titles-color: var(--a3s-color-heading);
	--titles-color: var(--a3s-color-heading);
	--account-title-color: var(--a3s-color-heading);

	--forms-labels-color: var(--a3s-color-text);
	--forms-fields-normal-color: var(--a3s-color-text);
	--forms-fields-focus-color: var(--a3s-color-text);
	--forms-fields-normal-background-color: var(--a3s-color-bg);
	--forms-fields-focus-background-color: var(--a3s-color-bg);
	--forms-fields-focus-border-color: var(--a3s-color-primary);
	--forms-fields-border-radius: var(--a3s-radius);
	--checkboxes-color: var(--a3s-color-text);
	--payment-methods-radio-buttons-color: var(--a3s-color-text);
	--login-messages-color: var(--a3s-color-text);

	/* Secondary (outlined) buttons: charcoal, orange on hover. */
	--forms-buttons-border-color: var(--a3s-color-secondary);
	--forms-buttons-normal-text-color: var(--a3s-color-secondary);
	--forms-buttons-hover-border-color: var(--a3s-color-primary);
	--forms-buttons-hover-text-color: var(--a3s-color-primary-contrast);
	--forms-buttons-hover-background-color: var(--a3s-color-primary);
	--forms-buttons-border-radius: var(--a3s-radius);
	--tables-buttons-border-color: var(--a3s-color-secondary);
	--tables-button-normal-text-color: var(--a3s-color-secondary);
	--tables-button-hover-text-color: var(--a3s-color-primary-contrast);
	--tables-button-border-radius: var(--a3s-radius);
	--buttons-border-color: var(--a3s-color-secondary);
	--button-normal-text-color: var(--a3s-color-secondary);
	--button-hover-text-color: var(--a3s-color-primary-contrast);
	--button-border-radius: var(--a3s-radius);

	/* Primary buttons (Proceed to checkout, Place order): orange + charcoal, hover charcoal + white (D2). */
	--checkout-button-normal-text-color: var(--a3s-color-primary-contrast);
	--checkout-button-hover-text-color: var(--a3s-color-bg);
	--checkout-button-hover-border-color: var(--a3s-color-secondary);
	--checkout-button-border-radius: var(--a3s-radius);
	--purchase-button-normal-text-color: var(--a3s-color-primary-contrast);
	--purchase-button-hover-text-color: var(--a3s-color-bg);
	--purchase-button-hover-border-color: var(--a3s-color-secondary);
	--purchase-button-border-radius: var(--a3s-radius);

	--links-normal-color: var(--a3s-color-text);
	--links-hover-color: var(--a3s-color-link-hover);
	--product-link-normal-color: var(--a3s-color-text);
	--product-link-hover-color: var(--a3s-color-link-hover);
	--tables-links-normal-color: var(--a3s-color-text);
	--tables-links-hover-color: var(--a3s-color-link-hover);
	--order-details-product-links-normal-color: var(--a3s-color-text);
	--order-details-product-links-hover-color: var(--a3s-color-link-hover);

	--order-summary-color: var(--a3s-color-text);
	--order-summary-title-color: var(--a3s-color-heading);
	--order-summary-items-color: var(--a3s-color-text);
	--order-summary-variations-color: var(--a3s-color-muted);
	--order-summary-totals-color: var(--a3s-color-text);
	--order-summary-items-divider-color: var(--a3s-color-border);
	--order-summary-totals-divider-color: var(--a3s-color-border);
	--order-summary-quantity-border-color: var(--a3s-color-border);
	--order-summary-remove-icon-normal-color: var(--a3s-color-muted);
	--order-summary-remove-icon-hover-color: var(--a3s-color-sale);
	--totals-color: var(--a3s-color-text);
	--totals-divider-color: var(--a3s-color-border);
	--tables-title-color: var(--a3s-color-heading);
	--tables-items-color: var(--a3s-color-text);
	--tables-divider-border-color: var(--a3s-color-border);
	--variations-color: var(--a3s-color-muted);

	--tabs-normal-color: var(--a3s-color-text);
	--tabs-hover-color: var(--a3s-color-link-hover);
	--tabs-active-color: var(--a3s-color-link-hover);
	--tabs-divider-color: var(--a3s-color-border);

	--confirmation-message-color: var(--a3s-color-text);
	--order-details-titles-totals-color: var(--a3s-color-heading);
	--order-details-items-color: var(--a3s-color-text);
	--order-details-variations-color: var(--a3s-color-muted);
	--payment-details-border-color: var(--a3s-color-border);
	--payment-details-titles-color: var(--a3s-color-heading);
	--payment-details-items-color: var(--a3s-color-text);
	--bank-details-border-color: var(--a3s-color-border);
	--bank-details-titles-color: var(--a3s-color-heading);
	--bank-details-items-color: var(--a3s-color-text);
}

/* Pro hard-codes Roboto (never loaded) on the Cart widget's inner .woocommerce. */
body .elementor-widget-woocommerce-cart .woocommerce {
	font-family: inherit;
}

/* Products / Archive Products cards: the widget's global defaults (kit Primary colour + typography,
   0-5-2, printed after this file) break the theme's 3-line title clamp. 0-5-3 beats them; values set
   in the widget panel (0-7-2) still win, and the height follows their line-height (lh). */
body .elementor-widget.elementor-wc-products ul.products li.product .woocommerce-loop-product__title {
	display: -webkit-box;
	height: calc(3 * 1.2em);
	height: calc(3 * 1lh);
	overflow: hidden;
	color: var(--a3s-color-text);
	font-weight: 400;
	line-height: 1.2;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/* Pro's select2 dropdown (appended to <body>) hard-codes Roboto. */
body .e-woo-select2-wrapper .select2-results__option {
	color: var(--a3s-color-text);
	font-family: var(--a3s-font-body);
}

/* Primary buttons: Pro hard-codes the background (#5bc0de) with no variable. Selectors mirror Pro's
   with one extra `body`, so the widget's own Background control (more specific) still wins. */
body .elementor-widget-woocommerce-cart .woocommerce .wc-proceed-to-checkout .checkout-button,
body .elementor-widget-woocommerce-checkout-page .woocommerce-checkout #payment #place_order,
body .elementor-widget-woocommerce-my-account .e-my-account-tab__add-payment-method #add_payment_method #payment #place_order,
body .elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .login .button,
body .elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .register .button,
body .elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .woocommerce-ResetPassword .button,
body .elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-EditAccountForm .button,
body .elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-address-fields .button {
	background: var(--a3s-color-primary);
	color: var(--a3s-color-primary-contrast);
}

body .elementor-widget-woocommerce-cart .woocommerce .wc-proceed-to-checkout .checkout-button:hover,
body .elementor-widget-woocommerce-checkout-page .woocommerce-checkout #payment #place_order:hover,
body .elementor-widget-woocommerce-my-account .e-my-account-tab__add-payment-method #add_payment_method #payment #place_order:hover,
body .elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .login .button:hover,
body .elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .register .button:hover,
body .elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce .woocommerce-ResetPassword .button:hover,
body .elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-EditAccountForm .button:hover,
body .elementor-widget-woocommerce-my-account .e-my-account-tab:not(.e-my-account-tab__dashboard--custom) .woocommerce-address-fields .button:hover {
	background: var(--a3s-color-secondary);
	color: var(--a3s-color-bg);
}

/* Product Add To Cart "info" button skin. */
body :is(.elementor-widget-wc-add-to-cart, .woocommerce div.product .elementor-widget-wc-add-to-cart).elementor-button-info button.button.alt.elementor-button {
	background-color: var(--a3s-color-primary);
}

/* Menu Cart: toggle, count bubble, side cart. */
body .elementor-widget-woocommerce-menu-cart {
	--toggle-button-text-color: var(--a3s-color-text);
	--toggle-button-icon-color: var(--a3s-color-text);
	--toggle-button-border-color: var(--a3s-color-border);
	--toggle-button-hover-text-color: var(--a3s-color-link-hover);
	--toggle-button-icon-hover-color: var(--a3s-color-link-hover);
	--toggle-button-hover-border-color: var(--a3s-color-primary);
	--toggle-button-border-radius: var(--a3s-radius);
	--items-indicator-background-color: var(--a3s-color-primary);
	--items-indicator-text-color: var(--a3s-color-primary-contrast);
	--cart-background-color: var(--a3s-color-bg);
	--cart-close-button-color: var(--a3s-color-text);
	--cart-close-button-hover-color: var(--a3s-color-link-hover);
	--divider-color: var(--a3s-color-border);
	--subtotal-divider-color: var(--a3s-color-border);
	--product-price-color: var(--a3s-color-text);
	--product-variations-color: var(--a3s-color-muted);
	--remove-item-button-color: var(--a3s-color-border);
	--remove-item-button-hover-color: var(--a3s-color-sale);
	--view-cart-button-background-color: var(--a3s-color-secondary);
	--view-cart-button-text-color: var(--a3s-color-bg);
	--view-cart-button-hover-background-color: var(--a3s-color-dark-2);
	--view-cart-button-hover-text-color: var(--a3s-color-bg);
	--checkout-button-background-color: var(--a3s-color-primary);
	--checkout-button-text-color: var(--a3s-color-primary-contrast);
	--checkout-button-hover-background-color: var(--a3s-color-secondary);
	--checkout-button-hover-text-color: var(--a3s-color-bg);
}

body .elementor-menu-cart__product-remove {
	color: var(--a3s-color-muted);
}