/**
 * PP Store-Locator map card (T405).
 * Renders inside YITH's .wrap-store-details results item AND the map
 * pin-info-modal via pp_sl_render_location_products() / the child-theme
 * pin-info-modal.php override: "Products at this location" label + category
 * badges + a "View Project Details" link. Values match Miranda's Figma
 * (Premier Polysteel, node 978-20362).
 *
 * Rules are scoped under .pp-sl-products and use !important on the handful of
 * properties Elementor's global link/paragraph styles otherwise override
 * (link font-size/weight/decoration, paragraph + list margins).
 */

.pp-sl-products {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 20px;
}

/* Map pin-info-modal context: the popup design puts a divider above the block. */
.pp-sl-products--modal {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #e3e7ea;
}

/* Map pin-info-modal wrapper: drop YITH's vertical padding (per design). */
.store-info {
	padding-top: 0;
	padding-bottom: 0;
}

.pp-sl-products .pp-sl-products__heading {
	margin: 0 !important;
	padding: 0;
	font-family: "Inter", sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	letter-spacing: 1.12px;
	text-transform: uppercase;
	color: #0e141b;
}

.pp-sl-products .pp-sl-products__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}

.pp-sl-products .pp-sl-badge {
	margin: 0 !important;
	padding: 4px 8px;
	border-radius: 8px;
	background: #e1ebf4;
	color: #0e141b;
	font-family: "Inter", sans-serif;
	font-weight: 500;
	font-size: 12px;
	line-height: 1.8;
	white-space: nowrap;
	list-style: none;
}

.pp-sl-products .pp-sl-products__details {
	align-self: flex-start;
	margin: 0 !important;
	padding: 0;
	font-family: "Inter", sans-serif;
	font-weight: 500 !important;
	font-size: 14px !important;
	line-height: 1.8;
	color: #1053b7;
	text-decoration: underline !important;
	text-decoration-color: #1053b7 !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 4px;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: none;
}

/* Hover: underline drops (per design). */
.pp-sl-products .pp-sl-products__details:hover {
	color: #1053b7;
	text-decoration: none !important;
}

/* Focus/active: KEEP the underline (the map InfoWindow auto-focuses this link),
   just suppress the focus box. */
.pp-sl-products .pp-sl-products__details:focus,
.pp-sl-products .pp-sl-products__details:active {
	color: #1053b7;
	text-decoration: underline !important;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
}

/* Store-name title (results list + pin popup): Inter 16.
   Overrides the Elementor widget rule that binds .store-name to the H4/Rubik-20 global
   typography token; !important + the results-container scope to win over Elementor's
   high-specificity generated selector.
   #420: locations WITHOUT a project-details page render the name as a <span> (not <a>),
   which the original `> a`-only rule missed — so those fell back to the big/bold H4 while
   linked names were Inter 16 (inconsistent). Cover BOTH <a> and <span> as a uniform title:
   Rubik 20 / SemiBold 600 / line-height 1.6 — the H4 heading token (family/size/weight
   confirmed by Tif). */
#yith-sl-results .store-info .store-name > a,
#yith-sl-results .store-info .store-name > span {
	font-family: Rubik, sans-serif !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 1.6 !important;
}

/* #420: also tidy long titles in the narrow results column — wrap only between whole
   words; let over-long tokens (slash-joined names like "Field/Hammer") break cleanly
   instead of overflowing. Never mid-word. */
#yith-sl-results .store-info .store-name,
#yith-sl-results .store-info .store-name > a,
#yith-sl-results .store-info .store-name > span {
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: none;
}

/* #668: the locator's top button (relabeled "Reset" via YITH settings) was a
   solid button styled "View All Projects". Restyle it as a plain branded text
   link matching the site's link styling (Elementor global typography 8577666 +
   brand blue #1053B7 / underline #1E70EB) and let store-locator-reset.js move it
   to the end of the filter row. Strip the YITH/Elementor button chrome. */
#yith-sl-show-all-stores.show-all-stores {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	min-width: 0 !important;
	width: auto !important;
	cursor: pointer;
	font-family: var(--e-global-typography-8577666-font-family), Sans-serif !important;
	font-size: var(--e-global-typography-8577666-font-size) !important;
	font-weight: var(--e-global-typography-8577666-font-weight) !important;
	line-height: var(--e-global-typography-8577666-line-height) !important;
	color: #1053b7 !important;
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-color: #1e70eb;
	text-decoration-thickness: 12%;
	text-underline-offset: 40%;
	text-decoration-skip-ink: auto;
}

#yith-sl-show-all-stores.show-all-stores:hover,
#yith-sl-show-all-stores.show-all-stores:focus {
	background: none !important;
	color: #1e70eb !important;
}

/* When JS has placed it into the filter row, align it with the dropdowns and
   push it to the row's end. */
.wrap-filters-list #yith-sl-show-all-stores.show-all-stores {
	align-self: center;
	margin: 0 0 0 auto !important;
}