/* fdbarfety 05104228 */
.header-default .cst-header {position: absolute; top: 15px; width: 200px; left: 600px;}

/* Start 'vlp-new-price-value-final-price-no-value' (do not modify this line) */
/* Modified by lwpotter on 10/02/19 04:03 PM EDT */
.vlp .inventoryList .item.inv-type-new .pricing .final-price .value.no-value { text-decoration: none; font-weight: bold; font-size: 19px; color: #ffffff; }
/* End 'vlp-new-price-value-final-price-no-value' (do not modify this line) */

/* ddcsamp 10647195 */
.button-block-responsive.cst-blue .buttonblock-button .transparency-overlay {background: #3A8EEE;}

/* 03689822 JLC */
.index .page-bd .inventory-featured-default .view-all-link { display: block; margin-left: auto;width: fit-content;}

/* Start 'adventure-subaru-site-css' (do not modify this line) */
/* Adventure Subaru shared styles. Version 2026-11-06c.
   Source: adventuresubaru/website, site/site.css. Edit there, then paste this whole block into BOTH panels (CSS - Desktop and CSS - Mobile), replacing the old block.
   Every rule here sits under .as-page, so it only reaches widgets wrapped in a div with class as-page. .as-page itself has no styles; it only switches these rules on. Conventions and the list of converted pages: GitBook, DDC space, Website, Build Reference, Site CSS. */

/* ---------- Tokens: change a color here and every page using it follows ---------- */
:root {
  --as-navy: #002550;
  --as-orange: #C8651F;
  --as-heading: #0F1419;
  --as-ink: #2A3441;
  --as-muted: #666666;
  --as-rule: #D8DDE4;
  --as-cream: #F6F3EC;
  --as-cream-edge: #E6DFCF;
  --as-grey: #F6F7F9;
  --as-sage-dark: #4F6B4C;
  --as-sage-darker: #3F5A3D;
  --as-sage-light: #E9EFE6;
}

/* ---------- Column page: one centered reading column on white (WiFi landing). Markup: div class="as-page as-page--column", then div class="as-wrap". ---------- */
.as-page--column { background: #FFFFFF; padding: 24px 20px 48px; font-family: system-ui, -apple-system, sans-serif; color: var(--as-ink); }
.as-page--column .as-wrap { max-width: 960px; margin: 0 auto; }
.as-page--column h1 { font-family: Georgia, 'Times New Roman', serif; font-weight: 500; font-size: 38px; line-height: 1.15; color: var(--as-heading); letter-spacing: -0.01em; margin: 0 0 14px; }
.as-page--column h1 em { color: var(--as-navy); }
.as-page--column h2 { font-family: Georgia, 'Times New Roman', serif; font-weight: 500; font-size: 24px; color: var(--as-heading); margin: 0 0 10px; }
.as-page--column .as-lede { font-size: 17px; line-height: 1.55; margin: 0 0 24px; }

/* ---------- Basics ---------- */
.as-page .as-eyebrow { font-size: 12px; font-weight: 600; color: var(--as-orange); letter-spacing: 0.12em; text-transform: uppercase; margin: 0 0 12px; }
.as-page .as-btn { display: inline-block; background: var(--as-navy); color: #FFFFFF !important; padding: 12px 22px; border-radius: 6px; text-decoration: none !important; font-size: 15px; font-weight: 600; }

/* ---------- Banner: full-width image at the top of a page ---------- */
.as-page .as-banner { display: block; width: 100%; height: auto; border-radius: 6px; margin: 0 0 20px; }

/* ---------- Section: a block with a rule above it ---------- */
.as-page .as-section { border-top: 1px solid var(--as-rule); padding-top: 22px; margin: 0 0 24px; }
.as-page .as-section p { font-size: 16px; line-height: 1.55; margin: 0 0 10px; }
.as-page .as-section a:not(.as-btn) { color: var(--as-navy); font-weight: 600; text-decoration: underline; }

/* ---------- Box: callout with a navy left edge ---------- */
.as-page .as-box { background: var(--as-grey); border-left: 4px solid var(--as-navy); border-radius: 0 6px 6px 0; padding: 18px 20px; margin: 0 0 28px; }
.as-page .as-box p { font-size: 16px; line-height: 1.55; margin: 0 0 10px; }
.as-page .as-box p:last-child { margin: 0; }
.as-page .as-box a { color: var(--as-navy); font-weight: 600; text-decoration: underline; }

/* ---------- Tiles: grid of link tiles; a swipe row on phones ----------
   Markup: a ul with class as-tiles; each li has class as-tile and holds one link: the title, then a span with the note.
   A tile's colors come from the --as-tile-* variables, so a theme class only has to change those. */
.as-page .as-tiles { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.as-page .as-tile { display: flex; }
.as-page .as-tile a { display: block; width: 100%; box-sizing: border-box; min-height: 44px; padding: 16px 18px; border-radius: 6px; font-weight: 600; font-size: 16px; text-decoration: none !important;
  background: var(--as-tile-bg, var(--as-cream)); border: 1px solid var(--as-tile-border, var(--as-cream-edge)); border-top: 4px solid var(--as-tile-edge, var(--as-orange)); color: var(--as-tile-text, var(--as-navy)) !important; }
.as-page .as-tile a span { display: block; font-weight: 400; font-size: 14px; color: var(--as-tile-note, var(--as-ink)); margin-top: 4px; }
.as-page .as-tile__logo { display: block; height: 28px; width: auto; max-width: 100%; margin: 0 0 10px; }
.as-page .as-tile__img { display: block; width: 100%; height: auto; border-radius: 4px; margin: 0 0 10px; }
.as-page .as-tiles__hint { display: none; font-size: 13px; color: var(--as-muted); margin: -16px 0 24px; }
/* Hover only on devices with a real pointer, so a finger swiping the row on a phone does not trigger it. */
@media (hover: hover) and (pointer: fine) {
  .as-page .as-tile a:hover { border-color: var(--as-navy); border-top-color: var(--as-navy); }
}

/* ---------- Themes: what a promotion is, never which one. Add to the component, e.g. class="as-tile as-theme--offer" ---------- */
.as-page .as-theme--offer { --as-tile-bg: var(--as-sage-dark); --as-tile-border: var(--as-sage-dark); --as-tile-edge: var(--as-sage-darker); --as-tile-text: #FFFFFF; --as-tile-note: var(--as-sage-light); }

/* ---------- Disclaimer: offer terms at the bottom of a page ---------- */
.as-page .as-disclaimer { border-top: 1px solid var(--as-rule); padding-top: 18px; margin: 8px 0 0; }
.as-page .as-disclaimer p { font-size: 12px; line-height: 1.55; color: var(--as-muted); margin: 0 0 8px; }

/* ---------- Phones ---------- */
@media (max-width: 520px) {
  .as-page--column h1 { font-size: 30px; }
  /* Swipe row: CSS only, no script. Each tile is 78% wide so the next one peeks in. */
  .as-page .as-tiles { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 0 -20px 28px; padding: 0 20px 8px; scroll-padding: 0 20px; scrollbar-width: none; }
  .as-page .as-tiles::-webkit-scrollbar { display: none; }
  .as-page .as-tile { flex: 0 0 78%; scroll-snap-align: start; }
  .as-page .as-tiles__hint { display: block; }
}

/* ==================== Partner page components (partner pages, Eco-Friendly Retailer, Love-Encore, partner template) ==================== */
/* ---------- as-crumbs: breadcrumb trail, top of page above the hero, left edge aligned to the hero (1280 frame). ---------- */
.as-page .as-crumbs { background: #ffffff; padding: 20px 32px 0; }
.as-page .as-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; max-width: 1280px; margin: 0 auto; padding: 0; font-family: system-ui, -apple-system, sans-serif; font-size: 13px; line-height: 1.4; color: #6B7682; }
.as-page .as-crumbs li { margin: 0; padding: 0; }
.as-page .as-crumbs li + li::before { content: "\203A"; margin: 0 10px; color: #A3ABB5; }
.as-page .as-crumbs a { color: #2A3441; text-decoration: none !important; }
.as-page .as-crumbs a:hover { text-decoration: underline !important; }
.as-page .as-crumbs a:focus-visible { outline: 2px solid #002550; outline-offset: 2px; }
@media (max-width: 767px) {
  .as-page .as-crumbs { padding: 12px 16px 0; }
}

/* ---------- as-hero: opening image + text split, full width (1280). One per page. ---------- */
.as-page .as-hero { background: #ffffff; padding: 48px 32px; }
.as-page .as-hero .as-row { display: flex; flex-wrap: wrap; align-items: center; gap: 48px; max-width: 1280px; margin: 0 auto; }
.as-page .as-hero .as-col { flex: 1 1 340px; min-width: 0; }
.as-page .as-hero h1 { font-size: 48px; }
@media (max-width: 767px) {
  .as-page .as-hero { padding: 24px 16px; }
  .as-page .as-hero .as-row { gap: 24px; }
  .as-page .as-hero h1 { font-size: 36px; }
}

/* ---------- as-text: indented reading column, left edge aligned to the 1080 frame, text capped at 800. ---------- */
.as-page .as-text { background: #ffffff; padding: 48px 32px; }
.as-page .as-text .as-col { max-width: 800px; margin-left: max(0px, calc((100% - 1080px) / 2)); }
.as-page .as-text h2 { font-size: 38px; }
.as-page .as-text h3 { font-size: 26px; }
.as-page .as-text .as-lede { font-size: 19px; }
.as-page .as-text .as-body { font-size: 18px; }
@media (max-width: 767px) {
  .as-page .as-text { padding: 24px 16px; }
  .as-page .as-text .as-col { margin-left: 0; }
  .as-page .as-text h2 { font-size: 30px; }
  .as-page .as-text h3 { font-size: 21px; }
  .as-page .as-text .as-lede { font-size: 17px; }
  .as-page .as-text .as-body { font-size: 16px; }
}

/* ---------- as-quote: wide cream callout for one real quote, full 1080 frame. Optional; drop it if no quote exists. ---------- */
.as-page .as-quote { background: #ffffff; padding: 0 32px 48px; }
.as-page .as-quote .as-band { max-width: 1080px; margin: 0 auto; background: #FAF8F3; border-radius: 6px; padding: 48px 64px; }
.as-page .as-quote .as-words { font-size: 24px; }
@media (max-width: 767px) {
  .as-page .as-quote { padding: 0 16px 24px; }
  .as-page .as-quote .as-band { padding: 28px 20px; }
  .as-page .as-quote .as-words { font-size: 19px; }
}

/* ---------- as-imgleft / as-imgright: image + text split inside the 1080 frame (520 image, 64 gap, 496 text). ---------- */
.as-page .as-imgleft, .as-page .as-imgright { background: #ffffff; padding: 48px 32px; }
.as-page .as-imgleft .as-row, .as-page .as-imgright .as-row { display: flex; flex-wrap: wrap; align-items: center; gap: 64px; max-width: 1080px; margin: 0 auto; }
.as-page .as-imgright .as-row { flex-direction: row-reverse; }
.as-page .as-imgleft .as-img, .as-page .as-imgright .as-img { flex: 1 1 340px; max-width: 520px; min-width: 0; }
.as-page .as-imgleft .as-copy, .as-page .as-imgright .as-copy { flex: 1 1 400px; max-width: 496px; min-width: 0; }
.as-page .as-imgleft h2, .as-page .as-imgright h2 { font-size: 32px; }
.as-page .as-imgleft .as-callout p, .as-page .as-imgright .as-callout p { font-size: 17px; }
@media (max-width: 767px) {
  .as-page .as-imgleft, .as-page .as-imgright { padding: 24px 16px; }
  .as-page .as-imgleft .as-row, .as-page .as-imgright .as-row { gap: 24px; }
  .as-page .as-imgright .as-row { flex-direction: row; }
  .as-page .as-imgleft .as-img, .as-page .as-imgright .as-img, .as-page .as-imgleft .as-copy, .as-page .as-imgright .as-copy { max-width: none; }
  .as-page .as-imgleft h2, .as-page .as-imgright h2 { font-size: 28px; }
  .as-page .as-imgleft .as-callout p, .as-page .as-imgright .as-callout p { font-size: 16px; }
}

/* ---------- as-cards: indented header plus a card grid across the 1080 frame. Grid reflows 3 / 2 / 1 columns by width. ---------- */
.as-page .as-cards { background: #ffffff; padding: 48px 32px; }
.as-page .as-cards .as-col { max-width: 800px; margin-left: max(0px, calc((100% - 1080px) / 2)); }
.as-page .as-cards .as-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; max-width: 1080px; margin: 40px auto 0; }
.as-page .as-cards .as-card { background: #FAF8F3; border-radius: 6px; padding: 28px 24px; }
.as-page .as-cards h2 { font-size: 38px; }
.as-page .as-cards .as-lede { font-size: 19px; }
.as-page .as-cards .as-card p { font-size: 15px; }
@media (max-width: 767px) {
  .as-page .as-cards { padding: 24px 16px; }
  .as-page .as-cards .as-col { margin-left: 0; }
  .as-page .as-cards .as-grid { margin-top: 28px; }
  .as-page .as-cards h2 { font-size: 30px; }
  .as-page .as-cards .as-lede { font-size: 17px; }
}

/* ---------- as-video: one YouTube embed, 16:9, inside the 1080 frame. Optional; use only for video of the partnership itself. ---------- */
.as-page .as-video { background: #ffffff; padding: 0 32px 48px; }
.as-page .as-video .as-frame { max-width: 1080px; margin: 0 auto; }
.as-page .as-video .as-ratio { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: 6px; background: #0F1419; }
.as-page .as-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
.as-page .as-video .as-caption { font-family: system-ui, -apple-system, sans-serif; font-size: 13px; color: #6B7682; margin: 12px 0 0 0; text-align: center; }
@media (max-width: 767px) {
  .as-page .as-video { padding: 0 16px 24px; }
}

/* ---------- as-faq: indented header plus a native details/summary accordion. No JavaScript; keyboard and screen-reader accessible. ---------- */
.as-page .as-faq { background: #ffffff; padding: 48px 32px; }
.as-page .as-faq .as-col { max-width: 800px; margin-left: max(0px, calc((100% - 1080px) / 2)); }
.as-page .as-faq h2 { font-size: 38px; }
.as-page .as-faq .as-lede { font-size: 19px; }
.as-page .as-faq .as-list { margin-top: 32px; border-top: 1px solid #D8DDE4; }
.as-page .as-faq details { border-bottom: 1px solid #D8DDE4; }
.as-page .as-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 22px 0; font-family: Georgia, 'Times New Roman', serif; font-size: 20px; line-height: 1.35; color: #0F1419; }
.as-page .as-faq summary::-webkit-details-marker { display: none; }
.as-page .as-faq summary::after { content: "+"; flex: 0 0 auto; font-family: system-ui, -apple-system, sans-serif; font-size: 24px; line-height: 1; color: #C8651F; }
.as-page .as-faq details[open] summary::after { content: "\2212"; }
.as-page .as-faq summary:focus-visible { outline: 2px solid #002550; outline-offset: 4px; }
.as-page .as-faq .as-answer { padding: 0 48px 24px 0; }
.as-page .as-faq .as-answer p { font-family: Georgia, 'Times New Roman', serif; font-size: 17px; line-height: 1.65; color: #2A3441; margin: 0; }
@media (max-width: 767px) {
  .as-page .as-faq { padding: 24px 16px; }
  .as-page .as-faq .as-col { margin-left: 0; }
  .as-page .as-faq h2 { font-size: 30px; }
  .as-page .as-faq .as-lede { font-size: 17px; }
  .as-page .as-faq summary { font-size: 18px; padding: 18px 0; }
  .as-page .as-faq .as-answer { padding-right: 0; }
  .as-page .as-faq .as-answer p { font-size: 16px; }
}

/* ---------- as-cta: three-card close across the 1080 frame. Card order and colors are fixed: blue, ink, green. ---------- */
.as-page .as-cta { background: #ffffff; padding: 48px 32px 32px; }
.as-page .as-cta .as-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; max-width: 1080px; margin: 0 auto; }
.as-page .as-cta .as-card { color: #ffffff; padding: 40px 32px; border-radius: 6px; text-align: center; text-decoration: none; display: flex; flex-direction: column; min-height: 220px; }
.as-page .as-cta .as-card h3 { font-family: Georgia, 'Times New Roman', serif; font-size: 24px; font-weight: 500; margin: 0 0 12px 0; letter-spacing: -0.01em; color: #ffffff; }
.as-page .as-cta .as-card p { font-size: 15px; opacity: 0.85; margin: 0 0 20px 0; line-height: 1.5; font-family: system-ui, -apple-system, sans-serif; flex: 1; }
.as-page .as-cta .as-card .as-link { color: #ffffff; font-size: 14px; font-weight: 600; border-bottom: 1.5px solid rgba(255,255,255,0.4); padding-bottom: 2px; font-family: system-ui, -apple-system, sans-serif; display: inline-block; align-self: center; }
.as-page .as-cta a.as-card, .as-page .as-cta a.as-card * { text-decoration: none !important; }
.as-page .as-cta a.as-card:hover h3 { text-decoration: underline !important; }
.as-page .as-cta a.as-card:focus-visible { outline: 2px solid #C8651F; outline-offset: 3px; }
.as-page .as-cta .as-reviewed { max-width: 1080px; margin: 40px auto 0; text-align: center; font-family: system-ui, -apple-system, sans-serif; font-size: 12px; color: #6B7682; letter-spacing: 0.06em; }
@media (max-width: 767px) {
  .as-page .as-cta { padding: 24px 16px 24px; }
  .as-page .as-cta .as-reviewed { margin-top: 28px; }
}

/* ---------- as-cards (pillar variant): header, H.E.A.R.T. band, then the five Love Promise pillars as cards. ---------- */
.as-page .as-cards .as-heart { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; gap: 16px; max-width: 1080px; margin: 40px auto 0; padding: 24px 32px; background: #DDE5EF; border-radius: 6px; box-sizing: border-box; }
.as-page .as-cards .as-heart span { min-width: 110px; text-align: center; font-family: Georgia, 'Times New Roman', serif; font-size: 22px; font-weight: 500; color: #002550; }
.as-page .as-cards .as-pillars { margin-top: 20px; }
.as-page .as-cards .as-pillars .as-card { text-align: center; }
.as-page .as-cards a.as-cardlink { display: block; }
.as-page .as-cards a.as-cardlink, .as-page .as-cards a.as-cardlink * { text-decoration: none !important; }
.as-page .as-cards a.as-cardlink:hover h3 { text-decoration: underline !important; }
.as-page .as-cards a.as-cardlink:focus-visible { outline: 2px solid #002550; outline-offset: 3px; }
@media (max-width: 767px) {
  .as-page .as-cards .as-heart { margin-top: 28px; padding: 20px 16px; }
  .as-page .as-cards .as-heart span { font-size: 19px; min-width: 90px; }
  .as-page .as-cards .as-pillars { margin-top: 16px; }
}

/* ---------- as-callout--list: a callout holding a list of as-item rows (Partnerships). Smaller text at every width, tighter padding on phones. ---------- */
.as-page .as-imgleft .as-callout--list p, .as-page .as-imgright .as-callout--list p { font-size: 15px; }
.as-page .as-callout--list .as-item { padding: 16px 0; border-bottom: 1px solid #D8DDE4; }
.as-page .as-callout--list .as-item:first-child { padding-top: 0; }
.as-page .as-callout--list .as-item:last-child { padding-bottom: 0; border-bottom: none; }
.as-page .as-callout--list .as-item h3 { font-family: system-ui, -apple-system, sans-serif; font-size: 16px; font-weight: 600; color: #0F1419; margin: 0 0 4px 0; line-height: 1.35; }
@media (max-width: 767px) {
  .as-page .as-callout--list { padding: 24px 20px !important; }
}

/* End 'adventure-subaru-site-css' (do not modify this line) */