/* =====================================================================
   Beauty Box Cowbridge — mobile refresh (Oct 2026)
   Loaded after each page's own <style> block, only at phone/tablet widths:
   <link rel="stylesheet" href="mobile.css" media="(max-width: 768px)">
   Rules for type sizes:
   - reading text (paragraphs, menu items, FAQs, reviews, footer) ≥ 16px
   - small uppercase labels and button text ≥ 14px
   ===================================================================== */

/* ---------- 1. Info strip: hours line + three tap chips ---------- */
.strip {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: .45rem .5rem;
  padding: .55rem .75rem .65rem !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
  text-align: center;
  height: 82px;
  box-sizing: border-box;
  align-content: center;
}
.strip > span { display: flex; align-items: center; justify-content: center; min-width: 0; }
/* hours sits on its own row, first */
.strip > span:nth-child(2) { grid-column: 1 / -1; order: -1; gap: .35rem; font-weight: 600; }
/* phone lives in the sticky Call bar at the bottom, so the strip shows Message us instead */
.strip > span:nth-child(3) { display: none; }
/* chips */
.strip > span:nth-child(1),
.strip > span:nth-child(4),
.strip > span:nth-child(5) {
  background: rgba(255,255,255,.22);
  border-radius: 2rem;
  min-height: 36px;
  padding: 0 .5rem;
  gap: .35rem;
  white-space: nowrap;
}
/* short labels: the full text stays for screen readers and copy, visually swapped */
.strip > span:nth-child(1) a,
.strip > span:nth-child(4) a {
  font-size: 0 !important;
  display: inline-flex; align-items: center; gap: .35rem;
  min-height: 36px;
}
.strip > span:nth-child(1) a::after { content: "Directions"; font-size: 15px; font-weight: 600; }
.strip > span:nth-child(4) a::after { content: "Message us"; font-size: 15px; font-weight: 600; }
.strip > span:nth-child(5) a { font-weight: 600; display: inline-flex; align-items: center; min-height: 36px; }
.strip > span:nth-child(5) a { font-size: 0 !important; }
.strip > span:nth-child(5) a::after { content: "Vouchers"; font-size: 15px; }

/* Reserve exactly nav (72) + strip (82) so nothing hides under the strip */
body { padding-top: 154px !important; }
.hero { margin-top: 0 !important; min-height: 0 !important; }

/* ---------- 2. Hero ---------- */
.hero-content { padding: 2.75rem 1.5rem 2.5rem !important; }
.hero-eyebrow { font-size: 14px !important; letter-spacing: .14em !important; }
.hero h1 { font-size: 2.35rem !important; line-height: 1.12 !important; }
.hero-sub { font-size: 17px !important; line-height: 1.6 !important; }
.hero-cta { gap: .75rem !important; }
.hero-cta .btn-white,
.hero-cta .btn-ghost { font-size: 15px !important; padding: 1rem 1.5rem !important; }
/* the rating "pill" reads as a third button on phones — make it a plain line */
.hero-cta .rating-pill {
  width: auto !important;
  align-self: center;
  background: none !important;
  border: none !important;
  backdrop-filter: none !important;
  padding: .35rem 0 0 !important;
  font-size: 16px !important;
  justify-content: center;
}

/* ---------- 3. About ---------- */
.about-eyebrow { font-size: 14px !important; }
.about p, .about-text p { font-size: 16px !important; }
.feat-text strong { font-size: 17px !important; }
.feat-text p, .feat-text span { font-size: 16px !important; line-height: 1.55 !important; }
.about-img img { height: 260px !important; object-position: center 35%; }
figcaption { font-size: 15px !important; }

/* ---------- 4. Swipe rows (homepage treatments, "Complete your visit") ---------- */
.treatments { padding: 3rem 0 2.5rem !important; }
.treatments-header { padding: 0 1.5rem; margin-bottom: 1.25rem !important; }
.treatments-header h2 { font-size: 1.75rem !important; }
.treatments-header p { font-size: 16px !important; }

.treatments-grid,
.related-grid {
  display: grid !important;
  grid-template-columns: none !important;
  grid-auto-flow: column;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: .75rem !important;
}
.treatments-grid::-webkit-scrollbar,
.related-grid::-webkit-scrollbar { display: none; }

/* treatments: ~2.3 cards visible so the next one peeks in */
.treatments-grid {
  grid-auto-columns: 42%;
  padding: .25rem 1.5rem 1rem;
  scroll-padding-inline: 1.5rem;
}
.treatment-card {
  scroll-snap-align: start;
  padding: 1.5rem 1rem 1.25rem !important;
  box-shadow: 0 2px 10px rgba(26,35,50,.06);
}
.treatment-card-icon { width: 44px !important; height: 44px !important; margin-bottom: .8rem !important; }
.treatment-card h3 { font-size: 1.15rem !important; }
.treatment-card p { line-height: 1.45 !important; }
.treatment-card-arrow { margin-top: auto !important; padding-top: .75rem; }
/* cards scrolled off to the side shouldn't wait for the fade-in */
.treatments-grid .fade-in { opacity: 1 !important; transform: none !important; }

/* related cards are wordier: one big card + a peek */
.related { padding: 3rem 0 2.5rem !important; }
.related h2 { margin-bottom: 1.5rem !important; padding: 0 1.5rem; }
.related-grid {
  grid-auto-columns: 80%;
  padding: .25rem 1.5rem 1rem;
  scroll-padding-inline: 1.5rem;
}
.related-card { scroll-snap-align: start; padding: 1.5rem 1.35rem !important; }
.related-desc { font-size: 16px !important; }
.related-link { font-size: 14px !important; }

/* "Swipe" hint under each row */
.treatments-inner::after,
.related-inner::after {
  content: "Swipe for more  \2192";
  display: block;
  text-align: center;
  font-size: 14px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--coral);
  margin-top: .25rem;
}

/* ---------- 5. Treatment menu pages ---------- */
.service-page-header { padding: 2.75rem 1.5rem 2.5rem !important; }
.page-hero { padding: 3rem 1.5rem 3rem !important; }
.service-page-header h1 { font-size: 2.1rem !important; line-height: 1.15 !important; }
.service-page-header p { font-size: 17px !important; }
.service-page-item-info h3 { font-size: 17px !important; line-height: 1.35 !important; }
.service-page-desc { font-size: 16px !important; line-height: 1.5 !important; }
.service-page-duration { font-size: 16px !important; }
.service-page-note { font-size: 16px !important; line-height: 1.5 !important; }
.service-page-tag { font-size: 14px !important; }
.service-page-price, .service-page-saving { font-size: 16px !important; }
.btn-primary { font-size: 15px !important; }

/* ---------- 6. Shared sections ---------- */
.faq-eyebrow, .related-eyebrow, .eyebrow, .page-eyebrow,
.press-section-title, .article-meta { font-size: 14px !important; }
.faq-item summary { font-size: 17px !important; }
.faq-item p { font-size: 16px !important; }

.booking-cta p { font-size: 16px !important; }
.btn-cta-coral, .btn-cta-ghost, .btn-google, .map-load-btn, .gift-buy { font-size: 15px !important; }

/* reviews page */
.review-quote { font-size: 16px !important; }
.reviewer-name { font-size: 16px !important; }
.review-date, .review-avatar { font-size: 14px !important; }
.score-count { font-size: 16px !important; }

/* press */
.press-card-readmore, .article-back { font-size: 14px !important; }
time { font-size: 14px !important; }

/* ---------- 7. Footer: two columns instead of one long centred list ---------- */
footer { padding: 2.75rem 1.5rem .75rem !important; }
.footer-top { gap: 1.25rem !important; margin-bottom: 1.5rem !important; }
.footer-socials { margin-top: 1rem !important; }
/* Footer fills the screen above the Call/Book bar, so scrolling to the very
   bottom always lands with the fixed header sitting exactly on the footer's
   wave band (same height, same logo). Spacing below is kept tight so the
   footer fits on most phones. */
footer {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 72px - env(safe-area-inset-bottom, 0px));
}
@supports (height: 100dvh) {
  footer { min-height: calc(100dvh - 72px - env(safe-area-inset-bottom, 0px)); }
}
.footer-bottom { margin-top: auto; }
.footer-brand-text small { font-size: 15px !important; }
.footer-socials a { width: 46px; height: 46px; }

.footer-cols {
  grid-template-columns: 1fr 1fr !important;
  gap: 1.25rem !important;
  text-align: left !important;
  border-top: 1px solid rgba(248,245,240,.12);
  padding-top: 1.25rem;
}
.footer-col-heading { font-size: 14px !important; text-align: left !important; margin-bottom: .9rem !important; }
.footer-links { align-items: flex-start !important; gap: .15rem !important; }
.footer-links a { font-size: 16px !important; padding: .22rem 0; color: rgba(248,245,240,.92) !important; }
.footer-hours ul { align-items: stretch !important; }
.footer-hours li {
  justify-content: space-between !important;
  gap: .5rem !important;
  font-size: 16px !important;
  padding: .18rem 0;
  color: rgba(248,245,240,.9);
}
.footer-hours li span:first-child,
.footer-hours li span:last-child { min-width: 0 !important; text-align: left !important; }
.footer-hours li span:first-child { font-weight: 600; }

.footer-bottom {
  gap: .6rem !important;
  border-top: 1px solid rgba(248,245,240,.12);
  padding-top: 1.1rem;
  font-size: 14px !important;
  color: rgba(248,245,240,.75);
}
.footer-bottom span { font-size: 14px !important; }
/* phone + email are already the first two icons above */
.footer-bottom > span:nth-child(2),
.footer-bottom > span:nth-child(3) { display: none; }
.footer-bottom a, .footer-bottom button {
  font-size: 15px !important;
  color: rgba(248,245,240,.8) !important;
  padding: .35rem 0 !important;
}

/* ---------- 8. Narrow phones (≤ 380px) ---------- */
@media (max-width: 380px) {
  .strip { gap: .4rem .35rem; padding: .5rem .5rem .6rem !important; }
  .strip > span:nth-child(1) a::after,
  .strip > span:nth-child(4) a::after,
  .strip > span:nth-child(5) a::after { font-size: 14px; }
  .strip > span:nth-child(5) svg { display: none; }
  .hero h1 { font-size: 2.05rem !important; }
  .treatments-grid { grid-auto-columns: 46%; }
  /* two footer columns fit fine down to 360px, so keep them */
}

/* ---------- 9. Remaining page-specific text below 16px ---------- */
.gift-intro p, .gift-sending-inner p, .gift-step p, .gift-value-card p,
.gift-values-sub, .gift-expiry-note,
.google-brand-text p, .page-hero-content p, .policy-section p, .policy-section li,
.score-desc p, .visit-map-header p, .map-placeholder p { font-size: 16px !important; }
.google-rating-pill span { font-size: 14px !important; }
.treatment-card p { font-size: 16px !important; }
.nav-links li:not(.nav-book-li) a { font-size: 15px !important; }
.nav-links .nav-book-li a { font-size: 15px !important; }

/* ---------- 10. Sticky Call + Book bar (always on screen) ---------- */
.mobile-action-bar {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .6rem;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9000;
  padding: .65rem 12px calc(.65rem + env(safe-area-inset-bottom, 0px));
  background: rgba(248,245,240,.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(26,35,50,.1);
  box-shadow: 0 -4px 18px rgba(26,35,50,.08);
}
/* tuck it away while the menu drawer is open */
nav.nav-open ~ .mobile-action-bar { display: none; }
.mobile-action-bar a {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 50px;
  border-radius: 2rem;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}
.mab-call {
  padding: 0 1.4rem;
  background: transparent;
  color: var(--navy, #1a2332) !important;
  border: 2px solid var(--navy, #1a2332);
}
.mab-book {
  padding: 0 1rem;
  background: var(--coral, #c97a6b);
  color: var(--navy, #1a2332) !important;
  border: 2px solid var(--coral, #c97a6b);
}
/* leave room at the bottom of every page so the bar never covers content */
body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)) !important; }
@media (max-width: 380px) {
  .mobile-action-bar a { font-size: 14px; letter-spacing: .05em; }
  .mab-call { padding: 0 1rem; }
}

/* ---------- 11. AI chat assistant: not shown on phones ---------- */
#bbx-ai { display: none !important; }

/* ---------- 12. Header Book Now removed — the sticky bar does that job ---------- */
.mobile-book-btn { display: none !important; }

/* ---------- 13. Treatment menu options + prices ---------- */
.service-page-item { flex-direction: row !important; gap: 12px !important; }
.service-page-price { font-size: 17px !important; }
.service-page-price-group { text-align: right !important; }
.service-page-saving { font-size: 14px !important; }
.service-variant-name { font-size: 16px !important; }
.service-variants { padding-left: 12px; }

/* ---------- 14. Compact treatment menus ---------- */
.service-page-desc { font-size: 16px !important; font-style: normal !important; }
.service-option { column-gap: 12px; padding: 11px 0; }
.service-option-name { font-size: 16px; }
.service-option-desc { font-size: 15px; }
.service-option-time { font-size: 15px; }
.service-option-price { font-size: 17px; }
/* jump links: one swipeable row */
.menu-jump {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  margin: -4px -16px 20px;
  padding: 0 16px 4px;
}
.menu-jump::-webkit-scrollbar { display: none; }
.menu-jump a { font-size: 15px; padding: 9px 16px; }
.service-page-subheading { scroll-margin-top: 170px; }

/* ---------- 15. Wider menus on phones: one card edge-to-edge, not a card inside a padded box ---------- */
.service-page-content { padding: 0 !important; }
.service-page-list {
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 24px 20px !important;
}
.menu-jump { margin: -4px -20px 20px; padding: 0 20px 4px; }
.service-page-cta { padding: 0 20px; }
p.service-includes, p.service-option-desc { font-size: 15px; }
.service-summary-meta { font-size: 15px; }
.service-summary-icon { width: 36px; height: 36px; }

/* ---------- 16. Treatment-page booking block: full-width navy band ---------- */
.service-page-cta { border-radius: 0 !important; margin-top: 0 !important; padding: 2.75rem 20px 2.5rem !important; }
.service-page-cta .btn-primary { font-size: 15px !important; padding: 1rem 2rem !important; }
.service-page-cta p a { font-size: 15px !important; display: inline-block; padding: .35rem 0; }

/* ---------- 17. Meet the Team ---------- */
.team-section { padding: 2rem 16px 3rem !important; }
.team-grid { grid-template-columns: 1fr !important; gap: 1rem !important; }
/* photo + name side by side, then bio, tags and button full width */
.team-card {
  display: grid;
  grid-template-columns: 92px 1fr;
  column-gap: 16px;
  align-items: center;
  padding: 18px 18px 20px;
}
.team-card img { grid-row: 1 / span 3; width: 92px; height: 92px; border-radius: 50%; }
.team-card-body { display: contents; }
.team-card h2 { grid-column: 2; font-size: 1.4rem; align-self: end; }
.team-role { grid-column: 2; font-size: 13px; }
.team-rating { grid-column: 2; font-size: 15px; align-self: start; margin-top: .25rem; }
.team-bio, .team-tags, .team-book { grid-column: 1 / -1; }
.team-bio { font-size: 16px; margin-top: 14px; }
.team-tags { margin-top: 12px; }
.team-tags li { font-size: 14px; }
.team-card-body .team-tags { margin-bottom: 16px; }
.team-book { font-size: 14px; padding: .8rem 1.3rem; justify-self: start; }
.team-note { font-size: 16px; }
.team-card img { border-bottom: none !important; box-shadow: 0 0 0 1px var(--sand, #ede6dc), 0 0 0 5px var(--cream); }
/* sharper photo ring: thin white gap + crisp coral line */
.team-card img { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--coral) !important; }
.team-book { justify-self: start; align-self: auto; padding: .8rem 1.3rem !important; font-size: 14px !important; }

/* header docked into the footer (script.js): keep the hidden info strip fully out of sight */
.nav-docked .strip { visibility: hidden; }