/**
 * SuperSquare Storefront — Static & CMS Page Template Styles (NEEMROZ)
 *
 * 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.25rem 0 3.75rem}
.ssq-page-breadcrumbs{margin-bottom:1rem;color:var(--ssq-text-muted);font-size:.8125rem}
.ssq-page-breadcrumbs a{color:var(--ssq-text-muted)}
.ssq-page-breadcrumbs a:hover{color:var(--ssq-terracotta)}
.ssq-page-header{max-width:var(--ssq-policy-max-width,860px);margin:0 auto 2rem;padding-bottom:1.1rem;border-bottom:1px solid var(--ssq-border)}
.ssq-page-eyebrow{display:block;margin-bottom:.4rem;color:var(--ssq-terracotta);font-size:.8125rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.ssq-page-title{margin:0;color:var(--ssq-espresso);font-family:var(--ssq-font-heading);font-size:clamp(2rem,3.8vw,2.75rem);font-weight:600;letter-spacing:-.015em}
.ssq-page-subtitle{max-width:660px;margin:0;color:var(--ssq-text-secondary);font-size:1rem;line-height:1.6}

/* Controlled reading width + comfortable premium typography for standard informational pages (About, Contact copy, FAQ intro, and any page rendered through the_content() without a more specific template). */
.ssq-page-reading-container{max-width:var(--ssq-policy-max-width,860px);margin:0 auto}
.ssq-page-content.ssq-prose{font-size:1rem;line-height:1.8}
.ssq-page-content.ssq-prose h2{margin:2rem 0 .85rem;padding-bottom:.5rem;color:var(--ssq-espresso);font-family:var(--ssq-font-heading);font-size:1.6rem;font-weight:600;border-bottom:1px solid var(--ssq-border)}
.ssq-page-content.ssq-prose h3{margin:1.6rem 0 .6rem;color:var(--ssq-espresso);font-family:var(--ssq-font-heading);font-size:1.3rem;font-weight:600}
.ssq-page-content.ssq-prose p{margin:0 0 1.15rem;color:var(--ssq-text-secondary)}
.ssq-page-content.ssq-prose a{color:var(--ssq-terracotta-dark);text-decoration:underline;text-decoration-color:var(--ssq-gold-soft);text-underline-offset:3px}
.ssq-page-content.ssq-prose a:hover{color:var(--ssq-terracotta)}
.ssq-page-content.ssq-prose ul,.ssq-page-content.ssq-prose ol{margin:0 0 1.15rem;padding-left:1.4rem;color:var(--ssq-text-secondary)}
.ssq-page-content.ssq-prose li{margin-bottom:.45rem}
.ssq-page-content.ssq-prose li::marker{color:var(--ssq-terracotta)}
.ssq-page-content.ssq-prose blockquote{margin:1.5rem 0;padding:.15rem 0 .15rem 1.25rem;color:var(--ssq-text-secondary);font-family:var(--ssq-font-heading);font-size:1.15rem;font-style:italic;border-left:3px solid var(--ssq-gold-soft)}
.ssq-page-content.ssq-prose table{width:100%;margin:0 0 1.3rem;border-collapse:collapse}
.ssq-page-content.ssq-prose table th,.ssq-page-content.ssq-prose table td{padding:.65rem .8rem;border:1px solid var(--ssq-border);font-size:.9rem;text-align:left}
.ssq-page-content.ssq-prose table th{color:var(--ssq-espresso);background:var(--ssq-cream)}
.ssq-page-content.ssq-prose img{border-radius:var(--ssq-radius-lg)}
.ssq-page-content.ssq-prose hr{margin:2rem 0;border:0;border-top:1px solid var(--ssq-border)}
.ssq-page-content.ssq-prose .wp-block-quote,.ssq-page-content.ssq-prose .woocommerce-info,.ssq-page-content.ssq-prose .woocommerce-message{padding:1rem 1.25rem;background:var(--ssq-cream);border:0;border-left:3px solid var(--ssq-terracotta);border-radius:var(--ssq-radius-md)}

/* ==========================================================================
   About Us Page: Editorial Layout
   ========================================================================== */
.ssq-about-values-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-bottom:2.5rem}
.ssq-about-value-card{padding:1.5rem;background:var(--ssq-surface);border:1px solid var(--ssq-border);border-radius:var(--ssq-radius-xl);box-shadow:var(--ssq-shadow-xs)}
.ssq-value-icon{display:flex;align-items:center;justify-content:center;width:50px;height:50px;margin-bottom:1.1rem;color:var(--ssq-terracotta-dark);background:var(--ssq-blush);border-radius:var(--ssq-radius-md)}
.ssq-value-title{margin-bottom:.5rem;color:var(--ssq-espresso);font-family:var(--ssq-font-heading);font-size:1.2rem;font-weight:600}
.ssq-value-desc{margin:0;color:var(--ssq-text-secondary);font-size:.875rem;line-height:1.6}

.ssq-about-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;margin-top:3rem;padding:2.25rem;color:var(--ssq-ivory);background:var(--ssq-gradient-celebration);border-radius:var(--ssq-radius-xl)}
.ssq-about-cta-content h3{margin-bottom:.375rem;color:var(--ssq-ivory);font-family:var(--ssq-font-heading);font-size:1.5rem;font-weight:600}
.ssq-about-cta-content p{margin:0;color:var(--ssq-gold-soft)}

/* ==========================================================================
   Contact Page: Care Desk Layout
   ========================================================================== */
.ssq-contact-cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-bottom:2.25rem}
.ssq-contact-card{display:flex;flex-direction:column;padding:1.35rem;background:var(--ssq-surface);border:1px solid var(--ssq-border);border-radius:var(--ssq-radius-lg)}
.ssq-contact-card-icon{display:flex;align-items:center;justify-content:center;width:46px;height:46px;margin-bottom:.9rem;color:var(--ssq-terracotta-dark);background:var(--ssq-blush);border-radius:var(--ssq-radius-sm)}
.ssq-contact-card-title{margin-bottom:.25rem;color:var(--ssq-espresso);font-size:1rem;font-weight:700}
.ssq-contact-card-desc{margin-bottom:.85rem;color:var(--ssq-text-muted);font-size:.8125rem;line-height:1.4}
.ssq-contact-card-link{margin-top:auto;color:var(--ssq-terracotta-dark);font-size:.875rem;font-weight:700}
.ssq-contact-card-text{margin-top:auto;color:var(--ssq-espresso);font-size:.875rem;font-weight:650}

.ssq-contact-social-bar{display:flex;align-items:center;gap:1rem;margin-bottom:2.25rem;padding:1.15rem 1.4rem;background:var(--ssq-surface);border:1px solid var(--ssq-border);border-radius:var(--ssq-radius-lg)}
.ssq-contact-social-title{margin:0;color:var(--ssq-espresso);font-size:.875rem;font-weight:700}
.ssq-contact-social-rail{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.ssq-contact-social-pill{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .875rem;color:var(--ssq-text);background:var(--ssq-cream);border:1px solid var(--ssq-border);border-radius:var(--ssq-radius-full);font-size:.8125rem;font-weight:650;transition:color var(--ssq-transition-fast),background var(--ssq-transition-fast),border-color var(--ssq-transition-fast)}
.ssq-contact-social-pill:hover{color:var(--ssq-terracotta-dark);background:var(--ssq-surface);border-color:var(--ssq-gold-soft)}

/* ==========================================================================
   FAQ Page: Support Accordion Layout
   ========================================================================== */
.ssq-faq-list{display:flex;flex-direction:column;gap:1.75rem;max-width:840px}
.ssq-faq-category{display:flex;flex-direction:column;gap:.7rem}
.ssq-faq-cat-title{margin-bottom:.25rem;padding-bottom:.5rem;color:var(--ssq-espresso);font-family:var(--ssq-font-heading);font-size:1.2rem;font-weight:600;border-bottom:2px solid var(--ssq-border)}

.ssq-faq-item{overflow:hidden;background:var(--ssq-surface);border:1px solid var(--ssq-border);border-radius:var(--ssq-radius-md);transition:border-color var(--ssq-transition-fast)}
.ssq-faq-item[open]{border-color:var(--ssq-gold-soft);box-shadow:var(--ssq-shadow-xs)}
.ssq-faq-question{display:flex;align-items:center;justify-content:space-between;padding:1.05rem 1.2rem;color:var(--ssq-espresso);font-size:.9375rem;font-weight:700;list-style:none;cursor:pointer;user-select:none}
.ssq-faq-question::-webkit-details-marker{display:none}
.ssq-faq-chevron{flex-shrink:0;color:var(--ssq-text-muted);transition:transform var(--ssq-transition-fast)}
.ssq-faq-item[open] .ssq-faq-chevron{color:var(--ssq-terracotta);transform:rotate(180deg)}
.ssq-faq-answer{padding:0 1.2rem 1.2rem;color:var(--ssq-text-secondary);font-size:.875rem;line-height:1.65}
.ssq-faq-answer p:last-child{margin-bottom:0}

.ssq-faq-cta-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1.5rem;max-width:840px;margin-top:3rem;padding:1.85rem;background:var(--ssq-surface);border:1px solid var(--ssq-border);border-radius:var(--ssq-radius-xl)}
.ssq-faq-cta-content h3{margin-bottom:.25rem;color:var(--ssq-espresso);font-family:var(--ssq-font-heading);font-size:1.25rem;font-weight:600}
.ssq-faq-cta-content p{margin:0;color:var(--ssq-text-muted)}

/* ==========================================================================
   Policy Page: Legal Reading Layout with Sticky TOC
   Restrained, readable long-form legal content — no card-ification of paragraphs.
   ========================================================================== */
.ssq-policy-reading-container{max-width:var(--ssq-policy-max-width,860px);margin:0 auto}
.ssq-policy-header{margin-bottom:1.75rem;padding-bottom:1.1rem;border-bottom:1px solid var(--ssq-border)}
.ssq-policy-eyebrow{display:block;margin-bottom:.25rem;color:var(--ssq-terracotta);font-size:.75rem;font-weight:750;letter-spacing:.08em;text-transform:uppercase}
.ssq-policy-title{margin-bottom:.65rem;color:var(--ssq-espresso);font-family:var(--ssq-font-heading);font-size:clamp(1.85rem,3.6vw,2.5rem);font-weight:600}
.ssq-policy-meta-bar{display:flex;align-items:center;gap:1.15rem;color:var(--ssq-text-muted);font-size:.8125rem}
.ssq-policy-meta-item{display:inline-flex;align-items:center;gap:.375rem}
.ssq-policy-print-btn{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .625rem;color:var(--ssq-espresso);background:transparent;border:1px solid var(--ssq-border);border-radius:var(--ssq-radius-sm);font-size:.75rem;font-weight:650;cursor:pointer}
.ssq-policy-print-btn:hover{color:var(--ssq-terracotta-dark);background:var(--ssq-cream)}

.ssq-policy-body-layout.has-toc{display:grid;grid-template-columns:230px 1fr;align-items:flex-start;gap:2.25rem}
.ssq-policy-toc-card{position:sticky;top:90px;padding:1.15rem;background:var(--ssq-surface);border:1px solid var(--ssq-border);border-radius:var(--ssq-radius-lg)}
.ssq-policy-toc-title{display:inline-flex;align-items:center;gap:.5rem;margin-bottom:.7rem;color:var(--ssq-espresso);font-size:.875rem;font-weight:700}
.ssq-policy-toc-list{display:flex;flex-direction:column;gap:.375rem;margin:0;padding:0;font-size:.8125rem;list-style:none}
.ssq-policy-toc-link{color:var(--ssq-text-secondary);transition:color var(--ssq-transition-fast)}
.ssq-policy-toc-link:hover{padding-left:2px;color:var(--ssq-terracotta-dark)}

/* Plain, calm reading surface — text stays text, no unnecessary card chrome per paragraph. */
.ssq-policy-content{padding:0;line-height:1.8;background:transparent;border:0}
.ssq-policy-prose{max-width:72ch}
.ssq-policy-prose h2,.ssq-policy-prose h3{margin:1.75rem 0 .75rem;color:var(--ssq-espresso);font-family:var(--ssq-font-heading);font-weight:600}
.ssq-policy-prose p{margin:0 0 1rem;color:var(--ssq-text-secondary)}
.ssq-policy-prose ul,.ssq-policy-prose ol{margin:0 0 1rem;padding-left:1.35rem;color:var(--ssq-text-secondary)}
.ssq-policy-prose table{width:100%;margin:0 0 1.25rem;border-collapse:collapse}
.ssq-policy-prose table th,.ssq-policy-prose table td{padding:.6rem .75rem;border:1px solid var(--ssq-border);font-size:.875rem;text-align:left}
.ssq-policy-prose table th{background:var(--ssq-cream)}
.ssq-policy-prose :is(h2,h3,h4,h5,h6)[id]{scroll-margin-top:calc(var(--ssq-header-height,72px) + 24px)}

/* ==========================================================================
   404 Error Page Card
   ========================================================================== */
.ssq-404-wrapper{padding:3rem 0 4rem}
.ssq-404-card{max-width:580px;margin:0 auto;padding:3rem 2rem;text-align:center;background:var(--ssq-surface);border:1px solid var(--ssq-border);border-radius:var(--ssq-radius-2xl);box-shadow:var(--ssq-shadow-md)}
.ssq-404-badge{display:inline-block;margin-bottom:.5rem;color:var(--ssq-terracotta);font-family:var(--ssq-font-heading);font-size:3.75rem;font-weight:600;line-height:1;letter-spacing:-.02em}
.ssq-404-title{margin-bottom:.75rem;color:var(--ssq-espresso);font-family:var(--ssq-font-heading);font-size:1.65rem;font-weight:600}
.ssq-404-subtext{margin-bottom:1.75rem;color:var(--ssq-text-muted);font-size:.9375rem;line-height:1.6}
.ssq-404-search-box{margin-bottom:1.75rem}
.ssq-404-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem;margin-bottom:1.75rem}
.ssq-404-popular-cats{padding-top:1.25rem;border-top:1px solid var(--ssq-border)}
.ssq-404-cats-label{display:block;margin-bottom:.7rem;color:var(--ssq-text-muted);font-size:.75rem;font-weight:750;letter-spacing:.06em;text-transform:uppercase}

/* ==========================================================================
   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.25rem}
}

@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
   ========================================================================== */
@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-policy-print-btn,.ssq-policy-meta-actions,.skip-link{display:none!important}
  .ssq-policy-reading-container{max-width:100%!important;margin:0!important;padding: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:1.75rem}

.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;background:var(--ssq-surface);border:1px solid var(--ssq-border);border-radius:var(--ssq-radius-lg)}
.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}
}

/* ==========================================================================
   Wishlist page-level presentation (grid/cards inherited from product-card.css)
   ========================================================================== */
.ssq-wishlist-page-wrapper{padding-block:clamp(2rem,5vw,3.75rem)}
.ssq-wishlist-header{max-width:680px;margin-inline:auto;text-align:center}
.ssq-wishlist-content{margin-top:1.75rem}
.ssq-wishlist-content :is(.ssq-empty-notice,.ssq-wishlist-empty,.woocommerce-info){max-width:640px;margin-inline:auto;padding:clamp(2.25rem,6vw,3.75rem) 1.5rem;color:var(--ssq-text-muted);text-align:center;background:var(--ssq-gradient-cream);border:1px dashed var(--ssq-border-strong);border-radius:var(--ssq-radius-xl)}