/* Widoki WooCommerce: te same reguły co .st-commerce i .st-buy-panel w motywie kopii Slight Twist (style.css),
   z kolorami Feel Nice: żółty tekst kopii → krem i żółty, różowy przycisk → róż marki, ciemna zieleń pól → czerń,
   font nagłówków kopii → Figtree. */

/* Boki: wspólny margines sekcji (--fn-margines w marka.css). */
.fn .st-commerce { padding: 9.375rem var(--fn-margines) 5.625rem; min-height: 65vh; color: var(--fn-krem); }
.fn .st-commerce h1 { margin: 0 0 2.8125rem; font-size: clamp(2.8rem, 6vw, 5.5rem); line-height: 1; }
.fn .st-commerce h2 { font-size: 2rem; }
.fn .st-commerce a { color: inherit; }
.fn .st-commerce ul.products li.product .woocommerce-loop-product__title { font-family: var(--fn-font-naglowki); font-weight: 800; font-size: 1.6rem; line-height: 1.1; color: var(--fn-krem); }
.fn .st-commerce ul.products li.product .price, .fn .st-commerce div.product p.price { color: var(--fn-zolty); font-size: 1.4rem; }
.fn .st-commerce ul.products li.product a img { border-radius: 0.75rem; }
.fn .st-commerce ul.products li.product img.fn-karta-packshot { height: 18rem; width: 100%; object-fit: contain; background: var(--fn-malina-800); border-radius: 3.125rem; padding: 1.5rem; }
.fn .st-commerce .woocommerce a.button, .fn .st-commerce .woocommerce button.button, .fn .st-commerce .woocommerce input.button,
.fn .st-commerce a.button, .fn .st-commerce button.button, .fn .st-buy-panel button.button {
	background: var(--fn-roz);
	color: var(--fn-krem);
	border: 0;
	border-radius: 0.5rem;
	padding: 1rem 1.5625rem;
	font: 700 1.2rem/1.2 var(--fn-font-tekst);
	cursor: pointer;
}
.fn .st-commerce ul.products li.product { margin-bottom: 3.125rem; }

/* Panel zakupu na stronie produktu (2026-10-13: „pod nasz styl”): podpis wersalikami jak w pasie z liczbami,
   opakowania jako kafelki (inc/sklep.php, strona.js), duża cena, ilość z − i +, przycisk w kolorach linii.
   Obrysy i podpisy biorą kolor tekstu sekcji, więc pasują i do kremu, i do czerni na Florze. */
.fn .st-buy-panel { width: 100%; margin: 0.5rem 0 1rem; }
.fn .st-buy-panel .variations, .fn .st-buy-panel .variations tbody, .fn .st-buy-panel .variations tr,
.fn .st-buy-panel .variations th, .fn .st-buy-panel .variations td { display: block; width: 100%; padding: 0; border: 0; text-align: left; }
.fn .st-buy-panel .variations { margin: 0 0 1.25rem; }
.fn .st-buy-panel .variations th label { display: block; margin-bottom: 0.6rem; font: 700 0.8125rem/1.1 var(--fn-font-naglowki); letter-spacing: 0.08em; text-transform: uppercase; }
.fn .st-buy-panel select { width: 100%; padding: 0.625rem; border-radius: 0.5rem; background: var(--fn-krem); color: var(--fn-czern); border: 0; font-family: inherit; font-size: 1rem; }
.fn .st-buy-panel .reset_variations { color: inherit; font-size: 0.875rem; }
/* Z kafelkami lista i „Wyczyść wybór” znikają (zawsze jest wybrane opakowanie); lista dalej działa w tle. */
.fn .st-buy-panel .fn-z-kaflami select, .fn .st-buy-panel .fn-z-kaflami .reset_variations { display: none !important; }
.fn .fn-opakowania { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0.6rem; }
.fn .fn-opakowanie {
	position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.9rem 0.5rem 0.85rem;
	border-radius: 1rem; box-shadow: inset 0 0 0 2px color-mix(in srgb, currentColor 40%, transparent); text-align: center; cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, translate 0.15s ease;
}
.fn .fn-opakowanie:hover { box-shadow: inset 0 0 0 2px currentColor; translate: 0 -1px; }
.fn .fn-opakowanie input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; } /* zostaje dla klawiatury i czytników */
.fn .fn-opakowanie:has(input:checked) { background: var(--fn-przycisk-tlo, var(--fn-zolty)); color: var(--fn-przycisk-tekst, var(--fn-czern)); box-shadow: none; translate: none; }
.fn .fn-opakowanie:has(input:focus-visible) { outline: 3px solid var(--fn-zolty); outline-offset: 3px; }
.fn .fn-opakowanie-liczba { font: 700 2rem/1 var(--fn-font-naglowki); letter-spacing: -0.02em; white-space: nowrap; }
.fn .fn-opakowanie-slowo { font: 700 0.6875rem/1.1 var(--fn-font-naglowki); letter-spacing: 0.08em; text-transform: uppercase; }
.fn .fn-opakowanie-cena { margin-top: 0.35rem; font: 500 1rem/1.2 var(--fn-font-tekst); }
.fn .fn-opakowanie-cena .amount { color: inherit; }
.fn .st-buy-panel .woocommerce-variation-price { margin: 0 0 1rem; font: 700 2.25rem/1 var(--fn-font-naglowki); letter-spacing: -0.02em; }
.fn .st-buy-panel .woocommerce-variation-price .price { color: inherit; font-size: inherit; }
.fn .st-buy-panel .woocommerce-variation-add-to-cart { display: flex; align-items: stretch; gap: 0.75rem; }
.fn .st-buy-panel .quantity { display: flex; align-items: center; margin: 0; border-radius: 0.5rem; background: var(--fn-krem); color: var(--fn-czern); }
.fn .st-buy-panel .qty { width: 4.5rem; padding: 0.75rem; border: 0; border-radius: 0.5rem; background: transparent; color: inherit; text-align: center; font-weight: 600; }
.fn .quantity.fn-ilosc { display: flex; align-items: center; margin: 0; border-radius: 0.5rem; background: var(--fn-krem); color: var(--fn-czern); }
.fn .quantity.fn-ilosc .qty, .fn .st-commerce .fn-pozycja .quantity.fn-ilosc input.qty {
	width: 2.75rem; min-height: 3rem; padding: 0.75rem 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: inherit;
	text-align: center; font-weight: 600; -moz-appearance: textfield; appearance: textfield;
}
.fn .quantity.fn-ilosc .qty::-webkit-inner-spin-button, .fn .quantity.fn-ilosc .qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.fn .fn-ilosc-krok { align-self: stretch; width: 2.75rem; padding: 0; border: 0; border-radius: 0.5rem; background: none; color: inherit; font: 500 1.5rem/1 var(--fn-font-tekst); cursor: pointer; }
.fn .fn-ilosc-krok:hover { background: rgb(22 8 14 / 0.07); }
.fn .st-buy-panel .woocommerce-variation-add-to-cart button.single_add_to_cart_button { flex: 1; min-height: 3.5rem; font: 500 1.375rem/1.2 var(--fn-font-naglowki); }
.fn .st-buy-panel button.disabled { opacity: 0.5; }
/* Na telefonie kolumna opisu jest wyśrodkowana: podpis i cena też. */
@media (max-width: 767px) { .fn .st-buy-panel .variations th, .fn .st-buy-panel .woocommerce-variation-price, .fn .fn-zakup + .fn-uwaga { text-align: center; } }
/* WooCommerce ma własny fiolet z selektorem .woocommerce div.product form.cart .button.alt. */
.fn .st-buy-panel form.cart .button.single_add_to_cart_button, .fn .st-buy-panel form.cart .button.alt { background: var(--fn-roz); color: var(--fn-krem); }

/* Formularze, tabele i komunikaty w widokach sklepu */
.fn .st-commerce input:not([type=checkbox]):not([type=radio]):not([type=submit]), .fn .st-commerce textarea, .fn .st-commerce select {
	background: var(--fn-krem);
	border: 1px solid var(--fn-roz-300);
	border-radius: 0.3125rem;
	color: var(--fn-czern);
	padding: 0.75rem;
	font: inherit;
}
.fn .st-commerce .woocommerce { color: var(--fn-krem); }
.fn .woocommerce-info, .fn .woocommerce-message { background: var(--fn-roz-200); color: var(--fn-malina-900); border-color: var(--fn-roz); }
.fn .woocommerce-message::before, .fn .woocommerce-info::before { color: var(--fn-roz); }
.fn .woocommerce-message .button, .fn .woocommerce-info .button { background: var(--fn-malina); color: var(--fn-krem); border-radius: 0.5rem; }
.fn .st-commerce .woocommerce table.shop_table { border-color: rgb(255 251 247 / 0.33); }
.fn .st-commerce .woocommerce table.shop_table td { border-color: rgb(255 251 247 / 0.27); }
.fn .st-commerce .woocommerce table.shop_table th { font-weight: 700; }
.fn .st-commerce .woocommerce a.remove { color: var(--fn-krem) !important; }
.fn .st-commerce .woocommerce a.remove:hover { background: var(--fn-roz); }
.fn .st-commerce #payment { background: var(--fn-malina-800); }
.fn .st-commerce #payment div.payment_box { color: var(--fn-krem); background: var(--fn-malina-600); }
.fn .st-commerce #payment div.payment_box::before { border-bottom-color: var(--fn-malina-600); }
.fn .st-commerce .woocommerce-terms-and-conditions-wrapper { color: var(--fn-krem); }
.fn .st-commerce .woocommerce button.button:disabled, .fn .st-commerce .woocommerce button.button:disabled[disabled] { opacity: 0.5; color: var(--fn-krem); padding: 1rem 1.5625rem; }
.fn .st-commerce .woocommerce .cart-collaterals .cart_totals { width: 50%; }
.fn .st-commerce .woocommerce form .form-row label { font-size: 1rem; }
.fn .st-commerce .woocommerce .checkout h3 { font-size: 1.7rem; }
.fn .st-commerce .woocommerce-privacy-policy-text { font-size: 1rem; }
.fn .st-commerce .woocommerce-error { background: #fdecef; color: #8a1238; }
.fn .st-commerce .woocommerce .quantity input { max-width: 5.3125rem; }
.fn .st-commerce .woocommerce table.cart td.actions .coupon .input-text { width: 11.25rem; min-width: 0; }

@media (max-width: 767px) {
	.fn .st-commerce { padding: 7.1875rem var(--fn-margines) 4.0625rem; }
	.fn .st-commerce h1 { font-size: 3rem; }
	.fn .st-buy-panel .variations td, .fn .st-buy-panel .variations th { display: block; }
	.fn .st-commerce .woocommerce .cart-collaterals .cart_totals { width: 100%; }
	.fn .st-commerce ul.products li.product img.fn-karta-packshot { height: 12rem; border-radius: 1.875rem; }
	.fn .st-commerce ul.products li.product .woocommerce-loop-product__title { font-size: 1.3rem; }
	.fn .st-commerce .woocommerce table.shop_table_responsive tr td { background: var(--fn-malina-800); }
	/* Rząd z kodem rabatowym zawija się: pole na całą szerokość, przycisk pod nim (inaczej rozpycha tabelę). */
	.fn .st-commerce .woocommerce table.cart td.actions .coupon { display: flex; flex-wrap: wrap; gap: 0.5rem; float: none; }
	.fn .st-commerce .woocommerce table.cart td.actions .coupon .input-text { flex: 1 1 100%; width: 100%; }
	.fn .st-commerce .woocommerce table.cart td.actions .coupon .button, .fn .st-commerce .woocommerce table.cart td.actions > .button { flex: 1 1 100%; width: 100%; font-size: 1rem; padding: 0.75rem 1rem; }
	.fn .st-commerce .woocommerce table.shop_table_responsive tr td { word-break: break-word; }
}

/* ---------- Koszyk wysuwany z prawej: jak szuflada w sklepie Slight Twist (wysuwanie 300 ms, przyciemnione tło).
   Szerokość 30rem, na telefonie 11/12 ekranu (prośba klienta z 2026-10-13: 5/12 ekranu z kopii było „za szerokie”). ---------- */
.fn-szuflada { position: fixed; inset: 0; z-index: 1000; }
.fn-szuflada[hidden] { display: none; }
.fn-szuflada-tlo { position: absolute; inset: 0; background: rgb(22 8 14 / 0.55); opacity: 0; transition: opacity 300ms ease; }
.fn-szuflada-panel {
	position: absolute; top: 0; right: 0; bottom: 0;
	width: min(30rem, 91.6667%);
	display: flex; flex-direction: column;
	background: var(--fn-malina); color: var(--fn-krem);
	border-left: 1px solid rgb(255 251 247 / 0.2);
	transform: translateX(100%); transition: transform 300ms ease;
	outline: none;
}
.fn-szuflada.jest-otwarta .fn-szuflada-tlo { opacity: 1; }
.fn-szuflada.jest-otwarta .fn-szuflada-panel { transform: translateX(0); }
html.fn-koszyk-otwarty { overflow: hidden; }
/* Bez przeskoku strony przy otwarciu szuflady i menu: w miejscu znikającego paska przewijania odstęp tej samej szerokości
   (mierzy strona.js), a przypięte menu i pasek zakupu zostają tej samej szerokości i w tym samym miejscu. */
html.fn-koszyk-otwarty, html.fn-menu-otwarte { padding-right: var(--fn-pasek-przewijania, 0px); }
html:is(.fn-koszyk-otwarty, .fn-menu-otwarte) .navbar5_component {
	--fn-szer-bez-paska: calc(100vw - var(--fn-pasek-przewijania, 0px));
	--fn-margines: max(var(--fn-szer-bez-paska) * 0.05, (var(--fn-szer-bez-paska) - 100rem) / 2); /* jak w marka.css, od szerokości sprzed blokady */
	width: var(--fn-szer-bez-paska);
}
html:is(.fn-koszyk-otwarty, .fn-menu-otwarte) .fn-pasek-zakupu { margin-left: calc(var(--fn-pasek-przewijania, 0px) / -2); }
.fn-szuflada-naglowek { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem 0.625rem; }
.fn-szuflada-naglowek h2 { margin: 0; font-family: var(--fn-font-naglowki); font-size: 1.75rem; font-weight: 700; letter-spacing: -0.02em; }
.fn-szuflada-zamknij { background: none; border: 0; padding: 0.5rem; color: inherit; cursor: pointer; }
.fn-szuflada .widget_shopping_cart_content { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 0 1.5rem 1.5rem; }
.fn-szuflada .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; }
.fn-szuflada .woocommerce-mini-cart-item { position: relative; display: grid; grid-template-columns: 4.5rem 1fr; gap: 0 1rem; padding: 1rem 2rem 1rem 0; border-bottom: 1px solid rgb(255 251 247 / 0.2); }
.fn-szuflada .woocommerce-mini-cart-item a:not(.remove) { display: contents; color: inherit; text-decoration: none; font-weight: 600; }
.fn-szuflada .woocommerce-mini-cart-item img { grid-column: 1; grid-row: 1 / span 3; width: 4.5rem; height: 4.5rem; object-fit: contain; background: var(--fn-malina-800); border-radius: 0.75rem; padding: 0.25rem; margin: 0; float: none; }
.fn-szuflada .woocommerce-mini-cart-item .variation { grid-column: 2; margin: 0.15rem 0; font-size: 0.875rem; opacity: 0.85; }
.fn-szuflada .woocommerce-mini-cart-item .variation dt, .fn-szuflada .woocommerce-mini-cart-item .variation dd, .fn-szuflada .woocommerce-mini-cart-item .variation p { display: inline; margin: 0; }
.fn-szuflada .woocommerce-mini-cart-item .quantity { grid-column: 2; font-size: 0.9375rem; color: var(--fn-zolty); }
.fn-szuflada .woocommerce-mini-cart-item a.remove { position: absolute; top: 1rem; right: 0; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; border-radius: 6.25rem; color: var(--fn-krem) !important; font-size: 1.25rem; line-height: 1; text-decoration: none; }
.fn-szuflada .woocommerce-mini-cart-item a.remove:hover { background: var(--fn-roz); }
.fn-szuflada .woocommerce-mini-cart__total { display: flex; justify-content: space-between; margin: 1rem 0 0.75rem; padding-top: 0.75rem; font-size: 1.125rem; }
.fn-szuflada .woocommerce-mini-cart__total .amount { color: var(--fn-zolty); font-weight: 700; }
.fn-szuflada .woocommerce-mini-cart__buttons { display: grid; gap: 0.5rem; margin: 0; }
.fn-szuflada .woocommerce-mini-cart__buttons .button { display: block; text-align: center; border-radius: 0.5rem; padding: 1rem 1.5rem; font: 500 1.125rem/1.2 var(--fn-font-tekst); text-decoration: none; background: var(--fn-malina-800); color: var(--fn-krem); }
.fn-szuflada .woocommerce-mini-cart__buttons .button.checkout { background: var(--fn-roz); }
.fn-szuflada .woocommerce-mini-cart__empty-message { padding: 1.25rem 0; text-align: center; }
.fn .st-buy-panel .single_add_to_cart_button.loading, .fn .fn-karta-koszyk .fn-przycisk-linii.loading { opacity: 0.6; cursor: progress; }
@media (prefers-reduced-motion: reduce) { .fn-szuflada-tlo, .fn-szuflada-panel { transition: none; } }
/* Szuflada koszyka mocno rozmyta: półprzezroczysta malina na rozmytej stronie. */
.fn-szuflada-panel { background: rgb(128 18 71 / 0.72); -webkit-backdrop-filter: blur(36px) saturate(160%); backdrop-filter: blur(36px) saturate(160%); border-left-color: rgb(255 251 247 / 0.25); }
.fn-szuflada-tlo { background: rgb(22 8 14 / 0.25); }
.fn-szuflada .woocommerce-mini-cart-item img { background: rgb(67 16 38 / 0.45); }
.fn-szuflada .woocommerce-mini-cart__buttons .button { background: rgb(67 16 38 / 0.55); }
/* Omnibus (moduł SafeHouse): najniższa cena z 30 dni przed obniżką, drobniej pod ceną. */
.fn .shouse-omnibus { margin-top: 0.35rem; font-family: var(--fn-font-tekst); font-size: 0.875rem; font-weight: 400; line-height: 1.4; opacity: 0.85; }
.fn .shouse-omnibus .amount { font-weight: 600; white-space: nowrap; }
/* Skład i informacje o suplemencie (inc/suplement.php): rozwijany blok pod panelem zakupu. */
.fn .fn-suplement { margin-top: 1.5rem; border-top: 1px solid rgb(255 251 247 / 0.25); border-bottom: 1px solid rgb(255 251 247 / 0.25); }
.fn .fn-suplement-tytul { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 0; cursor: pointer; list-style: none; font: 600 1.125rem/1.3 var(--fn-font-naglowki); }
.fn .fn-suplement-tytul::-webkit-details-marker { display: none; }
.fn .fn-suplement-tytul::after { content: "+"; font-size: 1.5rem; line-height: 1; transition: rotate 0.2s; }
.fn .fn-suplement[open] .fn-suplement-tytul::after { rotate: 45deg; }
.fn .fn-suplement-tytul:focus-visible { outline: 2px solid var(--fn-zolty); outline-offset: 2px; }
.fn .fn-suplement-lista { display: grid; gap: 0.85rem; margin: 0 0 1rem; }
.fn .fn-suplement-pole dt { font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.04em; opacity: 0.8; }
.fn .fn-suplement-pole dd { margin: 0.2rem 0 0; font-size: 1rem; line-height: 1.5; }
.fn .fn-suplement-brak { opacity: 0.65; font-style: italic; }
.fn .fn-suplement-tabela { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.fn .fn-suplement-tabela th, .fn .fn-suplement-tabela td { padding: 0.4rem 0.5rem 0.4rem 0; border-bottom: 1px solid rgb(255 251 247 / 0.15); text-align: left; }
.fn .fn-suplement-przypis { margin: 0.4rem 0 0; font-size: 0.8125rem; opacity: 0.8; }
.fn .fn-suplement-ostrzezenia { margin: 0 0 1rem; font-size: 0.875rem; line-height: 1.5; opacity: 0.85; }
@media (prefers-reduced-motion: reduce) { .fn .fn-suplement-tytul::after { transition: none; } }