/*
 * Product grid and card, everywhere products are listed.
 *
 * Replaces the floated .product-inner blocks that style.css sized three
 * different ways (213px on the front page, 192px in lists, 131px in the
 * "latest" strips), inside wrappers of fixed width that left a quarter of the
 * container empty and gave phones two 100px tiles. One card, one grid: the
 * grid asks for as many columns as fit, so it fills whatever holds it - six
 * across the front page, four in a page with a sidebar, three on a tablet,
 * two on a phone.
 *
 * Namespaced .pgrid / .pcard because Bootstrap 2 and flat-ui are still loaded
 * globally and own most short class names.
 */

.pgrid {
	--pg-ink: #34495e;
	--pg-accent: #16a085;
	--pg-muted: #8d959c;
	--pg-surface: #f5f5f5;
	/* 176, not 180: six columns and five 20px gaps must fit the site's
	   1170px container, and 6 x 180 + 100 is ten pixels too many. */
	--pg-min: 176px;

	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--pg-min)), 1fr));
	gap: 26px 20px;
	/* The old grid was a float row inside a clearfix; nothing should assume
	   either any more, but the grid must not collapse under a float that a
	   page puts beside it. */
	clear: both;
}

/* The front page strips hold exactly six products and the front page lists
   exactly twelve, so they are six across, then three, then two - every row
   full, never five and a straggler. */
.pgrid--six {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 22px 16px;
}

@media (max-width: 900px) {
	.pgrid--six {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* A phone gets exactly two columns: auto-fill would give one wide blurry
   tile at 360px, or three cramped ones at 540. */
@media (max-width: 600px) {
	.pgrid,
	.pgrid--six {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px 12px;
	}
}

/* ------------------------------------------------------------------ card
 *
 * "Air", Karoline's choice (Sep 2026): no box at all. A softly rounded
 * photo, the name in Bitter, seller and price on one quiet line. On hover
 * the photo grows a touch and a heart appears for favourites.
 */

.pcard {
	display: flex;
	flex-direction: column;
	min-width: 0;
	gap: 10px;
	margin: 0;
	padding: 0;
}

/* The photo: a square frame whatever the file's shape. The `square` rendition
   is 214px, so up to six across on the widest page it is never upscaled. */
.pcard-media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 14px;
	background: var(--pg-surface);
}

.pcard-photo {
	display: block;
	width: 100%;
	height: 100%;
}

.pcard-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

@media (hover: hover) {
	.pcard:hover .pcard-media img {
		transform: scale(1.04);
	}
}

@media (prefers-reduced-motion: reduce) {
	.pcard-media img {
		transition: none;
	}

	.pcard:hover .pcard-media img {
		transform: none;
	}
}

.pcard-noimage {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: Lato, Arial, sans-serif;
	font-size: 12px;
	color: var(--pg-muted);
}

.pcard--sold .pcard-media img {
	opacity: 0.55;
}

/* The heart: a white disc in the photo's corner. Hidden until the card is
   hovered where hovering exists; always there on touch screens, where there
   is no hover to reveal it. */
.pcard-fav {
	position: absolute;
	top: 10px;
	right: 10px;
	margin: 0;
}

.pcard-fav__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: 0 1px 3px rgba(52, 73, 94, 0.25);
	color: var(--pg-ink);
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.pcard-fav__btn svg {
	display: block;
}

@media (hover: hover) {
	.pcard-fav__btn {
		opacity: 0;
	}

	.pcard:hover .pcard-fav__btn,
	.pcard-fav__btn:focus-visible,
	.pcard-fav.is-on .pcard-fav__btn {
		opacity: 1;
	}
}

.pcard-fav.is-on .pcard-fav__btn {
	color: #e74c3c;
}

.pcard-fav.is-on .pcard-fav__btn svg {
	fill: currentColor;
}

.pcard-fav__btn:focus-visible {
	outline: 2px solid var(--pg-accent);
	outline-offset: 2px;
}

/* Name, then seller and price on one line. */
.pcard-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1 1 auto;
	padding: 0 2px;
}

/* Two full lines of name, then an ellipsis: the old cards clipped at 160px
   whatever the column width, which cut most names mid-word. Always two
   lines tall, so the seller line sits level across a row. */
.pcard-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 40px;
	font-family: Bitter, Georgia, serif;
	font-size: 15px;
	line-height: 20px;
	font-weight: 400;
	color: var(--pg-ink);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.pcard-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	min-width: 0;
}

.pcard-shop {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: Lato, Arial, sans-serif;
	font-size: 13px;
	line-height: 18px;
	color: var(--pg-muted);
	text-decoration: none;
}

.pcard-price {
	flex: 0 0 auto;
	font-family: Lato, Arial, sans-serif;
	font-size: 14px;
	line-height: 18px;
	font-weight: 700;
	color: var(--pg-ink);
}

.pcard-price--sold {
	font-weight: 400;
	color: var(--pg-muted);
}

.pcard a:hover,
.pcard a:focus-visible {
	text-decoration: underline;
}

.pcard-photo:focus-visible {
	outline: 2px solid var(--pg-accent);
	outline-offset: 2px;
}

/* Anything a page adds under the seller line (a remove button, a staff
   control) sits at the card's foot, aligned across the row. */
.pcard-extra {
	margin-top: auto;
	padding-top: 8px;
}

.pcard-extra form {
	margin: 0;
}

/* ------------------------------------------------------------ phone gutters
 *
 * bootstrap-responsive.css still pins the front page wrappers to 300px on
 * phones, from the days of the 320px iPhone, and the list column pads only
 * its left side. The grid sizes itself now; it just needs 15px of air on
 * both sides where the column runs edge to edge.
 */
@media (max-width: 767px) {
	#product .product-content,
	#latest_product {
		width: auto;
		margin-left: 0;
		margin-right: 0;
		padding-left: 15px;
		padding-right: 15px;
	}

	/* The same old rule zeroed the top margin too, which put the section
	   title on top of the first list's title. */
	#product .product-content {
		margin-top: 24px;
	}

	.category_list {
		padding-right: 15px;
	}

	/* The shop page's content column, pinned to 300px the same way. */
	#shop-content .shop-inner-content .right-content {
		width: auto;
		margin-left: 0;
		margin-right: 0;
		padding-left: 15px;
		padding-right: 15px;
		box-sizing: border-box;
	}
}

/* ------------------------------------------------------------ front lists
 *
 * "Dagens forelskelser" is the one curated block on the site, so it looks
 * like one: a tinted band, a curator byline per list, and the products as a
 * wall of large 4:5 photos - four columns on a desktop, two on a phone.
 * A list shows its `count`, sixteen, so the board stays four by four as it
 * has always been (staff set count to 16 when they queue a list; the data
 * says sellers mostly submit 20). An offset between columns was tried and
 * turned down.
 */
#product.front-feature {
	background: #eef6f4;
	padding: 52px 0 40px;
}

#product.front-feature h1 {
	color: #34495e;
	font-size: 30px;
	line-height: 36px;
}

/* The second list starts a new chapter: a hairline and real air after four
   rows of big photos, not a thirty pixel gap. */
#product .front-list + .front-list {
	margin-top: 64px;
	padding-top: 48px;
	border-top: 1px solid rgba(52, 73, 94, 0.14);
}

#product .front-list__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin: 0 0 26px;
	text-align: left;
}

#product .front-list__who {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

/* The curator's mark: the shop's initial in a teal disc. */
#product .front-list__mark {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #16a085;
	color: #fff;
	font-family: Bitter, Georgia, serif;
	font-weight: 700;
	font-size: 22px;
	line-height: 44px;
	text-align: center;
	text-decoration: none;
}

#product .front-list__names {
	min-width: 0;
}

#product .front-list__title {
	margin: 0;
	font-family: Bitter, Georgia, serif;
	font-weight: 400;
	font-size: 26px;
	line-height: 32px;
	color: #34495e;
}

#product .front-list__by {
	margin: 2px 0 0;
	font-family: Lato, Arial, sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #5d6d7e;
}

#product .front-list__by a {
	color: #16a085;
	font-weight: 700;
}

/* The title is the way to the whole list. */
#product .front-list__title a {
	color: inherit;
	text-decoration: none;
}

#product .front-list__title a:hover,
#product .front-list__title a:focus-visible {
	color: #16a085;
	text-decoration: underline;
}

/* The board: four across, whatever holds it. The product list page uses it
   too (.pwall--page), so a list looks the same on its own page as it does
   on the front page; that page's text sits centred, the board does not. */
.pwall {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 34px 28px;
}

.pwall--page {
	text-align: left;
	margin-top: 26px;
}

.pcard--tall .pcard-media {
	aspect-ratio: 4 / 5;
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(52, 73, 94, 0.06), 0 14px 28px -18px rgba(52, 73, 94, 0.4);
}

.pcard--tall .pcard-name {
	font-size: 16px;
	line-height: 22px;
	min-height: 44px;
}

.pcard--tall .pcard-price {
	font-size: 15px;
}

@media (max-width: 767px) {
	#product.front-feature {
		padding: 28px 0 24px;
	}

	#product.front-feature h1 {
		font-size: 24px;
		line-height: 30px;
	}

	#product .front-list__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	#product .front-list + .front-list {
		margin-top: 40px;
		padding-top: 32px;
	}

	#product .front-list__title {
		font-size: 22px;
		line-height: 28px;
	}

}

/* The board is four across on a desktop and two across on anything
   narrower, tablets included: at the site's 724px tablet container four
   columns are 160px, too small for photos meant to be big. 979px is where
   the site's own tablet range ends. */
@media (max-width: 979px) {
	.pwall {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px 20px;
	}
}

@media (max-width: 600px) {
	.pwall {
		gap: 22px 14px;
	}
}


/* --------------------------------------------------- list page: prev/next
 *
 * Two quiet links under the board, each naming the list it leads to, with a
 * hairline and real room between them and the last row of photos.
 */
.plist-nav {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
	margin: 48px 0 8px;
	padding-top: 24px;
	border-top: 1px solid #e4e7ea;
	text-align: left;
}

.plist-nav__link {
	display: flex;
	flex-direction: column;
	gap: 3px;
	max-width: 46%;
	min-width: 0;
	text-decoration: none;
}

.plist-nav__link--next {
	margin-left: auto;
	text-align: right;
}

.plist-nav__label {
	font-family: Lato, Arial, sans-serif;
	font-size: 12px;
	line-height: 16px;
	color: #8d959c;
}

.plist-nav__title {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: Bitter, Georgia, serif;
	font-size: 16px;
	line-height: 22px;
	color: #16a085;
}

.plist-nav__link:hover .plist-nav__title,
.plist-nav__link:focus-visible .plist-nav__title {
	text-decoration: underline;
}

@media (max-width: 600px) {
	.plist-nav {
		flex-direction: column;
		gap: 16px;
	}

	.plist-nav__link,
	.plist-nav__link--next {
		max-width: 100%;
		margin-left: 0;
		text-align: left;
	}
}

/* The same links above the title, compact: labels only, no titles. */
.plist-nav--top {
	margin: 0 0 18px;
	padding-top: 0;
	border-top: 0;
}

.plist-nav--top .plist-nav__label {
	font-size: 13px;
	line-height: 18px;
	font-weight: 700;
	color: #16a085;
}

.plist-nav--top .plist-nav__link:hover .plist-nav__label,
.plist-nav--top .plist-nav__link:focus-visible .plist-nav__label {
	text-decoration: underline;
}

/* The site's tablet container is a fixed 768px, so a window between 768
   and 800px has no gutter at all; the board and its links get one here.
   Last in the file on purpose: it must win over .plist-nav's own margin. */
@media (min-width: 768px) and (max-width: 799px) {
	.pwall--page,
	.plist-nav {
		margin-left: 15px;
		margin-right: 15px;
	}
}