/**
 * CzarCommerce — Colapso de widgets do footer no mobile (F12-B).
 *
 * Reproduz 1:1 o css/parts/opt-widget-collapse.min.css. As classes
 * .wd-widget-collapse/.wd-opened(-initially) são aplicadas/toggladas
 * pelo JS legacy (js/scripts/global/widgetCollapse.js, que também
 * consome .main-footer/.footer-widget/.widget-title) — rename czar-*
 * só quando esse módulo for reescrito (F12-E). O enqueue do JS
 * 'widget-collapse' em footer.php PERMANECE; só o CSS migrou.
 */

.wd-widget-collapse .widget-title {
	position: relative;
	margin-bottom: 0;
	padding-inline-end: 22px;
	cursor: pointer;
	user-select: none;
}

.wd-widget-collapse .widget-title ~ * {
	margin-top: 20px;
}

.wd-widget-collapse .widget-title:after {
	position: absolute;
	top: calc(50% - 12px);
	inset-inline-end: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	color: var(--color-gray-800);
	font-weight: 400;
	font-size: 10px;
	transition: all 0.25s ease;
	content: "\f129";
	font-family: "woodmart-font";
}

.wd-widget-collapse.wd-opened .widget-title:after {
	background-color: #f1f1f1;
	transform: rotate(180deg);
}

.rtl .wd-widget-collapse.wd-opened .widget-title:after {
	transform: rotate(-180deg);
}

.wd-widget-collapse:not(.wd-opened-initially) > .widget-title ~ * {
	display: none;
}

.wd-widget-collapse .wd-swatches-filter:is(.wd-layout-double, .wd-layout-inline)[style*="display: block"] {
	display: flex !important;
}

[class*="color-scheme-light"] .wd-widget-collapse.wd-opened .widget-title:after {
	background-color: #fff;
	color: #333;
}