/* ==========================================================================
   Сортування каталогу [catalog_sorting] (inc/woocommerce/catalog-sorting.php)
   Кнопка з рамкою «За популярністю ⌄» і список під нею.
   ========================================================================== */

.catalog-sorting{
	--cs-height:  44px;                     /* ← ПРОЄКТ висота кнопки */
	--cs-radius:  var(--theme-button-radius);
	--cs-accent:  var(--theme-accent);
	--cs-hover:   var(--theme-accent-soft);

	position:relative;display:inline-block;
	font:400 14px/1.3 var(--theme-font), sans-serif;
}
.catalog-sorting__toggle{
	display:flex;align-items:center;justify-content:space-between;gap:12px;
	box-sizing:border-box;min-height:var(--cs-height);padding:0 16px 0 18px;
	border:1px solid var(--cs-accent);border-radius:var(--cs-radius);
	background:var(--theme-light);color:var(--cs-accent);
	list-style:none;cursor:pointer;user-select:none;
	transition:background-color .15s;
}
.catalog-sorting__toggle::-webkit-details-marker{display:none}
.catalog-sorting__toggle::marker{content:none}
.catalog-sorting__toggle:hover{background:var(--cs-hover)}
.catalog-sorting__toggle:focus-visible{outline:2px solid var(--cs-accent);outline-offset:2px}
.catalog-sorting__arrow{flex:0 0 20px;width:20px;height:20px;transition:transform .2s}
.catalog-sorting[open] .catalog-sorting__arrow{transform:rotate(180deg)}

.catalog-sorting__list{
	position:absolute;top:calc(100% + 6px);right:0;z-index:50;
	min-width:100%;width:max-content;max-width:calc(100vw - 32px);
	margin:0;padding:6px;list-style:none;
	border-radius:var(--theme-radius);background:var(--theme-bg);
	box-shadow:0 12px 40px rgba(60, 54, 70, .16);
}
.catalog-sorting__list li{margin:0;padding:0}
.catalog-sorting__list li::before,.catalog-sorting__list li::marker{content:none}
.catalog-sorting__option{
	display:block;padding:10px 14px;border-radius:calc(var(--theme-radius) - 4px);
	color:var(--theme-text);text-decoration:none;white-space:nowrap;
	transition:background-color .15s, color .15s;
}
.catalog-sorting__option:hover,
.catalog-sorting__option:focus-visible{background:var(--cs-hover);color:var(--theme-text)}
.catalog-sorting__option.is-current{color:var(--cs-accent);font-weight:600}

/* на мобільному кнопка на всю ширину своєї колонки (поруч із «Фільтри») */
@media (max-width:767px){
	.catalog-sorting{display:block}
	.catalog-sorting__list{left:0;right:auto}
}