/*
 * Sm@rt Tech Hub: inner page layouts (v1.2.0)
 * Gives Parts & Accessories, Repairs, About Us and Contact their own section layouts,
 * so they no longer repeat the home page. Only layout and styling change here:
 * the text, images and links inside the Elementor templates stay exactly as they are.
 * Every rule is scoped to .sth-page (inner pages); the home page (#sth-home) is untouched.
 */

/* =====================================================================
   1. Page hero (all inner pages): dark band with a framed photo
   ===================================================================== */
.sth-page .page-hero { background: var(--ink); color: #fff; border-bottom: 0; }
.sth-page .page-hero .hero-bg img { filter: grayscale(.4); }
.sth-page .page-hero .hero-bg::after { background: linear-gradient(100deg, rgba(22,34,58,.97) 0%, rgba(22,34,58,.93) 52%, rgba(22,34,58,.8) 100%); }
.sth-page .page-hero-grid { grid-template-columns: 1.25fr .75fr; padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(56px, 7vw, 104px); }
.sth-page .page-hero h1 { color: #fff; }
.sth-page .page-hero .hero-sub { color: #C9D3E2; }
.sth-page .crumbs { color: #8C99B0; }
.sth-page .crumbs a { color: #C9D3E2; }
.sth-page .crumbs a:hover, .sth-page .crumbs [aria-current] { color: var(--green); }
.sth-page .page-hero .btn-line { border-color: rgba(255,255,255,.75); color: #fff; }
.sth-page .page-hero .btn-line:hover { background: #fff; color: var(--ink); border-color: #fff; }
.sth-page .jump a { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); color: #fff; }
.sth-page .jump a:hover { background: var(--label); border-color: var(--label); color: #fff; }
.sth-page .page-hero-media { aspect-ratio: 4 / 5; max-height: 480px; border-radius: 24px; box-shadow: 16px 16px 0 var(--green); margin-right: 16px; }

/* =====================================================================
   2. About: "Wholesale, repairs and retail" as three open cards
      (the home page uses the expanding photo panels)
   ===================================================================== */
.sth-page .ways-head { grid-template-columns: 1fr; gap: 14px; text-align: center; justify-items: center; }
.sth-page .ways-head h2 { max-width: 22ch; }
.sth-page .ways-head p { justify-self: center; }
.sth-page .ways { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; height: auto; }
.sth-page .way,
.sth-page .way.is-open { flex: none; height: auto; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: 22px; transition: border-color .2s, transform .25s var(--ease), box-shadow .25s; }
.sth-page .way:hover { border-color: var(--ink-3); transform: translateY(-3px); box-shadow: 0 18px 36px -24px rgba(22,34,58,.45); }
.sth-page .way::before { display: none; }
.sth-page .way > .media { position: relative; inset: auto; z-index: 0; aspect-ratio: 4 / 3; }
.sth-page .way > .media img,
.sth-page .way.is-open > .media img { transform: none; }
.sth-page .way-toggle,
.sth-page .way.is-open .way-toggle { position: static; inset: auto; height: auto; padding: 24px 26px 0; cursor: default; pointer-events: none; justify-content: flex-start; gap: 4px; }
.sth-page .way-who,
.sth-page .way.is-open .way-who { display: block; align-self: flex-start; background: none; border: 0; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 1; color: var(--ink-3); font-size: 14px; }
.sth-page .way-name,
.sth-page .way.is-open .way-name { display: block; order: -1; align-self: flex-start; background: var(--label); color: var(--on-label); font-size: 14px; font-weight: 750; padding: 5px 12px; border-radius: 999px; margin-bottom: 10px; font-variation-settings: "wdth" 108; }
.sth-page .way-plus { display: none; }
.sth-page .way-body,
.sth-page .way.is-open .way-body { position: static; opacity: 1; transform: none; pointer-events: auto; transition: none; padding: 10px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.sth-page .way-body h3 { font-size: 22px; max-width: none; }
.sth-page .way-body p { color: var(--ink-2); font-size: 16px; }
.sth-page .way-facts { grid-template-columns: 1fr; gap: 10px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); }
.sth-page .way-body p + .way-facts { margin-top: 20px; }
.sth-page .way-facts div { display: flex; justify-content: space-between; gap: 16px; }
.sth-page .way-facts dt { color: var(--ink-3); }
.sth-page .way-facts dd { margin: 0; text-align: right; font-size: 14px; }

/* =====================================================================
   3. About: location as a dark band, map on the right
   ===================================================================== */
.sth-page #location { background: var(--ink); color: #fff; border: 0; }
.sth-page #location .location { grid-template-columns: 1fr 1.2fr; }
.sth-page #location .map { order: 2; border: 0; box-shadow: 0 0 0 6px rgba(255,255,255,.08); }
.sth-page #location .location-copy h2 { color: #fff; }
.sth-page #location .location-copy > p { color: #C9D3E2; }
.sth-page #location .info-row h4 { color: var(--green); }
.sth-page #location .hours { color: #C9D3E2; }
.sth-page #location .hours div.today { color: #fff; }
.sth-page #location .btn-line { border-color: rgba(255,255,255,.75); color: #fff; }
.sth-page #location .btn-line:hover { background: #fff; color: var(--ink); }

/* =====================================================================
   4. Parts: screen grades as a card row with a dark detail panel
   ===================================================================== */
.sth-page .grade-ui { grid-template-columns: 1fr; gap: 16px; }
.sth-page .grade-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.sth-page .grade-tab { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; min-height: 88px; padding: 18px; border-radius: 16px; background: var(--bench); transition: border-color .2s, background-color .2s; }
.sth-page .grade-tab:hover { border-color: var(--ink-3); }
.sth-page .grade-tab[aria-selected="true"] { background: var(--label); color: #fff; border-color: var(--label); }
.sth-page .grade-tab[aria-selected="true"] small { color: #D6E4FA; }
.sth-page .grade-panel { background: var(--ink); color: #fff; border-color: var(--ink); border-radius: 24px; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); }
.sth-page .grade-panel h3 { color: #fff; }
.sth-page .grade-panel .g-desc { color: #C9D3E2; }
.sth-page .grade-panel .g-best { background: rgba(255,255,255,.07); color: #fff; border-left-color: var(--green); }
.sth-page .meter-row .m-top { color: #fff; }
.sth-page .meter-row .m-top span:last-child { color: #A9B6CA; }
.sth-page .meter { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.16); }
.sth-page .meter i { background: #fff; }
.sth-page .meter.price i { background: var(--green); }
.sth-page .grade-note { color: #A9B6CA; }

/* =====================================================================
   5. Parts: replacement parts as wide rows (photo left, text right)
   ===================================================================== */
.sth-page .drawers.cols-3 { grid-template-columns: repeat(2, 1fr); gap: 14px; }
.sth-page .drawers.cols-3 .drawer { flex-direction: row; align-items: stretch; border-radius: 18px; }
.sth-page .drawers.cols-3 .drawer-media { flex: 0 0 38%; aspect-ratio: auto; min-height: 176px; }
.sth-page .drawers.cols-3 .drawer-body { padding: 20px 22px; }
.sth-page .drawers.cols-3 .drawer h3 { margin-top: 10px; }

/* =====================================================================
   6. Parts: accessories with the intro on top and round product tiles
   ===================================================================== */
.sth-page .acc { grid-template-columns: 1fr; gap: clamp(32px, 4vw, 48px); }
.sth-page .acc > div:first-child { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: end; }
.sth-page .acc-ways { margin-top: 0; }
.sth-page .acc-board { grid-template-columns: repeat(6, 1fr); gap: 18px; }
.sth-page .acc-item { background: none; border: 0; border-radius: 0; text-align: center; overflow: visible; }
.sth-page .acc-media { border-radius: 50%; border: 1px solid var(--line); box-shadow: 0 0 0 6px var(--bench); transition: box-shadow .2s; }
.sth-page .acc-item:hover .acc-media { box-shadow: 0 0 0 6px var(--label); }
.sth-page .acc-item strong { padding: 16px 4px 0; }

/* =====================================================================
   7. Repairs: other repairs as a compact list (square photo left)
   ===================================================================== */
.sth-page .repair-list.cols-3 { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.sth-page .repair-list.cols-3 .repair-card { flex-direction: row; align-items: center; gap: 18px; padding: 12px; border-radius: 18px; transition: border-color .2s; }
.sth-page .repair-list.cols-3 .repair-card:hover { border-color: var(--ink-3); }
.sth-page .repair-list.cols-3 .repair-media { flex: 0 0 112px; aspect-ratio: 1 / 1; border-radius: 12px; }
.sth-page .repair-list.cols-3 .repair-card > div:last-child { padding: 0 8px 0 0; }
.sth-page .repair-list.cols-3 .repair-card strong { font-size: 17px; }

/* =====================================================================
   8. Repairs: walk-in steps as a timeline, quote builder in a dark panel
   ===================================================================== */
.sth-page .process { gap: 0; position: relative; }
.sth-page .process li { background: none; border: 0; border-radius: 0; padding: 0 24px 0 0; position: relative; }
.sth-page .process li::before { content: ""; position: absolute; left: 52px; right: 0; top: 25px; height: 2px; background: var(--line); }
.sth-page .process li:last-child::before { display: none; }
.sth-page .process .step-num { position: relative; z-index: 1; background: var(--label); border-color: var(--label); color: #fff; }
.sth-page .walkin-grid { grid-template-columns: 1.25fr 1fr; margin-top: clamp(40px, 5vw, 64px); }
.sth-page .walkin-grid .info-card { order: 2; }
.sth-page .walkin-grid .quote { background: var(--ink); color: #fff; border-color: var(--ink); border-radius: 24px; }
.sth-page .walkin-grid .quote > p { color: #C9D3E2; }
.sth-page .walkin-grid .quote .chip { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); color: #fff; }
.sth-page .walkin-grid .quote .chip:hover { border-color: #fff; }
.sth-page .walkin-grid .quote .chip[aria-pressed="true"] { background: var(--green); color: var(--ink); border-color: var(--green); }
.sth-page .walkin-grid .quote .input { color: var(--ink); }
.sth-page .walkin-grid .quote .q-summary { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.25); color: #C9D3E2; }
.sth-page .walkin-grid .quote .q-summary b { color: #fff; }
.sth-page .walkin-grid .quote .q-error { color: #FCA5A5; }
.sth-page .walkin-grid .quote .btn-line { border-color: rgba(255,255,255,.75); color: #fff; }
.sth-page .walkin-grid .quote .btn-line:hover { background: #fff; color: var(--ink); }
.sth-page .walkin-grid .quote .btn-ink { background: var(--label); color: #fff; }

/* =====================================================================
   9. Contact: map with the heading in a floating card
   ===================================================================== */
.sth-page #map .wrap { position: relative; }
.sth-page #map .section-head.split { position: absolute; z-index: 2; top: 28px; left: calc(var(--gutter) + 28px); max-width: 380px; margin: 0; flex-direction: column; align-items: flex-start; gap: 20px; background: var(--white); border-radius: 22px; padding: 28px; box-shadow: 0 24px 50px -24px rgba(22,34,58,.5); }
.sth-page #map .section-head h2 { font-size: clamp(26px, 2.6vw, 32px); }
.sth-page #map .section-head p { font-size: 16px; margin-top: 10px; }
.sth-page #map .map-wide { height: clamp(460px, 48vw, 600px); border-radius: 26px; }

/* =====================================================================
   10. Contact: walk-in call to action as a yellow split card
   ===================================================================== */
.sth-page .banner { display: block; min-height: 0; background: var(--bench); padding: var(--section) 0; overflow: visible; }
.sth-page .banner::after { display: none; }
.sth-page .banner-inner { padding-top: 0; padding-bottom: 0; }
.sth-page .banner-card { max-width: none; min-height: 380px; display: flex; flex-direction: column; justify-content: center; background: var(--brand-grad); color: #fff; border-radius: 28px; padding: clamp(32px, 5vw, 64px); padding-right: calc(44% + clamp(32px, 4vw, 56px)); }
.sth-page .banner-card h2 { color: #fff; }
.sth-page .banner-card p { color: #E3ECFA; }
.sth-page .banner-media { inset: auto; z-index: 3; top: var(--section); bottom: var(--section); right: calc((100% - min(100%, var(--wrap))) / 2 + var(--gutter)); width: calc((min(100%, var(--wrap)) - 2 * var(--gutter)) * .44); border-radius: 0 28px 28px 0; }
.sth-page .banner .btn-label { background: #fff; color: var(--ink); }
.sth-page .banner .btn-label:hover { background: var(--ink); color: #fff; }
.sth-page .banner .btn-light { border-color: #fff; color: #fff; }
.sth-page .banner .btn-light:hover { background: #fff; color: var(--ink); }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1140px) {
  .sth-page .acc-board { grid-template-columns: repeat(3, 1fr); }
  .sth-page .grade-tabs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .sth-page .page-hero-grid { grid-template-columns: 1fr; }
  .sth-page .page-hero-media { aspect-ratio: 16 / 10; max-height: 420px; box-shadow: 10px 10px 0 var(--green); margin-right: 10px; }
  .sth-page .ways { grid-template-columns: 1fr; }
  .sth-page .way > .media { aspect-ratio: 16 / 9; }
  .sth-page #location .location { grid-template-columns: 1fr; }
  .sth-page #location .map { order: 0; }
  .sth-page .grade-tabs { display: flex; overflow-x: auto; padding-bottom: 4px; }
  .sth-page .grade-tab { flex: 0 0 auto; min-height: 0; }
  .sth-page .grade-panel { grid-template-columns: 1fr; }
  .sth-page .acc > div:first-child { grid-template-columns: 1fr; gap: 24px; }
  .sth-page .walkin-grid { grid-template-columns: 1fr; }
  .sth-page .walkin-grid .info-card { order: 0; }
  .sth-page .process { gap: 28px 0; }
  .sth-page .process li:nth-child(2)::before { display: none; }
}
@media (max-width: 720px) {
  .sth-page .drawers.cols-3,
  .sth-page .repair-list.cols-3 { grid-template-columns: 1fr; }
  .sth-page #map .section-head.split { position: static; max-width: none; margin-bottom: 20px; box-shadow: none; border: 1px solid var(--line); }
  .sth-page #map .map-wide { height: 380px; }
  .sth-page .banner-media { position: relative; top: auto; bottom: auto; right: auto; width: auto; height: 240px; margin: 0 var(--gutter); border-radius: 28px 28px 0 0; }
  .sth-page .banner-card { min-height: 0; padding-right: clamp(24px, 6vw, 40px); padding-left: clamp(24px, 6vw, 40px); border-radius: 0 0 28px 28px; }
}
@media (max-width: 520px) {
  .sth-page .acc-board { grid-template-columns: repeat(2, 1fr); }
  .sth-page .process { grid-template-columns: 1fr; gap: 0; }
  .sth-page .process li { display: grid; grid-template-columns: 52px 1fr; column-gap: 16px; padding: 0 0 22px; }
  .sth-page .process li .step-num { grid-row: span 2; }
  .sth-page .process h3 { margin-top: 2px; }
  .sth-page .process li::before,
  .sth-page .process li:nth-child(2)::before { display: block; left: 25px; right: auto; top: 52px; bottom: 0; width: 2px; height: auto; }
  .sth-page .process li:last-child::before { display: none; }
  .sth-page .drawers.cols-3 .drawer-media { flex-basis: 36%; min-height: 150px; }
  .sth-page .repair-list.cols-3 .repair-media { flex-basis: 88px; }
}