.fuel-price-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  margin: 0.75rem 0 1.25rem;
}

.fuel-price-entry {
  min-width: 0;
}

.fuel-price-digit {
  position: relative;
  display: inline-grid;
  flex: 0 0 0.58em;
  width: 0.58em;
  height: 1em;
  margin: 0;
  place-items: center;
  overflow: hidden;
  border: 2px solid #72b8df;
  border-radius: 4px;
  background: linear-gradient(180deg, #174b7b 0%, #123d73 48%, #0c2f56 50%, #123d73 100%);
  color: #fff;
  vertical-align: middle;
  box-shadow:
    inset 0 1px 1px rgb(255 255 255 / 38%),
    inset 0 -1px 1px rgb(0 0 0 / 55%),
    0 2px 1px rgb(0 0 0 / 55%);
}

.fuel-price-digit::after {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  border-top: 1px solid rgb(0 0 0 / 45%);
  box-shadow: 0 -1px 0 rgb(255 255 255 / 30%);
  content: "";
}

.fuel-digit-glyph {
  display: block;
  width: 76%;
  height: 88%;
  overflow: visible;
}

.fuel-digit-glyph polygon {
  fill: currentcolor;
}

.fuel-price-symbol {
  display: inline-block;
}

.fuel-price-lockup {
  display: inline-flex;
  align-items: baseline;
  gap: 0.06em;
  white-space: nowrap;
  line-height: 1;
  letter-spacing: normal;
}

.fuel-price-currency {
  align-self: flex-start;
  padding-top: 0.08em;
  font-size: 0.48em;
  font-weight: 950;
  line-height: 1;
  letter-spacing: normal;
}

.fuel-price-amount {
  display: inline-flex;
  align-items: center;
  gap: 0.025em;
  line-height: 1;
  letter-spacing: normal;
}

.fuel-price-decimal {
  align-self: center;
  margin: 0 -0.02em;
  font-size: 0.72em;
  font-weight: 950;
  line-height: 1;
  letter-spacing: normal;
}

.fuel-price-unit {
  align-self: flex-end;
  padding-bottom: 0.12em;
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 0.24em;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0.02em;
}

.fuel-regular-price .fuel-price-lockup {
  justify-content: center;
  width: 100%;
}

.fuel-grade-price .fuel-price-lockup {
  justify-content: flex-end;
}

.surfer-facts-dashboard {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 135px), 1fr));
  gap: 0.55rem;
  width: 100%;
  margin: 0.75rem 0;
}

.surfer-fact-tile {
  display: flex;
  flex-direction: column;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.65rem 0.75rem;
  border: 2px solid #6c3baa;
  border-radius: 12px;
  background: #b4d9ef;
  box-shadow: 0 3px 0 rgb(108 59 170 / 22%);
  color: #183247;
  text-align: center;
  text-decoration: none;
}

.surfer-fact-topline {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.surfer-fact-tile:hover,
.surfer-fact-tile:focus-visible {
  background: #fff8dc;
  color: #183247;
  text-decoration: none;
}

.surfer-closure-tile {
  min-width: 0;
  overflow: hidden;
  border: 2px solid #6c3baa;
  border-radius: 12px;
  background: #b4d9ef;
  box-shadow: 0 3px 0 rgb(108 59 170 / 22%);
  color: #183247;
}

.surfer-closure-summary {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  list-style: none;
}

.surfer-closure-summary::-webkit-details-marker {
  display: none;
}

.surfer-closure-list {
  display: grid;
  gap: 0.8rem;
  padding: 0.35rem 1rem 1rem;
}

.surfer-closure-count-note {
  margin: 0;
  color: #425b6d;
  font-size: 0.78rem;
  font-weight: 700;
}

.surfer-closure-entry {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
  padding: 0.85rem 1rem;
  border: 1px solid #6c3baa;
  border-radius: 10px;
  background: #fff8dc;
}

.surfer-closure-entry strong {
  color: #183b59;
  font-size: 0.92rem;
  line-height: 1.3;
}

.surfer-closure-city {
  color: #6c3baa;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.surfer-closure-entry small {
  width: fit-content;
  padding: 0.35rem 0.55rem;
  border-radius: 6px;
  background: #b4d9ef;
  color: #183b59;
  font-size: 0.74rem;
  font-weight: 700;
}

.surfer-closure-description {
  margin: 0;
  color: #34495a;
  font-size: 0.84rem;
  line-height: 1.4;
}

.surfer-closure-empty {
  margin: 0;
  padding: 0.65rem;
}

@media (width <= 600px) {
  .surfer-closure-tile {
    grid-column: 1 / -1;
  }
}

.surfer-fact-icon {
  display: grid;
  flex: 0 0 2.1rem;
  width: 2.1rem;
  height: 2.1rem;
  place-items: center;
  border-radius: 50%;
  background: #6c3baa;
  font-size: 1.15rem;
}

.surfer-fact-copy {
  display: grid;
  width: 100%;
  min-width: 0;
  justify-items: center;
  gap: 0.08rem;
  text-align: center;
}

.surfer-fact-label {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: #31536a;
  font-size: 0.55rem;
  font-weight: 850;
  letter-spacing: 0.045em;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
}

.surfer-fact-detail {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  color: #31536a;
  font-size: 0.72rem;
  font-weight: 750;
  line-height: 1.1;
  text-align: center;
  white-space: normal;
}

.surfer-fact-value {
  overflow-wrap: anywhere;
  color: #183247;
  font-size: clamp(1rem, 5vw, 1.55rem);
  font-weight: 950;
  line-height: 1.1;
  text-align: center;
}


.fuel-price-directory {
  display: flow-root;
  box-sizing: border-box;
  width: 100%;
  margin: 0.25rem 0;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #b4d9ef;
  box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
}

.fuel-brand-card {
  --fuel-ink: #183b59;
  --fuel-accent: #087f91;
  --fuel-pop: #f5c451;

  overflow: hidden;
  padding: 0.35rem;
  border: 4px solid var(--fuel-pop);
  border-radius: 12px;
  background: var(--fuel-ink);
  box-shadow: 4px 4px 0 #102c43;
}

.fuel-brand-card[data-brand-theme="sunoco"] {
  --fuel-ink: #133d70;
  --fuel-accent: #d8202f;
  --fuel-pop: #f4c542;
  --fuel-brand-font: "Arial Narrow", "Hanken Grotesk", sans-serif;
}

.fuel-brand-card[data-brand-theme="exxon"] {
  --fuel-ink: #174e8c;
  --fuel-accent: #d71920;
  --fuel-pop: #72b8df;
  --fuel-brand-font: "Hanken Grotesk", sans-serif;
}

.fuel-brand-card[data-brand-theme="shell"] {
  --fuel-ink: #bd292e;
  --fuel-accent: #e8b52a;
  --fuel-pop: #fff0ad;
  --fuel-brand-font: "Arial Narrow", "Hanken Grotesk", sans-serif;
}

.fuel-brand-card[data-brand-theme="wawa"] {
  --fuel-ink: #9a172c;
  --fuel-accent: #e5b82e;
  --fuel-pop: #f5dfe2;
}

.fuel-brand-card[data-brand-theme="gulf"] {
  --fuel-ink: #08739a;
  --fuel-accent: #ef8127;
  --fuel-pop: #d6edf4;
}

.fuel-brand-card[data-brand-theme="mobil"] {
  --fuel-ink: #07579c;
  --fuel-accent: #db2638;
  --fuel-pop: #d6e8f7;
}

.fuel-brand-card[data-brand-theme="citgo"] {
  --fuel-ink: #123d73;
  --fuel-accent: #d92b35;
  --fuel-pop: #f7e0df;
}

.fuel-brand-card[data-brand-theme="valero"] {
  --fuel-ink: #075b63;
  --fuel-accent: #168e79;
  --fuel-pop: #f0c44b;
}

.fuel-brand-card[data-brand-theme="bp"] {
  --fuel-ink: #176342;
  --fuel-accent: #91b83e;
  --fuel-pop: #f3dc64;
}

.fuel-brand-summary {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  padding: 0.4rem;
  background: var(--fuel-ink);
  cursor: pointer;
  list-style: none;
}

.fuel-brand-summary::-webkit-details-marker {
  display: none;
}

.fuel-brand-name,
.fuel-brand-address,
.fuel-brand-updated,
.fuel-regular-label,
.fuel-regular-price,
.fuel-expand-prompt {
  box-sizing: border-box;
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 2px solid var(--fuel-pop);
  border-radius: 4px;
  background: #fff8dc;
}

.fuel-brand-name {
  border: 3px solid var(--fuel-pop);
  background: var(--fuel-ink);
  color: var(--fuel-pop);
  font-family: var(--fuel-brand-font, "Hanken Grotesk", sans-serif);
  font-size: clamp(1.4rem, 5vw, 1.85rem);
  font-weight: 950;
  line-height: 1.05;
  letter-spacing: 0.015em;
  text-transform: uppercase;
}

.fuel-brand-address {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  border: 3px solid var(--fuel-pop);
  background: var(--fuel-ink);
  color: var(--fuel-pop);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.3;
}

.fuel-address-icon {
  flex: 0 0 auto;
  font-size: 1.1rem;
  line-height: 1;
}

.fuel-brand-updated {
  margin: 0;
  background: #b4d9ef;
  color: #183247;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
}

.fuel-freshness-badge {
  box-sizing: border-box;
  width: 100%;
  padding: 0.35rem 0.5rem;
  border: 2px solid var(--fuel-pop);
  border-radius: 4px;
  background: #fff;
  color: #a3212c;
  font-size: 0.82rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-align: center;
}

.fuel-regular-label {
  width: auto;
  margin: 0;
  border-color: var(--fuel-pop);
  background: var(--fuel-pop);
  color: var(--fuel-ink);
  font-size: 0.8rem;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.fuel-regular-price {
  border: 3px solid var(--fuel-pop);
  background: var(--fuel-ink);
  color: var(--fuel-accent);
  font-family: "Courier New", monospace;
  font-size: clamp(3rem, 14vw, 6rem);
  font-weight: 950;
  line-height: 1;
  letter-spacing: normal;
  text-shadow: 0 0 8px color-mix(in srgb, var(--fuel-accent) 65%, transparent);
}

.fuel-expand-prompt {
  align-self: stretch;
  margin: 0;
  border-color: var(--fuel-pop);
  background: #f0c84e;
  color: var(--fuel-ink);
  font-size: 0.78rem;
  font-weight: 900;
  text-align: center;
}

.fuel-brand-card[open] .fuel-expand-prompt span {
  display: inline-block;
  transform: rotate(45deg);
}

.fuel-brand-card:focus-within {
  outline: 3px solid var(--fuel-pop);
  outline-offset: 3px;
}

.fuel-grade-list {
  display: grid;
  gap: 0.4rem;
  padding: 0.45rem;
  border-top: 3px solid var(--fuel-pop);
  background: var(--fuel-ink);
}

.fuel-grade-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.1rem 0.75rem;
  align-items: center;
  padding: 0.55rem 0.65rem;
  border: 2px solid var(--fuel-pop);
  border-left: 7px solid var(--fuel-accent);
  border-radius: 4px;
  background: var(--fuel-ink);
}

.fuel-grade-name {
  color: var(--fuel-pop);
  font-size: 0.95rem;
  font-weight: 950;
}

.fuel-grade-price {
  color: var(--fuel-accent);
  font-family: "Courier New", monospace;
  font-size: clamp(1.65rem, 6vw, 2.2rem);
  font-weight: 950;
  line-height: 1;
  text-align: right;
}

.fuel-grade-row[data-grade="diesel"] .fuel-grade-price {
  color: #37c76a;
  text-shadow: 0 0 8px color-mix(in srgb, #37c76a 65%, transparent);
}

.fuel-grade-updated {
  grid-column: 1 / -1;
  color: #fff8dc;
  font-size: 0.7rem;
  font-weight: 700;
}

.fuel-no-grades {
  margin: 0;
  padding: 0.6rem;
  border: 2px solid var(--fuel-pop);
  background: #fff8dc;
  color: #183247;
  font-size: 0.85rem;
}

@media (prefers-reduced-motion: no-preference) {
  .fuel-brand-card,
  .fuel-brand-summary {
    transition: box-shadow 160ms ease, transform 160ms ease;
  }

  .fuel-brand-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 0 color-mix(in srgb, var(--fuel-ink) 20%, transparent);
  }
}

/* Homepage town-facts dashboard layout */
body .surfer-facts-dashboard {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

body .surfer-facts-dashboard .surfer-closure-tile {
  grid-column: 1 / -1;
}

@media (width <= 900px) {
  body .surfer-facts-dashboard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body .surfer-block .surfer-facts-dashboard .surfer-fact-tile[href="/#headline-event-calendar-slot"] {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - 0.55rem) / 2);
    box-sizing: border-box;
  }
}

body .surfer-facts-dashboard .surfer-fact-tile {
  gap: 0.25rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid rgb(108 59 170 / 55%);
  border-radius: 10px;
  box-shadow: 0 2px 5px rgb(24 50 71 / 12%);
  container-type: inline-size;
}

body .surfer-facts-dashboard .surfer-fact-tile,
body .surfer-facts-dashboard .surfer-fact-tile * {
  text-decoration: none;
}

body .surfer-facts-dashboard .surfer-fact-topline {
  display: flex;
  width: 100%;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

body .surfer-facts-dashboard .surfer-fact-icon {
  flex: 0 0 1.8rem;
  width: 1.8rem;
  height: 1.8rem;
  font-size: 1rem;
}

body .surfer-facts-dashboard .surfer-fact-label {
  font-size: 0.7rem;
  letter-spacing: 0.055em;
  line-height: 1.15;
}

body .surfer-facts-dashboard .surfer-fact-value {
  min-width: 0;
  font-size: 1.25rem;
  font-size: clamp(1rem, 13cqi, 1.45rem);
  font-weight: 850;
  line-height: 1.05;
  white-space: nowrap;
}

body .surfer-facts-dashboard .surfer-fact-tile[href="/gas"],
body .surfer-facts-dashboard .surfer-fact-tile[href="/gas"]:hover,
body .surfer-facts-dashboard .surfer-fact-tile[href="/gas"]:focus-visible {
  background: #D3EACC;
}

body .surfer-facts-dashboard .surfer-fact-tile[href="/#headline-event-calendar-slot"],
body .surfer-facts-dashboard .surfer-fact-tile[href="/#headline-event-calendar-slot"]:hover,
body .surfer-facts-dashboard .surfer-fact-tile[href="/#headline-event-calendar-slot"]:focus-visible {
  background: #c9a0dc;
}

body .surfer-facts-dashboard .surfer-closure-tile,
body .surfer-facts-dashboard .surfer-closure-tile > .surfer-closure-summary,
body .surfer-facts-dashboard .surfer-closure-tile > .surfer-closure-summary:hover,
body .surfer-facts-dashboard .surfer-closure-tile > .surfer-closure-summary:focus-visible {
  background: #fff4aa;
}

body .surfer-facts-dashboard .surfer-closure-summary .surfer-fact-icon {
  background: transparent;
  flex: 0 0 3.2rem;
  width: 3.2rem;
  height: 3.2rem;
}

body .surfer-facts-dashboard .surfer-closure-summary .surfer-fact-icon img {
  display: block;
  width: 3.2rem;
  height: 3.2rem;
  object-fit: contain;
}

@media (width <= 600px) {
  body .surfer-block .surfer-facts-dashboard
  .surfer-fact-tile[href="/#headline-event-calendar-slot"] {
    width: 100%;
    justify-self: stretch;
  }
}