/*
 * Plain and policy pages, converted from the guardrail page templates:
 * main-policy (policy column), pg-page-hero (title band), main-page and
 * page-returns (page body) and the faq section. Values come from guardrail
 * assets/pages.css, assets/theme.css and sections/faq.liquid.
 */

.hg-pages {
  /* guardrail policy_heading_color */
  --hg-pages-heading: #0b0b0b;
  /* Sticky header height plus breathing room, for in-page links and the FAQ topics. */
  --hg-pages-sticky-top: 84px;
}
@media (min-width: 992px) {
  .hg-pages { --hg-pages-sticky-top: 143px; }
}
/* The layouts set their own spacing; Ecomus pads the content area for its page header. */
.hg-pages .site-content { padding-block: 0; }

/* Policy column (main-policy): a centred title over text that keeps side margins growing with the screen. */
.hg-policy {
  width: fit-content;
  max-width: min(1444px, 70%);
  margin-inline: auto;
  padding-inline: 20px;
  color: var(--hg-text);
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: break-word;
}
.hg-policy__title {
  margin: 40px 0;
  color: var(--hg-pages-heading);
  font-family: var(--hg-font-heading);
  font-size: 63px;
  font-weight: 800;
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}
.hg-policy__body { margin-bottom: 60px; }
@media (min-width: 1441px) {
  .hg-policy { max-width: min(1444px, 60%); }
}
@media (max-width: 1199px) {
  .hg-policy { max-width: 80%; }
  .hg-policy__title { font-size: 51.5px; }
}
@media (max-width: 767px) {
  .hg-policy { max-width: 90%; }
  .hg-policy__title { font-size: 32px; }
}

/* Policy text */
.hg-policy__body p { margin: 0 0 10px; }
.hg-policy__body :is(h1, h2, h3, h4, h5, h6) {
  margin: 20px 0 10px;
  color: var(--hg-pages-heading);
  font-family: var(--hg-font-heading);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}
/* Some pages repeat their title as an h1 in the text; it reads as a section heading. */
.hg-policy__body :is(h1, h2) { font-size: 32px; }
.hg-policy__body h3 { font-size: 26px; }
.hg-policy__body :is(h4, h5, h6) { font-size: 20px; }
.hg-policy__body :is(ul, ol) { margin: 0 0 10px; padding: 0 0 0 18px; }
.hg-policy__body ul { list-style: disc; }
.hg-policy__body ol { list-style: decimal; }
.hg-policy__body li { margin: 4px 0; }
.hg-policy__body li > p { margin: 0; }
.hg-policy__body li > :is(ul, ol) { margin: 4px 0 0; }
.hg-policy__body :is(strong, b) { font-weight: 700; }
/* Pasted text often bolds whole headings; they keep the heading weight. */
:is(.hg-policy__body, .hg-page-body__content) :is(h1, h2, h3, h4, h5, h6) :is(strong, b) { font-weight: inherit; }
.hg-policy__body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}
.hg-policy__body a:hover { color: var(--hg-accent-text); }
.hg-policy__body table { width: 100%; margin: 0 0 10px; border-collapse: collapse; }
.hg-policy__body :is(th, td) { padding: 8px; border: 1px solid var(--hg-line); text-align: start; vertical-align: top; }
.hg-policy__body hr { margin: 20px 0; border: 0; border-block-start: 1px solid var(--hg-line); }
.hg-policy__body img { max-width: 100%; height: auto; }
@media (max-width: 749px) {
  .hg-policy__body :is(h1, h2) { font-size: 26px; }
  .hg-policy__body h3 { font-size: 22px; }
  .hg-policy__body :is(h4, h5, h6) { font-size: 18px; }
  /* Keeps a four-column rate table inside the narrow column. */
  .hg-policy__body table { font-size: 13px; }
  .hg-policy__body :is(th, td) { padding: 6px; }
}

/* Elementor sets the policy text in a row of spacer columns; in the policy column it flows as one block. */
:is(.hg-policy__body, .hg-page-body--returns .hg-page-body__content) :is(.e-con, .e-con > .e-con-inner) {
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}
:is(.hg-policy__body, .hg-page-body--returns .hg-page-body__content) .e-con:not(:has(.elementor-widget)) { display: none; }
/* Elementor colours each text widget per page; the column sets the text colour. */
:is(.hg-policy__body, .hg-page-body--returns .hg-page-body__content) .elementor-widget.elementor-widget-text-editor { color: inherit; }

/* Title band (pg-page-hero) */
.hg-page-hero {
  display: flex;
  align-items: center;
  min-height: 300px;
  padding-block: 48px;
  background: #000;
  color: #fff;
}
.hg-page-hero__inner {
  width: 100%;
  margin-inline: auto;
  padding-inline: 20px;
  text-align: center;
}
.hg-page-hero__title {
  margin: 0;
  color: inherit;
  font-family: var(--hg-font-heading);
  font-size: 49px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
  overflow-wrap: break-word;
}
@media (min-width: 576px) {
  .hg-page-hero__inner { padding-inline: 15px; }
}
@media (min-width: 768px) {
  .hg-page-hero__inner { max-width: 950px; }
}
@media (min-width: 992px) {
  .hg-page-hero__inner { max-width: 1120px; }
}
@media (min-width: 1200px) {
  .hg-page-hero__inner { max-width: 1170px; }
}
@media (min-width: 1280px) {
  .hg-page-hero__inner { max-width: 1300px; }
}
@media (max-width: 767px) {
  .hg-page-hero { min-height: 200px; }
  .hg-page-hero__title { font-size: 26px; }
}
@media (max-width: 749px) {
  .hg-page-hero { padding-block: 28px; }
}

/* Page body (main-page, page-returns) */
.hg-page-body { padding-block: 50px; }
.hg-page-body__inner {
  width: 100%;
  margin-inline: auto;
  padding-inline: 20px;
}
.hg-page-body__content {
  min-width: 0;
  padding-inline: 10px;
  color: var(--hg-text);
  font-size: 14px;
  line-height: 1.6;
  overflow-wrap: break-word;
}
@media (min-width: 576px) {
  .hg-page-body__inner { padding-inline: 15px; }
}
@media (min-width: 768px) {
  .hg-page-body__inner { max-width: 95%; }
  .hg-page-body__content { padding-inline: 30px; }
}
.hg-page-body__content p { margin: 0 0 15px; }
.hg-page-body__content :is(h1, h2, h3, h4, h5, h6) {
  margin: 0;
  color: inherit;
  font-family: var(--hg-font-heading);
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}
.hg-page-body__content h1 { font-size: 36px; }
.hg-page-body__content h2 { font-size: 26px; }
.hg-page-body__content h3 { font-size: 24px; }
.hg-page-body__content h4 { font-size: 22px; }
.hg-page-body__content h5 { font-size: 20px; }
.hg-page-body__content h6 { font-size: 18px; }
@media (min-width: 768px) {
  .hg-page-body__content h1 { font-size: 65.25px; }
  .hg-page-body__content h2 { font-size: 43.5px; }
  .hg-page-body__content h3 { font-size: 40.6px; }
  .hg-page-body__content h4 { font-size: 37.7px; }
  .hg-page-body__content h5 { font-size: 31.9px; }
  .hg-page-body__content h6 { font-size: 29px; }
}
@media (min-width: 1200px) {
  .hg-page-body__content h1 { font-size: 79.75px; }
  .hg-page-body__content h2 { font-size: 49.3px; }
  .hg-page-body__content h3 { font-size: 43.5px; }
  .hg-page-body__content h4 { font-size: 40.6px; }
}
.hg-page-body__content ul { margin: 0 0 15px; padding: 0 0 0 18px; list-style: disc; }
.hg-page-body__content ol { margin: 0 0 15px; padding: 0 0 0 40px; list-style: decimal; }
.hg-page-body__content li { margin: 4px 0; }
.hg-page-body__content li > p { margin: 0; }
.hg-page-body__content li > :is(ul, ol) { margin: 4px 0 0; }
.hg-page-body__content hr { margin: 20px 0; border: 0; border-block-start: 1px solid var(--hg-line); }
.hg-page-body__content a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.hg-page-body__content a:hover { color: var(--hg-accent-text); }
.hg-page-body__content img { max-width: 100%; height: auto; }
.hg-page-body__content [id] { scroll-margin-top: var(--hg-pages-sticky-top); }
/* Elementor's kit pads every container 6rem at the sides; the page body sets the gutters. */
.hg-page-body__content .e-con {
  --container-default-padding-top: 0px;
  --container-default-padding-right: 0px;
  --container-default-padding-bottom: 0px;
  --container-default-padding-left: 0px;
}
/* Ecomus adds its own container gutter inside top-level containers; it would double the page body's. */
.hg-page-body__content .e-con-inner { --em-container-spacing: 0px; }

/* FAQ: Elementor keeps its two columns, topics beside the questions. */
.hg-page-body--faq .ecomus-heading {
  margin: 0;
  color: inherit;
  font-family: var(--hg-font-heading);
  font-size: 40.6px;
  font-weight: 800;
  line-height: 1.1;
  text-transform: uppercase;
}
@media (max-width: 1199px) {
  .hg-page-body--faq .ecomus-heading { font-size: 37.7px; }
}
@media (max-width: 767px) {
  .hg-page-body--faq .ecomus-heading { font-size: 22px; }
  /* Elementor spaces the closing note 30px below the questions on desktop only. */
  .hg-page-body--faq .e-parent + .e-parent { margin-block-start: 30px; }
}

/* FAQ topics (Ecomus navigation bar) */
.hg-faq-nav {
  display: block;
  width: 100%;
  max-width: 460px;
  padding: 6px 25px;
  border: 1px solid currentColor;
  border-radius: 10px;
}
.hg-page-body__content .hg-faq-nav__list { margin: 0; padding: 0; list-style: none; }
.hg-page-body__content .hg-faq-nav__item { margin: 0; }
.hg-faq-nav__item + .hg-faq-nav__item { border-block-start: 1px solid var(--hg-line); }
.hg-page-body__content .hg-faq-nav__link {
  display: block;
  padding: 14px 0;
  color: inherit;
  font-family: var(--hg-font-heading);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s ease;
}
.hg-page-body__content a.hg-faq-nav__link:hover { color: var(--hg-accent-text); }
@media (min-width: 768px) {
  /* The topics follow the questions down the page, below the sticky header. */
  .hg-page-body--faq .elementor-widget-ecomus-navigation-bar > .elementor-widget-container { height: 100%; }
  .hg-faq-nav { position: sticky; top: var(--hg-pages-sticky-top); }
  /* The page body drops Elementor's container padding, which kept the topics off the questions. */
  .hg-page-body--faq .e-con:has(> .elementor-widget-ecomus-navigation-bar) { padding-inline-end: 40px; }
}

/* FAQ questions (faq section) */
.hg-faq__item {
  margin: 0 0 20px;
  border: 1px solid currentColor;
  border-radius: 10px;
  overflow: hidden;
}
.hg-faq__item:last-child { margin-bottom: 0; }
.hg-faq__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 25px;
  list-style: none;
  cursor: pointer;
}
.hg-faq__toggle::-webkit-details-marker { display: none; }
.hg-faq__toggle::marker { content: ""; }
.hg-faq__toggle:focus-visible { outline: 2px solid currentColor; outline-offset: -4px; }
.hg-faq__question {
  min-width: 0;
  padding-inline-end: 20px;
  font-family: var(--hg-font-heading);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: normal;
  text-transform: uppercase;
}
.hg-faq__icon { flex: none; width: 14px; height: 13px; fill: currentColor; }
.hg-faq__item[open] .hg-faq__icon-v { opacity: 0; }
.hg-faq__answer {
  padding: 20px;
  font-size: 14px;
  line-height: 1.6;
}
.hg-page-body__content .hg-faq__answer p { margin: 0 0 10px; }
.hg-page-body__content .hg-faq__answer a { text-underline-offset: 3px; }
@media (max-width: 989px) {
  .hg-faq__toggle { padding: 13px 20px; }
}
@media (max-width: 767px) {
  .hg-faq__icon { width: 12px; height: 11px; }
}
/* The answer slides open where the browser can animate details content. */
@media (prefers-reduced-motion: no-preference) {
  .hg-faq { interpolate-size: allow-keywords; }
  .hg-faq__item::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.5s ease, content-visibility 0.5s ease allow-discrete;
  }
  .hg-faq__item[open]::details-content { block-size: auto; }
}

/* Order tracking: the WooCommerce form in a narrow column, with the guardrail contact fields. */
.hg-page-body--tracking .hg-page-body__content {
  max-width: 640px;
  margin-inline: auto;
  padding-inline: 0;
}
.hg-page-body--tracking .track_order {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.hg-page-body--tracking .track_order > * { grid-column: 1 / -1; margin: 0; }
.hg-page-body--tracking .track_order .form-row {
  width: auto;
  margin: 0;
  padding: 0;
  float: none;
}
.hg-page-body--tracking .track_order :is(.form-row-first, .form-row-last) { grid-column: auto; }
.hg-page-body--tracking .track_order .clear { display: none; }
.hg-page-body--tracking .track_order label {
  display: block;
  margin: 0 0 4px;
  font-family: var(--hg-font-heading);
  font-size: 14px;
  font-weight: 800;
  line-height: 22px;
  text-transform: uppercase;
}
.hg-page-body--tracking .track_order .input-text {
  width: 100%;
  height: auto;
  min-height: 49px;
  padding: 12px 15px;
  border: 1px solid var(--hg-line-strong);
  border-radius: 10px;
  background: transparent;
  color: inherit;
  font-family: var(--hg-font-body);
  font-size: 14px;
  line-height: 1.4;
}
.hg-page-body--tracking .track_order .input-text::placeholder { color: var(--hg-muted); opacity: 1; }
/* Mirrors .hg-btn in base.css; WooCommerce prints its own button class. */
.hg-page-body--tracking .track_order button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin: 0;
  padding: 10px 20px;
  border: 1px solid var(--hg-accent);
  border-radius: 4px;
  background: var(--hg-accent);
  color: #fff;
  font-family: var(--hg-font-heading);
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.hg-page-body--tracking .track_order button[type="submit"]:hover {
  border-color: color-mix(in srgb, var(--hg-accent) 85%, #000);
  background: color-mix(in srgb, var(--hg-accent) 85%, #000);
  color: #fff;
}
.hg-page-body--tracking .track_order button[type="submit"]:focus-visible {
  outline: 2px solid var(--hg-text);
  outline-offset: 2px;
}
@media (max-width: 575px) {
  .hg-page-body--tracking .track_order :is(.form-row-first, .form-row-last) { grid-column: 1 / -1; }
}
@media (max-width: 749px) {
  .hg-page-body--tracking .track_order button[type="submit"] { min-height: 39px; padding: 8px 15px; }
}