.travelclip-site .shopping-area-map { max-width: none; margin-block: 38px; }
.travelclip-site .shopping-area-map > header { display: grid; grid-template-columns: minmax(10rem, .62fr) minmax(0, 1.38fr); gap: 8px clamp(24px, 4vw, 54px); padding-top: 18px; border-top: 2px solid var(--forest-dark); }
.travelclip-site .shopping-area-map > header .eyebrow { grid-row: 1 / span 2; padding-top: 5px; }
.travelclip-site .shopping-area-map h2 { margin: 0; color: var(--forest-dark); }
.travelclip-site .shopping-area-map > header > p:last-child { max-width: 58ch; margin: 0; }
.travelclip-site .shopping-area-map figure { margin: 22px 0 0; }
.travelclip-site .shopping-area-map-canvas { position: relative; min-height: 460px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(145deg, oklch(.945 .028 111), oklch(.985 .01 87)); }
.travelclip-site .shopping-area-map-canvas::before, .travelclip-site .shopping-area-map-canvas::after { position: absolute; inset: 9% 8%; border: 1px solid color-mix(in oklch, var(--forest) 24%, transparent); content: ""; transform: rotate(-12deg); }
.travelclip-site .shopping-area-map-canvas::after { inset: 32% -10%; transform: rotate(23deg); }
.travelclip-site .shopping-river { position: absolute; top: -8%; bottom: -8%; left: 39%; width: 11%; border-right: 4px solid oklch(.64 .07 214); border-left: 4px solid oklch(.82 .05 214); color: oklch(.41 .05 214); font-size: .72rem; font-weight: 750; letter-spacing: .08em; writing-mode: vertical-rl; text-align: center; transform: rotate(11deg); }
.travelclip-site .shopping-district, .travelclip-site .shopping-road { position: absolute; color: color-mix(in oklch, var(--forest-dark) 62%, transparent); font-size: .72rem; font-weight: 850; letter-spacing: .09em; }
.travelclip-site .shopping-district--center { top: 16%; left: 9%; }.travelclip-site .shopping-district--prati { top: 21%; right: 7%; }.travelclip-site .shopping-road--corso { top: 42%; left: 18%; transform: rotate(-32deg); }.travelclip-site .shopping-road--outlet { right: 6%; bottom: 8%; color: var(--coral); }
.travelclip-site .shopping-map-pin { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; max-width: 176px; color: var(--forest-dark); text-decoration: none; }
.travelclip-site .shopping-map-pin > span:last-child { display: grid; gap: 2px; padding: 8px 10px; background: var(--panel); box-shadow: 2px 3px 0 oklch(.25 .055 154 / .16); }.travelclip-site .shopping-map-pin strong { font-size: .84rem; line-height: 1.3; }.travelclip-site .shopping-map-pin small { color: var(--text); font-size: .68rem; line-height: 1.35; }.travelclip-site .shopping-map-pin-number { display: grid; flex: 0 0 27px; place-items: center; width: 27px; height: 27px; border: 3px solid var(--panel); border-radius: 50%; background: var(--forest-dark); color: white; font-size: .72rem; font-weight: 850; box-shadow: 0 5px 0 oklch(.25 .055 154 / .2); }
.travelclip-site .shopping-map-pin:hover > span:last-child, .travelclip-site .shopping-map-pin:focus-visible > span:last-child { outline: 3px solid var(--coral); outline-offset: 3px; }.travelclip-site .shopping-map-pin:focus-visible { outline: none; }
.travelclip-site .shopping-map-pin--tritone { top: 32%; left: 20%; }.travelclip-site .shopping-map-pin--corso { top: 47%; left: 26%; }.travelclip-site .shopping-map-pin--condotti { top: 60%; left: 31%; }.travelclip-site .shopping-map-pin--fiume { top: 12%; left: 30%; }.travelclip-site .shopping-map-pin--coin { top: 39%; right: 7%; }.travelclip-site .shopping-map-pin--outlet { right: 10%; bottom: 17%; }
.travelclip-site .shopping-area-map figcaption { padding: 13px 16px; background: color-mix(in oklch, var(--forest-dark) 7%, var(--panel)); color: var(--text); font-size: .78rem; line-height: 1.55; }
@media (max-width: 800px) { .travelclip-site .shopping-area-map > header { grid-template-columns: 1fr; gap: 8px; }.travelclip-site .shopping-area-map > header .eyebrow { grid-row: auto; }.travelclip-site .shopping-area-map-canvas { min-height: 560px; }.travelclip-site .shopping-map-pin { max-width: 138px; }.travelclip-site .shopping-map-pin > span:last-child { padding: 6px 7px; }.travelclip-site .shopping-map-pin strong { font-size: .72rem; }.travelclip-site .shopping-map-pin small { font-size: .6rem; }.travelclip-site .shopping-map-pin--tritone { top: 30%; left: 8%; }.travelclip-site .shopping-map-pin--corso { top: 45%; left: 12%; }.travelclip-site .shopping-map-pin--condotti { top: 59%; left: 15%; }.travelclip-site .shopping-map-pin--fiume { top: 10%; left: 16%; }.travelclip-site .shopping-map-pin--coin { top: 37%; right: 2%; }.travelclip-site .shopping-map-pin--outlet { right: 3%; bottom: 14%; } }