/*!
 * avalon-hours.css
 * SLP Dealer Guard (slp_avalon) v0.0.27 Part 4i.
 *
 * Google-style opening hours on store pages, find-a-dealer result cards and
 * the map's info bubble. One stylesheet for every surface, shipped with the
 * plugin so it travels to Tahoe and Avalon; the child theme's store-pages.css
 * loads only on store pages and cannot reach /find-a-dealer/.
 *
 * COLOURS. Open and the two "soon" lines are Google's dark-theme status
 * colours. Closed is the site's own primary colour - Elementor's
 * --e-global-color-primary, #E7167C on Aura - by the owner's decision of
 * 2026-10-04, so each brand shows its own. WCAG contrast against Aura's
 * backgrounds, measured 2026-10-04:
 *
 *                     store #000   bubble #080808   card rest   card hover
 *   open    #81c995      10.72         10.23           8.89        8.41
 *   closed  #e7167c       4.80          4.58           3.98        3.77
 *   soon    #fcad70      11.35         10.82           9.41        8.91
 *
 * card rest = rgba(255,255,255,.1) over #000; card hover, and the chosen
 * card, = rgba(255,255,255,.12) over #000 from Part 4d (the warm
 * rgba(222,139,13,.2) before it measured the same to 0.01). On a card the
 * pink is under 4.5 - the owner's choice; the word is bold, and Part 4d's
 * TODAY, 11 px, is the same pink at the same 3.98 and 3.77 (4.58 in the
 * bubble). #2a2a2a, a worst case for the store page's background image,
 * gives it 3.28. A site on a light background overrides the three custom
 * properties.
 *
 * LINKS. The tel: link on cards and in the bubble, and the bubble's mailto:
 * link, are the text colour with no underline, and turn the primary colour
 * on hover and on keyboard focus, with an outline (owner's decision,
 * 2026-10-04; why keyboard focus, below).
 *
 * THE STORE PAGE FOLDS AT ELEMENTOR'S MOBILE BREAKPOINT, 767px here. The
 * plugin adds an override when a site has moved it. Both copies of the week
 * are in the markup; this file shows one, so a phone gets the folded line on
 * its first frame, with no script involved.
 *
 * TABLES. Hello Elementor stripes and borders every table, at specificity
 * 0-1-4 (table tbody>tr:nth-child(odd)>td). The rules below are 0-2-3 and
 * up, so they win without !important.
 *
 * PART 4c, after Part 4b's bubble rules. The address on two lines on the
 * cards and in the bubble; the map's own images - the Street View Pegman -
 * at their own sizes; a keyboard focus ring on the bubble's buttons; the
 * Hours: line balanced where it has to wrap; under 375 px a 14 px email.
 *
 * PART 4d, at the end of the file. The approved find-a-dealer design: a
 * card's lines in one grid, its buttons side by side, with the bubble's
 * keyboard ring; the bubble in three parts - the name, a body that scrolls
 * on a phone, the buttons; Hours: in the label column; the opened week
 * with a rule, a dot and TODAY; 15 px text and 20 px names at 1024 px and
 * under on the cards, at every width in the bubble. Words for the labels
 * on every screen: Part 4c's Font Awesome icons are gone (the owner,
 * 2026-10-07).
 *
 * PART 4e, in Part 4d's blocks and the last block of the file: the
 * owner's decisions of 2026-10-07, with Part 4d on Aura DEV. TODAY under
 * its hours at every width, on the cards and in the bubble, with more
 * room under it than over it. No bubble on a phone - slp_avalon.js brings
 * the dealer's card into view instead, and the card flashes - so the
 * bubble's body no longer scrolls anywhere: Part 4d's cap on it, its
 * scrollbar and the fade at its foot are gone, and Part 4c's 14 px email
 * with them. The bubble is as wide as its content (the theme), so it is no
 * longer a size container. Open stays green.
 *
 * PART 4f, after the first rule and at the end of the file: the owner's
 * decisions of 2026-10-07 and 2026-10-08. .avalon-hours made the box its
 * hidden "Hours: " is placed in - left to the page, the span sat where an
 * unscrolled list would put it and stretched the page below its footer
 * (the white bar on DEV, 2026-10-08). The numbered cards' disc, in the
 * primary colour with a black number, as on the map's pins. Reset and
 * the map's own + and -, in Google's look: slp_avalon.js turns Google's
 * zoom off and puts these where it stood.
 *
 * PART 4g, in Part 4f's disc and a block ending the file: the owner's
 * corrections of 2026-10-10. A card's name held to one line, smaller
 * where it must be, down to 15 px (slp_avalon.js), and the disc
 * smaller with it. On a card and in the bubble the status in two lines:
 * the word on one, "Opens 9 AM Saturday" and the caret on the next,
 * held to one line down to 13 px (avalon-hours.js).
 *
 * PART 4h, in the first rule and a block ending the file: the owner's
 * decisions of 2026-10-11. Card B: on a screen taller than 500 px, the
 * status's word in a chip at the card's top right, in the hours'
 * colours, and the Hours row "Opens 9 AM Monday" and the caret.
 *
 * PART 4i, in a block ending the file: a name too long for one line
 * even at 15 px wraps beside its number, not under it.
 *
 * PART 4l, in Part 4f's map buttons and a block ending the file: the
 * owner's decisions of 2026-10-14. The cards' number disc a button, in
 * Part 4f's look, with a keyboard's ring; Reset, + and - on a store
 * page's map too, under #avalon_location_map, as Find a Dealer's; and the
 * bubble's name with more room under it, the one rule staying over the
 * buttons.
 *
 * PART 4m, in Part 4l's last rule: the owner's of 2026-10-14, 15:12 EDT -
 * the bubble's name 5 px over its foot, not 10.
 */

.avalon-hours,
#map_sidebar .avalon-chip {
  --avalon-hours-open: #81c995;
  --avalon-hours-closed: var(--e-global-color-primary, var(--primary-color, #e7167c));
  --avalon-hours-soon: #fcad70;
  --avalon-hours-today: var(--e-global-color-primary, var(--primary-color, #e7167c));
}

/* Part 4f. The box the hidden "Hours: " (.avalon-hours__sr, in Part 4d's
   block) is placed in. Without it the nearest was the theme's #sl_div, and
   for a card below what the results box shows, the span sat outside the
   box's clipping, where the unscrolled list would put it - up to 211 px
   below the footer on DEV (1707 x 839, 2026-10-08), where nothing paints.
   A box of its own for every surface: a card, the bubble, a store page. */
.avalon-hours {
  position: relative;
}

/* ------------------------------------------------------------ status line */

.avalon-hours .avalon-hours__word {
  font-weight: 700;
}

.avalon-hours .avalon-hours__word--open {
  color: var(--avalon-hours-open);
}

.avalon-hours .avalon-hours__word--closed {
  color: var(--avalon-hours-closed);
}

.avalon-hours .avalon-hours__word--soon {
  color: var(--avalon-hours-soon);
}

/* ------------------------------------------------------------------ week */

.avalon-hours .avalon-hours__week {
  width: auto;
  margin: 6px 0 0;
  border: 0;
  border-collapse: collapse;
  background: transparent;
  font-size: inherit;
  line-height: inherit;
}

.avalon-hours .avalon-hours__week tbody > tr > th,
.avalon-hours .avalon-hours__week tbody > tr > td {
  padding: 2px 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-weight: 400;
  text-align: left;
  vertical-align: top;
}

.avalon-hours .avalon-hours__week tbody > tr > th {
  padding-right: 24px;
}

.avalon-hours .avalon-hours__week tbody > tr.is-today > th,
.avalon-hours .avalon-hours__week tbody > tr.is-today > td {
  font-weight: 700;
}

/* ------------------------------------------------- the fold (<details>) */

.avalon-hours .avalon-hours__summary {
  display: list-item;
  cursor: pointer;
  list-style: none;
}

.avalon-hours .avalon-hours__summary::-webkit-details-marker {
  display: none;
}

/* The caret is drawn, not typed: a character in generated content becomes
   part of the summary's spoken name in some screen readers. From Part 4d
   an element of its own, the last thing in the status, hidden from screen
   readers; avalon-hours.js holds it on one line with the status's last
   word, so it never starts a line alone. 7 px, as the design draws it.
   Only a summary shows it: the store page's wide status line has none. */
.avalon-hours .avalon-hours__caret {
  display: none;
}

.avalon-hours .avalon-hours__summary .avalon-hours__caret {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 2px 2px 8px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  transition: transform 0.2s;
}

.avalon-hours .avalon-hours__narrow[open] > .avalon-hours__summary .avalon-hours__caret {
  margin-bottom: -2px;
  transform: rotate(225deg);
}

.avalon-hours .avalon-hours__summary .avalon-hours__nowrap {
  white-space: nowrap;
}

.avalon-hours .avalon-hours__summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .avalon-hours .avalon-hours__summary .avalon-hours__caret {
    transition: none;
  }
}

/* --------------------------------------------------------- attributions */

.avalon-hours .avalon-hours__attr {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.4;
  opacity: 0.8;
}

.avalon-hours .avalon-hours__attr a {
  color: inherit;
  text-decoration: underline;
}

/* On the store page the block sits inside the theme's
   storelocator_address_container, whose links store-pages.css turns brand
   pink at 0-4-2 (body.single-store_page .storelocator_address_container
   a:not(.btn):not(.button)): 3.32 on #000 at this size and opacity, under
   4.5. This is 0-5-1. */
.avalon-hours--store.storelocator_address_container .avalon-hours__attr a:not(.btn):not(.button) {
  color: inherit;
}

/* ----------------------------------------------------------- store page */

.avalon-hours--store .avalon-hours__wide .avalon-hours__status {
  min-height: 1.5em;
  margin: 0;
}

.avalon-hours--store .avalon-hours__narrow {
  display: none;
}

@media (max-width: 767px) {
  .avalon-hours--store .avalon-hours__wide {
    display: none;
  }

  .avalon-hours--store .avalon-hours__narrow {
    display: block;
  }
}

/* --------------------------------------------------------- result cards */

.avalon-hours--card {
  display: block;
  margin: 0;
}

.avalon-label {
  font-weight: 700;
}

/* The tel: and mailto: links: the text colour at rest, no underline; the
   site's primary colour on hover and on keyboard focus. The card and bubble
   scopes (0-2-1, 0-3-1) sit above the theme's a:hover and a:focus (0-1-1).

   FOCUS-VISIBLE, NOT FOCUS. Google moves focus into an info bubble as it
   opens, onto its first link - with the close button hidden, the phone.
   Coloured on :focus, the phone would open pink on every click of a pin;
   that is why SLP's old "Email" link opened pink (the theme's a:focus). A
   pointer click on a pin does not match :focus-visible; a Tab does. */
.sl_contact__info a.avalon-tel,
.slp_info_bubble a.avalon-tel,
.slp_info_bubble a.avalon-email,
a.avalon-tel,
a.avalon-email {
  color: inherit;
  text-decoration: none;
}

.sl_contact__info a.avalon-tel:hover,
.slp_info_bubble a.avalon-tel:hover,
.slp_info_bubble a.avalon-email:hover,
a.avalon-tel:hover,
a.avalon-email:hover {
  color: var(--e-global-color-primary, var(--primary-color, #e7167c));
  text-decoration: none;
}

/* A rule of its own, so a browser without :focus-visible drops only this
   one and keeps the hover colour above. */
.sl_contact__info a.avalon-tel:focus-visible,
.slp_info_bubble a.avalon-tel:focus-visible,
.slp_info_bubble a.avalon-email:focus-visible,
a.avalon-tel:focus-visible,
a.avalon-email:focus-visible {
  color: var(--e-global-color-primary, var(--primary-color, #e7167c));
  text-decoration: none;
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ----------------------------------------------------------- info bubble */

/* Part 4b. The bubble a map pin opens carries the card's lines, in the
   card's order - Distance:, Address:, Phone: - then Email: and Hours:, from
   the bubble layout slp_avalon rewrites. Each starts its own line; the
   address keeps SLP's run of spans on one. The frame Google draws round the
   bubble is the theme's to style (style.css), not this file's.

   The card's weight, 400: Google's InfoWindow sets 300 on .gm-style-iw,
   which the bubble's text would inherit, and on Aura Figtree is a variable
   font whose 300 is real - the address would be lighter than the links
   beside it and than the card. Labels, the name and the buttons set their
   own weights. An email address has no break point, and the bubble does
   not scroll sideways: a long one may break anywhere rather than be cut. */
.slp_info_bubble {
  font-weight: 400;
}

.slp_info_bubble .avalon-bubble-distance,
.slp_info_bubble #slp_bubble_phone,
.slp_info_bubble #slp_bubble_email {
  display: block;
}

.slp_info_bubble a.avalon-email {
  overflow-wrap: anywhere;
}

/* --------------------------------------------------- Part 4c: the address */

/* Part 4c. The address on two lines under its label, on the cards and in
   the bubble, at every width: the street, then "City, ST ZIP" (the
   avalon_address_html field). The label and the lines are flex items, so
   the second line starts under the first, not under the label, and a long
   line wraps inside its own column. The gap is about one space of the
   body font, so the address's text lines up with the phone's and the
   email's, which follow their labels after a space. */
.avalon-address {
  display: flex;
  align-items: baseline;
  column-gap: 0.25em;
}

.avalon-address > .avalon-label {
  flex: none;
}

.avalon-address__lines {
  display: block;
  min-width: 0;
}

.avalon-address__line {
  display: block;
}

/* "Distance:" is a label too, for its icon on a phone, but keeps the
   card's plain weight (Part 4b, choice 2). */
.avalon-label--distance {
  font-weight: inherit;
}

/* Hours:, its status and the caret: where the line must wrap - a 320 px
   phone, a tablet's narrow results column - its lines are balanced, so the
   caret never wraps alone onto a line of its own, and the longest status
   (Closed, Opens 12:30 PM Wed) never runs past the card's edge. Where it
   fits, one line as before. Measured 2026-10-05 in Chromium, 128 status
   shapes at 17 widths from 320 to 1024 px, on cards and in the bubble: the
   caret alone 0 times, past the edge 0 times. Wrapping as before, the
   caret stood alone after up to 39 of the 128 on one 860 px card; held to
   one line (nowrap), the longest ran 71 px past a 780 px tablet's card. A
   browser without text-wrap: balance (Safari before 17.5) wraps as
   before. */
.avalon-hours--card .avalon-hours__summary {
  text-wrap: balance;
}

/* ----------------------------------------------- Part 4c: the map itself */

/* Part 4c. Google's images inside the locator's map at their own sizes.
   Elementor's .elementor img { max-width: 100% } (0-1-1) reaches every
   image in the map. SLP's inline div#map img { max-width: none } used to
   answer it, until slp_avalon.js removed that stylesheet with SLP's other
   inline rules, and the Street View control's Pegman has measured 0 px
   wide since (Aura DEV, 2026-10-05; 30 px on a store page's map). This is
   1-1-1. An image in the bubble's content keeps the bubble's width. */
#map .gm-style img {
  max-width: none;
}

#map .gm-style .slp_info_bubble img {
  max-width: 100%;
}

/* Part 4c. A keyboard focus ring on the bubble's two buttons. The theme
   takes the outline off their :focus (style.css: #slp_bubble_website
   a:focus, 1-1-1); this is 1-2-1, on :focus-visible only, so a pointer
   click draws no ring. White, on the black bubble. */
.slp_info_bubble #slp_bubble_directions a:focus-visible,
.slp_info_bubble #slp_bubble_website a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ------------------------------------------ Part 4c: phones, portrait */

/* Part 4c's 15 px text and 20 px names are in Part 4d's block, further
   down: at 1024 px and under on the cards, at every width in the bubble.
   Its 14 px email under 375 px went with Part 4e: a phone has no bubble
   to show it in. */

/* ------------------------------------------- Part 4d: the cards, one grid */

/* Part 4d. The approved find-a-dealer design (the owner's handoff of
   2026-10-06, decisions of 2026-10-07): a card's lines in one grid - the
   labels in a column of their own, Distance: the widest, the values beside
   them, an address's second line under its first and an opened week under
   its status - then the two buttons side by side at equal widths. SLP's
   left and centre cells and the field spans step aside (display:
   contents), so their children are the grid's items and nothing in the
   page moves: SLP, main.js and slp_avalon.js find every class and id where
   it was. A dealer's fax, should one have it, takes a row of its own, as
   does SLP's own hours span among the buttons. The card's box - colour,
   ring, corners, padding - and the buttons' colours and shapes are the
   theme's.

   Ids beat the theme's 0-4-0 and 0-5-0 card rules without !important.
   Every selector here names #map_sidebar, .slp_info_bubble, .avalon-hours
   or .avalon-label, which Parts 4 to 4c already put on WP Rocket's
   safelist. */
#map_sidebar .results_wrapper .results_entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 10px;
  row-gap: 4px;
  align-items: baseline;
}

#map_sidebar .results_entry > [id^="slp_left_cell_"],
#map_sidebar .results_entry > .sl_contact__info,
#map_sidebar .results_entry .location_distance,
#map_sidebar .results_entry .slp_result_street,
#map_sidebar .results_entry .slp_result_phone {
  display: contents;
}

#map_sidebar .results_entry .store_locator_name {
  grid-column: 1 / -1;
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.2;
}

#map_sidebar .results_entry .slp_result_fax {
  grid-column: 1 / -1;
}

#map_sidebar .results_entry .avalon-hours--card {
  min-width: 0;
}

#map_sidebar .results_entry > [id^="slp_right_cell_"] {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

#map_sidebar .results_entry .slp_result_contact {
  flex: 1 1 100%;
  margin: 0;
}

#map_sidebar .results_entry .slp_result_contact.slp_result_directions {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
}

#map_sidebar .results_entry .slp_result_contact > a {
  flex: 1 1 auto;
  min-width: 0;
}

/* The card's two buttons get the bubble's keyboard ring (the owner,
   2026-10-07): 2 px white, 2 px out, on :focus-visible only - a pointer
   click draws none, and hover stays the theme's. The theme takes the
   outline off their :focus at 0-5-1; this is 1-3-1. */
#map_sidebar .results_wrapper .slp_result_contact a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* At 1024 px and under - a phone's sideways two columns, a tablet's -
   and on the stacked phone layout: 15 px text, a 20 px name, the grid a
   little tighter. With the labels as words in a column of their own, a
   long address takes a third line on a narrow card. Of Aura's 313, on
   the cards: 45 at 320 px, 5 at 360, 3 at 375, 1 at 390 and 414, none
   from 430 to 667 - where Part 4c's icons gave 5, 4, 1 and 0 at 320 to
   390; sideways, 206 at 769, 73 at 844, 10 at 932, 3 at 1024 - where
   Part 4c's 16 px gave 244, 104, 25 and 5. Measured 2026-10-07 in
   Chromium, with the page's own fonts. */
@media (max-width: 1024px) {
  #map_sidebar .results_wrapper .results_entry {
    column-gap: 8px;
    row-gap: 3px;
  }

  #map_sidebar .results_entry .location_distance,
  #map_sidebar .results_entry > .sl_contact__info {
    font-size: 15px;
    line-height: 1.5;
  }

  #map_sidebar .results_entry .store_locator_name {
    margin-bottom: 5px;
    font-size: 20px;
  }

  #map_sidebar .results_entry > [id^="slp_right_cell_"] {
    margin-top: 11px;
  }
}

/* Stacked, on a screen wider than a phone - a tablet upright, a small
   phone sideways - a card runs up to 728 px: the two buttons keep about
   their desktop width instead of stretching to the card's. */
@media (min-width: 576px) and (max-width: 768px) {
  #map_sidebar .results_entry > [id^="slp_right_cell_"] {
    max-width: 456px;
  }
}

/* ------------------------------------- Part 4d: the hours, in the design */

/* Hours: in the label column, outside the <summary> it used to sit in: on
   screen only - the summary keeps the word for screen readers, in
   .avalon-hours__sr - and a click on it opens and shuts the week as
   before (avalon-hours.js). */
.avalon-label--hours {
  cursor: pointer;
}

.avalon-hours .avalon-hours__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The opened week on a card and in the bubble: a rule across, then the
   days, today first (avalon-hours.js) with a dot before it and TODAY
   under its hours, both in the primary colour; the other days indented by
   the dot's width, so every name starts in one column. A table still -
   its row headers are what a screen reader reads - pulled 15 px left, so
   the dot sits in the gap and the day names line up with the status
   above. TODAY is generated text with empty alternative text: the row
   already says aria-current="date". The hours never break here. None of
   this reaches the store page: its week is as Part 4 drew it.

   Part 4e. TODAY sits under its hours at every width (the owner,
   2026-10-07): Part 4d put it beside them wherever both fitted, which
   made the bubble wider than anything else in it needed. 3 px over it
   and 4 px under - 2 px more under than Part 4d's narrow cards gave it,
   so that it reads with its own hours and not with the next day's. */
#map_sidebar .avalon-hours--card .avalon-hours__week,
.slp_info_bubble .avalon-hours--card .avalon-hours__week {
  width: calc(100% + 15px);
  margin: 8px 0 0 -15px;
  padding-top: 8px;
  border-top: 1px solid var(--avalon-hours-rule, rgba(255, 255, 255, 0.15));
  border-collapse: separate;
  border-spacing: 0;
}

#map_sidebar .avalon-hours--card .avalon-hours__week tbody > tr > th,
#map_sidebar .avalon-hours--card .avalon-hours__week tbody > tr > td,
.slp_info_bubble .avalon-hours--card .avalon-hours__week tbody > tr > th,
.slp_info_bubble .avalon-hours--card .avalon-hours__week tbody > tr > td {
  padding: 0 0 3px;
  vertical-align: baseline;
}

#map_sidebar .avalon-hours--card .avalon-hours__week tbody > tr > th,
.slp_info_bubble .avalon-hours--card .avalon-hours__week tbody > tr > th {
  width: 1%;
  padding-right: 20px;
  padding-left: 15px;
  white-space: nowrap;
}

.slp_info_bubble .avalon-hours--card .avalon-hours__week tbody > tr > th {
  padding-right: 16px;
}

#map_sidebar .avalon-hours--card .avalon-hours__week tbody > tr.is-today > th,
.slp_info_bubble .avalon-hours--card .avalon-hours__week tbody > tr.is-today > th {
  padding-left: 0;
  font-weight: 800;
}

#map_sidebar .avalon-hours--card .avalon-hours__week tbody > tr.is-today > td,
.slp_info_bubble .avalon-hours--card .avalon-hours__week tbody > tr.is-today > td {
  font-weight: 800;
}

#map_sidebar .avalon-hours--card .avalon-hours__week tbody > tr.is-today > th::before,
.slp_info_bubble .avalon-hours--card .avalon-hours__week tbody > tr.is-today > th::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--avalon-hours-today);
  vertical-align: middle;
}

#map_sidebar .avalon-hours--card .avalon-hours__time,
.slp_info_bubble .avalon-hours--card .avalon-hours__time {
  white-space: nowrap;
}

#map_sidebar .avalon-hours--card .avalon-hours__week tbody > tr.is-today > td::after,
.slp_info_bubble .avalon-hours--card .avalon-hours__week tbody > tr.is-today > td::after {
  content: "TODAY";
  content: "TODAY" / "";
  display: block;
  margin: 3px 0 4px;
  color: var(--avalon-hours-today);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1px;
}

@media (max-width: 1024px) {
  #map_sidebar .avalon-hours--card .avalon-hours__week tbody > tr > th {
    padding-right: 16px;
  }
}

/* A phone held sideways, a tablet: the week 20 px left, as approved. */
@media (min-width: 769px) and (max-width: 1024px) {
  #map_sidebar .avalon-hours--card .avalon-hours__week {
    width: calc(100% + 20px);
    margin-left: -20px;
  }
}

/* Narrow cards. The card's grid is a size container for this one rule; a
   browser without container queries keeps the week as above.

   Under 250 px of content - the results column of a phone held sideways,
   769 to about 880 px wide, a 320 px phone upright - the week does not
   fit beside the labels, so the opened week takes the whole width under
   the Hours: line, its day names 15 px in, rather than run into the
   padding or past the edge. Measured on Aura 2026-10-07, with TODAY
   beside its hours as Part 4d had it: the week needed 193 px, and has
   the content less 50 to 56 px beside the labels.

   Part 4e. The cards alone. The bubble is as wide as its content now
   (the theme), and what is sized by its content cannot be a size
   container as well: contained, its lines would no longer count towards
   the bubble's width. Nor does it need to be: the theme keeps the bubble
   280 px wide at least, and a phone has none. Part 4d's 320 px rule went
   when TODAY moved under its hours for good. */
#map_sidebar .results_wrapper .results_entry {
  container-type: inline-size;
}

@container (max-width: 250px) {
  #map_sidebar .avalon-hours--card .avalon-hours__week {
    width: 100cqw;
    margin-left: calc(100% - 100cqw);
  }
}

/* ----------------------------------- Part 4d: the bubble, in three parts */

/* The name; the dealer's lines - the card's grid - in the body; then the
   two buttons in a row of their own under it. slp_avalon wraps Avalon's
   fields in .avalon-bubble__info and SLP's two button spans in
   .avalon-bubble__actions (slp_js_options at 120), so SLP's own lines -
   fax, description, its hours, image, tags, all empty on Aura - stay out
   of the grid, and the spans keep the ids main.js and slp_avalon.js read.
   15 px text and a 20 px name at every width. The frame - its colour,
   corners, width, shadow and tail - is the theme's.

   Part 4e. A phone has no bubble (slp_avalon.js), so the body that
   scrolled there, its scrollbar and the fade at its foot are gone, and
   the count Part 4d took of long addresses in a phone's bubble no longer
   describes anything. On a larger screen the bubble grows as it always
   did, and Google's own box scrolls it where a map is too short. */
.slp_info_bubble #slp_bubble_name {
  display: block;
  margin: 0;
  padding: 16px 16px 6px;
  font-size: 20px;
  line-height: 1.2;
}

.slp_info_bubble .sl_popup_contact_info {
  margin: 0;
  padding: 0 12px 16px 16px;
  font-size: 15px;
  line-height: 1.5;
}

.slp_info_bubble .avalon-bubble__info {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 3px;
  align-items: baseline;
}

.slp_info_bubble .avalon-bubble__info > .avalon-bubble-distance,
.slp_info_bubble .avalon-bubble__info > #slp_bubble_address,
.slp_info_bubble .avalon-bubble__info > #slp_bubble_phone,
.slp_info_bubble .avalon-bubble__info > #slp_bubble_email {
  display: contents;
}

.slp_info_bubble .avalon-bubble__info > .avalon-hours--card {
  min-width: 0;
}

.slp_info_bubble .avalon-bubble__actions {
  display: flex;
  gap: 8px;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--avalon-bubble-rule, rgba(255, 255, 255, 0.12));
}

.slp_info_bubble .avalon-bubble__actions > #slp_bubble_directions,
.slp_info_bubble .avalon-bubble__actions > #slp_bubble_website {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

.slp_info_bubble .avalon-bubble__actions a {
  flex: 1 1 auto;
  min-width: 0;
}

.slp_info_bubble .avalon-bubble__actions br {
  display: none;
}

/* ------------------------------------------ Part 4e: the chosen card */

/* Part 4e. On a phone - upright, or sideways and short - a pin opens no
   bubble: slp_avalon.js brings the dealer's card into view, marked
   .active - the theme's ring - and puts .avalon-flash on it for a
   second, so the eye finds it: the card's own background reached from a
   lighter one, twice. The lighter one is a custom property, for a site
   on a light background to set. Where the visitor has asked for less
   motion, no flash: the ring alone. */
@keyframes avalon-flash {
  from {
    background-color: var(--avalon-flash, rgba(255, 255, 255, 0.34));
  }
}

#map_sidebar .results_wrapper.avalon-flash {
  animation: avalon-flash 0.5s ease-out 2;
}

@media (prefers-reduced-motion: reduce) {
  #map_sidebar .results_wrapper.avalon-flash {
    animation: none;
  }
}

/* ----------------------------------------- Part 4f: the numbered cards */

/* Part 4f. Where the map's pins are numbered (slp_avalon.js, NUMBERS),
   each card's heading starts with the same number, in a disc of the
   site's primary colour with the number in black, bold - 4.80:1 on Aura's
   pink, as on the pins (the owner, 2026-10-08) - round, and a pill for
   two digits; before the name, on its first line. Screen readers hear
   "Number 4, " before the name: the word and the comma are in the
   markup, hidden on screen as the hidden "Hours: " is, and the disc is
   the box they are placed in, so that they cannot stretch the page
   either. Two custom properties for a site on another background.

   The disc's middle on the middle of the name's capitals, and the line
   no taller for it: measured on DEV's cards in Chromium (2026-10-08),
   with the page's Figtree - the capitals' middle 13.6 px under the
   line's top at 24 px, 12 px at 20 px (1024 px and under), and the
   disc's middle 14 and 12; the heading 28.8 and 24 px high with the
   disc or without it. The gap after it is the card's column gap. */
/* Part 4g. Each length of the disc times --avalon-name-scale, which
   slp_avalon.js sets on a heading whose name it has made smaller - its
   size over the stylesheet's - and which is 1 everywhere else: there
   every length is what Part 4f measured. The disc no smaller than
   18 px, the number no smaller than 11 px. */
#map_sidebar .results_wrapper .avalon-num {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  min-width: max(18px, calc(26px * var(--avalon-name-scale, 1)));
  height: max(18px, calc(26px * var(--avalon-name-scale, 1)));
  margin: calc(1px * var(--avalon-name-scale, 1)) calc(10px * var(--avalon-name-scale, 1)) calc(-1px * var(--avalon-name-scale, 1)) 0;
  padding: 0 calc(7px * var(--avalon-name-scale, 1));
  border-radius: max(9px, calc(13px * var(--avalon-name-scale, 1)));
  background-color: var(--avalon-num-bg, var(--e-global-color-primary, var(--primary-color, #e7167c)));
  color: var(--avalon-num-text, #000);
  font-size: max(11px, calc(14px * var(--avalon-name-scale, 1)));
  font-weight: 700;
  line-height: max(18px, calc(26px * var(--avalon-name-scale, 1)));
  text-align: center;
  vertical-align: top;
}

@media (max-width: 1024px) {
  #map_sidebar .results_wrapper .avalon-num {
    margin: calc(-1px * var(--avalon-name-scale, 1)) calc(8px * var(--avalon-name-scale, 1)) calc(-3px * var(--avalon-name-scale, 1)) 0;
  }
}

#map_sidebar .results_wrapper .avalon-num__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------- Part 4f: the map's buttons */

/* Part 4f. Reset, and + and -, where Google's zoom stood (slp_avalon.js,
   THE MAP'S BUTTONS), in Google's look as the probe read it on DEV on
   2026-10-08: white, 2 px corners, Google's shadow, 40 px buttons, a 1 px
   rule 30 px wide between + and -, Reset in the Map and Satellite
   buttons' type - Roboto 500, 18 px - and 10 px from the map's edges and
   from each other, as Google's own controls stand. Each button sets its
   colours for every state: the theme's button:hover and button:focus
   (0-1-1) paint any button pink, and these are 1-3-1 and up. A keyboard
   ring, black, inside the white button, so that it shows over any map;
   none for a pointer. + and - dimmed at either end of the zoom.
   Part 4l: the same on a store page's map, #avalon_location_map
   (slp_avalon.js, avalon_store_map). */
#map .gm-style .avalon-mapctl,
#avalon_location_map .gm-style .avalon-mapctl {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  margin: 10px;
}

#map .gm-style .avalon-mapctl__zoom,
#avalon_location_map .gm-style .avalon-mapctl__zoom {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 2px;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.3) 0 1px 4px -1px;
}

#map .gm-style .avalon-mapctl__rule,
#avalon_location_map .gm-style .avalon-mapctl__rule {
  width: 30px;
  height: 1px;
  background-color: #e6e6e6;
}

#map .gm-style .avalon-mapctl button,
#avalon_location_map .gm-style .avalon-mapctl button {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background-color: #fff;
  box-shadow: none;
  color: #666;
  cursor: pointer;
  font-family: Roboto, Arial, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
  white-space: nowrap;
  user-select: none;
  transition: none;
}

#map .gm-style .avalon-mapctl .avalon-mapctl__reset,
#avalon_location_map .gm-style .avalon-mapctl .avalon-mapctl__reset {
  width: auto;
  padding: 0 17px;
  box-shadow: rgba(0, 0, 0, 0.3) 0 1px 4px -1px;
  color: #565656;
}

/* On a phone, Reset alone in the top right corner: a little narrower, so
   that it clears Map and Satellite on the narrowest maps. */
#map .gm-style .avalon-mapctl--corner .avalon-mapctl__reset,
#avalon_location_map .gm-style .avalon-mapctl--corner .avalon-mapctl__reset {
  padding: 0 12px;
}

#map .gm-style .avalon-mapctl button:focus,
#avalon_location_map .gm-style .avalon-mapctl button:focus {
  outline: none;
  background-color: #fff;
}

#map .gm-style .avalon-mapctl button:hover,
#avalon_location_map .gm-style .avalon-mapctl button:hover {
  background-color: #fff;
  color: #333;
}

#map .gm-style .avalon-mapctl .avalon-mapctl__reset:hover,
#avalon_location_map .gm-style .avalon-mapctl .avalon-mapctl__reset:hover {
  background-color: #ebebeb;
  color: #000;
}

#map .gm-style .avalon-mapctl button:active,
#avalon_location_map .gm-style .avalon-mapctl button:active {
  color: #111;
}

#map .gm-style .avalon-mapctl button[aria-disabled="true"],
#avalon_location_map .gm-style .avalon-mapctl button[aria-disabled="true"],
#map .gm-style .avalon-mapctl button[aria-disabled="true"]:hover,
#avalon_location_map .gm-style .avalon-mapctl button[aria-disabled="true"]:hover {
  background-color: #fff;
  color: #d1d1d1;
  cursor: default;
}

#map .gm-style .avalon-mapctl button:focus-visible,
#avalon_location_map .gm-style .avalon-mapctl button:focus-visible {
  outline: 2px solid #000;
  outline-offset: -4px;
}

/* + and -, drawn: 16 px bars, 2 px thick, in the button's colour. */
#map .gm-style .avalon-mapctl__in::before,
#avalon_location_map .gm-style .avalon-mapctl__in::before,
#map .gm-style .avalon-mapctl__in::after,
#avalon_location_map .gm-style .avalon-mapctl__in::after,
#map .gm-style .avalon-mapctl__out::before,
#avalon_location_map .gm-style .avalon-mapctl__out::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  margin: -1px 0 0 -8px;
  background-color: currentColor;
}

#map .gm-style .avalon-mapctl__in::after,
#avalon_location_map .gm-style .avalon-mapctl__in::after {
  transform: rotate(90deg);
}

/* ------------------------------ Part 4g: names, the disc, the hours */

/* Part 4g (the owner, 2026-10-10). A card's name on one line beside its
   number: slp_avalon.js holds it to one line while it fits it - at the
   stylesheet's size, or smaller down to 15 px - and takes the class
   away where even 15 px does not fit, so that the name wraps there. */
#map_sidebar .results_entry .store_locator_name.avalon-name--fit {
  white-space: nowrap;
}

/* Part 4g. On a card and in the bubble the status in two lines: the
   word - Closed, Open, Opens soon, Closes soon - on a line of its own,
   then the rest of it, "Opens 9 AM Saturday" and the caret, on the
   next. The dot between them is hidden on screen, as the hidden
   "Hours: " is, and read by a screen reader as before; its box is
   .avalon-hours (Part 4f). The second line held to one line:
   avalon-hours.js makes it smaller, down to 13 px, where it would not
   fit, and lets it wrap only past that. A status with no rest - Open
   24 hours - is one line, as before. The store page's line is as it
   was: none of this reaches .avalon-hours--store. */
.avalon-hours--card .avalon-hours__summary .avalon-hours__status {
  display: block;
}

.avalon-hours--card .avalon-hours__status > .avalon-hours__word {
  display: block;
}

.avalon-hours--card .avalon-hours__sep {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.avalon-hours--card .avalon-hours__rest {
  display: block;
  white-space: nowrap;
}

.avalon-hours--card .avalon-hours__rest.avalon-hours__rest--wrap {
  white-space: normal;
}

/* ------------------------------- Part 4h: card B, Open or Closed on top */

/* Part 4h (the owner, 2026-10-11): CARD B on a desktop, a tablet and a
   phone held upright. The dealer's name shares its line with a chip at
   the card's top right - Open, Closed, Opens soon or Closes soon, with a
   dot, in the status's colour; Open for Open 24 hours - and the Hours
   row shows the rest of the status, "Opens 9 AM Monday" and the caret.
   A screen 500 px high and under - a phone held sideways, which
   slp_avalon.js treats as a phone - keeps the card as Part 4g draws it:
   no chip, the word over the rest in the Hours row.

   The head is slp_avalon's results layout: a row round SLP's heading,
   with the chip after it, empty until avalon-hours.js writes the status
   into it and marks the hours block .avalon-hours--chip. Empty, the chip
   is not shown, and the row is the name alone. The name takes what the
   chip leaves it - its width the row's, never its text's - and
   slp_avalon.js fits it to that, as Part 4g fits it to the card. The
   head carries the name's margin; Part 4d's grid lays it across the
   card.

   The chip is outlined, with no fill: the design's fill of white at 12%
   would take the pink Closed under 3:1 - from the table's 3.98 and 3.77
   above to 2.80 and 2.62; over the page's own #090909, 2.52 and 2.35.
   Its colours are the hours' own (the first rule). */
#map_sidebar .results_entry .avalon-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  column-gap: 10px;
  min-width: 0;
  margin: 0 0 8px;
}

#map_sidebar .results_entry .avalon-head > .store_locator_name {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

#map_sidebar .results_entry .avalon-chip {
  display: none;
  flex: none;
  align-items: center;
  column-gap: 6px;
  box-sizing: border-box;
  padding: 4px 10px 4px 9px;
  border: 1px solid var(--avalon-chip-rule, rgba(255, 255, 255, 0.2));
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  white-space: nowrap;
}

#map_sidebar .results_entry .avalon-chip__dot {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: currentColor;
}

#map_sidebar .results_entry .avalon-chip--open {
  color: var(--avalon-hours-open);
}

#map_sidebar .results_entry .avalon-chip--closed {
  color: var(--avalon-hours-closed);
}

#map_sidebar .results_entry .avalon-chip--soon {
  color: var(--avalon-hours-soon);
}

@media (max-width: 1024px) {
  #map_sidebar .results_entry .avalon-head {
    column-gap: 8px;
    margin-bottom: 5px;
  }
}

/* Taller than 500 px: the chip shown once it holds the status, and the
   word over the rest taken from the Hours row - hidden on screen, as the
   dot is (Part 4g), and read by a screen reader as before: the status's
   text is unchanged. A status with no rest, Open 24 hours, keeps its
   words in the row. */
@media not all and (max-height: 500px) {
  #map_sidebar .results_entry .avalon-chip:not(:empty) {
    display: inline-flex;
  }

  #map_sidebar .avalon-hours--chip .avalon-hours__status > .avalon-hours__word {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* ------------------------------ Part 4i: a long name wraps beside its number */

/* Part 4i (the owner, 2026-10-11, screenshot 4836). A card's name too long
   for one line even at 15 px - Part 4g's least, where slp_avalon.js lets it
   wrap and marks it avalon-name--wrap - wraps beside its number's disc,
   not under it: its second line starts where the first does, the disc
   level with the first line. While slp_avalon.js fits a name to one line
   the heading is as Part 4g draws it, so that its width can be measured.
   Measured in Chromium on a copy of DEV's page at 390 x 844, a "Closes
   soon" chip beside it: both lines at the heights they had, the second
   from 61.5 px - where the first starts - not 36, under the disc. */
#map_sidebar .results_entry .store_locator_name.avalon-name--wrap {
  display: flex;
  align-items: flex-start;
}

#map_sidebar .results_entry .store_locator_name.avalon-name--wrap > .avalon-num {
  flex: none;
}

#map_sidebar .results_entry .store_locator_name.avalon-name--wrap > a {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: break-word;
}

/* ------------------------------ Part 4l: the disc a button, the bubble */

/* Part 4l (the owner, 2026-10-14). Each card's number disc is a button
   (slp_avalon.js, THE DISC A BUTTON): Tab reaches it, Enter or Space
   shows the dealer on the map. Drawn as Part 4f and Part 4g draw the disc
   - the rules above, 1-2-0 - with a button's own border, shadow, font
   and look taken off here, at 1-2-1. The theme paints a button pink under
   the pointer and with focus (button:hover, button:focus, 0-1-1): the
   disc keeps its own colours in every state. A keyboard's ring, white,
   2 px out, as the card's own buttons have; none for a pointer. */
#map_sidebar .results_wrapper button.avalon-num {
  border: 0;
  box-shadow: none;
  font-family: inherit;
  font-style: normal;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: none;
}

#map_sidebar .results_wrapper button.avalon-num:hover,
#map_sidebar .results_wrapper button.avalon-num:focus,
#map_sidebar .results_wrapper button.avalon-num:active {
  background-color: var(--avalon-num-bg, var(--e-global-color-primary, var(--primary-color, #e7167c)));
  color: var(--avalon-num-text, #000);
  outline: none;
}

#map_sidebar .results_wrapper button.avalon-num:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* Part 4l (the owner, 2026-10-14: "Maybe instead of a thin line below
   the Dealer title, there just simply be more space?"). The bubble's
   name 10 px over its foot, where Part 4d gave it 6, and the dealer's
   lines 10 px under it, where they had none - 20 px between, not 6 - and
   8 px under them, not 16, over the one rule, which stays over the
   buttons, as before. The rest of Part 4d's three parts as they were:
   20 px names, 15 px lines, the buttons' row 12 px over and 16 px under
   them.

   Part 4m (the owner, 2026-10-14, 15:12 EDT: "Too much space for the
   Dealer title"): the name 5 px over its foot, as the owner wrote the
   rule - 15 px between the name and the lines, not 20. */
.slp_info_bubble #slp_bubble_name {
  padding: 16px 16px 5px;
}

.slp_info_bubble .sl_popup_contact_info {
  padding: 10px 12px 8px 16px;
}