/* ==========================================================================
   MAHIRA SELECT - info.css
   The three information page templates: the policy documents, the FAQ and
   order tracking. Loaded by inc/enqueue.php only on those templates, after
   pages.css so it augments .ms-prose, .ms-callout and .ms-help rather than
   restating them.

   The three pages share a hero, a two column body with a sticky index, a
   related grid and a closing panel, so they share one stylesheet. Splitting
   them into three would repeat all of it.

   Scoping note: WooCommerce's own stylesheets are dequeued on all three
   templates (inc/performance.php drops them off any non WooCommerce screen),
   so the order tracking rules below are the only thing dressing that form and
   need no specificity padding. .ms-ipanel is deliberately not called
   .ms-panel: contact.css owns that name, and although the two sheets never
   load together, one name meaning two things is a trap for the next edit.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Breadcrumb band

   The trail gets a band of its own rather than floating on the page ground.
   Header, hero and body are all cream here, so a bare trail between them read
   as the document's first line; on sand it reads as a strip of chrome, and it
   is the one horizontal rule between the header and the title.

   The padding is deliberately asymmetric. The trail belongs to the header it
   hangs under, so it sits close to it, and the larger measure underneath gives
   the page title clean air to start on. Symmetric padding made the band look
   like a caption floating between two things it was not attached to.
   -------------------------------------------------------------------------- */
.ms-crumbbar{
  background:var(--ms-sand);
  border-bottom:var(--ms-hairline);
  padding-block:clamp(9px,1vw,13px) clamp(15px,1.8vw,23px);
}

/* ms_breadcrumb() carries its own vertical padding for the standalone bar on
   the old page template. Inside this band the band owns the spacing. */
.ms-crumbbar .ms-crumb{padding-block:0;}

.ms-crumbbar .ms-crumb a:hover{color:var(--ms-gold-ink);}

/* --------------------------------------------------------------------------
   2. Hero

   Compact, like the Contact page. These are pages a customer arrives at with
   a question already formed, so the headline, the standfirst and the start of
   the content all belong on the first screen. No photography: a policy is
   read, not browsed.

   From 1080px the band is two columns: the title block left, the document's
   own facts as a chip stack right. Before that the chips wrapped under a lead
   capped at 62ch and the hero stopped 800px short of the container, which on
   a 1600px frame read as a page that had failed to load its right hand side.
   -------------------------------------------------------------------------- */
.ms-ihero{
  padding-block:clamp(20px,2.4vw,32px) clamp(30px,3.4vw,46px);
  border-bottom:var(--ms-hairline);
  background:var(--ms-cream);
}

.ms-ihero__inner{display:grid;gap:clamp(20px,2.4vw,30px);}

@media (min-width:1080px){
  .ms-ihero__inner{
    grid-template-columns:minmax(0,1fr) auto;
    /* Bottom aligned, so the chip stack sits on the same baseline as the last
       line of the lead however many lines either side runs to. */
    align-items:end;
    gap:clamp(40px,5vw,90px);
  }
}

.ms-ihero__body{max-width:760px;}

.ms-ihero .ms-eyebrow{margin-bottom:14px;}

.ms-ihero__title{
  font-size:clamp(2rem,1.4rem + 2.6vw,3.5rem);
  line-height:1.04;
  letter-spacing:-.015em;
  margin:0;
}

.ms-ihero .ms-rule{margin:20px 0 18px;width:56px;}

.ms-ihero__lead{
  color:var(--ms-muted);
  font-size:var(--ms-fs-lead);
  font-weight:300;
  line-height:1.55;
  max-width:62ch;
  margin:0;
}

/* Meta chips. Small facts about the document itself, not about the brand. */
.ms-ihero__meta{
  display:flex;flex-wrap:wrap;gap:10px;
  list-style:none;margin:0;padding:0;
}

@media (min-width:1080px){
  .ms-ihero__meta{
    flex-direction:column;
    align-items:flex-end;
    gap:9px;
  }
}

.ms-chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;
  font-size:var(--ms-fs-xs);
  color:var(--ms-muted);
  background:var(--ms-surface);
  border:var(--ms-hairline);
  border-radius:999px;
}
.ms-chip svg{color:var(--ms-muted);flex:0 0 auto;}

/* The revision date is the one chip that has to be found at a glance. */
.ms-chip--gold{
  color:var(--ms-gold-ink);
  background:var(--ms-gold-soft);
  border-color:var(--ms-gold-line);
}
.ms-chip--gold svg{color:var(--ms-gold-ink);}

/* --------------------------------------------------------------------------
   3. Document body

   A sticky index beside the text from 1080px up. Below that the index becomes
   a panel above the content: a two column list rather than a disclosure
   widget, so it needs no script and cannot be left in a broken half state.
   -------------------------------------------------------------------------- */
.ms-idoc__main{padding-block:clamp(32px,4vw,60px) clamp(48px,6vw,88px);}

.ms-idoc__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(28px,3.5vw,56px);
}

@media (min-width:1080px){
  .ms-idoc__grid{
    grid-template-columns:284px minmax(0,1fr);
    align-items:start;
  }
}

/*
 * Three columns from 1400px, which is where the frame has the width for one.
 * A policy set across 1180px is unreadable, so the document keeps a reading
 * measure; the rail is what the leftover width becomes, instead of the 436px
 * of nothing that sat to the right of the text before. At 1920 the three
 * tracks resolve to 284 / 804 / 300, and 804px is the measure the document
 * wanted anyway.
 */
@media (min-width:1400px){
  .ms-idoc__grid{grid-template-columns:284px minmax(0,1fr) 300px;}
}

/*
 * The cap only bites between 1080 and 1400, where there is no third column to
 * absorb the surplus. Above that the middle track is already the right width
 * and this never applies.
 */
.ms-idoc__body{min-width:0;max-width:900px;}

/* --------------------------------------------------------------------------
   4. Table of contents
   -------------------------------------------------------------------------- */
.ms-toc{
  background:var(--ms-surface);
  border:var(--ms-hairline);
  padding:22px 22px 20px;
}

@media (min-width:1080px){
  .ms-toc{
    position:sticky;
    /* Clears the sticky header, plus a little air. */
    top:calc(var(--ms-header-h-compact) + 20px);
    max-height:calc(100vh - var(--ms-header-h-compact) - 48px);
    overflow-y:auto;
    overscroll-behavior:contain;
  }
}

.ms-toc__title{
  font-family:var(--ms-font-body);
  font-size:var(--ms-fs-micro);font-weight:600;
  letter-spacing:var(--ms-track-micro);text-transform:uppercase;
  color:var(--ms-gold-ink);
  margin:0 0 14px;
  padding-bottom:12px;
  border-bottom:var(--ms-hairline);
}

/*
 * The index runs in one column at both ends of the range and two in the
 * middle. On a phone a two column list breaks "Return Shipping for Approved
 * Claims" over four lines and reads worse than a longer single column; on a
 * tablet, where the index sits above the text rather than beside it, one
 * column of nineteen clauses is a screen of its own before the policy starts.
 */
.ms-toc__list{
  list-style:none;margin:0;padding:0;
  columns:1;column-gap:20px;
}
@media (min-width:560px) and (max-width:1079px){
  .ms-toc__list{columns:2;}
}

.ms-toc__item{break-inside:avoid;}

.ms-toc__link{
  display:flex;align-items:baseline;gap:9px;
  padding:7px 0;
  font-size:var(--ms-fs-sm);
  line-height:1.4;
  color:var(--ms-muted);
  text-decoration:none;
  transition:color var(--ms-t) var(--ms-ease);
}
.ms-toc__link:hover,
.ms-toc__link:focus-visible{color:var(--ms-ink);}

.ms-toc__num{
  flex:0 0 auto;
  min-width:1.35em;
  font-size:var(--ms-fs-xs);
  font-variant-numeric:tabular-nums;
  color:var(--ms-gold-ink);
}

.ms-toc__label{flex:1 1 auto;}

/* FAQ topics carry a question count instead of a clause number. */
.ms-toc__count{
  flex:0 0 auto;
  font-size:var(--ms-fs-micro);
  font-variant-numeric:tabular-nums;
  color:var(--ms-gold-ink);
  background:var(--ms-gold-soft);
  border-radius:999px;
  padding:2px 8px;
}

.ms-toc__foot{
  margin-top:16px;padding-top:16px;
  border-top:var(--ms-hairline);
}

.ms-btn--sm{
  min-height:40px;padding:0 16px;
  font-size:var(--ms-fs-micro);
  letter-spacing:.1em;
}

/* --------------------------------------------------------------------------
   5. Right hand rail

   Shown from 1400px only. Below that the support card is rendered in the
   contents foot and the policy links are in the related grid at the foot of
   the page, so hiding this column never removes the only copy of anything —
   and display:none takes it out of the accessibility tree, so the duplicate
   markup is not announced twice.
   -------------------------------------------------------------------------- */
.ms-siderail{display:none;}

@media (min-width:1400px){
  .ms-siderail{
    display:grid;
    gap:16px;
    position:sticky;
    top:calc(var(--ms-header-h-compact) + 20px);
  }
  /* The card moves to the rail at this width; two copies, one shown. */
  .ms-toc__foot{display:none;}
}

.ms-support{
  background:var(--ms-surface);
  border:var(--ms-hairline);
  padding:22px 20px;
}

/* In the contents foot the card is already inside a panel, so it drops its
   own surface and border and becomes part of that one. */
.ms-support--compact{
  background:transparent;
  border:0;
  padding:0;
}

.ms-support__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:38px;height:38px;margin-bottom:14px;
  color:var(--ms-gold-ink);
  background:var(--ms-gold-soft);
}

.ms-support__title{
  font-size:1.125rem;
  margin:0 0 8px;
}

.ms-support__note{
  font-size:var(--ms-fs-xs);
  line-height:1.6;
  color:var(--ms-muted);
  margin:0 0 14px;
  max-width:none;
}

.ms-support__actions{display:grid;gap:8px;}

.ms-support__hours{
  display:flex;align-items:flex-start;gap:8px;
  margin:16px 0 0;padding-top:14px;
  border-top:var(--ms-hairline);
  font-size:var(--ms-fs-micro);
  line-height:1.6;
  color:var(--ms-muted);
  max-width:none;
}
.ms-support__hours svg{flex:0 0 auto;margin-top:2px;}

.ms-railcard{
  background:var(--ms-surface);
  border:var(--ms-hairline);
  padding:22px 20px;
}

.ms-railcard__title{
  font-family:var(--ms-font-body);
  font-size:var(--ms-fs-micro);font-weight:600;
  letter-spacing:var(--ms-track-micro);text-transform:uppercase;
  color:var(--ms-gold-ink);
  margin:0 0 6px;
  padding-bottom:12px;
  border-bottom:var(--ms-hairline);
}

.ms-raillinks{list-style:none;margin:0;padding:0;}
.ms-raillinks li + li{border-top:var(--ms-hairline);}

.ms-raillink{
  display:flex;align-items:center;gap:11px;
  padding:11px 0;
  font-size:var(--ms-fs-sm);
  line-height:1.4;
  color:var(--ms-muted);
  text-decoration:none;
  transition:color var(--ms-t) var(--ms-ease);
}
.ms-raillink:hover,
.ms-raillink:focus-visible{color:var(--ms-ink);}

.ms-raillink__icon{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;
  color:var(--ms-gold-ink);
  background:var(--ms-gold-soft);
}

/* --------------------------------------------------------------------------
   6. At a glance

   A summary of the clauses customers ask about, above the document itself.
   It is explicitly labelled as a summary, and every line restates something
   printed in full below: the strip may never be the only place a rule appears.
   -------------------------------------------------------------------------- */
.ms-glance{
  background:var(--ms-sand);
  padding:clamp(22px,2.6vw,30px);
  margin-bottom:clamp(32px,4vw,48px);
}

.ms-glance__title{
  font-family:var(--ms-font-body);
  font-size:var(--ms-fs-micro);font-weight:600;
  letter-spacing:var(--ms-track-micro);text-transform:uppercase;
  color:var(--ms-gold-ink);
  margin:0 0 6px;
}

.ms-glance__note{
  font-size:var(--ms-fs-xs);
  color:var(--ms-muted);
  margin:0 0 18px;
  max-width:none;
}

.ms-glance__list{
  list-style:none;margin:0;padding:0;
  display:grid;gap:14px;
}
@media (min-width:640px){
  .ms-glance__list{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;}
}

.ms-glance__item{
  display:flex;align-items:flex-start;gap:12px;
  font-size:var(--ms-fs-sm);
  line-height:1.5;
}

.ms-glance__icon{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;
  color:var(--ms-gold-ink);
  background:var(--ms-surface);
  border:1px solid var(--ms-gold-line);
}

/* --------------------------------------------------------------------------
   7. Legal prose

   pages.css already sets .ms-prose. These are the adjustments a numbered
   legal document needs on top of it: a heavier separation between clauses,
   and a scroll offset so a clause linked from the index does not land under
   the sticky header.
   -------------------------------------------------------------------------- */
.ms-prose--legal > *:first-child{margin-top:0;}

.ms-prose__h2{
  scroll-margin-top:calc(var(--ms-header-h-compact) + 24px);
}

.ms-prose--legal h2{
  font-size:clamp(1.125rem,1.02rem + .5vw,1.375rem);
  margin-top:2em;padding-top:1.1em;
}

.ms-prose--legal p,
.ms-prose--legal li{max-width:74ch;}

.ms-prose--legal ul,
.ms-prose--legal ol{max-width:74ch;}

/* The closing "Legal savings" paragraph in every supplied policy. Set quieter
   than the clauses it follows, because it qualifies them rather than adding a
   rule of its own. */
.ms-prose--legal > p:last-child{
  font-size:var(--ms-fs-sm);
  color:var(--ms-muted);
}

.ms-backtop{
  margin-top:clamp(28px,3vw,40px);
  padding-top:20px;
  border-top:var(--ms-hairline);
  font-size:var(--ms-fs-sm);
}

.ms-callout--tight{
  margin:0;
  padding:20px 22px;
  background:var(--ms-champagne);
  border-color:var(--ms-gold-line);
}
.ms-callout--tight p{font-size:var(--ms-fs-sm);max-width:none;}

/* --------------------------------------------------------------------------
   8. FAQ

   Native <details> panels. The page works with no script at all; faq.js only
   adds the filter, the expand all control and deep linking.
   -------------------------------------------------------------------------- */
.ms-faqbar{
  display:flex;gap:12px;flex-wrap:wrap;align-items:center;
  margin-bottom:clamp(24px,3vw,34px);
}

/*
 * The filter row and the clear button are both printed with `hidden` and
 * revealed by faq.js. A UA `[hidden]{display:none}` rule is only (0,0,0), so
 * the display declarations in this file would otherwise win and show a search
 * box that cannot search on a page with no JavaScript. These two put it back.
 */
.ms-faqbar[hidden],
.ms-faqbar__clear[hidden]{display:none;}

.ms-faqbar__search{
  position:relative;
  flex:1 1 260px;
  display:flex;align-items:center;
}

.ms-faqbar__icon{
  position:absolute;left:14px;
  display:inline-flex;
  color:var(--ms-muted);
  pointer-events:none;
}

/*
 * Scoped through the parent on purpose. base.css styles the field as
 * `input[type='search']`, which is (0,1,1) and beats a lone class, so a single
 * `.ms-faqbar__input` selector loses its padding and the placeholder runs
 * under the magnifier. Two classes is (0,2,0) and wins outright.
 */
.ms-faqbar .ms-faqbar__input{
  width:100%;
  min-height:48px;
  padding:0 44px;
  font-family:var(--ms-font-body);
  font-size:var(--ms-fs-sm);
  color:var(--ms-ink);
  background:var(--ms-surface);
  border:var(--ms-hairline);
  border-radius:var(--ms-radius-btn);
  transition:border-color var(--ms-t) var(--ms-ease);
}
.ms-faqbar .ms-faqbar__input::placeholder{color:var(--ms-muted);}
.ms-faqbar .ms-faqbar__input:focus{outline:none;border-color:var(--ms-gold);}
/* The browser's own clear affordance would sit on top of ours. */
.ms-faqbar .ms-faqbar__input::-webkit-search-cancel-button{display:none;}

.ms-faqbar__clear{
  position:absolute;right:10px;
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  color:var(--ms-muted);
  background:transparent;border:0;cursor:pointer;
  transition:color var(--ms-t) var(--ms-ease);
}
.ms-faqbar__clear:hover{color:var(--ms-ink);}

.ms-faqbar__toggle{
  display:inline-flex;align-items:center;gap:8px;
  min-height:48px;padding:0 18px;
  font-family:var(--ms-font-body);
  font-size:var(--ms-fs-micro);font-weight:500;
  letter-spacing:var(--ms-track-btn);text-transform:uppercase;
  color:var(--ms-ink);
  background:transparent;
  border:var(--ms-hairline);
  border-radius:var(--ms-radius-btn);
  cursor:pointer;
  transition:border-color var(--ms-t) var(--ms-ease);
}
.ms-faqbar__toggle:hover{border-color:var(--ms-ink);}

.ms-faq__empty{
  padding:20px 22px;
  background:var(--ms-sand);
  font-size:var(--ms-fs-sm);
  color:var(--ms-muted);
  max-width:none;
}

.ms-faqgroup{
  scroll-margin-top:calc(var(--ms-header-h-compact) + 24px);
}
.ms-faqgroup + .ms-faqgroup{margin-top:clamp(36px,4vw,56px);}

.ms-faqgroup__title{
  /* Poppins, not the display serif. The client rejected Playfair for product
     names, prices and document headings on 2026-09-02; it stays on editorial
     display headings only. */
  font-family:var(--ms-font-body);
  font-size:clamp(1.125rem,1.02rem + .5vw,1.375rem);
  font-weight:600;letter-spacing:-.01em;
  margin:0 0 6px;
  padding-bottom:14px;
  border-bottom:1px solid var(--ms-gold-line);
}

.ms-faqgroup__intro{padding-bottom:0;margin-top:14px;}
.ms-faqgroup__intro p{font-size:var(--ms-fs-sm);color:var(--ms-muted);}

.ms-faqlist{margin-top:6px;}

.ms-faqitem{
  border-bottom:var(--ms-hairline);
  scroll-margin-top:calc(var(--ms-header-h-compact) + 24px);
}

.ms-faqitem__q{
  display:flex;align-items:flex-start;justify-content:space-between;gap:18px;
  padding:18px 0;
  font-family:var(--ms-font-body);
  font-size:var(--ms-fs-body);
  font-weight:500;
  line-height:1.5;
  color:var(--ms-ink);
  cursor:pointer;
  list-style:none;
  transition:color var(--ms-t) var(--ms-ease);
}
/* Safari draws its own triangle unless both of these are cleared. */
.ms-faqitem__q::-webkit-details-marker{display:none;}
.ms-faqitem__q::marker{content:'';}

.ms-faqitem__q:hover{color:var(--ms-gold-ink);}

.ms-faqitem__mark{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;
  margin-top:-3px;
  color:var(--ms-gold-ink);
  border:1px solid var(--ms-gold-line);
  border-radius:999px;
  transition:transform var(--ms-t) var(--ms-ease),background var(--ms-t) var(--ms-ease);
}
.ms-faqitem[open] .ms-faqitem__mark{
  transform:rotate(180deg);
  background:var(--ms-gold-soft);
}

.ms-faqitem__a{
  padding:0 0 22px;
  max-width:72ch;
}
.ms-faqitem__a p,
.ms-faqitem__a li{
  font-size:var(--ms-fs-sm);
  color:var(--ms-muted);
}
.ms-faqitem__a > *:first-child{margin-top:0;}

/* Filtered out by the search box. */
.ms-faqitem[hidden],
.ms-faqgroup[hidden]{display:none;}

@media (prefers-reduced-motion:reduce){
  .ms-faqitem__mark{transition:none;}
}

/* --------------------------------------------------------------------------
   9. Track order

   WooCommerce's shortcode owns the form. Its stylesheets are dequeued here,
   so every rule below is the only one acting on that markup.
   -------------------------------------------------------------------------- */
.ms-track__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(24px,3vw,40px);
  align-items:start;
}
@media (min-width:960px){
  .ms-track__grid{grid-template-columns:minmax(0,1.35fr) minmax(320px,.8fr);}
}

.ms-ipanel{
  background:var(--ms-surface);
  border:var(--ms-hairline);
  padding:clamp(24px,3vw,36px);
}
.ms-ipanel--quiet{background:var(--ms-sand);border-color:transparent;}

.ms-ipanel__head{
  display:flex;align-items:flex-start;gap:14px;
  margin-bottom:24px;
}

.ms-ipanel__icon{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  color:var(--ms-gold-ink);
  background:var(--ms-gold-soft);
}

.ms-ipanel__title{
  font-size:1.375rem;
  margin:0;
}

.ms-ipanel__sub{
  font-size:var(--ms-fs-sm);
  color:var(--ms-muted);
  margin:6px 0 0;
  max-width:52ch;
}

.ms-ipanel .ms-rule{margin:16px 0 20px;}

.ms-track__aside{display:grid;gap:clamp(20px,2.4vw,28px);}

/* The intro paragraph the client wrote above the shortcode. */
.ms-track__form > p:first-child{
  font-size:var(--ms-fs-sm);
  color:var(--ms-muted);
  margin:0 0 22px;
}

.ms-track__form form,
.ms-track__form .woocommerce-form-track-order{
  display:grid;gap:18px;
  margin:0;
}

.ms-track__form .form-row,
.ms-track__form p.form-row{
  display:flex;flex-direction:column;gap:8px;
  margin:0;
  max-width:none;
  width:100%;
  float:none;
}

.ms-track__form label{
  font-size:var(--ms-fs-micro);font-weight:600;
  letter-spacing:var(--ms-track-micro);text-transform:uppercase;
  color:var(--ms-muted);
}

.ms-track__form input[type="text"],
.ms-track__form input[type="email"],
.ms-track__form input[type="search"]{
  width:100%;
  min-height:52px;
  padding:0 16px;
  font-family:var(--ms-font-body);
  font-size:var(--ms-fs-body);
  color:var(--ms-ink);
  background:var(--ms-cream);
  border:var(--ms-hairline);
  border-radius:var(--ms-radius-btn);
  transition:border-color var(--ms-t) var(--ms-ease),background var(--ms-t) var(--ms-ease);
}
.ms-track__form input:focus{
  outline:none;
  border-color:var(--ms-gold);
  background:var(--ms-surface);
}

/*
 * WooCommerce wraps the submit button in a .form-row like every other field,
 * and that row is a flex column, so the button stretches to the full 620px of
 * the panel. Shrinking it to its own width is a property of the row, not of
 * the grid, so justify-self would do nothing here.
 */
.ms-track__form .form-row--submit{align-items:flex-start;}

/* Belt and braces for an unoverridden plugin template. */
.ms-track__form .clear{display:none;}

.ms-track__form button,
.ms-track__form button[type="submit"],
.ms-track__form input[type="submit"]{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:52px;padding:0 32px;
  font-family:var(--ms-font-body);
  font-size:.75rem;font-weight:500;
  letter-spacing:var(--ms-track-btn);text-transform:uppercase;
  color:var(--ms-cream);
  background:var(--ms-ink);
  border:1px solid var(--ms-ink);
  border-radius:var(--ms-radius-btn);
  cursor:pointer;
  transition:background var(--ms-t) var(--ms-ease);
}
.ms-track__form button:hover,
.ms-track__form input[type="submit"]:hover{background:var(--ms-ink-hover);}

.ms-track__note{
  display:flex;align-items:center;gap:9px;
  margin:22px 0 0;padding-top:18px;
  border-top:var(--ms-hairline);
  font-size:var(--ms-fs-xs);
  color:var(--ms-muted);
  max-width:none;
}
.ms-track__note svg{flex:0 0 auto;}

/* WooCommerce's own notices, once the lookup has run. */
.ms-track__form .woocommerce-error,
.ms-track__form .woocommerce-info,
.ms-track__form .woocommerce-message{
  list-style:none;
  margin:0 0 20px;padding:16px 18px;
  font-size:var(--ms-fs-sm);
  background:var(--ms-sand);
  border-left:2px solid var(--ms-gold);
}
.ms-track__form .woocommerce-error{
  background:rgba(190,40,23,.07);
  border-left-color:var(--ms-sale);
  color:var(--ms-ink);
}

/* The result: order overview, then the order and customer detail tables. */
.ms-track__form .woocommerce-order-overview,
.ms-track__form ul.order_details{
  list-style:none;
  display:grid;gap:14px;
  margin:0 0 28px;padding:20px 22px;
  background:var(--ms-cream);
  border:var(--ms-hairline);
}
@media (min-width:560px){
  .ms-track__form ul.order_details{grid-template-columns:repeat(2,minmax(0,1fr));}
}
.ms-track__form ul.order_details li{
  font-size:var(--ms-fs-micro);font-weight:600;
  letter-spacing:var(--ms-track-micro);text-transform:uppercase;
  color:var(--ms-muted);
}
.ms-track__form ul.order_details li strong{
  display:block;margin-top:6px;
  font-family:var(--ms-font-heading);
  font-size:1.0625rem;font-weight:500;
  letter-spacing:0;text-transform:none;
  color:var(--ms-ink);
}

.ms-track__form .woocommerce-order-details,
.ms-track__form .woocommerce-customer-details{margin-top:28px;}

.ms-track__form h2,
.ms-track__form h3{
  font-size:1.125rem;
  margin:0 0 14px;
}

.ms-track__form table.shop_table{
  width:100%;
  border-collapse:collapse;
  font-size:var(--ms-fs-sm);
}
.ms-track__form table.shop_table th,
.ms-track__form table.shop_table td{
  padding:12px 0;
  text-align:left;
  border-bottom:var(--ms-hairline);
}
.ms-track__form table.shop_table th{
  font-size:var(--ms-fs-micro);font-weight:600;
  letter-spacing:var(--ms-track-micro);text-transform:uppercase;
  color:var(--ms-muted);
}
.ms-track__form table.shop_table td:last-child,
.ms-track__form table.shop_table th:last-child{
  text-align:right;
  font-variant-numeric:tabular-nums;
}

.ms-track__form address{
  font-style:normal;
  font-size:var(--ms-fs-sm);
  color:var(--ms-muted);
  line-height:1.7;
}

/* Steps in the aside. */
.ms-steps{list-style:none;margin:0;padding:0;display:grid;gap:20px;}

.ms-step{display:flex;align-items:flex-start;gap:14px;}

.ms-step__icon{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  color:var(--ms-gold-ink);
  border:1px solid var(--ms-gold-line);
  border-radius:999px;
}

.ms-step__title{
  display:block;
  font-family:var(--ms-font-body);
  font-size:var(--ms-fs-micro);font-weight:600;
  letter-spacing:var(--ms-track-micro);text-transform:uppercase;
  color:var(--ms-ink);
}

.ms-step__copy{
  font-size:var(--ms-fs-sm);
  color:var(--ms-muted);
  margin:5px 0 0;
  max-width:none;
}

.ms-track__more{
  display:inline-block;
  margin-top:22px;
  font-size:var(--ms-fs-sm);
}

.ms-track__actions{
  display:flex;gap:10px;flex-wrap:wrap;
  margin-top:20px;
}
/* On a phone the pair reads as one stacked block of full width taps rather
   than two short buttons floating against the left edge. Client, 2026-09-02. */
@media (max-width:639px){
  .ms-track__actions{flex-direction:column;gap:12px;}
  .ms-track__actions .ms-btn{width:100%;}
}

/* --------------------------------------------------------------------------
   10. Related documents
   -------------------------------------------------------------------------- */
/*
 * Three bands close every one of these pages: the related grid, the help
 * block from pages.css and the footer. The help block is already sand and the
 * footer is espresso, so this one takes the white surface. Two sand bands
 * touching would read as one undivided slab.
 */
.ms-related{
  background:var(--ms-surface);
  border-top:var(--ms-hairline);
  padding-block:clamp(44px,5vw,72px);
}

.ms-related__head{margin-bottom:clamp(24px,3vw,36px);}
.ms-related__title{margin:0;font-size:clamp(1.5rem,1.2rem + 1.2vw,2.125rem);}
.ms-related__head .ms-rule{margin:16px 0 14px;}
.ms-related__head p{font-size:var(--ms-fs-sm);max-width:64ch;margin:0;}

.ms-related__grid{
  list-style:none;margin:0;padding:0;
  display:grid;gap:14px;
  grid-template-columns:1fr;
}
@media (min-width:680px){
  .ms-related__grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (min-width:1200px){
  .ms-related__grid{grid-template-columns:repeat(4,minmax(0,1fr));}
}

.ms-relcard{display:flex;}

.ms-relcard__link{
  display:flex;align-items:flex-start;gap:14px;
  width:100%;padding:22px 20px;
  text-decoration:none;
  background:var(--ms-cream);
  border:var(--ms-hairline);
  transition:border-color var(--ms-t) var(--ms-ease),transform var(--ms-t) var(--ms-ease);
}
.ms-relcard__link:hover{
  border-color:var(--ms-gold);
  transform:translateY(-2px);
}

.ms-relcard__icon{
  flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;
  color:var(--ms-gold-ink);
  background:var(--ms-gold-soft);
}

.ms-relcard__body{flex:1 1 auto;min-width:0;}

.ms-relcard__name{
  display:block;
  font-family:var(--ms-font-heading);
  font-size:1.0625rem;font-weight:500;
  line-height:1.3;
  color:var(--ms-ink);
}

.ms-relcard__blurb{
  display:block;margin-top:7px;
  font-size:var(--ms-fs-xs);
  line-height:1.55;
  color:var(--ms-muted);
}

.ms-relcard__go{
  flex:0 0 auto;
  color:var(--ms-gold-ink);
  margin-top:9px;
  transition:transform var(--ms-t) var(--ms-ease);
}
.ms-relcard__link:hover .ms-relcard__go{transform:translateX(3px);}

@media (prefers-reduced-motion:reduce){
  .ms-relcard__link,
  .ms-relcard__go{transition:none;}
  .ms-relcard__link:hover{transform:none;}
  .ms-relcard__link:hover .ms-relcard__go{transform:none;}
}

/* --------------------------------------------------------------------------
   11. Shared closing block

   parts/help-cta.php sets its own 820px measure, which suits the old narrow
   page template. These pages sit on the full 1600px container, so the help
   block is widened to match rather than sitting inset from everything above
   it. The part itself is untouched: it is shared with the old template.
   -------------------------------------------------------------------------- */
.ms-info-page .ms-help .ms-container--narrow{max-width:var(--ms-container);}

/* --------------------------------------------------------------------------
   12. Print

   A policy is the one page on this site people genuinely print or save as a
   PDF, usually to attach to a claim. Everything that is navigation rather
   than document is dropped, and the accordion is forced open so a printed
   FAQ is not a page of headings.
   -------------------------------------------------------------------------- */
@media print{
  .ms-toc,
  .ms-siderail,
  .ms-crumbbar,
  .ms-related,
  .ms-help,
  .ms-backtop,
  .ms-faqbar,
  .ms-glance__icon,
  .ms-relcard__go{display:none !important;}

  .ms-ihero{border-bottom:1px solid #000;background:none;}
  .ms-idoc__grid{display:block;}
  .ms-idoc__body{max-width:none;}
  .ms-glance{background:none;border:1px solid #999;}

  .ms-faqitem__a{display:block !important;}
  .ms-faqitem__mark{display:none;}
  .ms-faqitem{page-break-inside:avoid;}

  .ms-prose--legal h2{page-break-after:avoid;}
}