/* Reef Casa Slider — every value below traces to a field in the editor. */

.rcs{
	position:relative;
	font-family:var(--rcs-font);
	color:#fff;
	-webkit-font-smoothing:antialiased;
	background:#07100f;
	/* escape the theme's content padding so it reaches both screen edges */
	width:100vw;
	max-width:100vw;
	margin-left:calc(50% - 50vw);
	margin-right:calc(50% - 50vw);
}
.rcs *{box-sizing:border-box}

/* ---------- scroll track ---------- */
.rcs-track{
	height:calc(var(--rcs-panel-h) - var(--rcs-fit, 0px));
	overflow-y:auto;
	overflow-x:hidden;
	scroll-snap-type:y mandatory;
	scroll-behavior:smooth;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:none;
}
.rcs-track::-webkit-scrollbar{display:none}

.rcs-panel{
	position:relative;
	height:calc(100% - var(--rcs-peek));
	min-height:calc(100% - var(--rcs-peek));
	scroll-snap-align:start;
	scroll-snap-stop:always;
	overflow:hidden;
}
.rcs-panel:last-child{height:100%;min-height:100%}

.rcs-shot{
	position:absolute;inset:0;
	background:#07100f center/cover no-repeat;
}

/* ---------- caption ---------- */
.rcs-cap{
	position:absolute;left:0;right:0;bottom:0;z-index:3;
	padding:var(--rcs-scrim-top) 24px 12px;
	background:linear-gradient(180deg,
		rgba(0,0,0,0),
		rgba(0,0,0,calc(var(--rcs-scrim) * .46)) 38%,
		rgba(0,0,0,var(--rcs-scrim)) 100%);
}
.rcs-cap h2{
	margin:0 0 0 -10px;padding:0;
	font-size:var(--rcs-name-size);
	font-weight:var(--rcs-name-weight);
	letter-spacing:var(--rcs-name-track);
	line-height:var(--rcs-name-lead);
	color:var(--rcs-name-color);
	text-shadow:0 2px 18px rgba(0,0,0,.55);
}
.rcs-capline{
	display:flex;align-items:flex-end;justify-content:space-between;
	gap:12px;margin-top:10px;
}
.rcs-cap p{
	margin:0 0 0 var(--rcs-spec-indent);padding:0;min-width:0;
	font-size:clamp(9.45px,2.7vw,calc(var(--rcs-spec-size) * .9));
	font-weight:600;
	letter-spacing:var(--rcs-spec-track);
	text-transform:var(--rcs-spec-caps);
	color:var(--rcs-spec-color);
	opacity:var(--rcs-spec-alpha);
	white-space:nowrap;
	text-shadow:0 2px 18px rgba(0,0,0,.55);
}

/* ---------- buttons ---------- */
.rcs-actions{
	/* equal columns, so both pills are always the same width */
	display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
	align-items:center;gap:6px;flex:0 0 auto;
	margin-right:-12px;
	margin-top:calc(var(--rcs-pill-h) * -.45);
	margin-bottom:0;
}
/* Scoped under .rcs and doubled up so theme button styles cannot win, and
   every property a theme commonly sets on buttons is stated explicitly. */
.rcs .rcs-pill.rcs-pill{
	box-sizing:border-box;
	height:calc(var(--rcs-pill-h) * .9);
	min-height:0;max-height:none;
	width:auto;min-width:0;max-width:none;
	padding:0 8px;margin:0;
	border:0;border-radius:100px;outline:0;
	display:inline-flex;align-items:center;justify-content:center;
	gap:calc(var(--rcs-pill-size) * .375);
	font-family:var(--rcs-font);
	font-size:calc(var(--rcs-pill-size) * .9);
	font-weight:600;line-height:1;letter-spacing:-.005em;
	text-transform:none;text-decoration:none;text-align:center;
	white-space:nowrap;cursor:pointer;
	box-shadow:none;text-shadow:none;
	-webkit-appearance:none;appearance:none;
}
.rcs .rcs-solid.rcs-solid,
.rcs .rcs-solid.rcs-solid:hover,
.rcs .rcs-solid.rcs-solid:focus{background:#fff;color:#0b1a19}
.rcs .rcs-pill.rcs-solid.is-loading{
	background:var(--rcs-active);color:#fff;pointer-events:none;
}
.rcs .rcs-pill.rcs-solid.is-loading::after{
	content:"";width:calc(var(--rcs-pill-size) * .9);height:calc(var(--rcs-pill-size) * .9);
	margin-left:6px;border-radius:50%;
	border:2px solid rgba(255,255,255,.45);border-top-color:#fff;
	animation:rcs-spin .6s linear infinite;
}
@keyframes rcs-spin{to{transform:rotate(360deg)}}
.rcs .rcs-glass.rcs-glass,
.rcs .rcs-glass.rcs-glass:hover,
.rcs .rcs-glass.rcs-glass:focus{
	background:rgba(255,255,255,.16);color:#fff;
	-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
	box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);
}
.rcs .rcs-pill svg{
	width:calc(var(--rcs-pill-size) * .9);height:calc(var(--rcs-pill-size) * .9);
	stroke:var(--rcs-plus);stroke-width:2.6;fill:none;flex:0 0 auto;
}
.rcs .rcs-pill:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---------- header ---------- */
.rcs-head{
	position:absolute;top:0;left:0;right:0;z-index:6;
	padding:18px 24px 0;pointer-events:none;
	display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
}
.rcs-switch{display:flex;align-items:center;gap:12px;pointer-events:auto}
.rcs-ser{
	border:0;background:transparent;padding:0;cursor:pointer;
	font-family:var(--rcs-font);
	font-size:var(--rcs-header-size);font-weight:600;letter-spacing:.15em;
	text-transform:uppercase;color:#fff;white-space:nowrap;
	transition:opacity .55s ease,color .55s ease;
}
.rcs-ser[data-active="true"]{opacity:1;color:var(--rcs-active);cursor:default}
.rcs-ser[data-active="false"]{opacity:var(--rcs-idle);color:#fff}
.rcs-ser:focus-visible{outline:2px solid #fff;outline-offset:4px;border-radius:2px}
.rcs-bar{width:1px;height:11px;background:var(--rcs-active);flex:0 0 auto}

@keyframes rcs-ping{
	0%{text-shadow:0 0 0 rgba(255,255,255,0)}
	30%{text-shadow:0 0 18px var(--rcs-active)}
	100%{text-shadow:0 0 0 rgba(255,255,255,0)}
}
.rcs-ser.is-ping{animation:rcs-ping 1.1s ease}

.rcs-dims{
	margin-top:-4px;font-size:var(--rcs-dims-size);color:rgba(255,255,255,.5);
	transition:margin-left .45s cubic-bezier(.4,0,.2,1);
	font-variant-numeric:tabular-nums;
}
.rcs-dims-base,.rcs-dims-h{display:inline-block;transition:opacity .18s ease}
.rcs-dims-h{margin-left:.32em}

.rcs-glyph{display:block;flex:0 0 auto;margin-top:2px;width:38px;transition:height .45s ease}
.rcs-glyph .rcs-water{transition:transform .5s cubic-bezier(.4,0,.2,1)}

/* ---------- scroll hint ---------- */
.rcs-cue{
	position:absolute;left:50%;bottom:196px;z-index:4;
	color:rgba(255,255,255,.5);transition:opacity .45s ease;
	animation:rcs-nudge 2.4s ease-in-out infinite;
}
.rcs-cue svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.7;fill:none;display:block}
.rcs-cue.is-gone{opacity:0}
@keyframes rcs-nudge{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

/* ---------- compare sheet ---------- */
.rcs-scrim{
	position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.5);
	opacity:0;pointer-events:none;transition:opacity .3s ease;
}
.rcs-scrim.is-open{opacity:1;pointer-events:auto}
.rcs-sheet{
	position:fixed;left:0;right:0;bottom:0;z-index:9999;
	height:92svh;background:#fff;color:#1d1d1f;border-radius:20px 20px 0 0;
	transform:translateY(100%);transition:transform .38s cubic-bezier(.32,.72,0,1);
	display:flex;flex-direction:column;overflow:hidden;
}
.rcs-sheet.is-open{transform:translateY(0)}
.rcs-sheet-top{padding:28px 22px 6px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.rcs-sheet-title{margin:0;font-size:32px;font-weight:700;letter-spacing:-.03em;line-height:1.08;color:#1d1d1f}
.rcs-close{
	flex:0 0 auto;width:34px;height:34px;border:0;border-radius:50%;
	background:#1d1d1f;color:#fff;font-size:20px;line-height:1;cursor:pointer;
}
.rcs-sheet-body{flex:1;overflow-y:auto;padding:14px 22px 24px;-webkit-overflow-scrolling:touch}
.rcs-pane{display:none}
.rcs-pane.is-on{display:block}
.rcs-lede{font-size:15px;line-height:1.45;color:#6e6e73;margin:0 0 20px}
.rcs-lede b{color:#1d1d1f;font-weight:600}
.rcs-trio{width:100%;height:auto;display:block}
.rcs-trio-labels{display:flex;gap:12px;margin-top:12px}
.rcs-trio-labels div{flex:1;text-align:center}
.rcs-tname{font-size:15px;font-weight:600;letter-spacing:-.01em;color:inherit;text-decoration:none;display:inline-block}
.rcs-tname:hover{text-decoration:underline}
html:not(.rcs-ca) .rcs-tname[data-us]{}
.rcs-tspec{font-size:13px;color:#6e6e73;margin-top:3px;line-height:1.35;font-variant-numeric:tabular-nums;white-space:nowrap}
.rcs-sheet table{width:100%;border-collapse:collapse;margin-top:4px}
.rcs-sheet th,.rcs-sheet td{padding:13px 6px;text-align:center;font-size:14px;border-bottom:1px solid #ececee}
.rcs-sheet th{font-weight:600;font-size:13px;color:#6e6e73}
.rcs-sheet th:first-child,.rcs-sheet td:first-child{text-align:left;font-weight:500}
.rcs-tick{color:#1d6c69;font-size:16px}
.rcs-tabs{display:flex;gap:6px;padding:10px 14px 26px;border-top:1px solid #ececee;background:#fff;flex:0 0 auto}
.rcs-tab{
	flex:1;border:0;background:transparent;border-radius:14px;padding:10px 4px;
	font-family:var(--rcs-font);font-size:12px;font-weight:600;color:#86868b;cursor:pointer;
	display:flex;flex-direction:column;align-items:center;gap:6px;
}
.rcs-tab svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6}
.rcs-tab[aria-selected="true"]{background:#1d1d1f;color:#fff}

@media (prefers-reduced-motion:reduce){
	.rcs-track{scroll-behavior:auto}
	.rcs *{transition:none !important;animation:none !important}
}

/* ---------- gallon figure carries its own colour ---------- */
.rcs-cap p .rcs-gal{color:var(--rcs-gal);font-size:clamp(10.5px,3vw,var(--rcs-spec-size))}

/* ---------- compare sheet, refined ---------- */
.rcs-sheet{height:auto;max-height:92svh}
.rcs-sheet-top{padding:12px 20px 2px 14px}
.rcs-sheet-title{font-size:var(--rcs-sheet-title);white-space:nowrap;line-height:1.08}
.rcs-sheet-swap{
	margin-top:4px;padding:0;border:0;background:none;
	font-family:var(--rcs-font);font-size:12px;font-weight:500;
	color:#a1a1a6;cursor:pointer;white-space:nowrap;
}
.rcs-sheet-swap:hover{color:#6e6e73}
.rcs-swap-plus{color:var(--rcs-active);font-weight:600}
.rcs-close{width:25px;height:25px;background:var(--rcs-close);font-size:13px;align-self:flex-start}
.rcs-sheet-body{
	padding:6px 22px 18px;
	transition:opacity .22s ease,transform .22s ease;
}
.rcs-sheet-body.is-swapping{opacity:0;transform:translateY(6px)}
.rcs-lede{font-size:var(--rcs-sheet-body);line-height:1.4;margin-bottom:14px}
.rcs-sheet th,.rcs-sheet td{padding:9px 6px;font-size:var(--rcs-sheet-table)}

.rcs-lit{font-size:.8em;color:#8e8e93}

.rcs-inc{display:flex;align-items:center;gap:9px;text-align:left}
.rcs-inc svg{
	width:18px;height:18px;flex:0 0 auto;
	stroke:#86868b;fill:none;stroke-width:1.5;
	stroke-linecap:round;stroke-linejoin:round;
}

.rcs-tab{background:#fff;border:1.5px solid #e6e6e8;transition:border-color .25s ease,color .25s ease}
.rcs-tab svg{stroke:#86868b}
.rcs-tab[aria-selected="true"]{background:#fff;border-color:var(--rcs-tab-active);color:#1d1d1f}

/* ---------- prices ---------- */
.rcs .rcs-pill.rcs-build-ca,
.rcs .rcs-pill.rcs-build-us{display:none}
html.rcs-ca .rcs .rcs-pill.rcs-build-ca{display:inline-flex}
html:not(.rcs-ca) .rcs .rcs-pill.rcs-build-us{display:inline-flex}
.rcs-money-ca,.rcs-money-us{display:none}
html.rcs-ca .rcs-money-ca{display:inline}
html:not(.rcs-ca) .rcs-money-us{display:inline}