/* BEGIN style/footer.css */
/* ============================================================
   SS COMPUTERS — SHARED FOOTER
   One visual source of truth for all public pages.
   Future footer design changes should be made ONLY in this file.
   ============================================================ */

.ss-footer,
.ss-footer *{box-sizing:border-box}

.ss-footer{
  margin:0;
  padding:54px 0 18px;
  background:
    radial-gradient(circle at 10% 10%,rgba(14,165,233,.10),transparent 28%),
    radial-gradient(circle at 90% 80%,rgba(37,99,235,.10),transparent 30%),
    linear-gradient(135deg,#061a33 0%,#0b2b50 58%,#071b32 100%);
  color:#dbe7f5;
  border-top:1px solid rgba(56,189,248,.28);
  font-family:Inter,"Segoe UI",Arial,sans-serif;
}

.ss-footer>.container{
  width:min(1180px,92%);
  margin-inline:auto;
}

.ss-footer .footer-grid{
  display:grid;
  grid-template-columns:1.45fr .82fr .88fr 1fr;
  gap:38px;
  align-items:start;
}

.ss-footer .footer-company{min-width:0}

.ss-footer .footer-brand{
  display:flex;
  align-items:center;
  gap:13px;
  margin:0 0 16px;
}

.ss-footer .footer-logo{
  width:70px!important;
  height:70px!important;
  display:block;
  object-fit:contain;
  padding:4px;
  background:#fff;
  border-radius:50%;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}

.ss-footer .footer-brand strong{
  display:block;
  margin:0;
  color:#fff;
  font-size:24px;
  line-height:1.05;
  font-weight:800;
}

.ss-footer .footer-brand small{
  display:block;
  margin-top:5px;
  color:#38bdf8;
  font-size:10px;
  font-weight:800;
  letter-spacing:.7px;
}

.ss-footer .footer-tagline{
  max-width:520px;
  margin:0 0 14px;
  color:#cbd5e1;
  font-size:14px;
  line-height:1.7;
}

.ss-footer .footer-address,
.ss-footer .footer-hours{
  margin:0 0 10px;
  color:#cbd5e1;
  font-size:13.5px;
  line-height:1.65;
}

.ss-footer .line-icon{
  width:18px;
  height:18px;
  margin-right:6px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  vertical-align:-4px;
}

.ss-footer .footer-contact{margin-top:14px}

.ss-footer .footer-contact a,
.ss-footer .footer-links a{
  color:#dbe7f5;
  text-decoration:none;
  transition:color .18s ease,transform .18s ease,background .18s ease;
}

.ss-footer .footer-contact a{
  display:block;
  margin:9px 0;
  font-size:14px;
}

.ss-footer .footer-contact a:hover,
.ss-footer .footer-contact a:focus-visible,
.ss-footer .footer-links a:hover,
.ss-footer .footer-links a:focus-visible{
  color:#7dd3fc;
  outline:none;
}

.ss-footer .footer-contact a:hover,
.ss-footer .footer-links a:hover{transform:translateX(2px)}

.ss-footer h3{
  margin:3px 0 18px;
  color:#fff;
  font-size:18px;
  line-height:1.2;
  font-weight:800;
}

.ss-footer h3::after{
  content:"";
  display:block;
  width:48px;
  height:3px;
  margin-top:9px;
  border-radius:999px;
  background:linear-gradient(90deg,#38bdf8,#2563eb);
}

.ss-footer .footer-links a{
  display:block;
  margin:8px 0;
  font-size:14px;
  line-height:1.35;
}

.ss-footer .footer-links:not(.footer-cta)>a::before{
  content:"›";
  display:inline-block;
  margin-right:8px;
  color:#38bdf8;
  font-size:20px;
  font-weight:800;
  vertical-align:-2px;
}

.ss-footer .footer-cta{
  padding-left:27px;
  border-left:1px solid rgba(148,163,184,.24);
}

.ss-footer .footer-cta .wa-title{
  margin-bottom:8px;
  color:#fff;
  font-size:15px;
  font-weight:800;
}

.ss-footer .footer-cta .wa-btn,
.ss-footer .footer-cta .phone-btn,
.ss-footer .footer-cta .ticket-btn{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  width:100%;
  min-height:48px;
  margin:8px 0 11px;
  padding:9px 13px;
  border-radius:11px;
  color:#fff!important;
  text-decoration:none;
  font-size:14px;
  font-weight:800;
  transform:none!important;
}

.ss-footer .footer-cta .wa-btn{
  background:linear-gradient(135deg,#16a34a,#15803d);
}

.ss-footer .footer-cta .phone-btn{
  background:rgba(37,99,235,.18);
  border:1px solid rgba(56,189,248,.30);
}

.ss-footer .footer-cta .ticket-btn{
  background:linear-gradient(135deg,#0ea5e9,#2563eb);
}

.ss-footer .footer-cta .wa-btn:hover,
.ss-footer .footer-cta .phone-btn:hover,
.ss-footer .footer-cta .ticket-btn:hover{
  filter:brightness(1.06);
}

.ss-footer .footer-action-icon{
  width:28px!important;
  height:28px!important;
  object-fit:contain;
  flex:0 0 28px;
}

.ss-footer .footer-help{
  margin:15px 0 0!important;
  color:#7dd3fc!important;
  text-align:center;
  font-size:15px!important;
  line-height:1.45;
  font-style:italic;
  font-weight:700;
}

.ss-footer .footer-bottom{
  display:grid;
  grid-template-columns:minmax(250px,1.25fr) minmax(190px,.9fr) auto minmax(260px,1.15fr);
  align-items:center;
  column-gap:26px;
  row-gap:0;
  margin-top:38px;
  padding-top:17px;
  border-top:1px solid rgba(148,163,184,.22);
  color:#b9c9da;
  font-size:12.5px;
  line-height:1.45;
}

.ss-footer .footer-bottom>span:first-child{
  grid-column:1;
  justify-self:start;
  white-space:nowrap;
}
.ss-footer .footer-designed{
  grid-column:2;
  justify-self:center;
  text-align:center;
  white-space:nowrap;
}
.ss-footer .footer-bottom strong{color:#38bdf8}

.ss-footer .footer-social{
  grid-column:3;
  justify-self:center;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
}

.ss-footer .footer-social a{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  transition:transform .18s ease,background .18s ease;
}

.ss-footer .footer-social a:hover{
  transform:translateY(-2px);
  background:rgba(56,189,248,.18);
}

.ss-footer .footer-social img{
  width:22px!important;
  height:22px!important;
  object-fit:contain;
}

.ss-footer .footer-pay{
  grid-column:4;
  justify-self:end;
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
}

.ss-footer .footer-pay img{
  width:auto!important;
  height:24px!important;
  max-width:54px;
  object-fit:contain;
  padding:2px 4px;
  background:#fff;
  border-radius:4px;
}

@media (max-width:1000px){
  .ss-footer .footer-grid{
    grid-template-columns:1.35fr 1fr 1fr;
    gap:30px;
  }
  .ss-footer .footer-cta{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:10px 14px;
    padding:22px 0 0;
    border-left:0;
    border-top:1px solid rgba(148,163,184,.24);
  }
  .ss-footer .footer-cta h3,
  .ss-footer .footer-cta .wa-title,
  .ss-footer .footer-cta .footer-help{
    grid-column:1/-1;
  }
  .ss-footer .footer-cta h3{margin-bottom:2px}
  .ss-footer .footer-cta .wa-title{margin-bottom:0}
  .ss-footer .footer-bottom{
    grid-template-columns:minmax(210px,1.2fr) minmax(165px,.9fr) auto minmax(220px,1.1fr);
    column-gap:16px;
    font-size:12px;
  }
  .ss-footer .footer-designed{justify-self:center}
  .ss-footer .footer-social{justify-self:center}
  .ss-footer .footer-pay{justify-self:end}
}

@media (max-width:700px){
  .ss-footer{padding:42px 0 16px}
  .ss-footer>.container{width:min(100% - 28px,560px)}
  .ss-footer .footer-grid{grid-template-columns:1fr;gap:28px}
  .ss-footer .footer-cta{
    grid-column:auto;
    display:block;
    padding:24px 0 0;
  }
  .ss-footer .footer-cta .wa-btn,
  .ss-footer .footer-cta .phone-btn,
  .ss-footer .footer-cta .ticket-btn{justify-content:center}
  .ss-footer .footer-bottom{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
    text-align:center;
    margin-top:30px;
  }
  .ss-footer .footer-bottom>span:first-child,
  .ss-footer .footer-designed,
  .ss-footer .footer-social,
  .ss-footer .footer-pay{
    justify-self:auto;
  }
  .ss-footer .footer-pay{flex-wrap:wrap;justify-content:center}
}

@media (max-width:430px){
  .ss-footer .footer-brand strong{font-size:21px}
  .ss-footer .footer-logo{width:62px!important;height:62px!important}
  .ss-footer h3{font-size:17px}
  .ss-footer .footer-links a,
  .ss-footer .footer-contact a{font-size:13.5px}
}

/* END style/footer.css */
/* BEGIN css/header-navigation.css */
/* ============================================================
   SS COMPUTERS — SHARED CLICK DROPDOWN
   Services / Accessories / Product
   This file controls dropdown visibility only; site.css controls header layout.
   ============================================================ */

#navLinks .dropdown{
  position:relative;
}

#navLinks .dropbtn{
  cursor:pointer;
}

#navLinks .nav-arrow{
  display:inline-block;
  margin-left:4px;
  font-size:.72em;
  transition:transform .18s ease;
}

#navLinks .dropdown.is-open > .dropbtn .nav-arrow{
  transform:rotate(180deg);
}

/* Always closed unless JavaScript adds .is-open. */
#navLinks .dropdown > .menu,
#navLinks .dropdown:hover > .menu,
#navLinks .dropdown:focus-within > .menu{
  position:absolute;
  top:calc(100% + 10px);
  left:50%;
  z-index:5000;
  width:max-content;
  min-width:285px;
  max-width:330px;
  padding:10px;
  margin:0;
  border:1px solid #dfe5ec;
  border-radius:13px;
  background:#fff;
  box-shadow:0 14px 34px rgba(17,36,62,.18);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translate(-50%,8px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}

#navLinks .dropdown > .menu::before{
  content:"";
  position:absolute;
  top:-7px;
  left:50%;
  width:13px;
  height:13px;
  transform:translateX(-50%) rotate(45deg);
  background:#fff;
  border-left:1px solid #dfe5ec;
  border-top:1px solid #dfe5ec;
}

#navLinks .dropdown.is-open > .menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,0);
}

#navLinks .menu a{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:48px;
  padding:9px 12px;
  border-radius:9px;
  color:#243448;
  text-decoration:none;
  font-size:15px;
  font-weight:600;
  line-height:1.25;
}

#navLinks .menu a:hover,
#navLinks .menu a:focus-visible{
  background:#f2f7fd;
  color:#173f7a;
  outline:none;
}

#navLinks .nav-menu-icon{
  width:25px;
  height:25px;
  flex:0 0 25px;
  color:#68798b;
}

/* Mobile accordion */
@media (max-width:900px){
  #navLinks .dropdown{
    width:100%;
  }

  #navLinks .dropdown > .menu,
  #navLinks .dropdown:hover > .menu,
  #navLinks .dropdown:focus-within > .menu{
    position:static;
    width:100%;
    min-width:0;
    max-width:none;
    padding:0 0 6px 12px;
    border:0;
    border-radius:0;
    box-shadow:none;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:none;
    display:none;
  }

  #navLinks .dropdown > .menu::before{
    display:none;
  }

  #navLinks .dropdown.is-open > .menu{
    display:block;
  }

  #navLinks .menu a{
    min-height:44px;
    font-size:14px;
  }
}


/* ============================================================
   CURRENT PAGE HIGHLIGHT — BLUE UNDERLINE
   Applied automatically by header-navigation.js.
   ============================================================ */

#navLinks > a.nav-current:not(.cta),
#navLinks > a[aria-current="page"]:not(.cta),
#navLinks > .dropdown > .dropbtn.nav-current-parent{
  background:#eef6ff!important;
  color:#173f7a!important;
  box-shadow:inset 0 -2px 0 #2563eb!important;
}

/* Keep the red Book Ticket CTA red even on its own page. */
#navLinks > a.cta.nav-current,
#navLinks > a.cta[aria-current="page"]{
  background:#e32626!important;
  color:#fff!important;
  box-shadow:inset 0 -3px 0 #93c5fd!important;
}

/* Highlight the exact current submenu item too. */
#navLinks .menu a.nav-current,
#navLinks .menu a[aria-current="page"]{
  background:#eef6ff!important;
  color:#173f7a!important;
  font-weight:800!important;
  box-shadow:inset 3px 0 0 #2563eb!important;
}

/* Mobile: same active state, clear and touch-friendly. */
@media (max-width:900px){
  #navLinks > a.nav-current:not(.cta),
  #navLinks > a[aria-current="page"]:not(.cta),
  #navLinks > .dropdown > .dropbtn.nav-current-parent{
    box-shadow:inset 3px 0 0 #2563eb!important;
  }
}

/* END css/header-navigation.css */
/* BEGIN style/site-layout-bundle.css */
/* 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 */

/* END style/site-layout-bundle.css */