/* ==========================================================================
   /size-guide — every published measurement chart, in two halves.

   The charts themselves are not styled here. .size-guide-table, .size-guide-how and .table-scroll
   are in storefront.css because the product page's overlay renders the same fragment, and a chart
   that looked one way in a modal and another way on this page would be two charts.

   What is here is the page around them: the contents list, the two group headings, and the state
   a system is in when it has sizes but nobody has published the numbers yet.
   ========================================================================== */

/* Matching cart.css and page.css, which each carry their own copy of the heading block. */
.page-head{ padding:44px 0 8px; }
.page-head h1{ font-size:var(--type-2xl); margin-top:8px; }
@media(max-width:768px){ .page-head h1{ font-size:var(--type-xl); } }

.page-lede{
  margin:12px 0 0; max-width:60ch; color:var(--text-secondary);
  font-size:var(--type-md); line-height:1.7;
}

/* ============ The contents list ============
   A page of charts is one people arrive at halfway down, from a footer link or a search result. */

.guide-jump{
  display:flex; flex-wrap:wrap; gap:8px;
  margin:28px 0 8px; padding:0 0 28px; border-bottom:1px solid var(--border);
}
.guide-jump a{
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--border); border-radius:999px; padding:8px 15px;
  font-size:var(--type-sm); font-weight:600; color:var(--text-heading);
  background:var(--surface-raised);
}
.guide-jump a:hover{ border-color:var(--border-accent); color:var(--text-accent); }

/* ============ The two halves ============ */

.guide-group{ margin-top:48px; }
.guide-group h2{ font-size:var(--type-xl); margin:0; }
.guide-group-blurb{
  margin:6px 0 0; max-width:58ch; color:var(--text-muted);
  font-size:var(--type-sm); line-height:1.7;
}

.guide{ margin-top:32px; }
.guide h3{ font-size:var(--type-lg); margin:0 0 12px; }

/* ============ Sizes, but no measurements ============
   Deliberately not an empty grid. The product page will not open a modal onto one and this page
   will not print one either, so what is left is the two things the shop does know: what the sizes
   are called, and where to put the tape. */

.guide-pending{
  background:var(--surface-sunken); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:18px 20px;
}
.guide-pending-note{ margin:0; color:var(--text-secondary); font-size:var(--type-sm); line-height:1.7; }

.guide-words{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; padding:0; list-style:none; }
.guide-words li{
  border:1.5px solid var(--border); border-radius:999px; padding:6px 14px;
  font-size:var(--type-sm); font-weight:600; color:var(--text-heading);
  background:var(--surface-raised);
}

/* ============ Nothing to show, and the way out ============ */

.guide-empty{
  margin:20px 0 0; color:var(--text-muted); font-size:var(--type-sm); line-height:1.7;
}
.guide-empty a{ color:var(--text-accent); font-weight:600; }

.guide-help{
  margin:56px 0 0; padding:20px 22px;
  background:var(--surface-sunken); border:1px solid var(--border); border-radius:var(--radius-md);
  color:var(--text-secondary); font-size:var(--type-sm); line-height:1.7;
}
.guide-help a{ color:var(--text-accent); font-weight:600; }

/* ============ Phone ============
   The charts scroll sideways on their own — that rule is in storefront.css with the table. What
   changes here is only the space around them. */

@media(max-width:768px){
  .guide-group{ margin-top:36px; }
  .guide{ margin-top:24px; }
  .guide-help{ margin-top:40px; }
}

@media(pointer:coarse){
  /* Contents links are the one thing on this page anybody taps. */
  .guide-jump a{ min-height:44px; }
}