/* ===========================================================================
   PumkinGrey — Contact / policies page.

   Ported from the Claude Design shop-refresh project the rest of the storefront
   already runs on: tokens and app shell from design/shop/shop.css, the form
   field and submit anatomy from design/shop/checkout.css (the closest sibling —
   it is the other page on the site that is mostly one form), the two-column
   rail-and-content layout from the /Shop filters layout.

   Values are lifted from those files rather than re-derived: 1.5px field
   borders, 10px field radius, 15px field text, 100px pill buttons, the
   264px rail. Nothing here is snapped to a 4/8px grid.

   Scoped under .pg-contact so it cannot collide with the Bootstrap 4 that still
   dresses the rest of this page's prose.
   =========================================================================== */

.pg-contact {
  --ink:    #161514;
  --paper:  #FBFAF7;
  --surface:#FFFFFF;
  --line:   #ECE9E3;
  --line-2: #E2DED6;
  --muted:  #8A857C;
  --muted-2:#B6B1A8;
  --teal:   #00B0BA;
  --yellow: #F4B400;
  --sale:   #D6443B;
  --accent: var(--teal);
  --accent-ink: #fff;
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;
  --radius: 12px;
  --radius-sm: 8px;

  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  text-align: left;   /* the site-wide body{text-align:center} leaks in */
}
.pg-contact * { box-sizing: border-box; }
.pg-contact a { color: inherit; text-decoration: none; }
.pg-contact button { font-family: inherit; cursor: pointer; }
.pg-contact img { display: block; max-width: 100%; }

/* ---------------------------------------------------------------- head ---- */
/* Same centred column and 48px gutters as .home__section and the /Shop layout,
   so all three pages start at one left edge. */
.pg-contact .contact__head { max-width: 1400px; margin: 0 auto; padding: 30px 48px 8px; }
.pg-contact .contact__crumbs {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .14em;
  font-size: 11px; color: var(--muted); margin-bottom: 12px;
}
.pg-contact .contact__crumbs a:hover { color: var(--ink); }
.pg-contact .contact__head h1 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.02em;
  font-size: clamp(34px, 6vw, 64px); line-height: .98; margin: 0; color: var(--ink);
}
.pg-contact .contact__head .sub {
  color: var(--muted); margin: 10px 0 0; max-width: min(52ch, 100%); font-size: 15px;
}

/* -------------------------------------------------------------- layout ---- */
.pg-contact .contact__layout {
  max-width: 1400px; margin: 0 auto; padding: 8px 48px 60px;
  display: grid; grid-template-columns: 264px 1fr; gap: 0; align-items: start;
}

/* ---------------------------------------------------------------- rail ---- */
/* The section switcher. These are submit buttons, not links — the page has
   always been driven by POST — so they are dressed as nav rows rather than
   left looking like Bootstrap's blue btn-link. */
.pg-contact .contact__rail { position: sticky; top: 12px; padding-right: 26px; }
.pg-contact .contact__rail h4 {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .12em;
  font-size: 12px; color: var(--muted); margin: 0 0 14px;
}
.pg-contact .contact__rail form { margin: 0; }
.pg-contact .contact__rail__item {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; border: 0; border-top: 1px solid var(--line); background: none;
  padding: 14px 0; text-align: left; color: var(--muted);
  font-family: var(--font-display); font-size: 15px;
  transition: color .15s;
}
.pg-contact .contact__rail__item:first-of-type { border-top: 0; }
.pg-contact .contact__rail__item:hover { color: var(--ink); }
.pg-contact .contact__rail__item .chev { color: var(--muted-2); flex: none; transition: transform .15s; }
.pg-contact .contact__rail__item:hover .chev { transform: translateX(2px); }
.pg-contact .contact__rail__item.is-active { color: var(--ink); font-weight: 500; }
.pg-contact .contact__rail__item.is-active .chev { color: var(--accent); }

/* -------------------------------------------------------------- content --- */
.pg-contact .contact__content { min-width: 0; }
.pg-contact .contact__content > h2 {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(22px, 2.6vw, 30px); margin: 0 0 24px; color: var(--ink);
}

/* The policy prose. Long-form legal copy that was rendering as one unbroken
   Bootstrap paragraph — the only job here is line length and rhythm. */
.pg-contact .contact__prose {
  max-width: 74ch; color: var(--ink); font-size: 15px; line-height: 1.75;
}
.pg-contact .contact__prose p { margin: 0 0 4px; }
.pg-contact .contact__prose strong { font-weight: 600; }
.pg-contact .contact__prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.pg-contact .contact__prose a:hover { color: var(--ink); }

/* ------------------------------------------------------------------ faq --- */
.pg-contact .contact__faq { max-width: 74ch; border-top: 1px solid var(--line); }
.pg-contact .contact__faq .card { border: 0; border-radius: 0; background: none; border-bottom: 1px solid var(--line); }
.pg-contact .contact__faq .card-header { background: none; border: 0; padding: 0; }
.pg-contact .contact__faq .card-header h5 { margin: 0; }
.pg-contact .contact__faq .btn-link {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px 0; text-align: left; text-decoration: none; white-space: normal;
  font-family: var(--font-display); font-size: 16px; font-weight: 500; color: var(--ink);
  text-transform: none; letter-spacing: 0;
}
.pg-contact .contact__faq .btn-link:hover,
.pg-contact .contact__faq .btn-link:focus { color: var(--accent); text-decoration: none; box-shadow: none; }
.pg-contact .contact__faq .card-body { padding: 0 0 20px; color: var(--muted); font-size: 15px; line-height: 1.7; }

/* ----------------------------------------------------------------- form --- */
/* Anatomy lifted from design/shop/checkout.css — the same field a customer
   already meets at checkout, so the two do not feel like different sites. */
/* No max-width: this block and .contact__details sit under .contact__about and
   must share its right edge. 74ch is a READING measure — it earns its place on
   the policy prose and the FAQ, where line length is the point, and nowhere
   else. Capping a card row and a form at it left both stopping short of the
   panel above them, which read as a layout fault rather than as a measure. */
/* No max-width: this block and .contact__details sit under .contact__about and
   must share its right edge. 74ch is a READING measure — it earns its place on
   the policy prose and the FAQ, where line length is the point, and nowhere
   else. */
.pg-contact .contact__panel {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 32px; margin-top: 40px;
}
.pg-contact .contact__panel h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 22px;
  letter-spacing: -.01em; margin: 0 0 6px;
}
.pg-contact .contact__panel .lede { color: var(--muted); font-size: 14px; margin: 0 0 26px; }

.pg-contact .contact__row {  display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pg-contact .contact__field { margin-bottom: 18px; }
.pg-contact .contact__field label {
  display: block; font-family: var(--font-mono); text-transform: uppercase;
  letter-spacing: .08em; font-size: 11px; color: var(--muted); margin-bottom: 8px;
}
.pg-contact .contact__field input,
.pg-contact .contact__field textarea {
  width: 100%; border: 1.5px solid var(--line-2); border-radius: 10px; padding: 15px 16px;
  font-family: var(--font-display); font-size: 15px; background: var(--surface);
  color: var(--ink); outline: none; transition: border-color .15s;
}
.pg-contact .contact__field textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.pg-contact .contact__field input:focus,
.pg-contact .contact__field textarea:focus { border-color: var(--accent); }
.pg-contact .contact__field input::placeholder,
.pg-contact .contact__field textarea::placeholder { color: var(--muted-2); }

.pg-contact .contact__submit {
  width: 100%; border: 0; border-radius: 100px; padding: 16px; margin-top: 8px;
  background: var(--ink); color: var(--paper); font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: .1em; font-size: 13px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .15s, color .15s;
}
.pg-contact .contact__submit:hover { background: var(--accent); color: var(--accent-ink); }

/* Status messages. Same two states the checkout field uses — accent for good
   news, --sale for a problem — rather than Bootstrap's alert palette. */
.pg-contact .contact__status {
  border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 22px;
  font-size: 14px; line-height: 1.5;
}
.pg-contact .contact__status--ok {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); color: var(--ink);
}
.pg-contact .contact__status--bad {
  background: color-mix(in srgb, var(--sale) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--sale) 36%, transparent); color: var(--ink);
}
.pg-contact .contact__status div + div { margin-top: 4px; }

/* ---------------------------------------------------------------- about --- */
/* The dark panel is the same object as the banner on /Home and /Shop: --ink
   ground, --yellow eyebrow, 12px radius. */
.pg-contact .contact__about {
  background: var(--ink); color: var(--paper); border-radius: var(--radius);
  padding: 40px; margin-bottom: 28px;
}
.pg-contact .contact__about h2 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(22px, 2.6vw, 30px);
  letter-spacing: -.01em; margin: 0 0 4px;
}
.pg-contact .contact__about .ey {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .16em;
  font-size: 11px; color: var(--yellow); display: block; margin-bottom: 10px;
}
.pg-contact .contact__about__grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin-top: 28px;
}
.pg-contact .contact__about__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pg-contact .contact__about__grid h6 {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em;
  font-size: 11px; color: var(--paper); margin: 12px 0 8px;
}
.pg-contact .contact__about__grid p {
  margin: 0; font-size: 14px; line-height: 1.6; color: rgba(251, 250, 247, .72);
}
.pg-contact .contact__about__grid svg { color: var(--yellow); }
.pg-contact .contact__about hr {
  border: 0; border-top: 1px solid rgba(251, 250, 247, .18); margin: 34px 0 0;
}

/* Address / phone / email, as three cards on the paper ground. */
.pg-contact .contact__details {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.pg-contact .contact__details > div { background: var(--surface); padding: 22px; }
.pg-contact .contact__details h6 {
  font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .1em;
  font-size: 11px; color: var(--muted); margin: 10px 0 8px;
}
.pg-contact .contact__details p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--ink); }
/* .contact__details is a hairline grid drawn with gap:1px over a --line ground,
   which needs overflow:hidden to keep the corners inside the radius. That makes
   anything too wide CLIPPED rather than merely overflowing — an email address
   silently losing its domain. These two lines are what stop that: break the long
   token instead. Applied to the prose too, where the privacy copy carries a URL. */
.pg-contact .contact__details p,
.pg-contact .contact__details a,
.pg-contact .contact__prose { overflow-wrap: anywhere; }
.pg-contact .contact__details a:hover { color: var(--accent); }
.pg-contact .contact__details svg { color: var(--muted-2); }

/* ----------------------------------------------------------- responsive --- */
@media (max-width: 900px) {
  .pg-contact .contact__layout { grid-template-columns: 1fr; padding: 8px 48px 80px; }
  /* Stacked, the rail is a scrollable row of chips above the content rather
     than a column of full-width rows. */
  .pg-contact .contact__rail { position: static; padding-right: 0; margin-bottom: 28px; }
  /* WRAPS rather than scrolls. This was a single overflow-x row with
     scrollbar-width:none and the webkit scrollbar hidden — five chips needing
     roughly 630px in about 340px of phone, with every affordance that they
     scrolled deliberately removed. Privacy Policy and About Us were therefore
     off the right edge and undiscoverable: nearly half the page's navigation,
     invisible, on the layout most people use. Wrapping to two or three short
     rows costs a few pixels of height and makes all five reachable. */
  .pg-contact .contact__rail form { display: flex; flex-wrap: wrap; gap: 8px; }
  .pg-contact .contact__rail__item {
    width: auto; flex: none; border-top: 0; border: 1px solid var(--line-2);
    border-radius: 100px; padding: 9px 16px; font-size: 13.5px; white-space: nowrap;
  }
  .pg-contact .contact__rail__item.is-active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .pg-contact .contact__rail__item .chev { display: none; }
  .pg-contact .contact__about__grid,
  .pg-contact .contact__about__grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pg-contact .contact__head { padding-left: 24px; padding-right: 24px; }
  .pg-contact .contact__layout { padding-left: 24px; padding-right: 24px; }
  .pg-contact .contact__row { grid-template-columns: 1fr; gap: 0; }
  .pg-contact .contact__panel { padding: 22px; }
  .pg-contact .contact__about { padding: 26px; }
  .pg-contact .contact__about__grid,
  .pg-contact .contact__about__grid--4 { grid-template-columns: 1fr; gap: 20px; }
  .pg-contact .contact__details { grid-template-columns: 1fr; }
}

/* Below 520px the 720px rules are still tablet-sized: 24px gutters and 22-26px
   card padding leave a 390px phone about 268px of usable line. These reclaim
   roughly 30px of width — enough for a price, a date or a postal code to stop
   wrapping onto its own line. */
@media (max-width: 520px) {
  .pg-contact .contact__head   { padding-left: 16px; padding-right: 16px; }
  .pg-contact .contact__layout { padding-left: 16px; padding-right: 16px; }
  .pg-contact .contact__panel  { padding: 20px 18px; }
  .pg-contact .contact__about  { padding: 24px 20px; }
  .pg-contact .contact__details > div { padding: 18px; }

  /* Chips get their own line-height rather than the desktop 15px, so a wrapped
     rail stays compact instead of becoming a stack of tall pills. */
  .pg-contact .contact__rail__item { padding: 8px 13px; font-size: 13px; }

  /* line-height .98 on a heading that now wraps to two lines had the descenders
     of the first line touching the caps of the second. */
  .pg-contact .contact__head h1 { line-height: 1.06; }
}

/* --------------------------------------------------------------- legal --- */
/* The Terms, Privacy Notice and Return Policy render from includes/legal/.
   They were previously one <p> per document with <br><br> between paragraphs
   and "-" characters standing in for bullets, so nothing could be scanned or
   linked to. These rules dress the real headings and lists that replaced it. */
.pg-contact .contact__legal { max-width: 74ch; }
.pg-contact .contact__legal__meta {
  font-family: var(--font-mono); font-size: 11.5px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); border-bottom: 1px solid var(--line);
  padding-bottom: 14px; margin-bottom: 22px;
}
.pg-contact .contact__legal h3 {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  letter-spacing: -.01em; color: var(--ink); margin: 30px 0 10px;
  padding-top: 18px; border-top: 1px solid var(--line);
}
.pg-contact .contact__legal h3:first-of-type { border-top: 0; padding-top: 0; margin-top: 22px; }
.pg-contact .contact__legal p { margin: 0 0 14px; }
.pg-contact .contact__legal ul,
.pg-contact .contact__legal ol { margin: 0 0 16px; padding-left: 22px; }
.pg-contact .contact__legal li { margin-bottom: 8px; line-height: 1.7; }
.pg-contact .contact__legal li::marker { color: var(--muted-2); }
.pg-contact .contact__legal strong { font-weight: 600; }
.pg-contact .contact__legal em { color: var(--muted); font-style: normal; font-size: 13.5px; }
.pg-contact .contact__legal code {
  font-family: var(--font-mono); font-size: 12.5px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px;
}