/**
 * The sold out block: the "tell me when it's back" panel, and the in stock
 * alternatives card that sits above it.
 *
 * Ticket 2703.
 *
 * WHY THIS LIVES IN THE PLUGIN AND NOT IN THE THEME
 * -------------------------------------------------
 * On the 2k26 redesign branch these rules sat in the theme's own stylesheet and
 * leaned on its design tokens (--io-ink, --io-green, --io-r-md and the rest).
 * None of those exist on the live theme, and adding them would mean editing a
 * stylesheet the whole shop loads. Everything here is therefore written out in
 * full, in the live theme's own palette, and shipped with the plugin: the
 * feature can be loaded or dropped without a theme file moving.
 *
 * The palette is the one at the top of themes/ioutlet/style.css, so the panel
 * looks like the rest of the site rather than like a bolt-on:
 *   green #007811, green light (hover) #00a417, ink #111, body #666,
 *   border #eee, Lato, 5px corners on anything button shaped.
 *
 * Sky tint on the panel rather than green. Green is this site's "buy" colour
 * and it is on every add to cart button: a green panel sitting where the add to
 * cart button should be reads as one, and the first thing somebody does is
 * click it expecting a basket. The cyan the site already uses for helpful
 * things that are not a purchase is the safer ground.
 *
 * Every class is io- prefixed and nothing here selects a theme or WooCommerce
 * class, so these rules cannot reach anything else on the page.
 */

/* ---------------------------------------------------------------------------
   BACK IN STOCK PANEL
--------------------------------------------------------------------------- */

.io-bis {
	box-sizing: border-box;
	margin: 18px 0 22px;
	padding: 20px;
	background: #eaf6fb;
	border: 1px solid #cfe7f1;
	border-radius: 8px;
	font-family: 'Lato', sans-serif;
}

.io-bis__head {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0 0 14px;
}

.io-bis__icon {
	flex: 0 0 auto;
	margin-top: 2px;
	color: #007811;
}

.io-bis__title {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: #111;
}

.io-bis__blurb {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #666;
}

/* Field and button on one line while there is room for both. The wrap is what
   makes this work in the product summary column, which on a laptop is around
   420px wide, and in the product list column, which is nearer 900px. */
.io-bis__form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

/* The script sets form.hidden once a signup lands. The rule above is a
   display: flex on the same element and it out-specifies the browser's own
   [hidden] { display: none }, so without this the form stays on screen with a
   "you're on the list" message under it and invites a second go. */
.io-bis__form[hidden] {
	display: none;
}

.io-bis__input {
	box-sizing: border-box;
	flex: 1 1 220px;
	min-width: 0;
	height: 46px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid #ddd;
	border-radius: 5px;
	background: #fff;
	font-family: 'Lato', sans-serif;
	/* 16px and not 15px on purpose: iOS zooms the page in on a focused field
	   with anything smaller, and this one is halfway down a product page. */
	font-size: 16px;
	line-height: normal;
	color: #111;
}

.io-bis__input:focus {
	outline: none;
	border-color: #007811;
	box-shadow: 0 0 0 3px rgba(0, 120, 17, .12);
}

/* Shaped like the site's own CTAs (a.cta in style.css): 5px corners, 23px of
   side padding, white on #007811 going lighter on hover. */
.io-bis__submit {
	flex: 0 0 auto;
	height: 46px;
	padding: 0 23px;
	border: 0;
	border-radius: 5px;
	background: #007811;
	font-family: 'Lato', sans-serif;
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	transition: background .3s;
}

.io-bis__submit:hover,
.io-bis__submit:focus-visible {
	background: #00a417;
}

.io-bis__submit[disabled] {
	opacity: .6;
	cursor: default;
}

/* The honeypot. Off canvas rather than display: none, because the obvious
   spellings are the first thing a form filler checks for. */
.io-bis__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	opacity: 0;
}

/* Always in the DOM so aria-live announces reliably, and empty until there is
   something to say. :empty keeps it from taking a line's worth of margin while
   it is waiting. */
.io-bis__says {
	margin: 12px 0 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.5;
}

.io-bis__says:empty {
	margin: 0;
}

.io-bis__says.is-good {
	color: #007811;
}

.io-bis__says.is-bad {
	color: #ea233f;
}

.io-bis__small {
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: #767676;
}

@media (max-width: 600px) {
	.io-bis {
		padding: 16px;
	}

	/* Full width each, stacked. A button beside a shrunk field is neither
	   tappable nor readable, and this is the width where they stop fitting. */
	.io-bis__input,
	.io-bis__submit {
		flex: 1 1 100%;
	}
}

/* ---------------------------------------------------------------------------
   IN STOCK ALTERNATIVES

   Four things you can buy today, nearest on price, then a link to the whole
   collection filtered to what is in stock. Same idea as Envirofone's sold out
   block, which is what Josh asked for on this ticket.

   White rather than the panel's tint. These are products and they should read
   like the tiles everywhere else on the site; the tinted panel underneath is
   the thing that is not a purchase, and the tint is what separates the two.

   The grid is auto-fit, so the same markup is two columns in the product
   summary (about 420px on a laptop) and four across the product list column.
--------------------------------------------------------------------------- */

.io-alts {
	box-sizing: border-box;
	margin: 18px 0 0;
	padding: 18px;
	background: #fff;
	border: 1px solid #eee;
	border-radius: 8px;
	font-family: 'Lato', sans-serif;
}

.io-alts__head {
	margin: 0 0 14px;
}

.io-alts__title {
	margin: 0 0 4px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	color: #111;
}

.io-alts__lede {
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: #666;
}

/* auto-fit and not auto-fill: with four cards the empty tracks collapse, so a
   wide column gives four columns and not four cards stranded at one end. */
.io-alts__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* This list sits in the product column on a category page, a few lines above
   the theme's own .products list. Both resets are here rather than fought with
   !important further down. */
.io-alts__item {
	margin: 0;
	padding: 0;
	list-style: none;
	width: auto;
	float: none;
}

/* border-box so height 100% includes the padding and border. The theme leaves
   links content-box, and the card then ran 26px past its grid cell and over
   the "See all" link below. */
.io-alts__card {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 12px;
	background: #fafafa;
	border: 1px solid #eee;
	border-radius: 5px;
	color: #111;
	text-decoration: none;
	transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

/* The theme turns every link green and underlines it on hover. A card is not a
   text link, so both are put back here. */
.io-alts__card:link,
.io-alts__card:visited,
.io-alts__card:active {
	color: #111;
	text-decoration: none;
}

.io-alts__card:hover,
.io-alts__card:focus-visible {
	border-color: #ddd;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
	transform: translateY(-2px);
	text-decoration: none;
	color: #111;
}

/* A fixed shape for the image so four cards line up whatever their artwork is,
   and so the grid does not jump about as the images arrive. */
.io-alts__well {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 5 / 4;
	margin: 0 0 10px;
	background: #fff;
	border-radius: 5px;
	overflow: hidden;
}

.io-alts__well img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.io-alts__name {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	color: #111;
}

.io-alts__meta {
	margin-top: 3px;
	font-size: 12px;
	line-height: 1.4;
	color: #767676;
}

/* margin-top auto pins the price to the bottom of the card, so a two line name
   beside a one line name does not leave the prices on different rows. */
.io-alts__pricerow {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px;
	margin-top: auto;
	padding-top: 10px;
}

.io-alts__price {
	font-size: 15px;
	font-weight: 700;
	color: #111;
}

/* wc_price() prints its own span, which the theme styles for the tiles. Inside
   a card it should be the card's own type and nothing else. */
.io-alts__price .woocommerce-Price-amount {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}

.io-alts__delta {
	font-size: 12px;
	font-weight: 700;
	color: #767676;
}

.io-alts__stock {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 6px;
	font-size: 12px;
	font-weight: 700;
	color: #007811;
}

.io-alts__all {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin-top: 14px;
	font-size: 14px;
	font-weight: 700;
	color: #007811;
	text-decoration: none;
}

.io-alts__all:hover,
.io-alts__all:focus-visible {
	color: #007811;
	text-decoration: underline;
}

@media (max-width: 600px) {
	.io-alts {
		padding: 14px;
	}

	/* Two up, not one. A single column would put the signup panel four cards
	   down the page, and the panel is what Phil asked to be high up. */
	.io-alts__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}
}