/**
 * WooCommerce: product cards, badges, ratings, empty states, thank-you page.
 *
 * Loaded on every shop-context page. Archive-only layout lives in shop.css.
 */

.sunny-woo {
	display: contents;
}

/* ---------------------------------------------------------------------------
 * Product grid
 * ------------------------------------------------------------------------ */

/*
 * Grid: minimum 230px cards, collapsing one column at a time as the viewport —
 * or the main panel inside it — shrinks. The auto-fill minmax lets the
 * footer and other pages keep the same flow; on shop specifically the main
 * panel is the smallest column in the layout, so it drives column count.
 * 4 columns is the desktop default the Customizer sets, but the page is
 * usually narrower than that once the filter rail and container padding
 * are paid for.
 */
ul.products {
	display: grid;
	gap: var(--rhythm-grid-gap);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--rhythm-card-min)), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Cap at three columns on the shop, even when the viewport is wide enough
 * for four. The reference design shows three cards per row across desktop
 * breakpoints — wider viewports get bigger cards, not more of them.
 */
@media (min-width: 1100px) {
	.sunny-shop .sunny-shop__main ul.products {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------------------
 * Product card
 * ------------------------------------------------------------------------ */

.sunny-product-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/*
 * Cards on the shop have no chrome — they sit directly on the page background,
 * like the reference design shows. The shared .sunny-card class is still
 * applied (it carries padding, radius for other places that use it as a
 * visual primitive), but here its surface, border and shadow are zeroed.
 */
.sunny-product-card.sunny-card,
ul.products .sunny-product-card {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.sunny-product-card__link {
	display: flex;
	flex: 1;
	flex-direction: column;
	color: inherit;
}

.sunny-product-card__link:hover {
	color: inherit;
}

.sunny-product-card__media {
	border-radius: 0;
}

.sunny-product-card__image {
	transition: transform var(--duration-slow) var(--ease-standard);
}

.sunny-product-card:hover .sunny-product-card__image {
	transform: scale(1.04);
}

.sunny-product-card__badge {
	position: absolute;
	top: var(--space-3);
	left: var(--space-3);
	z-index: 1;
}

.sunny-product-card__stock {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(26, 23, 19, 0.45);
	color: var(--neutral-0);
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--fs-body-sm);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
}

.sunny-product-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-5) var(--space-5);
}

.sunny-product-card__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--fs-body-md);
	line-height: var(--lh-snug);
	letter-spacing: 0;
	color: var(--fg-primary);
}

.sunny-product-card__price {
	margin-top: auto;
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	font-size: var(--fs-heading-sm);
	color: var(--fg-primary);
}

/* WooCommerce wraps the old price in <del> and the new one in <ins>. */
.sunny-product-card__price del,
.woocommerce-Price-amount ~ del {
	margin-right: var(--space-2);
	color: var(--fg-muted);
	font-size: var(--fs-body-md);
	font-weight: var(--fw-semibold);
}

.sunny-product-card__price ins {
	text-decoration: none;
	color: var(--surface-accent);
}

.sunny-product-card__cart {
	margin: 0 var(--space-5) var(--space-5);
}

/* ---------------------------------------------------------------------------
 * Badge
 * ------------------------------------------------------------------------ */

.sunny-badge {
	display: inline-flex;
	align-items: center;
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	background: var(--surface-inverse);
	color: var(--neutral-0);
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--fs-caption);
	letter-spacing: 0.02em;
	line-height: 1.6;
}

.sunny-badge--brand {
	background: var(--surface-brand);
	color: var(--fg-on-brand);
}

.sunny-badge--accent {
	background: var(--surface-accent);
	color: var(--fg-on-accent);
}

.sunny-badge--neutral {
	background: var(--neutral-0);
	color: var(--fg-primary);
	box-shadow: var(--shadow-xs);
}

/* ---------------------------------------------------------------------------
 * Rating
 * ------------------------------------------------------------------------ */

.sunny-rating {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--fs-body-sm);
	color: var(--fg-muted);
}

.sunny-rating__stars {
	display: inline-flex;
	gap: 1px;
	color: var(--border-strong);
}

.sunny-rating__star.is-filled {
	color: var(--color-warning);
}

.sunny-rating__star.is-filled .sunny-icon {
	fill: currentColor;
}

/* ---------------------------------------------------------------------------
 * Empty state
 * ------------------------------------------------------------------------ */

.sunny-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-16) var(--space-6);
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius-lg);
	text-align: center;
}

.sunny-empty__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var(--radius-pill);
	background: var(--surface-sunken);
	color: var(--fg-muted);
}

.sunny-empty__title {
	margin: 0;
	font-size: var(--fs-heading-sm);
	font-weight: var(--fw-extrabold);
}

.sunny-empty__text {
	max-width: 40ch;
	margin: 0;
	color: var(--fg-secondary);
}

/* ---------------------------------------------------------------------------
 * Cart, checkout, account shell
 * ------------------------------------------------------------------------ */

.woocommerce-cart .sunny-woo,
.woocommerce-checkout .sunny-woo,
.woocommerce-account .sunny-woo {
	display: block;
	max-width: var(--container-max);
	margin-inline: auto;
	padding: var(--rhythm-section-y-tight) var(--container-pad);
}

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-account .entry-title {
	margin-bottom: var(--space-8);
	font-size: var(--fs-display-md);
}

/* --- Step indicator --- */

.sunny-steps {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
	margin: 0 0 var(--space-8);
	padding: 0;
	list-style: none;
}

.sunny-steps__step {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--fg-muted);
	font-size: var(--fs-body-sm);
}

.sunny-steps__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-pill);
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--fs-caption);
}

.sunny-steps__step.is-current {
	color: var(--fg-primary);
	font-weight: var(--fw-semibold);
}

.sunny-steps__step.is-current .sunny-steps__num {
	border-color: transparent;
	background: var(--surface-brand);
	color: var(--fg-on-brand);
}

.sunny-steps__step.is-done .sunny-steps__num {
	border-color: transparent;
	background: var(--brand-50);
	color: var(--brand-700);
}

/* --- Free shipping progress --- */

.sunny-freeship {
	margin-bottom: var(--space-6);
	padding: var(--space-4) var(--space-5);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	background: var(--surface-card);
}

.sunny-freeship__message {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-3);
	font-size: var(--fs-body-md);
}

.sunny-freeship__message .sunny-icon {
	color: var(--surface-brand);
}

.sunny-freeship__track {
	height: 8px;
	border-radius: var(--radius-pill);
	background: var(--surface-sunken);
	overflow: hidden;
}

.sunny-freeship__fill {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: var(--surface-brand);
	transition: width var(--duration-slow) var(--ease-out);
}

.sunny-freeship.is-reached .sunny-freeship__fill {
	background: var(--color-success);
}

/* --- Cart and checkout tables --- */

.woocommerce table.shop_table {
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--surface-card);
}

.woocommerce table.shop_table th,
.woocommerce table.shop_table td {
	padding: var(--space-4) var(--space-5);
	border-bottom: 1px solid var(--border-default);
	text-align: left;
	vertical-align: middle;
}

.woocommerce table.shop_table th {
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--fs-caption);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--fg-muted);
	background: var(--surface-sunken);
}

.woocommerce table.shop_table tr:last-child td {
	border-bottom: 0;
}

.woocommerce table.cart img {
	width: 104px;
	border-radius: var(--radius-md);
}

.cart_totals,
.woocommerce-checkout-review-order {
	margin-top: var(--space-8);
}

/* ---------------------------------------------------------------------------
 * Cart layout — Cart.dc.html
 * ------------------------------------------------------------------------ */

.woocommerce-cart .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
	gap: var(--space-6) var(--space-10);
	align-items: start;
}

.woocommerce-cart .woocommerce > .sunny-steps,
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper,
.woocommerce-cart .woocommerce > .sunny-recently-viewed,
.woocommerce-cart .woocommerce > .woocommerce-message,
.woocommerce-cart .woocommerce > .woocommerce-error,
.woocommerce-cart .woocommerce > .woocommerce-info {
	grid-column: 1 / -1;
}

.woocommerce-cart .woocommerce-cart-form {
	grid-column: 1;
	min-width: 0;
}

.woocommerce-cart .cart-collaterals {
	grid-column: 2;
	min-width: 0;
}

.woocommerce-cart .cart-collaterals .cart_totals {
	position: sticky;
	top: var(--space-6);
	float: none;
	width: auto;
	margin: 0;
	padding: 10px;
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	background: var(--surface-card);
}

.woocommerce-cart .cart_totals > h2 {
	margin: 0 0 var(--space-5);
	font-size: var(--fs-heading-sm);
}

.woocommerce-cart .cart_totals table.shop_table {
	border: 0;
	border-radius: 0;
	background: transparent;
}

.woocommerce-cart .cart_totals table.shop_table th,
.woocommerce-cart .cart_totals table.shop_table td {
	padding: var(--space-3) 0;
	border: 0;
	background: transparent;
	font-family: var(--font-body);
	font-size: var(--fs-body-md);
	letter-spacing: 0;
	text-transform: none;
}

.woocommerce-cart .cart_totals table.shop_table td {
	text-align: right;
	font-weight: var(--fw-semibold);
}

.woocommerce-cart .cart_totals .order-total th,
.woocommerce-cart .cart_totals .order-total td {
	padding-top: var(--space-5);
	border-top: 1px solid var(--border-default);
	font-family: var(--font-display);
	font-size: var(--fs-heading-sm);
	font-weight: var(--fw-black);
}

.woocommerce-cart table.cart {
	margin: 0;
}

.woocommerce-cart table.cart thead {
	display: none;
}

.woocommerce-cart table.cart tr.cart_item {
	display: grid;
	grid-template-columns: 28px 104px minmax(0, 1fr) auto auto;
	gap: var(--space-5);
	align-items: center;
	padding: var(--space-6);
	border-bottom: 1px solid var(--border-default);
}

.woocommerce-cart table.cart tr.cart_item td {
	padding: 0;
	border: 0;
}

.woocommerce-cart table.cart td.product-name a {
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	color: var(--fg-primary);
}

.woocommerce-cart table.cart td.product-remove a {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: var(--radius-pill);
	color: var(--fg-muted) !important;
}

.woocommerce-cart table.cart td.product-remove a:hover {
	background: var(--color-danger-bg);
	color: var(--color-danger) !important;
}

.woocommerce-cart table.cart td.product-price,
.woocommerce-cart table.cart td.product-subtotal {
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
}

.woocommerce-cart table.cart td.actions {
	display: flex;
	align-items: flex-end;
	gap: var(--space-3);
	padding: var(--space-5) var(--space-6);
	border: 0;
}

.woocommerce-cart table.cart td.actions .coupon {
	display: flex;
	flex: 1;
	gap: var(--space-3);
}

.woocommerce-cart table.cart td.actions .coupon .input-text {
	float: none;
	width: min(100%, 280px);
	min-height: 46px;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
}

.woocommerce-cart table.cart td.actions button,
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
	min-height: 46px;
	border: 0;
	border-radius: var(--radius-pill);
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
}

.woocommerce-cart .wc-proceed-to-checkout {
	padding: 0;
}

/* ---------------------------------------------------------------------------
 * Checkout layout — Checkout.dc.html
 * ------------------------------------------------------------------------ */

.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
	grid-template-areas:
		"customer summary-title"
		"customer summary";
	gap: 0 var(--space-10);
	align-items: start;
}

.woocommerce-checkout #customer_details {
	grid-area: customer;
	min-width: 0;
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	float: none;
	width: auto;
	margin-bottom: var(--space-6);
	padding: var(--space-7);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	background: var(--surface-card);
}

.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading {
	margin: 0 0 var(--space-5);
	font-size: var(--fs-heading-sm);
}

.woocommerce-checkout #order_review_heading {
	grid-area: summary-title;
	position: sticky;
	top: var(--space-6);
	z-index: 1;
	margin: 0;
	padding: var(--space-7) var(--space-7) 0;
	border: 1px solid var(--border-default);
	border-bottom: 0;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	background: var(--surface-card);
}
.woocommerce-checkout .woocommerce-billing-fields, .woocommerce-checkout .woocommerce-additional-fields {
    padding: 10px;
}

.woocommerce-checkout #order_review {
	grid-area: summary;
	position: sticky;
	top: calc(var(--space-6) + 58px);
	min-width: 0;
	margin: 0;
	padding: 10px;
	border: 1px solid var(--border-default);
	border-top: 0;
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
	background: var(--surface-card);
}

.woocommerce-checkout #order_review table.shop_table {
	margin: 0 0 var(--space-5);
	border: 0;
	border-radius: 0;
	background: transparent;
}

.woocommerce-checkout #order_review table.shop_table th,
.woocommerce-checkout #order_review table.shop_table td {
	padding: var(--space-3) 0;
	background: transparent;
}

.woocommerce-checkout #order_review table.shop_table td:last-child,
.woocommerce-checkout #order_review table.shop_table th:last-child {
	text-align: right;
}

.woocommerce-checkout #payment {
	border-radius: var(--radius-md);
	background: var(--surface-sunken);
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: var(--space-5);
	border-bottom-color: var(--border-default);
}

.woocommerce-checkout #payment div.form-row {
	padding: var(--space-5);
}

.woocommerce-checkout .woocommerce-shipping-fields {
	margin-top: var(--space-3);
}

@media (max-width: 900px) {
	.woocommerce-cart .woocommerce,
	.woocommerce-checkout form.checkout {
		display: block;
	}

	.woocommerce-cart .cart-collaterals {
		margin-top: var(--space-6);
	}

	.woocommerce-cart .cart-collaterals .cart_totals,
	.woocommerce-checkout #order_review {
		position: static;
	}

	.woocommerce-checkout #order_review_heading {
		position: static;
		margin-top: var(--space-6);
	}
}

@media (max-width: 640px) {
	.woocommerce-cart table.cart tr.cart_item {
		position: relative;
		grid-template-columns: 80px minmax(0, 1fr);
		gap: var(--space-3) var(--space-4);
		padding: var(--space-4);
	}

	.woocommerce-cart table.cart td.product-remove {
		position: absolute;
		right: var(--space-4);
	}

	.woocommerce-cart table.cart td.product-thumbnail {
		grid-column: 1;
		grid-row: 1 / span 3;
	}

	.woocommerce-cart table.cart img {
		width: 80px;
	}

	.woocommerce-cart table.cart td.product-name,
	.woocommerce-cart table.cart td.product-price,
	.woocommerce-cart table.cart td.product-quantity,
	.woocommerce-cart table.cart td.product-subtotal {
		grid-column: 2;
		text-align: left !important;
	}

	.woocommerce-cart table.cart td.actions,
	.woocommerce-cart table.cart td.actions .coupon {
		align-items: stretch;
		flex-direction: column;
	}

	.woocommerce-cart table.cart td.actions .coupon .input-text {
		width: 100%;
	}

	.woocommerce-checkout #customer_details .col-1,
	.woocommerce-checkout #customer_details .col-2,
	.woocommerce-checkout #order_review_heading,
	.woocommerce-checkout #order_review {
		padding-right: var(--space-5);
		padding-left: var(--space-5);
	}
}

.checkout-button,
.woocommerce #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: var(--space-4);
	padding: var(--space-4) var(--space-8);
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--surface-brand);
	color: var(--fg-on-brand);
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--fs-body-lg);
}

.checkout-button:hover,
.woocommerce #place_order:hover {
	background: var(--surface-brand-hover);
	color: var(--fg-on-brand);
}

/* --- Forms --- */

.woocommerce form .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	margin-bottom: var(--space-4);
}

.woocommerce form .form-row label {
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-semibold);
	color: var(--fg-secondary);
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container .select2-selection {
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--border-strong);
	border-radius: var(--radius-md);
	background: var(--surface-card);
	font-size: var(--fs-body-md);
	color: var(--fg-primary);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	border-color: var(--border-focus);
	box-shadow: var(--shadow-focus);
	outline: none;
}

/* --- Notices --- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
	padding: var(--space-4) var(--space-5);
	border-left: 3px solid var(--surface-brand);
	border-radius: var(--radius-md);
	background: var(--color-success-bg);
	list-style: none;
}

.woocommerce-info {
	border-left-color: var(--color-info);
	background: var(--color-info-bg);
}

.woocommerce-error {
	border-left-color: var(--color-danger);
	background: var(--color-danger-bg);
}

/* --- Account --- */

.woocommerce-account .woocommerce-MyAccount-navigation {
	float: none;
	width: auto;
}

.woocommerce-account .woocommerce {
	display: grid;
	grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
	gap: var(--space-10);
	align-items: start;
}

.sunny-account-nav {
	position: sticky;
	top: var(--space-6);
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
}

.sunny-account-nav__item {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	color: var(--fg-primary);
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-body-md);
}

.sunny-account-nav__item:hover {
	background: var(--surface-sunken);
	color: var(--fg-primary);
}

.sunny-account-nav__item.is-current {
	background: var(--brand-50);
	color: var(--brand-700);
}

.sunny-account-nav__item--logout {
	margin-top: var(--space-4);
	color: var(--fg-muted);
}

.woocommerce-MyAccount-content {
	min-width: 0;
}

/* ---------------------------------------------------------------------------
 * Account details form (§R)
 *
 * The last screen still arriving in WooCommerce's default markup. The template
 * keeps every name, id and hook Woo writes and only changes the presentation,
 * so these rules sit alongside .woocommerce-form-row rather than replacing it.
 * ------------------------------------------------------------------------ */

.sunny-account-form__group {
	max-width: 34rem;
	margin-bottom: var(--space-8);
}

.sunny-account-form__fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.sunny-account-form__legend {
	margin: 0 0 var(--space-4);
	padding: 0;
	font-size: var(--fs-heading-sm);
}

.sunny-account-form__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
	gap: var(--space-4);
}

/* WooCommerce's own form-row classes float these; the grid above owns layout. */
.sunny-account-form .form-row {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	float: none;
	width: auto;
	margin: 0 0 var(--space-4);
	padding: 0;
}

.sunny-account-form__label {
	font-size: var(--fs-body-sm);
	font-weight: var(--fw-semibold);
	color: var(--fg-primary);
}

.sunny-account-form__label .required {
	color: var(--color-danger);
	text-decoration: none;
}

.sunny-account-form__help {
	font-size: var(--fs-body-sm);
	color: var(--fg-secondary);
	line-height: var(--lh-relaxed);
}

.sunny-account-form__help--block {
	display: block;
	margin: 0 0 var(--space-4);
}

.sunny-account-form__actions {
	margin: 0;
}

/* Woo inserts these to clear its floats; the grid does not need them. */
.sunny-account-form .clear {
	display: none;
}

@media (max-width: 760px) {
	.woocommerce-account .woocommerce {
		grid-template-columns: minmax(0, 1fr);
	}

	.sunny-account-nav {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* --- Order received --- */

.sunny-delivery-estimate {
	padding: var(--space-3) var(--space-5);
	margin: var(--space-4) 0 0;
	border-radius: var(--radius-md);
	background: var(--brand-50);
	color: var(--brand-800);
	font-size: var(--fs-body-sm);
}

.sunny-thankyou-account {
	margin-top: var(--space-6);
	padding: var(--space-6);
}

.sunny-thankyou-account__title {
	margin-bottom: var(--space-2);
	font-size: var(--fs-heading-sm);
}

/* ---------------------------------------------------------------------------
 * Thank-you page (woocommerce/checkout/thankyou.php override)
 *
 * Single column at 720px, chosen to match the design's reading width.
 * WooCommerce's #primary wrapper is replaced by .sunny-woo (display:contents),
 * so the page sits directly under the header - the gap below the breadcrumb
 * comes from this block's own padding, not from any inherited wrapper.
 * ------------------------------------------------------------------------ */

.sunny-thankyou {
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	max-width: 720px;
	margin: 0 auto;
	padding: var(--rhythm-section-y) 0;
}

.sunny-thankyou__hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	text-align: center;
}

.sunny-thankyou__check {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	border-radius: var(--radius-pill);
	background: var(--brand-50);
	color: var(--brand-600);
}

.sunny-thankyou__title {
	margin: 0;
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	font-size: var(--fs-display-md);
	letter-spacing: var(--ls-tight);
	color: var(--fg-primary);
}

.sunny-thankyou__intro {
	margin: 0;
	font-size: var(--fs-body-md);
	color: var(--fg-secondary);
}

.sunny-thankyou__intro strong {
	font-weight: var(--fw-extrabold);
	color: var(--fg-primary);
}

/* The 4-step tracker. The bar is the only piece that changes state; the
   label sits below. The first cell owns the brand bar; the rest are a muted
   neutral until a later order reaches them. */
.sunny-tracker {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.sunny-tracker__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.sunny-tracker__bar {
	display: block;
	width: 100%;
	height: 4px;
	border-radius: var(--radius-sm);
	background: var(--border-default);
}

.sunny-tracker__step.is-current .sunny-tracker__bar {
	background: var(--surface-brand);
}

.sunny-tracker__label {
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: 11px;
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--fg-muted);
}

.sunny-tracker__step.is-current .sunny-tracker__label {
	color: var(--brand-600);
}

.sunny-thankyou__summary {
	padding: var(--space-6);
}

.sunny-thankyou__summary-title {
	margin: 0 0 var(--space-4);
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--fs-heading-sm);
	color: var(--fg-primary);
}

.sunny-thankyou__lines {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sunny-thankyou__line {
	display: flex;
	gap: var(--space-4);
	align-items: center;
	padding: var(--space-3) 0;
	border-bottom: var(--border-w) solid var(--border-default);
}

.sunny-thankyou__line:last-child {
	border-bottom: 0;
}

.sunny-thankyou__line-media {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	overflow: hidden;
	border-radius: var(--radius-md);
	background: var(--surface-sunken);
}

.sunny-thankyou__line-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sunny-thankyou__line-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.sunny-thankyou__line-title {
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--fs-body-md);
	line-height: var(--lh-snug);
	color: var(--fg-primary);
}

.sunny-thankyou__line-meta {
	font-size: var(--fs-body-sm);
	color: var(--fg-muted);
}

.sunny-thankyou__line-price {
	flex: none;
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--fs-body-md);
	color: var(--fg-primary);
}

.sunny-thankyou__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding-top: var(--space-4);
}

.sunny-thankyou__total-label {
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	font-size: var(--fs-heading-sm);
	color: var(--fg-primary);
}

.sunny-thankyou__total-value {
	font-family: var(--font-display);
	font-weight: var(--fw-black);
	font-size: var(--fs-heading-md);
	color: var(--fg-primary);
}

.sunny-thankyou__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-6);
	padding: var(--space-6);
}

.sunny-thankyou__meta-cell {
	flex: 1 1 220px;
}

.sunny-thankyou__meta-title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-display);
	font-weight: var(--fw-extrabold);
	font-size: var(--fs-body-md);
	color: var(--fg-primary);
}

.sunny-thankyou__address,
.sunny-thankyou__payment {
	margin: 0;
	font-style: normal;
	font-size: var(--fs-body-md);
	line-height: var(--lh-relaxed);
	color: var(--fg-secondary);
}

.sunny-thankyou__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	justify-content: center;
}

@media (max-width: 540px) {
	.sunny-thankyou__actions .sunny-btn {
		flex: 1 1 auto;
	}

	.sunny-thankyou__line {
		gap: var(--space-3);
	}

	.sunny-thankyou__line-media {
		width: 44px;
		height: 44px;
	}
}

/* ---------------------------------------------------------------------------
 * Delivery estimate (§J)
 *
 * Product page, cart and checkout. The order-received variant is
 * .sunny-delivery-estimate above - it is a standalone confirmation line rather
 * than part of the buying decision, so it keeps its own tinted panel.
 * ------------------------------------------------------------------------ */

.sunny-delivery {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	margin: 0;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-normal);
	color: var(--fg-secondary);
}

.sunny-delivery__icon {
	flex: none;
	width: 17px;
	height: 17px;
	margin-top: 2px;
	color: var(--surface-brand);
}

.sunny-delivery__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.sunny-delivery__arrival {
	font-weight: var(--fw-semibold);
	color: var(--fg-primary);
}

.sunny-delivery__production {
	color: var(--fg-secondary);
}

/* In the cart and the checkout review the block is a summary line rather than
   a selling point, so it sits on the sunken surface instead of shouting. */
.sunny-delivery--compact {
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	background: var(--surface-sunken);
}

.sunny-delivery-row td {
	padding-top: var(--space-3);
}