/* Generated from theme.json tokens - the variables every layer consumes.
 *
 * The values are the template's own (:root in its styles.css): --main #000000, --text #545454,
 * --text-2 #909090, --line #ebebeb, --bg-2 #f6f6f6, --bg-11 #f2f2f2, --primary #db1215. Keeping
 * them identical is what lets a rule below be copied across verbatim instead of re-derived, and
 * what keeps a screen next to the template's rather than near it. */
:root {
  --ng-color-primary: #db1215;
  --ng-color-on-primary: #ffffff;
  --ng-color-text: #000000;
  /* The dimmer body colour the template uses for a trail's current page and its running text. */
  --ng-color-text-soft: #545454;
  --ng-color-muted: #909090;
  --ng-color-line: #ebebeb;
  /* The near-invisible hairline a control wears until it is chosen or hovered. */
  --ng-color-line-soft: rgba(134, 134, 134, 0.12);
  --ng-color-bg: #ffffff;
  --ng-color-bg-alt: #f6f6f6;
  /* Filled controls - the quantity stepper's ground. */
  --ng-color-field: #f2f2f2;
  --ng-color-sale: #db1215;
  /* The discount pill is its own orange, not the brand red. */
  --ng-color-sale-badge: #fc5732;
  --ng-font-body: 'Albert Sans', sans-serif;
  --ng-font-heading: 'Albert Sans', sans-serif;
  --ng-radius-sm: 4px;
  --ng-radius-md: 8px;
  --ng-radius-pill: 999px;
  /* Buttons, chips and framed boxes: the template rounds every control by 3px, nothing else. */
  --ng-radius-control: 3px;
  --ng-space-section: 60px;
  --ng-space-gap: 16px;
  /* One page width for the whole shop, so a section cannot drift from the one above it. */
  --ng-container-width: 1540px;
  --ng-container-pad: 50px;
}

@media (max-width: 1200px) {
  :root { --ng-container-pad: 15px; }
}