/* Shared RUNSHOE design system. Layout remains owned by each screen. */
:root {
  --rs-primary: #075cff;
  --rs-primary-hover: #064acb;
  --rs-ink: #102044;
  --rs-muted: #586b87;
  --rs-border: #dce4ef;
  --rs-background: #f7f9fc;
  --rs-surface: #fff;
  --rs-selected: #edf3ff;
  --rs-accent: #dfff5a;
  --rs-danger: #b42332;
  --rs-success: #176b46;
  --rs-radius: 16px;
  --rs-control-radius: 10px;
  --rs-shadow: 0 4px 18px rgb(16 32 68 / 5%);
  --rs-space-1: 4px;
  --rs-space-2: 8px;
  --rs-space-3: 12px;
  --rs-space-4: 16px;
  --rs-space-6: 24px;
  --rs-font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --b: var(--rs-primary);
  --b2: var(--rs-primary-hover);
  --i: var(--rs-ink);
  --m: var(--rs-muted);
  --l: var(--rs-border);
  --bg: var(--rs-background);
  --surface: var(--rs-surface);
  --surface-2: var(--rs-selected);
  font-family: var(--rs-font);
}
body { background: var(--rs-background); color: var(--rs-ink); font-family: var(--rs-font); }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3 { font-family: var(--rs-font); font-weight: 800; letter-spacing: -.035em; }
p { color: var(--rs-muted); }
:is(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid var(--rs-primary); outline-offset: 3px; }
.rs-app .app>aside { background: var(--rs-surface); border-color: var(--rs-border); box-shadow: none; }
.rs-app .app aside .nav button { color: var(--rs-muted); font-weight: 700; }
.rs-app .app aside .nav button.on, .rs-app .mobile button.on {
  background: var(--rs-selected); color: var(--rs-primary); box-shadow: inset 0 0 0 1px var(--rs-border);
}
.rs-app .app aside .nav button:hover:not(.on) { background: var(--rs-background); color: var(--rs-ink); }
.rs-app .app aside .badge { background: var(--rs-selected); color: var(--rs-primary); }
.rs-app .app aside .logout { color: var(--rs-muted); }
.rs-app .mobile { background: var(--rs-surface); border-color: var(--rs-border); }
/* Shared background for the header and page content. */
.rs-app .app>section { background: var(--rs-background); }
.rs-app .app>section>header {
  --rs-header-height: 72px;
  height: calc(var(--rs-header-height) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) max(clamp(20px, 4vw, 52px), env(safe-area-inset-right, 0px)) 0 max(clamp(20px, 4vw, 52px), env(safe-area-inset-left, 0px));
  background: var(--rs-background); border-bottom: 0; backdrop-filter: none;
}
@media(max-width:900px) {
  .rs-app .app>section>header { --rs-header-height: 64px; padding-inline: max(18px, env(safe-area-inset-left, 0px)) max(18px, env(safe-area-inset-right, 0px)); }
  .rs-app .app>section>main, .rs-app .app>section>main:has(#catalog.on) {
    padding-top: 8px;
    padding-left: max(18px, env(safe-area-inset-left, 0px));
    padding-right: max(18px, env(safe-area-inset-right, 0px));
  }
}
@media(max-width:620px) {
  .rs-app .app>section>header { --rs-header-height: 58px; padding-inline: max(13px, env(safe-area-inset-left, 0px)) max(13px, env(safe-area-inset-right, 0px)); }
  .rs-app .app>section>main, .rs-app .app>section>main:has(#catalog.on) {
    padding-left: max(13px, env(safe-area-inset-left, 0px));
    padding-right: max(13px, env(safe-area-inset-right, 0px));
  }
}
/* Recolor the original artwork; multiply removes its white canvas without a tile. */
.rs-app .logo-tile {
  padding: 0; background: transparent; border: 0; border-radius: 0;
  box-shadow: none;
}
.rs-app .logo-tile .logo { mix-blend-mode: multiply; }
.rs-app .page:focus-visible { outline: none; }
.rs-app .compare:focus-visible { outline: 3px solid var(--rs-primary); outline-offset: -3px; }
.rs-app .account-link, .rs-app .lang-control select { border-radius: var(--rs-control-radius); border-color: var(--rs-border); }
.rs-app .header-right>span { color: var(--rs-muted); }
.rs-app .btn, .rs-landing .button, .rs-seo .seo-cta, .rs-seo .seo-actions a {
  min-height: 44px; border-radius: var(--rs-control-radius); font-family: var(--rs-font); font-weight: 750;
}
.rs-app .btn.primary, .rs-app .hero .btn.primary,
#match .wizard-nav #next, #match .wizard-nav .btn.primary,
#resultsGrid .shoe.premium-card .actions .result-primary-detail,
#catalogGrid .shoe.premium-card .actions .result-primary-detail,
.rs-app #modal .modal-conversion-cta,
.rs-landing .hero .button.primary, .rs-landing .root-closer .button.primary,
.rs-panel button, .rs-seo .seo-cta, .rs-seo .seo-actions .primary {
  background: var(--rs-primary); color: #fff; border-color: var(--rs-primary); box-shadow: none;
  border-radius: var(--rs-control-radius);
}
.rs-app .btn.primary:hover, #match .wizard-nav #next:hover,
#resultsGrid .shoe.premium-card .actions .result-primary-detail:hover,
#catalogGrid .shoe.premium-card .actions .result-primary-detail:hover,
.rs-app #modal .modal-conversion-cta:hover,
.rs-landing .hero .button.primary:hover, .rs-panel button:hover {
  background: var(--rs-primary-hover); color: #fff; border-color: var(--rs-primary-hover);
}
.rs-app .btn.outline, #match .wizard-nav #prev, .rs-seo .seo-actions .secondary {
  background: var(--rs-surface); color: var(--rs-primary); border: 1px solid var(--rs-border); box-shadow: none;
  border-radius: var(--rs-control-radius);
}
.rs-app .btn.outline:hover { background: var(--rs-selected); }
.rs-app .garage-detail, .rs-app .compare-remove, .rs-app .catalog-quick button,
.rs-app .catalog-filter-panel summary {
  color: var(--rs-primary); background: var(--rs-surface); border-color: var(--rs-border); border-radius: var(--rs-control-radius);
}
.rs-app .garage-detail, .rs-app .compare-remove { min-height: 44px; }
.rs-app .hero .btn.outline, .rs-landing .hero .button.secondary {
  background: transparent; color: #fff; border: 1px solid #8ba0c3;
}
.rs-app .card, .rs-app .empty, .rs-app .shoe.premium-card,
.rs-app .rotation-card, .rs-app .garage-card,
:is(#home, #activity) .stats .stat, .rs-seo .seo-card, .rs-seo .seo-shoe,
.rs-panel main, .rs-landing .feature {
  background: var(--rs-surface); border-color: var(--rs-border); border-radius: var(--rs-radius); box-shadow: var(--rs-shadow);
}
.rs-app .empty { padding: 24px; color: var(--rs-muted); font-size: 14px; }
.rs-app .page .head h2, .rs-app .catalog-title-row h2 { color: var(--rs-ink); font-size: clamp(24px, 3vw, 34px); font-weight: 800; }
#results>.head h2, #catalog .catalog-heading h2, #compare .head h2, #garage .head h2, #activity .head h2 {
  font-family: var(--rs-font); font-size: clamp(24px, 3vw, 34px); font-weight: 800; letter-spacing: -.035em;
}
.rs-app .eye, .rs-app .brand, .rs-app .shoe-role { color: var(--rs-primary); }
.rs-app .shoe.premium-card h3, .rs-app .garage h3 { color: var(--rs-ink); font-weight: 800; }
.rs-app .shoe.premium-card .actions { gap: var(--rs-space-2); }
.rs-app .shoe.premium-card .spec-strip span, .rs-app .shoe.premium-card .source-badge { font-size: 10px; }
.rs-app .shoe.premium-card .spec-strip b { font-size: 12px; }
#catalogGrid { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; align-content: start; gap: var(--rs-space-3); }
.rs-app #results.on { display: block; overflow-y: auto; }
.rs-app #results>.head, .rs-app #resultsProfileDetails, .rs-app #resultRefiner, .rs-app #resultsRotationDetails { margin-bottom: var(--rs-space-3); }
#resultsGrid { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: max-content; gap: var(--rs-space-4); overflow: visible; margin-bottom: var(--rs-space-4); }
#resultsGrid .shoe.premium-card { height: auto; }
#resultsGrid .result-winner, #resultsGrid .result-winner:hover { transform: none; }
@media(min-width:901px) {
  #catalogGrid .shoe.premium-card { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--rs-space-3); padding: var(--rs-space-4); }
  #catalogGrid .shoe-top { grid-column: 1 / -1; padding: 0; }
  #catalogGrid .shoe.premium-card .art { grid-column: 1; grid-row: 2; margin: 0; height: 160px; border-radius: var(--rs-control-radius); }
  #catalogGrid .shoe-body { grid-column: 2; grid-row: 2; padding: 0; min-width: 0; }
}
.rs-app .shoe.premium-card .detail { background: var(--rs-primary); color: #fff; border-color: var(--rs-primary); }
.rs-app .field select, .rs-app .field input, .rs-app .gact input,
.rs-panel input, .rs-panel select, .rs-panel textarea {
  background: var(--rs-surface); color: var(--rs-ink); border: 1px solid var(--rs-border); border-radius: var(--rs-control-radius);
  min-height: 44px;
}
.rs-app .field label, .rs-panel label { color: var(--rs-ink); font-weight: 650; }
#home .hero.punch-hero, .rs-landing .hero {
  background: var(--rs-ink); border-color: var(--rs-ink); border-radius: var(--rs-radius); box-shadow: none;
}
#home .hero.punch-hero h1, .rs-landing .hero h1 {
  font-family: var(--rs-font); font-weight: 800; font-size: clamp(36px, 5vw, 60px); line-height: 1.05; letter-spacing: -.04em; color: #fff;
}
#home .hero.punch-hero h1 em, .rs-landing .hero h1 em { color: #fff; font-style: normal; }
#home .hero.punch-hero p, .rs-landing .hero .lead { color: #d5e0f2; }
#home .punch-proof b { font-family: var(--rs-font); font-weight: 800; }
.rs-app .punch-section .head h2, .rs-app .punch-art-type, .rs-app .punch-spotlight-loading strong { font-family: var(--rs-font); }
.rs-app .punch-hero .punch-proof small, .rs-app .punch-promise { color: #bdcce3; }
.rs-app .punch-visual { background: #192f57; border-radius: var(--rs-radius); box-shadow: none; }
.rs-app #home .stats .stat:before { display: none; }
.rs-app #home .stats .stat:after { display: none; }
#match .match-shell { border-color: var(--rs-border); border-radius: var(--rs-radius); box-shadow: var(--rs-shadow); }
#match .wizard { background: var(--rs-surface); }
#match .match-rail { background: var(--rs-ink); }
#match .match-rail h2, #match .match-index strong { font-family: var(--rs-font); letter-spacing: -.035em; font-weight: 800; }
#match .match-rail h2 em { color: #fff; }
#match #wb .q { font-family: var(--rs-font); color: var(--rs-ink); font-weight: 800; letter-spacing: -.035em; }
#match #wb .help { color: var(--rs-muted); }
#match .opt { background: var(--rs-surface); border-color: var(--rs-border); border-radius: var(--rs-control-radius); box-shadow: none; }
#match .opt.sel { background: var(--rs-selected); border-color: var(--rs-primary); box-shadow: inset 3px 0 var(--rs-primary); }
#match .opt b, #match .opt.sel b { color: var(--rs-ink); font-weight: 750; }
#match .opt small, #match .opt.sel small { color: var(--rs-muted); }
#match .opt.sel .opt-num, #match .match-phase { color: var(--rs-primary); }
#match .opt.sel .opt-arrow { background: var(--rs-primary); color: #fff; border-color: var(--rs-primary); }
#match .wizard-nav { background: var(--rs-surface); border-color: var(--rs-border); }
.rs-app .catalog-quick button[aria-pressed="true"], .rs-app .compare-tag,
.rs-app .rank-pill, .rs-app .match-pill, .rs-app .verify-chip {
  background: var(--rs-selected); color: var(--rs-ink); border-color: var(--rs-border); border-radius: var(--rs-control-radius);
}
.rs-app .verify-chip.ok { background: #edf7f1; color: var(--rs-success); }
.rs-app .verify-chip.warn { background: #fff5e6; color: #805100; }
.rs-app #compareBox .ct>.compare-best { background: var(--rs-selected); color: var(--rs-ink); font-weight: 750; }
.rs-app #resultsGrid .result-winner .winner-score { background: var(--rs-selected); color: var(--rs-primary); }
.rs-app #modal { border-color: var(--rs-border); border-radius: var(--rs-radius); background: var(--rs-surface); }
.rs-app #modal .modal-hero { background: var(--rs-ink); }
.rs-app #modal .modal-hero .brand, .rs-app #modal .modal-hero p { color: #c5d5ee; }
.rs-app #modal .modal-conversion-bar { background: var(--rs-surface); color: var(--rs-ink); border-color: var(--rs-border); }
.rs-app #modal .modal-conversion-summary strong { color: var(--rs-ink); }
.rs-app #modal .modal-conversion-summary span, .rs-app #modal .modal-conversion-summary small { color: var(--rs-muted); }
.rs-app .modal-facts, .rs-app .shoe-fit, .rs-app .match-reasons { background: var(--rs-selected); color: var(--rs-ink); border-radius: var(--rs-control-radius); }
.rs-panel { background: var(--rs-background); color: var(--rs-ink); }
.rs-panel main { border: 1px solid var(--rs-border); }
.rs-panel h2 { font-family: var(--rs-font); color: var(--rs-ink); font-weight: 800; }
.rs-panel p, .rs-panel small { color: var(--rs-muted); }
.rs-panel a, .rs-panel .panel-brand small { color: var(--rs-primary); }
.rs-panel .panel-logo { background: var(--rs-primary); padding: 8px; border-radius: var(--rs-control-radius); width: 112px; }
.rs-panel .panel-logo img { filter: invert(1); mix-blend-mode: screen; }
.rs-panel button { border-radius: var(--rs-control-radius); font-weight: 750; }
.rs-panel .account-section { border-color: var(--rs-border); border-radius: var(--rs-control-radius); }
.rs-panel .account-section>summary { color: var(--rs-ink); }
.rs-panel .account-identity { color: var(--rs-ink); background: var(--rs-selected); border-color: var(--rs-border); }
.rs-panel .account-danger>summary { color: var(--rs-danger); }
.rs-panel .account-danger button { background: var(--rs-danger); }
.rs-panel .account-danger button:hover { background: #951b27; }
.rs-landing header, .rs-seo header { background: var(--rs-surface); border-bottom: 1px solid var(--rs-border); }
.rs-landing .bar .public-language, .rs-landing .root-wordmark { color: var(--rs-primary); }
.rs-landing .root-wordmark { background: transparent; padding: 0; border-radius: 0; }
.rs-landing .root-wordmark-mark { background: var(--rs-primary); color: #fff; }
.rs-seo .seo-head>a:first-child { background: transparent; padding: 0; border-radius: 0; }
.rs-landing .root-wordmark img, .rs-seo .seo-head img { width: 96px; height: auto; filter: invert(1); mix-blend-mode: screen; }
.rs-landing .header-link { color: var(--rs-primary); border-color: var(--rs-border); background: var(--rs-surface); border-radius: var(--rs-control-radius); }
.rs-landing .hero { margin: 24px auto; padding: 32px; }
.rs-landing .hero .hint, .rs-landing .root-metrics small { color: #bdcce3; }
.rs-landing .root-metrics b, .rs-landing .track-preview-main strong { font-family: var(--rs-font); }
.rs-landing .track { background: #192f57; border-color: #3a5074; border-radius: var(--rs-radius); }
.rs-landing .features, .rs-landing .seo-discovery, .rs-landing .root-closer { background: var(--rs-background); color: var(--rs-ink); }
.rs-landing .feature-heading h2, .rs-landing .seo-discovery-head h2, .rs-landing .root-closer h2 {
  font-family: var(--rs-font); color: var(--rs-ink); font-weight: 800; font-size: clamp(28px, 4vw, 42px);
}
.rs-landing .root-closer h2 em { color: var(--rs-primary); }
.rs-landing .feature p, .rs-landing .feature-heading p, .rs-landing .seo-discovery-head p { color: var(--rs-muted); }
.rs-landing .feature-num, .rs-landing .feature-heading>span, .rs-landing .seo-discovery-head>span { color: var(--rs-primary); }
.rs-landing .seo-discovery-links a { background: var(--rs-surface); color: var(--rs-primary); border-color: var(--rs-border); border-radius: var(--rs-control-radius); }
.rs-landing .root-stripe { background: var(--rs-selected); color: var(--rs-ink); border-color: var(--rs-border); }
.rs-landing footer { background: var(--rs-surface); color: var(--rs-muted); border-top: 1px solid var(--rs-border); }
.rs-seo .seo-wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--rs-primary); background: transparent; padding: 0; border-radius: 0; font-size: 20px; font-weight: 900; letter-spacing: -.04em; }
.rs-seo .seo-wordmark span { display: grid; place-items: center; width: 38px; height: 38px; flex: none; color: #fff; background: var(--rs-primary); border-radius: 9px; font-size: 26px; font-weight: 900; }
.rs-seo .seo-wordmark b { color: var(--rs-primary); font-size: inherit; }
.rs-seo h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.12; }
.rs-seo .seo-photo { border-color: var(--rs-border); border-radius: var(--rs-radius); }
.rs-seo .seo-fact, .rs-seo .seo-pill, .rs-seo .seo-note { background: var(--rs-selected); border-color: var(--rs-border); color: var(--rs-ink); }
.rs-seo .seo-fact span, .rs-seo .seo-lead, .rs-seo .seo-foot { color: var(--rs-muted); }
.rs-seo .seo-links a, .rs-seo .seo-breadcrumb a { color: var(--rs-primary); }
@media(max-width:620px) {
  #home .hero.punch-hero h1, .rs-landing .hero h1 { font-size: clamp(32px, 9vw, 40px); line-height: 1.08; }
  #home .hero.punch-hero { padding: 22px 18px; }
  #home .hero.punch-hero p { font-size: 14px; line-height: 1.5; }
  .rs-app .field input, .rs-app .field select { font-size: 16px; }
  .rs-app .btn { font-size: 11px; }
  #results .results-head-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--rs-space-2); }
  #resultsGrid .shoe.premium-card .art, #resultsGrid .result-winner .art { height: 96px; }
  #match .wizard { padding: 16px 14px 12px; }
  .rs-panel main { padding: 24px 20px; }
  .rs-landing .hero { padding: 24px 18px; }
  .rs-landing .root-stripe { display: flex; flex-wrap: wrap; gap: 8px 16px; height: auto; }
  .rs-landing .root-stripe i { display: none; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .rs-app .nav button, .rs-app .opt, .rs-app .shoe.premium-card { transition: none; }
}

/* Public landing actions share the same cobalt as the application. */
.rs-landing .hero .button.primary,
.rs-landing .root-closer .button.primary {
  background: var(--rs-primary);
  border-color: var(--rs-primary);
  color: #fff;
  font-weight: 850;
}
.rs-landing .hero .button.primary:hover,
.rs-landing .root-closer .button.primary:hover {
  background: var(--rs-primary-hover);
  border-color: var(--rs-primary-hover);
  color: #fff;
}

/* Responsive product layout: editorial home, readable product grid and focused details. */
.rs-app { font-size: 14px; }
.rs-app .app { grid-template-columns: 190px minmax(0, 1fr); }
.rs-app .app>aside { padding: 24px 16px; }
.rs-app aside .logo-tile { max-width: 140px; margin-bottom: 30px; }
.rs-app aside .nav { gap: 8px; }
.rs-app aside .nav button { min-height: 46px; font-size: 13px; padding: 12px; }
.rs-app .app>section>main { max-width: 1440px; padding: 24px 32px 48px; }
.rs-app .app>section>header { padding-inline: 32px; }
.rs-app .header-right { gap: 12px; }
.rs-app .account-link, .rs-app .lang-control select { font-size: 12px; min-height: 44px; }
.rs-app #home.on { display: block; }
.rs-app #home .hero.punch-hero {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  align-items: center; gap: 28px; min-height: 370px; height: auto;
  padding: 36px; border: 0; border-radius: 18px; isolation: auto;
  background: var(--rs-ink); overflow: hidden;
}
.rs-app #home .punch-hero:before, .rs-app #home .punch-hero:after,
.rs-app #home .punch-visual:before, .rs-app #home .punch-shoe-stage:before,
.rs-app #home .punch-art-type, .rs-app #home .punch-light-ring,
.rs-app #home .punch-visual-foot { display: none; }
.rs-app #home .punch-copy { align-items: flex-start; min-width: 0; }
.rs-app #home .punch-flag { font-size: 11px; letter-spacing: .1em; }
.rs-app #home .hero.punch-hero h1 { font-size: clamp(36px, 4.2vw, 60px); line-height: 1.04; margin: 20px 0 16px; letter-spacing: -.045em; }
.rs-app #home .hero.punch-hero p { font-size: 16px; line-height: 1.55; margin: 0; max-width: 40ch; }
.rs-app #home .hero.punch-hero .actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; width: 100%; }
.rs-app #home .hero.punch-hero .btn { font-size: 12px; min-height: 48px; padding: 12px 16px; width: auto; }
.rs-app #home .punch-proof { display: flex; flex-wrap: wrap; gap: 18px; margin: 22px 0 0; padding: 0; border: 0; }
.rs-app #home .punch-proof>span { display: flex; align-items: baseline; gap: 5px; }
.rs-app #home .punch-proof b { font-size: 16px; }
.rs-app #home .punch-proof small { font-size: 10px; letter-spacing: 0; }
.rs-app #home .punch-promise { font-size: 11px; margin-top: 10px; }
.rs-app #home .punch-visual { display: flex; min-height: 0; max-height: none; height: auto; background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.rs-app #home .punch-spotlight { padding: 0; gap: 14px; }
.rs-app #home .punch-shoe-stage { min-height: 0; }
.rs-app #home .punch-shoe-stage .art { height: 230px; width: 100%; background: #f3f6f8; border-radius: 14px; overflow: hidden; }
.rs-app #home .punch-visual .punch-shoe-stage .art img.real-shoe-img { height: 100%; width: 100%; object-fit: contain; transform: none; filter: none; max-height: none; }
.rs-app #home .punch-shoe-info { grid-template-columns: minmax(0, 1fr) auto; background: transparent; padding: 0; border: 0; backdrop-filter: none; gap: 6px 12px; }
.rs-app #home .punch-shoe-info strong { font-size: 18px; max-width: none; }
.rs-app #home .punch-shoe-info small { font-size: 13px; }
.rs-app #home .punch-shoe-info button { min-height: 44px; min-width: 44px; font-size: 18px; }
.rs-app #home .punch-shoe-stage .product-image-credit,
.rs-app #home .punch-shoe-stage .product-image-credit a { color: var(--rs-muted); font-size: 9px; }
.rs-app #home .home-discovery { display: block; margin: 30px 0; }
.rs-app .home-discovery-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.rs-app .home-discovery-head h2 { font-size: clamp(23px, 2.4vw, 30px); margin: 0 0 7px; }
.rs-app .home-discovery-head p { font-size: 14px; margin: 0; }
.rs-app .home-categories { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
.rs-app .home-categories .btn { font-size: 13px; padding-inline: 18px; }
.rs-app .home-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.rs-app .home-product { min-width: 0; overflow: hidden; background: white; border: 1px solid var(--rs-border); border-radius: 14px; }
.rs-app .home-product .home-product-photo { height: 160px; margin: 0; border-radius: 0; background: #f3f6f8; }
.rs-app .home-product-photo:before, .rs-app .home-product-photo:after { display: none; }
.rs-app .home-product-photo .real-shoe-img { width: 100%; height: 100%; object-fit: contain; }
.rs-app .home-product-copy { padding: 16px; }
.rs-app .home-product-copy .brand { font-size: 11px; line-height: 1.4; }
.rs-app .home-product-copy h3 { font-size: 17px; line-height: 1.25; margin: 7px 0 10px; }
.rs-app .home-product-specs { display: flex; flex-wrap: wrap; gap: 14px; font-size: 13px; color: var(--rs-muted); }
.rs-app .home-product-footer { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: 16px; }
.rs-app .home-product-footer small { display: block; font-size: 10px; color: var(--rs-muted); }
.rs-app .home-product-footer strong { font-size: 22px; }
.rs-app .home-product-footer .btn { font-size: 11px; }
.rs-app #home>.stats { margin: 24px 0; padding: 18px 0; border-block: 1px solid var(--rs-border); }
.rs-app #home>.stats .stat { background: transparent; border: 0; box-shadow: none; padding: 0 12px; }
.rs-app #home>.stats .stat b { font-size: 24px; }
.rs-app #home>.stats .stat span { font-size: 11px; }
.rs-app #home .install-card { margin: 24px 0; padding: 16px; }
.rs-app #home>.punch-section { display: none; }

.rs-app #catalogGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.rs-app #catalogGrid .shoe.premium-card { position: relative; display: flex; flex-direction: column; width: 100%; max-width: none; height: auto; margin: 0; padding: 0; border-radius: 14px; gap: 0; transform: none; }
.rs-app #catalogGrid .shoe-top { position: absolute; inset: 12px 12px auto auto; padding: 0; z-index: 2; }
.rs-app #catalogGrid .match-pill { font-size: 11px; background: white; padding: 6px 9px; }
.rs-app #catalogGrid .shoe.premium-card .art { flex: none; height: 200px; width: 100%; margin: 0; border-radius: 0; background: #f3f6f8; }
.rs-app #catalogGrid .art:after { display: none; }
.rs-app #catalogGrid .art img.real-shoe-img { width: 100%; height: 100%; object-fit: contain; padding: 14px; }
.rs-app #catalogGrid .shoe-body { display: flex; flex: 1; flex-direction: column; min-width: 0; padding: 18px; }
.rs-app #catalogGrid .brand { font-size: 11px; }
.rs-app #catalogGrid .shoe-role { display: none; }
.rs-app #catalogGrid .shoe-body h3 { font-size: 20px; line-height: 1.2; margin: 8px 0 12px; }
.rs-app #catalogGrid .verification-row, .rs-app #catalogGrid .source-badge, .rs-app #catalogGrid .freshness { display: none; }
.rs-app #catalogGrid .spec-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0 0 12px; padding: 12px 0; border: 0; border-block: 1px solid var(--rs-border); border-radius: 0; }
.rs-app #catalogGrid .spec-strip>div { padding: 0; border: 0; background: transparent; min-width: 0; }
.rs-app #catalogGrid .spec-strip>div:last-child { grid-column: 1/-1; display: flex; gap: 8px; align-items: baseline; }
.rs-app #catalogGrid .spec-strip span { font-size: 11px; line-height: 1.4; white-space: nowrap; }
.rs-app #catalogGrid .spec-strip b { font-size: 14px; margin: 0; }
.rs-app #catalogGrid .why { display: block; font-size: 13px; line-height: 1.5; margin: 0 0 16px; min-height: 0; overflow: visible; -webkit-line-clamp: unset; }
.rs-app #catalogGrid .shoe-price-row { margin-top: auto; padding-top: 12px; }
.rs-app #catalogGrid .price-stack>span { font-size: 10px; }
.rs-app #catalogGrid .price { font-size: 26px; }
.rs-app #catalogGrid .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.rs-app #catalogGrid .actions .detail { order: -1; grid-column: 1/-1; min-height: 46px; }
.rs-app #catalogGrid .btn { font-size: 11px; min-height: 44px; padding: 10px 6px; white-space: normal; }
.rs-app #catalogGrid .shoe-body>.buy-link { display: none; }
.rs-app #catalogGrid .catalog-empty { grid-column: 1/-1; }
/* Manufacturer product photos are contained by the shared framing rule below. */
.rs-app #catalog .catalog-intro { font-size: 14px; }
.rs-app #catalog .catalog-quick { flex-wrap: wrap; overflow: visible; gap: 8px; }
.rs-app #catalog .catalog-quick button { min-height: 44px; font-size: 12px; }

.rs-app #modal { width: min(1000px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); overflow-y: auto; }
.rs-app #modal .modal-shell { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); max-height: none; overflow: visible; border-radius: 0; }
.rs-app #modal .modal-hero { align-self: start; position: sticky; top: 0; padding: 28px; background: var(--rs-ink); }
.rs-app #modal .modal-hero h2 { font-size: 28px; line-height: 1.15; margin: 12px 36px 12px 0; }
.rs-app #modal .modal-hero p { font-size: 14px; line-height: 1.5; }
.rs-app #modal .modal-hero .brand { font-size: 11px; }
.rs-app #modal .modal-hero .art { height: 240px; background: #f3f6f8; margin-top: 20px; }
.rs-app #modal .modal-hero .art img { object-fit: contain; }
.rs-app #modal .modal-content { padding: 24px; overflow: visible; }
.rs-app #modal .modal-actions { margin: 0 0 20px; }
.rs-app #modal .decision-grid { grid-template-columns: 1fr; gap: 0; margin: 20px 0; }
.rs-app #modal .decision { padding: 12px 0; border: 0; border-bottom: 1px solid var(--rs-border); border-radius: 0; }
.rs-app #modal .decision span, .rs-app #modal .fact span { font-size: 11px; }
.rs-app #modal .decision b, .rs-app #modal .fact b { font-size: 14px; line-height: 1.5; }
.rs-app #modal .facts { grid-template-columns: 1fr 1fr; border: 0; background: transparent; gap: 0; }
.rs-app #modal .fact { padding: 12px 0; background: transparent; border-bottom: 1px solid var(--rs-border); }
.rs-app #modal .shoe-fit, .rs-app #modal .shoe-caution { padding: 16px; margin: 18px 0; font-size: 13px; }
.rs-app #modal .match-reasons, .rs-app #modal .match-cautions { font-size: 13px; line-height: 1.6; }
.rs-app #modal .product-review { margin: 18px 0; font-size: 13px; }
.rs-app #modal .product-review summary { min-height: 44px; padding-block: 12px; }
.rs-app #modal .alt-grid { grid-template-columns: 1fr; gap: 8px; }
.rs-app #modal .alt-card { min-height: 54px; padding: 12px; }
.rs-app #modal .alt-card b { font-size: 14px; }
.rs-app #modal .alt-card small { font-size: 12px; }
.rs-app #modal .modal-price-panel { display: block; padding: 16px 0; margin-top: 20px; }
.rs-app #modal .modal-price-panel .manufacturer-link { display: none; }
.rs-app #modal .modal-conversion-bar { grid-column: 1/-1; background: white; padding: 14px 20px; border-top: 1px solid var(--rs-border); }
.rs-app #modal .modal-conversion-cta { font-size: 12px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; }
.rs-app #modal .modal-hero .close { min-width: 44px; min-height: 44px; }
@media(min-width:1200px) { .rs-app #catalogGrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media(max-width:1100px) {
  .rs-app .app { grid-template-columns: 170px minmax(0, 1fr); }
  .rs-app .app>section>main { padding-inline: 24px; }
  .rs-app #home .hero.punch-hero { padding: 26px; gap: 20px; }
  .rs-app #home .punch-shoe-stage .art { height: 200px; }
}
@media(max-width:900px) {
  .rs-app .app { display: flex; }
  .rs-app .app>section>main, .rs-app .app>section>main:has(#catalog.on) { padding: 12px 20px calc(82px + env(safe-area-inset-bottom, 0px)); padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
  .rs-app .app>section>header { padding-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px)); }
  .rs-app #home.on { display: block; height: 100%; overflow-y: auto; }
  .rs-app #home .hero.punch-hero { grid-template-columns: 1fr 1fr; padding: 26px; min-height: 0; gap: 20px; }
  .rs-app #home .hero.punch-hero h1 { font-size: 38px; }
  .rs-app #home .hero.punch-hero .actions { display: grid; grid-template-columns: 1fr; margin-top: 18px; }
  .rs-app #home .hero.punch-hero .btn { width: 100%; }
  .rs-app .home-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rs-app .home-product:last-child { grid-column: 1/-1; display: grid; grid-template-columns: 200px minmax(0, 1fr); }
  .rs-app .home-product:last-child .art { height: 100%; min-height: 160px; }
  .rs-app #catalogGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-bottom: 4px; }
  .rs-app #catalog .catalog-heading { margin-bottom: 12px; }
  .rs-app #catalog .catalog-tools { padding: 8px 0; }
  .rs-app #catalog .catalog-status { font-size: 12px; }
}
@media(max-width:700px) {
  .rs-app #home .hero.punch-hero { grid-template-columns: 1fr; padding: 18px; gap: 16px; }
  .rs-app #home .punch-visual { display: flex; }
  .rs-app #home .punch-shoe-stage .art { height: 120px; }
  .rs-app #home .punch-flag { display: none; }
  .rs-app #home .punch-proof { display: none; }
  .rs-app #home .hero.punch-hero h1 { font-size: clamp(32px, 8.7vw, 44px); margin: 12px 0; }
  .rs-app #home .hero.punch-hero p { font-size: 14px; line-height: 1.45; }
  .rs-app #home .hero.punch-hero .btn { min-height: 44px; }
  .rs-app #home .punch-proof>span:last-child { display: none; }
  .rs-app #home .punch-proof small { font-size: 9px; }
  .rs-app #home .punch-shoe-info strong { font-size: 17px; }
  .rs-app #home .home-discovery { margin: 24px 0; }
  .rs-app .home-discovery-head { display: block; }
  .rs-app .home-discovery-head>.btn { display: none; }
  .rs-app .home-products { grid-template-columns: 1fr; gap: 12px; }
  .rs-app .home-product, .rs-app .home-product:last-child { display: grid; grid-template-columns: 105px minmax(0, 1fr); grid-column: auto; }
  .rs-app .home-product .home-product-photo, .rs-app .home-product:last-child .art { height: 100%; min-height: 150px; }
  .rs-app .home-product-copy { padding: 14px; }
  .rs-app .home-product-copy h3 { font-size: 16px; }
  .rs-app .home-product-copy .brand { font-size: 10px; }
  .rs-app .home-product-footer { margin-top: 12px; flex-wrap: wrap; }
  .rs-app .home-product-footer strong { font-size: 20px; }
  .rs-app #modal { width: calc(100vw - 20px); max-height: calc(100dvh - 20px); }
  .rs-app #modal .modal-shell { display: block; }
  .rs-app #modal .modal-hero { position: relative; padding: 22px 18px; }
  .rs-app #modal .modal-hero h2 { font-size: 25px; }
  .rs-app #modal .modal-hero .art { height: 200px; }
  .rs-app #modal .modal-content { padding: 18px; }
  .rs-app #modal .modal-conversion-bar { padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .rs-app #modal .modal-conversion-summary small { font-size: 10px; }
  .rs-app #modal .modal-conversion-cta { font-size: 11px; max-width: 58%; }
}
@media(max-width:620px) {
  .rs-app .app>section>main, .rs-app .app>section>main:has(#catalog.on) { padding-inline: max(14px, env(safe-area-inset-left, 0px)) max(14px, env(safe-area-inset-right, 0px)); }
  .rs-app .app>section>header { padding-inline: max(14px, env(safe-area-inset-left, 0px)) max(14px, env(safe-area-inset-right, 0px)); }
  .rs-app .header-logo { width: 94px; flex-basis: 94px; }
  .rs-app #catalogGrid { grid-template-columns: 1fr; gap: 16px; }
  .rs-app #catalogGrid .shoe.premium-card .art { height: 140px; }
  .rs-app #catalogGrid .shoe-body { padding: 14px; }
  .rs-app #catalogGrid .shoe-body h3 { font-size: 18px; margin: 6px 0 8px; }
  .rs-app #catalogGrid .spec-strip { padding-block: 8px; margin-bottom: 8px; gap: 6px 14px; }
  .rs-app #catalogGrid .why { display: none; }
  .rs-app #catalogGrid .shoe-price-row { padding-top: 8px; }
  .rs-app #catalogGrid .actions { margin-top: 10px; }
  .rs-app #catalog .catalog-quick { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; flex: none; }
  .rs-app #catalog .catalog-quick button { flex: none; }
  .rs-app #catalog .catalog-title-row h2 { font-size: 24px; }
  .rs-app #catalog .catalog-intro { display: none; }
  .rs-app #home>.stats .stat { padding: 0 4px; }
  .rs-app #home>.stats .stat span { font-size: 9px; }
}
@media(max-width:360px) {
  .rs-app #home .hero.punch-hero { padding: 18px; }
  .rs-app .header-logo { width: 80px; flex-basis: 80px; }
  .rs-app .home-product, .rs-app .home-product:last-child { grid-template-columns: 88px minmax(0, 1fr); }
}
.rs-app.keyboard-open .app>section>main,
.rs-app.keyboard-open .app>section>main:has(#catalog.on) { padding-bottom: 9px; }


/* RUNSHOE decision-first release — polished hero and compact Shoe Match Top 3. */
.rs-app #home .hero.punch-hero {
  position: relative;
  background: radial-gradient(circle at 74% 8%, rgba(7,92,255,.44), transparent 48%),
              linear-gradient(125deg, #071832 5%, #112a58 59%, #075cff 155%);
  border: 1px solid rgba(122,168,250,.28);
  box-shadow: 0 26px 60px rgba(9,32,79,.13);
}
.rs-app #home .hero.punch-hero h1 { max-width: 13ch; font-weight: 900; }
.rs-app #home .hero.punch-hero h1 em { color: #dfff5a; }
.rs-app #home .punch-flag { color: #dfff5a; }
.rs-app #home .punch-promise { color: #d7e7ff; }
.rs-app #home .punch-visual {
  border: 1px solid rgba(224,238,255,.20);
  background: rgba(229,239,255,.08);
  border-radius: 16px;
  padding: 18px;
  backdrop-filter: blur(8px);
}
.rs-app #home .punch-shoe-stage .art {
  background: #f7f9fd;
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 12px 30px rgba(2,11,37,.16);
}
.rs-app #home .punch-shoe-info { color: #fff; }
.rs-app #home .punch-shoe-info strong { color: #fff; }
.rs-app #home .punch-shoe-info small { color: #d5e1f6; }
.rs-app #home .punch-shoe-info button { background: #dfff5a; color: #071832; border-color: #dfff5a; }
.rs-app #home .hero.punch-hero .btn.primary { background: var(--rs-primary); color: #fff; border-color: var(--rs-primary); }
.rs-app #home .hero.punch-hero .btn.primary:hover { background: var(--rs-primary-hover); color: #fff; border-color: var(--rs-primary-hover); }
.rs-app #home .hero.punch-hero .btn.outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.40); }
.rs-app #home .hero.punch-hero .btn.outline:hover { background: rgba(255,255,255,.12); }

/* First give the user a scannable decision, then the complete evidence. */
.rs-app #results .results-head h2 { font-size: clamp(30px,3.8vw,48px); line-height: 1.05; }
.rs-app #results .results-head > div:first-child > .eye { font-size: 12px; letter-spacing: .12em; }
.rs-app #results .results-head p { font-size: 13px; line-height: 1.55; }
.rs-app #decisionOverview[hidden] { display: none !important; }
.rs-app #decisionOverview {
  margin: 22px 0 26px;
  background: #0b1d3e;
  border: 1px solid #253d67;
  border-radius: 20px;
  padding: clamp(16px,2.3vw,26px);
  box-shadow: 0 16px 45px rgb(13 35 75 / 10%);
}
.rs-app .decision-overview-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 19px; }
.rs-app .decision-overview-head > div { min-width: 0; }
.rs-app .decision-eyebrow { font-size: 10px; font-weight: 850; color: #dfff5a; letter-spacing: .14em; }
.rs-app .decision-overview-head h3 { font-size: clamp(19px,2.1vw,27px); color: #fff; margin: 8px 0 5px; }
.rs-app .decision-overview-head p { color: #bed0ec; font-size: 12px; line-height: 1.4; margin: 0; }
.rs-app .decision-overview-head .btn { flex: none; color: #0b1d3e; border-color: #dfff5a; background: #dfff5a; font-size: 11px; }
.rs-app .decision-overview-head .btn:hover { background: #efffb2; }
.rs-app .decision-overview-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.rs-app .decision-quick { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid #dbe5f4; border-radius: 14px; background: #fff; }
.rs-app .decision-quick.is-leading { border: 2px solid #dfff5a; }
.rs-app .decision-quick-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 5px; min-height: 37px; padding: 8px 11px; background: #f5f8fe; border-bottom: 1px solid #e6edf7; }
.rs-app .decision-quick.is-leading .decision-quick-top { background: #eaffba; }
.rs-app .decision-quick-top > span { color: #075cff; font-size: 10px; letter-spacing: .065em; font-weight: 900; }
.rs-app .decision-quick-top small { font-size: 10px; font-weight: 750; color: #63738e; }
.rs-app .decision-quick-main { display: flex; align-items: center; gap: 9px; padding: 10px; flex: 1; }
.rs-app .decision-quick-art { width: 94px; height: 85px; flex: none; margin: 0; overflow: hidden; background: #f3f6fa; border-radius: 10px; }
.rs-app .decision-quick-art:before, .rs-app .decision-quick-art:after { display: none; }
.rs-app .decision-quick-art .real-shoe-img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.rs-app .decision-quick-art .product-photo-source, .rs-app .decision-quick-art .product-image-credit { display: none; }
.rs-app .decision-quick-copy { min-width: 0; }
.rs-app .decision-quick-copy .brand { font-size: 10px; }
.rs-app .decision-quick-copy h4 { color: #102044; font-size: 14px; line-height: 1.18; letter-spacing: -.02em; margin: 3px 0 6px; overflow-wrap: anywhere; }
.rs-app .decision-quick-copy p { color: #5c6a82; font-size: 10px; line-height: 1.38; margin: 0; }
.rs-app .decision-quick-bottom { border-top: 1px solid #edf1f7; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 9px; padding: 10px 11px; }
.rs-app .decision-quick-bottom > div { display: grid; gap: 3px; }
.rs-app .decision-quick-bottom > div span { color: #677892; font-size: 9px; font-weight: 750; letter-spacing: .03em; }
.rs-app .decision-quick-bottom > div strong { color: #102044; font-size: 19px; letter-spacing: -.04em; }
.rs-app .decision-quick-open { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-height: 43px; padding: 8px 11px; color: #075cff; font-size: 10px; font-weight: 900; border: 1px solid #b8cffc; border-radius: 8px; background: #eef4ff; }
.rs-app .decision-quick-open:hover { background: #dce9ff; border-color: #075cff; }
.rs-app #resultsGrid { align-items: stretch; gap: 16px; }
.rs-app #resultsGrid .shoe.premium-card { scroll-margin-top: calc(84px + env(safe-area-inset-top,0px)); min-width: 0; border-radius: 16px; }
.rs-app #resultsGrid .shoe.premium-card:focus { outline: 3px solid #075cff; outline-offset: 3px; }
.rs-app #resultsGrid .shoe.premium-card .shoe-body { display: flex; flex: 1; flex-direction: column; }
.rs-app #resultsGrid .shoe.premium-card .verification-row, .rs-app #resultsGrid .shoe.premium-card .fit-summary { display: none; }
.rs-app #resultsGrid .shoe.premium-card .art { background: #f1f5fa; }
.rs-app #resultsGrid .shoe.premium-card .art img.real-shoe-img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.rs-app #resultsGrid .shoe.premium-card .art:before, .rs-app #resultsGrid .shoe.premium-card .art:after { display: none; }
.rs-app #resultsGrid .shoe.premium-card .spec-strip { margin: 8px 0; }
.rs-app #resultsGrid .shoe.premium-card h3 { line-height: 1.16; overflow-wrap: anywhere; }
.rs-app #resultsGrid .result-brief { margin: 12px 0 6px; padding-left: 12px; border-left: 3px solid #075cff; }
.rs-app #resultsGrid .result-brief strong { display: block; font-size: 9px; color: #075cff; letter-spacing: .12em; }
.rs-app #resultsGrid .result-brief p { margin: 5px 0 0; color: #354867; font-size: 12px; line-height: 1.5; }
.rs-app #resultsGrid .result-winner .winner-banner { background: #075cff; color: #fff; }
.rs-app #resultsGrid .commercial-verdict { grid-template-columns: minmax(0,1fr); gap: 8px; }
.rs-app #resultsGrid .verdict-pros, .rs-app #resultsGrid .verdict-con { padding: 12px 13px; }
.rs-app #resultsGrid .verdict-pros strong, .rs-app #resultsGrid .verdict-con strong { font-size: 10px; }
.rs-app #resultsGrid .verdict-pros span, .rs-app #resultsGrid .verdict-con span { font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; }
.rs-app #resultsGrid .decision-block strong { font-size: 10px; }
.rs-app #resultsGrid .decision-block ul { font-size: 12px; }
.rs-app #resultsGrid .result-alternative { min-height: 64px; width: 100%; text-align: left; }
.rs-app #resultsGrid .result-buy { margin-top: 12px; font-size: 11px !important; }
.rs-app #resultsGrid .shoe-price-row { margin-top: auto; }
@media(max-width:1100px) and (min-width:901px) {
 .rs-app .decision-quick-main { flex-direction: column; align-items: flex-start; }
 .rs-app .decision-quick-art { width: 100%; height: 88px; }
}
@media(max-width:900px) {
 .rs-app #decisionOverview { margin: 15px 0 22px; padding: 17px 14px; border-radius: 16px; }
 .rs-app .decision-overview-grid { grid-template-columns: 1fr; gap: 8px; }
 .rs-app .decision-quick-main { padding: 8px 12px; }
 .rs-app .decision-quick-art { width: 90px; height: 70px; }
 .rs-app .decision-quick-bottom { padding: 7px 12px; }
 .rs-app .decision-quick-bottom > div strong { font-size: 18px; }
 .rs-app #resultsGrid .shoe.premium-card { scroll-margin-top: calc(72px + env(safe-area-inset-top,0px)); }
}
@media(max-width:620px) {
 .rs-app #home .hero.punch-hero { gap: 12px; padding: 20px 17px; }
 .rs-app #home .punch-flag { display: flex; font-size: 9px; letter-spacing: .1em; }
 .rs-app #home .punch-visual { padding: 10px; }
 .rs-app #home .punch-shoe-stage .art { height: 142px; }
 .rs-app #home .hero.punch-hero h1 { font-size: clamp(35px,9vw,45px); margin: 10px 0 11px; }
 .rs-app #home .punch-promise { font-size: 10px; }
 .rs-app .decision-overview-head { align-items: flex-start; flex-direction: column; gap: 11px; margin-bottom: 12px; }
 .rs-app .decision-overview-head .btn { width: 100%; }
 .rs-app .decision-overview-head h3 { font-size: 21px; }
 .rs-app .decision-quick-top { min-height: 31px; padding: 6px 10px; }
 .rs-app .decision-quick-main { padding: 7px 10px; }
 .rs-app .decision-quick-art { width: 76px; height: 64px; }
 .rs-app .decision-quick-copy h4 { font-size: 13px; }
 .rs-app .decision-quick-copy p { font-size: 10px; }
 .rs-app .decision-quick-bottom { padding: 7px 10px; }
 .rs-app .decision-quick-bottom > div span { font-size: 8px; }
 .rs-app .decision-quick-open { min-height: 43px; }
 .rs-app #resultsGrid .shoe.premium-card .art { height: 170px; }
 .rs-app #resultsGrid .shoe.premium-card .spec-strip { margin: 7px 0; }
 .rs-app #resultsGrid .result-winner { box-shadow: 0 8px 28px rgba(7,92,255,.13); }
}
@media(prefers-reduced-motion:reduce) {
 .rs-app .decision-quick-open { transition: none; }
 .rs-app #resultsGrid .shoe.premium-card { scroll-behavior: auto; }
}

/* Result merchant provenance: do not pass a reference RRP off as a live offer. */
.rs-app #resultsGrid .result-merchant {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap;
  gap: 6px 12px; margin: 8px 0 2px; padding: 0 1px;
  font-size: 11px; line-height: 1.4;
}
.rs-app #resultsGrid .result-merchant span { color: #687a95; font-size: 9px; font-weight: 800; letter-spacing: .07em; }
.rs-app #resultsGrid .result-merchant b { color: #253e65; font-size: 11px; max-width: 100%; overflow-wrap: anywhere; }


/* Product photo framing v2 — show the WHOLE shoe, centred, across all RUNSHOE views.
   Earlier rules set inset:10px and later 100%-sized images, pushing shoes
   down/right; a filename-specific _HM1 cover rule also cut off product tips. */
.rs-app .art.has-photo {
  position: relative;
  overflow: hidden;
  background: #fff;
}
.rs-app .art.has-photo > img.real-shoe-img,
.rs-app :is(#home, #catalogGrid, #resultsGrid, #decisionOverview, #modal, #garageList) .art.has-photo > img.real-shoe-img {
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 12px;
  box-sizing: border-box;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  filter: none;
  mix-blend-mode: normal;
}
/* Keep product-photo context specific: even manufacturer's _HM1 media should
   be contained here, never enlarged/cropped like a lifestyle photograph. */
.rs-app #catalogGrid .shoe.premium-card .art,
.rs-app #resultsGrid .shoe.premium-card .art,
.rs-app #home .home-product-photo,
.rs-app #modal .modal-hero .art,
.rs-app #home .punch-shoe-stage .art,
.rs-app #decisionOverview .decision-quick-art,
.rs-app #garageList .garage-art {
  background: #fff;
}
.rs-app #catalogGrid .shoe.premium-card .art img.real-shoe-img { padding: 14px 18px; }
.rs-app #resultsGrid .shoe.premium-card .art img.real-shoe-img { padding: 13px 17px; }
.rs-app #home .home-product-photo img.real-shoe-img { padding: 12px 16px; }
.rs-app #home .punch-shoe-stage .art img.real-shoe-img { padding: 13px 18px; }
.rs-app #modal .modal-hero .art img.real-shoe-img { padding: 18px 22px; }
.rs-app #decisionOverview .decision-quick-art img.real-shoe-img { padding: 5px; }
.rs-app #garageList .garage-art img.real-shoe-img { padding: 6px; }

/* Make the product sufficiently large to identify in mobile cards, while
   preserving the aspect ratio and safe-area layout of the existing shell. */
@media (min-width: 901px) {
  .rs-app #catalogGrid .shoe.premium-card .art { height: 200px; }
  .rs-app #resultsGrid .shoe.premium-card .art { height: 194px; }
}
@media (max-width: 900px) {
  .rs-app #catalogGrid .shoe.premium-card .art { height: 190px; }
  .rs-app #resultsGrid .shoe.premium-card .art { height: 184px; }
  .rs-app #home .punch-shoe-stage .art { height: 175px; }
  .rs-app #modal .modal-hero .art { height: 220px; }
}
@media (max-width: 620px) {
  .rs-app #catalogGrid .shoe.premium-card .art { height: 182px; }
  .rs-app #resultsGrid .shoe.premium-card .art { height: 176px; }
  .rs-app #home .punch-shoe-stage .art { height: 166px; }
  .rs-app #home .home-product .home-product-photo { min-height: 144px; }
  .rs-app #modal .modal-hero .art { height: min(28dvh, 218px); min-height: 140px; }
  .rs-app #catalogGrid .shoe.premium-card .art img.real-shoe-img,
  .rs-app #resultsGrid .shoe.premium-card .art img.real-shoe-img { padding: 12px 14px; }
  .rs-app #decisionOverview .decision-quick-art img.real-shoe-img { padding: 4px; }
}
@media (orientation: landscape) and (max-height: 530px) and (max-width: 900px) {
  .rs-app #modal .modal-hero .art { height: 135px; min-height: 0; }
}


/* Full-bleed shoe media v3: treat the product photograph as a dominant
   edge-to-edge card panel, not a narrow 170px strip containing a tiny square.
   Manufacturer previews are largely square; keep an uncropped 1:1 canvas. */
.rs-app #catalogGrid .shoe.premium-card .art,
.rs-app #resultsGrid .shoe.premium-card .art,
.rs-app #home .home-product-photo,
.rs-app #home .punch-shoe-stage .art,
.rs-app #modal .modal-hero .art {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 1 / 1;
  max-height: none;
  margin: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: #fff;
}
/* Preserve every edge of the shoe; zero padding gives the manufacturer
   photograph the full available pixel area (no CSS cropping or fake zoom). */
.rs-app .art.has-photo > img.real-shoe-img,
.rs-app :is(#catalogGrid, #resultsGrid, #home, #modal, #decisionOverview, #garageList) .art.has-photo > img.real-shoe-img,
.rs-app #catalogGrid .shoe.premium-card .art img.real-shoe-img,
.rs-app #resultsGrid .shoe.premium-card .art img.real-shoe-img,
.rs-app #home .home-product-photo img.real-shoe-img,
.rs-app #home .punch-shoe-stage .art img.real-shoe-img,
.rs-app #modal .modal-hero .art img.real-shoe-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  transform: none !important;
}
.rs-app #catalogGrid .shoe-top { z-index: 3; }
.rs-app #catalogGrid .shoe.premium-card .art { grid-column: auto; grid-row: auto; }
.rs-app #catalogGrid .shoe.premium-card .shoe-body { grid-column: auto; grid-row: auto; }
/* Shoe Match detailed results use the full square media on the left on desktop.
   This avoids letterboxing a square manufacturer shot inside a very wide strip. */
@media (min-width: 901px) {
  .rs-app #resultsGrid .shoe.premium-card {
    display: grid;
    grid-template-columns: minmax(270px, 0.9fr) minmax(0, 1.1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 0;
    align-items: start;
  }
  .rs-app #resultsGrid .shoe.premium-card > .winner-banner { grid-column: 1 / -1; grid-row: 1; }
  .rs-app #resultsGrid .shoe.premium-card > .shoe-top { grid-column: 1 / -1; grid-row: 2; }
  .rs-app #resultsGrid .shoe.premium-card > .art { grid-column: 1; grid-row: 3; align-self: start; }
  .rs-app #resultsGrid .shoe.premium-card > .shoe-body { grid-column: 2; grid-row: 3; padding: 19px 20px 22px; min-width: 0; }
  .rs-app #catalogGrid .shoe.premium-card .art { max-height: 420px; }
}
/* Home discovery cards: image first, information after it, on EVERY viewport.
   The former 88–105px mobile thumbnail made the shoe illegible. */
@media (max-width: 700px) {
  .rs-app #home .home-product,
  .rs-app #home .home-product:last-child {
    display: flex;
    flex-direction: column;
    grid-column: auto;
  }
  .rs-app #home .home-product .home-product-photo,
  .rs-app #home .home-product:last-child .art {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1 / 0.82;
    max-height: none;
  }
  .rs-app #home .home-product-copy { padding: 14px 16px 16px; }
  .rs-app #home .home-product-footer { margin-top: 12px; }
}
@media (max-width: 900px) {
  .rs-app #catalogGrid .shoe.premium-card .art,
  .rs-app #resultsGrid .shoe.premium-card .art {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1 / 0.91;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }
  .rs-app #home .punch-shoe-stage .art {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 0.72;
    max-height: 300px;
    border-radius: 12px;
  }
  .rs-app #modal .modal-hero .art {
    height: auto;
    min-height: 0;
    aspect-ratio: 1 / 0.85;
    max-height: 350px;
    border-radius: 12px;
  }
  .rs-app #decisionOverview .decision-quick-art {
    width: 118px;
    height: 110px;
  }
}
@media (max-width: 620px) {
  .rs-app #catalogGrid .shoe.premium-card .art,
  .rs-app #resultsGrid .shoe.premium-card .art {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1 / 0.90;
    max-height: 365px;
    margin: 0;
  }
  .rs-app #home .punch-shoe-stage .art {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1 / 0.73;
    max-height: 270px;
  }
  .rs-app #modal .modal-hero .art {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1 / 0.78;
    max-height: 325px;
  }
  .rs-app #decisionOverview .decision-quick-art {
    width: 114px;
    height: 100px;
  }
}
@media (orientation: landscape) and (max-height: 530px) and (max-width: 900px) {
  .rs-app #modal .modal-hero .art { height: 145px; aspect-ratio: auto; }
}


/* Reference-product photo presentation v4 — Adios 9 / Boston 13 standard.
   The photograph fills its own panel; original rectangular product images
   receive a matching frame once loaded, avoiding white letterbox strips.
   Never crop a shoe to force all source files into the same dimensions. */
.rs-app #catalogGrid .shoe.premium-card,
.rs-app #home .home-product {
  overflow: hidden;
}
.rs-app #catalogGrid .shoe.premium-card {
  display: flex;
  flex-direction: column;
}
.rs-app #catalogGrid .shoe.premium-card > .art,
.rs-app #resultsGrid .shoe.premium-card > .art,
.rs-app #home .home-product > .home-product-photo,
.rs-app #home .punch-shoe-stage > .art,
.rs-app #modal .modal-hero > .art {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  aspect-ratio: var(--rs-photo-aspect, 1);
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  overflow: hidden;
}
.rs-app #catalogGrid .art.has-photo > img.real-shoe-img,
.rs-app #resultsGrid .art.has-photo > img.real-shoe-img,
.rs-app #home .art.has-photo > img.real-shoe-img,
.rs-app #modal .art.has-photo > img.real-shoe-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0 !important;
  margin: 0;
  object-fit: contain !important;
  object-position: center center !important;
  transform: none !important;
  filter: none !important;
}
.rs-app #catalogGrid .shoe.premium-card > .shoe-body {
  width: 100%;
  flex: 1 1 auto;
  padding: 16px 18px 18px;
}
.rs-app #catalogGrid .shoe-top { z-index: 3; }
/* Match result cards keep their spacious editorial split on desktop. */
@media (min-width: 901px) {
  .rs-app #resultsGrid .shoe.premium-card > .art {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
  }
  .rs-app #resultsGrid .shoe.premium-card > .shoe-body {
    grid-column: 2;
    grid-row: 3;
    min-width: 0;
  }
  .rs-app #modal .modal-hero > .art {
    border-radius: 12px;
  }
}
/* Every phone card uses an actual photo-first layout, not a thumbnail rail. */
@media (max-width: 900px) {
  .rs-app #catalogGrid .shoe.premium-card,
  .rs-app #resultsGrid .shoe.premium-card {
    display: flex;
    flex-direction: column;
  }
  .rs-app #catalogGrid .shoe.premium-card > .art,
  .rs-app #resultsGrid .shoe.premium-card > .art {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: var(--rs-photo-aspect, 1);
    margin: 0;
    border-radius: 0;
  }
  .rs-app #home .punch-shoe-stage > .art {
    aspect-ratio: var(--rs-photo-aspect, 1);
    max-height: 350px;
    border-radius: 12px;
  }
  .rs-app #modal .modal-hero > .art {
    aspect-ratio: var(--rs-photo-aspect, 1);
    max-height: 360px;
    border-radius: 12px;
  }
}
@media (max-width: 700px) {
  .rs-app #home .home-product,
  .rs-app #home .home-product:last-child {
    display: flex;
    flex-direction: column;
    grid-column: auto;
  }
  .rs-app #home .home-product > .home-product-photo,
  .rs-app #home .home-product:last-child > .art {
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: var(--rs-photo-aspect, 1);
  }
}
@media (max-width: 620px) {
  .rs-app #catalogGrid .shoe.premium-card > .art,
  .rs-app #resultsGrid .shoe.premium-card > .art {
    width: 100%;
    height: auto;
    max-height: none;
    min-height: 0;
    aspect-ratio: var(--rs-photo-aspect, 1);
    margin: 0;
  }
  .rs-app #catalogGrid .shoe.premium-card > .shoe-body,
  .rs-app #resultsGrid .shoe.premium-card > .shoe-body {
    padding: 14px 16px 17px;
  }
  .rs-app #home .punch-shoe-stage > .art {
    height: auto;
    min-height: 0;
    aspect-ratio: var(--rs-photo-aspect, 1);
    max-height: 290px;
  }
  .rs-app #modal .modal-hero > .art {
    height: auto;
    min-height: 0;
    aspect-ratio: var(--rs-photo-aspect, 1);
    max-height: 330px;
  }
}
@media (orientation: landscape) and (max-height: 530px) and (max-width: 900px) {
  .rs-app #modal .modal-hero > .art { aspect-ratio: auto; height: 145px; }
}

/* Website first. Installation can return when the app work begins. */
.rs-app #installQuick, .rs-app #installCard { display: none !important; }
/* Browser pages scroll with the document, including on tablets and short screens.
   Keep modal/filter sheets bounded and preserve the reviewed product framing. */
@media (display-mode: browser) and (max-width: 900px) {
  html:has(body.rs-app) { height: auto; overflow: visible; overscroll-behavior: auto; }
  body.rs-app { position: static; inset: auto; height: auto; overflow: visible; overscroll-behavior: auto; }
  body.rs-app .app, body.rs-app.keyboard-open .app {
    height: auto; min-height: 100dvh; overflow: visible;
  }
  .rs-app .app > section { flex: none; overflow: visible; }
  .rs-app .app > section > header { position: sticky; top: 0; }
  .rs-app main, .rs-app main:has(#catalog.on),
  .rs-app.keyboard-open main, .rs-app.keyboard-open main:has(#catalog.on) {
    flex: none; overflow: visible; padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px));
  }
  .rs-app .page.on, .rs-app #catalog.on, .rs-app #results.on,
  .rs-app #compare.on, .rs-app #garage.on, .rs-app #activity.on, .rs-app #match.on {
    height: auto; max-height: none; overflow: visible; overscroll-behavior: auto;
  }
  .rs-app #catalogGrid, .rs-app #resultsGrid, .rs-app #garageList, .rs-app #activityList,
  .rs-app #match #wb, .rs-app #compareBox {
    flex: none; height: auto; max-height: none; overflow: visible; overscroll-behavior: auto;
  }
  .rs-app #match .match-shell, .rs-app #match .wizard {
    flex: none; height: auto; max-height: none;
  }
  .rs-app #compareBox .compare { flex: none; overflow-x: auto; }
}


/* RUNSHOE web interface — terrain discovery and a clearer reading hierarchy. */
.rs-app .app aside .nav { gap: 7px; }
.rs-app .app aside .nav button { display: flex; align-items: center; gap: 11px; border: 1px solid transparent; text-align: left; line-height: 1.35; }
.rs-app .nav-icon { width: 20px; height: 20px; flex: 0 0 20px; }
.rs-app .nav-label { flex: 1; min-width: 0; }
.rs-app .app aside .nav button.on { color: #fff; background: #075cff; border-color: #075cff; box-shadow: 0 4px 12px #075cff1c; }
.rs-app .app aside .nav button.on .badge { color: #075cff; background: #fff; margin-left: 4px; }
.rs-app .app aside .nav button:focus-visible { outline: 3px solid #7eacff; outline-offset: 3px; }
.rs-app #home .hero.punch-hero { border-radius: 20px; box-shadow: 0 14px 32px #102b5b12; }
.rs-app #home .punch-shoe-stage { border-radius: 16px; }
.rs-app #home .home-discovery-head h2 { font-size: clamp(25px,2.3vw,32px); letter-spacing: -.035em; }
.rs-app .home-terrains { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 22px 0 18px; }
.rs-app .terrain-entry { display: flex; align-items: flex-start; gap: 13px; width: 100%; min-width: 0; padding: 20px 17px; border: 1px solid #dce4f0; border-radius: 14px; background: #fff; color: #102247; text-align: left; cursor: pointer; transition: border-color .16s,background .16s; }
.rs-app .terrain-entry:hover { border-color: #075cff; background: #f3f7ff; }
.rs-app .terrain-entry:focus-visible { outline: 3px solid #075cff; outline-offset: 3px; }
.rs-app .terrain-icon { width: 29px; height: 29px; color: #075cff; flex: 0 0 29px; }
.rs-app .terrain-entry>span:not(.terrain-arrow) { flex: 1; min-width: 0; }
.rs-app .terrain-entry strong { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.rs-app .terrain-entry small { display: block; margin-top: 6px; font-size: 12px; line-height: 1.5; color: #55647d; }
.rs-app .terrain-arrow { color: #075cff; font-size: 19px; }
.rs-app #home .home-categories { margin-bottom: 18px; gap: 8px; }
.rs-app #catalog .catalog-heading h2 { letter-spacing: -.04em; }
.rs-app #catalog .toolbar { border-color: #dde5f0; border-radius: 16px; box-shadow: 0 3px 12px #10224704; }
.rs-app #catalogGrid { gap: 18px; align-items: start; }
.rs-app #catalogGrid .shoe.premium-card { border: 1px solid #e0e6ef; border-radius: 14px; box-shadow: 0 5px 14px #142c4e06; }
.rs-app #catalogGrid .shoe-body h3 { font-size: 18px; line-height: 1.28; letter-spacing: -.025em; }
.rs-app #catalogGrid .shoe.premium-card > .shoe-body { padding: 18px; }
.rs-app #match #wb:has([data-key="terrain"]) .opts { grid-template-columns: minmax(0,1fr); gap: 11px; }
.rs-app #match #wb [data-key="terrain"] { min-height: 96px; padding: 17px 20px; border-radius: 13px; grid-template-columns: 32px minmax(0,1fr) 30px; align-items: center; gap: 13px; }
.rs-app #match #wb [data-key="terrain"] .opt-num { grid-column: 1; grid-row: 1; align-self: center; margin: 0; }
.rs-app #match #wb [data-key="terrain"] .opt-copy { grid-column: 2; grid-row: 1; }
.rs-app #match #wb [data-key="terrain"] .opt-arrow { grid-column: 3; grid-row: 1; }
.rs-app #match #wb [data-key="terrain"] b { font-size: 17px; }
.rs-app #match #wb [data-key="terrain"] small { font-size: 12px; line-height: 1.5; margin-top: 5px; }
.rs-app #match .opt:focus-visible { outline: 3px solid #7eacff; outline-offset: 3px; }
@media(min-width:901px) {
  .rs-app .app>section>header { --rs-header-height: 60px; }
  .rs-app .app>section>main { padding-top: 18px; }
  .rs-app #match .match-shell { grid-template-columns: minmax(235px,.7fr) minmax(0,1.65fr); }
  .rs-app #match .match-rail { padding: 29px 25px; }
  .rs-app #match .match-rail h2 { font-size: clamp(30px,3vw,42px); }
  .rs-app #match .match-index strong { font-size: 82px; }
  .rs-app #match .wizard { padding: 27px 32px; }
  .rs-app #match #wb .q { font-size: clamp(27px,2.8vw,38px); letter-spacing: -.035em; }
}
@media(min-width:701px) and (max-width:900px) {
  .rs-app .terrain-entry { flex-wrap: wrap; padding: 16px; gap: 10px; }
  .rs-app .terrain-entry>span:not(.terrain-arrow) { flex-basis: calc(100% - 50px); }
  .rs-app .terrain-arrow { display: none; }
}
@media(max-width:700px) {
  .rs-app .home-terrains { grid-template-columns: minmax(0,1fr); gap: 9px; margin-top: 18px; }
  .rs-app .terrain-entry { padding: 16px; min-height: 85px; gap: 14px; align-items: center; }
  .rs-app .terrain-entry strong { font-size: 16px; }
  .rs-app .terrain-entry small { margin-top: 4px; }
  .rs-app #home .hero.punch-hero { border-radius: 16px; }
  .rs-app #catalogGrid { gap: 14px; }
  .rs-app #match #wb [data-key="terrain"] { min-height: 104px; padding: 15px; grid-template-columns: 24px minmax(0,1fr) 28px; gap: 10px; }
  .rs-app #match #wb [data-key="terrain"] b { font-size: 16px; }
}
@media(prefers-reduced-motion:reduce) { .rs-app .terrain-entry { transition: none; } }

/* Sports website shell: horizontal navigation, normal document scroll and a shared photo canvas. */
.rs-app .app { display:flex; flex-direction:column; height:auto; min-height:100dvh; overflow:visible; }
.rs-app .app>section { width:100%; min-width:0; overflow:visible; }
.rs-app .sports-header { position:sticky; top:0; z-index:45; display:flex; flex-wrap:wrap; align-items:center; gap:24px; width:100%; min-height:88px; height:auto; padding:16px max(24px,calc((100vw - 1360px)/2)); background:#fff; border-bottom:1px solid #dce4ef; box-shadow:none; }
.rs-app .sports-brand { display:flex; align-items:center; flex:0 0 145px; }
.rs-app .sports-brand img { display:block; width:145px; height:auto; max-height:44px; object-fit:contain; mix-blend-mode:multiply; }
.rs-app .sports-header .nav { display:flex; flex:1; align-items:center; justify-content:center; gap:6px; min-width:0; margin:0; }
.rs-app .sports-header .nav button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:10px 11px; border:0; border-bottom:2px solid transparent; border-radius:0; background:transparent; box-shadow:none; color:#24344e; font-size:12px; font-weight:750; white-space:nowrap; }
.rs-app .sports-header .nav button.on { background:transparent; color:#075cff; border-bottom-color:#075cff; }
.rs-app .sports-header .nav button:hover { color:#075cff; background:#f4f7fc; }
.rs-app .sports-header .nav .nav-icon { display:none; }
.rs-app .sports-header .nav .nav-label { display:inline; flex:none; color:inherit; font-size:inherit; }
.rs-app .sports-header .nav .badge { display:inline-flex; align-items:center; justify-content:center; color:var(--rs-primary); }
.rs-app .sports-header .header-right { display:flex; flex:none; align-items:center; gap:10px; }
.rs-app .sports-header .header-right>span { display:none; }
.rs-app .sports-header .lang-control { display:flex; align-items:center; gap:6px; }
.rs-app .sports-header .lang-control>span { display:none; }
.rs-app .sports-header .lang-control select { padding:9px 6px; min-height:40px; max-width:106px; background:#fff; border:1px solid #dce4ef; }
.rs-app .sports-header .account-link { display:inline-flex; align-items:center; min-height:40px; padding:9px 12px; color:#075cff; background:#fff; border:1px solid #dce4ef; text-decoration:none; font-size:12px; }
.rs-app .app>section>main,.rs-app .app>section>main:has(#catalog.on) { width:100%; max-width:1440px; height:auto; min-height:65vh; margin:0 auto; padding:30px 36px 60px; overflow:visible; }
.rs-app .page.on,.rs-app #catalog.on,.rs-app #results.on,.rs-app #match.on,.rs-app #garage.on,.rs-app #compare.on,.rs-app #activity.on { height:auto; max-height:none; overflow:visible; }
.rs-app #catalogGrid,.rs-app #resultsGrid,.rs-app #garageList,.rs-app #activityList { height:auto; max-height:none; overflow:visible; }
.rs-app #catalogGrid { align-items:stretch; }
.rs-app #catalogGrid .shoe.premium-card { height:100%; }
.rs-app #home .hero.punch-hero { border-radius:12px; border:0; box-shadow:none; padding:48px; background:#0b1b33; }
.rs-app #home .hero.punch-hero h1 { font-size:clamp(44px,5.4vw,80px); letter-spacing:-.055em; line-height:1.01; }
.rs-app #home .punch-shoe-stage { border-radius:0; border:0; box-shadow:none; background:transparent; }
.rs-app #catalog .catalog-title-row h2 { font-size:clamp(30px,3.6vw,48px); }
.rs-app #match .match-shell { max-width:1200px; margin:0 auto; border-radius:4px; box-shadow:none; height:auto; }
.rs-app #match .wizard { height:auto; max-height:none; }
.rs-app .sports-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; padding:30px max(24px,calc((100vw - 1360px)/2)); border-top:1px solid #dce4ef; background:#fff; font-size:13px; }
.rs-app .sports-footer-brand { color:#075cff; font-size:21px; font-weight:900; font-style:italic; text-decoration:none; }
.rs-app .sports-footer p { margin:0; }
.rs-app .sports-footer>div { display:flex; gap:22px; }
.rs-app .sports-footer a { color:#075cff; }
/* Same 4:3 panel in every product surface; source pixels keep their proportions.
   Existing measured crop regions are fitted inside it, never zoomed to cover. */
.rs-app :is(#catalogGrid,#resultsGrid,#home,#modal,#garageList) .art,
.rs-app #home .home-product>.home-product-photo { aspect-ratio:4 / 3 !important; height:auto !important; min-height:0; max-height:none; }
.rs-app #modal .modal-hero>.art { max-height:420px; }
.rs-app .mobile { display:none; }
@media(min-width:1200px) { .rs-app #catalogGrid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:1199px) {
  .rs-app .sports-header { gap:12px; padding:14px 22px 0; }
  .rs-app .sports-brand { order:1; flex:1; }
  .rs-app .sports-header .header-right { order:2; }
  .rs-app .sports-header .nav { order:3; flex-basis:100%; justify-content:flex-start; overflow-x:auto; padding-bottom:2px; scrollbar-width:thin; }
  .rs-app .sports-header .nav button { flex:0 0 auto; padding:11px 14px; }
  .rs-app .app>section>main,.rs-app .app>section>main:has(#catalog.on) { padding:24px 24px 45px; }
}
@media(max-width:700px) {
  .rs-app .sports-header { position:relative; padding:16px 16px 0; gap:12px; }
  .rs-app .sports-brand img { width:125px; max-height:34px; }
  .rs-app .sports-header .account-link { display:none; }
  .rs-app .sports-header .nav { gap:0; }
  .rs-app .sports-header .nav button { padding:12px 13px; font-size:12px; }
  .rs-app .app>section>main,.rs-app .app>section>main:has(#catalog.on) { padding:20px 16px 36px; }
  .rs-app #home .hero.punch-hero { padding:25px 20px; }
  .rs-app #home .hero.punch-hero h1 { font-size:clamp(39px,10.5vw,60px); }
  .rs-app .sports-footer { padding:25px 20px; gap:16px; }
  .rs-app .sports-footer p { flex-basis:100%; }
}

/* Public model pages use the same photographic canvas as the catalogue. */
.rs-seo .seo-photo { position:relative; aspect-ratio:4 / 3; min-height:0; overflow:hidden; }
.rs-seo .seo-photo>img { position:absolute; inset:0; width:100%; height:100%; max-height:none; object-fit:contain; }
/* Normal website scrolling also remains usable when opened from a saved shortcut. */
html:has(body.rs-app) { height:auto; overflow:visible; }
body.rs-app { position:static; inset:auto; height:auto; overflow:visible; }
@media(max-width:700px) {
  .rs-app .sports-header { padding:calc(16px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 0 max(16px,env(safe-area-inset-left,0px)); }
  .rs-app .app>section>main,.rs-app .app>section>main:has(#catalog.on) { padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px)); }
  .rs-app .sports-footer { padding-bottom:max(25px,env(safe-area-inset-bottom,0px)); }
}
/* The measured Adidas regions reveal empty canvas outside the original file.
   Match the inspected source background so that proportional padding stays uniform. */
.rs-app :is(#catalogGrid,#resultsGrid,#home,#modal,#garageList,#decisionOverview) .art.has-photo:has(>img.real-shoe-img[data-photo-crop][src*="assets.adidas.com"]) { background:#eceff1; }
.rs-seo .seo-photo:has(img[src*="assets.adidas.com"]) { background:#eceff1; }

/* Mobile website: compact discovery controls and genuinely photo-first cards. */
@media(max-width:700px) {
  .rs-app #home .home-categories { display:flex; flex-wrap:nowrap; gap:6px; margin:14px 0 18px; max-width:100%; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; }
  .rs-app #home .home-categories>.btn { flex:0 0 auto; width:auto; min-width:44px; min-height:44px; height:44px; padding:10px; font-size:12px; line-height:20px; white-space:nowrap; border-radius:999px; }
  .rs-app #home .home-products { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .rs-app #home .home-product,.rs-app #home .home-product:last-child { display:flex; flex-direction:column; grid-column:auto; min-width:0; }
  .rs-app #home .home-product>.home-product-photo,.rs-app #home .home-product:last-child>.art { width:100%; min-height:0; height:auto; aspect-ratio:4 / 3; flex:none; }
  .rs-app #home .home-product-copy { display:flex; flex:1; flex-direction:column; min-width:0; padding:12px 10px; }
  .rs-app #home .home-product-copy h3 { font-size:14px; line-height:1.3; overflow-wrap:anywhere; }
  .rs-app #home .home-product-specs { font-size:11px; gap:5px 10px; }
  .rs-app #home .home-product-footer { margin-top:auto; padding-top:12px; align-items:stretch; gap:10px; }
  .rs-app #home .home-product-footer>div,.rs-app #home .home-product-footer>.btn { width:100%; }
  .rs-app #home .home-product-footer strong { font-size:20px; }
  .rs-app #home .home-product-footer>.btn { min-height:44px; padding:9px 6px; font-size:10px; }
  .rs-app #home .terrain-entry { min-height:74px; padding:12px 14px; }
  .rs-app #home .terrain-entry small { font-size:12px; line-height:1.4; }
  .rs-app #catalog .catalog-quick { margin-inline:0; padding-inline:0; }
  .rs-app #catalog .catalog-quick button { min-height:44px; padding:9px 12px; }
  .rs-app #catalogGrid .shoe.premium-card>.shoe-body { padding:14px; }
  .rs-app .sports-header .nav { scroll-padding-inline:12px; }
}


/* Preserve the header when a bookmark opens a hash route before the browser jumps. */
.rs-app .page { scroll-margin-top:calc(160px + env(safe-area-inset-top,0px)); }

/* Consistent sports navigation and actions, including the eight-step selector. */
.rs-app #home .hero.punch-hero h1 em { color:#fff; }
.rs-app #home .punch-flag { color:#a9c9ff; }
.rs-app #home .punch-live { background:#6da3ff; box-shadow:0 0 0 4px rgb(109 163 255 / 15%); }
.rs-app #home .punch-visual { background:transparent; }
.rs-app #home .punch-spotlight { border-color:#34455e; background:#132844; box-shadow:none; border-radius:10px; }
.rs-app #home .punch-shoe-info>span { color:#a9c9ff; }
.rs-app #home .punch-shoe-info>button { background:var(--rs-primary); color:#fff; border-color:var(--rs-primary); }
.rs-app #home .punch-proof { border-top:1px solid #34455e; padding-top:18px; }
.rs-app #home .stats { margin-top:28px; }
.rs-app #match .match-rail { background:#0b1b33; }
.rs-app #match .match-rail h2 em,.rs-app #match .match-rail-top { color:#a9c9ff; }
.rs-app #match .wizard-nav #next { background:var(--rs-primary); color:#fff; border-color:var(--rs-primary); }
.rs-app #match .wizard-nav #next:hover { background:var(--rs-primary-hover); border-color:var(--rs-primary-hover); }
.rs-app #match .opt.sel { background:var(--rs-selected); border-color:var(--rs-primary); color:var(--rs-ink); }
.rs-app #match .opt.sel b { color:var(--rs-ink); }
.rs-app #match .opt.sel small { color:#465b79; }
.rs-app #match .opt.sel .opt-num { color:var(--rs-primary); }
@media(max-width:700px) {
  .rs-app .sports-header .nav { margin-top:0; }
  .rs-app .sports-header .nav button { min-height:48px; padding-inline:12px; }
  .rs-app #home .hero.punch-hero { padding:26px 20px; border-radius:10px; }
  .rs-app #home .hero.punch-hero h1 { font-size:clamp(38px,10.5vw,60px); }
}

.rs-app .home-brands { margin:36px 0; }
.rs-app .home-brand-list { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:10px; }
.rs-app .home-brand-list button { display:flex; flex-direction:column; justify-content:space-between; gap:16px; min-height:102px; padding:18px 14px; border:1px solid var(--rs-border); border-radius:8px; background:#fff; text-align:left; color:var(--rs-ink); }
.rs-app .home-brand-list button:hover { border-color:var(--rs-primary); background:var(--rs-selected); }
.rs-app .home-brand-list strong { font-size:15px; font-style:italic; letter-spacing:-.03em; }
.rs-app .home-brand-list span { color:var(--rs-muted); font-size:12px; }
.rs-app .home-brand-list i { float:right; margin-left:8px; color:var(--rs-primary); font-style:normal; }
@media(max-width:1100px) { .rs-app .home-brand-list { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media(max-width:700px) {
  .rs-app .home-brands { margin-block:28px; }
  .rs-app .home-brand-list { grid-template-columns:repeat(7,140px); grid-template-rows:repeat(2,auto); overflow-x:auto; padding-bottom:10px; scroll-padding-inline:2px; }
}