/* Approved EBIKE333 visual polish. Existing content and behaviour stay in place. */
:root {
  --polish-ink: #102333;
  --polish-muted: #526577;
  --polish-rule: #d5dee6;
  --polish-amber: #ffb238;
  font-family: Arial, Helvetica, sans-serif;
}
body, body.parts-page, body.shops-page { background: #fff; color: var(--polish-ink); }
body h1, .rider-redesign .intro h1, .guide-main h1, .finder-main h1, .plus-hero h1, .demo-heading h1 {
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.18;
}
body h2, .rider-redesign .panel-head h2, .desk-heading h2 {
  font-size: clamp(24px, 2.3vw, 30px);
  font-weight: 650;
  letter-spacing: -.025em;
  line-height: 1.25;
}
body h3 { font-weight: 650; line-height: 1.35; }
.intro p:not(.eyebrow), .rider-redesign .intro p:not(.eyebrow) {
  font-size: 17px;
  line-height: 1.6;
  color: var(--polish-muted);
}
.eyebrow { font-weight: 650; letter-spacing: .12em; }
button, .button, .primary, .secondary { font-weight: 600; border-radius: 7px; }
input, select, textarea { max-width: 100%; min-width: 0; font-size: 16px; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]), select {
  min-height: 48px;
  background: #fff;
  border-color: #aebbc8;
  border-radius: 6px;
}
input[type=radio], input[type=checkbox] { accent-color: #173d4e; }
label, form label, .fields label, .full-label { font-weight: 600; line-height: 1.5; }
.primary, .parts-page .primary, .masthead nav .nav-primary, .portal-header .nav-primary {
  background: var(--polish-amber);
  color: var(--polish-ink);
  border-color: #d79123;
}
.primary:hover, .parts-page .primary:hover { background: #ffc35f; color: var(--polish-ink); }
.masthead, .rider-redesign .masthead, .portal-header {
  background: #101f2e;
  color: #fff;
  padding: 18px max(24px, 5vw);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
}
.masthead .brand, .rider-redesign .brand, .portal-header .brand { min-width: 190px; gap: 4px; text-decoration: none; }
.masthead .brand-badge, .rider-redesign .brand-badge, .portal-header .brand-badge {
  width: 210px; height: 55px; object-fit: contain; object-position: left;
}
.masthead .brand-descriptor, .portal-header .brand-descriptor { font-size: 12px; font-weight: 400; color: #d5dce4; margin: 0; }
.masthead nav, .rider-redesign .masthead nav, .portal-header nav { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.masthead nav a, .rider-redesign .masthead nav a, .portal-header nav a {
  color: #edf1f5; text-decoration: none; font-size: 15px; font-weight: 600; padding: 12px 0; line-height: 1.4;
}
.masthead nav .nav-primary, .rider-redesign .masthead nav .nav-primary, .portal-header nav .nav-primary { color: #102333; padding: 13px 18px; border-radius: 7px; }
.masthead nav a[aria-current=page]:not(.nav-primary), .masthead nav a.active:not(.nav-primary), .portal-header nav a[aria-current=page]:not(.nav-primary) {
  text-decoration: underline; text-decoration-color: var(--polish-amber); text-underline-offset: 8px; text-decoration-thickness: 3px;
}
.masthead .rider-guides, .portal-header .rider-guides { position: relative; }
.masthead .rider-guides summary, .portal-header .rider-guides summary { color: #edf1f5; min-height: 44px; padding: 12px 0; font-size: 15px; font-weight: 600; cursor: pointer; }
.masthead .rider-guides>div, .portal-header .rider-guides>div { position: absolute; right: 0; top: 100%; z-index: 40; display: grid; min-width: 220px; padding: 12px; background: #101f2e; border: 1px solid #526577; border-radius: 7px; }
.masthead .rider-guides>div a, .portal-header .rider-guides>div a { padding: 12px; }
.portal-header .dealer-access { display: flex; align-items: center; gap: 12px; }
.portal-header .language-choice { flex-wrap: wrap; }
.portal-header .language-choice a { font-size: 12px; }
.polish-mobile-nav { display: none; }

/* The diagnostic accordion keeps its native disclosure and keyboard behaviour. */
.rider-redesign .intro { padding: 32px 0 20px; }
.rider-redesign .intro h1 { margin: 10px 0 14px; }
.rider-redesign .journey-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 0; margin: 8px 0 12px; border-bottom: 1px solid var(--polish-rule); }
.rider-redesign .journey-steps li { justify-content: center; text-align: center; min-height: 48px; padding: 12px 0; font-size: 14px; font-weight: 400; border-bottom: 3px solid transparent; color: var(--polish-muted); }
.rider-redesign .journey-steps li[aria-current=step] { border-bottom-color: var(--polish-amber); color: var(--polish-ink); font-weight: 650; }
.rider-redesign .journey-steps li.complete { color: #173d4e; }
.rider-redesign .journey-steps li span, .identity-step-number { display: none; }
.rider-redesign .identity-accordion { padding: 18px 0; border: 0; border-top: 1px solid var(--polish-rule); border-bottom: 1px solid var(--polish-rule); border-radius: 0; box-shadow: none; }
.rider-redesign .identity-stage-heading { font-size: 19px; font-weight: 650; min-height: 44px; }
.rider-redesign .identity-accordion[open]>summary.identity-stage-heading { margin-bottom: 16px; }
.rider-redesign .motor-setup { flex-direction: column; align-items: stretch; gap: 0; }
.rider-redesign .motor-setup label { min-height: 44px; padding: 10px 0; font-size: 16px; font-weight: 400; white-space: normal; }
.rider-redesign .motor-setup label input { width: 20px; height: 20px; flex-basis: 20px; }
.rider-redesign .motor-setup legend { font-size: 16px; margin-bottom: 8px; }
.rider-redesign .option { box-shadow: none; border-radius: 6px; padding: 15px 16px; font-weight: 600; }
.rider-redesign .primary { font-weight: 600; }
.rider-redesign .ebike-band { border-radius: 10px; background: #f5f7f9; }
.parts-inputs, .diagnostic-evidence-details { border-width: 1px 0; border-radius: 0; padding: 18px 0; }
.parts-page .intro .eyebrow, .parts-page #parts .panel-head .eyebrow { color: #865014; }
.parts-page .workspace { border-color: var(--polish-rule); }

/* Directories and reading pages use rules instead of layers of cards. */
.workspace { box-shadow: none; border-radius: 8px; }
.shop-filters { background: #fff; border-width: 1px 0; border-radius: 0; padding: 22px 0; }
.bc-shop-card { border-width: 1px 0 0; border-radius: 0; padding: 24px 0; box-shadow: none; }
.review-finder { background: #fff; color: var(--polish-ink); border-radius: 0; border-block: 1px solid var(--polish-rule); padding: 24px 0; }
.review-finder h2, .review-finder label, .review-finder .review-filter-help { color: var(--polish-ink); }
.review-controls { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.review-advanced-filters { background: #fff; border-width: 1px 0; border-radius: 0; }
.review-advanced-filters>summary { padding-inline: 0; font-size: 16px; font-weight: 600; }
.review-feature-filters, .review-feature-filters legend { background: #fff; }
.review-card { box-shadow: none; border-radius: 8px; }
.review-specs>div { background: #f5f7f9; border-radius: 3px; }
.review-quick-facts li { border-radius: 5px; background: #f5f7f9; border-color: var(--polish-rule); font-weight: 500; }
.review-fact-icon, .plus-icon, .partner-icon { color: #102333; }
.care-icon { background: transparent; border: 0; }
.care-icon img { width: 38px; height: 38px; display: block; }
.diagnose-wrench img { width: 20px; height: 20px; display: block; }
.care-tip-copy p { line-height: 1.65; }
.care-tip-copy h3 { font-size: 21px; }
.care-top-three h3::before { content: none; }
.care-top-three>li { border-width: 1px 0 0; border-radius: 0; padding: 24px 0; }
.guide-section { border-width: 1px 0 0; border-radius: 0; padding: 28px 0; }
.guide-section.bc-rules { border-left: 5px solid #f7ae4b; padding-left: 20px; }
.class-card { border-radius: 7px; }
.finder-question { border-radius: 7px; box-shadow: none; }
.battery-longevity, .service-reminder { border-radius: 8px; box-shadow: none; }
.method-grid article { border-top-width: 1px; border-top-color: var(--polish-rule); }

/* Portal and dealer tools share the rider site's type, spacing and controls. */
.portal-main { padding-top: 36px; }
.portal-main>.intro { max-width: 900px; }
.portal-main .panel { border-radius: 8px; box-shadow: none; }
.portal-main .panel .panel { border-width: 1px 0 0; border-radius: 0; padding-inline: 0; }
.portal-main .fields { gap: 20px; }
.portal-main .full-label, .portal-main .fields label { font-weight: 600; }
.portal-main:has(.shop-workspace)>.intro { display: block; }
.shop-workspace { gap: 28px; }
.shop-workspace .workspace-side { background: #fff; min-height: 0; border-right: 1px solid var(--polish-rule); border-radius: 0; padding: 12px 18px 12px 0; }
.shop-workspace .workspace-side .workspace-label { color: var(--polish-muted); }
.shop-workspace .workspace-side button, .shop-workspace .workspace-side a { color: var(--polish-ink); border-radius: 0; min-height: 48px; font-size: 15px; }
.shop-workspace .workspace-side button[aria-pressed=true] { background: #f5f7f9; color: var(--polish-ink); border-left: 3px solid var(--polish-amber); }
.shop-workspace .workspace-side button:hover { background: #f5f7f9; }
.queue-table-wrap, .repair-detail, .repair-chart { border-radius: 7px; box-shadow: none; }
.repair-queue th { font-weight: 600; }
.enquiry-stats>div, .membership-dates>div { background: #f5f7f9; border-radius: 5px; }
.plus-benefits article, .partner-benefit { border-width: 1px 0 0; border-radius: 0; }
.plus-icon, .partner-icon { background: transparent; padding: 0; }
.plus-hero-photo img { border-radius: 10px; }
.plus-demo-hero { background: #f5f7f9; border-radius: 8px; }
.demo-panel, .demo-ad, .demo-metrics article { border-radius: 8px; box-shadow: none; }
.portal-footer { line-height: 1.6; gap: 20px; }

/* Safety/status colours and model-photo matching remain owned by their original rules. */
:where(a, button, input, select, textarea, summary):focus-visible { outline: 3px solid #1b6b86; outline-offset: 3px; }
.masthead :where(a, button, summary):focus-visible, .portal-header :where(a, button, summary):focus-visible { outline-color: #ffb238; }
@media (max-width: 1100px) {
  .rider-redesign .journey-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 920px) {
  .masthead, .rider-redesign .masthead, .portal-header { padding: 16px 20px; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 12px; }
  .masthead .brand, .rider-redesign .brand, .portal-header .brand { min-width: 0; }
  .masthead .brand-badge, .rider-redesign .brand-badge, .portal-header .brand-badge { width: 180px; height: 47px; }
  .masthead>nav[aria-label="Main navigation"], .rider-redesign .masthead>nav[aria-label="Main navigation"], .portal-header>.polish-desktop-nav { display: none; }
  .polish-mobile-nav { display: block; flex-shrink: 0; }
  .polish-mobile-nav>summary { cursor: pointer; padding: 12px; min-height: 44px; color: #fff; border: 1px solid #8292a2; border-radius: 6px; font-size: 16px; }
  .masthead .polish-mobile-nav>nav, .portal-header .polish-mobile-nav>nav { position: absolute; z-index: 60; top: 100%; left: 16px; right: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px; margin: 0; max-height: calc(100dvh - 100px); overflow-y: auto; background: #101f2e; border: 1px solid #526577; border-radius: 7px; }
  .masthead .polish-mobile-nav>nav a, .rider-redesign .masthead .polish-mobile-nav>nav a, .portal-header .polish-mobile-nav>nav a { display: block; padding: 12px; font-size: 16px; min-height: 44px; white-space: normal; }
  .portal-header .polish-mobile-nav .dealer-access { display: block; }
  .portal-header .polish-mobile-nav .language-choice { display: flex; }
  .portal-header .polish-mobile-nav .dealer-menu>div { position: static; }
}
@media (max-width: 600px) {
  body h1, .rider-redesign .intro h1, .guide-main h1, .finder-main h1, .plus-hero h1, .demo-heading h1 { font-size: 30px; letter-spacing: -.025em; line-height: 1.2; }
  body h2, .rider-redesign .panel-head h2 { font-size: 24px; }
  .rider-redesign .intro { padding-top: 28px; }
  .rider-redesign .site-layout { padding-inline: 20px; }
  .rider-redesign .journey-steps { gap: 0 8px; }
  .rider-redesign .journey-steps li { font-size: 14px; }
  .rider-redesign .motor-setup label { width: 100%; min-width: 0; }
  .review-controls, .field-grid, .fields, .rider-identity-grid { grid-template-columns: minmax(0, 1fr); }
  .portal-main { padding: 28px 20px 48px; }
  .portal-main .panel { padding: 20px 16px; }
  .shop-workspace .workspace-side { position: static; border-right: 0; border-bottom: 1px solid var(--polish-rule); padding: 0 0 16px; }
  .shop-workspace .workspace-side button { white-space: normal; }
  .review-card, .panel, .workspace-content, .plus-hero-copy { min-width: 0; }
  .actions>* { max-width: 100%; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Portal route styles may arrive after the shared sheet during navigation. */
body .portal-header .brand { display:flex; flex-direction:column; align-items:flex-start; }
body .shop-workspace .workspace-side { background:#fff; color:#102333; min-height:0; border-right:1px solid #d5dee6; border-radius:0; }
body .shop-workspace .workspace-side button { background:transparent; color:#102333; border-radius:0; }
body .shop-workspace .workspace-side button[aria-pressed=true] { background:#f5f7f9; color:#102333; border-left:3px solid #ffb238; }
body .portal-main:has(.shop-workspace)>.intro { display:block; }
body .plus-hero h1, body .demo-heading h1 { font-size:clamp(30px,3.2vw,42px); font-weight:600; line-height:1.18; }
@media(max-width:600px){body .shop-workspace .workspace-side{border-right:0;border-bottom:1px solid #d5dee6;}body .plus-hero h1,body .demo-heading h1{font-size:30px;}}

.deeper-checks{margin:20px 0;padding:18px;border:1px solid #b9c6bd;border-radius:12px;background:#f7f8f3}.deeper-checks>summary{cursor:pointer;font-weight:700;min-height:32px}.deeper-checks textarea{width:100%;box-sizing:border-box}.deeper-checks h4{margin-top:20px}.deeper-checks fieldset{margin:18px 0;padding:14px}.deeper-checks button{min-height:44px}.deeper-checks label{padding:12px 0;line-height:1.5}