/* ==========================================================================
   Build Your Own Trap configurator :: /build/
   Stage A static mockup. Loaded after main.css / interior.css / shop.css,
   so it can lean on the theme variables declared in main.css :root.

   Theme rules this file deliberately follows:
     - square corners (the theme forces border-radius: 0 on controls)
     - Exo italic uppercase for anything button-like
     - #f26122 orange as the only accent
   ========================================================================== */

/* --------------------------------------------------------------------------
   Slim header :: pairs with includes/sections/header-slim.q

   The standard header is 170px and js/visionamp.js toggles .up / .down on
   EVERY <header> as you scroll -- .up pulls it to top:-90px to hide the
   utility bar. This header has no utility bar to hide, so both states have to
   be pinned flat or the nav would slide off the top of the screen. The script
   is shared by the whole site, so it is neutralised here rather than changed.
   -------------------------------------------------------------------------- */

@media(min-width:1200px){

	header.header-slim,
	header.header-slim.up,
	header.header-slim.down{
		top: 0;
		height: 80px;
	}
	header.header-slim .bottom{
		height: 80px;
	}
	header.header-slim .bottom .logo,
	header.header-slim.up .bottom .logo,
	header.header-slim.down .bottom .logo{
		margin-top: 0;
		width: 240px;
	}
	/* interior.css reserves 170px here for the tall header. Ours is 80px, and
	   both declarations are !important, so this one wins on source order --
	   build.css is emitted after interior.css via $RUBIX->css. */
	[data-canvas=container]{
		padding-top: 80px !important;
	}

}

.build-label{
	font-family: var(--secondary-font);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--dark-gray-color);
	margin-bottom: 6px;
	display: block;
}
.build-hint{
	font-size: 12px;
	color: var(--light-gray-color);
	margin-top: 6px;
}
.build-hint.is-warning{
	color: var(--primary-color);
}

/* --------------------------------------------------------------------------
   Stages :: the three top-level panels (build, delivery, checkout)

   Only one is open at a time. A stage stays hidden until it is unlocked by
   the step before it, and once unlocked its header stays clickable so the
   customer can go back.
   -------------------------------------------------------------------------- */

.build-stage{
	border: 1px solid var(--extra-light-gray-color);
	background: #FFF;
	margin-bottom: 16px;
}
.build-stage:not(.is-unlocked){
	display: none;
}
.build-stage-head{
	display: flex;
	align-items: center;
	padding: 15px 18px;
	background: var(--black-color);
	cursor: pointer;
	transition: background 0.2s ease;
}
.build-stage-head:focus{
	outline: 2px solid rgba(var(--primary-color-rgba), 0.5);
	outline-offset: -2px;
}
/* line-height sits 3px above the box height on purpose. The digit is Exo
   italic, whose glyphs ride high on the baseline, so a line-height matching
   the box optically parks the number near the top rather than in the middle.
   Nudging the line box down re-centres it without changing the badge size. */
.build-stage-num{
	flex: 0 0 auto;
	width: 26px;
	height: 26px;
	line-height: 29px;
	margin-right: 12px;
	text-align: center;
	background: var(--gray-color);
	color: #FFF;
	font-family: var(--secondary-font);
	font-weight: 700;
	font-style: italic;
	font-size: 13px;
	transition: background 0.2s ease;
}
.build-stage.is-open .build-stage-num{
	background: var(--primary-color);
}
/* Matches the type of the base system price line -- Exo, 700, italic -- just
   scaled for a panel heading. */
.build-stage-title{
	font-family: var(--secondary-font);
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	font-size: 24px;
	color: #FFF;
	margin-right: 16px;
}
.build-stage-recap{
	margin-left: auto;
	font-size: 13px;
	color: var(--extra-light-gray-color);
	text-align: right;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.build-stage-chev{
	flex: 0 0 auto;
	margin-left: 14px;
	color: var(--extra-light-gray-color);
	transition: transform 0.25s ease;
}
.build-stage.is-open .build-stage-chev{
	transform: rotate(180deg);
	color: var(--primary-color);
}
.build-stage-body{
	display: none;
	padding: 22px 18px;
}
.build-stage.is-open > .build-stage-body{
	display: block;
}
.build-stage-foot{
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--extra-light-gray-color);
	text-align: right;
}
/* The "next step" button is pointless before there is a system to carry
   forward. Stage 2's foot is always available -- delivery never blocks. */
.build-stage[data-stage="build"]:not(.is-ready) .build-stage-foot{
	display: none;
}

/* .build-steps-toolbar (the expand all / collapse all control) was removed with
   the nested accordion on 2026-08-10. */
/* Transient nudge at the top of the delivery stage. Orange rather than red --
   nothing has gone wrong, the customer just arrived a step early. */
.build-flash{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 20px;
	padding: 12px 14px;
	background: rgba(var(--primary-color-rgba), 0.08);
	border-left: 3px solid var(--primary-color);
	font-size: 14px;
	line-height: 1.5;
	color: var(--dark-gray-color);
}
/* "Start fresh instead", inside the restore bar.

   A <button> for behaviour (it POSTs, it is not a destination) styled as a
   link for appearance, so it reads as the secondary action it is rather than
   competing with the configurator's own controls. Inline so it sits at the end
   of the sentence it belongs to. */
.build-flash-action{
	display: inline;
	margin: 0 0 0 4px;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	color: var(--primary-color);
	text-decoration: underline;
	cursor: pointer;
}
.build-flash-action:hover{
	color: var(--dark-gray-color);
}
.build-flash-action[disabled]{
	opacity: 0.5;
	cursor: default;
}

.build-flash i,
.build-flash svg{
	flex: 0 0 auto;
	margin-top: 3px;
	font-size: 15px;
	color: var(--primary-color);
}

/* The ZIP field at the top of the delivery stage. */
.build-property{
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid var(--extra-light-gray-color);
}

/* "(optional)" in a stage title. Deliberately quiet -- lighter, smaller, not
   italic uppercase like the title it follows -- so it reads as a note about
   the panel rather than part of its name. */
.build-stage-optional{
	font-family: inherit;
	font-style: normal;
	font-weight: 400;
	text-transform: none;
	font-size: 14px;
	color: var(--extra-light-gray-color);
	margin-left: 6px;
}

/* The shared qualify fields, rendered both on the financing stage and inside
   the cost share modal.

   The custom properties are declared HERE as well as on .build-costshare-panel
   on purpose. The verdict below is styled off --cs-border, and in the modal it
   sits outside the panel entirely -- an undefined custom property makes the
   whole `border` declaration invalid at computed-value time, which falls back
   to currentColor and draws a dark box instead of a pale blue one. */
.build-qualify{
	--cs-bg: #EAF4FA;
	--cs-border: #B9D9EC;
	--cs-accent: #0F5C8C;

	margin-top: 16px;
}

/* --------------------------------------------------------------------------
   AGFC panel :: stage 2

   Same blue as the AI service block, on purpose. Blue means "information about
   the programme" on this page and orange means "your price", so the two never
   compete.
   -------------------------------------------------------------------------- */

.build-costshare-panel{
	--cs-bg: #EAF4FA;
	--cs-border: #B9D9EC;
	--cs-accent: #0F5C8C;

	margin-bottom: 28px;
	padding: 20px 22px;
	background: var(--cs-bg);
	border: 1px solid var(--cs-border);
	border-radius: 4px;
}
.build-costshare-panel-head{
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--secondary-font);
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	font-size: 17px;
	line-height: 1.2;
	color: var(--cs-accent);
}
/* Flex gap rather than a margin on the <i> -- Font Awesome swaps it for an
   <svg> after load and any `i { margin }` rule stops matching. */
.build-costshare-panel-head i,
.build-costshare-panel-head svg{
	flex: 0 0 auto;
	font-size: 18px;
}
/* main.css zeroes every <p> sitewide with !important. */
.build-costshare-panel-copy{
	margin-top: 8px !important;
	font-size: 14px;
	line-height: 1.55;
	color: var(--gray-color);
}

/* --------------------------------------------------------------------------
   Apply for Financing (stage 3)

   A credit-card financing link (A Cutting Edge Credit Card), which replaced the
   Arkansas cost-share panel on this stage (2026-08-19). Copy on the left, the
   apply QR on the right; stacks on narrow screens. Orange only on the icon and
   the button, so "your price" orange elsewhere on the page is not diluted.
   -------------------------------------------------------------------------- */
.build-financing{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin-bottom: 24px;
	padding: 22px 24px;
	background: #FFF;
	border: 1px solid var(--included-border);
	border-radius: 4px;
}
.build-financing-copy{
	flex: 1 1 320px;
	min-width: 0;
}
.build-financing-head{
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--secondary-font);
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	font-size: 18px;
	line-height: 1.2;
	color: var(--black-color);
}
/* Flex gap rather than a margin on the <i> -- Font Awesome swaps it for an
   <svg> after load and any `i { margin }` rule stops matching. */
.build-financing-head i,
.build-financing-head svg{
	flex: 0 0 auto;
	font-size: 20px;
	color: var(--included-accent);
}
.build-financing-copy p{
	margin: 10px 0 16px !important;
	font-size: 14px;
	line-height: 1.55;
	color: var(--gray-color);
}
.build-financing-qr{
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.build-financing-qr img{
	width: 140px;
	height: 140px;
	max-width: 100%;
	border: 1px solid var(--included-border);
	border-radius: 4px;
	background: #FFF;
}
.build-financing-qr-cap{
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--light-gray-color);
}

/* Quote-only checkout block (until 2026-09-11). It reuses the .build-checkout-form
   shell so it sits exactly where the deposit form otherwise would. */
.build-checkout-quote-copy{
	margin: 4px 0 16px !important;
	font-size: 14px;
	line-height: 1.55;
	color: var(--gray-color);
}

/* The eligibility answer. Green when it is yes, neutral grey when it is no --
   deliberately NOT red or an alert style, because not qualifying is not an
   error and the customer can still buy a trap. */
.build-costshare-verdict{
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
	padding: 12px 14px;
	background: #FFF;
	border: 1px solid var(--cs-border);
	border-radius: 4px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--dark-gray-color);
}
.build-costshare-verdict i,
.build-costshare-verdict svg{
	flex: 0 0 auto;
	margin-top: 3px;
	font-size: 15px;
	color: var(--light-gray-color);
}
.build-costshare-verdict span{
	flex: 1 1 0;
	min-width: 0;
}
.build-costshare-verdict.is-qualified{
	border-color: #9CCFA6;
	background: #F1F9F3;
}
.build-costshare-verdict.is-qualified i,
.build-costshare-verdict.is-qualified svg{
	color: #2E7D45;
}
/* flex-basis 100% forces the link onto its own row under the message rather
   than sitting beside it. Alongside the text it competed with the sentence and
   left a ragged two-column block; underneath it reads as the next thing to do. */
.build-costshare-verdict a{
	flex: 0 0 100%;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--cs-accent);
}
.build-costshare-verdict a:hover{
	color: var(--primary-color);
}
.build-costshare-verdict a i,
.build-costshare-verdict a svg{
	margin-top: 0;
	font-size: 10px;
	color: inherit;
}

.build-step-num{
	flex: 0 0 auto;
	min-width: 26px;
	height: 26px;
	line-height: 26px;
	padding: 0 6px;
	margin-right: 12px;
	text-align: center;
	background: var(--black-color);
	color: #FFF;
	font-family: var(--secondary-font);
	font-weight: 700;
	font-style: italic;
	font-size: 13px;
}
/* Dark grey rather than pure black. The stage headers above these are solid
   black bars, so matching them exactly made the sections read as one
   undifferentiated column -- stepping down a shade separates them without
   spending the orange accent, which is doing more useful work on prices and
   buttons. (Was orange briefly; --gray-color is the next step lighter if this
   still sits too close to the body copy.) */
.build-step-title{
	font-family: var(--secondary-font);
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	font-size: 21px;
	color: var(--gray-color);
	margin-right: auto;
}


/* --------------------------------------------------------------------------
   Steps :: the accordion inside each unit
   -------------------------------------------------------------------------- */

/* Sections inside a stage are separated by a rule rather than boxed. They sit
   inside a bordered panel already, and a box within a box within a card reads
   as clutter. */
.build-step{
	border-top: 1px solid var(--extra-light-gray-color);
}
.build-step:first-of-type{
	border-top: 0;
}
.build-step + .build-step{
	margin-top: 14px;
}
/* Headings, not controls. These sections stopped being collapsible on
   2026-08-10 -- no chevron, no hover colour, no focus ring, nothing that
   suggests clicking does something. */
.build-step-head{
	display: flex;
	align-items: center;
	padding: 22px 0 18px;
}
.build-step:first-of-type .build-step-head{
	padding-top: 8px;
}
.build-step.is-complete .build-step-num{
	background: var(--primary-color);
}
.build-step-body{
	display: block;
	padding: 2px 0 32px;
}
/* The intro line under a step heading. Only the optional steps have one --
   panels & gates, accessories, delivery -- since those are the ones where the
   customer needs to be told they can skip it.

   !important is not decoration here. main.css line 46 sets
   `p { margin: 0 !important; padding: 0 !important; }` sitewide, so any
   spacing on a <p> in this file is discarded without it. Every <p> we add to
   the configurator needs the same treatment -- see .build-modal-copy. */
.build-step-intro{
	font-size: 14px;
	color: var(--gray-color);
	margin-bottom: 28px !important;
}

/* --------------------------------------------------------------------------
   Options :: radio-driven selectable cards
   -------------------------------------------------------------------------- */

.build-option{
	display: block;
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 16px 16px 52px;
	border: 2px solid var(--extra-light-gray-color);
	background: #FFF;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease;
}
.build-option:hover{
	border-color: var(--light-gray-color);
}
.build-option input{
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}
.build-option-check{
	position: absolute;
	top: 12px;
	right: 12px;
	width: 22px;
	height: 22px;
	line-height: 20px;
	text-align: center;
	border: 2px solid var(--extra-light-gray-color);
	border-radius: 50%;
	color: transparent;
	font-size: 11px;
	transition: all 0.2s ease;
}
.build-option input:checked ~ .build-option-check{
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #FFF;
}
.build-option input:checked ~ .build-option-title{
	color: var(--primary-color);
}
.build-option:has(input:checked),
.build-option.is-selected{
	border-color: var(--primary-color);
	background: rgba(var(--primary-color-rgba), 0.04);
}
.build-option input:focus ~ .build-option-check{
	box-shadow: 0 0 0 3px rgba(var(--primary-color-rgba), 0.25);
}

.build-option-title{
	display: block;
	font-family: var(--secondary-font);
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	font-size: 15px;
	line-height: 1.25;
	color: var(--black-color);
	padding-right: 30px;
	transition: color 0.2s ease;
}
/* Padded clear of the check indicator in the top-right corner, same as the
   title. Without it the second line of grey text runs under the circle. */
.build-option-sub{
	display: block;
	font-size: 13px;
	line-height: 1.45;
	color: var(--gray-color);
	margin-top: 5px;
	padding-right: 30px;
}
.build-option-media{
	display: block;
	margin: 14px 0;
	text-align: center;
}
.build-option-media img{
	max-width: 100%;
	height: auto;
}
.build-option-price{
	position: absolute;
	left: 16px;
	bottom: 16px;
	font-family: var(--secondary-font);
	font-weight: 700;
	font-style: italic;
	font-size: 22px;
	color: var(--black-color);
}
.build-option-note{
	display: block;
	font-size: 11px;
	line-height: 1.4;
	color: var(--light-gray-color);
}
/* Taller than the base padding: these cards carry a title, a wrapped grey
   sub-line and a price, and at the old height the three were touching. */
.build-option-expansion{
	padding-top: 20px;
	padding-bottom: 74px;
}

/* Delivery cards carry a price AND a rate note, which will not fit alongside
   each other -- pinning both to the bottom corners made them collide. Stack
   them in normal flow instead, and push the pair down with margin-top:auto so
   prices still line up across cards whose titles wrap to different heights. */
.build-option-delivery{
	display: flex;
	flex-direction: column;
	padding-bottom: 18px;
}
.build-option-delivery .build-option-price{
	position: static;
	margin-top: auto;
	padding-top: 18px;
	font-size: 20px;
}
.build-option-delivery .build-option-note{
	margin-top: 5px;
}
.build-option-icon{
	display: block;
	margin-bottom: 12px;
	font-size: 26px;
	line-height: 1;
	color: var(--primary-color);
}
/* Expansions are toggles, not a one-way choice. A square indicator reads as
   "you can turn this back off" where the round one reads as a radio. */
.build-option-expansion .build-option-check{
	border-radius: 0;
}
.build-option-delivery .build-option-price{
	font-size: 18px;
}

.build-feature-list{
	display: block;
	margin-top: 10px;
}
.build-feature{
	display: flex;
	align-items: baseline;
	gap: 7px;
	font-size: 12px;
	color: var(--gray-color);
	line-height: 1.6;
}
.build-feature i,
.build-feature svg{
	flex: 0 0 auto;
	font-size: 11px;
}

/* --------------------------------------------------------------------------
   Accessories
   -------------------------------------------------------------------------- */

.build-accessory-grid{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 12px;
}
/* Top padding clears the tick in the corner. Without it the circle sits on
   top of the product photo. */
.build-accessory{
	border: 1px solid var(--extra-light-gray-color);
	padding: 34px 12px 12px;
	text-align: center;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	transition: border-color 0.2s ease;
}
.build-accessory:hover{
	border-color: var(--light-gray-color);
}
.build-accessory.is-active{
	border-color: var(--primary-color);
}
/* Set by build.js when an accessory does not fit the chosen base system.
   A class, not .hide(), so pricing can filter on it while the accordion
   section is collapsed. */
.build-accessory.is-unavailable{
	display: none;
}
.build-accessory{
	position: relative;
}
/* One-click add. Same visual language as the option cards' check, smaller. */
.build-accessory-check{
	position: absolute;
	top: 9px;
	right: 9px;
	width: 20px;
	height: 20px;
	line-height: 18px;
	text-align: center;
	border: 2px solid var(--extra-light-gray-color);
	border-radius: 50%;
	color: transparent;
	font-size: 10px;
	cursor: pointer;
	transition: all 0.2s ease;
}
.build-accessory-check:hover{
	border-color: var(--light-gray-color);
}
.build-accessory-check:focus{
	outline: none;
	box-shadow: 0 0 0 3px rgba(var(--primary-color-rgba), 0.25);
}
.build-accessory.is-active .build-accessory-check{
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #FFF;
}
.build-accessory-media{
	height: 90px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 8px;
}
.build-accessory-media img{
	max-width: 100%;
	max-height: 90px;
	width: auto;
	height: auto;
}
.build-accessory-title{
	font-family: var(--secondary-font);
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	font-size: 12px;
	line-height: 1.3;
	color: var(--black-color);
	margin-bottom: 4px;
}
/* Optional: shown only where William's list gave a parts breakdown. */
.build-accessory-sub{
	font-size: 11px;
	line-height: 1.45;
	color: var(--light-gray-color);
	margin-bottom: 6px;
}
.build-accessory-price{
	font-size: 14px;
	font-weight: 700;
	color: var(--gray-color);
	margin-bottom: 10px;
	margin-top: auto;
}
/* No product photography exists for the current accessory list, so most tiles
   render without a media block. Give those a little more height so a grid of
   short text cards does not look cramped next to any that do have an image. */
.build-accessory:not(:has(.build-accessory-media)) .build-accessory-title{
	margin-top: 6px;
}
/* The steppers are the one part of the tile that must not toggle it, so they
   get their own cursor as a hint. The exemption itself is enforced in
   build.js, not here. */
.build-qty{
	display: flex;
	align-items: stretch;
	justify-content: center;
	cursor: default;
}
.build-qty-btn{
	width: 32px;
	border: 1px solid var(--extra-light-gray-color);
	background: #FFF;
	color: var(--black-color);
	font-size: 16px;
	line-height: 1;
	transition: all 0.2s ease;
}
.build-qty-btn:hover:not(:disabled){
	background: var(--primary-color);
	border-color: var(--primary-color);
	color: #FFF;
}
.build-qty-btn:disabled{
	opacity: 0.4;
	cursor: not-allowed;
}
.build-qty-input.form-control{
	width: 46px;
	height: 32px;
	padding: 0;
	text-align: center;
	border-left: 0;
	border-right: 0;
	font-weight: 700;
	background: #FFF;
}

/* Until a base system is chosen, sections 2 and 3 are not shown at all, and
   neither is the AI service block -- none of them mean anything without one,
   and a column of disabled rows reads as broken rather than as sequenced. */
.build-unit:not(.has-system) .build-step[data-step="expansion"],
.build-unit:not(.has-system) .build-step[data-step="accessories"],
.build-unit:not(.has-system) .build-included{
	display: none;
}

/* --------------------------------------------------------------------------
   Delivery extras
   -------------------------------------------------------------------------- */

.build-distance,
.build-warning{
	display: flex;
	align-items: baseline;
	gap: 11px;
	margin-top: 18px;
	padding: 12px 14px;
	font-size: 13px;
	line-height: 1.5;
}
/* display:flex above outranks the browser default for [hidden], so these two
   have to opt back out explicitly or they show when they should not. */
.build-distance[hidden],
.build-warning[hidden]{
	display: none;
}
.build-distance{
	background: var(--lightest-gray-color);
	color: var(--dark-gray-color);
}
.build-warning{
	background: rgba(var(--primary-color-rgba), 0.08);
	border-left: 3px solid var(--primary-color);
	color: var(--dark-gray-color);
}
.build-distance i,
.build-distance svg,
.build-warning i,
.build-warning svg{
	flex: 0 0 auto;
	color: var(--primary-color);
}

/* --------------------------------------------------------------------------
   Sticky summary
   -------------------------------------------------------------------------- */

.build-summary{
	border: 1px solid var(--extra-light-gray-color);
	background: #FFF;
	position: sticky;
	top: 110px;
	/* Never taller than the viewport. A pinned card that overruns the screen
	   hides its own buttons, which is worse than not pinning at all. */
	max-height: calc(100vh - 130px);
	overflow-y: auto;
}

.build-summary-head{
	padding: 14px 18px;
	background: var(--black-color);
	color: #FFF;
	font-family: var(--secondary-font);
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	font-size: 16px;
}
/* No inner scroll here any more -- the card itself scrolls, and nesting two
   scroll areas makes the inner one nearly impossible to reach with a trackpad. */
.build-summary-units{
	padding: 4px 18px;
}
.build-summary-empty{
	padding: 22px 0;
	font-size: 13px;
	color: var(--light-gray-color);
	text-align: center;
}
/* One trap per build, so there is no "Trap 1" heading to render above the
   lines -- they are simply the build. */
.build-summary-unit{
	padding: 14px 0;
}
.build-summary-line{
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: var(--gray-color);
	line-height: 1.7;
}
.build-summary-line span:first-child{
	padding-right: 10px;
}
.build-summary-line-sub{
	padding-left: 12px;
	color: var(--light-gray-color);
	font-size: 12px;
}

.build-summary-totals{
	padding: 14px 18px;
	border-top: 1px solid var(--extra-light-gray-color);
}
.build-summary-row{
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: var(--gray-color);
	line-height: 1.9;
}
.build-summary-row-total{
	margin-top: 8px;
	padding-top: 10px;
	border-top: 1px solid var(--extra-light-gray-color);
	font-family: var(--secondary-font);
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	font-size: 15px;
	color: var(--black-color);
}
/* The AGFC promo box. Ruled top and bottom so it reads as its own thing
   between the tally and the buttons, and rounded against a sidebar that is
   otherwise all square edges -- the theme forces border-radius: 0 on controls,
   so this is deliberately the one soft shape in the column. */
.build-summary-costshare{
	margin: 0 18px 18px;
	padding: 12px 14px;
	background: #EAF4FA;
	border: 1px solid #B9D9EC;
	border-radius: 6px;
}
.build-summary-costshare-row{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--gray-color);
}
.build-summary-costshare-row span:last-child{
	flex: 0 0 auto;
	font-weight: 700;
	font-size: 14px;
	color: var(--primary-color);
}
.build-summary-costshare-link{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 6px;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #0F5C8C;
}
.build-summary-costshare-link:hover{
	color: var(--primary-color);
}
.build-summary-costshare-link i,
.build-summary-costshare-link svg{
	font-size: 10px;
}

/* Recurring, so it is visually separated from the one-time figures above and
   never joins them. See summary.q for why it stays out of the total. */
.build-summary-row-monthly{
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--extra-light-gray-color);
	font-size: 13.5px;
	color: #0F5C8C;
}
.build-summary-row-monthly span:last-child{
	font-weight: 700;
}
/* The subscription, rendered among the line items rather than under the
   totals. Blue so it reads as a different KIND of charge from the one-time
   lines around it, with the note spelling out what that difference is. */
.build-summary-line-monthly{
	color: #0F5C8C;
}
.build-summary-line-monthly span:last-child{
	font-weight: 700;
}
.build-summary-line-note{
	margin-top: 2px;
	font-size: 11px;
	line-height: 1.4;
	color: var(--light-gray-color);
}

/* The quote path under the deposit submit. A text link rather than a second
   button -- the deposit is the action this step is for, and two equally
   weighted buttons made it a coin toss. */
.build-checkout-alt{
	display: block;
	width: 100%;
	margin-top: 14px;
	padding: 6px 0;
	background: none;
	border: 0;
	font-size: 13px;
	color: var(--gray-color);
	text-decoration: underline;
	transition: color 0.2s ease;
}
.build-checkout-alt:hover,
.build-checkout-alt:focus{
	color: var(--primary-color);
	outline: none;
}

.build-summary-actions{
	padding: 16px 18px;
	border-top: 1px solid var(--extra-light-gray-color);
}
/* The prompt line above each sidebar button. Interleaving these broke the old
   `.btn + .btn` spacing rule, so the gap now comes from the prompt's own top
   margin instead. */
.build-summary-prompt{
	margin-bottom: 6px;
	text-align: center;
	font-family: var(--secondary-font);
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	font-size: 13px;
	color: var(--dark-gray-color);
}
.build-summary-prompt + .btn + .build-summary-prompt,
.btn + .build-summary-prompt{
	margin-top: 14px;
}

/* ----- OR ----- between the two actions. The rules are pseudo-elements
   flexing to fill whatever space the word leaves, so it stays centred at any
   sidebar width without a fixed line length. */
.build-summary-or{
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 14px 0;
	font-family: var(--secondary-font);
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	font-size: 12px;
	color: var(--light-gray-color);
}
.build-summary-or::before,
.build-summary-or::after{
	content: '';
	flex: 1 1 auto;
	height: 1px;
	background: var(--extra-light-gray-color);
}
.build-summary-fine{
	margin-top: 12px;
	font-size: 11px;
	line-height: 1.5;
	color: var(--light-gray-color);
}

/* --------------------------------------------------------------------------
   Stage 3 :: review and checkout
   -------------------------------------------------------------------------- */

.build-review{
	border: 1px solid var(--extra-light-gray-color);
	margin-bottom: 20px;
}
.build-review-lines{
	padding: 6px 16px;
}
.build-review-totals{
	padding: 14px 16px;
	border-top: 1px solid var(--extra-light-gray-color);
	background: var(--lightest-gray-color);
}


/* The deposit explanation, moved inside the form on 2026-08-10 from the
   standalone pitch block that used to sit above it. It is the sentence that
   stops a $200 charge being mistaken for the whole invoice, so it sits with
   the card fields rather than a scroll away from them. */
.build-deposit-note{
	padding: 12px 14px;
	margin-bottom: 14px;
	background: var(--lightest-gray-color);
	font-size: 13px;
	line-height: 1.6;
	color: var(--gray-color);
}
.build-deposit-note strong{
	color: var(--black-color);
}

/* --------------------------------------------------------------------------
   Reserve form :: field groups

   Ten identical grey inputs stacked in a column is a wall, not a form. These
   split it into two blocks with their own surface, so the eye gets somewhere
   to stop -- and so "the bit about you" and "the bit about your card" read as
   two short asks rather than one long one.
   -------------------------------------------------------------------------- */

.build-checkout-group{
	padding: 16px 16px 4px;
	margin-bottom: 16px;
	background: #FCFCFC;
	border: 1px solid var(--extra-light-gray-color);
}
.build-checkout-fields{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--extra-light-gray-color);
	font-family: var(--secondary-font);
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	font-size: 14px;
	color: var(--dark-gray-color);
}
/* Flex gap, not a margin on the <i> -- Font Awesome swaps it for an <svg>. */
.build-checkout-fields i,
.build-checkout-fields svg{
	flex: 0 0 auto;
	font-size: 14px;
	color: var(--primary-color);
}
.build-checkout-fields-tag{
	margin-left: auto;
	font-family: inherit;
	font-style: normal;
	font-weight: 400;
	text-transform: none;
	font-size: 11px;
	color: var(--light-gray-color);
}
/* The mockup's dead card fields. Greyed and un-clickable so nobody spends the
   demo wondering why the form will not accept typing. */
.build-checkout-group-off{
	background: var(--lightest-gray-color);
}
.build-checkout-group-off .build-label{
	color: var(--light-gray-color);
}
.build-checkout-group-off .form-control[disabled]{
	background: #F0F0F0;
	color: var(--light-gray-color);
	cursor: not-allowed;
}
/* Labels sit tighter here than elsewhere on the page. At ten fields the
   default spacing turned every row into its own paragraph. */
.build-checkout-group .build-label{
	font-size: 11px;
	margin-bottom: 4px;
}
.build-checkout-group .form-group{
	margin-bottom: 12px;
}

.build-checkout-form{
	border: 1px solid var(--extra-light-gray-color);
	padding: 20px 18px;
}
.build-checkout-form-head{
	display: flex;
	align-items: baseline;
	gap: 10px;
	font-family: var(--secondary-font);
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	font-size: 24px;
	color: var(--black-color);
	margin-bottom: 14px;
}
.build-checkout-form-head i,
.build-checkout-form-head svg{
	font-size: 20px;
}

/* --------------------------------------------------------------------------
   Deposit authorisation

   Boxed and set apart from the card fields above it, because it is the one
   thing on this form the customer is agreeing to rather than filling in.
   -------------------------------------------------------------------------- */

.build-authorize{
	padding: 16px;
	margin-bottom: 16px;
	background: var(--lightest-gray-color);
	border: 1px solid var(--extra-light-gray-color);
}
.build-authorize-check{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 16px;
	/* main.css line 1396 sets label{font-weight:700 !important; uppercase}
	   sitewide. This is a sentence, not a label, so both have to be undone --
	   and the weight needs !important to win. */
	font-weight: 400 !important;
	text-transform: none;
	font-size: 13px;
	line-height: 1.6;
	color: var(--dark-gray-color);
	cursor: pointer;
}
.build-authorize-check input{
	flex: 0 0 auto;
	margin-top: 3px;
}
.build-authorize-check strong{
	font-weight: 700;
	color: var(--black-color);
}
/* A disabled submit has to look disabled, or it reads as a broken button. */
.build-checkout-form .btn[disabled]{
	opacity: 0.5;
	cursor: not-allowed;
}
.build-checkout-form-head i,
.build-checkout-form-head svg{
	flex: 0 0 auto;
	color: var(--primary-color);
}
.build-preview-note{
	padding: 11px 13px;
	margin-bottom: 18px;
	background: rgba(var(--primary-color-rgba), 0.08);
	border-left: 3px solid var(--primary-color);
	font-size: 12px;
	line-height: 1.55;
	color: var(--dark-gray-color);
}
/* The payoff line, sitting on the page rather than in a container. It still
   needs to carry weight -- it is the one number the customer is agreeing to --
   so that comes from the type and the orange figure instead of a filled bar. */
.build-checkout-total{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 14px 0;
	margin-bottom: 14px;
	border-top: 1px solid var(--extra-light-gray-color);
	font-family: var(--secondary-font);
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	font-size: 15px;
	color: var(--black-color);
}
.build-checkout-total span:last-child{
	font-size: 24px;
	color: var(--primary-color);
}
.build-checkout-total span:last-child{
	font-family: var(--secondary-font);
	font-weight: 700;
	font-style: italic;
	font-size: 22px;
	color: var(--black-color);
}

/* --------------------------------------------------------------------------
   Modals :: cost share popup and quote request
   -------------------------------------------------------------------------- */

/* !important is load-bearing here. main.css sets
   `.remodal { max-width: 900px !important; padding: 30px !important; }`
   inside its min-width:1200px block, so a plain rule here -- even a more
   specific one -- loses on every desktop screen. Same trap as the sitewide
   `p { margin: 0 !important }` that swallows .build-step-intro spacing. */
.build-modal.remodal{
	max-width: 400px !important;
	text-align: left;
	padding: 28px 24px 24px !important;
}
.build-modal.build-modal-wide{
	max-width: 500px !important;
}

/* Stacked in one column, so it only needs enough width for the state and acres
   fields to sit side by side. Same !important trap as above -- main.css caps
   .remodal at 900px on desktop, and would otherwise stretch this. */
.build-modal[data-remodal-id="cost-share"]{
	max-width: 560px !important;
}
.build-modal-stack{
	margin-bottom: 20px;
}
.build-modal-col-qualify{
	margin-top: 20px;
	padding: 18px;
	background: #EAF4FA;
	border: 1px solid #B9D9EC;
	border-radius: 4px;
}
.build-modal-col-head{
	font-family: var(--secondary-font);
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	font-size: 17px;
	color: #0F5C8C;
}
.build-modal-col-qualify .build-qualify{
	margin-top: 12px;
}

/* The qualified result carried onto the review step. */
/* The eligibility result under the checkout total. A footnote, not an alert
   (changed 2026-08-10) -- by this point the customer has already been given
   this answer on the financing stage, so repeating it at alert volume only
   made the longest panel on the page longer.

   The link sits on its own row underneath, same as the alerts elsewhere. */
.build-review-costshare{
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px dashed var(--extra-light-gray-color);
	font-size: 12px;
	line-height: 1.5;
	color: var(--gray-color);
}
.build-review-costshare a{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 4px;
	font-weight: 700;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: #0F5C8C;
}
.build-review-costshare a:hover{
	color: var(--primary-color);
}
.build-review-costshare a i,
.build-review-costshare a svg{
	font-size: 10px;
	color: inherit;
}
.build-modal-recap{
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 12px 16px;
	margin-bottom: 20px;
	background: var(--lightest-gray-color);
	font-size: 13px;
	color: var(--gray-color);
}
.build-modal-recap span:last-child{
	font-family: var(--secondary-font);
	font-weight: 700;
	font-style: italic;
	font-size: 20px;
	color: var(--black-color);
}
.build-modal .form-group{
	margin-bottom: 14px;
}
.build-modal-eyebrow{
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--black-color);
	font-weight: 700;
	margin-bottom: 6px;
}
.build-modal-title{
	font-family: var(--secondary-font);
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	font-size: 24px;
	line-height: 1.15;
	margin-bottom: 18px;
}
.build-modal-figures{
	background: var(--lightest-gray-color);
	padding: 16px;
	margin-bottom: 16px;
}
.build-modal-row{
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	color: var(--gray-color);
	line-height: 2;
}
.build-modal-row-credit{
	color: var(--primary-color);
	font-weight: 700;
}
.build-modal-row-net{
	margin-top: 8px;
	padding-top: 10px;
	border-top: 1px solid var(--extra-light-gray-color);
	align-items: baseline;
	color: var(--black-color);
}
.build-modal-row-net span:last-child{
	font-family: var(--secondary-font);
	font-weight: 700;
	font-style: italic;
	font-size: 26px;
}
/* !important for the same reason as .build-step-intro above -- main.css
   zeroes every <p> margin sitewide. */
.build-modal-copy{
	font-size: 13px;
	line-height: 1.6;
	color: var(--gray-color);
	margin-bottom: 20px !important;
}
.build-modal-dismiss{
	display: block;
	width: 100%;
	margin-top: 10px;
	padding: 8px;
	background: none;
	border: 0;
	font-size: 13px;
	color: var(--light-gray-color);
	text-decoration: underline;
}
.build-modal-dismiss:hover{
	color: var(--gray-color);
}

/* Validation errors returned by ajax/quote_request.q.

   Red, unlike .build-flash, which is the orange "you arrived a step early"
   nudge. Something genuinely did not go through here, and the customer has to
   act before it will. */
.build-modal-errors{
	margin-bottom: 18px;
	padding: 12px 14px;
	background: #fce8e6;
	border-left: 3px solid #b3261e;
	font-size: 13px;
	line-height: 1.5;
	color: #7a1c14;
}
.build-modal-errors ul{
	margin: 0;
	padding-left: 18px;
}
.build-modal-errors li + li{
	margin-top: 4px;
}

/* The required-field asterisk. */
.build-req{
	color: var(--primary-color);
}

/* Sandbox / test-mode notice on the reserve page.

   Deliberately loud and deliberately not the theme's orange nudge styling. A
   non-live checkout looks identical to a live one right up to the bank
   statement, so this has to be impossible to skim past -- the failure it
   prevents is the first real customer after go-live discovering we were still
   pointed at a test merchant. */
.build-pay-banner{
	margin-bottom: 20px;
	padding: 14px 16px;
	background: #b3261e;
	border-radius: 3px;
	color: #fff;
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}
.build-pay-banner strong{
	display: block;
	margin-bottom: 4px;
	font-size: 16px;
}
/* Grey rather than red: payment being unconfigured is a state of the site, not
   a warning about money. */
.build-pay-banner-off{
	background: var(--dark-gray-color);
}
.build-pay-card{
	white-space: nowrap;
	font-weight: 700;
}

/* "Deposit paid" on the quote page.

   Green rather than the theme's orange. Orange is this site's accent and is
   already doing three other jobs on this page (the cost share callout, the
   nudges, the buttons), so a reassurance in orange reads as one more piece of
   marketing. Green is the one colour that says "this is settled" without
   needing to be read first. */
.build-paid-banner{
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-top: 24px;
	padding: 14px 16px;
	background: #e6f4ea;
	border-left: 3px solid #1a7f37;
	font-size: 14px;
	line-height: 1.6;
	color: #14532d;
}
.build-paid-banner i,
.build-paid-banner svg{
	flex: 0 0 auto;
	margin-top: 3px;
	font-size: 16px;
	color: #1a7f37;
}
.build-paid-banner strong{
	display: block;
	font-size: 15px;
}

/* The quote table needs to be able to scroll on a narrow screen rather than
   push the page sideways -- it carries money columns that cannot wrap. */
.build-quote-table-wrap{
	overflow-x: auto;
}

/* Spinner inside the submit button while the request is in flight.

   The button keeps its label and gains this, rather than swapping the text
   for "Sending…" -- a button that changes width mid-click moves under the
   cursor. Hidden with the [hidden] attribute, which needs the display rule
   below because .build-modal-spin sets one. */
.build-modal-spin{
	margin-left: 8px;
}
.build-modal-spin[hidden]{
	display: none;
}

/* --------------------------------------------------------------------------
   "What's included" callout :: the AI 360 package that ships with both systems

   Deliberately off-palette. The theme is orange and grey throughout, so a cool
   blue is what stops this reading as another purchasable tile -- it is the one
   block on the page describing something the customer already has rather than
   something they are choosing. Kept as local variables so the shade is changed
   in one place.
   -------------------------------------------------------------------------- */

.build-included{
	--included-bg: #EAF4FA;
	--included-border: #B9D9EC;
	--included-accent: #0F5C8C;

	margin-top: 24px;
	padding: 22px 24px;
	background: var(--included-bg);
	border: 1px solid var(--included-border);
	border-radius: 4px;
}
.build-included-head{
	display: flex;
	flex-direction: column;
	margin-bottom: 14px;
}
.build-included-title{
	font-family: var(--secondary-font);
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	font-size: 24px;
	line-height: 1.15;
	color: var(--included-accent);
}
.build-included-sub{
	margin-top: 4px;
	font-weight: 700;
	font-size: 15px;
	color: var(--dark-gray-color);
}
/* main.css line 46 zeroes every <p> sitewide with !important. */
.build-included-intro{
	margin-bottom: 14px !important;
	font-size: 14px;
	line-height: 1.55;
	color: var(--gray-color);
}
/* This block is a <div> holding Froala output now, not a <p>, because the copy
   is edited in RUBIX and comes back wrapped in its own paragraph tags -- a <p>
   cannot legally contain another one.

   The rules below exist because main.css line 46 zeroes EVERY paragraph on the
   site with `p { margin: 0 !important; padding: 0 !important; }`. Without
   matching that weight, a client who types two paragraphs gets one wall of
   text. Spec 9.1 warns about exactly this. */
.build-included-intro p{
	margin: 0 0 10px !important;
	line-height: 1.55 !important;
}
.build-included-intro p:last-child{
	margin-bottom: 0 !important;
}
.build-included-intro ul,
.build-included-intro ol{
	margin: 0 0 10px;
	padding-left: 18px;
}
.build-included-list{
	list-style: none;
	margin: 0;
	padding: 0;
}
.build-included-list li{
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 5px 0;
	font-size: 15px;
	line-height: 1.45;
	color: var(--dark-gray-color);
}
.build-included-list li i,
.build-included-list li svg{
	flex: 0 0 auto;
	margin-top: 4px;
	color: var(--included-accent);
	font-size: 13px;
}
/* Intro above the plan tiles. */
.build-included-addon-intro{
	margin-top: 16px;
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--gray-color);
}
/* A "pricing in progress" hint while the server round-trips. Deliberately
   subtle: the previous figures stay on screen rather than blanking, because a
   total that flickers to zero on every click looks broken even though it is
   only briefly stale. */
.is-pricing .build-summary-totals,
.is-pricing .build-review-totals{
	opacity: 0.55;
	transition: opacity 0.15s ease;
}
/* Placeholder where an accessory has no photo yet. */
.build-accessory-media-empty{
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--extra-light-gray-color);
	font-size: 30px;
}

/* includes_html comes out of Froala as <ul><li><p>. The check marker is a
   background image rather than a Font Awesome <i>, because FA 5.0.7 runs in SVG
   mode and rewrites every <i> after load -- and there is no <i> to write here
   anyway, since this markup is authored in the CMS. */
.build-feature-list ul{
	list-style: none;
	margin: 0;
	padding: 0;
}
/* These sit inside a <label>, and main.css line 1396 sets
   `label { font-weight: 700 !important; text-transform: uppercase; }` sitewide.
   That is why an inclusion list rendered as bold shouting caps by default, and
   why the weight here needs !important of its own to get back to normal --
   a more specific selector alone loses. Same trap as the sitewide
   `p { margin: 0 !important }`.

   Sentence case and normal weight, because this is a spec list the customer
   reads, not a heading. The bold uppercase competed with the product name
   directly above it. */
.build-feature-list li{
	position: relative;
	padding-left: 20px;
	margin-bottom: 3px;
	font-weight: 400 !important;
	text-transform: none;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--gray-color);
}
.build-feature-list li::before{
	content: '';
	position: absolute;
	left: 0;
	top: 0.42em;
	width: 11px;
	height: 9px;
	background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23f26122'%3E%3Cpath d='M413.505 91.951L133.49 371.966l-98.995-98.995c-4.686-4.686-12.284-4.686-16.971 0L6.211 284.284c-4.686 4.686-4.686 12.284 0 16.971l118.794 118.794c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-11.314-11.314c-4.686-4.686-12.284-4.686-16.97 0z'/%3E%3C/svg%3E");
}
/* main.css zeroes every <p> sitewide with !important, and Froala wraps each
   bullet's text in one. */
.build-feature-list li p{
	margin: 0 !important;
	padding: 0 !important;
}

/* The subscription opt-in. Styled as a selectable row rather than as more
   body copy, because it is the one thing in this blue block the customer can
   act on -- everything above it is already theirs. */
.build-included-addon{
	display: flex;
	align-items: flex-start;
	gap: 14px;
	width: 100%;
	margin: 16px 0 0;
	padding: 16px;
	background: #FFF;
	border: 1px solid var(--included-border);
	cursor: pointer;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* No short description: the copy is a single line, so centre the check, title
   and price on one line rather than top-aligning them. Top alignment is right
   only when the copy can wrap to two lines, which needs a subtitle. */
.build-included-addon--single{
	align-items: center;
}
.build-included-addon--single .build-option-check{
	margin-top: 0;
}
.build-included-addon:hover{
	border-color: var(--included-accent);
}
.build-included-addon.is-selected{
	border-color: var(--included-accent);
	box-shadow: inset 0 0 0 1px var(--included-accent);
}
/* The real checkbox is hidden and the styled span stands in for it, matching
   how the option cards elsewhere in this file work. */
.build-included-addon input{
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.build-included-addon .build-option-check{
	position: static;
	flex: 0 0 auto;
	margin-top: 2px;
}
.build-included-addon-copy{
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}
.build-included-addon-title{
	font-family: var(--secondary-font);
	font-weight: 700;
	font-style: italic;
	text-transform: uppercase;
	font-size: 15px;
	color: var(--black-color);
}
.build-included-addon-sub{
	margin-top: 4px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--gray-color);
}
.build-included-addon-price{
	flex: 0 0 auto;
	text-align: right;
	font-family: var(--secondary-font);
	font-weight: 700;
	font-style: italic;
	font-size: 20px;
	color: var(--included-accent);
	white-space: nowrap;
}
.build-included-addon-price > span{
	font-size: 13px;
}
.build-included-addon-fpo{
	display: block;
	font-family: inherit;
	font-style: normal;
	font-weight: 400;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--light-gray-color);
}

/* --------------------------------------------------------------------------
   Mobile bar
   -------------------------------------------------------------------------- */

.build-mobile-bar{
	display: none;
}

@media (max-width: 991px){

	.build-summary{
		position: static;
		margin-top: 26px;
		/* Nothing is pinned below lg, so the viewport cap would only produce
		   a pointless scrollbar in the middle of the page. */
		max-height: none;
		overflow: visible;
	}
	.build-mobile-bar[hidden]{
		display: none;
	}
	.build-mobile-bar{
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1040;
		padding: 10px 14px;
		background: var(--black-color);
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.25);
	}
	.build-mobile-figures{
		display: flex;
		flex-direction: column;
		color: #FFF;
		line-height: 1.2;
	}
	.build-mobile-total-figure{
		font-family: var(--secondary-font);
		font-weight: 700;
		font-style: italic;
		font-size: 22px;
		color: var(--primary-color);
	}
	.build-mobile-label{
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: var(--extra-light-gray-color);
	}
	body.build-has-bar{
		padding-bottom: 74px;
	}

}

@media (max-width: 575px){

	.build-panel-body{
		padding: 16px 12px;
	}
	.build-accessory-grid{
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}
	.build-option-expansion{
		padding-bottom: 52px;
	}

}


/* ==========================================================================
   The printable quote :: /build/quote/{code}/

   Loaded by apps/build/quote.q, which reuses this stylesheet rather than
   getting its own. The quote is the same information the configurator's
   sidebar shows, so it should read as the same document, and a second file
   would be a second place to keep the money rows looking alike.
   ========================================================================== */

.build-quote-head{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
.build-quote-meta{
	margin-top: 4px !important;
	font-size: 14px;
	color: var(--light-gray-color);
}
.build-quote-h3{
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--light-gray-color);
	margin-bottom: 8px;
}
/* main.css line 46 zeroes every paragraph sitewide with !important, so a
   quote block loses its spacing without matching that weight. Spec 9.1. */
.build-quote-block{
	font-size: 15px;
	line-height: 1.7 !important;
	margin: 0 0 20px !important;
}

.build-quote-table{
	width: 100%;
	border-collapse: collapse;
	margin-top: 4px;
}
.build-quote-table td{
	padding: 10px 0;
	border-bottom: 1px solid var(--extra-light-gray-color);
	font-size: 15px;
	vertical-align: top;
}
.build-quote-num{
	text-align: right;
	white-space: nowrap;
	width: 140px;
}
.build-quote-qty{
	color: var(--light-gray-color);
	font-size: 14px;
}
.build-quote-table tfoot td{
	border-bottom: none;
	padding: 6px 0;
}
.build-quote-table tfoot tr:first-child td{
	padding-top: 14px;
	border-top: 2px solid var(--dark-gray-color);
}
.build-quote-total td{
	font-size: 19px;
	font-weight: 700;
	padding-top: 10px !important;
	border-top: 1px solid var(--extra-light-gray-color) !important;
}

.build-quote-note{
	margin: 14px 0 0 !important;
	font-size: 14px;
	line-height: 1.6 !important;
	color: var(--dark-gray-color);
}
.build-quote-costshare{
	margin-top: 20px;
	padding: 14px 16px;
	background: rgba(var(--primary-color-rgba), 0.08);
	border-left: 3px solid var(--primary-color);
	font-size: 14px;
	line-height: 1.6;
}
.build-quote-terms{
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid var(--extra-light-gray-color);
	font-size: 13px;
	line-height: 1.6 !important;
	color: var(--light-gray-color);
}
.build-quote-terms p{
	margin: 0 0 8px !important;
	line-height: 1.6 !important;
}
.build-quote-actions{
	margin-top: 28px;
}

/* Print.

   The theme's chrome is display:none rather than restyled -- a header, a
   navbar and a footer on a printed quote waste the first third of a page and
   tell the reader nothing. Everything that is an on-screen control goes too;
   a "Print" button that prints itself is the classic version of this bug. */
@media print{

	header,
	.navbar,
	footer,
	.cd-top,
	#sb-site + *,
	.build-quote-print,
	.build-quote-actions{
		display: none !important;
	}

	main[data-canvas=container]{
		padding-top: 0 !important;
	}
	body{
		background: #fff !important;
	}
	.build-quote-costshare{
		background: none !important;
		border: 1px solid #999 !important;
	}
	/* The paid banner MUST survive printing -- a printed quote that does not
	   say a deposit was taken is the version most likely to be waved at
	   somebody later. Kept, just without the screen fill, since a green block
	   prints as grey mud on most printers. */
	.build-paid-banner{
		background: none !important;
		border: 1px solid #1a7f37 !important;
		color: #000 !important;
	}
	a[href]:after{
		content: none !important;   /* no URL dumps after every link */
	}

}