/* L44 Cart Badge — blue pill on the cart when it has items; the count as a
 * black number inside a white circle.
 * ------------------------------------------------------------------------- */

/* Blue rounded pill around the whole cart link when it holds items. */
.header-nav__cart.l44cb-has-items {
	background: #62a8e5;
	border-radius: 999px;
	padding: 4px 16px;
	margin-left: -16px;   /* cancel the left padding so CART stays aligned with EN above */
	color: #181617 !important;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* The count: a white circle with a black digit. */
.header-nav__cart.l44cb-has-items .cart-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;

	/* A circle, and it stays one.

	   The pill is given a measured width once it is lifted into its slot, and
	   the very first thing added to a cart changes what that width should be —
	   a blue pill and a white circle appear where there was neither. For the
	   instant before it is measured again the pill is the width it was when it
	   was empty, and everything inside it is squeezed to fit: the circle came
	   out as a narrow ellipse with the number crushed in it, and stayed that
	   way until the page was reloaded.

	   Re-measuring is the real fix and it is in the script. This is the belt
	   to that pair of braces: a thing that must not be squashed says so. */
	flex: 0 0 auto;
	border-radius: 50%;
	background: #ffffff;
	color: #181617;
	font-size: 15px;
	line-height: 1;
}
.header-nav__cart.l44cb-has-items .cart-count .l44cb-num {
	color: #181617;
	font-weight: 400;
}

/* ---- the pill opens to show what is in the cart ----
 *
 * One shape, not two. The first attempt hung a second panel under the pill and
 * joined them edge to edge, which measured perfectly and still read as two
 * things — because for the first fifth of a second the pill's corners were
 * still un-rounding while a rectangle grew out from under it.
 *
 * So nothing grows under anything. The pill itself gets taller, by growing its
 * own bottom padding: one element, one background, one set of corners. The
 * writing does not move, because the content box it sits in is not what
 * changes — only the padding below it.
 *
 * And the pill is lifted out of the flow into a slot the size it used to be,
 * so the language switch, the logo and the menu never learn that any of this
 * happened.
 * ------------------------------------------------------------------------- */

.l44cb-slot {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
}

.l44cb-slot.is-live > .header-nav__cart.l44cb-has-items {
	position: absolute;
	top: 0;
	left: 0;

	/* Its own width, written down rather than worked out from what is inside
	   it, so that widening it cannot make it do anything else.

	   Left to size itself, the shape is at the mercy of its contents: anything
	   that changes the room the writing has can change how the writing lays
	   out, and a shape whose height follows its writing is one bad line break
	   away from growing downward while it grows sideways. Given a number, a
	   line that cannot break, and a box model that is stated rather than
	   inherited from whatever the theme sets, there is nothing left for the
	   stretch to disturb.

	   content-box on purpose: the theme may well set border-box on everything,
	   and this width is the room inside the padding. */
	box-sizing: content-box;
	width: var( --l44cb-span, auto );
	justify-content: center;
	white-space: nowrap;

	/* What has not opened yet is not drawn. */
	overflow: hidden;

	/* The top corners never change, and that is not a detail.
	   
	   They used to round out from a stadium to a rectangle on opening, which
	   moves the element's own hit area at exactly the corners — so a pointer
	   resting on the upper left or right sat inside the shape, then outside it,
	   then inside, and the panel opened and shut as fast as the browser could
	   redraw. Held still, there is nothing to oscillate between.
	   
	   Half the closed height is a full round on a shape this tall, so closed it
	   looks exactly as it always did. */
	border-top-left-radius: calc( var( --l44cb-lid, 34px ) / 2 );
	border-top-right-radius: calc( var( --l44cb-lid, 34px ) / 2 );
	border-bottom-left-radius: calc( var( --l44cb-lid, 34px ) / 2 );
	border-bottom-right-radius: calc( var( --l44cb-lid, 34px ) / 2 );

	/* The height, and nothing else.

	   The corners used to be in this list, and it cost a long hunt. Closed, the
	   pill's radius is 999px from the rule above; live, it is half the height.
	   Measuring takes the pill out of the slot and puts it back, so the bottom
	   two corners had 999px to travel back down from — while the top two,
	   having no transition, arrived instantly. For a third of a second after
	   every measure the shape was flat across the top and scooped out
	   underneath, like a bowl, and then filled itself in from below.

	   That is the movement growing up from the bottom edge. It was not a
	   height: the shape's outer bounds never changed by a pixel, which is why
	   it survived every measurement I made of them. The corners were eating
	   into it.

	   Nothing is gained by easing a corner from 17px to 20px anyway. */
	transition: padding-bottom 340ms cubic-bezier( .22, .61, .36, 1 );
}

/* The pill carries a negative left margin so the word CART lines up with EN
   above it. Lifted out of the flow that margin would shift it twice — once on
   the slot standing in for it and once on the pill itself — so the slot takes
   it and the pill gives it up. */
.l44cb-slot.is-live > .header-nav__cart.l44cb-has-items {
	margin-left: 0;
}

.l44cb-slot.is-live > .header-nav__cart.l44cb-has-items.is-open {
	padding-bottom: var( --l44cb-tall, 4px );
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}

/* ---- the nudge, when something lands in the cart ----
 *
 * The shape stretches sideways and settles back. Nothing inside it moves and
 * nothing inside it changes size: the writing and the number sit exactly where
 * they were while the blue widens around them.
 *
 * Which is why this is not a transform. scaleX() would have stretched the word
 * CART with the pill and flattened the corners into ovals on the way out — the
 * two things that were asked to stay put. Its width is a number and its corners
 * are lengths, so widening it leaves both the writing and the rounding exactly
 * as they were.
 *
 * The padding does not move either, which is the point: only the room between
 * the paddings changes, and the writing is centred in it. Growing the padding
 * instead — the first way this was written — meant the shape's height depended
 * on how the writing chose to lay itself out in the room it was given, and that
 * is a door left open for no reason.
 *
 * The matching shift left keeps the growth even, so it opens out from the
 * middle rather than pushing off the left edge.
 * ------------------------------------------------------------------------- */

@keyframes l44cb-nudge {
	0% {
		left: 0;
		width: var( --l44cb-span );
		animation-timing-function: cubic-bezier( .2, .75, .35, 1 );
	}

	42% {
		left: calc( var( --l44cb-push, 6px ) * -1 );
		width: calc( var( --l44cb-span ) + var( --l44cb-push, 6px ) * 2 );
		animation-timing-function: cubic-bezier( .4, 0, .25, 1 );
	}

	100% {
		left: 0;
		width: var( --l44cb-span );
	}
}

.l44cb-slot.is-live > .header-nav__cart.l44cb-has-items.is-nudge {
	animation: l44cb-nudge 420ms both;
}

/* When the cart changes, the panel does not glide shut — it is simply not open
   any more, between one frame and the next.

   Gliding was the vertical movement: the shape sinking back from its own
   bottom edge while it stretched sideways, two motions at once where only one
   was wanted. A close is worth animating when somebody moves their pointer
   away, because they watched it open. Nobody watched this one. */
.l44cb-slot.is-live > .header-nav__cart.l44cb-has-items.is-still {
	transition: none;
}

/* ---- the pictures ----
 *
 * Sitting in the room the padding opened up, and clipped by the pill until
 * there is room for them. No background of their own: the blue behind them is
 * the pill's.
 */
.l44cb-peek {
	position: absolute;
	top: var( --l44cb-lid, 34px );
	left: 0;
	right: 0;
	/* Tighter at the sides than it was: the pictures grew and the pill did not,
	   so the room has to come from somewhere, and it is better spent on the
	   photographs than on blue. */
	padding: 6px 8px 10px;
}

.l44cb-peek__grid {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Two columns of equal width, each picture centred in its own.
   
   A grid rather than a flex row, and for a reason that bit: the cap that stops
   a wide picture breaking the row was a percentage, and a percentage inside a
   shrink-to-fit box has nothing definite to be a percentage of — so it
   resolved to almost nothing and every picture came out a few pixels across.
   A grid track has a real width, so 100% means what it says. */
.l44cb-peek__row {
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: 10px;
	place-items: center;
}

/* A row holding one keeps both columns and fills only the first, so an odd
   last picture sits exactly where every other left-hand picture sits. Centring
   it read as a third position the grid does not otherwise have — the column
   edge is the line the eye is already following down. */

.l44cb-peek__cell {
	display: inline-flex;
	opacity: 0;
	transition: opacity 240ms linear, transform 300ms cubic-bezier( .22, .61, .36, 1 );
}

.l44cb-peek__cell--l { transform: translateX( -16px ); }
.l44cb-peek__cell--r { transform: translateX(  16px ); }

/* Each waits for the foot of the shape to pass the foot of its own row; the
   script works out how long that is and sets it on the picture. Closing has no
   waits — a panel that dismantled itself politely would still be at it after
   the pointer had gone. */
.l44cb-has-items.is-open .l44cb-peek__cell {
	opacity: 1;
	transform: translateX( 0 );
	transition-delay: var( --l44cb-at, 0ms );
}

.l44cb-peek__cell img {
	display: block;
	height: 52px;
	width: auto;

	/* Never wider than its own column, and letterboxed rather than squeezed if
	   it would be. A picture made narrower than it should be looks worse than
	   one with a little air beside it. */
	max-width: 100%;
	object-fit: contain;
	border-radius: 8px;
}

@media ( prefers-reduced-motion: reduce ) {
	.l44cb-slot.is-live > .header-nav__cart.l44cb-has-items,
	.l44cb-peek__cell {
		transition-duration: 1ms;
	}

	.l44cb-peek__cell--l,
	.l44cb-peek__cell--r { transform: none; }

	.l44cb-slot.is-live > .header-nav__cart.l44cb-has-items.is-nudge {
		animation: none;
	}
}