/* ============================================================ SINGLE-PRICE CARDS — consoles, handhelds, controllers, accessories, bundles: anything render.js marks `single-price` because the item has no condition rows. ============================================================ These cards carry roughly 130px of text beside a 220px thumbnail (140px on mobile), so the shared `align-items:center` used to centre that short column against the tall image and push the title halfway down the card. The layout below: - starts the title at the top of the column, - keeps the price and the Add button on ONE row, price left and button right, vertically centred with each other, - anchors that row to the bottom of the column so its position is set by the card and never by how many lines the title runs to. Nothing here targets `.has-cond-rows`; game cards keep their layout entirely from result-list.css and condition-rows.css. The thumbnail is untouched — `.result-row .thumb` sets its own `align-self:center`, which wins over the row's `align-items`. */ .result-row.single-price{ align-items:stretch; } /* min-height matches the thumbnail so the column has a defined height for the action row to sit at the bottom of. */ @media (min-width:561px){ .result-row.single-price .result-info{ justify-content:flex-start; min-height:220px; } } @media (max-width:560px){ .result-row.single-price .result-info{ justify-content:flex-start; min-height:140px; } } /* ---- The action row ---- One row: price on the left, Add button on the right, centred against each other. `margin-top:auto` is the anchor — the free space above pushes the row to the bottom of the column, so a two-line title and a five-line title put it in exactly the same place. NOTE the `position:relative; left:-10px` that result-list.css applies to this group at ≥761px is deliberately NOT reset: that offset is what puts a game card's Add button on its anchor, so inheriting it is what keeps the two buttons aligned to the pixel down a mixed list. */ @media (min-width:561px){ .result-row.single-price .result-right{ display:flex; flex-direction:row; align-items:center; /* The price is grouped WITH the button rather than pushed to the far left of the column. Pinning it under the title left a 125px void between two small elements at opposite edges of an empty band — technically aligned, visually two orphans. Sitting the price just off the button makes the pair read as one action cluster in the bottom-right, against the title in the top-left: a deliberate diagonal instead of four things drifting apart. 32px was chosen by eye against 20 / 26 / 40 rendered side by side. 20 crowds the price against the button's shadow, 40 starts to break the pair apart; 32 is the point where they read as one unit and the price still has air around it. */ /* Price pinned to the LEFT edge of the action row (i.e. under the title's own left edge) instead of grouped against the button. The row's min-content is unchanged — space-between only distributes free space — so .tool-grid's column floor is untouched. */ justify-content:space-between; /* Desktop: the action row sits directly under the title block with a fixed 32px gap, not flushed to the card bottom. `margin-top:auto` put it at the bottom edge, which left a large flexible void under short titles and read as two disconnected halves. The .result-info min-height:220px above is retained so card height is unchanged; the leftover space now falls below the action row instead of above it. Mobile keeps its own `margin-top:auto` further down. */ /* 10px of margin, not 32: the h4's own 14px bottom margin and the 11px of leading above the price's numerals inside its 44.6px line box already contribute 24px, so 10px lands the visible gap between the title's last glyph and the price's at ~34px. */ margin-top:auto; /* 20px of real gap, plus a 12px paint-time shift on the price (see below) for a 32px optical gap. The row's min-content width feeds the results column's minimum inside .tool-grid, so widening the real gap would steal ~7px from the quote sidebar at 1024px and re-wrap game titles. Keeping the layout gap at 20px leaves the page geometry exactly as it was. */ gap:20px; } } /* The price gives up its fixed 100px track and the +15px nudge that result-list.css uses to centre it under a condition selector, so it sits at the left edge of the action row. The 10px margin at ≥761px gives back the group's own -10px offset, putting the price's left edge exactly under the title's. */ .result-row.single-price .result-price{ position:static; left:auto; width:auto; min-width:0; text-align:left; } @media (min-width:561px){ /* The optical half of the 32px gap. transform paints the price 12px further from the button and participates in no layout at all, so the card, the column and every game card stay exactly where they are. */ /* Paint-only nudge: shifts the price 25px right of the row's left edge so it sits between the thumbnail and the button. transform takes part in no layout, so the row, the card and the button are untouched. */ .result-row.single-price .result-price{transform:translateX(25px);} } @media (min-width:761px){ /* Kept from the previous build purely so the row's min-content width is unchanged. Inside .tool-grid that width is the floor for the results column, and dropping it narrowed the column by 10px on searches that contain no game cards, which re-wrapped titles like "Xbox Series X" onto a fourth line. It costs nothing visually — the price sits at the right-hand end of the row, so a left margin has no effect there. */ .result-row.single-price .result-price{margin-left:10px;} } @media (max-width:560px){ /* Phones inherit result-list.css's `1fr auto` grid, which already puts the price at the left edge of its track and right-anchors the button. Only the bottom anchor and the button's padding (matched to the game-card value in condition-rows.css so the two buttons are identical in size) are set here. */ .result-row.single-price .result-right{margin-top:auto;} .result-row.single-price .result-add{padding:11px 22px;} }