/* =========================================================================
   Move Your Spine - sklep: archiwum, karta produktu, koszyk, kasa
   Zawiera też neutralizację stylów Shoptimizera dla siatki produktów.
   ====================================================================== */

.mys-shop { padding-block: clamp(40px, 5vw, 72px); }

.mys-shop__bar {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 36px;
}

/* -------------------- CHIPY KATEGORII -------------------- */

.mys-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.mys-chips__list { display: contents; }
.mys-theme .mys-chips__toggle,
.mys-chips__scrim,
.mys-chips__head { display: none; }
.mys-theme .mys-chip {
	display: inline-flex;
	align-items: center;
	background: transparent;
	color: var(--mys-text);
	border: 1px solid rgba(30, 27, 46, .18);
	border-radius: var(--mys-radius-pill);
	padding: 10px 20px;
	font-family: var(--mys-font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.mys-theme .mys-chip:hover { border-color: rgba(30, 27, 46, .4); opacity: 1; }
.mys-theme .mys-chip.is-active { background: var(--mys-brand); border-color: var(--mys-brand); color: var(--mys-on-dark); }

/* -------------------- SORTOWANIE -------------------- */

.mys-sort { display: flex; align-items: center; gap: 10px; margin: 0; }
.mys-sort__label { font-weight: 600; font-size: 13px; color: var(--mys-text-55); }
.mys-theme .mys-sort__select {
	appearance: none;
	-webkit-appearance: none;
	background-color: var(--mys-surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231A1B1E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	border: 1px solid rgba(30, 27, 46, .18);
	border-radius: var(--mys-radius-pill);
	padding: 10px 36px 10px 14px;
	font-family: var(--mys-font-body);
	font-weight: 600;
	font-size: 13.5px;
	color: var(--mys-text);
	cursor: pointer;
}

/* -------------------- SIATKA -------------------- */

/* Shoptimizer daje `ul.products { width: calc(100% + 30px); margin-left:-15px }`
   - bez zerowania szerokości siatka wystawała 30 px poza kolumnę treści. */
.mys-theme ul.products.mys-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 22px;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	float: none;
	clear: both;
}
.mys-theme ul.products.mys-grid::before,
.mys-theme ul.products.mys-grid::after { content: none; display: none; }

.mys-theme ul.products li.product.mys-card {
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	float: none;
	clear: none;
	background: var(--mys-surface);
	border: 1px solid var(--mys-border);
	border-radius: var(--mys-radius-card);
	overflow: hidden;
	box-shadow: none;
	text-align: left;
	transition: border-color .2s ease;
}
.mys-theme ul.products li.product.mys-card:hover { border-color: rgba(30, 27, 46, .2); }
/* Kafel ma wypelnic cala wysokosc wiersza siatki. Bez tego kazdy dobiera
   wysokosc do wlasnego opisu i przy krotszym tekscie robi sie nizszy od
   sasiadow, a stopki z cena i przyciskiem stoja na roznych poziomach.
   Opis ma `flex: 1`, wiec to on wchlania roznice i stopki sie wyrownuja. */
.mys-theme ul.products.mys-grid > li.product.mys-card { align-self: stretch; }
/* Shoptimizer nakłada biały overlay na hoverze - zasłaniał opis i cenę. */
.mys-theme ul.products li.product.mys-card::before,
.mys-theme ul.products li.product.mys-card::after { content: none; display: none; }

.mys-card__media {
	position: relative;
	/* Okladki produktow sa pionowe (uwagi klientki, sierpien 2026) - kafel
	   trzyma proporcje 3:4, a okladka wchodzi w niego w calosci. */
	aspect-ratio: 3 / 4;
	background:
		radial-gradient(120% 120% at 50% 0%, rgba(255, 255, 255, .85) 0%, rgba(255, 255, 255, 0) 70%),
		color-mix(in srgb, var(--mys-cat, var(--mys-accent)) 9%, #FFFFFF);
	overflow: hidden;
}
/* Zapas dla przegladarek bez color-mix - jasna, neutralna podkladka. */
@supports not (background: color-mix(in srgb, red 9%, white)) {
	.mys-card__media { background: var(--mys-bg-alt); }
}
.mys-card__imglink {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
}
.mys-card__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform .5s var(--mys-ease);
}
.mys-theme .mys-card:hover .mys-card__img { transform: scale(1.04); }
.mys-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	background: var(--mys-cat, rgba(30, 27, 46, .82));
	color: var(--mys-on-dark);
	font-family: var(--mys-font-body);
	font-weight: 600;
	font-size: 11px;
	line-height: 1;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 7px 12px;
	border-radius: var(--mys-radius-pill);
	z-index: 2;
}
.mys-theme .mys-card__eye {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 38px;
	height: 38px;
	border-radius: var(--mys-radius-pill);
	background: rgba(255, 255, 255, .92);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--mys-text);
	box-shadow: 0 6px 18px rgba(30, 27, 46, .16);
	transition: transform .2s ease;
	z-index: 2;
}
.mys-theme .mys-card__eye:hover { transform: scale(1.08); }

.mys-card__body { display: flex; flex-direction: column; gap: 10px; padding: 22px; flex: 1; }
.mys-theme .mys-card__title {
	font-family: var(--mys-font-head);
	font-weight: 700;
	font-size: 20px;
	margin: 0;
	line-height: 1.25;
}
.mys-theme .mys-card__title a { color: var(--mys-text); }
.mys-theme .mys-card__text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--mys-text-66); flex: 1; }
/* Stopka karty: cena i przycisk obok siebie, dopoki sie miesza. Kafle sa teraz
   wezsze (okladki pionowe), wiec przy dluzszej cenie typu „od 199,00 zl"
   przycisk schodzi do drugiej linii i bierze cala szerokosc - wczesniej
   wystawal poza kafel i konczyl sie ucieta etykieta. */
.mys-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 12px;
	margin-top: 8px;
}
.mys-theme .mys-card__price,
.mys-theme .mys-card__price .amount,
.mys-theme .mys-card__price bdi {
	font-family: var(--mys-font-head);
	font-weight: 800;
	font-size: 22px;
	line-height: 1.1;
	color: var(--mys-text);
	text-transform: none;
}
.mys-card__price del { display: none; }
.mys-card__price ins { text-decoration: none; }
.mys-theme .mys-card__price { white-space: nowrap; }
.mys-theme .mys-card__price .mys-price-from {
	font-family: var(--mys-font-body);
	font-size: 13px;
	font-weight: 600;
	color: var(--mys-text-66);
}

/* Przycisk „Do koszyka" - Shoptimizer pozycjonuje go absolutnie, resetujemy. */
.mys-theme ul.products li.product .mys-card__add,
.mys-theme .mys-card__add {
	position: static;
	left: auto;
	right: auto;
	bottom: auto;
	margin: 0;
	width: auto;
	min-width: 0;
	opacity: 1;
	transform: none;
	white-space: nowrap;
	flex: 1 1 auto;
	min-width: max-content;
	justify-content: center;
}
.mys-theme .added_to_cart { display: none !important; }
.mys-theme .mys-card__add.loading { opacity: .7; }

.mys-shop__empty {
	background: var(--mys-surface);
	border: 1px solid var(--mys-border);
	border-radius: var(--mys-radius-lg);
	padding: clamp(32px, 5vw, 56px);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
}
.mys-shop__empty p { margin: 0; color: var(--mys-text-66); }

/* -------------------- BANER CTA -------------------- */

.mys-ctabanner {
	margin-top: 56px;
	background: var(--mys-brand);
	border-radius: var(--mys-radius-lg);
	padding: clamp(34px, 4vw, 56px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.mys-ctabanner__text { flex: 1 1 320px; color: var(--mys-on-dark); }
.mys-ctabanner__title {
	font-family: var(--mys-font-head);
	font-weight: 700;
	font-size: clamp(22px, 2.6vw, 32px);
	line-height: 1.15;
	margin: 0 0 8px;
	color: var(--mys-on-dark);
}
.mys-ctabanner__text p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--mys-on-dark-82); max-width: 44ch; }

/* -------------------- KARTA PRODUKTU (single) -------------------- */

.mys-product { padding-block: clamp(40px, 5vw, 72px); }
.mys-product__grid {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(28px, 4vw, 64px);
	align-items: flex-start;
	margin-top: 8px;
}
.mys-product__media { flex: 1 1 380px; }
.mys-product__frame {
	position: relative;
	aspect-ratio: 3 / 4;
	border-radius: var(--mys-radius-lg);
	overflow: hidden;
	background: var(--mys-bg-alt);
	padding: 16px;
}
/* Okładka jest pionowa - pokazujemy ją w całości, bez kadrowania. */
.mys-theme .mys-product__frame .mys-fill { object-fit: contain; inset: 16px; width: auto; height: auto; max-width: calc(100% - 32px); max-height: calc(100% - 32px); margin: auto; }
.mys-product__info { flex: 1 1 380px; }
.mys-theme .mys-product__title {
	font-family: var(--mys-font-head);
	font-weight: 800;
	font-size: clamp(30px, 3.6vw, 46px);
	line-height: 1.06;
	letter-spacing: -.025em;
	margin: 0 0 16px;
}
.mys-theme .mys-product__price,
.mys-theme .mys-product__price .amount,
.mys-theme .mys-product__price bdi {
	font-family: var(--mys-font-head);
	font-weight: 800;
	font-size: 32px;
	color: var(--mys-text);
	text-transform: none;
}
.mys-product__short { margin: 20px 0 26px; }
.mys-product__cart { margin-bottom: 26px; }

.mys-theme .mys-product__cart form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 0;
}
.mys-theme .mys-product__cart .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--mys-border-strong);
	border-radius: var(--mys-radius-pill);
	overflow: hidden;
	background: #fff;
	float: none;
	margin: 0;
}
.mys-theme .mys-product__cart .quantity input.qty {
	width: 74px;
	height: 50px;
	border: none;
	background: transparent;
	text-align: center;
	font-family: var(--mys-font-body);
	font-weight: 600;
	font-size: 15px;
	color: var(--mys-text);
	box-shadow: none;
}
.mys-theme .mys-product__cart .quantity-nav,
.mys-theme .mys-product__cart .quantity-button { display: none; }
.mys-theme .mys-product__cart button.single_add_to_cart_button,
.mys-theme .mys-product__cart .single_add_to_cart_button {
	position: static;
	float: none;
	margin: 0;
	background: var(--mys-brand);
	color: var(--mys-on-dark);
	border: none;
	border-radius: var(--mys-radius-pill);
	padding: 16px 30px;
	font-family: var(--mys-font-body);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	min-width: 0;
	transition: filter .2s ease;
}
.mys-theme .mys-product__cart button.single_add_to_cart_button:hover { filter: brightness(1.14); background: var(--mys-brand); }

.mys-product__usp { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mys-product__usp li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--mys-text-70);
}
.mys-product__uspicon {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: var(--mys-radius-pill);
	background: rgba(124, 92, 224, .12);
	color: var(--mys-accent-ink);
	display: flex;
	align-items: center;
	justify-content: center;
}
.mys-product__desc { margin-top: clamp(44px, 5vw, 72px); }
.mys-product__desc .mys-h2 { margin-bottom: 18px; }
.mys-product__related { margin-top: clamp(44px, 5vw, 72px); }
.mys-product__related .mys-h2 { margin-bottom: 24px; }

/* -------------------- KOSZYK / KASA -------------------- */

.mys-page--shop .mys-page__content { margin-top: 8px; }

/* Woo renderuje koszyk i kasę jako BLOKI - klasyczne selektory nie działają,
   a arkusz `wc-blocks-style` bywa wczytywany PO naszym. Stąd `!important`
   w tej sekcji; poza nią motyw go nie używa. */

/* -------- typografia -------- */

.mys-theme .wc-block-components-title,
.mys-theme .wc-block-cart__totals-title,
.mys-theme .wp-block-woocommerce-checkout-order-summary-block .wc-block-components-title,
.mys-theme .wc-block-components-checkout-step__title {
	font-family: var(--mys-font-head) !important;
	font-weight: 700 !important;
	color: var(--mys-text) !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	font-size: 20px !important;
}
.mys-theme .wc-block-components-product-name {
	font-family: var(--mys-font-body) !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	color: var(--mys-text) !important;
	text-transform: none !important;
}
.mys-theme .wc-block-components-product-price,
.mys-theme .wc-block-components-totals-item__value,
.mys-theme .wc-block-formatted-money-amount { text-transform: none !important; }

.mys-theme .wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.mys-theme .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-family: var(--mys-font-head) !important;
	font-weight: 800 !important;
	font-size: 20px !important;
	color: var(--mys-text) !important;
}

/* -------- przyciski --------

   UWAGA na dwie pułapki, które już raz wysadziły ten ekran:
   1. `:not(.contained)` jako wyznacznik wariantu „ghost" - Woo dokłada do
      przycisku koszyka inne klasy pomocnicze i reguła gasiła tło głównego CTA,
      przez co „Przejdź do płatności" był przezroczystym tekstem na białym.
   2. Selektor główny miał wyższą specyficzność niż wariant akcentowy niżej,
      więc „Kupuję i płacę" zostawał grafitowy mimo osobnej reguły. */

.mys-theme .wc-block-components-button,
.mys-theme .wp-element-button.wc-block-components-button {
	border: none !important;
	border-radius: var(--mys-radius-pill) !important;
	font-family: var(--mys-font-body) !important;
	font-weight: 600 !important;
	font-size: 15px !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	padding: 16px 30px !important;
	min-height: 0 !important;
}

/* Główne CTA ścieżki zakupowej - lawenda, biały tekst. */
.mys-theme .wc-block-components-button.wc-block-cart__submit-button,
.mys-theme a.wc-block-cart__submit-button,
.mys-theme .wc-block-components-button.wc-block-components-checkout-place-order-button,
.mys-theme .wp-element-button.wc-block-components-button.wc-block-components-checkout-place-order-button {
	background-color: var(--mys-accent) !important;
	color: var(--mys-on-accent) !important;
}
.mys-theme .wc-block-components-button.wc-block-cart__submit-button:hover,
.mys-theme a.wc-block-cart__submit-button:hover,
.mys-theme .wc-block-components-button.wc-block-components-checkout-place-order-button:hover {
	background-color: var(--mys-accent-ink) !important;
	color: var(--mys-on-accent) !important;
	filter: none !important;
}

/* Pozostałe przyciski blokowe (np. „Zastosuj kupon") - grafit. */
.mys-theme .wc-block-components-button:not(.wc-block-cart__submit-button):not(.wc-block-components-checkout-place-order-button):not(.is-link) {
	background-color: var(--mys-brand) !important;
	color: var(--mys-on-dark) !important;
}
.mys-theme .wc-block-components-button.outlined,
.mys-theme .wc-block-components-button.wc-block-components-button--outlined {
	background-color: transparent !important;
	color: var(--mys-text) !important;
	border: 1px solid var(--mys-border-strong) !important;
}
.mys-theme .wc-block-components-button.is-link {
	background-color: transparent !important;
	color: var(--mys-accent-ink) !important;
	padding: 0 !important;
}

/* -------- pola formularza -------- */

.mys-theme .wc-block-components-text-input input,
.mys-theme .wc-block-components-textarea,
.mys-theme .wc-blocks-components-select__select,
.mys-theme .wc-block-components-select__select {
	border-radius: var(--mys-radius-input) !important;
	border-color: var(--mys-border-strong) !important;
	font-family: var(--mys-font-body) !important;
	font-size: 15px !important;
	color: var(--mys-text) !important;
}
.mys-theme .wc-block-components-text-input input:focus,
.mys-theme .wc-block-components-textarea:focus,
.mys-theme .wc-blocks-components-select__select:focus {
	border-color: var(--mys-accent) !important;
	box-shadow: 0 0 0 1px var(--mys-accent) !important;
	outline: none !important;
}
.mys-theme .wc-block-components-checkbox__input[type="checkbox"] { accent-color: var(--mys-accent); }

/* -------- panel podsumowania --------

   Jedna karta na cały panel. Wcześniej tło i zaokrąglenie dostawał KAŻDY
   wiersz sum osobno, więc kupon i kwota wyglądały jak przypadkowe pigułki,
   a długa etykieta wychodziła poza obrys. */

.mys-theme .wp-block-woocommerce-cart-order-summary-block,
.mys-theme .wp-block-woocommerce-checkout-order-summary-block {
	background: var(--mys-surface) !important;
	border: 1px solid var(--mys-border) !important;
	border-radius: var(--mys-radius-lg) !important;
	padding: clamp(20px, 2.4vw, 28px) !important;
}
.mys-theme .wc-block-components-sidebar .wc-block-components-totals-wrapper,
.mys-theme .wc-block-components-totals-wrapper {
	background: transparent !important;
	border-radius: 0 !important;
	padding-inline: 0 !important;
}
.mys-theme .wc-block-components-totals-item {
	display: flex !important;
	align-items: baseline !important;
	gap: 12px !important;
	flex-wrap: wrap !important;
}
.mys-theme .wc-block-components-totals-item__label { flex: 1 1 auto; min-width: 0; }
.mys-theme .wc-block-components-totals-item__value { white-space: nowrap; }

.mys-theme .wc-block-cart-items__row,
.mys-theme .wc-block-components-order-summary-item { border-color: var(--mys-border) !important; }
.mys-theme .wc-block-components-order-summary-item__image img,
.mys-theme .wc-block-cart-item__image img {
	border-radius: 10px;
	background: var(--mys-bg-alt);
}

/* Podsumowanie jedzie z użytkownikiem przy długim formularzu kasy. */
@media (min-width: 900px) {
	.mys-theme .wc-block-checkout__sidebar {
		position: sticky;
		top: calc(var(--mys-head-h) + 20px);
	}
}

/* -------- komunikaty -------- */

.mys-theme .wc-block-components-notice-banner {
	border-radius: var(--mys-radius-input) !important;
	font-family: var(--mys-font-body) !important;
}
.mys-theme .wc-block-components-notice-banner.is-info { border-color: var(--mys-accent) !important; }

/* -------- geometria --------

   Woo trzyma własną skalę: promienie 4 px, brak dopełnień w wierszach koszyka,
   selektor ilości jako prostokąt. Obok kart motywu (20-24 px) wyglądało to jak
   wklejony cudzy komponent. Poniżej równamy do tokenów.
   Zmierzone przed zmianą: quantity 4px, select 4px, checkbox 4px, notice 4px,
   miniatury 0px, wiersze koszyka bez dopełnienia pionowego. */

/* Lista pozycji koszyka jako karta - jak reszta serwisu. */
.mys-theme .wc-block-cart-items {
	border: 1px solid var(--mys-border) !important;
	border-radius: var(--mys-radius-card) !important;
	background: var(--mys-surface) !important;
	padding-inline: clamp(16px, 2vw, 24px) !important;
}
/* Padding musi siedzieć na komórkach - wiersz to `tr`. */
.mys-theme .wc-block-cart-items__row td { padding-block: 20px !important; }
.mys-theme .wc-block-cart-items thead th {
	padding-block: 16px !important;
	font-size: 11.5px !important;
	letter-spacing: .12em !important;
	color: var(--mys-text-50) !important;
}

/* Miniatury produktów. */
.mys-theme .wc-block-cart-item__image img {
	border-radius: 12px !important;
	background: var(--mys-bg-alt);
}
.mys-theme .wc-block-components-order-summary-item__image img {
	border-radius: 8px !important;
	background: var(--mys-bg-alt);
}

/* Selektor ilości - pigułka, tak jak w szufladzie koszyka motywu. */
.mys-theme .wc-block-components-quantity-selector {
	border: 1px solid var(--mys-border-strong) !important;
	border-radius: var(--mys-radius-pill) !important;
	overflow: hidden !important;
	width: auto !important;
}
.mys-theme .wc-block-components-quantity-selector::after,
.mys-theme .wc-block-components-quantity-selector::before { display: none !important; }
.mys-theme .wc-block-components-quantity-selector__input,
.mys-theme .wc-block-components-quantity-selector__button {
	border-radius: 0 !important;
	border: none !important;
	background: transparent !important;
	color: var(--mys-text) !important;
}
.mys-theme .wc-block-components-quantity-selector__button:hover {
	background: var(--mys-accent-soft) !important;
	color: var(--mys-accent-ink) !important;
}

/* Pola wyboru i zgód. */
.mys-theme .wc-blocks-components-select__select,
.mys-theme .wc-block-components-select__select { border-radius: var(--mys-radius-input) !important; }
.mys-theme .wc-block-components-checkbox__input[type="checkbox"] { border-radius: 6px !important; }
.mys-theme .wc-block-components-notice-banner { border-radius: var(--mys-radius-input) !important; }

/* Rytm pionowy kroków kasy - Woo stawia je jeden na drugim bez oddechu. */
.mys-theme .wc-block-components-checkout-step { margin-bottom: 34px !important; }
.mys-theme .wc-block-components-checkout-step:last-child { margin-bottom: 0 !important; }
.mys-theme .wc-block-components-checkout-step__heading { margin-bottom: 16px !important; }

/* Odstęp między kolumnami robi margines na kolumnie głównej (niżej),
   tutaj tylko zerujemy własne dopełnienia Woo. */
.mys-theme .wc-block-cart__sidebar,
.mys-theme .wc-block-checkout__sidebar { padding-left: 0 !important; }

/* Kupon: zwijka ma wyglądać jak element formularza, nie jak goły link. */
.mys-theme .wc-block-components-totals-coupon .wc-block-components-panel__button {
	font-family: var(--mys-font-body) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	color: var(--mys-accent-ink) !important;
}
/* Kupon: pole na pełną szerokość, przycisk pod spodem.

   Woo układa je obok siebie, ale panel podsumowania ma ~344 px - pole zwężało
   się do kilkunastu znaków, a przycisk i tak nie mieścił etykiety. W kolumnie
   obie rzeczy są czytelne i nie trzeba zwężać panelu. */
.mys-theme .wc-block-components-totals-coupon__form {
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 10px !important;
	margin-top: 12px !important;
}
.mys-theme .wc-block-components-totals-coupon__form .wc-block-components-text-input {
	width: 100% !important;
	margin: 0 !important;
	flex: 0 0 auto !important;
}
.mys-theme .wc-block-components-totals-coupon__form .wc-block-components-text-input input { width: 100% !important; }

/* Kupon to akcja drugoplanowa - obrys zamiast plamy koloru, żeby nie
   konkurował z „Przejdź do płatności" w tej samej karcie. */
.mys-theme .wc-block-components-button.wc-block-components-totals-coupon__button {
	width: 100% !important;
	margin: 0 !important;
	flex: 0 0 auto !important;
	background-color: transparent !important;
	color: var(--mys-accent-ink) !important;
	border: 1px solid var(--mys-accent) !important;
	padding: 14px 22px !important;
}
/* Woo ustawia na hoverze `color: #fff`, więc sam kolor tła nie wystarcza -
   na jasnej lawendzie etykieta stawała się niewidoczna. Kolor pinujemy jawnie. */
.mys-theme .wc-block-components-button.wc-block-components-totals-coupon__button:hover:not(:disabled),
.mys-theme .wc-block-components-button.wc-block-components-totals-coupon__button:focus:not(:disabled) {
	background-color: var(--mys-accent-soft) !important;
	color: var(--mys-accent-ink) !important;
	border-color: var(--mys-accent) !important;
}
.mys-theme .wc-block-components-button.wc-block-components-totals-coupon__button:disabled:hover {
	background-color: transparent !important;
	color: var(--mys-text-50) !important;
}

/* -------- układ ścieżki zakupowej --------

   Formularz i podsumowanie jako białe karty na jasnym tle, żeby czytały się
   jako osobne bloki (kierunek z przesłanej makiety kasy). */

body.mys-theme.woocommerce-cart,
body.mys-theme.woocommerce-checkout { background: var(--mys-bg-alt); }

.mys-theme .wc-block-checkout__main {
	background: var(--mys-surface) !important;
	border: 1px solid var(--mys-border) !important;
	border-radius: var(--mys-radius-lg) !important;
	padding: clamp(20px, 2.6vw, 32px) !important;
	margin-right: clamp(20px, 2.6vw, 40px);
}

/* Koszyk ma już własną kartę na liście pozycji - drugiej ramki wokół niej nie chcemy. */
.mys-theme .wc-block-cart__main {
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	margin-right: clamp(20px, 3.2vw, 48px);
}

@media (max-width: 899px) {
	.mys-theme .wc-block-checkout__main,
	.mys-theme .wc-block-cart__main { margin-right: 0; }
}
.mys-theme .wc-block-components-button:disabled,
.mys-theme .wc-block-components-button.wc-block-components-totals-coupon__button:disabled {
	background-color: transparent !important;
	color: var(--mys-text-50) !important;
	border-color: var(--mys-border-strong) !important;
	opacity: 1 !important;
	cursor: not-allowed;
}

/* Na wąskich ekranach kolumny idą jedna pod drugą - zdejmujemy odstęp boczny. */
@media (max-width: 899px) {
	.mys-theme .wc-block-cart__main,
	.mys-theme .wc-block-checkout__main {
		padding-right: 0 !important;
		margin-bottom: 28px !important;
	}
}


/* -------- KOSZYK KLASYCZNY --------

   Koszyk też idzie shortcode'em, żeby cała ścieżka zakupowa siedziała w jednej
   warstwie. Mieszanka blokowego koszyka z klasyczną kasą powoduje, że część
   integracji płatności wykrywa proces niespójnie. */

.mys-theme .woocommerce-cart-form { margin: 0; }

/* Dwie kolumny robimy na `section.shoptimizer-cart-wrapper` - to on jest
   faktycznym rodzicem formularza i panelu sum. Shoptimizer trzyma formularz
   na floacie, przez co panel spadał pod spód na całą szerokość. */
@media (min-width: 900px) {
	.mys-theme .shoptimizer-cart-wrapper {
		display: grid;
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: clamp(20px, 2.6vw, 40px);
		align-items: start;
	}
	.mys-theme .shoptimizer-cart-wrapper > .woocommerce-cart-form,
	.mys-theme .shoptimizer-cart-wrapper > .cart-collaterals {
		float: none !important;
		width: auto !important;
		max-width: none !important;
		margin: 0 !important;
	}
	.mys-theme .shoptimizer-cart-wrapper > .cart-collaterals {
		position: sticky;
		top: calc(var(--mys-head-h) + 20px);
	}
}
.mys-theme .cart-collaterals,
.mys-theme .cart-collaterals .cart_totals { width: auto !important; float: none !important; }
.mys-theme .cart-collaterals table.shop_table { width: 100% !important; }

/* Tabela pozycji jako karta - wiersze na włosowych liniach, bez ramek Woo.

   `min-width: 0` i jawne szerokości kolumn są tu konieczne: Shoptimizer trzyma
   na tabeli własną szerokość (654 px), a że kolumna ma 592 px i obcinamy
   nadmiar zaokrągleniem, znikała prawa krawędź z ceną, a nazwa produktu
   dostawała 115 px i łamała się po jednym słowie. */
.mys-theme table.shop_table.cart {
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	table-layout: auto;
	background: var(--mys-surface);
	border: 1px solid var(--mys-border);
	border-radius: var(--mys-radius-card);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	margin: 0;
}

/* Nazwa bierze całą wolną przestrzeń, reszta kolumn ma szerokość treści. */
.mys-theme table.shop_table.cart th,
.mys-theme table.shop_table.cart td { width: auto; }
.mys-theme table.shop_table.cart th.product-name,
.mys-theme table.shop_table.cart td.product-name { width: 100%; min-width: 0; }
.mys-theme table.shop_table.cart td.product-remove { width: 52px; padding-right: 0; }
.mys-theme table.shop_table.cart td.product-thumbnail { width: 84px; }
.mys-theme table.shop_table.cart td.product-quantity { width: 118px; white-space: nowrap; }
.mys-theme table.shop_table.cart th.product-subtotal,
.mys-theme table.shop_table.cart td.product-subtotal { width: 1%; white-space: nowrap; text-align: right; }
.mys-theme table.shop_table.cart th {
	padding: 16px 12px;
	border: none;
	border-bottom: 1px solid var(--mys-border);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mys-text-50);
	background: transparent;
}
.mys-theme table.shop_table.cart td {
	padding: 20px 12px;
	border: none;
	border-bottom: 1px solid var(--mys-border);
	font-size: 15px;
	background: transparent;
	vertical-align: middle;
}
.mys-theme table.shop_table.cart tr:last-child td { border-bottom: none; }
.mys-theme table.shop_table.cart td.product-thumbnail img {
	width: 68px;
	border-radius: 12px;
	background: var(--mys-bg-alt);
}
.mys-theme table.shop_table.cart td.product-name a {
	font-weight: 600;
	font-size: 15.5px;
	color: var(--mys-text);
}
.mys-theme table.shop_table.cart td.product-name a:hover { color: var(--mys-accent-ink); opacity: 1; }
.mys-theme table.shop_table.cart .product-price,
.mys-theme table.shop_table.cart .product-subtotal { color: var(--mys-text); font-weight: 600; }

/* Usuwanie pozycji - okrągły przycisk zamiast gołego krzyżyka. */
.mys-theme table.shop_table.cart td.product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--mys-radius-pill);
	background: var(--mys-bg-alt);
	color: var(--mys-text-55) !important;
	font-size: 17px;
	line-height: 1;
}
.mys-theme table.shop_table.cart td.product-remove a.remove:hover {
	background: var(--mys-accent-soft);
	color: var(--mys-accent-ink) !important;
}

/* Ilość - pigułka spójna z resztą motywu. */
.mys-theme .woocommerce .quantity,
.mys-theme table.shop_table.cart .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--mys-border-strong);
	border-radius: var(--mys-radius-pill);
	overflow: hidden;
}
.mys-theme table.shop_table.cart .quantity input.qty {
	width: 62px;
	height: 42px;
	border: none;
	background: transparent;
	text-align: center;
	font-family: var(--mys-font-body);
	font-weight: 600;
	font-size: 15px;
	color: var(--mys-text);
}

/* Wiersz akcji: kupon po lewej, aktualizacja po prawej. */
/* Reguły wiersza akcji zdjęte - zastąpił je własny szablon koszyka
   (sekcja „WLASNY SZABLON KOSZYKA" niżej). Zostawione biły nowe
   specyficznością i wymuszały układ jeden pod drugim. */
/* Stary blok akcji koszyka usunięty: obsługuje go teraz własny szablon
   (sekcja „WLASNY SZABLON KOSZYKA"). Reguły na `#coupon_code` miały wyższą
   specyficzność niż nowe i wymuszały pole na całą szerokość wiersza. */

/* Panel podsumowania. */
.mys-theme .cart-collaterals .cart_totals {
	width: auto;
	min-width: 0;
	overflow-wrap: anywhere;
	float: none;
	background: var(--mys-surface);
	border: 1px solid var(--mys-border);
	border-radius: var(--mys-radius-lg);
	padding: clamp(20px, 2.6vw, 28px);
}
.mys-theme .cart_totals h2 {
	font-family: var(--mys-font-head);
	font-weight: 700;
	font-size: clamp(20px, 2.4vw, 26px);
	color: var(--mys-text);
	margin: 0 0 16px;
	text-transform: none;
}
.mys-theme .cart_totals table.shop_table {
	width: 100%;
	border: none;
	border-radius: 0;
	border-collapse: collapse;
	margin: 0 0 18px;
}
.mys-theme .cart_totals table.shop_table th,
.mys-theme .cart_totals table.shop_table td {
	border: none;
	border-bottom: 1px solid var(--mys-border);
	padding: 14px 0;
	font-size: 15px;
	text-transform: none;
	background: transparent;
}
.mys-theme .cart_totals table.shop_table tr.order-total th,
.mys-theme .cart_totals table.shop_table tr.order-total td {
	border-bottom: none;
	padding-top: 18px;
	font-family: var(--mys-font-head);
	font-weight: 800;
	font-size: 20px;
	color: var(--mys-text);
}
.mys-theme .wc-proceed-to-checkout { padding: 0; }
.mys-theme .wc-proceed-to-checkout a.checkout-button {
	display: block;
	width: 100%;
	text-align: center;
	background-color: var(--mys-accent) !important;
	color: var(--mys-on-accent) !important;
	border-radius: var(--mys-radius-pill) !important;
	font-family: var(--mys-font-body);
	font-weight: 600;
	font-size: 15.5px;
	padding: 17px 28px !important;
	text-transform: none;
	letter-spacing: 0;
	margin: 0;
}
.mys-theme .wc-proceed-to-checkout a.checkout-button:hover {
	background-color: var(--mys-accent-ink) !important;
	color: var(--mys-on-accent) !important;
	filter: none;
}

/* Pusty koszyk - własny szablon (woocommerce/cart/cart-empty.php). */
.mys-theme .mys-cartempty {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	background: var(--mys-surface);
	border: 1px solid var(--mys-border);
	border-radius: var(--mys-radius-lg);
	padding: clamp(36px, 6vw, 72px) clamp(22px, 4vw, 48px);
}
.mys-theme .mys-cartempty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 22px;
	border-radius: var(--mys-radius-pill);
	background: var(--mys-accent-soft);
	color: var(--mys-accent-ink);
}
.mys-theme .mys-cartempty__title {
	font-family: var(--mys-font-head);
	font-weight: 700;
	font-size: clamp(22px, 3vw, 32px);
	line-height: 1.15;
	color: var(--mys-text);
	margin: 0 0 12px;
}
.mys-theme .mys-cartempty__text {
	margin: 0 0 26px;
	max-width: 46ch;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--mys-text-70);
}
.mys-theme .mys-cartempty__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* Shoptimizer rysuje tu znak wodny wózka i własny komunikat - gasimy oba. */
.mys-theme .woocommerce-cart .cart-empty,
.mys-theme .woocommerce-cart .return-to-shop,
.mys-theme .wc-empty-cart-message { display: none !important; }
.mys-theme .woocommerce-cart .mys-page__content::before,
.mys-theme .woocommerce-cart .woocommerce::before,
.mys-theme .woocommerce-cart .woocommerce::after { content: none !important; background-image: none !important; }

@media (max-width: 899px) {
	.mys-theme .cart-collaterals .cart_totals { margin-top: 24px; }
	.mys-theme table.shop_table.cart td.actions button[name="update_cart"] { float: none; width: 100%; margin-top: 10px; }
}

/* -------- WLASNY SZABLON KOSZYKA (woocommerce/cart/cart.php) --------

   Trzy kolumny: produkt (kosz + miniatura + nazwa + cena), ilość, suma.
   Kosz siedzi w komórce produktu, więc nie ma już pustego słupka między nim
   a zdjęciem. Wiersz akcji ma wrapper `.mys-cart__actions` - komórka z
   `colspan` nie może sama być flexem, bo wypada z układu tabeli. */

.mys-theme .mys-cart__prod { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mys-theme .mys-cart__thumb {
	flex: none;
	display: block;
	width: 68px;
	height: 68px;
	border-radius: 12px;
	overflow: hidden;
	background: var(--mys-bg-alt);
}
.mys-theme .mys-cart__thumb img { width: 100%; height: 100%; object-fit: contain; margin: 0; }
.mys-theme .mys-cart__info { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mys-theme a.mys-cart__name,
.mys-theme span.mys-cart__name {
	font-weight: 600;
	font-size: 15.5px;
	line-height: 1.3;
	color: var(--mys-text);
	text-decoration: none;
}
.mys-theme a.mys-cart__name:hover { color: var(--mys-accent-ink); opacity: 1; }
.mys-theme .mys-cart__price,
.mys-theme .mys-cart__price .amount { font-size: 13.5px; color: var(--mys-text-55); font-weight: 500; }

.mys-theme table.mys-cart td.product-thumbnail { width: 100%; min-width: 0; }
.mys-theme table.mys-cart th.product-name { width: 100%; }
.mys-theme table.mys-cart td.product-quantity,
.mys-theme table.mys-cart th.product-quantity { width: 1%; white-space: nowrap; }
.mys-theme table.mys-cart td.product-subtotal,
.mys-theme table.mys-cart th.product-subtotal { width: 1%; white-space: nowrap; text-align: right; font-weight: 600; }

/* Kosz przy produkcie. */
.mys-theme table.mys-cart .mys-cart__prod a.remove {
	flex: none;
	order: -1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: var(--mys-radius-pill);
	background: var(--mys-bg-alt);
	color: var(--mys-text-55) !important;
	font-size: 17px;
	line-height: 1;
	text-decoration: none;
}
.mys-theme table.mys-cart .mys-cart__prod a.remove:hover {
	background: var(--mys-accent-soft);
	color: var(--mys-accent-ink) !important;
}

/* Wiersz akcji: pole kuponu, przycisk kuponu i aktualizacja w jednej linii. */
.mys-theme table.mys-cart td.actions { display: table-cell; padding: 20px 12px; background: var(--mys-surface-2); }
.mys-theme .mys-cart__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.mys-theme .mys-cart__actions .coupon {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	flex: 1 1 100%;
	float: none;
	margin: 0;
}
.mys-theme .mys-cart__actions #coupon_code {
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	background: #fff;
	border: 1px solid var(--mys-border-strong);
	border-radius: var(--mys-radius-input);
	padding: 12px 15px;
	font-family: var(--mys-font-body);
	font-size: 15px;
}
.mys-theme .mys-cart__actions button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
}

/* Przyciski kuponu - także ten w kasie, gdzie Shoptimizer daje swoją zieleń. */
.mys-theme .mys-cart__actions button[name="apply_coupon"],
.mys-theme form.checkout_coupon button[name="apply_coupon"],
.mys-theme .woocommerce form.checkout_coupon button.button {
	background-color: transparent !important;
	color: var(--mys-accent-ink) !important;
	border: 1px solid var(--mys-accent) !important;
	padding: 12px 22px !important;
	font-size: 14px !important;
}
.mys-theme form.checkout_coupon button[name="apply_coupon"],
.mys-theme .woocommerce form.checkout_coupon button.button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	line-height: 1 !important;
	text-decoration: none !important;
	white-space: nowrap;
}
.mys-theme .mys-cart__actions button[name="apply_coupon"]:hover,
.mys-theme form.checkout_coupon button[name="apply_coupon"]:hover,
.mys-theme .woocommerce form.checkout_coupon button.button:hover {
	background-color: var(--mys-accent-soft) !important;
	color: var(--mys-accent-ink) !important;
}

/* „Zaktualizuj koszyk" zbędny w interfejsie - ilość zmienia się przyciskami
   przy produkcie. Element zostaje w DOM, bo skrypt motywu go klika. */
.mys-theme .mys-cart__update { display: none !important; }

/* Formularz kuponu w kasie - karta zamiast kreskowanej ramki Woo. */
.mys-theme form.checkout_coupon {
	border: 1px solid var(--mys-border) !important;
	border-radius: var(--mys-radius-card) !important;
	background: var(--mys-surface);
	padding: 20px 22px !important;
	margin: 0 0 24px !important;
}
.mys-theme form.checkout_coupon .form-row { display: inline-flex; gap: 10px; flex-wrap: wrap; width: auto; margin: 0; }
.mys-theme form.checkout_coupon #coupon_code { flex: 0 1 220px; }

@media (max-width: 599px) {
	.mys-theme .mys-cart__actions,
	.mys-theme .mys-cart__actions .coupon { flex-direction: column; align-items: stretch; }
	.mys-theme .mys-cart__actions #coupon_code { flex: 1 1 auto; }
}

/* -------- KASA KLASYCZNA --------

   Strona Kasa używa shortcode'u `[woocommerce_checkout]`, a nie bloku.
   Powód: układ z makiety klientki - metody płatności, zgody i przycisk
   zamówienia w prawym panelu razem z podsumowaniem. W wersji blokowej te
   elementy mają w block.json sztywnego rodzica (`checkout-fields-block`)
   i przeniesienie ich do kolumny podsumowania powoduje, że blok w ogóle
   przestaje się renderować - sprawdzone. Koszyk zostaje blokowy. */

.mys-theme .woocommerce-checkout .col2-set,
.mys-theme #customer_details {
	display: block;
	width: auto;
	margin: 0;
}
.mys-theme #customer_details .col-1,
.mys-theme #customer_details .col-2 {
	float: none;
	width: auto;
	padding: 0;
}

/* Formularz i podsumowanie jako osobne białe karty. */
.mys-theme .woocommerce-checkout #customer_details,
.mys-theme .woocommerce-checkout #order_review {
	background: var(--mys-surface);
	border: 1px solid var(--mys-border);
	border-radius: var(--mys-radius-lg);
	padding: clamp(20px, 2.6vw, 32px);
}

/* Siatka na formularzu + ZDJĘCIE floatów i szerokości, które Shoptimizer
   wstawia na dzieciach. Bez tego `#order_review` zostawał przy swoich 177 px
   i nazwy produktów łamały się po jednym słowie. */
.mys-theme form.checkout #customer_details,
.mys-theme form.checkout #order_review_heading,
.mys-theme form.checkout #order_review {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.mys-theme form.checkout #customer_details .col-1,
.mys-theme form.checkout #customer_details .col-2 {
	float: none !important;
	width: auto !important;
	max-width: none !important;
}
.mys-theme form.checkout #order_review table.shop_table,
.mys-theme form.checkout #order_review #payment,
.mys-theme form.checkout #order_review .payment_methods,
.mys-theme form.checkout #order_review .place-order { width: 100% !important; }

/* Szablon `checkout/form-checkout.php` owija nagłówek i panel w
   `.mys-checkout__side`, więc formularz ma dokładnie dwoje dzieci i wystarczy
   zwykła siatka dwukolumnowa - bez spinania wierszy i pustych przestrzeni. */
.mys-theme .mys-checkout__side { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

@media (min-width: 900px) {
	.mys-theme form.checkout.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
		gap: clamp(20px, 2.6vw, 40px);
		align-items: start;
	}
	.mys-theme .mys-checkout__side {
		position: sticky;
		top: calc(var(--mys-head-h) + 20px);
	}
}

.mys-theme #order_review_heading {
	font-family: var(--mys-font-head);
	font-weight: 700;
	font-size: clamp(20px, 2.4vw, 26px);
	color: var(--mys-text);
	margin: 0 0 14px;
}
.mys-theme .woocommerce-billing-fields h3,
.mys-theme .woocommerce-additional-fields h3 {
	font-family: var(--mys-font-head);
	font-weight: 700;
	font-size: clamp(20px, 2.4vw, 26px);
	color: var(--mys-text);
	margin: 0 0 18px;
}
.mys-theme .woocommerce-additional-fields h3 { margin-top: 32px; }

/* Tabela podsumowania - bez ramek, oddzielona włosowymi liniami. */
.mys-theme table.woocommerce-checkout-review-order-table {
	width: 100%;
	border: none;
	border-collapse: collapse;
	margin: 0 0 20px;
}
.mys-theme table.woocommerce-checkout-review-order-table th,
.mys-theme table.woocommerce-checkout-review-order-table td {
	border: none;
	border-bottom: 1px solid var(--mys-border);
	padding: 14px 0;
	font-size: 15px;
	text-transform: none;
	background: transparent;
}
.mys-theme table.woocommerce-checkout-review-order-table tfoot .order-total th,
.mys-theme table.woocommerce-checkout-review-order-table tfoot .order-total td {
	border-bottom: none;
	padding-top: 18px;
	font-family: var(--mys-font-head);
	font-weight: 800;
	font-size: 20px;
	color: var(--mys-text);
}
.mys-theme table.woocommerce-checkout-review-order-table .product-thumbnail img {
	width: 48px;
	border-radius: 8px;
	background: var(--mys-bg-alt);
}

/* Metody płatności. */
.mys-theme #payment {
	background: transparent;
	border-radius: 0;
	padding: 0;
}
.mys-theme #payment ul.payment_methods {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	border: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.mys-theme #payment ul.payment_methods li {
	border: 1px solid var(--mys-border-strong);
	border-radius: var(--mys-radius-input);
	padding: 14px 16px;
	margin: 0;
	background: var(--mys-surface);
}
.mys-theme #payment ul.payment_methods li label {
	font-weight: 600;
	font-size: 15px;
	color: var(--mys-text);
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.mys-theme #payment ul.payment_methods input[type="radio"] { accent-color: var(--mys-accent); width: 18px; height: 18px; }
.mys-theme #payment div.payment_box {
	background: var(--mys-bg-alt);
	border-radius: var(--mys-radius-input);
	margin: 12px 0 0;
	padding: 14px 16px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--mys-text-70);
}
.mys-theme #payment div.payment_box::before { display: none; }

/* Zgody i przycisk zamówienia. */
.mys-theme .woocommerce-terms-and-conditions-wrapper { margin-bottom: 16px; font-size: 13.5px; line-height: 1.55; }
.mys-theme .woocommerce-privacy-policy-text p { font-size: 13px; line-height: 1.55; color: var(--mys-text-55); }
.mys-theme #payment .form-row.place-order { margin: 0; padding: 0; }
.mys-theme #place_order,
.mys-theme .woocommerce #place_order {
	width: 100%;
	background-color: var(--mys-accent);
	color: var(--mys-on-accent);
	border: none;
	border-radius: var(--mys-radius-pill);
	font-family: var(--mys-font-body);
	font-weight: 600;
	font-size: 15.5px;
	padding: 17px 28px;
	text-transform: none;
	letter-spacing: 0;
}
.mys-theme #place_order:hover,
.mys-theme .woocommerce #place_order:hover { background-color: var(--mys-accent-ink); color: var(--mys-on-accent); filter: none; }

/* Pola formularza kasy. */
.mys-theme .woocommerce-checkout .form-row { margin: 0 0 16px; padding: 0; }
.mys-theme .woocommerce-checkout .form-row label {
	display: block;
	margin-bottom: 7px;
	font-weight: 600;
	font-size: 13px;
	color: var(--mys-text);
}
.mys-theme .woocommerce-checkout .form-row .required { color: var(--mys-error); text-decoration: none; }
.mys-theme .woocommerce-checkout .input-text,
.mys-theme .woocommerce-checkout textarea,
.mys-theme .woocommerce-checkout select {
	width: 100%;
	background: #fff;
	border: 1px solid var(--mys-border-strong);
	border-radius: var(--mys-radius-input);
	padding: 13px 15px;
	font-family: var(--mys-font-body);
	font-size: 15px;
	color: var(--mys-text);
	box-shadow: none;
}

/* Select2 („Kraj / region") ma własną budowę: kontener, w środku span z tekstem
   i osobny span ze strzałką. Padding na kontenerze rozjeżdżał jedno i drugie -
   tekst wchodził na dolną krawędź. Wyrównanie robi flex, padding idzie na tekst. */
.mys-theme .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
	height: auto;
	min-height: 48px;
	padding: 0;
	background: #fff;
	border: 1px solid var(--mys-border-strong);
	border-radius: var(--mys-radius-input);
	outline: none;
}
.mys-theme .select2-container--default .select2-selection--single .select2-selection__rendered {
	flex: 1 1 auto;
	padding: 0 42px 0 15px;
	line-height: 1.45;
	font-family: var(--mys-font-body);
	font-size: 15px;
	color: var(--mys-text);
}
.mys-theme .select2-container--default .select2-selection--single .select2-selection__placeholder { color: var(--mys-text-50); }
.mys-theme .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 0;
	right: 12px;
	height: 100%;
	width: 20px;
}
.mys-theme .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--mys-accent); }
.mys-theme .select2-container--default .select2-dropdown {
	border: 1px solid var(--mys-border-strong);
	border-radius: var(--mys-radius-input);
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(30, 27, 46, .14);
}
.mys-theme .select2-container--default .select2-search--dropdown .select2-search__field {
	border: 1px solid var(--mys-border-strong);
	border-radius: 10px;
	padding: 10px 12px;
	font-family: var(--mys-font-body);
	font-size: 14.5px;
}
.mys-theme .select2-container--default .select2-results__option { padding: 10px 14px; font-size: 14.5px; color: var(--mys-text); }
.mys-theme .select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--mys-accent-soft);
	color: var(--mys-accent-ink);
}
.mys-theme .select2-container--default .select2-results__option[aria-selected="true"] {
	background: var(--mys-bg-alt);
	color: var(--mys-text);
	font-weight: 600;
}
.mys-theme .woocommerce-checkout .input-text:focus,
.mys-theme .woocommerce-checkout textarea:focus { outline: none; border-color: var(--mys-accent); }
.mys-theme .woocommerce-checkout textarea { min-height: 110px; line-height: 1.55; }

/* Pasek kroków Shoptimizera. Realna klasa to `.checkout-bar` w `.checkout-wrap`
   (nie `.checkout-steps`, jak początkowo zakładałem). Kropki i linie rysują
   pseudoelementy `li`, domyślnie w zieleni motywu rodzica. */
.mys-theme .checkout-wrap { margin-bottom: clamp(30px, 4vw, 52px); }
/* Pasek ma iść przez całą szerokość obu kolumn - Shoptimizer zwęża go
   do ~840 px, przez co wisiał w powietrzu względem kart pod spodem. */
.mys-theme ul.checkout-bar {
	padding: 0;
	width: 100% !important;
	max-width: none !important;
	margin-inline: 0 !important;
}
.mys-theme ul.checkout-bar li { width: 33.3333% !important; }
/* Odcinek na lewo od pierwszego kroku rysuje osobny pseudoelement. */
.mys-theme .checkout-wrap::before,
.mys-theme .checkout-wrap::after,
.mys-theme ul.checkout-bar::before,
.mys-theme ul.checkout-bar::after,
.mys-theme ul.checkout-bar li.first::before {
	background-color: var(--mys-accent) !important;
	border-color: var(--mys-accent) !important;
}
.mys-theme ul.checkout-bar li { color: var(--mys-text-55); font-weight: 600; }
.mys-theme ul.checkout-bar li a { color: inherit; }
.mys-theme ul.checkout-bar li.active,
.mys-theme ul.checkout-bar li.next { color: var(--mys-text); }
.mys-theme ul.checkout-bar li::before,
.mys-theme ul.checkout-bar li::after,
.mys-theme ul.checkout-bar li.active::before,
.mys-theme ul.checkout-bar li.active::after,
.mys-theme ul.checkout-bar li.next::before,
.mys-theme ul.checkout-bar li.next::after {
	background-color: var(--mys-border-strong) !important;
	border-color: var(--mys-border-strong) !important;
}
.mys-theme ul.checkout-bar li.active::after,
.mys-theme ul.checkout-bar li.active::before {
	background-color: var(--mys-accent) !important;
	border-color: var(--mys-accent) !important;
	color: var(--mys-on-accent) !important;
}

@media (max-width: 899px) {
	.mys-theme .woocommerce-checkout #order_review { margin-top: 24px; }
}

/* -------- PODZIĘKOWANIE ZA ZAMÓWIENIE --------

   Własny szablon (woocommerce/checkout/thankyou.php): karta z nagłówkiem,
   pasek danych zamówienia i dwie kolumny pod spodem. Domyślny markup Woo to
   płaska lista i tabela - nie dało się z tego zrobić układu z makiety. */

.mys-theme .mys-ty { max-width: none; }
.mys-theme .mys-ty__card {
	background: var(--mys-surface);
	border: 1px solid var(--mys-border);
	border-radius: var(--mys-radius-lg);
	padding: clamp(22px, 3vw, 36px);
	margin-bottom: 20px;
}
.mys-theme .mys-ty__head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.mys-theme .mys-ty__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--mys-radius-pill);
	background: var(--mys-accent-soft);
	color: var(--mys-accent-ink);
}
.mys-theme .mys-ty__title {
	font-family: var(--mys-font-head);
	font-weight: 800;
	font-size: clamp(23px, 3vw, 34px);
	line-height: 1.15;
	letter-spacing: -.02em;
	color: var(--mys-text);
	margin: 0;
}
.mys-theme .mys-ty__lead {
	margin: 0 0 22px;
	max-width: 62ch;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--mys-text-70);
}
.mys-theme .mys-ty__lead strong { color: var(--mys-text); font-weight: 600; }

/* Pasek danych zamówienia. */
.mys-theme ul.mys-ty__meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 18px 24px;
	list-style: none;
	margin: 0;
	padding: 20px 22px;
	border: none;
	border-radius: var(--mys-radius-card);
	background: var(--mys-bg-alt);
}
.mys-theme ul.mys-ty__meta li { margin: 0; padding: 0; border: none; }
.mys-theme .mys-ty__metakey {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mys-text-50);
	margin-bottom: 6px;
}
.mys-theme .mys-ty__metaval {
	display: block;
	font-weight: 600;
	font-size: 15px;
	color: var(--mys-text);
	overflow-wrap: anywhere;
}
.mys-theme .mys-ty__metaval .amount { font-weight: 600; color: var(--mys-text); }

/* Instrukcje bramki płatności (np. dane do przelewu). */
.mys-theme .mys-ty__gateway { background: var(--mys-accent-soft); border-color: transparent; }
.mys-theme .mys-ty__gateway h2,
.mys-theme .mys-ty__gateway h3 {
	font-family: var(--mys-font-head);
	font-weight: 700;
	font-size: 19px;
	margin: 0 0 12px;
	color: var(--mys-text);
}
.mys-theme .mys-ty__gateway ul { margin: 0; padding-left: 18px; font-size: 14.5px; line-height: 1.7; }

/* Dwie kolumny. */
.mys-theme .mys-ty__cols { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
@media (min-width: 900px) {
	.mys-theme .mys-ty__cols { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}
.mys-theme .mys-ty__side { display: flex; flex-direction: column; gap: 20px; }
.mys-theme .mys-ty__cols .mys-ty__card { margin-bottom: 0; }

.mys-theme .mys-ty__h2 {
	font-family: var(--mys-font-head);
	font-weight: 700;
	font-size: clamp(18px, 2.2vw, 22px);
	color: var(--mys-text);
	margin: 0 0 18px;
}

/* Tabela pozycji. */
.mys-theme table.mys-ty__table { width: 100%; border-collapse: collapse; border: none; margin: 0; }
.mys-theme table.mys-ty__table th,
.mys-theme table.mys-ty__table td {
	border: none;
	border-bottom: 1px solid var(--mys-border);
	padding: 14px 0;
	font-size: 15px;
	text-align: left;
	background: transparent;
	vertical-align: middle;
}
.mys-theme table.mys-ty__table thead th {
	padding-top: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--mys-text-50);
}
.mys-theme .mys-ty__right { text-align: right !important; white-space: nowrap; }
.mys-theme .mys-ty__prod { display: flex; align-items: center; gap: 14px; }
.mys-theme .mys-ty__thumb {
	flex: none;
	width: 46px;
	height: 46px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--mys-bg-alt);
}
.mys-theme .mys-ty__thumb img { width: 100%; height: 100%; object-fit: contain; }
.mys-theme .mys-ty__prodname { display: block; font-weight: 600; line-height: 1.3; color: var(--mys-text); }
.mys-theme .mys-ty__prodqty { display: block; margin-top: 2px; font-size: 13px; color: var(--mys-text-55); }
.mys-theme table.mys-ty__table tfoot th { font-weight: 500; color: var(--mys-text-70); }
.mys-theme table.mys-ty__table tfoot tr:last-child th,
.mys-theme table.mys-ty__table tfoot tr:last-child td { border-bottom: none; }
.mys-theme table.mys-ty__table tr.mys-ty__sum th,
.mys-theme table.mys-ty__table tr.mys-ty__sum td {
	padding-top: 18px;
	font-family: var(--mys-font-head);
	font-weight: 800;
	font-size: 20px;
	color: var(--mys-text);
}

/* Kolumna boczna. */
.mys-theme .mys-ty__addr {
	font-style: normal;
	font-size: 15px;
	line-height: 1.7;
	color: var(--mys-text-70);
	border: none;
	padding: 0;
}
.mys-theme .mys-ty__addrline { display: block; }
.mys-theme .mys-ty__files { display: flex; flex-direction: column; gap: 8px; }
.mys-theme .mys-ty__file {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 15px;
	border-radius: var(--mys-radius-input);
	background: var(--mys-accent-soft);
	color: var(--mys-accent-ink);
	font-weight: 600;
	font-size: 14.5px;
}
.mys-theme .mys-ty__file:hover { background: var(--mys-accent-soft-2); opacity: 1; }
.mys-theme .mys-ty__help { margin: 0 0 16px; font-size: 14.5px; line-height: 1.6; color: var(--mys-text-70); }
.mys-theme .mys-ty__btns { display: flex; flex-wrap: wrap; gap: 10px; }

/* Domyślne elementy Woo na tej stronie są już niepotrzebne. */
.mys-theme .mys-ty .woocommerce-order-overview,
.mys-theme .mys-ty .woocommerce-thankyou-order-details,
.mys-theme .mys-ty > .woocommerce-notice--success { display: none; }

/* -------------------- MOJE KONTO -------------------- */

/* Shoptimizer narzuca tu własny układ (menu w lewej kolumnie, ikony przy
   pozycjach). Zostawiamy jego siatkę, dokładamy paletę, pola i odstępy.

   `display: flow-root` jest tu kluczowe: klasyczny układ konta stoi na floatach,
   a te nie rozpychają rodzica. Bez tego sekcja zapadała się do zera wysokości,
   dolne dopełnienie strony przestawało cokolwiek robić i stopka wchodziła
   tuż pod przycisk „Zapisz zmiany". */
.mys-theme .mys-page__content .woocommerce {
	max-width: 100%;
	display: flow-root;
}
.mys-theme .woocommerce-MyAccount-content > :last-child { margin-bottom: 0; }
.mys-theme .woocommerce-MyAccount-content form { margin-bottom: 8px; }

.mys-theme .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mys-theme .woocommerce-MyAccount-navigation li { margin: 0; }
.mys-theme .woocommerce-MyAccount-navigation li a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid var(--mys-border-strong);
	border-radius: var(--mys-radius-pill);
	background-color: var(--mys-surface);
	color: var(--mys-text);
	font-weight: 600;
	font-size: 14px;
	transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.mys-theme .woocommerce-MyAccount-navigation li a:hover {
	background-color: var(--mys-accent-soft);
	border-color: var(--mys-accent);
	color: var(--mys-accent-ink);
	opacity: 1;
}
.mys-theme .woocommerce-MyAccount-navigation li.is-active a {
	background-color: var(--mys-accent);
	border-color: var(--mys-accent);
	color: var(--mys-on-accent);
}
.mys-theme .woocommerce-MyAccount-content { min-width: 0; }
.mys-theme .woocommerce-MyAccount-content h2,
.mys-theme .woocommerce-MyAccount-content legend {
	font-family: var(--mys-font-head);
	font-weight: 700;
	font-size: clamp(22px, 2.6vw, 30px);
	color: var(--mys-text);
	margin: 32px 0 16px;
}
.mys-theme .woocommerce-MyAccount-content fieldset { border: none; padding: 0; margin: 0; }

/* Pola formularzy Woo (logowanie, rejestracja, dane konta, adresy). */
.mys-theme .woocommerce form .form-row { margin: 0 0 16px; padding: 0; }
.mys-theme .woocommerce form .form-row label,
.mys-theme .woocommerce-EditAccountForm label {
	display: block;
	margin-bottom: 7px;
	font-family: var(--mys-font-body);
	font-weight: 600;
	font-size: 13px;
	color: var(--mys-text);
}
.mys-theme .woocommerce form .form-row .required { color: var(--mys-error); }
.mys-theme .woocommerce form .form-row input.input-text,
.mys-theme .woocommerce form .form-row textarea,
.mys-theme .woocommerce form .form-row select,
.mys-theme .woocommerce .woocommerce-Input--text,
.mys-theme .woocommerce-EditAccountForm input.input-text,
.mys-theme .woocommerce-address-fields input.input-text {
	width: 100%;
	background-color: #fff;
	border: 1px solid var(--mys-border-strong);
	border-radius: var(--mys-radius-input);
	padding: 13px 15px;
	font-family: var(--mys-font-body);
	font-size: 15px;
	line-height: 1.4;
	color: var(--mys-text);
	box-shadow: none;
	transition: border-color .2s ease;
}
.mys-theme .woocommerce form .form-row input.input-text:focus,
.mys-theme .woocommerce form .form-row textarea:focus,
.mys-theme .woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--mys-accent);
}
.mys-theme .woocommerce form .form-row em,
.mys-theme .woocommerce-EditAccountForm span.description {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	font-style: normal;
	line-height: 1.45;
	color: var(--mys-text-55);
}
.mys-theme .woocommerce-form__label-for-checkbox { display: flex; align-items: center; gap: 9px; font-weight: 500; }
.mys-theme .woocommerce-form__input-checkbox { width: 18px; height: 18px; accent-color: var(--mys-accent); }

/* -------------------- RESPONSYWNOŚĆ -------------------- */

/* -------------------- KATEGORIE NA MOBILE (przycisk + panel wyboru) -------------------- */

@media (max-width: 767px) {
	.mys-chips { flex: 1 1 100%; }
	.mys-theme .mys-chips__toggle {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		width: 100%;
		justify-content: space-between;
		background: var(--mys-surface);
		border: 1px solid rgba(30, 27, 46, .18);
		border-radius: var(--mys-radius-pill);
		padding: 12px 18px;
		font-family: var(--mys-font-body);
		font-weight: 600;
		font-size: 14px;
		line-height: 1;
		color: var(--mys-text);
	}
	.mys-chips__toggle-label { color: var(--mys-text-55); font-weight: 600; }
	.mys-chips__toggle-val { margin-left: auto; }
	.mys-chips__toggle svg { flex: none; transition: transform .25s ease; }
	.mys-chips__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

	.mys-chips__scrim {
		position: fixed;
		inset: 0;
		z-index: 84;
		background: rgba(30, 27, 46, .45);
		animation: mys-fade .25s ease;
	}
	.mys-chips__scrim[hidden] { display: none; }

	.mys-chips__list {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 85;
		display: flex;
		flex-direction: column;
		gap: 8px;
		background: var(--mys-bg);
		border-radius: var(--mys-radius-lg) var(--mys-radius-lg) 0 0;
		padding: 20px 20px 28px;
		box-shadow: 0 -20px 60px rgba(30, 27, 46, .25);
		transform: translateY(101%);
		transition: transform .3s cubic-bezier(.22, 1, .36, 1);
		max-height: 80vh;
		overflow-y: auto;
	}
	.mys-chips__list.is-open { transform: none; }

	.mys-chips__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 6px;
	}
	.mys-chips__headtitle { font-family: var(--mys-font-head); font-weight: 700; font-size: 19px; }

	.mys-theme .mys-chips__list .mys-chip {
		width: 100%;
		justify-content: flex-start;
		border-radius: 14px;
		padding: 15px 18px;
		font-size: 16px;
	}
	.mys-theme .mys-chips__list .mys-chip.is-active {
		background: rgba(124, 92, 224, .14);
		border-color: rgba(124, 92, 224, .5);
		color: var(--mys-text);
	}
}

@media (max-width: 640px) {
	.mys-shop__bar { align-items: flex-start; }
	.mys-sort { width: 100%; justify-content: space-between; }
	.mys-card__foot { flex-wrap: wrap; gap: 12px; }
	.mys-ctabanner { margin-top: 40px; }
	.mys-theme .mys-product__cart form.cart { width: 100%; }
	.mys-theme .mys-product__cart button.single_add_to_cart_button { flex: 1; }
}

/* -------------------- SIATKA PRODUKTOW POZA PETLA WOO -------------------- */

/* Ta sama karta na stronie glownej (article) co w archiwum (li). */
.mys-grid--home {
	display: grid;
	/* Bestsellery to teraz trzy sztuki - siatka auto-fill zostawialaby
	   czwarta kolumne pusta, wiec liczba kolumn jest tu podana wprost. */
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
@media (max-width: 900px) {
	.mys-grid--home { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.mys-grid--home { grid-template-columns: 1fr; }
}
.mys-theme .mys-grid--home > .mys-card {
	display: flex;
	flex-direction: column;
	background: var(--mys-surface);
	border: 1px solid var(--mys-border);
	border-radius: var(--mys-radius-card);
	overflow: hidden;
	transition: border-color .2s ease, transform .2s ease;
}
.mys-theme .mys-grid--home > .mys-card:hover { border-color: rgba(30, 27, 46, .2); transform: translateY(-3px); }
.mys-theme .mys-grid--home > .mys-card { align-self: stretch; }

/* -------------------- ILOSC: MINUS / PLUS -------------------- */

/* Przyciski dokladaja haki woocommerce_before/after_quantity_input_field.
   Celujemy w samo `.quantity`, a nie w nasza klase `.mys-qty` - Shoptimizer
   nadpisuje szablon `global/quantity-input.php` i nie przepuszcza filtra
   `woocommerce_quantity_input_classes`, wiec ta klasa na froncie nie
   powstawala i caly ten arkusz nie mial czego zlapac.

   Rozmiar jest celowo maly: pole ilosci ma zmiescic sie w jednej linii
   razem z przyciskiem „Dodaj do koszyka" nawet przy 375 px. */
.mys-theme .mys-product__cart .quantity,
.mys-theme .woocommerce-cart-form .quantity,
.mys-theme .quantity.mys-qty {
	display: inline-flex;
	align-items: center;
	gap: 0;
	width: auto;
	max-width: none;
	height: 46px;
	padding: 0;
	background: var(--mys-surface);
	border: 1px solid var(--mys-border);
	border-radius: 999px;
	overflow: hidden;
	float: none;
	margin: 0;
}
.mys-theme .quantity .mys-qty__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 100%;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--mys-ink, var(--mys-text));
	cursor: pointer;
	transition: background .18s ease, color .18s ease;
}
.mys-theme .quantity .mys-qty__btn:hover { background: var(--mys-bg-alt); }
.mys-theme .quantity .mys-qty__btn svg { width: 14px; height: 14px; }

/* Woo i motyw rodzic daja polu wlasna ramke, tlo i wysokosc - w pigulce
   wygladalo to jak drugi, mniejszy input w srodku. */
.mys-theme .mys-product__cart .quantity input.qty,
.mys-theme .woocommerce-cart-form .quantity input.qty,
.mys-theme .quantity.mys-qty input.qty {
	width: 34px;
	min-width: 0;
	height: 100%;
	/* Shoptimizer daje polu `margin-top: 10px` - bez wyzerowania cyfra
	   siedziala nizej niz plus i minus. */
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	text-align: center;
	font-family: var(--mys-font-body);
	font-weight: 600;
	font-size: 15px;
	line-height: 1;
	color: var(--mys-text);
	-moz-appearance: textfield;
	appearance: textfield;
}
.mys-theme .quantity input.qty::-webkit-outer-spin-button,
.mys-theme .quantity input.qty::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.mys-theme .quantity input.qty:focus,
.mys-theme .quantity input.qty:focus-visible {
	outline: none;
	box-shadow: none;
	background: transparent;
}

/* Formularz koszyka na karcie produktu: ilosc i przycisk w jednej linii. */
.mys-theme .mys-product__cart form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.mys-theme .mys-product__cart form.cart .single_add_to_cart_button { flex: 1 1 auto; }