/**
 * Puls Store Sync - store picker styles.
 *
 * Everything visual is driven by the custom properties below, so a theme can
 * restyle the picker by redefining them - no template override, no !important
 * war with the theme's own CSS:
 *
 *   .puls-store-panel, .puls-store-button { --puls-store-accent: #e40010; }
 */

.puls-store-panel,
.puls-store-button,
.puls-store-card--info {
	--puls-store-accent: #154094;
	--puls-store-accent-contrast: #ffffff;
	--puls-store-brand: #e30613;
	--puls-store-surface: #ffffff;
	--puls-store-text: #33363b;
	--puls-store-muted: #6b6f76;
	--puls-store-border: #e2e4e8;
	--puls-store-radius: 10px;
	--puls-store-gap: 16px;
	--puls-store-panel-width: 420px;
	--puls-store-z: 99999;
	/* --puls-store-button-color is deliberately NOT declared here. Left
	   undeclared, the var() fallback in .puls-store-button resolves to
	   `inherit`, which is the behaviour we want by default; declaring it
	   empty would instead make the whole `color` declaration invalid. */
}

/* -------------------------------------------------- Trigger button */

/*
 * The trigger is built to sit in a site header, so it takes its font from
 * whatever surrounds it - but only the font. `font: inherit` also drags in the
 * page's line-height, which is set for running prose (1.9 and up on many
 * themes) and made the button 57px tall inside a 40px header bar, where it
 * overflowed and squeezed its neighbours. The line-height is therefore pinned
 * here rather than inherited. The visible label is the header's 0.85em /
 * weight 400 text (13.6px in a 16px bar); the outline icon sits on the same
 * top edge, 18×16. A Cornerstone text element wraps the shortcode in a
 * paragraph, and that line box is what pushed the control up in the bar, so
 * the paragraph is collapsed below.
 *
 * Colour is inherited by design, so the button matches the bar it sits in
 * without being told to. Where a theme's own wrapper forces an unusable colour
 * - a Cornerstone Text element inside a dark bar hands down near-black - set
 * `--puls-store-button-color` on any ancestor and it wins, no !important and no
 * template override:
 *
 *   .x-bar-top { --puls-store-button-color: #fff; }
 */
.x-text:has(.puls-store-button) > p {
	margin: 0;
	padding: 0;
}

/* wpautop leaves a <br> and an empty paragraph around the shortcode, which
   made the header cell taller than the control and pushed it above centre. */
.x-text > p:has(> .puls-store-button) br,
.x-text:has(.puls-store-button) > p:not(:has(.puls-store-button, .puls-store-panel)) {
	display: none;
}

.puls-store-button {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 5px;
	background: none;
	border: 0;
	padding: 2px 0;
	font: inherit;
	font-size: 0.85em;
	font-weight: 400;
	line-height: 1.4;
	color: var(--puls-store-button-color, inherit);
	cursor: pointer;
	border-radius: var(--puls-store-radius);
	white-space: nowrap;
	max-width: 100%;
}

/*
 * Same mark as the previous header control: a 2px line in the bar's own
 * colour, growing from the centre along the bottom edge.
 */
.puls-store-button::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.3s ease;
}

.puls-store-button__label {
	overflow: hidden;
	text-overflow: ellipsis;
}

/*
 * The header gives this column 20% of the bar. The synced title
 * ("Aktuelle Auswahl: Möbelhof Ingolstadt") is wider than that, so
 * the label was cut off. Size the column to the title and give the
 * neighbouring links whatever is left.
 * ponytail: a title longer than the whole bar overflows it. If a
 * store name ever does, cap this column and let the ellipsis above
 * come back.
 */
.x-bar .x-row-inner:has(.puls-store-button) {
	flex-wrap: nowrap;
}

.x-bar .x-row-inner:has(.puls-store-button) > .x-col:not(:has(.puls-store-button)) {
	flex: 1 1 auto;
	min-width: 0;
}

.x-bar .x-row-inner > .x-col:has(.puls-store-button) {
	flex: 0 0 auto;
	width: auto;
	min-width: max-content;
	max-width: none;
}

.x-bar .puls-store-button {
	max-width: none;
}

/* The old Cornerstone trigger sits in the same cell. Widening the cell
   to fit the synced title brought it back into view. */
.x-col:has(.puls-store-button) > .x-div:has(.standortauswahl) {
	display: none;
}

.puls-store-button:hover::after,
.puls-store-button:focus-visible::after {
	transform: scaleX(1);
}

.puls-store-button__icon {
	display: inline-flex;
	align-items: center;
}

.puls-store-button__icon svg {
	display: block;
	width: 18px;
	height: 16px;
}

/* -------------------------------------------------- Panel shell */

.puls-store-panel {
	color: var(--puls-store-text);
}

.puls-store-panel[hidden] {
	display: none;
}

/*
 * The drawer is a <dialog> opened with showModal(), so it lives in the
 * browser's top layer and no theme z-index can paint over it. The dialog box
 * itself covers the viewport and stays transparent; the visible drawer is
 * .puls-store-panel__inner positioned inside it. Keeping the dim overlay as a
 * real element rather than ::backdrop means clicking outside still closes the
 * drawer on the fallback path, where there is no ::backdrop at all.
 *
 * z-index still matters only on that fallback path.
 */
.puls-store-panel--drawer {
	position: fixed;
	inset: 0;
	z-index: var(--puls-store-z);

	/* Reset the UA's own <dialog> box (centred, auto-sized, bordered, padded). */
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

/* Ours is drawn by .puls-store-panel__backdrop, so both paths look identical. */
.puls-store-panel--drawer::backdrop {
	background: transparent;
}

/*
 * Stop the page scrolling behind an open drawer.
 *
 * This has to sit on the root element, not on <body>: `overflow` on the root
 * is what propagates to the viewport, and on most themes - this one included -
 * <html> is the scrolling element, so a body-level rule silently does nothing.
 * The body class is kept as a styling hook for themes.
 *
 * Removing the scrollbar would shift the page sideways under the backdrop, so
 * the JS measures its width and hands it back here.
 */
html.puls-store-panel-open {
	overflow: hidden;
	padding-right: var(--puls-store-scrollbar-width, 0px);
}

.puls-store-panel--drawer .puls-store-panel__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

.puls-store-panel--drawer .puls-store-panel__inner {
	position: absolute;
	inset-block: 0;
	inset-inline-end: 0;
	width: min(var(--puls-store-panel-width), 100vw);
	overflow-y: auto;
	background: var(--puls-store-surface);
	padding: 20px 24px 32px;
	box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);
}

.puls-store-panel__brand {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 22px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--puls-store-border);
}

.puls-store-panel__brand-icon {
	width: 48px;
	height: 48px;
	object-fit: contain;
	flex: 0 0 auto;
}

.puls-store-panel__brand-text {
	min-width: 0;
	flex: 1;
}

.puls-store-panel__brand-name,
.puls-store-panel__brand-tagline,
.puls-store-panel__kicker {
	margin: 0;
}

.puls-store-panel__brand-name {
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1.1;
	color: var(--puls-store-text);
}

.puls-store-panel__brand-tagline {
	margin-top: 2px;
	font-size: 0.68em;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--puls-store-muted);
}

.puls-store-panel--inline .puls-store-panel__inner,
.puls-store-panel--list .puls-store-panel__inner {
	background: var(--puls-store-surface);
}

.puls-store-panel__close {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: #f2f3f5;
	border: 0;
	color: var(--puls-store-brand);
	cursor: pointer;
	border-radius: 8px;
}

.puls-store-panel__close:hover,
.puls-store-panel__close:focus-visible {
	background: #e6e8ec;
}

.puls-store-panel__kicker {
	margin-bottom: 6px;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--puls-store-brand);
}

.puls-store-panel__heading {
	margin: 0 0 8px;
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1.25;
}

.puls-store-panel__intro {
	margin: 0;
	color: var(--puls-store-muted);
}

.puls-store-panel__notice {
	margin: 12px 0 0;
	padding: 10px 12px;
	border-radius: var(--puls-store-radius);
	background: #fff4e5;
	color: #7a4a00;
}

.puls-store-panel__section {
	margin-top: 24px;
}

.puls-store-panel__section-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 12px;
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--puls-store-text);
}

.puls-store-panel__section-title::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--puls-store-border);
}

.puls-store-panel__options {
	display: grid;
	gap: var(--puls-store-gap);
}

/* The list presentation is the one that benefits from going multi-column. */
.puls-store-panel--list .puls-store-panel__options {
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.puls-store-panel__option {
	position: relative;
	display: flex;
	flex-direction: column;
}

/* -------------------------------------------------- Card */

.puls-store-card {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	text-align: start;
	padding: 14px;
	font: inherit;
	color: inherit;
	background: var(--puls-store-surface);
	border: 1px solid var(--puls-store-border);
	border-radius: var(--puls-store-radius);
	cursor: pointer;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.puls-store-card:hover,
.puls-store-card:focus-visible {
	border-color: var(--puls-store-accent);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
}

.puls-store-card.is-selected {
	border-color: var(--puls-store-accent);
	box-shadow: inset 0 0 0 1px var(--puls-store-accent);
}

.puls-store-card__head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.puls-store-card__media {
	flex: 0 0 120px;
	width: 120px;
	aspect-ratio: 16 / 9;
}

.puls-store-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: calc(var(--puls-store-radius) - 4px);
}

.puls-store-card__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.puls-store-card__title {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	flex: 1;
	min-width: 0;
	font-weight: 700;
	color: var(--puls-store-accent);
}

.puls-store-card__glyph {
	flex: 0 0 auto;
	margin-top: 2px;
}

.puls-store-card__address,
.puls-store-card__description {
	color: var(--puls-store-muted);
	font-size: 0.9em;
}

.puls-store-card__hours {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px solid var(--puls-store-border);
	font-size: 0.85em;
}

.puls-store-card__hours-title {
	font-weight: 600;
	color: var(--puls-store-text);
}

.puls-store-card__hours-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	color: var(--puls-store-muted);
}

.puls-store-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 8px;
}

.puls-store-card__badge,
.puls-store-card__selected {
	font-size: 0.75em;
	padding: 2px 8px;
	border-radius: 999px;
	border: 1px solid var(--puls-store-border);
	color: var(--puls-store-muted);
}

.puls-store-card__selected {
	background: var(--puls-store-accent);
	border-color: var(--puls-store-accent);
	color: var(--puls-store-accent-contrast);
}

/* Shown for information only (the Stock plugin's cart): a box to read, not a button. */
.puls-store-card--info {
	padding: 0;
	border: 0;
	cursor: auto;
}

.puls-store-card--info:hover {
	box-shadow: none;
}

.puls-store-card__directions {
	align-self: flex-start;
	margin-top: 6px;
	font-size: 0.85em;
	color: var(--puls-store-accent);
}

/* -------------------------------------------------- Welcome dialog */

/*
 * The same top-layer <dialog> shell as the drawer - transparent, covering the
 * viewport, with our own backdrop element - but the visible box sits in the
 * middle of the screen instead of along the right edge.
 */
.puls-store-welcome {
	position: fixed;
	inset: 0;
	z-index: var(--puls-store-z);
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	overflow: visible;
}

.puls-store-welcome::backdrop {
	background: transparent;
}

.puls-store-welcome .puls-store-panel__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
}

.puls-store-welcome .puls-store-panel__inner {
	position: absolute;
	top: 50%;
	left: 50%;
	width: min(760px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	transform: translate(-50%, -50%);
	padding: 20px 24px 24px;
	background: var(--puls-store-surface);
	border-radius: 14px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

.puls-store-welcome .puls-store-panel__heading {
	font-size: 1.6em;
}

.puls-store-welcome .puls-store-panel__intro + .puls-store-panel__intro {
	margin-top: 8px;
}

.puls-store-welcome__prompt {
	font-weight: 600;
	color: var(--puls-store-text);
}

.puls-store-welcome__options {
	margin-top: 20px;
}

@media (min-width: 640px) {
	.puls-store-welcome__options {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	}
}

/*
 * A card that is a radio choice rather than a button. The radio itself stays
 * focusable for the keyboard but is drawn as a round mark in the corner; the
 * whole card carries the selected state.
 */
.puls-store-card--choice {
	position: relative;
	height: 100%;
	margin: 0;
	padding-right: 44px;
}

.puls-store-card__radio {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 20px;
	height: 20px;
	margin: 0;
	accent-color: var(--puls-store-accent);
	cursor: pointer;
}

.puls-store-card--choice:has(.puls-store-card__radio:checked) {
	border-color: var(--puls-store-accent);
	box-shadow: inset 0 0 0 1px var(--puls-store-accent), 0 2px 10px rgba(0, 0, 0, 0.07);
}

.puls-store-card--choice:has(.puls-store-card__radio:focus-visible) {
	outline: 2px solid var(--puls-store-accent);
	outline-offset: 2px;
}

.puls-store-welcome__actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 22px;
}

.puls-store-welcome__continue {
	min-width: 200px;
	min-height: 50px;
	padding: 5px 28px;
	font: inherit;
	font-size: 16px;
	font-weight: 700;
	color: #ffffff;
	background: var(--puls-store-brand);
	border: 0;
	border-radius: 30px;
	cursor: pointer;
}

.puls-store-welcome__continue:hover,
.puls-store-welcome__continue:focus-visible {
	background: #c4000e;
}

@media (max-width: 600px) {
	.puls-store-welcome .puls-store-panel__inner {
		top: auto;
		bottom: 0;
		left: 0;
		width: 100%;
		max-height: 92vh;
		transform: none;
		padding: 16px;
		border-radius: 14px 14px 0 0;
	}

	.puls-store-welcome__continue {
		width: 100%;
	}
}