/* =========================================================
   PAGES — additions for the content pages (views/pages/*).
   theme.css already holds most of their styles (LEGAL & INFO,
   CONTENT PAGES). Only what's missing lives here, prefixed .gf-pg-.
   Neutral tokens only; logical properties so RTL works.
   ========================================================= */

/* ── Back link: arrow points the other way ──────────────── */
.gf-pg-back,
.gf-pg-journal .gf-more-back { flex-direction: row-reverse; }
.gf-pg-back::after,
.gf-pg-journal .gf-more-back::after {
  margin-inline-start: 0;
  margin-inline-end: .3em;
  transform: translateX(1px) rotate(-135deg);
}
[dir="rtl"] .gf-pg-back::after,
[dir="rtl"] .gf-pg-journal .gf-more-back::after { transform: translateX(-1px) rotate(135deg); }
@media (hover: hover) and (pointer: fine) {
  .gf-pg-back:hover::after,
  .gf-pg-journal .gf-more-back:hover::after { transform: translateX(-2px) rotate(-135deg); }
  [dir="rtl"] .gf-pg-back:hover::after,
  [dir="rtl"] .gf-pg-journal .gf-more-back:hover::after { transform: translateX(2px) rotate(135deg); }
}

/* ── Journal: consistent media in grid cards ────────────── */
.gf-post-media :where(img, .gf-ph) {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.gf-post-media :where(img) { display: block; }
.gf-post h3 { font-size: 21px; letter-spacing: -.018em; line-height: 1.25; }
.gf-post-body h2,
.gf-post-body h3 { overflow-wrap: anywhere; }
.gf-prose { overflow-wrap: break-word; }
.gf-crumbs [aria-current] { max-width: min(40ch, 100%); }

/* ── Shipping: large figures in the cost cards ──────────── */
.gf-pg-figure {
  font-size: clamp(32px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.gf-lg-region h3 { font-size: 19px; letter-spacing: -.016em; margin-bottom: 2px; }
.gf-lg-head p { margin-top: 8px; color: var(--muted); font-size: 17px; }
.gf-lg-block.gf-panel h2 { margin-bottom: 8px; }

/* ── Returns: start-a-return panel ──────────────────────── */
.gf-pg-return-box h2 { margin-bottom: 8px; }
.gf-pg-return-box p { color: var(--muted); font-size: 15px; overflow-wrap: anywhere; }
.gf-pg-return-box p a { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; }
.gf-pg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 20px; }

/* ── Help: filtered tiles and result links ──────────────── */
.gf-help-card[hidden],
.gf-help-popular-item[hidden] { display: none; }
/* Native clear button is blue in some browsers — keep it neutral */
.gf-help-search input::-webkit-search-cancel-button,
.gf-empty .gf-searchbar input::-webkit-search-cancel-button { filter: grayscale(1); }
.gf-help-results-note a { text-decoration: underline; text-underline-offset: .18em; }
@media (max-width: 480px) {
  .gf-searchbar-lg { min-height: 56px; }
  .gf-searchbar-lg input { font-size: 17px; min-width: 0; }
}

/* ── FAQ: deep-linked answers clear the sticky header ───── */
.gf-lg-cat .gf-accordion-item { scroll-margin-top: calc(var(--nav-h, 64px) + 24px); }

/* ── Testimonials ───────────────────────────────────────── */
.gf-pg-cta-gap { margin-top: clamp(56px, 8vw, 96px); }
.gf-testi-card blockquote { overflow-wrap: anywhere; }

/* ── Small screens ──────────────────────────────────────── */
@media (max-width: 480px) {
  .gf-lg-actions .gf-btn { flex: 1 1 auto; justify-content: center; }
}

/* Help centre icons: SF Symbols-style line icons in a soft tile */
.gf-help-card-icon { width: 48px; height: 48px; border-radius: 14px; margin-bottom: 18px; box-shadow: var(--shadow-sm); }
.gf-help-card-icon svg { width: 26px; height: 26px; }

/* Contact: both columns end on the same line, and the details card uses the same
   corners and inner margins as the panels around it */
.gf-contact-split { align-items: stretch; }
.gf-contact-split > .gf-panel { height: 100%; }
.gf-contact-aside .gf-rows { border-radius: var(--r-xl); padding-block: clamp(6px, 1vw, 12px); }
.gf-contact-aside .gf-row { padding-inline: clamp(24px, 3vw, 40px); }
.gf-contact-aside .gf-row + .gf-row::before { inset-inline: clamp(24px, 3vw, 40px); }
.gf-contact-aside > .gf-panel { flex: 1; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 900px) { .gf-contact-split > .gf-panel { height: auto; } }
/* The message box grows to fill the panel, so "Send message" sits at the bottom, level with the right column */
.gf-contact-split > .gf-panel { display: flex; flex-direction: column; }
.gf-contact-split #gf-contact-form { flex: 1; display: flex; flex-direction: column; gap: 16px; }
.gf-contact-split #gf-contact-form .gf-field:has(textarea) { flex: 1; }
.gf-contact-split #gf-contact-form textarea { flex: 1; min-height: 140px; }
@media (max-width: 900px) { .gf-contact-split #gf-contact-form .gf-field:has(textarea), .gf-contact-split #gf-contact-form textarea { flex: none; } }
.gf-contact-split #gf-contact-form > .gf-btn { align-self: flex-start; }
.gf-pg-figure.gf-pg-figure-sm { font-size: 20px; line-height: 1.25; letter-spacing: -.01em; }