/**
 * SuperSquare Storefront — Static & CMS Page Template Styles
 *
 * Implements About Editorial, Contact Care Desk, FAQ Accordions,
 * Policy Reading Container with Sticky TOC, Brand Directory, Wishlist, and 404 Error Card.
 *
 * @package SuperSquare_Storefront
 */

.ssq-page-wrapper {
  padding: 2.5rem 0 4.5rem 0;
}

.ssq-page-header {
  margin-bottom: 2.5rem;
}

.ssq-page-title {
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  font-weight: 900;
  color: var(--ssq-text-main, #0f172a);
  margin: 0.25rem 0 0.5rem 0;
  letter-spacing: -0.025em;
}

.ssq-page-subtitle {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ssq-text-secondary, #475569);
  max-width: 680px;
  margin: 0;
}

/* ==========================================================================
   About Us Page: Editorial Layout
   ========================================================================== */
.ssq-about-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.ssq-about-value-card {
  background-color: #ffffff;
  border: 1px solid var(--ssq-border, #e2e8f0);
  border-radius: var(--ssq-radius-xl, 16px);
  padding: 1.75rem;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04);
}

.ssq-value-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background-color: #eff6ff;
  color: var(--ssq-accent, #2563eb);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.25rem;
}

.ssq-value-title {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--ssq-text-main, #0f172a);
  margin-bottom: 0.5rem;
}

.ssq-value-desc {
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--ssq-text-secondary, #475569);
  margin: 0;
}

.ssq-about-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  background: linear-gradient(135deg, #0a192f 0%, #1e3a8a 100%);
  color: #ffffff;
  border-radius: var(--ssq-radius-xl, 16px);
  padding: 2.5rem;
  margin-top: 3.5rem;
}

.ssq-about-cta-content h3 {
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.375rem;
}

.ssq-about-cta-content p {
  color: #cbd5e1;
  margin: 0;
}

/* ==========================================================================
   Contact Page: Care Desk Layout
   ========================================================================== */
.ssq-contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}

.ssq-contact-card {
  background-color: #ffffff;
  border: 1px solid var(--ssq-border, #e2e8f0);
  border-radius: var(--ssq-radius-lg, 12px);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.ssq-contact-card-icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background-color: #eff6ff;
  color: var(--ssq-accent, #2563eb);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.ssq-contact-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ssq-text-main, #0f172a);
  margin-bottom: 0.25rem;
}

.ssq-contact-card-desc {
  font-size: 0.8125rem;
  color: var(--ssq-text-muted, #64748b);
  line-height: 1.4;
  margin-bottom: 0.875rem;
}

.ssq-contact-card-link {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ssq-accent, #2563eb);
  margin-top: auto;
}

.ssq-contact-card-text {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ssq-text-main, #0f172a);
  margin-top: auto;
}

.ssq-contact-social-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background-color: #ffffff;
  border: 1px solid var(--ssq-border, #e2e8f0);
  border-radius: var(--ssq-radius-lg, 12px);
  margin-bottom: 2.5rem;
}

.ssq-contact-social-title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ssq-text-main, #0f172a);
  margin: 0;
}

.ssq-contact-social-rail {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ssq-contact-social-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  background-color: var(--ssq-surface-subtle, #f8fafc);
  border: 1px solid var(--ssq-border, #e2e8f0);
  border-radius: 9999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ssq-text-main, #0f172a);
  transition: all var(--ssq-transition-fast, 0.15s ease);
}

.ssq-contact-social-pill:hover {
  background-color: #eff6ff;
  border-color: #bfdbfe;
  color: var(--ssq-accent, #2563eb);
}

/* ==========================================================================
   FAQ Page: Support Accordion Layout
   ========================================================================== */
.ssq-faq-list {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 860px;
}

.ssq-faq-category {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ssq-faq-cat-title {
  font-size: 1.125rem;
  font-weight: 800;
  color: var(--ssq-text-main, #0f172a);
  margin-bottom: 0.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--ssq-border, #e2e8f0);
}

.ssq-faq-item {
  background-color: #ffffff;
  border: 1px solid var(--ssq-border, #e2e8f0);
  border-radius: var(--ssq-radius-md, 8px);
  overflow: hidden;
  transition: border-color var(--ssq-transition-fast, 0.15s ease);
}

.ssq-faq-item[open] {
  border-color: var(--ssq-accent, #2563eb);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.06);
}

.ssq-faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.125rem 1.25rem;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ssq-text-main, #0f172a);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.ssq-faq-question::-webkit-details-marker {
  display: none;
}

.ssq-faq-chevron {
  color: var(--ssq-text-muted, #94a3b8);
  transition: transform var(--ssq-transition-fast, 0.15s ease);
  flex-shrink: 0;
}

.ssq-faq-item[open] .ssq-faq-chevron {
  transform: rotate(180deg);
  color: var(--ssq-accent, #2563eb);
}

.ssq-faq-answer {
  padding: 0 1.25rem 1.25rem 1.25rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--ssq-text-secondary, #475569);
}

.ssq-faq-answer p:last-child {
  margin-bottom: 0;
}

.ssq-faq-cta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  background-color: #ffffff;
  border: 1px solid var(--ssq-border, #e2e8f0);
  border-radius: var(--ssq-radius-xl, 16px);
  padding: 2rem;
  margin-top: 3.5rem;
  max-width: 860px;
}

.ssq-faq-cta-content h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ssq-text-main, #0f172a);
  margin-bottom: 0.25rem;
}

.ssq-faq-cta-content p {
  color: var(--ssq-text-muted, #64748b);
  margin: 0;
}

/* ==========================================================================
   Policy Page: Legal Reading Layout with Sticky TOC
   ========================================================================== */
.ssq-policy-reading-container {
  max-width: var(--ssq-policy-max-width, 880px);
  margin: 0 auto;
}

.ssq-policy-header {
  margin-bottom: 2rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--ssq-border, #e2e8f0);
}

.ssq-policy-eyebrow {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ssq-accent, #2563eb);
  display: block;
  margin-bottom: 0.25rem;
}

.ssq-policy-title {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 900;
  color: var(--ssq-text-main, #0f172a);
  margin-bottom: 0.75rem;
}

.ssq-policy-meta-bar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  font-size: 0.8125rem;
  color: var(--ssq-text-muted, #64748b);
}

.ssq-policy-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.ssq-policy-print-btn {
  background: transparent;
  border: 1px solid var(--ssq-border, #e2e8f0);
  border-radius: 6px;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ssq-text-main, #0f172a);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.ssq-policy-print-btn:hover {
  background-color: var(--ssq-surface-subtle, #f8fafc);
  color: var(--ssq-accent, #2563eb);
}

/* Policy Body Layout with Table of Contents */
.ssq-policy-body-layout.has-toc {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 2.5rem;
  align-items: flex-start;
}

.ssq-policy-toc-card {
  position: sticky;
  top: 90px;
  background-color: #ffffff;
  border: 1px solid var(--ssq-border, #e2e8f0);
  border-radius: var(--ssq-radius-lg, 12px);
  padding: 1.25rem;
}

.ssq-policy-toc-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ssq-text-main, #0f172a);
  margin-bottom: 0.75rem;
}

.ssq-policy-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: 0.8125rem;
}

.ssq-policy-toc-link {
  color: var(--ssq-text-secondary, #475569);
  transition: color var(--ssq-transition-fast, 0.15s ease);
}

.ssq-policy-toc-link:hover {
  color: var(--ssq-accent, #2563eb);
  padding-left: 2px;
}

.ssq-policy-content {
  background-color: #ffffff;
  border: 1px solid var(--ssq-border, #e2e8f0);
  border-radius: var(--ssq-radius-xl, 16px);
  padding: 2.25rem;
  line-height: 1.8;
}

/* ==========================================================================
   404 Error Page Card
   ========================================================================== */
.ssq-404-wrapper {
  padding: 4rem 0 6rem 0;
}

.ssq-404-card {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  background-color: #ffffff;
  border: 1px solid var(--ssq-border, #e2e8f0);
  border-radius: var(--ssq-radius-xl, 20px);
  padding: 3.5rem 2rem;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
}

.ssq-404-badge {
  display: inline-block;
  font-size: 4rem;
  font-weight: 900;
  color: var(--ssq-accent, #2563eb);
  line-height: 1;
  margin-bottom: 0.5rem;
  letter-spacing: -0.04em;
}

.ssq-404-title {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--ssq-text-main, #0f172a);
  margin-bottom: 0.75rem;
}

.ssq-404-subtext {
  font-size: 0.9375rem;
  color: var(--ssq-text-muted, #64748b);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.ssq-404-search-box {
  margin-bottom: 2rem;
}

.ssq-404-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.ssq-404-popular-cats {
  padding-top: 1.5rem;
  border-top: 1px solid var(--ssq-border, #e2e8f0);
}

.ssq-404-cats-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ssq-text-muted, #64748b);
  margin-bottom: 0.75rem;
}

/* ==========================================================================
   Responsive Adaptations for Pages
   ========================================================================== */
@media (max-width: 991px) {
  .ssq-about-values-grid {
    grid-template-columns: 1fr;
  }

  .ssq-contact-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .ssq-policy-body-layout.has-toc {
    grid-template-columns: 1fr;
  }

  .ssq-policy-toc-card {
    position: static;
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 580px) {
  .ssq-contact-cards-grid {
    grid-template-columns: 1fr;
  }

  .ssq-contact-social-bar {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ==========================================================================
   Print Styles — Policy / Legal Documents
   Triggered by the "Print Document" button on the Policy page template.
   Hides site chrome (header, footer, nav, drawers) so only the legal
   document content itself is printed.
   ========================================================================== */
@media print {
  .ssq-site-header,
  .ssq-mobile-header,
  .ssq-mobile-drawer,
  .ssq-drawer-backdrop,
  .ssq-cart-drawer,
  .ssq-cart-drawer-backdrop,
  .ssq-mobile-bottom-nav,
  .ssq-mobile-sticky-cart,
  .ssq-site-footer,
  .ssq-trust-bar,
  .ssq-catalog-pulse-bar,
  .ssq-policy-print-btn,
  .ssq-policy-meta-actions,
  .skip-link {
    display: none !important;
  }

  .ssq-policy-reading-container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .ssq-policy-body-layout,
  .ssq-policy-body-layout.has-toc {
    display: block !important;
  }

  .ssq-policy-toc-card {
    display: none !important;
  }

  .ssq-policy-content,
  .ssq-policy-prose {
    color: #000 !important;
    font-size: 12pt !important;
    line-height: 1.5 !important;
  }

  a {
    color: #000 !important;
    text-decoration: underline !important;
  }
}

.ssq-faq-supplementary-content {
  margin-top: 2rem;
}
.ssq-standard-archive-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;padding-bottom:3rem}.ssq-standard-archive-card{padding:1.25rem;border:1px solid var(--ssq-border);border-radius:var(--ssq-radius-lg);background:var(--ssq-surface)}.ssq-comments-area{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--ssq-border)}.ssq-comment-list{padding-left:1.25rem}@media(max-width:767px){.ssq-standard-archive-grid{grid-template-columns:1fr}}