/* Aanvullingen op Spectra-blokken van de winkelpagina's (wat Spectra zelf niet kan). */
/* "Other stores": kaartkleur wisselt per kaart (merkkleuren Orange, Pink, Purple zoals in Penpot); pijl in de kaartkleur. */
.uagb-loop-post:nth-child(3n+2) .ss-store-card { background-color: #e14a9a !important; }
.uagb-loop-post:nth-child(3n+3) .ss-store-card { background-color: #8c3b94 !important; }
.ss-store-card { transition: transform .15s; }
.ss-store-card:hover { transform: translateY(-2px); }
.uagb-loop-post .ss-store-card .ss-card-arrow svg { fill: #f47721; }
.uagb-loop-post:nth-child(3n+2) .ss-store-card .ss-card-arrow svg { fill: #e14a9a; }
.uagb-loop-post:nth-child(3n+3) .ss-store-card .ss-card-arrow svg { fill: #8c3b94; }
/* "Open in Google Maps" als tekstlink. */
.ss-textlink .uagb-button__link { text-decoration: underline; text-underline-offset: 2px; }
/* Broodkruimel zonder onderstreping (thema onderstreept links in koppen). */
.ss-crumbs a { text-decoration: none; }
.ss-crumbs a:hover { text-decoration: underline; }
/* Loop-items vullen hun kolom; Spectra laat de kaart anders op inhoudsbreedte staan. */
.uagb-loop-post-inner, .uagb-loop-post-inner > .wp-block-uagb-loop-wrapper, .uagb-loop-post .ss-store-card { width: 100%; }
.ss-card-arrow .uagb-svg-wrapper { border-radius: 50%; }
.ss-store-card p.uagb-heading-text { white-space: nowrap; }
/* All stores: accordeon (zie spectra.js) en focusrand. */
.ss-acc .ss-c:not(.is-open) .ss-c-panel { display: none; }
.ss-c-head { cursor: pointer; }
.ss-c-head:focus-visible { outline: 3px solid var(--ss-ring, #140610); outline-offset: -3px; }
.ss-c-toggle svg { transition: transform .2s; }
.ss-c.is-open .ss-c-toggle svg { transform: rotate(180deg); }
.ss-row { transition: filter .15s; }
.ss-row:hover { filter: brightness(.97); }
.ss-c-toggle .uagb-svg-wrapper { border-radius: 50%; }
/* Winkelregel: foto vast 44px, tekst neemt de rest, meta op één regel. */
.ss-row > .wp-block-uagb-container:first-child { flex-shrink: 0; }
.ss-row > .wp-block-uagb-container:nth-child(2) { flex: 1 1 0; min-width: 0; }
.ss-row p.uagb-heading-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-row > .uagb-icon-wrapper { flex: 0 0 13px; width: 13px; }
/* All stores: inline kaart met klikbare markers (zie rf_stores_map_svg). */
.ss-map { position: relative; background-image: none !important; overflow: hidden; }
.ss-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ss-map-svg .ss-pin { transition: transform .15s ease; transform-box: fill-box; transform-origin: center; }
.ss-map-svg a:hover .ss-pin, .ss-map-svg a:focus-visible .ss-pin { transform: scale(1.2); }
.ss-map-svg a { outline: none; cursor: pointer; }
.ss-map-svg a:focus-visible .ss-pin { filter: drop-shadow(0 0 0 #140610) drop-shadow(0 0 3px #140610); }
/* Lang indrukken = tollen (spectra.js): geen tekstselectie of linkmenu op touch. */
.ss-map-svg a { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* Tijdelijk verborgen blokken (bijv. Duitsland, zie oneoff/hide-de.php). */
.ss-hidden { display: none !important; }
/* Winkelpagina: lege "Opening hours note" (veld leeg) niet tonen, wel 24px ruimte tot het kaartje. */
.ss-hours-note:has(.uag-pro-dynamic-content:empty), .ss-hours-note:has(.uagb-heading-text:empty) { margin: 0 0 24px !important; }
.ss-hours-note .uagb-heading-text:empty, .ss-hours-note:has(.uag-pro-dynamic-content:empty) .uagb-heading-text { display: none; }
/* All stores: stad met meer winkels uitwaaieren (zie spectra.js ssMapOpen). */
.ss-map-svg .ss-spider { visibility: hidden; }
.ss-map-svg .ss-city.is-open .ss-spider { visibility: visible; }
.ss-map-svg .ss-city > a .ss-scale > * { transition: opacity .2s; }
.ss-map-svg .ss-city.is-open > a { pointer-events: none; }
.ss-map-svg .ss-city.is-open > a .ss-scale > * { opacity: 0; }
.ss-map-svg .ss-sp-item > g { transform: scale(.3); opacity: 0; transition: transform .4s cubic-bezier(.3, 1.4, .5, 1), opacity .2s; }
.ss-map-svg .ss-city.is-open .ss-sp-item > g { transform: translate(var(--dx), var(--dy)); opacity: 1; }
.ss-map-svg .ss-city.is-open .ss-sp-item:nth-of-type(2) > g { transition-delay: .05s; }
.ss-map-svg .ss-city.is-open .ss-sp-item:nth-of-type(3) > g { transition-delay: .1s; }
.ss-map-svg .ss-city.is-open .ss-sp-item:nth-of-type(4) > g { transition-delay: .15s; }
.ss-map-svg .ss-sp-line { stroke: #2a1430; stroke-width: 2; stroke-dasharray: 3 5; stroke-linecap: round; opacity: 0; transition: opacity .3s .2s; }
.ss-map-svg .ss-sp-dot { opacity: 0; transition: opacity .3s; }
.ss-map-svg .ss-city.is-open .ss-sp-line { opacity: .55; }
.ss-map-svg .ss-city.is-open .ss-sp-dot { opacity: 1; }
.ss-map-svg .ss-sp-label { font: 600 16px "Avenir Next Condensed", "Barlow Condensed", sans-serif; fill: #2a1430; stroke: #fbf1e4; stroke-width: 5px; stroke-linejoin: round; paint-order: stroke; }
.ss-map-svg .ss-sp-item:hover .ss-sp-label, .ss-map-svg .ss-sp-item:focus-visible .ss-sp-label { text-decoration: underline; }
.ss-map-back { display: none; position: absolute !important; bottom: 16px; left: 16px; right: auto; top: auto; width: auto !important; max-width: none; margin: 0 !important; z-index: 2; line-height: 1.2; border: 0; border-radius: 999px; padding: 10px 18px; background: #ffffff; color: #2a1430; font: 600 16px "Avenir Next Condensed", "Barlow Condensed", sans-serif; box-shadow: 0 4px 14px rgba(58, 16, 48, .18); cursor: pointer; }
.ss-map-back:hover { background: #fbf1e4; }
.ss-map-back:focus-visible { outline: 3px solid #ec008c; outline-offset: 2px; }
.ss-map.is-zoomed .ss-map-back { display: block; }
@media (prefers-reduced-motion: reduce) { .ss-map-svg .ss-sp-item > g, .ss-map-svg .ss-sp-line, .ss-map-svg .ss-sp-dot { transition: none; } }
/* Winkelpagina: H1 "Sunglasses store <straat>" gelijkmatig over de regels (geen losse huisnummers). */
.uagb-block-f7e91b34 .uagb-heading-text { text-wrap: balance; }
/* Winkelpagina: kaartje = link naar de routebeschrijving (zie store-data.php). */
.ss-store-map { position: relative; }
.ss-store-map > .ss-route-link { position: absolute !important; inset: 0; z-index: 1; display: block; width: auto !important; max-width: none !important; height: auto; margin: 0 !important; border-radius: inherit; }
.ss-route-pill { position: absolute !important; top: 12px; right: 12px; bottom: auto; left: auto; padding: 7px 14px; border-radius: 999px; background: #ffffff; color: #2a1430; font: 600 15px/1.2 "Avenir Next Condensed", "Barlow Condensed", sans-serif; box-shadow: 0 3px 10px rgba(58, 16, 48, .18); transition: background .15s, color .15s; }
.ss-route-link:hover .ss-route-pill, .ss-route-link:focus-visible .ss-route-pill { background: #ec008c; color: #ffffff; }
.ss-route-link:focus-visible { outline: 3px solid #ec008c; outline-offset: 3px; }
@media (max-width: 600px) { .ss-map-back { top: 12px; bottom: auto; left: 12px; padding: 8px 14px; font-size: 15px; } } /* mobiel: linksboven, onderaan valt hij over een straatnaam */