/**
 * JC Shipping Bar — default look.
 *
 * Every value is a custom property on .jc-sb. An Elementor style control
 * writes the same `--jc-sb-*` property on the widget wrapper at three-class
 * specificity, so it wins over these one-class defaults without !important,
 * and one theme rule can do the same.
 *
 * `display` is pinned with !important throughout. Just Compounds' stylesheet
 * carries `.elementor-menu-cart__wrapper * { display: flex; }`, which turns
 * every element we print into a flex box, including the <span>s inside a
 * sentence, and that pushed "$60.00" onto its own line in the first build.
 * No control sets display, so the house rule about !important does not apply.
 */

.jc-sb {
	/* The greens are the approved design, signed off on production 2026-09-10.
	   They are not in the site's Elementor kit, which is ink #12201A and gold
	   #C89B5C with a #6D7763 sage; the card is deliberately its own quieter
	   family so a shipping promise does not compete with an Add to Cart
	   button. Every one of them is an Elementor control, so switching the
	   whole card onto the kit's sage, or onto gold, is one picker each. */
	--jc-sb-card-bg: #EEF3EA;
	--jc-sb-card-radius: 10px;
	--jc-sb-card-pad-y: 14px;
	--jc-sb-card-pad-x: 16px;
	--jc-sb-margin: 0 0 16px 0;
	--jc-sb-gap: 12px;

	--jc-sb-text: #12201A;
	--jc-sb-muted: #4F5B54;

	--jc-sb-icon-size: 22px;
	--jc-sb-icon-color: #3E5F41;

	--jc-sb-track-bg: #D3DBCF;
	--jc-sb-track-h: 6px;
	--jc-sb-fill: #3E5F41;
	--jc-sb-marker: 16px;
	--jc-sb-marker-color: #3E5F41;
	--jc-sb-tick-bg: #FFFFFF;
	--jc-sb-tick-border: #C9D2C4;
	--jc-sb-tick-hit: #3E5F41;

	--jc-sb-tier-icon-size: 18px;
	--jc-sb-tier-icon-color: #12201A;
	--jc-sb-tier-earned-color: #3E5F41;
	--jc-sb-divider: #C9D2C4;

	--jc-sb-msg-bg: #E3EBDE;
	--jc-sb-msg-color: #12201A;
	--jc-sb-msg-radius: 8px;
	--jc-sb-msg-pad-y: 10px;
	--jc-sb-msg-pad-x: 12px;
	--jc-sb-msg-icon-color: #3E5F41;
	--jc-sb-amount-color: #12201A;

	display: block !important;
	box-sizing: border-box;
	margin: var(--jc-sb-margin);
	color: var(--jc-sb-text);
	font-family: inherit;
	line-height: 1.35;
	text-align: left;
}

.jc-sb[hidden],
.jc-sb[data-state="empty"],
.jc-sb[data-state="deferred"],
.jc-sb[data-state="none"] {
	display: none !important;
}

.jc-sb *,
.jc-sb *::before,
.jc-sb *::after {
	box-sizing: border-box;
}

/* ---- The card: header, track and tier columns share one background ---- */

.jc-sb__header,
.jc-sb__track,
.jc-sb__tiers {
	display: block !important;
	margin: 0;
	background: var(--jc-sb-card-bg);
	padding-left: var(--jc-sb-card-pad-x);
	padding-right: var(--jc-sb-card-pad-x);
}

.jc-sb__header:first-child,
.jc-sb__track:first-child,
.jc-sb__tiers:first-child {
	padding-top: var(--jc-sb-card-pad-y);
	border-top-left-radius: var(--jc-sb-card-radius);
	border-top-right-radius: var(--jc-sb-card-radius);
}

.jc-sb__header:last-child,
.jc-sb__track:last-child,
.jc-sb__tiers:last-child,
.jc-sb__header:nth-last-child(2):has(+ .jc-sb__msg),
.jc-sb__track:nth-last-child(2):has(+ .jc-sb__msg),
.jc-sb__tiers:nth-last-child(2):has(+ .jc-sb__msg) {
	padding-bottom: var(--jc-sb-card-pad-y);
	border-bottom-left-radius: var(--jc-sb-card-radius);
	border-bottom-right-radius: var(--jc-sb-card-radius);
}

/* ---- Header ---- */

.jc-sb__header {
	display: flex !important;
	align-items: center;
	gap: 10px;
}

.jc-sb__header-text {
	display: block !important;
	min-width: 0;
}

.jc-sb__headline,
.jc-sb__subline,
.jc-sb__tier-label,
.jc-sb__tier-sub,
.jc-sb__msg-text {
	display: block !important;
	margin: 0;
	padding: 0;
}

.jc-sb__headline {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--jc-sb-text);
}

.jc-sb__subline {
	margin-top: 2px;
	font-size: 11px;
	color: var(--jc-sb-muted);
}

/* ---- Icons ---- */

.jc-sb__icon {
	display: inline-flex !important;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--jc-sb-icon-size);
	height: var(--jc-sb-icon-size);
	color: var(--jc-sb-icon-color);
}

.jc-sb__icon svg {
	display: block !important;
	width: 100%;
	height: 100%;
}

/* ---- Track ---- */

.jc-sb__track {
	padding-top: var(--jc-sb-gap);
}

/* The rail is inset by half a marker on each side so the marker at 100%
   sits fully inside the card. Percent offsets on the fill, ticks and marker
   resolve against the rail, which has no padding, so the math is exact. */
.jc-sb__rail {
	display: block !important;
	position: relative;
	height: calc(var(--jc-sb-marker) + 4px);
	margin: 0 calc(var(--jc-sb-marker) / 2);
}

.jc-sb__rail::before {
	content: "";
	display: block !important;
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: var(--jc-sb-track-h);
	transform: translateY(-50%);
	border-radius: calc(var(--jc-sb-track-h) / 2);
	background: var(--jc-sb-track-bg);
}

.jc-sb__fill,
.jc-sb__tick,
.jc-sb__marker {
	display: block !important;
	position: absolute;
	margin: 0;
	padding: 0;
}

.jc-sb__fill {
	left: 0;
	top: 50%;
	height: var(--jc-sb-track-h);
	max-width: 100%;
	transform: translateY(-50%);
	border-radius: calc(var(--jc-sb-track-h) / 2);
	background: var(--jc-sb-fill);
	transition: width .3s ease;
}

.jc-sb__tick,
.jc-sb__marker {
	top: 50%;
	width: var(--jc-sb-marker);
	height: var(--jc-sb-marker);
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.jc-sb__tick {
	background: var(--jc-sb-tick-bg);
	border: 2px solid var(--jc-sb-tick-border);
}

.jc-sb__tick.is-hit {
	background: var(--jc-sb-tick-hit);
	border-color: var(--jc-sb-tick-hit);
}

.jc-sb__marker {
	background: var(--jc-sb-marker-color);
	box-shadow: 0 0 0 3px var(--jc-sb-card-bg);
	transition: left .3s ease;
}

/* ---- Tier columns ---- */

.jc-sb__tiers {
	display: flex !important;
	list-style: none;
	padding-top: var(--jc-sb-gap);
}

.jc-sb__tier {
	display: flex !important;
	/* auto rather than 0: a two-word line like "NEXT DAY" needs more room
	   than "ALL ORDERS", and equal columns would break it up. */
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	min-width: 0;
	margin: 0;
	padding: 0 6px;
	list-style: none;
	text-align: center;
	border-left: 1px solid var(--jc-sb-divider);
}

.jc-sb__tier:first-child {
	border-left: 0;
}

.jc-sb__tier .jc-sb__icon {
	width: var(--jc-sb-tier-icon-size);
	height: var(--jc-sb-tier-icon-size);
	color: var(--jc-sb-tier-icon-color);
}

.jc-sb__tier.is-earned .jc-sb__icon {
	color: var(--jc-sb-tier-earned-color);
}

.jc-sb__tier-label {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--jc-sb-text);
}

/* A label may hold one <br> ("UPS" over "2-Day"), so columns can differ in
   height. The columns stretch to the tallest and the detail line is pushed to
   the bottom, which keeps every "$99.99+" on one baseline. */
.jc-sb__tier-sub {
	margin-top: auto;
}

/* One line per span, each unbreakable, so a line splits only where the
   label says it should. */
.jc-sb__tier-line {
	display: block !important;
	white-space: nowrap;
}

.jc-sb__tier-sub {
	font-size: 11px;
	color: var(--jc-sb-muted);
}

/* ---- Message ---- */

.jc-sb__msg {
	display: flex !important;
	align-items: center;
	gap: 8px;
	margin: var(--jc-sb-gap) 0 0;
	padding: var(--jc-sb-msg-pad-y) var(--jc-sb-msg-pad-x);
	border-radius: var(--jc-sb-msg-radius);
	background: var(--jc-sb-msg-bg);
	color: var(--jc-sb-msg-color);
	font-size: 13px;
	line-height: 1.4;
	text-align: left;
}

.jc-sb__msg .jc-sb__icon {
	width: calc(var(--jc-sb-icon-size) - 4px);
	height: calc(var(--jc-sb-icon-size) - 4px);
	color: var(--jc-sb-msg-icon-color);
}

.jc-sb__amount {
	font-weight: 700;
	color: var(--jc-sb-amount-color);
}

/* Formatted prices are nested spans. Keep them inline inside sentences. */
.jc-sb__headline span,
.jc-sb__subline span,
.jc-sb__tier-sub span,
.jc-sb__msg-text span,
.jc-sb bdi,
.jc-sb strong,
.jc-sb em {
	display: inline !important;
}

/* ---- Cart and checkout pages: full width, a little more room ---- */

.jc-sb--cart,
.jc-sb--checkout {
	--jc-sb-margin: 0 0 24px 0;
}

@media (max-width: 480px) {
	.jc-sb__tier {
		padding: 0 4px;
	}
	.jc-sb__tier-label {
		font-size: 11px;
	}
}