/* Sold out -- the 86 control, on the kitchen page and on the Ordering screen.
 *
 * ITS OWN FILE RATHER THAN LINES IN `kitchen.css`, for the reason the brief
 * gives: `notice-system` is in flight across `order.css` and the templates, and
 * a new file is the one change two branches cannot collide in. It is also the
 * only stylesheet in this plugin that has to work in two places at once -- a
 * tablet on the front end and wp-admin -- so it carries its own copies of the
 * tokens rather than assuming `kitchen.css` loaded first.
 *
 * THE STATE COLOURS ARE KITCHEN V4'S, WITH NO FIFTH ONE. Amber is "slowed,
 * something is not as it should be", which is what a sold-out row is; green is
 * "all clear", which is what pressing Back on makes it. Red belongs to the
 * pause and is not borrowed here: a dish being off is not the shop stopping,
 * and a page that says both in the same colour has stopped saying either.
 * Colour goes on a band and on a filled button, always with the word beside it.
 *
 * NOTHING UNDER 17px AND NO TARGET UNDER 48px on the kitchen page, the same
 * rule as the rest of that screen and the same reason: it is pressed with a
 * thumb, beside a printer, during a rush. `.oo-soldout--office` is wp-admin,
 * where a 56px button beside WordPress's own 30px ones would read as a mistake,
 * so the tokens shrink and only there.
 */

.oo-soldout {
	--oo-soldout-gap: var(--oo-s4, 16px);
	--oo-soldout-tight: var(--oo-s2, 8px);
	--oo-soldout-radius: var(--oo-btn-radius, 9px);

	/* 48px at 390 to 56px on a tablet, the kitchen page's own button height. */
	--oo-soldout-btn-h: clamp(48px, 39.7px + 2.12vw, 56px);
	--oo-soldout-btn-size: clamp(18px, 15.9px + 0.53vw, 20px);
	--oo-soldout-name-size: clamp(18px, 13.9px + 1.06vw, 22px);
	--oo-soldout-quiet-size: clamp(17px, 14.9px + 0.53vw, 19px);
	--oo-soldout-h2-size: clamp(19px, 17px + 0.5vw, 22px);
	/* THE GROUP HEADING IS THE KITCHEN PAGE'S OWN h2, NOT A STEP UNDER IT.
	   Ryan, 16 September 2026, choosing between four demos: "My preference is
	   G, but I want the group headings to be more pronounced." G's headings
	   were quiet labels on the ground and the complaint is the one he made
	   about the Busy and Pause headings a day earlier -- they blended into the
	   text. So a category heading now wears exactly what `.oo-kitchen__heading`
	   wears, through the same tokens: a site that retunes the kitchen page's
	   headings retunes these in the same breath, which is the whole reason that
	   token exists. */
	/* A LABEL DOES NOT GROW WITH THE VIEWPORT the way a heading does: 17 at a
	   phone's width and 18 at a tablet's, against the sub-heading's 17 to 19 and
	   the h2's 19 to 22. At 1024 that is 22 / 19 / 18, three sizes for three
	   levels; at 390 the floor this page does not cross puts the last two both
	   at 17, and weight and colour carry that step alone. */
	--oo-soldout-group-size: clamp(17px, 15.9px + 0.28vw, 18px);
	--oo-soldout-group-weight: 600;
	--oo-soldout-group-above: var(--oo-s4, 16px);
	--oo-soldout-group-ink: var(--oo-soldout-quiet);

	/* THE SUB-SECTION HEADING: ONE STEP UNDER THE PAGE'S h2 AND TWO ABOVE A
	   LIST LABEL. Ryan, 16 September 2026, of the section as it shipped an hour
	   earlier: "Problems with hierarchy. Everything in this screenshot is under
	   the 'Sold Out' heading but visually it doesn't look that way. All
	   subheadings are equally strong and there's even a separator line before
	   Choices."

	   He was right and the cause was this file: the group headings had been
	   given the page's own h2 treatment to make them pronounced, and "Choices"
	   already had it, so three different levels were all drawing at 700 in ink
	   at the same size. Now there are three sizes and three weights, and the
	   only rule left on the page is the one nobody complained about.

	   0.85 OF THE h2, FLOORED AT 17. The page's h2 is 19 to 22; 0.85 of 19 is
	   16.15, which is under the floor this page does not cross, so the clamp
	   starts at 17 and reaches 19 where there is room. `--oo-kitchen-h3-size`
	   does not exist on the kitchen page today; it is read first so that the day
	   it does, this follows it. */
	--oo-soldout-sub-size: var(--oo-kitchen-h3-size, clamp(17px, 14.6px + 0.62vw, 19px));
	--oo-soldout-sub-weight: var(--oo-kitchen-h3-weight, 700);
	--oo-soldout-sub-above: var(--oo-s5, 20px);

	/* The row card: A's shape, which is what "reads much better at a glance"
	   meant, at the page's own small radius. */
	--oo-soldout-card-radius: var(--oo-s1, 4px);
	--oo-soldout-card-pad: var(--oo-s3, 12px);
	--oo-soldout-card-gap: var(--oo-s2, 8px);
	--oo-soldout-card-shadow: 0 1px 2px rgba(22, 24, 28, 0.06);
	--oo-soldout-sunk: var(--oo-sunk, #f7f8f9);
	/* THE BAND DOWN THE SIDE OF A SOLD-OUT CARD IS 6px, WHICH IS THE STATUS
	   CARD'S OWN BAND turned through ninety degrees: the same signal in the
	   same colour on the same page, and a thinner one would read as a border.
	   It replaced `--oo-soldout-band`, which drew the same six pixels across
	   the top. */
	--oo-soldout-band-w: 6px;

	--oo-soldout-off: var(--oo-kitchen-busy, var(--oo-warn, #b45309));
	--oo-soldout-on: var(--oo-kitchen-open, var(--oo-open, #1a7f4b));
	--oo-soldout-ink: var(--oo-ink, #16181c);
	--oo-soldout-quiet: var(--oo-muted, #565c66);
	--oo-soldout-line: var(--oo-line, #dfe3e8);
	--oo-soldout-ground: var(--oo-ground, #fff);

	margin-block: 0 var(--oo-s6, 24px);
	color: var(--oo-soldout-ink);
	font-size: var(--oo-soldout-quiet-size);
}

.oo-soldout__heading {
	margin: var(--oo-kitchen-h2-above, var(--oo-s2, 8px)) 0 var(--oo-s1, 4px);
	font-size: var(--oo-soldout-h2-size);
	font-weight: 700;
	line-height: 1.25;
}

.oo-soldout__hint,
.oo-soldout__none,
.oo-soldout__cancel {
	margin: 0 0 var(--oo-soldout-gap);
	color: var(--oo-soldout-quiet);
	font-size: var(--oo-soldout-quiet-size);
}

/* ---------- what is off right now, at the top ---------- */

.oo-soldout__off,
.oo-soldout__list {
	margin: 0 0 var(--oo-soldout-gap);
	padding: 0;
	list-style: none;
}

/* EVERY ROW IS A CARD, ON A GROUND THAT IS NOT WHITE. Four treatments were
   built as bench-only stylesheets on 16 September 2026 and shot side by side;
   this is G, which is A's card with B's weight and band. Ryan on the list
   before it: "I also feel like the items in the kitchen pages sold out menu
   blend into the background too much, I'd like them to stand out slightly
   more." A white row on a white page has only its border to say it is a thing;
   a white card on the sunk ground is a thing before it is read. */
.oo-soldout__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--oo-soldout-tight);
	align-items: center;
	justify-content: space-between;
	padding: var(--oo-soldout-card-pad);
	border: 1px solid var(--oo-soldout-line);
	border-radius: var(--oo-soldout-card-radius);
	background: var(--oo-soldout-ground);
	box-shadow: var(--oo-soldout-card-shadow);
}

.oo-soldout__row + .oo-soldout__row {
	margin-block-start: var(--oo-soldout-card-gap);
}

/* A CLASS BEATS `[hidden]`, AND THAT IS HOW THE SEARCH CAME TO DO NOTHING.
   `hidden` gets its `display: none` from the browser's own stylesheet, which
   every author rule outranks -- so `.oo-soldout__row { display: flex }` quietly
   put every row back on screen while the script was faithfully setting the
   attribute. Measured on bench-c, 16 September 2026: the DOM said nineteen rows
   of forty-six were showing and the screenshot showed all forty-six. Anything
   that gives a row a `display` has to say this too. */
.oo-soldout__row[hidden] {
	display: none;
}

/* THE BAND GOES DOWN THE LEFT EDGE, INSIDE THE CARD'S CORNERS, and it took a
   demo to get there. Ryan, 15 September 2026, of a left border on the status
   card: "just one side of the notification which is a pattern I think is ugly
   for its asymmetry" -- which is why this was a full-width band across the top
   until now. A CARD is a different object from a notification: the band is not
   an edge treatment on a box, it is a marker on a stack of cards, and it reads
   down the run at a glance in a way a top stripe on each one does not. Shot
   both ways on 16 September 2026; he picked this one.

   `overflow: hidden` IS WHAT KEEPS IT A CARD. Without it the strip squares off
   the two left corners, and the rows that square off are exactly the rows that
   matter most. The row keeps its ordinary border colour: the band is the
   signal, and a second amber on the outline would be the same thing said
   twice. */
.oo-soldout__row--off {
	position: relative;
	padding-inline-start: calc(var(--oo-soldout-card-pad) + var(--oo-soldout-band-w));
	overflow: hidden;
}

.oo-soldout__row--off::before {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: var(--oo-soldout-band-w);
	background: var(--oo-soldout-off);
}

.oo-soldout__dish {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	flex: 1 1 12rem;
}

/* 700, WHICH IS THE ONE THING THE FLAT-LIST DEMO HAD THAT THE CARD DEMO DID
   NOT. On a list somebody is scanning for one word, the dish name should be the
   heaviest thing on the line and the category the lightest. */
.oo-soldout__name {
	font-size: var(--oo-soldout-name-size);
	font-weight: 700;
	line-height: 1.25;
}

/* ---------- the dish, its category, and when it comes back ----------

   Ryan, 16 September 2026: "I'd like the sold out items in the kitchen menu to
   also list their category. I worry about things getting cramped so hopefully
   this can be handled tastefully." The list at the top is flat and newest
   first -- it is a list of events, not of menu -- so without the category
   "Carnitas" at the top of the page is a taco, a plate and a torta filling at
   once, while the picker below says which under a heading.

   TWO FORMS, ONE BREAKPOINT, MEASURED AT BOTH. Beside the name behind a middle
   dot from 560px up, where the pair fits on one line with room to spare; on the
   line under it below that, where it would otherwise push the dish name into a
   second line -- and the name wrapping to make room for the category is exactly
   the cramped thing the request was about. The dot is drawn by the stylesheet
   and only in the form that uses it, so a wrapped line never starts with a
   floating separator. */
.oo-soldout__title {
	display: block;
	min-width: 0;
}

.oo-soldout__cat {
	/* A BLOCK, SO THE NARROW FORM IS ACTUALLY THE NARROW FORM. `display: block`
	   on the wrapper alone was not enough: two inline spans inside a block flow
	   onto one line whenever they fit, and the separator is only drawn in the
	   wide form -- so at 390 and at 520 the row read "Carnitas Platos", one
	   name with a grey word after it, which is the cramped thing this was
	   supposed to avoid. Measured on bench-b, 16 September 2026: name
	   33..98, category 104..150, same line, no dot. The media query below puts
	   it back on the name's line, with the dot, from 560px up. */
	display: block;
	color: var(--oo-soldout-quiet);
	font-size: var(--oo-soldout-quiet-size);
	font-weight: 400;
	line-height: 1.3;
}

@media (min-width: 560px) {
	.oo-soldout__title {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.45em;
	}

	.oo-soldout__cat {
		display: inline;
	}

	.oo-soldout__cat::before {
		content: "\00b7";
		margin-inline-end: 0.45em;
	}
}

/* WHEN IT COMES BACK IS INK AND NOT COLOUR. The band already says the state;
   putting the state on the text as well would be colour doing a second job and
   would leave the sentence unreadable to anybody who cannot see the difference.
   Grey is fine here, small is not -- 17px is the floor on this page. */
.oo-soldout__back {
	color: var(--oo-soldout-quiet);
	font-size: var(--oo-soldout-quiet-size);
	line-height: 1.3;
}

.oo-soldout__act {
	margin: 0;
	flex: 0 0 auto;
}

/* ---------- the buttons ---------- */

.oo-soldout__btn {
	min-height: var(--oo-soldout-btn-h);
	padding-inline: var(--oo-s3, 12px);
	border: 1px solid var(--oo-soldout-line);
	border-radius: var(--oo-soldout-radius);
	background: var(--oo-soldout-ground);
	color: var(--oo-soldout-ink);
	font-family: inherit;
	font-size: var(--oo-soldout-btn-size);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	/* A press on a phone must not also select the label under the thumb. */
	-webkit-user-select: none;
	user-select: none;
}

/* BACK ON IS FILLED GREEN BECAUSE PRESSING IT MAKES THE DISH GREEN. The rule
   for the whole page is Ryan's: a button shows the OUTCOME, not the state. */
.oo-soldout__btn--on {
	border-color: var(--oo-soldout-on);
	background: var(--oo-soldout-on);
	color: #fff;
}

/* AND SOLD OUT IS OUTLINED AMBER, not filled, for the reason the pause
   durations are outlined red: on a menu where everything is available it is the
   thing you hope not to press. */
.oo-soldout__btn--off {
	border-color: var(--oo-soldout-off);
	color: var(--oo-soldout-off);
}

/* THE THEME PAINTS `button:focus` AND IT IS NOT OURS TO INHERIT. GeneratePress
   fills a focused button with its own dark accent at 0,1,1 -- one more than the
   single class above -- so the moment the script moved focus to "Rest of today"
   the default duration turned into a black slab beside two outlined amber ones,
   and it read as the pressed one. Measured on bench-b at 390, 16 September
   2026: `rgb(63,63,63)` on white text. Two classes take it back; the ring below
   is what says where focus is. */
.oo-soldout .oo-soldout__btn:focus,
.oo-soldout .oo-soldout__btn:hover {
	background: var(--oo-soldout-ground);
	color: var(--oo-soldout-ink);
}

.oo-soldout .oo-soldout__btn--on:focus,
.oo-soldout .oo-soldout__btn--on:hover {
	background: var(--oo-soldout-on);
	color: #fff;
}

.oo-soldout .oo-soldout__btn--off:focus,
.oo-soldout .oo-soldout__btn--off:hover {
	color: var(--oo-soldout-off);
}

.oo-soldout__btn:focus-visible,
.oo-soldout__input:focus-visible,
.oo-soldout__cancel a:focus-visible {
	outline: 3px solid var(--oo-brand, var(--oo-soldout-ink));
	outline-offset: 2px;
}

/* ---------- the duration question ---------- */

.oo-soldout__ask {
	/* THE PADDING AND THE BORDER ARE INSIDE THE WIDTH. GeneratePress does not
	   set a universal `box-sizing`, so a `flex-basis: 100%` block with 12px of
	   padding measured 332px inside a 324px row -- eight pixels out through the
	   right edge of the scroller, with the third duration button clipped.
	   Measured on bench-b at 390, 16 September 2026. */
	box-sizing: border-box;
	margin-block-end: var(--oo-soldout-gap);
	padding: var(--oo-s3, 12px);
	border: 1px solid var(--oo-soldout-off);
	border-radius: var(--oo-soldout-radius);
}

.oo-soldout__asking {
	margin: 0 0 var(--oo-soldout-tight);
	font-size: var(--oo-soldout-name-size);
	font-weight: 600;
	line-height: 1.25;
}

/* THE THREE DURATIONS STACK AND DO NOT WRAP. "Until I turn it back on" is the
   longest label on this control by some way, and a row that fits it beside two
   others is a row of three labels in six-point type. Full width each, in the
   order they are offered, with the default first. */
.oo-soldout__steps {
	display: grid;
	gap: var(--oo-soldout-tight);
	margin: 0 0 var(--oo-soldout-tight);
}

.oo-soldout__steps .oo-soldout__btn {
	width: 100%;
}

/* CANCEL IS A TARGET, NOT A LINE OF TEXT. It measured 56 by 24 on the first
   pass, on a page whose every other control is 48 to 56 tall -- and it is the
   control somebody reaches for after tapping the wrong dish, which is the
   moment a thumb is least accurate. It stays quiet (no fill, no border) and
   takes the height. */
.oo-soldout__cancel {
	margin: 0;
}

/* AND IT IS QUIET INK, NOT THE THEME'S LINK BLUE. The page's rule is four state
   colours and no fifth one; a blue Cancel under three amber buttons was a fifth
   colour arriving through the theme's `a` rule rather than through a decision.
   Two classes for the same reason the search field needs them. */
.oo-soldout .oo-soldout__cancel a {
	display: inline-flex;
	align-items: center;
	min-height: var(--oo-soldout-btn-h);
	padding-inline: var(--oo-s3, 12px);
	color: var(--oo-soldout-quiet);
	font-size: var(--oo-soldout-btn-size);
	font-weight: 600;
	text-decoration: underline;
}

/* THE QUESTION, OPENED UNDER THE ROW IT IS ABOUT. Ryan, 16 September 2026: "I
   notice the page seems to reload and I have to scroll back down to select how
   long I want to keep the item sold out for, which adds a small amount of
   friction for every sold out action." It is the same block as the no-script
   screen with the same three buttons in the same order; what changes is where
   it is -- full width on its own line inside the row, so the dish it belongs to
   is directly above it and nothing else has moved. */
.oo-soldout__ask--inline {
	flex: 1 0 100%;
	margin-block: var(--oo-soldout-tight) 0;
	margin-block-end: 0;
}

/* Cancel is a `<button>` here and an `<a>` on the no-script screen, because
   there is nothing to navigate to. It is the same control and wears the same
   rule. */
.oo-soldout .oo-soldout__cancel button {
	display: inline-flex;
	align-items: center;
	min-height: var(--oo-soldout-btn-h);
	padding-inline: var(--oo-s3, 12px);
	border: 0;
	background: none;
	color: var(--oo-soldout-quiet);
	font-family: inherit;
	font-size: var(--oo-soldout-btn-size);
	font-weight: 600;
	text-decoration: underline;
	cursor: pointer;
}

.oo-soldout .oo-soldout__cancel button:focus-visible {
	outline: 3px solid var(--oo-brand, var(--oo-soldout-ink));
	outline-offset: 2px;
}

/* WHAT THE SWAP SAYS OUT LOUD. A fetch that replaces two lists moves nothing a
   screen reader is watching, so the outcome is announced from here. It is a
   live region and not a message on screen -- the row itself is the visible
   answer -- so it takes no space and is not hidden with `display: none`, which
   would take it out of the accessibility tree along with the announcement. */
.oo-soldout__said {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

/* ---------- the search ---------- */

.oo-soldout__find {
	display: flex;
	flex-wrap: wrap;
	gap: var(--oo-soldout-tight);
	align-items: center;
	margin: 0 0 var(--oo-soldout-gap);
}

.oo-soldout__label {
	flex: 1 0 100%;
	font-size: var(--oo-soldout-quiet-size);
	font-weight: 600;
}

/* TWO CLASSES, NOT ONE, AND THE REASON IS THE THEME. GeneratePress styles bare
   controls with `input[type="search"]` -- 0,1,1 -- which beats a single class at
   0,1,0, so the field arrived wearing the theme's own grey fill and grey ink.
   This is the third field in this plugin to meet that rule (the sidebar search
   and the item note are the other two) and it takes the same answer: 0,2,0. */
.oo-soldout .oo-soldout__input {
	flex: 1 1 12rem;
	min-height: var(--oo-soldout-btn-h);
	padding: var(--oo-soldout-tight) var(--oo-s3, 12px);
	border: 1px solid var(--oo-soldout-line);
	border-radius: var(--oo-soldout-radius);
	background: var(--oo-soldout-ground);
	color: var(--oo-soldout-ink);
	font-family: inherit;
	/* 17px IS ALSO THE iOS ZOOM FLOOR. Safari zooms the whole page in on a
	   focused field under 16px, and on this page that means a cook loses the
	   list they were searching. The kitchen page's own floor already covers it;
	   it is written down here because a future edit to the token would not. */
	font-size: var(--oo-soldout-quiet-size);
}

/* THE LIST IS SCROLLABLE RATHER THAN ENDLESS. Forty-eight dishes is four
   screens at 390, and the search box above it is what a cook actually uses --
   but the list has to be reachable without one, so it scrolls in place instead
   of pushing Sign out off the bottom of the world.

   THE BOX IS NOW THE WHOLE GROUPED RUN AND NOT ONE `<ul>`. Since 16 September
   2026 the picker is one scroller holding every category, so a heading scrolls
   with the dishes under it; a scroller per category would be eight little
   windows, each with its own scrollbar, on a screen that is already a list. */
.oo-soldout__scroll {
	max-height: 24rem;
	padding: var(--oo-soldout-card-gap);
	border: 1px solid var(--oo-soldout-line);
	border-radius: var(--oo-soldout-radius);
	/* THE GROUND THE CARDS SIT ON. It is the panel that makes a white card a
	   card; on the page's own white the same rows are a ruled list with extra
	   borders. */
	background: var(--oo-soldout-sunk);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* THE SAME PANEL WITHOUT THE CAP, for a run that is short by construction. The
   dish list is forty-eight rows and is capped so the section does not run off
   the screen; the choices under it are two to seven rows per field and a 24rem
   window around four of them is a box with nothing in it.

   THE OFFICE COPY TOO (brief delivery-followups, 10 Oct 2026). The desk cap
   below, `.oo-soldout--office .oo-soldout__scroll`, is two classes and
   outranked this one, so on the Ordering screen the choices panel got the
   18rem cap AND `overflow: visible`: its rows drew over Rewards and "Fees
   shown to customers", and the WordPress footer landed mid-page. Three
   classes for the desk copy, so it outranks that cap wherever the two sit in
   this file: the open panel grows with its rows wherever it is drawn. */
.oo-soldout__scroll--open,
.oo-soldout--office .oo-soldout__scroll.oo-soldout__scroll--open {
	max-height: none;
	overflow-y: visible;
}

/* ---------- the menu's own categories, as headings ----------

   Ryan, 16 September 2026, of the flat alphabetical run: "if I understand
   correctly the options are mixed in with the dishes in the list right? That
   seems like not the right organizational choice." Nothing was mixed in -- the
   list held the menu's dishes and nothing else -- but alphabetical put Draft
   Beer between Chile Verde and Enchiladas, which is a list that reads like one.
   The headings are the menu's categories in the menu's order, and they are the
   kitchen page's heading: same weight, same colour, one step under the section
   title, which is what an h3 under an h2 should look like anywhere. */
/* IT SITS ON THE GROUND, NOT ON A CARD, AND IT IS A LABEL RATHER THAN A
   HEADING OF THE PAGE. No rule under it: the rule read as the top edge of the
   stack below it, which is the one thing a heading over a stack must not do.
   What separates the groups is air -- `--oo-s4` above each.

   IT WAS THE PAGE'S h2 FOR ONE RELEASE AND THAT WAS THE MISTAKE. Making it
   pronounced was right; making it AS pronounced as "Sold out" and "Choices"
   left three levels drawing the same. Quiet ink at 600 and the page's own
   floor size is a label of a list: it is still the heaviest thing on the sunk
   ground, and it is plainly under the sub-heading above it. */
.oo-soldout__cathead {
	margin: var(--oo-soldout-group-above) 0 var(--oo-soldout-card-gap);
	padding: 0;
	border: 0;
	color: var(--oo-soldout-group-ink);
	font-size: var(--oo-soldout-group-size);
	font-weight: var(--oo-soldout-group-weight);
	line-height: 1.25;
}

/* The first heading sits against the top of the panel, where the padding is
   already the air it needs. */
.oo-soldout__group:first-child .oo-soldout__cathead,
.oo-soldout__scroll > .oo-soldout__group:first-of-type .oo-soldout__cathead {
	margin-block-start: var(--oo-s1, 4px);
}

/* A GROUP WHOSE ROWS ARE ALL FILTERED OUT GOES WITH THEM, heading included:
   `hidden` is stated rather than relied on for the reason the row below it
   says. */
.oo-soldout__group[hidden] {
	display: none;
}

.oo-soldout__group .oo-soldout__list {
	margin-block-end: 0;
}

/* ---------- wp-admin ---------- */

/* THE OFFICE COPY IS THE SAME CONTROL AT DESK SIZE. Only the tokens move: no
   clamp, no 56px targets, and a measure so the rows do not run the width of a
   1920 monitor. Every rule above is untouched, which is the point of the
   section being one renderer. */
.oo-soldout--office {
	--oo-soldout-btn-h: 36px;
	--oo-soldout-btn-size: 14px;
	--oo-soldout-name-size: 15px;
	--oo-soldout-quiet-size: 13px;
	--oo-soldout-h2-size: 1.3em;
	/* The desk copy takes the same STEP the tablet takes -- the group heading
	   is the section heading's size -- at wp-admin's scale rather than a
	   thumb's, and the kitchen tokens are deliberately not read here: they are
	   sized for a tablet propped by a printer. */
	--oo-soldout-group-size: 1em;
	--oo-soldout-group-weight: 600;
	--oo-soldout-group-above: var(--oo-s3, 12px);
	--oo-soldout-sub-size: 1.15em;
	--oo-soldout-sub-above: var(--oo-s4, 16px);
	--oo-soldout-card-pad: var(--oo-s2, 8px);
	--oo-soldout-card-gap: var(--oo-s1, 4px);
	--oo-soldout-card-shadow: none;
	--oo-soldout-band-w: 4px;

	max-width: 46rem;
	margin-block: 2em 1em;
}

.oo-soldout--office .oo-soldout__scroll {
	max-height: 18rem;
}

/* ---------- the Choices group (stage 2) ---------- */

/* ONE CONTROL AND NOT TWO, WHICH IS WHAT THESE RULES ARE FOR. `inc/sold-out-
   options.php` draws the choices with the SAME row, button and name classes as
   the dishes above them, so everything in this stylesheet already applies and
   the only new rules are the two headings and the tick. A second set of row
   styling would be a second thing to keep in step, and the kitchen page is the
   one screen in this project where two controls looking slightly different
   would read as two controls doing different things. */

/* STATED, NOT INHERITED, FOR THE REASON THE ROW ABOVE STATES: `hidden` gets its
   `display: none` from the browser's own stylesheet and any author rule outranks
   it. This element has no `display` of its own today, which is exactly the shape
   the search bug of 16 September 2026 had before a rule arrived under it. */
.oo-soldout__choices[hidden],
.oo-soldout__group[hidden] {
	display: none;
}

/* TWO SUB-SECTIONS AT THE SAME LEVEL, SEPARATED BY AIR AND NOTHING ELSE.
   Ryan: "there's even a separator line before Choices" -- a rule between two
   things at the same level says they are different KINDS of thing, and these
   are the same kind: a list of things a kitchen can turn off. `--oo-s5` above
   each is the separation, and the first one needs none because the search box
   is directly above it. */
.oo-soldout__sub + .oo-soldout__sub,
.oo-soldout__choices {
	margin-block-start: var(--oo-soldout-sub-above);
	padding-block-start: 0;
	border-block-start: 0;
}

.oo-soldout__subheading {
	margin: 0 0 var(--oo-s1, 4px);
	color: var(--oo-soldout-ink);
	font-size: var(--oo-soldout-sub-size);
	font-weight: var(--oo-soldout-sub-weight);
	line-height: 1.25;
}

/* The hint under a sub-heading belongs to it, so it sits tight under the words
   rather than in the middle of the gap. */
.oo-soldout__subheading + .oo-soldout__hint {
	margin-block-end: var(--oo-soldout-card-gap);
}

/* THE TWO CLASSES THIS GROUP USED TO HAVE ARE GONE, 16 September 2026, and
   that is the change rather than a tidy-up. `.oo-soldout__field` was a quiet
   17px title and `.oo-soldout__choice-list` was a bordered list of its own, so
   the Choices group was organised like the dish list but did not look like it.
   Ryan: "I want the choices to be more like how the dishes handles categories."
   A field title is to a choice exactly what a category is to a dish -- the word
   the customer reads above the same list on the card -- so it is now
   `.oo-soldout__cathead` over `.oo-soldout__list` inside
   `.oo-soldout__scroll--open`, which is the dish list's own three classes with
   the height cap taken off. One set of rules, one look, and a change to the
   heading lands in both places at once.

   The list reset the old class carried is not lost with it: `.oo-soldout__off,
   .oo-soldout__list` zero the 40px of `padding-inline-start` a `<ul>` gets from
   the browser's own stylesheet, and that is the rule these rows now use. */

/* THE TICK IS A FULL-WIDTH ROW ABOVE THE DURATION BUTTONS, and it is 48px tall
   like everything else on this page: it is pressed with a thumb, and a 13px
   checkbox beside three 56px buttons is the one control on the screen a cook
   would miss. The label is the target, which is what the `for` is doing. */
.oo-soldout__also {
	display: flex;
	flex-basis: 100%;
	align-items: center;
	gap: var(--oo-soldout-tight);
	min-height: var(--oo-soldout-btn-h);
	margin: 0 0 var(--oo-soldout-tight);
}

.oo-soldout__tick {
	flex: 0 0 auto;
	width: 1.5em;
	height: 1.5em;
	margin: 0;
	accent-color: var(--oo-soldout-off);
}

.oo-soldout__also-label {
	font-size: var(--oo-soldout-quiet-size);
	line-height: 1.3;
	cursor: pointer;
}

/* A CHOICE ROW IN THE "off right now" LIST IS THE SAME AMBER AS A DISH ROW and
   carries no second colour: it is the same state, said about a smaller thing,
   and the "(choice)" in the name is what tells them apart. */
.oo-soldout--office .oo-soldout__also {
	min-height: 0;
	margin-block: 0.4em 0.6em;
}

.oo-soldout--office .oo-soldout__tick {
	width: 1.2em;
	height: 1.2em;
}

/* At a desk the category always fits beside the name, so the middle dot is the
   only form this copy of the control uses. */
.oo-soldout--office .oo-soldout__title {
	display: flex;
}

.oo-soldout--office .oo-soldout__cat {
	display: inline;
}

.oo-soldout--office .oo-soldout__cat::before {
	content: "\00b7";
}

/* -------------------------------------------------------------------------
 * The card a customer meets
 * ---------------------------------------------------------------------- */

/* WHAT THIS SECTION IS FOR, MEASURED BEFORE IT WAS WRITTEN. bench-b, theme
 * chrome, 16 September 2026, one dish off: the card was pixel for pixel the
 * card of a dish on sale. No chip, no grey, full-contrast text, the photograph
 * at full colour, and an Add button that was in the tab order and took a press.
 * The only thing Orderable says out loud for the state is the button's own
 * label -- relabelled "Sold out" by `inc/menu-tweaks.php` -- and this build
 * styles that button as a 38px icon square at `font-size: 0`, so the word was
 * set in type nobody can read. What was left was the vendor's
 * `background: transparent !important` letting the photograph through a pale
 * outline, with the plus still in it. Ryan: "When sold out the disabled add
 * button on the item card looks messed up."
 *
 * THREE THINGS, AND THE CHIP IS THE ONE THAT CARRIES THE MEANING. Colour and
 * grey are how it looks at a glance; the word is how it reads to somebody who
 * cannot see either, and since 23 September 2026 it is on the photograph --
 * the block above `.oo-card__soldout` below says why it moved and what it cost
 * where it was.
 *
 * TEXT CONTRAST IS NOT REDUCED ANYWHERE HERE. The photograph desaturates and
 * the Add control greys; the name, the description and the price stay exactly
 * as legible as on any other card, because a dish a customer cannot order today
 * is one they may well be reading about for tomorrow. */

/* ---------- THE CHIP, AND THE TWO PLACES THE CARD HAS FOR IT ----------
 *
 * Ryan, 23 September 2026 (`research/kitchen-style/ryan-menu-soldout-chip-2026-09-23.png`):
 * "I don't like the sold out chip going above the title of the menu item.
 * Ideally the sold out message wouldn't even change the card shape while also
 * not covering information that's important to the customer."
 *
 * BOTH HALVES OF THAT WERE TRUE OF THE CHIP AS IT SHIPPED. It was printed
 * between the price and the Add button, and `order.css` puts the card's two
 * wrappers on `display: contents` and orders the real parts by hand -- title 1,
 * price 6, description 3, Add 4 -- so a new child with no `order` of its own
 * landed FIRST and took a row of its own above the dish name. Measured on
 * bench-e under theme chrome at 390px: the sold-out list card stood 170.8px
 * against its own 152px on sale, and the title, the description and the price
 * were each 18.8px further down the page.
 *
 * SO THE CHIP GOES ON THE PHOTOGRAPH. It is the one surface on this card that
 * covers nothing: it is already drawn greyscale when the dish is off (below),
 * it already carries the Add button in its bottom-right corner and the allergen
 * (i) in its top-right, and it carries no words. Absolutely positioned, it is
 * out of flow, so the title, the description, the price and the card's height
 * are the ones the card has on sale -- not nearly, exactly.
 *
 * AND IT IS A BADGE, by the rule DESIGN-CONVENTIONS.md settled on 16 and 23
 * September: the small type token, two or three pixels of vertical padding, the
 * pale tint of its tone, ALWAYS the 1px hairline, fully rounded, no hover.
 * WITH NO DOT, which is the one thing it drops from that recipe and the reason
 * is in the recipe itself -- the dot is there so a state said in colour is also
 * said in shape, and this badge says its state in the word. A dot before "Sold
 * out" is the same claim twice in six pixels.
 *
 * THE TINT IS OPAQUE AND THAT IS THE WHOLE OF WHY IT READS ON ANY PICTURE. A
 * translucent chip over a photograph is the fault Ryan named of the disabled Add
 * on 16 September -- "I'd prefer a different no transparency based way of
 * indicating that they're disabled" -- one step worse, because a photograph is
 * not one colour: the same chip would be legible over the horchata and gone over
 * the mole. An opaque ground makes the word's contrast a property of two
 * constants, and the only thing the picture can still affect is whether the
 * chip's own edge separates from it.
 *
 * AND ON THE PHOTOGRAPH THE BADGE IS INVERTED -- ink ground, page-ground word,
 * page-ground hairline -- which is the one exception in this build and is
 * written down in DESIGN-CONVENTIONS.md as one. The hairline is not dropped
 * there; it changes colour with everything else. Ryan, 23
 * September 2026, of the pale chip shipped that morning: "I think the sold out
 * badge kind of blends in with the black and white image. Not awful though."
 * The card's photograph is drawn greyscale when the dish is off, so a pale grey
 * pill on it is the same family of tone as everything behind it and reads as
 * part of the picture; ink reads as something laid ON the picture. The rule
 * that survives is the one the tint was there for -- the ground is opaque and
 * the word's contrast is a property of two constants -- and it is stronger
 * inverted, not weaker: Lc 106.8 against the tint's 80.9. The photo-less chip
 * in the price row sits on the card's own white and keeps the ordinary badge. */

.oo-card__soldout {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--oo-soldout-chip-line, #d8dce1);
	border-radius: 999px;
	background: var(--oo-soldout-chip-fill, #f1f3f5);
	color: var(--oo-soldout-chip-ink, #4a5058);
	font-size: var(--oo-soldout-chip-size, 0.8125rem);
	font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

/* ---------- on the photograph ----------
 *
 * THE INSET IS THE ALLERGEN (i)'s, not the card's text padding, and the reason
 * is that the chip is not in the text column: it is one of three things on one
 * picture, and the other two are the (i) at `--oo-info-inset` from the top
 * right and the Add at `--oo-btn-inset` from the bottom right. A badge 16px in
 * from a 150px photograph at 390 would sit a tenth of the way across it and
 * line up with nothing. Its own token, so a skin can move it without finding
 * this rule.
 *
 * WHAT IT IS POSITIONED AGAINST, in both layouts that draw a card:
 *
 *   list      `.orderable-product__hero` is `position: relative` (order.css,
 *             the list card block), so top-left is the picture's top-left
 *             whichever side of the card the picture is on -- which is a
 *             setting, `--oo-card-photo-order`.
 *   carousel  the hero is not positioned and `.oo-carousel .orderable-product`
 *             is, and there the picture is the full width of the card at the
 *             top of it, so the two corners are the same corner. This is
 *             exactly how the (i) button above it is already anchored; the chip
 *             is not inventing the arrangement, it is joining it.
 *
 * `z-index: 2` IS THE (i)'s AND THE ADD'S. The picture in the list layout is
 * `position: absolute; inset: 0`, so a chip in the normal stacking order would
 * be painted under it. */

.oo-card__photo .oo-card__soldout,
.oo-card--nophoto .orderable-product__content > .oo-card__soldout {
	--oo-soldout-chip-inset: var(--oo-info-inset, 10px);
	position: absolute;
	top: var(--oo-soldout-chip-inset);
	left: var(--oo-soldout-chip-inset);
	z-index: 2;
	line-height: 1.3;

	/* INVERTED, AND ONLY HERE. The page's ink as the ground and the page's
	   ground as the word, through the site's own two tokens rather than two
	   hex values, so a client whose ink is not near-black gets its own dark
	   pill and not ours. Their own names as well, so a skin can take the
	   exception back without finding this rule. */
	--oo-soldout-chip-photo-fill: var(--oo-ink, #16181c);
	--oo-soldout-chip-photo-ink: var(--oo-ground, #fff);
	background: var(--oo-soldout-chip-photo-fill);
	color: var(--oo-soldout-chip-photo-ink);

	/* THE HAIRLINE CHANGES COLOUR; IT IS NOT REMOVED. Round two took it off on
	   the argument that an ink pill has no edge problem, and the measurement
	   said otherwise: over the darkest photograph on the Sonora menu the ink
	   ground separates from the picture at Lc 0.0 -- the pill disappears into
	   the wood and leaves the word standing on its own. Ryan, on that shot, 23
	   September 2026: take the worker's own suggestion.
	   SO THE RING IS THE PAGE GROUND, the same token the word is set in. A
	   light ring immediately outside a dark ground means the badge always has
	   ONE boundary at full strength against whatever is behind it: on a dark
	   picture the ring carries it (Lc 102 over the michelada) and on a pale one
	   the ground does (Lc 66 over the birria). Neither alone clears a bar at
	   both ends; the pair does, at every photograph on the menu, and
	   `guard.d/950` measures the stronger of the two and holds it to Lc 45.
	   AND THE BOX IS STILL THE SAME BOX. The pixel of padding round two added
	   in place of each border goes back to being the border, so the pill is
	   22.9px tall and exactly as wide as it has been since the chip moved onto
	   the picture -- three rounds of shots that differ in colour and in nothing
	   else. */
	--oo-soldout-chip-photo-ring: var(--oo-ground, #fff);
	border: 1px solid var(--oo-soldout-chip-photo-ring);
	padding: 2px var(--oo-s2, 8px);
}

/* ---------- on a menu with images off: the card's own top-left ----------
 *
 * Ryan, 6 October 2026, of a photo-less card whose price row had wrapped "Sold
 * out" under the price: "Can we put the sold out badge in the same spot it
 * would be on photo items? Why did it get moved when there isn't a photo in
 * the first place? If need be letting it wrap is fine." He approved the
 * mockups the same day ("Yes",
 * /srv/gen/mockups/alcohol-21-mark/chip-spot/INDEX.md). A dish with no image of
 * its own now wears the chip on WooCommerce's placeholder box, exactly as on a
 * photograph (the rule above; `oo_sold_out_card_has_photo()`). A menu with
 * images OFF has no box at all, so the chip goes on the card itself, at the
 * photograph chip's inset, size and look, at the top-left corner (variant A;
 * B, the top-right, landed on the allergen (i) and wrapped names).
 *
 * THE BAND ABOVE THE NAME IS ON EVERY SUCH CARD, SOLD OUT OR NOT, so a dish
 * selling out mid-shop moves nothing: the chip is out of flow and its room was
 * already there. It is padding on the title and not margin, because Orderable
 * Pro sets the title's margin with !important. The arithmetic: the chip's
 * inset plus its box (13px type at 1.3, 2px padding and a 1px ring each side,
 * 22.9px) plus one step, less the card's own top padding (--oo-s4), so the
 * name starts --oo-s2 under the chip: 25px at the default inset. */

:root {
	--oo-soldout-chip-box: 23px;
}

.orderable-products-list--list .oo-card--nophoto,
.oo-carousel .oo-card--nophoto {
	position: relative;
}

.orderable-products-list--list .oo-card--nophoto h3.orderable-product__title,
.oo-carousel .oo-card--nophoto h3.orderable-product__title {
	padding-top: calc(var(--oo-info-inset, 10px) + var(--oo-soldout-chip-box) + var(--oo-s2) - var(--oo-s4));
}

/* ---------- in the drawer: the end of the price bar ----------
 *
 * THE DRAWER'S HOME ONLY, SINCE 6 OCTOBER 2026 (above). Its photograph's
 * top-left corner is the close button, so its chip stays here. What follows
 * was written for every card with no photograph and holds for the drawer's
 * bar unchanged.
 *
 * A MENU WITH THE PICTURES OFF, OR ONE DISH WITHOUT ONE. There is no picture to
 * put a badge on and no free corner to put it in, so it goes at the END of the
 * price row, after the price, on the price's own line -- the one place left on
 * the card where a word can be added without a box moving.
 *
 * WHICH ONLY HOLDS IF THE CHIP IS SHORTER THAN THE LINE THE PRICE SITS ON, so
 * the vertical padding the photograph's copy carries comes off and the leading
 * comes in. The chip's box is then 18.9px -- 13px of type at 1.3 plus its two
 * hairlines -- against a price line of 25.5px in the list card and 22.8px in
 * the carousel's. Measured on bench-e under theme chrome, 23 September 2026, on
 * a fixture dish with no image: the price row is 33.5px and the card 152px with
 * the chip in it and 33.5px and 152px without, at 360, 390 and 1280.
 * `guard.d/950` measures the boxes on every walk rather than trusting the
 * arithmetic, at 390 and at 1280, with a photograph and without.
 *
 * THE WORD NEVER GOES AND THE PADDING IS WHAT GIVES. The sold-out rules say the
 * state is never colour alone, so there is no version of this chip that is a
 * dot or an empty pill; at 360px, where the text column of a list card is at
 * its narrowest, the horizontal padding steps down to `--oo-s1` and the row
 * still does not wrap: at 360 the price box is 128px and the chip's right edge
 * lands at 161.9 of the 169 available, which 8px of padding would not have.
 * `baseline` rather than `middle` so the word sits on the price's own baseline:
 * these are two pieces of one line, not a label beside a number. */

.oo-card__price .oo-card__soldout {
	margin-inline-start: var(--oo-s2, 8px);
	padding: 0 var(--oo-s2, 8px);
	line-height: 1.3;
	vertical-align: baseline;
}

@media (max-width: 400px) {
	.oo-card__price .oo-card__soldout {
		padding-inline: var(--oo-s1, 4px);
	}
}

/* THE PHOTOGRAPH GOES QUIET, NOT AWAY. Greyscale and a little less contrast is
   the difference a customer reads as "not today" from across a table; hiding
   the picture would make the card look broken, and dimming the whole card would
   take the words down with it.

   AND IT IS A FILTER, NOT AN OPACITY, which is the rule the disabled Add button
   below is built on and the one Ryan asked for on 16 September 2026: "I'd
   prefer a different no transparency based way of indicating that they're
   disabled." A translucent photograph has the same fault a translucent button
   has -- what it looks like depends on what is behind it -- and one card should
   not answer the question two ways. There is no `opacity` below 1 anywhere in
   this file, and guard 640 asserts that. */
.oo-card--soldout .orderable-product__image {
	filter: grayscale(1) contrast(0.88) brightness(1.08);
}

/* ---------- ONE DISABLED LOOK, FOR BOTH REASONS A DISH CANNOT BE ADDED ------
 *
 * Ryan, 16 September 2026, of the paused menu: "When paused the add buttons
 * become semi transparent. I don't love this and I'd prefer a different no
 * transparency based way of indicating that they're disabled." The rule he is
 * describing is `order.css`'s `body.oo-ordering-paused ... { opacity: 0.4 }`,
 * and it is the same problem the sold-out card had from the other direction:
 * transparency over a photograph is not a state, it is a smudge, and what it
 * looks like depends entirely on what is behind it.
 *
 * SO THE TWO STATES SHARE ONE LOOK AND IT USES NO OPACITY AT ALL: an opaque
 * sunk ground, a 1px line, no shadow, a muted glyph and `not-allowed`. That is
 * what a disabled control looks like everywhere else on this site, it reads the
 * same on a white card and on the busiest photograph in the gallery, and a
 * customer who meets a paused menu on Monday and a sold-out dish on Tuesday is
 * being taught one thing rather than two.
 *
 * THE GLYPH IS WHAT DIFFERS, because the two states are different sentences.
 * Paused is the pause bars -- the notice set's own glyph, so the button and the
 * banner above it say the same thing in the same shape. Sold out is the plus
 * struck through: the card's own affordance with a line through it, which reads
 * at a glance on the photo edge where the chip at the top of the card is too
 * far away to help.
 *
 * `!important` ON THE GROUND, AND ONLY THERE. Orderable's stylesheet sets
 * `background: transparent !important` on its out-of-stock button and its
 * settings screen prints `.orderable-button:hover { background: ... !important }`
 * into the head. Neither is reachable any other way; everything else here wins
 * on specificity.
 *
 * WHILE THE PAUSE RULE IN `order.css` STILL EXISTS, this overrides it -- the
 * file loads after `order.css` and `opacity: 1` is stated for exactly that
 * reason. That rule should come out of `order.css` on the merge; it is left
 * alone here because another branch is editing that file this week. */

:root {
	/* The notice set's pause glyph, by value rather than by reference: it is
	   defined on `.oo-notice__icon--pause` in `notices.css` rather than on the
	   root, so there is no custom property to point at. Same path, same
	   viewBox, same shape -- if one moves, move both. */
	--oo-soldout-icon-pause: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%20-960%20960%20960%27%3E%3Cpath%20d=%27M520-200v-560h240v560H520Zm-320%200v-560h240v560H200Zm400-80h80v-400h-80v400Zm-320%200h80v-400h-80v400Zm0-400v400-400Zm320%200v400-400Z%27/%3E%3C/svg%3E");
}

.orderable-products-list--list .oo-card--soldout .orderable-product__add-to-order,
.oo-carousel .oo-card--soldout .orderable-product__add-to-order,
.orderable-products-list--list .oo-card--soldout .orderable-product__add-to-order:hover,
.oo-carousel .oo-card--soldout .orderable-product__add-to-order:hover,
body.oo-ordering-paused .orderable-products-list--list .orderable-product__add-to-order,
body.oo-ordering-paused .oo-carousel .orderable-product__add-to-order,
body.oo-ordering-paused .orderable-product__actions-button .orderable-button,
body.oo-ordering-paused .orderable-products-list--list .orderable-product__add-to-order:hover,
body.oo-ordering-paused .oo-carousel .orderable-product__add-to-order:hover {
	opacity: 1;
	border-color: var(--oo-line, #cfd4da);
	background-color: var(--oo-sunk, #f7f8f9) !important;
	background-clip: border-box;
	box-shadow: none;
	cursor: not-allowed;
	/* THE WORD STAYS UNSET IN TYPE, as on the live button (order.css sets the
	   add control to font-size 0 and a transparent colour; the chip carries the
	   word). Orderable's out-of-stock class put the vendor's own 16px back on a
	   WooCommerce-level out-of-stock dish (Sonora's Draft Beer and Tequila, 19
	   Sep 2026), so "Sold out 0" was painted transparent at 16px and the
	   contrast tool measured invisible text at Lc 0. */
	font-size: 0; line-height: 0;
	color: transparent;
}

/* THE GLYPH, GREYED. Two shapes were tried against the photograph on bench-b
   at 1280 on 16 September 2026 and one of them is in the file and the other is
   not: a plus with a stroke through it, which at 16 and at 20 pixels closed up
   into a blot that read as an asterisk, and the plain plus in grey, which reads
   as the Add control with the life gone out of it -- which is exactly what it
   is. The plus stays; the shape a customer already knows does not change, only
   its colour, and the word is carried by the chip and by the grey photograph
   rather than by a 20-pixel drawing. Paused is the one place a different shape
   earns its keep: the pause bars are the glyph on the banner directly above it.

   IT IS `--oo-line-strong` AND NOT `--oo-muted`, because muted is body-text
   grey: at 16px on a sunk ground it came out as dark as the live control and
   the button read as pressable. This is the tone a disabled glyph is drawn in
   everywhere else on the site. */
.orderable-products-list--list .oo-card--soldout .orderable-product__add-to-order::after,
.oo-carousel .oo-card--soldout .orderable-product__add-to-order::after,
body.oo-ordering-paused .orderable-products-list--list .orderable-product__add-to-order::after,
body.oo-ordering-paused .oo-carousel .orderable-product__add-to-order::after {
	color: var(--oo-line-strong, #9aa1ab);
	opacity: 1;
}

body.oo-ordering-paused .orderable-products-list--list .orderable-product__add-to-order::after,
body.oo-ordering-paused .oo-carousel .orderable-product__add-to-order::after {
	-webkit-mask-image: var(--oo-soldout-icon-pause);
	        mask-image: var(--oo-soldout-icon-pause);
	-webkit-mask-size: 68%;
	        mask-size: 68%;
}

/* A DISABLED BUTTON IS NOT A TAB STOP, so this is only ever seen by somebody
   using a pointer on a build where the attribute could not be set. It is here
   so that case is not the one with no focus ring. */
.oo-card--soldout .orderable-product__add-to-order:focus-visible {
	outline: 3px solid var(--oo-brand, var(--oo-ink, #16181c));
	outline-offset: 2px;
}

/* =========================================================================
 * THE MARK ON A CART LINE
 *
 * `oo_sold_out_line_mark()` puts one word after the dish name on every surface
 * that draws a cart: the drawer's mini-cart, which IS the cart in this build,
 * and the checkout's review table. It is the card chip's shape at the card
 * chip's colours, one step smaller, because it sits inside a line of running
 * text rather than on a photograph.
 *
 * EVERY PROPERTY IS SET ON THE SPAN THAT CARRIES THE WORD. Orderable Pro's
 * checkout stylesheet holds `body.woocommerce-checkout * { font-size: 16px;
 * line-height: 1.4 }` and twenty-five more document-level rules, and a rule
 * that matches an element directly beats anything it inherits -- so a size set
 * on the line and inherited by this span would be overwritten on a theme-chrome
 * checkout and not on a bench with minimal chrome. Proved under `oo_chrome=theme`
 * on bench-a, 23 September 2026.
 *
 * `display: inline-block` AND NOT `inline-flex`: the name it follows is inside
 * a `<strong>` in the drawer and a bare text node in the review table, and an
 * inline-block wraps with the sentence instead of forcing its own line when the
 * dish name is long. 390px with "Camarones a la Diabla" is the case.
 * ====================================================================== */
.oo-line__soldout {
	display: inline-block;
	margin-inline-start: var(--oo-s2, 8px);
	padding: 1px var(--oo-s2, 8px);
	border: 1px solid var(--oo-soldout-chip-line, #d8dce1);
	border-radius: 999px;
	background: var(--oo-soldout-chip-fill, #f1f3f5);
	color: var(--oo-soldout-chip-ink, #4a5058);
	font-size: var(--oo-soldout-line-size, 0.75rem);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.01em;
	white-space: nowrap;
	vertical-align: baseline;
}

/* ======================================================================
 * THE WAY OUT, BESIDE THE MARK (25 September 2026)
 *
 * Ryan chose a read-only checkout with one Remove link per sold-out line over
 * a cart editor at the checkout: "I like how the checkout page tells you what
 * sold out", and a customer who has typed a card is not sent back to the menu.
 * So the mark says which line and this says what to do about it, one word
 * apart, inside the same name element.
 *
 * A LINK AND NOT A BUTTON, deliberately. It is a navigation to WooCommerce's
 * own `remove_item` URL with the vendor's nonce on it -- there is no form here
 * and nothing to submit -- and the button tier in `DESIGN-CONVENTIONS.md` is
 * for a control that acts on the page it is on. Underlined, in the line's own
 * ink, which is the one treatment a link gets on this build.
 *
 * QUIETER THAN THE NAME AND NO QUIETER THAN THE MARK. It sits next to a badge
 * at `--oo-soldout-line-size`; a third size in one line of text is a ladder
 * nobody reads. Weight is what separates it from the dish name, which is the
 * rule `DESIGN-CONVENTIONS.md` sets for hierarchy.
 *
 * EVERY PROPERTY ON THE ELEMENT THAT CARRIES THE WORD, the mark's own rule
 * above: Orderable Pro's `body.woocommerce-checkout *` sets a 16px size and a
 * 1.4 line-height on every element of a theme-chrome checkout, and a size set
 * on the line and inherited here would lose to it.
 *
 * THE PADDING IS THE TAP TARGET AND NOTHING ELSE. 4px above and below a 12px
 * word at 1.5 gives a 26px box, which clears WCAG 2.2's 24px minimum for a
 * target inside a line of text. There is no fill, so the padding is invisible
 * until a thumb lands on it.
 * ====================================================================== */
.oo-line__remove {
	display: inline-block;
	margin-inline-start: var(--oo-s1, 4px);
	padding: var(--oo-s1, 4px) var(--oo-s2, 8px);
	color: inherit;
	font-size: var(--oo-soldout-line-size, 0.75rem);
	font-weight: 500;
	line-height: 1.5;
	text-decoration: underline;
	white-space: nowrap;
	vertical-align: baseline;
}

/* ======================================================================
 * THE NOTICE THE LIVE SCRIPT DRAWS, WHERE IT LANDS IN THE DRAWER
 *
 * On the checkout it goes into `.oo-checkout-top`, which `assets/notices.css`
 * already spaces when it has a child, so there is nothing to say here. In the
 * drawer it goes into `.orderable-mini-cart__notices` -- the vendor's own empty
 * div, which has no spacing of its own because on this build nothing has ever
 * been put in it. One margin, and only when it HAS a notice in it, for the same
 * reason the checkout slot draws nothing when empty: a gap at the top of every
 * cart in the fleet for the sake of a sentence almost no cart ever shows.
 *
 * `:first-child` AND NOT A RULE ON THE CONTAINER, so a drawer with an empty
 * notices div is byte-for-byte the drawer it has always been.
 * ====================================================================== */
.orderable-mini-cart__notices .oo-notice:first-child {
	margin-block: var(--oo-s3, 12px);
}

/* The span the script writes the changed lines into. It is text inside a
   sentence and wants nothing of its own except a way to stop a long list
   pushing the notice wider than the drawer. */
.oo-notice__names {
	overflow-wrap: anywhere;
}

/* =========================================================================
 * A SOLD-OUT CHOICE, DRAWN RATHER THAN DROPPED
 *
 * Until 25 September 2026 a sold-out option was taken out of the group before
 * anything drew it. Ryan, that day: "When I mark a choice of meat or whatever
 * menu option as sold out from the kitchen page, it removes it from being
 * visible as an option on the menu. I'd rather it not be selectable but still
 * be visible in a greyed out way so that the user knows that it's normally an
 * option." `inc/sold-out-options.php` now marks the option instead of dropping
 * it; this is the whole of what that looks like.
 *
 * THE LOOK IS RYAN'S, PICKED THE SAME EVENING off five mockups: "Do '5. The row
 * faded' with a strikethrough as well. Make sure the hairline borders don't
 * also get faded."
 *
 * SO THE OPACITY IS ON THE CONTENTS AND NEVER ON THE ROW, and that sentence is
 * the only reason this section is longer than six lines. Orderable Pro draws
 * `.orderable-product-option` with `border-bottom: 2px solid #e6ecef`, and
 * `opacity` on an element fades everything it paints INCLUDING its own border
 * -- so a faded row is a row whose rule between it and the next option goes
 * pale, and a list of seven meats with one pale separator in it reads as a
 * rendering fault rather than as a state. The fade goes on the two boxes that
 * carry the contents: the vendor's label paragraph (which is `flex: 1` and
 * holds the text, the fee pill and our word) and the swatch beside it.
 *
 * EVERY VALUE IS A TOKEN, because Ryan will pick the exact numbers off shots
 * after this lands and the swap has to be CSS only.
 *
 * TWO SELECTORS FOR ONE STATE, and neither is a second implementation of it.
 * `:has()` is the state PHP rendered -- the option carries a visible
 * `.oo-option__state` span, so the row is sold out and the greying is right on
 * the first paint and on a browser with JavaScript off. The class is the same
 * state after `assets/sold-out-live.js` has patched it, on a browser too old
 * for `:has()` and on the live path, where the span's `hidden` comes off and
 * the class goes on together. `:has()` is already load-bearing in
 * `checkout.css` and `kitchen.css` on this build.
 *
 * `pointer-events` IS WHAT ACTUALLY STOPS THE PRESS, and `disabled` on the
 * input is not enough on its own: Orderable Pro binds a click handler to
 * `.orderable-product-fields--visual .orderable-product-option` and sets
 * `checked` on the input with `prop()`, which a disabled input accepts. The
 * flag is still set -- it is what keeps the choice out of the POST -- but the
 * row has to refuse the press as well. Ryan: "No hover tick, no press."
 * ====================================================================== */

:root {
	/* THE FADE. Ryan's number, 25 September 2026. */
	--oo-soldout-choice-opacity: 0.45;
	/* THE LINE THROUGH THE LABEL, at the thickness he asked for. */
	--oo-soldout-choice-strike: 1px;
	/* THE WORD, at the fee pill's size -- which the pill inherits, so this is
	   `1em` rather than a number -- in body-text grey. It is faded with
	   everything else in the row, so the ink is chosen against the ground it
	   ends up on rather than against white. */
	--oo-soldout-choice-word-size: 1em;
	--oo-soldout-choice-word-ink: var(--oo-muted, #565c66);
	/* The air between the name and the word. Until 26 September 2026 it was the
	   air before the word at the right-hand end; the same token doing the same
	   job in the place Ryan moved it to. */
	--oo-soldout-choice-word-gap: var(--oo-s3, 12px);
	/* AND THE ONE SPACE A FLEX CONTAINER EATS. Making the vendor's right-hand
	   cluster a flex line is what puts the word beside the name, and a flex
	   container drops the whitespace-only text nodes between its children --
	   which an inline one renders. The vendor's markup has a newline between
	   the fee pill and its hover tick, so the off row lost one space there and
	   its pill came out 3px right of every other row's. Measured on bench-b at
	   390 and at 1280, 26 September 2026: 3px at both. It is a `gap`, so it
	   also lands between the word and the pill, where the auto margin absorbs
	   it and nothing moves. A token because it is a measurement: change the
	   drawer's font and this is the line to re-measure, and `guard.d/1004`
	   fails to the pixel if nobody does. */
	--oo-soldout-choice-inline-space: 3px;
}

/* The span `oo_sold_out_options_option_state()` prints inside every option. On
   an option that is on sale it is empty and `hidden`, and `[hidden]` has to win
   over anything below it -- `assets/notices.css` makes the same statement for
   the same reason. */
.oo-option__state[hidden] {
	display: none !important;
}

.oo-option__state {
	color: var(--oo-soldout-choice-word-ink);
	font-size: var(--oo-soldout-choice-word-size);
	white-space: nowrap;
}

/* THE TWO SELECTOR SETS ARE TWO RULES AND NOT ONE COMMA LIST, AND THAT IS THE
 * ONLY THING IN THIS SECTION THAT IS NOT OBVIOUS. A comma list is dropped
 * WHOLE by any browser that cannot parse one selector in it -- so a single list
 * carrying both the class and the `:has()` would paint nothing at all on the
 * old iPad this project keeps writing ES5 for, which is the one browser the
 * class was there to serve. Split, an old browser drops the `:has()` rule,
 * keeps the class rule, and gets the look the moment `sold-out-live.js` paints.
 *
 * WHICH ONE DOES THE WORK, AND WHEN. `:has()` is the state PHP rendered: the
 * option carries a visible `.oo-option__state` span, so the row is sold out on
 * the first paint, before any script has run and on a browser with JavaScript
 * off. The class is the same state after the patcher has been -- on an old
 * browser, and on the live path, where the span's `hidden` comes off and the
 * class goes on together.
 * ====================================================================== */

/* ---- the class: after the patcher, and on a browser without `:has()` ---- */

.orderable-product-option--oo-soldout {
	cursor: not-allowed;
	pointer-events: none;
}

.orderable-product-option--oo-soldout > .orderable-product-option__label,
.orderable-product-option--oo-soldout > .orderable-product-option__swatch {
	opacity: var(--oo-soldout-choice-opacity);
}

.orderable-product-option--oo-soldout .orderable-product-option__label-text {
	text-decoration: line-through;
	text-decoration-thickness: var(--oo-soldout-choice-strike);
}

/* THE WORD SITS BESIDE THE NAME, AND THE FEE PILL DOES NOT MOVE.
   It sat at the far right until 26 September 2026, after the fee, which pushed
   the pill left out of the column every other row keeps it in. Ryan, off his
   phone on Sonora: "Put the sold out choice message next to the name of the
   choice rather than the right side, so that the price can stay aligned."

   NO DOM MOVED, AND NONE NEEDED TO. PHP prints the word through
   `orderable_before_product_option_price`, the only seam inside the option,
   which fires BEFORE the fee -- so in source order the word is already first.
   What was wrong was the box: `.orderable-product-option__label-data` is the
   vendor's right-hand cluster (`margin: 0 0 0 auto`), so everything in it hugs
   the right edge and a word added to it pushes the pill along.

   SO ON A SOLD-OUT ROW THAT CLUSTER BECOMES THE FLEXIBLE CELL. `flex: 1` takes
   the space between the name and the right edge, the word sits at its start --
   one gap after the name -- and `margin-inline-start: auto` on the fee sends
   the pill back to exactly the x every other row's pill lands on.

   NOT `justify-content: space-between`, because the cluster has a THIRD child:
   the vendor's hover tick, invisible here and still occupying its 10px and its
   two margins on every other row as well. The pill has to be pushed to just
   before the tick, not to the cluster's edge, or it would sit 27px right of
   the others. On a row with no fee there is nothing to push, and the same auto
   margin goes on the tick instead, through an adjacent-sibling selector that
   can only match when the fee is absent.

   A ROW ON SALE IS NOT TOUCHED BY ANY OF THIS. Every selector is the sold-out
   row's, so an ordinary row is the bytes it always was. */
.orderable-product-option--oo-soldout .orderable-product-option__label-data {
	display: flex;
	flex: 1;
	align-items: center;
	gap: var(--oo-soldout-choice-inline-space);
	margin-inline-start: var(--oo-soldout-choice-word-gap);
}

.orderable-product-option--oo-soldout .orderable-product-option__label-fee,
.orderable-product-option--oo-soldout .oo-option__state + .orderable-product-option__label-state {
	margin-inline-start: auto;
}

.orderable-product-option--oo-soldout .orderable-product-option__label-state {
	opacity: 0;
}

/* ---- `:has()`: the state the server rendered, before any script runs ---- */

.orderable-product-option:has(> .orderable-product-option__label > .orderable-product-option__label-data > .oo-option__state:not([hidden])) {
	cursor: not-allowed;
	pointer-events: none;
}

.orderable-product-option:has(> .orderable-product-option__label > .orderable-product-option__label-data > .oo-option__state:not([hidden])) > .orderable-product-option__label,
.orderable-product-option:has(> .orderable-product-option__label > .orderable-product-option__label-data > .oo-option__state:not([hidden])) > .orderable-product-option__swatch {
	opacity: var(--oo-soldout-choice-opacity);
}

.orderable-product-option:has(> .orderable-product-option__label > .orderable-product-option__label-data > .oo-option__state:not([hidden])) .orderable-product-option__label-text {
	text-decoration: line-through;
	text-decoration-thickness: var(--oo-soldout-choice-strike);
}

.orderable-product-option:has(> .orderable-product-option__label > .orderable-product-option__label-data > .oo-option__state:not([hidden])) .orderable-product-option__label-data {
	display: flex;
	flex: 1;
	align-items: center;
	gap: var(--oo-soldout-choice-inline-space);
	margin-inline-start: var(--oo-soldout-choice-word-gap);
}

.orderable-product-option:has(> .orderable-product-option__label > .orderable-product-option__label-data > .oo-option__state:not([hidden])) .orderable-product-option__label-fee,
.orderable-product-option:has(> .orderable-product-option__label > .orderable-product-option__label-data > .oo-option__state:not([hidden])) .oo-option__state + .orderable-product-option__label-state {
	margin-inline-start: auto;
}

/* NO HOVER TICK. The vendor's `label-state` span is its own grey check mark at
   `opacity: 0`, raised to 1 on `:hover` and on `--checked`. A check mark
   appearing under the pointer on a row that cannot be picked is the page
   offering something it will not do. */
.orderable-product-option:has(> .orderable-product-option__label > .orderable-product-option__label-data > .oo-option__state:not([hidden])) .orderable-product-option__label-state {
	opacity: 0;
}

/* THE CHOICE ON A CART LINE. `oo_sold_out_live_item_data()` wraps the chosen
   option's value so the script can find it by id and put the mark beside the
   CHOICE rather than beside the dish -- Ryan, 25 September 2026: "I marked
   steak as sold out while the super burrito with steak was in my cart, and it
   told me the super burrito was sold out." The wrapper is a plain inline span
   and wants nothing of its own; the inner one is there so the sentence can
   quote the name without the price after it. */
.oo-line__choice,
.oo-line__choice-name {
	display: inline;
}