/* ==========================================================================
   Startuds - Third-party plugin compatibility
   Loaded ONLY when a supported plugin is detected (see inc/plugin-compat.php).
   Every rule is scoped to a plugin class or a body class, and every value
   comes from a theme CSS variable, so swatches inherit the site palette.
   Specificity is kept deliberately low so plugin settings still win.
   ========================================================================== */

/* ==========================================================================
   1. VARIATION SWATCHES - shared
   All six supported plugins render a list of swatch items. These rules
   normalise size, shape, gap and selected state across all of them.
   ========================================================================== */

.st-has-swatches .st-variations { margin-bottom: 8px; }

/* Woo Variation Swatches (woo-variation-swatches, 300k+ installs) */

.woo-variation-swatches .variable-items-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--st-swatch-gap, 8px);
	margin: 0;
	padding: 0;
}

.woo-variation-swatches .variable-items-wrapper .variable-item:not(.radio-variable-item) {
	width: var(--st-swatch-size, 38px);
	min-width: var(--st-swatch-size, 38px);
	height: var(--st-swatch-size, 38px);
	margin: 0;
	box-shadow: none;
	border: 1px solid var(--st-border);
	transition: border-color var(--st-transition), box-shadow var(--st-transition);
}

.woo-variation-swatches .variable-items-wrapper .variable-item.button-variable-item {
	width: auto;
	min-width: var(--st-swatch-size, 38px);
	padding-inline: 12px;
}

.woo-variation-swatches .variable-items-wrapper .variable-item.selected,
.woo-variation-swatches .variable-items-wrapper .variable-item:hover {
	border-color: var(--st-swatch-selected, #111418);
	box-shadow: 0 0 0 var(--st-swatch-selected-width, 2px) var(--st-swatch-selected, #111418);
}

.woo-variation-swatches .variable-items-wrapper .variable-item .variable-item-span {
	font-family: var(--st-font-body);
	font-size: var(--st-size-small);
	line-height: 1.4;
	color: var(--st-heading);
}

/* TA_WVS / variation-swatches-woo */

.tawcvs-swatches { display: flex; flex-wrap: wrap; gap: var(--st-swatch-gap, 8px); }

.tawcvs-swatches .swatch {
	width: var(--st-swatch-size, 38px);
	height: var(--st-swatch-size, 38px);
	margin: 0;
	border: 1px solid var(--st-border);
	box-shadow: none;
	transition: border-color var(--st-transition), box-shadow var(--st-transition);
}

.tawcvs-swatches .swatch.selected,
.tawcvs-swatches .swatch:hover {
	border-color: var(--st-swatch-selected, #111418);
	box-shadow: 0 0 0 var(--st-swatch-selected-width, 2px) var(--st-swatch-selected, #111418);
}

.tawcvs-swatches .swatch-label {
	width: auto;
	min-width: var(--st-swatch-size, 38px);
	padding-inline: 12px;
	font-family: var(--st-font-body);
	font-size: var(--st-size-small);
	color: var(--st-heading);
}

/* wc-variation-swatches */

.wcvs-swatches-wrapper,
.wcvs-variation-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: var(--st-swatch-gap, 8px);
}

.wcvs-swatch,
.wcvs-variation-swatch {
	width: var(--st-swatch-size, 38px);
	height: var(--st-swatch-size, 38px);
	border: 1px solid var(--st-border);
	transition: border-color var(--st-transition), box-shadow var(--st-transition);
}

.wcvs-swatch.selected,
.wcvs-variation-swatch.selected {
	border-color: var(--st-swatch-selected, #111418);
	box-shadow: 0 0 0 var(--st-swatch-selected-width, 2px) var(--st-swatch-selected, #111418);
}

/* YITH Color and Label Variations */

.yith-wccl-container .yith_wccl_value,
.yith-wccl .select-option {
	width: var(--st-swatch-size, 38px);
	height: var(--st-swatch-size, 38px);
	margin: 0 var(--st-swatch-gap, 8px) var(--st-swatch-gap, 8px) 0;
	border: 1px solid var(--st-border);
	box-shadow: none;
}

.yith-wccl-container .yith_wccl_value.selected,
.yith-wccl .select-option.selected {
	border-color: var(--st-swatch-selected, #111418);
	box-shadow: 0 0 0 var(--st-swatch-selected-width, 2px) var(--st-swatch-selected, #111418);
}

/* WooCommerce.com Variation Swatches and Photos */

.wc-swatches { display: flex; flex-wrap: wrap; gap: var(--st-swatch-gap, 8px); }

.wc-swatches .swatch-wrapper {
	width: var(--st-swatch-size, 38px);
	height: var(--st-swatch-size, 38px);
	border: 1px solid var(--st-border);
}

.wc-swatches .swatch-wrapper.selected {
	border-color: var(--st-swatch-selected, #111418);
	box-shadow: 0 0 0 var(--st-swatch-selected-width, 2px) var(--st-swatch-selected, #111418);
}

/* --- Shape, driven by the Customizer ------------------------------------- */

.st-swatch-rounded .variable-item,
.st-swatch-rounded .tawcvs-swatches .swatch,
.st-swatch-rounded .wcvs-swatch,
.st-swatch-rounded .yith_wccl_value,
.st-swatch-rounded .wc-swatches .swatch-wrapper { border-radius: 5px; }

.st-swatch-circle .variable-item,
.st-swatch-circle .tawcvs-swatches .swatch,
.st-swatch-circle .wcvs-swatch,
.st-swatch-circle .yith_wccl_value,
.st-swatch-circle .wc-swatches .swatch-wrapper { border-radius: 50%; }

/* --- Out of stock / disabled --------------------------------------------- */

.woo-variation-swatches .variable-item.disabled,
.tawcvs-swatches .swatch.disabled,
.wcvs-swatch.disabled {
	position: relative;
	opacity: .45;
	cursor: not-allowed;
}

.woo-variation-swatches .variable-item.disabled::after,
.tawcvs-swatches .swatch.disabled::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top left, transparent 46%, var(--st-outofstock) 47%, var(--st-outofstock) 53%, transparent 54%);
}

/* --- Tooltips ------------------------------------------------------------- */

.woo-variation-swatches .variable-item .variable-item-span-tooltip,
.tawcvs-swatches .swatch::before {
	font-family: var(--st-font-body);
	font-size: 12px;
	background: var(--st-dark);
	color: #fff;
}

/* --- Mobile: let swatches wrap comfortably ------------------------------- */

@media (max-width: 480px) {
	.woo-variation-swatches .variable-items-wrapper,
	.tawcvs-swatches,
	.wcvs-swatches-wrapper,
	.wc-swatches { gap: 6px; }
}

/* ==========================================================================
   2. WISHLIST - YITH and TI
   ========================================================================== */

.yith-wcwl-add-to-wishlist,
.tinvwl-shortcode-add-to-cart,
.tinv-wishlist { margin: 0; }

.yith-wcwl-add-to-wishlist a,
.tinvwl_add_to_wishlist_button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--st-size-small);
	color: var(--st-heading);
}

.yith-wcwl-add-to-wishlist a:hover,
.tinvwl_add_to_wishlist_button:hover { color: var(--st-primary); }

/* Inside the product card hover row, wishlist becomes an icon button. */

.st-product__actions .yith-wcwl-add-to-wishlist a,
.st-product__actions .tinvwl_add_to_wishlist_button {
	width: 40px;
	height: 40px;
	justify-content: center;
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius);
	background: var(--st-bg);
}

.tinv-wishlist table.tinvwl-table-manage-list { border-color: var(--st-border); }

/* ==========================================================================
   3. COMPARE - YITH
   ========================================================================== */

.compare-button a.compare,
a.woocommerce-product-compare-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: var(--st-size-small);
	color: var(--st-heading);
}

.compare-button a.compare:hover { color: var(--st-primary); }

/* ==========================================================================
   4. QUICK VIEW - YITH
   ========================================================================== */

.yith-wcqv-button {
	font-size: var(--st-size-small);
	color: var(--st-heading);
}

#yith-quick-view-modal .yith-wcqv-main { border-radius: var(--st-radius-card); }

/* ==========================================================================
   5. PRODUCT FILTERS - YITH WooCommerce Ajax Product Filter, Filter Everything
   ========================================================================== */

.yith-wcan-filters,
.wpc-filters-main-wrap { font-size: var(--st-size-small); }

.yith-wcan-filters .yith-wcan-filter h4,
.wpc-filters-widget-title {
	font-family: var(--st-font-heading);
	font-size: var(--st-size-h6);
	color: var(--st-heading);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.yith-wcan-filters a.selected,
.wpc-term-item-content-wrapper.wpc-term-selected { color: var(--st-primary); }

/* ==========================================================================
   6. PAGE BUILDERS
   Full-width and blank templates must not fight builder section widths.
   ========================================================================== */

/* Elementor */

.elementor-page .st-fullwidth,
.elementor-page .st-page-content { padding: 0; }

.elementor-location-header,
.elementor-location-footer { flex: none; }

.elementor-page .st-page-header { display: none; }

/* Elementor's container should be able to reach full width. */

.st-fullwidth > .elementor,
.st-page-content > .elementor { width: 100%; }

/* Beaver Builder */

.fl-builder .st-fullwidth .fl-row-content-wrap { padding-inline: 0; }

/* WPBakery */

.wpb-js-composer .st-fullwidth .vc_row { margin-inline: 0; }

/* Brizy */

.brz .st-fullwidth { padding: 0; }

/* ==========================================================================
   7. FORMS - Contact Form 7, WPForms, Gravity, Fluent, Ninja
   Give every form plugin the theme's field styling without overriding
   their own layout classes.
   ========================================================================== */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea,
.wpcf7 select,
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container textarea,
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper textarea,
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform textarea,
.nf-form-cont input[type="text"],
.nf-form-cont textarea {
	border: 1px solid var(--st-border);
	border-radius: var(--st-radius-input);
	font-family: var(--st-font-body);
	font-size: var(--st-size-body);
	color: var(--st-heading);
}

.wpcf7 input[type="submit"],
.wpforms-container button[type="submit"],
.gform_wrapper input[type="submit"],
.fluentform button[type="submit"],
.nf-form-cont input[type="button"] {
	border: 1px solid var(--st-dark);
	border-radius: var(--st-radius);
	background: var(--st-dark);
	color: #fff;
	font-family: var(--st-font-button);
	font-size: var(--st-size-button);
	font-weight: var(--st-weight-button);
	letter-spacing: var(--st-ls-button);
	text-transform: var(--st-tt-button);
	cursor: pointer;
}

.wpcf7 input[type="submit"]:hover,
.wpforms-container button[type="submit"]:hover,
.gform_wrapper input[type="submit"]:hover {
	border-color: var(--st-primary);
	background: var(--st-primary);
}

/* Mailchimp for WP */

.mc4wp-form { display: flex; flex-wrap: wrap; gap: 10px; }
.mc4wp-form input[type="email"] { flex: 1 1 220px; }

/* ==========================================================================
   8. MULTILINGUAL - WPML, Polylang
   Language switchers appear in menus; keep them visually consistent.
   ========================================================================== */

.wpml-ls-legacy-dropdown,
.wpml-ls-legacy-list-horizontal,
.pll-parent-menu-item > a {
	font-family: var(--st-font-menu);
	font-size: var(--st-size-small);
}

.wpml-ls-legacy-dropdown a,
.pll-parent-menu-item > a { color: var(--st-heading); }

.wpml-ls-legacy-list-horizontal { border: 0; padding: 0; }

/* ==========================================================================
   9. CURRENCY SWITCHERS
   ========================================================================== */

.woocommerce-currency-switcher-form,
.wcml-dropdown {
	font-family: var(--st-font-body);
	font-size: var(--st-size-small);
}

/* ==========================================================================
   10. LMS - LearnDash, LifterLMS, Tutor
   These need a plain full-width content column, nothing more.
   ========================================================================== */

.learndash-wrapper,
.llms-main,
.tutor-wrap {
	font-family: var(--st-font-body);
	color: var(--st-body);
}

.learndash-wrapper h1, .learndash-wrapper h2, .learndash-wrapper h3,
.llms-main h1, .llms-main h2, .llms-main h3,
.tutor-wrap h1, .tutor-wrap h2, .tutor-wrap h3 {
	font-family: var(--st-font-heading);
	color: var(--st-heading);
}