/* ---------------------------------------------------------------------------
 * Cart table group headers.
 *
 * These are full-width rows inside the items table, so the cell carries the
 * background and the row itself stays out of the way of the table's borders.
 * ------------------------------------------------------------------------ */

.oasis-cart-group td {
	padding: 10px 16px !important;
	border: 0 !important;
}

.oasis-cart-group--free td {
	background: #E7F6EC;
}

.oasis-cart-group--standard td {
	background: #F2F4F7;
}

.oasis-cart-group__label {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}

.oasis-cart-group--free .oasis-cart-group__label {
	color: #1B7F4B;
}

.oasis-cart-group--standard .oasis-cart-group__label {
	color: #475467;
}

/* The thresholds, under the band's heading. Smaller and grey: it explains the
   heading rather than competing with it, and sits on its own line so the amount
   floated to the right keeps clear of it.

   Grey rather than green, and the same grey the standard band's label uses, so
   the two bands read as one set. */
.oasis-cart-group__note {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.4;
	color: #667085;
}

.oasis-fs-policy-link {
	color: #0A4F94;
	text-decoration: underline solid;
	text-underline-offset: 2px;
	text-decoration-skip-ink: auto;
}

.oasis-fs-policy-link:hover,
.oasis-fs-policy-link:focus-visible {
	color: #083A6E;
}

.oasis-cart-group__amount {
	float: right;
	font-size: 14px;
	font-weight: 700;
}

.oasis-cart-group--free .oasis-cart-group__amount {
	color: #1B7F4B;
}

.oasis-cart-group--standard .oasis-cart-group__amount {
	color: #101828;
}

.oasis-cart-group__track {
	display: block;
	clear: both;
	height: 4px;
	margin-top: 8px;
	border-radius: 999px;
	background: rgba(27, 127, 75, 0.2);
	overflow: hidden;
}

.oasis-cart-group__fill {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: #1B7F4B;
}

/* The badge is defined for the mini cart in the theme's SCSS; the cart table
   needs its own copy because that rule is scoped to the header dropdown. */
.woocommerce-cart-form .oasis-fs-badge {
	display: inline-block;
	width: auto;
	margin-top: 4px;
	padding: 2px 8px;
	border-radius: 4px;
	background: #E7F6EC;
	color: #1B7F4B;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
 * Order summary: the free / standard split, mirroring the table's grouping.
 * ------------------------------------------------------------------------ */

.oasis-summary-group th,
.oasis-summary-group td {
	padding: 7px 10px !important;
	border: 0 !important;
	font-size: 13px;
	font-weight: 600;
}

.oasis-summary-group--free th,
.oasis-summary-group--free td {
	background: #E7F6EC;
	color: #1B7F4B;
}

.oasis-summary-group--standard th,
.oasis-summary-group--standard td {
	background: #F2F4F7;
	color: #475467;
}

.oasis-summary-group td {
	text-align: right;
	white-space: nowrap;
}

.oasis-summary-line th,
.oasis-summary-line td {
	padding: 6px 10px !important;
	border: 0 !important;
	color: #667085;
	font-size: 13px;
	font-weight: 400;
}

.oasis-summary-line th {
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: left;
}

.oasis-summary-line td {
	text-align: right;
	white-space: nowrap;
}

.oasis-summary-note td {
	padding: 4px 10px 10px !important;
	border: 0 !important;
	color: #667085;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.5;
}

/* ---------------------------------------------------------------------------
 * Checkout: progress towards the minimum spend, inside the free group's band
 * under its heading. The band is a flex row with the amount on the right, so
 * the bar spans the label's width.
 * ------------------------------------------------------------------------ */

.woocommerce-checkout-review-order-table .oasis-review-group__label {
	flex: 1 1 auto;
	min-width: 0;
}

.woocommerce-checkout-review-order-table .oasis-review-progress {
	display: block;
	margin-top: 8px;
}

.woocommerce-checkout-review-order-table .oasis-review-progress__text {
	display: block;
	margin-bottom: 6px;
	color: #344054;
	font-size: 12px;
	font-weight: 400;
	line-height: 1.45;
}

.woocommerce-checkout-review-order-table .oasis-review-progress__text strong {
	color: #1B7F4B;
	font-weight: 700;
}

.woocommerce-checkout-review-order-table .oasis-review-progress__track {
	display: block;
	height: 6px;
	border-radius: 999px;
	background: rgba(27, 127, 75, 0.18);
	overflow: hidden;
}

.woocommerce-checkout-review-order-table .oasis-review-progress__fill {
	display: block;
	height: 100%;
	min-width: 6px;
	border-radius: 999px;
	background: #1B7F4B;
	transition: width 0.3s ease;
}


/* Checkout: the footnote under the total once free shipping applies. */
.woocommerce-checkout-review-order-table .oasis-review-footnote__mark {
	margin: 0 1px;
	color: #D92D20;
	font-weight: 700;
}

/* Tight to the total above it, with room between its own lines. */
.woocommerce-checkout-review-order-table tr.oasis-review-footnote td {
	padding: 2px 0 14px !important;
	border: 0 !important;
	color: #667085;
	font-weight: 400;
	line-height: 1.75;
	text-align: left;
}

/* The checkout panel sets 16px !important on every cell, so the size goes on
   the text itself. */
.woocommerce-checkout-review-order-table tr.oasis-review-footnote .oasis-review-footnote__text {
	font-size: 14px !important;
}

/* ---------------------------------------------------------------------------
 * Announcement strip above the site header.
 * ------------------------------------------------------------------------ */

/* The theme pads the page by a fixed header height, and the header is fixed, so
   the strip keeps a fixed height too and the page is pushed down by exactly that.
   Two lines on phones, one above. */
/* Measured off the 1680×64 design: 64px tall, 18px heading, 17.5px labels,
   19.5px figures, ~18px between the parts. */
:root {
	--oasis-fs-strip-h: 64px;
}

body:has(.oasis-fs-strip) #ajax-content-wrap {
	margin-top: var(--oasis-fs-strip-h);
}

.oasis-fs-strip {
	position: relative;
	z-index: 2001; /* over Salient's closed search panel, which hangs over the header top */
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: var(--oasis-fs-strip-h);
	padding: 1px 16px 0; /* the design's text sits a pixel below centre */
	overflow: hidden;
	/* Coral and fish at the two ends, over the design's yellow: lighter in the
	   middle, warmer towards the ends where it meets the artwork. */
	background:
		url("../images/free-shipping-strip-left.png") left center / auto 100% no-repeat,
		url("../images/free-shipping-strip-right.png") right center / auto 100% no-repeat,
		linear-gradient(90deg, #FDD421 0%, #FDE131 50%, #FDD421 100%);
	color: #0A2940;
	font-size: 17.5px;
	line-height: 1.3;
	text-align: center;
}

/* Back on top of the strip once the search is actually open. */
#header-outer #search-outer.material-open {
	z-index: 2002;
}

.oasis-fs-strip__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 16px;
}

.oasis-fs-strip__tiers {
	display: contents;
}

/* Whole left block (icon + stacked headline / “on eligible items”) is one link.
   Underline the policy span directly — decoration on flex parents does not paint. */
.oasis-fs-strip__offer {
	display: inline-flex;
	align-items: center;
	color: #0A2940 !important;
	cursor: pointer;
	text-decoration: none !important;
}

.oasis-fs-strip__offer:hover,
.oasis-fs-strip__offer:focus-visible {
	color: #0A4F94 !important;
}

.oasis-fs-strip__offer:hover .oasis-fs-strip__policy,
.oasis-fs-strip__offer:focus-visible .oasis-fs-strip__policy {
	color: #0A4F94;
}

.oasis-fs-strip__lead {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	text-align: left;
}

.oasis-fs-strip__lead svg {
	width: 24px;
	height: 24px;
	flex: none;
}

.oasis-fs-strip__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	line-height: 1.15;
}

.oasis-fs-strip__headline {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.1;
	text-transform: uppercase;
}

.oasis-fs-strip__policy {
	color: #0A4F94;
	font-family: "Inter", sans-serif;
	font-size: 12px;
	font-weight: 500;
	font-style: normal;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: underline solid;
	text-underline-offset: 2px;
	text-decoration-skip-ink: auto;
}

.oasis-fs-strip__divider {
	width: 1px;
	height: 24px;
	background: #AEA73D;
}

.oasis-fs-strip__tier {
	font-weight: 400;
	white-space: nowrap;
}

.oasis-fs-strip__tier strong {
	margin-left: 5px;
	color: #0A4F94;
	font-size: 19.5px;
	font-weight: 700;
}

.oasis-fs-strip__dot {
	color: #0A4F94;
	font-weight: 700;
}

/* Tablets: stacked offer + thresholds share the strip; scale type down so both
   rows fit the fixed height without feeling cramped. */
@media (min-width: 601px) and (max-width: 1100px) {
	.oasis-fs-strip {
		font-size: 13px;
	}

	.oasis-fs-strip__inner {
		gap: 2px 12px;
	}

	.oasis-fs-strip__lead {
		gap: 7px;
	}

	.oasis-fs-strip__lead svg {
		width: 18px;
		height: 18px;
	}

	.oasis-fs-strip__headline {
		font-size: 14px;
	}

	.oasis-fs-strip__policy {
		font-size: 10px;
	}

	.oasis-fs-strip__divider {
		display: none;
	}

	.oasis-fs-strip__tiers {
		display: flex;
		flex-basis: 100%;
		align-items: center;
		justify-content: center;
		gap: 6px;
	}

	.oasis-fs-strip__tier strong {
		margin-left: 3px;
		font-size: 14px;
	}
}

/* Phones: the heading takes its own line, the two figures share the next. */
@media (max-width: 600px) {
	:root {
		--oasis-fs-strip-h: 52px;
	}

	/* Only the outer edges of the artwork, so the fish stay out from behind the text. */
	.oasis-fs-strip {
		background-position: left -220px center, right -220px center, 0 0;
		padding: 0 12px;
		font-size: 12px;
		line-height: 1.3;
	}

	.oasis-fs-strip__inner {
		gap: 2px 6px;
	}

	.oasis-fs-strip__offer {
		flex-basis: 100%;
		justify-content: center;
	}

	.oasis-fs-strip__lead {
		justify-content: center;
		gap: 8px;
	}

	.oasis-fs-strip__lead svg {
		width: 16px;
		height: 16px;
	}

	.oasis-fs-strip__headline {
		font-size: 12px;
	}

	.oasis-fs-strip__policy {
		font-size: 10px;
	}

	.oasis-fs-strip__divider {
		display: none;
	}

	.oasis-fs-strip__tier strong {
		margin-left: 2px;
		font-size: 12px;
	}
}

.oasis-free-shipping-image-badge {
	position: absolute;
	top: 18px;
	left: 22px;
	z-index: 25;
	display: inline-block;
	padding: 8px 14px;
	border-radius: 7px;
	background: #E7F6EC;
	color: #1B7F4B;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

@media (max-width: 690px) {
	.oasis-free-shipping-image-badge {
		top: 20px;
		padding: 6px 12px;
		font-size: 12px;
	}
}

/* ---------------------------------------------------------------------------
 * Landing page popup.
 * ------------------------------------------------------------------------ */

.oasis-fs-popup {
	width: calc(100% - 32px);
	max-width: 520px;
	padding: 0;
	border: 0;
	border-radius: 26px;
	background: #FFFFFF;
	box-shadow: 0 24px 64px rgba(16, 24, 40, 0.28);
	overflow: hidden;
	font-family: "Inter", sans-serif;
}

.oasis-fs-popup::backdrop {
	background: rgba(16, 24, 40, 0.55);
}

/* The hero's own artwork carried the pill and the headline as pixels, so a card
   narrower than the image either shrank the words or cut them off. The water is
   the background now — it stretches to any width — and the words are text. */
.oasis-fs-popup__hero {
	position: relative;
	box-sizing: border-box;
	height: 150px;
	padding: 29px 32px 0;
	background:
		linear-gradient(90deg, rgba(0, 30, 105, 0.92) 0%, rgba(0, 60, 155, 0.55) 38%, rgba(0, 95, 205, 0.1) 72%, rgba(0, 120, 230, 0) 88%),
		url("../images/free-shipping-popup-hero-bg.png") center / cover no-repeat,
		#0B57C8;
	color: #FFFFFF;
}

.oasis-fs-popup__close {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	color: #FFFFFF;
	font-size: 16px;
	line-height: 24px;
	cursor: pointer;
}

.oasis-fs-popup__close:hover {
	background: rgba(255, 255, 255, 0.3);
}

.oasis-fs-popup__pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	padding: 0 13px;
	border-radius: 999px;
	background: #FAB819;
	color: #0A2940;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
	text-transform: uppercase;
}

.oasis-fs-popup__pill svg {
	width: 18px;
	height: 18px;
	flex: none;
}

.oasis-fs-popup__tagline {
	margin: 20px 0 0 !important;
	padding: 0 !important;
	color: #FFFFFF;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}

.oasis-fs-popup__body {
	padding: 28px 32px 44px;
}

.oasis-fs-popup__title {
	margin: 0 0 14px !important;
	padding: 0 !important;
	color: #0A2940;
	font-size: 30px !important;
	font-weight: 700;
	line-height: 1.2 !important;
}

.oasis-fs-popup__text {
	margin: 0 0 37px !important;
	padding: 0 !important;
	color: #4C5E6E;
	font-size: 16px;
	line-height: 1.25;
}

.oasis-fs-popup__tiers {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 16px;
}

.oasis-fs-popup__tier {
	padding: 13px 16px 12px;
	border: 1px solid #B8DEF5;
	border-radius: 10px;
	background: #EBF7FF;
}

.oasis-fs-popup__tier-label {
	display: block;
	color: #3D698F;
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	line-height: 1.3;
}

.oasis-fs-popup__tier-amount {
	display: block;
	margin-top: 4px;
	color: #086EC2;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
}

.oasis-fs-popup__cta {
	display: block;
	padding: 14px 20px;
	border-radius: 10px;
	background: #FAB819;
	color: #0A2940 !important;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none !important;
	line-height: 1.2;
	transition: background 0.15s ease;
}

.oasis-fs-popup__cta:hover {
	background: #F0A800;
}

.oasis-fs-popup__fineprint {
	margin: 16px 0 0 !important;
	padding: 0 !important;
	color: #788591;
	font-size: 12px;
	text-align: center;
	line-height: 1.5;
}

@media (max-width: 480px) {
	.oasis-fs-popup__hero,
	.oasis-fs-popup__body {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* The headline has to stay on one line in a card this narrow, and the hero
	   grows rather than clipping it if it ever does wrap. */
	.oasis-fs-popup__hero {
		height: auto;
		min-height: 132px;
		padding-top: 22px;
		padding-bottom: 22px;
	}

	.oasis-fs-popup__pill {
		height: 34px;
		padding: 0 12px;
		font-size: 11px;
	}

	.oasis-fs-popup__tagline {
		margin-top: 16px !important;
		font-size: 21px;
	}

	.oasis-fs-popup__title {
		font-size: 23px !important;
	}

	.oasis-fs-popup__tier-amount {
		font-size: 19px;
	}
}