/* Kuzina Guadalupe — Products front-end styles */

:root {
	--kg-p-black: #141414;
	--kg-p-gold: #c9a227;
	--kg-p-gold-light: #e0bc4c;
	--kg-p-red: #9c2b2b;
	--kg-p-red-light: #c23b3b;
	--kg-p-white: #ffffff;
	--kg-p-gray: #666666;
	--kg-p-border: #e5e0d5;
	/* Dark theme used for menu/location/contact/product sections */
	--kg-p-dark: #1c1a17;
	--kg-p-dark-card: #242019;
	--kg-p-dark-border: #3a352c;
	--kg-p-text: #f4efe4;
	--kg-p-text-muted: #b9b2a2;
	/* Lighter, warm background used for the homepage "boxes" menu section
	   below the hero slider — cards stay dark, but the section itself
	   reads lighter, with matching dark text instead of light-on-dark. */
	--kg-p-menu-light: #f6f1e6;
	--kg-p-menu-text: #2b2117;
	--kg-p-menu-text-muted: #6b5e4a;
}

/* Full-bleed light/cream background (same #f6f1e6 tone everywhere — Menu,
   Locations, Contact, About, and individual Menu Item pages), content kept
   to a readable max width — no extra markup needed: the element itself
   stretches to the viewport edges while its padding keeps the content
   centered around --kg-content-width. */
.kg-product,
.kg-menu-page,
.kg-locations-page,
.kg-contact-page {
	--kg-content-width: 1100px;
	width: 100vw;
	box-sizing: border-box;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background-color: var(--kg-p-menu-light);
	color: var(--kg-p-menu-text) !important;
	padding-top: 60px;
	padding-bottom: 60px;
	padding-left: max(20px, calc((100vw - var(--kg-content-width)) / 2));
	padding-right: max(20px, calc((100vw - var(--kg-content-width)) / 2));
}
/* Menu item (product) pages get a wider column so the 1150px slider below
   has room either side. Less top padding than other pages too — combined
   with the theme's own title-spacing fix, this closes the big gap that
   used to sit between the title and the "Available in" line under it. */
.kg-product {
	--kg-content-width: 1155px;
	padding-top: 16px;
}

/* Gallery slider — fixed 1150x400 on desktop, same on every product page
   regardless of the source photos' own dimensions (aspect-ratio + object-fit:
   cover on the slides crops any image to fit, so nothing stretches or
   varies from one product to the next). Scales down proportionally on
   narrower screens since it's width:100% capped at max-width, with the
   aspect-ratio keeping the same 1150:400 shape at every size. */
.kg-slider {
	position: relative;
	width: 100%;
	max-width: 1150px;
	aspect-ratio: 1150 / 400;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 8px;
	background: #2a261f;
}
.kg-slider-track {
	display: flex;
	height: 100%;
	transition: transform 0.35s ease;
}
.kg-slide {
	flex: 0 0 100%;
	height: 100%;
}
.kg-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.kg-slider-prev,
.kg-slider-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(20, 20, 20, 0.65);
	color: #fff;
	border: none;
	outline: none;
	box-sizing: border-box;
	width: 36px;
	height: 36px;
	min-width: 36px;
	max-width: 36px;
	min-height: 36px;
	max-height: 36px;
	padding: 0;
	margin: 0;
	border-radius: 50%;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}
.kg-slider-prev { left: 10px; }
.kg-slider-next { right: 10px; }
.kg-slider-dots {
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	display: flex;
	justify-content: center;
	gap: 6px;
}
.kg-slider-dots span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(255,255,255,0.6);
	cursor: pointer;
}
.kg-slider-dots span.active {
	background: var(--kg-p-gold);
}

.kg-price {
	font-size: 26px;
	font-weight: 700;
	color: var(--kg-p-gold-light) !important;
	margin: 20px 0 8px;
}
/* Product pages are the light/cream theme now — the gold-light/gold/muted
   colors above were tuned for the dark theme and are too washed-out on
   cream, so this section gets its own darker, higher-contrast palette. */
.kg-product .kg-price {
	color: var(--kg-p-red) !important;
}

/* Discounted price: Original Price struck through, then the actual Price,
   then a "Save ₱X" badge — shown wherever a product has a higher Original
   Price set (e.g. the Whole Lechon Packages). Sized down from the plain
   .kg-price/.kg-menu-card-price figure so the strikethrough + badge don't
   overpower the real price. */
.kg-price-original {
	font-size: 0.55em;
	font-weight: 500;
	text-decoration: line-through;
	color: var(--kg-p-menu-text-muted) !important;
	margin-right: 2px;
}
.kg-price-current {
	font-size: 1em;
}
.kg-save-badge {
	display: inline-block;
	vertical-align: middle;
	font-size: 12px;
	font-weight: 700;
	color: #fff !important;
	background: var(--kg-p-red);
	border-radius: 999px;
	padding: 2px 10px;
	margin-left: 6px;
}
.kg-product .kg-save-badge {
	background: var(--kg-p-red);
}
.kg-menu-card-price .kg-save-badge {
	background: var(--kg-p-gold);
	color: var(--kg-p-black) !important;
}

/* ---------------------------------------------------------
   Single menu-item page — two columns: a framed photo on the left, and
   the "Back to Full Menu" link, meta line, price, Order Now, highlights,
   and the item's own description all together on the right, instead of
   one long centered column with a lot of empty space either side.
--------------------------------------------------------- */
.kg-product-back {
	display: inline-block;
	margin-bottom: 20px;
	color: var(--kg-p-menu-text) !important;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none !important;
}
.kg-product-back:hover {
	color: var(--kg-p-red) !important;
}

.kg-product-columns {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 44px;
	align-items: start;
	max-width: 1150px;
	margin: 0 auto;
}
@media (max-width: 860px) {
	.kg-product-columns {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

.kg-product-media .kg-slider {
	max-width: none;
	aspect-ratio: 4 / 3;
	border-radius: 16px;
	box-shadow: 0 14px 34px rgba(20, 15, 5, 0.16);
}
.kg-product-media-placeholder {
	aspect-ratio: 4 / 3;
	border-radius: 16px;
	background: var(--kg-p-border);
}

.kg-product-body {
	max-width: none;
	margin: 0;
	text-align: left;
}
.kg-product-body .kg-price {
	margin: 0 0 16px;
}

/* Quantity stepper — sits between the price and the Order Now button so
   a shopper can set how many before opening the cart, instead of only
   being able to adjust it after the popup is already open. */
.kg-product-qty {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 16px;
}
.kg-product-qty-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--kg-p-menu-text);
}
.kg-product-qty-stepper {
	display: flex;
	align-items: center;
	gap: 10px;
}
.kg-qty-btn {
	width: 30px !important;
	height: 30px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid var(--kg-p-border) !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: var(--kg-p-black) !important;
	font-size: 16px !important;
	line-height: 1 !important;
	cursor: pointer;
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-shadow: none !important;
}
.kg-qty-btn:hover {
	background: var(--kg-p-menu-light) !important;
	border-color: var(--kg-p-red) !important;
	color: var(--kg-p-red) !important;
}
.kg-product-qty-value {
	min-width: 20px;
	text-align: center;
	font-weight: 700;
	font-size: 15px;
	color: var(--kg-p-black);
}
.kg-product-body .kg-order-btn {
	margin-bottom: 8px;
}
.kg-product-body .kg-highlights-heading {
	margin-top: 24px;
}
.kg-product-body .kg-highlights-list {
	columns: 1;
}

/* The item's own description — folded into the right column instead of
   trailing separately below everything else. When it's a bullet list
   (most items), it's restyled to match the checkmark look used
   everywhere else on the site rather than default WP list bullets. */
.kg-product-includes {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--kg-p-border);
}
.kg-product-includes p {
	margin: 0 0 12px;
	line-height: 1.6;
	color: var(--kg-p-menu-text);
}
.kg-product-includes ul,
.kg-product-includes ol {
	list-style: none;
	margin: 0;
	padding: 0;
}
.kg-product-includes li {
	position: relative;
	padding: 5px 0 5px 26px;
	color: var(--kg-p-menu-text);
	line-height: 1.5;
}
.kg-product-includes li::before {
	content: "✓";
	position: absolute;
	left: 0;
	color: var(--kg-p-red);
	font-weight: 700;
}

.kg-highlights-heading {
	font-size: 16px;
	color: var(--kg-p-gold) !important;
	margin: 24px 0 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.kg-product .kg-highlights-heading {
	color: var(--kg-p-menu-text) !important;
}
/* Two columns — with 6 items that's 3 per column, filling the first column
   top-to-bottom before starting the second (CSS multi-column's natural
   fill order, no extra markup needed). */
.kg-highlights-list {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	text-align: left;
	columns: 2;
	column-gap: 36px;
}
/* Same rounded checkmark icon (dashicons-yes-alt) used on the menu card
   list, instead of a plain "✓" text glyph — reads more like part of the
   site's own icon set. */
.kg-highlights-list li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	margin-bottom: 10px;
	color: var(--kg-p-text-muted) !important;
	line-height: 1.5;
	break-inside: avoid;
}
.kg-product .kg-highlights-list li {
	color: var(--kg-p-menu-text-muted) !important;
}
.kg-highlights-icon {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	font-size: 18px;
	line-height: 1;
	color: var(--kg-p-gold) !important;
	margin-top: 1px;
}
.kg-product .kg-highlights-icon {
	color: var(--kg-p-red) !important;
}
@media (max-width: 480px) {
	.kg-highlights-list {
		columns: 1;
	}
}

/* ---------------------------------------------------------
   "How to Order" steps strip — sits full-width below the two-column
   layout on a single product page, filling what was empty space and
   giving a quick visual walkthrough of the ordering flow.
--------------------------------------------------------- */
.kg-howto-steps {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	max-width: 1150px;
	width: 100%;
	margin: 56px auto 0;
	padding: 56px 20px 70px;
	border-top: 1px solid var(--kg-p-border);
	text-align: center;
}
.kg-howto-heading {
	display: block !important;
	width: 100%;
	text-align: center !important;
	font-size: 28px;
	font-weight: 800;
	color: var(--kg-p-menu-text) !important;
	margin: 0 0 50px !important;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.kg-howto-row {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	gap: 0;
}
.kg-howto-step {
	display: flex;
	flex: 1 1 0;
	min-width: 0;
	flex-direction: column;
	align-items: center;
	text-align: center;
	align-self: stretch;
	justify-content: flex-start;
	gap: 14px;
	background: #fff;
	border: 1px solid var(--kg-p-border);
	border-radius: 14px;
	padding: 30px 14px;
	box-shadow: 0 6px 16px rgba(20, 15, 5, 0.06);
}
.kg-howto-step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--kg-p-red);
	color: #fff !important;
	font-weight: 800;
	font-size: 22px;
	flex-shrink: 0;
	box-shadow: 0 8px 18px rgba(156, 43, 43, 0.28);
	border: 3px solid var(--kg-p-gold);
}
.kg-howto-step-label {
	font-size: 16px;
	font-weight: 700;
	color: var(--kg-p-menu-text) !important;
	line-height: 1.35;
}
.kg-howto-step-desc {
	font-size: 13px;
	font-weight: 400;
	color: var(--kg-p-menu-text-muted) !important;
	line-height: 1.55;
}
.kg-howto-step-arrow {
	flex: 0 0 auto;
	align-self: center;
	color: var(--kg-p-gold) !important;
	font-size: 24px;
	width: 34px;
	text-align: center;
}
@media (max-width: 700px) {
	.kg-howto-steps {
		align-items: stretch !important;
		text-align: left;
	}
	.kg-howto-row {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}
	.kg-howto-step {
		flex: 1 1 auto;
		width: auto;
		flex-direction: row;
		align-items: center;
		text-align: left;
		gap: 16px;
		padding: 18px 16px;
	}
	.kg-howto-step-label,
	.kg-howto-step-desc {
		text-align: left;
	}
	.kg-howto-step-arrow {
		display: flex;
		justify-content: center;
		width: 100%;
		transform: rotate(90deg);
		line-height: 1;
		margin: 4px 0;
	}
}

/* ---------------------------------------------------------
   Product meta line: "Available in: ..." + "Order X before" — the first
   thing in the right column, above the price.
--------------------------------------------------------- */
.kg-product-meta {
	margin: 0 0 14px;
	font-size: 14px;
	color: var(--kg-p-menu-text-muted) !important;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.kg-product-meta-sep {
	color: var(--kg-p-menu-text-muted);
	opacity: 0.6;
	font-weight: 600;
}
.kg-product-available strong,
.kg-product-lead-time strong {
	color: var(--kg-p-menu-text) !important;
	font-weight: 600;
}

.kg-order-btn,
.kg-menu-card-btn,
.kg-order-submit {
	display: inline-block;
	background: var(--kg-p-red) !important;
	color: #fff !important;
	border: none;
	padding: 13px 30px;
	font-size: 15px;
	font-weight: 600;
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none !important;
	text-align: center;
	transition: background-color 0.15s ease, color 0.15s ease;
}
/* !important on both properties: Astra's own global link-hover color
   (applied site-wide with its own !important) was otherwise winning over
   the plain (non-!important) hover color here, leaving gold text on a
   gold background — effectively invisible. */
.kg-order-btn:hover,
.kg-menu-card-btn:hover,
.kg-order-submit:hover {
	background: var(--kg-p-gold) !important;
	color: var(--kg-p-black) !important;
}

/* Modal */
.kg-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(10, 10, 10, 0.6);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: 20px;
}
.kg-modal-overlay[hidden] { display: none; }

.kg-modal {
	background: #fff;
	max-width: 440px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	border-radius: 8px;
	padding: 20px 22px;
	position: relative;
}
.kg-modal h2 {
	margin: 0 0 12px;
	font-size: 20px;
	text-align: center;
}
.kg-modal-price {
	color: var(--kg-p-gold) !important;
	font-weight: 700;
	margin: 0 0 12px;
}
.kg-modal-close {
	position: absolute;
	top: 10px;
	right: 12px;
	background: none;
	border: none;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	color: var(--kg-p-gray);
}

/* Two-step order flow indicator ("1. Your Order" / "2. Delivery Details")
   — splitting the form this way keeps either screen short enough that a
   first-time shopper isn't looking at a long wall of fields at once. */
.kg-order-steps {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 0 14px;
}
.kg-order-step-dot {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--kg-p-gray);
}
.kg-order-step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--kg-p-border);
	color: var(--kg-p-black);
	font-size: 11px;
}
.kg-order-step-dot.is-active {
	color: var(--kg-p-black);
}
.kg-order-step-dot.is-active .kg-order-step-num {
	background: var(--kg-p-red);
	color: #fff;
}
.kg-order-step-line {
	width: 24px;
	height: 1px;
	background: var(--kg-p-border);
}

.kg-order-panel[hidden] {
	display: none;
}

.kg-order-next {
	display: block !important;
	width: 100% !important;
	margin: 4px 0 0 !important;
	padding: 11px !important;
	border: none !important;
	border-radius: 4px !important;
	background: var(--kg-p-red) !important;
	color: #fff !important;
	font-family: inherit;
	font-weight: 600 !important;
	font-size: 14px !important;
	cursor: pointer;
	box-shadow: none !important;
}
.kg-order-next:hover:not(:disabled) {
	background: var(--kg-p-black) !important;
}
.kg-order-next:disabled {
	opacity: 0.5;
	cursor: default;
}

.kg-order-step-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
}
.kg-order-back {
	background: none !important;
	border: none !important;
	color: var(--kg-p-gray) !important;
	font-family: inherit;
	font-weight: 600 !important;
	font-size: 13px !important;
	padding: 11px 4px !important;
	cursor: pointer;
	box-shadow: none !important;
	flex-shrink: 0;
}
.kg-order-back:hover {
	color: var(--kg-p-black) !important;
}
.kg-order-step-actions .kg-order-submit {
	flex: 1;
	margin: 0;
}

.kg-order-form label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--kg-p-black);
	margin-bottom: 10px;
}
.kg-order-form input[type="text"],
.kg-order-form input[type="tel"],
.kg-order-form select {
	display: block;
	width: 100%;
	margin-top: 5px;
	padding: 9px 12px;
	border: 1px solid var(--kg-p-border);
	border-radius: 4px;
	font-size: 14px;
	font-family: inherit;
	background: #fff;
	box-sizing: border-box;
}
.kg-payment-methods {
	border: 1px solid var(--kg-p-border);
	border-radius: 4px;
	padding: 10px;
	margin-bottom: 10px;
}
.kg-payment-methods legend {
	font-size: 13px;
	font-weight: 600;
	padding: 0 6px;
}

/* Size / Pax Options — the "choose a size" radio list in both the
   per-product order popup and the global Order Now popup (built there via
   JS from each item's saved options once it's picked from the dropdown). */
.kg-option-select {
	border: 1px solid var(--kg-p-border);
	border-radius: 4px;
	padding: 4px 12px 2px;
	margin: 0 0 10px;
}
.kg-option-select legend {
	font-size: 13px;
	font-weight: 600;
	padding: 0 6px;
	color: var(--kg-p-black);
}
.kg-option-choice {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 7px 4px;
	margin: 0 !important;
	font-size: 14px;
	font-weight: 500 !important;
	color: var(--kg-p-black) !important;
	cursor: pointer;
	border-top: 1px solid var(--kg-p-border);
}
.kg-option-choice:first-of-type {
	border-top: none;
}
.kg-option-choice input[type="radio"] {
	margin: 0 10px 0 0;
	flex-shrink: 0;
}
.kg-option-choice-label {
	flex: 1;
}
.kg-option-choice-price {
	color: var(--kg-p-gold) !important;
	font-weight: 700;
	white-space: nowrap;
}

/* Side Dish Choices — a free (price-unaffected) dropdown shown under the
   size selector for any Meals item, built the same way from each item's
   saved choices once it's picked from the "Add a Menu Item" dropdown. */
.kg-side-dish-field {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--kg-p-black);
	margin: 14px 0 10px;
}
.kg-side-dish-field select {
	display: block;
	width: 100%;
	margin-top: 5px;
	padding: 9px 12px;
	border: 1px solid var(--kg-p-border) !important;
	border-radius: 4px !important;
	background: #fff !important;
	color: var(--kg-p-black) !important;
	font-family: inherit;
	font-size: 14px;
	font-weight: 500;
	box-sizing: border-box;
}

/* Delivery Date / Delivery Time — the first fields in every order form,
   side by side, followed by an inset "3D" divider line before the
   customer's own details (name, address, phone…). */
.kg-datetime-row {
	display: flex;
	gap: 14px;
}
.kg-datetime-row .kg-field {
	flex: 1;
	min-width: 0;
}
@media (max-width: 420px) {
	.kg-datetime-row {
		flex-direction: column;
		gap: 0;
	}
}

/* A thin groove made of two hairlines (dark then light), each fading out
   toward the edges via an opacity-based gradient — reads as a subtle
   inset "3D" rule rather than a flat CSS border. */
.kg-form-divider {
	height: 2px;
	margin: 0 0 12px;
	background-image:
		linear-gradient(to right, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 0.28) 20%, rgba(20, 20, 20, 0.28) 80%, rgba(20, 20, 20, 0) 100%),
		linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.9) 80%, rgba(255, 255, 255, 0) 100%);
	background-size: 100% 1px;
	background-position: top, bottom;
	background-repeat: no-repeat;
}

/* Custom date picker — a small popover calendar (no external library) */
.kg-date-picker {
	position: relative;
	margin-top: 6px;
}
/* Being a <button>, this also picks up Astra's own global button:hover
   rule (a dark fill + white text, !important) unless every property it
   touches is reset here too — same cascade issue as the calendar's nav
   arrows and day cells below, and left deliberately neutral on hover per
   feedback rather than swapping in a highlight color. */
.kg-date-input {
	display: flex !important;
	align-items: center;
	gap: 8px;
	width: 100% !important;
	padding: 10px 12px !important;
	border: 1px solid var(--kg-p-border) !important;
	border-radius: 4px !important;
	background: #fff !important;
	font-family: inherit;
	font-size: 14px !important;
	font-weight: 500 !important;
	color: var(--kg-p-black) !important;
	cursor: pointer;
	box-sizing: border-box;
	text-align: left;
	box-shadow: none !important;
}
.kg-date-input:hover,
.kg-date-input:focus {
	background: #fff !important;
	border-color: var(--kg-p-border) !important;
	color: var(--kg-p-black) !important;
	outline: none;
}
.kg-date-input .dashicons {
	color: var(--kg-p-red);
	font-size: 18px;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}
.kg-date-display.is-placeholder {
	color: var(--kg-p-gray);
	font-weight: 400;
}

.kg-date-calendar {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 10;
	width: 250px;
	max-width: 85vw;
	background: #fff;
	border: 1px solid var(--kg-p-border);
	border-radius: 8px;
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
	padding: 10px;
	box-sizing: border-box;
}
.kg-date-calendar[hidden] {
	display: none;
}

.kg-date-cal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 6px;
}
.kg-cal-title {
	font-weight: 700;
	font-size: 12px;
	color: var(--kg-p-black);
}
/* Astra applies its own default padding/min-width/border to every
   <button> site-wide (the same cascade issue documented elsewhere in this
   file for the menu tabs and header CTA) — reset those explicitly with
   !important so the calendar's nav arrows and day cells stay compact
   instead of inflating to Astra's default button size. */
.kg-cal-nav {
	background: none !important;
	border: none !important;
	min-width: 0 !important;
	width: auto !important;
	height: auto !important;
	font-size: 16px !important;
	line-height: 1 !important;
	cursor: pointer;
	color: var(--kg-p-black) !important;
	padding: 3px 8px !important;
	margin: 0 !important;
	border-radius: 4px;
	box-shadow: none !important;
}
.kg-cal-nav:hover:not(:disabled) {
	background: var(--kg-p-menu-light) !important;
	color: var(--kg-p-red) !important;
}
.kg-cal-nav:disabled {
	opacity: 0.3;
	cursor: default;
}

.kg-date-cal-weekdays {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	text-align: center;
	font-size: 10px;
	font-weight: 700;
	color: var(--kg-p-gray);
	margin-bottom: 2px;
}

/* minmax(0, 1fr) — not the bare "1fr" shorthand, which implies
   minmax(auto, 1fr) and lets a track grow to fit its content's natural
   (min-content) size. A <button> carries Astra's own padding/min-width by
   default, and without the explicit 0 floor here that pushed every column
   — and the whole grid — far wider than intended. grid-auto-rows pins the
   row height too, so the cells stay small circles instead of stretching
   to the button's default height. */
.kg-date-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	grid-auto-rows: 28px;
	gap: 2px;
}
.kg-cal-day,
.kg-cal-day-empty {
	width: 100%;
	height: 100%;
	min-width: 0;
	box-sizing: border-box;
}
.kg-cal-day {
	border: none !important;
	background: none !important;
	border-radius: 50%;
	font-size: 12px !important;
	font-family: inherit;
	color: var(--kg-p-black);
	cursor: pointer;
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	line-height: 1 !important;
}
.kg-cal-day:hover:not(:disabled) {
	background: var(--kg-p-menu-light) !important;
}
.kg-cal-day.is-today {
	font-weight: 700;
	color: var(--kg-p-red);
}
.kg-cal-day.is-selected {
	background: var(--kg-p-red) !important;
	color: #fff !important;
	font-weight: 700;
}
.kg-cal-day-disabled {
	color: #ccc !important;
	cursor: default;
}
.kg-cal-day-empty {
	cursor: default;
}
/* Cart-style order popup — an "add item" row, the running list of what's
   been added, and a total, all sitting above the customer's own details. */
.kg-cart-add-row {
	border: 1px solid var(--kg-p-border);
	border-radius: 6px;
	padding: 10px;
	margin-bottom: 10px;
}
.kg-cart-add-row label {
	margin-bottom: 0 !important;
}
.kg-cart-add-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--kg-p-black);
	margin-bottom: 5px;
}

/* Compact combobox — stands in for the (still real, just hidden) native
   <select> so the item picker isn't one long native OS list to scroll
   through. Typing in the search box narrows the list; picking a row sets
   the real select's value and fires its "change" event, so every bit of
   downstream JS (price, size options, side dish choices, cart) keeps
   working exactly as it did when the select itself was visible. */
.kg-combo-native-select {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}
.kg-combo {
	position: relative;
}
.kg-combo-trigger {
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 100% !important;
	margin: 0 !important;
	padding: 9px 12px !important;
	border: 1px solid var(--kg-p-border) !important;
	border-radius: 4px !important;
	background: #fff !important;
	color: var(--kg-p-black) !important;
	font-family: inherit;
	font-size: 14px !important;
	font-weight: 400 !important;
	text-align: left;
	line-height: 1.4 !important;
	cursor: pointer;
	box-shadow: none !important;
}
.kg-combo-trigger:hover,
.kg-combo-trigger:focus {
	border-color: var(--kg-p-red) !important;
	background: #fff !important;
	color: var(--kg-p-black) !important;
	outline: none;
}
.kg-combo-trigger-arrow {
	flex-shrink: 0;
	font-size: 11px;
	color: var(--kg-p-gray);
}
.kg-combo-panel {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	z-index: 20;
	background: #fff;
	border: 1px solid var(--kg-p-border);
	border-radius: 6px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
	padding: 8px;
}
.kg-combo-search-row {
	margin-bottom: 6px;
}
.kg-combo-search {
	display: block;
	width: 100%;
	margin: 0;
	padding: 8px 10px;
	border: 1px solid var(--kg-p-border);
	border-radius: 4px;
	font-size: 14px;
	font-family: inherit;
	background: var(--kg-p-menu-light);
	box-sizing: border-box;
}
.kg-combo-list {
	max-height: 260px;
	overflow-y: auto;
}
.kg-combo-group + .kg-combo-group {
	margin-top: 4px;
}
.kg-combo-group-label {
	padding: 8px 8px 3px;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: 0.2px;
	color: var(--kg-p-red);
}
.kg-combo-item {
	display: flex !important;
	align-items: baseline !important;
	justify-content: space-between !important;
	gap: 10px;
	width: 100% !important;
	margin: 0 !important;
	padding: 9px 8px !important;
	border: none !important;
	border-radius: 4px !important;
	background: transparent !important;
	color: var(--kg-p-black) !important;
	font-family: inherit;
	font-size: 13px !important;
	font-weight: 400 !important;
	text-align: left;
	line-height: 1.35 !important;
	cursor: pointer;
	box-shadow: none !important;
}
.kg-combo-item-name {
	flex: 1 1 auto;
}
.kg-combo-item-price {
	flex: 0 0 auto;
	font-weight: 700;
	color: var(--kg-p-red);
	white-space: nowrap;
}
.kg-combo-item:hover,
.kg-combo-item:focus {
	background: var(--kg-p-menu-light) !important;
	color: var(--kg-p-red) !important;
	outline: none;
}
.kg-combo-item:hover .kg-combo-item-price,
.kg-combo-item:focus .kg-combo-item-price {
	color: var(--kg-p-red) !important;
}
.kg-combo-empty {
	margin: 10px 8px;
	font-size: 13px;
	color: var(--kg-p-gray);
	font-style: italic;
}
.kg-cart-add-btn {
	display: block !important;
	width: 100% !important;
	margin: 8px 0 0 !important;
	padding: 8px !important;
	border: none !important;
	border-radius: 4px !important;
	background: var(--kg-p-black) !important;
	color: #fff !important;
	font-family: inherit;
	font-weight: 600 !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	cursor: pointer;
	box-shadow: none !important;
}
.kg-cart-add-btn:hover {
	background: var(--kg-p-red) !important;
	color: #fff !important;
}

.kg-cart-list {
	margin-bottom: 6px;
}
.kg-cart-empty {
	color: var(--kg-p-gray);
	font-size: 13px;
	font-style: italic;
	margin: 0 0 14px;
}
/* One line, three columns: name (truncates rather than wrapping to a
   second line), the qty stepper, then the price — never stacked. */
.kg-cart-line {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	border-bottom: 1px solid var(--kg-p-border);
	font-size: 14px;
}
.kg-cart-line-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--kg-p-black);
	font-weight: 500;
}
.kg-cart-line-option {
	color: var(--kg-p-gray);
	font-weight: 400;
	font-size: 12px;
}
.kg-cart-line-qty {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}
.kg-cart-qty-btn {
	width: 22px !important;
	height: 22px !important;
	min-width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 1px solid var(--kg-p-border) !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: var(--kg-p-black) !important;
	font-size: 13px !important;
	line-height: 1 !important;
	cursor: pointer;
	display: flex !important;
	align-items: center;
	justify-content: center;
	box-shadow: none !important;
}
.kg-cart-qty-btn:hover {
	background: var(--kg-p-menu-light) !important;
	border-color: var(--kg-p-red) !important;
	color: var(--kg-p-red) !important;
}
.kg-cart-qty-value {
	min-width: 16px;
	text-align: center;
	font-weight: 600;
	font-size: 13px;
	color: var(--kg-p-black);
}
.kg-cart-line-price {
	color: var(--kg-p-gold);
	font-weight: 700;
	white-space: nowrap;
	min-width: 66px;
	text-align: right;
}
.kg-cart-total-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 16px;
	padding: 16px 0 2px;
	margin-bottom: 4px;
	border-top: 2px solid var(--kg-p-border);
	font-weight: 700;
	font-size: 18px;
	color: var(--kg-p-black);
}
.kg-cart-total-row span:last-child {
	color: var(--kg-p-gold);
}

.kg-order-submit {
	width: 100%;
	padding: 13px;
	font-weight: 600;
}
.kg-order-submit[disabled] {
	opacity: 0.6;
	cursor: default;
}
.kg-form-error {
	color: #cf222e;
	font-size: 13px;
	margin: -6px 0 14px;
}

/* Places autocomplete dropdown should sit above the modal */
.pac-container {
	z-index: 100001;
}

/* Menu listing page — centered category tabs. Clicking a tab swaps which
   category's grid is shown instead of stacking every category on the
   page, so the menu doesn't grow taller as items are added. */
.kg-menu-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin: 0 0 32px;
}
.kg-menu-tab-btn {
	border: 2px solid var(--kg-p-dark-border);
	background: transparent;
	color: var(--kg-p-menu-text-muted) !important;
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.3px;
	padding: 12px 28px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
/* Astra's own global button:hover/:focus rule repaints background/color
   on any <button>; pin these back so hover/focus/active all look right. */
.kg-menu-tab-btn:hover,
.kg-menu-tab-btn:focus {
	background: transparent !important;
	border-color: var(--kg-p-red) !important;
	color: var(--kg-p-menu-text) !important;
	outline: none;
}
.kg-menu-tab-btn.is-active,
.kg-menu-tab-btn.is-active:hover,
.kg-menu-tab-btn.is-active:focus {
	background: var(--kg-p-red) !important;
	border-color: var(--kg-p-red) !important;
	color: #fff !important;
}
/* Lechon Package tab — a bundle/upsell category, made to stand out from
   the everyday category tabs even when it isn't the active one. */
.kg-menu-tab-btn-highlight {
	border-color: var(--kg-p-gold) !important;
	color: var(--kg-p-gold) !important;
	background: rgba(201, 162, 39, 0.1) !important;
}
.kg-menu-tab-btn-highlight:hover,
.kg-menu-tab-btn-highlight:focus {
	border-color: var(--kg-p-gold) !important;
	color: var(--kg-p-gold-light) !important;
	background: rgba(201, 162, 39, 0.18) !important;
}
.kg-menu-tab-btn-highlight.is-active,
.kg-menu-tab-btn-highlight.is-active:hover,
.kg-menu-tab-btn-highlight.is-active:focus {
	background: var(--kg-p-gold) !important;
	border-color: var(--kg-p-gold) !important;
	color: var(--kg-p-black) !important;
}
/* Sub-tabs inside a single main tab (e.g. inside "Meals": All / Pork /
   Chicken / Beef / Seafood) — smaller and quieter than the main tabs so
   the hierarchy (main category > sub-category) reads clearly at a glance. */
.kg-menu-subtabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin: 0 0 22px;
}
.kg-menu-subtab-btn {
	border: 1px solid var(--kg-p-dark-border);
	background: transparent;
	color: var(--kg-p-menu-text-muted) !important;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2px;
	padding: 6px 14px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.kg-menu-subtab-btn:hover,
.kg-menu-subtab-btn:focus {
	background: transparent !important;
	border-color: var(--kg-p-gold) !important;
	color: var(--kg-p-menu-text) !important;
	outline: none;
}
.kg-menu-subtab-btn.is-active,
.kg-menu-subtab-btn.is-active:hover,
.kg-menu-subtab-btn.is-active:focus {
	background: var(--kg-p-gold) !important;
	border-color: var(--kg-p-gold) !important;
	color: var(--kg-p-black) !important;
}
.kg-menu-subtab-panel[hidden] {
	display: none;
}

.kg-menu-tab-panel[hidden] {
	display: none;
}
.kg-menu-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
@media (max-width: 860px) {
	.kg-menu-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.kg-menu-grid {
		grid-template-columns: 1fr;
	}
}
.kg-menu-card {
	border: 1px solid var(--kg-p-dark-border);
	border-radius: 8px;
	overflow: hidden;
	text-align: center;
	background: var(--kg-p-dark-card);
}
.kg-menu-card-thumb {
	display: block;
	aspect-ratio: 1 / 1;
	background: #2a261f;
	overflow: hidden;
}
.kg-menu-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.kg-menu-card-body {
	padding: 14px 16px 16px;
}
.kg-menu-card-badge {
	display: inline-block;
	background: var(--kg-p-red);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	margin-bottom: 10px;
}
.kg-menu-card-title-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	text-align: left;
	margin: 0 0 6px;
}
.kg-menu-card h3 {
	font-size: 16px;
	margin: 0;
	text-align: left;
}
.kg-menu-card h3 a {
	color: var(--kg-p-text) !important;
	text-decoration: none !important;
}
.kg-menu-card-desc {
	font-size: 13px;
	color: var(--kg-p-text-muted) !important;
	line-height: 1.5;
	margin: 0 0 10px;
	text-align: left;
}
/* Product description written as a bullet/numbered list in the editor
   (e.g. everything included in a bilao/package) — rendered as its own
   compact list instead of being flattened into a paragraph, with
   alternating row backgrounds and a check icon per item. */
.kg-menu-card-list {
	list-style: none;
	margin: 0 0 10px;
	padding: 0;
	text-align: left;
	border-radius: 6px;
	overflow: hidden;
}
.kg-menu-card-list-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 8px;
	font-size: 12.5px;
	line-height: 1.4;
	color: var(--kg-p-text-muted) !important;
	background: rgba(255, 255, 255, 0.03);
}
.kg-menu-card-list-item:nth-child(even) {
	background: rgba(255, 255, 255, 0.07);
}
.kg-menu-card-list-icon {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	font-size: 14px;
	color: var(--kg-p-gold) !important;
}
.kg-menu-card-price {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	color: var(--kg-p-gold-light) !important;
	font-weight: 700;
	margin: 0;
	text-align: right;
	flex-shrink: 0;
	max-width: 140px;
}
.kg-menu-card-btn {
	display: block;
	margin: 0;
	padding: 6px 0;
	width: 100%;
}

/* ---------------------------------------------------------
   Homepage hero + boxed menu grid ([kg_menu_scroll])
--------------------------------------------------------- */
.kg-scroll-hero {
	position: relative;
	min-height: 70vh;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background-color: var(--kg-p-black);
	overflow: hidden;
	/* Break out of the theme's centered content column so this is edge-to-edge. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
/* Background slider: each slide is a full-bleed absolutely-positioned layer;
   JS crossfades between them by toggling the "active" class (opacity). With
   only one image (or the legacy single-image fallback) the first slide just
   stays visible and nothing rotates. */
.kg-scroll-hero-slides {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.kg-scroll-hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.kg-scroll-hero-slide.active {
	opacity: 1;
}
.kg-scroll-hero .kg-scroll-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	/* Base fallback; actual darkness is set inline from the Settings > Kuzina
	   Settings "Overlay Darkness" slider so it's editable without touching code. */
	background: rgba(10, 10, 10, 0.55);
}
.kg-scroll-hero-inner {
	position: relative;
	z-index: 2;
	text-align: center;
	color: #fff;
	padding: 40px 20px;
}
.kg-scroll-hero-logo img {
	max-width: 220px;
	height: auto;
	margin: 0 auto 20px;
	/* Rounds off the logo file's own rectangular background (if it has one
	   baked in rather than being transparent) into a soft "plate" shape
	   instead of a hard-edged box sitting on top of the hero photo, and
	   lifts it slightly off the background photo. Invisible on a fully
	   transparent logo. */
	border-radius: 18px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
/* "Force White" logo option (Settings > Kuzina Settings > Homepage Hero) —
   recolors any uploaded logo image pure white for the hero only. */
.kg-scroll-hero-logo.kg-hero-logo-white img {
	filter: brightness(0) invert(1);
}
.kg-scroll-hero-title {
	font-size: 36px;
	margin: 0 0 12px;
	color: #fff !important;
}
.kg-scroll-hero-tagline {
	color: var(--kg-p-gold-light) !important;
	font-size: 38px;
	font-weight: 600;
	letter-spacing: 0.3px;
	max-width: 900px;
	margin: 0 auto 28px;
}
.kg-scroll-hero-buttons {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 32px;
}

/* Hero entrance: tagline, then each button, sliding up one after another
   as soon as the page loads (already in view, so no scroll trigger needed). */
@keyframes kg-slide-up {
	from {
		opacity: 0;
		transform: translateY(26px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.kg-scroll-hero-tagline {
	animation: kg-slide-up 0.7s ease both;
	animation-delay: 0.15s;
}
.kg-scroll-hero-buttons .kg-hero-btn-primary {
	animation: kg-slide-up 0.7s ease both;
	animation-delay: 0.32s;
}
.kg-scroll-hero-buttons .kg-hero-btn-secondary {
	animation: kg-slide-up 0.7s ease both;
	animation-delay: 0.46s;
}
/* The primary button is sometimes a <button> now (opens the cart modal
   directly rather than linking away) instead of an <a> — !important on
   every property Astra's own global button styling might otherwise touch. */
.kg-hero-btn {
	display: inline-block !important;
	padding: 14px 32px !important;
	margin: 0 !important;
	border-radius: 4px !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	letter-spacing: 0.3px;
	cursor: pointer;
	box-shadow: none !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.kg-hero-btn-primary {
	background: var(--kg-p-red) !important;
	color: #fff !important;
	border: 2px solid var(--kg-p-red) !important;
}
.kg-hero-btn-primary:hover {
	background: var(--kg-p-gold) !important;
	border-color: var(--kg-p-gold) !important;
	color: var(--kg-p-black) !important;
}
.kg-hero-btn-secondary {
	background: transparent !important;
	color: #fff !important;
	border: 2px solid rgba(255,255,255,0.6) !important;
}
.kg-hero-btn-secondary:hover {
	background: rgba(255,255,255,0.12) !important;
	border-color: #fff;
	color: #fff !important;
}
.kg-scroll-down {
	color: #fff;
	text-decoration: none !important;
	border: 2px solid rgba(255,255,255,0.5);
	box-sizing: border-box;
	width: 46px;
	height: 46px;
	min-width: 46px;
	min-height: 46px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	animation: kg-bounce 1.8s infinite;
}
.kg-scroll-down .dashicons {
	width: 22px;
	height: 22px;
	font-size: 22px;
	line-height: 1;
}
@keyframes kg-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(8px); }
}

.kg-menu-boxes-wrap {
	width: 100vw;
	box-sizing: border-box;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background-color: var(--kg-p-menu-light);
	color: var(--kg-p-menu-text) !important;
	padding-top: 60px;
	padding-left: max(20px, calc((100vw - 1100px) / 2));
	padding-right: max(20px, calc((100vw - 1100px) / 2));
}
/* .kg-menu-page nested inside already supplies its own bottom padding; its
   own full-bleed width/margin/padding are neutralized here so it doesn't
   breakout a second time inside .kg-menu-boxes-wrap (background/text color
   now match anyway, since every plugin page uses the same light theme). */
.kg-menu-boxes-wrap .kg-menu-page {
	width: auto;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	background-color: transparent;
	color: var(--kg-p-menu-text) !important;
}
.kg-menu-page-heading,
h2.kg-menu-page-heading {
	text-align: center;
	font-size: 30px;
	margin: 0 0 36px;
	position: relative;
	padding-bottom: 14px;
	/* Explicit (not inherited) so the theme's own heading color rules can't win. */
	color: var(--kg-p-menu-text) !important;
}
.kg-menu-page-heading::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 3px;
	background: var(--kg-p-red);
}
.kg-menu-page-heading.kg-align-left {
	text-align: left;
}
.kg-menu-page-heading.kg-align-left::after {
	left: 0;
	transform: none;
}

/* ---------------------------------------------------------
   Locations page ([kg_locations])
--------------------------------------------------------- */
.kg-locations-page {
	--kg-content-width: 1100px;
}
.kg-locations-area {
	margin: 40px 0 20px;
	border-bottom: 2px solid var(--kg-p-red);
	padding-bottom: 8px;
	font-size: 20px;
	color: var(--kg-p-menu-text) !important;
}
.kg-locations-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
}
.kg-location-card {
	border: 1px solid var(--kg-p-dark-border);
	border-radius: 8px;
	overflow: hidden;
	background: var(--kg-p-dark-card);
}
.kg-location-map {
	aspect-ratio: 16 / 10;
	background: #2a261f;
}
.kg-location-map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.kg-location-body {
	padding: 18px 20px 22px;
}
.kg-location-body h4 {
	margin: 0 0 10px;
	font-size: 17px;
	color: var(--kg-p-text) !important;
}
.kg-location-body p {
	font-size: 14px;
	color: var(--kg-p-text-muted) !important;
	margin: 0 0 8px;
}
.kg-location-body .kg-menu-card-btn {
	margin-top: 12px;
	display: inline-block;
	width: auto;
	padding: 9px 22px;
}

/* ---------------------------------------------------------
   Branches band ([kg_branches]) — 4-column version of the location
   card (map + address/phone/hours + Get Directions), meant to be
   embedded on the homepage. Same cream band pattern as "Why Us"/
   "Our Story", cards stay dark for contrast.
--------------------------------------------------------- */
.kg-branches-section {
	width: 100vw;
	box-sizing: border-box;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background-color: var(--kg-p-menu-light);
	padding: 60px max(20px, calc((100vw - 1200px) / 2)) 70px;
}
.kg-branches-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	max-width: 1200px;
	margin: 0 auto;
}
@media (max-width: 980px) {
	.kg-branches-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 560px) {
	.kg-branches-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------
   Contact page ([kg_contact])
--------------------------------------------------------- */
.kg-contact-page {
	--kg-content-width: 1000px;
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 50px;
	align-items: start;
	/* The map is the first thing on this page and should sit flush against
	   the header — no gap above it — so this page alone drops the shared
	   padding-top from the base rule; padding-bottom stays inherited. */
	padding-top: 0 !important;
}
/* Full-width map, spanning both grid columns and breaking out to the
   viewport edge, placed before the info/form columns. */
.kg-locations-map-wrap {
	grid-column: 1 / -1;
	width: 100vw;
	box-sizing: border-box;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 0;
	margin-bottom: 40px;
}
.kg-locations-map-wrap iframe,
#kg-locations-map {
	display: block;
	border: 0;
}
.kg-locations-map-wrap .gm-style .gm-style-iw-c {
	color: var(--kg-p-black);
}

.kg-contact-info p {
	font-size: 15px;
	margin: 0 0 12px;
	color: var(--kg-p-menu-text-muted) !important;
}
.kg-contact-info p a {
	color: var(--kg-p-menu-text) !important;
	text-decoration: none;
}
.kg-contact-info p a:hover {
	color: var(--kg-p-red) !important;
}
.kg-contact-intro {
	font-size: 15px;
	line-height: 1.5;
	color: var(--kg-p-menu-text-muted) !important;
	margin: 0 0 16px;
}
/* Same cream tone as the page itself, so the form blends in instead of
   sitting in its own dark card — a plain warm border keeps it defined. */
.kg-contact-form {
	border: 1px solid var(--kg-p-border);
	border-radius: 8px;
	padding: 28px;
	background: var(--kg-p-menu-light);
}
.kg-contact-form label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: var(--kg-p-menu-text) !important;
	margin-bottom: 14px;
}
.kg-contact-form input,
.kg-contact-form textarea {
	display: block;
	width: 100%;
	margin-top: 6px;
	padding: 10px 12px;
	border: 1px solid var(--kg-p-border);
	border-radius: 4px;
	font-size: 14px;
	font-family: inherit;
	box-sizing: border-box;
	resize: vertical;
	background: #fff;
	color: var(--kg-p-menu-text) !important;
}
.kg-form-success {
	color: #1a7f37;
	font-size: 13px;
	margin: -6px 0 14px;
}

@media (max-width: 700px) {
	.kg-contact-page {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------
   Social icons (used on Contact page and in the footer)
--------------------------------------------------------- */
.kg-social-icons {
	display: flex;
	gap: 12px;
	margin-top: 16px;
	padding-left: 4px;
}
.kg-social-icons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--kg-p-dark-border);
	color: var(--kg-p-gold-light) !important;
	text-decoration: none;
}
.kg-social-icons a .dashicons,
.kg-social-icons a svg {
	width: 16px;
	height: 16px;
	font-size: 16px;
}
.kg-social-icons a:hover {
	background: var(--kg-p-gold);
	color: var(--kg-p-black);
	border-color: var(--kg-p-gold) !important;
}

/* ---------------------------------------------------------
   Footer shortcodes ([kg_footer_about], [kg_footer_locations], [kg_footer_contact])
   These inherit color from the Astra child theme's footer styling.
--------------------------------------------------------- */
.kg-footer-tagline {
	margin: 0 0 6px;
	line-height: 1.6;
}
.kg-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.kg-footer-list li {
	margin-bottom: 10px;
	font-size: 14px;
	line-height: 1.5;
}

/* ---------------------------------------------------------
   About Us hero ([kg_about_header])
--------------------------------------------------------- */
.kg-about-header {
	position: relative;
	width: 100vw;
	box-sizing: border-box;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-bottom: 40px;
	padding: 90px 20px;
	background-color: var(--kg-p-dark);
	background-size: cover;
	background-position: center;
	text-align: center;
}
.kg-about-overlay {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 20, 0.6);
}
.kg-about-header-inner {
	position: relative;
	z-index: 1;
	max-width: 700px;
	margin: 0 auto;
}
.kg-about-header-eyebrow {
	color: var(--kg-p-gold) !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 0 0 10px;
}
.kg-about-header-inner h1 {
	color: var(--kg-p-white) !important;
	font-size: 38px;
	margin: 0 0 14px;
}
.kg-about-header-inner p {
	color: var(--kg-p-text-muted) !important;
	font-size: 17px;
	margin: 0;
}

/* ---------------------------------------------------------
   "Our Story" section ([kg_our_story]) — timeline + photo collage.
   Full-bleed black band with gold accents, edited from the About page's
   own "Our Story" meta box.
--------------------------------------------------------- */
.kg-story-section {
	width: 100vw;
	box-sizing: border-box;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background-color: var(--kg-p-black);
	padding: 80px max(20px, calc((100vw - 1200px) / 2));
}
.kg-story-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	align-items: start;
}
.kg-story-eyebrow {
	color: var(--kg-p-gold) !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 0 0 10px;
}
.kg-story-heading {
	color: var(--kg-p-white) !important;
	font-size: 40px;
	font-weight: 800;
	line-height: 1.1;
	margin: 0 0 34px;
}
.kg-story-heading span {
	color: var(--kg-p-gold) !important;
}
.kg-timeline {
	list-style: none;
	margin: 0 0 30px;
	padding: 0 0 0 26px;
	border-left: 2px solid var(--kg-p-gold);
}
.kg-timeline-item {
	position: relative;
	margin-bottom: 30px;
}
.kg-timeline-item:last-child {
	margin-bottom: 0;
}
.kg-timeline-item::before {
	content: "";
	position: absolute;
	left: -32px;
	top: 4px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--kg-p-black);
	border: 3px solid var(--kg-p-gold);
}
.kg-timeline-year {
	display: block;
	color: var(--kg-p-gold) !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 4px;
}
.kg-timeline-title {
	color: var(--kg-p-white) !important;
	font-size: 17px;
	font-weight: 700;
	margin: 0 0 8px;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
.kg-timeline-desc {
	color: var(--kg-p-text-muted) !important;
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}
.kg-story-link {
	display: inline-block;
	color: var(--kg-p-gold) !important;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none !important;
}
.kg-story-photos {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.kg-story-photos-top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
.kg-story-photo {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	background: #2a261f;
}
.kg-story-photo-wide {
	aspect-ratio: 16 / 8;
}
.kg-story-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.kg-story-badge {
	position: absolute;
	right: 14px;
	bottom: 14px;
	border-radius: 10px;
	padding: 10px 14px;
	text-align: center;
	line-height: 1.2;
}
.kg-story-badge strong {
	display: block;
	font-size: 22px;
	font-weight: 800;
}
.kg-story-badge span {
	display: block;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	max-width: 90px;
}
.kg-story-badge-gold {
	background: var(--kg-p-gold);
	color: var(--kg-p-black);
}
.kg-story-badge-dark {
	background: var(--kg-p-black);
	color: var(--kg-p-gold);
	border: 2px solid var(--kg-p-gold);
}

@media (max-width: 860px) {
	.kg-story-grid {
		grid-template-columns: 1fr;
	}
	.kg-story-section {
		padding-top: 50px;
		padding-bottom: 50px;
	}
}

/* ---------------------------------------------------------
   "Why Us" section ([kg_why_us]) — features grid + name-meaning block.
   Light cream band (#f5f1e7) with dark text — the feature cards stay dark
   for contrast against it, same pattern used for the homepage menu cards.
--------------------------------------------------------- */
.kg-why-section {
	width: 100vw;
	box-sizing: border-box;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background-color: #f5f1e7;
	padding: 20px max(20px, calc((100vw - 1200px) / 2)) 80px;
}
.kg-why-inner {
	max-width: 1100px;
	margin: 0 auto;
}
.kg-why-header {
	text-align: center;
	max-width: 640px;
	margin: 0 auto 50px;
}
.kg-why-eyebrow {
	color: var(--kg-p-menu-text-muted) !important;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 0 0 10px;
}
.kg-why-heading {
	color: var(--kg-p-menu-text) !important;
	font-size: 34px;
	font-weight: 800;
	margin: 0 0 16px;
}
.kg-why-heading span {
	color: var(--kg-p-red) !important;
}
.kg-why-subtitle {
	color: var(--kg-p-menu-text-muted) !important;
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
}
.kg-why-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: 50px;
}
.kg-why-card {
	background: var(--kg-p-dark-card);
	border: 1px solid var(--kg-p-dark-border);
	border-radius: 10px;
	padding: 26px 24px;
}
.kg-why-icon {
	width: 46px;
	height: 46px;
	border-radius: 10px;
	background: var(--kg-p-red);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}
.kg-why-icon svg {
	width: 22px;
	height: 22px;
	color: var(--kg-p-white);
}
.kg-why-card h3 {
	color: var(--kg-p-text) !important;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	margin: 0 0 10px;
}
.kg-why-card p {
	color: var(--kg-p-text-muted) !important;
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}
.kg-why-meaning {
	text-align: center;
	max-width: 700px;
	margin: 0 auto 30px;
}
.kg-why-meaning h3 {
	color: var(--kg-p-menu-text) !important;
	font-size: 26px;
	font-weight: 800;
	margin: 0 0 16px;
}
.kg-why-meaning h3 span {
	color: var(--kg-p-red) !important;
}
.kg-why-meaning p {
	color: var(--kg-p-menu-text-muted) !important;
	font-size: 15px;
	line-height: 1.7;
	margin: 0 0 16px;
}
.kg-why-view-more {
	color: var(--kg-p-red) !important;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none !important;
}
.kg-why-footer-link {
	text-align: center;
}
.kg-why-footer-link a,
.kg-why-footer-link span {
	color: var(--kg-p-red) !important;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none !important;
}

@media (max-width: 860px) {
	.kg-why-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 560px) {
	.kg-why-grid {
		grid-template-columns: 1fr;
	}
	.kg-story-photos-top {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------
   Company Profile content — About Us page
--------------------------------------------------------- */

/* [kg_about_intro] — cream band, centered prose */
.kg-about-intro-section {
	width: 100vw;
	box-sizing: border-box;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background-color: var(--kg-p-menu-light);
	padding: 60px max(20px, calc((100vw - 1200px) / 2));
}
.kg-about-intro-inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}
.kg-about-intro-inner p {
	color: var(--kg-p-menu-text-muted) !important;
	font-size: 16px;
	line-height: 1.75;
	margin: 0 0 18px;
	text-align: left;
}

/* [kg_services] / [kg_core_values] — cream band, icon-card grid (same
   visual pattern as the Why Us cards, reused for both sections). */
.kg-services-section {
	width: 100vw;
	box-sizing: border-box;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background-color: var(--kg-p-menu-light);
	padding: 20px max(20px, calc((100vw - 1200px) / 2)) 70px;
}
.kg-services-inner {
	max-width: 1100px;
	margin: 0 auto;
}
.kg-services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.kg-service-card {
	background: var(--kg-p-dark-card);
	border: 1px solid var(--kg-p-dark-border);
	border-radius: 10px;
	padding: 26px 24px;
}
.kg-service-icon {
	width: 46px;
	height: 46px;
	border-radius: 10px;
	background: var(--kg-p-red);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 18px;
}
.kg-service-icon svg {
	width: 22px;
	height: 22px;
	color: var(--kg-p-white);
}
.kg-service-card h3 {
	color: var(--kg-p-text) !important;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.3px;
	margin: 0 0 10px;
}
.kg-service-card p {
	color: var(--kg-p-text-muted) !important;
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
}

/* [kg_what_we_serve] — dark band, pill tag cloud */
.kg-serve-section {
	width: 100vw;
	box-sizing: border-box;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background-color: var(--kg-p-black);
	padding: 60px max(20px, calc((100vw - 1000px) / 2));
}
.kg-serve-inner {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}
.kg-serve-heading {
	color: var(--kg-p-white) !important;
	font-size: 30px;
	font-weight: 800;
	margin: 0 0 30px;
}
.kg-serve-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.kg-serve-tag {
	display: inline-block;
	background: var(--kg-p-dark-card);
	border: 1px solid var(--kg-p-dark-border);
	color: var(--kg-p-text) !important;
	font-size: 13px;
	font-weight: 600;
	padding: 9px 18px;
	border-radius: 999px;
}

/* [kg_our_clients] — cream band, two-column lists */
.kg-clients-section {
	width: 100vw;
	box-sizing: border-box;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background-color: var(--kg-p-menu-light);
	padding: 60px max(20px, calc((100vw - 1000px) / 2));
}
.kg-clients-inner {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}
.kg-clients-intro {
	color: var(--kg-p-menu-text-muted) !important;
	font-size: 15px;
	margin: 0 0 36px;
}
.kg-clients-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	text-align: left;
}
.kg-clients-col h3 {
	color: var(--kg-p-menu-text) !important;
	font-size: 16px;
	font-weight: 700;
	border-bottom: 2px solid var(--kg-p-red);
	padding-bottom: 8px;
	margin: 0 0 14px;
}
.kg-clients-col ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.kg-clients-col li {
	color: var(--kg-p-menu-text-muted) !important;
	font-size: 14px;
	padding: 7px 0;
	border-bottom: 1px solid var(--kg-p-border);
}
.kg-clients-col li:last-child {
	border-bottom: 0;
}

/* [kg_why_choose_us] — dark band checklist grid */
.kg-whychoose-section {
	width: 100vw;
	box-sizing: border-box;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background-color: var(--kg-p-black);
	padding: 60px max(20px, calc((100vw - 1100px) / 2));
}
.kg-whychoose-inner {
	max-width: 1000px;
	margin: 0 auto;
}
.kg-whychoose-heading {
	color: var(--kg-p-white) !important;
	font-size: 30px;
	font-weight: 800;
	text-align: center;
	margin: 0 0 36px;
}
.kg-whychoose-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 36px;
	row-gap: 14px;
}
.kg-whychoose-grid li {
	position: relative;
	padding-left: 30px;
	color: var(--kg-p-text) !important;
	font-size: 14.5px;
	line-height: 1.5;
}
.kg-whychoose-grid li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--kg-p-gold) !important;
	font-weight: 700;
}

/* [kg_mission_vision] — dark band, two-column split */
.kg-mv-section {
	width: 100vw;
	box-sizing: border-box;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background-color: var(--kg-p-dark);
	padding: 60px max(20px, calc((100vw - 1000px) / 2));
}
.kg-mv-inner {
	max-width: 900px;
	margin: 0 auto;
}
.kg-mv-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
}
.kg-mv-card {
	background: var(--kg-p-dark-card);
	border: 1px solid var(--kg-p-dark-border);
	border-top: 3px solid var(--kg-p-gold);
	border-radius: 10px;
	padding: 30px 28px;
}
.kg-mv-card h2 {
	color: var(--kg-p-gold) !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin: 0 0 14px;
}
.kg-mv-card p {
	color: var(--kg-p-text-muted) !important;
	font-size: 15px;
	line-height: 1.7;
	margin: 0;
}

/* [kg_commitment] — dramatic closing band */
.kg-commitment-section {
	width: 100vw;
	box-sizing: border-box;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	background: linear-gradient(180deg, var(--kg-p-black) 0%, #2a1414 100%);
	padding: 70px max(20px, calc((100vw - 800px) / 2));
	text-align: center;
}
.kg-commitment-inner {
	max-width: 720px;
	margin: 0 auto;
}
.kg-commitment-text {
	color: var(--kg-p-text-muted) !important;
	font-size: 16px;
	line-height: 1.75;
	margin: 0 0 34px;
}
.kg-commitment-brand {
	color: var(--kg-p-white) !important;
	font-size: 28px;
	font-weight: 800;
	letter-spacing: 0.5px;
	margin: 0 0 10px;
}
.kg-commitment-roles {
	color: var(--kg-p-gold) !important;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.3px;
	margin: 0 0 26px;
}
.kg-commitment-quote {
	color: var(--kg-p-gold) !important;
	font-size: 19px;
	font-style: italic;
	font-weight: 700;
	margin: 0;
}

@media (max-width: 860px) {
	.kg-services-grid {
		grid-template-columns: 1fr 1fr;
	}
	.kg-whychoose-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 640px) {
	.kg-services-grid {
		grid-template-columns: 1fr;
	}
	.kg-whychoose-grid {
		grid-template-columns: 1fr;
	}
	.kg-clients-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.kg-mv-grid {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------
   Scroll reveal — every card/box grid across the site (homepage menu,
   branches, locations, services, core values, why-us cards, why-choose
   checklist, mission/vision, clients, story timeline) slides up + fades
   in once its grid scrolls into view. Boxes in the same row are staggered
   (1, 2, 3…) instead of appearing all at once — driven by nth-child
   transition-delay, toggled on by JS adding .kg-in-view to the grid.
--------------------------------------------------------- */
.kg-menu-grid .kg-menu-card,
.kg-branches-grid .kg-location-card,
.kg-locations-grid .kg-location-card,
.kg-services-grid .kg-service-card,
.kg-why-grid .kg-why-card,
.kg-whychoose-grid > li,
.kg-mv-grid .kg-mv-card,
.kg-clients-grid .kg-clients-col,
.kg-timeline .kg-timeline-item {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity 0.6s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.kg-menu-grid.kg-in-view .kg-menu-card,
.kg-branches-grid.kg-in-view .kg-location-card,
.kg-locations-grid.kg-in-view .kg-location-card,
.kg-services-grid.kg-in-view .kg-service-card,
.kg-why-grid.kg-in-view .kg-why-card,
.kg-whychoose-grid.kg-in-view > li,
.kg-mv-grid.kg-in-view .kg-mv-card,
.kg-clients-grid.kg-in-view .kg-clients-col,
.kg-timeline.kg-in-view .kg-timeline-item {
	opacity: 1;
	transform: translateY(0);
}

/* 3-column grids: stagger 1-2-3 across each row. */
.kg-menu-grid .kg-menu-card:nth-child(3n+1),
.kg-services-grid .kg-service-card:nth-child(3n+1),
.kg-why-grid .kg-why-card:nth-child(3n+1),
.kg-whychoose-grid > li:nth-child(3n+1) {
	transition-delay: 0s;
}
.kg-menu-grid .kg-menu-card:nth-child(3n+2),
.kg-services-grid .kg-service-card:nth-child(3n+2),
.kg-why-grid .kg-why-card:nth-child(3n+2),
.kg-whychoose-grid > li:nth-child(3n+2) {
	transition-delay: 0.12s;
}
.kg-menu-grid .kg-menu-card:nth-child(3n+3),
.kg-services-grid .kg-service-card:nth-child(3n+3),
.kg-why-grid .kg-why-card:nth-child(3n+3),
.kg-whychoose-grid > li:nth-child(3n+3) {
	transition-delay: 0.24s;
}

/* 4-column branches grid: stagger 1-2-3-4. */
.kg-branches-grid .kg-location-card:nth-child(4n+1) { transition-delay: 0s; }
.kg-branches-grid .kg-location-card:nth-child(4n+2) { transition-delay: 0.1s; }
.kg-branches-grid .kg-location-card:nth-child(4n+3) { transition-delay: 0.2s; }
.kg-branches-grid .kg-location-card:nth-child(4n+4) { transition-delay: 0.3s; }

/* Auto-fill locations grid (Visit Us page) — column count varies with
   viewport width, so a lighter 2-step stagger reads cleanly at any size. */
.kg-locations-grid .kg-location-card:nth-child(2n+1) { transition-delay: 0s; }
.kg-locations-grid .kg-location-card:nth-child(2n+2) { transition-delay: 0.12s; }

/* 2-column grids: stagger 1-2. */
.kg-mv-grid .kg-mv-card:nth-child(2n+1),
.kg-clients-grid .kg-clients-col:nth-child(2n+1) {
	transition-delay: 0s;
}
.kg-mv-grid .kg-mv-card:nth-child(2n+2),
.kg-clients-grid .kg-clients-col:nth-child(2n+2) {
	transition-delay: 0.15s;
}

/* Story timeline — a vertical list, not a grid, so it cascades top to
   bottom instead of across columns. */
.kg-timeline .kg-timeline-item:nth-child(1) { transition-delay: 0s; }
.kg-timeline .kg-timeline-item:nth-child(2) { transition-delay: 0.12s; }
.kg-timeline .kg-timeline-item:nth-child(3) { transition-delay: 0.24s; }
.kg-timeline .kg-timeline-item:nth-child(4) { transition-delay: 0.36s; }
.kg-timeline .kg-timeline-item:nth-child(n+5) { transition-delay: 0.48s; }