/* ==========================================================================
   Oasis Cart Boost — components for the cart journey.
   Brand system (v2): forest / cream, Jost UI + Cormorant Garamond display,
   white cards on cream, 7–10px radii, earth tones only. The one bold element is
   the rewards track, drawn as a graduated lab tube. Everything else stays quiet.

   Specificity note: main.css paints every non-home <button>, .button and
   .checkout-button with !important at (0,2,2)–(0,3,1), and .woocommerce-cart-form /
   .cart_totals as cards at (0,3,1). Component rules that must win are written as
   "html body .ol-cro …" with !important on exactly the properties those blankets set.
   ========================================================================== */

.ol-cro,
.ol-cro-toast {
	--cro-ink: #252518;
	--cro-ink-2: #3e3d30;
	--cro-muted: #66664f;
	--cro-forest: #353525;
	--cro-deep: #20211a;
	--cro-olive: #535740;
	--cro-sage: #6b6f52;
	--cro-paper: #fff;
	--cro-cream: #f5f3ee;
	--cro-cream-2: #edeae3;
	--cro-sand: #e2ddd1;
	--cro-line: #dcd6c8;
	--cro-sun-1: #e2942f;
	--cro-sun-2: #bd4a24;
	--cro-sun-ink: #8a3a1a;
	--cro-sun-tint: #fbf1e6;
	--cro-gold: #c9b99a;
	--cro-r: 10px;
	--cro-r-sm: 7px;
	--cro-ui: var(--ol-font-body, "Jost", -apple-system, system-ui, sans-serif);
	--cro-display: var(--ol-font-display, "Cormorant Garamond", Georgia, serif);
	--cro-ease: cubic-bezier(.22, .61, .36, 1);
	--cro-spring: cubic-bezier(.34, 1.56, .64, 1);
	font-family: var(--cro-ui);
	color: var(--cro-ink);
}

.ol-cro [hidden],
.ol-cro[hidden] { display: none !important; }

.ol-cro-ic { width: 18px; height: 18px; flex: 0 0 auto; }

.ol-cro b,
.ol-cro .amount { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Buttons (beat the theme's blanket button rules)
   -------------------------------------------------------------------------- */

html body .ol-cro .ol-cro-btn,
html body .ol-cro-btn.ol-cro-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0;
	padding: 0 14px !important;
	border: 1px solid transparent !important;
	border-radius: var(--cro-r-sm) !important;
	background: transparent !important;
	color: var(--cro-ink) !important;
	font-family: var(--cro-ui) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: .01em !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-shadow: none !important;
	cursor: pointer;
	transform: none;
	transition: background-color .2s var(--cro-ease), color .2s var(--cro-ease), border-color .2s var(--cro-ease), box-shadow .2s var(--cro-ease) !important;
	-webkit-tap-highlight-color: transparent;
}
html body .ol-cro .ol-cro-btn:focus-visible { outline: 2px solid var(--cro-olive) !important; outline-offset: 2px; }
html body .ol-cro .ol-cro-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Primary: matches the site's uppercase forest CTA. */
html body .ol-cro .ol-cro-btn.ol-cro-cta,
html body .ol-cro a.ol-cro-btn.ol-cro-cta {
	height: 50px;
	padding: 0 22px !important;
	background: var(--cro-forest) !important;
	color: #f5f3ee !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	box-shadow: 0 14px 30px -20px rgba(20, 21, 15, .7) !important;
}
html body .ol-cro .ol-cro-btn.ol-cro-cta:hover { background: var(--cro-deep) !important; color: #fff !important; }

html body .ol-cro .ol-cro-btn.ol-cro-ghost {
	height: 44px;
	padding: 0 18px !important;
	border-color: var(--cro-line) !important;
	background: var(--cro-paper) !important;
	color: var(--cro-ink) !important;
}
html body .ol-cro .ol-cro-btn.ol-cro-ghost:hover { border-color: var(--cro-forest) !important; }

/* Small "Add 3" chip on tier flags. */
html body .ol-cro .ol-cro-btn.ol-cro-chip {
	height: 28px;
	padding: 0 11px !important;
	border-color: color-mix(in oklab, var(--cro-sun-2) 34%, white) !important;
	background: var(--cro-paper) !important;
	color: var(--cro-sun-ink) !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	white-space: nowrap;
}
html body .ol-cro .ol-cro-btn.ol-cro-chip:hover {
	border-color: transparent !important;
	background: var(--cro-sun-2) !important;
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   Rewards track — the graduated tube
   -------------------------------------------------------------------------- */

.ol-cro-track { --ol-cro-tick: 10%; position: relative; }

.ol-cro-track__msg {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 10px;
	font-size: 14.5px;
	line-height: 1.35;
	color: var(--cro-ink-2);
}
.ol-cro-track__msg b { color: var(--cro-forest); font-weight: 600; }
.ol-cro-track.is-complete .ol-cro-track__msg { color: var(--cro-forest); font-weight: 500; }
.ol-cro-track.is-complete .ol-cro-track__msg .ol-cro-ic { color: var(--cro-sun-2); }

.ol-cro-tube { position: relative; height: 22px; }

.ol-cro-tube__glass {
	position: absolute;
	inset: 5px 0 auto;
	height: 12px;
	overflow: hidden;
	border-radius: 999px;
	background:
		repeating-linear-gradient(90deg, transparent 0 calc(var(--ol-cro-tick) - 1px), rgba(37, 37, 24, .13) calc(var(--ol-cro-tick) - 1px) var(--ol-cro-tick)) 0 55% / 100% 5px no-repeat,
		linear-gradient(180deg, #e6e1d5 0%, #f4f1ea 100%);
	box-shadow: inset 0 1px 2px rgba(37, 37, 24, .2), inset 0 -1px 0 rgba(255, 255, 255, .9), 0 1px 0 rgba(255, 255, 255, .7);
}

.ol-cro-tube__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, #7b7f60 0%, var(--cro-olive) 45%, var(--cro-forest) 100%);
	transition: width .95s var(--cro-ease);
}
/* Glass highlight running along the liquid. */
.ol-cro-tube__fill::before {
	content: "";
	position: absolute;
	left: 6px;
	right: 8px;
	top: 2px;
	height: 3px;
	border-radius: 3px;
	background: rgba(255, 255, 255, .28);
}
/* The meniscus: a rounded, lighter leading edge. */
.ol-cro-tube__meniscus {
	position: absolute;
	top: 0;
	right: -4px;
	bottom: 0;
	width: 8px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 45%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 70%), var(--cro-forest);
}
.ol-cro-track.is-filling .ol-cro-tube__fill::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
	background-size: 60px 100%;
	background-repeat: no-repeat;
	animation: ol-cro-sheen 1.1s var(--cro-ease) 1;
}
@keyframes ol-cro-sheen { from { background-position: -60px 0; } to { background-position: calc(100% + 60px) 0; } }

/* Milestone beads sit on the tube. */
.ol-cro-tube__mark {
	position: absolute;
	top: 2px;
	width: 18px;
	height: 18px;
	margin-left: -9px;
	border: 1.5px solid var(--cro-line);
	border-radius: 50%;
	background: var(--cro-paper);
	box-shadow: 0 2px 6px -3px rgba(37, 37, 24, .45);
	transition: background .3s var(--cro-ease), border-color .3s var(--cro-ease);
}
.ol-cro-tube__mark.is-end { margin-left: -18px; }
.ol-cro-tube__mark.is-reached {
	border-color: transparent;
	background: linear-gradient(135deg, var(--cro-sun-1), var(--cro-sun-2));
}
.ol-cro-tube__mark.is-reached::after {
	content: "";
	position: absolute;
	left: 5px;
	top: 3px;
	width: 4px;
	height: 8px;
	border: solid #fff;
	border-width: 0 1.8px 1.8px 0;
	transform: rotate(45deg);
}
.ol-cro-tube__mark.is-unlocking { animation: ol-cro-pop .6s var(--cro-spring) 1; }
@keyframes ol-cro-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }

.ol-cro-track__legend {
	position: relative;
	height: 34px;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}
.ol-cro-track__legend li {
	position: absolute;
	top: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	transform: translateX(-50%);
	white-space: nowrap;
	line-height: 1.2;
}
.ol-cro-track__legend li.is-end { align-items: flex-end; transform: translateX(-100%); }
.ol-cro-track__amt { font-size: 12.5px; font-weight: 600; color: var(--cro-ink); }
.ol-cro-track__lbl { font-size: 11.5px; color: var(--cro-muted); }
.ol-cro-track__legend li.is-reached .ol-cro-track__amt { color: var(--cro-sun-2); }

.ol-cro-track__hint { margin: 8px 0 0; font-size: 12.5px; color: var(--cro-muted); }

/* Compact (mini cart, checkout). */
.ol-cro-track--compact .ol-cro-track__msg { margin-bottom: 7px; font-size: 13.5px; }
.ol-cro-track--compact .ol-cro-tube { height: 18px; }
.ol-cro-track--compact .ol-cro-tube__glass { top: 4px; height: 10px; }
.ol-cro-track--compact .ol-cro-tube__mark { top: 1px; width: 16px; height: 16px; margin-left: -8px; }
.ol-cro-track--compact .ol-cro-tube__mark.is-end { margin-left: -16px; }
.ol-cro-track--compact .ol-cro-tube__mark.is-reached::after { left: 4.5px; top: 2.5px; }
.ol-cro-track--compact .ol-cro-track__legend { height: 30px; margin-top: 4px; }
.ol-cro-track--compact .ol-cro-track__amt { font-size: 11.5px; }
.ol-cro-track--compact .ol-cro-track__lbl { font-size: 10.5px; }

/* --------------------------------------------------------------------------
   Countdown
   -------------------------------------------------------------------------- */

.ol-cro-clock {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.35;
	color: var(--cro-ink-2);
}
.ol-cro-clock__ic { color: var(--cro-olive); }
.ol-cro-clock b { color: var(--cro-forest); font-weight: 600; font-variant-numeric: tabular-nums; }
.ol-cro-clock.is-urgent .ol-cro-clock__ic { color: var(--cro-sun-2); }
.ol-cro-clock.is-urgent b { color: var(--cro-sun-ink); }

/* --------------------------------------------------------------------------
   Bulk-tier flag
   -------------------------------------------------------------------------- */

.ol-cro-flag {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 10px;
	margin-top: 8px;
	padding: 6px 6px 6px 11px;
	border: 1px solid color-mix(in oklab, var(--cro-sun-1) 24%, white);
	border-radius: var(--cro-r-sm);
	background: var(--cro-sun-tint);
	font-size: 12.5px;
	line-height: 1.3;
	color: var(--cro-sun-ink);
}
.ol-cro-flag__txt { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ol-cro-flag.is-max {
	padding-right: 11px;
	border-color: color-mix(in oklab, var(--cro-olive) 22%, white);
	background: color-mix(in oklab, var(--cro-olive) 7%, white);
	color: var(--cro-olive);
}
.ol-cro-flag.is-max .ol-cro-ic { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   Product suggestion cards
   -------------------------------------------------------------------------- */

.ol-cro-reco__title {
	margin: 0 0 12px !important;
	font-family: var(--cro-display) !important;
	font-size: 22px !important;
	font-weight: 500 !important;
	line-height: 1.15 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--cro-ink) !important;
}

.ol-cro-pc { position: relative; display: grid; background: var(--cro-paper); }
.ol-cro-pc__img { display: block; overflow: hidden; border-radius: var(--cro-r-sm); background: var(--cro-cream-2); }
.ol-cro-pc__img img { display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
html body .ol-cro .ol-cro-pc__name {
	display: block;
	color: var(--cro-ink) !important;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.25;
	text-decoration: none !important;
}
.ol-cro-pc__name:hover { text-decoration: underline !important; }
.ol-cro-pc__price { display: block; margin-top: 2px; font-size: 13px; color: var(--cro-ink-2); }
.ol-cro-pc__price del { margin-right: 4px; color: var(--cro-muted); font-size: 12px; }
.ol-cro-pc__price ins { text-decoration: none; font-weight: 600; color: var(--cro-sun-ink); }
.ol-cro-pc__sizes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
html body .ol-cro .ol-cro-btn.ol-cro-size {
	height: 26px;
	padding: 0 9px !important;
	border-color: var(--cro-line) !important;
	background: var(--cro-paper) !important;
	color: var(--cro-ink-2) !important;
	font-size: 11.5px !important;
}
html body .ol-cro .ol-cro-btn.ol-cro-size.is-on {
	border-color: var(--cro-forest) !important;
	background: var(--cro-forest) !important;
	color: #f5f3ee !important;
}
.ol-cro-pc__pick { display: block; margin-top: 8px; }
html body .ol-cro .ol-cro-pc__pick select.ol-cro-pc__select {
	width: auto !important;
	max-width: 100%;
	min-height: 0 !important;
	height: 30px;
	padding: 0 28px 0 10px !important;
	border: 1px solid var(--cro-line) !important;
	border-radius: var(--cro-r-sm) !important;
	background: var(--cro-paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 8l4 4 4-4' fill='none' stroke='%23353525' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center / 14px !important;
	color: var(--cro-ink) !important;
	font-family: var(--cro-ui) !important;
	font-size: 12.5px !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.ol-cro-pc--card .ol-cro-pc__pick select,
.ol-cro-pc--pick .ol-cro-pc__pick select { width: 100% !important; }

html body .ol-cro .ol-cro-btn.ol-cro-pc__add {
	height: 38px;
	border-color: var(--cro-line) !important;
	background: var(--cro-paper) !important;
	color: var(--cro-forest) !important;
	font-weight: 600 !important;
}
html body .ol-cro .ol-cro-btn.ol-cro-pc__add:hover,
html body .ol-cro .ol-cro-pc.is-added .ol-cro-btn.ol-cro-pc__add {
	border-color: var(--cro-forest) !important;
	background: var(--cro-forest) !important;
	color: #f5f3ee !important;
}
.ol-cro-pc.is-busy { opacity: .6; pointer-events: none; }

/* Card (cart page rail, offer picker). */
.ol-cro-pc--card,
.ol-cro-pc--pick {
	grid-template-rows: auto 1fr auto;
	gap: 10px;
	padding: 10px 10px 12px;
	border: 1px solid var(--cro-line);
	border-radius: var(--cro-r);
}
.ol-cro-pc--card .ol-cro-pc__img,
.ol-cro-pc--pick .ol-cro-pc__img { aspect-ratio: 1 / 1; }
.ol-cro-pc--card .ol-cro-pc__body,
.ol-cro-pc--pick .ol-cro-pc__body { padding: 0 2px; }
.ol-cro-pc--card .ol-cro-btn.ol-cro-pc__add,
.ol-cro-pc--pick .ol-cro-btn.ol-cro-pc__add { width: 100% !important; }

/* Row (mini cart). */
.ol-cro-pc--row {
	grid-template-columns: 56px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid color-mix(in oklab, var(--cro-forest) 8%, transparent);
}
.ol-cro-pc--row .ol-cro-pc__img { width: 56px; height: 56px; }
.ol-cro-pc--row .ol-cro-pc__sizes { margin-top: 6px; }
html body .ol-cro .ol-cro-pc--row .ol-cro-btn.ol-cro-pc__add {
	width: 38px !important;
	height: 38px;
	padding: 0 !important;
	border-radius: 50% !important;
}
.ol-cro-pc--row .ol-cro-pc__add span {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Cart page
   -------------------------------------------------------------------------- */

body.ol-cro-cart-page .ol-page-hero--compact .ol-page-intro,
body.ol-cro-cart-page .ol-page-hero--compact .ol-page-proofline { display: none !important; }

.ol-cro-cart {
	display: grid;
	gap: 18px;
	align-items: start;
}

html body .ol-cro form.woocommerce-cart-form.ol-cro-cart__form {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.ol-cro-cart__track,
.ol-cro-cart__lines,
html body .ol-cro .cart_totals.ol-cro-sum {
	border: 1px solid color-mix(in oklab, var(--cro-forest) 10%, transparent) !important;
	border-radius: 14px !important;
	background: var(--cro-paper) !important;
	box-shadow: 0 24px 60px -48px rgba(20, 21, 15, .55) !important;
}

.ol-cro-cart__track { margin-bottom: 14px; padding: 18px 20px 12px; }

.ol-cro-cart__lines { padding: 4px 18px; }

.ol-cro-line {
	position: relative;
	display: grid;
	grid-template-columns: 64px minmax(0, 1fr) auto;
	grid-template-areas:
		"img main main"
		"flag flag flag"
		"qty qty sub";
	gap: 12px 14px;
	padding: 16px 0;
	border-bottom: 1px solid color-mix(in oklab, var(--cro-forest) 8%, transparent);
}
.ol-cro-line__img { grid-area: img; }
.ol-cro-line__main { grid-area: main; min-width: 0; padding-right: 34px; }
.ol-cro-line__flag { grid-area: flag; min-width: 0; }
.ol-cro-line__flag .ol-cro-flag { margin-top: 0; }
.ol-cro-line__qty { grid-area: qty; align-self: center; }
.ol-cro-line__sub { grid-area: sub; align-self: center; justify-self: end; font-weight: 600; font-size: 15px; }
.ol-cro-line__rm { position: absolute; top: 10px; right: -6px; }

/* Warm photo plate (2026-10-22): the photo's white ground multiplies into one cream
   plate instead of reading as a white square; contain + a small inset keeps vial caps
   uncropped. isolation keeps the blend inside the plate. Same plate as checkout. */
.ol-cro-line__img {
	width: 64px;
	height: 64px;
	padding: 4px;
	box-sizing: border-box;
	overflow: hidden;
	border-radius: var(--cro-r-sm);
	background: radial-gradient(120% 95% at 50% 30%, #fbfaf6 0%, var(--cro-cream-2) 72%, #e5e1d6 100%);
	isolation: isolate;
}
.ol-cro-line__img a { display: block; width: 100%; height: 100%; }
.ol-cro-line__img img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	border-radius: 5px;
	object-fit: contain;
	background: transparent;
	mix-blend-mode: multiply;
}
.ol-cro-line__name { font-size: 15px; font-weight: 600; line-height: 1.3; }
html body .ol-cro .ol-cro-line__name a { color: var(--cro-ink) !important; text-decoration: none !important; }
.ol-cro-line__name dl.variation {
	display: flex;
	flex-wrap: wrap;
	gap: 0 6px;
	margin: 3px 0 0;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--cro-muted);
}
.ol-cro-line__name dl.variation dt,
.ol-cro-line__name dl.variation dd,
.ol-cro-line__name dl.variation p { margin: 0; padding: 0; float: none; }
.ol-cro-line__unit { margin-top: 3px; font-size: 13px; color: var(--cro-ink-2); }
.ol-cro-line__unit del { color: var(--cro-muted); margin-right: 3px; }
.ol-cro-line__unit ins { text-decoration: none; color: var(--cro-sun-ink); font-weight: 600; }
.ol-cro-line__each { margin-left: 2px; font-size: 12px; color: var(--cro-muted); }
.ol-cro-line.is-offer .ol-cro-line__name dl.variation { color: var(--cro-sun-ink); }

html body .ol-cro .ol-cro-line__rm a.remove {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var(--cro-muted) !important;
	font-size: 0 !important;
}
html body .ol-cro .ol-cro-line__rm a.remove:hover { background: var(--cro-cream) !important; color: var(--cro-sun-2) !important; }

/* Quantity: product.js injects the theme's −/+ around the input. */
.ol-cro-line__qty .quantity {
	display: inline-flex !important;
	align-items: center;
	height: 38px;
	border: 1px solid var(--cro-line);
	border-radius: var(--cro-r-sm);
	background: var(--cro-paper);
	overflow: hidden;
}
html body .ol-cro .ol-cro-line__qty .quantity input.qty {
	width: 42px !important;
	min-height: 0 !important;
	height: 36px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	text-align: center;
	font-size: 14px !important;
	font-weight: 600;
	-moz-appearance: textfield;
}
.ol-cro-line__qty .quantity input.qty::-webkit-inner-spin-button,
.ol-cro-line__qty .quantity input.qty::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
html body .ol-cro .ol-cro-line__qty .ol-qty-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 34px !important;
	min-width: 0 !important;
	height: 36px;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--cro-ink) !important;
	font-size: 17px !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
}
html body .ol-cro .ol-cro-line__qty .ol-qty-btn:hover { background: var(--cro-cream) !important; }
html body .ol-cro .ol-cro-line__qty :is(.ol-qty-btn, input.qty):focus-visible {
	outline: 2px solid var(--cro-olive) !important;
	outline-offset: -2px !important;
	box-shadow: none !important;
}
.ol-cro-line__name .oasis-co-item__media { display: none; }
html body .ol-cro .ol-cro-sum__table tr.ol-cro-sum__protect td {
	display: block !important;
	width: 100%;
	font-size: 12px !important;
	color: var(--cro-muted) !important;
	text-align: left !important;
}

.ol-cro-cart__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 0 16px;
}
html:not(.no-js) .ol-cro .ol-cro-cart__update { display: none !important; }

.ol-cro-coupon summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	list-style: none;
	cursor: pointer;
	font-size: 13.5px;
	color: var(--cro-olive);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.ol-cro-coupon summary::-webkit-details-marker { display: none; }
.ol-cro-coupon .coupon { display: flex; gap: 8px; margin-top: 10px; }
html body .ol-cro .ol-cro-coupon .coupon input.input-text {
	width: 200px !important;
	min-height: 44px !important;
	padding: 0 12px !important;
	border-radius: var(--cro-r-sm) !important;
	background: var(--cro-paper) !important;
}

/* Rail of suggestions under the lines. */
.ol-cro-reco--rail { margin-top: 26px; }
.ol-cro-reco--rail .ol-cro-reco__list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(168px, 46%);
	gap: 12px;
	overflow-x: auto;
	padding-bottom: 6px;
	scroll-snap-type: x mandatory;
	scrollbar-width: thin;
}
.ol-cro-reco--rail .ol-cro-pc { scroll-snap-align: start; }

/* Summary */
html body .ol-cro .cart_totals.ol-cro-sum {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 20px !important;
}
html body .ol-cro .ol-cro-sum .ol-cro-sum__title {
	margin: 0 0 12px !important;
	font-family: var(--cro-display) !important;
	font-size: 26px !important;
	font-weight: 500 !important;
	color: var(--cro-ink) !important;
}
.ol-cro-sum .ol-cro-clock--sum {
	margin-bottom: 14px;
	padding: 10px 12px;
	border-radius: var(--cro-r-sm);
	background: var(--cro-cream);
}
html body .ol-cro .ol-cro-sum__table,
html body .ol-cro .ol-cro-sum__table tbody,
html body .ol-cro .ol-cro-sum__table tr { display: block; width: 100%; margin: 0; border: 0 !important; background: none !important; }
html body .ol-cro .ol-cro-sum__table tr {
	display: flex !important;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 7px 0 !important;
}
html body .ol-cro .ol-cro-sum__table th,
html body .ol-cro .ol-cro-sum__table td {
	display: block !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	color: var(--cro-ink-2) !important;
	text-align: left;
}
html body .ol-cro .ol-cro-sum__table td { text-align: right; }
html body .ol-cro .ol-cro-sum__table td::before { display: none !important; }
html body .ol-cro .ol-cro-sum__table tr.is-saving td,
html body .ol-cro .ol-cro-sum__table tr.cart-discount td { color: var(--cro-sun-ink) !important; }
html body .ol-cro .ol-cro-sum__table tr.order-total {
	margin-top: 8px !important;
	padding-top: 14px !important;
	border-top: 1px solid var(--cro-line) !important;
}
html body .ol-cro .ol-cro-sum__table tr.order-total th,
html body .ol-cro .ol-cro-sum__table tr.order-total td { font-size: 17px !important; font-weight: 600 !important; color: var(--cro-ink) !important; }
html body .ol-cro .ol-cro-sum__table tr.order-total td strong { font-weight: 600; }
html body .ol-cro .ol-cro-sum__table #shipping_method { margin: 0 !important; padding: 0 !important; list-style: none !important; }
html body .ol-cro .ol-cro-sum__table #shipping_method li { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin: 0 0 5px !important; padding: 0 !important; }
html body .ol-cro .ol-cro-sum__table #shipping_method li input { margin: 0 !important; accent-color: var(--cro-forest); }
html body .ol-cro .ol-cro-sum__table #shipping_method label {
	margin: 0 !important;
	font-size: 13.5px !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--cro-ink-2) !important;
}
html body .ol-cro .ol-cro-sum__table #shipping_method label .amount { font-weight: 600; color: var(--cro-ink); }
html body .ol-cro .ol-cro-sum__table .woocommerce-shipping-destination,
html body .ol-cro .ol-cro-sum__table .woocommerce-shipping-calculator { display: none !important; }

.ol-cro-sum__save {
	margin: 10px 0 0;
	padding: 9px 12px;
	border-radius: var(--cro-r-sm);
	background: var(--cro-sun-tint);
	font-size: 13.5px;
	color: var(--cro-sun-ink);
	text-align: center;
}
.ol-cro-sum__save .amount { font-weight: 600; }

html body .ol-cro .ol-cro-sum .wc-proceed-to-checkout { padding: 16px 0 0 !important; }
html body .ol-cro a.ol-cro-btn.ol-cro-sum__cta { display: flex !important; width: 100% !important; height: 54px; }
.ol-cro-sum__cta .ol-cro-ic { width: 17px; height: 17px; }
.ol-cro-sum__note { margin: 10px 0 0; font-size: 12px; color: var(--cro-muted); text-align: center; }

/* Mobile bottom bar */
.ol-cro-cartbar {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 900;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--cro-line);
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(10px);
	box-shadow: 0 -16px 34px -26px rgba(20, 21, 15, .5);
	transform: translateY(0);
	transition: transform .3s var(--cro-ease);
}
.ol-cro-cartbar.is-hidden { transform: translateY(110%); }
.ol-cro-cartbar__total { display: flex; flex-direction: column; line-height: 1.15; }
.ol-cro-cartbar__total span { font-size: 11.5px; color: var(--cro-muted); }
.ol-cro-cartbar__total b { font-size: 18px; font-weight: 600; }
html body .ol-cro .ol-cro-cartbar .ol-cro-btn.ol-cro-cta { height: 48px; padding: 0 26px !important; }

@media (max-width: 1023px) {
	/* Room under the fixed checkout bar so the footer disclaimer can scroll clear of it. */
	html body.ol-cro-cart-page { padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
}
@media (max-width: 720px) {
	/* 16px stops iOS zooming the page when these fields get focus. */
	html body .ol-cro :is(.ol-cro-oto__search input[type="search"], .ol-cro-line__qty .quantity input.qty, .ol-cro-pc__pick select.ol-cro-pc__select, .ol-cro-coupon .coupon input.input-text) { font-size: 16px !important; }
}
@media (max-width: 700px) {
	body.ol-cro-cart-page .ol-cro-cart { padding: 0 16px; }
}
@media (min-width: 640px) {
	.ol-cro-reco--rail .ol-cro-reco__list { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
	.ol-cro-line {
		grid-template-columns: 84px minmax(0, 1fr) auto auto 34px;
		grid-template-areas:
			"img main qty sub rm"
			"img flag qty sub rm";
		grid-template-rows: auto auto;
		align-items: center;
		row-gap: 8px;
	}
	.ol-cro-line__main { padding-right: 0; align-self: end; }
	.ol-cro-line__flag { align-self: start; max-width: 420px; }
	.ol-cro-line:not(:has(.ol-cro-line__flag)) .ol-cro-line__main { grid-row: 1 / span 2; align-self: center; }
	.ol-cro-line__img { grid-row: 1 / span 2; align-self: center; }
	.ol-cro-line__qty,
	.ol-cro-line__sub { grid-row: 1 / span 2; }
	.ol-cro-line__rm { position: static; grid-area: rm; grid-row: 1 / span 2; align-self: center; justify-self: end; }
	.ol-cro-line__img { width: 84px; height: 84px; padding: 5px; }
	.ol-cro-line__sub { min-width: 84px; text-align: right; }
}
@media (min-width: 1024px) {
	.ol-cro-cart { grid-template-columns: minmax(0, 1fr) 372px; gap: 28px; }
	.ol-cro-cart__side { position: sticky; top: 112px; }
	.ol-cro-cartbar { display: none; }
	.ol-cro-cart__track { padding: 20px 24px 14px; }
	.ol-cro-cart__lines { padding: 4px 24px; }
}

/* --------------------------------------------------------------------------
   Mini cart (inside the theme's .ol-quickcart drawer)
   -------------------------------------------------------------------------- */

.ol-quickcart__body > .widget_shopping_cart_content > .ol-cro-mc { display: flex; flex: 1 0 auto; flex-direction: column; }

/* Line thumbnails on the same warm plate as the cart page and checkout. The theme pins
   the <img> (inside the product link) at the row's top left, so the plate is the row's
   own ::before at that spot and the photo multiplies into it. */
html body .ol-quickcart__body .woocommerce-mini-cart-item { isolation: isolate; }
html body .ol-quickcart__body .woocommerce-mini-cart-item::before {
	content: "" !important;
	display: block !important;
	position: absolute;
	top: 14px;
	left: 0;
	width: 52px;
	height: 52px;
	border-radius: 10px;
	background: radial-gradient(120% 95% at 50% 30%, #fbfaf6 0%, #edeae3 72%, #e5e1d6 100%);
	pointer-events: none;
}
html body .ol-quickcart__body .woocommerce-mini-cart-item img {
	box-sizing: border-box;
	height: 52px !important;
	padding: 4px !important;
	border: 0 !important;
	border-radius: 10px;
	background: transparent !important;
	object-fit: contain;
	mix-blend-mode: multiply;
}
/* Suggestion tiles in the drawer and every thumbnail on the cart page: same plate. */
:is(.ol-quickcart__body, body.ol-cro-cart-page) .ol-cro .ol-cro-pc__img {
	padding: 4px;
	box-sizing: border-box;
	background: radial-gradient(120% 95% at 50% 30%, #fbfaf6 0%, var(--cro-cream-2) 72%, #e5e1d6 100%);
	isolation: isolate;
}
:is(.ol-quickcart__body, body.ol-cro-cart-page) .ol-cro .ol-cro-pc__img img { object-fit: contain; }

/* --------------------------------------------------------------------------
   Delivery panel: one component in the mini cart, on the cart page and at checkout.
   A shipping ticket: the goal on top, a perforated tear line, then two tiles
   ("Delivery", "Order within") and the rules in one quiet line.
   -------------------------------------------------------------------------- */

.ol-cro-dp {
	--dp-bg: var(--cro-cream);
	--dp-cut: var(--cro-paper);
	--dp-line: color-mix(in oklab, var(--cro-forest) 10%, transparent);
	position: relative;
	margin: 6px 0 10px;
	border: 1px solid var(--dp-line);
	border-radius: 14px;
	background: var(--dp-bg);
	overflow: hidden;
	container-type: inline-size;
}
.ol-cro-dp__goal { padding: 14px 16px 14px; }
.ol-cro-dp__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 2px 7px;
	margin: 0 0 10px;
	font-size: 14px;
	line-height: 1.35;
	color: var(--cro-ink-2);
}
.ol-cro-dp__left {
	font-family: var(--cro-ui);
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.015em;
	color: var(--cro-forest);
}
.ol-cro .ol-cro-dp__left .amount { font-variant-numeric: lining-nums tabular-nums; }
.ol-cro-dp__to b { font-weight: 600; color: var(--cro-forest); }
.ol-cro-track--panel.is-complete .ol-cro-dp__head { align-items: center; font-weight: 600; color: var(--cro-forest); }
.ol-cro-dp__ok {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: linear-gradient(135deg, #c2561f, #9e3a1c);
	color: #fff;
}
.ol-cro-dp__ok .ol-cro-ic { width: 13px; height: 13px; }

/* A thicker tube with a glowing leading edge while there's distance left to go. */
.ol-cro-track--panel .ol-cro-tube { height: 22px; }
.ol-cro-track--panel .ol-cro-tube__glass { top: 4px; height: 14px; }
.ol-cro-track--panel:not(.is-complete) .ol-cro-tube__meniscus {
	width: 10px;
	right: -5px;
	background: radial-gradient(circle at 35% 40%, #fff3df 0%, var(--cro-sun-1) 55%, var(--cro-sun-2) 100%);
	box-shadow: 0 0 0 3px rgba(226, 148, 47, .22), 0 0 14px 2px rgba(226, 148, 47, .55);
}
.ol-cro-track--panel .ol-cro-tube__mark { top: 1px; width: 20px; height: 20px; margin-left: -10px; }
.ol-cro-track--panel .ol-cro-tube__mark.is-end { margin-left: -20px; }
.ol-cro-track--panel .ol-cro-tube__mark.is-reached::after { left: 6px; top: 3.5px; }
.ol-cro-track--panel .ol-cro-track__hint { margin: 10px 0 0; }
.ol-cro-dp__legend { position: relative; height: 15px; margin: 6px 0 0; padding: 0; list-style: none; }
.ol-cro-dp__legend li {
	position: absolute;
	top: 0;
	transform: translateX(-50%);
	font-size: 11px;
	line-height: 15px;
	white-space: nowrap;
	color: var(--cro-muted);
}
.ol-cro-dp__legend li.is-end { transform: translateX(-100%); }
.ol-cro-dp__legend li.is-next { font-weight: 600; color: var(--cro-ink-2); }
.ol-cro-dp__legend li.is-reached { color: var(--cro-sun-ink); }

/* "Closes the gap": one tap to the next milestone. */
.ol-cro-pc--gap {
	grid-template-columns: 42px minmax(0, 1fr) auto;
	align-items: center;
	gap: 11px;
	margin-top: 12px;
	padding: 8px 8px 8px 8px;
	border: 1px solid color-mix(in oklab, var(--cro-sun-1) 30%, white);
	border-radius: 12px;
	background: var(--cro-paper);
}
.ol-cro-pc--gap .ol-cro-pc__img { width: 42px; height: 42px; border-radius: 8px; }
.ol-cro-gap__k { display: block; margin-bottom: 1px; font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--cro-sun-ink); }
html body .ol-cro .ol-cro-pc--gap .ol-cro-pc__name {
	display: -webkit-box;
	overflow: hidden;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.25;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
html body .ol-cro .ol-cro-pc--gap .ol-cro-btn.ol-cro-pc__add {
	gap: 5px;
	height: 40px;
	padding: 0 14px 0 11px !important;
	border-color: transparent !important;
	border-radius: 999px !important;
	background: linear-gradient(135deg, #c2561f, #9e3a1c) !important;
	color: #fff !important;
	font-size: 13px !important;
	white-space: nowrap;
	box-shadow: 0 8px 16px -10px rgba(158, 58, 28, .9) !important;
}
html body .ol-cro .ol-cro-pc--gap .ol-cro-btn.ol-cro-pc__add:hover { background: var(--cro-sun-ink) !important; }
.ol-cro-pc--gap .ol-cro-pc__add .ol-cro-ic { width: 14px; height: 14px; }
.ol-cro-pc--gap .ol-cro-pc__add .amount { color: inherit; }

/* The stub, behind a perforated tear line with ticket notches. */
.ol-cro-dp__eta { position: relative; padding: 14px 16px 13px; }
.ol-cro-dp.has-both .ol-cro-dp__eta { border-top: 1.5px dashed color-mix(in oklab, var(--cro-forest) 20%, transparent); }
.ol-cro-dp.has-both .ol-cro-dp__eta::before,
.ol-cro-dp.has-both .ol-cro-dp__eta::after {
	content: "";
	position: absolute;
	top: -9px;
	width: 16px;
	height: 16px;
	border: 1px solid var(--dp-line);
	border-radius: 50%;
	background: var(--dp-cut);
}
.ol-cro-dp.has-both .ol-cro-dp__eta::before { left: -9px; }
.ol-cro-dp.has-both .ol-cro-dp__eta::after { right: -9px; }

.ol-cro-dp__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ol-cro-dp__tile {
	display: grid;
	align-content: start;
	gap: 3px;
	min-width: 0;
	padding: 10px 12px 11px;
	border-radius: 10px;
	background: var(--cro-paper);
	box-shadow: inset 0 0 0 1px var(--dp-line);
}
.ol-cro-dp__k { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--cro-muted); }
.ol-cro-dp__k .ol-cro-ic { width: 16px; height: 16px; color: var(--cro-olive); }
.ol-cro-dp__v { font-size: 17px; font-weight: 700; line-height: 1.2; letter-spacing: -.005em; color: var(--cro-forest); }
.ol-cro-dp__time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ol-cro-dp__s { font-size: 12px; line-height: 1.35; color: var(--cro-ink-2); }
.ol-cro-dp__eta.is-urgent .ol-cro-dp__tile--clock { background: var(--cro-sun-tint); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--cro-sun-1) 40%, white); }
.ol-cro-dp__eta.is-urgent .ol-cro-dp__tile--clock .ol-cro-ic,
.ol-cro-dp__eta.is-urgent .ol-cro-dp__time { color: var(--cro-sun-ink); }
.ol-cro-dp__note { margin: 10px 2px 0; font-size: 11.5px; line-height: 1.45; color: var(--cro-muted); }

/* Narrow spots: stack the tiles. */
@container (max-width: 300px) {
	.ol-cro-dp__tiles { grid-template-columns: minmax(0, 1fr); }
}
/* Wide spots (cart page column): goal and stub side by side, the tear line turns vertical. */
@container (min-width: 620px) {
	.ol-cro-dp.has-both .ol-cro-dp__in { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
	.ol-cro-dp.has-both .ol-cro-dp__goal { padding: 18px 22px 18px; }
	.ol-cro-dp.has-both .ol-cro-dp__eta { padding: 18px 22px 16px; border-top: 0; border-left: 1.5px dashed color-mix(in oklab, var(--cro-forest) 20%, transparent); }
	.ol-cro-dp.has-both .ol-cro-dp__eta::before { top: -9px; left: -9px; }
	.ol-cro-dp.has-both .ol-cro-dp__eta::after { top: auto; right: auto; bottom: -9px; left: -9px; }
}

/* Where it sits. The cart page panel is a white card on the cream page; at checkout it sits
   inside the white order card, so it keeps the cream fill. */
.ol-cro-dp--at-page { --dp-bg: var(--cro-paper); --dp-cut: var(--ol-cream-50, #f5f3ee); margin: 0 0 14px; }
.ol-cro-dp--at-page .ol-cro-dp__tile { background: var(--cro-cream); box-shadow: none; }
.ol-cro-dp--at-co { margin: 0 0 14px; }
body.ol-cro-has-eta .ml-co-arrival { display: none !important; }

.ol-quickcart__body .ol-cro-mc .woocommerce-mini-cart-item .ol-cro-flag { margin-right: -26px; }
.ol-quickcart__body .ol-cro-mc .woocommerce-mini-cart-item.is-offer dl.variation { color: var(--cro-sun-ink); }
.ol-quickcart__body .ol-cro-mc .oasis-qc-price del { margin-right: 4px; color: var(--cro-muted); }
.ol-quickcart__body .ol-cro-mc .oasis-qc-price ins { text-decoration: none; font-weight: 600; color: var(--cro-sun-ink); }

.ol-cro-reco__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }

/* Suggestions in the drawer: a tinted, swipeable tray of tiles, clearly apart from the
   cart lines above (no steppers, no row layout). */
.ol-cro-reco--mini {
	margin: 20px -22px 0;
	padding: 15px 0 16px;
	background: var(--cro-cream-2);
	box-shadow: inset 0 1px 0 color-mix(in oklab, var(--cro-forest) 8%, transparent), inset 0 -1px 0 color-mix(in oklab, var(--cro-forest) 8%, transparent);
}
.ol-cro-reco--mini .ol-cro-reco__head { margin: 0 0 10px; padding: 0 22px; }
.ol-cro-reco--mini .ol-cro-reco__title { margin: 0 !important; font-size: 19px !important; }
.ol-cro-reco__hint { font-size: 11.5px; color: var(--cro-muted); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
	.ol-cro-reco__hint { display: none; }
	/* Mouse users get a slim scrollbar so tiles 3 and 4 are reachable. */
	.ol-cro-reco--mini .ol-cro-reco__list { padding-bottom: 10px; scrollbar-width: thin; scrollbar-color: var(--cro-sand) transparent; }
	.ol-cro-reco--mini .ol-cro-reco__list::-webkit-scrollbar { display: block; height: 6px; }
	.ol-cro-reco--mini .ol-cro-reco__list::-webkit-scrollbar-thumb { border-radius: 3px; background: var(--cro-sand); }
}
.ol-cro-reco--mini .ol-cro-reco__list {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 124px;
	gap: 10px;
	padding: 2px 22px 4px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-padding: 0 22px;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.ol-cro-reco--mini .ol-cro-reco__list::-webkit-scrollbar { display: none; }
.ol-cro-pc--tile {
	grid-template-rows: auto 1fr auto;
	gap: 8px;
	padding: 8px 8px 9px;
	border-radius: 12px;
	box-shadow: 0 1px 0 rgba(37, 37, 24, .05), 0 10px 20px -16px rgba(20, 21, 15, .55);
	scroll-snap-align: start;
}
.ol-cro-pc--tile .ol-cro-pc__img { aspect-ratio: 1 / 1; border-radius: 8px; }
html body .ol-cro .ol-cro-pc--tile .ol-cro-pc__name {
	display: -webkit-box;
	min-height: 2.5em;
	overflow: hidden;
	font-size: 12.5px;
	font-weight: 500;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
.ol-cro-pc--tile .ol-cro-pc__price { font-size: 12.5px; }
.ol-cro-pc--tile .ol-cro-pc__pick { margin-top: 6px; }
html body .ol-cro .ol-cro-pc--tile .ol-cro-pc__pick select.ol-cro-pc__select { width: 100% !important; height: 38px; }
html body .ol-cro .ol-cro-pc--tile .ol-cro-btn.ol-cro-pc__add { width: 100% !important; gap: 5px; height: 40px; font-size: 13px !important; }
.ol-cro-pc--tile .ol-cro-pc__add .ol-cro-ic { width: 14px; height: 14px; }

.ol-cro-mc__foot {
	position: sticky;
	bottom: -22px;
	z-index: 2;
	margin: auto -22px -22px;
	padding: 4px 22px calc(20px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--cro-line);
	background: var(--cro-paper);
	box-shadow: 0 -18px 30px -26px rgba(20, 21, 15, .45);
}
.ol-quickcart__body .ol-cro-mc__foot .woocommerce-mini-cart__total { margin: 0 !important; padding: 12px 0 4px !important; border-top: 0 !important; }
.ol-cro-mc__save {
	display: flex;
	justify-content: space-between;
	margin: 0 0 4px;
	font-size: 13px;
	color: var(--cro-sun-ink);
}
.ol-cro-mc__save b { font-weight: 600; }
html body .ol-quickcart .ol-cro-mc__btns {
	display: grid !important;
	gap: 8px;
	margin: 10px 0 0 !important;
	padding: 0 !important;
}
html body .ol-quickcart .ol-cro .ol-cro-mc__btns a.ol-cro-btn.ol-cro-cta { width: 100% !important; height: 52px; }
html body .ol-quickcart .ol-cro .ol-cro-mc__view {
	display: block;
	padding: 6px 0 0;
	color: var(--cro-olive) !important;
	font-size: 13.5px;
	text-align: center;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	background: none !important;
	border: 0 !important;
}

.ol-cro-mc--empty .woocommerce-mini-cart__empty-message { margin: 28px 0 8px !important; }

/* --------------------------------------------------------------------------
   Checkout
   -------------------------------------------------------------------------- */

.ol-cro-co[hidden] { display: none !important; }
/* The checkout wrapper only carries the fragment key; the delivery panel styles itself. */
.ol-cro-co { margin: 0; }

/* Tier flag inside the checkout review table cell. */
.woocommerce-checkout-review-order-table .ol-cro-flag { margin: 8px 0 2px; font-size: 12px; }

/* --------------------------------------------------------------------------
   Product page
   -------------------------------------------------------------------------- */

html body.oasis-redesign.single-product div.product form.cart .ol-cro-pdp {
	display: grid;
	grid-column: 1 / -1;
	flex: 1 1 100%;
	gap: 9px;
	width: 100%;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px dashed color-mix(in oklab, var(--cro-forest) 14%, transparent);
}
.ol-cro-pdp__ship {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.35;
	color: var(--cro-ink-2);
}
.ol-cro-pdp__ship .ol-cro-ic { color: var(--cro-olive); }
.ol-cro-pdp__ship b { color: var(--cro-forest); font-weight: 600; }
.ol-cro-pdp .ol-cro-flag { margin-top: 0; }

/* --------------------------------------------------------------------------
   First-order offer dialog
   -------------------------------------------------------------------------- */

.ol-cro-oto {
	position: fixed;
	inset: 0;
	z-index: 100500;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.ol-cro-oto__scrim {
	position: absolute;
	inset: 0;
	background: rgba(20, 21, 15, .55);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .3s var(--cro-ease);
}
.ol-cro-oto__panel {
	position: relative;
	width: 100%;
	max-height: 92dvh;
	overflow-y: auto;
	padding: 26px 18px calc(18px + env(safe-area-inset-bottom));
	border-radius: 18px 18px 0 0;
	background: var(--cro-paper);
	box-shadow: 0 -30px 80px -30px rgba(20, 21, 15, .6);
	transform: translateY(24px);
	opacity: 0;
	transition: transform .4s var(--cro-ease), opacity .3s var(--cro-ease);
	overscroll-behavior: contain;
}
.ol-cro-oto__panel:focus { outline: none; }
.ol-cro-oto.is-open .ol-cro-oto__scrim { opacity: 1; }
.ol-cro-oto.is-open .ol-cro-oto__panel { transform: none; opacity: 1; }
html body .ol-cro .ol-cro-btn.ol-cro-oto__x {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 36px !important;
	height: 36px;
	padding: 0 !important;
	border-color: var(--cro-line) !important;
	border-radius: 50% !important;
	background: var(--cro-paper) !important;
}
html body .ol-cro .ol-cro-oto__title {
	margin: 0 44px 8px 0 !important;
	font-family: var(--cro-display) !important;
	font-size: 29px !important;
	font-weight: 500 !important;
	line-height: 1.08 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--cro-ink) !important;
}
.ol-cro-oto__lead { margin: 0 0 18px; font-size: 15px; line-height: 1.45; color: var(--cro-ink-2); }

.ol-cro-oto__top {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 104px;
	gap: 10px;
	margin: 0 -18px 20px;
	padding: 0 18px 4px;
	overflow-x: auto;
	list-style: none;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: 18px;
}
.ol-cro-oto__top li { scroll-snap-align: start; text-align: center; }
.ol-cro-oto__thumb { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--cro-r); background: var(--cro-cream-2); }
.ol-cro-oto__thumb img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.ol-cro-oto__pname { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 500; line-height: 1.25; }

.ol-cro-oto__actions { display: grid; gap: 10px; }
html body .ol-cro .ol-cro-oto__actions .ol-cro-btn { width: 100% !important; height: 50px; }

.ol-cro-oto__bar {
	position: sticky;
	top: -26px;
	z-index: 2;
	display: grid;
	gap: 10px;
	margin: 0 -18px 14px;
	padding: 10px 18px;
	background: rgba(255, 255, 255, .96);
	backdrop-filter: blur(8px);
}
.ol-cro-oto__search {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 12px;
	border: 1px solid var(--cro-line);
	border-radius: var(--cro-r-sm);
	background: var(--cro-cream);
	color: var(--cro-muted);
}
html body .ol-cro .ol-cro-oto__search input[type="search"] {
	flex: 1;
	width: 100% !important;
	min-height: 0 !important;
	height: 40px;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 15px !important;
	outline: none;
}
.ol-cro-oto__left {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	font-weight: 500;
	color: var(--cro-sun-ink);
}
.ol-cro-oto__left::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--cro-sun-1), var(--cro-sun-2));
}
.ol-cro-oto__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ol-cro-oto__empty { grid-column: 1 / -1; margin: 18px 0; color: var(--cro-muted); text-align: center; }
.ol-cro-oto__grid.is-loading { opacity: .5; }
.ol-cro-oto__step[data-left="0"] .ol-cro-pc:not(.is-added) .ol-cro-pc__add { opacity: .4; pointer-events: none; }
.ol-cro-oto__foot {
	position: sticky;
	bottom: calc(-18px - env(safe-area-inset-bottom));
	margin: 16px -18px calc(-18px - env(safe-area-inset-bottom));
	padding: 12px 18px calc(16px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--cro-line);
	background: var(--cro-paper);
}
html body .ol-cro .ol-cro-oto__foot .ol-cro-btn { display: flex !important; width: 100% !important; }

body.ol-cro-oto-open { overflow: hidden; }

@media (min-width: 720px) {
	.ol-cro-oto { align-items: center; padding: 24px; }
	.ol-cro-oto__panel { width: min(600px, 100%); padding: 34px 34px 28px; border-radius: 18px; transform: translateY(14px) scale(.98); }
	.ol-cro-oto__panel:has([data-step="pick"]) { width: min(880px, 100%); }
	.ol-cro-oto__top { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0 0 24px; padding: 0; overflow: visible; }
	.ol-cro-oto__actions { grid-template-columns: 1fr 1fr; }
	.ol-cro-oto__bar { grid-template-columns: 1fr auto; align-items: center; top: -34px; margin: 0 -34px 16px; padding: 12px 34px; }
	.ol-cro-oto__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
	.ol-cro-oto__foot { bottom: -28px; margin: 18px -34px -28px; padding: 14px 34px 22px; }
	html body .ol-cro .ol-cro-oto__foot .ol-cro-btn { width: auto !important; margin-left: auto; }
	html body .ol-cro .ol-cro-oto__title { font-size: 34px !important; }
}
@media (min-width: 980px) {
	.ol-cro-oto__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Checkout exit offer — the one dark surface in the journey. The sunset seal
   breaks the top edge of the sheet; everything else stays quiet.
   -------------------------------------------------------------------------- */

.ol-cro-exit {
	position: fixed;
	inset: 0;
	z-index: 100500;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.ol-cro-exit__scrim {
	position: absolute;
	inset: 0;
	background: rgba(20, 21, 15, .62);
	backdrop-filter: blur(3px);
	opacity: 0;
	transition: opacity .3s var(--cro-ease);
}
.ol-cro-exit__panel {
	--exit-cream: #f5f3ee;
	position: relative;
	width: 100%;
	padding: 58px 20px calc(18px + env(safe-area-inset-bottom));
	border-radius: 18px 18px 0 0;
	background:
		radial-gradient(90% 70% at 0% 0%, rgba(226, 148, 47, .16), transparent 60%),
		var(--cro-deep);
	color: var(--exit-cream);
	box-shadow: 0 -30px 80px -30px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(245, 243, 238, .08);
	transform: translateY(28px);
	opacity: 0;
	transition: transform .42s var(--cro-ease), opacity .3s var(--cro-ease);
	overflow: visible; /* the seal breaks the top edge */
}
.ol-cro-exit__panel:focus { outline: none; }
.ol-cro-exit.is-open .ol-cro-exit__scrim { opacity: 1; }
.ol-cro-exit.is-open .ol-cro-exit__panel { transform: none; opacity: 1; }

.ol-cro-exit__seal {
	position: absolute;
	top: -44px;
	left: 20px;
	display: grid;
	place-content: center;
	width: 92px;
	height: 92px;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 28%, #f0b25a 0%, var(--cro-sun-1) 38%, var(--cro-sun-2) 100%);
	box-shadow: 0 16px 34px -14px rgba(189, 74, 36, .85), inset 0 0 0 3px rgba(255, 255, 255, .18), inset 0 0 0 6px rgba(32, 33, 26, .12);
	color: #fff;
	text-align: center;
	transform: rotate(-9deg) scale(.6);
	opacity: 0;
	transition: transform .55s var(--cro-spring) .12s, opacity .25s var(--cro-ease) .12s;
}
.ol-cro-exit.is-open .ol-cro-exit__seal { transform: rotate(-9deg) scale(1); opacity: 1; }
.ol-cro-exit__seal b {
	font-family: var(--cro-display);
	font-size: 34px;
	font-weight: 600;
	font-variant-numeric: lining-nums;
	line-height: .9;
	letter-spacing: -.01em;
}
.ol-cro-exit__seal small {
	margin-top: 2px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
}

html body .ol-cro .ol-cro-btn.ol-cro-exit__x {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 38px !important;
	height: 38px;
	padding: 0 !important;
	border-color: rgba(245, 243, 238, .22) !important;
	border-radius: 50% !important;
	background: transparent !important;
	color: var(--exit-cream) !important;
}
html body .ol-cro .ol-cro-btn.ol-cro-exit__x:hover { border-color: rgba(245, 243, 238, .6) !important; }
html body .ol-cro .ol-cro-exit .ol-cro-btn:focus-visible { outline-color: var(--cro-sun-1) !important; }

html body .ol-cro .ol-cro-exit__title {
	margin: 0 0 10px !important;
	font-family: var(--cro-display) !important;
	font-size: 38px !important;
	font-weight: 500 !important;
	line-height: 1.02 !important;
	letter-spacing: -.005em !important;
	text-transform: none !important;
	color: var(--exit-cream) !important;
}
.ol-cro-exit__lead {
	margin: 0 0 22px;
	max-width: 40ch;
	font-size: 15.5px;
	line-height: 1.5;
	color: rgba(245, 243, 238, .8);
}
.ol-cro-exit__save {
	display: block;
	margin-top: 6px;
	font-weight: 600;
	color: #f3c58a;
	font-variant-numeric: tabular-nums;
}
.ol-cro-exit__save:empty { display: none; }

html body .ol-cro .ol-cro-btn.ol-cro-cta.ol-cro-exit__yes {
	display: flex !important;
	width: 100% !important;
	height: 54px;
	background: var(--exit-cream) !important;
	color: var(--cro-deep) !important;
	box-shadow: 0 18px 36px -22px rgba(0, 0, 0, .9) !important;
}
html body .ol-cro .ol-cro-btn.ol-cro-cta.ol-cro-exit__yes:hover { background: #fff !important; color: var(--cro-deep) !important; }

html body .ol-cro .ol-cro-btn.ol-cro-exit__no {
	display: flex !important;
	width: 100% !important;
	height: 46px;
	margin-top: 4px;
	color: rgba(245, 243, 238, .74) !important;
	font-size: 14px !important;
	text-decoration: underline !important;
	text-decoration-color: rgba(245, 243, 238, .3) !important;
	text-underline-offset: 3px;
}
html body .ol-cro .ol-cro-btn.ol-cro-exit__no:hover { color: var(--exit-cream) !important; text-decoration-color: currentColor !important; }

.ol-cro-exit__fine {
	margin: 6px 0 0;
	font-size: 12px;
	line-height: 1.4;
	text-align: center;
	color: rgba(245, 243, 238, .58);
}

body.ol-cro-exit-open { overflow: hidden; }

@media (min-width: 640px) {
	.ol-cro-exit { align-items: center; padding: 64px 24px 24px; }
	.ol-cro-exit__panel {
		width: min(460px, 100%);
		padding: 64px 36px 26px;
		border-radius: 20px;
		transform: translateY(16px) scale(.98);
	}
	.ol-cro-exit__seal { top: -46px; left: 32px; width: 100px; height: 100px; }
	.ol-cro-exit__seal b { font-size: 37px; }
	html body .ol-cro .ol-cro-exit__title { font-size: 44px !important; }
}

/* --------------------------------------------------------------------------
   Toast
   -------------------------------------------------------------------------- */

.ol-cro-toast {
	position: fixed;
	left: 50%;
	bottom: calc(20px + env(safe-area-inset-bottom));
	z-index: 100600;
	max-width: min(440px, calc(100vw - 32px));
	padding: 12px 16px;
	border-radius: var(--cro-r);
	background: var(--cro-deep);
	color: #f5f3ee;
	font-family: var(--cro-ui);
	font-size: 14px;
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6);
	transform: translate(-50%, 20px);
	opacity: 0;
	/* Never takes taps: a faded toast sits over the drawer's Checkout button and mobile sticky bars. */
	pointer-events: none;
	transition: transform .3s var(--cro-ease), opacity .3s var(--cro-ease);
}
.ol-cro-toast.is-on { transform: translate(-50%, 0); opacity: 1; }

/* --------------------------------------------------------------------------
   After sign-up: arrival notice + "Your cart is saved" bar.
   A slim white strip in the page flow right under the sticky header. It arrives once,
   on the first page of a visit, and only leaves when the shopper dismisses it (no timer,
   so the page never jumps while someone is reading or typing). The header (z 60)
   slides over it on scroll.
   -------------------------------------------------------------------------- */

.ol-cro-saved,
.ol-cro-hello {
	position: relative;
	z-index: 1;
	border-bottom: 1px solid var(--cro-line);
	background: var(--cro-paper);
	opacity: 0;
	transition: opacity .3s var(--cro-ease);
}
.ol-cro-saved.is-on,
.ol-cro-hello.is-on { opacity: 1; }

.ol-cro-saved__in,
.ol-cro-hello__in {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 9px 26px;
}

html body .ol-cro :is(.ol-cro-saved__txt, .ol-cro-saved__gap, .ol-cro-hello__txt) {
	min-width: 0;
	margin: 0 !important;
	color: var(--cro-ink-2);
	font-family: var(--cro-ui);
	font-size: 14.5px;
	line-height: 1.35;
}
html body .ol-cro .ol-cro-saved__txt { flex: 0 1 auto; }
html body .ol-cro :is(.ol-cro-saved__gap, .ol-cro-hello__txt) { flex: 1 1 auto; }

.ol-cro-saved__ic,
.ol-cro-hello__ic {
	display: inline-grid;
	place-items: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--cro-cream-2);
	color: var(--cro-forest);
}
.ol-cro-hello__ic { width: 28px; height: 28px; background: var(--cro-forest); color: #f5f3ee; }
.ol-cro-hello__ic .ol-cro-ic { width: 16px; height: 16px; }

.ol-cro-saved__title { color: var(--cro-forest); font-weight: 600; }
.ol-cro-saved__meta::before { content: "\00b7"; margin: 0 7px; color: var(--cro-muted); }
.ol-cro-saved__meta .amount { font-weight: 600; color: var(--cro-ink); }
html body .ol-cro .ol-cro-saved__gap { color: var(--cro-muted); }
.ol-cro-saved__gap::before { content: "\2014"; margin: 0 8px 0 0; color: var(--cro-line); }
.ol-cro-saved__gap b { color: var(--cro-forest); font-weight: 600; }
html body .ol-cro .ol-cro-hello__txt { color: var(--cro-forest); font-weight: 500; text-wrap: balance; }

html body .ol-cro a.ol-cro-btn.ol-cro-saved__go {
	flex: 0 0 auto;
	height: 40px;
	margin-left: auto;
	padding: 0 16px 0 18px !important;
	background: var(--cro-forest) !important;
	color: #f5f3ee !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	white-space: nowrap;
}
html body .ol-cro a.ol-cro-btn.ol-cro-saved__go:hover { background: var(--cro-deep) !important; color: #fff !important; }
.ol-cro-saved__go-short { display: none; }

html body .ol-cro .ol-cro-btn:is(.ol-cro-saved__x, .ol-cro-hello__x) {
	flex: 0 0 auto;
	width: 40px !important;
	height: 40px;
	padding: 0 !important;
	color: var(--cro-muted) !important;
}
html body .ol-cro .ol-cro-btn:is(.ol-cro-saved__x, .ol-cro-hello__x):hover { background: var(--cro-cream) !important; color: var(--cro-ink) !important; }

@media (max-width: 760px) {
	.ol-cro-hello__in { gap: 10px; padding: 8px 6px 8px 16px; }
	html body .ol-cro .ol-cro-hello__txt { font-size: 14px; }
	/* Two rows: what's saved + Checkout + close, then the free-shipping line full width. */
	.ol-cro-saved__in {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
		grid-template-areas: "txt go x" "gap gap gap";
		gap: 2px 8px;
		padding: 9px 6px 10px 16px;
	}
	.ol-cro-saved__ic { display: none; }
	html body .ol-cro .ol-cro-saved__txt { grid-area: txt; font-size: 14px; line-height: 1.3; }
	html body .ol-cro .ol-cro-saved__gap { grid-area: gap; padding-right: 10px; font-size: 13px; line-height: 1.3; }
	.ol-cro-saved__title,
	.ol-cro-saved__meta { display: block; }
	.ol-cro-saved__meta::before,
	.ol-cro-saved__gap::before { content: none; }
	html body .ol-cro a.ol-cro-btn.ol-cro-saved__go { grid-area: go; height: 44px; padding: 0 12px 0 14px !important; }
	/* Visible label "Checkout"; the accessible name stays "Continue to checkout". */
	.ol-cro-saved__go-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
	.ol-cro-saved__go-short { display: inline; }
	html body .ol-cro .ol-cro-btn:is(.ol-cro-saved__x, .ol-cro-hello__x) { grid-area: x; width: 44px !important; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
	.ol-cro-saved,
	.ol-cro-hello { transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
	.ol-cro *,
	.ol-cro *::before,
	.ol-cro *::after,
	.ol-cro-toast { transition: none !important; animation: none !important; }
}