/*
 * Colours come from the theme's own custom properties, so the wizard follows
 * Hyde Farm's palette rather than carrying a second copy of it. The fallbacks
 * are only there if the wizard is ever rendered outside the theme.
 */
.hbh-wizard {
	--hbh-accent: var(--pewter-blue, #89a3b5);
	--hbh-text:   var(--grey-text, #4e4e4e);
	--hbh-line:   #e3e3e3;

	position: relative;
	margin: 0 auto;
	max-width: 1100px;
}
.hbh-wizard.is-busy { opacity: .55; pointer-events: none; }

.hbh-title { margin: 0 0 6px; font-size: 1.6rem; }
.hbh-hint { margin: 0 0 18px; color: var(--hbh-text); }

/* On the product steps a hint sits under the heading and holds the content
   away from it. The size and topic screens have no hint, so their cards came
   up against the heading with six pixels between them. Only that case needs
   the extra room, hence the adjacent sibling rather than a bigger margin on
   every heading. */
.hbh-title + .hbh-grid { margin-top: 16px; }

/* Keeps the navigation off the footer, which it was resting against: the
   wizard has no padding of its own and the buttons are its last child. */
.hbh-wizard { padding-bottom: 48px; }
.hbh-empty { padding: 40px 0; text-align: center; color: var(--hbh-text); }

/* ── Card steps (size, topic) ─────────────────────────────────
 * These render inside the shop's own ul.products, so the theme decides their
 * width and proportions. Only the button wrapper needs neutralising: without
 * this it would be painted pale-taupe like any other button on the site.
 */

/*
 * The theme lays ul.products out on a CSS grid with 1fr tracks, which always
 * fill the row: three sizes look right, but a lone card sits at the far left
 * and five topics leave two orphans on the second row.
 *
 * For the choice steps — few cards, deliberately curated — flexbox centres the
 * partial rows instead. The product steps keep the theme's grid untouched.
 */
.hbh-choices {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin-bottom: 0 !important;
	grid-template-columns: none !important;
}

.hbh-wizard .hbh-choices > li.product {
	flex: 0 1 300px;
	width: auto !important;
	max-width: 340px;
	margin: 0 !important;
	clear: none !important;
	float: none !important;
}

.hbh-wizard li.product.hbh-choice { position: relative; }

.hbh-wizard .hbh-card,
.hbh-wizard .hbh-card:hover,
.hbh-wizard .hbh-card:focus,
.hbh-wizard .hbh-card:active {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: inherit;
	box-shadow: none;
	text-decoration: none;
	text-align: inherit;
	font: inherit;
	cursor: pointer;
}

.hbh-wizard .hbh-card img {
	width: 100%;
	height: auto;
	border-radius: 0;
	transition: opacity .15s ease;
}
.hbh-wizard .hbh-card:hover img { opacity: .88; }

.hbh-wizard .hbh-card .woocommerce-loop-product__title {
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

.hbh-wizard .hbh-card:focus-visible {
	outline: 2px solid var(--hbh-accent);
	outline-offset: -2px;
}

/*
 * The selection used to be an ::after ring inset by -6px, which reached outside
 * the card and got clipped. A real border on the element itself cannot be cut
 * off — and it is transparent-to-coloured rather than absent-to-present, so
 * nothing shifts by two pixels when the customer picks a card.
 */
.hbh-wizard li.product.hbh-choice {
	border: 2px solid var(--hbh-line);
	border-radius: 10px;
	padding: 10px;
	transition: border-color .15s ease;
}
.hbh-wizard li.product.hbh-choice:hover { border-color: #c4c4c4; }
.hbh-wizard li.product.hbh-choice.is-selected { border-color: var(--hbh-accent); }

/* The card itself is rounded; its contents stay square, inset by the padding. */
.hbh-wizard .hbh-choices li.product img,
.hbh-wizard .hbh-choices li.product a,
.hbh-wizard .hbh-card,
.hbh-wizard .hbh-card img {
	border-radius: 0;
}

.hbh-dims {
	margin: 0 0 4px;
	font-size: .85rem;
	color: var(--hbh-text);
}
.hbh-contents {
	margin: 4px 0;
	padding-left: 18px;
	font-size: .84rem;
	line-height: 1.5;
	color: var(--hbh-text);
	text-align: left;
}
.hbh-contents li { margin: 1px 0; }

/* ── Product grid ─────────────────────────────────────────────
 * The products are rendered through WooCommerce's own shop loop, so the layout
 * is left to the theme. Only the wizard's own additions are styled here.
 */

.hbh-counter { margin: 0 0 14px; font-weight: 600; color: var(--hbh-text); }
.hbh-counter.is-complete { color: var(--hbh-accent); }

.hbh-grid { margin: 0 0 26px; }
.hbh-grid ul.products { margin-bottom: 0; }

.hbh-wizard li.product.hbh-product { transition: opacity .15s ease; }

/*
 * Product images always fill their card, at every width.
 *
 * :not(.hbh-choices) keeps this off the size and topic cards, which have their
 * own sizing. The rule covers the secondary image too — the theme swaps in a
 * second shot on hover, and if only the first one is stretched the card jumps
 * as the pointer crosses it.
 */
.hbh-wizard ul.products:not(.hbh-choices) li.product img,
.hbh-wizard ul.products:not(.hbh-choices) li.product .secondary-image {
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* Rounded on every corner: the theme only rounds the top, which leaves the
   bottom of the thumbnail square against the card. */
.hbh-wizard li.product img,
.hbh-wizard li.product .wc-has-gallery img,
.hbh-wizard li.product a img {
	border-radius: 8px;
	overflow: hidden;
}

.hbh-wizard li.product .woocommerce-loop-product__title {
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

.hbh-wizard li.product .price,
.hbh-wizard li.product .price .amount,
.hbh-wizard li.product .price bdi {
	color: var(--price, #c28a60);
}

.hbh-excerpt {
	margin: 2px 0 6px;
	font-size: .82rem;
	line-height: 1.45;
	color: var(--hbh-text);
}
.hbh-wizard li.product.is-disabled { opacity: .45; }
.hbh-wizard li.product.is-chosen { position: relative; }
.hbh-wizard li.product.is-chosen::after {
	content: "";
	position: absolute;
	inset: -6px;
	border: 2px solid var(--hbh-accent);
	border-radius: 8px;
	pointer-events: none;
}

/* Quantity stepper */
.hbh-ctl {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin-top: 10px;
	padding: 3px;
	border: 1px solid var(--hbh-line);
	border-radius: 999px;
}

.hbh-wizard .hbh-ctl button,
.hbh-wizard .hbh-ctl button:hover,
.hbh-wizard .hbh-ctl button:focus {
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--hbh-accent);
	font-size: 19px;
	line-height: 1;
	font-weight: 600;
	cursor: pointer;
	box-shadow: none;
}
.hbh-wizard .hbh-ctl button:hover:not(:disabled) {
	background: var(--hbh-accent);
	color: #fff;
}
.hbh-wizard .hbh-ctl button:disabled {
	opacity: .3;
	cursor: default;
	background: transparent;
	color: var(--hbh-accent);
}

.hbh-q {
	min-width: 26px;
	text-align: center;
	font-weight: 700;
	font-size: 1rem;
	color: var(--hbh-text);
	font-variant-numeric: tabular-nums;
}

.hbh-oos {
	display: block;
	padding: 8px 0;
	font-size: .8rem;
	font-weight: 600;
	color: #b32d2e;
	text-transform: uppercase;
	letter-spacing: .03em;
}

/* ── Summary ──────────────────────────────────────────────── */

.hbh-summary { width: 100%; border-collapse: collapse; margin: 0 0 26px; }
.hbh-summary td { padding: 10px 4px; border-bottom: 1px solid #ececec; }
.hbh-summary td:last-child { text-align: right; white-space: nowrap; }
.hbh-summary-fixed td { color: var(--hbh-text); }
.hbh-summary-total td {
	border-top: 2px solid var(--hbh-accent);
	border-bottom: 0;
	font-size: 1.15rem;
	font-weight: 700;
}
.hbh-tag {
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 10px;
	background: #f0f0f0;
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .04em;
}

/* ── Navigation ───────────────────────────────────────────── */

.hbh-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-top: 18px;
	border-top: 1px solid #ececec;
}
.hbh-nav-mid { margin-left: auto; margin-right: auto; }

.hbh-wizard .hbh-btn,
.hbh-wizard .hbh-btn:hover,
.hbh-wizard .hbh-btn:focus {
	padding: 12px 26px;
	border: 1px solid var(--hbh-accent);
	border-radius: 6px;
	background: var(--hbh-accent);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	box-shadow: none;
	text-decoration: none;
}
.hbh-wizard .hbh-btn:hover:not(:disabled) { filter: brightness(.92); }
.hbh-wizard .hbh-btn:disabled { opacity: .4; cursor: default; }

.hbh-wizard .hbh-btn--ghost,
.hbh-wizard .hbh-btn--ghost:hover,
.hbh-wizard .hbh-btn--ghost:focus {
	background: transparent;
	color: var(--hbh-accent);
	border: 1px solid var(--hbh-line);
}
.hbh-wizard .hbh-btn--ghost:hover:not(:disabled) {
	border-color: var(--hbh-accent);
	filter: none;
}

.hbh-error {
	margin: 0 0 14px;
	padding: 11px 14px;
	border-left: 4px solid #b32d2e;
	background: #fdf2f2;
	color: #8a2424;
}

/* ── Responsive ───────────────────────────────────────────────
 * Every breakpoint lives here rather than beside the rule it modifies: with
 * media queries scattered through the file it is far too easy to write one that
 * quietly fights an earlier one, which is exactly what happened before.
 *
 * The product steps are left alone — the theme already handles the shop grid,
 * and it handles it well.
 */

/* Tablet and below: the choice cards go full width. They carry a picture and,
   for topics, a sentence describing what is inside — two to a row leaves
   none of it readable. */
@media (max-width: 768px) {
	.hbh-choices {
		gap: 14px;
		/* The shop grid carries side margins that make sense between columns and
		   only waste width once the cards are stacked. */
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.hbh-wizard .hbh-choices > li.product {
		flex: 1 1 100%;
		max-width: none;
	}

	.hbh-wizard .hbh-card img {
		max-height: 260px;
		object-fit: cover;
	}
}

@media (max-width: 600px) {
	.hbh-title { font-size: 1.35rem; }

	/* Back and forward share a row; "Surprise me" drops below, being the one
	   action nobody needs. With `flex: 1 1 auto` the buttons are as wide as
	   their labels, and at 375px the pair came to a single pixel more than the
	   room available — so they each took a row of their own. A zero basis lets
	   them divide what there is instead, and `stretch` keeps them level when
	   the longer label wraps. */
	.hbh-nav { flex-wrap: wrap; gap: 8px; align-items: stretch; }
	.hbh-nav-mid { order: 3; flex: 1 1 100%; margin: 6px 0 0; text-align: center; }
	.hbh-wizard .hbh-btn { flex: 1 1 0; min-width: 0; padding: 12px 10px; }

	/* Thumb-sized steppers: 32px is comfortable with a mouse, tight with a thumb. */
	.hbh-wizard .hbh-ctl button { width: 38px; height: 38px; font-size: 21px; }
	.hbh-q { min-width: 30px; }

	.hbh-summary td { padding: 12px 2px; }
}

/* What a piece costs the step, on products that cost more than one place.
   Shown only where it applies: without it the plus button simply stops and
   the customer has no way of knowing why. */
.hbh-weight {
	display: inline-block;
	margin: 0 0 6px;
	padding: 2px 8px;
	border-radius: 10px;
	background: rgba(137, 163, 181, 0.16);
	color: var(--hbh-text, #4e4e4e);
	font-size: 0.8em;
}

/* The shop's own sentence, in place of the list of steps. Clamped so a longer
   one cannot push its card taller than the others beside it. */
.hbh-blurb {
	margin: 6px 0 10px;
	color: var(--hbh-text, #4e4e4e);
	font-size: 0.92em;
	line-height: 1.45;
	text-align: left;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}