/*
 * Links between a seller's shops, on the shop page.
 *
 * Two halves of one idea (wishlist 12):
 *
 *   .shoplink   an address the seller typed into the description, turned
 *               into the shop's name (extras/templatetags/shop_links.py)
 *   .othershops the same information found for them, under the description
 *               (shops/includes/other_shops.html)
 *
 * Namespaced because Bootstrap 2 and flat-ui are still loaded globally.
 * Shares the palette of the shop directory so the two read as one family.
 */

.shoplink,
.othershops {
	--sk-ink: #34495e;
	--sk-accent: #16a085;
	--sk-accent-dark: #12836c;
	--sk-muted: #8d959c;
	--sk-hairline: #e4e7ea;
	--sk-surface: #f5f5f5;
}

/* ------------------------------------------------------- inline shop link
 *
 * Carries the shop's name, not the URL that was typed - so it has to be
 * recognisable as a place rather than as emphasis. Kept quiet on purpose:
 * a description can hold eight of these (Trollsmed does), and bold teal
 * with a rule under every one turned the seller's own prose into a list of
 * buttons. The mark and the colour are enough to find them; the underline
 * waits for the pointer.
 */

.shoplink {
	display: inline-block;
	padding-left: 17px;
	/* A filled roof over an outlined body. The scalloped awning this
	   started as was prettier at 24px and unreadable at 13, which is the
	   only size it is ever drawn at. Grey, not teal - a second teal shape
	   beside teal text reads as two marks rather than one link. */
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 9L4.3 3.6h15.4L21.5 9z' fill='%238d959c'/%3E%3Cpath d='M5 10.6V20.4h14V10.6' fill='none' stroke='%238d959c' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E")
		no-repeat left 0.22em / 13px 13px;
	color: var(--sk-accent);
	text-decoration: none;
}

.shoplink:hover,
.shoplink:focus-visible {
	color: var(--sk-accent-dark);
	text-decoration: underline;
}

.shoplink:focus-visible {
	outline: 2px solid var(--sk-accent);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ------------------------------------------------------- the sidebar block
 *
 * One entry per shop: a product shot to recognise it by, the name, and how
 * much is in it. In the sidebar rather than beside the description so it
 * follows the buyer through every page of the shop.
 *
 * The layout floats rather than flexes on purpose. style.css:309 forces
 * display:block on every anchor in a sidebar block through an ID selector,
 * which outranks anything we can write here, so display: flex would simply
 * be ignored. overflow: hidden makes the anchor contain its own float.
 */

.othershops-title {
	display: block;
}

.othershops-list {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

.othershops-list li + li {
	margin-top: 9px;
}

.othershops-link {
	overflow: hidden;
	text-decoration: none;
}

.othershops-link:hover {
	text-decoration: none;
}

.othershops-thumb {
	float: left;
	width: 34px;
	height: 34px;
	margin: 1px 8px 0 0;
	object-fit: cover;
	border-radius: 3px;
	background: var(--sk-surface);
	/* Product shots are cut out on white as often as not, and without an
	   edge they float loose in the sidebar. */
	box-shadow: 0 0 0 1px var(--sk-hairline);
}

/* Two short lines beside a 34px thumbnail: the name has to wrap to at most
   two of them, which is what the line clamp is for. */
.othershops-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	line-height: 17px;
	color: var(--sk-accent);
}

.othershops-link:hover .othershops-name {
	color: var(--sk-accent-dark);
	text-decoration: underline;
}

.othershops-stock {
	display: block;
	font-family: Lato, Arial, sans-serif;
	font-size: 12px;
	line-height: 15px;
	color: var(--sk-muted);
}

/* The sidebar drops to 12px text between 768 and 1199 (style.css:519). The
   entry has to come down with it or it reads as the loudest thing there. */
@media (max-width: 1199px) {
	.othershops-thumb {
		width: 30px;
		height: 30px;
	}

	.othershops-name {
		font-size: 13px;
		line-height: 16px;
	}

	.othershops-stock {
		font-size: 11px;
		line-height: 14px;
	}
}