/* ==================================================================
   STATIC PAGES - 2026 reskin

   One sheet for the static pages, all but one of which had no comp of
   their own and were asked to match the language of the comped ones:

     Contact Us                 post 18    /contact-us/
     Store Locator              post 16    /store-locator/
     Privacy Policy             post 3     /privacy-policy/
     California Privacy Notice  post 1115  /california-privacy-notice/
     Sweepstakes Terms of Use   post 3499  /sweepstakes-terms-of-use/
     Terms of Use               post 93    /terms-of-use/
     FAQs                       post 3913  /faq/          (has a comp - see 8a)

   All of them are Beaver Builder pages on templates/static-2026.php, which
   supplies the band, the title and the lockup and drops the page's own
   content into one white card. The content stays in Beaver Builder.

   Hung off the `ldst26` body class the template adds, not off a page ID
   or a slug, so the next static page is one _wp_page_template away.

   Apart from the FAQ, no comp exists for any of this. Every number is
   taken from the pages that do have one - Profile Image for the band,
   title and card, and
   Change Password / My Account for the control language (fields 70 tall
   at radius 8 in Neutraface 500 18; the standard 47 x 216.5 red pill).
   ================================================================== */

body.ldst26 {
	--ldst-red: #E30129;
	--ldst-red-btn: #D71921;
	--ldst-ink: #1A1A1A;
	--ldst-field: #F2F2F2;
	--ldst-shell: 1068px;
	--ldst-prose: 880px;
	--ldst-radius: 24px;
}

/* ---- 1. The frame -------------------------------------------------
   Same three moves as every other 2026 page: body carries the gradient
   (the header bar is inset, so the strip above it and the margins
   either side are body, and the theme's body-bg.png paper texture shows
   there otherwise); #content and .fl-builder-content are cleared so
   they do not paint over it; .wrapper is neutralised so the band can be
   full-bleed without a 100vw breakout.
------------------------------------------------------------------- */
body.ldst26 {
	background: var(--ld-red) !important;
	background-image: var(--ld-red-grad) !important;
	background-repeat: no-repeat !important;
	background-size: 100% 100% !important;
	background-attachment: scroll !important;
}

body.ldst26 #content,
body.ldst26 .fl-builder-content {
	background: transparent;
}

body.ldst26 .wrapper {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
	overflow: visible;
}

/* Beaver Builder's row/column/module chrome contributes nothing here -
   the card is the only container. BB emits its padding as per-node
   rules (`.fl-node-XXX > .fl-row-content-wrap`), which outrank a plain
   class, hence the !important. */
body.ldst26 .fl-builder-content .fl-row > .fl-row-content-wrap {
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
}

body.ldst26 .fl-builder-content .fl-row-content {
	max-width: none;
	width: 100%;
}

/* `display: block` is the important one. BB makes .fl-col-content a
   flex container, which turns every module inside it into a flex item
   sized by its own content rather than by the column - so the Contact
   form collapsed to 620 of shrink-to-fit inside a 940 column, and its
   rows each came out a different width. This is the same flex trap the
   Change Password rebuild hit on .fl-row-content-wrap: it reads as a
   cascade problem, but the cause is `display` on the parent. */
body.ldst26 .fl-builder-content .fl-col-content {
	display: block !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* BB spaces modules with a margin on .fl-module and another on
   .fl-module-content. On a page with a single module in its column,
   both are simply 20px of dead space between the card's padding and
   the copy; the FAQ, which has many, sets its own spacing in 8a.

   Vertical only: `margin: 0` would also clobber the `margin: 0 auto`
   that centres .contact-us-container, which is itself an fl-module. */
body.ldst26 .fl-builder-content .fl-module,
body.ldst26 .fl-builder-content .fl-module > .fl-module-content {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Store Locator's rows carry background photos on the row itself
   (`fl-row-bg-photo`, plus the `page-bg` and `page-locator-bottom`
   classes), which the rule above already clears - this is the belt to
   that braces, because BB also emits the image as an inline style on
   .fl-row-content-wrap for some row types. */
body.ldst26 .fl-builder-content .fl-row-bg-photo > .fl-row-content-wrap,
body.ldst26 .fl-builder-content .fl-row-bg-video > .fl-row-content-wrap {
	background-image: none !important;
}

body.ldst26 .ldst26-band {
	width: 100%;
	padding: 0 0 95px;
	background-color: var(--ldst-red);
	background-image: var(--ld-red-grad);
}

body.ldst26 .ldst26-shell {
	width: min(var(--ldst-shell), 100%);
	margin: 0 auto;
}

/* ---- 2. Title -----------------------------------------------------
   Profile Image's numbers: cap top 97.5 below the band edge once
   Gravity's 6.05 of internal leading at 78/78 is taken off.
------------------------------------------------------------------- */
body.ldst26 .ldst26-head {
	padding-top: 97.5px;
}

body.ldst26 .ldst26-title {
	margin: 0 0 0 4px;
	padding: 0;
	font-family: var(--ld-font-display);
	font-weight: 400;
	font-size: 78px;
	line-height: 1;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: #fff;
}

/* ---- 3. The card --------------------------------------------------
   Long-form legal copy across the full 940 of card measure is about
   110 characters a line, which is well past comfortable, so the prose
   containers are capped and centred inside it. The two functional
   pages (the Contact form, the locator) are not capped - they set
   their own measure.
------------------------------------------------------------------- */
body.ldst26 .ldst26-card {
	margin: 57.5px 0 0;
	padding: 56px 64px 64px;
	border-radius: var(--ldst-radius);
	background: #fff;
}

body.ldst26 .ldst26-card .terms_privacy,
body.ldst26 .ldst26-card .fl-rich-text {
	max-width: var(--ldst-prose);
	margin: 0 auto;
}

/* ---- 3a. The legacy cards -----------------------------------------
   `.terms_privacy` (style.css:1740), `.contact-us-container`
   (style.css:1046) and `.locator-map` (new-layout.css:1079) are
   themselves white cards - same six-layer shadow, same white fill - and
   each carries a large negative top margin (-20%, -30%, -35%) that
   pulled it up over the banner photo above it. That photo is now
   deleted, so the negative margin drags them over the page title
   instead: on Contact Us the form floated clear of the card and sat on
   top of the heading.

   .locator-map is the worst behaved: a hard `min-height: 800px` that
   left 800px of empty white under the search row, and `z-index: 99` to
   sit above the banner. Its margin and shadow are already `!important`
   in the <=1300px block, hence the same here.

   They are cards inside the card now, so everything that made them a
   card is cleared and only their content survives. None is scoped to
   these pages - `.terms_privacy` is also used by Rewards Program Terms
   of Use and the other legal pages that are still legacy - so none of
   these rules may be written without the body class.
------------------------------------------------------------------- */
body.ldst26 .ldst26-card .terms_privacy,
body.ldst26 .ldst26-card .contact-us-container,
body.ldst26 .ldst26-card .locator-map {
	width: auto;
	padding: 0;
	margin-top: 0 !important;
	min-height: 0;
	background: none;
	box-shadow: none !important;
	position: static;
	z-index: auto;
	zoom: 1;
}

/* .ldc-store-locator-form's own 30px padding goes too - the card
   supplies the padding now. */
body.ldst26 .ldst26-card .ldc-store-locator-form {
	padding: 0;
}

/* Full card measure, like the locator's search row - the form's outer
   edges then line up with the card padding, so the left-aligned submit
   sits under the left edge of the fields and nothing is left stranded
   down the right-hand side. */
body.ldst26 .ldst26-card .contact-us-container {
	max-width: none;
}

body.ldst26 .ldst26-card .contact-us-container .nf-form-content {
	max-width: none !important;
	padding: 0;
}

/* ---- 4. Long-form copy --------------------------------------------
   The theme ships `p { line-height: 25px !important }` in style.css and
   `h2 { padding-top: 25px }` with a Tungsten stack, so every measure
   below has to reclaim its line-height the same way and every heading
   has to restate its padding.
------------------------------------------------------------------- */
body.ldst26 .ldst26-card p {
	margin: 0 0 18px;
	padding: 0;
	font-family: var(--ld-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 27px !important;
	color: var(--ldst-ink);
}

body.ldst26 .ldst26-card p:last-child {
	margin-bottom: 0;
}

body.ldst26 .ldst26-card h1,
body.ldst26 .ldst26-card h2 {
	margin: 40px 0 16px;
	padding: 0;
	font-family: var(--ld-font-heading);
	font-weight: 700;
	font-size: 28px;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--ldst-ink);
}

/* The h3 is the workhorse on the two privacy pages - it is every
   section head. Same treatment as the My Account card's section heads:
   Neutraface Bold 20 / 0.05em, uppercase, in the button red. */
body.ldst26 .ldst26-card h3 {
	margin: 36px 0 12px;
	padding: 0;
	font-family: var(--ld-font-heading);
	font-weight: 700;
	font-size: 20px;
	line-height: 27.5px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ldst-red-btn);
}

body.ldst26 .ldst26-card h4,
body.ldst26 .ldst26-card h5,
body.ldst26 .ldst26-card h6 {
	margin: 28px 0 10px;
	padding: 0;
	font-family: var(--ld-font-heading);
	font-weight: 700;
	font-size: 17px;
	line-height: 1.4;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--ldst-ink);
}

body.ldst26 .ldst26-card > *:first-child,
body.ldst26 .ldst26-card .terms_privacy > *:first-child,
body.ldst26 .ldst26-card .fl-rich-text > *:first-child {
	margin-top: 0;
}

body.ldst26 .ldst26-card ul,
body.ldst26 .ldst26-card ol {
	margin: 0 0 18px;
	padding-left: 24px;
}

body.ldst26 .ldst26-card li {
	margin: 0 0 8px;
	font-family: var(--ld-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 27px;
	color: var(--ldst-ink);
}

body.ldst26 .ldst26-card li p {
	margin-bottom: 8px;
}

body.ldst26 .ldst26-card strong,
body.ldst26 .ldst26-card b {
	font-weight: 700;
	color: var(--ldst-ink);
}

/* The theme sets a blanket `a { color: #979797 }`, which on a white
   card reads as disabled text rather than a link. */
body.ldst26 .ldst26-card a {
	color: var(--ldst-red-btn);
	text-decoration: underline;
	text-underline-offset: 2px;
}

body.ldst26 .ldst26-card a:hover,
body.ldst26 .ldst26-card a:focus {
	color: #a5121a;
}

body.ldst26 .ldst26-card table {
	width: 100%;
	margin: 0 0 24px;
	border-collapse: collapse;
	font-family: var(--ld-font-body);
	font-size: 15px;
}

body.ldst26 .ldst26-card th,
body.ldst26 .ldst26-card td {
	padding: 12px 14px;
	border: 1px solid #e3e3e3;
	text-align: left;
	vertical-align: top;
	line-height: 24px;
}

body.ldst26 .ldst26-card th {
	background: var(--ldst-field);
	font-family: var(--ld-font-heading);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* Wide tables scroll in their own box rather than pushing the page
   sideways. */
body.ldst26 .ldst26-card .fl-rich-text,
body.ldst26 .ldst26-card .terms_privacy {
	overflow-x: auto;
}

/* ...except around a form. A scroll container clips on both axes, and
   the fields run the full measure, so it cut the sides off every
   field's focus outline (Contact Us, the locator search). */
body.ldst26 .ldst26-card .fl-rich-text:has(form),
body.ldst26 .ldst26-card .terms_privacy:has(form) {
	overflow: visible;
}

/* ---- 5. The shared control language -------------------------------
   Fields 70 tall at radius 8 on #F2F2F2 in Neutraface 500 18, and the
   standard 47 x 216.5 red pill - the same controls Change Password, My
   Account and both sign-ups use. Applied here to the Contact Us Ninja
   Form and the Store Locator search, neither of which has a comp.
------------------------------------------------------------------- */
body.ldst26 .ldst26-card input[type="text"],
body.ldst26 .ldst26-card input[type="email"],
body.ldst26 .ldst26-card input[type="tel"],
body.ldst26 .ldst26-card input[type="number"],
body.ldst26 .ldst26-card input[type="url"],
body.ldst26 .ldst26-card input[type="password"],
body.ldst26 .ldst26-card select,
body.ldst26 .ldst26-card textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 70px;
	margin: 0;
	padding: 0 24px;
	border: none;
	border-radius: 8px;
	background-color: var(--ldst-field);
	background-image: none;
	font-family: var(--ld-font-heading);
	font-weight: 500;
	font-size: 18px;
	line-height: 70px;
	color: var(--ldst-ink);
	-webkit-appearance: none;
	appearance: none;
}

body.ldst26 .ldst26-card textarea {
	height: auto;
	min-height: 168px;
	padding: 22px 24px;
	line-height: 27px;
	resize: vertical;
}

body.ldst26 .ldst26-card select {
	padding-right: 48px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%231A1A1A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 24px center;
	cursor: pointer;
}

body.ldst26 .ldst26-card ::placeholder {
	color: #8A8A8A;
	opacity: 1;
}

body.ldst26 .ldst26-card input:focus,
body.ldst26 .ldst26-card select:focus,
body.ldst26 .ldst26-card textarea:focus {
	outline: 2px solid var(--ldst-red-btn);
	outline-offset: 2px;
}

/* The pill. `input[type=submit]` and `button` both, because Ninja Forms
   renders one and the locator renders the other. */
body.ldst26 .ldst26-card input[type="submit"],
body.ldst26 .ldst26-card button[type="submit"],
body.ldst26 .ldst26-card .ldst26-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: auto;
	min-width: 216.5px;
	height: 47px;
	padding: 0 28px;
	border: none;
	border-radius: 8px;
	background: var(--ldst-red-btn);
	font-family: var(--ld-font-heading);
	font-weight: 700;
	font-size: 19px;
	line-height: 1.1;
	letter-spacing: 0.05em;
	text-align: center;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

body.ldst26 .ldst26-card input[type="submit"]:hover,
body.ldst26 .ldst26-card button[type="submit"]:hover,
body.ldst26 .ldst26-card input[type="submit"]:focus,
body.ldst26 .ldst26-card button[type="submit"]:focus {
	background: #a5121a;
	color: #fff;
}

/* ---- 6. Contact Us: the Ninja Form --------------------------------
   Form 1. Every visible field carries an empty <label> holding only the
   required asterisk - the field names live in the placeholders - so the
   label row is collapsed rather than styled, and the placeholder colour
   above is doing real work here.
------------------------------------------------------------------- */
/* style.css:1057 sets every one of these on `!important`, at a
   specificity this sheet ties rather than beats, so the control
   language has to be restated here on `!important` too - with
   .nf-field-element in the selector so it wins the tie outright rather
   than on source order. Legacy values being replaced: 58 tall, radius
   4, Roboto 16 in #A5AAB9, and a focus state that swaps the fill to
   white with a 1px black border. */
body.ldst26 .ldst26-card .nf-field-element input[type="text"],
body.ldst26 .ldst26-card .nf-field-element input[type="email"],
body.ldst26 .ldst26-card .nf-field-element input[type="tel"],
body.ldst26 .ldst26-card .nf-field-element input[type="password"],
body.ldst26 .ldst26-card .nf-field-element select,
body.ldst26 .ldst26-card .nf-field-element textarea {
	height: 70px !important;
	margin: 0 !important;
	padding: 0 24px !important;
	border: none !important;
	border-radius: 8px !important;
	background-color: var(--ldst-field) !important;
	border-color: var(--ldst-field) !important;
	font-family: var(--ld-font-heading) !important;
	font-weight: 500 !important;
	font-size: 18px !important;
	color: var(--ldst-ink) !important;
}

body.ldst26 .ldst26-card .nf-field-element textarea {
	height: auto !important;
	min-height: 168px !important;
	padding: 22px 24px !important;
	line-height: 27px;
	resize: vertical !important;
}

body.ldst26 .ldst26-card .nf-field-element input[type="text"]:focus,
body.ldst26 .ldst26-card .nf-field-element input[type="email"]:focus,
body.ldst26 .ldst26-card .nf-field-element input[type="tel"]:focus,
body.ldst26 .ldst26-card .nf-field-element select:focus,
body.ldst26 .ldst26-card .nf-field-element textarea:focus {
	border: none !important;
	background-color: var(--ldst-field) !important;
	color: var(--ldst-ink) !important;
	outline: 2px solid var(--ldst-red-btn);
	outline-offset: 2px;
}

/* A select's placeholder is a real option, so it renders in the text
   colour while every neighbouring field shows grey placeholder text.
   Every NF select here is `required` with an empty-valued first option,
   so :invalid is exactly "nothing chosen yet". */
body.ldst26 .ldst26-card .nf-field-element select:required:invalid {
	color: #8A8A8A !important;
}

body.ldst26 .ldst26-card .nf-field-element select option {
	color: var(--ldst-ink);
}

/* The pill wins the cascade on its own, but style.css:1148 also sets
   `font-style: italic` (it was a Druk Medium Italic button), and this
   sheet never states font-style, so the italic survived into the new
   button. */
body.ldst26 .ldst26-card .nf-field-element input[type="submit"] {
	width: auto !important;
	font-style: normal;
}

/* style.css:1139 lays the second and third fields out as
   `display: inline-block; width: 49%` on `!important` - an older
   two-column hack that predates NF's own .nf-cell rows and now fights
   them. Cleared so the nf-cells flex below is the only layout. */
body.ldst26 .ldst26-card .contact-us-container nf-field {
	display: block !important;
	width: auto !important;
	margin-left: 0 !important;
}

body.ldst26 .nf-form-cont {
	max-width: none;
	margin: 0 auto;
}

body.ldst26 .nf-form-title,
body.ldst26 .nf-before-form,
body.ldst26 .nf-debug-msg {
	display: none;
}

/* The legend explaining the asterisk. style.css:1077 hides it, which
   left the `*` in every placeholder unexplained - it is the only
   required marker on the form now that the labels are empty. */
body.ldst26 .nf-form-fields-required {
	display: block;
	margin: 0 0 24px;
	font-family: var(--ld-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 22px;
	color: #6B6B6B;
}

body.ldst26 .ninja-forms-req-symbol {
	color: var(--ldst-red-btn);
}

/* NF's row markup is .nf-row > nf-cells > .nf-cell, and the cells carry
   their width as an inline `width: 50%`. The flex container therefore
   has to be nf-cells, not .nf-row: making .nf-row the flex parent
   leaves nf-cells as its only item, which then sizes to content (522 of
   a possible 820) and every cell takes 50% of that instead of of the
   form. The custom elements are declared block for the same reason -
   an unstyled custom element is display: inline, and an inline
   ancestor collapses every width below it.

   The negative margin restores a 24px gutter without touching the
   inline widths. */
body.ldst26 .nf-form-content nf-rows-wrap,
body.ldst26 .nf-form-content nf-fields,
body.ldst26 .nf-form-content nf-field,
body.ldst26 .nf-form-content nf-section {
	display: block;
}

body.ldst26 .nf-form-content .nf-row {
	display: block;
	margin: 0;
}

body.ldst26 .nf-form-content nf-cells {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -12px;
}

body.ldst26 .nf-form-content .nf-cell {
	box-sizing: border-box;
	padding: 0 12px;
}

body.ldst26 .nf-field-container {
	margin: 0 0 24px;
}

/* The label is empty but for the asterisk, which every placeholder
   already repeats, so the whole label row can go. */
body.ldst26 .nf-field-label {
	display: none;
}

body.ldst26 .nf-field-element {
	margin: 0;
}

body.ldst26 .nf-error-wrap.nf-error,
body.ldst26 .nf-error-msg {
	margin: 6px 0 0;
	font-family: var(--ld-font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 20px !important;
	color: var(--ldst-red-btn);
}

body.ldst26 .nf-field-element .nf-error.field-wrap .nf-error-msg {
	color: var(--ldst-red-btn);
}

body.ldst26 .nf-pass .nf-field-element:after,
body.ldst26 .nf-fail .nf-field-element:after {
	display: none;
}

/* Left, not centred: the submit lines up with the left edge of the
   fields above it. */
body.ldst26 .submit-container {
	margin-top: 8px;
	text-align: left;
}

/* "Please correct errors before submitting this form." NF renders it in
   .nf-after-form-content, after every row - so under the submit, where
   it is easy to miss. The wrappers between the form's inner div and the
   rows are flattened with `display: contents` so the rows and the error
   box become siblings in one flex column, and `order` moves the submit
   row (and the hidden/HTML rows after it) below the error box. DOM
   order is unchanged, so screen readers still get role="alert" as
   before. Without :has() support the submit just stays where NF put
   it. */
body.ldst26 .nf-form-layout form > div {
	display: flex;
	flex-direction: column;
}

body.ldst26 .nf-form-layout form > div > .nf-form-content,
body.ldst26 .nf-form-layout .nf-form-content > nf-rows-wrap,
body.ldst26 .nf-form-layout form > div > .nf-after-form-content,
body.ldst26 .nf-form-layout .nf-after-form-content > nf-section {
	display: contents;
}

body.ldst26 .nf-form-layout .nf-form-errors {
	order: 1;
}

body.ldst26 .nf-form-layout nf-rows-wrap > .nf-row:has(.submit-container),
body.ldst26 .nf-form-layout nf-rows-wrap > .nf-row:has(.submit-container) ~ .nf-row,
body.ldst26 .nf-form-layout .nf-form-hp {
	order: 2;
}

body.ldst26 .nf-form-errors .nf-error-msg {
	margin: 0 0 16px;
}

body.ldst26 .hidden-container,
body.ldst26 .nf-field-container.hidden-container {
	margin: 0;
}

body.ldst26 .nf-response-msg {
	margin: 0 0 24px;
	font-family: var(--ld-font-heading);
	font-weight: 700;
	font-size: 20px;
	line-height: 30px;
	color: #02775F;
}

body.ldst26 .nf-response-msg p {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: 30px !important;
	color: inherit;
}

/* ---- 7. Store Locator ---------------------------------------------
   The search is a zip box, a radius select and a submit, which the
   legacy page ran full width. On the card they read as one control
   row, and the map iframe below keeps the full card measure.
------------------------------------------------------------------- */
/* Full card measure, so the search row's outer edges line up with the
   results map below it and the two read as one panel. */
body.ldst26 .ldc-store-locator-form {
	max-width: none;
	margin: 0 auto;
}

body.ldst26 .ldc-store-locator-form > p,
body.ldst26 .ldc-locator-form-container > p {
	margin: 0 0 24px;
	font-family: var(--ld-font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 27px !important;
	color: var(--ldst-ink);
	text-align: center;
}

body.ldst26 .form-locator {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
	justify-content: center;
}

body.ldst26 .ldst26-card .form-locator .zip-map {
	flex: 1 1 240px;
	width: auto;
	min-width: 0;
}

body.ldst26 .ldst26-card .form-locator .distance-map {
	flex: 1 1 240px;
	width: auto;
	min-width: 0;
}

body.ldst26 .ldst26-card .form-locator .button-map {
	flex: 0 0 auto;
}

/* The results are a separate document in an iframe (/locator-map/map.php),
   so nothing in this sheet reaches inside it - only its box. */
body.ldst26 .locator-map iframe,
body.ldst26 .ldst26-card iframe {
	display: block;
	width: 100%;
	margin: 32px 0 0;
	border: none;
	border-radius: 12px;
}

/* ---- 8. The rewards lockup ----------------------------------------
   template-parts/savings-outro.php at the shared 611 scale.
------------------------------------------------------------------- */
body.ldst26 .ldsv26-outro {
	margin-top: 70px;
	text-align: center;
}

body.ldst26 .ldsv26-outro__lockup {
	display: block;
	width: 100%;
	max-width: 611px;
	height: auto;
	margin: 0 auto;
}

/* Logged out there is no outro at all - the coin cluster and the MAKE IT
   COUNT banner are one image and the client asked for both to go
   (2026-10-02). static-2026.php renders nothing there, so the band just
   closes on its own 95px of foot. Nothing to style. */

/* ---- 8a. Accordions, and the FAQ page -----------------------------
   The FAQ (post 3913, /faq/) is the one page on this template with a
   comp of its own, delivered as "Reskin _ About LD Rewards.jpg"
   (2880x5404 = 2x of 1440x2702). The filename is wrong - it is the FAQ
   board.

   The comp draws a flat list of placeholder questions. The live page is
   twelve categories, each a heading module, a separator module and a
   Beaver Builder accordion, and its copy is unchanged - so the questions
   and answers follow the comp, the category headings (which the comp
   has no equivalent for) take the red section head the legal pages on
   this template already use, and the separators go.

   The accordion rules are not FAQ-scoped: any page on this template
   with a BB accordion gets them. Only the card geometry and the
   category treatment hang off `.page-faq`.

   Beaver Builder markup, for reference:
     .fl-accordion-item[.fl-accordion-item-active]
       .fl-accordion-button[aria-expanded]            div, role=button
         a.fl-accordion-button-icon > i.fas.fa-plus   swapped to fa-minus
         a.fl-accordion-button-label
       .fl-accordion-content                          jQuery slides this
   Its label typography (Druk Heavy Italic 30, uppercase, red) is per
   node in the BB layout CSS, and the Customizer and new-layout.css both
   set the button padding - new-layout.css on !important.
------------------------------------------------------------------- */

/* comp: closed questions on a 38 pitch - a 22 line and 16 between. An
   open one gets 42 more below its answer (58 total).

   The comp also draws 38 more ABOVE an open question. That is left out
   on purpose: margin added above the item you just clicked pushes that
   question down under the cursor (every item but a section's first).
   Space below the answer only moves what comes after it, which the
   answer sliding open moves anyway. */
body.ldst26 .ldst26-card .fl-accordion-item {
	margin: 0 0 16px;
	border: 0;
	transition: margin 0.25s ease;
}

body.ldst26 .ldst26-card .fl-accordion-item:last-child {
	margin-bottom: 0;
}

body.ldst26 .ldst26-card .fl-accordion-item-active {
	margin-bottom: 58px;
}

body.ldst26 .ldst26-card .fl-accordion-item-active:last-child {
	margin-bottom: 0;
}

/* Baseline, not centre: a long question that wraps keeps its +/- on
   the first line and the rest of the question hangs off the indent. */
body.ldst26 .ldst26-card .fl-accordion-button {
	display: flex !important;
	align-items: baseline;
	width: 100% !important;
	padding: 0 !important;
	border: 0;
	background: none;
	cursor: pointer;
}

body.ldst26 .ldst26-card .fl-accordion-button:focus-visible {
	outline: 2px solid var(--ldst-red-btn);
	outline-offset: 4px;
	border-radius: 4px;
}

/* comp: the marker is a typed "+" / "-" in Montserrat Bold at 17, in
   red, not an icon glyph - so the Font Awesome <i> is hidden and the
   character drawn in its place. The box is a fixed 15px so the question
   does not shift sideways when "+" becomes the narrower "-", which the
   comp's typed version does. The wrapper <a> is aria-hidden already;
   the open/closed state reaches assistive tech through aria-expanded on
   the button. */
body.ldst26 .ldst26-card a.fl-accordion-button-icon {
	flex: 0 0 15px;
	width: 15px;
	margin: 0 !important;
	padding: 0;
	font-family: var(--ld-font-body);
	font-weight: 700;
	font-size: 17px;
	line-height: 22px;
	color: var(--ldst-red-btn);
	text-decoration: none;
	opacity: 1;
}

body.ldst26 .ldst26-card a.fl-accordion-button-icon::before {
	content: "+";
}

body.ldst26 .ldst26-card .fl-accordion-button[aria-expanded="true"] a.fl-accordion-button-icon::before,
body.ldst26 .ldst26-card .fl-accordion-item-active a.fl-accordion-button-icon::before {
	content: "-";
}

body.ldst26 .ldst26-card a.fl-accordion-button-icon > i {
	display: none;
}

/* comp: Montserrat Bold 18 in black - 508 of ink against the canvas's
   507.8 for that string. */
body.ldst26 .ldst26-card a.fl-accordion-button-label {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	font-family: var(--ld-font-body);
	font-style: normal;
	font-weight: 700;
	font-size: 18px;
	line-height: 22px;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	text-decoration: none;
	color: #000;
}

body.ldst26 .ldst26-card .fl-accordion-button:hover a.fl-accordion-button-label {
	color: var(--ldst-red-btn);
}

/* comp: the answer starts under the marker, not under the question, in
   Montserrat Regular 18 on a tight 21 - 924.5 of ink for its first line
   against the canvas's 924.2 - with a blank line between paragraphs. */
body.ldst26 .ldst26-card .fl-accordion-content {
	padding: 8px 0 0 !important;
	border: 0;
	background: none;
}

body.ldst26 .ldst26-card .fl-accordion-content p,
body.ldst26 .ldst26-card .fl-accordion-content li {
	font-family: var(--ld-font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 21px !important;
	color: #000;
}

body.ldst26 .ldst26-card .fl-accordion-content p {
	margin: 0 0 21px;
}

body.ldst26 .ldst26-card .fl-accordion-content li {
	margin: 0 0 6px;
}

body.ldst26 .ldst26-card .fl-accordion-content > :last-child,
body.ldst26 .ldst26-card .fl-accordion-content > p:last-of-type {
	margin-bottom: 0;
}

/* comp: 329 x 47, radius 8, #1F00A8, Montserrat Bold 19 uppercase with
   no tracking - the same button Profile Image uses, not the red
   Neutraface pill the forms on this template use. */
body.ldst26 .ldst26-card .ldst26-cta {
	margin: 62px 0 0;
	text-align: center;
}

body.ldst26 .ldst26-card a.ldst26-cta__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	max-width: 100%;
	height: 47px;
	padding: 0 34.5px;
	border-radius: 8px;
	background: #1F00A8;
	font-family: var(--ld-font-body);
	font-weight: 700;
	font-size: 19px;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;
	transition: background-color 0.2s ease;
}

body.ldst26 .ldst26-card a.ldst26-cta__btn:hover,
body.ldst26 .ldst26-card a.ldst26-cta__btn:focus {
	background: #17007e;
	color: #fff;
}

/* The FAQ card. comp: 21.5 under the title (the other pages here use
   Profile Image's 57.5), 67 of side padding with the copy running the
   full measure rather than the 880 prose cap, 66 under the button. */
body.ldst26.page-faq .ldst26-card {
	margin-top: 21.5px;
	padding: 64px 67px 66px;
}

/* overflow: the shared `overflow-x: auto` (there for wide tables on the
   legal pages) also clips vertically, and it cut the sides off the
   accordion buttons' focus ring. Nothing on the FAQ is wider than the
   card. */
body.ldst26.page-faq .ldst26-card .terms_privacy {
	max-width: none;
	overflow: visible;
}

body.ldst26.page-faq .ldst26-card .fl-module-separator {
	display: none;
}

body.ldst26.page-faq .ldst26-card .fl-module-heading {
	margin-top: 44px !important;
}

body.ldst26.page-faq .ldst26-card .fl-module-heading:first-child {
	margin-top: 0 !important;
}

/* The heading modules keep BB's 20px side margin on .fl-module-content
   (the frame rules above zero only the vertical ones), which indented
   every category head 20px off the questions' left edge. */
body.ldst26.page-faq .ldst26-card .fl-module-heading > .fl-module-content {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* max-width: style.css's `.terms_privacy h2` caps it at 700. */
body.ldst26.page-faq .ldst26-card .fl-heading {
	max-width: none;
	margin: 0 0 18px;
	padding: 0;
	font-family: var(--ld-font-heading);
	font-weight: 700;
	font-size: 20px;
	line-height: 27.5px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ldst-red-btn);
}

/* ---- 8b. 404 (404.php) --------------------------------------------
   The same band, title and card as the static pages; only the eyebrow,
   the centred copy and the button as an anchor are particular to it.
   The card is narrower than a page of terms because it holds two lines.
------------------------------------------------------------------- */
body.ldst26-error .ldst26-error__code {
	margin: 0 0 10px 6px;
	padding: 0;
	font-family: var(--ld-font-heading);
	font-weight: 700;
	font-size: 20px;
	line-height: 1 !important;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
}

body.ldst26-error .ldst26-error__card {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

body.ldst26-error .ldst26-error__actions {
	margin: 36px 0 0;
}

/* the card here is two lines, not a page of terms, so the lockup at its
   full 611 dominated what was left - it closes the page rather than
   being the page */
body.ldst26-error .ldsv26-outro {
	margin-top: 64px;
}

body.ldst26-error .ldsv26-outro__lockup {
	max-width: 420px;
}

/* .ldst26-btn is written for the form submits on this template, which
   are <button>s - as an anchor it needs the underline cleared. */
body.ldst26-error .ldst26-card a.ldst26-btn {
	text-decoration: none;
}

body.ldst26-error .ldst26-card a.ldst26-btn:hover,
body.ldst26-error .ldst26-card a.ldst26-btn:focus {
	background: #b6121a;
	color: #fff;
}

/* ---- 9. Narrow ----------------------------------------------------
   No board exists for any width here, so these follow the steps the
   other 2026 pages already take.
------------------------------------------------------------------- */
@media (max-width: 1199px) {
	body.ldst26 .ldst26-shell {
		width: 100%;
		padding: 0 24px;
		box-sizing: border-box;
	}
}

@media (max-width: 991px) {
	body.ldst26 .ldst26-head {
		padding-top: 64px;
	}

	body.ldst26 .ldst26-title {
		font-size: 56px;
	}

	body.ldst26 .ldst26-card {
		margin-top: 32px;
		padding: 40px 36px 44px;
	}

	body.ldst26 .ldst26-card h2 {
		font-size: 24px;
	}

	body.ldst26.page-faq .ldst26-card {
		margin-top: 24px;
		padding: 44px 40px 48px;
	}
}

@media (max-width: 767px) {
	body.ldst26 .ldst26-band {
		padding-bottom: 72px;
	}

	body.ldst26 .ldst26-shell {
		padding: 0 16px;
	}

	body.ldst26 .ldst26-head {
		padding-top: 48px;
	}

	body.ldst26 .ldst26-title {
		margin-left: 2px;
		font-size: 40px;
	}

	body.ldst26-error .ldst26-error__code {
		margin-left: 3px;
		font-size: 16px;
	}

	body.ldst26-error .ldst26-error__actions {
		margin-top: 28px;
	}

	body.ldst26 .ldst26-card {
		margin-top: 24px;
		padding: 28px 20px 32px;
		border-radius: 16px;
	}

	body.ldst26 .ldst26-card h2 {
		margin-top: 32px;
		font-size: 21px;
	}

	body.ldst26 .ldst26-card h3 {
		margin-top: 28px;
		font-size: 18px;
		line-height: 24px;
	}

	body.ldst26 .ldst26-card p,
	body.ldst26 .ldst26-card li {
		font-size: 15px;
		line-height: 25px !important;
	}

	/* NF's inline width: 50% has to give way or the two-up rows stay
	   two-up on a phone. */
	body.ldst26 .nf-form-content .nf-cell {
		width: 100% !important;
	}

	/* Stacking the search row flips the flex main axis to vertical, and
	   `flex: 1 1 240px` then reads as a 240px *height* rather than a
	   240px minimum width - which is exactly what it did, giving three
	   240-tall controls. The basis has to go with the direction. */
	body.ldst26 .form-locator {
		flex-direction: column;
		align-items: stretch;
	}

	body.ldst26 .ldst26-card .form-locator .zip-map,
	body.ldst26 .ldst26-card .form-locator .distance-map,
	body.ldst26 .ldst26-card .form-locator .button-map {
		flex: 0 0 auto;
		width: 100%;
	}

	/* ---- accordions / FAQ ---- */
	body.ldst26.page-faq .ldst26-card {
		margin-top: 20px;
		padding: 32px 20px 36px;
	}

	body.ldst26.page-faq .ldst26-card .fl-module-heading {
		margin-top: 36px !important;
	}

	body.ldst26.page-faq .ldst26-card .fl-heading {
		margin-bottom: 14px;
		font-size: 18px;
		line-height: 24px;
	}

	body.ldst26 .ldst26-card .fl-accordion-item {
		margin-bottom: 14px;
	}

	body.ldst26 .ldst26-card .fl-accordion-item-active {
		margin-bottom: 40px;
	}

	body.ldst26 .ldst26-card a.fl-accordion-button-icon {
		flex-basis: 14px;
		width: 14px;
		font-size: 16px;
		line-height: 21px;
	}

	body.ldst26 .ldst26-card a.fl-accordion-button-label {
		font-size: 16px;
		line-height: 21px;
	}

	body.ldst26 .ldst26-card .fl-accordion-content p,
	body.ldst26 .ldst26-card .fl-accordion-content li {
		font-size: 15px;
		line-height: 22px !important;
	}

	body.ldst26 .ldst26-card .fl-accordion-content p {
		margin-bottom: 18px;
	}

	/* 19px with 34.5 a side is 329 - wider than a 375 phone's 303 of
	   card measure - so the button steps down in size and padding. */
	body.ldst26 .ldst26-card .ldst26-cta {
		margin-top: 40px;
	}

	body.ldst26 .ldst26-card a.ldst26-cta__btn {
		padding: 0 20px;
		font-size: 17px;
	}

	body.ldst26 .ldsv26-outro {
		margin-top: 56px;
	}

	body.ldst26 .ldsv26-outro__lockup {
		max-width: 268px;
	}
}

/* ---- 10. The logged-out footer ------------------------------------
   Added 2026-10-02 at the client's request: logged out, these pages
   should carry the sign-up / login footer, not the member one.

   Why it looked wrong rather than merely unstyled: `body.ldst26`
   already paints the red gradient (section 1), and the footer sits
   OUTSIDE .ldst26-band - so it was already on red. What covered it is
   `.footer`'s own `background: #EFEFEF`, set in the Customizer for the
   member footer, plus the pre-2026 Roboto/#494949 link treatment that
   nothing in this sheet had overridden. So this section mostly takes a
   ground away rather than adding one.

   Scoped `:not(.logged-in)` - WordPress adds `logged-in` in
   body_class() - so a member on the same page keeps the grey member
   footer, its nav menus and the disclaimer stack, all untouched.

   The type mirrors css/ldc-signup-2026.css's own logged-out footer
   block exactly (Neutraface 2 Text Bold 14 white, Montserrat 13/17
   white), because these pages sit next to sign-up and login in the
   flow and the row must not change face between them. If that block is
   ever retuned, retune this with it.

   The measure follows .ldst26-shell rather than sign-up's numbers, so
   the footer lines up with the card above it on THIS page.
------------------------------------------------------------------- */
body.ldst26:not(.logged-in) .footer {
	/* The member footer's 52/170 is replaced. 142 of foot clears the
	   fixed Surgeon General's warning (311 x 78 at a 20px inset) and
	   gives the page a bottom, which it needs here because the lockup
	   is above the footer on this template, not below it as on
	   sign-up. */
	padding: 0 0 142px;
	background: none;
}

body.ldst26:not(.logged-in) .footer .footer-container {
	width: min(var(--ldst-shell), 100%);
	max-width: none;
	margin: 0 auto;
	padding: 0;
}

body.ldst26:not(.logged-in) .footer .col-sm-9,
body.ldst26:not(.logged-in) .footer .col-sm-3 {
	width: 100%;
	padding: 0;
}

/* Centred, like the login splash's own footer - flex with wrap, which is
   exactly what home.php's footer uses. */
body.ldst26:not(.logged-in) .footer ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 23.5px 0 0;
}

/* `style.css` floats these - `.footer ul li { float: left }`, unscoped -
   and adds `width: 100%` inside its own max-width:767 block. Both have
   to be undone, and this is the trap: a float CANNOT be centred, and it
   also blockifies the computed display, so setting `display:
   inline-block` on its own changes nothing at all. Undoing the width is
   what stops the phone stacking one link per line. */
body.ldst26:not(.logged-in) .footer ul li {
	display: block;
	float: none;
	width: auto;
	padding: 0;
	line-height: 1;
}

/* 0 9px is the login splash's gutter, so adjacent links sit 18 apart and
   the row stays symmetrical about the centre. */
body.ldst26:not(.logged-in) .footer ul li a {
	display: block;
	padding: 0 9px;
	font-family: var(--ld-font-heading);
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	color: #fff;
}

body.ldst26:not(.logged-in) .footer .col-sm-9 > p {
	margin: 0;
	padding: 12px 0 0;
	font-family: var(--ld-font-body);
	font-weight: 400;
	font-size: 13px;
	line-height: 17px;
	text-align: center;
	color: #fff;
}

/* The copyright is two <span>s, and `style.css` forces `text-align: left`
   onto `.footer span` inside its own max-width:767 block - which beats the
   centring set on the <p> and left-aligns the wrapped lines on a phone
   while the row above them is centred. */
body.ldst26:not(.logged-in) .footer .col-sm-9 > p span {
	text-align: center;
}

body.ldst26:not(.logged-in) .footer .col-sm-9 > p span + span {
	margin-left: 0;
}

/* Matches .ldst26-shell's own step at this width (section 9), so the
   footer keeps the card's 24px gutter rather than sign-up's 20/16. */
@media (max-width: 1199px) {
	body.ldst26:not(.logged-in) .footer .footer-container {
		width: 100%;
		padding: 0 24px;
		box-sizing: border-box;
	}
}