/* Product facts and company cards share the existing Runnerio colour/control tokens. */
.rio-product-details { --rio-product-copy-size:var(--rio-content-size,16px); display:grid; gap:28px; margin:24px 0 30px; color:var(--rio-ink,#20344b); font-family:var(--rio-font,system-ui,sans-serif); }
.rio-product-details h2,.rio-company-overview h2,.rio-company-related>h2 { font:var(--rio-heading-weight,700) var(--rio-heading-current-size,var(--rio-heading-size,29px))/1.2 var(--rio-heading,system-ui,sans-serif); text-transform:var(--rio-heading-transform,uppercase); margin:0 0 18px; }
.rio-shoe-profile { border:1px solid var(--rio-accent,#00fe01); padding:24px; background:linear-gradient(110deg,color-mix(in srgb,var(--rio-accent,#00fe01) 10%,white),white 85%); }
.rio-shoe-profile header { margin-bottom:20px; }.rio-shoe-profile header :is(h2,h3) { margin-bottom:8px; }.rio-shoe-profile header p { margin:0; font-size:12px; }
.rio-shoe-profile dl { display:grid; gap:10px; margin:0; }.rio-shoe-profile dl>div { display:flex; justify-content:space-between; align-items:center; gap:16px; background:var(--rio-paper,#fff); border:1px solid var(--rio-line,#dce2e7); padding:13px 16px; }
.rio-shoe-profile dt { font-size:var(--rio-product-copy-size,14px); font-weight:600; }.rio-shoe-profile dd { display:flex; align-items:center; gap:12px; margin:0; flex:0 0 auto; }
.rio-shoe-profile dd strong { font:600 12px/1.4 var(--rio-font,system-ui,sans-serif); padding:5px 10px; border-radius:20px; background:var(--rio-ink,#20344b); color:var(--rio-on-dark,#fff); }
.rio-shoe-dots { display:flex; gap:5px; }.rio-shoe-dots>span { width:12px; height:12px; border:2px solid var(--rio-ink,#20344b); border-radius:50%; background:var(--rio-paper,#fff); }.rio-shoe-dots>.is-filled { background:var(--rio-accent,#00fe01); }
.rio-product-properties { display:grid; gap:10px; padding:0; margin:0; }.rio-product-properties>div { position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:4px; padding:14px 16px; background:var(--rio-property-surface,var(--rio-soft,#f4f6f7)); border:1px solid var(--rio-line,#dce2e7); }
.rio-product-properties dt { padding-left:46px; font-size:var(--rio-product-copy-size,12px); line-height:1.6; }.rio-product-properties dd { padding-left:46px; margin:0; font-size:var(--rio-product-copy-size,14px); line-height:1.7; font-weight:600; overflow-wrap:anywhere; }
.rio-property-value { gap:4px; vertical-align:middle; }
.rio-property-value>.rio-icon-button { flex:0 0 24px; width:24px; height:24px; padding:4px; }
.rio-property-value>.rio-icon-button>.rio-icon { display:block; width:16px; height:16px; }
.rio-property-icon { position:absolute; top:50%; left:16px; transform:translateY(-50%); display:grid; place-items:center; width:34px; height:34px; background:var(--rio-paper,#fff); border:1px solid var(--rio-line,#dce2e7); }.rio-property-icon .rio-icon { width:18px; height:18px; color:var(--rio-ink,#20344b); }
/* Nested product facts reuse the existing wikibox and product components. */
.rio-wikibox>.rio-product-sections { display:grid; min-width:0; gap:22px; margin-top:22px; }
.rio-product-sections :is(.rio-product-orders>h3,.rio-shoe-profile header>h3) { margin:0 0 14px; font:var(--rio-heading-weight,700) var(--rio-heading-current-size,var(--rio-heading-size,24px))/1.2 var(--rio-heading,system-ui,sans-serif); text-transform:var(--rio-heading-transform,uppercase); }
.rio-product-sections .rio-company-reference { margin:0; }
.rio-product-order-links { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; }.rio-product-order-links .rio-button { width:100%; text-decoration:none; }.rio-product-ad-note { margin:12px 0 0; font-size:12px; line-height:1.7; }
.rio-company-reference { margin-block:24px; }.rio-product-details .rio-company-reference { margin:0; }.rio-company-reference>h2 { font:var(--rio-heading-weight,700) var(--rio-heading-current-size,var(--rio-heading-size,29px))/1.2 var(--rio-heading,system-ui,sans-serif); margin:0 0 18px; text-transform:var(--rio-heading-transform,uppercase); }
.rio-company-card { display:grid; grid-template-columns:var(--rio-company-columns,84px minmax(0,1fr)); gap:var(--rio-company-gap,18px); border:1px solid var(--rio-line,#dce2e7); background:var(--rio-paper,#fff); padding:var(--rio-company-padding,20px); color:var(--rio-ink,#20344b); min-width:0; }
.rio-company-logo { display:grid; place-items:center; align-self:start; box-sizing:border-box; width:84px; height:84px; border:1px solid var(--rio-line,#dce2e7); background:var(--rio-soft,#f4f6f7); }.rio-company-logo img { width:100%; height:100%; object-fit:contain; }.rio-company-logo .rio-icon { width:34px; height:34px; }
.rio-company-copy { min-width:0; }.rio-company-copy h3 { font:var(--rio-heading-weight,700) var(--rio-heading-current-size,var(--rio-heading-size,26px))/1.15 var(--rio-heading,system-ui,sans-serif); text-transform:var(--rio-heading-transform,uppercase); margin:0 0 10px; }.rio-company-copy h3>a { text-decoration:none; }.rio-company-copy h3>a:hover { color:var(--rio-accent,#00fe01); }
.rio-company-copy p { font:var(--rio-content-weight,400) var(--rio-content-size,14px)/1.75 var(--rio-font,system-ui,sans-serif); margin:0 0 10px; overflow-wrap:anywhere; text-transform:var(--rio-content-transform,none); }.rio-company-copy .rio-button { text-decoration:none; }
.rio-company-overview { margin-bottom:28px; }.rio-company-overview-head { display:flex; gap:20px; align-items:flex-start; margin-bottom:22px; }.rio-company-detail-logo { box-sizing:border-box; width:108px; height:108px; border:1px solid var(--rio-line,#dce2e7); object-fit:contain; background:var(--rio-paper,#fff); flex:0 0 108px; }
.rio-company-overview-head>div { min-width:0; max-width:100%; overflow-wrap:anywhere; }.rio-company-overview p { font-size:var(--rio-content-size,14px); line-height:1.8; text-transform:var(--rio-content-transform,none); }.rio-company-overview .rio-product-properties { margin-bottom:22px; }.rio-company-overview .rio-product-properties>div { grid-template-columns:minmax(0,1fr); }.rio-company-overview .rio-product-properties :is(dt,dd) { padding-left:0; }
.rio-company-related { margin-top:32px; }.rio-company-related .rio-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.rio-company-card-index { --rio-company-columns:84px minmax(0,1fr) 44px; align-items:center; }
.rio-company-card-index .rio-company-copy h3 { font-size:var(--rio-heading-current-size,var(--rio-heading-size,25px)); margin-bottom:8px; }
.rio-company-copy .rio-company-place { display:flex; align-items:flex-start; gap:7px; margin:10px 0; font-size:13px; }
.rio-company-place .rio-icon { width:16px; height:16px; flex:0 0 16px; margin-top:3px; }
.rio-company-categories { display:flex; flex-wrap:wrap; gap:7px; margin:10px 0; }
.rio-company-category { display:inline-flex; max-width:100%; padding:5px 8px; font:600 11px/1.5 var(--rio-font,system-ui,sans-serif); background:var(--rio-accent,#00fe01); color:var(--rio-on-accent,#20344b); text-decoration:none; overflow-wrap:anywhere; }
.rio-company-category:hover { color:var(--rio-on-dark,#fff); background:var(--rio-ink,#20344b); }
.rio-company-copy>.rio-rating-summary { justify-content:flex-start; margin:0 0 12px; --rio-star-size:16px; --rio-star-icon-size:14px; gap:6px 10px; font-size:11px; }
.rio-company-copy>.rio-rating-summary strong { font-size:13px; }
@media(max-width:599px) { .rio-shoe-profile { padding:18px 14px; }.rio-shoe-profile dl>div { padding:12px; gap:8px; }.rio-shoe-profile dt { font-size:var(--rio-product-copy-size,12px); }.rio-shoe-profile dd { gap:8px; }.rio-shoe-dots { gap:3px; }.rio-shoe-dots>span { width:10px; height:10px; }.rio-shoe-profile dd strong { padding:4px 7px; font-size:11px; }
.rio-company-card { --rio-company-padding:16px; --rio-company-columns:60px minmax(0,1fr); --rio-company-gap:14px; }.rio-company-card-index { --rio-company-columns:60px minmax(0,1fr); }.rio-company-card-index>.rio-button-icon { grid-column:2; justify-self:end; }.rio-company-logo { width:60px; height:60px; }.rio-company-copy h3 { font-size:var(--rio-heading-current-size,var(--rio-heading-size,23px)); }.rio-company-copy p { font-size:var(--rio-content-size,13px); text-transform:var(--rio-content-transform,none); }.rio-product-order-links { grid-template-columns:minmax(0,1fr); }
.rio-company-overview-head { flex-direction:column; }.rio-company-detail-logo { width:80px; height:80px; flex-basis:80px; }.rio-company-related .rio-card-grid { grid-template-columns:1fr; }
}
/* Complete company profile: optional contact, brands, hours and location sections. */
.rio-company-detail { display:grid; grid-template-columns:minmax(0,1fr); gap:28px; margin-bottom:30px; color:var(--rio-ink,#20344b); }
.rio-company-detail>section>h2 { overflow-wrap:anywhere; font:var(--rio-heading-weight,700) var(--rio-heading-current-size,var(--rio-heading-size,29px))/1.2 var(--rio-heading,system-ui,sans-serif); margin:0 0 18px; text-transform:var(--rio-heading-transform,uppercase); }
.rio-company-detail .rio-company-overview { margin:0; }
.rio-company-verified { display:inline-flex; align-items:center; gap:8px; font-size:12px; margin-top:5px; }.rio-company-verified .rio-icon { width:18px; height:18px; color:var(--rio-ink,#20344b); }
.rio-company-tagline { font-weight:600; }
.rio-company-actions { display:flex; align-items:stretch; flex-wrap:wrap; gap:12px; }.rio-company-actions .rio-button { flex:1 1 180px; }
/* One brand logo tile and grid for "Unsere Marken" and the public brand directory. */
.rio-directory-logo-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; min-width:0; }
.rio-directory-logo-card { min-width:0; border:1px solid var(--rio-line,#dce2e7); background:var(--rio-paper,#fff); color:var(--rio-ink,#20344b); }
.rio-directory-logo-card>a { display:flex; flex-direction:column; height:100%; padding:12px; gap:12px; text-align:center; text-decoration:none; }
.rio-directory-logo-card>a:hover,.rio-directory-logo-card>a:focus-visible { background:var(--rio-soft,#f4f6f7); }
.rio-directory-logo-media { display:grid; place-items:center; aspect-ratio:1; width:100%; padding:12px; border:1px solid var(--rio-line,#dce2e7); background:var(--rio-paper,#fff); }
.rio-directory-logo-media>img { display:block; width:100%; height:100%; min-height:0; min-width:0; object-fit:contain; }
.rio-directory-logo-media>.rio-icon { width:40px; height:40px; }
.rio-directory-logo-card :is(h2,h3) { margin:0; font:var(--rio-heading-weight,600) var(--rio-heading-current-size,var(--rio-heading-size,14px))/1.5 var(--rio-heading-custom-font,var(--rio-font,system-ui,sans-serif)); text-transform:var(--rio-heading-transform,none); }
@media(min-width:700px) { .rio-directory-logo-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }.rio-directory-logo-card>a { padding:16px; gap:18px; }.rio-directory-logo-media { padding:20px; }.rio-directory-logo-card :is(h2,h3) { font-size:var(--rio-heading-current-size,var(--rio-heading-size,16px)); } }
@media(min-width:1001px) { .rio-directory-logo-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
.rio-company-hours dl { display:grid; gap:8px; margin:0; }.rio-company-hours dl>div { display:flex; gap:16px; justify-content:space-between; padding:13px 16px; background:var(--rio-soft,#f4f6f7); font-size:14px; }.rio-company-hours dd { margin:0; font-weight:600; text-align:right; }
.rio-company-location .rio-map { margin-block:16px 0; }
.rio-location-address-bar { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px; border:1px solid var(--rio-line,#dce2e7); background:var(--rio-paper,#fff); }
.rio-company-location-address { display:flex; align-items:center; gap:14px; min-width:0; flex:1; }
.rio-company-location-address>div { display:grid; gap:4px; min-width:0; font-size:14px; line-height:1.65; overflow-wrap:anywhere; }
.rio-company-location-address strong { font-weight:700; }
.rio-location-icon { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; border:1px solid var(--rio-line,#dce2e7); background:var(--rio-soft,#f4f6f7); }
.rio-location-icon>.rio-icon { width:21px; height:21px; }
.rio-location-address-bar>.rio-button { flex:0 0 auto; }
.rio-location-note { margin:14px 0 0; font-size:14px; line-height:1.75; white-space:pre-line; overflow-wrap:anywhere; }
@media(max-width:599px) { .rio-location-address-bar { align-items:stretch; flex-direction:column; padding:14px; }.rio-location-address-bar>.rio-button { width:100%; }.rio-company-location-address>div { font-size:13px; } }
@media(max-width:599px) { .rio-company-hours dl>div { font-size:12px; }.rio-company-actions .rio-button { flex-basis:100%; } }