/* ==========================================================================
   mobile-2026.css
   Incremental mobile-friendly rework of the Vanbar catalogue, done in small
   isolated steps. Everything new lives in this file so it is easy to see and
   easy to revert. Loaded AFTER css/global.css so these rules win.

   STEP 1 - Left menu (#leftMenu ul.flyout)
   Replaces the old jQuery flyout (~190 lines removed from master_top.php) with
   a pure-CSS flyout. The ">" marker on parents is pure CSS via :has(> ul).
   scripts/flyout_menu.js now only handles tap-to-open on touch devices.

   STEP 2 - Promotions filter (#ddPromoIcon)
   Replaced the ddslick jQuery image-dropdown with a native <select>, styled
   here to match the Brands dropdown (#ddBrand in global.css).
   ========================================================================== */

/* Reset the list. global.css has `ul, ol { margin-left: 20px }` which would
   otherwise indent every submenu. */
ul.flyout,
ul.flyout ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Each item is the positioning context for its own flyout submenu. */
ul.flyout li {
	position: relative;
}

/* Menu links: no underline unless hovered. */
ul.flyout li a {
	text-decoration: none;
}
ul.flyout li a:hover {
	text-decoration: underline;
}

/* Items that have children: show a right-aligned ">" indicator. Uses :has() so
   it is pure CSS with no JavaScript dependency. Also kills the old arrow_menu.gif
   that global.css set on a.expandable. */
ul.flyout li:has(> ul) > a {
	background-image: none;
}
ul.flyout li:has(> ul) > a::after {
	content: ">";
	position: absolute;
	right: 12px;
	top: 0;
	font-weight: bold;
}

/* Submenus: hidden until the parent li is hovered, focused or tapped open. */
ul.flyout ul {
	display: none;
	position: absolute;
	left: 100%;
	top: 0;
	width: 175px;
	border: solid 1px #353535;
	background: #515151;
	z-index: 10;
}
ul.flyout li:hover > ul,
ul.flyout li:focus-within > ul,
ul.flyout li.is-open > ul {
	display: block;
}

/* ---- Touch / no-hover devices ------------------------------------------- */
/* There is no hover on touch screens, and a narrow screen has no room for a
   side flyout, so expand submenus inline (accordion) instead. The first tap on
   a parent opens it (see flyout_menu.js); a second tap follows the link. */
@media (hover: none) {
	ul.flyout ul {
		position: static;
		left: auto;
		top: auto;
		width: auto;
		border: 0;
	}
	ul.flyout ul li a {
		padding-left: 52px;
	}
	ul.flyout ul ul li a {
		padding-left: 68px;
	}
}


/* ==========================================================================
   STEP 2 - Promotions filter: native <select> to match the Brands dropdown.
   ========================================================================== */
#ddPromoIcon {
	width: 175px;
	margin-top: 8px;
	background-color: #CCCCCC;
	color: Black;
}
#ddPromoIcon * {
	color: Black;
}


/* ==========================================================================
   STEP 3 - Drawer shell (dormant)
   The hamburger (#btnDrawer) and the drawer's duplicated top-bar links
   (#drawerLinks) are built now but kept hidden. Desktop is untouched. The
   mobile breakpoint that reveals the hamburger and slides #tdLeft off-canvas
   lands in a later step - at that point these just need `display` flipped on
   plus the off-canvas transform. drawer.js already wires the toggle (it flips
   `body.drawer-open` and keeps aria-expanded in sync), but stays inert while
   the button is hidden.
   ========================================================================== */

/* Hamburger button - hidden on desktop, styled and ready for the breakpoint. */
#btnDrawer {
	display: none;
	width: 44px;
	height: 44px;
	padding: 10px 8px;
	border: 0;
	background: transparent;
	cursor: pointer;
	box-sizing: border-box;
}
#btnDrawer span {
	display: block;
	height: 3px;
	margin: 4px 0;
	background: White;
	border-radius: 2px;
}


/* ==========================================================================
   STEP 4 - Make #tblMain reflowable WITHOUT changing the markup.
   #tblMain stays a real <table> (table/tr/td). We tried converting it to
   <div>s + display:table, but the legacy catalogue content contains an
   unbalanced </div> that a real <td> silently ignores but a real <div> does
   not - it closed #tdContent early and knocked #tdRight out of the layout.
   A real table tolerates that malformed content, so we keep it on desktop and
   simply switch the table/rows/cells to display:block at the mobile breakpoint
   (step 5) to stack them. Desktop is therefore untouched (nothing here yet);
   the stacking override lives in the step-5 @media block.
   ========================================================================== */


/* ==========================================================================
   STEP 5 (in progress) - Mobile breakpoint
   Requires the viewport meta tag (added to master_top.php <head>) - without it
   phones render at ~980px and this query never fires.
   This first pass: collapse the fixed 1200px shell to the device width, drop
   the right-hand ad column, and stack the layout table so the content spans the
   full width instead of being squeezed beside the left column. Still to come:
   collapse the header and move the left nav into the hamburger drawer.
   ========================================================================== */
@media (max-width: 768px) {
	/* Collapse the fixed-width page shell to fit the device. */
	#page {
		width: auto;
	}

	/* Drop the right-hand ad margin on small screens. The #tblMain #tdRight
	   (2 ids) selector must outrank the "#tblMain td { display:block }" stacking
	   rule below, otherwise the ad column reappears stacked under the content. */
	#tblMain #tdRight {
		display: none;
	}

	/* Stack the layout table so #tdContent gets the full width. #tblMain stays a
	   real <table> in the DOM (tolerant of the legacy unbalanced </div>, see
	   STEP 4) - we only change how it renders. The implicit <tbody> is included. */
	#tblMain,
	#tblMain tbody,
	#tblMain tr,
	#tblMain td {
		display: block;
		width: auto;
	}

	/* The fixed 50px header would clip its items once they wrap; let it grow. */
	#top {
		height: auto;
	}

	/* Keep content images from forcing horizontal scroll on narrow screens. */
	#tdContent img {
		max-width: 100%;
		height: auto;
	}

	/* ...but that height:auto also outranks the HTML height="50" attribute the
	   promo icons ("SUPER DEAL", "NEW", ...) are sized with in index.php, so they
	   rendered at natural size - up to 283x127 - and swamped the product card,
	   pushing the description and the price block onto lines of their own.
	   Attribute-sized images are the exception; give these their intended height
	   back and let the width follow. */
	#tdContent .promoIcon img {
		height: 40px;
		width: auto;
	}
}


/* ---- Header float wrap between desktop and the mobile breakpoint ---------
   global.css pins #top to height:50px and floats .currency right. Narrow the
   window and that float stops fitting beside the account/wishlist/basket links,
   so it wraps to a second line - which is outside the fixed 50px box. It lands
   under the thin blue strip below the header and is invisible, which reads as
   the currency selector "jumping out of" the header on the way down to phone
   width. Below 768px it goes into the drawer instead (drawer.js); in this band
   there is no drawer yet, so let the bar grow to fit what is in it. The
   overflow:hidden is what makes #top enclose its own floats. Bounded at 1024px
   so the full-size desktop header keeps its exact 50px geometry.
   ------------------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {
	#top {
		height: auto;
		overflow: hidden;
	}
}


/* ---- STEP 5 (cont.) - Header collapse + off-canvas drawer ----------------
   The header shrinks to  [ ☰ | logo | basket ]  and the left column (search,
   brands, promotions, category menu, account links) becomes an off-canvas
   drawer slid in by the hamburger. drawer.js already toggles body.drawer-open.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	/* Header row: flex lets the hidden items drop out cleanly. */
	#top {
		display: flex;
		align-items: center;
		height: auto;
		padding: 6px 10px;
	}
	#btnDrawer {
		display: block;   /* reveal the hamburger (hidden on desktop) */
	}
	#logoArea {
		flex: 0 0 auto;
		width: auto;
		height: auto;
		/* ~20px right of the hamburger; margin-right:auto pushes the icons to the
		   far right of the bar. */
		margin: 0 auto 0 20px;
	}
	#logoArea img {
		max-height: 44px;
		width: auto;
		display: block;   /* kill the inline baseline gap so it centres in the row */
	}
	/* Header keeps account + wishlist + basket as icons; everything else is
	   dropped (checkout, clear basket, contact, currency, reseller name). */
	#top .topItem,
	#top .currency {
		display: none;
	}
	#top .topAccount,
	#top .topLogout,
	#top .topWishlist,
	#top #topBasket {
		display: block;
		float: none;
		margin: 0;
	}
	/* Strip the silver desktop button; render as a plain icon on the dark bar. */
	#top .topAccount a,
	#top .topLogout a,
	#top .topWishlist a,
	#top #topBasket a {
		background: none;
		color: White;
		padding: 0 7px;
		margin: 0;
		line-height: normal;
		font-size: 0;   /* hide the text label; the icon is the ::before below */
	}
	#top .topAccount a::before  { content: "\1F464"; }  /* account / login (bust) */
	#top .topLogout a::before   { content: "\1F6AA"; }  /* logout (door) */
	#top .topWishlist a::before { content: "\2661"; }   /* wishlist (heart) */
	#top #topBasket a::before   { content: "\1F6D2"; }  /* basket (cart) */
	#top .topAccount a::before,
	#top .topLogout a::before,
	#top .topWishlist a::before,
	#top #topBasket a::before {
		font-size: 20px;
		vertical-align: middle;
	}
	/* Keep the basket count visible next to the cart icon. */
	#top #topBasket #basketNumItems {
		font-size: 12px;
		vertical-align: middle;
	}

	/* Left column -> off-canvas drawer. The #tblMain #tdLeft selector (2 ids)
	   outranks the "#tblMain td { display:block; width:auto }" stacking rule. */
	#tblMain #tdLeft {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 260px;
		max-width: 85%;
		z-index: 1000;
		background: #515151;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 10px;
		box-sizing: border-box;
		transform: translateX(-100%);
		transition: transform 0.25s ease;
	}
	body.drawer-open #tblMain #tdLeft {
		transform: translateX(0);
	}

	/* Currency selector, moved in here from the header by drawer.js (the header
	   rule above hides it in place - there is no room for it beside the logo and
	   icons). Sits at the top of the drawer, above the search/menu, separated by
	   a rule. Note the "#top .currency { display:none }" above no longer applies
	   once the node has left #top. */
	#tblMain #tdLeft .currency {
		display: block;
		float: none;
		margin: 0 0 10px;
		padding: 0 0 10px;
		border-bottom: 1px solid #6d6d6d;
		color: #ffffff;
		font-size: 14px;
	}
	#tblMain #tdLeft .currency select {
		max-width: 100%;
		margin-top: 4px;
	}
	/* global.css paints the whole left column white (#tdLeft *), and that catches
	   <option> elements too. The closed control is exempt (#tdLeft select { color:
	   Black }) so the chosen item looks right, but the open list inherits white on
	   the white popup - every UNSELECTED item is invisible. Same defect the
	   promotions filter had (#ddPromoIcon * { color: Black }, STEP 2), and the
	   brands filter shares it now that it is in the drawer, so fix both. */
	#tblMain #tdLeft .currency option,
	#tblMain #tdLeft #ddBrand option {
		color: Black;
		background-color: #ffffff;
	}

	/* Ads hidden on small screens: the left ad banners (right column already
	   dropped above) so the drawer stays nav-only. */
	#leftBottom {
		display: none;
	}

	/* Menu items carry a 195px-wide background image (leftMenuItemBg.png) sized
	   for the desktop column. On the wider mobile row it tiles and the box
	   repeats. Drop it so items are flat #515151 (matches the drawer); the ">"
	   expand marker (::after, from STEP 1) still sits at the right edge. */
	ul.flyout li {
		background-image: none;
	}
	/* Bump menu items +2px (from the 12px base) for easier reading/tapping. */
	#leftMenu ul.flyout li a {
		font-size: 14px;
	}

	/* The product card's action row is an inline-styled flex div holding Order +
	   qty, the size dropdown, Add-to-Cart and the availability badge ("IN STOCK").
	   Four items on one line is fine in a 385px desktop card but cramped on a
	   phone, with the badge jammed against the cart button. Let the row wrap and
	   put the badge on a line of its own. The row carries no class, so it is
	   reached through the availability div it contains (:has, as the basket rules
	   do); the id is per-product (availability_12345), hence the prefix match. */
	#tdContent .product-item .details div:has(> [id^="availability_"]) {
		flex-wrap: wrap;
	}
	#tdContent .product-item [id^="availability_"] {
		flex: 0 0 100%;
		margin-top: 6px;
	}

	/* Homepage product cards are a fixed width:385px; float:left (inline <style>
	   in index.php), which overflows the now-full-width content column. Let them
	   fit and stack. The #tdContent qualifier raises specificity so this beats
	   that inline rule (which is later in the document than this file). */
	#tdContent .product-item {
		width: auto;
		max-width: 95%;
		float: none;
		margin: 5px auto;
	}
}


/* ---- Product card padding (all widths) ----------------------------------
   The inline <style> in index.php gives .details a border but no padding, so
   the price and description sit hard against the card edge. Wanted on desktop
   as well as mobile, so this sits outside the breakpoint. The #tdContent
   qualifier raises specificity above that inline rule, which appears later in
   the document than this file. min-height:175px there is unchanged; the padding
   adds to it (content-box).
   ------------------------------------------------------------------------- */
#tdContent .tblProducts .details {
	padding: 10px 12px;
}


/* ---- STEP 5 (cont.) - Product page (product.css) mobile reflow -----------
   product.php lays the product out as a 2-col table (#tblProduct: image |
   #tdHighlight details) plus a Related Items table (.tblRelated) with fixed
   300px name cells. Both are wider than a phone and get clipped by #tdContent's
   overflow:hidden (the "In Stock" button and payment banner get cut off). Stack
   them. #tdContent prefixes raise specificity above product.css, which loads
   after this file. (The warranty banner image is handled by the existing
   #tdContent img { max-width:100% } rule once its cell is block.)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	/* Image | details -> stacked, each full width. */
	#tdContent #tblProduct,
	#tdContent #tblProduct tbody,
	#tdContent #tblProduct tr,
	#tdContent #tblProduct td {
		display: block;
		width: auto;
	}
	/* Drop the 30px indent on the details column once it is stacked. */
	#tdContent #tdHighlight {
		padding-left: 0;
	}
	/* Qty / Add to Cart / Wish List / stock: wrap instead of overflowing. */
	#tdContent #tdHighlight .order {
		flex-wrap: wrap;
		gap: 8px;
	}

	/* Related Items: stack the fixed-width cells into a vertical list. */
	#tdContent .tblRelated,
	#tdContent .tblRelated tbody,
	#tdContent .tblRelated tr,
	#tdContent .tblRelated td {
		display: block;
		width: auto;
	}
	#tdContent .tblRelated .colSpacing {
		display: none;
	}

	/* Tabs (tabs.css): the desktop sliding-door tabs float:left and wrap to an
	   awkward 2-then-1 layout on a narrow screen. Stack them full-width as flat
	   buttons instead (the original tab_bg.gif sliding-doors can't stretch), with
	   the active tab shown white. The panel then sits cleanly below. */
	#tdContent .tabbedPanels ul.tabs {
		height: auto;
		margin: 0;
		padding: 0;
	}
	#tdContent .tabbedPanels ul.tabs li {
		float: none;
		margin: 0 0 3px 0;
	}
	#tdContent .tabbedPanels ul.tabs li a {
		background: #ececec;
		padding: 0;
		border: 1px solid #d1d1d1;
		border-radius: 4px;
	}
	#tdContent .tabbedPanels ul.tabs li a span {
		background: none;
		padding: 11px 14px;
		min-width: 0;
	}
	#tdContent .tabbedPanels ul.tabs li a.active {
		background: #ffffff;
		border-color: #b9b9b9;
	}
	#tdContent .tabbedPanels ul.tabs li a.active span {
		color: #6d2536;
		padding-top: 11px;
	}
}


/* ---- STEP 5 (cont.) - Checkout / select_shipping.php ---------------------
   The shipping form is a fixed <table class="tblShippingOptions" width="811">,
   which overflows the phone width so the option labels get clipped. Let it fit
   the column and wrap. (Its cells are plain text with spaces, so they reflow.)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	#tdContent .tblShippingOptions {
		width: auto;
		max-width: 100%;
	}
}


/* ---- STEP 5 (cont.) - Login page (login_default.php) ---------------------
   Two leftovers from a layout that assumed a wide content column.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	/* The login form is a <table align="left">, which is a float. Everything
	   after it ("Forgotten your password?", the Note paragraphs) wraps around
	   that float, so on a narrow screen the link starts halfway across and reads
	   as centred. A single-column layout has nothing to sit beside the table, so
	   drop the float and let the following content start at the left margin. */
	#tdContent form table[align="left"] {
		float: none;
	}
	/* Submit lands in its own stacked cell hard under the password field - the
	   desktop gap came from the table's cellpadding across two columns, which is
	   gone once the cells are blocks. */
	#tdContent form input[type="submit"] {
		margin-top: 12px;
	}
}


/* ---- STEP 5 (cont.) - Footer -------------------------------------------
   #bottom is pinned to height:50px with only padding-top, which fits the single
   row of links the desktop width gives it. On a phone those links wrap to two or
   three lines, so the copyright and the "ECommerce Integration by Yart" line
   overflow the black bar and land on the pale strip below it. Let the bar grow
   to its content and pad it on all sides. Same fix #top needed at this width.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	#bottom {
		height: auto;
		padding: 8px 10px 12px;
	}
}


/* ---- STEP 5 (cont.) - Stacked forms (order.php / credit_card_eway.php) ---
   The layout table stacks nested table cells on mobile (the #tblMain td rule),
   so 2-column label|control forms become stacked rows. Right-aligned label
   cells then read as disconnected on the right - left-align them so each label
   sits above its control. Also keep form controls within the screen width. */
@media (max-width: 768px) {
	#tdContent td[align="right"] {
		text-align: left;
	}
	#tdContent input,
	#tdContent select,
	#tdContent textarea {
		max-width: 100%;
		box-sizing: border-box;
	}
	/* Breathing room below each stacked form field. Only .form_control elements
	   carry it, and several controls don't have that class (the Payment Type
	   <select>, for one), so the gap alone can't be relied on - the label rule
	   below supplies the rest. Trimmed from 20px now that both apply. */
	#tdContent .form_control {
		margin-bottom: 10px;
	}
	/* Stacked labels sat hard against the control above them ("*Payment Type:"
	   right under the delivery-type line). On desktop that gap comes from spacer
	   rows like <tr><td colspan="2" height="8"></td></tr>, but an empty cell has
	   no content to give it height once it is display:block, so it collapses to
	   nothing. Give each label cell its own top padding instead. Scoped to cells
	   inside a <form> so it only touches the checkout forms, not the right-
	   aligned cells in content tables. */
	#tdContent form td[align="right"] {
		padding-top: 12px;
	}

	/* The notes under Submit ("Your order will be confirmed by email...", "Note",
	   "items with a * must be filled in", "Warning") are a nested 2-column table:
	   a &nbsp; spacer column on the left, and <td height="5"> cells for the row
	   gaps. Stacked, EVERY one of those becomes its own full-width blank line, so
	   the four notes spread over a screenful of white space. Hide the spacers and
	   let the lines sit together. width="265" is the checkout-notes table in
	   order.php and credit_card_eway.php (and nothing else on the live pages). */
	#tdContent table[width="265"] td:first-child,
	#tdContent table[width="265"] td:empty {
		display: none;
	}
	#tdContent table[width="265"] td {
		padding: 0 0 6px;
	}
}


/* ==========================================================================
   STEP 6 - Paginate product listings.
   index.php's PrintTableProducts() used to dump every matching product onto a
   single page, so a broad search or category could render hundreds of cards -
   painful anywhere, unusable on a phone. It now renders 24 per page and emits
   a <nav class="pagination"> of numbered page links (see PrintPagination()).
   The links carry the current filters (search term / category / brand / tag)
   in the query string. This block styles that nav for desktop and mobile.
   ========================================================================== */
.pagination {
	clear: both;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	/* Clear separation below the pager so it isn't crowded against the product
	   cards. Padding (not just margin) guarantees the gap even if the adjacent
	   product container's margin would otherwise collapse into it. */
	margin: 16px 0 0;
	padding-bottom: 40px;
}
.pagination a,
.pagination .pg-current {
	display: inline-block;
	min-width: 40px;
	padding: 9px 12px;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
	border: 1px solid #b9b9b9;
	border-radius: 4px;
	color: #6d2536;
	background: #ffffff;
	line-height: 1;
}
.pagination a:hover {
	background: #ececec;
}
/* Current page: filled, non-interactive. */
.pagination .pg-current {
	background: #6d2536;
	border-color: #6d2536;
	color: #ffffff;
	font-weight: bold;
}
/* The "..." gaps are plain text, not tappable. */
.pagination .pg-gap {
	padding: 0 4px;
	color: #808080;
}

/* On phones there isn't room for the full numbered strip - it wraps to a second
   line and leaves an orphaned "34 Next" that reads badly. Keep it to one compact
   row of up to five numbers: the pages PrintPagination marked pg-near (every page
   when there are 5 or fewer, otherwise the current one and its neighbours) plus
   the first/last (pg-edge) jump links; the further-out numbers and the "..." gaps
   go. An earlier pass kept only pg-edge, which read fine on a long pager but
   collapsed a short one to nothing useful - with 4 pages the window covers
   everything, so no pg-edge links are emitted and the row was left as "[1] Next".
   To fit the widest case (Prev + first + five + last + Next) in ~390px the boxes
   tighten up and Prev/Next drop to bare chevrons - same font-size:0 + ::before
   trick the header icons use. */
@media (max-width: 768px) {
	.pagination {
		flex-wrap: nowrap;
		gap: 6px;
	}
	.pagination a.pg-num:not(.pg-near):not(.pg-edge),
	.pagination .pg-gap {
		display: none;
	}
	.pagination a,
	.pagination .pg-current {
		min-width: 36px;
		padding: 9px 6px;
	}
	.pagination a.pg-prev,
	.pagination a.pg-next {
		font-size: 0;   /* hide the "Prev"/"Next" words; the chevron is below */
	}
	.pagination a.pg-prev::before { content: "\00AB"; }
	.pagination a.pg-next::before { content: "\00BB"; }
	.pagination a.pg-prev::before,
	.pagination a.pg-next::before {
		font-size: 16px;
		line-height: 1;
	}
}


/* ==========================================================================
   STEP 7 - Shopping basket table (basket.php -> PrintBasketCustomer).
   The STEP-5 shell-stacking rule (#tblMain td { display:block }) also matches
   the cells of nested CONTENT tables, so the 7-column basket table collapsed
   into an unlabelled vertical list of bare numbers (the Ex-GST / In-GST / USD
   prices lost their headers and were impossible to tell apart).
   Fix: on mobile, turn each basket row (class="tblBasket") into a self-contained
   card. The column header row is hidden and every value instead carries its own
   inline label via a data-label attribute (added in PrintBasketCustomer) shown
   through ::before - so nothing needs to fit 7 columns across and no horizontal
   scrolling is required. Scoped to .tblBasket, so the shell stacking (STEP 5)
   and the deliberate product/form stacking elsewhere are untouched.
   ========================================================================== */
@media (max-width: 768px) {
	/* The basket sits inside a wrapper <table>. The shell rule blocks nested
	   td/tr/tbody but NOT the nested <table> element, so this wrapper stays
	   display:table and shrink-wraps to its content - which left the cards only
	   half-width. Force it (and the basket) to block so they fill #tdContent.
	   Also drop the grey wrapper background so the cards sit on the page. */
	#tdContent table:has(.tblBasket) {
		display: block;
		width: auto;
		background: transparent;
	}
	#tdContent .tblBasket,
	#tdContent .tblBasket tbody {
		display: block;
		width: 100%;
		background: transparent;
	}
	/* The column-header row is redundant once each value is self-labelled. */
	#tdContent .tblBasket tr:first-child {
		display: none;
	}
	/* Each item (and the Total row) becomes a card. */
	#tdContent .tblBasket tr {
		display: block;
		margin: 0 0 10px;
		padding: 8px 12px;
		border: 1px solid #c9c9c9;
		border-radius: 6px;
		background: #ffffff;
	}
	#tdContent .tblBasket td {
		display: block;
		width: auto;
		border: 0;
		padding: 2px 0;
		text-align: left;   /* override the align="right" on the price cells */
		/* basket.php's table is class="table tblBasket", and global.css gives
		   .table td a #f0f0f0 fill. Stacked into a card that reads as a grey block
		   floating inside the white card, so clear it and let the card show. The
		   Total row keeps its cream tint - that comes from the tr rule below, not
		   from the cells. */
		background: transparent;
	}
	/* Drop the row number and the colspan "Total" spacer cell on mobile. */
	#tdContent .tblBasket td:first-child {
		display: none;
	}
	/* ... except on the shipping and insurance total rows, where that first cell
	   is not a spacer but the only thing naming the amount ("Total (incl. $9.00
	   shipping)") - the figures beside it carry no data-label of their own, so
	   hiding it left a card holding a bare dollar value. Bring it back inline
	   with the figure next to it, so the row reads the same way as the labelled
	   cells above it: "Total (incl. $9.00 shipping): $74.04". Only that first
	   figure is pulled onto the label's line - in the multi-currency views the
	   remaining amounts stay on their own lines rather than running together. */
	#tdContent .tblBasket td.basketRowLabel:first-child,
	#tdContent .tblBasket td.basketRowLabel + td {
		display: inline;
	}
	#tdContent .tblBasket td.basketRowLabel:first-child {
		color: #555;
	}
	#tdContent .tblBasket td.basketRowLabel::after {
		content: ":";
		font-weight: bold;
	}
	/* Prefix each labelled value with its column name. */
	#tdContent .tblBasket td[data-label]::before {
		content: attr(data-label) ": ";
		font-weight: bold;
		color: #555;
	}
	/* The qty box / Delete / Update sat hard up against the product name once the
	   cells stacked. Give the action cell some breathing room above it. */
	#tdContent .tblBasket td:has(input[type="button"]) {
		padding-top: 12px;
	}
	/* Each price cell hard-codes a <br> so the "= $x.xx" running total sits under
	   the unit price in the narrow desktop column. A mobile card has the width to
	   read as one line ("1 @ $30.56 = $30.56"), so drop the break. The separating
	   space is emitted after each <br> in PrintBasketCustomer - it collapses away
	   at the start of a desktop line, so desktop is unchanged. Scoped to the
	   labelled price cells: the hire row's date/qty <br/>s must keep breaking. */
	#tdContent .tblBasket td[data-label] br {
		display: none;
	}
	/* Non-editable baskets (checkout, order confirmation) print the quantity in
	   a cell of its own. Stacked into a card it reads as a stray "1" under the
	   product name, and the price line directly below already spells it out as
	   "1 @ $30.56", so drop it. The hire variant of this cell ("Hired for 3 days
	   from ...") carries real information and is deliberately left alone. */
	#tdContent .tblBasket td.basketQty {
		display: none;
	}
	/* With that cell gone the price line sits hard under the product name. On
	   basket.php the gap comes from the qty/Delete/Update cell above; here the
	   first price cell has to supply it itself. Keyed off the hidden quantity
	   cell, so only the non-editable view is affected. */
	#tdContent .tblBasket td.basketQty + td[data-label] {
		padding-top: 12px;
	}
	/* Set the Total card apart. */
	#tdContent .tblBasket tr:last-child {
		background: #f8f7ed;
	}
}