/* BEGIN style/site-shell.css */
/* ============================================================
   SS COMPUTERS — UNIFORM PAGE / BANNER WIDTH
   Header, page content, hero/banner and footer use one shell.
   ============================================================ */

:root{
  --ss-shell-max:1180px;
  --ss-shell-width:92%;
}

/* Main website shell: same width used by header/footer. */
body .container,
body .topbar > .container,
body .header > .container.nav,
body .ss-footer > .container{
  width:min(var(--ss-shell-max),var(--ss-shell-width))!important;
  max-width:var(--ss-shell-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

/* Custom page wrappers that did not use .container. */
body :is(
  .home-banner-wrap,
  .cs-wrap,
  .crp-shell,
  .lrn-shell,
  .software-modern-wrap,
  .hinge-modern-wrap,
  .battery-modern-wrap,
  .display-modern-wrap,
  .keyboard-modern-wrap,
  .toner-modern-wrap,
  .refurb-modern-wrap,
  .sc-wrap,
  .ssc-why-banner-container
){
  width:min(var(--ss-shell-max),var(--ss-shell-width))!important;
  max-width:var(--ss-shell-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

/* Networking and security banner containers already use .container,
   but lock them explicitly to the same master shell. */
body :is(
  .network-banner-container,
  .banner-shell
){
  width:100%!important;
  max-width:var(--ss-shell-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

/* Refurbished Store banner has no container wrapper. */
body .ref-banner-link{
  width:min(var(--ss-shell-max),var(--ss-shell-width))!important;
  max-width:var(--ss-shell-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

/* Keep banner artwork inside the same width without cropping.
   Height/aspect ratio remains page-specific. */
body :is(
  .home-banner-images,
  .cs-hero-media,
  .software-modern-banner,
  .hinge-modern-banner,
  .battery-modern-banner,
  .display-modern-banner,
  .keyboard-modern-banner,
  .toner-modern-banner,
  .refurb-modern-banner,
  .sc-banner-frame
){
  max-width:100%!important;
  box-sizing:border-box!important;
}

body :is(
  .home-banner-images img,
  .cs-hero-media img,
  .software-modern-banner img,
  .hinge-modern-banner img,
  .battery-modern-banner img,
  .display-modern-banner img,
  .keyboard-modern-banner img,
  .toner-modern-banner img,
  .refurb-modern-banner img,
  .sc-banner-frame img,
  .network-banner-container img,
  .banner-shell img,
  .ref-banner-link img
){
  max-width:100%!important;
}

/* Blog uses its own isolated header, but align its page shell to 1180px too. */
body .scb-shell,
body .blog-list-page .container,
body .blogpost24-page > .container,
body .blogpost24-page .container.blog-layout-modern{
  width:min(var(--ss-shell-max),var(--ss-shell-width))!important;
  max-width:var(--ss-shell-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  box-sizing:border-box!important;
}

/* Mobile keeps consistent side margins across every page. */
@media (max-width:800px){
  :root{--ss-shell-width:calc(100% - 20px)}

  body .container,
  body .topbar > .container,
  body .header > .container.nav,
  body .ss-footer > .container,
  body :is(
    .home-banner-wrap,
    .cs-wrap,
    .crp-shell,
    .lrn-shell,
    .software-modern-wrap,
    .hinge-modern-wrap,
    .battery-modern-wrap,
    .display-modern-wrap,
    .keyboard-modern-wrap,
    .toner-modern-wrap,
    .refurb-modern-wrap,
    .sc-wrap,
    .ssc-why-banner-container,
    .ref-banner-link,
    .scb-shell,
    .blog-list-page .container,
    .blogpost24-page > .container,
    .blogpost24-page .container.blog-layout-modern
  ){
    width:var(--ss-shell-width)!important;
  }
}

/* END style/site-shell.css */
/* BEGIN style/site-components.css */
/* ============================================================
   SS COMPUTERS — SHARED SITE COMPONENTS
   STEP 1: Typography consistency
   STEP 2: CTA / action consistency
   ============================================================ */

:root{
  --ss-body-size:16px;
  --ss-body-line:1.65;
  --ss-h1-line:1.10;
  --ss-h2-line:1.18;
  --ss-h3-line:1.25;
  --ss-control-height:46px;
  --ss-control-radius:10px;
  --ss-action-gap:10px;
}

/* ---------- STEP 1: TYPOGRAPHY ---------- */
body.ss-unified{
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

body.ss-unified main h1{
  line-height:var(--ss-h1-line)!important;
  letter-spacing:-.025em;
}

body.ss-unified main h2{
  line-height:var(--ss-h2-line)!important;
  letter-spacing:-.018em;
}

body.ss-unified main h3{
  line-height:var(--ss-h3-line)!important;
}

body.ss-unified main p,
body.ss-unified main li{
  line-height:var(--ss-body-line);
}

body.ss-unified main p{
  text-wrap:pretty;
}

body.ss-unified main h1,
body.ss-unified main h2,
body.ss-unified main h3{
  text-wrap:balance;
}

body.ss-unified main ul,
body.ss-unified main ol{
  padding-inline-start:1.35rem;
}

/* ---------- STEP 2: CTA / ACTION GROUPS ---------- */
/* Keep existing page colors/backgrounds, only standardize spacing and controls. */
body.ss-unified :is(
  .page-actions,
  .local-actions,
  .review-cta-actions,
  .about2007-actions,
  .cctv-final-actions,
  .network-final-actions,
  .crp-final-actions,
  .lrn-help-actions,
  .software-cta-actions,
  .hinge-cta-actions,
  .display-cta-actions,
  .toner-cta-actions,
  .refurb-match-actions,
  .seller-actions,
  .acc-actions,
  .mac-actions,
  .cta-row,
  .sc-buttons,
  .ssc-why-banner-actions,
  .why-cta-actions,
  .blog-list-cta-actions,
  .blog-list-hero-actions
){
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:var(--ss-action-gap)!important;
}

body.ss-unified :is(
  .btn,
  .cp-btn,
  .np-btn,
  .cs-btn,
  .crp-btn,
  .crp-amc-btn,
  .lrn-btn,
  .software-btn,
  .hinge-btn,
  .display-btn,
  .toner-btn,
  .refurb-btn,
  .refurb-brand-btn,
  .acc-btn,
  .sc-btn,
  .why-btn,
  .about2007-btn,
  .hero-action,
  .read-article-btn,
  .side-button
){
  min-height:var(--ss-control-height);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border-radius:var(--ss-control-radius)!important;
  font-weight:800;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
}

body.ss-unified :is(
  .local-final,
  .acc-final,
  .keyboard-final,
  .battery-final,
  .amc-final,
  .cctv-final,
  .network-final-section,
  .crp-final,
  .mac-final-cta,
  .review-cta-band,
  .refurb-cta-section,
  .why-cta,
  .software-cta,
  .hinge-cta,
  .display-cta,
  .toner-cta,
  .lrn-help,
  .cta-band,
  .sc-contact-band,
  .blog-list-cta
){
  scroll-margin-top:100px;
}

/* Keep CTA copy readable and balanced without changing page-specific colors. */
body.ss-unified :is(
  .local-final,
  .acc-final,
  .keyboard-final,
  .battery-final,
  .amc-final,
  .cctv-final,
  .network-final-section,
  .crp-final,
  .mac-final-cta,
  .review-cta-band,
  .refurb-cta-section,
  .why-cta,
  .software-cta,
  .hinge-cta,
  .display-cta,
  .toner-cta,
  .lrn-help,
  .cta-band,
  .sc-contact-band,
  .blog-list-cta
) h2{
  margin-bottom:10px;
}

body.ss-unified :is(
  .local-final,
  .acc-final,
  .keyboard-final,
  .battery-final,
  .amc-final,
  .cctv-final,
  .network-final-section,
  .crp-final,
  .mac-final-cta,
  .review-cta-band,
  .refurb-cta-section,
  .why-cta,
  .software-cta,
  .hinge-cta,
  .display-cta,
  .toner-cta,
  .lrn-help,
  .cta-band,
  .sc-contact-band,
  .blog-list-cta
) p{
  margin-top:0;
  margin-bottom:14px;
}

/* Mobile consistency */
@media (max-width:700px){
  body.ss-unified main h1{
    line-height:1.12!important;
  }

  body.ss-unified main h2{
    line-height:1.2!important;
  }

  body.ss-unified :is(
    .page-actions,
    .local-actions,
    .review-cta-actions,
    .about2007-actions,
    .cctv-final-actions,
    .network-final-actions,
    .crp-final-actions,
    .lrn-help-actions,
    .software-cta-actions,
    .hinge-cta-actions,
    .display-cta-actions,
    .toner-cta-actions,
    .refurb-match-actions,
    .seller-actions,
    .acc-actions,
    .mac-actions,
    .cta-row,
    .sc-buttons,
    .ssc-why-banner-actions,
    .why-cta-actions,
    .blog-list-cta-actions,
    .blog-list-hero-actions
  ){
    gap:8px!important;
  }

  body.ss-unified :is(
    .btn,
    .cp-btn,
    .np-btn,
    .cs-btn,
    .crp-btn,
    .crp-amc-btn,
    .lrn-btn,
    .software-btn,
    .hinge-btn,
    .display-btn,
    .toner-btn,
    .refurb-btn,
    .refurb-brand-btn,
    .acc-btn,
    .sc-btn,
    .why-btn,
    .about2007-btn
  ){
    min-height:44px;
  }
}

/* END style/site-components.css */
/* BEGIN style/site-mobile.css */
/* ============================================================
   SS COMPUTERS — STEP 3 MOBILE HARDENING
   Safe shared fixes for 360–430px phones and small tablets.
   Loaded last so all pages follow the same mobile rules.
   ============================================================ */

@media (max-width:900px){

  /* Prevent media and embedded content from exceeding the viewport. */
  body.ss-unified img,
  body.ss-unified video,
  body.ss-unified svg,
  body.ss-unified canvas{
    max-width:100%;
  }

  body.ss-unified iframe{
    max-width:100%!important;
  }

  /* Long URLs, emails and article text must wrap instead of creating sideways scroll. */
  body.ss-unified main,
  body.ss-unified main p,
  body.ss-unified main li,
  body.ss-unified main a,
  body.ss-unified .ss-footer{
    overflow-wrap:anywhere;
    word-break:normal;
  }

  /* Responsive data/code content. */
  body.ss-unified table{
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  body.ss-unified pre,
  body.ss-unified code{
    max-width:100%;
  }

  body.ss-unified pre{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Forms stay inside the phone screen; 16px prevents iOS focus zoom. */
  body.ss-unified input:not([type="checkbox"]):not([type="radio"]),
  body.ss-unified select,
  body.ss-unified textarea{
    max-width:100%;
    box-sizing:border-box;
    font-size:16px;
  }

  body.ss-unified button,
  body.ss-unified a{
    touch-action:manipulation;
  }

  /* Main-site hamburger: proper finger target. */
  body.ss-unified #hamb{
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    line-height:1!important;
  }

  /* Main-site mobile navigation: every first-level item is a full 44px touch target. */
  body.ss-unified #navLinks > a,
  body.ss-unified #navLinks > .dropdown > .dropbtn{
    min-height:44px!important;
    width:100%!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    padding:11px 14px!important;
  }

  body.ss-unified #navLinks .menu a{
    min-height:44px!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    padding-top:9px!important;
    padding-bottom:9px!important;
  }

  /* Blog uses its own isolated navigation; give it the same mobile touch standard. */
  body.ss-unified .scb-hamb{
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  body.ss-unified .scb-nav > a,
  body.ss-unified .scb-nav > .scb-dd > .scb-ddbtn,
  body.ss-unified .scb-menu a{
    min-height:44px!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
  }

  /* Map/contact embeds should fill their card, never spill outside it. */
  body.ss-unified .map iframe,
  body.ss-unified .contact-map iframe,
  body.ss-unified iframe[src*="google"]{
    width:100%!important;
  }

  /* Footer: readable touch targets without changing the approved desktop design. */
  body.ss-unified .ss-footer a{
    min-height:40px;
  }

  body.ss-unified .ss-footer .footer-social a{
    width:40px!important;
    height:40px!important;
    min-width:40px!important;
    min-height:40px!important;
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
  }

  /* Floating support launcher stays safely inside narrow screens. */
  body.ss-unified .ssc-lead-launcher{
    right:10px!important;
    bottom:12px!important;
    max-width:calc(100vw - 20px)!important;
    min-height:44px;
  }

  body.ss-unified .ssc-lead-close{
    width:44px!important;
    height:44px!important;
  }
}

@media (max-width:430px){

  /* Keep cards, grids and flex children shrinkable. */
  body.ss-unified main > *,
  body.ss-unified main section,
  body.ss-unified main article,
  body.ss-unified main aside{
    min-width:0;
    max-width:100%;
  }

  /* Consistent phone-side spacing already comes from site-shell.css;
     this protects full-width controls inside narrow cards. */
  body.ss-unified :is(
    .btn,
    .cp-btn,
    .np-btn,
    .cs-btn,
    .crp-btn,
    .crp-amc-btn,
    .lrn-btn,
    .software-btn,
    .hinge-btn,
    .display-btn,
    .toner-btn,
    .refurb-btn,
    .refurb-brand-btn,
    .acc-btn,
    .sc-btn,
    .why-btn,
    .about2007-btn
  ){
    max-width:100%;
  }
}

/* END style/site-mobile.css */