/*
 * Dewra — WooCommerce layer.
 * ---------------------------------------------------------------------------
 * Styles the WooCommerce *blocks* (Product Collection, Add to Cart Form,
 * Cart, Checkout, Mini Cart) plus the classic gallery that the single product
 * template still uses. Nothing here overrides plugin templates on disk.
 *
 *  1. Shared commerce atoms      5. Cart
 *  2. Catalog / shop archive     6. Checkout
 *  3. Single product             7. Mini cart + notices
 *  4. Add to cart + quantity     8. Account / order received
 */

/* =========================================================================
   1. Shared commerce atoms
   ========================================================================= */

.woocommerce-Price-amount,
.wc-block-components-product-price,
.wc-block-formatted-money-amount {
	font-family: var(--wp--preset--font-family--manrope);
	font-variant-numeric: tabular-nums;
}

.wc-block-components-product-price__value,
.woocommerce-Price-amount {
	color: var(--dw-teal-deep);
	font-weight: 700;
}

del,
.wc-block-components-product-price__regular {
	color: var(--dw-muted);
	font-weight: 400;
	opacity: 0.75;
}

ins {
	text-decoration: none;
}

/* Sale badge */
.wc-block-components-product-sale-badge,
.wp-block-woocommerce-product-sale-badge {
	background: var(--dw-rose);
	border: 0;
	border-radius: var(--dw-r-pill);
	color: var(--dw-white);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 0.3rem 0.7rem;
	text-transform: uppercase;
}

/* All WooCommerce buttons inherit the brand pill. */
.wc-block-components-button:not(.is-link),
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--dw-teal);
	border: 0;
	border-radius: var(--dw-r-pill);
	color: var(--dw-white);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	min-block-size: 48px;
	padding: 0.9em 1.9em;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--dw-t), transform var(--dw-t), box-shadow var(--dw-t);
}

.wc-block-components-button:not(.is-link):hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var(--dw-teal-deep);
	color: var(--dw-white);
	transform: translateY(-1px);
}

.wc-block-components-button:not(.is-link):disabled,
.woocommerce a.button.disabled,
.woocommerce button.button:disabled {
	background: var(--dw-line);
	color: var(--dw-muted);
	cursor: not-allowed;
	transform: none;
}

.wc-block-components-button__text {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
}

/* Links styled as buttons should never inherit the pill twice. */
.wc-block-components-button.is-link {
	background: transparent;
	color: var(--dw-teal);
	min-block-size: 0;
	padding: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Form fields, unified across classic and block checkout. */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-combobox-control input,
.wc-block-components-select__container select {
	background: var(--dw-white);
	border: 1px solid var(--dw-line);
	border-radius: var(--dw-r-md);
	color: var(--dw-ink);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 1rem; /* 16px — stops iOS zoom-on-focus */
	min-block-size: 50px;
	padding: 0.85rem 1rem;
	transition: border-color var(--dw-t), box-shadow var(--dw-t);
	inline-size: 100%;
}

.woocommerce form .form-row input.input-text:focus,
.wc-block-components-text-input input:focus,
.wc-block-components-combobox-control input:focus,
.wc-block-components-select__container select:focus {
	border-color: var(--dw-teal);
	box-shadow: var(--dw-ring);
	outline: none;
}

.wc-block-components-text-input.is-active label,
.wc-block-components-text-input label {
	color: var(--dw-muted);
}

/* =========================================================================
   2. Catalog / shop archive
   ========================================================================= */

.dw-shop-head {
	background: linear-gradient(180deg, var(--dw-cream) 0%, var(--dw-white) 100%);
	padding-block: clamp(2rem, 6vw, 4rem) clamp(1.25rem, 3vw, 2rem);
	text-align: center;
}

.dw-shop-head h1,
.dw-shop-head .wp-block-query-title {
	margin-block: 0 0.6rem;
}

.dw-shop-head p {
	color: var(--dw-muted);
	margin-inline: auto;
	max-width: 42rem;
}

.dw-shop-toolbar {
	align-items: center;
	border-block: 1px solid var(--dw-line);
	color: var(--dw-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.875rem;
	gap: 0.75rem 1.25rem;
	justify-content: space-between;
	margin-block-end: clamp(1.5rem, 4vw, 2.5rem);
	padding-block: 0.85rem;
}

.dw-shop-toolbar .wc-block-catalog-sorting select,
.dw-shop-toolbar select {
	background: var(--dw-white);
	border: 1px solid var(--dw-line);
	border-radius: var(--dw-r-pill);
	font-size: 0.875rem;
	min-block-size: 42px;
	padding: 0.4rem 2rem 0.4rem 1rem;
}

/* Product grid */
.wp-block-woocommerce-product-template,
.wc-block-product-template {
	display: grid !important;
	gap: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 2.5vw, 1.75rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (max-width: 26.24em) {
	.wp-block-woocommerce-product-template,
	.wc-block-product-template {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 48.9em) {
	.wp-block-woocommerce-product-template,
	.wc-block-product-template {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* The two-product catalog reads better as a pair of large cards. */
.dw-catalog-pair .wp-block-woocommerce-product-template {
	grid-template-columns: 1fr;
	margin-inline: auto;
	max-width: 58rem;
}

@media (min-width: 40em) {
	.dw-catalog-pair .wp-block-woocommerce-product-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.wc-block-product-template__responsive,
.wp-block-woocommerce-product-template > li,
.wc-block-product {
	background: var(--dw-white);
	border: 1px solid var(--dw-line);
	border-radius: var(--dw-r-lg);
	display: flex;
	flex-direction: column;
	block-size: 100%;
	margin: 0;
	overflow: hidden;
	padding: 0 0 clamp(1rem, 2.5vw, 1.35rem);
	transition: box-shadow var(--dw-t), transform var(--dw-t), border-color var(--dw-t);
}

.wp-block-woocommerce-product-template > li:hover,
.wc-block-product:hover {
	border-color: color-mix(in srgb, var(--dw-teal) 32%, var(--dw-line));
	box-shadow: var(--dw-shadow-lift);
	transform: translateY(-3px);
}

.wc-block-components-product-image,
.wp-block-woocommerce-product-image {
	background: linear-gradient(160deg, var(--dw-cream) 0%, var(--dw-sage-soft) 100%);
	display: block;
	margin: 0 0 clamp(0.85rem, 2vw, 1.15rem);
	position: relative;
}

.wc-block-components-product-image a,
.wp-block-woocommerce-product-image a {
	display: block;
}

/*
 * `object-fit` carries `!important` because the WooCommerce Product Image block
 * writes `style="object-fit:cover"` directly onto the <img>, which no
 * stylesheet rule can outrank. Cover crops the top off the carton artwork
 * (it clipped the Dewra wordmark); packshots must letterbox, not crop.
 */
.wc-block-components-product-image img,
.wp-block-woocommerce-product-image img {
	aspect-ratio: 1 / 1;
	border-radius: 0;
	display: block;
	inline-size: 100%;
	mix-blend-mode: normal;
	object-fit: contain !important;
	object-position: center center;
	padding: clamp(0.75rem, 2.5vw, 1.5rem);
	transition: transform 420ms var(--dw-ease);
}

.wp-block-woocommerce-product-template > li:hover img {
	transform: scale(1.035);
}

.wc-block-components-product-title,
.wp-block-woocommerce-product-template .wp-block-post-title {
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 1.125rem;
	line-height: 1.3;
	margin: 0 clamp(1rem, 2.5vw, 1.35rem) 0.4rem;
}

.wp-block-woocommerce-product-template .wp-block-post-title a {
	color: var(--dw-teal-deep);
	text-decoration: none;
}

.wp-block-woocommerce-product-template .wp-block-post-title a:hover {
	color: var(--dw-teal);
}

.wp-block-woocommerce-product-template .wp-block-woocommerce-product-price,
.wp-block-woocommerce-product-template .wc-block-components-product-price {
	margin: 0 clamp(1rem, 2.5vw, 1.35rem) 0.9rem;
}

.wp-block-woocommerce-product-template .wp-block-woocommerce-product-button,
.wp-block-woocommerce-product-template .wc-block-components-product-button {
	margin: auto clamp(1rem, 2.5vw, 1.35rem) 0;
}

.wp-block-woocommerce-product-template .wc-block-components-product-button .wp-block-button__link,
.wp-block-woocommerce-product-template .wc-block-components-product-button a {
	inline-size: 100%;
}

.wp-block-woocommerce-product-template .wp-block-woocommerce-product-rating {
	margin: 0 clamp(1rem, 2.5vw, 1.35rem) 0.5rem;
}

/* Star colour */
.wc-block-components-product-rating__stars span::before,
.star-rating span::before,
.wc-block-components-review-list-item__rating > span::before {
	color: var(--dw-teal-bright);
}

/* =========================================================================
   3. Single product
   ========================================================================= */

/*
 * Bottom padding is deliberately smaller than the top: `.dw-product-detail`
 * contributes its own top padding directly below, and matching both at 72px
 * left a 144px dead band before the description tabs.
 */
.dw-product-main {
	padding-block: clamp(1.25rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2rem);
}

.dw-product-layout {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3.5rem);
	grid-template-columns: 1fr;
}

@media (min-width: 48.9em) {
	.dw-product-layout {
		align-items: start;
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	}
}

@media (min-width: 64em) {
	.dw-product-summary {
		position: sticky;
		top: calc(var(--dw-header-h) + 1.5rem);
	}
}

/* --- Gallery --- */
.dw-product-gallery,
.wp-block-woocommerce-product-image-gallery {
	background: linear-gradient(165deg, var(--dw-cream) 0%, var(--dw-sage-soft) 100%);
	border-radius: var(--dw-r-xl);
	overflow: hidden;
	padding: clamp(1rem, 3vw, 2rem);
}

.woocommerce div.product div.images {
	margin: 0;
}

.woocommerce div.product div.images img {
	border-radius: var(--dw-r-lg);
}

.woocommerce div.product div.images .flex-control-thumbs {
	display: flex;
	gap: 0.6rem;
	margin: 0.9rem 0 0;
	padding: 0;
}

.woocommerce div.product div.images .flex-control-thumbs li {
	flex: 0 0 auto;
	inline-size: 68px;
	list-style: none;
	margin: 0;
}

.woocommerce div.product div.images .flex-control-thumbs img {
	background: var(--dw-white);
	border: 1px solid var(--dw-line);
	border-radius: var(--dw-r-sm);
	opacity: 1;
	padding: 3px;
	transition: border-color var(--dw-t);
}

.woocommerce div.product div.images .flex-control-thumbs img.flex-active,
.woocommerce div.product div.images .flex-control-thumbs img:hover {
	border-color: var(--dw-teal);
}

.woocommerce span.onsale {
	background: var(--dw-rose);
	border-radius: var(--dw-r-pill);
	color: var(--dw-white);
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1;
	min-block-size: 0;
	min-inline-size: 0;
	padding: 0.5rem 0.85rem;
	text-transform: uppercase;
	inset-block-start: 0.75rem;
	inset-inline-start: 0.75rem;
}

/* --- Summary column --- */
.dw-product-summary .dw-eyebrow {
	margin-block-end: 0.6rem;
}

.dw-product-summary .wp-block-post-title,
.dw-product-title {
	font-size: clamp(1.75rem, 3.8vw, 2.625rem);
	line-height: 1.1;
	margin-block: 0 0.75rem;
}

.dw-product-summary .wp-block-woocommerce-product-price,
.dw-product-price {
	font-size: clamp(1.375rem, 2.4vw, 1.75rem);
	margin-block: 0 0.25rem;
}

.dw-product-unit {
	color: var(--dw-muted);
	font-size: 0.875rem;
	margin-block: 0 1.25rem;
}

.dw-product-summary .wp-block-post-excerpt__excerpt,
.dw-product-excerpt {
	color: var(--dw-muted);
	font-size: 1.0625rem;
	line-height: 1.7;
}

.dw-product-summary .wp-block-woocommerce-product-rating {
	margin-block-end: 0.85rem;
}

/* Feature chips under the price */
.dw-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.dw-chips li {
	background: var(--dw-sage-soft);
	border-radius: var(--dw-r-pill);
	color: var(--dw-teal-deep);
	font-size: 0.8125rem;
	font-weight: 600;
	margin: 0;
	padding: 0.4rem 0.85rem;
}

/* Reassurance list under add-to-cart */
.dw-assurance {
	border-block-start: 1px solid var(--dw-line);
	display: grid;
	gap: 0.65rem;
	list-style: none;
	margin-block: 1.5rem 0;
	padding: 1.25rem 0 0;
}

.dw-assurance li {
	align-items: flex-start;
	color: var(--dw-muted);
	display: flex;
	font-size: 0.9375rem;
	gap: 0.6rem;
	margin: 0;
}

.dw-assurance li::before {
	background: var(--dw-sage-soft);
	border-radius: 50%;
	block-size: 1.15rem;
	content: "";
	flex: 0 0 auto;
	inline-size: 1.15rem;
	margin-block-start: 0.22em;
	position: relative;
}

/* --- Product long-form detail band --- */
.dw-product-detail {
	background: var(--dw-cream);
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

/* WooCommerce product-details block (tabs) fallback */
.wp-block-woocommerce-product-details .wc-tabs {
	border-block-end: 1px solid var(--dw-line);
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin: 0 0 1.5rem;
	padding: 0;
}

.wp-block-woocommerce-product-details .wc-tabs::before,
.wp-block-woocommerce-product-details .wc-tabs li::before,
.wp-block-woocommerce-product-details .wc-tabs li::after {
	display: none;
}

.wp-block-woocommerce-product-details .wc-tabs li {
	background: transparent;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 0;
}

.wp-block-woocommerce-product-details .wc-tabs li a {
	color: var(--dw-muted);
	display: block;
	font-weight: 600;
	padding: 0.75rem 1rem;
	text-decoration: none;
}

.wp-block-woocommerce-product-details .wc-tabs li.active a {
	border-block-end: 2px solid var(--dw-teal);
	color: var(--dw-teal-deep);
}

/* =========================================================================
   4. Add to cart + quantity
   ========================================================================= */

.woocommerce div.product form.cart,
.wp-block-woocommerce-add-to-cart-form form.cart {
	align-items: stretch;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-block: 0;
}

.woocommerce div.product form.cart .quantity {
	align-items: center;
	background: var(--dw-white);
	border: 1px solid var(--dw-line);
	border-radius: var(--dw-r-pill);
	display: inline-flex;
	flex: 0 0 auto;
	overflow: hidden;
}

.woocommerce div.product form.cart .quantity input.qty,
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input {
	appearance: textfield;
	background: transparent;
	border: 0;
	color: var(--dw-teal-deep);
	font-size: 1rem;
	font-weight: 600;
	inline-size: 3.25rem;
	min-block-size: 48px;
	text-align: center;
}

.woocommerce div.product form.cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce div.product form.cart .quantity input.qty::-webkit-inner-spin-button {
	appearance: none;
	margin: 0;
}

/* Stepper buttons injected by assets/js/dewra.js */
.dw-qty-btn {
	align-items: center;
	background: transparent;
	border: 0;
	color: var(--dw-teal-deep);
	cursor: pointer;
	display: inline-flex;
	font-size: 1.15rem;
	justify-content: center;
	line-height: 1;
	min-block-size: 48px;
	min-inline-size: 44px;
	transition: background-color var(--dw-t);
}

.dw-qty-btn:hover {
	background: var(--dw-sage-soft);
}

/*
 * Disabled must still be *readable*. `--dw-line` on white measured 1.2:1, so
 * the minus sign vanished at quantity 1 and the control looked broken rather
 * than disabled.
 */
.dw-qty-btn:disabled {
	color: var(--dw-muted);
	cursor: not-allowed;
	opacity: 0.38;
}

.woocommerce div.product form.cart button.single_add_to_cart_button {
	flex: 1 1 14rem;
}

/* Block quantity selector (cart / mini cart) */
.wc-block-components-quantity-selector {
	background: var(--dw-white);
	border: 1px solid var(--dw-line);
	border-radius: var(--dw-r-pill);
	overflow: hidden;
}

.wc-block-components-quantity-selector::after {
	display: none;
}

.wc-block-components-quantity-selector__button {
	color: var(--dw-teal-deep);
	font-size: 1.05rem;
	min-block-size: 44px;
	min-inline-size: 40px;
	transition: background-color var(--dw-t);
}

.wc-block-components-quantity-selector__button:hover {
	background: var(--dw-sage-soft);
}

/* =========================================================================
   5. Cart
   ========================================================================= */

.dw-commerce-focus .dw-announce {
	display: none;
}

.dw-cart-head,
.dw-checkout-head {
	padding-block: clamp(1.75rem, 5vw, 3rem) clamp(1rem, 2.5vw, 1.5rem);
	text-align: center;
}

.dw-cart-head h1,
.dw-checkout-head h1 {
	margin-block: 0 0.5rem;
}

.dw-cart-head p,
.dw-checkout-head p {
	color: var(--dw-muted);
	margin: 0;
}

/* Progress steps for the purchase flow */
.dw-steps-bar {
	align-items: center;
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	list-style: none;
	margin: 0 auto clamp(1.5rem, 4vw, 2.5rem);
	padding: 0;
	flex-wrap: wrap;
}

.dw-steps-bar li {
	align-items: center;
	color: var(--dw-muted);
	display: flex;
	font-size: 0.8125rem;
	font-weight: 600;
	gap: 0.45rem;
	margin: 0;
}

.dw-steps-bar li::before {
	align-items: center;
	background: var(--dw-line);
	border-radius: 50%;
	block-size: 22px;
	color: var(--dw-white);
	content: counter(dw-bar);
	counter-increment: dw-bar;
	display: flex;
	font-size: 0.6875rem;
	inline-size: 22px;
	justify-content: center;
}

.dw-steps-bar {
	counter-reset: dw-bar;
}

.dw-steps-bar li.is-current {
	color: var(--dw-teal-deep);
}

.dw-steps-bar li.is-current::before,
.dw-steps-bar li.is-done::before {
	background: var(--dw-teal);
}

.dw-steps-bar li + li::after {
	background: var(--dw-line);
	block-size: 1px;
	content: "";
	inline-size: clamp(0.75rem, 3vw, 2rem);
	order: -1;
}

/* Cart layout */
.wp-block-woocommerce-cart {
	margin-block: 0 clamp(2.5rem, 6vw, 4rem);
}

.wc-block-cart {
	display: block;
}

.wp-block-woocommerce-filled-cart-block {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: 1fr;
}

@media (min-width: 48.9em) {
	.wp-block-woocommerce-filled-cart-block {
		align-items: start;
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	}
}

.wp-block-woocommerce-cart-items-block {
	min-inline-size: 0;
}

.wp-block-woocommerce-cart-totals-block {
	background: var(--dw-cream);
	border-radius: var(--dw-r-lg);
	min-inline-size: 0;
	padding: clamp(1.25rem, 3vw, 1.75rem);
}

@media (min-width: 64em) {
	.wp-block-woocommerce-cart-totals-block {
		position: sticky;
		top: calc(var(--dw-header-h) + 1.5rem);
	}
}

.wc-block-cart-items {
	border-block-end: 1px solid var(--dw-line);
	margin: 0;
}

.wc-block-cart-items__header {
	border-block-end: 1px solid var(--dw-line);
	color: var(--dw-muted);
	font-size: 0.75rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.wc-block-cart-items__row {
	border-block-start: 1px solid var(--dw-line);
	padding-block: clamp(1rem, 2.5vw, 1.35rem);
}

.wc-block-cart-item__image img {
	background: var(--dw-cream);
	border-radius: var(--dw-r-md);
	object-fit: contain;
	padding: 0.35rem;
}

.wc-block-cart-item__product .wc-block-components-product-name {
	color: var(--dw-teal-deep);
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 1.0625rem;
	font-weight: 500;
	text-decoration: none;
}

.wc-block-cart-item__remove-link {
	color: var(--dw-muted);
	font-size: 0.8125rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wc-block-cart-item__remove-link:hover {
	color: var(--dw-rose);
}

.wc-block-components-totals-item {
	font-size: 0.9375rem;
}

.wc-block-components-totals-footer-item {
	border-block-start: 1px solid var(--dw-line);
	font-size: 1.0625rem;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--dw-teal-deep);
	font-weight: 700;
}

.wc-block-cart__submit-container {
	margin-block-start: 1.25rem;
	padding: 0;
}

.wc-block-cart__submit-button {
	inline-size: 100%;
}

.wc-block-components-sidebar-layout .wc-block-components-order-summary__title,
.wp-block-woocommerce-cart-order-summary-heading-block {
	color: var(--dw-teal-deep);
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 1.25rem;
	font-weight: 500;
}

/* Empty cart */
.wp-block-woocommerce-empty-cart-block {
	margin-inline: auto;
	max-width: 40rem;
	padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(2.5rem, 6vw, 4rem);
	text-align: center;
}

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title {
	font-size: clamp(1.5rem, 3vw, 2rem);
}

.wp-block-woocommerce-empty-cart-block .wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
	color: var(--dw-sage);
}

/* Coupon */
.wc-block-components-totals-coupon__form .wc-block-components-text-input input {
	min-block-size: 46px;
}

.wc-block-components-panel__button {
	color: var(--dw-teal);
	font-weight: 600;
}

/* =========================================================================
   6. Checkout
   ========================================================================= */

.wp-block-woocommerce-checkout {
	margin-block: 0 clamp(2.5rem, 6vw, 4rem);
}

.wc-block-checkout__form,
.wp-block-woocommerce-checkout-fields-block {
	min-inline-size: 0;
}

.wc-block-components-sidebar-layout {
	display: grid;
	gap: clamp(1.5rem, 4vw, 3rem);
	grid-template-columns: 1fr;
}

@media (min-width: 48.9em) {
	.wc-block-components-sidebar-layout {
		align-items: start;
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	}
}

.wc-block-components-sidebar,
.wp-block-woocommerce-checkout-totals-block {
	background: var(--dw-cream);
	border-radius: var(--dw-r-lg);
	min-inline-size: 0;
	padding: clamp(1.25rem, 3vw, 1.75rem);
}

@media (min-width: 64em) {
	.wc-block-components-sidebar,
	.wp-block-woocommerce-checkout-totals-block {
		position: sticky;
		top: calc(var(--dw-header-h) + 1.5rem);
	}
}

/*
 * On mobile, put the order summary above the long checkout form so the amount
 * is visible before the shopper starts typing.
 *
 * Scoped to the checkout on purpose: the Cart block also carries
 * `.wc-block-components-sidebar-layout`, and an unscoped rule hoisted the
 * totals above the line items there, which is backwards for a cart — you read
 * what you are buying first, then the total.
 */
@media (max-width: 48.8125em) {
	.wp-block-woocommerce-checkout .wc-block-components-sidebar,
	.wp-block-woocommerce-checkout .wp-block-woocommerce-checkout-totals-block {
		order: -1;
	}
}

.wc-block-components-checkout-step {
	border: 0;
	padding-block-end: clamp(1.25rem, 3vw, 1.75rem);
}

.wc-block-components-checkout-step:not(:last-child) {
	border-block-end: 1px solid var(--dw-line);
	margin-block-end: clamp(1.25rem, 3vw, 1.75rem);
}

.wc-block-components-checkout-step__title,
.wc-block-components-title {
	color: var(--dw-teal-deep);
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: 1.1875rem;
	font-weight: 500;
}

.wc-block-components-checkout-step__description {
	color: var(--dw-muted);
	font-size: 0.9375rem;
}

.wc-block-components-checkout-step__heading {
	align-items: baseline;
	gap: 0.75rem;
}

.wc-block-components-radio-control__option,
.wc-block-components-radio-control-accordion-option {
	border: 1px solid var(--dw-line);
	border-radius: var(--dw-r-md);
	margin-block-end: 0.6rem;
	padding: 0.9rem 1rem 0.9rem 2.75rem;
}

.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-color: var(--dw-teal);
	box-shadow: inset 0 0 0 1px var(--dw-teal);
}

.wc-block-components-radio-control__option-layout {
	gap: 0.35rem;
}

.wc-block-components-checkbox__input[type="checkbox"] {
	border-color: var(--dw-line);
	border-radius: 4px;
	block-size: 20px;
	inline-size: 20px;
}

.wc-block-components-checkbox__input[type="checkbox"]:checked {
	background: var(--dw-teal);
	border-color: var(--dw-teal);
}

.wc-block-components-order-summary-item__image img {
	background: var(--dw-white);
	border: 1px solid var(--dw-line);
	border-radius: var(--dw-r-sm);
	object-fit: contain;
	padding: 0.25rem;
}

.wc-block-components-checkout-place-order-button {
	inline-size: 100%;
}

.wc-block-checkout__actions {
	border: 0;
	padding-block-start: 1rem;
}

.wc-block-checkout__terms {
	color: var(--dw-muted);
	font-size: 0.875rem;
}

/* Trust row under the place-order button */
.dw-checkout-trust {
	align-items: center;
	color: var(--dw-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.8125rem;
	gap: 0.5rem 1.25rem;
	justify-content: center;
	margin-block-start: 1.25rem;
}

.dw-checkout-trust span {
	align-items: center;
	display: inline-flex;
	gap: 0.4rem;
}

/* =========================================================================
   7. Mini cart + notices
   ========================================================================= */

.wp-block-woocommerce-mini-cart {
	display: flex;
}

.wc-block-mini-cart__button {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: var(--dw-r-pill);
	color: var(--dw-teal-deep);
	cursor: pointer;
	display: inline-flex;
	gap: 0.35rem;
	block-size: 44px;
	justify-content: center;
	min-inline-size: 44px;
	padding-inline: 0.5rem;
	transition: background-color var(--dw-t);
}

.wc-block-mini-cart__button:hover {
	background: var(--dw-sage-soft);
}

.wc-block-mini-cart__badge {
	background: var(--dw-teal);
	border-radius: var(--dw-r-pill);
	color: var(--dw-white);
	font-size: 0.6875rem;
	font-weight: 700;
	min-inline-size: 18px;
	padding: 0 0.3rem;
}

.wc-block-mini-cart__icon {
	block-size: 22px;
	inline-size: 22px;
}

.wc-block-mini-cart__quantity-badge {
	position: relative;
}

.wc-block-mini-cart__drawer .wc-block-components-drawer {
	background: var(--dw-white);
}

.wc-block-mini-cart__title {
	color: var(--dw-teal-deep);
	font-family: var(--wp--preset--font-family--fraunces);
}

.wc-block-mini-cart__footer {
	background: var(--dw-cream);
	border-block-start: 1px solid var(--dw-line);
}

.wc-block-mini-cart__footer-actions .wc-block-components-button {
	inline-size: 100%;
}

/* Notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
	align-items: flex-start;
	background: var(--dw-sage-soft);
	border: 0;
	border-inline-start: 3px solid var(--dw-teal);
	border-radius: var(--dw-r-md);
	color: var(--dw-teal-deep);
	font-size: 0.9375rem;
	margin-block-end: 1.25rem;
	padding: 1rem 1.15rem;
}

.woocommerce-error,
.wc-block-components-notice-banner.is-error {
	background: color-mix(in srgb, var(--dw-rose) 12%, var(--dw-white));
	border-inline-start-color: var(--dw-rose);
	color: #7d2340;
}

.wc-block-components-notice-banner.is-warning {
	background: color-mix(in srgb, var(--dw-blush) 45%, var(--dw-white));
	border-inline-start-color: var(--dw-rose);
	color: var(--dw-ink);
}

.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	color: var(--dw-teal);
}

.woocommerce-message .button {
	margin-inline-start: auto;
}

.wc-block-components-notice-banner > svg {
	fill: currentcolor;
}

/* Store notices block spacing */
.wp-block-woocommerce-store-notices:empty {
	display: none;
}

/* =========================================================================
   8. Account / order received
   ========================================================================= */

.woocommerce-order,
.wp-block-woocommerce-order-confirmation-summary {
	background: var(--dw-cream);
	border-radius: var(--dw-r-lg);
	padding: clamp(1.25rem, 3vw, 2rem);
}

.wc-block-order-confirmation-status,
.woocommerce-thankyou-order-received {
	color: var(--dw-teal-deep);
	font-family: var(--wp--preset--font-family--fraunces);
	font-size: clamp(1.375rem, 3vw, 1.875rem);
}

.woocommerce-order-overview {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
}

.woocommerce-order-overview li {
	border-block-start: 1px solid var(--dw-line);
	color: var(--dw-muted);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	margin: 0;
	padding-block-start: 0.75rem;
	text-transform: uppercase;
}

.woocommerce-order-overview li strong {
	color: var(--dw-teal-deep);
	display: block;
	font-size: 1rem;
	letter-spacing: 0;
	margin-block-start: 0.2rem;
	text-transform: none;
}

/* My account */
.woocommerce-MyAccount-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	list-style: none;
	margin: 0 0 1.75rem;
	padding: 0;
}

.woocommerce-MyAccount-navigation li {
	margin: 0;
}

.woocommerce-MyAccount-navigation li a {
	border: 1px solid var(--dw-line);
	border-radius: var(--dw-r-pill);
	color: var(--dw-teal-deep);
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 600;
	padding: 0.55rem 1.1rem;
	text-decoration: none;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover {
	background: var(--dw-teal);
	border-color: var(--dw-teal);
	color: var(--dw-white);
}

.woocommerce table.shop_table {
	border: 1px solid var(--dw-line);
	border-radius: var(--dw-r-md);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce table.shop_table th {
	background: var(--dw-cream);
	color: var(--dw-teal-deep);
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.woocommerce form.login,
.woocommerce form.register {
	border: 1px solid var(--dw-line);
	border-radius: var(--dw-r-lg);
	padding: clamp(1.25rem, 3vw, 2rem);
}

/* Related products block on the single product template */
.dw-related-products {
	padding-block: clamp(2rem, 5vw, 3.5rem);
}

.dw-related-products h2,
.wp-block-woocommerce-product-collection > h2 {
	font-size: clamp(1.375rem, 2.6vw, 1.75rem);
	margin-block: 0 clamp(1.25rem, 3vw, 1.75rem);
	text-align: center;
}