/* ==========================================================================
   8X Gear — Document page template
   Ported from returns-policy.html, the `.cp-*` block (shared by the privacy and
   shipping prototypes too). Markup is ours (page-document.php); class names are
   kept from the prototype so the two diff line by line.
   ========================================================================== */

.cp-wrap{max-width:1280px;margin:0 auto;padding:0 28px;}
.cp-kicker{
  margin:0 0 16px;color:var(--ct-red-ink);
  font-size:10px;font-weight:900;letter-spacing:.22em;text-transform:uppercase;
}

/* ==================================================== hero */
.cp-hero{background:var(--ct-deep);color:#fff;padding:32px 0 56px;}
.cp-back{
  display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-bottom:26px;
  color:rgba(255,255,255,.80);text-decoration:none;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.cp-back svg{width:15px;height:15px;flex:none;}
.cp-back span{white-space:nowrap;}
.cp-back:hover{color:#fff;text-decoration:underline;text-underline-offset:4px;}
.cp-hero .cp-kicker{color:var(--ct-red);}
.cp-title{
  margin:0;color:var(--ct-cream);font-size:clamp(36px,6vw,84px);line-height:.9;
  font-weight:900;letter-spacing:-.055em;text-transform:uppercase;
}
.cp-title b{font-weight:inherit;color:var(--ct-red);}
.cp-lead{
  margin:26px 0 0;padding-left:20px;border-left:3px solid var(--ct-red);
  max-width:58ch;font-size:16px;line-height:1.7;color:rgba(255,255,255,.80);
}
.cp-updated{
  margin:24px 0 0;font-size:11px;font-weight:900;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.66);
}

/* ==================================================== body */
.cp-body{padding:48px 0 72px;}
.cp-cols{display:grid;grid-template-columns:250px minmax(0, 1fr);gap:56px;align-items:start;}

.cp-index{position:sticky;top:24px;min-width:0;}
.cp-index-rule{height:3px;background:var(--ct-red);margin:0 0 16px;}
.cp-index-h{
  margin:0 0 16px;font-size:11px;font-weight:900;letter-spacing:.2em;
  text-transform:uppercase;color:#0E1013;
}
.cp-index ol{margin:0;padding:0;list-style:none;display:grid;gap:11px;}
.cp-index li{margin:0;}
.cp-index a{
  color:#0E1013;text-decoration:none;
  font-size:12px;font-weight:900;line-height:1.4;text-transform:uppercase;letter-spacing:.02em;
  overflow-wrap:break-word;word-break:break-word;
}
.cp-index a:hover{text-decoration:underline;text-underline-offset:4px;}

/* Anything before the first heading: the page's opening, unnumbered. */
.cp-intro{margin:0 0 30px;}
.cp-intro p{margin:0 0 16px;max-width:78ch;font-size:15px;line-height:1.78;color:var(--ct-quiet);}

/* Highlight Callout Box */
.cp-intro .highlight-box,.cp-sec .highlight-box{
  background:var(--ct-cream);border-left:4px solid var(--ct-red);
  padding:18px 22px;margin:20px 0;border-radius:0 4px 4px 0;
}
.cp-intro .highlight-box p,.cp-sec .highlight-box p{
  margin:0;font-size:15px;line-height:1.7;color:var(--ct-ink);max-width:none;
}

/* ---- sections ---- */
.cp-main{min-width:0;}
.cp-sec{
  padding:0 0 30px;margin-bottom:30px;min-width:0;
  border-bottom:2px solid var(--ct-ink);scroll-margin-top:24px;
}
.cp-sec:first-child{border-top:2px solid var(--ct-ink);padding-top:28px;}
.cp-sec:last-of-type{border-bottom:0;}
.cp-sec-head{display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:baseline;margin-bottom:18px;}
.cp-sec-no{
  color:var(--ct-red-ink);font-size:13px;font-weight:900;
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
}
.cp-sec h2{
  margin:0;color:#0E1013;font-size:clamp(22px,2.7vw,32px);line-height:1.08;
  font-weight:900;letter-spacing:-.035em;text-transform:uppercase;
}
/* The copy lines up under the heading, clear of the number rail. */
.cp-sec > p,.cp-sec > ul,.cp-sec > ol,.cp-sec > h3,.cp-sec > table,.cp-sec > .highlight-box{margin-left:62px;}
.cp-sec p{margin:0 0 16px;max-width:78ch;font-size:15px;line-height:1.78;color:var(--ct-quiet);}
.cp-sec p:last-child{margin-bottom:0;}
/* A page written with `h2` keeps its `h3` as a sub-heading inside the section. */
.cp-sec h3{
  margin:24px 0 10px;color:#0E1013;font-size:16px;font-weight:900;line-height:1.35;
}

/* Unordered Lists: Bulleted with 8x8 red square */
.cp-sec ul{
  margin-top:4px;margin-bottom:16px;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:12px;
}
.cp-sec ul li{
  position:relative;padding-left:22px;margin:0;
  max-width:78ch;font-size:15px;line-height:1.68;color:var(--ct-quiet);
}
.cp-sec ul li::before{
  content:"";position:absolute;left:0;top:8px;
  width:8px;height:8px;background:var(--ct-red);
}

/* Ordered Lists: Numbered cleanly */
.cp-sec ol{
  margin-top:4px;margin-bottom:16px;padding-left:24px;list-style:decimal;
  display:flex;flex-direction:column;gap:12px;
}
.cp-sec ol li{
  max-width:78ch;font-size:15px;line-height:1.68;color:var(--ct-quiet);
  margin:0;
}
.cp-sec ol li::before{
  display:none;
}

/* Links */
.cp-sec a{color:#0E1013;text-decoration:underline;text-underline-offset:3px;}
.cp-sec a:hover{color:var(--ct-red-ink);}

/* Tables */
.cp-sec table{
  width:100%;max-width:78ch;border-collapse:collapse;margin:20px 0 26px;
  font-size:14px;background:#fff;border:1px solid var(--ct-line);
}
.cp-sec th,.cp-sec td{
  padding:12px 14px;border:1px solid var(--ct-line);text-align:left;vertical-align:top;
}
.cp-sec th{
  background:var(--ct-deep);color:var(--ct-cream);font-weight:800;
  text-transform:uppercase;font-size:11px;letter-spacing:.06em;
}
.cp-sec tr:nth-child(even) td{
  background:rgba(0,0,0,.02);
}

/* ---- help ---- */
.cp-help{margin:34px 0 0;padding:26px 28px 28px;background:#fff;border:1px solid var(--ct-ink);}
.cp-help h2{
  margin:0 0 12px;color:#0E1013;font-size:22px;font-weight:900;
  letter-spacing:-.025em;text-transform:uppercase;
}
.cp-help p{margin:0;font-size:15px;line-height:1.7;color:var(--ct-quiet);}
.cp-help a{
  color:#0E1013;font-weight:900;text-decoration:underline;
  text-decoration-color:var(--ct-red);text-decoration-thickness:2px;text-underline-offset:3px;
}
.cp-help a:hover{color:#000;}

.cp-hero :focus-visible{outline-color:#fff;}

/* ==================================================== responsive */
@media (max-width:1020px){
  .cp-cols{grid-template-columns:1fr;gap:30px;}
  /* The index stops being a rail and becomes a plain block above the text. */
  .cp-index{position:static;}
  .cp-index ol{grid-template-columns:1fr 1fr;gap:10px 20px;}
}
@media (max-width:880px){
  .cp-wrap{padding:0 20px;}
  .cp-hero{padding:24px 0 42px;}
  .cp-body{padding:34px 0 52px;}
  .cp-sec-head{grid-template-columns:38px 1fr;gap:10px;}
  .cp-sec > p,.cp-sec > ul,.cp-sec > ol,.cp-sec > h3,.cp-sec > table,.cp-sec > .highlight-box{margin-left:0;}
  .cp-index ol{grid-template-columns:1fr;}
}