/* ==========================================================================
   Кнопки — один стандарт на весь сайт (= Elementor → Site Settings → Buttons).

   Kit Elementor стилізує всі <button> і .elementor-button, але не перемагає:
     • стилі WooCommerce (.woocommerce button.button — сіра, радіус 3px, жирна): кабінет, вхід,
       «Переглянути» в замовленнях, «Дякуємо», повідомлення;
     • reset Hello Elementor: рамка 1px #c36 на кожному <button> (Kit рамку не задає);
     • службові іконкові кнопки (показати пароль), які Kit заливає градієнтом.
   Тут ці три місця зведено до токенів --theme-button-* (tokens.css), тож кнопки виглядають однаково:
   шапка, off-canvas, міні-кошик, оформлення, кабінет.

   Варіанти:
     основна   — градієнт, білий текст, hover — суцільний (як у Kit);
     контурна  — .theme-btn--outline: прозора, рамка кольору тексту; hover — як основна.
   ========================================================================== */

/* ---------- 1. Рамка Hello Elementor (#c36) — геть з усіх кнопок ----------
   Специфічність (0,1,1) — вище за reset Hello (0,1,0 / 0,0,1), нижче за стилі віджетів
   (.elementor-element-xxx .elementor-button), тож рамку, задану у віджеті, не чіпає. */
body button,
body [type="button"],
body [type="submit"],
body [type="reset"]{border-style:none}

/* ---------- 2. Основна кнопка: WooCommerce + наші ----------
   Специфічність (0,3,2) — вище за .woocommerce button.button.alt (0,3,1) WooCommerce, але нижче за
   компонентні правила на кшталт таблиці замовлень (0,4,1), тож компактні варіанти лишаються можливими.
   #respond input#submit (відгуки) — окремо: id у :is() підняв би вагу всього списку. */
body :is(.woocommerce, .woocommerce-page) :is(a.button, button.button, input.button, a.button.alt, button.button.alt, input.button.alt),
body .woocommerce #respond input#submit,
body .theme-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:8px;
	box-sizing:border-box;
	min-height:0;margin:0;
	padding:var(--theme-button-pad-y) var(--theme-button-pad-x);
	border:0;border-radius:var(--theme-button-radius);
	background:var(--theme-button-bg);
	color:var(--theme-button-color);
	font-family:var(--theme-button-font), sans-serif;
	font-size:var(--theme-button-size);
	font-weight:var(--theme-button-weight);
	letter-spacing:var(--theme-button-spacing);
	line-height:var(--theme-button-line);
	text-align:center;text-decoration:none;text-transform:none;text-shadow:none;
	box-shadow:none;
	cursor:pointer;
	transition:background .2s ease,color .2s ease,opacity .2s ease;
}
body :is(.woocommerce, .woocommerce-page) :is(a.button, button.button, input.button, a.button.alt, button.button.alt, input.button.alt):is(:hover, :focus-visible),
body .woocommerce #respond input#submit:is(:hover, :focus-visible),
body .theme-btn:is(:hover, :focus-visible){
	background:var(--theme-button-bg-hover);
	color:var(--theme-button-color);
}
body :is(.woocommerce, .woocommerce-page) :is(a.button, button.button, input.button):is(:disabled, .disabled, [disabled]),
body .theme-btn:disabled{opacity:var(--theme-disabled-opacity);cursor:default;pointer-events:none}

/* Контурна */
body .theme-btn--outline{
	background:transparent;color:var(--theme-text-strong);
	box-shadow:inset 0 0 0 1px currentColor; /* рамка тінню — не змінює висоту, як і в основної */
}
body .theme-btn--outline:is(:hover, :focus-visible){background:var(--theme-button-bg);color:var(--theme-button-color);box-shadow:none}

/* Кнопка, що спрацювала, у процесі (WooCommerce: .loading) — без «крутилки» поверх тексту */
body :is(.woocommerce, .woocommerce-page) :is(a.button, button.button).loading{opacity:var(--theme-disabled-opacity)}
body :is(.woocommerce, .woocommerce-page) :is(a.button, button.button).loading::after{content:none}

/* ---------- 3. Наші кнопки з класами Elementor (міні-кошик, вхід у попапі) ----------
   Вигляд дає Kit, але висоту — токен: Kit має padding 16px (46px), а кнопки шапки й карток — 44px. */
body .elementor-button:is(.mini-cart__checkout, .account-login__submit){
	padding:var(--theme-button-pad-y) var(--theme-button-pad-x);
	line-height:var(--theme-button-line);
}

/* ---------- 4. Службові іконкові кнопки — без градієнта Kit ---------- */
body .show-password-input{
	background:none !important;background-image:none !important;
	border:0 !important;box-shadow:none !important;
	padding:0 !important;color:var(--theme-text-muted) !important;
}
body .show-password-input:hover{color:var(--theme-text) !important}

/* Кнопка Elementor без посилання (Link порожній) — це <a> без href, і браузер показує звичайну стрілку.
   Такі кнопки в нас завжди щось відкривають скриптом («Вказати адресу», дії в off-canvas) → рука. */
a.elementor-button:not([href]){cursor:pointer}
