/* =========================================================================
   CHOMP — Shop "start your order" chooser + reviews carousel
   ========================================================================= */

.order-choose { padding-block: var(--space-2xl) var(--space-3xl); }
.order-choose__title { font-size: var(--fs-hero); line-height: 1.03; margin: .3rem 0 .5rem; }
.order-choose__lead { margin-inline: auto; }
.order-choose .breadcrumbs { justify-content: center; }

/* --- The two choice cards ------------------------------------------------- */
.order-choose__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	max-width: 860px;
	margin: var(--space-xl) auto 0;
}
@media (min-width: 720px) { .order-choose__grid { grid-template-columns: 1fr 1fr; } }

.order-card { position: relative; }
.order-card__btn {
	position: relative;
	display: grid;
	grid-template-rows: auto 1fr;
	width: 100%;
	text-align: left;
	background: var(--chomp-surface);
	border: 2px solid var(--chomp-border);
	border-radius: var(--radius-xl);
	overflow: hidden;
	cursor: pointer;
	padding: 0;
	font: inherit;
	color: inherit;
	transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.order-card__btn:hover { border-color: var(--chomp-primary); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.order-card__btn:focus-visible { outline: 3px solid var(--chomp-focus); outline-offset: 2px; }

.order-card.is-selected .order-card__btn {
	border-color: var(--chomp-primary);
	box-shadow: 0 0 0 3px var(--chomp-primary-soft), var(--shadow-md);
}

/* selected checkmark */
.order-card__check {
	position: absolute;
	top: .8rem; right: .8rem;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 2rem; height: 2rem;
	border-radius: 50%;
	background: var(--chomp-primary);
	color: var(--chomp-ink);
	box-shadow: var(--shadow-sm);
	transform: scale(0);
	transition: transform var(--dur-mid) var(--ease-spring);
}
.order-card.is-selected .order-card__check { transform: scale(1); }

/* media */
.order-card__media {
	display: grid;
	place-items: center;
	background: #fff;
	padding: var(--space-lg);
	min-height: 210px;
}
.order-card__img { width: 100%; max-width: 260px; height: auto; max-height: 190px; object-fit: contain; }
.order-card__media--van { background: #fff; }
.order-card__van-svg { width: 100%; max-width: 300px; height: auto; }

/* body */
.order-card__body { display: flex; flex-direction: column; gap: .5rem; padding: var(--space-lg); }
.order-card__name { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); color: var(--chomp-primary-800); line-height: 1.1; }
.order-card__addr { display: flex; align-items: flex-start; gap: .45rem; color: var(--chomp-ink-2); font-size: var(--fs-sm); line-height: 1.35; }
.order-card__addr .icon { color: var(--chomp-primary-700); flex: none; margin-top: 2px; }
.order-card__fine { font-size: var(--fs-xs); }

/* the "pill" eta badge */
.pill {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	align-self: flex-start;
	padding: .35rem .75rem;
	border-radius: var(--radius-pill);
	font-size: var(--fs-xs);
	font-weight: 800;
	letter-spacing: .01em;
	line-height: 1;
}
.pill .icon { flex: none; }
.pill--mint { background: var(--chomp-primary); color: var(--chomp-ink); }

.order-card__nojs { margin-top: .75rem; }

/* confirmation line under the cards */
.order-choose__confirm {
	text-align: center;
	margin: var(--space-lg) auto 0;
	max-width: 44rem;
	color: var(--chomp-ink-2);
	font-size: var(--fs-md);
}

/* --- Reviews carousel ----------------------------------------------------- */
.order-reviews {
	max-width: 680px;
	margin: var(--space-2xl) auto 0;
	text-align: center;
}
.order-reviews__head { display: flex; flex-direction: column; align-items: center; gap: .35rem; margin-bottom: var(--space-md); }
.order-reviews__agg { display: inline-flex; align-items: center; gap: .5rem; font-size: var(--fs-sm); font-weight: 700; color: var(--chomp-ink-2); }
.order-reviews__stars { display: inline-flex; color: var(--chomp-sunny); }
.order-reviews__stars .icon { fill: var(--chomp-sunny); stroke: none; }

.reviews-carousel {
	background: var(--chomp-surface);
	border: 1px solid var(--chomp-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-sm);
	padding: var(--space-xl) var(--space-lg) var(--space-md);
}
.reviews-carousel__viewport { position: relative; }

/* Every slide sits in the same grid cell so they can cross-fade, which means the
   row is as tall as the LONGEST review and a short one leaves a pile of dead
   space under it. Two things stop that: align-items lets each slide be its own
   height instead of stretching to the row, and shop-order.js then sets the
   track's height to whichever slide is showing. The height is animated, so the
   bubble grows and shrinks with the quote rather than snapping. */
.reviews-carousel__track {
	display: grid;
	align-items: start;
	transition: height var(--dur-mid) var(--ease-out);
}
/* No JS: nothing ever advances, so the hidden slides exist only to inflate the
   row. Drop them and the bubble is exactly the height of the review on show. */
html:not(.js) .reviews-carousel__slide:not(.is-active) { display: none; }
@media (prefers-reduced-motion: reduce) {
	.reviews-carousel__track { transition: none; }
}
.reviews-carousel__slide {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .8rem;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--dur-mid) var(--ease-out);
}
.reviews-carousel__slide.is-active { opacity: 1; visibility: visible; }
.reviews-carousel__stars { display: inline-flex; color: var(--chomp-sunny); }
.reviews-carousel__stars .icon { fill: var(--chomp-sunny); stroke: none; }
.reviews-carousel__stars .icon.is-empty { fill: var(--chomp-border-2); }
.reviews-carousel__quote { font-family: var(--font-display); font-size: var(--fs-lg); line-height: 1.4; color: var(--chomp-ink); margin: 0; max-width: 34rem; }
.reviews-carousel__quote::before { content: "\201C"; }
.reviews-carousel__quote::after { content: "\201D"; }
.reviews-carousel__author { display: inline-flex; align-items: center; gap: .6rem; }
.reviews-carousel__avatar { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; color: #fff; font-weight: 800; font-size: .95rem; }
.reviews-carousel__author strong { display: block; font-size: var(--fs-sm); }
.reviews-carousel__source { display: inline-flex; align-items: center; gap: .3rem; font-size: var(--fs-xs); color: var(--chomp-muted); }
.reviews-carousel__author > span:last-child { text-align: left; }

.reviews-carousel__nav { display: flex; align-items: center; justify-content: center; gap: var(--space-md); margin-top: var(--space-md); }
.reviews-carousel__arrow {
	display: grid; place-items: center;
	width: 2.2rem; height: 2.2rem;
	border-radius: 50%;
	border: 1px solid var(--chomp-ui-border);
	background: var(--chomp-surface);
	color: var(--chomp-primary-800);
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease-out);
}
.reviews-carousel__arrow:hover { background: var(--chomp-primary-soft); }
.reviews-carousel__arrow:focus-visible { outline: 2px solid var(--chomp-focus); outline-offset: 2px; }
.reviews-carousel__dots { display: inline-flex; gap: .4rem; }
.reviews-carousel__dot {
	width: .55rem; height: .55rem; padding: 0;
	border-radius: 50%;
	border: none;
	background: var(--chomp-border-2);
	cursor: pointer;
	transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.reviews-carousel__dot.is-active { background: var(--chomp-primary); transform: scale(1.25); }
.reviews-carousel__dot:focus-visible { outline: 2px solid var(--chomp-focus); outline-offset: 2px; }

/* --- Shop grid heading (with chips) -------------------------------------- */
.chomp-shop__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); margin-bottom: var(--space-lg); }
.chomp-shop__title { margin: 0; font-size: var(--fs-2xl); }

@media (prefers-reduced-motion: reduce) {
	.order-card__btn, .order-card__check, .reviews-carousel__slide { transition: none; }
}