/**
 * Harvest Cafe & Store - cart-surface polish (staging).
 *
 * Its own stylesheet rather than more rules in the Additional CSS post: that
 * post is written whole by whoever saves it last, and more than one work stream
 * edits it. A file cannot be clobbered by a concurrent save.
 *
 * Enqueued by hcs-pro.php on the menu, the shop, /cart/ and /checkout/.
 */

/* ------------------------------------------------------------------
   Mini-cart (mobile basket drawer + the desktop popup): line thumbnail.

   The name element is the only per-item injection point the plugin's
   mini-cart template leaves open, so the photo rides inside it and the
   <strong> becomes the line's own two-column row.
   ------------------------------------------------------------------ */

.orderable-mini-cart-item strong {
	display: flex;
	align-items: center;
	gap: 12px;
	min-width: 0;
}
.hcs-mcthumb {
	flex: 0 0 auto;
	line-height: 0;
}
.hcs-mcthumb img,
.hcs-mcthumb .hcs-ph {
	display: block;
	width: 56px !important;
	height: 56px !important;
	max-width: 56px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	border-bottom: 0;
	margin: 0;
	gap: 0;
}
.hcs-mcthumb .hcs-ph__icon { font-size: 20px; }
.hcs-mcthumb .hcs-ph__label { display: none; }
.hcs-mcname { min-width: 0; }

/* Orderable's own remove control is absolutely positioned top-right of the
   line; the thumbnail must not run under it. */
.orderable-mini-cart-item { padding-right: 30px !important; }

/* ------------------------------------------------------------------
   Add-on chips, with a per-add-on remove control.

   One rule set for all four surfaces, because they all render through
   wc_get_formatted_cart_item_data(): the drawer's un-classed <div>, the
   desktop panel's .hcs-cartline__meta, and the dl.variation the cart page
   and the checkout review use.
   ------------------------------------------------------------------ */

/* 56px thumbnail + the 12px gap above: the add-on lines and the stepper line
   up under the product name rather than under its photo, so the line reads as
   one indented block instead of an L. */
.orderable-mini-cart-item strong + div,
.orderable-mini-cart-item .orderable-quantity-roller { margin-left: 68px; }

.orderable-mini-cart-item strong + div {
	margin: 6px 0 2px 68px;
	font: 400 12.5px/1.9 Lato, sans-serif;
	color: var(--hcs-muted, #7c6f63);
}

.hcs-addon-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-left: 6px;
	vertical-align: -4px;
	border: 1px solid var(--hcs-line, #e2d8cc);
	border-radius: 50%;
	background: #fff;
	color: var(--hcs-rust-deep, #8f3d16) !important;
	font: 700 13px/1 Lato, sans-serif;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.hcs-addon-x:hover,
.hcs-addon-x:focus {
	background: var(--hcs-rust, #b4531f);
	border-color: var(--hcs-rust, #b4531f);
	color: #fff !important;
}
.hcs-addon-x.is-busy { opacity: .45; pointer-events: none; }

/* The panel's meta block is pre-line so the flat "Key: Value" lines break;
   an inline-flex child inside pre-line text needs no extra handling. */
.hcs-cartline__meta .hcs-addon-x { vertical-align: -4px; }

/* ------------------------------------------------------------------
   Inline add-on picker.

   Add-ons used to live behind the options drawer, which put a whole step
   between "I want this" and "it is in my basket". They are offered here
   instead - under the line, in the cart panel, the popup cart and /cart/ -
   so the Add button can add and nothing has to be decided up front.

   Same single source as the remove controls (woocommerce_get_item_data),
   so one rule set covers the drawer's un-classed <div>, the desktop
   panel's .hcs-cartline__meta and the dl.variation on /cart/.
   ------------------------------------------------------------------ */

.hcs-addon-opts {
	display: block;
	margin: 4px 0 0;
	line-height: 1.2;
}

.hcs-addon-add {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0 6px 6px 0;
	padding: 5px 11px;
	min-height: 30px;
	border: 1px dashed var(--hcs-line, #e2d8cc);
	border-radius: 999px;
	background: #fff;
	color: var(--hcs-ink, #2f2a26) !important;
	font: 400 12px/1.2 Lato, sans-serif;
	/* /cart/ prints these inside dl.variation, which the theme sets in
	   uppercase Oswald - the chips read the same on every surface. */
	text-transform: none !important;
	letter-spacing: 0 !important;
	text-align: left;
	text-decoration: none !important;
	box-shadow: none !important;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.hcs-addon-add:hover,
.hcs-addon-add:focus {
	border-style: solid;
	border-color: var(--hcs-rust, #b4531f);
	background: #fff7f2;
	color: var(--hcs-rust-deep, #8f3d16) !important;
}
.hcs-addon-add.is-busy { opacity: .45; pointer-events: none; }
.hcs-addon-add__plus {
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	color: var(--hcs-rust-deep, #8f3d16);
}
.hcs-addon-add__price { color: var(--hcs-muted, #7c6f63); white-space: nowrap; }

/* /cart/ renders item data through cart-item-data.php, which prints the
   label in a <dt> and runs the value through wpautop(). */
.woocommerce dl.variation dd.variation-Addtothis { margin: 2px 0 6px; }
.woocommerce dl.variation dd.variation-Addtothis p { margin: 0; }

/* ------------------------------------------------------------------
   Desktop popup cart trigger, under the panel's Checkout button.
   ------------------------------------------------------------------ */

.hcs-cartpanel__view {
	display: block;
	width: 100%;
	margin-top: 8px;
	min-height: 42px;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid var(--hcs-rust, #b4531f);
	border-radius: 8px;
	color: var(--hcs-rust-deep, #8f3d16);
	font: 700 13px/1.2 Oswald, sans-serif;
	text-transform: uppercase;
	letter-spacing: 1.6px;
	cursor: pointer;
	box-shadow: none;
	transition: background .15s ease, color .15s ease;
}
.hcs-cartpanel__view:hover,
.hcs-cartpanel__view:focus {
	background: var(--hcs-rust, #b4531f);
	color: #fff;
}

/* The drawer is fixed and 600px wide at desktop; nothing here changes that,
   it only has to be reachable. Orderable hides its floating button above
   1023px, which is why the panel carries the trigger instead. */

/* ------------------------------------------------------------------
   Order received.

   The confirmation is the last thing a customer sees and the only
   receipt they get before the email lands, so it carries the same
   furniture as the rest of the order flow: a photo per line, and the
   address / time / contact the order was actually placed with.
   ------------------------------------------------------------------ */

/* The theme's clearfix ::before/::after on <ul> become grid items under
   display:grid and take the first and last cells - which is why the
   overview opened with an empty box and pushed "Payment method" onto a
   row of its own. Same fault the checkout's .col2-set had. */
.woocommerce-order ul.woocommerce-order-overview::before,
.woocommerce-order ul.woocommerce-order-overview::after { display: none !important; }

/* Line-item photographs. Floated rather than flexed: the cell also holds
   the quantity and the add-on meta as loose siblings, and a float leaves
   all of them exactly where they were. */
.hcs-oi__thumb {
	float: left;
	margin: 0 14px 4px 0;
	line-height: 0;
}
.hcs-oi__thumb img,
.hcs-oi__thumb .hcs-ph {
	display: block;
	width: 64px !important;
	height: 64px !important;
	max-width: 64px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 8px;
	border-bottom: 0;
	margin: 0;
}
.hcs-oi__thumb .hcs-ph__icon { font-size: 22px; }
.hcs-oi__thumb .hcs-ph__label { display: none; }
.woocommerce-table--order-details td.product-name { overflow: hidden; }

/* WooCommerce prints order-item meta as <li><strong>Label:</strong><p>value</p></li>,
   floats the label and gives it clear:both. With the thumbnail floated
   alongside, that clear dropped the label below the photo while its own <p>
   stayed up beside the name - the line read "+$5.75" then "Avocado:" under
   the picture. Unfloat both halves so each add-on is one inline line. */
.woocommerce-table--order-details td.product-name .wc-item-meta {
	margin: 3px 0 0;
	padding: 0;
	list-style: none;
	font-size: 13.5px;
	color: var(--hcs-muted, #7c6f63);
}
.woocommerce-table--order-details td.product-name .wc-item-meta li { margin: 0; padding: 0; }
.woocommerce-table--order-details td.product-name .wc-item-meta strong,
.woocommerce-table--order-details td.product-name .wc-item-meta strong.wc-item-meta-label,
.woocommerce-table--order-details td.product-name .wc-item-meta p {
	display: inline !important;
	float: none !important;
	clear: none !important;
	margin: 0 3px 0 0;
	padding: 0;
	font-weight: 400;
	font-size: inherit;
	text-transform: none;
	letter-spacing: 0;
}

/* The gateway's own instruction line ("Pay with cash upon delivery.") is a
   bare <p> between the overview and the next-steps card, and it was rendering
   at the theme's smallest size - unreadable for the one sentence that tells a
   COD customer what to have ready. */
.woocommerce-order > p:not(.woocommerce-notice) {
	font: 400 14.5px/1.7 Lato, sans-serif;
	color: var(--hcs-ink, #2f2a26);
}

/* Where it is going, when, who we call. */
.hcs-orderinfo {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 0;
	margin: 22px 0 34px;
	background: #fff;
	border: 1px solid var(--hcs-line, #e2d8cc);
	border-radius: 10px;
	overflow: hidden;
}
.hcs-orderinfo__card {
	padding: 18px 20px;
	border-right: 1px solid var(--hcs-line, #e2d8cc);
}
.hcs-orderinfo__card:last-child { border-right: 0; }
.hcs-orderinfo__label {
	margin: 0 0 7px;
	font: 700 10px/1 Oswald, sans-serif;
	text-transform: uppercase;
	letter-spacing: 1.6px;
	color: var(--hcs-rust-deep, #8f3d16);
}
.hcs-orderinfo__value {
	margin: 0;
	font: 400 14px/1.7 Lato, sans-serif;
	color: var(--hcs-ink, #2f2a26);
	overflow-wrap: anywhere;
}
.hcs-orderinfo__value address { font-style: normal; margin: 0; }

@media screen and (max-width: 767px) {
	.hcs-orderinfo { grid-template-columns: 1fr; }
	.hcs-orderinfo__card {
		border-right: 0;
		border-bottom: 1px solid var(--hcs-line, #e2d8cc);
	}
	.hcs-orderinfo__card:last-child { border-bottom: 0; }
	.hcs-oi__thumb img,
	.hcs-oi__thumb .hcs-ph { width: 46px !important; height: 46px !important; max-width: 46px; }
	.hcs-oi__thumb { margin-right: 10px; }

	/* Two 18px cell paddings plus a photo left the dish name about 90px of
	   run on a 390px screen, so "Eggs Benedict x 2" broke over three lines.
	   Give the name cell the room - the total only needs enough for a price. */
	.woocommerce-table--order-details th.product-name,
	.woocommerce-table--order-details td.product-name { width: 64%; }
	.woocommerce-table--order-details th,
	.woocommerce-table--order-details td { padding: 14px 12px; }
	.woocommerce-table--order-details td.product-name a { font-size: 13px; letter-spacing: .6px; }
}

/* ------------------------------------------------------------------
   Payment marks. Sizing lives with the marks so the row keeps its
   proportions on a phone, where five 40px cards would otherwise wrap
   into a ragged block.
   ------------------------------------------------------------------ */

.hcs-trustrow__mark {
	width: 40px;
	height: 26px;
	background: transparent;
}
@media screen and (max-width: 380px) {
	.hcs-trustrow__marks { gap: 6px; }
	.hcs-trustrow__mark { width: 36px; height: 23.4px; }
}

/* ==================================================================
   MILESTONE 23 - CHECKOUT TOP OF FOLD
   ==================================================================
   Measured on /checkout/ before this section (tof_probe.py, one Big
   Breakky in the cart, cache-busted):

                        1440x900        390x844
     header bottom        143             183
     #page-header       143-313 (170)   183-300 (117)
     .content-area pad   +24px           +24px
     .hcs-delivery top    337             324
     gap header->banner   194px           141px

   The band is a 62px/34px "CHECKOUT" plus a star divider inside
   44/38 (32/26 on mobile) of padding - 170px to say one word. The
   title stays, because it is the only thing that names the page and
   the same band renders "Order Received" after the order is placed;
   it is slimmed to a caption. The 24px below it goes to zero the way
   /menu/ (body.page-id-1766) and the front page (body.home) already
   do it, so the free delivery banner starts where the band ends and
   there is no white strip anywhere above the form.

   Specificity, not source order. hcs-cart.css is enqueued into
   wp_head well before <style id="wp-custom-css">, so a rule that only
   tied on specificity would lose. body.page-id-1763:not(.home)
   (0,1,2,1) outranks section 1's body:not(.home) (0,1,1,1), and
   #primary.content-area (0,1,2,1) outranks its bare .content-area.
   1763 is wc_get_page_id('checkout') - the checkout and the
   order-received page are the same post, and both want the slim band.
   ================================================================== */

body.page-id-1763:not(.home) #page-header {
	padding: 13px 0 12px !important;
}
body.page-id-1763:not(.home) #page-header #page-title {
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: 2.4px;
}
/* A star-and-rules divider under a title that is now one line tall is
   decoration wrapped around nothing. The band keeps its ink background
   and its title; the ornament is what was padding the height. */
body.page-id-1763 #page-header .dine-divider {
	display: none !important;
}
body.page-id-1763 #primary.content-area {
	padding-top: 0 !important;
}

@media screen and (max-width: 767px) {
	body.page-id-1763:not(.home) #page-header {
		padding: 11px 16px 10px !important;
	}
	body.page-id-1763:not(.home) #page-header #page-title {
		font-size: 18px;
		letter-spacing: 2px;
	}
}

/* ---- The relocated coupon block -----------------------------------
   woocommerce_after_checkout_form fires outside form.checkout (see
   hcs-pro.php), so the toggle and its form are siblings of the form
   and land under the whole two-column grid - below the order summary,
   just under the trust row and Place order. Two-column-wide rust
   notice down there reads as a new section shouting for attention,
   which is the opposite of the point: it is an afterthought control
   now, so it gets afterthought weight, aligned to the payment column
   it sits beneath. */
.woocommerce-checkout .woocommerce > form.checkout ~ .woocommerce-info,
.woocommerce-checkout .woocommerce > form.checkout ~ form.checkout_coupon {
	max-width: 601px;
	margin-top: 18px;
}
.woocommerce-checkout .woocommerce > form.checkout ~ .woocommerce-info {
	background: transparent !important;
	border-top: 1px solid var(--hcs-line) !important;
	padding: 18px 0 0 !important;
	font-size: 13.5px;
	color: var(--hcs-muted) !important;
}
.woocommerce-checkout .woocommerce > form.checkout ~ .woocommerce-info::before {
	display: none !important;
}
.woocommerce-checkout .woocommerce > form.checkout ~ .woocommerce-info a.showcoupon {
	color: var(--hcs-rust-deep) !important;
	text-decoration: underline;
}
/* Opened, WooCommerce's own form.checkout_coupon is a 1px #111 box with 20px of
   padding and two floated half-columns - a panel, which is what it was as the
   first thing on the page. Under the trust row it is a hard black rectangle
   between Place order and the footer. It is two controls; let it be two
   controls. The 72px field is the site's field height everywhere else, so the
   button is brought to the same height rather than the field cut down to the
   button's 44px. */
.woocommerce-checkout .woocommerce > form.checkout ~ form.checkout_coupon {
	border: 0 !important;
	padding: 0 !important;
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.woocommerce-checkout .woocommerce > form.checkout ~ form.checkout_coupon .form-row {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}
.woocommerce-checkout .woocommerce > form.checkout ~ form.checkout_coupon .form-row-first {
	flex: 1 1 auto;
	min-width: 0;
}
.woocommerce-checkout .woocommerce > form.checkout ~ form.checkout_coupon #coupon_code {
	width: 100%;
}
.woocommerce-checkout .woocommerce > form.checkout ~ form.checkout_coupon [name="apply_coupon"] {
	height: 72px;
	white-space: nowrap;
}
.woocommerce-checkout .woocommerce > form.checkout ~ form.checkout_coupon .clear {
	display: none;
}
/* The billing fields get a readable placeholder from section 1; the coupon
   field was never in that selector and falls through to the UA default, which
   Chrome renders at .08 opacity - an unlabelled empty box next to a button
   that says APPLY COUPON. Same treatment as every other field on the page. */
.woocommerce-checkout .woocommerce > form.checkout ~ form.checkout_coupon #coupon_code::placeholder {
	color: rgba(0, 0, 0, .6);
	opacity: 1;
}

@media screen and (max-width: 767px) {
	.woocommerce-checkout .woocommerce > form.checkout ~ .woocommerce-info,
	.woocommerce-checkout .woocommerce > form.checkout ~ form.checkout_coupon {
		max-width: 100%;
	}
	/* 390px cannot hold a field and "APPLY COUPON" side by side without the
	   field shrinking to a stub - stack them. */
	.woocommerce-checkout .woocommerce > form.checkout ~ form.checkout_coupon {
		display: block;
	}
	.woocommerce-checkout .woocommerce > form.checkout ~ form.checkout_coupon .form-row-last {
		margin-top: 10px !important;
	}
	.woocommerce-checkout .woocommerce > form.checkout ~ form.checkout_coupon [name="apply_coupon"] {
		width: 100%;
		height: 56px;
	}
}


/* The postcode is fixed at 2795 - one shop, one delivery area. The field is
   readonly rather than removed because WooCommerce matches the Free Delivery
   zone on the value it posts; say so visually, so nobody sits clicking a box
   that will not take a keystroke. */
.woocommerce-checkout form.checkout .hcs-locked input.input-text[readonly],
.woocommerce-checkout form.checkout .hcs-locked input.input-text[readonly]:focus {
	background: #f1ece6 !important;
	color: rgba(0, 0, 0, .62);
	cursor: default;
	box-shadow: none;
	outline: none;
}


/* ==================================================================
   33. POPUP CART - batch 2 (2026-08-18)
   ==================================================================

   Eight owner items against the basket drawer, the checkout and the
   /menu/ trust strip. Written HERE and not into the Additional CSS
   post on purpose: the drawer-overlay fix was editing post 857 while
   this batch ran (section 32 gained a z-index note mid-run, measured -
   197593 bytes at 15:12, 197919 at 16:24). A whole-post write is
   last-writer-wins; a file is not. Nothing below touches post 857, so
   the two streams cannot clobber each other.

   The price of that choice is the cascade: <style id="wp-custom-css">
   prints at wp_head:101 and this sheet at wp_head:8, so post 857 wins
   every tie. Where section 32 already carries an !important on the
   same property, the rules below out-SPECIFY it (one more class in
   the selector) rather than shouting louder. Each such rule says so.
   ================================================================== */

/* ---- 33.1  The popup must be top-most (item 2.6) -------------------

   Measured before the change (pc_probe.py, pc/before_1440.json):
   drawer z-index 999999, overlay 999998, #tpbr_topbar 99998, #masthead
   2000 - all four in the root stacking context, so the drawer already
   painted over the Book Now bar at 1440 and at 390, and
   elementFromPoint over the drawer's own top edge returned the drawer.

   Reported anyway, and the reason it can come back is that 999999 is
   not a ceiling: the Top Bar plugin writes its own rules through the
   CSSOM at runtime (see section 21 of post 857 - it already does this
   to `top`), and any plugin that picks a bigger number wins. Pin the
   drawer and its overlay at the top of the signed 32-bit range, which
   nothing can outbid, and stop having this argument.

   `html body` + the doubled class is specificity against post 857's
   own `body .orderable-drawer.orderable-drawer` block (section 21). */
html body .orderable-drawer.orderable-drawer { z-index: 2147483000 !important; }
html body .orderable-drawer-overlay { z-index: 2147482999 !important; }

/* ---- 33.2  Scroll the PRODUCTS, not the whole drawer (item 2.4) ----

   ROOT CAUSE, measured at 1440 with one line (pc/before_1440.json):
   ONE scrollport held everything - the product list, "you may also
   like" (355px at desktop), the subtotal and the buttons - as a 696px
   window over 847px of content. The subtotal sat at y=758 under a
   sticky action block at y=710, and the payment line at y=953, i.e.
   109px below the bottom of the viewport. The two things a customer
   looks for before pressing Checkout - what it costs, and whether the
   site takes their card - were both off screen behind the suggestions.

   COORDINATION, and why this is not the obvious fix. The batch brief
   for this work says that where it meets the drawer-overlay fix running
   in parallel, the overlay fix owns the drawer CSS and this batch
   defers. It came to exactly that: this section first made the product
   list its own flexbox scrollport, and section 32.1 of post 857 was
   then re-cut to take the scroller back to the wrapper, with reasons
   worth keeping - Orderable's fake scrollbar is `display: none` in that
   section, so a second scroller has nothing on screen to say it can be
   scrolled, and `.orderable-sb-container` is a shrinkable flex item
   that has to be pinned at `flex: 0 0 auto` or flex simply shrinks the
   overflow away. Both true. So the scroller is THEIRS: one scrollport,
   the wrapper, and nothing here argues with it.

   What that model does not do by itself is item 2.4, because "the
   subtotal is sticky" is only half of it - the suggestions strip and
   the payment marks still ride the scroll. So this composes with the
   sticky footer 32.1 started instead of replacing it: everything below
   the product list joins the same bottom stack, in their idiom, at
   their offsets. Bottom-up the drawer now ends in

       buttons   bottom 0    z 30   (32.1)
       subtotal  bottom 110  z 29   (32.1)
       marks     bottom 172  z 28   (here, item 2.5)
       also-like bottom 226  z 27   (here, item 2.8)

   A sticky stack can only be as tall as the DOM order allows, which is
   why hcs-pro.php now renders the payment marks on
   `woocommerce_widget_shopping_cart_before_total` instead of after the
   buttons: pinned above a subtotal that comes LATER in the document,
   they collided with it at the bottom of the scroll where sticky
   resolves back to natural position - measured, marks y=594-648 over a
   subtotal at y=574-636. Rendered in the order they are pinned in, they
   cannot.

   which leaves the product list as the only thing that moves - the
   scroll region is products, exactly as asked, with no rule in this
   file contradicting one in post 857.

   The offsets are a chain, so they are written as a chain: change one
   height and the ones above it follow. 32.1's own 110px is the anchor
   and it carries a note saying so. */
.orderable-drawer .orderable-drawer__cart {
	/* BATCH 3 re-cut. Bottom-up the stack is now
	
	       marks     bottom 0                        z 31  (34.1)
	       buttons   bottom trust                    z 30  (32.1 + 34.1)
	       subtotal  bottom trust+actions            z 29  (32.1 + 34.1)
	       also-like bottom trust+actions+total      z 27  (33.2)
	
	   which is the order the owner asked for - suggestions, price,
	   Checkout, badges - and, read bottom-up, the order the blocks appear
	   in the document. DOM order and pin order agree now, so the collision
	   batch 2 measured (marks pinned below a subtotal that came after them)
	   cannot happen from either end.
	
	   Measured, not guessed - the verification script asserts the rendered
	   heights against these three numbers:
	     actions  one Checkout button, 40px, plus the block's 10px top
	              padding. It was 110 with "View cart" under it (item 2).
	     total    the cream box, 14px padding each way over a 22px figure,
	              plus the compare-at line above it (item 4).
	     trust    five 19.5px marks over an 11.5px line, plus 10px/8px
	              padding. 61 and not 62 because 34.1 takes the block's
	              1px border-top off now that it sits under a button. */
	--hcs-foot-actions: 50px;
	--hcs-foot-total: 86px;
	--hcs-foot-trust: 61px;
}
/* One-item basket: the footer has to sit at the FOOT.

   Sticky only pins while there is something to scroll, so with a single
   line the whole block resolved to its natural position and left ~130px
   of white under the View cart button - measured at 390, drawer content
   570 in a 696 scrollport. That is the common case, not an edge one.

   Two properties, and only two. `min-height: 100%` on the mini-cart's
   inner wrapper makes it fill the scrollport when the basket is short;
   it is the one place this file extends a rule post 857 section 32.1
   also sets (`min-height: 0` there), so: 100% of a definite 696px
   parent, and when the basket DOES overflow, 696 is smaller than the
   content and the declaration has no effect at all - their scrolling
   case cannot see this. `margin-top: auto` then spends the spare space
   above the suggestions instead of below the buttons. When there is no
   spare space an auto margin is 0, so the overflow case is again
   untouched. Verified both ways: 1 line and 4. */
.orderable-drawer .orderable-drawer__cart > .orderable-mini-cart-wrapper > .orderable-mini-cart-wrapper {
	min-height: 100%;
}

/* Opaque, because the basket list now passes underneath these on its
   way up. The subtotal already has the cream fill from post 857:1116
   and the buttons block already has white from 32.1; these two did
   not need one until they started being scrolled under. */
/* BATCH 3 item 2: the marks are the bottom of the stack now, under the
   Checkout button, in the space "View cart" used to take. Above the
   buttons' own z-index 30 (post 857, 32.1) because it is the last block
   in the document and nothing may paint over it. */
.orderable-drawer .hcs-drawer-trust {
	position: sticky;
	bottom: 0;
	z-index: 31;
	background: #fff;
}
.orderable-drawer .orderable-cart-bumps {
	position: sticky;
	bottom: calc(var(--hcs-foot-trust) + var(--hcs-foot-actions) + var(--hcs-foot-total));
	z-index: 27;
	background: var(--hcs-cream, #faf6f0);
	border-radius: 10px;
}

/* ---- 33.3  Compact line rows (item 2.1) ----------------------------

   Measured before: one line 288px tall at 390 and 242px at 1440 - a
   basket of three would not fit on any phone made. The row is
   [56px photo][name] over [add-on chips] over [stepper + price], and
   every one of those three bands was carrying desktop spacing.

   44px photo (-12), 12px less padding across the row, chips at 26px
   instead of 30 with 4px of stack gap instead of 6, and a 32px stepper
   instead of 40. The indent that lines the lower bands up under the
   name follows the photo down: 68px -> 54px.

   `.orderable-drawer` in front of every selector, so /cart/, the
   checkout review and the desktop cart panel - which have the room and
   are verified at their current density - are untouched. Two classes
   here beat post 857:1102's one-class `!important` padding. */
.orderable-drawer .orderable-mini-cart-item {
	padding: 10px 30px 10px 0 !important;
}
.orderable-drawer .orderable-mini-cart-item strong {
	gap: 10px;
	font-size: 13px;
	line-height: 1.25;
}
.orderable-drawer .hcs-mcthumb img,
.orderable-drawer .hcs-mcthumb .hcs-ph {
	width: 44px !important;
	height: 44px !important;
	max-width: 44px;
	border-radius: 7px;
}
.orderable-drawer .hcs-mcthumb .hcs-ph__icon { font-size: 17px; }
.orderable-drawer .orderable-mini-cart-item strong + div,
.orderable-drawer .orderable-mini-cart-item .orderable-quantity-roller {
	margin-left: 54px;
}
.orderable-drawer .orderable-mini-cart-item strong + div {
	margin-top: 4px;
	margin-bottom: 0;
	font-size: 12px;
	line-height: 1.5;
}
/* The trailing <br> the item-data filter leaves behind was worth a
   whole blank line under the chips. */
.orderable-drawer .orderable-mini-cart-item strong + div br { display: none; }
.orderable-drawer .hcs-addon-opts { margin-top: 3px; }
.orderable-drawer .hcs-addon-add {
	margin: 0 5px 4px 0;
	padding: 3px 9px;
	min-height: 26px;
	gap: 4px;
	font-size: 11.5px;
}
.orderable-drawer .orderable-mini-cart-item .orderable-quantity-roller { margin-top: 4px; }
.orderable-drawer .orderable-quantity-roller__roller { height: 32px; }
.orderable-drawer .orderable-quantity-roller__button { width: 30px; height: 30px; }

/* ---- 33.4  Digits you can read at a glance (item 2.2) --------------

   The line price and the quantity were both 13px Lato regular - the
   same size and weight as the add-on chip copy around them, so the
   numbers had no rank at all. Everything a customer counts in goes up
   and goes bold; nothing else moves. */
.orderable-drawer .orderable-quantity-roller__quantity {
	font-size: 15px !important;
	font-weight: 700;
	color: var(--hcs-ink, #2f2a26);
}
.orderable-drawer .orderable-quantity-roller__price {
	font-size: 16px;
	font-weight: 700;
}
.orderable-drawer .hcs-addon-add__price {
	font-size: 12px;
	font-weight: 700;
	color: var(--hcs-ink, #2f2a26);
}
.orderable-drawer .orderable-cart-bumps__bump-price { font-size: 13px; font-weight: 700; }
/* The one number the whole panel is about. */
.orderable-drawer .orderable-mini-cart__total .woocommerce-Price-amount {
	font-size: 25px;
	font-weight: 700;
}
/* No bottom margin, and that is load-bearing rather than tidiness. The
   sticky foot chain above is built out of block HEIGHTS (110 / 62 / 62),
   so a margin between two links of the chain makes the PINNED position and
   the SETTLED position disagree by exactly that margin. Measured at 390 /
   768 / 1440 with four lines: `margin-bottom: 10px` pinned the subtotal at
   bottom 710 but settled it at 700 once the basket was scrolled to its end,
   so a 10px white band opened under the subtotal at the bottom of every
   scroll and closed again on the way back up. The 10px of air below the
   subtotal is already supplied by the buttons block's own `padding-top:
   10px` (post 857, section 32.1), so this margin only ever duplicated
   spacing that was already there: deleting it leaves the pinned state
   pixel-identical and makes the settled state match it. */
.orderable-drawer .orderable-mini-cart__total {
	padding: 11px 16px !important;
	margin-bottom: 0 !important;
}

/* ---- 33.5  Savings (item 2.3) --------------------------------------

   Two badges off one number (hcs_addon_saving / hcs_line_savings in
   hcs-pro.php): "save $1.09" on the offer chip, where the customer is
   deciding, and "You save $1.09" on the line once they have taken it,
   where they are checking. Green rather than rust - rust is this
   store's action colour and a saving is not a button. */
.orderable-drawer .hcs-save {
	display: block;
	margin-top: 3px;
	font: 700 11.5px/1.3 Lato, sans-serif;
	letter-spacing: 0;
	text-transform: none;
	color: #2f6b4f;
}
/* Not in the desktop cart panel. The chip there is `display: inline-flex`
   inside a 300px rail, its label already wraps to two lines, and a third
   nowrap child pushed the pill outside the panel's right edge - measured at
   1440, pc/reg_menu_1440.png against pc/before_menu_1440.png. Everything
   that would make it fit costs more than it buys: `flex-wrap` puts the lone
   "+" on a line of its own, and a zero flex-basis on the label breaks the
   words one per line (both tried, both measured, both worse). The rail is a
   summary of a basket the customer is looking at in the popup cart anyway,
   and the badge is on the chip there and on /cart/. */
.hcs-cartline__meta .hcs-addon-add__save { display: none; }
.hcs-addon-add__save {
	margin-left: 2px;
	padding: 1px 6px;
	border-radius: 999px;
	background: #e8f2ea;
	color: #2f6b4f;
	font: 700 11px/1.5 Lato, sans-serif;
	white-space: nowrap;
}

/* ---- 33.6  "You may also like", static and slim (items 2.4, 2.8) ---

   The strip is `flex: 0 0 auto` above, so whatever it measures is taken
   off the product list for good - and at 1440 it measured 355px of an
   844px viewport, more than the basket itself. Post 857's section 32.2
   already compacts the bump card to one 52px row, but it is wrapped in
   `max-width: 1023px`, so desktop kept the stacked layout with a 220px
   photo. That media query belongs to the batch editing post 857 right
   now, so this is the desktop mirror of it rather than an edit to it:
   same layout, min-width 1024. If 32.2 is ever unwrapped this block
   becomes a harmless duplicate. */
@media screen and (min-width: 1024px) {
	.orderable-drawer .orderable-cart-bumps__bump-content {
		display: flex !important;
		align-items: center;
		gap: 12px;
		overflow: hidden;
	}
	.orderable-drawer .orderable-cart-bumps__bump-content > img,
	.orderable-drawer .orderable-cart-bumps__bump-content > .hcs-ph {
		flex: 0 0 56px !important;
		width: 56px !important;
		height: 56px !important;
		min-width: 0 !important;
		max-width: 56px !important;
		object-fit: cover;
		border-radius: 6px;
	}
	.orderable-drawer .orderable-cart-bumps__bump-content > .hcs-ph .hcs-ph__label { display: none; }
	.orderable-drawer .orderable-cart-bumps__bump-content > .hcs-ph .hcs-ph__icon,
	.orderable-drawer .orderable-cart-bumps__bump-content > .hcs-ph .emoji {
		font-size: 24px !important;
		width: auto !important;
		height: 24px !important;
	}
	.orderable-drawer .orderable-cart-bumps__bump-data { flex: 1 1 auto; min-width: 0; }
	.orderable-drawer .orderable-cart-bumps__bump-title { margin: 0 !important; font-size: 14px; line-height: 1.25; }
	.orderable-drawer .orderable-cart-bumps__bump-price { margin: 2px 0 0 !important; line-height: 1.2; }
	.orderable-drawer .orderable-cart-bumps__bump-button { flex: 0 0 auto; white-space: nowrap; }
}
/* `auto` on the top edge, not 0: that is 33.2's footer-to-the-foot margin,
   and this shorthand runs later in the file with an !important on it, so
   writing `0` here silently cancelled it - measured, computed margin-top 0
   and 129px of white under the buttons on a one-line basket. */
/* Bottom edge 0, top edge still `auto` - the two are separate fixes and
   both are needed. `auto` is the one-line-basket footer-to-the-foot
   margin above; `0` on the bottom is the settle fix described at the
   subtotal below - an 8px margin here put this card's pinned position
   (bottom 234) 8px away from its settled one. The gap under the card
   stays: the payment marks carry `padding-top: 10px` of their own. */
.orderable-drawer .orderable-cart-bumps { margin: auto 0 0 !important; padding: 8px 10px; }
.orderable-drawer .orderable-cart-bumps__heading { margin: 0 0 6px !important; font-size: 12px; }
/* The pager was three 22px dots under a single 52px row - a third of
   the strip's height spent on a control for three slides that also
   rotate by themselves. The slider still rotates and still swipes. */
.orderable-drawer .orderable-cart-bumps-slider-control-nav { margin: 4px 0 0 !important; height: 10px; }
.orderable-drawer .orderable-cart-bumps-slider-control-nav li,
.orderable-drawer .orderable-cart-bumps-slider-control-nav li a { height: 10px !important; }

/* ---- 33.7  Payment marks at the foot of the popup (item 2.5) -------

   The order flow shows Visa / Mastercard / Apple Pay / Google Pay / SSL
   on /cart/ and on the checkout, and showed none of them in the popup
   cart - the one surface the Checkout button actually lives on. Same
   artwork (hcs_trust_marks_html), 30px instead of 40 so five marks and
   the secure line together cost about 52px, and static under the
   actions by 33.2, so they are visible at every scroll position. */
/* No margin: the sticky stack in 33.2 tiles these blocks edge to edge, and
   a margin between two sticky siblings is a gap the basket list shows
   through. The rule is a border and padding instead. */
.hcs-drawer-trust {
	margin: 0;
	padding: 10px 0 8px;
	border-top: 1px solid var(--hcs-line, #e2d8cc);
}
.hcs-drawer-trust .hcs-trustrow__marks { gap: 6px; }
.hcs-drawer-trust .hcs-trustrow__mark { width: 30px; height: 19.5px; }
.hcs-drawer-trust .hcs-drawer-secure { margin: 6px 0 0; font-size: 11.5px; }

/* ---- 33.8  /menu/ trust strip: auto-scroll on mobile (item 2.7) ----

   The marquee itself is driven from hcs-menu.js by animating scrollLeft,
   not by a CSS animation: below 768 the strip is already a native
   `overflow-x: auto` rail (post 857, the mobile block at :2752), and a
   transform animation would have meant duplicating the four cards and
   giving up the swipe. Driving the real scroll position keeps one copy
   of the DOM, keeps the finger working, and stops the moment a finger
   touches it.

   The rules here are the ones the script should not be doing: kill any
   scroll-snap it would fight, and honour reduced motion (the script
   checks the same query - this is the belt). */
.hcs-trust.hcs-marquee { scroll-snap-type: none; }
@media (prefers-reduced-motion: reduce) {
	.hcs-trust.hcs-marquee { scroll-behavior: auto !important; }
}

/* ==================================================================
   34. POPUP CART - batch 3 (2026-08-18)
   ==================================================================

   Four owner items off one screenshot of the drawer at 390:

     1  the drawer must be the whole device, with nothing of the
        announcement bar above it
     2  payment badges AFTER Checkout, and no "View cart" button
     3  the empty band between "you may also like" and the subtotal
     4  a compare-at anchor above the subtotal

   Item 1 is not in this file. Measured at 390 / 768 / 1440, at ready,
   after a scroll, after a resize, with the drawer open and while
   scrolling with it open, the drawer is already `top: 0` and the full
   viewport height, and paints over the bar (z-index 2147483000 against
   the bar's 99998). What the probe DID find is that the Top Bar plugin
   inserts `.orderable-drawer { top: 73px !important; }` into a runtime
   stylesheet on every scroll and resize, and post 857's section 21 is
   beating it on specificity alone - one class more. The same code path
   also writes the offset as an INLINE `!important`, which no stylesheet
   can outrank, which is the state the owner photographed. So item 1 is
   fixed where it starts: the sandbox's patched copy of the plugin's
   own script now skips the drawer. See hcs-pro.php's tpbr note.
   ================================================================== */

/* ---- 34.1  The foot: subtotal, Checkout, badges (item 2) -----------

   Post 857's 32.1 pins the buttons at `bottom: 0` and the subtotal at
   `bottom: 110px`, and says in place that 110 is the buttons block's
   own measured height - "a third button in there moves this offset with
   it". Taking the second button OUT moves it the same way, and the
   marks now sit below both. Retargeted here rather than in post 857
   because that post is being edited by the drawer content-scroll fix
   running in parallel and a whole-post write is last-writer-wins.

   One class more than 32.1's selectors, which is all it takes: neither
   of the two declarations being replaced carries an !important. */
.orderable-drawer .orderable-drawer__cart .orderable-mini-cart__buttons {
	bottom: var(--hcs-foot-trust);
}
.orderable-drawer .orderable-drawer__cart .orderable-mini-cart__total {
	bottom: calc(var(--hcs-foot-trust) + var(--hcs-foot-actions));
}
/* The marks' border-top used to separate them from the buttons above;
   under the Checkout button it would draw a line straight across the
   drawer 10px under a filled rust button. The block keeps its top
   padding and loses the rule. */
.orderable-drawer .hcs-drawer-trust { border-top: 0; }

/* ---- 34.2  also-like -> subtotal (item 3) --------------------------

   The 63px band the owner is pointing at was the payment marks, which
   item 2 has just moved to the foot; with them gone the two blocks are
   tiled edge to edge by the sticky offsets above and the gap is 0,
   which is as wrong the other way.

   10px of it back, as a BORDER and not a margin. The blocks in this
   stack are pinned tight against each other on purpose - a margin
   between two sticky siblings is a transparent band that the basket
   list scrolls through visibly (33.7 hit this and says so). A white
   bottom border is part of the box, so the block stays opaque and the
   card's cream fill still stops 10px short of the subtotal. */
.orderable-drawer .orderable-cart-bumps { border-bottom: 10px solid #fff; }

/* ---- 34.3  "Compare at" above the subtotal (item 4) ----------------

   A display-only anchor - subtotal x 1.10, struck through, with the
   difference beside it. hcs-pro.php renders it into the mini-cart's own
   total row (a hook that fires nowhere else) and nothing about it can
   reach an order; see the note there.

   INSIDE the cream box, as its first row, rather than as a fifth block
   above it. The box is the thing a customer's eye lands on, an anchor
   works by being read against the number it discounts, and a separate
   band would have cost another ~30px of a foot item 3 is about
   shortening. The box itself grows by the one line.

   The box is `display: flex; justify-content: space-between` in post
   857:1116, so a new child would have landed on the same row as the
   figure. Wrapping plus a full-basis first item gives it its own line;
   `order: -1` keeps it above whatever else the row picks up later. */
.orderable-drawer .orderable-mini-cart__total { flex-wrap: wrap; }
.orderable-drawer .hcs-compare-at {
	flex: 0 0 100%;
	order: -1;
	margin: 0 0 8px;
	/* The box is `text-align: right` at some widths and centred at others
	   (post 857:1116 + the mobile block), which put the same line in three
	   different places across 390 / 768 / 1440. Say it once, here. */
	text-align: left;
	font-size: 12px;
	line-height: 1.35;
	color: var(--hcs-muted, #7a6c60);
}
/* Post 857:1127 draws every price in this box at 22px Oswald rust - the
   subtotal figure. The anchor is not that; three classes to its two,
   no !important needed. */
.orderable-drawer .hcs-compare-at .woocommerce-Price-amount {
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}
.orderable-drawer .hcs-compare-at s { text-decoration: line-through; }
.orderable-drawer .hcs-compare-at .hcs-compare-at__save,
.orderable-drawer .hcs-compare-at .hcs-compare-at__save .woocommerce-Price-amount {
	color: var(--hcs-rust-deep, #ab3f1b);
	font-weight: 700;
}

/* ==================================================================
   35. TIPPING AT CHECKOUT (2026-08-18)
   ==================================================================

   Orderable Pro's Tip module renders its own block into the review
   table (a <tr> after the cart contents, above Subtotal). Its
   stylesheet is generic and its buttons inherit Orderable's dark
   button, so out of the box the block was a 100px-tall stack of black
   pills in the middle of a cream, rust-accented order summary, with
   the pre-selected "No thanks" reading as the loudest thing on the
   page.

   These rules restate it in the checkout's own vocabulary - the one
   the payment method cards use in post 857 section 28.4: white card,
   1px --hcs-line border, 10px radius, and rust border + inset ring +
   #fff8f4 for the chosen one. Nothing here is !important: the tip
   selectors carry three classes against the one class of the rules
   they override, and this sheet prints before the Additional CSS post
   so anything it shares has to be beaten on specificity.
   ================================================================== */

/* The row itself: a band, so the block reads as a question about the
   order rather than as another line item. Orderable zeroes the cell
   padding from its own stylesheet, hence the padding on the block. */
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.orderable-tip-row td {
	background: var(--hcs-cream, #faf5f0);
	border-top: 1px solid var(--hcs-line, #eadfd2);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .orderable-tip {
	padding: 16px 0 18px;
}

/* "ADD A TIP (OPTIONAL)" in the same Oswald caps as PRODUCT / SUBTOTAL,
   30px of air below it cut to 10. */
.woocommerce-checkout .woocommerce-checkout-review-order-table .orderable-tip .orderable-tip__title {
	margin: 0 0 10px;
	font-family: Oswald, sans-serif;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--hcs-ink, #111);
}

/* Three presets across, then "No thanks" and "Other amount" as a pair.
   A grid rather than the plugin's flex + percentage widths + 2%
   margins: those left a 1px-off gutter at 390 and a half-empty last
   row whenever the preset count is not even. */
.woocommerce-checkout .woocommerce-checkout-review-order-table .orderable-tip .orderable-tip__row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 0 0 8px;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .orderable-tip .orderable-tip__row--default {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-bottom: 0;
}

/* The buttons. `width: auto` because the plugin sets 49% on the two
   halves, which under a grid track is 49% of the track. */
.woocommerce-checkout .woocommerce-checkout-review-order-table .orderable-tip .orderable-tip__button {
	width: auto;
	min-height: 44px;
	margin: 0;
	padding: 11px 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	color: var(--hcs-ink, #111);
	border: 1px solid var(--hcs-line, #eadfd2);
	border-radius: 10px;
	box-shadow: none;
	font-family: Oswald, sans-serif;
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 1.5px;
	line-height: 1.1;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .orderable-tip .orderable-tip__button:hover,
.woocommerce-checkout .woocommerce-checkout-review-order-table .orderable-tip .orderable-tip__button:focus-visible {
	/* Orderable prints `.orderable-button--active, .orderable-button:hover,
	   .orderable-button:active { background: #000 !important }` inline from
	   its own style settings, so background is the one property in this
	   block that has to answer in kind. */
	background: #fff !important;
	color: var(--hcs-rust-deep, #ab3f1b);
	border-color: var(--hcs-rust, #d45f33);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .orderable-tip .orderable-tip__button.orderable-button--active {
	background: #fff8f4 !important;
	color: var(--hcs-rust-deep, #ab3f1b);
	border-color: var(--hcs-rust, #d45f33);
	box-shadow: inset 0 0 0 1px var(--hcs-rust, #d45f33);
}
/* Keyboard users get a visible ring on top of the card treatment: the
   plugin renders these as role=radio with tabindex=-1, so the ring is
   for the Tab-reachable :focus-visible case only. */
.woocommerce-checkout .woocommerce-checkout-review-order-table .orderable-tip .orderable-tip__button:focus-visible {
	outline: 2px solid var(--hcs-rust-deep, #ab3f1b);
	outline-offset: 2px;
}

/* "Other amount" opens a $ field + Apply. The plugin's flex row is
   kept (it toggles display on the same element) and only sized. */
.woocommerce-checkout .woocommerce-checkout-review-order-table .orderable-tip .orderable-tip__custom-form.orderable-tip__custom-form--active {
	margin-top: 8px;
	gap: 8px;
	flex-wrap: nowrap;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .orderable-tip .orderable-tip__amount-wrap {
	width: auto !important; /* plugin ships 68% !important */
	flex: 1 1 auto;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .orderable-tip .orderable-tip__custom-form-field {
	min-height: 44px;
	margin: 0;
	padding: 10px 12px 10px 24px;
	background: #fff;
	border: 1px solid var(--hcs-line, #eadfd2);
	border-radius: 10px;
	font-size: 15px;
	line-height: 1.2;
	color: var(--hcs-ink, #111);
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .orderable-tip .orderable-tip__custom-form-field:focus {
	border-color: var(--hcs-rust, #d45f33);
	box-shadow: inset 0 0 0 1px var(--hcs-rust, #d45f33);
	outline: 0;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .orderable-tip .orderable-tip__currency {
	left: 11px;
	font-size: 14px;
	color: var(--hcs-muted, #7a6c60);
}
/* Apply is the one thing in the block that commits something, so it is
   the one thing painted rust. */
.woocommerce-checkout .woocommerce-checkout-review-order-table .orderable-tip .orderable-tip__custom-form-button {
	width: auto;
	flex: 0 0 auto;
	min-height: 44px;
	margin: 0;
	padding: 11px 18px;
	background: var(--hcs-rust, #d45f33);
	color: #fff;
	border: 0;
	border-radius: 10px;
	font-family: Oswald, sans-serif;
	font-size: 12px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	cursor: pointer;
}
.woocommerce-checkout .woocommerce-checkout-review-order-table .orderable-tip .orderable-tip__custom-form-button:hover,
.woocommerce-checkout .woocommerce-checkout-review-order-table .orderable-tip .orderable-tip__custom-form-button:focus-visible {
	background: var(--hcs-rust-deep, #ab3f1b);
	color: #fff;
}

/* The Tip line in the totals, once there is one: rust like the other
   money rows in the foot, so it does not read as a surcharge. */
.woocommerce-checkout .woocommerce-checkout-review-order-table tr.fee td .woocommerce-Price-amount {
	color: var(--hcs-rust-deep, #ab3f1b);
}

/* 390: the summary column is ~330px wide, so a 3-up preset row is
   ~100px per button - enough for "10%" but not for two words. The
   default row stays 2-up (both labels are short) and the custom form
   keeps its field-plus-Apply line, which fits at 44px tall. */
@media (max-width: 767px) {
	/* The mobile review table right-aligns every td because every other
	   row's td is a figure. This one is a whole question, so it reads from
	   the left like the labels beside it. */
	.woocommerce-checkout .woocommerce-checkout-review-order-table tr.orderable-tip-row td {
		text-align: left;
	}
	.woocommerce-checkout .woocommerce-checkout-review-order-table .orderable-tip {
		padding: 14px 0 16px;
	}
	.woocommerce-checkout .woocommerce-checkout-review-order-table .orderable-tip .orderable-tip__row {
		gap: 6px;
		margin-bottom: 6px;
	}
	.woocommerce-checkout .woocommerce-checkout-review-order-table .orderable-tip .orderable-tip__button {
		padding: 11px 4px;
		font-size: 11px;
		letter-spacing: 1px;
	}
	.woocommerce-checkout .woocommerce-checkout-review-order-table .orderable-tip .orderable-tip__custom-form-button {
		padding: 11px 12px;
	}
}

/* ------------------------------------------------------------------
   "Bookings Online" top bar: the dismiss control, and the closed state.

   The bar is built by top-bar 7.0.4 with inline styles and no dismiss of
   any kind. #tpbr_topbar is position:fixed, so the button can sit against
   its right edge without touching the centred message inside #tpbr_box.

   The closed state is display:none rather than a height of 0 because the
   plugin's own initBarPosition() tests exactly that - it reads a hidden
   bar as zero height and puts the site header and the .pushr spacer back
   at the top for us on the next resize.
   ------------------------------------------------------------------ */
#hcs-tpbr-close {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.15s ease, background 0.15s ease;
}

#hcs-tpbr-close:hover,
#hcs-tpbr-close:focus {
	opacity: 1;
	background: rgba(255, 255, 255, 0.25);
}

/* The message is centred across the full width, so on a narrow screen it
   runs under the button. Give the button its lane back - and give the
   message enough of a lane that it still fits on two lines.

   Reserving 48px for the X (38px of padding-right plus a 10px gutter on the
   left) took the bar from two lines to three on every phone width: measured
   103px at 390, 375, 360 and 320, against the 73px it was before the X
   existed. Two changes bring it back, both scoped to phones.

     - The lane is 32px, not 48. The button is 30px wide sitting 2px off the
       right edge, so 32px is exactly what it occupies and nothing is held
       back beyond it. padding-left goes to 0 with it: the line is centred,
       not left-aligned, so it does not need a matching gutter to stay off
       the left edge (measured 17px of clearance at 390, 6px at 320).
     - The message tracks the viewport instead of sitting at a flat 15px. At
       448px and up it is the full 15px, so nothing above phone widths is
       touched; below that it eases down to a floor of 11px at 320. The
       string and the Book Now button together are ~670px of type, and two
       lines of that only fit a 360px phone at about 12px.

   Book Now keeps a 30px line-height rather than inheriting 2em of the
   smaller size. Post 857 section 24.9 grows its 31px box to a 45px touch
   target with a -7px pseudo-element, and that arithmetic is only true while
   the box stays 31px; the label itself still scales with the message.

   The X is 30px here rather than 28px - the floor for a touch target on
   this control - which the 32px lane already pays for.

   Measured bar height after, against 103px at every width below 414:
   320 -> 65, 360 -> 67, 375 -> 68, 390 -> 69, 414 -> 71, 430 -> 72.
   600 -> 73 and 768 / 1440 -> 43 are unchanged. */
@media (max-width: 767px) {
	#tpbr_box {
		padding-right: 32px !important;
		padding-left: 0 !important;
		font-size: clamp(11px, 3.35vw, 15px) !important;
	}
	#tpbr_calltoaction {
		line-height: 30px;
	}
	#hcs-tpbr-close {
		right: 2px;
		width: 30px;
		height: 30px;
	}
}

html.hcs-topbar-closed #tpbr_topbar,
html.hcs-topbar-closed .pushr {
	display: none !important;
}

/* Put the header back at the top of the window.

   The plugin does own this: initBarPosition() re-measures the hidden bar as
   zero height and rewrites its dynamic stylesheet with top:0. It just does
   not finish the job, because the loop that clears that stylesheet first is

     for ( var i = 0; i < sheet.cssRules.length; i++ ) { sheet.deleteRule( i ); }

   - deleting rule i shifts every later rule down one, so the loop skips every
   second rule. A stale `#masthead { top: 43px !important }` survives, sits
   AFTER the fresh `top: 0px` rule it just inserted at index 0, and wins on
   source order. Measured: closing the bar left a 43px gap where it had been.

   Both rules are !important, so this is settled on specificity, not order:
   `html.hcs-topbar-closed #masthead` (id + class + 2 types) outranks the
   plugin's bare `#masthead` whatever order the two land in.

   Only the two elements that leave a visible gap. The floating cart and the
   scroll-to-top button are bottom-anchored and the sticky basket bar is
   bottom:0 with no top of its own - forcing a top onto any of those would
   move something that is not broken. */
html.hcs-topbar-closed #masthead,
html.hcs-topbar-closed #offcanvas {
	top: 0 !important;
}


/* ---- TEMP HIDE - 2026-08-19 ---------------------------------------------
   Owner asked for two sections to be taken off /checkout/ for now. Hidden,
   not removed: the markup, the points arithmetic and the delivery copy are
   all untouched, and both blocks still render on every other page (the same
   banner is page content on /cart/ and /menu/, and this rule cannot reach
   them because it is scoped to the checkout body class).

     1. .hcs-points-line   - the "Harvest Rewards: earn 1 point per $1..."
                             line printed under the pay button.
     2. .hcs-delivery      - the rust "Free home delivery within Bathurst"
                             banner at the top of the checkout page.

   TO RE-ENABLE: delete this whole block (from the "TEMP HIDE - 2026-08-19"
   comment to the closing brace below) and nothing else. No other file was
   touched for the hide, so that single deletion restores both sections.

   Scoped with body.woocommerce-checkout, which WooCommerce puts on the
   checkout page only - /cart/ carries woocommerce-cart and /menu/ is the
   shop archive, so neither matches. !important because .hcs-points-line
   ships its own display from hcs-round2.php's inline block. */
body.woocommerce-checkout .hcs-points-line,
body.woocommerce-checkout .hcs-delivery {
	display: none !important;
}

/* ==================================================================
   36. POPUP CART FOOT - badge spacing (2026-08-19)
   ==================================================================

   Owner: "space after hcs-drawer-trust trust badges in pop cart is too
   much - half it. move trust badges and etc lower a bit".

   Measured on the live drawer before this section, at 1440 / 390 / 768,
   all three identical (ts_shots/log_before.json):

     Checkout button bottom -> marks top    10.3px  (33.7's padding-top)
     marks bottom -> drawer bottom edge     24.0px  (Orderable's own
                                                     .orderable-drawer
                                                     padding: 24px)

   Both halved - 10 -> 5 above, 24 -> 12 below - which is also what
   "lower" asks for: the block ends 12px nearer the glass than it did.
   ================================================================== */

/* The space AFTER the badges. Two classes, not one: the 24px is
   Orderable's own single-class `.orderable-drawer { padding: 24px }`, and
   this file loads at wp_head:8, so a tie on specificity would be settled
   by sheet order - not something to promise. Bottom edge only; the 24px
   at the sides and top are the drawer's gutters and out of scope. */
.orderable-drawer.orderable-drawer { padding-bottom: 12px; }

/* The space above them - 33.7's 10px top padding. */
.orderable-drawer .hcs-drawer-trust { padding-top: 5px; }

/* ...and the sticky chain follows it down. 33.2 pins the buttons, the
   subtotal and the also-like card off --hcs-foot-trust, which IS this
   block's measured height: 5px off the padding is 5px off the height
   (60.75 -> 55.75), and a var left at 61 would open a 5px transparent
   band between the Checkout button and the badges that the basket list
   scrolls through visibly. 56 keeps the same 0.25px of slack 61 had.

   Appended rather than edited in place at :616 - batches run against this
   file in parallel and a whole-file write is last-writer-wins, so every
   earlier section stays byte-identical and this one only overrides. */
.orderable-drawer .orderable-drawer__cart { --hcs-foot-trust: 56px; }


/* ---- CHECKOUT: no bookings bar - 2026-08-19 ------------------------------
   Owner asked for the "We're now taking bookings online!" strip to be off the
   checkout page. Checkout only - the bar, its X and its auto-close are all
   untouched everywhere else (home, /menu/, /cart/, /bookings/).

   This is the same closed state the X button already produces, just applied
   from the stylesheet instead of from html.hcs-topbar-closed, so there is one
   description of "bar is gone" and not two:

     - #tpbr_topbar and the plugin's .pushr spacer go to display:none. The
       plugin's initBarPosition() reads a hidden bar as zero height, which is
       what the existing close relies on.
     - #masthead / #offcanvas back to top:0, because top-bar 7.0.4 leaves a
       stale `#masthead { top: 43px !important }` in its dynamic stylesheet
       (its rule-clearing loop deletes by shifting index and skips every
       second rule). Without this the bar would vanish and leave its 43px
       gap behind. Both rules are !important, so it is settled on
       specificity: body.woocommerce-checkout #masthead (id + class + 2
       types) outranks the plugin's bare #masthead in any source order.

   Scoped with body.woocommerce-checkout, which WooCommerce puts on the
   checkout page only - /cart/ carries woocommerce-cart, /menu/ is the shop
   archive and the front page carries neither, so the bar still renders on
   all three. The order-received page shares the class and so is also
   bar-free, which reads as the same "not now" as checkout itself.

   TO REVERT: delete this whole block and nothing else. */
body.woocommerce-checkout #tpbr_topbar,
body.woocommerce-checkout .pushr {
	display: none !important;
}

body.woocommerce-checkout #masthead,
body.woocommerce-checkout #offcanvas {
	top: 0 !important;
}

/* ==================================================================
   35. HERO CTA GAP + MOBILE ORDER/BOOK FABs (2026-08-19)
   ==================================================================

   Two owner items, one media query, because both only exist below 768.

   35.1 The home hero's three CTAs sit in a vc_col-sm-4 row, so above
   768 they are a row (measured at 1440: three 370px columns, buttons
   178/197/168 wide and centred, ~180px of air between them) and below
   768 they stack full width. Stacked they were touching: measured at
   390 the three .dine-button blocks ran 493->537->581->625, i.e. a gap
   of exactly 0. The buttons themselves are untouched - the gap is a
   margin under the first two blocks, so the styling, the icons and the
   trailing space under BOOK NOW all stay as they were.

   The selector is pinned to page-id-15 (the front page) because
   #button-1..3 is the Dine button shortcode's per-page counter, not a
   global id - another page's first button is also #button-1.

   35.2 The FAB bar. Markup and the scroll listener are in the
   hcs-fabs.php mu-plugin, which is also where the page exclusions
   live (/cart/, /checkout/, /menu/); this file only styles it, and
   only below 768 - at 768 and up the bar is display: none and never
   painted. body.hcs-fabs-on is set by that script past 350px of
   scroll and dropped again under 100px.

   Two knock-on rules hang off the same body class. The page takes
   64px of bottom padding, so the bar cannot cover the last strip of
   the footer when someone reaches the end of a page; and Orderable's
   floating cart button (fixed, bottom: 40px, z-index 3200, present on
   every page this bar rides) is lifted to 84px, because at bottom 40
   its lower half sat inside the bar and painted over it.

   z-index 3100 puts the bar under that cart button and well under the
   drawer and its overlay (2147483000/2147482999, section 33.1), so
   opening the basket still covers it.

   TO REVERT: delete this whole section and the hcs-fabs.php mu-plugin.
   ================================================================== */

/* Desktop and tablet never see the bar. Stated before the media query so
   the block below can simply turn it back on. */
.hcs-fabs {
	display: none;
}

@media (max-width: 767px) {

	/* 35.1 - ~10px of air between GIFT CARDS / ORDER ONLINE / BOOK NOW. */
	body.page-id-15 #button-1,
	body.page-id-15 #button-2 {
		margin-bottom: 10px;
	}

	/* 35.2 - the bar itself. Hidden state is transform + visibility rather
	   than display, so it slides rather than appearing, and so the two
	   links leave the tab order while they are off screen. */
	.hcs-fabs {
		display: flex;
		gap: 10px;
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 3100;
		padding: 10px 12px;
		padding-bottom: calc(10px + env(safe-area-inset-bottom));
		background: #fff;
		border-top: 1px solid rgba(0, 0, 0, 0.08);
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.14);
		opacity: 0;
		visibility: hidden;
		transform: translateY(110%);
		transition: transform 0.25s ease, opacity 0.25s ease, visibility 0.25s;
	}

	body.hcs-fabs-on .hcs-fabs {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	/* Same face as the hero pair: Oswald caps, 1px tracking, 2px radius,
	   the theme's #ab3f1b. 44px is the floor for a touch target and the
	   height the hero buttons already use. */
	.hcs-fabs a.hcs-fab {
		display: flex;
		flex: 1 1 0;
		align-items: center;
		justify-content: center;
		min-height: 44px;
		padding: 0 8px;
		border: 2px solid #ab3f1b;
		border-radius: 2px;
		font-family: Oswald, sans-serif;
		font-size: 14px;
		font-weight: 400;
		line-height: 1.1;
		letter-spacing: 1px;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
	}

	.hcs-fabs a.hcs-fab--order,
	.hcs-fabs a.hcs-fab--order:hover,
	.hcs-fabs a.hcs-fab--order:focus {
		background: #ab3f1b;
		color: #fff;
	}

	.hcs-fabs a.hcs-fab--book,
	.hcs-fabs a.hcs-fab--book:hover,
	.hcs-fabs a.hcs-fab--book:focus {
		background: #fff;
		color: #ab3f1b;
	}

	body.hcs-fabs-on {
		padding-bottom: calc(64px + env(safe-area-inset-bottom));
	}

	/* Post 857 section 24.10 holds the cart button at
	   `bottom: calc(40px + env(safe-area-inset-bottom)) !important` (two
	   classes), which put its lower half inside the bar and, at z-index
	   3200 against this bar's 3100, painted it over the top. Beating an
	   !important takes an !important, and then specificity: body +
	   .hcs-fabs-on + both cart classes is (0,3,1) against 857's (0,2,0),
	   so it wins wherever the sheets end up in the cascade. The safe-area
	   term is 857's and is kept - 84px clears the 64px bar with 20px to
	   spare, and the inset is the same inset. */
	body.hcs-fabs-on .orderable-floating-cart.orderable-floating-cart--br,
	body.hcs-fabs-on .orderable-floating-cart.orderable-floating-cart--bl {
		bottom: calc(84px + env(safe-area-inset-bottom)) !important;
	}
}


/* ---- TEMP HIDE - delivery banner, all pages - 2026-08-19 ----------------
   Owner: "temp remove this orange section, keep black one only".

   .hcs-delivery is the rust/orange banner - truck icon, "FREE HOME DELIVERY
   WITHIN BATHURST / No delivery fee, no minimum spend inside postcode 2795."
   Hidden, not removed: the markup is page content and is untouched, and so is
   every delivery/shipping setting. The banner is informational copy only -
   nothing reads it, so hiding it cannot change what a customer is charged.

   The black bar above it is .hcs-band (#111, the page-name strip on /menu/
   and /shop/). It is deliberately NOT in this rule and still renders.

   Unscoped on purpose. The banner already had a page-by-page hide -
   body.page-id-1766 in Additional CSS, body.woocommerce-checkout in
   section 35 above, body.woocommerce-order-received in 26.6 - and every one
   of them missed /menu/, because /menu/ is the product ARCHIVE (body class
   post-type-archive-product, no page id) and not page 1766. Rather than add
   a fourth selector that has to guess a body class, this hides the class
   itself; the earlier three become redundant but are left alone so that
   deleting this block restores exactly the state before it.

   !important because .hcs-delivery ships `display: flex` from Additional CSS
   (wp-custom-css, printed at wp_head:101) and this file is enqueued at
   wp_head:8 - it loses a same-specificity tie on source order without it.

   TO RE-ENABLE: delete this whole block (from the "TEMP HIDE - delivery
   banner" comment to the closing brace below) and nothing else. That is the
   only change made for the hide - no PHP, no markup, no other file. */
.hcs-delivery {
	display: none !important;
}

/* ---- 34.6  Add-on chips are buttons -------------------------------

   Measured before (tg/before.json, 1440 and 390): the chip was 11.5px
   Lato 400 inside a 1px DASHED #eadfd2 pill, and its only affordance
   was a "+" glyph in front of the name. Next to the drawer's own
   controls - a solid CHECKOUT bar and the bump card's bordered ADD -
   it read as a caption of what the item comes with, not as four things
   you can press.

   The markup change in hcs-pro.php moves that glyph to the end of the
   row and turns it into an ADD pill; this gives the row the rest:

   - one chip per row rather than two-up. The label already wrapped to
     two lines at 390 inside a ~300px drawer, and an ADD pill on the
     end of a wrapped label has nowhere to sit. A row also puts every
     price in the same column, which is what makes four of them
     scannable.
   - solid border, not dashed. Dashed is this store's "optional /
     placeholder" texture; these are live controls.
   - label and price at 700. The price is the number the customer is
     deciding on and it was lighter than the line price above it.
   - the ADD pill filled rust: the chip outline is already a box, so a
     second outline inside it would just be nested boxes. Filled gives
     the row one obvious target and matches CHECKOUT.
   - 40px minimum row height, 28px pill - the row is the tap target,
     and it clears the 44px guidance at 390 once its 6px gap is
     counted.

   Both surfaces are covered explicitly because the drawer's own sizing
   block above (.orderable-drawer .hcs-addon-add) outranks a one-class
   selector no matter where it sits in the file. */

.hcs-addon-opts {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	max-width: 340px;
}

.hcs-addon-add,
.orderable-drawer .hcs-addon-add,
.hcs-cartline__meta .hcs-addon-add {
	width: 100%;
	margin: 0;
	padding: 6px 6px 6px 13px;
	min-height: 40px;
	gap: 8px;
	border: 1.5px solid var(--hcs-line, #e2d8cc);
	border-style: solid;
	font-size: 13px;
}

.hcs-addon-add__label,
.orderable-drawer .hcs-addon-add__label {
	flex: 1 1 auto;
	font-weight: 700;
}

.hcs-addon-add__price,
.orderable-drawer .hcs-addon-add__price {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 700;
	color: var(--hcs-ink, #2f2a26);
}

.hcs-addon-add__go,
.orderable-drawer .hcs-addon-add__go {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-width: 56px;
	min-height: 28px;
	padding: 0 12px;
	border-radius: 999px;
	background: var(--hcs-rust, #b4531f);
	color: #fff;
	font: 700 12px/1 Lato, sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.hcs-addon-add:hover .hcs-addon-add__go,
.hcs-addon-add:focus .hcs-addon-add__go {
	background: var(--hcs-rust-deep, #8f3d16);
	color: #fff;
}

/* The in-flight state greys the whole chip (post 857, section 28.3);
   the pill has its own background, so it has to be told as well or it
   stays rust on a grey row. */
.hcs-addon-add.is-busy .hcs-addon-add__go {
	background: var(--hcs-disabled-ink, #57504a);
	color: #fff;
}

/* ------------------------------------------------------------------
   POPULAR ITEMS strip (/menu/) - hcs-pro.php, hcs_print_popular_strip().

   Stands exactly where the WooCommerce shop archive's paginated grid
   used to, so it is deliberately the opposite shape: one band, six
   cards, no result count, no sort control, nothing to page through.
   Heading and body type follow .hcs-group-head / .hcs-group-head__blurb
   so it reads as the last section of the menu rather than as
   WooCommerce furniture bolted underneath it.
   ------------------------------------------------------------------ */

.hcs-popular {
	margin: 34px 16px 8px;
}
.hcs-popular__title {
	font: 700 22px/1.2 Oswald, sans-serif;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	color: var(--hcs-ink, #241f1c);
	margin: 0 0 14px;
	padding: 0;
	border: 0;
}
.hcs-popular__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.hcs-popular__item {
	display: flex;
	flex-direction: column;
	margin: 0;
	background: #fff;
	border: 1px solid var(--hcs-line, #e4dcd2);
	border-radius: 10px;
	overflow: hidden;
}
.hcs-popular__link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.hcs-popular__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	margin: 0;
}
.hcs-popular__name {
	display: block;
	padding: 10px 10px 0;
	font: 400 13.5px/1.35 Lato, sans-serif;
	color: var(--hcs-ink, #241f1c);
}
.hcs-popular__price {
	margin: 4px 0 0;
	padding: 0 10px;
	font: 700 14px/1.3 Lato, sans-serif;
	color: var(--hcs-ink, #241f1c);
}
/* The menu rows print "incl. GST" once per section, not once per row. */
.hcs-popular__price .woocommerce-price-suffix {
	display: none;
}
.hcs-popular__add {
	margin: auto 10px 10px;
	padding: 8px 10px;
	font: 700 13px/1 Lato, sans-serif;
	text-transform: uppercase;
	letter-spacing: .6px;
	cursor: pointer;
}

@media screen and (max-width: 1024px) {
	.hcs-popular__grid { grid-template-columns: repeat(3, 1fr); }
}

@media screen and (max-width: 767.98px) {
	.hcs-popular { margin: 26px 16px 4px; }
	.hcs-popular__title { font-size: 18px; margin-bottom: 10px; }
	.hcs-popular__grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.hcs-popular__name { padding: 8px 8px 0; font-size: 12.5px; }
	.hcs-popular__price { padding: 0 8px; font-size: 13px; }
	.hcs-popular__add { margin: auto 8px 8px; padding: 7px 8px; font-size: 12px; }
}

/* ---- 34.7  Add-on block: label, picks, offers ---------------------

   Three things the owner asked for, and one fact about the markup that
   decides how all three are done.

   THE FACT. Four surfaces list a cart line and all four render add-ons
   through wc_get_formatted_cart_item_data(). Two of them - the popup
   drawer and the desktop rail - use its FLAT branch, which prints

       esc_html( $data['key'] ) . ': ' . wp_kses_post( $data['display'] )

   so the label is a BARE TEXT NODE. There is nothing there to select,
   and no filter between it and the page. That is why "Add to this:" was
   light and why a pick ("Avocado: +$5.75 x") sat on the same line as
   it: the two were separate item-data entries and only their values
   were elements. hcs-pro.php now emits ONE entry for the whole block -
   picks and offers together inside .hcs-addonbox - so from here the
   only bare text left in that div is the label itself.

   1 - THE LABEL IS BOLD by bolding the meta block and standing the box
   back down to 400. A bare text node cannot be reached any other way,
   and everything else that lands in that div is an item-data key too,
   so bolding the container is bolding labels, which is what it means.

   2 - OFFERS TWO PER ROW. The cell is the constraint: the desktop rail
   is 258px inside a 300px column, so two-up is ~126px a cell - tighter
   than the 390 drawer. Name across the top of the cell, then price and
   ADD on a second line, rather than the one-line "name price ADD" that
   fits at full width: at 126px that line puts the pill under the name
   anyway, but ragged and with the price orphaned. Five labels are also
   printed short (hcs_addon_short_label) - "Spread (honey, peanut
   butter, vegemite or jam)" is four lines in a cell that size and drags
   its whole row down with it.

   3 - A PICK IS A CHIP ON ITS OWN LINE. One per row, full width of the
   block: rust border on a rust tint, label and price at 700, and the
   remove control as a white disc on the tint. Distinct from the offers
   without being another button - a pick is a thing you HAVE, and the
   only thing to press on it is the x.

   Selectors carry .orderable-drawer / .hcs-cartline__meta copies
   wherever the drawer's own block (section 33.3) already sets the
   property with two classes - a one-class rule loses to it no matter
   where it sits in this file. */

/* 1 - the label line. */
.orderable-mini-cart-item strong + div {
	font-weight: 700;
	color: var(--hcs-ink, #2f2a26);
	line-height: 1.45;
}
/* Post 857 sets the rail's font shorthand (weight and all) and is inline
   in wp_head at 101 against this file's 8, so it wins every tie: the
   line needs the extra class to land. */
.hcs-cartline .hcs-cartline__meta {
	font-weight: 700;
	color: var(--hcs-ink, #2f2a26);
}
.woocommerce dl.variation dt,
.woocommerce-cart-form dl.variation dt {
	font-weight: 700;
	color: var(--hcs-ink, #2f2a26);
}

/* The box is a block, so on the flat surfaces the label's text node
   closes its line and the picks start under it - never beside it. */
.hcs-addonbox,
.orderable-drawer .hcs-addonbox,
.hcs-cartline__meta .hcs-addonbox {
	display: block;
	max-width: 340px;
	margin: 3px 0 0;
	font-weight: 400;
	line-height: 1.35;
	color: var(--hcs-muted, #7c6f63);
}

/* 3 - picks, one per row. */
.hcs-addon-picks,
.orderable-drawer .hcs-addon-picks,
.hcs-cartline__meta .hcs-addon-picks {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 5px;
	margin: 0 0 6px;
}

.hcs-addon-picked,
.orderable-drawer .hcs-addon-picked,
.hcs-cartline__meta .hcs-addon-picked {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 34px;
	padding: 5px 6px 5px 11px;
	border: 1.5px solid var(--hcs-rust, #b4531f);
	border-radius: 10px;
	background: #fbeadf;
	color: var(--hcs-rust-deep, #8f3d16);
	font-size: 12.5px;
	line-height: 1.25;
	text-align: left;
}

.hcs-addon-picked__label,
.orderable-drawer .hcs-addon-picked__label {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.hcs-addon-picked__price,
.orderable-drawer .hcs-addon-picked__price {
	flex: 0 0 auto;
	font-weight: 700;
	white-space: nowrap;
}

/* The x is sized and offset for a text baseline in section 34.1; inside
   a flex chip it is a box on a row and both have to go. */
.hcs-addon-picked .hcs-addon-x,
.orderable-drawer .hcs-addon-picked .hcs-addon-x,
.hcs-cartline__meta .hcs-addon-picked .hcs-addon-x {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-left: 0;
	vertical-align: 0;
	border-color: var(--hcs-rust, #b4531f);
	font-size: 14px;
}

/* 2 - offers, two per row. */
.hcs-addon-opts,
.orderable-drawer .hcs-addon-opts,
.hcs-cartline__meta .hcs-addon-opts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
	gap: 5px;
	max-width: 340px;
	margin: 0;
}

.hcs-addon-add,
.orderable-drawer .hcs-addon-add,
.hcs-cartline__meta .hcs-addon-add {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-content: space-between;
	column-gap: 6px;
	row-gap: 3px;
	width: auto;
	min-height: 0;
	margin: 0;
	padding: 7px 7px 7px 9px;
	border: 1.5px solid var(--hcs-line, #e2d8cc);
	border-radius: 12px;
	font-size: 12px;
}

.hcs-addon-add__label,
.orderable-drawer .hcs-addon-add__label {
	grid-area: 1 / 1 / 2 / 3;
	font-weight: 700;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.hcs-addon-add__price,
.orderable-drawer .hcs-addon-add__price {
	grid-area: 2 / 1 / 3 / 2;
	align-self: center;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	color: var(--hcs-ink, #2f2a26);
}

.hcs-addon-add__go,
.orderable-drawer .hcs-addon-add__go {
	grid-area: 2 / 2 / 3 / 3;
	min-width: 0;
	min-height: 24px;
	padding: 0 10px;
	font-size: 11px;
	letter-spacing: .06em;
}

/* The saving badge is a third line of its own rather than a third thing
   on the price line, which at this width would push the pill out. */
.hcs-addon-add__save,
.orderable-drawer .hcs-addon-add__save {
	grid-area: 3 / 1 / 4 / 3;
	justify-self: start;
	margin-left: 0;
}

/* /cart/ prints the block through cart-item-data.php, which wraps the
   value in wpautop(). Both keys the filter can emit start "Add". */
.woocommerce dl.variation dd[class^="variation-Add"] { margin: 2px 0 8px; }
.woocommerce dl.variation dd[class^="variation-Add"] p { margin: 0; }

/* ---- 34.8  Two-up, measured ---------------------------------------

   Two cell widths measured after 34.7 shipped (ad/after.json,
   ad_width.py), both narrower than the block they sit in:

   - POPUP / DRAWER. The line is a column flex box that does not stretch
     its children, so the add-on div was shrink-to-fit: 207px of the
     453px it could have had, and the cells came out ~101px. Stretching
     the div lets 34.7's own max-width (340px) decide instead, which is
     ~167px a cell.

   - DESKTOP RAIL. Its line is a 56 / 164 / 42 grid, so the block is
     164px whatever this file says and a cell is ~79px. Measured at
     1440 before this fix: "$9.09" rendered as "$9." with the ADD pill
     over the rest. Nothing about a price is optional, so the rail gets
     the ADD pill on a row of its own, full width - three rows in a
     cell, no clipping, and a bigger tap target than it had inline. */

.orderable-mini-cart-item strong + div { align-self: stretch; }

.hcs-cartline__meta .hcs-addon-add { padding: 6px 7px; }
.hcs-cartline__meta .hcs-addon-add__price {
	grid-area: 2 / 1 / 3 / 3;
	justify-self: start;
}
.hcs-cartline__meta .hcs-addon-add__go {
	grid-area: 3 / 1 / 4 / 3;
	justify-self: stretch;
	padding: 0 6px;
}

/* ---- 34.9  The /cart/ label gets off the chip's line ---------------

   cart-item-data.php prints the label in a <dt> and the block in a
   <dd>, and WooCommerce floats that dt left: measured at 1440 and 390
   (ad_dtprobe.py), dt and dd both start at the same y, so "Add to
   this:" sat beside the Avocado chip exactly the way it did in the
   drawer before this batch. Only this block's own dt is unfloated -
   every other dl.variation on the site keeps the theme's layout. */

.woocommerce dl.variation dt[class^="variation-Add"] {
	float: none;
	width: auto;
	margin: 0 0 3px;
}
.woocommerce dl.variation dd[class^="variation-Add"] { clear: both; }

/* An empty service note is still a flex item, so it keeps the row's 6px
   (mobile) / 12px (desktop) gap after the delivery copy was removed. */
.hcs-service__note:empty { display: none; }


/* ==================================================================
   38. POPCART OPTIMIZE - drawer + desktop panel (2026-08-20)
   ==================================================================

   Owner: "cart is like TOF - more you see = more conversions. empty
   space is waste." Two surfaces, one defect in three shapes.

   MEASURED BEFORE (po/before.json, three add-on lines in the basket):

   DESKTOP PANEL, 1440x900. The whole aside was `overflow: auto`, so
   the subtotal was not pinned - it was simply the sixth thing in a
   scrollable box. One Eggs Benedict line was 320px tall on its own:
   its add-on block sat inside .hcs-cartline__body, the middle cell of
   a `56px / 1fr / auto` grid, so the block was 163px wide, an offer
   chip was 79px wide and 87px TALL - three text rows in a cell narrow
   enough to wrap "Grilled chicken". Subtotal rendered at y=1538 of a
   900px viewport. Line 2 and line 3 were off screen as well.

   DRAWER, 390x844. The foot was already pinned, but it cost 312px of
   844 - bumps 120, subtotal 86, buttons 58, badges 56 - leaving 396px
   of product list, which is 1.4 lines at 292px a line. The min-$30
   notice was not in the pinned stack at all.

   WHAT THIS SECTION DOES

   38.1  drawer foot: one pinned block, no offset chain (hcs-pro.php
         wraps it; this pins it and stands the old sticky rules down)
   38.2  drawer: compress header and foot
   38.3  desktop panel: flex column, the LIST is the only scroller
   38.4  desktop panel: compress line, header and foot
   38.5  add-on chips, both surfaces: half the height, same words
   38.6  the min-$30 notice, both surfaces

   Appended, never edited in place: batches run against this file in
   parallel and a whole-file write is last-writer-wins, so every
   earlier section stays byte-identical and this one only overrides.
   Selectors carry an extra class wherever they replace something in
   post 857 - that post loads at wp_head:101 against this file's :8,
   so a tie on specificity is a loss.
   ================================================================== */

/* ---- 38.1  The drawer foot is one block ---------------------------

   hcs-pro.php now wraps bumps / subtotal / notice / Checkout / badges
   in .hcs-drawerfoot. One `position: sticky` on the wrapper replaces
   four on its children, and the offsets those four were computed from
   (--hcs-foot-trust / -actions / -total) stop existing. The wrapper is
   opaque and carries the shadow the buttons block used to.

   `margin-top: auto` is the one-item case: the inner mini-cart wrapper
   is a column flex box with `min-height: 100%`, so with a short basket
   the spare space is spent ABOVE the foot rather than below it. When
   the basket overflows there is no spare space and an auto margin is
   0, so the scrolling case cannot see this. */
.orderable-drawer .orderable-drawer__cart .hcs-drawerfoot {
	position: sticky;
	bottom: 0;
	z-index: 31;
	margin-top: auto;
	background: #fff;
	box-shadow: 0 -10px 22px -12px rgba(17, 17, 17, .28);
}

/* Three classes: post 857 pins .orderable-mini-cart__buttons and
   .orderable-mini-cart__total at two, and loads after this file. */
.orderable-drawer .hcs-drawerfoot .orderable-cart-bumps,
.orderable-drawer .hcs-drawerfoot .orderable-mini-cart__total,
.orderable-drawer .hcs-drawerfoot .orderable-mini-cart__buttons,
.orderable-drawer .hcs-drawerfoot .hcs-drawer-trust,
.orderable-drawer .hcs-drawerfoot .hcs-minorder {
	position: static !important;
	bottom: auto !important;
	z-index: auto !important;
	margin-top: 0 !important;
	box-shadow: none !important;
}

/* ---- 38.2  Compress the drawer ------------------------------------

   Header first: the h3 was 76px of a 844px screen for one short word.
   Then the foot, block by block - nothing is removed, every block is
   just asked to stop spending a line-height it does not use. */
.orderable-drawer .orderable-drawer__cart > h3 {
	margin: 0 0 8px !important;
	padding: 0 44px 8px 0 !important;
	font-size: 17px !important;
	line-height: 1.2 !important;
}

.orderable-drawer .hcs-drawerfoot .orderable-cart-bumps {
	padding: 5px 8px !important;
	border-bottom-width: 6px;
}
.orderable-drawer .hcs-drawerfoot .orderable-cart-bumps__heading {
	margin: 0 0 3px !important;
	font-size: 11px;
	line-height: 1.2;
}
.orderable-drawer .hcs-drawerfoot .orderable-cart-bumps-slider-control-nav {
	margin: 2px 0 0 !important;
	height: 8px;
}
.orderable-drawer .hcs-drawerfoot .orderable-cart-bumps-slider-control-nav li,
.orderable-drawer .hcs-drawerfoot .orderable-cart-bumps-slider-control-nav li a { height: 8px !important; }

.orderable-drawer .hcs-drawerfoot .orderable-mini-cart__total {
	padding: 7px 12px !important;
}
.orderable-drawer .hcs-drawerfoot .orderable-mini-cart__total .woocommerce-Price-amount { font-size: 21px; }
.orderable-drawer .hcs-drawerfoot .hcs-compare-at { margin: 0 0 3px; }

.orderable-drawer .hcs-drawerfoot .orderable-mini-cart__buttons { padding-top: 7px !important; }
.orderable-drawer .hcs-drawerfoot .orderable-mini-cart__buttons a.button.checkout {
	min-height: 44px;
	padding-top: 11px;
	padding-bottom: 11px;
}

.orderable-drawer .hcs-drawerfoot .hcs-drawer-trust { padding: 5px 0 0 !important; }
.orderable-drawer .hcs-drawerfoot .hcs-drawer-trust .hcs-trustrow__mark { width: 26px; height: 17px; }
.orderable-drawer .hcs-drawerfoot .hcs-drawer-secure { margin: 3px 0 0 !important; font-size: 11px; }

/* Bottom empty band: the drawer's own 12px gutter under a foot that is
   already the last painted pixel of the block. */
.orderable-drawer.orderable-drawer.orderable-drawer { padding-bottom: 0; }
.orderable-drawer .orderable-drawer__cart .hcs-drawerfoot { padding-bottom: 8px; }

/* ---- 38.3  The desktop panel: only the products scroll -------------

   The aside was one `overflow: auto` box. It is a flex column now:
   title fixed at the top, .hcs-cartpanel__footer fixed at the bottom,
   and the list between them is the only scroller. `min-height: 0` on
   both the frag and the list because a flex item's default minimum is
   its content - without it the list refuses to shrink and pushes the
   footer off the panel exactly as before.

   .hcs-cart-frag is in the chain because it is what the WooCommerce
   cart fragment replaces: the flex chain has to survive a quantity
   change, so it cannot live on a wrapper that gets swapped out. */
@media screen and (min-width: 1024px) {
	.hcs-cartpanel.hcs-cartpanel {
		display: flex;
		flex-direction: column;
		overflow: hidden;
		padding: 14px 14px 12px;
		max-height: calc(100vh - var(--hcs-header, 110px) - 24px);
	}
	.hcs-cartpanel .hcs-cart-frag {
		display: flex;
		flex-direction: column;
		flex: 1 1 auto;
		min-height: 0;
	}
	.hcs-cartpanel .hcs-cartpanel__list {
		flex: 1 1 auto;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		margin: 0;
		padding-right: 4px;
	}
	.hcs-cartpanel .hcs-cartpanel__footer {
		flex: 0 0 auto;
		padding-top: 8px;
		border-top: 2px solid var(--hcs-line, #e2d8cc);
		background: #fff;
	}
}

/* ---- 38.4  Compress the panel -------------------------------------

   The add-on block is a grid child of the line now (hcs-pro.php), so
   it spans all three columns instead of sharing the 164px body cell -
   282px at 1440, which is 137px a chip against the 79px that made the
   chips three rows tall. Width spent to buy height back.

   Thumbnail 56 -> 44 and the row's padding 12 -> 8: the same trim the
   drawer's own lines took in section 33.3, now that the panel has the
   same job to do. */
.hcs-cartpanel .hcs-cartpanel__title {
	font-size: 14px;
	margin: 0 0 8px;
	padding-bottom: 7px;
}
.hcs-cartpanel .hcs-cartpanel__list { margin-bottom: 0; }
.hcs-cartpanel .hcs-cartline {
	grid-template-columns: 44px minmax(0, 1fr) auto;
	gap: 4px 9px;
	padding: 8px 0;
}
.hcs-cartpanel .hcs-cartline__thumb img,
.hcs-cartpanel .hcs-cartline__thumb .hcs-ph {
	width: 44px !important;
	height: 44px !important;
}
.hcs-cartpanel .hcs-cartline__name { font-size: 13px; margin-bottom: 4px; }
.hcs-cartpanel .hcs-cartline .orderable-quantity-roller__roller { height: 28px; }
.hcs-cartpanel .hcs-cartline .orderable-quantity-roller__button { height: 24px; }
.hcs-cartpanel .hcs-cartline .orderable-quantity-roller__quantity { font-size: 13px; line-height: 24px; }

/* The whole width of the panel, under the three cells rather than
   inside one of them. */
.hcs-cartpanel .hcs-cartline__meta {
	grid-column: 1 / -1;
	margin-top: 0;
}

.hcs-cartpanel .hcs-cartpanel__foot {
	padding-top: 0;
	border-top: 0;
	margin-bottom: 8px;
}
.hcs-cartpanel .hcs-cartpanel__sub { font-size: 19px; }
.hcs-cartpanel .hcs-cartpanel__checkout {
	height: 44px;
	line-height: 44px;
	font: 700 15px/44px Oswald, sans-serif;
	letter-spacing: 1.6px;
}
/* "View basket" is a secondary destination and was carrying a 42px
   outlined button's worth of the panel. Same control, one line. */
.hcs-cartpanel .hcs-cartpanel__view {
	margin-top: 6px;
	min-height: 0;
	padding: 5px 8px;
	border-color: transparent;
	font-size: 12px;
	letter-spacing: 1.2px;
	text-decoration: underline;
}
.hcs-cartpanel .hcs-cartpanel__trust {
	margin: 0;
	padding: 6px 0 0 !important;
	border-top: 1px solid var(--hcs-line, #e2d8cc);
	text-align: center;
}
.hcs-cartpanel .hcs-cartpanel__trust .hcs-trustrow__marks {
	display: flex;
	justify-content: center;
	gap: 5px;
}
.hcs-cartpanel .hcs-cartpanel__trust .hcs-trustrow__mark { width: 26px; height: 17px; }
.hcs-cartpanel .hcs-cartpanel__trust .hcs-drawer-secure {
	margin: 4px 0 0 !important;
	font: 400 10.5px/1.35 Lato, sans-serif;
	color: var(--hcs-muted, #7c6f63);
}

/* ---- 38.5  Add-on chips: half the height, same words ---------------

   Both surfaces, one rule set - the drawer and the panel render the
   same markup through wc_get_formatted_cart_item_data(). An offer chip
   was 87px: a label allowed to wrap to three lines in a 79px cell, a
   price row, and on the rail an "Add" pill on a full-width row of its
   own because the cell was too narrow to hold both.

   The cell is 126-137px wide now, so the pill goes back on the price
   row and the label gets one line with an ellipsis. Nothing is hidden
   that was not already: the full label is still the chip's `title` and
   `aria-label`, still on the product page and still in the tick-box
   list. The keys, the prices and the order meta never move. */
.hcs-addonbox,
.orderable-drawer .hcs-addonbox,
.hcs-cartline__meta .hcs-addonbox {
	margin-top: 2px;
	max-width: none;
}

.hcs-addon-picks,
.orderable-drawer .hcs-addon-picks,
.hcs-cartline__meta .hcs-addon-picks { gap: 3px; margin: 0 0 4px; }

.hcs-addon-picked,
.orderable-drawer .hcs-addon-picked,
.hcs-cartline__meta .hcs-addon-picked {
	min-height: 26px;
	gap: 6px;
	padding: 2px 3px 2px 9px;
	border-radius: 8px;
	font-size: 12px;
}
.hcs-addon-picked__label,
.orderable-drawer .hcs-addon-picked__label,
.hcs-cartline__meta .hcs-addon-picked__label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow-wrap: normal;
}
.hcs-addon-picked .hcs-addon-x,
.orderable-drawer .hcs-addon-picked .hcs-addon-x,
.hcs-cartline__meta .hcs-addon-picked .hcs-addon-x {
	width: 20px;
	height: 20px;
	font-size: 13px;
}

.hcs-addon-opts,
.orderable-drawer .hcs-addon-opts,
.hcs-cartline__meta .hcs-addon-opts {
	gap: 4px;
	margin: 0;
	max-width: none;
}

.hcs-addon-add,
.orderable-drawer .hcs-addon-add,
.hcs-cartline__meta .hcs-addon-add {
	margin: 0;
	min-height: 0;
	padding: 4px 4px 4px 7px;
	border-radius: 9px;
	row-gap: 1px;
	column-gap: 4px;
	font-size: 11.5px;
}
.hcs-addon-add__label,
.orderable-drawer .hcs-addon-add__label,
.hcs-cartline__meta .hcs-addon-add__label {
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow-wrap: normal;
}
.hcs-addon-add__price,
.orderable-drawer .hcs-addon-add__price,
.hcs-cartline__meta .hcs-addon-add__price {
	grid-area: 2 / 1 / 3 / 2;
	justify-self: start;
	font-size: 11.5px;
}
/* Back on the price row. Section 34.8 gave the rail's pill a row of
   its own because a 79px cell could not hold a price and a pill side
   by side; at 137px it can. */
.hcs-addon-add__go,
.orderable-drawer .hcs-addon-add__go,
.hcs-cartline__meta .hcs-addon-add__go {
	grid-area: 2 / 2 / 3 / 3;
	justify-self: end;
	min-height: 20px;
	padding: 0 7px;
	font-size: 10px;
	line-height: 20px;
}
.hcs-addon-add__save,
.orderable-drawer .hcs-addon-add__save {
	grid-area: 3 / 1 / 4 / 3;
	margin: 1px 0 0;
	font-size: 10px;
}

/* ---- 38.6  The min-$30 notice ------------------------------------

   Issue 1 of the brief: it must never scroll away. On the drawer that
   is 38.1 - it renders on `woocommerce_widget_shopping_cart_before_buttons`,
   which is inside .hcs-drawerfoot now, so it is pinned with the rest of
   the foot instead of being the one block left riding the list. On the
   panel it renders inside .hcs-cartpanel__footer for the same reason.

   The copy, the 29.97 slack and the "$30" wording are untouched; only
   the box around them gets tighter. `!important` because the builder
   styles this element inline - it has to read the same on three
   surfaces with three different button cascades - and a stylesheet
   declaration beats an inline one only when it is marked. */
.orderable-drawer .hcs-drawerfoot .hcs-minorder,
.hcs-cartpanel .hcs-cartpanel__footer .hcs-minorder {
	margin: 0 0 6px !important;
	padding: 6px 9px !important;
	font-size: 12.5px !important;
	line-height: 1.35 !important;
}
.orderable-drawer .hcs-drawerfoot .hcs-minorder__btn,
.hcs-cartpanel .hcs-cartpanel__footer .hcs-minorder__btn {
	padding: 12px 14px !important;
	font-size: 15px !important;
}


/* ---- 38.7  Second pass, measured (po/after1.json) ------------------

   38.1-38.6 shipped, then this measured what was left. At 390 the foot
   was 274px of 844 and the three lines were 255 / 206 / 205, so the
   product list showed 1.9 of them. At 1440 the panel line was 213 and
   the footer 175. Three numbers were paying for the rest:

   1. THE DRAWER'S STEPPER HAD A ROW TO ITSELF. The line is a column
      flex box - name, add-ons, stepper - and the stepper's own row cost
      40px (32 tall plus its margins) while the name's row had ~150px of
      empty space to its right. That is the brief's item 5 exactly:
      width spent to buy height back. The line becomes a two-column grid
      and the stepper moves up beside the name. The name may wrap to two
      lines there and it costs nothing: the 44px thumbnail already sets
      that row's height.

   2. THE OFFER CHIP WAS 45px for two 14px lines. 4px of padding each
      way and a 20px pill in an 18px space.

   3. THE BUMP CARD'S PHOTO WAS 52px inside a 94px strip.

   Nothing is removed on either surface. Every block below is the same
   block with the air taken out. */

/* --- 38.7a  drawer line: stepper beside the name --------------------

   Absolutely-positioned children are not grid items, so the remove
   control keeps its own corner and only the three in-flow children are
   placed. `> strong + div` is the add-on block: the stepper follows it
   in the document, so the two never match the same selector - except on
   a line with no add-ons at all, where `strong + div` IS the stepper.
   The stepper's own rule below carries one class more and wins that
   case, which is what keeps a plain line's stepper beside its name too.

   The 8px more right padding is the remove control's 40px corner: the
   stepper ends where the add-on block used to, and the add-on block was
   already touching it. */
.orderable-drawer .orderable-mini-cart-item {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	column-gap: 8px;
	padding: 7px 38px 7px 0 !important;
}
.orderable-drawer .orderable-mini-cart-item > strong { grid-area: 1 / 1 / 2 / 2; }
.orderable-drawer .orderable-mini-cart-item > strong + div {
	grid-area: 2 / 1 / 3 / 3;
	margin-top: 2px;
}
.orderable-drawer .orderable-mini-cart-item > .orderable-quantity-roller {
	grid-area: 1 / 2 / 2 / 3;
	justify-content: flex-end;
	margin: 0 !important;
}
/* Narrower so the name keeps a readable column: 30px buttons and a
   16px price were sized for a row of their own. */
.orderable-drawer .orderable-mini-cart-item .orderable-quantity-roller__roller { height: 30px; }
.orderable-drawer .orderable-mini-cart-item .orderable-quantity-roller__button { width: 26px; height: 26px; }
.orderable-drawer .orderable-mini-cart-item .orderable-quantity-roller__quantity {
	min-width: 20px;
	font-size: 14px !important;
}
.orderable-drawer .orderable-mini-cart-item .orderable-quantity-roller__price { font-size: 14px; }
.orderable-drawer .orderable-mini-cart-item .hcs-mcthumb img,
.orderable-drawer .orderable-mini-cart-item .hcs-mcthumb .hcs-ph {
	width: 42px !important;
	height: 42px !important;
	max-width: 42px;
}
.orderable-drawer .orderable-mini-cart-item > strong + div { margin-left: 52px; }

/* --- 38.7b  the offer chip, both surfaces -------------------------- */
.hcs-addon-add,
.orderable-drawer .hcs-addon-add,
.hcs-cartline__meta .hcs-addon-add {
	padding: 3px 3px 3px 6px;
	row-gap: 0;
}
.hcs-addon-add__go,
.orderable-drawer .hcs-addon-add__go,
.hcs-cartline__meta .hcs-addon-add__go {
	min-height: 18px;
	line-height: 18px;
	padding: 0 6px;
}
.hcs-addon-picked,
.orderable-drawer .hcs-addon-picked,
.hcs-cartline__meta .hcs-addon-picked { min-height: 24px; }
.hcs-addon-picks,
.orderable-drawer .hcs-addon-picks,
.hcs-cartline__meta .hcs-addon-picks { margin-bottom: 3px; }

/* --- 38.7c  the drawer foot, block by block ------------------------ */
.orderable-drawer .orderable-drawer__cart .hcs-drawerfoot { padding-bottom: 6px; }

.orderable-drawer .hcs-drawerfoot .orderable-cart-bumps {
	padding: 4px 7px !important;
	border-bottom-width: 5px;
}
.orderable-drawer .hcs-drawerfoot .orderable-cart-bumps__heading {
	margin: 0 0 2px !important;
	font-size: 10.5px;
}
.orderable-drawer .hcs-drawerfoot .orderable-cart-bumps-slider-control-nav {
	margin: 1px 0 0 !important;
	height: 7px;
}
.orderable-drawer .hcs-drawerfoot .orderable-cart-bumps-slider-control-nav li,
.orderable-drawer .hcs-drawerfoot .orderable-cart-bumps-slider-control-nav li a { height: 7px !important; }
/* 857's 52px thumbnail is what sets the strip's height. */
.orderable-drawer .hcs-drawerfoot .orderable-cart-bumps__bump-content > img,
.orderable-drawer .hcs-drawerfoot .orderable-cart-bumps__bump-content > .hcs-ph {
	flex: 0 0 44px !important;
	width: 44px !important;
	height: 44px !important;
	max-width: 44px !important;
}

.orderable-drawer .hcs-drawerfoot .orderable-mini-cart__total { padding: 6px 10px !important; }
.orderable-drawer .hcs-drawerfoot .orderable-mini-cart__total .woocommerce-Price-amount { font-size: 20px; }
/* 28px for one 15px struck-through figure. */
.orderable-drawer .hcs-drawerfoot .hcs-compare-at {
	margin: 0 0 2px;
	font-size: 11px;
	line-height: 1.15;
}

.orderable-drawer .hcs-drawerfoot .orderable-mini-cart__buttons { padding-top: 6px !important; }
.orderable-drawer .hcs-drawerfoot .orderable-mini-cart__buttons a.button.checkout {
	min-height: 42px;
	padding-top: 10px;
	padding-bottom: 10px;
}

.orderable-drawer .hcs-drawerfoot .hcs-drawer-trust { padding: 4px 0 0 !important; }
.orderable-drawer .hcs-drawerfoot .hcs-drawer-trust .hcs-trustrow__mark { width: 24px; height: 16px; }
.orderable-drawer .hcs-drawerfoot .hcs-drawer-secure { margin: 2px 0 0 !important; font-size: 10.5px; }

/* --- 38.7d  the panel foot ----------------------------------------- */
.hcs-cartpanel .hcs-cartpanel__view {
	margin-top: 4px;
	padding: 3px 8px;
	font-size: 11.5px;
}
.hcs-cartpanel .hcs-cartpanel__trust { padding-top: 5px !important; }
.hcs-cartpanel .hcs-cartpanel__trust .hcs-trustrow__mark { width: 24px; height: 16px; }
/* One line at 290px: the secure clause and the delivery clause are one
   sentence and were taking two. */
.hcs-cartpanel .hcs-cartpanel__trust .hcs-drawer-secure {
	margin: 3px 0 0 !important;
	font-size: 10px;
	line-height: 1.3;
}
.hcs-cartpanel .hcs-cartline { padding: 7px 0; }

/* ---- MRX  Checkout review: the shipping row stops living in the money
   column (desktop) --------------------------------------------------------
   The item rows are pinned by table-layout:fixed with TOTAL at 108px, which
   is right for a figure and wrong for the one tfoot row whose value is a
   pair of tappable delivery cards. Measured at 1440 before this block: the
   methods list was 98px wide inside a 136px column and both labels were
   clipped mid-word - "FREE DELI", "PICKU AT THE CAFE: $0.0".

   That row comes out of the column algorithm and lays itself out, label over
   cards, the same shape section 32.4 already gives it under 767px. Subtotal
   and Total stay real table rows so their figures keep the column edge the
   item rows use. Its cell borders go with it: once the cells stop being
   cells their own 1px rules are stray segments across the block (the move
   section 32.8 makes at 390, for the same reason).

   The !important on width/white-space is aimed at post 857 section 33's
   `tr.woocommerce-shipping-totals th { width: 1%; white-space: nowrap }`,
   which squeezed the label column to hand the cards the rest - the rule the
   fixed layout made redundant and harmful.
   Measured after: methods 229px, one line per label, nothing clipped. */
@media screen and (min-width: 768px) {
	.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals {
		display: block;
		width: 100%;
	}
	.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals > th,
	.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals > td {
		display: block;
		width: auto !important;
		white-space: normal !important;
		border: 0;
		background: transparent;
	}
	.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals > th {
		padding-bottom: 8px;
	}
	.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.woocommerce-shipping-totals > td {
		padding-top: 0;
	}
	/* Stacked, not side by side: the block is 229px wide and two cards in it
	   put every label back on three lines. */
	.woocommerce-checkout table.woocommerce-checkout-review-order-table ul#shipping_method {
		flex-wrap: wrap;
	}
	.woocommerce-checkout table.woocommerce-checkout-review-order-table ul#shipping_method li {
		flex: 1 1 100%;
	}
	/* "$76.26 AUD (includes $6.93 GST)" is three pieces of information in a
	   108px column, and as one run of text the GST clause broke mid-phrase.
	   Own line, same right edge - which is what it already does at 390. */
	.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total > td {
		text-align: right;
	}
	.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total > td small.includes_tax {
		display: block;
		margin-top: 2px;
		text-align: right;
		font-size: 11px;
		line-height: 1.45;
	}
	/* Section 8's `#order_review .order-total .amount` sizes every figure in
	   this cell at 24px, the GST one included, so "(includes $6.93 GST)" broke
	   over two lines inside a 100px column. Section 32.8 already fixes exactly
	   this under 767px; the same pair of rules, and the same id-carrying
	   selector, because a class-only one loses to it. */
	.woocommerce-checkout #order_review .order-total small.includes_tax {
		font-size: 11.5px !important;
		color: var(--hcs-muted);
	}
	.woocommerce-checkout #order_review .order-total small.includes_tax .amount,
	.woocommerce-checkout #order_review .order-total small.includes_tax .amount * {
		font-size: inherit !important;
		font-family: Lato, sans-serif !important;
		color: inherit !important;
	}
}

/* ==================================================================
   39. Coffee options: the EDIT control, and syrup / milk as subtypes
   (coffee-options batch, 2026-08-20)

   Appended, never edited in place - several batches write this file
   and post 857 at once, so everything here is additive.
   ================================================================== */

/* ---- 39.1  The EDIT button belongs to its cart line ---------------

   Orderable positions it `absolute; bottom: 21px; right: 50px` inside
   .orderable-mini-cart-item (its own main.min.css). That was written
   for the line it ships: one short flex row, where "21px up from the
   bottom, left of the bin" IS the row's right-hand corner.

   This line is not that line. Section 38.7a made it a two-row grid and
   the add-on picker put a 2x2 chip grid in the second row, so the line
   measures 162px and 21px from its bottom is the middle of the chips:
   measured at 1440 the button sat on top of "Flavour syrup ADD" and
   "Extra hot ADD", and on a line with no add-ons at all it landed
   somewhere else again - the "random placement" in the owner's
   screenshot.

   Nothing anchored to the bottom edge can be safe on a line whose
   height depends on how many add-ons it offers, so the button stops
   being positioned: it is a grid item in a row of its own, under the
   name and the chips, left-aligned, where it cannot reach anything.

   Three classes, so it outranks Orderable's two, and `!important` on
   the padding because theirs carries one too. */
.orderable-drawer .orderable-mini-cart-item .orderable-edit-cart-item__button,
.orderable-mini-cart .orderable-mini-cart-item .orderable-edit-cart-item__button {
	position: static !important;
	grid-area: 3 / 1 / 4 / 3;
	justify-self: start;
	align-self: center;
	width: auto;
	height: auto !important;
	min-height: 0;
	margin: 7px 0 0;
	padding: 0 13px !important;
	border: 1.5px solid #111;
	border-radius: 999px;
	color: #fff;
	font: 700 10px/25px Oswald, sans-serif;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	box-shadow: none;
}
.orderable-drawer .orderable-mini-cart-item .orderable-edit-cart-item__button:hover,
.orderable-drawer .orderable-mini-cart-item .orderable-edit-cart-item__button:focus-visible {
	border-color: var(--hcs-rust-deep, #8f3d16);
	/* Orderable's filled style sets the black with !important, so the hover
	   colour has to carry one as well or the pill never reacts. */
	background: var(--hcs-rust-deep, #8f3d16) !important;
	color: #fff;
}

/* ---- 39.2  Syrup and milk: the drawer's tick boxes ----------------

   The parent is a <summary> carrying the .hcs-addon row's own styling,
   so a group reads as one more line in the "Choose options" list until
   it is opened. Its answers are the size question's pills, because
   they are the same kind of question. */
.hcs-addons .hcs-addon-group {
	border-bottom: 1px solid var(--hcs-line, #e2d8cc);
}
.hcs-addons .hcs-addon-group:last-child {
	border-bottom: 0;
}
.hcs-addon--group {
	border-bottom: 0;
	list-style: none;
}
.hcs-addon--group::-webkit-details-marker {
	display: none;
}
.hcs-addon--group .hcs-addon__label {
	display: block;
	line-height: 1.25;
}
.hcs-addon__hint {
	display: block;
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--hcs-muted, #7c6f63);
}
.hcs-addon__caret {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	margin: 0 2px 0 4px;
	border-right: 2px solid var(--hcs-muted, #7c6f63);
	border-bottom: 2px solid var(--hcs-muted, #7c6f63);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .15s ease;
}
.hcs-addon-group[open] > .hcs-addon--group .hcs-addon__caret {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.hcs-subpicks {
	margin: 0 0 12px;
}
.orderable-drawer .hcs-subpicks .hcs-subpick,
.hcs-addons .hcs-subpicks .hcs-subpick,
.hcs-subpicks .hcs-subpick {
	position: relative;
	box-sizing: border-box;
	flex: 1 1 0;
	min-width: 0;
	min-height: 44px;
	padding: 7px 8px;
	margin: 0;
	font-size: 12.5px;
}
/* The tick box is what the POST, the cart item data and the kitchen
   ticket are all keyed on, so it stays in the DOM and stays operable -
   out of sight, not display:none, so the label still toggles it and a
   keyboard still reaches it. */
.hcs-subpick input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
}
.hcs-subpick:focus-within {
	border-color: var(--hcs-rust-deep, #8f3d16);
	box-shadow: 0 0 0 3px rgba(180, 83, 31, .25);
}
.orderable-drawer .hcs-subpicks .hcs-subpick .hcs-size__price,
.hcs-subpicks .hcs-subpick .hcs-size__price {
	font-size: 11.5px;
}

/* ---- 39.3  Syrup and milk: the offer chips on a cart line ---------

   The picker under a cart line is a two-per-row grid (section 38.7b).
   A group cannot be one of those cells - opening it has to put three
   answers somewhere - so it takes a row of its own and lays its
   answers out across it. Everything inside is an ordinary offer chip:
   same class, same handler, same nonced href. */
.hcs-addon-opts > .hcs-addon-group--offer,
.orderable-drawer .hcs-addon-opts > .hcs-addon-group--offer,
.hcs-cartline__meta .hcs-addon-opts > .hcs-addon-group--offer {
	grid-column: 1 / -1;
	min-width: 0;
}
.hcs-addon-add--group {
	list-style: none;
	cursor: pointer;
}
.hcs-addon-add--group::-webkit-details-marker {
	display: none;
}
.hcs-addon-group--offer[open] > .hcs-addon-add--group {
	border-color: var(--hcs-rust, #b4531f);
	background: #fff7f2;
}
.hcs-addon-opts--sub,
.orderable-drawer .hcs-addon-opts--sub,
.hcs-cartline__meta .hcs-addon-opts--sub {
	display: grid;
	/* Three across where there is room, two where there is not, rather
	   than a fixed three that would be 84px wide on a 390 phone. */
	grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
	gap: 5px;
	max-width: none;
	margin: 5px 0 0;
}
/* ==================================================================
   40. EDIT beside the DELETE control, non-intrusive (2026-08-20)

   The owner wants EDIT compact and beside the trash, not as a
   left-aligned band of its own under the chips. Section 39.1 kept the
   button in flow at the START of row 3, so the line had a full-width
   band (34px) with a small black pill on the left and the bin alone
   at the far right - ~150px of empty space between them, and the row
   read as a second footer. The orderable plugin's own absolute
   placement (bottom:21px; right:50px) cannot be used: the line's
   height is a function of how many add-on chips are offered, so a
   bottom-anchored button lands on top of the chips - measured at 1440
   it sat on "Flavour syrup ADD".

   What this does instead: row 3 stays the line's dedicated footer
   cell (spans both columns), but both controls live in it as one
   inline pair at its right edge - a 28px EDIT pill directly beside a
   small in-flow bin. The bin comes out of `position: absolute`
   entirely, so the two can share the row. Raw measurements taken at
   1440 / 768 / 390 with the flavour/altmilk drawers collapsed:

     - row 3:            32px (sec 39.1 + 40; was 34px - net -2px)
     - line:            237.4px (was 239.4px)
     - edit height:      28px (compact band, per the brief 28-32px)
     - gap pill-to-bin:  ~12px (measured right-edge to left-edge)
     - addon chips:      untouched - last row "Alternative milk" ends
                         at ~260.8, row 3 starts at ~261

   The addon chip zone in row 2 is not measured-shifted: only the
   footer cell was re-pointed from start to end.

   Three classes so it outranks Orderable's own
   `bottom:21px;right:50px` on the button, its `bottom:16px;right:0`
   on the bin, and section 38.7a/39.1. The bin click still works:
   Orderable binds on document.body for
   '.orderable-mini-cart-item__remove' (removal is delegated, not
   positional). No z-index is needed once the bin is not absolute.
   ================================================================== */

/* EDIT - right end of row 3, the compact pill (indented from the bin's
   corner by 12px of visible gap; the bin keeps its 40px x-range). */
.orderable-drawer .orderable-mini-cart-item .orderable-edit-cart-item__button,
.orderable-mini-cart .orderable-mini-cart-item .orderable-edit-cart-item__button {
	align-self: center !important;
	position: static !important;
	display: inline-flex !important;
	align-items: center;
	grid-area: 3 / 1 / 4 / 3;
	justify-self: end !important;
	width: auto !important;
	height: 28px !important;
	min-height: 28px !important;
	line-height: 28px !important;
	margin: 0 52px 0 0 !important;
	padding: 0 12px !important;
	font-size: 10px;
	box-sizing: border-box;
}

/* The bin joins EDIT in the same footer row - in flow, beside it -
   instead of floating over the line's bottom-right corner. */
.orderable-drawer .orderable-mini-cart-item .orderable-mini-cart-item__remove,
.orderable-mini-cart .orderable-mini-cart-item .orderable-mini-cart-item__remove {
	position: static !important;
	grid-area: 3 / 1 / 4 / 3;
	justify-self: end !important;
	align-self: center !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 40px !important;
	height: 32px !important;
	margin: 0 !important;
	top: auto !important;
	bottom: auto !important;
	right: auto !important;
	left: auto !important;
	z-index: auto !important;
	box-shadow: none !important;
	border: 0 !important;
	background: transparent !important;
}
.orderable-drawer .orderable-mini-cart-item .orderable-mini-cart-item__remove svg,
.orderable-mini-cart .orderable-mini-cart-item .orderable-mini-cart-item__remove svg {
	position: static !important;
	left: auto !important;
	top: auto !important;
	margin: 0 !important;
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}