/*!
 * ANP Market Day — store finder. Ported from concepts/stores-a.html. Scoped under .amd-sf.
 */
.amd-sf {
  --beige: #EFE3C6; --paper: #F8F2E3; --tan: #DDC289; --tan-2: #E8D6A8; --brown: #6B4B2B; --brown-85: rgba(107, 75, 43, .85);
  --green: #009639; --green-dk: #0A6B2E; --green-ink: #0E4A25; --pumpkin: #D48B2E; --charcoal: #1A1617; --ink-2: #4A3F36;
  --line: rgba(107, 75, 43, .28); --white: #FFFDF8;
  --slab: "Zilla Slab", "Museo Slab", Georgia, serif;
  --sans: "Figtree", "Proxima Nova", "Helvetica Neue", Arial, sans-serif;
  --kraft: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .42 0 0 0 0 .29 0 0 0 0 .17 0 0 0 .10 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  /*
   * A container query context again. It was taken out when the layout viewport blew up on a phone,
   * but that turned out to be the state-pill row — a sideways scroller holding 1246px of content —
   * and switching this off only appeared to help because it forced a fresh layout. With the pills
   * wrapping, the fault is gone and this can do its proper job: these breakpoints are the finder's
   * own width, so the split between the list and the map is the same whatever the theme's gutters
   * are doing at a given window size. The viewport-width approximations that replaced them for an
   * afternoon were off by about 100px and squeezed the map on a mid-sized laptop.
   */
  container: amdsf / inline-size;
  color: var(--charcoal); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; max-width: 1240px; margin: 0 auto;
}
.amd-sf *, .amd-sf *::before, .amd-sf *::after { box-sizing: border-box; }
.amd-sf .amd-ic { width: 1em; height: 1em; flex: none; }
.amd-sf :focus-visible { outline: 3px solid var(--pumpkin); outline-offset: 2px; border-radius: 6px; }
:where(.amd-sf) button { background: none; border: 0; border-radius: 0; color: inherit; padding: 0; margin: 0; font: inherit; line-height: inherit; letter-spacing: inherit; text-transform: none; box-shadow: none; min-height: 0; cursor: pointer; }
:where(.amd-sf) input, :where(.amd-sf) select { margin: 0; box-shadow: none; }
:where(.amd-sf) h2, :where(.amd-sf) h3, :where(.amd-sf) p { margin: 0; text-transform: none; letter-spacing: normal; }
.amd-sf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* finder card */
.amd-sf-finder { background: var(--paper) var(--kraft); border-radius: 22px; padding: 22px; margin: 9px 9px 24px; box-shadow: 0 0 0 1px var(--line), 0 0 0 7px var(--paper), 0 0 0 8.5px var(--brown-85), 0 24px 50px -30px rgba(80, 50, 20, .5); }
.amd-sf .amd-sf-count { font: 600 15px/1.45 var(--sans); color: var(--ink-2); margin: 0 4px 14px; }
.amd-sf-count b { font: 700 18px var(--slab); color: var(--green-ink); }
.amd-sf-form { display: flex; gap: 10px; margin: 0; }
.amd-sf-field { flex: 1; position: relative; min-width: 0; }
.amd-sf-field > .amd-ic { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--brown); pointer-events: none; }
.amd-sf .amd-sf-field input { width: 100%; height: 56px; padding: 0 20px 0 50px; border-radius: 999px; border: 1.5px solid var(--line); font: 600 17px var(--sans); background: var(--white); color: var(--charcoal); outline: none; }
.amd-sf .amd-sf-field input:focus { border-color: var(--green); }
.amd-sf .amd-sf-btn { display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 28px; border-radius: 999px; background: var(--green); color: #fff; font: 700 16px/1 var(--sans); white-space: nowrap; }
.amd-sf .amd-sf-btn:hover { background: var(--brown); color: #fff; }
.amd-sf-row { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-top: 16px; }
.amd-sf-flt { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.amd-sf-lbl { font: 700 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--brown); margin-right: 4px; }
.amd-sf .amd-sf-chip { border: 1.5px solid var(--line); background: var(--white); border-radius: 999px; padding: 9px 14px; font: 700 13.5px/1 var(--sans); color: var(--charcoal); display: inline-flex; align-items: center; gap: 7px; }
.amd-sf-chip i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.amd-sf-chip .amd-ic { font-size: 14px; display: none; }
.amd-sf .amd-sf-chip[aria-pressed="true"] { background: var(--green-ink); border-color: var(--green-ink); color: #fff; }
.amd-sf-chip[aria-pressed="true"] .amd-ic { display: block; }
.amd-sf-chip[aria-pressed="true"] i { display: none; }
.amd-sf .amd-sf-geo { display: inline-flex; align-items: center; gap: 6px; font: 700 14px var(--sans); color: var(--green-dk); text-decoration: underline; text-underline-offset: 3px; }
.amd-sf-geo .amd-ic { font-size: 18px; }
.amd-sf .amd-sf-hint { margin: 12px 4px 0; font-size: 13px; color: var(--ink-2); }

/* state picks */
.amd-sf-picks { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 18px 0 26px; border-top: 1px dashed var(--line); }
.amd-sf .amd-sf-spill { background: var(--paper); border-radius: 999px; padding: 10px 14px; font: 700 14px/1 var(--sans); color: var(--brown); display: inline-flex; gap: 8px; box-shadow: inset 0 0 0 1px var(--line); }
.amd-sf-spill b { color: var(--green-dk); font-variant-numeric: tabular-nums; }
.amd-sf .amd-sf-spill:hover { box-shadow: inset 0 0 0 1.5px var(--green); }
.amd-sf .amd-sf-spill[aria-pressed="true"] { background: var(--green); color: #fff; box-shadow: none; }
.amd-sf-spill[aria-pressed="true"] b { color: #fff; }
.amd-sf .amd-sf-more select { appearance: none; -webkit-appearance: none; border: 0; background: var(--paper) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236B4B2B' stroke-width='2'/></svg>") no-repeat right 14px center; border-radius: 999px; padding: 10px 36px 10px 14px; font: 700 14px/1 var(--sans); color: var(--brown); box-shadow: inset 0 0 0 1px var(--line); height: auto; }
.amd-sf .amd-sf-more select.on { background-color: var(--green); color: #fff; }

/* results + map */
.amd-sf-grid { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 36px; align-items: start; padding-bottom: 40px; }
.amd-sf-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.amd-sf .amd-sf-head h2 { font: 600 clamp(24px, 2.6vw, 34px)/1.1 var(--slab); color: var(--green-ink); }
.amd-sf .amd-sf-head p { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }
.amd-sf-sort { display: flex; align-items: center; gap: 8px; font: 600 13px var(--sans); color: var(--ink-2); }
.amd-sf .amd-sf-sort select { font: 700 13.5px var(--sans); padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--line); background: var(--white); color: var(--charcoal); height: auto; }
.amd-sf-list { display: grid; gap: 12px; }
.amd-sf-store { background: var(--white); border-radius: 18px; padding: 18px 20px; box-shadow: 0 0 0 1px var(--line); display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 4px 16px; align-items: start; }
.amd-sf-num { width: 44px; height: 44px; border-radius: 50%; background: var(--tan-2); color: var(--brown); display: grid; place-items: center; font: 700 15px var(--slab); box-shadow: inset 0 0 0 1.5px var(--brown-85); }
.amd-sf .amd-sf-store h3 { font: 600 19px/1.2 var(--slab); color: var(--green-ink); margin: 0 0 4px; }
.amd-sf-store .amd-sf-mi { font: 700 13px var(--sans); color: var(--pumpkin); margin-left: 6px; white-space: nowrap; }
.amd-sf-addr { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.45; font-style: normal; }
.amd-sf-contact { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.amd-sf-contact a { display: inline-flex; gap: 6px; align-items: center; font: 700 14px var(--sans); color: var(--green-dk); }
.amd-sf-foot { grid-column: 2; display: flex; justify-content: space-between; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-top: 8px; }
.amd-sf-carries { display: flex; flex-wrap: wrap; gap: 6px; }
.amd-sf-carries span { font: 700 11px/1 var(--sans); letter-spacing: .06em; padding: 6px 9px; border-radius: 999px; background: color-mix(in srgb, var(--c) 14%, #fff); color: var(--charcoal); display: inline-flex; gap: 6px; align-items: center; }
.amd-sf-carries span i { width: 7px; height: 7px; border-radius: 50%; background: var(--c); }
.amd-sf .amd-sf-dir { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; font: 700 13.5px/1 var(--sans); color: var(--brown); box-shadow: inset 0 0 0 2px var(--brown); text-decoration: none; white-space: nowrap; }
.amd-sf .amd-sf-dir:hover { background: var(--brown); color: #fff; }
.amd-sf-pager { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 20px; }
.amd-sf-pager p { margin: 0; font-size: 13.5px; color: var(--ink-2); }
.amd-sf .amd-sf-pager button { padding: 12px 20px; border-radius: 999px; font: 700 14px/1 var(--sans); color: var(--brown); box-shadow: inset 0 0 0 2px var(--brown); }
.amd-sf-none { background: var(--white); border-radius: 18px; padding: 28px; box-shadow: 0 0 0 1px var(--line); text-align: center; }
.amd-sf .amd-sf-none h3 { font: 600 21px var(--slab); color: var(--green-ink); }
.amd-sf-none p { color: var(--ink-2); margin: 8px 0 16px !important; }
.amd-sf-none a { display: inline-flex; padding: 12px 22px; border-radius: 999px; background: var(--green); color: #fff; font: 700 15px var(--sans); text-decoration: none; }

.amd-sf-mapcard { position: sticky; top: 24px; background: var(--paper) var(--kraft); border-radius: 22px; padding: 12px; box-shadow: 0 0 0 1px var(--line), 0 24px 50px -34px rgba(80,50,20,.55); }
.amd-sf-map { width: 100%; height: auto; display: block; }
.amd-sf-map .tile rect { fill: #F3EAD3; stroke: rgba(107,75,43,.30); stroke-width: 1.2; transition: fill .2s; }
.amd-sf-map .tile.has rect { fill: #E6D19F; stroke: rgba(107,75,43,.55); }
.amd-sf-map .tile.has { cursor: pointer; }
.amd-sf-map .tile.has:hover rect { fill: #DCC284; }
.amd-sf-map .tile.on rect { fill: var(--green); stroke: var(--green-ink); }
.amd-sf-map .tile:focus { outline: none; }
.amd-sf-map .tile:focus-visible rect { stroke: var(--pumpkin); stroke-width: 4; }
.amd-sf-map .ab { font: 700 14px var(--sans); fill: rgba(107,75,43,.75); letter-spacing: .06em; paint-order: stroke; stroke: rgba(243,234,211,.9); stroke-width: 3px; }
.amd-sf-map.zoomed .fullonly { display: none; }
.amd-sf-map .tile.has .ab { fill: var(--brown); stroke: rgba(230,209,159,.95); }
.amd-sf-map .tile.on .ab { fill: #fff; stroke: var(--green); }
.amd-sf-map .bub { fill: rgba(14,74,37,.86); stroke: #F8F2E3; stroke-width: 2; }
.amd-sf-map .tile.on .bub { fill: var(--pumpkin); }
.amd-sf-map .cnt { font: 800 14px var(--sans); fill: #fff; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.amd-sf-map .deco { font: italic 600 15px var(--slab); fill: var(--brown); }
.amd-sf-map .wave { fill: none; stroke: #7FA7A0; stroke-width: 2; stroke-linecap: round; opacity: .8; }
.amd-sf-map .ttl { font: 700 30px var(--slab); fill: var(--green-ink); }
.amd-sf-map .sub { font: 700 12.5px var(--sans); letter-spacing: .2em; fill: var(--brown); text-transform: uppercase; }
.amd-sf-map .leg { font: 600 14px var(--sans); fill: var(--ink-2); }
.amd-sf-map .hq { font: 700 15px var(--sans); fill: var(--green-ink); }
.amd-sf-mapfoot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 6px 2px; border-top: 1px dashed var(--line); margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.amd-sf-mapfoot b { color: var(--charcoal); }
.amd-sf-mbtns { display: inline-flex; gap: 16px; }
.amd-sf .amd-sf-mapfoot button { font: 700 13px var(--sans); color: var(--green-dk); text-decoration: underline; text-underline-offset: 3px; padding: 4px 0; }

/* The theme styles every button:hover/:focus with a dark fill; keep each finder button's own look. */
.amd-sf .amd-sf-geo:hover, .amd-sf .amd-sf-geo:focus, .amd-sf .amd-sf-geo:active { background: none; color: var(--green-ink); box-shadow: none; }
.amd-sf .amd-sf-geo:disabled { opacity: .6; cursor: progress; }
.amd-sf .amd-sf-chip:hover, .amd-sf .amd-sf-chip:focus { background: var(--white); color: var(--charcoal); border-color: var(--green); }
.amd-sf .amd-sf-chip[aria-pressed="true"]:hover, .amd-sf .amd-sf-chip[aria-pressed="true"]:focus { background: var(--green-ink); color: #fff; border-color: var(--green-ink); }
.amd-sf .amd-sf-spill:hover, .amd-sf .amd-sf-spill:focus { background: var(--paper); color: var(--brown); }
.amd-sf .amd-sf-spill[aria-pressed="true"]:hover, .amd-sf .amd-sf-spill[aria-pressed="true"]:focus { background: var(--green); color: #fff; }
.amd-sf .amd-sf-mapfoot button:hover, .amd-sf .amd-sf-mapfoot button:focus { background: none; color: var(--green-ink); }
.amd-sf .amd-sf-pager button:hover, .amd-sf .amd-sf-pager button:focus { background: var(--brown); color: #fff; }
.amd-sf .amd-sf-btn:focus { background: var(--green); color: #fff; }
.amd-sf .amd-sf-btn:hover { background: var(--brown); color: #fff; }

@container amdsf (max-width: 980px) {
  .amd-sf-grid { grid-template-columns: 1fr; }
  .amd-sf-mapcard { position: static; order: -1; }
}
@container amdsf (max-width: 600px) {
  .amd-sf-finder { padding: 16px; margin: 9px 4px 20px; }
  .amd-sf-form { flex-direction: column; }
  .amd-sf .amd-sf-btn { width: 100%; }
  /*
   * The state pills wrap; they used to be a sideways scroller. Chrome counts a scroll container's
   * content toward the layout viewport on a phone, so a 1246px row inside a 310px box widened the
   * whole page to 1111px: the fixed bottom toolbar stretched with it and the page scrolled
   * sideways. Measured directly — wrapping the row put window.innerWidth back to 390 on the spot.
   * The script shows fewer pills at this width so wrapping stays two rows, and the rest of the
   * states are in the "more states" menu beside them, where they already were.
   */
  .amd-sf-picks { flex-wrap: wrap; overflow-x: visible; }
  .amd-sf-picks .amd-sf-lbl { display: none; }
  .amd-sf-spill, .amd-sf-more select { flex: none; white-space: nowrap; }
  .amd-sf-mapcard { padding: 10px 8px; }
  .amd-sf-store { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 16px; }
  .amd-sf-num { width: 36px; height: 36px; font-size: 13px; }
  .amd-sf-foot { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .amd-sf * { transition: none !important; } }

/* ------------------------------------------------------------------------------------------
   Desktop layout, second pass: the map was the larger half of the split, so a 1440px screen
   showed about five stores. The results now take the bigger share and run in two columns, and
   the map becomes a companion panel rather than the main event.
   ------------------------------------------------------------------------------------------ */
@container amdsf (min-width: 981px) {
  .amd-sf-grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 30px; }
}
@container amdsf (min-width: 1180px) {
  .amd-sf-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* Two to a row means less width each, so the card tightens up. */
  .amd-sf-store { padding: 15px 16px; gap: 12px; grid-template-columns: 34px minmax(0, 1fr); }
  .amd-sf-num { width: 34px; height: 34px; font-size: 13px; }
  .amd-sf .amd-sf-store h3 { font-size: 17px; }
  .amd-sf-addr { font-size: 13.5px; }
  .amd-sf-contact a { font-size: 13px; }
  .amd-sf-foot { grid-column: 1 / -1; margin-top: 4px; }
  .amd-sf-carries span { font-size: 10px; padding: 5px 8px; }
  .amd-sf .amd-sf-dir { padding: 7px 12px; font-size: 12.5px; }
}

/* The header is sticky, so a sticky map pinned to `top: 24px` slides under it and loses its own
   title. Sit below the header instead (chrome.js measures it), and never grow taller than what
   is left of the screen — scroll inside the panel rather than clipping. */
/* Only while the map is actually a sticky companion beside the results. Applied everywhere, this
   put a scrollbar inside the map card on a phone, where the card is simply part of the page and
   has all the room it needs. */
@container amdsf (min-width: 981px) {
  .amd-sf-mapcard {
    top: calc(var(--amdc-hdr-h, 0px) + var(--amdc-adminbar, 0px) + 24px);
    max-height: calc(100vh - var(--amdc-hdr-h, 0px) - var(--amdc-adminbar, 0px) - 48px);
    overflow: auto;
    overscroll-behavior: contain;
  }
}
@container amdsf (max-width: 980px) {
  .amd-sf-mapcard { max-height: none; overflow: visible; }
}

/* --------------------------------------------------------------------------------------------
   Store card, second pass.
   The lines carried and the directions button sat on their own row under the address, which left
   the right half of every card empty and made each one taller than it needed to be. They now form
   a column on the right: directions at the top, the lines stacked beneath it. A long shop name is
   cut to one line rather than wrapping and pushing everything down.
   -------------------------------------------------------------------------------------------- */
.amd-sf-store {
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 14px;
  row-gap: 4px;
  padding: 15px 16px;
}
.amd-sf-num { width: 38px; height: 38px; font-size: 14px; }
.amd-sf-main { min-width: 0; }

.amd-sf .amd-sf-store h3 {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 17.5px; margin: 0 0 3px;
}
/* One line, then an ellipsis — a long name must not set the height of the card. */
.amd-sf .amd-sf-store h3 > span.amd-sf-name,
.amd-sf .amd-sf-store h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.amd-sf-store .amd-sf-mi { flex: none; margin-left: 0; }
.amd-sf-addr { font-size: 13.5px; }
.amd-sf-contact { margin-top: 5px; }
.amd-sf-contact a { font-size: 13px; }

.amd-sf-side {
  grid-column: 3; grid-row: 1 / span 3;
  display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
  justify-self: end; /* sit against the card's right edge, not wherever the track lands */
  max-width: 46%;
}
.amd-sf .amd-sf-dir { padding: 8px 14px; font-size: 13px; white-space: nowrap; }
.amd-sf-carries { flex-direction: column; align-items: flex-end; gap: 4px; }
.amd-sf-carries span { font-size: 10.5px; padding: 5px 9px; white-space: nowrap; }

/* The card is its own container, so the side column responds to the card's width rather than the
   width of the whole finder — two-up on a laptop keeps the directions button top-right, and only a
   genuinely narrow card lays it flat. */
.amd-sf-store { container: sfcard / inline-size; }

@container sfcard (max-width: 330px) {
  .amd-sf-side {
    grid-column: 2; grid-row: auto; width: 100%; max-width: none; margin-top: 8px;
    flex-direction: row; align-items: center; justify-content: space-between;
  }
  .amd-sf-carries { flex-direction: row; align-items: center; }
  .amd-sf-side .amd-sf-dir { order: 2; }
  .amd-sf-side .amd-sf-carries { order: 1; }
}
@container amdsf (max-width: 600px) {
  .amd-sf-store { grid-template-columns: 34px minmax(0, 1fr); }
  .amd-sf-side { grid-column: 1 / -1; flex-wrap: wrap; gap: 8px; }
}

/* ---- while a lookup is in flight ------------------------------------------------------------ */
/* The ring is drawn from a border so it needs no image, and it keeps turning while the browser's
   own location prompt is open — the longest wait, and the one that otherwise looks like nothing. */
.amd-sf-spin { display: none; width: 15px; height: 15px; flex: none; border-radius: 50%; border: 2px solid rgba(14, 74, 37, .22); border-top-color: var(--green); animation: amd-sf-turn .7s linear infinite; }
@keyframes amd-sf-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .amd-sf-spin { animation: amd-sf-fade 1.1s ease-in-out infinite; } @keyframes amd-sf-fade { 50% { opacity: .3; } } }

.amd-sf-busy { display: none; align-items: center; justify-content: center; gap: 10px; margin: 0 0 12px !important; padding: 16px; border-radius: 18px; background: var(--white); box-shadow: 0 0 0 1px var(--line); font: 600 15px var(--sans); color: var(--ink-2); }
.amd-sf[data-busy] .amd-sf-busy { display: flex; }
.amd-sf[data-busy] .amd-sf-busy .amd-sf-spin { display: block; }
/* The previous results stay in place, dimmed, so the page does not jump while we wait. */
.amd-sf[data-busy] .amd-sf-list { opacity: .35; pointer-events: none; transition: opacity .2s ease; }
.amd-sf[data-busy] .amd-sf-pager { display: none; }
.amd-sf[data-busy="geo"] .amd-sf-geo .amd-sf-spin { display: block; }
.amd-sf[data-busy="geo"] .amd-sf-geo > .amd-ic { display: none; }

/* ==============================================================================================
   Narrow screens, third pass. Everything below answers a real fault on a phone rather than taste.
   ============================================================================================== */

/* The map is drawn at 900x560 in its own coordinates. Without a definite box of its own an inline
   SVG falls back to that intrinsic width, which is far wider than a phone — and a box wider than
   the screen makes the browser widen the whole layout viewport, which is what stretched the fixed
   bottom toolbar and left the page scrolling sideways. The aspect-ratio gives it a real height, so
   it is never measured from its contents. */
.amd-sf-map {
  width: 100%; max-width: 100%; height: auto; display: block;
  aspect-ratio: 900 / 560;
}

@container amdsf (max-width: 600px) {
  /* "Carries" reads as a heading for the three chips, which then share one row instead of
     wrapping a lone chip onto a line of its own. */
  /* The row wraps once, after the label, so the three chips then share the line below it. With
     nowrap the full-width label left them nothing and they collapsed into each other. */
  .amd-sf-flt { flex-wrap: wrap; width: 100%; gap: 6px; }
  .amd-sf-flt .amd-sf-lbl { flex: 1 0 100%; margin-bottom: 2px; }
  .amd-sf-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .amd-sf .amd-sf-chip {
    flex: 1 1 0; min-width: 0; justify-content: center;
    padding-inline: 8px; font-size: 12.5px; white-space: nowrap;
  }
  /* The location link and the note under it are the width of the card, so they centre on it. */
  .amd-sf .amd-sf-geo { align-self: center; }
  .amd-sf .amd-sf-hint { text-align: center; margin-inline: 0; }
  /* The line under the map and its two links centre on the card rather than hugging the left. */
  .amd-sf-mapfoot { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  .amd-sf-mapfoot .amd-sf-mbtns { display: flex; justify-content: center; gap: 18px; }
}

/* A card this narrow cannot carry a side column: the name, the address and the lines each want the
   full width, and Directions is the one thing being tapped — so it becomes the card's own button
   along the bottom, which also squares off the ragged right edge. */
/* A container query measures the CONTENT box, not the border box. A two-up card on a wide screen
   is 366px wide but 334px inside its padding, so a 420 — or even a 345 — threshold matched it and
   every desktop card grew a full-width Directions button. On a phone the same measure is about
   278px, so 300 separates them cleanly. */
@container sfcard (max-width: 300px) {
  .amd-sf-store { grid-template-columns: 38px minmax(0, 1fr); }
  .amd-sf-side {
    grid-column: 1 / -1; grid-row: auto; width: 100%; max-width: none; margin-top: 10px;
    display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  }
  .amd-sf-carries { order: 1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px; }
  .amd-sf .amd-sf-dir {
    order: 2; width: 100%; justify-content: center;
    padding: 11px 14px; font-size: 14px;
  }
  /* With the full width to itself the name can wrap rather than being cut off mid-word. */
  .amd-sf .amd-sf-store h3 { white-space: normal; overflow: visible; text-overflow: clip; }
}

/* ==============================================================================================
   Older engines without container queries (Safari below 16, Firefox below 110).

   Everything above is keyed to the finder's own width, which is the right measure — but a browser
   that does not understand `@container` ignores those blocks entirely and would show a phone the
   desktop layout: two columns squeezed into 390px. This repeats the essentials against the
   viewport instead. The numbers are the container widths re-expressed as window widths, measured
   on the page; they are a shade less accurate than the real thing, which is the correct trade for
   a fallback nobody modern will see.
   ============================================================================================== */
@supports not (container-type: inline-size) {
  @media (max-width: 1110px) {
    .amd-sf-grid { grid-template-columns: 1fr; }
    .amd-sf-mapcard { position: static; order: -1; max-height: none; overflow: visible; }
  }
  @media (max-width: 680px) {
    .amd-sf-finder { padding: 16px; margin: 9px 4px 20px; }
    .amd-sf-form { flex-direction: column; }
    .amd-sf .amd-sf-btn { width: 100%; }
    .amd-sf-picks { flex-wrap: wrap; overflow-x: visible; }
    .amd-sf-picks .amd-sf-lbl { display: none; }
    .amd-sf-store { grid-template-columns: 34px minmax(0, 1fr); }
    .amd-sf-side { grid-column: 1 / -1; flex-wrap: wrap; gap: 8px; }
    .amd-sf-flt { flex-wrap: wrap; width: 100%; gap: 6px; }
    .amd-sf-flt .amd-sf-lbl { flex: 1 0 100%; margin-bottom: 2px; }
    .amd-sf-row { flex-direction: column; align-items: stretch; gap: 12px; }
    .amd-sf .amd-sf-geo { align-self: center; }
    .amd-sf .amd-sf-hint { text-align: center; }
    .amd-sf-mapfoot { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
  }
}