/**
 * MenuEngine — base public stylesheet (Minimal / structural).
 *
 * Design principle: layout only. Visual properties (color, font, size) inherit
 * from the host theme. Themes can fine-tune via CSS custom properties without
 * overriding any selectors.
 *
 * Public CSS variables (override on :root or .menuengine-archive / .menuengine-single):
 *   --menuengine-wrap-padding      Outer padding around archive/single wrap (default 5%)
 *   --menuengine-grid-columns      Number of columns at desktop width (default 3, 1-4 range)
 *   --menuengine-grid-gap          Gap between grid cells (default 1.5rem)
 *   --menuengine-grid-tablet-cols  Columns under 900px (default 2)
 *   --menuengine-grid-mobile-cols  Columns under 540px (default 1)
 *   --menuengine-card-radius       Card / image corner radius (default 8px)
 *   --menuengine-section-spacing   Vertical spacing between sections (default 1.5em)
 *   --menuengine-header-spacing    Space between site header and page title (default 40px)
 *   --menuengine-columns-gap       Gap between image column and info column on single (default 2.5rem)
 *   --menuengine-button-bg         Order button background (default transparent — inherits theme)
 *   --menuengine-button-color      Order button text color (default inherit — picks up theme text color)
 *   --menuengine-button-border     Order button border (default 2px solid currentColor)
 *   --menuengine-button-radius     Order button corner radius (default 4px)
 *   --menuengine-button-padding    Order button padding (default 0.85em 1.6em)
 *   --menuengine-stars-empty       Color of unfilled stars (default inherits text)
 *   --menuengine-stars-filled      Color of filled stars (default #f5b400 — golden)
 *
 * No selector here sets a font, color, background, or pixel size. Type and
 * color flow naturally from the theme so the plug-in matches the host site.
 */

/* -- Wrappers ---------------------------------------------------------- */

.menuengine-archive,
.menuengine-single {
	padding: var(--menuengine-wrap-padding, 5%);
	box-sizing: border-box;
}

/* -- Breadcrumbs ------------------------------------------------------- */

.menuengine-breadcrumbs ol {
	list-style: none;
	padding: 0;
	margin: 0 0 1em;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	font-size: 0.9em;
}
.menuengine-breadcrumbs li + li::before {
	content: "›";
	margin-right: 0.5em;
	opacity: 0.5;
}
.menuengine-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}
.menuengine-breadcrumbs a:hover { text-decoration: underline; }

/* -- Archive grid ------------------------------------------------------ */

.menuengine-menu-grid {
	display: grid;
	grid-template-columns: repeat(var(--menuengine-grid-columns, 3), 1fr);
	gap: var(--menuengine-grid-gap, 1.5rem);
	list-style: none;
	padding: 0;
	margin: 0;
}
@media (max-width: 900px) {
	.menuengine-menu-grid {
		grid-template-columns: repeat(var(--menuengine-grid-tablet-cols, 2), 1fr);
	}
}
@media (max-width: 540px) {
	.menuengine-menu-grid {
		grid-template-columns: repeat(var(--menuengine-grid-mobile-cols, 1), 1fr);
	}
}

.menuengine-menu-item__link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.menuengine-menu-item__image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--menuengine-card-radius, 8px);
}
.menuengine-menu-item__title {
	margin: 0.75em 0 0;
	font-size: inherit;
	font-weight: inherit;
}
.menuengine-menu-item__excerpt {
	margin: 0.4em 0 0;
	font-size: 0.95em;
	opacity: 0.8;
}
.menuengine-menu-item__price {
	margin: 0.5em 0 0;
	font-weight: 600;
}
.menuengine-menu-item__rating {
	margin: 0.4em 0 0;
	font-size: 0.9em;
	display: flex;
	align-items: center;
	gap: 0.4em;
}
.menuengine-menu-item__rating-count { opacity: 0.7; }

/* -- Page-level header spacing ---------------------------------------- */

/*
 * Whatever's at the very top of the archive header / item article gets the
 * configured gap between the site header and the page content. On the archive
 * that's always the .menuengine-archive__header. On a single item, it's
 * either the breadcrumbs nav (if breadcrumbs are on) or the columns block.
 */
.menuengine-archive__header,
.menuengine-item > :first-child {
	margin-top: var(--menuengine-header-spacing, 40px);
}

/* -- Single item ------------------------------------------------------- */

.menuengine-item__columns {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--menuengine-columns-gap, 2.5rem);
	align-items: start;
}
@media (max-width: 768px) {
	.menuengine-item__columns { grid-template-columns: 1fr; }
}

.menuengine-item__media figure { margin: 0; }
.menuengine-item__image img {
	max-width: 100%;
	height: auto;
	border-radius: var(--menuengine-card-radius, 8px);
}
.menuengine-item__back {
	display: inline-block;
	margin-top: 1em;
	color: inherit;
	text-decoration: none;
}
.menuengine-item__back a { color: inherit; text-decoration: none; }
.menuengine-item__back:hover a,
.menuengine-item__back a:hover { text-decoration: underline; }

.menuengine-item__info > * + * { margin-top: 0.75em; }

.menuengine-item__rating {
	display: flex;
	align-items: center;
	gap: 0.5em;
	font-size: 0.9em;
	margin-top: 0;
}
.menuengine-rating-count { opacity: 0.75; }

/* -- Stars display (percentage overlay for partial stars) ------------- */

.menuengine-stars-display {
	position: relative;
	display: inline-block;
	letter-spacing: 0.05em;
	line-height: 1;
}
.menuengine-stars-empty {
	color: var(--menuengine-stars-empty, currentColor);
	opacity: 0.25;
}
.menuengine-stars-filled {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	white-space: nowrap;
	color: var(--menuengine-stars-filled, #f5b400);
}

/* -- Stars input on review form (radio-stars technique) --------------- */

.menuengine-rating-input {
	border: 0;
	padding: 0;
	margin: 0 0 1.25em;
}
.menuengine-rating-input legend {
	font-weight: 600;
	margin-bottom: 0.25em;
	padding: 0;
}
.menuengine-rating-stars {
	display: inline-flex;
	flex-direction: row-reverse;
	gap: 0.15em;
	font-size: 1.5em;
}
.menuengine-rating-stars input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
.menuengine-rating-stars label {
	cursor: pointer;
	color: var(--menuengine-stars-empty, currentColor);
	opacity: 0.3;
	transition: opacity 0.1s ease, color 0.1s ease;
}
.menuengine-rating-stars label:hover,
.menuengine-rating-stars label:hover ~ label,
.menuengine-rating-stars input:checked ~ label {
	color: var(--menuengine-stars-filled, #f5b400);
	opacity: 1;
}
.menuengine-rating-stars input:focus-visible + label {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0,0,0,0);
	border: 0;
}

.menuengine-item__title  { margin: 0; font-size: inherit; font-weight: inherit; }
.menuengine-item__price  { font-weight: 600; margin: 0; font-size: 1.25em; }

.menuengine-order-button {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: var(--menuengine-button-padding, 0.85em 1.6em);
	background: var(--menuengine-button-bg, transparent);
	color: var(--menuengine-button-color, inherit);
	border: var(--menuengine-button-border, 2px solid currentColor);
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.02em;
	border-radius: var(--menuengine-button-radius, 4px);
	transition: opacity 0.15s ease, background-color 0.15s ease;
}
.menuengine-order-button:hover,
.menuengine-order-button:focus-visible {
	background: color-mix(in srgb, currentColor 8%, transparent);
	color: var(--menuengine-button-color, inherit);
	text-decoration: none;
}

.menuengine-item__review-preview {
	font-style: italic;
	opacity: 0.75;
	margin: 0;
}

.menuengine-item__description {
	margin: var(--menuengine-section-spacing, 1.5em) 0;
	line-height: 1.6;
}

/* -- Modifier groups --------------------------------------------------- */

.menuengine-item__modifiers {
	margin-top: var(--menuengine-section-spacing, 1.5em);
	padding-top: var(--menuengine-section-spacing, 1.5em);
	border-top: 1px solid;
	border-color: color-mix(in srgb, currentColor 15%, transparent);
}
.menuengine-modifier-group {
	margin-bottom: var(--menuengine-section-spacing, 1.5em);
}
.menuengine-modifier-group__name {
	margin: 0 0 0.5em;
	font-size: inherit;
}
.menuengine-modifier-options {
	list-style: none;
	padding: 0;
	margin: 0;
}
.menuengine-modifier-option {
	display: flex;
	justify-content: space-between;
	padding: 0.4em 0;
	border-bottom: 1px dashed;
	border-color: color-mix(in srgb, currentColor 15%, transparent);
}
.menuengine-modifier-option:last-child { border-bottom: 0; }
.menuengine-required {
	margin-left: 0.25em;
	font-weight: 700;
}

/* -- Related items grid (single item page) ----------------------------- */

.menuengine-item__related {
	margin-top: var(--menuengine-section-spacing, 1.5em);
	padding-top: var(--menuengine-section-spacing, 1.5em);
	border-top: 1px solid;
	border-color: color-mix(in srgb, currentColor 15%, transparent);
}

.menuengine-related__heading {
	margin: 0 0 1em;
	font-size: 1.1em;
}

/*
 * Related items use a 3-column grid at desktop (smaller than the main archive
 * grid). A separate CSS variable (--menuengine-related-columns) lets themes
 * override just this section without touching the archive column count.
 */
.menuengine-related-grid {
	display: grid;
	grid-template-columns: repeat(var(--menuengine-related-columns, 3), 1fr);
	gap: var(--menuengine-grid-gap, 1.5rem);
	list-style: none;
	padding: 0;
	margin: 0;
}
@media (max-width: 900px) {
	.menuengine-related-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 540px) {
	.menuengine-related-grid {
		grid-template-columns: repeat(var(--menuengine-grid-mobile-cols, 1), 1fr);
	}
}

/* Card box — same approach as the archive grid but slightly smaller scale. */
.menuengine-related-item {
	border: 1px solid;
	border-color: color-mix(in srgb, currentColor 15%, transparent);
	border-radius: var(--menuengine-card-radius, 8px);
	overflow: hidden;
}

.menuengine-related-item__link {
	display: block;
	color: inherit;
	text-decoration: none;
	padding: 0 0 0.75em;
}
.menuengine-related-item__link:hover,
.menuengine-related-item__link:focus-visible {
	text-decoration: none;
	opacity: 0.85;
}
.menuengine-related-item__image {
	overflow: hidden;
}
.menuengine-related-item__image img {
	display: block;
	width: 100%;
	/* Square crop so cards stay uniform when images have different ratios. */
	aspect-ratio: 1 / 1;
	object-fit: cover;
	/* No border-radius here — the parent card has overflow:hidden + radius. */
	border-radius: 0;
	height: auto;
}
.menuengine-related-item__title {
	display: block;
	margin: 0.6em 0.75em 0;
	font-size: 0.9em;
}
.menuengine-related-item__price {
	display: block;
	margin: 0.3em 0.75em 0;
	font-size: 0.85em;
	font-weight: 600;
}