/* ============================================================
   refresh.css — the Oct 2026 phone redesign: the phone-only parts.
   Mobile-only pages link it with media="(max-width: 600px)"; the pg-all
   service pages (headshots x3, the three packages, family) link it with no
   media, so these rules apply there at every width. Pieces shared by every
   width live in the base stylesheets instead.
   ============================================================ */

/* ---------- Swaps (see .m-x in components.css) ---------- */
.m-x { display: revert; }
svg.m-x { display: inline-block; width: 18px; height: 18px; flex: none; }
.d-x { display: none !important; }

/* ---------- Service pages: shared blocks ---------- */
/* "Details" block: centred, heading tight to its first line. */
.pg-block:not(.pg-sec):has(> .pg-rows) { text-align: center; }
.pg-block:not(.pg-sec):has(> .pg-rows) > .pg-k { margin-bottom: 6px; }
.pg-block:not(.pg-sec):has(> .pg-rows) .pg-row:first-child { padding-top: 0; }
/* "All services and prices": a real button, wherever it appears. */
.pg-row a[href="services"], .pg-more-top a[href="services"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 6px;
  padding: 0 18px;
  border: 1px solid var(--text);
  border-radius: 10px;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}
.pg-row a[href="services"]::after, .pg-more-top a[href="services"]::after { content: "\2192"; }
/* "More in …": heading over its button, centred. */
.pg-more-top { flex-direction: column; align-items: center; text-align: center; }

/* ---------- Home: "Your next event." ---------- */
/* The word is the switch: no underline, a chevron instead. */
.stmt-w { display: inline-flex; align-items: center; gap: 4px; color: var(--text); }
.stmt-w::after { display: none; }
.stmt-w svg.m-x { width: 20px; height: 20px; }
.stmt-links { height: 88px; margin-top: 10px; }
.stmt-set { align-content: flex-start; gap: 0 18px; }
.stmt-set a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--text); }
.stmt-set a::after { content: "\00a0\2192"; color: var(--text2); }

/* ---------- FAQ: one topic picker instead of the chip row ---------- */
.faq-rail { display: none; }
.faq-pick { display: block; margin-bottom: 12px; }
.faq-pick-l { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--text2); }
.faq-pick-s {
  display: block;
  width: 100%;
  min-height: 54px;
  padding: 0 48px 0 16px;
  border: 1px solid var(--border-hi);
  border-radius: 14px;
  background: var(--bg2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5F5F0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center / 20px;
  color: var(--text);
  font-size: 17px;
  font-weight: 700;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* ---------- About: the four services finish the intro sentence ---------- */
.ab-sub, .ab-links, .ab-links li { display: inline; }
.ab-sub, .ab-links { margin: 0; padding: 0; font-size: 16px; line-height: 1.8; }
.ab-links a {
  display: inline;
  padding: 6px 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--text);
  font-weight: 700;
  text-transform: lowercase;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  white-space: nowrap;
}
.ab-links svg { display: inline; width: 14px; height: 14px; margin-left: 2px; vertical-align: -2px; color: var(--text); }
.ab-links li::after { content: ","; color: var(--text2); }
.ab-links li:nth-last-child(2)::after { content: " and"; }
.ab-links li:last-child::after { content: "."; }