/* =====================================================================
   shipping-policy.html — page-only rules.
   Shared tokens and components live in assets/css/styles.css.
   Nothing here invents a colour, radius, shadow or type size.
   The legal chrome below (hero meta, glance card, draft note, table
   wrapper, policy links, print rules) is deliberately duplicated in
   refund-policy.css and grievance.css rather than shared, so that no
   file outside this page's own stylesheet has to be touched.
   ===================================================================== */

/* ---------- 1. Hero -------------------------------------------------- */
.page-hero--legal .page-hero__inner{align-items:start}
.page-hero--legal .dots-field{opacity:.22}
.page-hero--legal h1{max-width:18ch}

.legal-meta{
  list-style:none;margin:var(--sp-6) 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-6);
  font-size:var(--fs-sm);color:var(--text-muted);
}
.legal-meta li{display:inline-flex;align-items:center;gap:8px;margin:0}
.legal-meta svg{width:16px;height:16px;color:var(--saffron-700);flex:none}
.legal-meta time{font-variant-numeric:tabular-nums}

/* "Key points at a glance" card in the hero aside */
.glance{background:var(--surface)}
.glance h2{font-size:var(--fs-h4);margin:0 0 var(--sp-4)}
.glance ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-3)}
.glance li{display:flex;gap:10px;margin:0;font-size:var(--fs-sm);line-height:1.6;color:var(--ink-700)}
.glance svg{width:18px;height:18px;color:var(--forest-500);flex:none;margin-top:3px}
.glance__foot{margin:var(--sp-5) 0 0;padding-top:var(--sp-4);border-top:1px solid var(--line-soft)}

/* ---------- 2. Draft-for-review note --------------------------------- */
.draft-note{
  display:flex;gap:10px;align-items:flex-start;
  max-width:var(--container-narrow);margin:0 0 var(--sp-8);
  padding:12px 16px;border-radius:var(--r-md);
  border:1px solid var(--saffron-200);background:var(--saffron-50);
  font-size:var(--fs-sm);line-height:1.6;color:var(--ink-700);
}
.draft-note svg{width:18px;height:18px;color:var(--saffron-700);flex:none;margin-top:3px}
.draft-note b{color:var(--saffron-800)}

/* ---------- 3. Table of contents ------------------------------------- */
.toc-select{margin-bottom:var(--sp-8);max-width:var(--container-narrow)}
.toc-select .field__label{display:block;margin-bottom:6px}
.toc__foot{margin:var(--sp-5) 0 0;padding-top:var(--sp-4);border-top:1px solid var(--line-soft)}
.toc ol{counter-reset:none}

/* ---------- 4. Prose ------------------------------------------------- */
.prose>section:first-child>h2{margin-top:0}
.prose section+section{margin-top:0}
.prose h2{scroll-margin-top:calc(var(--header-h) + 24px)}
.prose section{scroll-margin-top:calc(var(--header-h) + 24px)}
.prose blockquote{background:var(--surface-2);border-radius:0 var(--r-md) var(--r-md) 0;padding:var(--sp-4) var(--sp-5)}
.prose ol{counter-reset:none}

/* Tables scroll inside their own box, so the page itself never does */
.table-wrap{
  overflow-x:auto;margin:var(--sp-6) 0;
  border-radius:var(--r-md);
  -webkit-overflow-scrolling:touch;
}
.table-wrap table{margin:0;min-width:520px}
.table-wrap th[scope="row"]{background:var(--ink-50);font-weight:600;color:var(--ink-800)}

.legal-address{
  font-style:normal;line-height:1.8;font-size:var(--fs-sm);
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface-2);padding:var(--sp-5);margin-top:var(--sp-5);
}
.legal-address b{color:var(--heading)}

/* ---------- 5. Dark help band ---------------------------------------- */
.help-grid .card{display:flex;flex-direction:column}
.help-grid .card__foot{margin-top:auto;padding-top:var(--sp-4)}

/* ---------- 6. Related policies -------------------------------------- */
.policy-links{display:grid;gap:clamp(12px,1.6vw,18px);grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){ .policy-links{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:1100px){ .policy-links{grid-template-columns:repeat(4,minmax(0,1fr))} }
.policy-link{
  display:flex;gap:var(--sp-3);align-items:flex-start;text-decoration:none;
  padding:var(--sp-5);border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--sh-xs);
  transition:transform var(--dur-fast) var(--ease-hover),box-shadow var(--dur-fast) var(--ease-hover),border-color var(--dur-fast);
}
.policy-link:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--saffron-200)}
.policy-link__icon{
  width:40px;height:40px;border-radius:var(--r-md);flex:none;display:grid;place-items:center;
  background:var(--saffron-50);color:var(--saffron-700);
}
.policy-link__icon svg{width:20px;height:20px}
.policy-link:nth-child(even) .policy-link__icon{background:var(--forest-50);color:var(--forest-600)}
.policy-link__body{display:flex;flex-direction:column;gap:4px;min-width:0}
.policy-link__body b{font-family:var(--font-head);font-size:15.5px;font-weight:600;color:var(--heading);line-height:1.35}
.policy-link__body span{font-size:13px;color:var(--text-muted);line-height:1.55}
.policy-link__go{width:17px;height:17px;color:var(--ink-400);flex:none;margin-top:12px;transition:transform var(--dur-fast) var(--ease-hover)}
.policy-link:hover .policy-link__go{transform:translateX(3px);color:var(--saffron-700)}

/* ---------- 7. Print ------------------------------------------------- */
@media print{
  .page-hero{background:none;padding-block:0 var(--sp-4)}
  .page-hero::after,.dots-field,.glance__foot,.toc,.toc-select,
  .breadcrumbs,.cta-band,.policy-links,.section--dark,.announce,.util-bar{display:none!important}
  .section{padding-block:0}
  .legal-layout{display:block}
  .prose{max-width:none;font-size:11pt;line-height:1.5;color:#000}
  .prose h2{page-break-after:avoid}
  .table-wrap{overflow:visible}
  .table-wrap table{min-width:0}
  .callout,.draft-note,.legal-address{break-inside:avoid;background:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444}
}