/**
 * Locations directory + single location.
 * Values taken verbatim from the Claude Design prototype (Coffee Directory.dc.html).
 */

.arc-loc {
  --arc-ink: #1b1a17;
  --arc-gold: #C9A82C;
  --arc-gold-dark: #b8981f;
  --arc-accent: #7a6313;
  --arc-cream: #f7f5ef;
  --arc-line: #e7e3d8;
  --arc-line-strong: #d8d3c4;
  --arc-muted: #5f5b52;
  --arc-body: #4a473f;
  --arc-body-strong: #3d3a33;
  --arc-chip: #f3efe2;
  --arc-map-bg: #eef0ea;
  --arc-header-h: 130px;
  /* Astra's header container is 1200px with its content flush to the edge.
     Ours carries 20px gutters, so the box must be 1200 + 40 for the content
     column to land on exactly the same left/right edges as the header. */
  --arc-content: 1200px;
  --arc-gutter: 20px;
  --arc-wrap: calc(var(--arc-content) + (var(--arc-gutter) * 2));
  font-family: Heebo, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--arc-ink);
  -webkit-font-smoothing: antialiased;
}
.arc-loc *, .arc-loc *::before, .arc-loc *::after { box-sizing: border-box; }
.arc-loc a { color: var(--arc-ink); }
.arc-loc a:hover { color: var(--arc-accent); }
.arc-loc input, .arc-loc select, .arc-loc button { font-family: inherit; }
.arc-loc__wrap { max-width: var(--arc-wrap); margin: 0 auto; padding-inline: var(--arc-gutter); }

/* ---------- Hero ---------- */
.arc-loc__hero { background: var(--arc-cream); border-bottom: 1px solid var(--arc-line); }
.arc-loc__hero-inner {
  max-width: var(--arc-wrap); margin: 0 auto;
  padding: clamp(28px,5vw,56px) var(--arc-gutter) clamp(24px,4vw,40px);
  display: flex; flex-direction: column; gap: 14px;
}
.arc-loc__crumbs { font-size: 13px; color: var(--arc-muted); display: flex; flex-wrap: wrap; gap: 8px; }
.arc-loc__crumbs a { color: var(--arc-muted); }
.arc-loc__h1 {
  margin: 0; font-family: "Barlow Condensed", Heebo, sans-serif; font-weight: 700;
  font-size: clamp(34px,5vw,56px); line-height: 1; letter-spacing: .01em;
  text-transform: uppercase; max-width: 760px; text-wrap: balance;
}
.arc-loc__intro { margin: 0; font-size: 17px; line-height: 1.55; color: var(--arc-body); max-width: 760px; text-wrap: pretty; }

/* ---------- Search + near me ---------- */
.arc-loc__tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; max-width: 760px; }
.arc-loc__search {
  flex: 1 1 280px; display: flex; align-items: center; gap: 10px;
  background: #fff; border: 1px solid var(--arc-line-strong); border-radius: 8px; padding: 0 14px; height: 52px;
}
.arc-loc__search input { flex: 1; border: 0; outline: 0; font-size: 16px; background: transparent; height: 100%; min-width: 0; }
.arc-loc__near {
  flex: 0 0 auto; height: 52px; padding: 0 22px; border: 0; border-radius: 8px;
  background: var(--arc-gold); color: var(--arc-ink); font-weight: 700; font-size: 16px;
  display: flex; align-items: center; gap: 10px; cursor: pointer;
}
.arc-loc__near:hover { background: var(--arc-gold-dark); }
.arc-loc__status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; color: var(--arc-body); }
.arc-loc__status[hidden] { display: none; }
.arc-loc__linkbtn { border: 0; background: none; text-decoration: underline; cursor: pointer; font-size: 14px; color: var(--arc-body); padding: 0; }
.arc-loc__select { height: 44px; border: 1px solid var(--arc-line-strong); border-radius: 8px; padding: 0 12px; font-size: 14px; background: #fff; }
.arc-loc__status .arc-loc__select { height: 40px; border-radius: 6px; padding: 0 10px; }

/* ---------- Sticky filter bar ---------- */
.arc-loc__bar { background: #fff; border-bottom: 1px solid var(--arc-line); }
.arc-loc__bar-inner {
  max-width: var(--arc-wrap); margin: 0 auto; padding: 10px var(--arc-gutter);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
}
.arc-loc__tabs { display: flex; gap: 6px; overflow-x: auto; max-width: 100%; }
.arc-loc__tab {
  flex: 0 0 auto; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px;
  border-radius: 999px; text-decoration: none; font-weight: 500; font-size: 15px; white-space: nowrap;
  background: #fff; color: var(--arc-ink); border: 1px solid var(--arc-line-strong);
}
.arc-loc__tab[aria-selected="true"] { background: var(--arc-ink); color: #fff; border-color: var(--arc-ink); }
.arc-loc__tab[aria-selected="true"]:hover { color: #fff; }
.arc-loc__tab-count { font-size: 12px; opacity: .75; white-space: nowrap; }
.arc-loc__filters { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Results ---------- */
.arc-loc__results { max-width: var(--arc-wrap); margin: 0 auto; padding: 20px var(--arc-gutter) 64px; display: flex; flex-direction: column; gap: 18px; }
.arc-loc__nearest {
  background: var(--arc-ink); color: #fff; border-radius: 10px; padding: 20px 22px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.arc-loc__nearest[hidden] { display: none; }
.arc-loc__nearest-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.arc-loc__eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--arc-gold); font-weight: 700; }
.arc-loc__nearest-name { font-family: "Barlow Condensed", Heebo, sans-serif; font-size: 28px; font-weight: 700; line-height: 1.1; }
.arc-loc__nearest-addr { font-size: 15px; color: #d9d5ca; }
.arc-loc__nearest-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.arc-loc__btn-ghost {
  height: 46px; padding: 0 18px; border-radius: 8px; border: 1px solid #57544b; color: #fff;
  text-decoration: none; display: flex; align-items: center; font-weight: 500;
}
.arc-loc__btn-ghost:hover { color: #fff; }
.arc-loc__btn-gold {
  height: 46px; padding: 0 18px; border-radius: 8px; background: var(--arc-gold); color: var(--arc-ink);
  text-decoration: none; display: flex; align-items: center; font-weight: 700;
}
.arc-loc__resultbar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.arc-loc__resultlabel { margin: 0; font-size: 15px; font-weight: 500; color: var(--arc-body); }

/* ---------- Split layout ---------- */
.arc-loc__split { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 24px; align-items: start; }
.arc-loc__listcol { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.arc-loc__mapcol { position: sticky; top: calc(var(--arc-header-h) + 20px); }
.arc-loc__map { height: calc(100vh - var(--arc-header-h) - 60px); max-height: 600px; min-height: 420px; border-radius: 10px; overflow: hidden; border: 1px solid var(--arc-line); background: var(--arc-map-bg); }
.arc-loc__map--top { height: 420px; max-height: 600px; }

/* ---------- Cards ---------- */
.arc-loc__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,270px),1fr)); gap: 16px; }
.arc-loc__card {
  display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #fff;
  border: 1px solid var(--arc-line); border-radius: 10px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.arc-loc__card.is-active { border-color: var(--arc-gold); box-shadow: 0 0 0 2px var(--arc-gold); }
.arc-loc__card[hidden] { display: none; }
.arc-loc__card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; font-size: 12px; line-height: 1.3; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.arc-loc__card-town { color: var(--arc-accent); min-width: 0; }
.arc-loc__card-dist { color: var(--arc-ink); flex: 0 0 auto; white-space: nowrap; }
.arc-loc__card-name { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.25; text-wrap: balance; }
.arc-loc__card-name a { text-decoration: none; }
.arc-loc__meta { display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.45; color: var(--arc-body-strong); }
.arc-loc__meta > * { display: flex; gap: 8px; text-decoration: none; color: var(--arc-body-strong); }
.arc-loc__meta svg { flex: 0 0 auto; margin-top: 2px; }
.arc-loc__meta .arc-loc__email { word-break: break-all; }
.arc-loc__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.arc-loc__chip { font-size: 12px; font-weight: 500; padding: 4px 9px; border-radius: 999px; background: var(--arc-chip); color: var(--arc-body); white-space: nowrap; }
.arc-loc__card-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 4px; }
.arc-loc__card-actions a { flex: 1; height: 44px; border-radius: 8px; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 14px; }
.arc-loc__card-dir { border: 1px solid var(--arc-line-strong); font-weight: 500; }
.arc-loc__card-view { background: var(--arc-gold); font-weight: 700; color: var(--arc-ink); }
.arc-loc__empty { border: 1px dashed var(--arc-line-strong); border-radius: 10px; padding: 40px 24px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.arc-loc__empty[hidden] { display: none; }
.arc-loc__empty button { height: 44px; padding: 0 18px; border-radius: 8px; border: 1px solid var(--arc-ink); background: #fff; font-weight: 500; cursor: pointer; margin-top: 6px; }

/* ---------- Mobile list/map toggle ---------- */
.arc-loc__toggle { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 1002; display: none; background: var(--arc-ink); border-radius: 999px; padding: 4px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.arc-loc__toggle button { height: 44px; padding: 0 20px; border: 0; border-radius: 999px; font-weight: 700; font-size: 14px; cursor: pointer; background: transparent; color: #fff; }
.arc-loc__toggle button.is-on { background: var(--arc-gold); color: var(--arc-ink); }

@media (max-width: 899px) {
  .arc-loc__split { grid-template-columns: minmax(0,1fr); }
  .arc-loc__mapcol { position: static; }
  .arc-loc__map { height: 68vh; max-height: 600px; }
  .arc-loc__toggle { display: flex; }
  .arc-loc.is-mapview .arc-loc__listcol { display: none; }
  .arc-loc:not(.is-mapview) .arc-loc__mapcol { display: none; }
}

/* ---------- Single location ---------- */
/* Same cream band as the directory hero, so the two pages read as one set. */
.arc-loc__crumbbar { background: var(--arc-cream); border-bottom: 1px solid var(--arc-line); }
.arc-loc__crumbbar-inner { max-width: var(--arc-wrap); margin: 0 auto; padding: 16px var(--arc-gutter); }
.arc-loc__crumb-current { color: var(--arc-ink); }

.arc-loc__detail-top { max-width: var(--arc-wrap); margin: 0 auto; padding: clamp(24px,4vw,40px) var(--arc-gutter) 0; display: flex; flex-direction: column; gap: 20px; }
.arc-loc__detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,420px),1fr)); gap: clamp(20px,4vw,48px); align-items: start; }
.arc-loc__shot { width: 100%; aspect-ratio: 3/2; border-radius: 10px; background: #eee center/cover no-repeat; }
.arc-loc__shot--empty { background: repeating-linear-gradient(135deg,#f3f0e6 0 12px,#ece8db 12px 24px); display: flex; align-items: center; justify-content: center; font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: #6b665a; }
.arc-loc__detail-head { display: flex; align-items: center; gap: 16px; }
.arc-loc__logo { width: 72px; height: 72px; border-radius: 8px; background: #eee center/cover no-repeat; flex: 0 0 auto; }
.arc-loc__detail-title { margin: 0; font-family: "Barlow Condensed", Heebo, sans-serif; font-size: clamp(34px,4.5vw,48px); font-weight: 700; line-height: 1; text-transform: uppercase; text-wrap: balance; }
.arc-loc__blurb { margin: 0; font-size: 16px; line-height: 1.6; color: var(--arc-body); text-wrap: pretty; }
.arc-loc__chip--lg { font-size: 13px; padding: 6px 12px; color: var(--arc-body-strong); }
.arc-loc__dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; font-size: 16px; line-height: 1.45; border-block: 1px solid var(--arc-line); padding: 20px 0; }
.arc-loc__dl dt { font-size: 13px; color: var(--arc-muted); padding-top: 2px; }
.arc-loc__dl dd { margin: 0; }
.arc-loc__dl dd.arc-loc__email { word-break: break-all; }
.arc-loc__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.arc-loc__cta a { height: 50px; border-radius: 8px; text-decoration: none; display: flex; align-items: center; justify-content: center; }
.arc-loc__cta-primary { flex: 1 1 160px; background: var(--arc-gold); color: var(--arc-ink); font-weight: 700; }
.arc-loc__cta-secondary { flex: 1 1 120px; border: 1px solid var(--arc-ink); font-weight: 500; }

.arc-loc__why { max-width: var(--arc-wrap); margin: clamp(48px,7vw,88px) auto 0; padding: 0 var(--arc-gutter); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,420px),1fr)); gap: clamp(28px,5vw,64px); align-items: start; }
.arc-loc__why-col { display: flex; flex-direction: column; gap: 18px; }
.arc-loc__why-h { margin: 0; font-family: "Barlow Condensed", Heebo, sans-serif; font-size: clamp(30px,4vw,44px); font-weight: 700; line-height: 1.02; text-transform: uppercase; text-wrap: balance; }
.arc-loc__why-col p { margin: 0; font-size: 18px; line-height: 1.65; color: #2e2c27; text-wrap: pretty; }
.arc-loc__owner { display: flex; align-items: center; padding-top: 18px; border-top: 1px solid var(--arc-line); margin-top: 6px; }
.arc-loc__owner-meta { display: flex; flex-direction: column; gap: 2px; }
.arc-loc__extras { background: var(--arc-cream); border: 1px solid var(--arc-line); border-radius: 12px; padding: clamp(22px,3vw,32px); display: flex; flex-direction: column; gap: 20px; }
.arc-loc__extras h3 { margin: 0; font-size: 20px; font-weight: 700; }
.arc-loc__extras ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.arc-loc__extras li { display: flex; gap: 16px; align-items: flex-start; }
.arc-loc__extras-n { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; background: var(--arc-ink); color: var(--arc-gold); display: flex; align-items: center; justify-content: center; font-family: "Barlow Condensed", Heebo, sans-serif; font-weight: 700; font-size: 17px; }
.arc-loc__extras-body { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.arc-loc__extras-body span { font-size: 15px; line-height: 1.5; color: var(--arc-body); }
.arc-loc__extras-foot { display: flex; flex-direction: column; gap: 10px; padding-top: 18px; border-top: 1px solid #e2ddcf; }
.arc-loc__chip--gold { background: var(--arc-gold); color: var(--arc-ink); font-weight: 700; font-size: 13px; padding: 6px 12px; }

.arc-loc__detail-map-wrap { max-width: var(--arc-wrap); margin: clamp(40px,6vw,64px) auto 0; padding: 0 var(--arc-gutter); }
.arc-loc__detail-map { width: 100%; height: clamp(300px,40vw,440px); border-radius: 10px; overflow: hidden; border: 1px solid var(--arc-line); background: var(--arc-map-bg); }

.arc-loc__nearby { background: var(--arc-cream); margin-top: clamp(48px,7vw,88px); border-top: 1px solid var(--arc-line); }
.arc-loc__nearby-inner { max-width: var(--arc-wrap); margin: 0 auto; padding: clamp(36px,5vw,56px) var(--arc-gutter); display: flex; flex-direction: column; gap: 20px; }
.arc-loc__nearby-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 10px; }
.arc-loc__nearby-head h2 { margin: 0; font-family: "Barlow Condensed", Heebo, sans-serif; font-size: clamp(26px,3.5vw,34px); font-weight: 700; text-transform: uppercase; }
.arc-loc__nearby-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%,260px),1fr)); gap: 14px; }
.arc-loc__nearby-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: #fff; border: 1px solid var(--arc-line); border-radius: 10px; text-decoration: none; height: 100%; }
.arc-loc__nearby-card:hover { border-color: var(--arc-gold); }
.arc-loc__nearby-meta { display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }
.arc-loc__nearby-town { color: var(--arc-accent); }
.arc-loc__nearby-name { font-size: 18px; font-weight: 700; color: var(--arc-ink); }
.arc-loc__nearby-addr { font-size: 14px; color: var(--arc-body); }

.arc-loc__map img, .arc-loc__detail-map img { max-width: none; }

/* ---------- Colour lock ----------
   Astra's compiled stylesheet paints links gold at a specificity we can't
   reliably predict. This component is namespaced under .arc-loc, so forcing
   its own palette here is contained and cannot leak to the rest of the site. */
.arc-loc a { color: var(--arc-ink); }
.arc-loc .arc-loc__card-name a,
.arc-loc .arc-loc__card-name a:visited { color: var(--arc-ink) !important; }
.arc-loc .arc-loc__card-name a:hover { color: var(--arc-accent) !important; }
.arc-loc .arc-loc__meta a,
.arc-loc .arc-loc__meta a:visited { color: var(--arc-body-strong) !important; }
.arc-loc .arc-loc__meta a:hover { color: var(--arc-accent) !important; }
.arc-loc .arc-loc__card-dir,
.arc-loc .arc-loc__card-dir:visited,
.arc-loc .arc-loc__card-dir:hover { color: var(--arc-ink) !important; }
.arc-loc .arc-loc__card-view,
.arc-loc .arc-loc__card-view:visited,
.arc-loc .arc-loc__card-view:hover { color: var(--arc-ink) !important; }
.arc-loc .arc-loc__crumbs a,
.arc-loc .arc-loc__crumbs a:visited { color: var(--arc-muted) !important; }
.arc-loc .arc-loc__tab,
.arc-loc .arc-loc__tab:visited,
.arc-loc .arc-loc__tab:hover { color: var(--arc-ink) !important; }
.arc-loc .arc-loc__tab[aria-selected="true"],
.arc-loc .arc-loc__tab[aria-selected="true"]:visited,
.arc-loc .arc-loc__tab[aria-selected="true"]:hover { color: #fff !important; }
.arc-loc .arc-loc__btn-ghost,
.arc-loc .arc-loc__btn-ghost:visited,
.arc-loc .arc-loc__btn-ghost:hover { color: #fff !important; }
.arc-loc .arc-loc__btn-gold,
.arc-loc .arc-loc__btn-gold:visited,
.arc-loc .arc-loc__btn-gold:hover { color: var(--arc-ink) !important; }
.arc-loc .arc-loc__nearby-card,
.arc-loc .arc-loc__nearby-card:visited { color: var(--arc-ink) !important; }
.arc-loc .arc-loc__nearby-card .arc-loc__nearby-town { color: var(--arc-accent) !important; }
.arc-loc .arc-loc__cta-primary,
.arc-loc .arc-loc__cta-primary:visited,
.arc-loc .arc-loc__cta-primary:hover { color: var(--arc-ink) !important; }
.arc-loc .arc-loc__cta-secondary,
.arc-loc .arc-loc__cta-secondary:visited,
.arc-loc .arc-loc__cta-secondary:hover { color: var(--arc-ink) !important; }
.arc-loc .arc-loc__dl dd a,
.arc-loc .arc-loc__dl dd a:visited { color: var(--arc-ink) !important; }

/* Astra styles bare <button> like a filled button. These are text links. */
.arc-loc .arc-loc__linkbtn,
.arc-loc .arc-loc__linkbtn:hover,
.arc-loc .arc-loc__linkbtn:focus {
  background: none !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
  color: var(--arc-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: inherit !important;
  text-decoration: underline !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  min-height: 0 !important;
  width: auto !important;
}
.arc-loc .arc-loc__near,
.arc-loc .arc-loc__near:hover,
.arc-loc .arc-loc__near:focus { color: var(--arc-ink) !important; }
.arc-loc .arc-loc__empty button { color: var(--arc-ink) !important; background: #fff !important; }

/* ---------- Mobile ---------- */
@media (max-width: 899px) {
  /* Let the tab strip scroll edge to edge. Without the negative margin the last
     pill is clipped mid-gutter and reads as broken rather than scrollable. */
  .arc-loc__tabs {
    margin-inline: calc(var(--arc-gutter) * -1);
    padding-inline: var(--arc-gutter);
    scroll-padding-inline: var(--arc-gutter);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .arc-loc__tabs::-webkit-scrollbar { display: none; }

  .arc-loc__bar-inner { gap: 12px; }
  .arc-loc__filters { width: 100%; gap: 10px; }
  .arc-loc__filters .arc-loc__select { flex: 1 1 0; min-width: 0; }

  /* Search and Near me each take a full row so neither is squeezed. */
  .arc-loc__search, .arc-loc__near { flex: 1 1 100%; }
  .arc-loc__near { justify-content: center; }

  .arc-loc__nearest { padding: 18px; }
  .arc-loc__nearest-actions { width: 100%; }
  .arc-loc__nearest-actions a { flex: 1 1 0; justify-content: center; }
  .arc-loc__nearest-name { font-size: 24px; }

  /* Long addresses and emails must not push the card wider than the screen. */
  .arc-loc__card { overflow-wrap: anywhere; }
  .arc-loc__card-top { gap: 8px; }

  /* Clear the fixed list/map toggle so it never covers the last card. */
  .arc-loc__results { padding-bottom: 92px; }
}

@media (max-width: 599px) {
  .arc-loc__hero-inner { gap: 12px; }
  .arc-loc__intro { font-size: 16px; }
  .arc-loc__status { font-size: 13px; }
  .arc-loc__status .arc-loc__select { width: 100%; }

  .arc-loc__resultbar { gap: 6px; }
  .arc-loc__grid { grid-template-columns: 1fr; }

  .arc-loc__detail-head { gap: 12px; }
  .arc-loc__logo { width: 56px; height: 56px; }
  .arc-loc__dl { grid-template-columns: 1fr; gap: 4px 0; }
  .arc-loc__dl dt { padding-top: 10px; }
  .arc-loc__cta a { flex: 1 1 100%; }
  .arc-loc__extras li { gap: 12px; }
}

/* Never let the component force a horizontal scrollbar on the document. */
.arc-loc { overflow-x: clip; }

/* Short tab labels on narrow screens: "Buy a Bag" -> "Bag".
   display:none (not visually-hidden) so screen readers announce only one. */
.arc-loc__tab-short { display: none; }
@media (max-width: 767px) {
  .arc-loc__tab-full { display: none; }
  .arc-loc__tab-short { display: inline; }
  .arc-loc__tab { padding: 0 14px; gap: 6px; }
}