/* Hallmark · shape: Reference document (the six policy pages, kept content) · genre: editorial · theme: Grid (as the home sheet, seed small-indian-online-store-567b·97ded366·2026-11-07·r0) · redesign: full
 * hero: a short header sheet, the title on paper and the field from column 8 to the bleed · nav: edge-aligned, the logo on paper and four links on the field · footer: mast, as on home · imagery: none, the brand logo only · signature: the brand-blue field holding the page's contents, or its support lines
 * axes: light/grotesk-sans/cool · posture: full-palette · contrast: pass · fold: pass · job: read the policy, then contact support · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 · weakest: H, a legal page leads with its title, not a picture; the field carries the brand and the wayfinding */
/* Hallmark · dismissed 58 · legal pages (privacy, terms, refunds, shipping) must show their full text; the words are the content, read top to bottom */
/* Hallmark · dismissed 77 · a policy page is one document, not a landing strip; it gains no sections */
/* Hallmark · waive 44c · the title hangs from column 1 and the field starts on its own column line · a short title leaves white beside it on purpose, the Grid theme's asymmetric sheet */
/* Hallmark · waive 79 · the header is a short sheet, not a first screen · a policy page's text starts right under it, and a taller header would push the policy below the fold */
/* Hallmark · dismissed 19 · en dashes mark ranges (1–2 days, Monday–Saturday); the policy text is shared with the Bagisto store */
@import url("./tokens.css");
@import url("./base.css");

:root { --nav-h: 80px; }

/* The skip link */
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* Links, all states */
a { color: inherit; text-decoration: underline; text-decoration-thickness: var(--rule-hair); text-underline-offset: 0.28em; transition: color var(--dur-short) var(--ease-out), text-decoration-color var(--dur-short) var(--ease-out); }
a:hover { color: var(--color-mark); }
a:active { color: var(--color-ink-2); }
a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }

/* The header sheet: the home sheet's twelve columns, the field from column 8 to the bleed */
.dochead {
  display: grid;
  grid-template-columns:
    [full-start] minmax(calc(var(--gutter) - var(--gap-columns)), 1fr)
    [content-start] repeat(12, minmax(0, calc((var(--container) - 2 * var(--gutter) - 11 * var(--gap-columns)) / 12)))
    [content-end] minmax(calc(var(--gutter) - var(--gap-columns)), 1fr) [full-end];
  grid-template-rows: var(--nav-h) var(--space-3xl) auto var(--space-2xl);
  column-gap: var(--gap-columns);
  background: var(--color-paper);
}
.dochead__field { grid-column: 9 / full-end; grid-row: 1 / -1; background: var(--color-field); }

.dochead__logo { grid-column: content-start / span 4; grid-row: 1; align-self: center; justify-self: start; text-decoration: none; }
.dochead__logo img { display: block; height: 36px; width: auto; }

.dochead__nav { grid-column: 10 / content-end; grid-row: 1; align-self: center; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-xs) var(--space-lg); color: var(--color-field-ink); --color-focus: var(--color-field-ink); }
.dochead__nav a { font: 500 var(--text-md)/1.2 var(--font-body); text-decoration: none; white-space: nowrap; }
.dochead__nav a:hover, .dochead__nav a[aria-current="page"] { color: var(--color-field-ink); text-decoration: underline; text-decoration-thickness: var(--rule-hair); }
.dochead__nav a[aria-current="page"] { text-decoration-thickness: 2px; }
.dochead__nav a:active { opacity: 0.85; }

/* The title on paper, hung from column 1; the date under it */
.dochead__text { grid-column: content-start / span 7; grid-row: 3; align-self: end; }
.dochead__title { max-width: none; font: var(--display-weight) clamp(3rem, 5.6vw, 5.75rem)/0.94 var(--font-display); letter-spacing: -0.04em; color: var(--color-ink); }
.dochead__meta { margin-top: var(--space-lg); font: 500 var(--text-md)/1.4 var(--font-body); color: var(--color-muted); }

/* What the field holds: the contents of a long policy, or the support lines */
.dochead__panel { grid-column: 10 / content-end; grid-row: 3; align-self: end; color: var(--color-field-ink); --color-focus: var(--color-field-ink); }
.dochead__panel h2 { max-width: none; margin: 0 0 var(--space-sm); font: var(--display-weight) var(--text-title)/1.1 var(--font-display); letter-spacing: var(--tracking-display); }
.dochead__panel ol { margin: 0; padding: 0; list-style: none; }
.dochead__panel li + li { margin-top: var(--space-2xs); }
.dochead__panel ol a { font: 400 var(--text-md)/1.45 var(--font-body); text-decoration: none; }
.dochead__panel a:hover { color: var(--color-field-ink); text-decoration: underline; text-decoration-thickness: var(--rule-hair); }
.dochead__panel a:active { opacity: 0.85; }
.dochead__panel p { margin: 0; font: 400 var(--text-md)/1.6 var(--font-body); }
.dochead__panel p + p { margin-top: var(--space-sm); }
.dochead__panel p a { font: 500 var(--text-xl)/1.4 var(--font-display); white-space: nowrap; }

/* The document on columns 1 to 7, the white to its right held on purpose */
.doc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); padding-block: var(--space-3xl) var(--section-gap-s); }
.doc__body { grid-column: 1 / span 7; min-width: 0; }

.prose { max-width: 68ch; font-size: 1.0625rem; line-height: 1.65; color: var(--color-ink-2); }
.prose > * + * { margin-top: var(--space-md); }
.prose h2 { max-width: none; margin-top: var(--space-2xl); font-size: var(--text-2xl); line-height: 1.1; color: var(--color-ink); }
.prose > h2 + * { margin-top: var(--space-sm); }
.prose strong { font-weight: 500; color: var(--color-ink); }
.prose ul, .prose ol { margin-bottom: 0; padding-left: 1.25em; }
.prose li + li { margin-top: var(--space-xs); }
.prose li::marker { color: var(--color-muted); }
.prose .note { padding: var(--space-md) var(--space-lg); background: var(--color-paper-2); color: var(--color-ink); }
.prose table { width: 100%; border-collapse: collapse; line-height: 1.5; }
.prose th { padding: 0 var(--space-md) var(--space-xs) 0; border-bottom: var(--rule-hair) solid var(--color-rule); text-align: start; vertical-align: bottom; font: 500 var(--text-sm)/1.4 var(--font-body); color: var(--color-muted); }
.prose td { padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: top; overflow-wrap: anywhere; }

/* The mast footer, as on home */
.mast { padding-block: var(--section-gap-s); background: var(--color-paper-2); color: var(--color-ink); }
.mast__inner { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: end; }
.mast__logo { grid-column: 1 / span 6; text-decoration: none; }
.mast__logo img { display: block; width: min(100%, 520px); height: auto; }
.mast__links { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg); }
.mast__links a { font: 500 var(--text-md)/1.4 var(--font-body); white-space: nowrap; }
.mast__links a[aria-current="page"] { text-decoration-thickness: 2px; }
.mast__legal { grid-column: 1 / -1; margin: 0; font-size: var(--text-sm); color: var(--color-muted); }

/* Under 80rem the field starts a column earlier, so the contents keep one line each */
@media (max-width: 80rem) {
  .dochead__field { grid-column: 8 / full-end; }
  .dochead__nav, .dochead__panel { grid-column: 9 / content-end; }
  .dochead__text { grid-column: content-start / span 6; }
}

/* Under 60rem everything stacks: logo and links, the title, then the field as its own band */
@media (max-width: 60rem) {
  .dochead { display: block; }
  .dochead__field { display: none; }
  .dochead__logo, .dochead__nav, .dochead__text { padding-inline: var(--gutter); }
  .dochead__logo { display: block; padding-top: var(--space-lg); }
  .dochead__logo img { height: 32px; }
  .dochead__nav { justify-content: flex-start; padding-top: var(--space-md); color: var(--color-ink); --color-focus: var(--color-accent); }
  .dochead__nav a:hover, .dochead__nav a[aria-current="page"] { color: var(--color-ink); }
  .dochead__nav a:hover { color: var(--color-mark); }
  .dochead__text { padding-block: var(--space-2xl) var(--space-xl); }
  .dochead__title { font-size: clamp(2.5rem, 11vw, 4rem); line-height: 0.95; }
  .dochead__meta { margin-top: var(--space-md); }
  .dochead__panel { padding: var(--space-xl) var(--gutter); background: var(--color-field); color: var(--color-field-ink); }
  .doc { display: block; padding-top: var(--space-2xl); }
  .mast__logo { grid-column: 1 / -1; }
}