/*
 * 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. The photo alone,
 * square-cornered like the rest of the site, 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. */
/* Square corners: the whole site is sharp-cornered, and rounded photo
   frames here were called out as breaking that. The only round things
   left are the heart disc and the curator's initial, which match the
   circular crops the list carousel has always used. */
.pcard-media {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	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 and seller in a column on the left, the price in its own column on
   the right, centred against the text: a short name no longer leaves the
   price hanging off a half-empty line. */
.pcard-body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex: 1 1 auto;
	padding: 0 2px;
}

.pcard-text {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1 1 auto;
	min-width: 0;
}

/* Up to two lines of name, then an ellipsis: the old cards clipped at
   160px whatever the column width, which cut most names mid-word. */
.pcard-name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	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-shop {
	display: block;
	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;
}

/* An empty seller slot (inside the product's own shop) takes no room. */
.pcard-shop:empty {
	display: 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);
	white-space: nowrap;
}

.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;
	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;
}

.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;
	}
}