/*
 * The shop sidebar on phones (shops/base_shops.html, .left-sidebar).
 *
 * bootstrap-responsive.css turns the desktop sidebar into a 260px grey box
 * centred on the phone with 40px of air on both sides, the avatar at 214px
 * and the name at 26px: most of a screen before the shop's first product.
 *
 * On a phone it is a maker's card instead, in the language of the product
 * cards below it: white, no box, square corners. The avatar at 72px in a
 * hairline frame beside the name in Bitter, the owner and the sold count in
 * quiet Lato under it, the follow icons as a small row, then two buttons of
 * equal width, Butikkmeny and Favoritt, and a hairline. The menu opens under
 * the card as before. Desktop is untouched. Sasha chose this "quiet" variant
 * over a round-portrait one and an editorial one (Oct 27 2026).
 *
 * `.list` becomes `display: contents` so its rows are placed on the card's
 * own grid: column 1 the avatar, column 2 the text. The selectors repeat
 * bootstrap-responsive's id-prefixed ones so they win by order; this file
 * is linked after it in base_common.html.
 */
@media (max-width: 767px) {
	#shop-content {
		padding-top: 10px;
	}

	#shop-content .shop-inner-content .left-sidebar {
		--sh-ink: #34495e;
		/* Muted text is 13px, so it needs 4.5:1 on white: #5f6d79 gives 5.3.
		   Teal text and fills use the darker teal, 4.9:1 on white; the
		   lighter brand teal stays for borders, where 3:1 is enough. */
		--sh-muted: #5f6d79;
		--sh-teal: #11806a;
		--sh-teal-line: #16a085;
		--sh-line: #e2e7ea;
		--sh-field: #cdd5d9;

		display: grid;
		grid-template-columns: auto minmax(0, 1fr);
		grid-template-rows: auto auto auto auto;
		column-gap: 16px;
		align-items: start;
		box-sizing: border-box;
		width: auto;
		float: none;
		margin: 0 0 18px;
		padding: 16px 15px;
		background: #fff;
		border-bottom: 1px solid var(--sh-line);
		font-family: Lato, Arial, sans-serif;
		color: var(--sh-ink);
	}

	#shop-content .shop-inner-content .left-sidebar:not(:has(.avatar-logo)) {
		column-gap: 0;
	}

	#shop-content .shop-inner-content .left-sidebar .avatar-logo {
		grid-column: 1;
		grid-row: 1 / span 3;
		width: 72px;
		height: 72px;
		padding: 0;
	}

	#shop-content .shop-inner-content .left-sidebar .avatar-logo img {
		display: block;
		width: 72px;
		height: 72px;
		object-fit: cover;
		outline: 1px solid var(--sh-line);
		outline-offset: -1px;
	}

	#shop-content .shop-inner-content .left-sidebar .title {
		grid-column: 2;
		grid-row: 1;
		padding: 0;
	}

	#shop-content .shop-inner-content .left-sidebar .title p {
		font-size: 13px;
		line-height: 18px;
		color: var(--sh-muted);
	}

	#shop-content .shop-inner-content .left-sidebar .title p a {
		color: inherit;
	}

	/* The name: Bitter, ink, not a link colour. It is the page's identity
	   here, and the centred title further down still links the same way. */
	#shop-content .shop-inner-content .left-sidebar .title p b {
		display: block;
		padding: 0 0 2px;
		font-family: Bitter, Georgia, serif;
		font-weight: 700;
		font-size: 22px;
		line-height: 26px;
		color: var(--sh-ink);
		overflow-wrap: anywhere;
	}

	#shop-content .shop-inner-content .left-sidebar .title p b a,
	#shop-content .shop-inner-content .left-sidebar .title p b a strong {
		color: inherit;
		font-weight: inherit;
	}

	#shop-content .shop-inner-content .left-sidebar .list {
		display: contents;
	}

	#shop-content .shop-inner-content .left-sidebar .list > .block {
		grid-column: 1 / -1;
		margin: 0;
		padding: 8px 0 0;
		border-top: 0;
		font-size: 13px;
		line-height: 18px;
		color: var(--sh-muted);
	}

	#shop-content .shop-inner-content .left-sidebar .list > .block a {
		font-size: 13px;
		line-height: 18px;
		color: var(--sh-muted);
	}

	#shop-content .shop-inner-content .left-sidebar .list > .block em {
		font-style: normal;
	}

	/* Under the name, in the text column: the sold count, then the follow
	   icons. */
	#shop-content .shop-inner-content .left-sidebar .list > .sold-count {
		grid-column: 2;
		grid-row: 2;
		padding: 0;
	}

	#shop-content .shop-inner-content .left-sidebar .list > .epla-social {
		grid-column: 2;
		grid-row: 3;
		display: flex;
		align-items: center;
		gap: 8px;
		padding: 8px 0 0;
	}

	#shop-content .shop-inner-content .left-sidebar .list > .epla-social .epla-social-label {
		display: none;
	}

	#shop-content .shop-inner-content .left-sidebar .list > .epla-social .epla-social-icons {
		margin: 0;
		gap: 8px;
	}

	#shop-content .shop-inner-content .left-sidebar .list > .epla-social .epla-social-link {
		width: 32px;
		height: 32px;
		box-shadow: 0 0 0 1px var(--sh-line);
	}

	#shop-content .shop-inner-content .left-sidebar .list > .epla-social .epla-social-link svg {
		width: 16px;
		height: 16px;
		margin-top: 8px;
	}

	/* One line of two buttons of equal width under the card: Butikkmeny at
	   the left, Favoritt at the right. Two grid items in the same cell, each
	   half the row, aligned to its ends. */
	#shop-content .shop-inner-content .left-sidebar .list > a.toggle_link,
	#shop-content .shop-inner-content .left-sidebar .list > .favourite {
		grid-column: 1 / -1;
		grid-row: 4;
		width: calc(50% - 4px);
		margin-top: 16px;
	}

	/* `a.toggle_link`: style.css styles it with the element in the selector,
	   so the same specificity is needed to win on height, padding and font. */
	#shop-content .shop-inner-content .left-sidebar .list > a.toggle_link {
		justify-self: start;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		box-sizing: border-box;
		height: 40px;
		padding: 0 10px 0 14px;
		border: 1px solid var(--sh-field);
		border-top: 1px solid var(--sh-field);
		background: none;
		font-family: Lato, Arial, sans-serif;
		font-size: 13px;
		font-weight: 700;
		line-height: 38px;
		color: var(--sh-ink);
		text-decoration: none;
	}

	#shop-content .shop-inner-content .left-sidebar .list > a.toggle_link i {
		font-size: 18px;
		line-height: 1;
	}

	#shop-content .shop-inner-content .left-sidebar .list > a.toggle_link .toggle_link__chev {
		margin-left: -4px;
		transition: transform 0.15s ease;
	}

	/* Open: the button goes solid and the chevron turns, so the list below
	   reads as its content. */
	#shop-content .shop-inner-content .left-sidebar .list > a.toggle_link[aria-expanded="true"] {
		background-color: var(--sh-ink);
		border-color: var(--sh-ink);
		color: #fff;
	}

	#shop-content .shop-inner-content .left-sidebar .list > a.toggle_link[aria-expanded="true"] .toggle_link__chev {
		transform: rotate(180deg);
	}

	#shop-content .shop-inner-content .left-sidebar .list > .favourite {
		justify-self: end;
		padding: 0;
	}

	#shop-content .shop-inner-content .left-sidebar .list > .favourite form {
		margin: 0;
	}

	#shop-content .shop-inner-content .left-sidebar .list > .favourite form,
	#shop-content .shop-inner-content .left-sidebar .list > .favourite input[type=submit] {
		width: 100%;
	}

	#shop-content .shop-inner-content .left-sidebar .list > .favourite input[type=submit] {
		box-sizing: border-box;
		height: 40px;
		margin: 0;
		padding: 0 0 0 26px;
		border: 1px solid var(--sh-teal-line);
		background-color: #fff;
		/* The heart just left of the centred word, as with the menu button. */
		background-position: calc(50% - 36px) 50%;
		background-size: 16px auto;
		text-align: center;
		font-family: Lato, Arial, sans-serif;
		font-size: 13px;
		font-weight: 700;
		line-height: 38px;
		color: var(--sh-teal);
	}

	/* The optional lines (N personer elsker, recommendations, other shops)
	   come after the buttons, full width. */
	#shop-content .shop-inner-content .left-sidebar .list > .loves,
	#shop-content .shop-inner-content .left-sidebar .list > .recommends,
	#shop-content .shop-inner-content .left-sidebar .list > .othershops {
		grid-column: 1 / -1;
		padding-top: 12px;
	}

	/* The opened menu, under everything: its own entries keep their icons
	   and hairlines. */
	#shop-content .shop-inner-content .left-sidebar .list > .togglebox_left {
		grid-column: 1 / -1;
		margin-top: 12px;
	}

	/* ------------------------------------------------------------ the menu
	 *
	 * One rhythm: the categories as a wrapping row of square chips under a
	 * small label, then the links as one hairline list with 18px line icons
	 * from the Remix set the page already loads (the desktop sprites are
	 * turned off here). Report last and quiet.
	 */
	#shop-content .shop-inner-content .left-sidebar .list > .togglebox_left .block {
		margin: 0;
		padding: 0;
		border-top: 1px solid var(--sh-line);
		background: none;
		font-size: 14px;
		line-height: 20px;
	}

	#shop-content .shop-inner-content .left-sidebar .list > .togglebox_left .block:first-child {
		border-top: 0;
	}

	#shop-content .shop-inner-content .left-sidebar .list > .togglebox_left .shop-menu__cats {
		padding: 12px 0 14px;
	}

	#shop-content .shop-inner-content .left-sidebar .list > .togglebox_left .shop-menu__label {
		display: block;
		font-size: 13px;
		line-height: 18px;
		color: var(--sh-muted);
	}

	#shop-content .shop-inner-content .left-sidebar .list > .togglebox_left .shop-menu__cats ul {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 10px 0 0;
		padding: 0;
	}

	/* The desktop list gives each li a grey row; the chip is the whole item here. */
	#shop-content .shop-inner-content .left-sidebar .list > .togglebox_left .shop-menu__cats li {
		display: block;
		margin: 0;
		padding: 0;
		background: none;
		border: 0;
		line-height: 20px;
		font-size: 13px;
		color: var(--sh-muted);
	}

	#shop-content .shop-inner-content .left-sidebar .list > .togglebox_left .shop-menu__cats li a {
		display: inline-flex;
		align-items: center;
		box-sizing: border-box;
		min-height: 36px;
		padding: 0 12px;
		border: 1px solid var(--sh-field);
		font-size: 13px;
		line-height: 18px;
		color: var(--sh-ink);
		text-decoration: none;
	}

	#shop-content .shop-inner-content .left-sidebar .list > .togglebox_left .block > a {
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: 44px;
		padding: 0;
		font-size: 14px;
		line-height: 20px;
		color: var(--sh-teal);
		text-decoration: none;
	}

	#shop-content .shop-inner-content .left-sidebar .list > .togglebox_left .shop-menu__icon {
		width: 20px;
		font-size: 18px;
		line-height: 1;
		text-align: center;
		color: var(--sh-muted);
	}

	#shop-content .shop-inner-content .left-sidebar .list > .togglebox_left .reporter > a {
		color: var(--sh-muted);
	}

	#shop-content .shop-inner-content .left-sidebar .list > .togglebox_left .block strong {
		display: block;
		padding: 12px 0 6px;
		font-weight: 700;
	}

	#shop-content .shop-inner-content .left-sidebar .list > .togglebox_left .block form {
		margin: 0 0 12px;
	}

	@media (prefers-reduced-motion: reduce) {
		#shop-content .shop-inner-content .left-sidebar .list > a.toggle_link .toggle_link__chev {
			transition: none;
		}
	}
}

/* Desktop keeps its sprite icons in the sidebar; the line icons are for
   the phone menu only. */
@media (min-width: 768px) {
	.shop-menu__icon,
	.toggle_link__chev {
		display: none;
	}
}

/* The shop front repeats the name as its centred page title right under
   the card. The heading stays for structure and search engines; on a phone
   it is read, not shown (shops/shop_detail.html .sub-title). */
@media (max-width: 767px) {
	#shop-content .shop-inner-content .right-content .sub-title {
		padding: 0;
		border: 0;
	}

	#shop-content .shop-inner-content .right-content .sub-title h1 {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		white-space: nowrap;
	}
}