/* =========================================================================
   GulfRabit · Content module (about, contact, faq, shipping-returns, 404)
   ========================================================================= */
.prose { max-width: 72ch; }
.prose h2 { margin-top: var(--space-7); margin-bottom: var(--space-3); }
.prose h3 { margin-top: var(--space-5); margin-bottom: var(--space-2); }
.prose p, .prose li { color: var(--text-secondary); }
.prose ul { padding-left: 1.25rem; margin: var(--space-3) 0; }
.prose li { margin-bottom: var(--space-2); }

/* About */
.about-hero { position: relative; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-hairline); padding: clamp(2.5rem, 6vw, 5rem); background: linear-gradient(90deg, rgba(255,255,255,.97), rgba(255,255,255,.82)), url("../../assets/images/hero/hero-food.svg") center/cover; }
.values-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 768px) { .values-grid { grid-template-columns: repeat(3, 1fr); } }
.value-card { padding: var(--space-5); }
.value-card__icon { width: 40px; height: 40px; color: var(--link); margin-bottom: var(--space-3); }

/* Contact */
.contact-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.2fr 1fr; align-items: start; } }
.contact-channel { display: flex; gap: var(--space-3); padding: var(--space-4) 0; border-bottom: 1px solid var(--border-hairline); }
.contact-channel__icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--surface-sunken); display: grid; place-items: center; color: var(--link); flex-shrink: 0; }
.map-placeholder { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-hairline); background: linear-gradient(135deg, var(--surface-sunken), var(--surface-raised)); min-height: 220px; display: grid; place-items: center; color: var(--text-muted); }

/* FAQ accordion */
.faq-item { border-bottom: 1px solid var(--border-hairline); }
.faq-q { width: 100%; text-align: left; background: none; border: 0; color: var(--text-primary); font-size: var(--fs-20); font-weight: var(--fw-medium); padding: var(--space-5) 0; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); cursor: pointer; }
.faq-q__icon { transition: transform var(--dur-base) var(--ease-out); flex-shrink: 0; }
.faq-q[aria-expanded="true"] .faq-q__icon { transform: rotate(45deg); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height var(--dur-slow) var(--ease-out); }
.faq-a__inner { padding-bottom: var(--space-5); color: var(--text-secondary); max-width: 68ch; }

/* 404 */
.notfound { text-align: center; padding: var(--space-9) var(--space-4); }
.notfound__code { font-family: var(--font-display); font-size: clamp(5rem, 18vw, 11rem); line-height: 1; background: var(--gr-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ---- Policy tables (refund timelines, delivery zones) -----------------
   Wrapped in .table-scroll so a 3-column table scrolls inside its own box
   at 375px instead of widening the document. */
.table-scroll { overflow-x: auto; margin: var(--space-4) 0; }
.policy-table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: var(--fs-14); }
.policy-table th, .policy-table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-hairline); vertical-align: top; }
.policy-table thead th { color: var(--text-muted); font-weight: var(--fw-semibold); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.policy-table tbody th { font-weight: var(--fw-semibold); color: var(--text-primary); white-space: nowrap; }
.policy-table td { color: var(--text-secondary); }
.policy-table td:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Under ~560px a 3-column policy table can only scroll sideways, which buries
   the last column — and on a refund table that column IS the answer. Stack each
   row into a labelled block instead so nothing needs scrolling to be read. */
@media (max-width: 560px) {
  .table-scroll { overflow-x: visible; }
  .policy-table { min-width: 0; }
  .policy-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .policy-table tr { display: block; padding: var(--space-4) 0; border-bottom: 1px solid var(--border-hairline); }
  .policy-table tbody tr:last-child { border-bottom: 0; }
  .policy-table th, .policy-table td { display: block; border: 0; padding: 0; white-space: normal; }
  .policy-table tbody th { font-size: var(--fs-16); margin-bottom: var(--space-2); }
  .policy-table td { margin-top: var(--space-1); }
  .policy-table td::before { content: attr(data-label) ": "; color: var(--text-muted); }
  .policy-table td:last-child { white-space: normal; }
}

/* ---- Sourcing page ----------------------------------------------------
   The last column here is prose, not a charge, so it must be allowed to wrap.
   .policy-table's default nowrap on the last cell exists for the refund and
   delivery tables, where that column is a single figure. */
.policy-table--prose td:last-child { white-space: normal; font-variant-numeric: normal; }

/* Counted facts. Deliberately reads as "44 of 44", not as a marketing stat —
   the fraction is what makes it checkable. */
.fact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-4);
}
.fact {
  padding: var(--space-5);
  background: var(--surface-sunken);
  border: 1px solid var(--gr-border);
  border-radius: var(--radius-lg);
}
.fact__n {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-31);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}
.fact__l {
  display: block;
  margin-top: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
}

/* Numbered process. An <ol> because the order is the meaning — step 4 is only
   possible because step 1 happened. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.steps__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5);
}
.steps__n {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gr-gradient);
  color: var(--text-on-accent);
  font-weight: var(--fw-bold);
  font-size: var(--fs-16);
}
.steps__item p { margin: var(--space-2) 0 0; color: var(--text-secondary); line-height: var(--lh-normal); }

.limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--space-4); }
.limit { padding: var(--space-5); }
.limit p { margin: var(--space-2) 0 0; color: var(--text-secondary); line-height: var(--lh-normal); }

/* The barcode myth box. Set apart from the instruction above it because it
   corrects the reader rather than instructing them. */
.caveat {
  margin-top: var(--space-5);
  padding: var(--space-5);
  border-left: 3px solid var(--gr-cyan);
  max-width: 68ch;
}
.caveat p { margin: var(--space-2) 0 0; color: var(--text-secondary); line-height: var(--lh-normal); }

@media (max-width: 575.98px) {
  .steps__item, .limit, .fact { padding: var(--space-4); }
}