/* Shared template for lens replacement and frame repair service pages. */
.service-detail-page { color: #193e68; font-family: Inter, "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif; letter-spacing: 0; }
.service-detail-page * { letter-spacing: 0; }
.service-detail-page :is(.replacement-story-hero, .repairs-directory) { padding: 52px 0 62px; min-height: 0; background: #fff; }
.service-detail-page :is(.replacement-story-layout, .repairs-shell) { width: min(1680px, 92%); max-width: 1680px; margin: 0 auto; }
.service-detail-page :is(.replacement-story-layout, .repair-stage) { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.service-detail-page .repairs-services { margin: 0; padding: 0; border: 0; }
.service-detail-page :is(.replacement-scenes, .repair-stage-media) { min-width: 0; }
.service-detail-page :is(.replacement-scenes__viewport, .repair-stage-viewport) { height: var(--service-stage-height, 470px); min-height: 0; aspect-ratio: auto; border-radius: 7px; }
.service-detail-page :is(.replacement-scene, .repair-stage-scene) { top: 50%; width: 76%; height: 90%; aspect-ratio: auto; border-radius: 7px; box-shadow: 0 22px 46px #02122a33; }
.service-detail-page .replacement-scene.is-active { top: 50%; height: 90%; }
.service-detail-page .replacement-scene[data-position="prev"],
.service-detail-page .repair-stage-scene[data-stage-position="prev"] { transform: translate(-112%, -50%) scale(.76); opacity: .54; filter: saturate(.72) blur(.5px); }
.service-detail-page .replacement-scene[data-position="next"],
.service-detail-page .repair-stage-scene[data-stage-position="next"] { transform: translate(12%, -50%) scale(.76); opacity: .54; filter: saturate(.72) blur(.5px); }
.service-detail-page :is(.replacement-story-copy, .repair-stage-copy) { box-sizing: border-box; min-width: 0; width: 100%; max-width: 560px; display: flex; flex-direction: column; padding-top: var(--service-copy-offset, 23.5px); min-height: var(--service-copy-height, 546px); }
.service-detail-page :is(.service-kicker, .repair-stage-copy .eyebrow) { margin: 0 0 10px; color: #07969e; font-size: 14px; font-weight: 700; line-height: 1.5; }
.service-detail-page :is(.replacement-story-copy__offer, .repair-stage-copy h2) { margin: 0 0 14px; color: #193e68; font-family: inherit; font-size: 30px; font-weight: 750; line-height: 1.35; overflow-wrap: anywhere; }
.service-detail-page :is(.replacement-story-copy__body, .repair-stage-copy > p:not(.eyebrow):not(.repair-stage-note)) { margin: 0 0 20px; color: #526c85; font-size: 15px; line-height: 1.8; max-width: none; }
.service-detail-page .replacement-stock-list { margin: 0 0 20px; }
.service-detail-page .replacement-stock-list > div { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
.service-detail-page .replacement-stock-list p { flex-wrap: wrap; gap: 6px 12px; }
.service-detail-page .replacement-stock-list small { overflow-wrap: anywhere; }
.service-detail-page .replacement-story-facts { margin: 0 0 14px; padding: 16px 0; }
.service-detail-page .replacement-story-facts > div { min-width: 0; }
.service-detail-page .replacement-story-facts dd { font-size: 16px; overflow-wrap: anywhere; }
.service-detail-page :is(.replacement-stock-note, .repair-stage-note) { margin: 0 0 22px; color: #6a7e90; font-size: 12px; line-height: 1.7; text-align: left; }
.service-detail-page .repair-stage-select { display: block; margin: 0 0 14px; }
.service-detail-page .repair-stage-select select { box-sizing: border-box; min-height: 48px; }
.service-detail-page :is(.ark-scene-nav, .repair-gallery-categories) { display: grid; width: 100%; gap: 10px; margin: 14px 0 0; padding: 0; border: 0; }
.service-detail-page .ark-scene-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.service-detail-page .repair-gallery-categories { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.service-detail-page .repair-category-switcher { margin: 0 0 14px; }
.service-detail-page .repair-category-switcher > span { display: block; margin: 0 0 7px; color: #07969e; font-size: 12px; font-weight: 700; line-height: 1.5; }
.service-detail-page .repair-photo-tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; }
.service-detail-page .repair-photo-tabs[hidden] { display: none; }
.service-detail-page .repair-photo-tabs > button { position: relative; box-sizing: border-box; min-width: 0; min-height: var(--service-control-height, 62px); padding: 10px 28px 10px 10px; border: 1px solid #d6e1eb; border-radius: 5px; background: #fff; color: #526c85; font-family: inherit; font-size: 13px; font-weight: 400; line-height: 1.5; text-align: center; overflow-wrap: anywhere; cursor: pointer; }
.service-detail-page .repair-photo-tabs > button[aria-pressed="true"] { border-color: #07969e; background: #edf7f7; color: #193e68; }
.service-detail-page .repair-photo-tabs > button[aria-pressed="true"]::after { content: ""; position: absolute; top: 5px; right: 6px; width: 19px; height: 16px; background: #07969e; mask: url("icons/selected-glasses.svg") center / contain no-repeat; -webkit-mask: url("icons/selected-glasses.svg") center / contain no-repeat; pointer-events: none; }
.service-detail-page :is(.ark-scene-nav, .repair-gallery-categories) > button { position: relative; box-sizing: border-box; min-width: 0; min-height: var(--service-control-height, 62px); padding: 10px 29px 10px 10px; border: 1px solid #d6e1eb; border-radius: 5px; background: #fff; color: #526c85; font-family: inherit; font-size: 13px; font-weight: 400; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }
.service-detail-page :is(.ark-scene-nav, .repair-gallery-categories) > button[aria-pressed="true"] { border-color: #07969e; background: #edf7f7; color: #193e68; }
.service-detail-page .repair-gallery-categories > button[aria-pressed="true"]::after { content: ""; position: absolute; top: 5px; right: 6px; width: 19px; height: 16px; background: #07969e; mask: url("icons/selected-glasses.svg") center / contain no-repeat; -webkit-mask: url("icons/selected-glasses.svg") center / contain no-repeat; pointer-events: none; }
.service-detail-page .service-actions { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: stretch; gap: 12px; margin-top: auto; padding: 0; border: 0; }
.service-detail-page .service-actions > :is(a, button) { box-sizing: border-box; min-width: 0; width: auto; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: var(--service-control-height, 62px); margin: 0; padding: 10px 14px; border: 1px solid #193e68; border-radius: 5px; color: #193e68; background: #fff; font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.5; text-align: center; text-decoration: none; cursor: pointer; overflow-wrap: anywhere; }
.service-detail-page .service-actions > a { order: 0; color: #fff; background: #ff6258; border-color: #ff6258; }
.service-detail-page .service-actions > button { order: 1; }
.service-detail-page .service-actions > a:hover { background: #ee5149; }
.service-detail-page .service-actions > button:hover { background: #edf7f7; }
.service-detail-page .service-whatsapp { width: 24px; height: 24px; flex: 0 0 24px; fill: currentColor; }
@media (max-width: 1100px) {
  .service-detail-page { --service-copy-offset: 21.5px; }
  .service-detail-page :is(.replacement-story-layout, .repair-stage) { grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr); gap: 32px; }
  .service-detail-page :is(.replacement-scenes__viewport, .repair-stage-viewport) { height: var(--service-stage-height, 430px); }
  .service-detail-page :is(.replacement-story-copy, .repair-stage-copy) { min-height: var(--service-copy-height, 506px); }
  .service-detail-page :is(.replacement-story-copy__offer, .repair-stage-copy h2) { font-size: 27px; }
}
@media (max-width: 760px) {
  .service-detail-page :is(.replacement-story-hero, .repairs-directory) { padding: 32px 0 44px; }
  .service-detail-page :is(.replacement-story-layout, .repairs-shell) { width: min(100% - 28px, 620px); }
  .service-detail-page :is(.replacement-story-layout, .repair-stage) { grid-template-columns: 1fr; gap: 30px; }
  .service-detail-page :is(.replacement-story-copy, .repair-stage-copy) { max-width: none; padding-top: 0; min-height: 0; }
  .service-detail-page :is(.replacement-scenes__viewport, .repair-stage-viewport) { height: 390px; }
  .service-detail-page :is(.replacement-scene, .repair-stage-scene), .service-detail-page .replacement-scene.is-active { width: 80%; height: 88%; }
  .service-detail-page .replacement-scene[data-position="prev"], .service-detail-page .repair-stage-scene[data-stage-position="prev"] { transform: translate(-115%, -50%) scale(.78); }
  .service-detail-page .replacement-scene[data-position="next"], .service-detail-page .repair-stage-scene[data-stage-position="next"] { transform: translate(15%, -50%) scale(.78); }
  .service-detail-page :is(.replacement-story-copy__offer, .repair-stage-copy h2) { font-size: 26px; }
  .service-detail-page :is(.ark-scene-nav, .repair-gallery-categories) { gap: 6px; margin-top: 10px; }
  .service-detail-page .repair-gallery-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-detail-page .repair-photo-tabs { gap: 6px; margin-top: 10px; }
  .service-detail-page :is(.ark-scene-nav, .repair-gallery-categories) > button { padding: 8px 25px 8px 6px; font-size: 12px; }
  .service-detail-page .repair-photo-tabs > button { padding: 8px 25px 8px 6px; font-size: 12px; }
  .service-detail-page .replacement-story-facts { grid-template-columns: 1fr; }
  .service-detail-page .replacement-story-facts > div { padding: 8px 0; border: 0; }
  .service-detail-page .replacement-story-facts > div + div { border-top: 1px solid #d6e1eb; }
}
@media (max-width: 460px) {
  .service-detail-page :is(.replacement-scenes__viewport, .repair-stage-viewport) { height: 330px; }
  .service-detail-page :is(.replacement-scene, .repair-stage-scene), .service-detail-page .replacement-scene.is-active { width: 84%; height: 86%; }
  .service-detail-page :is(.replacement-story-copy__offer, .repair-stage-copy h2) { font-size: 24px; }
}
@media (max-width: 380px) {
  .service-detail-page .service-actions { grid-template-columns: 1fr; }
}

/* Keep the related-content and FAQ handoff identical on both service pages. */
.service-detail-page .content-related {
  width: min(1160px, 92%);
  margin: 30px auto 48px;
  padding-top: 22px;
  gap: 10px 36px;
}
.service-detail-page .content-link {
  min-height: 44px;
  align-items: center;
}
@media (max-width: 560px) {
  .service-detail-page .content-related {
    width: calc(100% - 36px);
    margin: 20px auto 32px;
    padding-top: 16px;
    gap: 4px 20px;
  }
}