.sm-google-map { margin-top: var(--space-24); }
.sm-google-map-canvas { z-index: 0; }
.sm-osm-marker { background: transparent; border: 0; }
.sm-osm-map .leaflet-popup-content { margin: 12px; }
.sm-osm-map .leaflet-popup-content p { margin: 0 0 12px; }
.sm-osm-map .leaflet-container { font-family: var(--font-family-body); }
.sm-google-map [hidden] { display: none !important; }
.sm-google-map iframe, .sm-google-map-canvas { width: 100%; height: 400px; display: block; border: 0; border-radius: var(--radius-sm); }
.sm-map-directory { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-12); }
.sm-map-point { display: flex; flex-direction: column; gap: var(--space-16); background: var(--c-white); color: var(--c-copy); border-radius: var(--radius-sm); padding: var(--space-24); }
.sm-map-point-intro { display: flex; flex-direction: column; gap: var(--space-4); }
.sm-map-point :is(.t-body,.t-body-bold) { --type-line-height: var(--line-height-sm); }
.sm-google-map .sm-map-point-intro :is(h3,p) { margin: 0; }
.sm-map-point h3 { margin: 0 0 var(--space-12); }
.sm-map-point p { margin: 0 0 var(--space-16); }
.sm-map-point-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); margin-top: 0; }
.sm-google-map .sm-map-point-actions button { border: 0; border-radius: var(--radius-sm); padding: 12px 16px; background: var(--color-brand); color: white; cursor: pointer; }
.sm-google-map .sm-map-point-actions a { display: inline-flex; align-items: center; gap: var(--space-8); color: var(--color-brand); text-decoration: none; }
.sm-map-point-actions img { display: block; flex: 0 0 20px; }
.sm-google-map .sm-map-point-actions .sm-map-clinic-link { color: var(--color-accent); }
.sm-google-map .sm-map-point-actions a:hover { text-decoration: underline; }
.sm-google-map .sm-map-point-title { border: 0; background: transparent; color: var(--color-heading); padding: 0; text-align: left; cursor: pointer; font: inherit; white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
.sm-map-address-locality { display: none; }
.sm-map-summary { display: flex; align-items: center; gap: var(--space-16); cursor: pointer; list-style: none; }
.sm-map-summary::-webkit-details-marker { display: none; }
.sm-map-section-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; padding: var(--space-6); background: var(--color-brand); border-radius: var(--radius-pill); }
.sm-map-caret { margin-left: auto; flex: 0 0 24px; }
.sm-map-accordion[open] > summary .sm-map-caret { transform: rotate(180deg); }
.sm-map-accordion { scroll-margin-top: calc(var(--sm-site-header-height,118px) + var(--space-32)); }
.sm-map-accordion > .sm-google-map { margin-top: var(--space-12); }
.sm-map-summary:focus-visible { outline: 3px solid var(--color-brand); outline-offset: 4px; }
.sm-google-map :is(a,button):focus-visible { outline: 3px solid var(--c-blue-light); outline-offset: 3px; }
.sm-map-popup { display: flex; flex-direction: column; gap: var(--space-16); max-width: 300px; padding: 8px; font-family: var(--font-family-body); }
.sm-map-popup h3 { font-size: 18px; }
.sm-google-map .sm-location__hours { margin: 12px 0; font-size: 14px; }
.sm-google-map .sm-location__hours > div { display: grid; grid-template-columns: 65px minmax(0,1fr); gap: 8px; margin-block: 4px; }
.sm-google-map .sm-location__hours dd { margin: 0; }
.sm-map-popup [data-map-point] { display: none; }
.sm-map-pin { width: 38px; height: 38px; display: grid; place-items: center; background: var(--color-brand); color: white; border: 2px solid white; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 3px 8px #0003; }
.sm-map-pin span { transform: rotate(45deg); font: 600 16px var(--font-family-body); }
.sm-map-pin img { display: block; width: 22px; height: 22px; filter: brightness(0) invert(1); }
.sm-location__map-actions .sm-map-directory { display: none; }
.sm-location__map-actions .sm-google-map { margin-top: 0; }
.sm-location__map-actions iframe, .sm-location__map-actions .sm-google-map-canvas { height: auto; aspect-ratio: 579 / 306; }
.sm-maps-container { max-width: calc(var(--container-max,1200px) + 2 * var(--space-page-x,20px)); margin: auto; padding-inline: var(--space-page-x,20px); } /* 1200px content, as other sections */
#mapa-punktow { scroll-margin-top: calc(var(--sm-site-header-height,118px) + var(--space-32)); }
.sm-collection-points { padding-block: calc(var(--sm-header-offset,170px) + 32px) 64px; background: var(--c-bg-blue); }
@media(max-width:767px) { .sm-map-directory { grid-template-columns: 1fr; } .sm-google-map iframe, .sm-google-map-canvas { height: 320px; } .sm-map-point { padding: 16px; } .sm-collection-points { --sm-header-offset: 96px; } }
/* Map + clinic list (Figma 108:1178): map left, 291px cards right with a custom scrollbar.
   Cards have no buttons: the card selects the pin, whose popup holds the details; the phone stays a link. */
.sm-map-split { --sm-map-height: 580px; display: grid; grid-template-columns: minmax(0,1fr) 306px; align-items: start; gap: var(--space-12); }
.sm-map-split .sm-google-map-canvas { grid-column: 1; grid-row: 1; height: var(--sm-map-height); }
.sm-map-split .sm-map-list { grid-column: 2; grid-row: 1; display: grid; grid-template-columns: 291px 6px; gap: 9px; height: var(--sm-map-height); }
.sm-map-split .sm-map-directory { display: flex; flex-direction: column; gap: var(--space-12); overflow-y: auto; scrollbar-width: none; padding: 0 0 var(--space-24); margin: 0; }
.sm-map-split .sm-map-directory::-webkit-scrollbar { display: none; }
.sm-map-split .sm-map-point { position: relative; flex: 0 0 auto; gap: var(--space-4); padding: var(--space-24); box-shadow: var(--shadow-blue); transition: box-shadow .15s ease; }
.sm-map-split .sm-map-point:hover { box-shadow: var(--shadow-blue), inset 0 0 0 1px var(--c-blue-light); }
.sm-map-split .sm-map-point:has([aria-pressed="true"]) { box-shadow: var(--shadow-blue), inset 0 0 0 2px var(--color-brand); }
.sm-google-map .sm-map-point-select { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; border: 0; padding: 0; background: transparent; color: var(--c-copy); text-align: left; white-space: normal; cursor: pointer; font: inherit; }
.sm-google-map .sm-map-point-select:hover, .sm-google-map .sm-map-point-select:focus { background: transparent; color: var(--c-copy); }
.sm-google-map .sm-map-point-select::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-sm); } /* whole card clickable */
.sm-map-point-name { color: var(--color-heading); overflow-wrap: anywhere; }
.sm-google-map .sm-map-point-phone { position: relative; z-index: 1; align-self: flex-start; color: var(--c-copy); text-decoration: none; }
.sm-google-map .sm-map-point-phone:hover { color: var(--color-brand); text-decoration: underline; }
.sm-map-point-details { display: none; }
.sm-map-split:has([data-map-canvas][hidden]) .sm-map-point-details { display: flex; flex-direction: column; gap: var(--space-12); margin-top: var(--space-12); } /* no map: details inline */
.sm-map-split .sm-map-list.is-static { grid-template-columns: minmax(0,1fr); }
.sm-map-scrollbar { position: relative; width: 6px; height: 100%; border-radius: var(--radius-pill); background: var(--c-white); }
.sm-map-scrollbar span { position: absolute; left: 0; top: 0; width: 6px; min-height: 32px; border-radius: var(--radius-pill); background: var(--color-brand); cursor: grab; }
.sm-map-scrollbar.is-dragging span { cursor: grabbing; }
.sm-map-split:has([data-map-canvas][hidden]) .sm-map-list { grid-column: 1 / -1; height: auto; grid-template-columns: minmax(0,1fr); }
.sm-map-split:has([data-map-canvas][hidden]) .sm-map-directory { display: grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); }
.sm-map-popup { display: flex; flex-direction: column; gap: var(--space-12); max-width: 300px; padding: 4px; font-family: var(--font-family-body); color: var(--c-copy); }
.sm-map-popup h3 { margin: 0; font-size: 16px; color: var(--color-heading); }
.sm-map-popup p { margin: 0 !important; }
.sm-map-popup .sm-location__hours { margin: 0; }
.sm-map-popup .sm-map-point-actions { gap: var(--space-12); }
@media (max-width: 767px) {
    .sm-map-split { --sm-map-height: 320px; grid-template-columns: minmax(0,1fr); }
    .sm-map-split .sm-map-list { grid-column: 1; grid-row: 2; grid-template-columns: minmax(0,1fr) 6px; height: 360px; }
    .sm-map-split .sm-map-point { padding: var(--space-16); }
}
/* /nasze-placowki/ and /punkty-pobran/: taller map (and list). */
@media (min-width: 768px) { :is(#mapa-placowek,#mapa-punktow) .sm-map-split { --sm-map-height: 50rem; } }
/* Blue title bar with the map switch buttons (Figma 108:1365). */
.sm-points-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-16) var(--space-24); padding: var(--space-24); border-radius: var(--radius-sm); background: var(--color-brand); box-shadow: var(--shadow-blue); }
.sm-points-bar :is(h1,h2) { margin: 0; color: var(--c-white); }
.sm-points-bar + .sm-google-map { margin-top: var(--space-16); }
.sm-points-nav { display: flex; flex-wrap: wrap; gap: var(--space-16); }
.sm-points-nav .sm-button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 12px; border: 1px solid var(--c-white); border-radius: var(--radius-sm); background: transparent; color: var(--c-white); text-decoration: none; }
.sm-points-nav .sm-button:hover { background: rgb(255 255 255 / 12%); color: var(--c-white); }
.sm-points-nav .sm-button.is-current { background: var(--c-white); color: var(--color-brand); }
@media (max-width: 767px) { .sm-points-bar { padding: var(--space-16); } .sm-points-nav { width: 100%; gap: var(--space-8); } .sm-points-nav .sm-button { flex: 1 1 auto; } }
/* Home page section. */
.sm-home-clinics { padding-block: var(--space-48) var(--space-64); background: var(--c-bg-blue); }