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

/* --- 00-base.css ------------------------------------------------------- */
/* ==========================================================================
   Koh Tomyums — WooCommerce shared layer
   Loaded first. Everything WooCommerce prints that the theme does not fully
   replace gets the Gilt treatment here: notices, messages, form rows,
   quantity steppers, price markup and the kitchen status pills.
   ========================================================================== */

.kt-shop {
	padding-block: clamp(28px, 4vw, 48px);
}

/* --------------------------------------------------------------------------
   WooCommerce notices
   -------------------------------------------------------------------------- */

.woocommerce-notices-wrapper:empty {
	display: none;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
	list-style: none;
	margin: 0 0 22px;
	padding: 16px 22px;
	border: 1px solid var(--kt-gold-rule);
	border-left-width: 3px;
	border-radius: var(--kt-radius-sm);
	background: var(--kt-panel);
	-webkit-backdrop-filter: var(--kt-panel-blur);
	backdrop-filter: var(--kt-panel-blur);
	font-size: 14px;
	line-height: 1.65;
	color: var(--kt-text-body);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
}

.woocommerce-message { border-left-color: var(--kt-ok); }
.woocommerce-info { border-left-color: var(--kt-gold); }
.woocommerce-error { border-left-color: var(--kt-err); }

.woocommerce-error li {
	list-style: none;
	width: 100%;
}

.woocommerce-message .button,
.woocommerce-info .button,
.woocommerce-error .button {
	margin-left: auto;
}

/* WooCommerce prints a ::before glyph on notices; the design has no glyphs. */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	content: none;
}

/* --------------------------------------------------------------------------
   Generic WooCommerce buttons that the theme has not replaced outright
   -------------------------------------------------------------------------- */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
a.button,
button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 28px;
	border: 1px solid var(--kt-gold-line);
	border-radius: var(--kt-radius-sm);
	background: transparent;
	/* Rest at --kt-gold: brightness is the hover signal. This rule outranks
	   .kt-btn--sm on the menu's add buttons, so the role split has to hold
	   here too or the 123 most-pressed buttons on the site rest at their own
	   hover colour with nowhere to go. */
	color: var(--kt-gold);
	font-family: var(--kt-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1;
	cursor: pointer;
	transition: background var(--kt-ease), color var(--kt-ease), border-color var(--kt-ease);
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
a.button:hover,
button.button:hover {
	background: var(--kt-gold);
	color: var(--kt-on-gold);
	border-color: var(--kt-gold);
}

.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
	background: var(--kt-gold);
	border-color: var(--kt-gold);
	color: var(--kt-on-gold);
	font-weight: 800;
}

.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: var(--kt-gold-hi);
	border-color: var(--kt-gold-hi);
	color: var(--kt-on-gold);
}

.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled],
.woocommerce a.button.disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   AJAX add-to-cart, in the house language
   --------------------------------------------------------------------------
   WooCommerce's own states leaked through here: .loading added
   `padding-right: 2.618em` plus an icon-font spinner — every gold button
   JUMPED ~30px wider mid-request — and .added appended a foreign glyph
   checkmark that then hijacked the sheen's ::after slot, so hovering a bought
   button flew a checkmark across it. The moment money changes hands now
   speaks the same motion language as the rest of the theme.
   -------------------------------------------------------------------------- */

/* 1 — silence the vendor chrome. Same specificity as core's rules, decided by
   source order; the width must not change between rest, loading and added. */
.woocommerce a.button.loading,
.woocommerce button.button.loading,
.woocommerce a.button.added,
.woocommerce button.button.added {
	padding-left: 24px;
	padding-right: 24px;
}

.woocommerce a.button.loading::after,
.woocommerce button.button.loading::after,
.woocommerce a.button.added::after,
.woocommerce button.button.added::after {
	content: none;
}

/* 2 — busy: label dims, a currentColor ring turns where the eye already is. */
.woocommerce a.button.loading,
.woocommerce button.button.loading {
	opacity: 0.75;
	pointer-events: none;
	position: relative;
}

.woocommerce a.button.loading::before {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 8px;
	vertical-align: -2px;
	border: 1.5px solid currentColor;
	border-top-color: transparent;
	border-radius: var(--kt-radius-pill);
	animation: kt-spin 700ms linear infinite;
}

/* 3 — confirmation: one pass of the sheen, the theme's own "yes". The doubled
   modifier out-scores WooCommerce's overflow:visible so the highlight stays
   clipped to the button (same trick as the hover sheen). */
.kt-btn.kt-btn--sm.kt-btn--sm.added {
	position: relative;
	overflow: hidden;
}

.kt-btn.kt-btn--sm.kt-btn--sm.added::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 40%;
	background: linear-gradient(
		100deg,
		transparent,
		rgba(255, 255, 255, 0.28),
		transparent
	);
	transform: skewX(-18deg);
	pointer-events: none;
	animation: kt-sheen 900ms var(--kt-ease-soft) 1;
}

/* 4 — the View-cart link arrives instead of popping the grid. */
.woocommerce a.added_to_cart {
	display: inline-block;
	margin-top: 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-gold-bright);
	animation: kt-fade-up 320ms var(--kt-ease-out, cubic-bezier(0.22, 1, 0.36, 1)) both;
}

/* --------------------------------------------------------------------------
   Form rows
   -------------------------------------------------------------------------- */

.woocommerce form .form-row,
.kt-field {
	display: flex;
	flex-direction: column;
	margin: 0 0 18px;
	padding: 0;
}

.woocommerce form .form-row label,
.kt-field > label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-text-dim);
	margin-bottom: 8px;
}

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

.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);
}

.woocommerce form .form-row-first,
.woocommerce form .form-row-last {
	width: 100%;
}

@media (min-width: 640px) {
	.kt-form-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 20px;
	}

	.kt-form-grid .form-row-wide,
	.kt-form-grid .kt-field--wide {
		grid-column: 1 / -1;
	}
}

.woocommerce form .form-row .description,
.kt-field__hint {
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--kt-text-faint);
	font-weight: 300;
	margin-top: 8px;
	text-transform: none;
	letter-spacing: 0;
}

/* Checkbox / radio rows read as a single line, not a stacked label */
.woocommerce form .form-row.kt-row-inline,
.kt-check {
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
}

.kt-check label,
.woocommerce form .form-row.kt-row-inline label {
	margin: 0;
	font-size: 13.5px;
	font-weight: 300;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kt-text-body);
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   Quantity stepper
   -------------------------------------------------------------------------- */

.kt-qty,
.woocommerce .quantity {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--kt-gold-line-faint);
	border-radius: var(--kt-radius-sm);
	overflow: hidden;
	background: var(--kt-field);
}

.kt-qty button,
.kt-qty__btn {
	width: 40px;
	border: 0;
	background: transparent;
	color: var(--kt-gold-bright);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: background var(--kt-ease), color var(--kt-ease);
}

/*
 * Hover: a restrained tint, not a solid fill.
 *
 * The stepper is a small hairline control inside a rounded pill. Flooding a
 * button with --kt-gold made it the loudest thing on the cart line and, being a
 * square block, its outer corner cut across the pill's radius. A soft gold wash
 * plus a brighter glyph reads as interactive without shouting, and the end
 * buttons inherit the pill's corner so any fill follows the shape.
 */
.kt-qty button:hover,
.kt-qty__btn:hover {
	background: color-mix(in oklab, var(--kt-gold) 14%, transparent);
	color: var(--kt-gold-hi);
}

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

/* Browsers without color-mix keep the old behaviour rather than no feedback. */
@supports not (background: color-mix(in oklab, red 50%, transparent)) {
	.kt-qty button:hover,
	.kt-qty__btn:hover {
		background: rgba(215, 167, 92, 0.14);
	}
}

/* Match the wrapper's radius so a fill never squares off against the pill. */
.kt-qty > button:first-child,
.kt-qty > .kt-qty__btn:first-child {
	border-start-start-radius: calc(var(--kt-radius-sm, 4px) - 1px);
	border-end-start-radius: calc(var(--kt-radius-sm, 4px) - 1px);
}

.kt-qty > button:last-child,
.kt-qty > .kt-qty__btn:last-child {
	border-start-end-radius: calc(var(--kt-radius-sm, 4px) - 1px);
	border-end-end-radius: calc(var(--kt-radius-sm, 4px) - 1px);
}

.kt-qty input[type="number"],
.woocommerce .quantity input.qty {
	width: 62px;
	border: 0;
	border-radius: 0;
	background: transparent;
	text-align: center;
	font-family: var(--kt-font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--kt-text-bright);
	padding: 12px 4px;
	-moz-appearance: textfield;
	appearance: textfield;
}

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

/* --------------------------------------------------------------------------
   Prices
   -------------------------------------------------------------------------- */

.woocommerce .price,
.woocommerce span.amount,
.woocommerce bdi {
	font-family: var(--kt-font-display);
	color: var(--kt-gold);
	white-space: nowrap;
}

.woocommerce del,
.woocommerce del bdi,
.woocommerce del span.amount {
	color: var(--kt-text-faint);
	font-size: 0.82em;
	margin-right: 8px;
}

.woocommerce ins {
	text-decoration: none;
	background: transparent;
}

/* Status pills (`.kt-pill`) are owned by parts/account.css, which is the only
   place they are rendered. A duplicate definition lived here; because this file
   is concatenated first, its `::before` dot survived account.css's redefinition
   and painted a stray dot inside every pill. Removed — do not re-add it here. */

/* --------------------------------------------------------------------------
   Chips — dietary badges, category filters, meta labels
   -------------------------------------------------------------------------- */

.kt-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

.kt-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border: 1px solid var(--kt-frame-soft);
	border-radius: var(--kt-radius-pill);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kt-text-dim);
	white-space: nowrap;
	transition: border-color var(--kt-ease), color var(--kt-ease), background var(--kt-ease);
}

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

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

.kt-chip--quiet {
	padding: 5px 12px;
	font-size: 10px;
	letter-spacing: 0.14em;
	color: var(--kt-text-faint);
}

/* --------------------------------------------------------------------------
   Search-term highlight
   -------------------------------------------------------------------------- */

/* Search-term highlight. No underline — search.php's own styling assumed none,
   and the two rules were fighting. Weight and colour carry the emphasis. */
.kt-mark {
	background: transparent;
	color: var(--kt-gold);
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   Bits of WooCommerce chrome the theme keeps but restyles
   -------------------------------------------------------------------------- */

.woocommerce .woocommerce-result-count,
.woocommerce .woocommerce-ordering {
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--kt-text-faint);
}

.woocommerce nav.woocommerce-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	border: 0;
	margin: clamp(34px, 4vw, 48px) 0 0;
	padding: 0;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
	overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--kt-frame-soft);
	border-radius: var(--kt-radius-sm);
	background: transparent;
	font-size: 12px;
	letter-spacing: 0.14em;
	color: var(--kt-text-dim);
	transition: border-color var(--kt-ease), color var(--kt-ease);
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
	border-color: var(--kt-gold-line);
	color: var(--kt-gold-bright);
	background: transparent;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--kt-gold);
	border-color: var(--kt-gold);
	color: var(--kt-on-gold);
	font-weight: 700;
}

/* Star ratings are not part of the design, but if reviews are switched on
   they should at least be gold rather than WooCommerce blue. */
.woocommerce .star-rating span::before,
.woocommerce .star-rating::before {
	color: var(--kt-gold);
}

/* Screen-reader-only helper, matching core's class name */
.woocommerce .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Quantity stepper — kill the nested wrapper's chrome
   --------------------------------------------------------------------------
   WooCommerce's cart template wraps the number input in its own `.quantity`
   div, and the theme places that INSIDE `.kt-qty`:

       div.kt-qty > button(−) · div.quantity > input · button(+)

   The rule above styles `.kt-qty` AND `.woocommerce .quantity` alike, so both
   drew a border — a box inside a box around the number. The inner one is a
   passthrough here and must carry no chrome of its own.
   -------------------------------------------------------------------------- */

.kt-qty .quantity,
.kt-qty .quantity.quantity {
	display: flex;
	align-items: stretch;
	border: 0;
	border-radius: 0;
	background: transparent;
	margin: 0;
	padding: 0;
	min-width: 0;
}


/* --- editorial.css ------------------------------------------------------- */
/* ==========================================================================
   Koh Tomyums — editorial base (page.php, single.php, archive.php, comments)

   theme.css already carries .kt-page-head, .kt-prose, .kt-post-list,
   .kt-post-card, .kt-pagination and the .kt-comments shell. This part only
   adds the pieces those templates need on top: entry media, tag chips, post
   navigation and the comment-form chrome. Every selector is kt- scoped or
   nested inside one, so nothing leaks into WooCommerce output.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Archive head
   -------------------------------------------------------------------------- */

.kt-page-head__eyebrow {
	margin: 0 0 12px;
}

.kt-archive-intro {
	text-align: center;
	font-size: 14.5px;
	color: var(--kt-text-muted);
	margin-bottom: clamp(24px, 3vw, 34px);
}

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

/* --------------------------------------------------------------------------
   Entry media
   -------------------------------------------------------------------------- */

.kt-entry__media {
	max-width: 1080px;
	margin: 0 auto clamp(28px, 4vw, 44px);
	padding: 0;
	border: 1px solid var(--kt-frame-soft);
	border-radius: var(--kt-radius-lg);
	overflow: hidden;
}

.kt-entry__media img {
	display: block;
	width: 100%;
	height: auto;
}

.kt-entry__caption {
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--kt-text-faint);
	text-align: center;
	padding: 12px 18px 14px;
	border-top: 1px solid var(--kt-hairline-faint);
}

/* --------------------------------------------------------------------------
   Entry footer — tag chips and the edit link
   -------------------------------------------------------------------------- */

.kt-entry__foot {
	max-width: 760px;
	margin: clamp(30px, 4vw, 44px) auto 0;
	padding-top: clamp(20px, 2.6vw, 26px);
	border-top: 1px solid var(--kt-hairline);
}

.kt-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kt-tag {
	display: inline-block;
	padding: 7px 14px;
	border: 1px solid var(--kt-frame-soft);
	border-radius: var(--kt-radius-pill);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-text-dim);
	transition: border-color var(--kt-ease), color var(--kt-ease);
}

.kt-tag:hover {
	border-color: var(--kt-gold-line);
	color: var(--kt-gold-bright);
}

.kt-entry__edit {
	margin: 18px 0 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--kt-text-faint);
}

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

/* --------------------------------------------------------------------------
   Previous / next post
   -------------------------------------------------------------------------- */

.kt-post-nav {
	max-width: 760px;
	margin: clamp(34px, 4.5vw, 52px) auto 0;
	padding-top: clamp(22px, 3vw, 30px);
	border-top: 1px solid var(--kt-hairline);
}

.kt-post-nav .nav-links {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
}

@media (min-width: 700px) {
	.kt-post-nav .nav-links {
		grid-template-columns: 1fr 1fr;
	}

	.kt-post-nav .nav-next {
		text-align: right;
	}
}

.kt-post-nav a {
	display: block;
	padding: 18px 20px;
	border: 1px solid var(--kt-frame-soft);
	border-radius: var(--kt-radius);
	transition: border-color var(--kt-ease);
}

.kt-post-nav a:hover {
	border-color: var(--kt-gold-line);
}

.kt-post-nav__label {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--kt-text-faint);
	margin-bottom: 8px;
}

.kt-post-nav__title {
	display: block;
	font-family: var(--kt-font-display);
	font-size: 15px;
	letter-spacing: 0.08em;
	line-height: 1.35;
	color: var(--kt-text-bright);
}

/* --------------------------------------------------------------------------
   Post card extras
   -------------------------------------------------------------------------- */

.kt-post-card__flag {
	color: var(--kt-gold-dim);
	font-weight: 700;
}

.kt-post-card__title a {
	color: inherit;
}

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

.kt-post-card__more:hover {
	color: var(--kt-gold-hi);
}

/* Paged posts (<!--nextpage-->) reuse the pagination row, tucked under prose. */
.kt-pagination--split {
	margin-top: clamp(28px, 3.4vw, 38px);
}

.kt-pagination--split .page-numbers {
	color: var(--kt-gold-bright);
}

/* --------------------------------------------------------------------------
   Comments — the shell lives in theme.css; this is the thread + form chrome
   -------------------------------------------------------------------------- */

.kt-comments__note {
	font-size: 12.5px;
	color: var(--kt-text-faint);
	margin-bottom: 20px;
}

.kt-comments__closed {
	font-size: 13px;
	color: var(--kt-text-faint);
	border-top: 1px solid var(--kt-hairline);
	padding-top: 18px;
}

.kt-comments .comment-content {
	font-size: 14.5px;
	line-height: 1.8;
	color: var(--kt-text-body);
}

.kt-comments .comment-content a {
	color: var(--kt-gold-bright);
	border-bottom: 1px solid var(--kt-gold-line-faint);
}

.kt-comments .comment-author a,
.kt-comments .comment-metadata a {
	color: inherit;
}

.kt-comments .comment-author a:hover,
.kt-comments .comment-metadata a:hover {
	color: var(--kt-gold-bright);
}

.kt-comments .says {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.kt-comments .comment-awaiting-moderation {
	display: block;
	margin-top: 10px;
	font-size: 11.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kt-warn);
}

.kt-comments .reply {
	margin-top: 12px;
}

.kt-comments .reply a,
.kt-comments .comment-edit-link {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--kt-gold-dim);
}

.kt-comments .reply a:hover,
.kt-comments .comment-edit-link:hover {
	color: var(--kt-gold-bright);
}

.kt-comments .comment-navigation {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 14px;
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--kt-hairline);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-text-faint);
}

.kt-comments .comment-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 14px;
	width: 100%;
}

.kt-comments__respond {
	margin-top: clamp(34px, 4vw, 48px);
	padding-top: clamp(24px, 3vw, 32px);
	border-top: 1px solid var(--kt-hairline);
}

.kt-comments__respond .kt-comments__title {
	margin-bottom: 18px;
}

.kt-comments__respond #cancel-comment-reply-link {
	margin-left: 14px;
	font-family: var(--kt-font-body);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-text-faint);
}

.kt-comment-form .form-submit {
	margin: 6px 0 0;
}

.kt-comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 4px;
	margin-bottom: 20px;
}

.kt-comment-form .comment-form-cookies-consent label {
	display: inline;
	margin: 0;
	font-size: 12.5px;
	font-weight: 300;
	letter-spacing: 0;
	text-transform: none;
	color: var(--kt-text-faint);
	line-height: 1.6;
}

.kt-comment-form .logged-in-as {
	font-size: 12.5px;
	color: var(--kt-text-faint);
	margin-bottom: 18px;
}

.kt-comment-form .logged-in-as a {
	color: var(--kt-gold-dim);
}

@media (min-width: 760px) {
	.kt-comment-form .comment-form-author,
	.kt-comment-form .comment-form-email {
		display: inline-block;
		width: calc(50% - 9px);
		vertical-align: top;
	}

	.kt-comment-form .comment-form-author {
		margin-right: 14px;
	}
}


/* --- reservations.css ------------------------------------------------------- */
/* ==========================================================================
   Koh Tomyums — Reservations page
   Templates: page-reservations.php + template-parts/reservations/form.php

   Everything is scoped under .kt-res* so nothing leaks into other templates.
   Two form treatments live here and share one visual language:
     1. .kt-res-form   — the theme's own fallback booking form (real radio
                         groups behind the design's chips).
     2. .kt-res-plugin — the KTY Reserve plugin's [kty_reservation_form]
                         output (.kty-reservation-form-wrapper / .kty-form-row
                         / .kty-submit-btn / .kty-form-message). The plugin
                         ships a light-theme stylesheet whose own custom
                         properties are re-pointed at the Gilt tokens below,
                         with structural overrides on top.

   Colours are authored hex-first then oklch, matching theme.css, so browsers
   without oklch keep the previous declaration. No token is redefined here —
   the two locals are page-scoped values the token set does not carry.
   ========================================================================== */

.kt-res {
	/* Weekday caption inside a selected (gold) date cell. */
	--kt-res-ink-soft: #332e27;
	--kt-res-ink-soft: oklch(0.30 0.03 60);
	/* Struck-through, unavailable time slot. Same value as the block
	   checkout's sold-out slot chip, so both now read one token. */
	--kt-res-off: var(--kt-text-off);
}

/* --------------------------------------------------------------------------
   1. Hero band
   -------------------------------------------------------------------------- */

.kt-res-hero {
	position: relative;
	overflow: hidden;
}

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

/* The last stop is fully opaque at 97% so the hero dissolves into the page
   ground and there is no seam into the grid below. */
.kt-res-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(16, 14, 12, 0.72),
		rgba(16, 14, 12, 0.55) 45%,
		rgb(13, 12, 10) 97%
	);
	background: linear-gradient(
		to bottom,
		oklch(0.10 0.006 60 / 0.72),
		oklch(0.10 0.006 60 / 0.55) 45%,
		var(--kt-ground) 97%
	);
}

.kt-res-hero__inner {
	position: relative;
	max-width: var(--kt-max);
	margin: 0 auto;
	padding: clamp(56px, 8vw, 96px) var(--kt-gutter) clamp(64px, 8vw, 104px);
	text-align: center;
}

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

.kt-res-hero__title {
	font-family: var(--kt-font-display);
	font-size: clamp(32px, 5.6vw, 62px);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kt-text-hero);
	line-height: 1.1;
	margin-top: 18px;
}

.kt-res-hero__script {
	font-family: var(--kt-font-script);
	font-size: clamp(26px, 3.4vw, 36px);
	color: var(--kt-gold-soft);
	line-height: 1.3;
	margin: 12px 0 0;
}

.kt-res-hero__text {
	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;
}

/* --------------------------------------------------------------------------
   2. Two-column grid

   No top padding — the hero's bottom padding is the only spacer. The single
   column happens on its own around 780px from auto-fit + minmax(340px).
   -------------------------------------------------------------------------- */

/* min(340px, 100%) is the design's minmax(340px, 1fr) with its one sharp
   edge filed off: identical tracks at every width above 340px, but no
   horizontal overflow on a 320–375px phone, where a bare 340px floor is
   wider than the content box. No breakpoint is introduced. */
/*
 * margin-INLINE plus an explicit top, not the `margin: 0 auto` shorthand.
 *
 * The measured gap between the hero and this grid was 0px — the hero ended at
 * 499 and the panels began at 499. That was not quite an oversight: the hero's
 * scrim ends fully opaque (see the note above it) so the band dissolves into
 * the page ground with no seam, and the shorthand's `0` top then let the
 * content start the instant the picture finished. The dissolve works; what was
 * missing was any ground to dissolve INTO before the first panel.
 *
 * clamp(48px, 6vw, 70px) is not a new number. It is the theme's existing
 * statement of a major boundary — the footer's own margin (theme.css:1954) and
 * the break the front page gives its FAQ — and a full-bleed banner handing over
 * to the working content of the page is exactly that kind of boundary.
 *
 * Note the shorthand trap this rule now avoids, the same one that silently
 * zeroed the front page's section rhythm: `margin: 0 auto` also sets
 * margin-top, and it wins over anything less specific.
 */
.kt-res-grid {
	max-width: var(--kt-max);
	margin-inline: auto;
	margin-top: clamp(48px, 6vw, 70px);
	padding-inline: var(--kt-gutter);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	gap: clamp(20px, 3vw, 34px);
	align-items: start;
}

/* --------------------------------------------------------------------------
   3. "Your table" panel — the only backdrop-filter on the page
   -------------------------------------------------------------------------- */

/* Sits on .kt-panel.kt-panel--fill; only the padding differs from the
   shared component, plus a dark colour-scheme so native date pickers,
   select popups and scrollbars render dark. */
.kt-res-panel {
	padding: clamp(30px, 4vw, 46px) clamp(24px, 3.4vw, 44px);
	color-scheme: dark;
}

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

.kt-res-panel__rule,
.kt-res-panel__divider {
	display: block;
	height: 1px;
	background: var(--kt-hairline);
}

.kt-res-panel__rule {
	margin: 22px 0 28px;
}

/* Deliberately different from the rule above — 32/28, not 22/28. */
.kt-res-panel__divider {
	margin: 32px 0 28px;
}

/* --------------------------------------------------------------------------
   4. Field groups and the micro-label token
   -------------------------------------------------------------------------- */

.kt-res-group {
	border: 0;
	margin: 0;
	padding: 0;
	min-width: 0;
}

.kt-res-group + .kt-res-group {
	margin-top: 30px;
}

.kt-res-panel .kt-res-label {
	display: block;
	float: none;
	width: 100%;
	margin: 0 0 14px;
	padding: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--kt-gold-dim);
}

/* --------------------------------------------------------------------------
   5. Selectable chips — party size, date, time, seating

   Every chip is a <label> tied to a visually hidden radio, so the whole group
   is keyboard operable and the gold "selected" fill is driven by :checked.
   Corners come from --kt-radius-sm, the small-control step of the theme's
   radius scale — the same 4px the buttons, inputs and menu chips carry.
   -------------------------------------------------------------------------- */

.kt-res-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.kt-res-dates {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
	gap: 8px;
}

/* Six slots into a five-track row means the last one wraps and stretches.
   That is the design as drawn — do not force six columns. */
.kt-res-times {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
	gap: 8px;
}

.kt-res-seats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.kt-res-panel input.kt-res-input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
	-webkit-appearance: none;
	appearance: none;
}

.kt-res-panel .kt-res-chip,
.kt-res-panel .kt-res-cell,
.kt-res-panel .kt-res-slot,
.kt-res-panel .kt-res-seat {
	display: block;
	margin: 0;
	border: 1px solid var(--kt-border-control);
	border-radius: var(--kt-radius-sm);
	background: transparent;
	color: var(--kt-text-body);
	text-align: center;
	/* Reset the theme's global <label> treatment — these are chips, not labels. */
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	transition: background var(--kt-ease), border-color var(--kt-ease), color var(--kt-ease);
}

.kt-res-panel .kt-res-chip {
	min-width: 46px;
	padding: 12px 18px;
	font-family: var(--kt-font-display);
	font-size: 15px;
}

/* The overflow chip is deliberately unlike its numeric siblings: Manrope,
   uppercase, no min-width. */
.kt-res-panel .kt-res-chip--more {
	min-width: 0;
	display: grid;
	place-items: center;
	font-family: var(--kt-font-body);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kt-text);
}

.kt-res-panel .kt-res-cell {
	padding: 14px 10px;
}

.kt-res-cell__dow {
	display: block;
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--kt-text-dim);
}

.kt-res-cell__num {
	display: block;
	font-family: var(--kt-font-display);
	font-size: 19px;
	letter-spacing: normal;
	color: var(--kt-text-bright);
	margin-top: 6px;
}

.kt-res-panel .kt-res-slot {
	padding: 13px 10px;
	font-size: 13px;
	letter-spacing: 0.1em;
}

.kt-res-panel .kt-res-seat {
	padding: 12px 22px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* Hover — only on choices that are neither selected nor sold out. */
.kt-res-panel .kt-res-input:not(:checked):not(:disabled) + .kt-res-chip:hover,
.kt-res-panel .kt-res-input:not(:checked):not(:disabled) + .kt-res-cell:hover,
.kt-res-panel .kt-res-input:not(:checked):not(:disabled) + .kt-res-slot:hover,
.kt-res-panel .kt-res-input:not(:checked):not(:disabled) + .kt-res-seat:hover {
	border-color: var(--kt-gold-line);
	color: var(--kt-gold-bright);
}

/* Selected — gold fill, dark ink. */
.kt-res-panel .kt-res-input:checked + .kt-res-chip,
.kt-res-panel .kt-res-input:checked + .kt-res-cell,
.kt-res-panel .kt-res-input:checked + .kt-res-slot,
.kt-res-panel .kt-res-input:checked + .kt-res-seat {
	border-color: var(--kt-gold);
	background: var(--kt-gold);
	color: var(--kt-on-gold);
}

.kt-res-panel .kt-res-input:checked + .kt-res-slot,
.kt-res-panel .kt-res-input:checked + .kt-res-seat {
	font-weight: 700;
}

.kt-res-panel .kt-res-input:checked + .kt-res-cell .kt-res-cell__dow {
	color: var(--kt-res-ink-soft);
}

.kt-res-panel .kt-res-input:checked + .kt-res-cell .kt-res-cell__num {
	color: var(--kt-on-gold);
}

/* Unavailable — dimmer border, dimmer text, strikethrough. No fill, no label. */
.kt-res-panel .kt-res-input:disabled + .kt-res-chip,
.kt-res-panel .kt-res-input:disabled + .kt-res-cell,
.kt-res-panel .kt-res-input:disabled + .kt-res-slot,
.kt-res-panel .kt-res-input:disabled + .kt-res-seat,
.kt-res-panel .kt-res-slot.is-unavailable {
	border-color: var(--kt-hairline-faint);
	color: var(--kt-res-off);
	text-decoration: line-through;
	cursor: not-allowed;
}

.kt-res-panel .kt-res-input:disabled + .kt-res-cell .kt-res-cell__dow,
.kt-res-panel .kt-res-input:disabled + .kt-res-cell .kt-res-cell__num {
	color: var(--kt-res-off);
}

/* The global :focus-visible ring cannot land on a hidden input, so it is
   forwarded to the label the user actually sees. */
.kt-res-panel .kt-res-input:focus-visible + .kt-res-chip,
.kt-res-panel .kt-res-input:focus-visible + .kt-res-cell,
.kt-res-panel .kt-res-input:focus-visible + .kt-res-slot,
.kt-res-panel .kt-res-input:focus-visible + .kt-res-seat {
	outline: 2px solid var(--kt-gold-soft);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   6. Text fields — shared by the fallback form and the plugin's output

   :is() raises specificity above the plugin's own .kty-reservation-form
   rules without needing !important.
   -------------------------------------------------------------------------- */

.kt-res-panel :is(.kt-res-form, .kty-reservation-form) :is(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="date"],
	input[type="time"],
	input[type="number"],
	input[type="search"],
	select,
	textarea
) {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--kt-border-control);
	border-radius: var(--kt-radius-sm);
	background-color: transparent;
	background-image: none;
	box-shadow: none;
	font-family: var(--kt-font-body);
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--kt-text);
	transition: border-color var(--kt-ease);
}

.kt-res-panel :is(.kt-res-form, .kty-reservation-form) :is(input, textarea)::placeholder {
	color: var(--kt-text-faint);
	opacity: 1;
}

.kt-res-panel :is(.kt-res-form, .kty-reservation-form) :is(input, select, textarea):focus {
	border-color: var(--kt-gold-line);
	outline: none;
	box-shadow: none;
}

.kt-res-panel :is(.kt-res-form, .kty-reservation-form) :is(input, select, textarea):disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   The date field — what a page is actually allowed to style
   --------------------------------------------------------------------------
   READ THIS BEFORE ADDING ANYTHING HERE. Nearly every popular answer to
   "style the date picker" does nothing, and does nothing SILENTLY: the rules
   parse, they validate, they survive review, and they change no pixels.

   THE CALENDAR POPUP CANNOT BE STYLED. In Chrome it is a separate document in
   a separate widget, painted from hardcoded hex in Chromium's own
   calendar_picker.css — no custom properties, no ::part, no exposed
   pseudo-element. `color-scheme: dark` (set on .kt-res-panel) is the entire
   popup-theming budget available, and it is already spent: that is why the
   panel is dark rather than white. On iOS the sheet is drawn by the OS and
   even color-scheme does not reach it — an iPhone set to LIGHT shows a white
   sheet over this near-black page, and only the OS appearance changes that.

   THE BLUE SEGMENT CHIP CANNOT BE RECOLOURED. It is a UA system colour
   resolved through color-scheme; author CSS cannot redefine a system colour.
   It can only be replaced wholesale, and we deliberately do not: no selector
   distinguishes the SELECTED segment from its siblings, so repainting it
   repaints all three and a keyboard user loses the only cue telling them
   which segment the arrow keys will change. On a booking form that trades a
   cosmetic complaint for a real one. The focus ring below is the compensating
   cue, which is why it is load-bearing rather than decoration.

   DO NOT ADD, all measured inert on this control:
     accent-color                       — applies to checkbox/radio/range/
                                          progress only. It computes to gold
                                          and changes nothing, which is
                                          exactly why it looks like it works.
     ::-webkit-datetime-edit-*-field:focus — parses, never matches; the
                                          sub-fields take no DOM focus.
     ::selection                        — the chip is UA chrome, not a
                                          document selection.
     ::-webkit-inner-spin-button, ::-webkit-clear-button — those boxes do not
                                          exist on a date input.
     appearance: base / ::picker(date)  — CSS.supports is false today, and the
                                          resolved spec covers in-page parts
                                          only, so it is not a route to the
                                          popup later either.

   Also worth knowing: getComputedStyle() on a ::-webkit- pseudo-element
   silently returns the HOST input's style, so it can never confirm any of
   this. Only rendering and sampling pixels can.
   -------------------------------------------------------------------------- */

/*
 * Restating color-scheme on the input itself. It is inherited from
 * .kt-res-panel today; the popup takes its owner element's USED value, so
 * declaring it here keeps the dark panel even if that ancestor is ever
 * restructured. Blink popup and Gecko panel only — never iOS.
 */
.kt-res-panel :is(.kt-res-form, .kty-reservation-form) input[type="date"] {
	color-scheme: dark;
}

/*
 * The focus ring. Standard CSS on the host box, so it is the one enhancement
 * here that works in EVERY engine including iOS — where every rule below is
 * inert and the value renders as one centred run ("14 Sep 2026") with no
 * segments at all.
 *
 * :focus-visible rather than :focus, so a pointer user does not get a ring
 * they did not ask for. It overrides the shared `outline: none` above.
 */
.kt-res-panel :is(.kt-res-form, .kty-reservation-form) input[type="date"]:focus-visible {
	border-color: var(--kt-gold);
	outline: 1px solid var(--kt-gold);
	outline-offset: 2px;
}

/*
 * The "/" separators, so the value reads as three chosen numbers rather than
 * one machine string. Desktop Chrome/Edge and macOS Safari; inert on iOS (no
 * slashes in its format) and in Firefox (no -webkit- datetime parts at all).
 *
 * Colour only, deliberately no geometry: padding on these parts reserves no
 * width in Blink but genuinely resizes the control in macOS WebKit, so it is
 * not portable.
 */
.kt-res-panel :is(.kt-res-form, .kty-reservation-form) input[type="date"]::-webkit-datetime-edit-text {
	color: color-mix(in srgb, var(--kt-text) 42%, transparent);
}

/*
 * The calendar glyph, in gold instead of the UA's grey. Desktop Chrome/Edge
 * ONLY — WebKit does not implement this pseudo-element (it reports
 * CSS.supports false for it while reporting true for the datetime sub-fields)
 * and iOS draws no calendar affordance at all. Firefox draws its own button,
 * which color-scheme darkens and this rule cannot reach. An enhancement for
 * one engine, never a fix.
 *
 * The gold is hardcoded as %23d7a75c inside the data URI because a custom
 * property cannot be interpolated into url(). Keep it in step with --kt-gold
 * by hand if the palette moves.
 */
.kt-res-panel :is(.kt-res-form, .kty-reservation-form) input[type="date"]::-webkit-calendar-picker-indicator {
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23d7a75c'%20stroke-width='1.7'%20stroke-linecap='round'%3E%3Crect%20x='3.25'%20y='5'%20width='17.5'%20height='15.75'%20rx='2'/%3E%3Cpath%20d='M3.25%2010h17.5M8.25%203.25v3.5M15.75%203.25v3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
	opacity: 0.8;
	cursor: pointer;
}

.kt-res-panel :is(.kt-res-form, .kty-reservation-form) input[type="date"]::-webkit-calendar-picker-indicator:hover {
	opacity: 1;
}

/*
 * Keep room for theme.css's select caret, which is drawn as a background.
 *
 * THE PANEL CLASS IS DOUBLED, and it has to be. The shared control rule above
 * sets `background-image: none`, and it out-specifies this one even though
 * this one looks more specific: `:is()` takes the MAX specificity of its
 * arguments, so its `input[type="text"]` branch scores (0,1,1) and lifts that
 * whole rule to (0,3,1), against (0,2,1) here. Source order never got a say —
 * it only breaks ties at equal specificity.
 *
 * The result was a time field with NO dropdown affordance whatever: the native
 * arrow suppressed by `appearance: none` (set by both theme.css and the
 * plugin's own stylesheet), and the replacement caret erased by that reset.
 * Measured on the live page — computed background-image was `none` and
 * padding-right 16px instead of the 42px reserved here.
 *
 * Doubling the class takes this to (0,3,1) and lets source order decide, which
 * is the same idiom this codebase already uses against WooCommerce's sheets.
 * The alternative — `:where()` on the shared rule — would drop its specificity
 * below the plugin's own `.kty-reservation-form input[...]` rules and hand
 * them back control of the field.
 */
.kt-res-panel.kt-res-panel :is(.kt-res-form, .kty-reservation-form) select {
	padding-right: 42px;
	background-image:
		linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 20px) center, calc(100% - 14px) center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

.kt-res-panel :is(.kt-res-form, .kty-reservation-form) textarea {
	min-height: 92px;
	resize: vertical;
	line-height: 1.65;
}

.kt-res-contact {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
	gap: 14px;
}

.kt-res-field {
	margin: 0;
}

.kt-res-field--wide {
	margin-top: 14px;
}

/* --------------------------------------------------------------------------
   7. CTA, fine print, fallback note
   -------------------------------------------------------------------------- */

.kt-res-panel :is(.kt-res-form, .kty-reservation-form) :is(
	.kt-res-submit,
	.kty-submit-btn,
	button[type="submit"]
) {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 26px;
	padding: 17px 30px;
	border: 0;
	border-radius: var(--kt-radius-sm);
	background: var(--kt-gold);
	color: var(--kt-on-gold);
	font-family: var(--kt-font-body);
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: 0.24em;
	line-height: 1;
	text-transform: uppercase;
	text-align: center;
	cursor: pointer;
	transition: background var(--kt-ease);
}

.kt-res-panel :is(.kt-res-form, .kty-reservation-form) :is(
	.kt-res-submit,
	.kty-submit-btn,
	button[type="submit"]
):hover,
.kt-res-panel :is(.kt-res-form, .kty-reservation-form) :is(
	.kt-res-submit,
	.kty-submit-btn,
	button[type="submit"]
):focus-visible {
	background: var(--kt-gold-hi);
	color: var(--kt-on-gold);
}

.kt-res-panel :is(.kt-res-form, .kty-reservation-form) :is(
	.kt-res-submit,
	.kty-submit-btn,
	button[type="submit"]
):disabled {
	background: transparent;
	border: 1px solid var(--kt-hairline-faint);
	color: var(--kt-res-off);
	cursor: not-allowed;
}

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

.kt-res-alt {
	font-size: 12px;
	line-height: 1.7;
	font-weight: 300;
	color: var(--kt-text-faint);
	text-align: center;
	margin: 10px 0 0;
}

.kt-res-alt a {
	color: var(--kt-gold-bright);
}

/* --------------------------------------------------------------------------
   8. KTY Reserve plugin output

   The plugin's markup is fixed (.kty-reservation-form-wrapper > form >
   .kty-form-row > label + control, then .kty-submit-row and
   .kty-form-message). It carries its own light-theme stylesheet driven by
   --kty-* custom properties, so those are re-pointed at the Gilt tokens
   and the wrapper/box chrome is flattened.
   -------------------------------------------------------------------------- */

.kt-res-plugin .kty-reservation-form-wrapper {
	--kty-brand: var(--kt-gold);
	--kty-brand-hover: var(--kt-gold-hi);
	--kty-brand-soft: transparent;
	--kty-text: var(--kt-text);
	--kty-text-muted: var(--kt-text-faint);
	--kty-border: var(--kt-gold-line-faint);
	--kty-border-2: var(--kt-gold-line);
	--kty-bg: transparent;
	--kty-surface: transparent;
	--kty-success: var(--kt-ok);
	--kty-success-soft: transparent;
	--kty-danger: var(--kt-err);
	--kty-danger-soft: transparent;
	--kty-radius: 0;
	--kty-radius-sm: 0;

	max-width: none;
	margin: 0;
	padding: 0;
	font-family: var(--kt-font-body);
	color: var(--kt-text);
}

.kt-res-plugin .kty-reservation-form {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 18px 14px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--kt-radius);
	background: none;
	box-shadow: none;
}

.kt-res-plugin .kty-reservation-form .kty-form-row {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
}

/* Notes, submit and the response message always take the full width.
   :has() covers a reordered form; the positional rule is the fallback. */
.kt-res-plugin .kty-reservation-form .kty-form-row:nth-child(7),
.kt-res-plugin .kty-reservation-form .kty-form-row:has(textarea),
.kt-res-plugin .kty-reservation-form .kty-submit-row,
.kt-res-plugin .kty-reservation-form .kty-form-message {
	grid-column: 1 / -1;
}

.kt-res-plugin .kty-reservation-form .kty-submit-row {
	margin-top: 0;
}

.kt-res-plugin .kty-reservation-form label {
	display: block;
	margin: 0 0 8px;
	padding: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-gold-dim);
}

.kt-res-plugin .kty-reservation-form label .required {
	color: var(--kt-gold);
	font-weight: 400;
	text-decoration: none;
	border: 0;
	margin-left: 2px;
}

/* jQuery toggles this element's inline display, so display is left alone. */
.kt-res-plugin .kty-form-message {
	margin: 0;
	padding: 14px 18px;
	border: 1px solid var(--kt-frame);
	border-left-width: 3px;
	border-left-color: var(--kt-gold);
	border-radius: var(--kt-radius-sm);
	background: var(--kt-panel);
	font-size: 13px;
	line-height: 1.65;
	font-weight: 300;
	color: var(--kt-text-body);
}

.kt-res-plugin .kty-form-message.success {
	border-left-color: var(--kt-ok);
}

.kt-res-plugin .kty-form-message.error {
	border-left-color: var(--kt-err);
}

/* --------------------------------------------------------------------------
   9. Right-hand card column
   -------------------------------------------------------------------------- */

.kt-res-aside {
	display: flex;
	flex-direction: column;
	gap: clamp(20px, 3vw, 34px);
}

/* Photo card — rides on the shared .kt-feature component. */
.kt-res-terrace {
	min-height: 280px;
}

.kt-res-terrace .kt-feature__title {
	text-transform: uppercase;
}

/* Outline-only cards: no fill and no backdrop-filter, so the veiled ground
   photograph reads straight through them. */
.kt-res-info {
	padding: clamp(28px, 3.4vw, 40px) clamp(24px, 3.4vw, 40px);
}

.kt-res-info__title {
	font-family: var(--kt-font-display);
	font-size: clamp(17px, 2.2vw, 21px);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kt-gold-soft);
	line-height: 1.2;
	margin-bottom: 22px;
}

.kt-res-info__list {
	display: grid;
	gap: 18px;
	margin: 0;
	font-size: 13.5px;
	line-height: 1.75;
	font-weight: 300;
	color: var(--kt-text-body);
}

.kt-res-info__row {
	margin: 0;
}

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

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

.kt-res-cross {
	padding: clamp(26px, 3.2vw, 36px) clamp(24px, 3.4vw, 40px);
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: center;
	justify-content: space-between;
}

.kt-res-cross__title {
	font-family: var(--kt-font-display);
	font-size: 17px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kt-text-bright);
	line-height: 1.2;
}

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

/* The design's ghost button, on top of .kt-btn.kt-btn--gold. */
.kt-res-cross__cta {
	padding: 12px 26px;
	font-size: 11px;
	letter-spacing: 0.22em;
	white-space: nowrap;
	flex: none;
}

/* --------------------------------------------------------------------------
   10. Editor content below the booking panel
   -------------------------------------------------------------------------- */

.kt-res-content {
	margin-top: clamp(34px, 4.6vw, 56px);
}

/* --------------------------------------------------------------------------
   Offline fallback — shown when no booking plugin is active.
   Replaces the old fake form, which had no handler and discarded bookings.
   -------------------------------------------------------------------------- */

.kt-res-offline {
	text-align: center;
	padding: clamp(8px, 2vw, 18px) 0 4px;
}

.kt-res-offline__lede {
	font-size: clamp(15px, 1.8vw, 17px);
	line-height: 1.7;
	color: var(--kt-text-body);
	font-weight: 300;
	max-width: 460px;
	margin: 0 auto 28px;
	text-wrap: pretty;
}

.kt-res-offline__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}

.kt-res-offline__hours {
	margin: 26px 0 0;
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--kt-text-faint);
}

.kt-res-offline__admin {
	margin: 30px auto 0;
	max-width: 480px;
	padding: 14px 18px;
	border: 1px dashed var(--kt-gold-line-faint);
	border-radius: var(--kt-radius-sm);
	font-size: 12.5px;
	line-height: 1.65;
	color: var(--kt-text-faint);
	text-align: left;
}


/* --- search.css ------------------------------------------------------- */
/* ==========================================================================
   Search results, the "nothing matched" card and the 404 page.
   Part file — concatenated into woocommerce.css. Tokens live in theme.css.

   The content column is 900px here, deliberately narrower than the 1440px
   shop archive (search spec §9). Every selector is scoped under .kt-search
   or a kt- prefixed block so nothing leaks into other templates.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Column
   -------------------------------------------------------------------------- */

.kt-search {
	max-width: 900px;
	margin-inline: auto;
	padding-inline: clamp(20px, 5vw, 52px);
	padding-bottom: clamp(40px, 6vw, 72px);
}

/* --------------------------------------------------------------------------
   2. Header — query echo, count, form
   -------------------------------------------------------------------------- */

.kt-search-head {
	padding-top: clamp(40px, 6vw, 68px);
}

.kt-search-head__row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--kt-gold-line-2);
}

.kt-search-head__icon {
	display: block;
	flex: none;
	line-height: 0;
}

.kt-search-head__icon svg {
	width: 22px;
	height: 22px;
}

.kt-search-head__query {
	font-family: var(--kt-font-display);
	font-size: clamp(22px, 3.4vw, 30px);
	font-weight: 400;
	letter-spacing: 0.06em;
	line-height: 1.2;
	color: var(--kt-text-bright);
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Cinzel caps at the design's 12px / 0.24em rhythm. */
.kt-search-head__count {
	margin: 18px 0 0;
	font-family: var(--kt-font-display);
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--kt-text-dim);
}

.kt-search-head__form {
	margin-top: 22px;
}

.kt-search-head__form .kt-searchform {
	max-width: 620px;
	margin-inline: 0;
}

/* --------------------------------------------------------------------------
   3. Dish result rows
   -------------------------------------------------------------------------- */

.kt-search-results {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: clamp(28px, 4vw, 40px);
}

/* .kt-dish already carries the panel recipe: gold hairline, 8px radius,
   translucent fill, blur(3px). Here it lies down into a row. */
.kt-dish--result {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 26px;
	padding: 24px 28px;
	transition: border-color var(--kt-ease-slow);
}

.kt-dish--result:hover,
.kt-dish--result:focus-visible,
.kt-dish--result:focus-within {
	border-color: var(--kt-gold-line);
	transform: none;
}

.kt-dish__result-text {
	flex: 1 1 200px;
	min-width: 200px;
}

.kt-dish__result-title {
	display: block;
	font-family: var(--kt-font-display);
	font-size: 17px;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--kt-text-bright);
}

.kt-dish__result-excerpt {
	display: block;
	margin-top: 8px;
	font-size: 13px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--kt-text-dim);
}

.kt-dish--result .kt-dish__result-heat {
	flex: none;
}

.kt-dish__result-price {
	flex: none;
	font-family: var(--kt-font-display);
	font-size: 17px;
	line-height: 1.2;
	color: var(--kt-gold);
	white-space: nowrap;
}

.kt-dish__result-price del {
	margin-right: 8px;
	font-size: 0.78em;
	color: var(--kt-text-faint);
}

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

/* The matched term — colour only, no background, no weight change. */
.kt-mark {
	background: none;
	font-weight: inherit;
	color: var(--kt-gold-bright);
}

.kt-search .kt-pagination {
	justify-content: flex-start;
}

/* --------------------------------------------------------------------------
   4. Secondary results — pages and posts under the dishes
   -------------------------------------------------------------------------- */

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

.kt-search-more__head {
	display: flex;
	align-items: baseline;
	gap: 20px;
	margin-bottom: 22px;
}

.kt-search-more__title {
	font-family: var(--kt-font-display);
	font-size: clamp(16px, 2vw, 19px);
	font-weight: 400;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--kt-gold-soft);
}

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

.kt-search-more__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.kt-search-more__item {
	padding: 16px 0;
	border-top: 1px solid var(--kt-hairline-faint);
}

.kt-search-more__item:first-child {
	border-top: 0;
	padding-top: 0;
}

.kt-search-more__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
}

.kt-search-more__name {
	font-family: var(--kt-font-display);
	font-size: 14.5px;
	letter-spacing: 0.08em;
	color: var(--kt-text-bright);
	transition: color var(--kt-ease);
}

.kt-search-more__link:hover .kt-search-more__name,
.kt-search-more__link:focus-visible .kt-search-more__name {
	color: var(--kt-gold-bright);
}

.kt-search-more__label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kt-text-meta);
}

.kt-search-more__text {
	margin: 8px 0 0;
	font-size: 13px;
	font-weight: 300;
	line-height: 1.6;
	color: var(--kt-text-muted);
}

/* --------------------------------------------------------------------------
   5. Nothing matched — the empty card
   -------------------------------------------------------------------------- */

.kt-search-empty {
	margin-top: clamp(28px, 4vw, 40px);
	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: clamp(34px, 4.4vw, 48px) clamp(26px, 3.4vw, 40px);
	text-align: center;
}

.kt-search-empty .kt-empty {
	padding: 0;
}

.kt-search-empty .kt-empty__mark {
	width: 74px;
	height: 74px;
	margin-bottom: 0;
	border-color: var(--kt-gold-line-soft);
}

.kt-search-empty .kt-empty__title {
	margin-top: 20px;
	font-size: clamp(17px, 2.2vw, 21px);
	letter-spacing: 0.12em;
	color: var(--kt-text-bright);
}

.kt-search-empty .kt-empty__text {
	margin-top: 12px;
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--kt-text-dim);
}

.kt-search-empty__form {
	margin-top: 26px;
}

.kt-search-empty .kt-empty__actions {
	margin-top: 24px;
}

/* Suggested product categories */
.kt-search-suggest {
	margin-top: 28px;
}

.kt-search-suggest__label {
	margin: 0 0 14px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--kt-text-meta);
}

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

.kt-search-suggest__chip {
	display: inline-block;
	border: 1px solid var(--kt-gold-line-faint);
	border-radius: var(--kt-radius-pill);
	padding: 8px 18px;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kt-text-body);
	transition: border-color var(--kt-ease), color var(--kt-ease), background var(--kt-ease);
}

.kt-search-suggest__chip:hover,
.kt-search-suggest__chip:focus-visible {
	border-color: var(--kt-gold-line);
	background: var(--kt-gold);
	color: var(--kt-on-gold);
}

/* --------------------------------------------------------------------------
   6. 404
   -------------------------------------------------------------------------- */

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

.kt-404__panel {
	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: clamp(40px, 5.6vw, 64px) clamp(26px, 3.4vw, 40px) clamp(36px, 4.6vw, 52px);
	text-align: center;
}

.kt-404__code {
	margin: 0;
	font-family: var(--kt-font-display);
	font-size: clamp(56px, 13vw, 116px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.1em;
	/* the tracking pushes the glyphs right; pull the block back to centre */
	text-indent: 0.1em;
	color: var(--kt-gold);
}

.kt-404__rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(12px, 2vw, 22px);
	margin: 22px 0 26px;
}

.kt-404__rule-line {
	flex: none;
	height: 1px;
	width: clamp(28px, 6vw, 70px);
	background: var(--kt-gold-line-soft);
}

.kt-404__rule-pip {
	flex: none;
	width: 7px;
	height: 7px;
	background: var(--kt-gold-dim);
	transform: rotate(45deg);
}

.kt-404__title {
	font-family: var(--kt-font-display);
	font-size: clamp(19px, 3vw, 28px);
	font-weight: 400;
	letter-spacing: 0.14em;
	line-height: 1.25;
	text-transform: uppercase;
	color: var(--kt-text-bright);
}

.kt-404__script {
	margin: 14px 0 0;
	font-size: clamp(22px, 3vw, 30px);
	line-height: 1.3;
}

.kt-404__text {
	max-width: 460px;
	margin: 18px auto 0;
	font-size: 13.5px;
	font-weight: 300;
	line-height: 1.7;
	color: var(--kt-text-dim);
}

.kt-404__form {
	margin-top: 30px;
}

.kt-404__form .kt-searchform {
	max-width: 520px;
}

.kt-404__suggest {
	margin-top: 30px;
}

.kt-404__actions {
	margin-top: 30px;
}

/* --------------------------------------------------------------------------
   7. Narrow screens & motion
   -------------------------------------------------------------------------- */

@media (max-width: 520px) {
	.kt-dish--result {
		padding: 20px 22px;
	}

	.kt-dish__result-text {
		flex-basis: 100%;
		min-width: 0;
	}

	.kt-search-head__form .kt-searchform,
	.kt-404__form .kt-searchform {
		max-width: none;
	}

	.kt-404__actions .kt-btn,
	.kt-search-empty .kt-empty__actions .kt-btn {
		flex: 1 1 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kt-dish--result,
	.kt-search-more__name,
	.kt-search-suggest__chip {
		transition: none;
	}
}