/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.1.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* Badge "Promocja!" – wyglad identyczny jak przycisk "Dodaj do koszyka" */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.woocommerce div.product .onsale,
.woocommerce .elementor-widget-woocommerce-product-images span.onsale,
.elementor-products-grid ul.products.elementor-grid li.product .onsale {
	position: absolute;
	top: 10px;
	left: 10px;
	right: auto;
	z-index: 9;
	width: auto;
	height: auto;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 14px 22px;
	box-sizing: border-box;
	font-family: "Manrope", sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
	text-decoration: none;
	color: #fff;
	background-color: transparent;
	background-image: linear-gradient(180deg, #d2649a 0%, #a61658 135%);
	border: none;
	border-radius: 999px;
	box-shadow: 0 14px 26px 0 rgba(196, 28, 110, 0.16);
	transition: 0.3s;
}

/* Osobno, zeby nie odslaniac badge ukrytego przez Elementor w siatce produktow */
.woocommerce span.onsale,
.woocommerce ul.products li.product .onsale,
.woocommerce div.product .onsale,
.woocommerce .elementor-widget-woocommerce-product-images span.onsale {
	display: inline-block;
}

/* Selektor ilosci przy przycisku "dodaj do koszyka" (js/add-to-cart-qty.js) */
.alegra-qty-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
}

.alegra-qty {
	display: inline-flex;
	align-items: center;
	height: 41px;
	padding: 0 4px;
	box-sizing: border-box;
	background-color: #fff;
	border: 1px solid rgba(166, 22, 88, 0.25);
	border-radius: 999px;
	box-shadow: 0 14px 26px 0 rgba(196, 28, 110, 0.1);
}

.alegra-qty button.alegra-qty__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 31px;
	height: 31px;
	padding: 0;
	margin: 0;
	font-family: "Manrope", sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1;
	color: #a61658;
	background: none;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: 0.3s;
	-webkit-appearance: none;
	appearance: none;
}

.alegra-qty button.alegra-qty__btn:hover:not(:disabled),
.alegra-qty button.alegra-qty__btn:focus-visible {
	color: #fff;
	background-image: linear-gradient(180deg, #d2649a 0%, #a61658 135%);
	outline: none;
}

.alegra-qty button.alegra-qty__btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.alegra-qty input.alegra-qty__input {
	width: 46px;
	height: 31px;
	padding: 0;
	margin: 0;
	font-family: "Manrope", sans-serif;
	font-size: 14px;
	font-weight: 700;
	line-height: 31px;
	text-align: center;
	color: #a61658;
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	-moz-appearance: textfield;
	appearance: textfield;
}

.alegra-qty input.alegra-qty__input:focus {
	outline: none;
	box-shadow: none;
}

.alegra-qty input.alegra-qty__input::-webkit-outer-spin-button,
.alegra-qty input.alegra-qty__input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.alegra-qty-row .elementor-button {
	margin: 0;
}

/* Produkt niedostepny - Elementor generuje bardzo specyficzne selektory dla tla przycisku */
.elementor-widget-button a.elementor-button.alegra-button-disabled {
	color: #fff !important;
	background-color: #b6bcc2 !important;
	background-image: none !important;
	box-shadow: none !important;
	cursor: not-allowed;
	pointer-events: none;
}

/* Faktura VAT w kasie (js/checkout-invoice.js) */
.alegra-invoice--hidden {
	display: none;
}

.alegra-invoice {
	margin-top: 24px;
	padding: 20px 22px;
	background-color: #f6f8fa;
	border: 1px solid #dfe5ea;
	border-radius: 16px;
}

.alegra-invoice h3 {
	margin: 0 0 12px;
	font-size: 18px;
}

.alegra-invoice .alegra-invoice__toggle {
	margin: 0;
	padding: 0;
}

.alegra-invoice__fields {
	margin-top: 16px;
}

/* WooCommerce dokleja "(opcjonalne)" do kazdej etykiety pola nieobowiazkowego */
.alegra-invoice .optional {
	display: none;
}

.alegra-invoice__type > label {
	display: block;
	margin-bottom: 6px;
	font-weight: 600;
}

.alegra-invoice__type input.input-radio {
	display: inline-block;
	width: auto;
	margin: 0 8px 0 0;
	vertical-align: middle;
}

.woocommerce form .alegra-invoice__type label.radio {
	display: inline-block;
	width: auto;
	margin: 0 24px 0 0;
	font-weight: 400;
	vertical-align: middle;
}

.alegra-invoice__hint {
	margin: 4px 0 0;
	font-size: 13px;
	color: #6c7a85;
}

/* Komunikaty WooCommerce wypychaja naglowek w dol, bo wrapper jest dzieckiem <body>
   przed szablonem Elementora. Wyjmujemy je z ukladu i pokazujemy 1/3 ekranu od gory. */
body > .woocommerce-notices-wrapper:not(:empty) {
	position: fixed;
	top: 33vh;
	left: 50%;
	z-index: 9999;
	width: min(760px, calc(100% - 32px));
	transform: translateX(-50%);
}

body > .woocommerce-notices-wrapper.alegra-notice-hiding {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
}

body > .woocommerce-notices-wrapper button.alegra-notice-close {
	position: absolute;
	top: 10px;
	right: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	font-family: "Manrope", sans-serif;
	font-size: 22px;
	line-height: 1;
	color: #7a6a71;
	background: none;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	transition: 0.3s;
	-webkit-appearance: none;
	appearance: none;
}

body > .woocommerce-notices-wrapper button.alegra-notice-close:hover,
body > .woocommerce-notices-wrapper button.alegra-notice-close:focus-visible {
	color: #fff;
	background-image: linear-gradient(180deg, #d2649a 0%, #a61658 135%);
	outline: none;
}

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-error,
.woocommerce-notices-wrapper .woocommerce-info {
	margin: 0 0 12px;
	padding: 18px 52px 18px 56px;
	font-family: "Manrope", sans-serif;
	font-size: 15px;
	line-height: 1.5;
	background-color: #fff;
	border-radius: 16px;
	box-shadow: 0 18px 40px rgba(23, 12, 18, 0.18);
}

/* WooCommerce ustawia notice'om tabindex="-1" i fokusuje je skryptem - stad niebieska obwodka */
.woocommerce-notices-wrapper .woocommerce-message:focus,
.woocommerce-notices-wrapper .woocommerce-error:focus,
.woocommerce-notices-wrapper .woocommerce-info:focus {
	outline: none;
}

/* .woocommerce-error to <ul>, wiec flex tylko dla komunikatow z przyciskiem */
.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}

.woocommerce-notices-wrapper .alegra-notice-text {
	flex: 1 1 0;
	min-width: 0;
}

.woocommerce-notices-wrapper .woocommerce-message::before,
.woocommerce-notices-wrapper .woocommerce-error::before,
.woocommerce-notices-wrapper .woocommerce-info::before {
	top: 20px;
	left: 22px;
}

.woocommerce-notices-wrapper .woocommerce-message a.button,
.woocommerce-notices-wrapper .woocommerce-error a.button,
.woocommerce-notices-wrapper .woocommerce-info a.button {
	flex: none;
	float: none;
	margin: 0 0 0 auto;
	padding: 14px 22px;
	font-family: "Manrope", sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	background-color: transparent;
	background-image: linear-gradient(180deg, #d2649a 0%, #a61658 135%);
	border: none;
	border-radius: 999px;
	box-shadow: 0 14px 26px 0 rgba(196, 28, 110, 0.16);
	transition: 0.3s;
}

.woocommerce-notices-wrapper .woocommerce-message a.button:hover,
.woocommerce-notices-wrapper .woocommerce-error a.button:hover,
.woocommerce-notices-wrapper .woocommerce-info a.button:hover {
	color: #fff;
	background-color: transparent;
	background-image: linear-gradient(180deg, #a61658 0%, #d2649a 135%);
}

/* Karty w Loop Grid rozciagaja sie do wysokosci najwyzszej karty w rzedzie, a bialy
   kontener ma staly min-height - nadmiar zostawal jako szary pasek pod spodem. */
.product-card .e-con-inner > .e-con.e-child:last-child {
	flex-grow: 1;
}