/**
 * Information pages — the homepage design system applied to the help, company and policy
 * pages (About Us, Guangzhou Store, FAQ, Shipping & Delivery, Returns & Refunds, Contact Us,
 * Privacy Policy, Cookie Policy, Terms & Conditions).
 *
 * Those nine pages already share one shell: `main#main-content.slp-help-center-page` wrapping
 * `.faq-docs-body` with `.slp-help-intro`, `.slp-summary` cards, `.slp-help-section` blocks and a
 * `.slp-help-cta` band. That is the same anatomy the homepage uses (`#main-content.hp-home`), so
 * the whole family is restyled by re-pointing the template's own design tokens at the homepage
 * palette and then matching the homepage's type scale, cards, tables and dark bands. No page
 * template is rewritten and no per-page exception is added.
 *
 * Loaded after help-center-content.css on those pages only.
 */

/* ------------------------------------------------------------------ tokens */

#main-content.slp-help-center-page {
  /* Homepage palette, copied from the homepage stylesheet so the two families cannot drift. */
  --ip-ink: #071b2d;
  --ip-panel: #0f172a;
  --ip-red: #d92f2f;
  --ip-red-dark: #a81f24;
  --ip-blue: #0d4f86;
  --ip-gold: #c9a84c;
  --ip-body: #1d2c3a;
  --ip-steel: #3d5061;
  --ip-muted: #586a7a;
  --ip-line: #d9e0e7;
  --ip-line-soft: #e8edf2;
  --ip-soft: #f7f9fb;
  --ip-head: #eef3f7;
  --ip-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* The template reads these; re-pointing them carries the whole page in one move. */
  --faq-bg: #ffffff;
  --faq-bg-secondary: var(--ip-soft);
  --faq-text: var(--ip-ink);
  --faq-text-secondary: var(--ip-body);
  --faq-text-muted: var(--ip-muted);
  --faq-border: var(--ip-line);
  --faq-accent: var(--ip-blue);
  --faq-accent-soft: #eef3f8;
  --faq-accent-light: #e9f1f8;
  --faq-hover-bg: #f4f7fa;
  --faq-radius: 5px;
  --faq-radius-sm: 4px;
  --faq-font: inherit;

  background: #fff;
}

/* `.faq-docs` sits below #main-content and re-declares the same tokens, so the palette has to be
   asserted on that element too — otherwise its own radius and border values win for every
   descendant card, section and table. */
#main-content.slp-help-center-page .faq-docs {
  --faq-bg: #ffffff;
  --faq-bg-secondary: var(--ip-soft);
  --faq-text: var(--ip-ink);
  --faq-text-secondary: var(--ip-body);
  --faq-text-muted: var(--ip-muted);
  --faq-border: var(--ip-line);
  --faq-accent: var(--ip-blue);
  --faq-accent-soft: #eef3f8;
  --faq-accent-light: #e9f1f8;
  --faq-hover-bg: #f4f7fa;
  --faq-radius: 5px;
  --faq-radius-sm: 4px;
  --faq-font: inherit;
}

/* --------------------------------------------------- page band, breadcrumb */

#main-content.slp-help-center-page > .page-hero,
#main-content.slp-help-center-page > .catalog-hero {
  border-bottom: 1px solid var(--ip-line-soft);
}

#main-content.slp-help-center-page > .slp-article-breadcrumbs {
  border-bottom: 1px solid var(--ip-line-soft);
  font-family: var(--ip-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ip-muted);
}

#main-content.slp-help-center-page > .slp-article-breadcrumbs a {
  color: var(--ip-muted);
}

#main-content.slp-help-center-page > .slp-article-breadcrumbs a:hover {
  color: var(--ip-blue);
}

/* ------------------------------------------------- intro, the homepage headsplit */

#main-content.slp-help-center-page .slp-help-intro {
  gap: 14px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--ip-line-soft);
}

/* The homepage eyebrow is a small red square plus tracked monospace, not a coloured word. */
#main-content.slp-help-center-page .slp-help-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  color: var(--ip-muted);
  font-family: var(--ip-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

#main-content.slp-help-center-page .slp-help-eyebrow::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  background: var(--ip-red);
}

#main-content.slp-help-center-page .slp-help-intro h2 {
  max-width: 22ch;
  color: var(--ip-ink);
  font-size: clamp(27px, 3.4vw, 42px);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.1;
}

#main-content.slp-help-center-page .slp-help-intro p {
  max-width: 68ch;
  color: var(--ip-steel);
  font-size: 16px;
  line-height: 1.72;
}

#main-content.slp-help-center-page .slp-help-intro__updated {
  color: var(--ip-muted);
  font-family: var(--ip-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------------------------------------------------- summary cards, as .card */

#main-content.slp-help-center-page .slp-help-summary {
  gap: 14px;
}

#main-content.slp-help-center-page .slp-help-summary__card,
#main-content.slp-help-center-page .legal-docs__summary-card,
#main-content.slp-help-center-page .about-docs__metric-card,
#main-content.slp-help-center-page .about-docs__card,
#main-content.slp-help-center-page .contact-docs__card,
#main-content.slp-help-center-page .contact-docs__panel {
  background: #fff;
  border: 1px solid var(--ip-line);
  border-radius: var(--faq-radius);
  box-shadow: none;
}

#main-content.slp-help-center-page .slp-help-summary__card {
  padding: 18px 20px;
  gap: 8px;
}

/* `strong` becomes the homepage's numbered tag above the card heading. */
#main-content.slp-help-center-page .slp-help-summary__card > strong {
  display: block;
  margin: 0;
  color: var(--ip-red);
  font-family: var(--ip-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#main-content.slp-help-center-page .slp-help-summary__card h3 {
  margin: 0;
  color: var(--ip-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
}

#main-content.slp-help-center-page .slp-help-summary__card p {
  margin: 0;
  color: var(--ip-steel);
  font-size: 14px;
  line-height: 1.7;
}

/* --------------------------------------------- sections, the homepage rhythm */

#main-content.slp-help-center-page .faq-docs-body {
  counter-reset: ip-section;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: var(--ip-body);
  font-size: 15.5px;
  line-height: 1.75;
}

#main-content.slp-help-center-page .slp-help-center__body {
  gap: clamp(30px, 4vw, 46px);
}

#main-content.slp-help-center-page .slp-help-section,
#main-content.slp-help-center-page .legal-docs__section,
#main-content.slp-help-center-page .about-docs__section,
#main-content.slp-help-center-page .terms-docs__section {
  background: #fff;
  border: 0;
  border-top: 1px solid var(--ip-line-soft);
  border-radius: 0;
  box-shadow: none;
  padding: 26px 0 0;
}

#main-content.slp-help-center-page .slp-help-section > h2,
#main-content.slp-help-center-page .legal-docs__section > h2,
#main-content.slp-help-center-page .about-docs__section > h2 {
  margin: 0 0 14px;
  padding: 0;
  border: 0;
  color: var(--ip-ink);
  font-size: clamp(22px, 2.4vw, 29px);
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 1.2;
}

/* A monospace counter gives each block the homepage's numbered-tag rhythm. */
#main-content.slp-help-center-page .slp-help-section > h2::before,
#main-content.slp-help-center-page .legal-docs__section > h2::before {
  counter-increment: ip-section;
  content: counter(ip-section, decimal-leading-zero);
  display: block;
  margin-bottom: 8px;
  color: var(--ip-red);
  font-family: var(--ip-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
}

#main-content.slp-help-center-page .slp-help-section h3,
#main-content.slp-help-center-page .legal-docs__section h3 {
  color: var(--ip-ink);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
}

#main-content.slp-help-center-page .slp-help-section p,
#main-content.slp-help-center-page .legal-docs__section p,
#main-content.slp-help-center-page .terms-docs__section p {
  max-width: 82ch;
  color: var(--ip-body);
  font-size: 15.5px;
  line-height: 1.75;
}

#main-content.slp-help-center-page a {
  color: var(--ip-blue);
  text-underline-offset: 2px;
}

#main-content.slp-help-center-page a:hover {
  color: var(--ip-red-dark);
}

/* ------------------------------------------------- checklists and plain lists */

#main-content.slp-help-center-page .slp-help-checklist,
#main-content.slp-help-center-page .legal-docs__list,
#main-content.slp-help-center-page .terms-docs__list {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

#main-content.slp-help-center-page .slp-help-checklist li,
#main-content.slp-help-center-page .legal-docs__list li,
#main-content.slp-help-center-page .terms-docs__list li {
  position: relative;
  margin: 0;
  padding-left: 26px;
  color: var(--ip-body);
  font-size: 15px;
  line-height: 1.7;
}

#main-content.slp-help-center-page .slp-help-checklist li::before,
#main-content.slp-help-center-page .legal-docs__list li::before,
#main-content.slp-help-center-page .terms-docs__list li::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 9px;
  height: 9px;
  background: var(--ip-red);
}

/* ---------------------------------------------------------------- tables */

#main-content.slp-help-center-page .faq-docs-body table,
#main-content.slp-help-center-page .legal-docs__table-wrap table {
  background: #fff;
  border: 1px solid var(--ip-line);
  border-radius: var(--faq-radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 14.5px;
}

#main-content.slp-help-center-page .faq-docs-body th,
#main-content.slp-help-center-page .legal-docs__table-wrap th {
  background: var(--ip-head);
  color: #42576b;
  font-family: var(--ip-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 0;
  border-bottom: 1px solid var(--ip-line);
  padding: 11px 14px;
  text-align: left;
}

#main-content.slp-help-center-page .faq-docs-body td,
#main-content.slp-help-center-page .legal-docs__table-wrap td {
  border: 0;
  border-bottom: 1px solid var(--ip-line-soft);
  padding: 12px 14px;
  color: var(--ip-body);
  vertical-align: top;
}

#main-content.slp-help-center-page .legal-docs__table-wrap {
  border: 0;
  background: transparent;
}

/* -------------------------------------------------- notes and notice strips */

#main-content.slp-help-center-page .slp-help-inline-note,
#main-content.slp-help-center-page .legal-docs__notice,
#main-content.slp-help-center-page .terms-docs__notice {
  background: var(--ip-ink);
  border: 0;
  border-radius: 0;
  padding: 18px 22px;
  color: #afc2d3;
  font-size: 13.5px;
  line-height: 1.65;
}

#main-content.slp-help-center-page .slp-help-inline-note strong,
#main-content.slp-help-center-page .legal-docs__notice strong,
#main-content.slp-help-center-page .terms-docs__notice strong {
  color: #fff;
}

#main-content.slp-help-center-page .slp-help-inline-note a,
#main-content.slp-help-center-page .legal-docs__notice a {
  color: #9dc2ff;
}

/* ------------------------------------------------------------ closing CTA */

#main-content.slp-help-center-page .slp-help-cta {
  display: grid;
  gap: 14px;
  justify-items: start;
  background: var(--ip-ink);
  border: 0;
  border-radius: var(--faq-radius);
  padding: 30px 26px;
}

#main-content.slp-help-center-page .slp-help-cta h2,
#main-content.slp-help-center-page .slp-help-cta h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(21px, 2.3vw, 28px);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.2;
}

#main-content.slp-help-center-page .slp-help-cta p {
  max-width: 62ch;
  margin: 0;
  color: #b8c8da;
  font-size: 15px;
  line-height: 1.7;
}

#main-content.slp-help-center-page .slp-help-cta__button,
#main-content.slp-help-center-page .slp-help-cta .btn,
#main-content.slp-help-center-page .slp-help-cta a.button {
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding: 0 22px;
  background: var(--ip-red);
  color: #fff;
  border: 0;
  border-radius: var(--faq-radius-sm);
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
}

#main-content.slp-help-center-page .slp-help-cta__button:hover,
#main-content.slp-help-center-page .slp-help-cta .btn:hover,
#main-content.slp-help-center-page .slp-help-cta a.button:hover {
  background: var(--ip-red-dark);
  color: #fff;
}

/* ------------------------------------------------------- sidebar navigation */

#main-content.slp-help-center-page .faq-docs-sidebar-inner {
  background: #fff;
  border: 1px solid var(--ip-line);
  border-radius: var(--faq-radius);
  padding: 6px 0;
}

#main-content.slp-help-center-page .faq-docs-sidebar-group + .faq-docs-sidebar-group {
  border-top: 1px solid var(--ip-line-soft);
}

#main-content.slp-help-center-page .faq-docs-sidebar-group-title {
  padding: 14px 16px 6px;
  color: var(--ip-muted);
  font-family: var(--ip-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#main-content.slp-help-center-page .faq-docs-sidebar-link {
  margin: 0;
  padding: 9px 16px;
  border-radius: 0;
  color: var(--ip-body);
  font-size: 14.5px;
  line-height: 1.45;
}

#main-content.slp-help-center-page .faq-docs-sidebar-link:hover {
  background: var(--ip-soft);
  color: var(--ip-ink);
}

#main-content.slp-help-center-page .faq-docs-sidebar-link.is-active,
#main-content.slp-help-center-page .faq-docs-sidebar-link[aria-current="page"] {
  background: var(--ip-soft);
  box-shadow: inset 2px 0 0 var(--ip-red);
  color: var(--ip-ink);
  font-weight: 700;
}

/* ------------------------------------------------------------ mobile pass */

@media (max-width: 768px) {
  #main-content.slp-help-center-page .slp-help-intro h2 {
    /* Matches the homepage page-title scale measured on a 390px viewport. */
    font-size: clamp(30px, 8vw, 34px);
  }

  #main-content.slp-help-center-page .slp-help-intro p,
  #main-content.slp-help-center-page .slp-help-section p {
    /* 15.68px is the homepage lede on mobile. */
    font-size: 15.7px;
    line-height: 1.7;
  }

  #main-content.slp-help-center-page .slp-help-summary {
    /* The homepage card grid uses a 14px gap on mobile. */
    gap: 14px;
  }

  #main-content.slp-help-center-page .slp-help-summary__card {
    padding: 16px;
  }

  #main-content.slp-help-center-page .slp-help-section,
  #main-content.slp-help-center-page .legal-docs__section {
    /* The homepage gives every band 68px of air; a content column takes two thirds of that so the
       blocks keep the same rhythm without turning nine pages into a scroll marathon. */
    padding-top: 44px;
  }

  /* Section headings match the homepage's 28px / 700 / 1.12 on mobile. */
  #main-content.slp-help-center-page .slp-help-section > h2,
  #main-content.slp-help-center-page .legal-docs__section > h2 {
    font-size: 28px;
    line-height: 1.12;
    letter-spacing: -0.02em;
  }

  #main-content.slp-help-center-page .slp-help-cta {
    padding: 24px 18px;
  }

  #main-content.slp-help-center-page .slp-help-cta__button,
  #main-content.slp-help-center-page .slp-help-cta .btn {
    width: 100%;
    justify-content: center;
  }

  /* The drawer keeps its links grouped but drops the rule between groups. */
  #main-content.slp-help-center-page .faq-docs-sidebar-group + .faq-docs-sidebar-group {
    border-top: 0;
  }

  #main-content.slp-help-center-page .faq-docs-sidebar-link {
    padding: 10px 16px;
    font-size: 15px;
  }
}

/* ------------------------------------------------------------ contact forms */
/*
 * The Contact page keeps its own fields, handler and copy — only the visual language changes, to
 * the homepage form card: a white panel with a 4px red rule on top, 11px bold labels, flat
 * #fbfcfd fields with a square edge, and one tall blue submit button. Values below are the ones
 * measured on the live homepage form.
 */

#main-content.slp-help-center-page .contact-docs__form-panel {
  padding: 0;
  background: #fff;
  border: 0;
  border-top: 4px solid #e12636;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 18px 50px rgba(9, 28, 46, 0.12);
  overflow: hidden;
}

#main-content.slp-help-center-page .contact-docs__form-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0;
  padding: 22px 26px;
  border-bottom: 1px solid var(--ip-line);
  color: var(--ip-ink);
  font-size: 15px;
  font-weight: 700;
}

#main-content.slp-help-center-page .contact-docs__form {
  margin: 0;
  padding: 26px;
}

#main-content.slp-help-center-page .contact-docs__field {
  min-width: 0;
}

#main-content.slp-help-center-page .contact-docs__field label {
  display: block;
  margin-bottom: 7px;
  color: #334253;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: none;
}

#main-content.slp-help-center-page .contact-docs__field input:not([type="checkbox"]):not([type="hidden"]),
#main-content.slp-help-center-page .contact-docs__field select,
#main-content.slp-help-center-page .contact-docs__field textarea {
  width: 100%;
  min-height: 45px;
  padding: 11px 13px;
  border: 1px solid #cbd5df;
  border-radius: 0;
  background: #fbfcfd;
  color: var(--ip-ink);
  font: inherit;
  font-size: 14px;
}

#main-content.slp-help-center-page .contact-docs__field textarea {
  min-height: 132px;
  line-height: 1.6;
  resize: vertical;
}

#main-content.slp-help-center-page .contact-docs__field input:not([type="checkbox"]):focus,
#main-content.slp-help-center-page .contact-docs__field select:focus,
#main-content.slp-help-center-page .contact-docs__field textarea:focus {
  border-color: #2864dc;
  box-shadow: 0 0 0 3px rgba(40, 100, 220, 0.12);
  outline: 0;
}

/* Two fields per row on desktop, one per row on a phone — the homepage grid behaviour. */
#main-content.slp-help-center-page .contact-docs__grid--two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

#main-content.slp-help-center-page .contact-docs__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 18px 0 0;
  color: #33475c;
  font-size: 12.5px;
  line-height: 1.55;
}

#main-content.slp-help-center-page .contact-docs__consent input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 2px 0 0;
}

#main-content.slp-help-center-page .contact-docs__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin-top: 22px;
  padding: 0 26px;
  background: #2864dc;
  color: #fff;
  border: 0;
  border-radius: 0;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
}

#main-content.slp-help-center-page .contact-docs__submit:hover {
  background: #1d4ed8;
  color: #fff;
}

@media (max-width: 620px) {
  #main-content.slp-help-center-page .contact-docs__grid--two {
    grid-template-columns: minmax(0, 1fr);
  }

  #main-content.slp-help-center-page .contact-docs__form {
    padding: 20px 16px;
  }

  #main-content.slp-help-center-page .contact-docs__form-heading {
    padding: 18px 16px;
  }

  #main-content.slp-help-center-page .contact-docs__submit {
    width: 100%;
  }
}