/* The cards themselves are Divi blurbs and Visa fler is a Divi button, so both inherit the
   theme's typography. Only what Divi has no opinion about lives here: the grid, the cover tile,
   and the row under each card that holds the Köp button and the price, or the out of stock tag. */
/* 48px between rows: the Bamse team found each Köp button "fairly close to the product below"
   at 24px (SWEWP-97, 2026-11-10), and Max picked 48 from a render on stage. */
.egdt-grid {
	display: grid;
	gap: 48px 20px;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.egdt-grid--2 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.egdt-grid--5 { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.egdt-grid--6 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

.egdt-card { margin-bottom: 0 !important; }

/* Every cover stands in the middle of the same square tile, the way dintidning.se shows them.
   Max, 2026-11-10: the covers come in every shape (tall books, square board books, wide game
   boxes), and standing bare on the page they looked like a jumble of sizes; a tile gives every
   card the same picture box whatever the cover is.

   The tile used to carry a grey-blue fill (#c4dae4) to frame the covers against the blue page.
   The Bamse team asked for no colour behind the images (SWEWP-97, 2026-11-11), so the fill is
   gone and the tile is transparent. Only its geometry stays: every cover keeps the same square
   box and the cards still line up.

   Their CDN does not give us dimensions, so the box is reserved by ratio instead. Without this
   the cards reflow as the images arrive and the page scores a layout shift. The ratio sits on
   the tile, not only on the image: an image that fails to load has no intrinsic size, and the
   tile would collapse to a line of text. The padding is a share of the column width, so the
   margin round a cover scales with the card. */
.egdt-card .et_pb_image_wrap {
	display: block;
	aspect-ratio: 1 / 1;
	box-sizing: border-box;
	padding: 7%;
}

/* scale-down rather than contain: contain would stretch the smallest image in the feed, an
   85x120 thumbnail, across the whole tile at three times its own size, and a blown up
   thumbnail reads as a broken card. It keeps its own size instead, while every image big
   enough to fill the tile still fills it. Centred, because the tile gives every cover the same
   frame. */
.egdt-card .et_pb_main_blurb_image img {
	width: 100%;
	height: 100%;
	object-fit: scale-down;
	object-position: center;
}


.egdt-more { margin-top: 28px; text-align: center; }
.egdt-more__button[disabled] { opacity: .5; cursor: default; }

.egdt-notice {
	padding: 10px 14px;
	border-left: 4px solid #9a6700;
	background: #fff8e5;
	font-size: 14px;
}

/* Divi's own blurb grid is per-module, so the column count has to be ours. Every modifier is
   declared: without --3 and --4 the attribute would be silently ignored. */
.egdt-grid--3 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.egdt-grid--4 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }

/* Divi sizes headings by the column they sit in: its stylesheet carries
   `.et_pb_column_1_4 h4 { font-size: 18px }`, which is what the hand made cards get, while a
   full width column falls through to the theme's own h4 (20px, and 23px / 26px under the
   980px and 767px breakpoints). Our cards are a CSS grid inside one full width column, so
   without this they would render a two pixel larger title on desktop and a much larger one on
   a phone. Measured on stage 2026-10-28. Specificity alone wins here, no !important needed. */
.egdt-card .et_pb_module_header,
.egdt-card .et_pb_module_header a {
	font-size: 18px;
	line-height: 18px;
}

/* display is the other half of the reserved tile above, and it is not cosmetic. Divi ships this
   element as an inline-block, so it shrink wraps to the image's own pixel width and the ratio
   on the tile inside it only ever reserves that much: a product whose CDN image is narrower
   than the column gets a smaller card, and the grid goes ragged. Measured on stage with
   "Bamse - Malarbok for de yngsta", whose image is 85x120 where the rest of the feed is around
   700x1000: an 85px image in a 237px column. As a block the box is the column for every card,
   whatever the CDN sends. */
.egdt-card .et_pb_main_blurb_image {
	display: block;
}

/* Every card gives its title two lines and its description two lines, whatever they hold, so
   all cards are the same height and every Köp button sits the same distance under its cover.
   Max, 2026-11-09: most titles take two lines anyway. Measured on stage at 1440 and 1600, 6 of
   113 titles and 4 descriptions are longer and end in an ellipsis; at about 1100px, where a card
   is only 208px wide, 25 titles (about one in five) do; on a phone no title does. The link keeps the whole title, so a
   screen reader still reads it in full, and the product page on dintidning.se shows it.

   The heights are the measured line heights: 18px for the title (pinned above) and 25.6px for
   the description. line-clamp clips at the padding box, so Divi's 10px under the title moves
   from padding to margin, or the top of a third line would show inside it. The 3px on top keeps
   the accents of a first-line Å, Ä or Ö inside the box. */
.egdt-card .et_pb_module_header {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	box-sizing: content-box;
	height: 36px;
	padding: 3px 0 0;
	margin: 0 0 10px;
}

.egdt-card .et_pb_blurb_description {
	min-height: 51.2px;
}

.egdt-card .et_pb_blurb_description p {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	padding-bottom: 0;
}

/* The row 14px under that fixed block, at the same height in every card: the price at its left
   edge and the Köp button at its right (Max, 2026-11-10). The button is pushed right by its own
   auto margin rather than by space-between, so it stays at the right edge on a card whose price
   is hidden, and a card too narrow for both wraps the button under the price, still at the right.

   A sold out card has neither, and carries its "Ej i lager" tag where the price would be, so
   every card says what can be done with it in the same place (Max, 2026-11-10, moved there from
   the corner of the cover). min-height is the button's own height, 17px text plus 10px padding
   each side, so the tag is centred where its neighbours' buttons are. content-box because the
   14px on top must come on top of that height, whatever box-sizing the theme sets. */
.egdt-buy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 16px;
	box-sizing: content-box;
	min-height: 37px;
	padding-top: 14px;
}

.egdt .egdt-card .egdt-buy__button {
	margin-left: auto;
}

/* Plain text in the grey of the description, with no box round it: Max, 2026-11-10, "the tag is
   not worth a background". #666 on the page's #f0faff is 5.4:1. */
.egdt-card .egdt-badge {
	margin: 0;
	padding: 0;
	color: #666;
	font-size: 16px;
	line-height: 24px;
}

/* The grey of the description text, as Max asked, at 20px bold so the price still reads as the
   price. #666 on the page's #f0faff is 5.4:1, inside WCAG AA at any size. It sits at the left
   edge of the row, under the description it belongs to. On sale it shows the sale price in this
   same style, with the list price struck through beside it, smaller and regular, the way
   dintidning.se shows a sale (the Bamse team asked for the sale price, Max picked grey over red). */
.egdt-card .egdt-price {
	color: #666;
	font-size: 20px;
	font-weight: 700;
	line-height: 24px;
	white-space: nowrap;
}

.egdt-card .egdt-price__was {
	margin-left: 8px;
	font-size: 15px;
	font-weight: 400;
	text-decoration: line-through;
}

/* Words for screen readers only, the usual visually hidden pattern: they say which amount is the
   sale price and which the old one, since a line-through is not announced. */
.egdt-card .egdt-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* The button copies the Prenumerera button in the site header, as measured on stage: #e02b20
   with white 17px bold text, 10px padding, 5px corners and a soft shadow. It is styled from
   scratch rather than as a Divi button, because Divi forces its own button padding with
   !important (.et_button_no_icon .et_pb_button). The horizontal padding is wider than the
   header's 10px, which suits a word as short as Köp.

   White on #e02b20 is 4.6:1. Hover and keyboard focus darken it to #c4261c (5.8:1) where the
   theme would fade a button to 78%, which on red drops white text to 3.6:1. The Prenumerera
   button itself does not change on hover. Keyboard focus also gets an outline, because the
   theme removes every focus outline (:focus { outline: 0 }). :hover and :focus-visible sit in
   separate rules: a browser that does not know :focus-visible drops the whole selector list
   it appears in, hover included. */
.egdt .egdt-card .egdt-buy__button {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 5px;
	background-color: #e02b20;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .24);
	color: #fff;
	font-family: inherit;
	font-size: 17px;
	font-weight: 700;
	line-height: 17px;
	text-decoration: none;
	transition: background-color .2s;
}

.egdt .egdt-card .egdt-buy__button:hover {
	background-color: #c4261c;
	color: #fff;
}

.egdt .egdt-card .egdt-buy__button:focus-visible {
	background-color: #c4261c;
	color: #fff;
	outline: 2px solid #c4261c;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.egdt .egdt-card .egdt-buy__button {
		transition: none;
	}
}