.runner-page { background: #fff; color: #262626; }
.runner-page * { letter-spacing: 0; }
.runner-banner { position: relative; }
.runner-banner h1 { margin: 0; padding: 22px; text-align: center; font-size: 32px; color: #262626; }
.runner-banner > img { width: 100%; height: auto; }
.runner-catalog { max-width: 1220px; margin: auto; padding: 0 22px 70px; }
.runner-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 28px 0; border-bottom: 1px solid #ddd; }
.runner-toolbar p { margin: 0; font-size: 14px; }
.runner-toolbar p span { color: #aaa; margin: 0 10px; }
.runner-toolbar label { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.runner-toolbar select { font: inherit; color: #262626; background: #fff; border: 1px solid #aaa; border-radius: 4px; padding: 10px 32px 10px 12px; max-width: 100%; }
.runner-collection { padding-top: 40px; scroll-margin-top: 110px; }
.runner-collection[hidden] { display: none; }
.runner-heading { display: flex; gap: 16px; justify-content: space-between; align-items: baseline; margin-bottom: 22px; }
.runner-heading h2 { color: #262626; font-size: 24px; line-height: 1.2; }
.runner-heading span { color: #666; font-size: 13px; white-space: nowrap; }
.runner-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 22px; }
.runner-product { min-width: 0; margin: 0; }
.runner-photo { display: block; aspect-ratio: 3 / 4; background: #f5f5f5; padding: 14px; cursor: zoom-in; }
.runner-photo img { width: 100%; height: 100%; object-fit: contain; transition: transform .2s; }
.runner-photo:hover img { transform: scale(1.025); }
.runner-photo:focus-visible, .lightbox-button:focus-visible { outline: 3px solid #cb0754; outline-offset: 4px; }
.runner-product figcaption { margin-top: 14px; font-size: 13px; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
.runner-lightbox { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; padding: 0; margin: 0; border: 0; background: #151515; color: white; }
.runner-lightbox::backdrop { background: #151515; }
.lightbox-shell { display: grid; grid-template-columns: 60px minmax(0, 1fr) 60px; grid-template-rows: minmax(0, 1fr) auto; align-items: center; gap: 16px; height: 100%; padding: 62px 24px 24px; }
.lightbox-image-wrap { position: relative; height: 100%; min-height: 0; min-width: 0; display: grid; place-items: center; }
.lightbox-image { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox-error { position: absolute; text-align: center; }
.lightbox-button { width: 48px; height: 48px; border: 1px solid #666; border-radius: 4px; background: #242424; color: white; font-size: 36px; line-height: 1; cursor: pointer; touch-action: manipulation; }
.lightbox-button:hover { background: #444; }
.lightbox-close { position: absolute; top: 12px; right: 24px; z-index: 1; }
.lightbox-caption { grid-column: 1 / -1; text-align: center; }
.lightbox-caption p { margin: 0 0 4px; font-size: 16px; font-weight: 650; }
.lightbox-caption span { font-size: 13px; color: #bbb; }
body.runner-modal-open { overflow: hidden; }
@media (max-width: 900px) { .runner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .runner-banner h1 { font-size: 26px; padding: 18px; }
  .runner-catalog { padding-inline: 17px; }
  .runner-toolbar { align-items: flex-start; flex-direction: column; gap: 14px; padding-block: 22px; }
  .runner-toolbar label { width: 100%; justify-content: space-between; }
  .runner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .runner-heading h2 { font-size: 21px; }
  .runner-photo { padding: 8px; }
  .runner-product figcaption { font-size: 12px; }
  .lightbox-shell { grid-template-columns: 40px minmax(0, 1fr) 40px; gap: 6px; padding: 68px 8px 22px; }
  .lightbox-button { width: 40px; height: 44px; }
  .lightbox-close { right: 12px; }
}
@media (prefers-reduced-motion: reduce) { .runner-photo img { transition: none; } }
.runner-overview { padding-top: 32px; scroll-margin-top: 110px; }
.runner-overview[hidden] { display: none; }
.runner-collections-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.runner-collection-card { display: block; border: 1px solid #e5e0d8; color: #262626; background: #fff; text-decoration: none; }
.runner-collection-cover { height: 300px; padding: 18px; background: #f6f5f2; overflow: hidden; }
.runner-collection-cover img { width: 100%; height: 100%; object-fit: contain; transition: transform .2s; }
.runner-collection-card:hover img { transform: scale(1.03); }
.runner-collection-card:focus-visible { outline: 3px solid #cb0754; outline-offset: 4px; }
.runner-collection-info { padding: 20px; }
.runner-collection-info h2 { font-size: 22px; margin-bottom: 10px; }
.runner-collection-info span { font-size: 13px; color: #666; }
.runner-collection-info p { margin: 16px 0 0; font-size: 14px; color: #a50643; }
.runner-back { display: inline-block; margin-bottom: 28px; color: #a50643; font-size: 14px; }
@media (max-width: 900px) { .runner-collections-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .runner-collections-grid { gap: 14px; } .runner-collection-cover { height: 220px; padding: 10px; } .runner-collection-info { padding: 14px; } .runner-collection-info h2 { font-size: 18px; } }

.runner-code-label { display: block; margin-bottom: 4px; color: #777; font-size: 11px; font-weight: 400; }