/* Cabinet Factory: order confirmation page (order-confirmed.html).
   Loads after css/style.css; same solid nav and paper ground as the Shop page. */

:root {
  --ink: #15171A;
  --ink-2: #555B61;          /* secondary text, 6.1:1 on --paper */
  --page: #F2F2F0;
  --line: rgba(21, 23, 26, 0.12);
  --pad: clamp(1rem, 4vw, 3rem);
}
html { background: var(--page); overscroll-behavior-y: none; }
body.order-body { background: var(--page); color: var(--ink); }
.order-body :focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

#nav.nav-solid { mix-blend-mode: normal; color: var(--ink); background: var(--page); box-shadow: 0 1px 0 var(--line); }
.nav-solid .brand, .nav-solid .nav-link { color: var(--ink); }
.nav-solid .nav-cta { color: var(--ink); border-color: rgba(21, 23, 26, 0.45); }
.nav-solid .nav-cta:hover { background: var(--ink); color: var(--page); border-color: var(--ink); }
body.nav-open .nm-links a:nth-child(4) { transition-delay: 0.33s; }

.oc-main {
  max-width: 880px;
  margin: 0 auto;
  padding: calc(76px + 8vh) var(--pad) clamp(56px, 10vh, 120px);
}
.oc-h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.5rem);
  font-weight: 200; line-height: 1.02; letter-spacing: -0.026em;
  text-wrap: balance; margin-bottom: 18px;
}
.oc-lead { font-size: clamp(17px, 1.6vw, 20px); font-weight: 300; line-height: 1.55; color: var(--ink); max-width: 60ch; }
.oc-steps { list-style: none; margin: clamp(28px, 5vh, 48px) 0; border-top: 1px solid var(--ink); }
.oc-steps li {
  display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr); gap: 6px 24px;
  padding: 18px 0; border-bottom: 1px solid var(--line);
}
.oc-steps h2 { font-size: 15px; font-weight: 500; }
.oc-steps p { font-size: 16px; font-weight: 300; line-height: 1.6; color: var(--ink-2); max-width: 60ch; }
.oc-steps a { color: var(--ink); font-weight: 500; text-underline-offset: 3px; }
.oc-steps a:hover { text-decoration-thickness: 2px; }
.oc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.oc-actions .btn-dark:hover { background: #2c3036; }
@media (max-width: 640px) {
  .oc-main { padding-top: calc(50px + 6vh); }
  .oc-steps li { grid-template-columns: 1fr; }
}
.oc-steps li[hidden] { display: none; }

/* refund policy (refund-policy.html) */
.pol-main { max-width: 820px; }
.pol-date { font-size: 14px; color: var(--ink-2); margin-top: 10px; }
.pol-toc { margin: clamp(24px, 4vh, 40px) 0 8px; padding: 16px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.pol-toc ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.pol-toc a { display: inline-flex; align-items: center; min-height: 32px; color: var(--ink); font-size: 14px; font-weight: 500; text-underline-offset: 3px; }
.pol-toc a:hover { text-decoration-thickness: 2px; }
.pol-sec { padding: clamp(22px, 4vh, 36px) 0 6px; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.pol-sec h2 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); font-weight: 300; letter-spacing: -0.01em; margin-bottom: 12px; }
.pol-sec p { font-size: 16px; font-weight: 300; line-height: 1.6; color: var(--ink); max-width: 68ch; margin-bottom: 14px; }
.pol-sec strong { font-weight: 500; }
.pol-sec a, .pol-address a { color: var(--ink); font-weight: 500; text-underline-offset: 3px; }
.pol-address { font-style: normal; font-size: 16px; line-height: 1.7; margin-bottom: 20px; }
.pol-main .oc-actions { margin-top: clamp(28px, 5vh, 48px); }

/* order status check (order-confirmed.html): the thank-you shows once Stripe says the order is complete */
.js .oc-done:not(.is-ok) { display: none; }
.js .oc-h1:not(.is-set) { visibility: hidden; }
.oc-state { font-size: clamp(17px, 1.6vw, 19px); font-weight: 300; line-height: 1.55; max-width: 60ch; margin: 0 0 28px; }
.oc-state:empty { display: none; }
.oc-state a { color: var(--ink); font-weight: 500; text-underline-offset: 3px; }