/*
 * The owner's strip on their own product (products/includes/owner_bar.html).
 *
 * Only the owner ever sees it, so it may take the full width of the product
 * block: a teal-tinted band with "Ditt produkt" set in Bitter like a maker's
 * tag, the product's state in plain words, and the actions as square
 * buttons. The same strip heads the product edit page; the shop's own sold
 * page gets the compact variant, buttons only, under each card.
 *
 * Epla's vocabulary throughout: square corners, hairlines, Bitter and Lato,
 * teal #16a085, no shadows, no rounded chips. When the product is sold the
 * one filled button is Relanser, the thing the seller came to do.
 */
.owner-bar {
	--ob-ink: #34495e;
	/* 13px text needs 4.5:1: muted #5f6d79 is 5.3 on white and 4.8 on the
	   tint; teal #11806a is 4.9 as text on white and under white text. The
	   lighter brand teal stays for borders, where 3:1 is enough. */
	--ob-muted: #5f6d79;
	--ob-teal: #11806a;
	--ob-teal-dark: #0f7561;
	--ob-teal-line: #16a085;
	--ob-tint: #edf6f2;
	--ob-line: #cdd5d9;
	--ob-red: #c0392b;

	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px 20px;
	margin: 0 0 20px;
	padding: 12px 16px;
	background: var(--ob-tint);
	color: var(--ob-ink);
	font-family: Lato, Arial, sans-serif;
	font-size: 14px;
	line-height: 20px;
	clear: both;
}

/* The text gives way first: on the edit page its two sentences wrap into
   two lines while the buttons keep the right-hand end of the strip. */
/* The id in the selector: the product page sizes every p under
   #main-content, and this one must not grow with it. */
#main-content .owner-bar__text,
.owner-bar__text {
	flex: 1 1 260px;
	margin: 0;
	min-width: 0;
	font-size: 14px;
	line-height: 20px;
}

.owner-bar__label {
	font-family: Bitter, Georgia, serif;
	font-size: 16px;
	margin-right: 10px;
	color: var(--ob-ink);
}

.owner-bar__state {
	color: var(--ob-muted);
}

.owner-bar__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.owner-bar__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	min-height: 36px;
	padding: 0 14px;
	border: 1px solid var(--ob-teal-line);
	background: #fff;
	color: var(--ob-teal);
	font-family: Lato, Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
	text-decoration: none;
	white-space: nowrap;
}

.owner-bar__btn i {
	font-size: 16px;
	line-height: 1;
}

.owner-bar__btn:hover,
.owner-bar__btn:focus-visible {
	background: var(--ob-teal);
	color: #fff;
	text-decoration: none;
}

.owner-bar__btn:focus-visible {
	outline: 2px solid var(--ob-ink);
	outline-offset: 2px;
}

.owner-bar__btn--primary {
	background: var(--ob-teal);
	color: #fff;
}

.owner-bar__btn--primary:hover,
.owner-bar__btn--primary:focus-visible {
	background: var(--ob-teal-dark);
	border-color: var(--ob-teal-dark);
}

/* Delete is quiet until pointed at; the confirmation page does the asking. */
.owner-bar__btn--delete {
	border-color: var(--ob-line);
	color: var(--ob-muted);
}

.owner-bar__btn--delete:hover,
.owner-bar__btn--delete:focus-visible {
	background: #fff;
	border-color: var(--ob-red);
	color: var(--ob-red);
}

/* The compact card has no visible label; this one names the group for
   screen readers only. */
.owner-bar__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---------------------------------------------------------- under a card
 *
 * Buttons only, in the card's 176px: Relanser across the top on its own,
 * Rediger and Slett side by side beneath.
 */
.owner-bar--card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	margin: 0;
	padding: 0;
	background: none;
}

.owner-bar--card .owner-bar__actions {
	display: contents;
}

.owner-bar--card .owner-bar__btn {
	min-height: 32px;
	padding: 0 8px;
	justify-content: center;
	font-size: 12px;
}

.owner-bar--card .owner-bar__btn--primary {
	grid-column: 1 / -1;
}

/* ------------------------------------------------------------------ phones */
@media (max-width: 600px) {
	.owner-bar {
		padding: 10px 12px;
		gap: 8px;
	}

	.owner-bar__actions {
		width: 100%;
	}

	.owner-bar__btn {
		flex: 1 1 auto;
		justify-content: center;
	}
}