/* ==========================================================================
   Koh Tomyums — WooCommerce stylesheet
   GENERATED from assets/css/parts/*.css by bin/build-css.sh — do not edit.
   Edit the part files and re-run the script.
   ========================================================================== */

/* --- wc-defaults.css ------------------------------------------------------- */
/* ==========================================================================
   WooCommerce default chrome — the single place it is put back on-system.

   WooCommerce ships woocommerce-layout.css, woocommerce-smallscreen.css and
   woocommerce.css on every shop page. The theme's own sheets load after them,
   so equal-specificity rules already win — but WooCommerce's defaults are
   written two and three classes deep (`.woocommerce div.product .woocommerce-
   tabs ul.tabs li`) and in one case with `!important`. Wherever the theme had
   not written a selector at least that specific, the default leaked through,
   and on a near-black ground every leak is a bright box.

   The audit found five:

     product-page tabs        white #fff and pale lavender #e9e6ed pills
     my-account fields        white inputs with black text
     the cart "Remove" link   22.5px, 4.5px tracking, #a00, from .remove
     the cart Order Summary   275px wide, from .cart_totals{width:48%;float:right}
     the my-account sidebar   86px wide, from
                              .woocommerce-MyAccount-navigation{width:30%;float:left}

   They are all one problem — un-neutralised vendor CSS — so they are fixed in
   one file rather than four page-specific patches. Anything added here must be
   an override of a WooCommerce default, not new design: page-specific styling
   belongs in that page's part.

   Loaded first among SHOP_PARTS so the page parts can still override it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Form fields — .woocommerce form .form-row input.input-text is (0,3,1),
      which beat the theme's bare `input[type="text"]` at (0,1,1). This is the
      My Account login and register boxes, and any Woo form the theme has not
      re-templated.
   -------------------------------------------------------------------------- */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce-page form .form-row select,
.woocommerce input.input-text,
.woocommerce textarea.input-text {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--kt-border-control);
	border-radius: var(--kt-radius-sm);
	background: var(--kt-field);
	box-shadow: none;
	font-family: var(--kt-font-body);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--kt-text-bright);
	transition: border-color var(--kt-ease);
	-webkit-appearance: none;
	appearance: none;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce input.input-text:focus,
.woocommerce textarea.input-text:focus {
	border-color: var(--kt-gold-line);
}

.woocommerce form .form-row input.input-text::placeholder,
.woocommerce form .form-row textarea::placeholder {
	color: var(--kt-text-faint);
	opacity: 1;
}

/* Woo marks invalid rows with a red field border of its own. */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: var(--kt-err);
}

.woocommerce form .form-row.woocommerce-validated input.input-text {
	border-color: var(--kt-gold-line-faint);
}

/*
 * The login / register boxes.
 *
 * `.woocommerce form.login, .woocommerce form.register` ships a #d3ced2 frame,
 * 20px of padding and a 5px radius — a pale grey box drawn *inside* the theme's
 * own gold-framed panel. It was the last vendor frame left on My Account.
 */
.woocommerce form.login,
.woocommerce form.register,
.woocommerce-page form.login,
.woocommerce-page form.register {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
}

/* The required marker is Woo red by default. */
.woocommerce form .form-row .required,
.woocommerce .required {
	color: var(--kt-gold-dim);
	border: 0;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   2. The product data tabs.

      This is the Description / Additional information strip. Left alone it is
      raw vendor chrome: a #fff active pill, #e9e6ed inactive pills, #515151
      links, a #cfc8d8 border and a rounded-top pill shape with two absolutely
      positioned corner pseudo-elements. All of that is unpicked here and
      redrawn as a gold hairline rail, which is what every other heading row on
      a dish page looks like.
   -------------------------------------------------------------------------- */

.woocommerce div.product .woocommerce-tabs {
	margin-top: clamp(40px, 5vw, 64px);
	padding-top: clamp(28px, 3.4vw, 40px);
	border-top: 1px solid var(--kt-hairline);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 clamp(22px, 2.6vw, 30px);
	padding: 0;
	list-style: none;
	border: 0;
}

/* Woo draws the rail as a full-width ::before under the tabs. */
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	content: none;
}

/* `li.active` is (0,5,3) in WooCommerce's own sheet — a plain `li` here loses
   to it and the white pill goes on showing through the corners of ours. */
.woocommerce div.product .woocommerce-tabs ul.tabs li,
.woocommerce div.product .woocommerce-tabs ul.tabs li.active,
.woocommerce div.product .woocommerce-tabs ul.tabs li[aria-selected="true"] {
	position: static;
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

/* The two corner curls WooCommerce hangs off each tab. */
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	content: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 10px 22px;
	border: 1px solid var(--kt-border-control);
	border-radius: var(--kt-radius-sm);
	background: transparent;
	font-family: var(--kt-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	text-shadow: none;
	color: var(--kt-text-body);
	transition: border-color var(--kt-ease), color var(--kt-ease), background var(--kt-ease);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:focus-visible {
	border-color: var(--kt-gold-line);
	color: var(--kt-gold-hi);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li[aria-selected="true"] a {
	border-color: var(--kt-gold-line);
	background: var(--kt-gold);
	color: var(--kt-on-gold);
	font-weight: 800;
}

/* The panel below the strip. */
.woocommerce div.product .woocommerce-tabs .panel {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	font-size: 15px;
	line-height: 1.8;
	font-weight: 300;
	color: var(--kt-text-body);
}

.woocommerce div.product .woocommerce-tabs .panel > h2,
.woocommerce div.product .woocommerce-tabs .panel > h3 {
	font-family: var(--kt-font-display);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--kt-gold);
	margin: 0 0 16px;
}

.woocommerce div.product .woocommerce-tabs .panel p {
	margin: 0 0 14px;
}

/* "Additional information" is a plain shop_table — give it the theme's rows. */
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes {
	width: 100%;
	border: 1px solid var(--kt-hairline-faint);
	border-radius: var(--kt-radius);
	border-collapse: collapse;
	overflow: hidden;
}

.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes th,
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes td {
	padding: 13px 18px;
	border: 0;
	border-bottom: 1px solid var(--kt-hairline-faint);
	background: transparent;
	font-style: normal;
	line-height: 1.6;
}

.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes tr:last-child th,
.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes tr:last-child td {
	border-bottom: 0;
}

.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes th {
	width: 34%;
	font-family: var(--kt-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-text-dim);
	text-align: left;
}

.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes td {
	color: var(--kt-text-bright);
}

.woocommerce div.product .woocommerce-tabs .panel table.shop_attributes td p {
	margin: 0;
	padding: 0;
}

/* --------------------------------------------------------------------------
   3. The "Remove" control.

      `.woocommerce a.remove` is sized for a single "×" glyph: 1.5em in a 1em
      box, with `color: #a00 !important`. The cart template puts the word
      "REMOVE" in it, so the text rendered at 22.5px with 4.5px of tracking,
      spilling out of a 23px box and shouting louder than the dish title. The
      `!important` on the colour is why this needs one of its own.
   -------------------------------------------------------------------------- */

.woocommerce a.remove,
.woocommerce a.remove.kt-cart-item__remove {
	display: inline-flex;
	align-items: center;
	width: auto;
	height: auto;
	padding: 4px 0;
	border-radius: 0;
	font-family: var(--kt-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1.4;
	text-align: left;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--kt-text-faint) !important;
	background: none;
}

.woocommerce a.remove:hover,
.woocommerce a.remove.kt-cart-item__remove:hover,
.woocommerce a.remove.kt-cart-item__remove:focus-visible {
	background: none;
	color: var(--kt-gold-bright) !important;
}

/* --------------------------------------------------------------------------
   4. Layout floats from woocommerce-layout.css.

      `.cart-collaterals .cart_totals { width: 48%; float: right }` squeezed the
      cart's Order Summary to 275px inside its 573px grid column and pinned it
      right, leaving ~300px of nothing in the middle of the page. The theme owns
      the cart grid; the vendor float has nothing to add.
   -------------------------------------------------------------------------- */

.woocommerce .cart-collaterals .cart_totals,
.woocommerce-page .cart-collaterals .cart_totals,
.woocommerce .cart-collaterals .cross-sells,
.woocommerce-page .cart-collaterals .cross-sells {
	width: 100%;
	float: none;
	margin: 0;
	text-align: left;
}

.woocommerce .cart-collaterals,
.woocommerce-page .cart-collaterals {
	width: 100%;
}

.woocommerce .cart-collaterals::before,
.woocommerce .cart-collaterals::after,
.woocommerce-page .cart-collaterals::before,
.woocommerce-page .cart-collaterals::after {
	content: none;
}

/* Same family of float rules on the My Account and checkout column sets. */
.woocommerce .col2-set .col-1,
.woocommerce .col2-set .col-2,
.woocommerce-page .col2-set .col-1,
.woocommerce-page .col2-set .col-2 {
	width: 100%;
	float: none;
}

/*
 * The My Account columns, from the same sheet:
 *
 *   .woocommerce-account .woocommerce-MyAccount-navigation { float: left; width: 30% }
 *   .woocommerce-account .woocommerce-MyAccount-content    { float: right; width: 68% }
 *
 * Both are (0,2,0), and the theme had written no selector on either element
 * itself — only on their children — so the vendor width stood. It sized the
 * endpoint nav to 30% of the 290px sidebar card: an 86px column, narrower than
 * the word "Dashboard". The active item's gold fill is the anchor's own box, so
 * it stopped at 86px while the label ran on past it onto the dark ground, and
 * every two-word entry ("Account details", "Log out") broke onto a second line.
 *
 * The content column escaped visibly only because it is a flex item, where
 * `float` is ignored and `flex-basis` outranks `width` — a reprieve that lasts
 * exactly as long as .kt-account stays a flex row. Both are neutralised here.
 *
 * woocommerce-smallscreen.css already resets this pair to 100% below 768px,
 * which is why the sidebar looked right on a phone and wrong on every screen
 * above it. This makes the reset unconditional. The theme's .kt-account flex
 * row owns the two-column layout at every width.
 */
.woocommerce-account .woocommerce-MyAccount-navigation,
.woocommerce-account .woocommerce-MyAccount-content {
	width: 100%;
	float: none;
	min-width: 0;
}

/* Notices are deliberately NOT here. WooCommerce styles them at (0,1,0)
   — `.woocommerce-error, .woocommerce-info, .woocommerce-message` — which
   00-base.css already out-ranks by load order. Adding a copy here would only
   be a second place to change them. */


/* --- account.css ------------------------------------------------------- */
/* ==========================================================================
   My Account — sidebar, order cards, reservations, logged-out panel.

   Everything here is scoped to .kt-account / .kt-login / .kt-order-card /
   .kt-pill so it cannot leak into the rest of the shop. Tokens only — no
   hard-coded colours.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Two-column shell
   -------------------------------------------------------------------------- */

.kt-account {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp(20px, 3vw, 40px);
}

/* Sidebar: basis 290px as designed. It carries flex-grow so that when the row
   wraps on narrow screens it fills the line instead of stranding a 290px
   column — at desktop widths the content column's grow factor of 999 makes
   this growth immeasurable. */
.kt-account__aside {
	flex: 1 1 290px;
	border: 1px solid var(--kt-frame);
	border-radius: var(--kt-radius-lg);
	padding: 30px 0 14px;
}

.kt-account__content {
	flex: 999 1 420px;
	min-width: 0;
}

/* --------------------------------------------------------------------------
   2. Sidebar — greeting + endpoint nav
   -------------------------------------------------------------------------- */

.kt-account__hello {
	padding: 0 28px 20px;
	border-bottom: 1px solid var(--kt-hairline-faint);
}

.kt-account__greeting {
	margin: 0;
	font-family: var(--kt-font-script);
	font-size: 30px;
	font-weight: 400;
	line-height: 1.25;
	color: var(--kt-gold-soft);
}

.kt-account__email {
	margin: 4px 0 0;
	font-size: 12px;
	line-height: 1.5;
	color: var(--kt-text-faint);
	word-break: break-word;
}

/* The nav is a plain block child of the sidebar card and takes its width from
   it. WooCommerce's own `float: left; width: 30%` on this element is neutralised
   in wc-defaults.css §4 — without that, everything below is sized against an
   86px column and the active fill cannot contain its label. */
.kt-account__nav {
	min-width: 0;
}

.kt-account__nav ul {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 14px 0;
	list-style: none;
}

/* No padding on the li: the anchor carries it, so the gold fill, the label and
   the hit area are one box and cannot disagree. */
.kt-account__nav li {
	margin: 0;
	min-width: 0;
}

.kt-account__nav li a {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 44px;
	padding: 12px 28px;
	font-size: 13.5px;
	font-weight: 300;
	letter-spacing: 0.02em;
	color: var(--kt-text-body);
	/* Never split a label mid-word, and if one ever is long enough to wrap,
	   wrap it evenly rather than orphaning its last word. The fill is this
	   element's own background, so it grows with the extra line. */
	hyphens: none;
	overflow-wrap: normal;
	text-wrap: balance;
	transition: background var(--kt-ease), color var(--kt-ease);
}

.kt-account__nav li a:hover {
	color: var(--kt-gold-bright);
}

.kt-account__nav li.is-active a {
	background: var(--kt-gold);
	color: var(--kt-on-gold);
	font-weight: 700;
}

/* The active item is gold-on-gold under the global link hover — pin it back. */
.kt-account__nav li.is-active a:hover,
.kt-account__nav li.is-active a:focus-visible {
	background: var(--kt-gold-hi);
	color: var(--kt-on-gold);
}

.kt-account__nav li.woocommerce-MyAccount-navigation-link--customer-logout a {
	color: var(--kt-text-meta);
}

.kt-account__nav li.woocommerce-MyAccount-navigation-link--customer-logout a:hover {
	color: var(--kt-gold-bright);
}

/* --------------------------------------------------------------------------
   3. Content headings
   -------------------------------------------------------------------------- */

.kt-account__heading {
	margin: 0 0 24px;
	font-family: var(--kt-font-display);
	font-size: clamp(20px, 2.6vw, 26px);
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--kt-text-bright);
}

.kt-account__subheading {
	margin: clamp(30px, 4vw, 40px) 0 16px;
	font-family: var(--kt-font-display);
	font-size: 15px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--kt-gold-dim);
}

.kt-account__block {
	margin-top: clamp(40px, 5vw, 56px);
}

.kt-account__more {
	margin: 18px 0 0;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--kt-gold-bright);
}

.kt-account__more a {
	color: inherit;
}

.kt-account__empty {
	padding: clamp(34px, 5vw, 56px) 0;
	border: 1px solid var(--kt-frame-soft);
	border-radius: var(--kt-radius);
}

/* --------------------------------------------------------------------------
   4. Order + reservation cards
   -------------------------------------------------------------------------- */

.kt-orders {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.kt-order-card {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 26px;
	padding: 22px clamp(18px, 3.4vw, 28px);
	border: 1px solid var(--kt-frame-soft);
	border-radius: var(--kt-radius);
	background: var(--kt-panel);
	-webkit-backdrop-filter: var(--kt-panel-blur);
	backdrop-filter: var(--kt-panel-blur);
	transition: border-color var(--kt-ease-slow);
}

.kt-order-card:hover,
.kt-order-card:focus-within {
	border-color: var(--kt-gold-line);
}

.kt-order-card.is-past {
	opacity: 0.66;
}

.kt-order-card__ref {
	min-width: 108px;
	flex: 0 0 auto;
}

.kt-order-card__no {
	display: block;
	font-family: var(--kt-font-display);
	font-size: 16px;
	letter-spacing: 0.06em;
	line-height: 1.2;
	color: var(--kt-text-bright);
}

.kt-order-card__date {
	display: block;
	margin-top: 4px;
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--kt-text-muted);
}

.kt-order-card__body {
	flex: 1 1 190px;
	min-width: 0;
}

.kt-order-card__summary {
	margin: 0;
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--kt-text-dim);
	text-wrap: pretty;
}

.kt-order-card__slot {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 8px 0 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kt-gold-dim);
}

.kt-order-card__slot svg {
	flex: none;
}

.kt-order-card__total {
	margin: 0;
	flex: 0 0 auto;
	font-family: var(--kt-font-display);
	font-size: 16px;
	line-height: 1.2;
	color: var(--kt-gold);
	white-space: nowrap;
}

.kt-order-card__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

/* --------------------------------------------------------------------------
   5. Status pills
   -------------------------------------------------------------------------- */

.kt-pill {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 7px 13px;
	border: 1px solid currentColor;
	border-color: color-mix(in oklab, currentColor 62%, transparent);
	border-radius: var(--kt-radius-pill);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
	background: none;
}

.kt-pill--ok { color: var(--kt-ok); }
.kt-pill--bad { color: var(--kt-err); }
.kt-pill--wait { color: var(--kt-warn); }

/* --------------------------------------------------------------------------
   6. Account buttons — sharp-cornered hairline gold, inverts on hover
   -------------------------------------------------------------------------- */

.kt-account-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 9px 18px;
	border: 1px solid var(--kt-gold-line-2);
	border-radius: var(--kt-radius-sm);
	background: transparent;
	font-family: var(--kt-font-body);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--kt-gold-bright);
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--kt-ease), color var(--kt-ease), border-color var(--kt-ease);
}

.kt-account-btn:hover,
.kt-account-btn:focus-visible {
	background: var(--kt-gold);
	border-color: var(--kt-gold);
	color: var(--kt-on-gold);
}

.kt-account-btn--lg {
	padding: 13px 28px;
	border-color: var(--kt-gold-line);
	font-size: 11.5px;
	letter-spacing: 0.22em;
}

.kt-account-btn--solid {
	background: var(--kt-gold);
	border-color: var(--kt-gold);
	border-radius: var(--kt-radius-sm);
	padding: 11px 22px;
	font-size: 11px;
	font-weight: 800;
	color: var(--kt-on-gold);
}

.kt-account-btn--solid:hover,
.kt-account-btn--solid:focus-visible {
	background: var(--kt-gold-hi);
	border-color: var(--kt-gold-hi);
	color: var(--kt-on-gold);
}

.kt-account-btn--cancel {
	border-color: var(--kt-border-control);
	color: var(--kt-text-muted);
}

.kt-account__pager {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: space-between;
	margin-top: clamp(20px, 3vw, 28px);
}

/* --------------------------------------------------------------------------
   7. "Your usual" dashed strip
   -------------------------------------------------------------------------- */

.kt-usual {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	margin-top: 14px;
	padding: 22px clamp(18px, 3.4vw, 28px);
	border: 1px dashed var(--kt-gold-line-soft);
	border-radius: var(--kt-radius);
}

.kt-usual__text {
	margin: 0;
	flex: 1 1 220px;
	min-width: 0;
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--kt-text-dim);
	text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   8. Account details panel
   -------------------------------------------------------------------------- */

.kt-account-panel {
	border: 1px solid var(--kt-frame);
	border-radius: var(--kt-radius-lg);
	background: linear-gradient(to bottom, var(--kt-panel-top), var(--kt-panel-bottom));
	-webkit-backdrop-filter: var(--kt-panel-blur);
	backdrop-filter: var(--kt-panel-blur);
	padding: clamp(26px, 3.4vw, 36px) clamp(22px, 3.2vw, 34px);
}

.kt-account-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
}

.kt-account-fact {
	border-radius: var(--kt-radius);
	margin: 0;
	padding: 14px 16px;
	border: 1px solid var(--kt-gold-line-faint);
}

.kt-account-fact--wide {
	grid-column: 1 / -1;
}

.kt-account-fact__label {
	display: block;
	margin-bottom: 6px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-text-faint);
}

.kt-account-fact__value {
	display: block;
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.5;
	color: var(--kt-text-body);
	word-break: break-word;
}

.kt-account-panel__note {
	margin: 18px 0 0;
	font-size: 13px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--kt-text-quiet);
	text-wrap: pretty;
}

.kt-account-panel__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 24px 0 0;
}

/* --------------------------------------------------------------------------
   9. Logged-out state — sign in / create account
   -------------------------------------------------------------------------- */

/*
 * `align-items: stretch` (the grid default, restated for the reader) rather
 * than `start`: the Sign in panel is taller than Create an account, and with
 * `start` the two-up row ended on a ragged bottom edge — 345px against 301px.
 * Two framed panels side by side should share a baseline at both ends.
 */
.kt-login {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(18px, 2.4vw, 28px);
	align-items: stretch;
	max-width: 560px;
	margin-inline: auto;
}

.kt-login--duo {
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	max-width: none;
}

.kt-login__panel {
	border: 1px solid var(--kt-frame);
	border-radius: var(--kt-radius-lg);
	background: linear-gradient(to bottom, var(--kt-panel-top), var(--kt-panel-bottom));
	-webkit-backdrop-filter: var(--kt-panel-blur);
	backdrop-filter: var(--kt-panel-blur);
	padding: clamp(28px, 4vw, 44px) clamp(22px, 3.4vw, 40px);
}

.kt-login__eyebrow {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--kt-text-dim);
}

.kt-login__title {
	margin: 0;
	font-family: var(--kt-font-display);
	font-size: clamp(20px, 2.6vw, 26px);
	letter-spacing: 0.14em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--kt-gold-soft);
}

.kt-login__lede {
	margin: 12px 0 26px;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--kt-text-muted);
	max-width: 42ch;
	text-wrap: pretty;
}

.kt-login__note {
	margin: 0 0 18px;
	font-size: 13px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--kt-text-quiet);
}

.kt-login__form .form-row {
	margin: 0 0 18px;
}

.kt-login__form label {
	display: block;
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-text-dim);
}

.kt-login__form .required {
	color: var(--kt-gold);
	text-decoration: none;
	border: 0;
}

.kt-login__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 22px 0 0;
}

.kt-login__remember {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	font-size: 13px;
	font-weight: 300;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kt-text-quiet);
}

.kt-login__remember input {
	margin: 0 8px 0 0;
}

.kt-login__lost {
	margin: 18px 0 0;
	font-size: 12.5px;
	color: var(--kt-text-faint);
}

.kt-login__lost a {
	color: var(--kt-gold-dim);
}

.kt-login__lost a:hover {
	color: var(--kt-gold-bright);
}

.kt-login__aside {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 18px;
	margin-top: clamp(20px, 3vw, 28px);
	padding: 22px clamp(18px, 3.4vw, 28px);
	border: 1px dashed var(--kt-gold-line-soft);
	border-radius: var(--kt-radius);
	text-align: center;
}

.kt-login__aside-text {
	margin: 0;
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--kt-text-dim);
}

/* --------------------------------------------------------------------------
   10. WooCommerce leftovers inside the account content
   -------------------------------------------------------------------------- */

/* No delivery anywhere: if a plugin re-introduces address UI, it stays hidden. */
.kt-account__content .woocommerce-Addresses,
.kt-account__content .woocommerce-Address,
.kt-account__content .woocommerce-column--shipping-address,
.kt-account__content .woocommerce-order-details__title + .shipped_via {
	display: none;
}

.kt-account__content .woocommerce-EditAccountForm fieldset {
	margin: clamp(28px, 4vw, 40px) 0 0;
	padding: clamp(22px, 3vw, 30px) clamp(18px, 3vw, 28px);
	border: 1px solid var(--kt-frame-soft);
	border-radius: var(--kt-radius);
}

.kt-account__content .woocommerce-EditAccountForm legend {
	padding: 0 10px;
	font-family: var(--kt-font-display);
	font-size: 14px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kt-gold-soft);
}

.kt-account__content .woocommerce-EditAccountForm .form-row,
.kt-account__content .woocommerce-form-row {
	margin: 0 0 18px;
}

.kt-account__content .woocommerce-EditAccountForm em,
.kt-account__content .woocommerce-EditAccountForm .description {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	font-style: normal;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kt-text-faint);
}

.kt-account__content .woocommerce-Button,
.kt-account__content button[type="submit"],
.kt-account__content input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	padding: 13px 28px;
	border: 1px solid var(--kt-gold-line);
	border-radius: var(--kt-radius-sm);
	background: transparent;
	font-family: var(--kt-font-body);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--kt-gold-bright);
	cursor: pointer;
	transition: background var(--kt-ease), color var(--kt-ease), border-color var(--kt-ease);
}

.kt-account__content .woocommerce-Button:hover,
.kt-account__content button[type="submit"]:hover,
.kt-account__content input[type="submit"]:hover {
	background: var(--kt-gold);
	border-color: var(--kt-gold);
	color: var(--kt-on-gold);
}

/* The dashboard and orders endpoints render their own cards; keep any stray
   WooCommerce table readable rather than letting it fall back to browser
   defaults on the dark ground. */
.kt-account__content table.shop_table {
	border: 1px solid var(--kt-frame-soft);
	border-radius: var(--kt-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: 13.5px;
}

.kt-account__content table.shop_table th,
.kt-account__content table.shop_table td {
	padding: 14px 16px;
	border-bottom: 1px solid var(--kt-hairline-faint);
	text-align: left;
	vertical-align: top;
}

.kt-account__content table.shop_table th {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--kt-gold-dim);
}

.kt-account__content table.shop_table tr:last-child td {
	border-bottom: 0;
}

/* --------------------------------------------------------------------------
   11. Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
	.kt-order-card {
		gap: 14px 18px;
	}

	.kt-order-card__ref,
	.kt-order-card__body {
		flex: 1 1 100%;
		min-width: 0;
	}

	.kt-order-card__actions,
	.kt-account-panel__actions,
	.kt-account__pager {
		width: 100%;
	}

	.kt-order-card__actions .kt-account-btn,
	.kt-account__pager .kt-account-btn {
		flex: 1 1 auto;
	}

	.kt-usual .kt-account-btn {
		width: 100%;
	}

	.kt-login__row {
		gap: 14px;
	}

	.kt-login__row .kt-account-btn {
		width: 100%;
	}
}


/* --- archive.css ------------------------------------------------------- */
/* ==========================================================================
   Koh Tomyums — product archive ("Order Online" / the menu)

   Concatenated into assets/css/woocommerce.css. Tokens and the .kt-dish /
   .kt-ornament / .kt-btn / .kt-empty / .kt-pagination components live in
   theme.css — this file only adds the archive-specific layer. Every selector
   is scoped to .kt-menu__*, .kt-menu-card__* or .kt-dish--menu so nothing
   leaks into another template.

   No breakpoints: the design is all clamp() and auto-fit, per menu.md §4.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page head — eyebrow, ornamented title, script line, intro
   -------------------------------------------------------------------------- */

/*
 * The menu's top block — the head and the category chips together — carries
 * the shared ember field, as both heroes do.
 *
 * IT SPANS BOTH, and that is the point. The embers rise from the bottom of
 * this box, and the bottom of this box is the chip bar's border: the line
 * where the block visibly ends. Scoped to the head alone, the emitter sat in
 * mid-air above the chips and the effect read as a mistake.
 *
 * Three things this container has to provide that a bare text block does not:
 *
 *   position/overflow — the field is absolutely positioned and must be cut to
 *   this box, or embers climb on over the dish grid. Safe: nothing in here is
 *   sticky, and the chips need no overflow of their own.
 *
 *   its children positioned — a positioned element paints above static
 *   siblings whatever the source order, so without this the field would sit
 *   on top of the title instead of behind it. The heroes get this free from
 *   text wrappers that were already relative; these children are bare.
 *
 *   a rise that fits — the box measures about 490px, nowhere near the
 *   two-thirds of a viewport the default flight assumes. 440px lets every
 *   ember finish fading before it can reach the top edge.
 */
/*
 * FULL BLEED, WITH THE CONTENT LEFT WHERE IT WAS.
 *
 * .kt-shop is a max-width section with gutters, so the field stopped at the
 * text column and left a dark band down each side — a background that ends
 * before the screen does looks like a panel, not like atmosphere.
 *
 * The margin pulls the box out to the viewport; the padding puts exactly that
 * much back, so .kt-menu__head and the chip bar sit on the same pixels as
 * before. Both halves are the same expression with the sign flipped, which is
 * why they cancel at every width — at 1280 it is ±64px, at 1920 it is ±304px,
 * and neither number appears anywhere.
 *
 * overflow:hidden has to stay and has to be on THIS element rather than an
 * inner one: the two glow layers are positioned with negative offsets and
 * would otherwise bleed down over the first row of dishes.
 *
 * 50vw counts the scrollbar, so on a scrollbarred window the box is a few
 * pixels wider than the visible page. That is harmless here because body
 * already carries overflow-x: hidden — the excess is clipped rather than
 * becoming a horizontal scrollbar. If that ever changes, this rule is the
 * first place to look.
 */
.kt-menu__top {
	position: relative;
	overflow: hidden;
	margin-inline: calc(50% - 50vw);
	padding-inline: calc(50vw - 50%);
}

.kt-menu__top > *:not(.kt-embers) {
	position: relative;
}

.kt-menu__top .kt-embers {
	--kt-ember-rise: 440px;
	--kt-ember-mid: 226px;
}

/* Start ON the border, not floating above it. The shared default lifts the
   embers 4% off the floor, which reads as deliberate inside a tall hero and
   as a gap here, where the floor is a visible line. */
.kt-menu__top .kt-embers span {
	bottom: 0;
}

.kt-menu__head {
	text-align: center;
	padding: clamp(40px, 6vw, 72px) 0 clamp(24px, 3vw, 36px);
}

.kt-menu__eyebrow {
	margin: 0;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--kt-gold-dim);
}

.kt-menu__ornament {
	padding: 18px 0 0;
}

/* Cinzel caps: the largest display size takes the tightest tracking. */
.kt-menu__title {
	font-size: clamp(28px, 4.6vw, 50px);
	letter-spacing: 0.12em;
	color: var(--kt-text-hero);
	text-transform: uppercase;
}

.kt-menu__script {
	margin: 14px 0 0;
	font-family: var(--kt-font-script);
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.3;
	color: var(--kt-gold-soft);
}

/* --------------------------------------------------------------------------
   Search feedback — only rendered on a product search. Before this the results
   page carried the shop head verbatim and never said what had been searched
   for, how many dishes matched, or how to get back to the whole menu.
   -------------------------------------------------------------------------- */

.kt-menu__query {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 6px 12px;
	margin: 16px 0 0;
	font-size: 13px;
	font-weight: 300;
	color: var(--kt-text-quiet);
}

.kt-menu__query-label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-text-dim);
}

.kt-menu__query-term {
	font-family: var(--kt-font-display);
	font-size: 17px;
	letter-spacing: 0.06em;
	color: var(--kt-gold-soft);
}

.kt-menu__query-count {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-text-faint);
}

.kt-menu__query-count::before {
	content: "·";
	margin-right: 12px;
	color: var(--kt-gold-line-faint);
}

.kt-menu__query-clear {
	margin: 12px 0 0;
	text-align: center;
}

.kt-menu__query-clear a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-gold-bright);
}

.kt-menu__query-clear a:hover,
.kt-menu__query-clear a:focus-visible {
	color: var(--kt-gold-hi);
}

/* The term the customer typed, echoed in the empty state. */
.kt-empty__term {
	color: var(--kt-gold-soft);
}

.kt-menu__intro {
	max-width: 560px;
	margin: 16px auto 0;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.75;
	color: var(--kt-text-quiet);
	text-wrap: pretty;
}

.kt-menu__intro p {
	margin: 0 0 0.9em;
}

.kt-menu__intro p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   2. Category filter chips — anchor jumps on the shop page, term links on a
      single category archive
   -------------------------------------------------------------------------- */

.kt-menu__filters {
	padding-bottom: clamp(28px, 4vw, 40px);
	border-bottom: 1px solid var(--kt-hairline-faint);
}

.kt-menu__chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kt-menu__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	/* 44px minimum touch target — the chip row is the primary way through the
	   menu on a phone and used to be 33px tall. */
	min-height: 44px;
	padding: 10px 22px;
	border: 1px solid var(--kt-border-control);
	border-radius: var(--kt-radius-sm);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--kt-text-body);
	transition: border-color var(--kt-ease), color var(--kt-ease), background var(--kt-ease);
}

.kt-menu__chip:hover,
.kt-menu__chip:focus-visible {
	border-color: var(--kt-gold-line);
	color: var(--kt-gold-hi);
}

.kt-menu__chip.is-active {
	background: var(--kt-gold);
	border-color: var(--kt-gold);
	color: var(--kt-on-gold);
	font-weight: 700;
}

.kt-menu__chip.is-active:hover,
.kt-menu__chip.is-active:focus-visible {
	background: var(--kt-gold-hi);
	border-color: var(--kt-gold-hi);
	color: var(--kt-on-gold);
}

.kt-menu__chip svg {
	width: 13px;
	height: 13px;
	flex: none;
}

/* --------------------------------------------------------------------------
   3. Category sections
   -------------------------------------------------------------------------- */

.kt-menu__cat {
	padding-top: clamp(38px, 5vw, 56px);
	/* The header is sticky at --kt-header-h; leave it clear after a chip jump. */
	scroll-margin-top: calc(var(--kt-header-h) + 8px);
}

.kt-menu__cat + .kt-menu__cat {
	padding-top: clamp(44px, 6vw, 68px);
}

.kt-menu__cat-head {
	display: flex;
	align-items: baseline;
	gap: 20px;
	margin-bottom: clamp(22px, 3vw, 32px);
}

.kt-menu__cat-title {
	font-family: var(--kt-font-display);
	font-size: clamp(20px, 2.6vw, 27px);
	letter-spacing: 0.18em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--kt-gold-soft);
}

.kt-menu__cat-rule {
	height: 1px;
	flex: 1;
	background: var(--kt-hairline);
}

.kt-menu__cat-count {
	margin: 0;
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	white-space: nowrap;
	color: var(--kt-text-muted);
}

/* --------------------------------------------------------------------------
   4. The grid — auto-fit, never auto-fill, so a two-dish section renders as
      two half-width cards rather than one narrow card and dead space
   -------------------------------------------------------------------------- */

.kt-menu__grid {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Defensive: WooCommerce's own layout stylesheet floats `ul.products li.product`
   at a percentage width and adds a clearfix pseudo-element, which would break
   the grid and leave a phantom track. Scoped to this grid only. */
.kt-menu__grid::before,
.kt-menu__grid::after {
	content: none !important;
}

.kt-menu__grid > li.product {
	width: auto !important;
	margin: 0 !important;
	float: none !important;
	clear: none !important;
}

/* --------------------------------------------------------------------------
   5. Dish card — the archive variant of .kt-dish: left-aligned, name and
      price on one baseline row, meta chips and CTA in a ruled footer
   -------------------------------------------------------------------------- */

.kt-dish--menu .kt-dish__body {
	padding: 30px 30px 26px;
	text-align: left;
	align-items: stretch;
}

.kt-dish--menu .kt-dish__badge {
	margin: 0 0 16px;
}

/*
 * Name and price on one baseline row.
 *
 * The price used to be `white-space: nowrap` with the title left at its default
 * `min-width: auto`. A flex item cannot shrink below its min-content width, so
 * on a variable product the un-breakable range "HK$ 118 – HK$ 140" simply took
 * the space it wanted and pushed itself out of the row: 37px past the row and
 * 6px past the card border on Gaeng Mussaman in a 307px column, where the last
 * glyph was clipped by the card's `overflow: hidden`.
 *
 * Two changes fix it at the source. `min-width: 0` lets the title wrap instead
 * of holding the row open, and dropping `nowrap` lets a *range* break at the
 * en-dash. The amounts themselves stay whole either way: kty_price_format()
 * joins the symbol to the number with a non-breaking space, so "HK$ 140" can
 * never split. Nothing here is page-specific — it fixes the shop archive, the
 * category archives and the product search results in one rule.
 */
/*
 * The row is a 2-column grid, not a flex line, because the description now
 * lives inside it (see `.kt-menu-card__text` in content-product.php) and has to
 * span the FULL card width underneath the name and price — a flex row would
 * have narrowed it by the price column, about 90px on a 300px card.
 *
 * `.kt-menu-card__text` is `display: contents` here, so its three children —
 * name, rule, description — are grid items of this row exactly as they were
 * direct children before the wrapper existed. Only the price is placed
 * explicitly; the rest auto-flow in DOM order, so anything a future hook adds
 * lands where it was written rather than in a slot chosen today.
 */
.kt-menu-card__row {
	display: grid;
	grid-template-columns: 1fr auto;
	/*
	 * `start`, not `baseline`. Baseline alignment across a GRID row sizes the
	 * track to max-ascent + max-descent rather than to the taller item, which
	 * inflated a single line of 18px Cinzel to a 67.5px track and grew every
	 * card by ~70px. Flex baseline behaved differently, which is why this only
	 * appeared when the row became a grid.
	 */
	align-items: start;
	column-gap: 16px;
	row-gap: 0;
}

.kt-menu-card__text {
	display: contents;
}

.kt-dish--menu .kt-menu-card__row > .kt-dish__price {
	grid-column: 2;
	grid-row: 1;
}

/*
 * Note the parent: `.kt-menu-card__text`, not the row.
 *
 * `display: contents` removes the wrapper's BOX, not the wrapper. Its children
 * become grid items of the row, but they are still its children in the DOM, so
 * a `.kt-menu-card__row > …` child combinator does not match them. Written that
 * way these two silently kept their auto placement, landed in the price column,
 * and squeezed the dish name to 112px across three lines.
 */
.kt-dish--menu .kt-menu-card__text > .kt-dish__rule,
.kt-dish--menu .kt-menu-card__text > .kt-dish__text {
	grid-column: 1 / -1;
}

/*
 * WooCommerce styles the loop title when it is an h3:
 *
 *   .woocommerce ul.products li.product h3 { padding: .5em 0; margin: 0; font-size: 1em }
 *                                                                          -- (0,3,3)
 *
 * On the grouped menu page the dish name IS an h3 (the category heading owns the
 * h2 there), so that rule applied on /menu/ and nowhere else — which is why the
 * main menu and the category pages have never quite matched. It added 17px of
 * padding per row, and it beat the theme's own (0,2,0) title rule on font-size,
 * so every dish name on the main menu rendered at 15px instead of 18px.
 *
 * The selector mirrors WooCommerce's ancestors and adds our class: (0,4,3)
 * against its (0,3,3), so it wins on count rather than on source order.
 */
.woocommerce ul.products li.product h3.kt-dish__title {
	padding: 0;
	margin: 0;
	font-size: 18px;
}

.kt-dish--menu .kt-dish__title {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 18px;
	letter-spacing: 0.1em;
	overflow-wrap: break-word;
}

.kt-dish--menu .kt-dish__price {
	flex: 0 1 auto;
	margin: 0;
	font-size: 18px;
	text-align: right;
	white-space: normal;
}

.kt-dish--menu .kt-dish__rule {
	margin: 14px 0 0;
}

.kt-dish--menu .kt-dish__heat {
	display: block;
	margin-top: 12px;
}

.kt-dish--menu .kt-dish__text {
	max-width: none;
	margin: 14px 0 0;
}

/* Beverages and desserts carry no short description; the spacer keeps every
   footer in a row on the same line anyway. */
.kt-dish--menu .kt-dish__spacer {
	min-height: 18px;
}

.kt-menu-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	border-top: 1px solid var(--kt-hairline-faint);
	padding-top: 18px;
	margin-top: 18px;
}

.kt-menu-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kt-menu-card__chip {
	font-size: 11px;
	letter-spacing: 0.2em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--kt-text-muted);
}

/* Vegetarian is the one dietary fact worth a colour of its own — the herb
   green, its only other job being success states, so green stays meaningful.
   8.1:1 on the ground; "Market Price" and "Pre-order" remain quiet words. */
.kt-menu-card__chip--vegetarian,
.kt-menu-card__chip--vegetarian .kt-menu-card__chip-text {
	color: var(--kt-herb);
}

.kt-menu-card__chip + .kt-menu-card__chip::before {
	content: "·";
	margin-right: 6px;
	color: var(--kt-gold-line-faint);
}

/*
 * The call to action takes a row of its own and centres in it.
 *
 * It used to be pushed right with `margin-left: auto` inside the foot's
 * `space-between`, which left the button hard against the card's right edge —
 * and after an AJAX add, the "View cart" link WooCommerce appends wrapped onto a
 * second line and hung left, so the two sat on different axes.
 *
 * `width: 100%` gives the CTA its own line below any meta chips.
 *
 * A column, not a wrapping row. As a row the button and "View cart" fitted side
 * by side and were centred as a PAIR — measured 45px left of the button and 45px
 * right of the link, so the two together were centred while neither one was.
 * Stacking them means each is centred on its own line, which is what the card
 * reads like before the add as well.
 */
.kt-dish--menu .kt-dish__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	margin-top: 0;
}

/* The "View cart" link WooCommerce appends after an AJAX add. */
.kt-dish--menu .kt-dish__cta .added_to_cart {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--kt-gold-bright);
}

/* --------------------------------------------------------------------------
   6. Empty state
   -------------------------------------------------------------------------- */

.kt-menu__empty {
	padding: clamp(40px, 6vw, 72px) 0 0;
}

/* --------------------------------------------------------------------------
   7. Collection-time band
   -------------------------------------------------------------------------- */

.kt-menu__band {
	margin-top: clamp(48px, 6vw, 72px);
}

.kt-menu__band-inner {
	text-align: left;
}

.kt-menu__band-kicker {
	margin: 0;
	font-family: var(--kt-font-display);
	font-size: clamp(14px, 1.8vw, 20px);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-text-bright);
}

.kt-menu__band-title {
	margin-top: 8px;
	font-family: var(--kt-font-display);
	font-size: clamp(26px, 4vw, 42px);
	letter-spacing: 0.06em;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--kt-gold);
}

.kt-menu__band-meta {
	margin: 12px 0 0;
	font-size: clamp(11px, 1.3vw, 13px);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--kt-text-quiet);
}

.kt-menu__band-cta {
	margin-top: 26px;
}

/* ==========================================================================
   Layout switch — grid (the design) or list
   --------------------------------------------------------------------------
   The list reuses the SAME markup as the grid card. There is no second
   template: `.kt-dish` already carries the hairline-gold panel, Cinzel title and
   gold price that the search results use, so switching views is a change of
   axis and spacing, not of appearance. That is also why the two cannot drift.

   SCOPE. Every rule below is prefixed `body.kt-menu-list .kt-menu__grid`, which
   is a (0,3,1) selector against the base card rules' (0,2,0) — it wins on class
   count, not on being later in the file. The `.kt-menu__grid` half is what keeps
   it off the other two `.kt-dishes` consumers: the cross-sell grid
   (.kt-xsell__grid) and the front-page highlights both render through
   kty_dish_card(), which emits no `--menu` modifier and no `.kt-menu-card__*`
   element at all, so these selectors cannot match them structurally either.
   ========================================================================== */

/*
 * The view toggle: two icons, right-aligned, no primary colour.
 *
 * It used to be a "VIEW" label plus two `.kt-menu__chip`s — 335x44px measured,
 * with the active one carrying the full gold fill, which made a layout
 * preference the loudest thing on a page about food. The chip class is gone
 * from the markup entirely (rather than overridden here), so the gold
 * `.kt-menu__chip.is-active` rule above is untouched and the CATEGORY chip row
 * that shares it keeps its fill.
 *
 * Right-aligned, and constrained to the list measure so it stays flush with the
 * content column. `.kt-menu__view` is NOT one of the three elements the list
 * rule below caps at --kt-list-measure, so without the second rule the toggle
 * would sit against the full 1152px container while the dishes stopped at
 * 796px — a 178px overhang, which is the exact defect the comment on that rule
 * records having already fixed once for the section headings.
 */
.kt-menu__view {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	margin: 0 0 16px;
}

body.kt-menu-list .kt-menu__view {
	max-width: var(--kt-list-measure);
	margin-inline: auto;
}

/*
 * 38x38. Not the 44px the category chips use: that minimum was set because the
 * chip row is the primary way through the menu on a phone, and this is a
 * secondary control that must not cost a row of its own. 38px clears WCAG
 * 2.5.8 (24x24, AA) with room to spare and lands just under 2.5.5 (44x44, AAA)
 * — a deliberate trade, recorded rather than silent. `display: inline-flex` is
 * explicit: an <a> is inline by default, and centring the glyph must not depend
 * on the parent happening to be a flex container.
 */
.kt-menu__view-opt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--kt-radius-sm);
	color: var(--kt-text-faint);
	transition: color var(--kt-ease), background var(--kt-ease);
}

.kt-menu__view-opt svg {
	width: 15px;
	height: 15px;
	display: block;
	fill: currentColor;
}

.kt-menu__view-opt:hover,
.kt-menu__view-opt:focus-visible {
	color: var(--kt-text-body);
}

/*
 * The active state, without the primary colour: a brighter glyph on a neutral
 * lift. --kt-hairline-faint is a translucent warm line colour that composites
 * to roughly oklch(0.19) over the ground — present enough to read as selected,
 * quiet enough not to compete with the dishes.
 *
 * (0,1,0) and it ties with the hover rule above, so SOURCE ORDER decides and
 * this must stay below it: written the other way round, hovering the active
 * option would drop it to the dimmer hover colour. The explicit
 * `.is-active:hover` pair below removes the dependency on that ordering.
 */
.kt-menu__view-opt.is-active {
	background: var(--kt-hairline-faint);
	color: var(--kt-text);
}

.kt-menu__view-opt.is-active:hover,
.kt-menu__view-opt.is-active:focus-visible {
	color: var(--kt-text);
}

/* --- list mode ---------------------------------------------------------- */

/* One column. The base grid is `repeat(auto-fit, minmax(300px, 1fr))`; a single
   full-width column is what makes these read as rows rather than wide cards. */
/*
 * One column, and narrower than the page.
 *
 * The search results run to 796px (measured on /?s=) and that is not incidental
 * — a single line of dish name and description is uncomfortable to read across
 * a 1152px measure. The list borrows the width along with the styling.
 *
 * The measure is a token because THREE things have to share it. On the grouped
 * menu page each section has a heading rule and an intro paragraph above its
 * dishes; left at full width they ran to 1152 while the rows stopped at 796,
 * so the gold rule and the copy overhung the list by 178px on each side and the
 * section stopped reading as one block. One value, declared once.
 */
body.kt-menu-list {
	--kt-list-measure: 796px;
}

body.kt-menu-list .kt-menu__grid {
	grid-template-columns: 1fr;
	/* 12px, measured off .kt-search-results — the list sat 2px looser. */
	gap: 12px;
}

body.kt-menu-list .kt-menu__grid,
body.kt-menu-list .kt-menu__cat-head,
body.kt-menu-list .kt-menu__cat-intro {
	max-width: var(--kt-list-measure);
	margin-inline: auto;
}

/* The row's own box. Matches the search result's rhythm rather than the card's
   30px, so a list of 146 dishes stays scannable. */
body.kt-menu-list .kt-menu__grid .kt-dish--menu .kt-dish__body {
	position: relative;
	padding: 22px 26px;
}

/*
 * The row itself, matched to the search result rather than approximated:
 * search.css gives `.kt-dish--result` display:flex, align-items:center,
 * gap: 16px 26px, padding: 24px 28px — measured on the live page, not copied
 * from the source, so this tracks what actually renders.
 *
 * `.kt-menu-card__row` becomes `display: contents` so the text block, the heat
 * scale and the price all become items of the SAME flex line, which is the only
 * way the chillies can sit between the description and the price — they are
 * siblings of the row in the DOM, not children of it.
 */
body.kt-menu-list .kt-menu__grid .kt-dish--menu .kt-dish__body {
	display: flex;
	/* The base `.kt-dish__body` is a flex COLUMN (theme.css:1318-1325). Without
	   this every item stacked and the price never reached the right edge. */
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 26px;
	padding: 24px 28px;
}

body.kt-menu-list .kt-menu__grid .kt-dish--menu .kt-menu-card__row {
	display: contents;
}

/*
 * From here down the values are the search row's own, taken from
 * parts/search.css and confirmed against the rendered page rather than copied
 * by eye — every one of these was a measured difference between the two rows:
 *
 *   title    weight 400 -> 300, line-height 1.25 -> 1.3
 *   excerpt  13.5px -> 13px, 1.65 -> 1.6, --kt-text-muted -> --kt-text-dim,
 *            margin-top 6 -> 8
 *   price    18px -> 17px, flex 0 1 auto -> none
 *   heat     block -> flex, line-height 1.7 -> 1, gap 3px, flex none
 *   text col min-width 0 -> 200px
 */
body.kt-menu-list .kt-menu__grid .kt-dish--menu .kt-menu-card__text {
	display: block;
	flex: 1 1 200px;
	min-width: 200px;
	order: 1;
}

/*
 * `.woocommerce` is a class on <body>, not on a wrapper inside it — so
 * `body.kt-menu-list .woocommerce …` asks for a SECOND .woocommerce element
 * below body and matches nothing. It has to be a compound on body itself.
 * (0,5,4) against the neutralising rule's (0,4,3), so the list size wins.
 */
body.kt-menu-list.woocommerce ul.products li.product h3.kt-dish__title,
body.kt-menu-list .kt-menu__grid .kt-dish--menu .kt-dish__title {
	flex: 0 1 auto;
	padding: 0;
	font-size: 17px;
	font-weight: 300;
	letter-spacing: 0.1em;
	line-height: 1.3;
	color: var(--kt-text-bright);
}

body.kt-menu-list .kt-menu__grid .kt-dish--menu .kt-dish__text {
	margin: 8px 0 0;
	font-size: 13px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--kt-text-dim);
}

body.kt-menu-list .kt-menu__grid .kt-dish--menu .kt-dish__heat {
	display: flex;
	align-items: center;
	gap: 3px;
	flex: none;
	order: 2;
	margin: 0;
	line-height: 1;
}

body.kt-menu-list .kt-menu__grid .kt-dish--menu .kt-dish__price {
	flex: none;
	order: 3;
	margin: 0;
	font-family: var(--kt-font-display);
	font-size: 17px;
	line-height: 1.2;
	color: var(--kt-gold);
	white-space: nowrap;
}

/* On its own full-width line the badge added 33px to the two "Market price"
   rows and broke the rhythm. It is a short marker, so it joins the others. */
body.kt-menu-list .kt-menu__grid .kt-dish--menu .kt-dish__badge {
	order: 2;
	flex: none;
	margin: 0;
}



/*
 * Gone in list mode: the rule and the spacer are grid-card furniture (they give
 * the card its ruled footer and push the CTA to a common baseline across a row
 * of cards), and neither has a job in a single-row layout.
 *
 * The Add to cart button goes with them. Two reasons, and the second is the
 * decisive one: the supplied design has no button, and keeping it would put it
 * on the right edge where the price belongs — the price is the one thing the
 * brief pins to the right, and they cannot both own that edge. The dish name
 * still links through to the product page, where the button lives. Grid view
 * keeps its button, so the ordering path is not removed, only the scanning view
 * is kept clean.
 */
body.kt-menu-list .kt-menu__grid .kt-dish--menu .kt-dish__rule,
body.kt-menu-list .kt-menu__grid .kt-dish--menu .kt-dish__spacer,
body.kt-menu-list .kt-menu__grid .kt-dish--menu .kt-dish__cta {
	display: none;
}

/*
 * The chips join the right-hand cluster.
 *
 * With the CTA hidden the footer holds only the dietary chips, so it stops being
 * a footer and becomes another item on the row — order 2, beside the heat scale,
 * which is where the eye already looks for a dish's markers.
 */
/*
 * `display: contents`, not a flex item.
 *
 * With the CTA hidden the footer is usually EMPTY, but an empty flex item still
 * takes a slot and still earns the row's 26px column gap — which is what was
 * pushing the price ~26px in from the left edge on a phone, out of line with
 * the name and the description above it. Removing its box removes the slot, and
 * the chips it does sometimes hold become items of the row in their own right.
 */
body.kt-menu-list .kt-menu__grid .kt-dish--menu .kt-menu-card__foot {
	display: contents;
}

body.kt-menu-list .kt-menu__grid .kt-dish--menu .kt-menu-card__meta {
	order: 2;
	flex: none;
	margin: 0;
	padding: 0;
	gap: 8px;
}

/*
 * "Vegetarian" becomes a glyph; the rest keep their words.
 *
 * The chip carries BOTH forms in the markup — see content-product.php — because
 * the view also switches client-side without a reload, so this has to be a
 * CSS-only swap. The word stays in the accessibility tree either way: in list
 * view it is the glyph's aria-label, in grid view it is the visible text.
 */
body.kt-menu-list .kt-menu__grid .kt-dish--menu .kt-menu-card__chip--vegetarian {
	padding: 0;
	border: 0;
	background: none;
}

body.kt-menu-list .kt-menu__grid .kt-dish--menu .kt-menu-card__chip--vegetarian .kt-menu-card__chip-text {
	display: none;
}

body.kt-menu-list .kt-menu__grid .kt-dish--menu .kt-menu-card__chip-icon {
	display: inline-flex;
	align-items: center;
	/* Matches the lit chili pip so the two markers sit at one size. */
	font-size: 15px;
	line-height: 1;
}



/* The search row's narrow-screen relaxation, matched exactly (search.css:439).
   Without it the 200px min-width on the text column stops the row wrapping and
   the price is pushed off the edge on a phone. */
@media (max-width: 520px) {
	body.kt-menu-list .kt-menu__grid .kt-dish--menu .kt-dish__body {
		padding: 20px 22px;
	}

	body.kt-menu-list .kt-menu__grid .kt-dish--menu .kt-menu-card__text {
		flex-basis: 100%;
		min-width: 0;
	}

	/*
	 * On a phone the row wraps, so the price lands on a line of its own rather
	 * than beside the name. Read as a column of text, it should start where the
	 * name and the description start — so it takes the left edge, and
	 * `margin-right: auto` pushes the chilli and vegetarian markers to the far
	 * right of that same line instead of leaving them crowded against it.
	 */
	body.kt-menu-list .kt-menu__grid .kt-dish--menu .kt-dish__price {
		order: 2;
		margin-right: auto;
		text-align: left;
	}

	body.kt-menu-list .kt-menu__grid .kt-dish--menu .kt-dish__heat,
	body.kt-menu-list .kt-menu__grid .kt-dish--menu .kt-menu-card__meta,
	body.kt-menu-list .kt-menu__grid .kt-dish--menu .kt-dish__badge {
		order: 3;
	}
}

/* Grid view shows the words, never the glyph. Unscoped by view on purpose: this
   is the default, and the list block above is what turns it around. */
.kt-menu-card__chip-icon {
	display: none;
	color: var(--kt-herb);
}

.kt-menu-card__chip-icon svg {
	width: 1em;
	height: 1em;
	display: block;
	fill: currentColor;
}


/* --- cart.css ------------------------------------------------------- */
/* ==========================================================================
   Koh Tomyums — Cart
   woocommerce/cart/cart.php · cart-totals.php · cart-empty.php

   Line items are typographic cards in a two-column auto-fit grid; the order
   summary is the primary panel. Every selector is scoped under .kt-cart so
   nothing leaks into the other WooCommerce parts. Colours come from the
   tokens in theme.css — none are re-declared here.
   ========================================================================== */

.kt-cart {
	max-width: 1180px;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   1. Page head — step strip and lede
   -------------------------------------------------------------------------- */

.kt-cart__head {
	padding: clamp(40px, 6vw, 68px) 0 clamp(24px, 3vw, 34px);
}

.kt-cart__steps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--kt-text-muted);
}

.kt-cart__step {
	display: flex;
	align-items: center;
	gap: 14px;
}

.kt-cart__step + .kt-cart__step::before {
	content: "\2014";
	color: var(--kt-gold-line-soft);
	letter-spacing: 0;
}

.kt-cart__step.is-active {
	color: var(--kt-gold);
	font-weight: 700;
}

.kt-cart__lede {
	margin: 12px 0 0;
	max-width: 620px;
	font-size: 14px;
	line-height: 1.7;
	font-weight: 300;
	color: var(--kt-text-quiet);
}

/* Notices sit between the head and the grid. */
.kt-cart > .woocommerce-notices-wrapper:not(:empty) {
	margin-bottom: clamp(18px, 2.4vw, 26px);
}

/* --------------------------------------------------------------------------
   2. Two-column grid — items left, summary right
   -------------------------------------------------------------------------- */

.kt-cart__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: clamp(20px, 3vw, 34px);
	align-items: start;
}

.kt-cart__main {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.kt-cart__aside {
	min-width: 0;
}

.kt-cart__items {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --------------------------------------------------------------------------
   3. Line-item card
   -------------------------------------------------------------------------- */

.kt-cart-item {
	border: 1px solid var(--kt-frame-soft);
	border-radius: var(--kt-radius);
	background: var(--kt-panel);
	-webkit-backdrop-filter: var(--kt-panel-blur);
	backdrop-filter: var(--kt-panel-blur);
	padding: 24px clamp(20px, 2.6vw, 26px);
	transition: border-color var(--kt-ease-slow);
}

.kt-cart-item:hover,
.kt-cart-item:focus-within {
	border-color: var(--kt-gold-line);
}

.kt-cart-item__top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
}

.kt-cart-item__title {
	margin: 0;
	font-family: var(--kt-font-display);
	font-size: 17px;
	font-weight: 400;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--kt-text-bright);
}

.kt-cart-item__title a {
	color: inherit;
}

.kt-cart-item__title a:hover {
	color: var(--kt-gold-bright);
}

.kt-cart-item__total {
	margin: 0;
	flex: none;
	font-family: var(--kt-font-display);
	font-size: 17px;
	color: var(--kt-gold);
	white-space: nowrap;
}

.kt-cart-item__total .amount,
.kt-cart-item__unit .amount {
	white-space: nowrap;
}

.kt-cart-item__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin-top: 8px;
	font-size: 12.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	line-height: 1.5;
	color: var(--kt-text-faint);
}

.kt-cart-item__meta > * + .kt-cart-item__unit::before {
	content: "\00B7";
	margin-right: 12px;
	color: var(--kt-gold-line-soft);
}

.kt-cart-item__heat {
	vertical-align: middle;
}

.kt-cart-item__note,
.kt-cart-item__extra {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.6;
	font-weight: 300;
	color: var(--kt-text-muted);
}

.kt-cart-item__extra dl,
.kt-cart-item__extra p {
	margin: 0;
}

.kt-cart-item__controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	margin-top: 18px;
}

/* --------------------------------------------------------------------------
   4. Quantity stepper — square hairline frame, JS wired in assets/js/theme.js
   -------------------------------------------------------------------------- */

.kt-cart-item .kt-qty {
	display: flex;
	align-items: center;
	border: 1px solid var(--kt-border-control);
	border-radius: var(--kt-radius-sm);
	flex: none;
}

.kt-cart-item .kt-qty .quantity {
	display: flex;
	align-items: center;
	margin: 0;
	float: none;
}

.kt-cart-item .kt-qty__btn {
	display: block;
	/* 12px horizontally, matching the product stepper. The 9px vertical gives
	   this compact row its height and stays. Below 900px the override at the
	   foot of this file already floors the button at 44x44 for touch. */
	padding: 9px 12px;
	border: 0;
	background: none;
	font-family: var(--kt-font-body);
	font-size: 15px;
	line-height: 1;
	color: var(--kt-gold);
	cursor: pointer;
	transition: color var(--kt-ease);
}

/*
 * The wash was a cascade casualty: 00-base gives .kt-qty__btn:hover a gold
 * color-mix background, but this file's `background: none` reset tied it on
 * specificity and won on load order — feedback vanished exactly where a
 * mis-tap costs money. Declared here, the wash wins the same fight.
 */
.kt-cart-item .kt-qty__btn {
	transition: background-color var(--kt-ease), color var(--kt-ease);
}

.kt-cart-item .kt-qty__btn:hover,
.kt-cart-item .kt-qty__btn:focus-visible {
	color: var(--kt-gold-hi);
	background: color-mix(in oklab, var(--kt-gold) 14%, transparent);
}

.kt-cart-item .kt-qty__btn:active {
	background: color-mix(in oklab, var(--kt-gold) 22%, transparent);
}

.kt-cart-item .kt-qty input[type="number"],
.kt-cart-item .kt-qty input.qty {
	width: 40px;
	min-width: 40px;
	padding: 9px 4px;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-family: var(--kt-font-display);
	font-size: 14px;
	font-weight: 400;
	line-height: 1;
	text-align: center;
	color: var(--kt-text-bright);
	-moz-appearance: textfield;
	-webkit-appearance: textfield;
	appearance: textfield;
}

/* AJAX swaps the totals DOM in place; the class is re-added by theme.js so
   the new number arrives instead of silently being different. */
.kt-cart-totals__total-value.kt-total-tick,
.kt-cart-item__total.kt-total-tick {
	animation: kt-fade-up 320ms var(--kt-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

.kt-cart-item .kt-qty input[type="number"]::-webkit-outer-spin-button,
.kt-cart-item .kt-qty input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.kt-cart-item .kt-qty__fixed {
	display: block;
	min-width: 28px;
	/* Sits in the stepper's slot when the quantity is fixed, so it tracks the
	   button padding above or the column jumps between the two states. */
	padding: 9px 12px;
	font-family: var(--kt-font-display);
	font-size: 14px;
	text-align: center;
	color: var(--kt-text-bright);
}

/* Remove control */
.kt-cart-item__remove {
	flex: none;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-text-faint);
	background: none;
	border: 0;
	padding: 4px 0;
	cursor: pointer;
}

.kt-cart-item__remove:hover,
.kt-cart-item__remove:focus-visible {
	color: var(--kt-gold-bright);
}

/* --------------------------------------------------------------------------
   5. Actions row — coupon + update
   -------------------------------------------------------------------------- */

.kt-cart__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	padding-top: 4px;
}

.kt-cart__coupon {
	flex: 1 1 260px;
	min-width: 0;
}

.kt-cart__coupon-label {
	display: block;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-text-dim);
	margin-bottom: 8px;
}

.kt-cart__coupon-row {
	display: flex;
	gap: 10px;
}

.kt-cart__coupon-input {
	flex: 1 1 auto;
	min-width: 0;
}

.kt-cart__update {
	flex: none;
}

.kt-cart__update[disabled] {
	opacity: 0.45;
	pointer-events: none;
}

/* --------------------------------------------------------------------------
   6. "Add more dishes" — dashed ghost button
   -------------------------------------------------------------------------- */

.kt-cart__more {
	display: block;
	border: 1px dashed var(--kt-gold-line-faint);
	border-radius: var(--kt-radius);
	padding: 20px 26px;
	text-align: center;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--kt-gold-dim);
	transition: border-color var(--kt-ease), color var(--kt-ease);
}

.kt-cart__more:hover,
.kt-cart__more:focus-visible {
	border-color: var(--kt-gold-line);
	color: var(--kt-gold-hi);
}

.kt-cart__more-arrow {
	font-family: Georgia, "Times New Roman", serif;
}

/* --------------------------------------------------------------------------
   7. Order summary panel
   -------------------------------------------------------------------------- */

.kt-cart-totals {
	background: linear-gradient(to bottom, var(--kt-panel-top), var(--kt-panel-bottom));
	-webkit-backdrop-filter: var(--kt-panel-blur);
	backdrop-filter: var(--kt-panel-blur);
	padding: clamp(28px, 3.6vw, 40px) clamp(24px, 3.4vw, 36px);
}

.kt-cart-totals__title {
	margin: 0;
	font-family: var(--kt-font-display);
	font-size: clamp(18px, 2.4vw, 23px);
	font-weight: 400;
	letter-spacing: 0.16em;
	color: var(--kt-gold-soft);
}

.kt-cart-totals__rule {
	display: block;
	height: 1px;
	background: var(--kt-hairline);
	margin: 20px 0 22px;
}

.kt-cart-totals__rows + .kt-cart-totals__rule {
	margin: 22px 0;
}

.kt-cart-totals__rows {
	display: flex;
	flex-direction: column;
	gap: 13px;
	font-size: 14px;
	font-weight: 300;
	color: var(--kt-text-body);
}

.kt-cart-totals__row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
}

.kt-cart-totals__label {
	min-width: 0;
}

.kt-cart-totals__value {
	flex: none;
	text-align: right;
	white-space: nowrap;
}

.kt-cart-totals__row--discount .kt-cart-totals__value,
.kt-cart-totals__row--discount .kt-cart-totals__value .amount {
	color: var(--kt-gold-soft);
}

/* The coupon "[Remove]" link WooCommerce appends to the discount row. */
.kt-cart-totals__value .woocommerce-remove-coupon {
	display: inline-block;
	margin-left: 10px;
	font-size: 10.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kt-text-faint);
}

.kt-cart-totals__value .woocommerce-remove-coupon:hover {
	color: var(--kt-gold-bright);
}

.kt-cart-totals__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
}

.kt-cart-totals__total-label {
	font-family: var(--kt-font-display);
	font-size: 17px;
	letter-spacing: 0.14em;
	color: var(--kt-text-bright);
}

.kt-cart-totals__total-value {
	flex: none;
	font-family: var(--kt-font-display);
	font-size: clamp(22px, 2.8vw, 28px);
	line-height: 1.1;
	color: var(--kt-gold);
	text-align: right;
	white-space: nowrap;
}

.kt-cart-totals__total-value strong {
	font-weight: 400;
}

.kt-cart-totals__total-value small,
.kt-cart-totals__total-value .includes_tax {
	display: block;
	margin-top: 6px;
	font-family: var(--kt-font-body);
	font-size: 11.5px;
	font-weight: 300;
	letter-spacing: 0.06em;
	color: var(--kt-text-muted);
}

/* "Collect at" inset */
.kt-cart-collect {
	border: 1px solid var(--kt-gold-line-faint);
	border-radius: var(--kt-radius);
	padding: 18px 20px;
	margin-top: 26px;
}

.kt-cart-collect__label {
	margin: 0 0 10px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-gold-dim);
}

.kt-cart-collect__address {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.7;
	font-weight: 300;
	color: var(--kt-text-body);
}

.kt-cart-collect__time {
	margin: 12px 0 0;
	font-size: 12.5px;
	font-weight: 300;
	color: var(--kt-text-muted);
}

.kt-cart-collect__slot {
	color: var(--kt-gold-bright);
}

/* Primary CTA — the design's heavier solid gold button */
.kt-cart-totals__cta {
	margin-top: 24px;
	padding: 17px 30px;
	font-size: 12.5px;
	letter-spacing: 0.24em;
}

/* Anything a payment plugin adds on woocommerce_proceed_to_checkout. */
.kt-cart-totals .wc-proceed-to-checkout {
	margin-top: 14px;
}

.kt-cart-totals__note {
	margin: 14px 0 0;
	font-size: 12px;
	line-height: 1.7;
	font-weight: 300;
	text-align: center;
	color: var(--kt-text-muted);
}

/* --------------------------------------------------------------------------
   8. Empty cart
   -------------------------------------------------------------------------- */

.kt-cart--empty .kt-empty__mark svg {
	margin: 0 auto;
}

/* --------------------------------------------------------------------------
   9. Narrow screens
   -------------------------------------------------------------------------- */

@media (max-width: 480px) {
	.kt-cart-item__top {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.kt-cart__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.kt-cart__update {
		width: 100%;
	}
}

/* Cart page heading. page.php suppresses `.kt-page-head` on WooCommerce pages,
   so this is the page's only <h1> — it must be present and styled. */
.kt-cart__title {
	font-family: var(--kt-font-display);
	font-size: clamp(26px, 4vw, 40px);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kt-gold);
	line-height: 1.15;
	margin: 18px 0 14px;
}

/* --------------------------------------------------------------------------
   Touch targets on a phone.

   The cart is the one screen where a mis-tap costs the customer money, and its
   two controls were the smallest on it: the quantity steppers at 33px and the
   "Remove" link at 23px. Grown at the mobile breakpoint only — on a desktop
   pointer the current sizes are correct and the design is drawn around them.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.kt-cart-item .kt-qty__btn {
		min-width: 44px;
		min-height: 44px;
		padding: 9px 12px;
	}

	.kt-cart-item .kt-qty input[type="number"],
	.kt-cart-item .kt-qty input.qty {
		min-height: 44px;
	}

	.woocommerce a.remove.kt-cart-item__remove {
		min-height: 44px;
		padding-block: 0;
	}
}


/* --- confirmation.css ------------------------------------------------------- */
/* ==========================================================================
   Confirmation — order received
   woocommerce/checkout/thankyou.php
   woocommerce/order/order-details.php
   template-parts/order/status-track.php

   Every selector is scoped to .kt-confirm, .kt-track, .kt-collect or
   .kt-order-details so nothing leaks into other templates. Colours come from
   the tokens in theme.css; where an alpha derivative is needed it is mixed
   from a token, with an rgba fallback on the line above.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Page column
   -------------------------------------------------------------------------- */

.kt-confirm {
	max-width: calc(900px + var(--kt-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--kt-gutter);
}

/*
 * The gutter, once.
 *
 * `.kt-confirm` carries its own padding so it stands up anywhere, but the only
 * template that renders it puts it inside page.php's `.kt-section`, which
 * already applies the same `--kt-gutter`. Paying it twice cost 40px of a 320px
 * screen and 102px at 1024px — before the panel's own 24px padding, which is
 * what left the order table 192px to lay out in. Scoped to the nested case, so
 * the standalone padding above still applies if it is ever rendered elsewhere.
 */
.kt-section .kt-confirm {
	max-width: 900px;
	padding-inline: 0;
}

/* --------------------------------------------------------------------------
   2. Hero — success crest and thank-you
   -------------------------------------------------------------------------- */

.kt-confirm__hero {
	text-align: center;
	padding: clamp(56px, 8vw, 100px) 0 clamp(30px, 4vw, 44px);
}

.kt-confirm__crest {
	width: 96px;
	height: 96px;
	margin: 0 auto 30px;
	border: 1px solid var(--kt-gold-line);
	border-radius: var(--kt-radius-pill);
	display: grid;
	place-items: center;
	background: radial-gradient(circle at 50% 50%, rgba(215, 167, 92, 0.10), transparent 68%);
	background: radial-gradient(circle at 50% 50%, oklch(0.80 0.11 85 / 0.10), transparent 68%);
}

.kt-confirm__crest svg {
	display: block;
}

.kt-confirm__eyebrow {
	margin: 0;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--kt-gold-dim);
}

.kt-confirm__title {
	font-family: var(--kt-font-display);
	font-size: clamp(30px, 5vw, 54px);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kt-text-hero);
	line-height: 1.1;
	margin-top: 18px;
	text-wrap: balance;
	/*
	 * This heading interpolates the customer's first name, which is user input
	 * and can be any length. Without this a long one — 11 characters at 320px,
	 * 13 at 375px — overflowed the heading box and set the whole DOCUMENT
	 * scrolling sideways: 115px of horizontal pan at 320px for
	 * "Konstantinopoulos", which throws every centred element on the page off
	 * centre. `text-wrap: balance` does not break words; only this does.
	 */
	overflow-wrap: break-word;
}

.kt-confirm__script {
	font-family: var(--kt-font-script);
	font-size: clamp(25px, 3.2vw, 34px);
	color: var(--kt-gold-soft);
	line-height: 1.3;
	margin: 12px 0 0;
}

.kt-confirm__lede {
	font-size: clamp(14px, 1.5vw, 15.5px);
	line-height: 1.75;
	font-weight: 300;
	color: var(--kt-text-body);
	max-width: 520px;
	margin: 18px auto 0;
	text-wrap: pretty;
}

.kt-confirm__order-no {
	color: var(--kt-gold-bright);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   3. Summary panel — stats grid + status track
   -------------------------------------------------------------------------- */

.kt-confirm__panel {
	padding: clamp(30px, 4vw, 44px) clamp(24px, 3.4vw, 44px);
}

/*
 * Three across or one down — never two-and-an-orphan.
 *
 * `auto-fit` with a 150px floor fitted exactly two columns between 465px and
 * 672px, so the three stats rendered as COLLECT AT + ORDER over a stranded
 * PAID. That is a 200px-wide band covering small tablets and most phones in
 * landscape. The hinge is the same 600px the track already uses, so the panel
 * changes shape once rather than twice.
 */
.kt-confirm__stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	text-align: center;
}

@media (min-width: 601px) {
	.kt-confirm__stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.kt-confirm__stat-label {
	margin: 0 0 10px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-gold-dim);
}

.kt-confirm__stat-value {
	margin: 0;
	font-family: var(--kt-font-display);
	font-size: clamp(22px, 3vw, 28px);
	letter-spacing: 0.04em;
	line-height: 1.15;
	color: var(--kt-text-bright);
}

.kt-confirm__stat-value--gold {
	color: var(--kt-gold);
}

/* The "As soon as ready" fallback is a phrase, not a time — drop it a size. */
.kt-confirm__stat-value--text {
	font-size: clamp(15px, 2vw, 19px);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.35;
}

.kt-confirm__stat-value .woocommerce-Price-amount,
.kt-confirm__stat-value bdi {
	font-family: inherit;
	font-size: inherit;
	color: inherit;
	white-space: nowrap;
}

.kt-confirm__rule {
	height: 1px;
	background: var(--kt-hairline);
	margin: clamp(28px, 3.6vw, 38px) 0;
}

/* --------------------------------------------------------------------------
   4. Status track
   -------------------------------------------------------------------------- */

.kt-track__label {
	margin: 0 0 20px;
	text-align: center;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-gold-dim);
}

.kt-track__steps {
	--kt-track-gap: clamp(10px, 2vw, 18px);

	/*
	 * The pip is a SQUARE ROTATED 45deg, so its visual half-extent is
	 * size × √2 ÷ 2 = 9.9px, not 7px — and `transform` does not change layout,
	 * so its layout box is still 14px wide with its centre at 7px. Every
	 * connector inset below is derived from those two facts plus one breathing
	 * gap, because the hand-picked numbers they replaced (14px on the row,
	 * 12px on the stack) produced a 4.1px gap at one breakpoint and 2.1px at
	 * the other, and put the vertical rule half a pixel left of the diamonds
	 * it was supposed to join.
	 */
	--kt-pip: 14px;
	/* = --kt-pip × √2 ÷ 2, to 9.899495. CSS has no portable sqrt(), so this is
	   a literal: CHANGE IT WITH --kt-pip or every inset here is silently wrong. */
	--kt-pip-reach: 9.9px;
	--kt-pip-gap: 4px;

	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--kt-track-gap);
}

.kt-track__step {
	position: relative;
	flex: 1 1 120px;
	min-width: 108px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

/*
 * THE FILL, as a single scalar.
 *
 * --kt-fill is how far the gold has travelled along a connector, 0% to 100%,
 * and it is the ONLY thing that animates. It has to be registered: an
 * unregistered custom property is an untyped token stream, so the browser
 * cannot interpolate it and the fill would snap.
 *
 * Registering it is also what makes one rule serve both layouts. The run is
 * horizontal on the row and vertical on the stack, but the fill is a scalar
 * either way — only the gradient's DIRECTION differs, and direction is not
 * animated. So an unlit connector computes to the same 0% in both layouts,
 * and crossing the 600px breakpoint (rotating a phone, most often) changes
 * nothing and therefore animates nothing.
 *
 * That is worth stating because the obvious implementation does not have this
 * property. Animating `background-size` needs `0% 100%` on the row and
 * `100% 0%` on the stack, so an unlit connector's value genuinely changes at
 * the breakpoint and interpolates through `50% 50%` — a half-length,
 * half-thickness gold ghost on every dark connector, for the full duration,
 * every time someone waiting for their food turns their phone. The workaround
 * is to hang the transition on the lit selectors only, which then makes a
 * retraction snap off in one frame while the pips it joins still fade for
 * 1100ms. Registering the property dissolves both problems instead of trading
 * one for the other.
 *
 * WITHOUT @property support the gradient still renders correctly at 0% and
 * 100%; the fill just switches instantly. That is the intended degradation.
 */
@property --kt-fill {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 0%;
}

/* Connector: drawn from the previous step's pip to this one, so the <ol>
   never has to carry presentational children.

   ONE layer, not two: the gradient carries both colours with a hard stop at
   --kt-fill, so everything before the stop is lit and everything after it is
   the faint rail. NEVER write the `background` SHORTHAND on this element — it
   resets background-image and silently deletes the fill. That is exactly what
   the state rules below used to do. */
.kt-track__step::before {
	content: "";
	position: absolute;
	/* The rule's CENTRE on the pip's centre. `top` positions its top EDGE, so a
	   1px rule at exactly half the pip sits half a pixel low — the same
	   correction the vertical rule carries. */
	top: calc(var(--kt-pip) / 2 - 0.5px);
	left: calc(-50% - var(--kt-track-gap) + var(--kt-pip-reach) + var(--kt-pip-gap));
	right: calc(50% + var(--kt-pip-reach) + var(--kt-pip-gap));
	height: 1px;
	--kt-fill: 0%;
	background-image: linear-gradient(
		to right,
		var(--kt-gold-line) var(--kt-fill),
		var(--kt-gold-line-faint) var(--kt-fill)
	);
}

.kt-track__step:first-child::before {
	content: none;
}

/* Lit. The travel distance only — the colours live on the base rule now, and
   `100%` is correct on both axes, so this rule stays out of the media query. */
.kt-track__step.is-done::before,
.kt-track__step.is-current::before {
	--kt-fill: 100%;
}

.kt-track__pip {
	width: var(--kt-pip);
	height: var(--kt-pip);
	flex: none;
	background: transparent;
	border: 1px solid var(--kt-gold-line-soft);
	transform: rotate(45deg);
}

.kt-track__step.is-done .kt-track__pip,
.kt-track__step.is-current .kt-track__pip {
	background: var(--kt-gold);
	border-color: var(--kt-gold);
}

.kt-track__step.is-current .kt-track__pip {
	box-shadow: 0 0 0 4px rgba(215, 167, 92, 0.16);
	box-shadow: 0 0 0 4px color-mix(in oklab, var(--kt-gold) 18%, transparent);
}

.kt-track__name {
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.45;
	color: var(--kt-text-faint);
}

.kt-track__step.is-done .kt-track__name {
	font-weight: 700;
	color: var(--kt-gold-hi);
}

.kt-track__step.is-current .kt-track__name {
	font-weight: 700;
	color: var(--kt-gold-bright);
}

/*
 * Reserve the bold width in every state.
 *
 * The stacked track is shrink-wrapped to `max-content` so it can be centred,
 * and done/current labels switch to 700 — so the widest label GREW when it lit
 * up, the auto margins re-split, and the whole rail slid a measured 1.9px
 * sideways at the exact moment of the ready transition, under the celebration.
 * An invisible bold copy of the same text at zero height pins each label's
 * intrinsic width to its bold width whatever the state. `visibility: hidden`
 * keeps it out of the accessibility tree, so the label is not announced twice.
 */
.kt-track__name::after {
	content: attr(data-label);
	display: block;
	height: 0;
	overflow: hidden;
	visibility: hidden;
	font-weight: 700;
}

.kt-track.is-halted .kt-track__pip {
	border-color: var(--kt-gold-line-faint);
}

.kt-track__note {
	margin: 20px 0 0;
	text-align: center;
	font-size: 12.5px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--kt-text-muted);
}

.kt-track__note--alert {
	color: var(--kt-err);
}

/* Below 600px the row would wrap into orphaned segments — stack it instead. */
@media (max-width: 600px) {
	.kt-track__steps {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 0;

		/*
		 * Centre the stack as a block. The label above it and the note below it
		 * are both centred, and the steps were flush left against them, which is
		 * what made this look unaligned. The labels stay left-aligned relative to
		 * each other — a column of diamonds cannot be centred individually
		 * without going ragged — so the block centres and its contents do not.
		 *
		 * No inline padding to "make room" for the current pip's halo: symmetric
		 * padding and `margin-inline: auto` cancel exactly, so it moved the rail
		 * by a measured 0.000px and only spent 17.2px of the max-width budget,
		 * wrapping labels sooner. Nothing clips the halo anyway — no ancestor
		 * here sets `overflow`.
		 */
		width: max-content;
		max-width: 100%;
		margin-inline: auto;
	}

	.kt-track__step {
		flex: 0 0 auto;
		min-width: 0;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		/*
		 * A true 16px of daylight. The flex gap starts at the pip's LAYOUT edge
		 * (14px) but the rotated diamond's tip reaches 16.9px, so a plain 16px
		 * gap renders as 13.1px to the eye.
		 */
		gap: calc(16px + var(--kt-pip-reach) - var(--kt-pip) / 2);
		padding: 13px 0;
		text-align: left;
	}

	/*
	 * Half a rule each, so no step has to know its neighbour's height.
	 *
	 * The single rule this replaces spanned the gap between two pips using
	 * `±50%` — which resolves against the step's OWN height, and is therefore
	 * correct only while every step is exactly as tall as its neighbour. The
	 * moment one label wraps to two lines it is wrong by half the difference,
	 * in opposite directions at the two ends: with one wrapped label the rule
	 * ran 3.96px INTO the diamond above it and left an 11.98px float below.
	 * That is one longer translation away from being visible. Each step now
	 * draws only from its own pip to its own edge, and the halves meet at the
	 * boundary.
	 */
	.kt-track__step::before,
	.kt-track__step::after {
		content: "";
		position: absolute;
		/* Centre the 1px rule on the pip's centre: 7px − half a pixel. */
		left: calc(var(--kt-pip) / 2 - 0.5px);
		right: auto;
		width: 1px;
		height: auto;
		/*
		 * Same scalar, rotated gradient. Only `to bottom` changes; --kt-fill
		 * stays 0%/100% exactly as on the row, which is what keeps a
		 * breakpoint crossing from animating anything.
		 */
		--kt-fill: 0%;
		background-image: linear-gradient(
			to bottom,
			var(--kt-gold-line) var(--kt-fill),
			var(--kt-gold-line-faint) var(--kt-fill)
		);
	}

	.kt-track__step::before {
		top: 0;
		bottom: calc(50% + var(--kt-pip-reach) + var(--kt-pip-gap));
	}

	.kt-track__step::after {
		top: calc(50% + var(--kt-pip-reach) + var(--kt-pip-gap));
		bottom: 0;
	}

	/*
	 * A done step's lower half always leads to a done or current step, so it is
	 * lit; a current step's leads to a todo step, so it is not. Together with
	 * the shared `.is-done/.is-current::before` rule that reproduces the old
	 * single-rule colouring exactly.
	 */
	.kt-track__step.is-done::after {
		--kt-fill: 100%;
	}

	.kt-track__step:last-child::after {
		content: none;
	}
}

/* --------------------------------------------------------------------------
   5. Order details panel (also used on the account view-order screen)
   -------------------------------------------------------------------------- */

.kt-confirm__details > * {
	margin-top: clamp(20px, 3vw, 30px);
}

.kt-order-details {
	margin-top: clamp(20px, 3vw, 30px);
	padding: clamp(30px, 4vw, 44px) clamp(24px, 3.4vw, 44px);
}

.kt-order-details__title {
	margin: 0 0 clamp(20px, 2.6vw, 28px);
	font-family: var(--kt-font-display);
	font-size: clamp(15px, 2vw, 19px);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-text-bright);
}

.kt-order-details__scroll {
	overflow-x: auto;
}

.kt-order-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--kt-text-body);
}

.kt-order-table th,
.kt-order-table td {
	text-align: left;
	vertical-align: top;
	padding: 14px 0;
	border: 0;
}

/*
 * The column headers are screen-reader-only now (the template wraps their text
 * in .screen-reader-text): a receipt is a list with a summary, not a data
 * grid, and DISH/TOTAL over two obvious columns was furniture. The cells stay
 * so the column layout is defined; they just take no height.
 */
.kt-order-table thead th {
	padding: 0;
	border: 0;
	/* The sr-only spans are absolutely positioned, so the cells are visually
	   empty — but an empty table cell still stands a line box tall. line-height
	   collapses the row to nothing; screen readers read DOM text regardless. */
	line-height: 0;
}

.kt-order-table thead th.product-total,
.kt-order-table td.product-total,
.kt-order-table tfoot td {
	text-align: right;
	padding-left: 20px;
	width: 1%;
}

/*
 * Only money resists wrapping.
 *
 * `white-space: nowrap` used to sit on the CELL, which made every value in the
 * footer unbreakable — the payment method, the kitchen notes and the customer's
 * own note along with the amounts. At 320px that drove the table 87px past the
 * panel that clips it and the totals were simply cut off the right-hand side.
 *
 * The exceptions were being added a row class at a time (`.is-note`,
 * `.is-collection` below); the payment method was just the one nobody had hit
 * yet, and the next free-text row would have been the one after that. Scoping
 * the rule to WooCommerce's own price wrapper fixes the whole class instead of
 * the instance: amounts stay on one line, prose wraps.
 */
.kt-order-table .woocommerce-Price-amount {
	white-space: nowrap;
}

/*
 * Long single tokens — a gateway name, an email, a transaction id — must be
 * able to break rather than hold the table open. `anywhere` rather than
 * `break-word` because only `anywhere` shrinks the cell's min-content width,
 * which is what actually lets the table fit.
 */
.kt-order-table th,
.kt-order-table td {
	overflow-wrap: anywhere;
}

/* The leaders now do the row-scanning work; hairlines between every item on
   top of them read as a spreadsheet. Space separates items instead.

   The tripled class is what actually removes them: with the theme's own
   hairline rule gone, WooCommerce's `.woocommerce table.shop_table td`
   border-top (0,2,2) surfaced from underneath — it had been painted over, not
   beaten. Three classes take this to (0,3,1), decided on class count. */
.kt-order-table.kt-order-table.kt-order-table thead th,
.kt-order-table.kt-order-table.kt-order-table tbody td,
.kt-order-table.kt-order-table.kt-order-table tfoot th,
.kt-order-table.kt-order-table.kt-order-table tfoot td {
	border-top: 0;
}

.kt-order-table.kt-order-table.kt-order-table tbody td {
	padding-top: 9px;
	padding-bottom: 9px;
}

/*
 * The only two rules the receipt draws, re-stated at the same tripled
 * specificity AFTER the blanket removal so they win on source order: one
 * hairline separating items from the summary, one gold-faint rule framing the
 * total.
 */
.kt-order-table.kt-order-table.kt-order-table tfoot tr:first-child th,
.kt-order-table.kt-order-table.kt-order-table tfoot tr:first-child td {
	border-top: 1px solid var(--kt-hairline);
}

.kt-order-table.kt-order-table.kt-order-table tfoot .is-grand th,
.kt-order-table.kt-order-table.kt-order-table tfoot .is-grand td {
	border-top: 1px solid var(--kt-gold-line-faint);
}

/*
 * The receipt line: dish name, a dotted leader, then the price in the next
 * cell. The leader is the flex middle that soaks up the width a wide measure
 * otherwise leaves empty — the same job it does on a printed menu, and the
 * reason the eye no longer has to cross blank space to connect name to money.
 * The flex row lives INSIDE the td (see order-details-item.php), so the cell
 * itself stays a table cell and column layout is untouched.
 */
.kt-order-table__line {
	display: flex;
	align-items: flex-end;
	gap: 10px;
}

.kt-order-table__dish {
	flex: 0 1 auto;
	min-width: 0;
}

.kt-order-table__leader {
	flex: 1 0 24px;
	border-bottom: 1px dotted var(--kt-gold-line-mid);
	/* Sit the dots on the text baseline rather than the descender line. */
	transform: translateY(-5px);
}

.kt-order-table tbody .product-name {
	font-weight: 400;
	color: var(--kt-text);
}

.kt-order-table tbody .product-name a {
	color: var(--kt-text-bright);
}

.kt-order-table tbody .product-name a:hover {
	color: var(--kt-gold-bright);
}

.kt-order-table .product-quantity {
	margin-left: 8px;
	font-size: 12px;
	font-weight: 400;
	color: var(--kt-gold-dim);
}

/* Variation / item meta — protein, heat, kitchen notes. */
.kt-order-table .wc-item-meta {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 2px 16px;
	font-size: 12.5px;
	color: var(--kt-text-muted);
}

.kt-order-table .wc-item-meta li {
	display: flex;
	gap: 6px;
	margin: 0;
}

.kt-order-table .wc-item-meta strong {
	font-weight: 600;
	color: var(--kt-text-faint);
}

.kt-order-table .wc-item-meta p {
	margin: 0;
}

.kt-order-table .product-purchase-note td {
	padding-top: 0;
	font-size: 12.5px;
	color: var(--kt-text-muted);
}

.kt-order-table tfoot th {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kt-text-dim);
}

.kt-order-table tfoot tr:first-child th,
.kt-order-table tfoot tr:first-child td {
	border-top: 1px solid var(--kt-hairline);
	padding-top: 16px;
}

/*
 * The summary rows between the items and the total are supporting numbers —
 * subtotal, discount, payment — and they read best as a quiet, tight block:
 * smaller, lighter, half the row height of an item. The doubled class beats
 * WooCommerce's `tfoot td { font-weight: 700 }` (0,2,3) on class count, which
 * is why the payment method no longer renders semi-bold.
 */
.kt-order-table.kt-order-table tfoot .is-subtotal th,
.kt-order-table.kt-order-table tfoot .is-discount th,
.kt-order-table.kt-order-table tfoot .is-payment th,
.kt-order-table.kt-order-table tfoot .is-collection th {
	padding-top: 6px;
	padding-bottom: 6px;
}

.kt-order-table.kt-order-table tfoot .is-subtotal td,
.kt-order-table.kt-order-table tfoot .is-discount td,
.kt-order-table.kt-order-table tfoot .is-payment td,
.kt-order-table.kt-order-table tfoot .is-collection td {
	padding-top: 6px;
	padding-bottom: 6px;
	font-size: 13px;
	font-weight: 400;
	color: var(--kt-text-dim);
}

/*
 * "Visa credit card - 0004" is a short token phrase, not prose, and the
 * money-sized value column wrapped it into an awkward two-line stack. Nowrap
 * only where there is room: below 600px the documented 320px overflow trap
 * (see the nowrap history above) still rules, and the line may wrap.
 */
@media (min-width: 600px) {
	.kt-order-table tfoot .is-payment td {
		white-space: nowrap;
	}
}

.kt-order-table tfoot .is-discount th,
.kt-order-table tfoot .is-discount td {
	color: var(--kt-gold-soft);
}

/* `white-space: normal` used to be here to undo the blanket cell nowrap. That
   is the default now, so only the tone is left. */
.kt-order-table tfoot .is-note td,
.kt-order-table tfoot .is-collection td {
	font-weight: 300;
	color: var(--kt-text-body);
}

/*
 * Note rows: label on its own full-width row, prose on the next.
 * Both carry colspan="2" — see woocommerce/order/order-details.php.
 */
.kt-order-table tfoot .is-note th {
	padding-bottom: 2px;
}

/*
 * The doubled class is deliberate. WooCommerce ships
 * `.woocommerce table.shop_table tfoot td { font-weight: 700 }`, which scores
 * (0,2,3) and quietly beat the (0,2,2) this rule would otherwise have — which
 * is why every customer note has rendered bold since this table was built, not
 * just since it moved rows. Repeating the class takes it to (0,3,2), which wins
 * on class count.
 *
 * padding-left is deliberately NOT reset: the surrounding cells resolve to 12px
 * from that same WooCommerce sheet, and zeroing it here pushed the note 12px
 * out of line with every other label in the table.
 */
.kt-order-table.kt-order-table tfoot .is-note-body td {
	width: auto;
	padding-top: 0;
	/* Prose is never right-aligned. That column is right-aligned because it
	   holds money, and a customer's note is not money. */
	text-align: left;
	font-weight: 300;
	color: var(--kt-text-body);
}

/* The total is the receipt's one loud line: its own rule above, air on both
   sides, Cinzel and gold doing what they do on the hero. */
.kt-order-table tfoot .is-grand th,
.kt-order-table tfoot .is-grand td {
	border-top: 1px solid var(--kt-gold-line-faint);
	padding-top: 18px;
	padding-bottom: 4px;
}

.kt-order-table tfoot .is-grand th {
	font-family: var(--kt-font-display);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0.14em;
	color: var(--kt-text-bright);
	vertical-align: baseline;
}

.kt-order-table tfoot .is-grand td {
	font-family: var(--kt-font-display);
	font-size: clamp(20px, 2.8vw, 26px);
	color: var(--kt-gold);
	vertical-align: baseline;
}

.kt-order-table tfoot .is-grand .woocommerce-Price-amount,
.kt-order-table tfoot .is-grand bdi {
	font-family: inherit;
	color: inherit;
}

/* Customer contact block — name, phone, email. Never an address: pick-up only. */
.kt-order-details__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* min() so the floor can never exceed the container: a bare 200px floor
	   cannot shrink, and overhung the panel by 10px below 328px. */
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 20px;
}

.kt-order-details__item {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.kt-order-details__key {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-gold-dim);
}

.kt-order-details__val {
	font-size: 14px;
	font-weight: 300;
	color: var(--kt-text-body);
	overflow-wrap: anywhere;
}

.kt-order-details__val a:hover {
	color: var(--kt-gold-bright);
}

/* --------------------------------------------------------------------------
   6. Guest / expired-link panel
   -------------------------------------------------------------------------- */

.kt-confirm__guest {
	text-align: center;
}

.kt-confirm__guest-text {
	max-width: 520px;
	margin: 0 auto;
	font-size: 14.5px;
	font-weight: 300;
	line-height: 1.75;
	color: var(--kt-text-muted);
}

.kt-confirm__guest .kt-confirm__actions {
	justify-content: center;
}

/* --------------------------------------------------------------------------
   7. "Where to collect" venue card
   -------------------------------------------------------------------------- */

.kt-confirm__venue {
	margin-top: clamp(20px, 3vw, 30px);
}

.kt-collect {
	position: relative;
	overflow: hidden;
	min-height: 220px;
	display: flex;
	border: 1px solid var(--kt-frame);
	border-radius: var(--kt-radius-lg);
}

.kt-collect--plain {
	background: linear-gradient(to bottom, var(--kt-panel-top), var(--kt-panel-bottom));
	-webkit-backdrop-filter: var(--kt-panel-blur);
	backdrop-filter: var(--kt-panel-blur);
}

.kt-collect__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kt-collect__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to right,
		rgba(17, 15, 12, 0.96) 34%,
		rgba(17, 15, 12, 0.6) 68%,
		rgba(17, 15, 12, 0.25)
	);
	background: linear-gradient(
		to right,
		oklch(0.11 0.006 60 / 0.96) 34%,
		oklch(0.11 0.006 60 / 0.6) 68%,
		oklch(0.11 0.006 60 / 0.25)
	);
}

.kt-collect__inner {
	position: relative;
	width: 100%;
	align-self: center;
	padding: clamp(28px, 4vw, 44px) clamp(22px, 4vw, 52px);
}

.kt-collect__title {
	font-family: var(--kt-font-display);
	font-size: clamp(14px, 1.8vw, 19px);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-text-bright);
}

.kt-collect__body {
	margin: 12px 0 0;
	max-width: 420px;
	font-size: clamp(15px, 1.8vw, 18px);
	font-weight: 300;
	line-height: 1.75;
	color: var(--kt-text);
	text-wrap: pretty;
}

.kt-collect__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 14px 0 0;
	font-size: 12.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-text-quiet);
}

.kt-collect__meta a:hover {
	color: var(--kt-gold-bright);
}

/* --------------------------------------------------------------------------
   8. Forward CTAs and closing note
   -------------------------------------------------------------------------- */

.kt-confirm__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin: clamp(20px, 3vw, 30px) 0 0;
}

.kt-confirm__actions .kt-btn {
	flex: 1 1 220px;
	padding: 16px 28px;
	letter-spacing: 0.22em;
	font-size: 12px;
}

.kt-confirm__note {
	margin: clamp(20px, 3vw, 26px) 0 0;
	text-align: center;
	font-size: 12.5px;
	font-weight: 300;
	color: var(--kt-text-faint);
}

.kt-confirm__note a {
	color: var(--kt-gold-dim);
	border-bottom: 1px solid var(--kt-gold-line-faint);
}

.kt-confirm__note a:hover {
	color: var(--kt-gold-bright);
	border-bottom-color: var(--kt-gold);
}

/* --------------------------------------------------------------------------
   9. Print — the confirmation doubles as a collection slip
   -------------------------------------------------------------------------- */

@media print {
	.kt-confirm__venue,
	.kt-confirm__actions,
	.kt-confirm__note {
		display: none !important;
	}

	.kt-confirm__panel,
	.kt-order-details {
		border-color: #999 !important;
		background: none !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}

	.kt-confirm__hero {
		padding-top: 0;
	}
}

/* --------------------------------------------------------------------------
   Live status track — the advance, and the moment it lands
   --------------------------------------------------------------------------
   The track updates in place while the customer watches (theme.js polls the
   plugin's status feed), so the change between stages has to be a transition
   rather than a jump — otherwise the pips just teleport and the customer is
   never sure whether anything happened.

   There is no SMS on this install, so this page IS the notification. The burst
   is the one moment in the whole site where a flourish is doing work: it is what
   tells someone glancing at their phone that the food is ready.
   -------------------------------------------------------------------------- */

.kt-track__pip {
	/*
	 * 1100ms on --kt-ease-soft, not 420ms on easeOutQuint.
	 *
	 * The curve changed with the duration and had to. easeOutQuint leaves almost
	 * all of its distance in the first fifth, which is lively at 420ms but at
	 * this length reads as a jump followed by a stall. A symmetric ease spends
	 * the time evenly, which is what "slow and smooth" actually looks like.
	 */
	transition:
		background-color 1100ms var(--kt-ease-soft, cubic-bezier(0.4, 0, 0.2, 1)),
		border-color 1100ms var(--kt-ease-soft, cubic-bezier(0.4, 0, 0.2, 1)),
		box-shadow 1100ms var(--kt-ease-soft, cubic-bezier(0.4, 0, 0.2, 1)),
		transform 1100ms var(--kt-ease-soft, cubic-bezier(0.4, 0, 0.2, 1));
}

.kt-track__name {
	transition: color 1100ms var(--kt-ease-soft, cubic-bezier(0.4, 0, 0.2, 1));
}

/*
 * The connector FILLS. It used to cross-fade its colour, which changed the
 * whole line at once and is why it read as a switch rather than a sweep.
 *
 * On the base selector, so it runs in BOTH directions: an order the kitchen
 * puts back retracts over the same duration the pips take to fade, instead of
 * blacking out in one frame under diamonds that are still gold.
 *
 * Longhands rather than the shorthand, because `transition: --kt-fill ...`
 * puts a custom-property name where the parser expects a property name, and
 * this is not the place to find out how each engine feels about that.
 */
.kt-track__step::before {
	transition-property: --kt-fill;
	transition-duration: var(--kt-fill-ms, 1400ms);
	transition-timing-function: var(--kt-ease-soft, cubic-bezier(0.4, 0, 0.2, 1));
}

/*
 * The stacked layout draws each gap as TWO half-rules owned by different
 * steps — the leaving step's ::after and the arriving step's ::before — and
 * paint() lights both in the same call. Run them together and each fills its
 * own 7.078px at the same time, so the gap fills as two stubs with a hole
 * between them. Handing the second half a delay equal to the first half's
 * duration makes the pair read as ONE sweep from pip to pip.
 *
 * The halves are exactly equal — both are 50% minus (--kt-pip-reach +
 * --kt-pip-gap) of their own step, measured at 7.078px each — so an even
 * split is exact, not an approximation.
 *
 * `linear`, deliberately. An eased half would accelerate and decelerate
 * within each 7px arm, putting a visible hitch at the join; constant velocity
 * across both arms is what makes them look like one line. It also stays
 * correct when a multi-stage jump lights several arms at once, which a curve
 * split into halves does not.
 */
@media (max-width: 600px) {
	.kt-track__step::after {
		transition-property: --kt-fill;
		transition-duration: calc(var(--kt-fill-ms, 900ms) / 2);
		transition-timing-function: linear;
	}

	.kt-track__step::before {
		transition-property: --kt-fill;
		transition-duration: calc(var(--kt-fill-ms, 900ms) / 2);
		transition-timing-function: linear;
		transition-delay: calc(var(--kt-fill-ms, 900ms) / 2);
	}
}

/*
 * Transform only. The pulse below owns box-shadow, so the two run together on
 * the same element without one resetting the other mid-cycle.
 */
@keyframes kt-pip-land {
	0%   { transform: rotate(45deg) scale(1); }
	38%  { transform: rotate(45deg) scale(1.55); }
	100% { transform: rotate(45deg) scale(1); }
}

/* --------------------------------------------------------------------------
   The stage the order is at, breathing
   --------------------------------------------------------------------------
   A slow halo on the current pip — the one signal on the page that says the
   order is still moving. Deliberately 2.8s and barely-there at its widest: a
   fast or high-contrast pulse reads as an alert, and nothing is wrong here.

   Only box-shadow is animated, so it composites on its own layer and never
   reflows the track. It stays on once the order is ready, where it now means
   "this is the one that matters" rather than "still waiting".
   -------------------------------------------------------------------------- */

/*
 * Amplitude raised, tempo left alone.
 *
 * Was 4px at 0.16 opening to 10px at 0.04 — a 6px travel that was easy to miss
 * on a phone in daylight. Now 3px at 0.38 opening to 16px at 0.07: a 13px
 * travel starting more than twice as opaque, so the halo actually reads as
 * breathing. The 2800ms period is deliberately unchanged — the note above is
 * still right that speed is what makes a pulse feel like an alert, and the ask
 * was for MORE VISIBLE, not faster.
 */
@keyframes kt-pip-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(215, 167, 92, 0.38); }
	50%      { box-shadow: 0 0 0 16px rgba(215, 167, 92, 0.07); }
}

.kt-track:not(.is-halted) .kt-track__step.is-current .kt-track__pip {
	animation: kt-pip-pulse 2800ms var(--kt-ease-soft, ease-in-out) infinite;
}

/*
 * When the order lands on "ready", the one-shot scale plays over the pulse —
 * but only once the fill has ARRIVED.
 *
 * theme.js calls redraw() and celebrate() in the same synchronous block, so
 * the pop used to fire on the frame the last connector STARTED filling: the
 * pip celebrated before the light reached it. The delay is --kt-fill-ms, the
 * same token that drives the fill, so the two cannot drift apart. burst()
 * carries the identical delay in theme.js.
 */
.kt-track.is-ready .kt-track__step.is-current .kt-track__pip {
	animation:
		kt-pip-land 1500ms var(--kt-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) var(--kt-fill-ms, 1400ms) 1,
		kt-pip-pulse 2800ms var(--kt-ease-soft, ease-in-out) infinite;
}

/* --------------------------------------------------------------------------
   The burst
   --------------------------------------------------------------------------
   Eighteen small gold marks thrown from the ready pip. Built in JS and removed
   after 2.8s, so nothing is left running on the page.

   `position: absolute` against the track, `pointer-events: none` — it must never
   sit over the order number or block a tap on the collection details underneath.
   -------------------------------------------------------------------------- */

.kt-track {
	position: relative;

	/*
	 * How long the light takes to travel one gap. Read by the connector
	 * transition, by the mobile stagger (half each), by kt-pip-land's delay
	 * and by burst() in theme.js — change it here and all four follow.
	 *
	 * Shorter on the stack because the distance is: a gap is 191.5px on the
	 * row but only 14.16px stacked, so the same duration that reads as a
	 * graceful sweep across a desktop connector is a 10px/s crawl on a phone.
	 */
	--kt-fill-ms: 1400ms;
}

@media (max-width: 600px) {
	.kt-track {
		--kt-fill-ms: 900ms;
	}
}

.kt-burst {
	position: absolute;
	width: 0;
	height: 0;
	pointer-events: none;
	z-index: 2;
}

.kt-burst span {
	position: absolute;
	inset: 0;
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	background: var(--kt-gold);
	border-radius: 1px;
	opacity: 0;
	/* 2200ms. The JS that removes the host must outlast this PLUS the stagger
	   it applies to each mark — see burst() in theme.js. */
	animation: kt-burst-fly 2200ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.kt-burst span:nth-child(even) {
	background: var(--kt-gold-bright, #ecbb6d);
	width: 4px;
	height: 4px;
}

@keyframes kt-burst-fly {
	0% {
		opacity: 0;
		transform: translate(0, 0) rotate(0deg) scale(0.4);
	}
	/* Fade in over a proportionally shorter share of a longer flight, so the
	   marks still appear promptly rather than drifting in. */
	10% {
		opacity: 1;
	}
	62% {
		opacity: 1;
	}
	100% {
		opacity: 0;
		transform: translate(var(--kt-bx, 0), var(--kt-by, 0)) rotate(220deg) scale(1);
	}
}

/* The status still changes, the page still says so — it simply stops moving. */
@media (prefers-reduced-motion: reduce) {
	/*
	 * `transition: none` and not `transition-duration: 0s`, because the delay
	 * is the part that bites here.
	 *
	 * theme.css:199-212 already forces `transition-duration: 0.01ms !important`
	 * on *, *::before and *::after, so duration is handled site-wide. It does
	 * NOT touch transition-delay — so the stacked ::before above, which carries
	 * a delay of half the fill, would still sit dark for 450ms and then snap.
	 * The shorthand resets delay to 0 along with everything else.
	 *
	 * ::after is in this list because the stacked layout gives it a transition
	 * too; it had none before the connector learned to fill.
	 */
	.kt-track__pip,
	.kt-track__name,
	.kt-track__step::before,
	.kt-track__step::after {
		transition: none;
	}

	/*
	 * These two selectors must MATCH the rules they cancel, character for
	 * character. A media query adds no specificity, so `@media` does not make
	 * an override win — only specificity and source order do. The shorter
	 * `.kt-track .kt-track__step.is-current .kt-track__pip` reads like it says
	 * the same thing, but it scores (0,4,0) against the pulse rule's (0,5,0)
	 * — `:not(.is-halted)` counts — so it silently lost, and the pip kept
	 * pulsing for exactly the people who asked it not to.
	 */
	.kt-track:not(.is-halted) .kt-track__step.is-current .kt-track__pip,
	.kt-track.is-ready .kt-track__step.is-current .kt-track__pip {
		animation: none;
	}

	.kt-burst {
		display: none;
	}
}


/* --- single-product.css ------------------------------------------------------- */
/* ==========================================================================
   Koh Tomyums — single product ("Dish")
   Scoped to .kt-product / .kt-crumbs / .kt-signature / .kt-xsell /
   .kt-sticky-buy. Tokens and shared components come from theme.css.
   Colours are authored in oklch with a hex fallback on the line above.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Breadcrumb trail
   -------------------------------------------------------------------------- */

.kt-crumbs {
	padding: clamp(24px, 3.4vw, 36px) 0 0;
	font-size: 11.5px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--kt-text-muted);
}

.kt-crumbs a:hover {
	color: var(--kt-gold-bright);
}

.kt-crumbs__sep {
	color: #6a5a3f;
	color: oklch(0.42 0.03 85);
	margin: 0 0.35em;
}

.kt-crumbs__current {
	color: var(--kt-gold);
}

/* --------------------------------------------------------------------------
   2. Product grid — typographic panel + detail column
   -------------------------------------------------------------------------- */

.kt-product__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
	padding-top: clamp(28px, 4vw, 44px);
}

/* ---------------------------------------------------------------------------
   Two columns, and the panel is the narrow one
   --------------------------------------------------------------------------
   The panel stands in for a product photograph, but it is a typographic card,
   not an image — it holds an icon, a category name and one sentence. Given half
   the page it read as the subject of the page, while the part a customer
   actually acts on (price, options, quantity, Add to cart) was squeezed beside
   it.

   Explicit tracks rather than `auto-fit`: with `minmax(340px, 1fr)` the two
   columns were always equal, and auto-fit additionally spawned a third,
   zero-width track at this width. 901px is the same breakpoint the sticky rule
   below already uses, so the panel becomes narrow and sticky together.
   -------------------------------------------------------------------------- */

@media (min-width: 901px) {
	.kt-product__grid {
		grid-template-columns: clamp(240px, 24vw, 340px) minmax(0, 1fr);
	}
}

/* ---------------------------------------------------------------------------
   The summary must fill its column
   --------------------------------------------------------------------------
   WooCommerce's legacy woocommerce-layout.css ships

       .woocommerce div.product div.summary { float: right; width: 48%; clear: none }

   at (0,3,2) — a float-era rule that predates this being a grid. The float is
   ignored on a grid item, but the width is not: the summary sat inside a 550px
   track rendering 264px wide and left 286px of the column empty. That, not the
   panel's size, was why the right-hand side felt cramped.

   The repeated class takes this to (0,4,0), which beats (0,3,2) on class count
   regardless of which stylesheet loads last.
   -------------------------------------------------------------------------- */

.kt-product .kt-product__grid .kt-product__summary.kt-product__summary {
	float: none;
	width: auto;
}

/* ---------------------------------------------------------------------------
   A column is not a measure
   --------------------------------------------------------------------------
   Letting the summary fill its track gave it 794px, and prose set to 794px runs
   at ~122 characters a line — roughly twice the 45–75 that stays readable. The
   column keeps its width, because the title, the price row and the options all
   use it; only the parts that are read as sentences are capped, and the buy row
   so the Add to cart button is not 618px of gold.
   -------------------------------------------------------------------------- */

.kt-product__facts,
.kt-product__summary .woocommerce-product-details__short-description {
	max-width: 62ch;
}

.kt-product__buy {
	max-width: 520px;
}

/* --------------------------------------------------------------------------
   3. Signature panel — stands in for the (forbidden) product photograph
   -------------------------------------------------------------------------- */

/*
 * The signature panel is shorter than the summary column beside it, which left
 * a tall empty band under it before the tabs began. Sticking it to the top of
 * the viewport puts that space to work: the dish's name-and-story card stays in
 * view while the options and facts scroll past it. Desktop only — on one column
 * there is nothing to stick to.
 */
@media (min-width: 901px) {
	.kt-signature {
		position: sticky;
		top: calc(var(--kt-header-h) + 16px);
	}
}

.kt-signature {
	border: 1px solid var(--kt-frame);
	border-radius: var(--kt-radius-lg);
	background: linear-gradient(to bottom, var(--kt-panel-top), var(--kt-panel-bottom));
	-webkit-backdrop-filter: var(--kt-panel-blur);
	backdrop-filter: var(--kt-panel-blur);
	/* Sized for a narrow column now — 46vw made a 560px-tall box out of what is
	   an icon, a name and one line of copy. */
	min-height: clamp(260px, 22vw, 380px);
	display: flex;
	flex-direction: column;
	padding: clamp(22px, 2vw, 30px);
}

.kt-signature__eyebrow {
	margin: 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-gold);
}

.kt-signature__eyebrow.is-quiet {
	font-weight: 600;
	color: var(--kt-text-faint);
}

/*
 * No border of its own — `.kt-signature` above is the frame.
 *
 * This drew a second rounded rule inside the panel's, giving a box inside a
 * box. It made sense when the panel held three things stacked — the badge, this
 * framed "plate", and a foot of prep-time chips — and the inner rule marked the
 * middle one off. The foot is gone and most dishes carry no badge, so the outer
 * panel was left containing nothing but this, and the two rules sat 30px apart
 * with nothing between them.
 *
 * Kept as the layout box: `flex: 1` is what makes it fill the panel's
 * min-height so the ornament and story centre vertically. The padding goes with
 * the border — the panel's own 30px already holds the content off the edge.
 */
.kt-signature__frame {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 24px;
	text-align: center;
}

/* Reuse the theme ornament at the panel's tighter measure. */
.kt-signature__ornament {
	padding: 0;
	gap: 16px;
}

.kt-signature__ornament .kt-ornament__rule {
	width: 40px;
	background: var(--kt-gold-line-mid);
}

.kt-signature__script {
	margin: 0;
	font-family: var(--kt-font-script);
	font-size: clamp(30px, 4vw, 42px);
	line-height: 1.1;
	color: var(--kt-gold);
}

.kt-signature__text {
	margin: 0;
	max-width: 300px;
	font-size: 12.5px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--kt-text-dim);
}

/* --------------------------------------------------------------------------
   4. Detail column
   -------------------------------------------------------------------------- */

.kt-product__title {
	font-family: var(--kt-font-display);
	font-size: clamp(30px, 4.4vw, 46px);
	letter-spacing: 0.08em;
	line-height: 1.1;
	color: var(--kt-text-hero);
	text-transform: uppercase;
}

.kt-product__script {
	margin: 10px 0 0;
	font-family: var(--kt-font-script);
	font-size: clamp(24px, 2.8vw, 30px);
	line-height: 1.2;
	color: var(--kt-gold-soft);
}

/* Price + heat share one row (opened at priority 9, closed at 11). */
.kt-product__pricerow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 22px;
}

.kt-product__pricerow .price,
.kt-product__summary p.price {
	margin: 0;
	font-family: var(--kt-font-display);
	font-size: clamp(26px, 3.2vw, 34px);
	line-height: 1.15;
	color: var(--kt-gold);
}

.kt-product__pricerow .price del {
	margin-right: 10px;
	font-size: 0.68em;
	color: var(--kt-text-faint);
}

.kt-product__pricerow .price ins {
	text-decoration: none;
}

.kt-product__pricerow .price .woocommerce-price-suffix {
	font-family: var(--kt-font-body);
	font-size: 12px;
	color: var(--kt-text-faint);
}

/* Reviews are switched off on this site, but keep the row honest if they return. */
.kt-product__pricerow .woocommerce-product-rating {
	flex: 1 1 100%;
	margin: 0;
	font-size: 12px;
	color: var(--kt-text-muted);
}

.kt-product__heat {
	display: flex;
	align-items: center;
	gap: 10px;
}

.kt-product__heat-label {
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-text-muted);
}

/* Short description */
.kt-product__summary .woocommerce-product-details__short-description {
	margin-top: 22px;
	max-width: 520px;
	font-size: clamp(14px, 1.5vw, 15.5px);
	font-weight: 300;
	line-height: 1.8;
	color: var(--kt-text-body);
	text-wrap: pretty;
}

.kt-product__lede {
	margin: 0;
}

.kt-product__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.kt-product__tags li {
	border: 1px solid var(--kt-gold-line-faint);
	border-radius: var(--kt-radius-pill);
	padding: 5px 12px;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kt-text-meta);
}

/* Stock notices */
.kt-product__summary .stock {
	margin: 18px 0 0;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--kt-ok);
}

.kt-product__summary .stock.out-of-stock,
.kt-product__oos {
	color: var(--kt-err);
}

/* --------------------------------------------------------------------------
   5. Add-to-cart form
   -------------------------------------------------------------------------- */

.kt-product__form {
	margin-top: 30px;
	padding-top: 30px;
	border-top: 1px solid var(--kt-hairline);
}

.kt-variation {
	margin: 0 0 28px;
	padding: 0;
	border: 0;
}

.kt-variation:last-child {
	margin-bottom: 0;
}

.kt-variation__label {
	display: block;
	padding: 0;
	margin-bottom: 14px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--kt-gold-dim);
}

.kt-variation--static {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.kt-variation--static .kt-variation__label {
	margin-bottom: 0;
}

.kt-variation__note {
	flex: 1 1 220px;
	margin: 0;
	font-size: 12.5px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--kt-text-faint);
}

/* Square gold option chips */
.kt-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* `.kt-opt` is a <label> and `.kt-opt__input` a radio, so both need to
   out-rank the theme's global `label` / `input[type="radio"]` rules. */
.kt-opts .kt-opt {
	position: relative;
	display: inline-flex;
	margin: 0;
	cursor: pointer;
}

/* Three classes deep: theme.css's drawn checkbox/radio recipe is
   `input[type="radio"]:not([class*="wc-block"])` — (0,2,1) — and a two-class
   selector would lose the width/height to it. */
.kt-opts .kt-opt .kt-opt__input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	opacity: 0;
	pointer-events: none;
	vertical-align: baseline;
}

.kt-opt__face {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--kt-border-control);
	border-radius: var(--kt-radius-sm);
	padding: 11px 22px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--kt-text-body);
	transition: border-color var(--kt-ease), color var(--kt-ease), background var(--kt-ease);
}

.kt-opt:hover .kt-opt__face {
	border-color: var(--kt-gold-line);
	color: var(--kt-gold-hi);
}

.kt-opt__input:checked + .kt-opt__face {
	background: var(--kt-gold);
	border-color: var(--kt-gold);
	color: var(--kt-on-gold);
	font-weight: 700;
}

.kt-opt__input:focus-visible + .kt-opt__face {
	outline: 2px solid var(--kt-gold-soft);
	outline-offset: 3px;
}

.kt-opt__delta {
	white-space: nowrap;
}

/*
 * The surcharge is WooCommerce's own price markup, and 00-base.css paints every
 * `.woocommerce span.amount` (and `bdi`) in --kt-gold with the display face:
 *
 *     .woocommerce .price, .woocommerce span.amount, .woocommerce bdi {
 *         font-family: var(--kt-font-display);
 *         color: var(--kt-gold);
 *     }                                                          -- (0,2,1)
 *
 * On a chip whose FILL is --kt-gold that paints the price in its own background.
 * The selected option read "BEEF · +" followed by a blank gap exactly wide
 * enough to hold a price that had been there all along — measured at contrast
 * 1.00 against the chip.
 *
 * Inherit rather than restate a colour: the chip already knows what it is in
 * both states (--kt-text-body unselected, --kt-on-gold selected), so `inherit`
 * is right in both without naming either, and it cannot drift if those change.
 * The family has to come too, or one small chip mixes Cinzel digits into a
 * Manrope label.
 *
 * (0,3,0) against that rule's (0,2,1) — decided on class count rather than on
 * which sheet happens to load last.
 */
.kt-opts .kt-opt__face .woocommerce-Price-amount,
.kt-opts .kt-opt__face bdi {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
}

/* "Any" attributes keep WooCommerce's own select. */
.kt-variation .kt-opts + select,
.kt-variation > select {
	max-width: 320px;
}

/* Collection reassurance */
.kt-product__reassure {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 26px 0 0;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kt-text-muted);
}

.kt-product__reassure svg {
	flex: none;
}

/* Quantity stepper + CTA */
.kt-product__buy {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 14px;
	margin-top: 18px;
}

/* ---------------------------------------------------------------------------
   The stepper is a control, and there is one control height
   --------------------------------------------------------------------------
   `.kt-btn` sets `min-height: 44px` and calls it "the minimum comfortable touch
   target". This stepper sits directly above the Add to cart button, so any
   disagreement is visible in a single glance — and it was 56px against the
   button's 44px, because 15px of vertical padding on both the steppers and the
   number input stacked inside a frame that then had to contain the taller of
   them.

   Height now comes from the frame, once, and the children stretch to fill it:
   the padding is horizontal only. That keeps the whole 44px tappable rather
   than shrinking the hit area to the size of a "−" glyph, which is what
   removing the padding alone would have done.
   -------------------------------------------------------------------------- */
.kt-product .kt-qty {
	align-items: stretch;
	flex: none;
	min-height: 44px;
}

.kt-product .kt-qty__btn {
	/* The hover/active gold wash snapped at 0ms while everything around it
	   eased at 180ms — the primary ordering control, the only silent one. */
	transition: background-color var(--kt-ease), color var(--kt-ease);
	width: auto;
	/* Horizontal only — the frame owns the height.
	   12px. This began at 20 (control 162px), went to 16 to match the cart
	   (136px), and is now 12 in both places (~106px). The floor here is the tap
	   target: at 12px of padding the button is ~33x44, which clears WCAG 2.5.8's
	   24x24 with room to spare, but much below this trades a real miss-tap risk
	   for a handful of pixels. */
	padding: 0 12px;
	font-size: 16px;
	line-height: 1;
	color: var(--kt-gold);
}

/* Matches the base stepper hover in 00-base.css — a soft wash, not a solid
   fill. This scoped rule out-specifies the base one, so if it keeps the old
   flood the product page disagrees with the cart. Keep the two in step. */
.kt-product .kt-qty__btn:hover,
.kt-product .kt-qty__btn:focus-visible {
	background: color-mix(in oklab, var(--kt-gold) 14%, transparent);
	color: var(--kt-gold-hi);
}

.kt-product .kt-qty__btn:active {
	background: color-mix(in oklab, var(--kt-gold) 22%, transparent);
}

/*
 * Touch floor, copied from the cart's own rule in cart.css.
 *
 * Narrowing the buttons to 12px of padding takes them to ~33x44, which is fine
 * under a mouse and clears WCAG 2.5.8 (24x24) everywhere. But this is the
 * primary ordering control on the site, and on a phone it had been ~49px wide
 * before today. The cart already floors its own stepper at 44x44 below 900px;
 * the same reasoning applies here, and more so.
 *
 * Desktop — where the bar was too wide — keeps the narrow size.
 */
@media (max-width: 900px) {
	.kt-product .kt-qty__btn {
		min-width: 44px;
	}
}

@supports not (background: color-mix(in oklab, red 50%, transparent)) {
	.kt-product .kt-qty__btn:hover,
	.kt-product .kt-qty__btn:focus-visible {
		background: rgba(215, 167, 92, 0.14);
	}
}

/* WooCommerce's own `div.quantity` sits inside our stepper frame — it must not
   draw a second frame of its own. It stretches too, so the input it wraps can
   fill the frame's height and stay tappable end to end. */
.kt-product .kt-qty .quantity {
	display: flex;
	align-items: stretch;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: none;
}

.kt-product .kt-qty input[type="number"],
.kt-product .kt-qty input.qty {
	/* 40px, with the side padding cut to 4 so the digits keep their room: that
	   leaves 32px of text width against a measured 29.1px for "999" at this face
	   and size, so three digits still fit. The 16px font below is what stops
	   this going narrower — it cannot shrink, so neither can the field.
	   NOTE: this block is (0,3,1) and does NOT win the width. The value that
	   lands is in `.woocommerce div.kt-product form.cart .kt-qty input.qty`
	   (0,5,3) near the foot of this file — change both. */
	width: 40px;
	min-width: 40px;
	/* Horizontal only, as above. The 16px font stays: anything smaller makes
	   iOS Safari zoom the page when the field takes focus, and that is what
	   stops this control shrinking further. */
	padding: 0 4px;
	border: 0;
	border-radius: 0;
	background: transparent;
	font-family: var(--kt-font-display);
	font-size: 16px;
	color: var(--kt-text-bright);
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
}

.kt-product .kt-qty input[type="number"]::-webkit-outer-spin-button,
.kt-product .kt-qty input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* Keep the borderless look, but never suppress the focus ring. */
.kt-product .kt-qty input[type="number"]:focus {
	border: 0;
}

.kt-product__submit {
	flex: 1 1 240px;
	padding: 15px 34px;
	font-size: 12.5px;
	letter-spacing: 0.24em;
}


.kt-product .single_variation_wrap .woocommerce-variation:empty {
	display: none;
}

.kt-product .woocommerce-variation-price .price {
	font-family: var(--kt-font-display);
	font-size: 22px;
	color: var(--kt-gold);
}

/* WooCommerce's own product meta (categories) */
.kt-product .product_meta {
	margin-top: 26px;
	font-size: 11.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kt-text-faint);
}

.kt-product .product_meta > span {
	display: block;
	margin-bottom: 6px;
}

.kt-product .product_meta a {
	color: var(--kt-text-meta);
}

.kt-product .product_meta a:hover {
	color: var(--kt-gold-bright);
}

/* --------------------------------------------------------------------------
   6. Fact grid — allergens / good to know / collection
   -------------------------------------------------------------------------- */

.kt-product__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
	gap: 20px;
	margin-top: 36px;
	padding-top: 28px;
	border-top: 1px solid var(--kt-hairline);
	font-size: 13px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--kt-text-dim);
}

.kt-product__fact-label {
	display: block;
	margin-bottom: 8px;
	font-size: 10.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-gold-dim);
}

/* --------------------------------------------------------------------------
   7. "Goes well with"
   -------------------------------------------------------------------------- */

.kt-xsell {
	margin-top: clamp(48px, 6vw, 76px);
}

.kt-xsell__head {
	display: flex;
	align-items: baseline;
	gap: 20px;
	margin-bottom: clamp(22px, 3vw, 32px);
}

.kt-xsell__title {
	font-family: var(--kt-font-display);
	font-size: clamp(19px, 2.4vw, 25px);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--kt-gold-soft);
}

.kt-xsell__rule {
	flex: 1;
	height: 1px;
	background: var(--kt-hairline);
}

/* --------------------------------------------------------------------------
   8. Sticky purchase bar
   Sticky in flow, exactly as the design specifies — it releases above the
   footer rather than floating over it. The negative inline margins break it
   out of the centred .kt-shop container to full-bleed.
   -------------------------------------------------------------------------- */

.kt-sticky-buy {
	position: sticky;
	bottom: 0;
	z-index: 60;
	width: 100vw;
	margin-top: clamp(48px, 6vw, 70px);
	margin-inline: calc(50% - 50vw);
	background: rgba(11, 10, 9, 0.86);
	background: oklch(0.08 0.004 60 / 0.86);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-top: 1px solid var(--kt-gold-rule);
}

.kt-sticky-buy__inner {
	max-width: var(--kt-max);
	margin: 0 auto;
	padding: 14px var(--kt-gutter);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.kt-sticky-buy__id {
	display: flex;
	align-items: baseline;
	gap: 14px;
	min-width: 0;
}

.kt-sticky-buy__title {
	font-family: var(--kt-font-display);
	font-size: 15px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kt-text-bright);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.kt-sticky-buy__price {
	font-family: var(--kt-font-display);
	font-size: 17px;
	color: var(--kt-gold);
	white-space: nowrap;
}

.kt-sticky-buy__price del {
	margin-right: 8px;
	font-size: 0.7em;
	color: var(--kt-text-faint);
}

.kt-sticky-buy__price ins {
	text-decoration: none;
}

.kt-sticky-buy__actions {
	display: flex;
	align-items: stretch;
	justify-content: flex-end;
	flex: 1 1 200px;
	gap: 12px;
}

.kt-sticky-buy__cta {
	flex: 1 1 auto;
	max-width: 320px;
	min-height: 48px;
	padding: 12px 26px;
	font-size: 12px;
	letter-spacing: 0.22em;
}

/* --------------------------------------------------------------------------
   9. Out-ranking WooCommerce's own stylesheet
   woocommerce.css is still enqueued, and several of its single-product rules
   carry higher specificity than a single class. These repeat the declarations
   above at a weight that wins, and stay scoped to .kt-product.
   -------------------------------------------------------------------------- */

.woocommerce div.kt-product .kt-product__pricerow p.price,
.woocommerce div.kt-product .kt-product__pricerow span.price {
	margin: 0;
	font-family: var(--kt-font-display);
	font-size: clamp(26px, 3.2vw, 34px);
	line-height: 1.15;
	color: var(--kt-gold);
}

.woocommerce div.kt-product .kt-product__summary .stock {
	color: var(--kt-ok);
	font-size: 12px;
}

.woocommerce div.kt-product .kt-product__summary .stock.out-of-stock {
	color: var(--kt-err);
}

.woocommerce div.kt-product form.cart {
	margin-bottom: 0;
}

.woocommerce div.kt-product form.cart .kt-qty div.quantity {
	float: none;
	margin: 0;
}

/*
 * This is the rule that actually decides the field's width — (0,5,3), written
 * that heavy to beat WooCommerce's own `.woocommerce div.product form.cart .qty`.
 * The plainer `.kt-product .kt-qty input.qty` block further up is (0,3,1) and
 * loses to it, so the two must be changed together or the narrower value is
 * silently ignored.
 */
.woocommerce div.kt-product form.cart .kt-qty input.qty {
	width: 40px;
	text-align: center;
}

.woocommerce div.kt-product form.cart button.kt-product__submit,
.woocommerce div.kt-product form.cart .button.kt-product__submit {
	float: none;
	border-radius: var(--kt-radius-sm);
	background: var(--kt-gold);
	color: var(--kt-on-gold);
	font-family: var(--kt-font-body);
	font-weight: 800;
}

.woocommerce div.kt-product form.cart button.kt-product__submit:hover,
.woocommerce div.kt-product form.cart button.kt-product__submit:focus-visible,
.woocommerce div.kt-product form.cart .button.kt-product__submit:hover {
	background: var(--kt-gold-hi);
	color: var(--kt-on-gold);
}

.woocommerce div.kt-product .woocommerce-variation-add-to-cart {
	margin: 0;
}

/* --------------------------------------------------------------------------
   10. Print
   -------------------------------------------------------------------------- */

@media print {
	.kt-sticky-buy,
	.kt-product__form,
	.kt-xsell {
		display: none !important;
	}

	.kt-signature {
		background: none;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}

/* --------------------------------------------------------------------------
   "Goes well with" — a compact cross-sell row, not the front page's tall
   centred cards. Same `.kt-dish` component, tightened for a secondary role.
   -------------------------------------------------------------------------- */

.kt-xsell__grid {
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: clamp(12px, 1.6vw, 18px);
}

.kt-xsell__grid .kt-dish__body {
	padding: 22px 18px 20px;
}

.kt-xsell__grid .kt-dish__badge {
	margin-bottom: 10px;
	font-size: 9px;
}

.kt-xsell__grid .kt-dish__title {
	font-size: 15px;
	letter-spacing: 0.1em;
}

.kt-xsell__grid .kt-dish__rule {
	margin: 11px 0;
}

.kt-xsell__grid .kt-dish__price {
	font-size: 17px;
}

.kt-xsell__grid .kt-dish__heat {
	margin-top: 11px;
}

/* The description is what makes the front-page card tall; a cross-sell only
   needs to identify the dish. */
.kt-xsell__grid .kt-dish__text {
	display: none;
}

.kt-xsell__grid .kt-dish__cta {
	margin-top: 16px;
	padding: 8px 18px;
	font-size: 10px;
}