/* Phase 14: common accessories styles */
/* SS Computers - shared accessory page styles */
/* Common rules extracted from the seven accessory page stylesheets. */

.software-modern-action b,
.hinge-modern-action b,
.battery-modern-action b,
.display-modern-action b,
.keyboard-modern-action b,
.toner-modern-action b,
.refurb-modern-action b {
  margin-top: 10px;
  color: #0874d8;
  font-size: 13px;
}

.software-step-grid,
.software-use-grid-modern,
.software-related-grid,
.hinge-step-grid,
.hinge-problem-grid,
.hinge-brand-grid,
.hinge-related-grid,
.battery-step-grid,
.battery-symptom-grid,
.battery-brand-grid,
.battery-support-grid,
.display-step-grid,
.display-problem-grid-modern,
.display-brand-grid,
.display-related-grid-modern,
.keyboard-step-grid,
.keyboard-problem-grid-modern,
.keyboard-brand-grid,
.keyboard-related-grid-modern,
.toner-step-grid,
.toner-problem-grid-modern,
.toner-related-grid,
.refurb-upgrade-grid-premium {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 18px;
}

.topbar .container {
  flex-wrap: wrap;
  column-gap: 16px;
  row-gap: 3px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.topbar .container>.eco-topline {
  display: block;
  flex: 1 1 280px;
  min-width: 0;
  text-align: center;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.5;
}

.topbar .container>.topbar-call {
  white-space: nowrap;
}

.software-check-grid,
.hinge-check-grid,
.battery-checklist,
.display-check-grid-modern,
.keyboard-check-grid,
.toner-check-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 16px;
  margin-top: 22px;
}

.software-check-item,
.hinge-check-item,
.battery-check-item,
.display-check-item,
.keyboard-check-item,
.toner-check-item {
  padding: 22px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid #d7e7f6;
  box-shadow: 0 12px 28px rgba(18,75,133,.08);
}

.software-check-item p,
.hinge-check-item p,
.battery-check-item p,
.display-check-item p,
.keyboard-check-item p,
.toner-check-item p {
  margin: 8px 0 0;
  color: #647991;
  font-size: 14px;
  line-height: 1.6;
}

.software-confidence-copy h2,
.hinge-confidence-copy h2,
.battery-confidence-copy h2,
.display-confidence-copy h2,
.keyboard-confidence-copy h2,
.toner-confidence-copy h2 {
  margin: 14px 0 0;
  color: #123f7a;
  font-size: clamp(28px,3vw,40px);
  line-height: 1.12;
}

.software-confidence-copy p,
.hinge-confidence-copy p,
.battery-confidence-copy p,
.display-confidence-copy p,
.keyboard-confidence-copy p,
.toner-confidence-copy p {
  margin: 12px 0 0;
  color: #60758d;
  font-size: 16px;
  line-height: 1.7;
}

.software-heading-modern,
.hinge-heading-modern,
.battery-heading,
.display-heading-modern,
.keyboard-heading-modern,
.toner-heading-modern {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 28px;
}

.software-heading-modern h2,
.hinge-heading-modern h2,
.battery-heading h2,
.display-heading-modern h2,
.keyboard-heading-modern h2,
.toner-heading-modern h2 {
  margin: 14px 0 0;
  color: #123f7a;
  font-size: clamp(28px,3vw,42px);
  line-height: 1.15;
}

.software-heading-modern p,
.hinge-heading-modern p,
.battery-heading p,
.display-heading-modern p,
.keyboard-heading-modern p,
.toner-heading-modern p {
  margin: 10px auto 0;
  max-width: 780px;
  color: #60758d;
  font-size: 16px;
  line-height: 1.65;
}

.software-modern-action small,
.hinge-modern-action small,
.battery-modern-action small,
.display-modern-action small,
.keyboard-modern-action small,
.toner-modern-action small {
  margin-top: 8px;
  color: #5e7692;
  font-size: 13px;
  line-height: 1.5;
}

.software-modern-action span,
.hinge-modern-action span,
.battery-modern-action span,
.display-modern-action span,
.keyboard-modern-action span,
.toner-modern-action span {
  color: #68809c;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.software-modern-action strong,
.hinge-modern-action strong,
.battery-modern-action strong,
.display-modern-action strong,
.keyboard-modern-action strong,
.toner-modern-action strong {
  margin-top: 6px;
  color: #123f7a;
  font-size: 18px;
  line-height: 1.25;
}

.software-modern-banner,
.hinge-modern-banner,
.battery-modern-banner,
.display-modern-banner,
.keyboard-modern-banner,
.toner-modern-banner {
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid #d4e5f7;
  background: #fff;
  box-shadow: 0 18px 48px rgba(19,71,127,.12);
}

.software-modern-banner img,
.hinge-modern-banner img,
.battery-modern-banner img,
.display-modern-banner img,
.keyboard-modern-banner img,
.toner-modern-banner img {
  display: block;
  width: 100%;
  height: auto;
}

.software-modern-intro,
.hinge-modern-intro,
.battery-modern-intro,
.display-modern-intro,
.keyboard-modern-intro,
.toner-modern-intro {
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.software-modern-intro p,
.hinge-modern-intro p,
.battery-modern-intro p,
.display-modern-intro p,
.keyboard-modern-intro p,
.toner-modern-intro p {
  margin: 10px 0 0;
  color: #60758d;
  font-size: 15px;
  line-height: 1.65;
}

.software-modern-section,
.software-confidence,
.hinge-modern-section,
.hinge-confidence,
.battery-confidence,
.display-modern-section,
.display-confidence,
.keyboard-modern-section,
.keyboard-confidence,
.toner-modern-section,
.toner-confidence {
  padding: 28px 0;
}

.software-modern-trust,
.hinge-modern-trust,
.battery-modern-trust,
.display-modern-trust,
.keyboard-modern-trust,
.toner-modern-trust {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 14px;
  margin-top: 16px;
}

.software-modern-wrap,
.software-step-strip .container,
.software-modern-section .container,
.software-confidence .container,
.software-modern-cta .container,
.seo-faq .container,
.hinge-modern-wrap,
.hinge-step-strip .container,
.hinge-modern-section .container,
.hinge-confidence .container,
.hinge-modern-cta .container,
.seo-faq .container,
.battery-modern-wrap,.battery-step-strip .container,.battery-section .container,.battery-confidence .container,.battery-cta .container,.seo-faq .container,
.display-modern-wrap,
.display-step-strip .container,
.display-modern-section .container,
.display-confidence .container,
.display-modern-cta .container,
.seo-faq .container,
.keyboard-modern-wrap,
.keyboard-step-strip .container,
.keyboard-modern-section .container,
.keyboard-confidence .container,
.keyboard-cta .container,
.seo-faq .container,
.toner-modern-wrap,
.toner-step-strip .container,
.toner-modern-section .container,
.toner-confidence .container,
.toner-modern-cta .container,
.seo-faq .container {
  width: calc(100% - 48px);
  max-width: 1440px;
  margin: 0 auto;
}

.software-service-card-modern p,
.hinge-problem-card p,
.battery-symptom-card p,
.display-problem-card p,
.keyboard-problem-card p,
.toner-problem-card p {
  margin: 10px 0 0;
  color: #617790;
  font-size: 14px;
  line-height: 1.65;
}

.software-spec-note,
.hinge-spec-note,
.battery-spec-note,
.display-spec-note,
.keyboard-spec-note,
.toner-spec-note {
  margin-top: 14px;
  color: #6b8097;
  font-size: 13px;
  line-height: 1.6;
}

.software-spec-panel,
.hinge-spec-panel,
.battery-spec-panel,
.display-spec-panel,
.keyboard-spec-panel,
.toner-spec-panel {
  padding: 24px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid #d7e7f7;
  box-shadow: 0 14px 34px rgba(17,72,127,.09);
}

.software-spec-row,
.hinge-spec-row,
.battery-spec-row,
.display-spec-row,
.keyboard-spec-row,
.toner-spec-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px dashed #cfe0f3;
}

.software-spec-row span,
.hinge-spec-row span,
.battery-spec-row span,
.display-spec-row span,
.keyboard-spec-row span,
.toner-spec-row span {
  color: #698099;
  font-size: 14px;
}

.software-spec-row:first-child,
.hinge-spec-row:first-child,
.battery-spec-row:first-child,
.display-spec-row:first-child,
.keyboard-spec-row:first-child,
.toner-spec-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.software-step-card,
.hinge-step-card,
.battery-step-card,
.display-step-card,
.keyboard-step-card,
.toner-step-card {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid #d7e7f7;
  box-shadow: 0 10px 24px rgba(17,73,130,.07);
}

.software-step-card p,
.hinge-step-card p,
.battery-step-card p,
.display-step-card p,
.keyboard-step-card p,
.toner-step-card p {
  margin: 7px 0 0;
  color: #657991;
  font-size: 14px;
  line-height: 1.55;
}

.software-step-strip,
.hinge-step-strip,
.battery-step-strip,
.display-step-strip,
.keyboard-step-strip,
.toner-step-strip {
  padding: 6px 0 24px;
}

.software-use-card p,
.hinge-brand-card p,
.battery-brand-card p,
.display-brand-card p,
.keyboard-brand-card p,
.toner-brand-card p {
  margin: 9px 0 0;
  color: #647a92;
  font-size: 14px;
  line-height: 1.6;
}

/* Phase 14: page-specific styles */
/* SS Computers - laptop-battery page styles moved from inline HTML */

/* Environmental message in the existing top contact bar. */


@media (min-width:801px) and (max-width:1160px){.topbar .container>.eco-topline{order:3;flex-basis:100%}}
@media (max-width:800px){.topbar .container{justify-content:center;gap:3px 12px;text-align:center}.topbar .container>span:first-child:not(.eco-topline):not(.topbar-call){display:none}.topbar .container>.topbar-call{order:1}.topbar .container>.eco-topline{order:2;flex:0 0 100%;font-size:13px;font-weight:800}}

.battery-page{background:linear-gradient(180deg,#f7fbff 0%,#f1f7ff 32%,#fff 100%)}
.battery-modern-hero{padding:20px 0 28px;position:relative}


.battery-modern-actions{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:16px;margin:18px 0 0}
.battery-modern-intro,.battery-modern-action{min-width:0;background:rgba(255,255,255,.96);border:1px solid #d7e6f6;border-radius:24px;box-shadow:0 12px 34px rgba(20,73,131,.08)}

.battery-modern-intro span{display:inline-flex;align-items:center;gap:8px;width:max-content;padding:8px 14px;border-radius:999px;background:#e8f3ff;border:1px solid #cfe3fa;color:#0b72df;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.battery-modern-intro h1{margin:14px 0 0;color:#123f7a;font-size:clamp(26px,2.6vw,38px);line-height:1.1}
.battery-modern-intro h1 em{font-style:normal;color:#11a9a0}

.battery-modern-action{padding:20px;text-decoration:none;display:flex;flex-direction:column;justify-content:center;transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease}
.battery-modern-action:hover,.battery-modern-action:focus-visible{transform:translateY(-4px);border-color:#8dc4f5;box-shadow:0 18px 36px rgba(21,85,151,.16);outline:none}


.battery-modern-trust div{padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.96);border:1px solid #dce9f7;color:#38516e;text-align:center;font-size:13px;font-weight:800;box-shadow:0 8px 22px rgba(21,82,141,.05)}


.battery-step-card .num{flex:0 0 58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:26px;font-weight:900}
.battery-step-card:nth-child(1) .num{background:#efe8ff;color:#714cf7;border:1px solid #ddd0ff}
.battery-step-card:nth-child(2) .num{background:#e5f2ff;color:#1578e5;border:1px solid #cce1fa}
.battery-step-card:nth-child(3) .num{background:#e7fbf1;color:#0a9b65;border:1px solid #c9efd9}
.battery-step-card:nth-child(4) .num{background:#fff1df;color:#eb7b00;border:1px solid #f7d8ab}
.battery-step-card h3{margin:0;color:#123f7a;font-size:25px;line-height:1.1}


.battery-section{padding:26px 0}
.battery-light{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#f8fbff 100%)}

.battery-heading span{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:#edf6ff;border:1px solid #d4e7fb;color:#0b70da;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}


.battery-symptom-card{background:#fff;border:1px solid #d9e7f7;border-radius:24px;padding:24px;box-shadow:0 12px 28px rgba(20,78,138,.07)}
.battery-symptom-card .icon{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;font-size:28px;font-weight:900;margin-bottom:16px}
.battery-symptom-card:nth-child(1) .icon{background:#eef0ff;color:#5a54e8}
.battery-symptom-card:nth-child(2) .icon{background:#e8f8ff;color:#0d88d9}
.battery-symptom-card:nth-child(3) .icon{background:#e9fbef;color:#1ca35c}
.battery-symptom-card:nth-child(4) .icon{background:#fff2e8;color:#e06a00}
.battery-symptom-card h3{margin:0;color:#143f79;font-size:22px;line-height:1.2}

.battery-symptom-card ul{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.battery-symptom-card li{position:relative;padding-left:18px;color:#46617f;font-size:13px;line-height:1.45}
.battery-symptom-card li:before{content:"•";position:absolute;left:0;color:#0b72df;font-weight:900}


.battery-brand-card{background:#fff;border:1px solid #d9e7f8;border-radius:24px;padding:24px;box-shadow:0 12px 28px rgba(20,76,134,.08);display:flex;flex-direction:column;min-width:0}
.battery-brand-badge{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:18px;font-weight:900;font-size:18px;background:linear-gradient(135deg,#eff6ff,#dbeeff);color:#0e63bf;border:1px solid #cfe3fa}
.battery-brand-card h3{margin:16px 0 0;color:#123f7a;font-size:21px;line-height:1.25}

.battery-brand-card ul{margin:14px 0 18px;padding:0;list-style:none;display:grid;gap:8px}
.battery-brand-card li{position:relative;padding-left:20px;color:#476180;font-size:13px;line-height:1.45}
.battery-brand-card li:before{content:"✓";position:absolute;left:0;color:#0b7be5;font-weight:900}
.battery-brand-card a{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 14px;border-radius:14px;background:linear-gradient(135deg,#0b72df,#1359c8);color:#fff;text-decoration:none;font-size:13px;font-weight:850;box-shadow:0 8px 18px rgba(11,114,223,.18)}
.battery-brand-card:nth-child(2) .battery-brand-badge{background:linear-gradient(135deg,#eef7ff,#d7ebff);color:#1a78db}
.battery-brand-card:nth-child(3) .battery-brand-badge{background:linear-gradient(135deg,#fff0f0,#ffe0e0);color:#db3c30}
.battery-brand-card:nth-child(4) .battery-brand-badge{background:linear-gradient(135deg,#f0efff,#e3e0ff);color:#5b45d6}
.battery-brand-card:nth-child(5) .battery-brand-badge{background:linear-gradient(135deg,#f3fff1,#dff9d8);color:#2a9e27}
.battery-brand-card:nth-child(6) .battery-brand-badge{background:linear-gradient(135deg,#f4f4f4,#e6e6e6);color:#1d1d1f}
.battery-brand-card:nth-child(7) .battery-brand-badge{background:linear-gradient(135deg,#fff4f2,#ffe6dd);color:#e24620}
.battery-brand-card:nth-child(8) .battery-brand-badge{background:linear-gradient(135deg,#eef9ff,#dcedff);color:#2d7fd2}
.battery-brand-note{margin-top:18px;padding:15px 18px;border:1px solid #d7e5f5;border-radius:16px;background:#fff;color:#5c7086;text-align:center;font-size:13px;line-height:1.55}


.battery-confidence-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:26px;align-items:start}
.battery-confidence-copy{padding:10px 0}
.battery-confidence-copy .mini{display:inline-flex;padding:8px 14px;border-radius:999px;background:#edf5ff;border:1px solid #d7e7fb;color:#0b72df;font-size:12px;font-weight:900;letter-spacing:.11em;text-transform:uppercase}


.battery-check-item strong{display:block;color:#123f7a;font-size:20px;line-height:1.25}

.battery-check-item small{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;color:#0a78e0;font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase}

.battery-spec-panel h3{margin:0 0 18px;color:#123f7a;font-size:28px;line-height:1.15}
.battery-spec-table{display:grid;gap:0}

.battery-spec-row b{justify-self:end;text-align:right;color:#133d79;font-size:15px}


.battery-support-card{padding:24px;border-radius:24px;border:1px solid #d9e7f7;background:#fff;box-shadow:0 12px 28px rgba(20,76,134,.07)}
.battery-support-card .top{display:flex;align-items:center;gap:14px}.battery-support-card .round{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;font-size:25px;font-weight:900}
.battery-support-card:nth-child(1) .round{background:#edf0ff;color:#6050f6}
.battery-support-card:nth-child(2) .round{background:#edf8ff;color:#0b7ed8}
.battery-support-card:nth-child(3) .round{background:#ebfbef;color:#15a362}
.battery-support-card:nth-child(4) .round{background:#fff1e6;color:#ef7b11}
.battery-support-card h3{margin:0;color:#123f7a;font-size:21px;line-height:1.2}
.battery-support-card p{margin:12px 0 0;color:#647991;font-size:14px;line-height:1.65}.battery-support-card a{display:inline-flex;align-items:center;gap:8px;margin-top:14px;color:#0b72df;font-weight:800;text-decoration:none;font-size:13px}

.battery-cta .acc-final-card{border:1px solid #d7e6f7;box-shadow:0 16px 38px rgba(18,77,136,.1)}
.battery-cta .acc-final-card h2{max-width:640px}
.battery-seller-proof{margin-top:0;border-top:1px solid #e2edf8}

@media(max-width:1150px){
  .battery-modern-actions{grid-template-columns:1fr 1fr}.battery-modern-intro{grid-column:1/-1}
  .battery-symptom-grid,.battery-brand-grid,.battery-support-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .battery-confidence-grid{grid-template-columns:1fr}
}
@media(max-width:820px){
  .battery-modern-wrap,.battery-step-strip .container,.battery-section .container,.battery-confidence .container,.battery-cta .container,.seo-faq .container{width:calc(100% - 24px)}
  .battery-step-grid{grid-template-columns:1fr 1fr}
  .battery-step-card{padding:16px 18px}
  .battery-step-card h3{font-size:22px}
}
@media(max-width:620px){
  .battery-modern-hero{padding-top:12px}
  .battery-modern-banner{border-radius:16px}
  .battery-modern-actions,.battery-modern-trust,.battery-step-grid,.battery-symptom-grid,.battery-brand-grid,.battery-checklist,.battery-support-grid{grid-template-columns:1fr}
  .battery-step-card{border-radius:22px}
  .battery-step-card .num{flex-basis:52px;height:52px;font-size:22px}
  .battery-heading h2,.battery-confidence-copy h2,.battery-spec-panel h3{font-size:clamp(24px,7vw,32px)}
  .battery-brand-card,.battery-symptom-card,.battery-support-card,.battery-check-item,.battery-spec-panel,.battery-modern-intro,.battery-modern-action{border-radius:18px}
  .battery-modern-intro{padding:18px}
  .battery-modern-action{padding:18px}
  .battery-step-card{gap:14px}
  .battery-check-item strong{font-size:18px}
  .battery-spec-row{grid-template-columns:1fr}.battery-spec-row b{justify-self:start;text-align:left}
}