@charset "utf-8";
/* ═══ GoodWay home · section 7 · VISIT US ═════════════════════════════════
   The shop as a visitor finds it, on one store card. On one side, the door
   to look for: the shop's own photo of its storefront, cropped to the
   Unit 7 sign. In the same place, a Google map that loads only when the
   visitor opens it (the switch on the photo, Scripts/gw.sec7.js); until
   then nothing is asked of Google. On the other side, the open sign (the
   frame's, kept current by tq.site.js), the week's hours drawn as bars on
   one day's clock with today marked and a mark for now, the address, and
   the ways in: directions, a call, the address copied.
   Behind the card, the faint grid of a street map. The week's bars run out
   from the left when the card comes into view (the kit's reveal); without
   the script, or for a visitor who asks for less motion, they are simply
   there. Drawn by Services/HomeVisit.vb.
   Mobile first: the phone, then 480 (each day on one line), 768 (the week
   beside the ways in), 1280 (the photo beside the card's words).
   ═════════════════════════════════════════════════════════════════════════ */

.gw-s7 {
  --gw-s7-live: var(--tq-success);            /* the shop open right now  */
  --gw-s7-live-rgb: var(--tq-success-rgb);
  --gw-s7-grid: 56px;
  position: relative;
  isolation: isolate;
  padding-block: var(--tq-section);
  background: var(--tq-bg);
  color: var(--tq-text-body);
}
.gw-s7::before {                               /* a street map's grid, fading out from behind the card */
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgb(var(--tq-steel-rgb) / .05) 0 1px, transparent 1px var(--gw-s7-grid)),
    repeating-linear-gradient(90deg, rgb(var(--tq-steel-rgb) / .05) 0 1px, transparent 1px var(--gw-s7-grid));
  -webkit-mask-image: radial-gradient(75% 65% at 60% 62%, #000 0%, transparent 78%);
          mask-image: radial-gradient(75% 65% at 60% 62%, #000 0%, transparent 78%);
}

/* ── the words over the card ──────────────────────────────────────────── */
.gw-s7__head { display: flex; flex-direction: column; align-items: flex-start; margin-block-end: var(--tq-sp-10); }
.gw-s7__eyebrow { margin: 0 0 var(--tq-sp-6); }
.gw-s7__title { max-inline-size: 18ch; }
.gw-s7__lead {
  margin: var(--tq-sp-6) 0 0;
  max-inline-size: 56ch;
  font-size: var(--tq-fs-lg);
  line-height: var(--tq-lh-lead);
  color: var(--tq-text-muted);
  text-wrap: pretty;
}

/* ── the card ─────────────────────────────────────────────────────────── */
.gw-s7__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--tq-line);
  border-radius: var(--tq-r-xl);
  background: var(--tq-surface);
  box-shadow: var(--tq-el-3);
}

/* the photo and the map, one over the other: the switch shows one */
.gw-s7__media { position: relative; min-inline-size: 0; aspect-ratio: 5 / 4; background: var(--tq-bg-sunken); }
.gw-s7__face { position: absolute; inset: 0; margin: 0; overflow: hidden; }
.gw-s7__photo > picture { position: absolute; inset: 0; display: block; }
.gw-s7__photo img { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 30%; }
.gw-s7__frame { position: absolute; inset: 0; display: block; inline-size: 100%; block-size: 100%; border: 0; }

/* the map before it is opened: a pin on the grid, and what opening it does */
.gw-s7__ask {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--tq-sp-5);
  padding: var(--tq-sp-9) var(--tq-sp-7);
  text-align: center;
  background:
    repeating-linear-gradient(0deg, rgb(var(--tq-steel-rgb) / .07) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgb(var(--tq-steel-rgb) / .07) 0 1px, transparent 1px 40px),
    var(--tq-surface-2);
}
.gw-s7__pin .tq-i { display: block; inline-size: 44px; block-size: 44px; color: var(--tq-accent); filter: drop-shadow(0 6px 8px rgb(var(--tq-accent-rgb) / .3)); }
.gw-s7__note { margin: 0; max-inline-size: 34ch; font-size: var(--tq-fs-xs); line-height: 1.45; color: var(--tq-text-muted); }

/* under it: the same search in Google Maps itself (the map, once open, has Google's own "View larger map") */
.gw-s7__open {
  display: inline-flex;
  align-items: center;
  gap: var(--tq-sp-2);
  border-radius: var(--tq-r-xs);
  font-size: var(--tq-fs-sm);
  font-weight: var(--tq-fw-semibold);
  line-height: 1.3;
  color: var(--tq-accent-text);
  text-decoration: none;
}
.gw-s7__open .tq-i { inline-size: 15px; block-size: 15px; }
.gw-s7__open:hover { text-decoration: underline; text-underline-offset: 3px; }
.gw-s7__open:focus-visible { outline: none; box-shadow: var(--tq-ring); }

/* the switch on the photo: the storefront, or the map */
.gw-s7__switch {
  position: absolute;
  inset-inline-start: var(--tq-sp-5);
  inset-block-end: var(--tq-sp-5);
  z-index: 2;
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border-radius: var(--tq-r-full);
  background: rgb(255 255 255 / .92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px -10px rgb(0 0 0 / .5), 0 0 0 1px rgb(var(--tq-steel-rgb) / .12);
}
.gw-s7__switch button {
  display: inline-flex;
  align-items: center;
  gap: var(--tq-sp-3);
  min-block-size: 38px;
  padding: 0 var(--tq-sp-6);
  border: 0;
  border-radius: var(--tq-r-full);
  background: transparent;
  font: inherit;
  font-size: var(--tq-fs-sm);
  font-weight: var(--tq-fw-semibold);
  line-height: 1;
  color: #2A2D33;
  cursor: pointer;
  transition: var(--tq-t-color);
}
.gw-s7__switch button:hover { background: rgb(var(--tq-steel-rgb) / .07); }
.gw-s7__switch button[aria-pressed="true"] { background: var(--tq-graphite-900); color: #FFFFFF; }
.gw-s7__switch button:focus-visible { outline: none; box-shadow: var(--tq-ring); }
.gw-s7__switch .tq-i { inline-size: 16px; block-size: 16px; }

/* ── the card's words: open now, the week, the ways in ─────────────────── */
.gw-s7__info { display: flex; flex-direction: column; gap: var(--tq-sp-8); min-inline-size: 0; padding: var(--tq-sp-8) var(--tq-sp-6); }
.gw-s7__status { margin: 0; font-size: var(--tq-fs-md); line-height: 1.4; }
.gw-s7__status .tq-open { white-space: normal; align-items: flex-start; }
.gw-s7__status .tq-open > .tq-signal { margin-block-start: calc((1lh - 14px) / 2); }

.gw-s7__h {
  margin: 0 0 var(--tq-sp-4);
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-xs);
  font-weight: var(--tq-fw-bold);
  line-height: 1;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tq-text-muted);
}

/* the week: a day on each row, its bar on one day's clock, its hours in words */
.gw-s7__week { display: block; inline-size: 100%; border-collapse: collapse; font-size: var(--tq-fs-sm); line-height: 1.35; }
.gw-s7__week > tbody, .gw-s7__week > tfoot { display: block; }   /* a phone: each day on two lines (the roles keep it a table to a screen reader) */
.gw-s7__week th, .gw-s7__week td { padding: 0; }
.gw-s7__day { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "day time" "bar bar"; align-items: center; gap: var(--tq-sp-2) var(--tq-sp-5); padding-block: var(--tq-sp-3); }
.gw-s7__day + .gw-s7__day { border-block-start: 1px solid var(--tq-line-soft); }
.gw-s7__day > th { grid-area: day; text-align: start; white-space: nowrap; }
.gw-s7__dn {
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-sm);
  font-weight: var(--tq-fw-semibold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tq-text-muted);
}
.gw-s7__time { grid-area: time; text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--tq-text-body); }
.gw-s7__cell { grid-area: bar; }
.gw-s7__day.is-today .gw-s7__dn, .gw-s7__day.is-today .gw-s7__time { font-weight: var(--tq-fw-semibold); color: var(--tq-text-strong); }
.gw-s7__day.is-today > th::after {             /* the row says Today; a screen reader already hears the day */
  content: "Today";
  content: "Today" / "";
  display: inline-block;
  margin-inline-start: var(--tq-sp-3);
  padding: 3px 7px;
  border-radius: var(--tq-r-full);
  background: var(--tq-accent);
  font-family: var(--tq-font-display);
  font-size: var(--tq-fs-3xs);
  font-weight: var(--tq-fw-bold);
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: 1px;
  color: var(--tq-on-accent);
}

.gw-s7__track { position: relative; display: block; block-size: 8px; border-radius: var(--tq-r-full); background: var(--tq-fill-2); }
.gw-s7__day.is-closed .gw-s7__track {         /* a closed day: the clock's line, dashed, no bar */
  background: repeating-linear-gradient(90deg, rgb(var(--tq-steel-rgb) / .2) 0 6px, transparent 6px 11px) center / 100% 2px no-repeat;
}
.gw-s7__bar {
  position: absolute;
  inset-block: 0;
  left: var(--a);
  width: calc(var(--b) - var(--a));
  border-radius: inherit;
  background: rgb(var(--tq-steel-rgb) / .36);
  transform-origin: left center;
}
.gw-s7__day.is-today .gw-s7__bar { background: var(--tq-graphite-900); }
.gw-s7__day.is-live .gw-s7__bar { background: var(--gw-s7-live); box-shadow: 0 0 0 3px rgb(var(--gw-s7-live-rgb) / .16); }
.gw-s7__now {                                  /* now, on today's bar */
  position: absolute;
  top: 50%;
  left: var(--t);
  inline-size: 16px;
  block-size: 16px;
  margin: -8px 0 0 -8px;
  box-sizing: border-box;
  border: 4px solid var(--tq-accent);
  border-radius: 50%;
  background: var(--tq-surface);
  box-shadow: 0 0 0 2px var(--tq-surface), 0 2px 6px rgb(var(--tq-steel-rgb) / .3);
}

/* the clock's hours, under the bars */
.gw-s7__week tfoot tr { display: grid; grid-template-columns: minmax(0, 1fr); }
.gw-s7__week tfoot td:not(.gw-s7__ticks) { display: none; }
.gw-s7__ticks { position: relative; display: block; block-size: 22px; }
.gw-s7__ticks span {
  position: absolute;
  top: 7px;
  left: var(--t);
  font-size: var(--tq-fs-3xs);
  line-height: 1;
  white-space: nowrap;
  color: var(--tq-text-muted);
  transform: translateX(-50%);
}
.gw-s7__ticks span::before { content: ""; position: absolute; left: 50%; top: -6px; block-size: 4px; border-inline-start: 1px solid var(--tq-line-strong); }

/* the ways in */
.gw-s7__reach { display: flex; flex-direction: column; gap: var(--tq-sp-6); }
.gw-s7__addr { display: flex; align-items: flex-start; gap: var(--tq-sp-4); margin: 0; font-style: normal; font-size: var(--tq-fs-md); line-height: 1.45; color: var(--tq-text-strong); }
.gw-s7__addr .tq-i { flex: none; inline-size: 20px; block-size: 20px; margin-block-start: 2px; color: var(--tq-accent-text); }
.gw-s7__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--tq-sp-4); }
.gw-s7__copy .tq-i { inline-size: 18px; block-size: 18px; }
.gw-s7__copy.is-done { color: var(--tq-success); }

/* ── the bars run out from the left once the week is seen ─────────────────
   The kit's reveal brings the week in and adds .is-in; the bars are held at
   no width only until then (no transition back), and each row follows the
   one above it. Without the script nothing here is held back.            */
@media (prefers-reduced-motion: no-preference) {
  .tq-js .gw-s7__week[data-tq-reveal]:not(.is-in) .gw-s7__bar { transform: scaleX(0); }
  .tq-js .gw-s7__week[data-tq-reveal].is-in .gw-s7__bar { transition: transform .9s var(--tq-ease-out) calc(var(--i, 0) * 70ms + .15s); }
  .tq-js .gw-s7__week[data-tq-reveal]:not(.is-in) .gw-s7__now { opacity: 0; }
  .tq-js .gw-s7__week[data-tq-reveal].is-in .gw-s7__now { transition: opacity .4s var(--tq-ease-out) 1.1s; }
}

/* ── the phone ────────────────────────────────────────────────────────── */
@media (max-width: 479px) {
  .gw-s7__actions > .tq-btn { flex: 1 1 100%; }
  .gw-s7__switch { inset-inline-start: var(--tq-sp-4); inset-block-end: var(--tq-sp-4); }
  .gw-s7__switch button { min-block-size: 34px; padding: 0 var(--tq-sp-5); font-size: var(--tq-fs-xs); }
}

/* ── 480: each day on one line ────────────────────────────────────────── */
@media (min-width: 480px) {
  .gw-s7__week { display: table; }
  .gw-s7__week > tbody { display: table-row-group; }
  .gw-s7__week > tfoot { display: table-footer-group; }
  .gw-s7__day, .gw-s7__week tfoot tr { display: table-row; }
  .gw-s7__day > th, .gw-s7__day > td, .gw-s7__week tfoot td { display: table-cell; vertical-align: middle; }
  .gw-s7__week tfoot td:not(.gw-s7__ticks) { display: table-cell; }
  .gw-s7__day > th { inline-size: 1%; padding-block: var(--tq-sp-4); padding-inline-end: var(--tq-sp-6); }
  .gw-s7__cell { inline-size: 100%; }
  .gw-s7__time { inline-size: 1%; padding-inline-start: var(--tq-sp-6); }
  .gw-s7__day + .gw-s7__day > * { border-block-start: 1px solid var(--tq-line-soft); }
  .gw-s7__day + .gw-s7__day { border-block-start: 0; }
  .gw-s7__ticks { block-size: 24px; }
}

/* ── 768: the media wider, the week beside the ways in ────────────────── */
@media (min-width: 768px) {
  .gw-s7__media { aspect-ratio: 16 / 9; }
  .gw-s7__photo img { object-position: 50% 18%; }   /* a wide frame keeps the sign and the door */
  .gw-s7__info {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-areas: "status status" "week reach";
    align-items: start;
    gap: var(--tq-sp-8) var(--tq-sp-10);
    padding: var(--tq-sp-9);
  }
  .gw-s7__status { grid-area: status; }
  .gw-s7__weekbox { grid-area: week; min-inline-size: 0; }
  .gw-s7__reach { grid-area: reach; padding-block-start: var(--tq-sp-7); }
  .gw-s7__actions { flex-direction: column; align-items: stretch; }
  .gw-s7__info:not(:has(.gw-s7__weekbox)) { grid-template-areas: "status status" "reach reach"; }
}

/* ── 1280: the photo beside the card's words (narrower, the photo would lose
   the sign's ends, so until then it sits over them) ─────────────────── */
@media (min-width: 1280px) {
  .gw-s7__card { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
  .gw-s7--nomedia .gw-s7__card { grid-template-columns: minmax(0, 1fr); }
  .gw-s7__media { aspect-ratio: auto; min-block-size: 460px; }
  .gw-s7__photo img { object-position: 50% 40%; }
  .gw-s7__info { display: flex; flex-direction: column; align-items: stretch; gap: var(--tq-sp-8); padding: var(--tq-sp-10); }
  .gw-s7__reach { padding-block-start: 0; }
  .gw-s7__actions { flex-direction: row; align-items: center; }
  .gw-s7--nomedia .gw-s7__info {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-areas: "status status" "week reach";
  }
}

/* printed before it was ever seen: the week whole */
@media print {
  .tq-js .gw-s7__week[data-tq-reveal] { opacity: 1; transform: none; transition: none; }
  .tq-js .gw-s7__week[data-tq-reveal]:not(.is-in) .gw-s7__bar, .tq-js .gw-s7__week[data-tq-reveal] .gw-s7__bar { transform: none; transition: none; }
  .tq-js .gw-s7__week[data-tq-reveal]:not(.is-in) .gw-s7__now, .tq-js .gw-s7__week[data-tq-reveal] .gw-s7__now { opacity: 1; transition: none; }
  .gw-s7__switch { display: none; }
}
@media (forced-colors: active) {
  .gw-s7__card, .gw-s7__switch { border: 1px solid CanvasText; }
  .gw-s7__track { border: 1px solid CanvasText; }
  .gw-s7__bar { background: CanvasText; }
  .gw-s7__day.is-live .gw-s7__bar, .gw-s7__day.is-today .gw-s7__bar { background: Highlight; }
  .gw-s7__now { border-color: Highlight; background: Canvas; }
  .gw-s7__switch button[aria-pressed="true"] { background: Highlight; color: HighlightText; }
}