/* =============================================================================
   Pep Research -- service pages: FAQ, Contact, Wholesale, Cart, 404.
   The legal-page layout (css/v3-legal.css) carries the FAQ; the form panels
   are the order request's (css/v3-checkout.css). This file adds only what
   those do not: a quiet header, the FAQ answers, contact and wholesale
   layouts, form status, the cart page on navy, and the 404 links.
   Navy foundation, glass panels, compact type, the locked palette.
   ============================================================================= */

/* ---- header: the neural scene, quietly ---- */
.sv-hero { padding-bottom: 48px; }
.sv-sec { padding: 40px 0 96px; }

/* ---- glass card + small type shared by the pages ---- */
.sv-card {
  padding: 24px;
  border: 1px solid var(--v3-card-line);
  border-radius: var(--v3-radius-card);
  background: var(--v3-glass-card);
  box-shadow: var(--v3-card-shadow);
}
.sv-card h2, .sv-card h3 { font-size: 16px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; color: var(--v3-on-dark); }
.sv-card p { margin-top: 6px; font-size: 13.5px; line-height: 21px; color: var(--v3-on-dark-muted); }
.sv-card a:not(.v3-btn) { color: var(--pv-lavender); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(11, 22, 64, 0.2); }
.sv-card a:not(.v3-btn):hover { color: var(--v3-on-dark); }
.sv-note { font-size: 12.5px; line-height: 19px; color: var(--v3-on-dark-soft); }

/* ---- numbered steps inside the legal layout (Payment) ---- */
.v3-legal-list.sv-steps li { list-style: decimal; }
.v3-legal-list.sv-steps li::marker { font-variant-numeric: tabular-nums; }

/* ---- FAQ: answers inside the legal layout ---- */
.sv-faq { display: flex; flex-direction: column; margin-top: 12px; }
.sv-faq details { border-top: 1px solid var(--v3-line-dark); }
.sv-faq details:first-child { border-top: 0; }
.sv-faq summary {
  position: relative;
  display: block;
  padding: 14px 36px 14px 0;
  font-size: 15px;
  line-height: 23px;
  font-weight: 600;
  color: var(--v3-on-dark);
  cursor: pointer;
  list-style: none;
}
.sv-faq summary::-webkit-details-marker { display: none; }
.sv-faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 21px;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--pv-periwinkle);
  border-bottom: 1.5px solid var(--pv-periwinkle);
  transform: rotate(45deg);
  transition: transform 220ms var(--v3-ease-out);
}
.sv-faq details[open] summary::after { transform: translateY(4px) rotate(225deg); }
.sv-faq summary:hover { color: var(--pv-lavender); }
.sv-faq summary:focus-visible { outline: 2px solid var(--v3-focus); outline-offset: 2px; border-radius: 6px; }
.sv-faq .sv-answer { padding: 0 0 16px; }
.v3-legal-item .sv-faq .sv-answer p { margin-top: 0; }
.v3-legal-item .sv-faq .sv-answer p + p { margin-top: 8px; }

/* ---- Contact ---- */
.sv-contact { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 32px; align-items: start; }
.sv-contact-side { position: sticky; top: calc(var(--v3-header-h) + 24px); display: flex; flex-direction: column; gap: 16px; }
.sv-methods { display: flex; flex-direction: column; gap: 14px; margin-top: 14px; }
.sv-method { padding-top: 14px; border-top: 1px solid var(--v3-line-dark); }
.sv-method:first-child { padding-top: 0; border-top: 0; }
.sv-method .v3-label { display: flex; }
.sv-method p { margin-top: 4px; }
.sv-email { font-size: 15px; font-weight: 600; }

/* ---- Wholesale ---- */
.sv-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: stretch; }
.sv-orgs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.sv-orgs li {
  padding: 6px 12px;
  border: 1px solid var(--v3-line-dark-strong);
  border-radius: var(--pv3-radius-full);
  font-size: 12.5px;
  line-height: 18px;
  color: var(--v3-on-dark-muted);
}
.sv-caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 14px; }
.sv-cap { padding: 16px; border: 1px solid var(--v3-line-dark); border-radius: 14px; background: rgba(255, 255, 255, 0.9); }
.sv-cap h3 { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--v3-on-dark); }
.sv-cap p { margin-top: 4px; font-size: 12.5px; line-height: 19px; color: var(--v3-on-dark-soft); }
.sv-caps-card { margin-top: 20px; }
.sv-products-more { margin-top: 16px; }
.sv-form-wrap { max-width: 860px; margin: 32px auto 0; display: flex; flex-direction: column; gap: 20px; }
.sv-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; margin-top: 4px; }
.sv-products .co-check--inline { margin-top: 0; font-size: 13px; }

/* ---- form actions + status ---- */
.sv-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.sv-actions .v3-btn[disabled] { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }
.sv-actions .v3-btn[disabled]::after { display: none; }
.sv-status { display: none; padding: 10px 12px; border: 1px solid rgba(58, 75, 200, 0.4); border-radius: 10px; background: rgba(58, 75, 200, 0.1); font-size: 13px; line-height: 20px; color: var(--v3-on-dark); }
.sv-status.show { display: block; }
.sv-success { padding: 28px; border: 1px solid rgba(91, 110, 224, 0.35); border-radius: var(--v3-radius-card); background: linear-gradient(180deg, rgba(91, 110, 224, 0.08) 0%, rgba(91, 110, 224, 0) 60%), var(--v3-glass-card); }
.sv-success h2 { font-size: 20px; line-height: 28px; font-weight: 600; color: var(--v3-on-dark); }
.sv-success h2:focus { outline: none; }
.sv-success p { margin-top: 8px; font-size: 14px; line-height: 22px; color: var(--v3-on-dark-muted); }

/* ---- Cart page (the cart drawer keeps its own skin) ---- */
.sv-cart #sfCartPage { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; color: var(--v3-on-dark-muted); }
.sv-cart .sf-cart-list,
.sv-cart .sf-cart-summary {
  padding: 8px 24px;
  border: 1px solid var(--v3-card-line);
  border-radius: var(--v3-radius-card);
  background: var(--v3-glass-card);
  box-shadow: var(--v3-card-shadow);
}
.sv-cart .sf-cart-summary { position: sticky; top: calc(var(--v3-header-h) + 24px); padding: 22px 24px; }
.sv-cart .sf-cart-item { padding: 16px 0; border-bottom: 1px solid var(--v3-line-dark); }
.sv-cart .sf-cart-item:last-child { border-bottom: 0; }
.sv-cart .sf-cart-thumb img { width: 52px; height: 64px; object-fit: contain; background: var(--pv-abyss); border: 1px solid var(--v3-line-dark); border-radius: 10px; }
.sv-cart .sf-cart-name { color: var(--v3-on-dark); font-size: 14px; }
.sv-cart .sf-cart-name:hover { color: var(--pv-lavender); }
.sv-cart .sf-cart-unit, .sv-cart .sf-cart-ship, .sv-cart .sf-cart-wholesale { color: var(--v3-on-dark-soft); }
.sv-cart .sf-cart-line, .sv-cart .sf-cart-subtotal, .sv-cart .sf-cart-total, .sv-cart .sf-qty-val { color: var(--v3-on-dark); }
.sv-cart .sf-cart-discount { color: var(--pv-lavender); }
.sv-cart .sf-cart-discount span:last-child { color: var(--pv-cyan); }
.sv-cart .sf-cart-remove { color: var(--pv-lavender); }
.sv-cart .sf-cart-remove:hover { color: var(--v3-on-dark); }
.sv-cart .sf-qty { border-color: var(--v3-line-dark-strong); }
.sv-cart .sf-qty-dec, .sv-cart .sf-qty-inc { background: rgba(255, 255, 255, 0.9); color: var(--v3-on-dark); }
.sv-cart .sf-qty-dec:hover, .sv-cart .sf-qty-inc:hover { background: rgba(58, 75, 200, 0.1); }
.sv-cart .sf-cart-actions .btn-secondary { background: rgba(11, 22, 64, 0.024); border-color: rgba(11, 22, 64, 0.132); color: var(--v3-on-dark); }
.sv-cart .sf-cart-actions .btn-secondary:hover { background: rgba(11, 22, 64, 0.048); border-color: rgba(11, 22, 64, 0.2); color: var(--v3-on-dark); }
.sv-cart .sf-inquiry-link { color: var(--pv-lavender); }
.sv-cart .sf-cart-empty { grid-column: 1 / -1; max-width: 560px; margin: 0 auto; padding: 40px; border: 1px solid var(--v3-card-line); border-radius: var(--v3-radius-card); background: var(--v3-glass-card); color: var(--v3-on-dark-muted); }

/* ---- 404 ---- */
.sv-links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 880px; }
.sv-links a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  border: 1px solid var(--v3-card-line);
  border-radius: 14px;
  background: var(--v3-glass-card);
  color: var(--v3-on-dark);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 220ms var(--v3-ease-out);
}
.sv-links a span { font-size: 12.5px; font-weight: 400; color: var(--v3-on-dark-soft); }
.sv-links a:hover { border-color: var(--v3-card-line-hover); }
.sv-links a:focus-visible { outline: 2px solid var(--v3-focus); outline-offset: 2px; }

/* ---- responsive ---- */
@media (max-width: 1023px) {
  .sv-contact, .sv-intro { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sv-contact-side { position: static; }
  .sv-cart #sfCartPage { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .sv-cart .sf-cart-summary { position: static; }
  .sv-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .sv-sec { padding: 24px 0 72px; }
  .sv-card { padding: 20px 18px; }
  .sv-products { grid-template-columns: minmax(0, 1fr); }
  .sv-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-cart .sf-cart-list { padding: 4px 16px; }
  .sv-cart .sf-cart-summary { padding: 18px; }
  .sv-success { padding: 22px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-faq summary::after, .sv-links a { transition: none; }
}