/* =========================================================
   Our Story — Elementor rebuild (post 32287)
   Only layout helpers that Elementor's free widgets can't
   express. Colours, type and spacing live in the widgets so
   the client can edit them in the editor.
   ========================================================= */

/* Fixed header sits over the dark hero band, same as the home page. */
.pk-story-hero { padding-top: 110px !important; }
/* Centred hero copy (Our Story, Merchandise): the single 60%-wide column sits in the middle of the
   band instead of at its left edge. Add/remove the modifier in the section's CSS Classes field. */
.pk-story-hero--center > .elementor-container { justify-content: center; }

/* Wide editorial photo under the intro: keep it cinematic on every screen. */
.pk-story-wide img {
	width: 100%;
	aspect-ratio: 21 / 8;
	object-fit: cover;
	display: block;
}
@media (max-width: 767px) { .pk-story-wide img { aspect-ratio: 4 / 3; } }

/* History photo: portrait frame with an offset accent plate behind it. */
.pk-story-frame { position: relative; }
.pk-story-frame img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
	position: relative;
	z-index: 1;
}
.pk-story-frame::after {
	content: "";
	position: absolute;
	inset: 22px -22px -22px 22px;
	border: 1px solid var(--accent-tint, #D9B7A4);
	pointer-events: none;
}
@media (max-width: 767px) { .pk-story-frame::after { inset: 14px -12px -12px 14px; } }

/* Favourite picks: three equal square tiles with a soft zoom on hover. */
.pk-pick img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
}
.pk-pick:hover img { transform: scale(1.04); }
.pk-pick .elementor-widget-container { overflow: hidden; }

/* Big decorative quote mark: pull it into the text below it. */
.pk-quote-mark .elementor-heading-title { line-height: 0.6; }

/* Trustindex Google reviews widget inherits the section width. */
.pk-reviews .ti-widget { max-width: 100% !important; }

/* ---------------- Hero + "meaning" section (reference-style) ---------------- */
/* Breadcrumb links inherit the muted colour; the separator is dimmer. */
.pk-crumb a { color: inherit; text-decoration: none; }
.pk-crumb a:hover { color: #FFFFFF; }
.pk-crumb .sep { opacity: 0.45; margin: 0 6px; }

/* Eyebrow with a short leading rule, like the reference's "— THE MEANING". */
.pk-eyebrow-line .elementor-heading-title::before {
	content: "";
	display: inline-block;
	width: 28px;
	height: 1px;
	background: currentColor;
	margin-right: 12px;
	vertical-align: middle;
	opacity: 0.8;
}

/* Accent-coloured ending of a heading, e.g. "…Our Coffee Shop". */
.pk-accent { color: var(--accent, #966954); }

/* Photo card in the dark meaning section: 4:3 crop, soft shadow. */
.pk-story-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	box-shadow: 0 30px 60px -30px rgba(0,0,0,0.35);
}

/* Quote box: double rule (1px line, 3px gap, 1px line) around the centred quote.
   Padding and quote-icon colour/size live in the Elementor column/icon widgets. */
.pk-quote-box > .elementor-widget-wrap {
	border: 1px solid var(--accent, #966954);
	outline: 1px solid var(--accent, #966954);
	outline-offset: 3px;
	margin: 4px; /* keep the outer rule inside the section on narrow screens */
	text-align: center;
}

/* ---------------- History section: text left, 3-photo mosaic right ---------------- */
/* Tint-coloured ending of a heading on the dark band, e.g. "…began." */
.pk-accent-tint { color: var(--accent-tint, #D9B7A4); font-style: italic; }

/* Mosaic: one tall photo on the left, two stacked squares on the right. */
.elementor .pk-mosaic > .elementor-widget-wrap {
	display: grid; /* .elementor prefix out-specifies Elementor's own display:flex on widget-wrap */
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: 1fr;
	gap: 18px;
}
.pk-mosaic .elementor-widget { margin: 0 !important; min-width: 0; }
.pk-mosaic .elementor-widget:first-child { grid-row: 1 / 3; }
.pk-mosaic .elementor-widget-container,
.pk-mosaic figure { height: 100%; margin: 0; }
.pk-mosaic figure {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	border: 1px solid rgba(28, 35, 33, 0.1);
	box-shadow: 0 30px 60px -30px rgba(28, 35, 33, 0.45);
}
.pk-mosaic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	aspect-ratio: 1 / 1;
	transition: transform 0.7s ease;
}
.pk-mosaic .elementor-widget:first-child img { aspect-ratio: auto; }
.pk-mosaic figure:hover img { transform: scale(1.04); }
/* Soft dark fade behind the caption. */
.pk-mosaic figure::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 38%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent);
	pointer-events: none;
}
.pk-mosaic figcaption {
	position: absolute;
	right: 16px; /* bottom-right: the photos carry a watermark in the bottom-left corner */
	bottom: 14px;
	z-index: 1;
	margin: 0;
	padding: 0;
	font-family: Inter, sans-serif;
	font-size: 12px;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.85);
	text-align: right;
}

/* Two-paragraph intro: the base reset zeroes <p> margins, so space them here. */
.pk-history .elementor-widget-text-editor p + p { margin-top: 14px; }
@media (max-width: 640px) {
	.elementor .pk-mosaic > .elementor-widget-wrap { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 14px; }
	.pk-mosaic .elementor-widget:first-child { grid-row: auto; }
	/* Phones stack the three photos, so keep every one to a short landscape crop. */
	.pk-mosaic img,
	.pk-mosaic .elementor-widget:first-child img { aspect-ratio: 16 / 10; height: auto; }
}

/* Pill button on the dark band: tint→accent gradient, like the plate .btn. */
.pk-btn-pill .elementor-button {
	background: linear-gradient(135deg, #A8785F 0%, #966954 55%, #7E5745 100%);
	box-shadow: 0 14px 30px -14px rgba(150, 105, 84, 0.7);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pk-btn-pill .elementor-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 18px 34px -14px rgba(150, 105, 84, 0.9);
}

/* ---------------- Stats band under History: eyebrow, heading, 4-up card ---------------- */
/* Centred eyebrow with a short rule on both sides. */
.pk-eyebrow-both .elementor-heading-title::before,
.pk-eyebrow-both .elementor-heading-title::after {
	content: "";
	display: inline-block;
	width: 28px;
	height: 1px;
	background: currentColor;
	vertical-align: middle;
	opacity: 0.8;
}
.pk-eyebrow-both .elementor-heading-title::before { margin-right: 12px; }
.pk-eyebrow-both .elementor-heading-title::after { margin-left: 12px; }
/* Phone-only companion to .pk-eyebrow-line: on an eyebrow whose widget Mobile alignment is
   "center" (Dishes 32345 "Most Favorite Picks"), add the second rule so the centred label
   reads like .pk-eyebrow-both. Desktop/tablet keep the single left rule. */
@media (max-width: 767px) {
	.pk-eyebrow-both-mobile .elementor-heading-title::after {
		content: "";
		display: inline-block;
		width: 28px;
		height: 1px;
		background: currentColor;
		margin-left: 12px;
		vertical-align: middle;
		opacity: 0.8;
	}
}

/* The card: thin light border, soft radius, faint top-lit gradient. */
.pk-stats-card > .elementor-container {
	border: 1px solid rgba(28, 35, 33, 0.12);
	border-radius: 22px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.2));
	padding: 48px 20px;
}
/* Hairline dividers between the four stats. */
.pk-stats-card .elementor-column + .elementor-column > .elementor-widget-wrap {
	border-left: 1px solid rgba(28, 35, 33, 0.1);
}
/* Small star after the rating number. */
.pk-star { font-size: 0.55em; vertical-align: 0.35em; margin-left: 0.08em; }

@media (max-width: 767px) {
	.pk-stats-card > .elementor-container { padding: 28px 8px; }
	/* 2 x 2 on phones, with dividers redrawn for the grid. */
	.pk-stats-card .elementor-column { width: 50%; }
	.pk-stats-card .elementor-column > .elementor-widget-wrap { padding: 20px 8px; }
	.pk-stats-card .elementor-column + .elementor-column > .elementor-widget-wrap { border-left: 0; }
	.pk-stats-card .elementor-column:nth-child(even) > .elementor-widget-wrap { border-left: 1px solid rgba(28, 35, 33, 0.1); }
	.pk-stats-card .elementor-column:nth-child(n+3) > .elementor-widget-wrap { border-top: 1px solid rgba(28, 35, 33, 0.1); }
}

/* ---------------- "What People Think": rating summary + editorial review cards ---------------- */
/* Rating summary: big number, stars, count. */
.pk-score { display: flex; align-items: center; justify-content: center; gap: 18px; } /* sits under a centred head block */
.pk-score-num { font-family: Fraunces, serif; font-size: 64px; line-height: 1; color: #1C2321; letter-spacing: -0.03em; }
.pk-score-side { display: flex; flex-direction: column; gap: 4px; }
.pk-score-label { font-family: Inter, sans-serif; font-size: 13px; color: #6B6F6C; letter-spacing: 0.02em; }
.pk-stars { color: #F4B400; font-size: 18px; letter-spacing: 0.12em; line-height: 1; }

/* The card itself. */
.pk-review {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: none;
	width: 340px;
	padding: 34px 32px 30px;
	background: #FFFFFF;
	border: 1px solid rgba(28, 35, 33, 0.14);
	border-radius: 18px;
	box-shadow: 0 24px 50px -30px rgba(28, 35, 33, 0.35), 0 1px 3px rgba(28, 35, 33, 0.05); /* section is white too, so give the cards a little lift */
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media (hover: hover) {
	.pk-review:hover { transform: translateY(-4px); box-shadow: 0 30px 55px -32px rgba(28, 35, 33, 0.5); }
}
/* Big faint quote mark tucked into the top-right corner. */
.pk-review::before {
	content: "\201D";
	position: absolute;
	top: -10px;
	right: 22px;
	font-family: Fraunces, serif;
	font-size: 150px;
	line-height: 1;
	color: var(--accent-tint, #D9B7A4);
	opacity: 0.35;
	pointer-events: none;
}
.pk-review .pk-stars { font-size: 15px; margin-bottom: 16px; }
.pk-review-text {
	font-family: Fraunces, serif;
	font-style: italic;
	font-size: 18px;
	line-height: 1.55;
	color: #1C2321;
	margin: 0 0 22px;
	flex: 1 1 auto;
}
.pk-review-who { display: flex; align-items: center; gap: 12px; font-family: Inter, sans-serif; line-height: 1.3; }
.pk-review-who strong { font-size: 14px; font-weight: 600; color: #1C2321; }
.pk-review-who small { font-size: 12px; color: #6B6F6C; }
.pk-avatar {
	flex: none;
	width: 40px; height: 40px;
	border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: var(--accent-tint, #D9B7A4);
	color: #1C2321;
	font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
}
@media (max-width: 767px) {
	.pk-score-num { font-size: 52px; }
}

/* Auto-scrolling carousel: a track of cards slides continuously inside the column,
   duplicated once by assets/js/our-story.js so the loop is seamless. Pauses on hover. */
.pk-voices-carousel > .elementor-widget-wrap { overflow: hidden; }
.pk-marquee {
	position: relative;
	overflow: hidden;
	padding: 12px 0 28px; /* room for the hover lift and the card shadow */
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}
.pk-track {
	display: flex;
	align-items: stretch;
	gap: 18px;
	width: max-content;
	animation: pk-marquee var(--pk-marquee-duration, 45s) linear infinite;
}
.pk-marquee:hover .pk-track { animation-play-state: paused; }
@keyframes pk-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-50% - 9px)); } /* half the doubled track, plus half a gap */
}
@media (prefers-reduced-motion: reduce) {
	.pk-track { animation: none; }
	.pk-marquee { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
}
/* Phones: no auto-marquee. The row is a native horizontal scroller with snap points (swipe to
   browse), the cards are smaller, and the clones our-story.js appends for the seamless loop are
   hidden so one swipe runs through the real reviews once. The scroller bleeds to both screen edges
   (the column is centred on phones, so 50% - 50vw is exactly the section gutter) while its padding
   keeps the first card lined up with the text above; scroll-padding mirrors the section's 20px
   phone gutter so snapped cards land there too. */
@media (max-width: 767px) {
	.pk-voices { overflow-x: clip; } /* 100vw includes a classic scrollbar in narrow desktop windows; never widen the page */
	.pk-voices-carousel > .elementor-widget-wrap { overflow: visible; }
	.pk-marquee {
		margin: 0 calc(50% - 50vw);
		padding: 8px calc(50vw - 50%) 24px;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 20px;
		scrollbar-width: none;
		-webkit-mask-image: none;
		mask-image: none;
	}
	.pk-marquee::-webkit-scrollbar { display: none; }
	.pk-track {
		align-items: flex-start; /* each card is as tall as its own review; short reviews stop looking like empty boxes */
		gap: 12px;
		animation: none;
	}
	.pk-track > [aria-hidden="true"] { display: none; }
	.pk-review {
		width: 250px;
		padding: 20px 18px 18px;
		border-radius: 14px;
		scroll-snap-align: start;
	}
	.pk-review::before { font-size: 110px; top: -8px; right: 16px; }
	.pk-review .pk-stars { font-size: 13px; margin-bottom: 10px; }
	.pk-review-text { font-size: 15px; line-height: 1.5; margin: 0 0 16px; }
	.pk-review-who { gap: 10px; }
	.pk-review-who strong { font-size: 13px; }
	.pk-review-who small { font-size: 11px; }
	.pk-avatar { width: 34px; height: 34px; font-size: 12px; }
}

/* ---------------- Most Favorite Picks: bento grid of dish cards on the dark band ---------------- */
/* Phone alignment of the .pk-picks-sub subtitle comes from the widget's Mobile alignment control (centred on Dishes 32345), not from CSS. */
.pk-bento {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: 280px;
	gap: 20px;
}
.pk-dish {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: #2A3230;
	box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.7);
	text-decoration: none;
	color: #FFFFFF;
	isolation: isolate;
}
.pk-dish.span-5 { grid-column: span 5; }
.pk-dish.span-6 { grid-column: span 6; }
.pk-dish.span-7 { grid-column: span 7; }
.pk-dish img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.8s ease;
}
.pk-dish:hover img { transform: scale(1.05); }
/* Dark fade so the caption reads on any photo. */
.pk-dish::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(to top, rgba(28, 35, 33, 0.92) 0%, rgba(28, 35, 33, 0.35) 45%, rgba(28, 35, 33, 0.05) 100%);
	pointer-events: none;
}
.pk-dish-tag {
	position: absolute; top: 16px; left: 16px; z-index: 2;
	padding: 7px 12px;
	border-radius: 999px;
	background: rgba(28, 35, 33, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	font-family: Inter, sans-serif;
	font-size: 10.5px; font-weight: 600;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
}
.pk-dish-body {
	position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 2;
	display: flex; flex-direction: column; gap: 6px;
}
.pk-dish-name { font-family: Fraunces, serif; font-size: 24px; line-height: 1.2; letter-spacing: -0.01em; }
.pk-dish-desc { font-family: Inter, sans-serif; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.75); max-width: 46ch; }
@media (max-width: 1024px) {
	.pk-dish.span-5, .pk-dish.span-6, .pk-dish.span-7 { grid-column: span 6; }
}
@media (max-width: 767px) {
	.pk-bento { grid-auto-rows: 240px; gap: 14px; }
	.pk-dish.span-5, .pk-dish.span-6, .pk-dish.span-7 { grid-column: span 12; }
	.pk-dish-body { left: 16px; right: 16px; bottom: 16px; }
	.pk-dish-name { font-size: 21px; }
}

/* ---------------- CTA band (copied from the home page's "Drop By Anytime") ---------------- */
/* Same hover lift/shadow as the home .btn on the plate theme. */
.pk-cta-btn .elementor-button { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.pk-cta-btn .elementor-button:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -14px var(--accent, #966954); }
/* iOS Safari ignores background-attachment: fixed; fall back to a static cover there, as on home. */
@supports (-webkit-touch-callout: none) { .pk-cta { background-attachment: scroll !important; } }

/* ---------------- Most Favorite Picks, native-widget version (client-editable) ----------------
 * Each card is an Elementor column (.pk-dish-card) holding an Image widget, a tag Heading,
 * a name Heading and a Text Editor. This CSS turns that into the same bento card as .pk-dish:
 * photo filling the card, dark fade, pill tag top-left, caption bottom-left, zoom on hover.
 * Rows are inner sections (.pk-picks-row) with a 20px gutter.
 */
.pk-picks--light .pk-accent-tint { color: #966954; }
.pk-picks-row > .elementor-container { max-width: none; width: calc(100% + 20px); margin: 0 -10px; }
.pk-picks-row + .pk-picks-row { margin-top: 20px; }
.pk-picks-row > .elementor-container > .pk-dish-card { padding: 0 10px; }
.pk-dish-card > .elementor-widget-wrap {
	position: relative;
	min-height: 280px;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid rgba(28, 35, 33, 0.08);
	background: #2A3230;
	box-shadow: 0 24px 48px -32px rgba(28, 35, 33, 0.35);
	isolation: isolate;
	align-content: flex-end;
}
/* Elementor's "no gap" column rule (.elementor-column-gap-no > ... > .elementor-element-populated) zeroes
 * padding at higher specificity, so the caption inset needs to outrank it. */
.pk-picks .pk-picks-row.elementor-column-gap-no > .elementor-container > .pk-dish-card > .elementor-widget-wrap.elementor-element-populated,
.pk-picks .pk-picks-row > .elementor-container > .pk-dish-card > .elementor-widget-wrap.elementor-element-populated { padding: 20px 22px; }
.pk-picks:not(.pk-picks--light) .pk-dish-card > .elementor-widget-wrap {
	border-color: rgba(255, 255, 255, 0.12);
	box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.7);
}
/* Dark fade so the caption reads on any photo. */
.pk-dish-card > .elementor-widget-wrap::after {
	content: "";
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(to top, rgba(28, 35, 33, 0.92) 0%, rgba(28, 35, 33, 0.35) 45%, rgba(28, 35, 33, 0.05) 100%);
	pointer-events: none;
}
.pk-dish-card .elementor-widget { position: relative; z-index: 2; margin-bottom: 0; }
.pk-dish-card .pk-dish-card__img { position: absolute; inset: 0; z-index: 0; }
.pk-dish-card .pk-dish-card__img .elementor-widget-container,
.pk-dish-card .pk-dish-card__img a,
.pk-dish-card .pk-dish-card__img img { display: block; width: 100%; height: 100%; }
.pk-dish-card .pk-dish-card__img img { object-fit: cover; border-radius: 0; transition: transform 0.8s ease; }
.pk-dish-card:hover .pk-dish-card__img img { transform: scale(1.05); }
.pk-dish-card .pk-dish-card__tag { position: absolute; top: 16px; left: 16px; width: auto; }
.pk-picks .pk-dish-card .pk-dish-card__tag .elementor-heading-title {
	display: inline-block;
	padding: 7px 12px;
	border-radius: 999px;
	background: rgba(28, 35, 33, 0.55);
	border: 1px solid rgba(255, 255, 255, 0.18);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	font-family: Inter, sans-serif;
	font-size: 10.5px; font-weight: 600; line-height: 1.2;
	letter-spacing: 0.14em; text-transform: uppercase;
	color: rgba(255, 255, 255, 0.9);
}
.pk-picks .pk-dish-card .pk-dish-card__name .elementor-heading-title {
	font-family: Fraunces, serif; font-size: 24px; font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; color: #FFFFFF; margin: 0;
}
.pk-picks .pk-dish-card .pk-dish-card__desc { margin-top: 6px; }
.pk-picks .pk-dish-card .pk-dish-card__desc,
.pk-picks .pk-dish-card .pk-dish-card__desc p {
	font-family: Inter, sans-serif; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.75); max-width: 46ch; margin: 0;
}
@media (max-width: 1024px) {
	.pk-picks-row > .elementor-container > .pk-dish-card { width: 50%; }
}
@media (max-width: 767px) {
	.pk-picks-row > .elementor-container { width: 100%; margin: 0; }
	.pk-picks-row > .elementor-container > .pk-dish-card { width: 100%; padding: 0; }
	.pk-picks-row > .elementor-container > .pk-dish-card + .pk-dish-card { margin-top: 14px; }
	.pk-picks-row + .pk-picks-row { margin-top: 14px; }
	.pk-dish-card > .elementor-widget-wrap { min-height: 240px; }
	.pk-picks .pk-picks-row.elementor-column-gap-no > .elementor-container > .pk-dish-card > .elementor-widget-wrap.elementor-element-populated,
	.pk-picks .pk-picks-row > .elementor-container > .pk-dish-card > .elementor-widget-wrap.elementor-element-populated { padding: 16px; }
	.pk-picks .pk-dish-card .pk-dish-card__name .elementor-heading-title { font-size: 21px; }
}

/* ---------------- Exclusive Dishes menu, native-widget version (client-editable) ----------------
 * Each dish is an Elementor column (.pk-menu-item) holding an Icon widget, a name Heading,
 * a price Heading and a Text Editor. Rows are two-column inner sections (.pk-menu-row).
 * The group separator is Elementor's Divider widget (.pk-menu-sep).
 */
.pk-menu-row > .elementor-container > .pk-menu-item:first-child { padding-right: 40px; }
.pk-menu-row > .elementor-container > .pk-menu-item:last-child:not(:first-child) { padding-left: 40px; }
/* Kit caps boxed containers at 1140px (0,3,0); rows must fill the outer column. */
.elementor .pk-menu-section .pk-menu-row.elementor-section-boxed > .elementor-container { max-width: none; }
.pk-menu-row--single > .elementor-container > .pk-menu-item { width: 50%; }
.elementor .pk-menu-section .pk-menu-item > .elementor-widget-wrap.elementor-element-populated {
	display: grid;
	grid-template-columns: 64px 1fr auto;
	grid-template-rows: auto auto;
	column-gap: 22px;
	align-items: start;
	align-content: start;
	padding: 32px 0;
	border-bottom: 1px solid #E4DED4;
}
.elementor .pk-menu-section .pk-menu-row--first > .elementor-container > .pk-menu-item > .elementor-widget-wrap.elementor-element-populated { padding-top: 0; }
.elementor .pk-menu-section .pk-menu-row--last  > .elementor-container > .pk-menu-item > .elementor-widget-wrap.elementor-element-populated { border-bottom: 0; padding-bottom: 0; }
.pk-menu-item .elementor-widget { margin-bottom: 0; width: auto; }
.pk-menu-item .pk-menu-item__icon { grid-column: 1; grid-row: 1 / span 2; }
.pk-menu-item .pk-menu-item__icon .elementor-icon-wrapper { text-align: left; }
.pk-menu-item .pk-menu-item__icon .elementor-icon {
	width: 64px; height: 64px; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background-color 0.25s, color 0.25s;
}
.pk-menu-item .pk-menu-item__icon .elementor-icon { font-size: 30px; }
.pk-menu-item .pk-menu-item__icon .elementor-icon svg { width: 30px; height: 30px; transition: fill 0.25s; }
/* Whole-item hover (not just the icon); out-specifies Elementor's per-widget colour rules. */
.pk-menu-section .pk-menu-item:hover .pk-menu-item__icon.elementor-view-stacked .elementor-icon { background-color: #966954; color: #FFFFFF; }
.pk-menu-section .pk-menu-item:hover .pk-menu-item__icon.elementor-view-stacked .elementor-icon svg { fill: #FFFFFF; }
.pk-menu-item .pk-menu-item__name { grid-column: 2; grid-row: 1; min-width: 0; margin-top: 6px; }
.pk-menu-item .pk-menu-item__name .elementor-widget-container { display: flex; align-items: baseline; gap: 12px; }
.pk-menu-section .pk-menu-item .pk-menu-item__name .elementor-heading-title {
	font-family: Fraunces, serif; font-size: 25px; font-weight: 400; line-height: 1.2; letter-spacing: -0.01em; color: #1C2321; margin: 0; flex: 0 1 auto;
}
/* Dotted leader between the name and the price. */
.pk-menu-item .pk-menu-item__name .elementor-widget-container::after {
	content: ""; flex: 1 1 24px; min-width: 24px; border-bottom: 1px dotted #B8AC9B; transform: translateY(-6px);
}
.pk-menu-item .pk-menu-item__price { grid-column: 3; grid-row: 1; margin-top: 6px; }
.pk-menu-section .pk-menu-item .pk-menu-item__price .elementor-heading-title {
	font-family: Fraunces, serif; font-size: 21px; font-weight: 400; line-height: 1.2; color: #966954; white-space: nowrap; margin: 0;
}
.pk-menu-item .pk-menu-item__desc { grid-column: 2 / span 2; grid-row: 2; margin-top: 8px; }
.pk-menu-section .pk-menu-item .pk-menu-item__desc,
.pk-menu-section .pk-menu-item .pk-menu-item__desc p {
	font-family: Inter, sans-serif; font-size: 14.5px; line-height: 1.7; color: #5B5F5D; margin: 0;
}
/* Group separator: accent line with a small diamond in the middle. */
.pk-menu-sep .elementor-divider__element { line-height: 0; }
.pk-menu-sep .elementor-icon { display: inline-block; transform: rotate(45deg); }
@media (max-width: 1024px) {
	.pk-menu-row > .elementor-container > .pk-menu-item:first-child { padding-right: 22px; }
	.pk-menu-row > .elementor-container > .pk-menu-item:last-child:not(:first-child) { padding-left: 22px; }
}
@media (max-width: 767px) {
	/* One item per row, flush left and right. The :first-child / :last-child selectors repeat the
	   desktop/tablet gutter rules above at equal specificity so this later reset actually wins;
	   the plain selector alone (0,3,0) lost to them and left alternate rows indented 22px. */
	.pk-menu-row > .elementor-container > .pk-menu-item,
	.pk-menu-row > .elementor-container > .pk-menu-item:first-child,
	.pk-menu-row > .elementor-container > .pk-menu-item:last-child:not(:first-child),
	.pk-menu-row--single > .elementor-container > .pk-menu-item { width: 100%; padding-left: 0; padding-right: 0; }
	.elementor .pk-menu-section .pk-menu-item > .elementor-widget-wrap.elementor-element-populated { grid-template-columns: 52px 1fr auto; column-gap: 16px; padding: 24px 0; border-bottom: 1px solid #E4DED4; }
	.elementor .pk-menu-section .pk-menu-row--first > .elementor-container > .pk-menu-item > .elementor-widget-wrap.elementor-element-populated { padding-top: 24px; }
	.elementor .pk-menu-section .pk-menu-row--first > .elementor-container > .pk-menu-item:first-child > .elementor-widget-wrap.elementor-element-populated { padding-top: 0; }
	.elementor .pk-menu-section .pk-menu-row--last  > .elementor-container > .pk-menu-item > .elementor-widget-wrap.elementor-element-populated { border-bottom: 1px solid #E4DED4; padding-bottom: 24px; }
	.elementor .pk-menu-section .pk-menu-row--last  > .elementor-container > .pk-menu-item:last-child > .elementor-widget-wrap.elementor-element-populated { border-bottom: 0; padding-bottom: 0; }
	.pk-menu-item .pk-menu-item__icon .elementor-icon { width: 52px; height: 52px; font-size: 24px; }
	.pk-menu-item .pk-menu-item__icon .elementor-icon svg { width: 24px; height: 24px; }
	.pk-menu-item .pk-menu-item__name { margin-top: 2px; }
	.pk-menu-item .pk-menu-item__price { margin-top: 2px; }
	.pk-menu-section .pk-menu-item .pk-menu-item__name .elementor-heading-title { font-size: 22px; }
	.pk-menu-section .pk-menu-item .pk-menu-item__price .elementor-heading-title { font-size: 19px; }
}