/*!
 * FIRST-Network Store - WooCommerce notices in the site's own language.
 * Replaces the default green/blue/red WooCommerce bars everywhere.
 */
:root{--fn-navy:#16253A;--fn-navy-deep:#101D2E;--fn-gold:#D2A64A;--fn-gold-deep:#9C7A28;--fn-green:#3F5E54;--fn-ivory:#FBF8F1;--fn-ink:#1B2836;--fn-muted:#66707D;--fn-line:rgba(22,37,58,.11)}

/* ---------- classic notices ---------- */
.woocommerce-notices-wrapper:empty{display:none}
.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
ul.woocommerce-error li{
	font-family:'Plus Jakarta Sans',sans-serif !important;
	font-size:.92rem !important;
	font-weight:600 !important;
	line-height:1.5 !important;
	color:var(--fn-ink) !important;
	background:#fff !important;
	border:1px solid var(--fn-line) !important;
	border-radius:18px !important;
	box-shadow:0 18px 44px -34px rgba(16,29,46,.5) !important;
	padding:16px 20px 16px 52px !important;
	margin:0 0 18px !important;
	list-style:none !important;
	position:relative !important;
	display:flex !important;
	align-items:center !important;
	gap:14px !important;
	flex-wrap:wrap;
}
.woocommerce-message{border-left:4px solid var(--fn-green) !important}
.woocommerce-info{border-left:4px solid var(--fn-gold) !important}
.woocommerce-error{border-left:4px solid #b4472f !important}

/* swap WooCommerce's tick/cross glyph for a FIRST-Network dot */
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before{
	content:"" !important;
	position:absolute !important;
	left:22px !important;
	top:50% !important;
	transform:translateY(-50%) !important;
	width:10px !important;
	height:10px !important;
	border-radius:50% !important;
	background:var(--fn-green) !important;
	font-family:inherit !important;
	font-size:0 !important;
	margin:0 !important;
	padding:0 !important;
	animation:none !important;
	border:0 !important;
}
.woocommerce-info::before{background:var(--fn-gold) !important}
.woocommerce-error::before{background:#b4472f !important}

/* the inline button WooCommerce puts inside a notice */
.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button,
.woocommerce-message a.wc-forward,
.woocommerce-info a.wc-forward{
	margin-left:auto !important;
	order:9 !important;
	display:inline-flex !important;
	align-items:center !important;
	justify-content:center !important;
	background:var(--fn-navy) !important;
	color:#fff !important;
	border:0 !important;
	border-radius:100px !important;
	padding:10px 20px !important;
	font-size:.85rem !important;
	font-weight:800 !important;
	text-decoration:none !important;
	box-shadow:none !important;
	float:none !important;
	line-height:1.1 !important;
}
.woocommerce-message .button:hover,
.woocommerce-info .button:hover,
.woocommerce-message a.wc-forward:hover{background:var(--fn-navy-deep) !important}

/* error lists keep one card, not one per line */
ul.woocommerce-error{flex-direction:column !important;align-items:flex-start !important;gap:6px !important}
ul.woocommerce-error li{background:none !important;border:0 !important;box-shadow:none !important;padding:0 !important;margin:0 !important;border-radius:0 !important;display:list-item !important}
ul.woocommerce-error li::before{display:none !important}
ul.woocommerce-error li strong{color:var(--fn-navy) !important}

/* ---------- block-based notices (checkout / cart blocks) ---------- */
.wc-block-components-notice-banner{
	font-family:'Plus Jakarta Sans',sans-serif !important;
	background:#fff !important;
	border:1px solid var(--fn-line) !important;
	border-radius:18px !important;
	box-shadow:0 18px 44px -34px rgba(16,29,46,.5) !important;
	color:var(--fn-ink) !important;
	padding:16px 20px !important;
	margin:0 0 18px !important;
	font-size:.92rem !important;
}
.wc-block-components-notice-banner.is-success{border-left:4px solid var(--fn-green) !important}
.wc-block-components-notice-banner.is-info{border-left:4px solid var(--fn-gold) !important}
.wc-block-components-notice-banner.is-error{border-left:4px solid #b4472f !important}
.wc-block-components-notice-banner > svg{fill:var(--fn-green) !important;background:none !important}
.wc-block-components-notice-banner.is-info > svg{fill:var(--fn-gold) !important}
.wc-block-components-notice-banner.is-error > svg{fill:#b4472f !important}
.wc-block-components-notice-banner .wc-block-components-button{
	background:var(--fn-navy) !important;color:#fff !important;border-radius:100px !important;
	padding:10px 20px !important;font-weight:800 !important;
}

/* ---------- store notice ---------- */
.woocommerce-store-notice,p.demo_store{
	background:var(--fn-navy) !important;color:#fff !important;
	font-family:'Plus Jakarta Sans',sans-serif !important;font-weight:700 !important;
}
.woocommerce-store-notice a{color:var(--fn-gold) !important}

@media(max-width:600px){
	.woocommerce-message,.woocommerce-error,.woocommerce-info{padding:14px 16px 14px 44px !important;font-size:.88rem !important}
	.woocommerce-message::before,.woocommerce-error::before,.woocommerce-info::before{left:18px !important}
	.woocommerce-message .button,.woocommerce-info .button,.woocommerce-message a.wc-forward{margin-left:0 !important;width:100%}
}
/* ================================================================
 * Block store-notices - this site renders notices as
 * .wc-block-components-notice-banner, not the classic markup.
 * ================================================================ */
.wc-block-store-notices,.wp-block-woocommerce-store-notices{max-width:1132px;margin-left:auto;margin-right:auto;padding:0 22px}

.wc-block-components-notice-banner{
	display:flex !important;align-items:center !important;gap:14px !important;
	padding:15px 20px 15px 22px !important;
	border-radius:18px !important;
	border:1px solid var(--fn-line) !important;
	background:#fff !important;
	box-shadow:0 18px 44px -34px rgba(16,29,46,.5) !important;
	color:var(--fn-ink) !important;
	font-family:'Plus Jakarta Sans',sans-serif !important;
	font-size:.92rem !important;font-weight:600 !important;
	margin:0 0 20px !important;
}

/* drop WooCommerce's tick / warning glyph for the FIRST-Network dot */
.wc-block-components-notice-banner > svg{display:none !important}
.wc-block-components-notice-banner::before{
	content:"";flex:none;width:10px;height:10px;border-radius:50%;
	background:var(--fn-green);
}
.wc-block-components-notice-banner.is-info::before{background:var(--fn-gold)}
.wc-block-components-notice-banner.is-error::before{background:#b4472f}
.wc-block-components-notice-banner.is-warning::before{background:var(--fn-gold)}

.wc-block-components-notice-banner__content{
	flex:1 !important;display:flex !important;align-items:center !important;
	gap:16px !important;flex-wrap:wrap !important;padding:0 !important;
	font-size:.92rem !important;color:var(--fn-ink) !important;
}
.wc-block-components-notice-banner__content > .button,
.wc-block-components-notice-banner__content > a.wc-forward,
.wc-block-components-notice-banner a.button{
	margin-left:auto !important;
	display:inline-flex !important;align-items:center !important;justify-content:center !important;
	background:var(--fn-navy) !important;color:#fff !important;
	border:0 !important;border-radius:100px !important;
	padding:10px 22px !important;
	font-size:.85rem !important;font-weight:800 !important;
	text-decoration:none !important;box-shadow:none !important;
	line-height:1.1 !important;white-space:nowrap;
}
.wc-block-components-notice-banner__content > .button:hover,
.wc-block-components-notice-banner a.button:hover{background:var(--fn-navy-deep) !important}

.wc-block-components-notice-banner ul{margin:0 !important;padding-left:18px !important}
.wc-block-components-notice-banner li{margin:0 !important}

@media(max-width:600px){
	.wc-block-components-notice-banner{align-items:flex-start !important;padding:14px 16px !important}
	.wc-block-components-notice-banner::before{margin-top:6px}
	.wc-block-components-notice-banner__content > .button,
	.wc-block-components-notice-banner a.button{margin-left:0 !important;width:100%}
}
/* WooCommerce's own block CSS out-specifies the rule above for background,
   colour and padding, so restate them with more weight. */
.wc-block-store-notices .wc-block-components-notice-banner .wc-block-components-notice-banner__content a.button,
.wc-block-store-notices .wc-block-components-notice-banner .wc-block-components-notice-banner__content a.wc-forward,
body .wc-block-components-notice-banner .wc-block-components-notice-banner__content > a{
	background-color:var(--fn-navy) !important;
	background-image:none !important;
	color:#fff !important;
	padding:11px 22px !important;
	border:0 !important;
	border-radius:100px !important;
	font-size:.85rem !important;
	font-weight:800 !important;
	text-decoration:none !important;
	line-height:1.1 !important;
	min-height:0 !important;
	height:auto !important;
	flex:none !important;
}
.wc-block-store-notices .wc-block-components-notice-banner .wc-block-components-notice-banner__content a.button:hover,
body .wc-block-components-notice-banner .wc-block-components-notice-banner__content > a:hover{
	background-color:var(--fn-navy-deep) !important;color:#fff !important;
}
/* something in the block CSS dims the notice link */
.wc-block-components-notice-banner a,
.wc-block-components-notice-banner .wc-block-components-notice-banner__content a{opacity:1 !important}

/* ================================================================
 * Clear the fixed site header.
 *
 * The header template part is position:fixed with a zero-height
 * placeholder, so it does not occupy space in the document flow.
 * Every other page on the site compensates because its first section
 * carries its own top padding; the WooCommerce templates do not, so
 * breadcrumbs rendered underneath the header pill.
 * ================================================================ */
body.woocommerce .woocommerce-breadcrumb,
body.woocommerce-page .woocommerce-breadcrumb,
body.woocommerce .wp-block-woocommerce-breadcrumbs,
body.woocommerce-page .wp-block-woocommerce-breadcrumbs,
body.single-product .woocommerce-breadcrumb,
body.single-product .wp-block-woocommerce-breadcrumbs{
	padding-top:92px !important;
}

/* anchors and focus jumps should not land under the header either */
body.woocommerce [id],
body.woocommerce-page [id]{scroll-margin-top:140px}

@media(max-width:820px){
	body.woocommerce .woocommerce-breadcrumb,
	body.woocommerce-page .woocommerce-breadcrumb,
	body.woocommerce .wp-block-woocommerce-breadcrumbs,
	body.woocommerce-page .wp-block-woocommerce-breadcrumbs,
	body.single-product .woocommerce-breadcrumb,
	body.single-product .wp-block-woocommerce-breadcrumbs{
		padding-top:78px !important;
	}
	body.woocommerce [id],
	body.woocommerce-page [id]{scroll-margin-top:110px}
}
/* breadcrumbs were only styled on single products; match them everywhere */
body.woocommerce .woocommerce-breadcrumb,
body.woocommerce-page .woocommerce-breadcrumb,
body.woocommerce .wp-block-woocommerce-breadcrumbs,
body.woocommerce-page .wp-block-woocommerce-breadcrumbs{
	max-width:1132px !important;
	margin-left:auto !important;
	margin-right:auto !important;
	padding-left:22px !important;
	padding-right:22px !important;
	padding-bottom:6px !important;
	text-align:left !important;
	font-size:.82rem !important;
	color:#66707D !important;
	font-family:'Plus Jakarta Sans',sans-serif !important;
}
body.woocommerce .woocommerce-breadcrumb a,
body.woocommerce-page .woocommerce-breadcrumb a,
body.woocommerce .wp-block-woocommerce-breadcrumbs a,
body.woocommerce-page .wp-block-woocommerce-breadcrumbs a{
	color:#16253A !important;font-weight:700 !important;text-decoration:none !important;
}
body.woocommerce .woocommerce-breadcrumb a:hover,
body.woocommerce-page .wp-block-woocommerce-breadcrumbs a:hover{color:#9C7A28 !important}
/* Greenshift's woosingle.css styles any breadcrumb link that follows a
   delimiter as a grey chip:
     .woocommerce-breadcrumb span.delimiter + a { background:#f5f5f5; padding:4px 8px }
   That belongs to a different breadcrumb design. Ours is plain muted text,
   so the chip reads as a stray highlight on every level except the first. */
body.woocommerce .woocommerce-breadcrumb span.delimiter + a,
body.woocommerce-page .woocommerce-breadcrumb span.delimiter + a,
body.woocommerce .wp-block-woocommerce-breadcrumbs span.delimiter + a,
body.woocommerce-page .wp-block-woocommerce-breadcrumbs span.delimiter + a,
body.single-product .woocommerce-breadcrumb span.delimiter + a{
	background:none !important;
	background-color:transparent !important;
	padding:0 !important;
	border-radius:0 !important;
	border:0 !important;
	box-shadow:none !important;
}

/* keep the separators quiet */
body.woocommerce .woocommerce-breadcrumb span.delimiter,
body.woocommerce-page .woocommerce-breadcrumb span.delimiter,
body.woocommerce .wp-block-woocommerce-breadcrumbs span.delimiter,
body.woocommerce-page .wp-block-woocommerce-breadcrumbs span.delimiter{
	color:#9aa5b1 !important;
	background:none !important;
	padding:0 4px !important;
}