/* ==========================================================================
   BLESS — raised product cards + themed order confirmation.
   Loads last (after bless-bombay.css) so it wins over the earlier flat styles.
   ========================================================================== */

/* ---------- Product card: image on top, name + price inside the same raised card ---------- */
.product-grid { gap: 26px 22px; list-style: none; padding: 0; margin-left: 0; margin-right: 0; }
.product-grid > li { display: flex; margin: 0; }
.product-card {
	display: flex; flex-direction: column; width: 100%;
	background: #fff;
	border: 1px solid rgba(201,166,107,.28);
	border-radius: 16px;
	overflow: hidden;
	color: var(--bless-charcoal);
	box-shadow: 0 1px 2px rgba(30,27,25,.05), 0 10px 24px rgba(30,27,25,.07), 0 22px 44px rgba(86,16,30,.06);
	transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.product-card:hover {
	transform: translateY(-6px);
	border-color: var(--bless-champagne);
	box-shadow: 0 2px 4px rgba(30,27,25,.06), 0 18px 38px rgba(30,27,25,.12), 0 34px 70px rgba(86,16,30,.16);
}
.product-card:focus-visible { outline: 2px solid var(--bless-burgundy); outline-offset: 3px; }
.product-card__media { margin-bottom: 0; border-radius: 0; background: var(--bless-beige); }
.product-card__media::after { /* soft gold hairline between photo and text */
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
	background: linear-gradient(90deg, transparent, var(--bless-champagne), transparent); opacity: .7;
}
.product-card__body {
	display: flex; flex-direction: column; gap: 6px; flex: 1;
	padding: 16px 18px 20px; text-align: center; background: #fff;
}
.product-card__name {
	margin: 0; font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; line-height: 1.25; color: var(--bless-charcoal);
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-card__price { margin-top: auto; font-size: .95rem; font-weight: 500; letter-spacing: .02em; color: var(--bless-burgundy); }
.product-scroller .product-card { height: 100%; }
@media (max-width: 680px) {
	.product-grid { gap: 14px 10px; }
	.product-card { border-radius: 13px; }
	.product-card__body { padding: 12px 10px 15px; }
	.product-card__name { font-size: 1rem; }
	.product-card__price { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) { .product-card, .product-card:hover { transition: none; transform: none; } }

/* ---------- Order confirmation (/order/{key}/) ---------- */
.bless-order-page .archive-banner { margin-bottom: 28px; }
.bless-order-page .archive-banner__title::after {
	content: ""; display: block; width: 64px; height: 1px; margin: 18px auto 0;
	background: linear-gradient(90deg, transparent, var(--bless-champagne), transparent);
}
.bless-order-page .archive-banner__desc { max-width: 52ch; margin: 10px auto 0; color: rgba(30,27,25,.7); }
.bo-check {
	width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--bless-burgundy); color: var(--bless-cream);
	box-shadow: 0 0 0 6px rgba(201,166,107,.28), 0 14px 30px rgba(86,16,30,.28);
}
.bo-check svg { width: 30px; height: 30px; }
.bo-check--cancel { background: #8a8078; box-shadow: 0 0 0 6px rgba(138,128,120,.2); }

.bo-card {
	background: #fff; border: 1px solid rgba(201,166,107,.28); border-radius: 16px;
	padding: 24px 26px; margin-bottom: 20px;
	box-shadow: 0 1px 2px rgba(30,27,25,.05), 0 10px 24px rgba(30,27,25,.06);
}
.bo-card h2 { margin: 0 0 14px; font-size: 1.45rem; color: var(--bless-burgundy); }
.bo-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; text-align: center; }
.bo-meta__label { display: block; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--bless-champagne); margin-bottom: 4px; font-weight: 500; }
.bo-meta__value { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 600; color: var(--bless-charcoal); }

.bo-progress { display: flex; list-style: none; padding: 0; margin: 4px 0 0; gap: 0; counter-reset: s; }
.bo-progress li {
	flex: 1; position: relative; text-align: center; padding-top: 38px; font-size: .78rem; letter-spacing: .04em; color: rgba(30,27,25,.5); counter-increment: s;
}
.bo-progress li::before {
	content: counter(s); position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1;
	width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: var(--bless-beige); color: rgba(30,27,25,.55); font-size: .8rem; font-weight: 500; border: 1px solid #ddd2c0;
}
.bo-progress li::after { content: ""; position: absolute; top: 13px; left: -50%; width: 100%; height: 2px; background: #ddd2c0; }
.bo-progress li:first-child::after { display: none; }
.bo-progress li.is-done { color: var(--bless-burgundy); }
.bo-progress li.is-done::before { background: var(--bless-burgundy); color: var(--bless-cream); border-color: var(--bless-burgundy); content: "\2713"; }
.bo-progress li.is-done::after, .bo-progress li.is-current::after { background: var(--bless-burgundy); }
.bo-progress li.is-current { color: var(--bless-burgundy); font-weight: 600; }
.bo-progress li.is-current::before { background: var(--bless-champagne); color: var(--bless-burgundy-dark); border-color: var(--bless-champagne); box-shadow: 0 0 0 5px rgba(201,166,107,.28); }

.bo-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.bo-items { width: 100%; border-collapse: collapse; }
.bo-items td { padding: 14px 0; border-bottom: 1px solid #efe7d9; vertical-align: top; }
.bo-items td:last-child { text-align: right; white-space: nowrap; font-weight: 500; padding-left: 16px; }
.bo-items .bo-item-name { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 600; }
.bo-items small { display: block; color: rgba(30,27,25,.6); font-size: .8rem; margin-top: 2px; }
.bo-items tr.bo-sum td { padding: 9px 0; border-bottom: 0; color: rgba(30,27,25,.75); }
.bo-items tr.bo-sum:first-of-type td { border-top: 1px solid #e6dcc8; padding-top: 16px; }
.bo-items tr.bo-total td { border-top: 1px solid var(--bless-champagne); padding-top: 16px; font-family: var(--font-serif); font-size: 1.4rem; color: var(--bless-burgundy); font-weight: 600; }

.bo-side .bo-card--wine { background: var(--bless-burgundy); border-color: var(--bless-burgundy-dark); color: var(--bless-cream); }
.bo-side .bo-card--wine h2 { color: #E8D3A6; }
.bo-side .bo-card--wine p { color: rgba(247,243,236,.88); }
.bo-pay-title { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; margin: 0 0 6px; }
.bo-pay-text { white-space: pre-line; margin: 0; font-size: .92rem; line-height: 1.6; }
.bo-messages { list-style: none; padding: 0; margin: 0; }
.bo-messages li { background: var(--bless-cream); border-left: 3px solid var(--bless-champagne); border-radius: 0 10px 10px 0; padding: 10px 14px; margin: 0 0 10px; font-size: .92rem; }
.bo-messages small { color: rgba(30,27,25,.55); }
.bo-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.bo-actions .btn { text-decoration: none; }
.bo-wa { background: #fff; color: var(--bless-burgundy); border: 1px solid var(--bless-champagne); }
.bo-wa:hover { background: var(--bless-cream); }

@media (max-width: 860px) {
	.bo-layout { grid-template-columns: 1fr; }
	.bo-card { padding: 20px 18px; }
	.bo-progress li { font-size: .68rem; letter-spacing: 0; padding-top: 36px; }
}

/* centre the banner's eyebrow (p has a max-width, so it needs auto margins) */
.bless-shop-shell .archive-banner > p { margin-left: auto; margin-right: auto; }
.bo-items tr.bo-total td { border-bottom: 0; }