/* Filter: colour families instead of the 80+ individual shades.
   New file name on purpose: the hosting edge cache serves stale CSS. */

.filter-families { display: grid; gap: 4px; }
.filter-family { display: flex; align-items: center; gap: 11px; padding: 5px 0; font-size: 13px; }
.filter-family .filter-swatch { width: 15px; height: 15px; }
.filter-family small { margin-left: auto; color: var(--muted); font-size: 11px; }
.filter-family:hover > span:not(.filter-swatch) { text-decoration: underline; text-underline-offset: 4px; }
.filter-family.is-selected .filter-swatch { outline: 1px solid var(--ink); outline-offset: 3px; }
.filter-family.is-selected > span:not(.filter-swatch) { text-decoration: underline; text-underline-offset: 4px; }

/* Checkout aside: keep the order button on screen — the card scrolls and the
   button stays pinned at its bottom. Payment tiles a touch smaller. */
@media (min-width: 901px) {
	.flo-checkout-order { display: flex; flex-direction: column; position: sticky; top: 30px; bottom: auto; max-height: calc(100svh - 60px); overflow: hidden; }
	#order_review { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
	#order_review > .shop_table { display: block; overflow-y: auto; flex: 0 1 auto; scrollbar-width: thin; }
	#payment { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
	#payment ul.wc_payment_methods { flex: 0 1 auto; overflow-y: auto; scrollbar-width: thin; }
	#payment div.form-row.place-order { flex: 0 0 auto; margin: 10px -24px -24px; padding: 10px 24px 24px; background: var(--checkout-paper); border-top: 1px solid #dddfd5; }
}
.flo-checkout-order .shop_table td { padding: 6px 0; }
.flo-checkout-order .shop_table tfoot th, .flo-checkout-order .shop_table tfoot td { padding: 6px 0; }
#payment li.wc_payment_method { padding: 8px 12px; gap: 10px; }
#payment li.wc_payment_method > label img { width: 32px; height: 17px; }
#payment li.wc_payment_method .payment_box { font-size: 11px; }
.flo-checkout-order .woocommerce-terms-and-conditions { max-height: 130px; padding: 12px; }

/* Checkout: floating place-order CTA shown while the real button is off-screen. */
.flo-checkout-mini-cta { position: fixed; z-index: 90; right: 22px; bottom: 22px; display: flex; align-items: center; gap: 16px; padding: 12px 12px 12px 18px; background: rgba(255,255,255,.96); border: 1px solid #e3dbd2; border-radius: 16px; box-shadow: 0 12px 34px rgba(58,44,34,.18); transform: translateY(140%); opacity: 0; visibility: hidden; transition: transform .28s ease, opacity .28s ease, visibility .28s; }
.flo-checkout-mini-cta.is-visible { transform: none; opacity: 1; visibility: visible; }
.flo-checkout-mini-cta__total { font-size: 13px; color: #6f6259; white-space: nowrap; }
.flo-checkout-mini-cta__total .amount, .flo-checkout-mini-cta__total strong { font-weight: 600; color: #2f241d; }
.flo-checkout-mini-cta__button { appearance: none; border: 0; border-radius: 999px; background: #2f241d; color: #fdfaf6; font-family: inherit; font-size: 13px; font-weight: 600; letter-spacing: .02em; padding: 11px 20px; cursor: pointer; white-space: nowrap; }
.flo-checkout-mini-cta__button:hover { background: #b78a5f; }
@media (max-width: 900px) {
	.flo-checkout-mini-cta { left: 10px; right: 10px; bottom: 10px; justify-content: space-between; padding: 10px 10px 10px 14px; border-radius: 14px; }
}