/*
Theme Name: fls-cms
Text Domain: fls-cms
Version: 0.1.0
*/

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Barlow+Condensed:wght@600;700;800;900&display=swap");

:root {
	--fls-navy: #0b082f;
	--fls-navy-deep: #002d71;
	--fls-purple: #3f286e;
	--fls-purple-bright: #573895;
	--fls-teal: #09cdcc;
	--fls-mint: #9fe5da;
	--fls-cream: #f9f3e7;
	--fls-yellow: #eee202;
	--fls-text: #f5f5f5;
	--fls-muted: #9aa3c4;
	--fls-card: rgba(255, 255, 255, 0.05);
	--fls-card-border: rgba(255, 255, 255, 0.1);
	--fls-input-bg: rgba(255, 255, 255, 0.1);
	--fls-input-border: rgba(255, 255, 255, 0.2);

	/* WooCommerce's own forms.css reads these directly (falls back to
	   white bg / black text when undefined — that's why native
	   inputs/selects on My Account etc. were rendering unstyled). */
	--wc-form-color-background: var(--fls-input-bg);
	--wc-form-color-text: var(--fls-text);
	--wc-form-border-color: var(--fls-input-border);
	--wc-form-border-width: 1px;
	--wc-form-border-radius: 0.75rem;
}

* {
	box-sizing: border-box;
}

body {
	background: var(--fls-navy);
	color: var(--fls-text);
	font-family: "Montserrat", sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin: 0;
}

a {
	color: var(--fls-teal);
	text-decoration: none;
}

a:hover {
	color: var(--fls-mint);
}

h1, h2, h3, h4 {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--fls-text);
}

/* ---------- Layout shell ---------- */

#fls-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* ---------- Header: floating pill nav (mirrors fls-ui's Navbar.tsx) ---------- */

#fls-header {
	position: fixed;
	top: 1rem;
	left: 1rem;
	right: 1rem;
	z-index: 50;
	border-radius: 1rem;
	background: rgba(11, 8, 47, 0.85);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

#fls-header.fls-scrolled {
	background: rgba(11, 8, 47, 0.95);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
}

.fls-header-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 1rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
}

.fls-logo {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-shrink: 0;
}

/* Header's logo — matches fls-ui's Navbar.tsx (40px). The footer uses the
   same image at a larger size via .fls-footer-logo-mark below, matching
   Footer.tsx's Image + "FLS <year>" text treatment. */
.fls-header-logo-mark {
	width: 2.5rem;
	height: 2.5rem;
	object-fit: contain;
	flex-shrink: 0;
}

.fls-logo-text {
	display: flex;
	flex-direction: column;
	line-height: 1;
}

.fls-logo-fls {
	color: var(--fls-text);
	font-weight: 800;
	font-size: 0.85rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-family: "Montserrat", sans-serif;
}

.fls-logo-year {
	color: var(--fls-yellow);
	font-weight: 600;
	font-size: 0.6rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-family: "Montserrat", sans-serif;
}

.fls-header-nav {
	display: none;
	align-items: center;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.fls-header-nav a {
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--fls-muted);
}

.fls-header-nav a:hover {
	color: var(--fls-yellow);
}

.fls-header-cta {
	display: none;
}

.fls-cart-pill {
	display: inline-block;
	background: var(--fls-teal) !important;
	color: var(--fls-navy) !important;
	font-size: 0.85rem;
	font-weight: 800;
	padding: 0.6rem 1.25rem;
	border-radius: 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.3);
	white-space: nowrap;
}

.fls-cart-pill:hover {
	background: var(--fls-mint) !important;
}

.fls-hamburger {
	background: none;
	border: none;
	color: var(--fls-muted);
	padding: 0.5rem;
	border-radius: 0.5rem;
	cursor: pointer;
}

.fls-hamburger:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--fls-text);
}

.fls-hamburger svg {
	width: 1.5rem;
	height: 1.5rem;
}

.fls-mobile-menu {
	border-top: 1px solid var(--fls-card-border);
	padding: 1rem 1.5rem 1.5rem;
}

.fls-mobile-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.fls-mobile-menu a {
	color: var(--fls-muted);
	font-weight: 600;
	display: block;
}

.fls-mobile-menu .fls-cart-pill {
	text-align: center;
	margin-top: 0.5rem;
}

@media (min-width: 768px) {
	.fls-header-nav,
	.fls-header-cta {
		display: flex;
	}

	.fls-hamburger,
	.fls-mobile-menu {
		display: none;
	}
}

#fls-main {
	flex: 1;
	max-width: 1100px;
	width: 100%;
	margin: 0 auto;
	padding: 8rem 1.5rem 4rem;
}

/* ---------- Footer (mirrors fls-ui's Footer.tsx) ---------- */

#fls-footer {
	border-top: 1px solid var(--fls-card-border);
	background: var(--fls-navy);
}

.fls-footer-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 4rem 1.5rem 2rem;
}

.fls-footer-top {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 3rem;
	margin-bottom: 4rem;
}

.fls-footer-brand {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.fls-footer-brand .fls-logo {
	pointer-events: none;
}

.fls-footer-logo-mark {
	width: 3rem;
	height: 3rem;
	object-fit: contain;
	flex-shrink: 0;
}

.fls-footer-tagline {
	color: var(--fls-muted);
	font-size: 0.9rem;
	line-height: 1.6;
}

.fls-footer-org {
	color: #6b7492;
	font-size: 0.8rem;
	line-height: 1.6;
}

.fls-footer-org a {
	color: rgba(238, 226, 2, 0.8);
}

.fls-footer-org a:hover {
	color: var(--fls-yellow);
}

.fls-social-links {
	display: flex;
	gap: 0.75rem;
}

.fls-social-icon {
	width: 2.5rem;
	height: 2.5rem;
	border-radius: 0.75rem;
	background: rgba(255, 255, 255, 0.05);
	color: var(--fls-muted);
	display: flex;
	align-items: center;
	justify-content: center;
}

.fls-social-icon svg {
	width: 1.25rem;
	height: 1.25rem;
}

.fls-social-icon:hover {
	background: var(--fls-purple);
	color: var(--fls-text);
}

.fls-footer-col h3 {
	color: var(--fls-text);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin: 0 0 1rem;
}

.fls-footer-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

.fls-footer-col a {
	color: var(--fls-muted);
	font-size: 0.9rem;
	font-weight: 500;
}

.fls-footer-col a:hover {
	color: var(--fls-yellow);
}

.fls-footer-newsletter {
	background: rgba(63, 40, 110, 0.3);
	border: 1px solid rgba(63, 40, 110, 0.4);
	border-radius: 1rem;
	padding: 1.5rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2.5rem;
}

.fls-footer-newsletter-title {
	color: var(--fls-text);
	font-weight: 700;
	font-size: 0.9rem;
	margin: 0;
}

.fls-footer-newsletter-copy {
	color: var(--fls-muted);
	font-size: 0.85rem;
	margin: 0.15rem 0 0;
}

.fls-footer-newsletter form {
	display: flex;
	gap: 0.5rem;
}

.fls-footer-newsletter input {
	width: 14rem;
}

.fls-footer-bottom {
	border-top: 1px solid var(--fls-card-border);
	padding-top: 2rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.fls-footer-bottom p {
	color: #6b7492;
	font-size: 0.75rem;
	font-weight: 500;
	margin: 0;
}

@media (max-width: 900px) {
	.fls-footer-top {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.fls-footer-top {
		grid-template-columns: 1fr;
	}

	.fls-footer-newsletter {
		flex-direction: column;
		align-items: stretch;
	}

	.fls-footer-newsletter input {
		width: 100%;
	}
}

/* ---------- WooCommerce: breadcrumbs, notices ---------- */

.woocommerce-breadcrumb {
	color: var(--fls-muted);
	font-size: 0.85rem;
	margin-bottom: 2rem;
}

.woocommerce-breadcrumb a {
	color: var(--fls-muted);
}

.woocommerce-breadcrumb a:hover {
	color: var(--fls-yellow);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	background: var(--fls-card);
	border: 1px solid var(--fls-card-border);
	border-left: 3px solid var(--fls-teal);
	color: var(--fls-text);
	list-style: none;
	padding: 1rem 1.25rem;
	border-radius: 0.75rem;
	margin: 0 0 1.5rem;
}

/* WC's default icon (::before, WooCommerce icon font) is absolutely
   positioned assuming the default 3.5em left padding it reserves for it —
   the smaller padding above doesn't leave it room, so it sits on top of the
   text instead of beside it. Rest of the site's notices (Cart/Checkout
   blocks) don't use an icon either, so drop it here for consistency
   instead of re-reserving the gutter. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: none !important;
}

.woocommerce-error {
	border-left-color: #ff6b6b;
}

.woocommerce-message .button,
.woocommerce-info .button {
	margin-left: 1rem;
}

/* ---------- Buttons ---------- */

.button,
button,
input[type="submit"],
.single_add_to_cart_button,
.checkout-button,
.wp-element-button {
	display: inline-block;
	background: var(--fls-teal) !important;
	color: var(--fls-navy) !important;
	font-family: "Montserrat", sans-serif;
	font-weight: 800;
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 0.75rem;
	padding: 0.9rem 1.5rem;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.button:hover,
button:hover,
input[type="submit"]:hover,
.single_add_to_cart_button:hover,
.checkout-button:hover {
	background: var(--fls-mint) !important;
}

.button.disabled,
.button:disabled,
button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.wc-proceed-to-checkout .checkout-button {
	width: 100%;
	text-align: center;
}

/* ---------- Forms / inputs ---------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
textarea,
select {
	background: var(--fls-input-bg);
	border: 1px solid var(--fls-input-border);
	color: var(--fls-text);
	border-radius: 0.75rem;
	padding: 0.75rem 1rem;
	font-family: "Montserrat", sans-serif;
	font-size: 0.9rem;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--fls-teal);
}

label {
	color: var(--fls-muted);
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.quantity .qty {
	width: 4rem;
	text-align: center;
}

/* ---------- Single product ---------- */

.product_title {
	font-size: 2rem;
	margin: 0 0 1rem;
}

.woocommerce div.product .woocommerce-product-gallery img {
	border-radius: 1rem;
	border: 1px solid var(--fls-card-border);
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	color: var(--fls-yellow);
	font-size: 1.5rem;
	font-weight: 800;
}

.woocommerce div.product .stock {
	color: var(--fls-mint);
	font-weight: 600;
}

.woocommerce div.product .stock.out-of-stock {
	color: #ff6b6b;
}

.woocommerce div.product form.cart {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin: 1.5rem 0;
}

.posted_in,
.tagged_as {
	color: var(--fls-muted);
	font-size: 0.85rem;
}

.woocommerce-tabs {
	border-top: 1px solid var(--fls-card-border);
	margin-top: 2.5rem;
	padding-top: 1.5rem;
}

.woocommerce-tabs ul.tabs {
	list-style: none;
	display: flex;
	gap: 0.5rem;
	padding: 0;
	margin: 0 0 1.5rem;
}

.woocommerce-tabs ul.tabs li {
	background: var(--fls-card);
	border: 1px solid var(--fls-card-border);
	border-radius: 0.75rem 0.75rem 0 0;
}

.woocommerce-tabs ul.tabs li a {
	display: block;
	padding: 0.75rem 1.25rem;
	color: var(--fls-text);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.8rem;
}

.woocommerce-tabs ul.tabs li.active {
	border-bottom-color: var(--fls-yellow);
}

.woocommerce-Tabs-panel p,
.woocommerce-Tabs-panel li {
	color: var(--fls-text);
	line-height: 1.7;
}

/* ---------- Shop / product loop (category & search archives) ---------- */

ul.products {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 1.5rem;
	padding: 0;
}

ul.products li.product {
	background: var(--fls-card);
	border: 1px solid var(--fls-card-border);
	border-radius: 1rem;
	padding: 1.25rem;
	text-align: left;
}

ul.products li.product img {
	border-radius: 0.75rem;
	margin-bottom: 0.75rem;
}

ul.products li.product .woocommerce-loop-product__title {
	font-family: "Montserrat", sans-serif;
	text-transform: none;
	font-weight: 700;
	font-size: 1rem;
	color: var(--fls-text);
}

ul.products li.product .price {
	color: var(--fls-yellow);
	font-weight: 800;
}

/* ---------- Cart & checkout tables ---------- */

table.shop_table,
table.woocommerce-checkout-review-order-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--fls-card);
	border: 1px solid var(--fls-card-border);
	border-radius: 1rem;
	overflow: hidden;
}

table.shop_table th,
table.shop_table td,
table.woocommerce-checkout-review-order-table th,
table.woocommerce-checkout-review-order-table td {
	padding: 1rem;
	border-bottom: 1px solid var(--fls-card-border);
	text-align: left;
}

table.shop_table th {
	color: var(--fls-muted);
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
}

.cart-collaterals .cart_totals {
	background: var(--fls-card);
	border: 1px solid var(--fls-card-border);
	border-radius: 1rem;
	padding: 1.5rem;
	margin-top: 1.5rem;
}

.woocommerce-form-coupon-toggle .woocommerce-info {
	margin-bottom: 1rem;
}

#customer_details .woocommerce-billing-fields,
#customer_details .woocommerce-shipping-fields,
#order_review {
	background: var(--fls-card);
	border: 1px solid var(--fls-card-border);
	border-radius: 1rem;
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

/* Classic (non-Blocks) payment method list — used on order-pay ("Pay for
   order") and add-payment-method, which never went through a Blocks-era
   redesign like /checkout/ did. WC's own .payment_box ships a hardcoded
   light background (#dcd7e2) meant for a light theme, which reads as a
   glaring unstyled box inside this theme's already-dark #order_review. */
ul.payment_methods {
	border-bottom-color: var(--fls-card-border) !important;
}

ul.payment_methods li {
	color: var(--fls-text);
}

div.payment_box {
	background: var(--fls-navy) !important;
	color: var(--fls-text) !important;
	border-radius: 0.75rem !important;
	border: 1px solid var(--fls-card-border);
}

div.payment_box::before {
	border-color: transparent transparent var(--fls-navy) !important;
}

div.payment_box a {
	color: var(--fls-teal);
}

.form-row label {
	display: block;
	margin-bottom: 0.4rem;
}

.form-row input,
.form-row select,
.form-row textarea {
	width: 100%;
}

/* ---------- Order received / thank-you + ticket codes ---------- */

.woocommerce-order-received .woocommerce-thankyou-order-received {
	color: var(--fls-mint);
	font-size: 1.1rem;
	font-weight: 700;
}

.woocommerce-order-overview {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	padding: 0;
	background: var(--fls-card);
	border: 1px solid var(--fls-card-border);
	border-radius: 1rem;
	margin: 1.5rem 0;
}

.woocommerce-order-overview li {
	padding: 1.5rem;
}

.woocommerce-order-overview li strong {
	display: block;
	color: var(--fls-yellow);
	font-size: 1rem;
	margin-top: 0.25rem;
}

.fls-ticket-codes {
	background: var(--fls-card);
	border: 1px solid var(--fls-teal);
	border-radius: 1rem;
	padding: 1.5rem 2rem;
	margin: 2rem 0;
}

.fls-ticket-codes h2 {
	color: var(--fls-teal);
	font-size: 1.25rem;
	margin-top: 0;
}

.fls-ticket-codes ul {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.fls-ticket-codes code {
	display: inline-block;
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid var(--fls-card-border);
	color: var(--fls-yellow);
	font-size: 1.1rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 0.6rem 1rem;
	border-radius: 0.5rem;
}

/* ---------- My account ---------- */

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 2rem;
}

.woocommerce-MyAccount-navigation a {
	display: block;
	background: var(--fls-card);
	border: 1px solid var(--fls-card-border);
	border-radius: 0.75rem;
	padding: 0.6rem 1.1rem;
	font-size: 0.85rem;
	font-weight: 600;
	text-transform: uppercase;
	color: var(--fls-text);
}

.woocommerce-MyAccount-navigation .is-active a {
	color: var(--fls-navy);
	background: var(--fls-teal);
}

.woocommerce-MyAccount-content .form-row {
	margin-bottom: 1.25rem !important;
}

.woocommerce-MyAccount-content fieldset {
	background: var(--fls-card);
	border: 1px solid var(--fls-card-border) !important;
	border-radius: 1rem;
	padding: 1.5rem;
	margin: 1.5rem 0;
}

.woocommerce-MyAccount-content fieldset legend {
	color: var(--fls-teal);
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	padding: 0 0.5rem;
}

.woocommerce-MyAccount-content table.shop_table td,
.woocommerce-MyAccount-content table.shop_table th {
	color: var(--fls-text);
}

.woocommerce-MyAccount-content a {
	color: var(--fls-teal);
}

.woocommerce-Address-title h3 {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}

/* ---------- WooCommerce Cart/Checkout Blocks ----------
   The default Cart/Checkout pages use WC's block-based templates, not the
   classic shortcode markup styled above — different class namespace
   (.wc-block-*), rendered client-side, and WC's own stylesheet ships fairly
   specific selectors, so plain element selectors above lose the cascade.
   !important here is deliberate: matching WC Blocks' own specificity without
   it means every rule below would need to out-specificity a stylesheet we
   don't control and that can change class order between versions. */

.wc-block-components-text-input input,
.wc-blocks-components-select__select,
.wc-block-components-address-form input,
.wc-block-components-textarea {
	background: var(--fls-input-bg) !important;
	border: 1px solid var(--fls-input-border) !important;
	color: var(--fls-text) !important;
	border-radius: 0.75rem !important;
}

.wc-block-components-text-input label,
.wc-blocks-components-select__label {
	color: var(--fls-muted) !important;
}

.wc-blocks-components-select__container svg {
	fill: var(--fls-muted);
}

/* Only the outermost sidebar gets the card treatment (bg/border/radius).
   Every row inside it (the product line item, "Add coupons", Subtotal,
   Total) used to get the exact same card treatment individually, which
   read as boxes-nested-inside-boxes. They're flat now, separated by a
   plain divider line instead — see the border-bottom rule further down. */
.wc-block-components-sidebar,
.wc-block-checkout__sidebar {
	background: var(--fls-card) !important;
	border: 1px solid var(--fls-card-border) !important;
	border-radius: 1rem !important;
	color: var(--fls-text) !important;
}

.wc-block-components-sidebar *,
.wc-block-components-order-summary * {
	color: var(--fls-text) !important;
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__description {
	color: var(--fls-muted) !important;
}

.wc-block-components-product-name {
	color: var(--fls-teal) !important;
}

.wc-block-components-formatted-money-amount {
	color: var(--fls-yellow) !important;
	font-weight: 700;
}

.wc-block-components-radio-control__option {
	background: var(--fls-card) !important;
	border: 1px solid var(--fls-card-border) !important;
	border-radius: 0.75rem !important;
	color: var(--fls-text) !important;
}

.wc-block-components-radio-control__option--checked {
	border-color: var(--fls-teal) !important;
}

/* Payment/shipping method radio dot — WC's own default is a plain white
   circle with a black checked-dot, which reads as broken/unstyled against
   this theme's dark cards. */
.wc-block-components-radio-control__input {
	background: var(--fls-input-bg) !important;
	border-color: var(--fls-card-border) !important;
}

.wc-block-components-radio-control__input:checked {
	border-color: var(--fls-teal) !important;
}

.wc-block-components-radio-control__input:checked::before {
	background: var(--fls-teal) !important;
}

/* Method description text (e.g. "Pay quick and easy via Monri") — WC ships
   this with zero padding of its own, so it sits flush against the option
   card's edges instead of matching the option label's own padding above it. */
.wc-block-components-radio-control-accordion-content {
	padding: 1rem 1.25rem;
}

/* Autofilled inputs — Chrome/Safari force their own white/light background
   via an internal UA style that normal `background` CSS can't override;
   the box-shadow inset trick is the standard workaround. Also fixes text
   color, since autofill forces that too. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--fls-text) !important;
	-webkit-box-shadow: 0 0 0 1000px var(--fls-input-bg) inset !important;
	box-shadow: 0 0 0 1000px var(--fls-input-bg) inset !important;
	transition: background-color 5000s ease-in-out 0s;
}

/* Checkbox — this theme's own generic ".wc-block-components-address-form
   input" rule below (0.75rem radius, for text inputs) also matches this
   checkbox and outranks a same-!important single-class selector on
   specificity, so it wins over a plain .wc-block-components-checkbox__input
   rule. At a 20px box, 0.75rem is over 50% of the control and renders as a
   near-circle instead of a rounded square — add [type="checkbox"] so this
   rule is specific enough to actually win. */
.wc-block-components-checkbox__input[type="checkbox"] {
	border-radius: 5px !important;
}

/* "I'm purchasing as a company" toggle — raised into its own bordered row
   (like the payment method cards below it) instead of sitting as a plain
   inline checkbox, so it reads as a deliberate section toggle rather than
   a buried option. Scoped by the field's own generated wrapper class so
   this doesn't affect the "Add a note" / terms checkboxes elsewhere. */
.wc-block-components-address-form__fls-billing_type {
	background: var(--fls-card);
	border: 1px solid var(--fls-card-border);
	border-radius: 0.75rem;
	padding: 0.875rem 1.125rem;
	margin-top: 0.75rem !important;
}

.wc-block-components-address-form__fls-billing_type label {
	display: flex;
	align-items: center;
	gap: 0.625rem;
}

/* Contact section — splits the two company fields into a side-by-side pair
   once the checkbox above reveals them, instead of two full-width stacked
   rows. Grid (rather than per-field flex-basis) so unrelated siblings
   (email, the checkbox row, the guest-checkout note) stay full width
   without needing their own override. */
#contact.wc-block-components-address-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem 1rem;
}

#contact.wc-block-components-address-form > * {
	grid-column: 1 / -1;
	margin-top: 0 !important;
}

#contact .wc-block-components-address-form__fls-company_legal_name,
#contact .wc-block-components-address-form__fls-company_id_number {
	grid-column: span 1;
}

@media (max-width: 640px) {
	#contact .wc-block-components-address-form__fls-company_legal_name,
	#contact .wc-block-components-address-form__fls-company_id_number {
		grid-column: 1 / -1;
	}
}

.wc-block-components-notice-banner {
	background: var(--fls-card) !important;
	border: 1px solid var(--fls-card-border) !important;
	color: var(--fls-text) !important;
	border-radius: 0.75rem !important;
}

.wc-block-components-notice-banner.is-error {
	border-color: #ff6b6b !important;
}

.wc-block-components-notice-banner.is-success {
	border-color: var(--fls-teal) !important;
}

.wc-block-components-notice-banner.is-info {
	border-color: var(--fls-yellow) !important;
}

/* Toast/snackbar notices (coupon applied, item removed, etc.) — WC renders
   these through the same .wc-block-components-notice-banner markup inside a
   fixed-position stack (.wc-block-components-notice-snackbar-list), so the
   rules above already theme them; this just gives the floating stack its
   own shadow/weight so it reads clearly as a toast over page content. */
.wc-block-components-notice-snackbar-list .wc-block-components-notice-banner {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
}

.wc-block-grid__product-title {
	color: var(--fls-text) !important;
}

.wc-block-grid__product-price {
	color: var(--fls-yellow) !important;
}

.wc-block-grid__product .wp-block-button__link,
.wc-block-grid__product .add_to_cart_button {
	background: var(--fls-teal) !important;
	color: var(--fls-navy) !important;
}

.wc-block-cart-item__product-image img,
.wc-block-components-product-image img {
	border-radius: 0.75rem;
}

.wc-block-components-quantity-selector {
	border: 1px solid var(--fls-input-border) !important;
	background: var(--fls-input-bg) !important;
}

.wc-block-components-quantity-selector__input {
	background: transparent !important;
	color: var(--fls-text) !important;
}

/* Cart item rows — image/name/price/description/qty were all rendering
   flush against each other with no breathing room. */
.wc-block-cart-items__row td {
	padding: 1.5rem 1rem !important;
	vertical-align: top;
}

.wc-block-cart-items__row {
	border-bottom: 1px solid var(--fls-card-border);
}

.wc-block-components-product-name {
	display: inline-block;
	margin-bottom: 0.5rem !important;
	font-weight: 700;
}

.wc-block-components-product-metadata {
	margin: 0.5rem 0 !important;
	color: var(--fls-muted) !important;
	font-size: 0.85rem;
}

.wc-block-components-quantity-selector {
	margin-top: 0.75rem !important;
}

/* Cart totals sidebar — rows (product line item, "Add coupons", Subtotal,
   Total) are flat now (see the .wc-block-components-sidebar rule above),
   separated by a plain divider line instead of each being its own card. */
.wc-block-components-totals-wrapper {
	/* Vertical only — horizontal inset already comes from the sidebar's own
	   padding; adding more here just double-inset the row unnecessarily
	   now that each row isn't its own bordered card. */
	padding: 0.625rem 0 !important;
	border-bottom: 1px solid var(--fls-card-border);
}

.wc-block-components-totals-wrapper:has(.wc-block-components-totals-footer-item) {
	border-bottom: none;
}

.wc-block-components-sidebar {
	padding: 1.25rem 1.5rem !important;
}

/* WooCommerce's own default styling for this block (not something we
   added) draws a second, tighter border+radius just inside the sidebar's
   own card border — reading as a box nested inside a box. */
.wp-block-woocommerce-checkout-order-summary-block {
	border: none !important;
	border-radius: 0 !important;
}

.wc-block-cart__submit-container {
	margin-top: 1.25rem !important;
}

.wc-block-cart__submit-button {
	width: 100%;
	text-align: center;
}

/* These come after the ".wc-block-components-sidebar *" and generic
   ".button, button" rules above (same specificity — !important ties break
   on source order) specifically to win against them: the sidebar-wide
   text-color rule was turning the yellow checkout button's own text back
   to off-white, and the generic button rule was turning the quantity
   stepper's -/+ and the remove-item icon into full yellow CTA pills. */

.wc-block-cart__submit-button,
.wc-block-cart__submit-button * {
	color: var(--fls-navy) !important;
}

.wc-block-components-quantity-selector__button,
.wc-block-cart-item__remove-link,
.show-password-input {
	background: transparent !important;
	color: var(--fls-muted) !important;
	border: none !important;
	padding: 0.4rem 0.6rem !important;
	font-weight: 400 !important;
	text-transform: none !important;
	border-radius: 0.5rem !important;
}

.wc-block-components-quantity-selector__button:hover,
.wc-block-cart-item__remove-link:hover,
.show-password-input:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	color: var(--fls-text) !important;
}

.show-password-input {
	position: absolute;
	right: 0.25rem;
	top: 50%;
	transform: translateY(-50%);
}

/* Native <select> (Country/Region, State) still rendered a solid white box
   even with appearance:none and the same --fls-input-bg used successfully
   on text inputs above. Root cause: --fls-input-bg is a translucent white
   (rgba(255,255,255,0.1)) meant to composite over the dark page behind it —
   that works for <input>/<textarea>, but a <select> paints its own opaque
   white canvas first, so the same translucent color just nets out to
   near-solid white on top of it. Fix: a solid color equivalent to what
   --fls-input-bg looks like once actually composited over --fls-navy,
   used only here where the translucent version doesn't render correctly. */
.wc-blocks-components-select__select {
	appearance: none !important;
	-webkit-appearance: none !important;
	background-color: #212144 !important;
}

/* Discount/Fee are empty .wc-block-components-totals-wrapper cards when no
   coupon or fee is applied — without content they still render as visible
   empty rounded boxes between Subtotal and Total. */
.wc-block-components-totals-wrapper:empty {
	display: none !important;
}

/* Order summary line item — WC Blocks' own layout put the quantity badge
   as a plain unstyled circle floating over the thumbnail, gave the
   placeholder product image square corners, and put no cap on the title's
   font size. It also sat the (narrow) image and the title/price/description
   side by side in one row, squeezing the text column so much it wrapped
   across most of the sidebar's height.
   Fix: the item's three direct children are the image, the description,
   and the total price. flex-wrap + giving the image flex-basis:100% forces
   it onto its own row (nothing else fits next to a 100%-wide item), while
   description + total-price — being the only two left — wrap together
   onto a second row and share it side by side, same as before. No HTML
   here to reorder (WC Blocks renders this via React), so this is a
   flex-wrap trick rather than a straightforward flex-direction change. */
.wc-block-components-order-summary-item {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 0.5rem 0.875rem !important;
	align-items: flex-start !important;
}

.wc-block-components-order-summary-item__image {
	position: relative !important;
	flex: 0 0 100% !important;
}

.wc-block-components-order-summary-item__image img {
	border-radius: 0.5rem !important;
	display: block;
}

.wc-block-components-order-summary-item__quantity {
	position: absolute !important;
	top: -0.5rem !important;
	right: -0.5rem !important;
	background: var(--fls-yellow) !important;
	color: var(--fls-navy) !important;
	border-radius: 999px !important;
	min-width: 1.25rem;
	height: 1.25rem;
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	font-weight: 700;
	line-height: 1;
}

.wc-block-components-order-summary-item__description {
	flex: 1 1 auto;
	min-width: 0; /* lets the title wrap within its flex column instead of forcing the row wider */
}

.wc-block-components-order-summary-item__total-price {
	flex-shrink: 0;
}

.wc-block-components-order-summary-item .wc-block-components-product-name {
	font-size: 0.9rem !important;
	line-height: 1.4 !important;
}

/* Coupon row (expanded "Add coupons" panel) — two problems compounding
   into "too much padding": the input uses WC's floating-label pattern
   (24px top padding, reserving room for a label that floats up inside the
   input), sized for the main form's spacious fields but way too tall for
   this compact inline row; and the "Apply" button's disabled state was
   just the site-wide yellow button at 50% opacity, which nets out to a
   muddy olive on this dark card rather than reading as "disabled". */
.wc-block-components-totals-coupon__form {
	align-items: flex-end !important;
}

.wc-block-components-totals-coupon__input {
	display: flex !important;
	flex-direction: column-reverse !important;
	gap: 0.25rem !important;
}

.wc-block-components-totals-coupon__input input {
	padding: 0.75rem 1rem !important;
}

.wc-block-components-totals-coupon__input label {
	position: static !important;
	transform: none !important;
	color: var(--fls-muted) !important;
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.04em !important;
}

/* WC's own "contained" button variant sets white text by default (a
   higher-specificity rule than our generic `button` color override
   further up), so the enabled Apply button rendered white-on-yellow. */
.wc-block-components-totals-coupon__button,
.wc-block-components-totals-coupon__button .wc-block-components-button__text {
	color: var(--fls-navy) !important;
}

.wc-block-components-totals-coupon__button:disabled,
.wc-block-components-totals-coupon__button[aria-disabled="true"] {
	background: var(--fls-input-bg) !important;
	color: var(--fls-muted) !important;
	opacity: 1 !important;
}

.wc-block-components-totals-coupon__button:disabled .wc-block-components-button__text,
.wc-block-components-totals-coupon__button[aria-disabled="true"] .wc-block-components-button__text {
	color: var(--fls-muted) !important;
}

/* ---------- Standalone content/archive pages (Gallery/Speakers archive,
   About the Organization, Legal Pages) — linked from the WP-editable
   footer menu, rendered by WordPress itself rather than fls-ui. ---------- */

.fls-page-header {
	max-width: 800px;
	margin: 0 auto 3rem;
	text-align: center;
}

.fls-page-eyebrow {
	color: var(--fls-teal);
	font-size: 0.8rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0 0 0.75rem;
}

.fls-page-header h1 {
	font-size: clamp(2rem, 4vw, 3rem);
	margin: 0 0 1rem;
}

.fls-page-intro {
	color: var(--fls-muted);
	font-size: 1rem;
	line-height: 1.7;
}

.fls-empty-state {
	text-align: center;
	color: var(--fls-muted);
	background: var(--fls-card);
	border: 1px solid var(--fls-card-border);
	border-radius: 1rem;
	padding: 3rem 1.5rem;
}

/* Photo grid (Gallery Archive) */

.fls-photo-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1rem;
}

@media (min-width: 768px) {
	.fls-photo-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1024px) {
	.fls-photo-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.fls-photo-grid-item {
	aspect-ratio: 1;
	border-radius: 1rem;
	overflow: hidden;
	border: 1px solid var(--fls-card-border);
	background: var(--fls-card);
}

.fls-photo-grid-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Speaker grid (Speakers Archive) */

.fls-page-section-heading {
	font-size: 1.5rem;
	font-weight: 800;
	margin: 3rem 0 1.5rem;
}

.fls-page-section-heading:first-of-type {
	margin-top: 0;
}

.fls-speaker-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.fls-speaker-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.fls-speaker-card {
	background: var(--fls-card);
	border: 1px solid var(--fls-card-border);
	border-radius: 1rem;
	padding: 1.5rem;
	text-align: center;
}

.fls-speaker-photo {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	overflow: hidden;
	margin: 0 auto 1rem;
	background: var(--fls-input-bg);
}

.fls-speaker-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* WordPress's "medium" size isn't hard-cropped to a square, so uploads
	   land here in whatever aspect ratio they were shot in; a dead-center
	   crop on a portrait photo reliably slices off the top of the face.
	   Biasing toward the top keeps the face in frame for the vast majority
	   of headshots at the cost of a bit more shoulder/torso getting cropped
	   at the bottom, which is the better trade-off for a small avatar. */
	object-position: 50% 20%;
}

.fls-speaker-card h3 {
	font-size: 1rem;
	margin: 0 0 0.25rem;
	text-transform: none;
}

.fls-speaker-role {
	color: var(--fls-muted);
	font-size: 0.85rem;
	margin: 0;
}

/* Long-form content pages (Content Page template) */

.fls-content-page {
	max-width: 720px;
	margin: 0 auto;
	color: var(--fls-text);
	line-height: 1.75;
}

.fls-content-page h2 {
	font-size: 1.5rem;
	margin: 2.5rem 0 1rem;
}

.fls-content-page h2:first-child {
	margin-top: 0;
}

.fls-content-page p {
	margin: 0 0 1.25rem;
	color: var(--fls-muted);
}

.fls-content-page strong {
	color: var(--fls-text);
}

.fls-content-page ul {
	margin: 0 0 1.25rem;
	padding-left: 1.5rem;
	color: var(--fls-muted);
}

.fls-content-page li {
	margin-bottom: 0.5rem;
}

.fls-content-page a {
	color: var(--fls-teal);
}