/*
 * Fivany cart / checkout / order confirmation.
 *
 * WooCommerce 11 renders all three as blocks, hydrated client-side.
 * Opnar's cart is a two-column layout: cream item cards holding white
 * image slots on the left, a sticky white summary card on the right.
 */

/* ── Shared page frame ─────────────────────────────────────────── */

.woocommerce-cart .site-main,
.woocommerce-checkout .site-main,
.woocommerce-order-received .site-main {
	font-family: var(--fv-font);
	font-size: 13px;
}

.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header {
	padding: 4px 0 0;
	margin-bottom: 12px;
	text-align: left;
}

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title,
.woocommerce-order-received .entry-title {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.02em;
	text-align: left;
	margin: 0;
}

/* ── Two-column layout ─────────────────────────────────────────── */

.wc-block-components-sidebar-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 20px;
	align-items: flex-start;
}

@media (max-width: 1023px) {
	.wc-block-components-sidebar-layout {
		grid-template-columns: 1fr;
	}
}

.wc-block-components-main,
.wc-block-cart__main,
.wc-block-checkout__main {
	padding: 0;
	width: auto;
	float: none;
}

.wc-block-components-sidebar,
.wc-block-cart__sidebar,
.wc-block-checkout__sidebar {
	padding: 0;
	width: auto;
	float: none;
	position: sticky;
	top: 92px;
}

/* ── Cart item cards ───────────────────────────────────────────── */

.wc-block-cart-items,
table.wc-block-cart-items {
	border: 0;
	border-collapse: separate;
	border-spacing: 0 10px;
	width: 100%;
	margin: 0;
}

.wc-block-cart-items thead {
	display: none;
}

.wc-block-cart-items__row,
tr.wc-block-cart-items__row {
	background: var(--fv-cream);
	border-radius: var(--fv-radius-lg);
	box-shadow: var(--fv-shadow-sm);
}

.wc-block-cart-items__row td {
	border: 0;
	padding: 14px 12px;
	background: transparent;
	vertical-align: top;
}

.wc-block-cart-items__row td:first-child {
	border-radius: var(--fv-radius-lg) 0 0 var(--fv-radius-lg);
	padding-left: 14px;
}

.wc-block-cart-items__row td:last-child {
	border-radius: 0 var(--fv-radius-lg) var(--fv-radius-lg) 0;
	padding-right: 14px;
}

.wc-block-cart-item__image img {
	background: var(--fv-surface);
	border-radius: var(--fv-radius-md);
	width: 88px;
	height: 88px;
	object-fit: cover;
}

.wc-block-components-product-name {
	font-size: 13px;
	font-weight: 600;
	color: var(--fv-ink);
	line-height: 1.35;
	text-decoration: none;
}

.wc-block-components-product-name:hover {
	color: var(--fv-accent);
}

.wc-block-components-product-metadata {
	font-size: 11px;
	color: var(--fv-ink-3);
	font-family: var(--fv-mono);
	letter-spacing: 0.02em;
	margin-top: 3px;
}

.wc-block-cart-item__remove-link {
	font-size: 11px;
	color: var(--fv-ink-3);
	text-decoration: underline;
	font-family: var(--fv-mono);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

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

/* ── Quantity stepper ──────────────────────────────────────────── */

.wc-block-components-quantity-selector {
	background: var(--fv-surface);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius-md);
	max-width: 106px;
	overflow: hidden;
}

.wc-block-components-quantity-selector::after {
	border: 0;
}

.wc-block-components-quantity-selector__input {
	font-family: var(--fv-mono);
	font-size: 13px;
	font-weight: 600;
	color: var(--fv-ink);
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 6px 0;
}

.wc-block-components-quantity-selector__button {
	color: var(--fv-ink-2);
	font-weight: 700;
	background: transparent;
	border: 0;
	transition: background 0.15s ease, color 0.15s ease;
}

.wc-block-components-quantity-selector__button:hover:not(:disabled) {
	background: var(--fv-accent-soft);
	color: var(--fv-accent);
}

/* ── Prices ────────────────────────────────────────────────────── */

.wc-block-components-product-price,
.wc-block-components-formatted-money-amount,
.wc-block-formatted-money-amount,
.wc-block-components-totals-item__value {
	font-family: var(--fv-mono);
	font-variant-numeric: tabular-nums;
	color: var(--fv-ink);
}

.wc-block-components-product-price__value.is-discounted,
.wc-block-cart-item__total .wc-block-components-product-price__value {
	color: var(--fv-hot);
	font-weight: 800;
}

.wc-block-components-product-price__regular {
	color: var(--fv-ink-3);
	text-decoration: line-through;
	font-size: 11px;
}

/* ── Sidebar summary card ──────────────────────────────────────── */

.wc-block-components-sidebar .wc-block-components-totals-wrapper,
.wc-block-cart__sidebar > *,
.wc-block-checkout__sidebar > * {
	background: var(--fv-surface);
}

.wc-block-components-sidebar .wc-block-components-panel,
.wc-block-cart__totals-title {
	font-family: var(--fv-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fv-ink-2);
}

.wc-block-components-totals-item {
	font-size: 12.5px;
	padding: 7px 0;
}

.wc-block-components-totals-item__label {
	color: var(--fv-ink-2);
}

.wc-block-components-totals-wrapper {
	border-top: 1px solid var(--fv-line);
	padding: 10px 14px;
}

.wc-block-components-totals-footer-item {
	border-top: 1px solid var(--fv-line-2);
	padding-top: 12px;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
	font-weight: 700;
	color: var(--fv-ink);
	font-size: 13px;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--fv-hot);
	font-weight: 800;
	font-size: 18px;
}

/* ── Buttons ───────────────────────────────────────────────────── */

.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	background: var(--fv-accent);
	color: #fff;
	border: 0;
	border-radius: var(--fv-radius-md);
	font-family: var(--fv-font);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 12.5px;
	min-height: 44px;
	transition: background 0.15s ease;
}

.wc-block-components-button:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background: var(--fv-accent-hover);
	color: #fff;
}

.wc-block-components-button:not(.is-link):disabled {
	background: var(--fv-ink-soft);
	color: #fff;
}

/* Text-style buttons (e.g. "Apply coupon") shouldn't become orange slabs. */
.wc-block-components-button.is-link,
.wc-block-components-totals-coupon .wc-block-components-button.is-link {
	background: transparent;
	color: var(--fv-accent);
	min-height: 0;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 600;
	text-decoration: underline;
}

/* ── Form fields ───────────────────────────────────────────────── */

.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-block-components-select__container,
.wc-block-components-combobox-control input {
	border-radius: var(--fv-radius-md);
	border-color: var(--fv-line);
	font-family: var(--fv-font);
	font-size: 13px;
	background: var(--fv-surface);
}

.wc-block-components-text-input.is-active label,
.wc-block-components-text-input label {
	font-size: 12.5px;
	color: var(--fv-ink-3);
}

/* ── Payment method / shipping option rows ─────────────────────── */

.wc-block-components-radio-control__option {
	border-radius: var(--fv-radius-md);
	font-size: 12.5px;
}

.wc-block-components-radio-control__option--checked-option-highlighted,
.wc-block-components-radio-control-accordion-option--checked-option-highlighted {
	border-color: var(--fv-accent);
	box-shadow: 0 0 0 1px var(--fv-accent);
	background: var(--fv-accent-soft);
}

.wc-block-components-radio-control__label {
	font-weight: 600;
	color: var(--fv-ink);
}

.wc-block-components-radio-control__secondary-label,
.wc-block-components-radio-control__description {
	font-family: var(--fv-mono);
	font-size: 11px;
	color: var(--fv-ink-3);
}

/* ── Checkout step headings ────────────────────────────────────── */

.wc-block-components-checkout-step__title {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--fv-ink);
}

.wc-block-components-checkout-step__heading-content,
.wc-block-components-checkout-step__description {
	font-size: 12px;
	color: var(--fv-ink-3);
}

.wc-block-components-checkout-step__container::after {
	border-color: var(--fv-line);
}

/* ── Notices ───────────────────────────────────────────────────── */

.wc-block-components-notice-banner {
	border-radius: var(--fv-radius-lg);
	font-size: 12.5px;
	font-family: var(--fv-font);
}

.wc-block-components-notice-banner.is-success {
	border-color: var(--fv-good);
	background: #f2fbf6;
}

.wc-block-components-notice-banner.is-error {
	border-color: var(--fv-hot);
	background: #fff5f5;
}

/* ══════════════════════════════════════════════════════════════
   ORDER CONFIRMATION / THANK YOU
   ══════════════════════════════════════════════════════════════ */

.woocommerce-order-received .woocommerce-thankyou-order-received,
.wc-block-order-confirmation-status {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.015em;
	color: var(--fv-ink);
	background: var(--fv-cream);
	border-left: 3px solid var(--fv-good);
	border-radius: var(--fv-radius-lg);
	padding: 16px 18px;
	margin-bottom: 18px;
	box-shadow: var(--fv-shadow-sm);
}

.woocommerce-order-overview,
ul.woocommerce-order-overview.woocommerce-thankyou-order-details {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 10px;
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	border: 0;
}

.woocommerce-order-overview li {
	background: var(--fv-surface);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius-lg);
	padding: 12px 14px;
	float: none;
	margin: 0;
	border-right: 1px solid var(--fv-line);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-family: var(--fv-mono);
	color: var(--fv-ink-3);
	box-shadow: var(--fv-shadow-sm);
}

.woocommerce-order-overview li strong {
	display: block;
	margin-top: 5px;
	font-family: var(--fv-mono);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fv-ink);
}

.woocommerce-order-overview li.woocommerce-order-overview__total strong {
	color: var(--fv-hot);
}

.woocommerce-order-details__title,
.woocommerce-column__title,
.wc-block-order-confirmation-summary + h2,
.woocommerce-order-received h2 {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-family: var(--fv-mono);
	color: var(--fv-ink);
	padding-bottom: 9px;
	border-bottom: 1px solid var(--fv-line);
	margin: 22px 0 14px;
}

/* ── Order details: give the name the width ─────────────────────
 *
 * The totals column was claiming 37% of the table at desktop and 45% on a
 * phone to hold about 75px of numerals, which squeezed the item name and
 * wrapped it over three lines on mobile.
 *
 * `width: 1%` in an auto-layout table is the idiom for "shrink to content":
 * the browser gives the column its minimum and hands every remaining pixel
 * to the other one. `nowrap` keeps an amount from breaking mid-figure while
 * still letting the shipping method's description below it wrap, so that
 * line cannot force the column wide again.
 *
 * thead, tbody and tfoot share column widths, so the Subtotal / Shipping /
 * Total amounts stay aligned with the line amounts without a second rule.
 */
.woocommerce-order-received .woocommerce-order-details table.shop_table .product-total {
	width: 1%;
	white-space: nowrap;
}

/*
 * The shipping row carries the method name after the amount. Shrinking the
 * column left it wrapping mid-phrase across three lines, so it drops to its
 * own line and reads as a caption under the amount — which is what it is.
 * `normal` undoes the `nowrap` inherited from the cell above, or the caption
 * would push the column wide again and undo the width this rule just freed.
 */
.woocommerce-order-received .woocommerce-order-details table.shop_table .shipped_via {
	display: block;
	white-space: normal;
	margin-top: 2px;
	font-size: 10.5px;
	line-height: 1.4;
	color: var(--fv-ink-3);
}

/*
 * A floor for the column where there is room for one. Pure shrink-to-fit
 * sized it to the widest amount and nothing else, so the footer's longer
 * values — the shipping method, "Cash on delivery" — broke across three
 * lines. 165px is what the longest of them needs on one line, and the name
 * still keeps about 88% of the table. Desktop only: on a phone the same
 * floor would claim back nearly half the row, and a caption wrapping there
 * costs less than the name being squeezed again.
 */
@media (min-width: 768px) {
	.woocommerce-order-received .woocommerce-order-details table.shop_table .product-total {
		min-width: 165px;
	}
}

.woocommerce-order-received .woocommerce-order table.shop_table,
.wc-block-order-confirmation-totals table {
	background: var(--fv-surface);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius-lg);
	overflow: hidden;
	font-size: 12.5px;
	width: 100%;
}

.woocommerce-order-received table.shop_table tfoot th,
.woocommerce-order-received table.shop_table tfoot td {
	font-family: var(--fv-mono);
}

/* The order-details tfoot rows carry no classes, and with COD the last
 * row is "Payment method", not the total — so nothing here may key off
 * position. The total already reads in red on the overview cards above. */
.woocommerce-order-received table.shop_table tfoot th {
	font-family: var(--fv-mono);
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--fv-ink-3);
	font-weight: 700;
}

.woocommerce-order-received table.shop_table tfoot td .woocommerce-Price-amount {
	font-weight: 700;
	color: var(--fv-ink);
}

.wc-block-order-confirmation-summary {
	background: var(--fv-cream);
	border-radius: var(--fv-radius-lg);
	box-shadow: var(--fv-shadow-sm);
	padding: 16px 18px;
}

.wc-block-order-confirmation-summary-list-item__key {
	font-family: var(--fv-mono);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fv-ink-3);
}

.wc-block-order-confirmation-summary-list-item__value {
	font-family: var(--fv-mono);
	font-weight: 700;
	color: var(--fv-ink);
}

/* ══════════════════════════════════════════════════════════════
   Layout corrections
   ══════════════════════════════════════════════════════════════ */

/* WooCommerce sizes the sidebar layout as percentage columns
 * (`.wc-block-components-sidebar-layout .wc-block-components-main
 * { width: 65% }`) at two-class specificity. We drive the columns with
 * grid instead, so the percentage has to go — match its specificity. */
.wc-block-components-sidebar-layout .wc-block-components-main,
.wc-block-components-sidebar-layout .wc-block-components-sidebar {
	width: auto;
	max-width: none;
	flex: none;
	padding: 0;
}

.wc-block-components-sidebar-layout table.wc-block-cart-items {
	width: 100%;
	table-layout: auto;
}

/* Block buttons inherit an underline from the anchor reset. */
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-components-button__text {
	text-decoration: none;
}

/* Tighten the run-in above the cart/checkout body. */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
	margin-top: 0;
}

.woocommerce-cart .woocommerce-notices-wrapper:empty,
.woocommerce-checkout .woocommerce-notices-wrapper:empty {
	display: none;
}

.wc-block-components-sidebar-layout {
	margin-top: 4px;
}

/* Storefront's page header runs into the order/cart body. */
.woocommerce-order-received .entry-header,
.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header,
.storefront-full-width-content.woocommerce-cart .entry-header,
.storefront-full-width-content.woocommerce-checkout .entry-header,
.storefront-full-width-content.woocommerce-account .entry-header {
	padding: 6px 0 0;
	margin: 0 0 14px;
	text-align: left;
}

/* Block checkout step headings render at the block library's own large
 * scale; bring them down to the storefront's heading rhythm. */
.wc-block-checkout h2.wc-block-components-title,
.wc-block-checkout__main h2.wc-block-components-title,
h2.wc-block-components-checkout-step__title,
.wc-block-components-checkout-step__title {
	font-family: var(--fv-font);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--fv-ink);
	line-height: 1.3;
	margin-bottom: 10px;
}

.wc-block-components-sidebar h2.wc-block-components-title,
.wp-block-woocommerce-checkout-order-summary-block h2.wc-block-components-title {
	font-family: var(--fv-mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fv-ink-2);
}

/* ══════════════════════════════════════════════════════════════
   CHECKOUT — Opnar layout
   Focused page: no footer, no header on mobile, three sidebar cards.
   ══════════════════════════════════════════════════════════════ */

.fv-checkout-focus .site-footer {
	display: none;
}

.fv-checkout-focus .site-main {
	margin-bottom: 32px;
}

/*
 * Breadcrumb goes at every width — it is a second navigation on a page that
 * should have none. The header itself is no longer hidden here: checkout
 * renders its own (inc/checkout-layout.php) in place of the shop's.
 */
.fv-checkout-focus .storefront-breadcrumb,
.fv-checkout-focus .woocommerce-breadcrumb {
	display: none;
}

.fv-checkout-focus .site-content {
	padding-top: 0;
}

/* ══════════════════════════════════════════════════════════════
   Checkout header — the mark, and a way to ask a question
   ══════════════════════════════════════════════════════════════ */

.fv-co-hdr {
	border-bottom: 1px solid var(--fv-line);
	background: #fff;
}

.fv-co-hdr-in {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	max-width: var(--fv-maxw, 1440px);
	margin: 0 auto;
	padding: 12px 16px;
}

/*
 * The lockup is shared with the shop header, which sizes its own mark. Here
 * it is the only thing on the left, so it is capped rather than left to the
 * 44px it takes when it sits beside a search field.
 */
.fv-co-hdr .lock {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

.fv-co-hdr .lock .brandmark {
	max-height: 30px;
	width: auto;
}

.fv-co-help {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 12px 6px 8px;
	border: 1px solid var(--fv-line);
	border-radius: 999px;
	background: var(--fv-cream);
	text-decoration: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.fv-co-help:hover,
.fv-co-help:focus-visible {
	border-color: var(--fv-accent);
	background: var(--fv-accent-soft);
}

.fv-co-help .ic {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex: none;
	border-radius: 50%;
	background: #25d366;
	color: #fff;
}

.fv-co-help .ic svg {
	width: 16px;
	height: 16px;
}

.fv-co-help .tx {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}

.fv-co-help .tx .k {
	font-family: 'Hind Siliguri', var(--fv-sans);
	font-size: 11px;
	font-weight: 500;
	color: var(--fv-ink-3);
}

.fv-co-help .tx .v {
	font-family: var(--fv-mono);
	font-size: 12.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--fv-ink);
}

/* Narrow phones: the number is the least useful half of the chip. */
@media (max-width: 400px) {
	.fv-co-help {
		padding: 6px;
	}

	.fv-co-help .tx {
		display: none;
	}
}

@media (min-width: 1024px) {
	.fv-co-hdr-in {
		padding: 14px 24px;
	}

	.fv-co-hdr .lock .brandmark {
		max-height: 34px;
	}
}

/*
 * The page title is hidden from sight, not from the page.
 *
 * It used to be `display: none` because the eyebrow row carried a visible
 * heading; with that row gone, hiding it outright would leave the checkout
 * with no heading at all — nothing for a screen reader to announce the page
 * by, and nothing for "skip to content" to land on. Clipped instead, so it
 * stays in the accessibility tree while the design stays clean.
 */
.fv-checkout-focus .entry-header {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ── Two-column frame ──────────────────────────────────────────── */

.woocommerce-checkout form.checkout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	/*
	 * Row 1 sizes to the address; row 2 absorbs everything left over.
	 *
	 * With both rows `auto`, the review rail — which spans them — pushed its
	 * surplus height into row 1, and the address is aligned to the top of its
	 * row, so 46px of that surplus appeared as a gap between the address and
	 * the promo card beneath it. Giving row 2 the `1fr` sends the slack below
	 * the promo, where nothing is looking at it.
	 */
	grid-template-rows: auto 1fr;
	/*
	 * Column gap and row gap are different measurements here.
	 *
	 * 18px separates the two desktop columns. The vertical gap between
	 * stacked cards is set to the same distance the header sits above the
	 * first card, so the page has one spacing rhythm from the top down
	 * instead of a tight header and loose cards.
	 */
	column-gap: 18px;
	row-gap: 8px;
	align-items: start;
}

/*
 * Left column: address, then the promo card beneath it.
 *
 * Both are pinned to `start` so neither stretches to match the review rail,
 * which is usually the taller of the two columns.
 */
.woocommerce-checkout #customer_details {
	grid-column: 1;
	grid-row: 1;
	align-self: start;
	width: auto;
	float: none;
	/*
	 * Storefront gives `.col2-set` a percentage right margin for its float
	 * grid — 58px here — which this grid does not need. It was invisible
	 * while nothing sat below the address; with the promo card beneath it,
	 * the address was suddenly 58px narrower than the card under it.
	 */
	margin-right: 0;
}

.woocommerce-checkout .fv-co-promo {
	grid-column: 1;
	grid-row: 2;
	align-self: start;
}

.woocommerce-checkout #order_review_heading {
	display: none;
}

.woocommerce-checkout #order_review {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: start;
	width: auto;
	float: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: sticky;
	top: 20px;
	background: transparent;
	border: 0;
	padding: 0;
	box-shadow: none;
}

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
	width: auto;
	float: none;
}

/*
 * Storefront's clearfix pseudo-elements are grid items.
 *
 * `.woocommerce form::before/::after` set `content: ""; display: table` for a
 * float layout this grid does not use — but a grid counts them as children
 * and auto-places them. They took the first and last rows at 0px each, and
 * the 18px gap after the empty first row pushed the address card down: the
 * checkout opened 22px below the header where the home page opens at 4px.
 * They have no job here.
 */
.woocommerce-checkout form.checkout::before,
.woocommerce-checkout form.checkout::after {
	display: none;
}

@media (max-width: 1023px) {
	.woocommerce-checkout form.checkout {
		grid-template-columns: 1fr;
		/* Matches the 4px the header sits above the first card at this width. */
		row-gap: 4px;
	}

	.woocommerce-checkout #order_review {
		gap: 4px;
	}

	.woocommerce-checkout #customer_details,
	.woocommerce-checkout .fv-co-promo,
	.woocommerce-checkout #order_review {
		grid-column: 1;
		grid-row: auto;
		position: static;
	}
}

/* ── Card shell, shared by address + sidebar cards ─────────────── */

.woocommerce-checkout .woocommerce-billing-fields,
.fv-co-card {
	background: var(--fv-surface);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius-lg);
	overflow: hidden;
	box-shadow: var(--fv-shadow-sm);
}

/* form-billing.php's own heading — replaced by the header band. */
/*
 * The billing heading is hidden from sight, not from the page.
 *
 * With the card's own header gone, `display: none` here would leave the
 * field group with no name at all — a screen reader would read four inputs
 * with no idea what they collectively are. Clipped instead, so the group
 * keeps its heading while the card stays untitled on screen.
 */
.woocommerce-checkout .woocommerce-billing-fields > h3 {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.fv-co-card-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	padding: 13px 16px;
	border-bottom: 1px solid var(--fv-line);
	background: var(--fv-surface);
}

.fv-co-card-head h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--fv-ink);
}

.fv-co-card-head span {
	font-size: 12px;
	color: var(--fv-ink-3);
}


.fv-co-card-title {
	margin: 0;
	padding: 13px 16px 10px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--fv-ink);
}

/* ── Address form body ─────────────────────────────────────────── */

.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px 16px;
	background: var(--fv-cream);
	padding: 20px 16px 22px;
}

@media (max-width: 560px) {
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
		grid-template-columns: 1fr;
	}
}

.woocommerce-checkout .form-row {
	margin: 0;
	padding: 0;
	float: none;
	width: auto;
	position: relative;
}

.woocommerce-checkout .form-row-wide {
	grid-column: 1 / -1;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
	width: 100%;
	border: 1px solid var(--fv-line-2);
	border-radius: var(--fv-radius-lg);
	background: var(--fv-surface);
	/*
	 * 16px, for two reasons that happen to agree.
	 *
	 * The address is the one thing a customer actually comes to this page to
	 * do — everything else they settled on the product and cart pages — yet at
	 * 14px it was set smaller than the order summary beside it, so the page
	 * read as though the totals were the task and the form an afterthought.
	 *
	 * 16px is also the threshold below which iOS Safari zooms the viewport on
	 * focus. At 14px every tap on name, phone or address jolted the layout and
	 * left the customer scrolled somewhere they did not ask to be.
	 */
	font-size: 16px;
	font-family: var(--fv-font);
	color: var(--fv-ink);
	box-shadow: none;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
	height: 52px;
	padding: 0 14px;
}

/*
 * The address box, a little shorter.
 *
 * 104px was two lines of air taller than the three lines it holds: 14px of
 * padding each side plus 3 × 21px of text is 91px, and the min-height pushed
 * it past that for no content. 12px padding and an 88px floor fit the same
 * three lines with the box no longer looking half-empty.
 */
.woocommerce-checkout .form-row textarea {
	padding: 12px 14px;
	min-height: 88px;
	resize: none;
	line-height: 1.5;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
	border-color: var(--fv-accent);
	outline: 0;
}

.woocommerce-checkout .form-row select:disabled {
	background: var(--fv-muted);
	color: var(--fv-ink-3);
	cursor: not-allowed;
}

.woocommerce-checkout #billing_phone {
	font-family: var(--fv-mono);
}

.woocommerce-checkout .fv-hidden-field {
	display: none !important;
}

/* ── Notched (floating) labels ─────────────────────────────────── */

.woocommerce-checkout .fv-float > label {
	position: absolute;
	top: -8px;
	left: 12px;
	z-index: 2;
	margin: 0;
	padding: 0 6px;
	background: var(--fv-cream);
	font-family: var(--fv-font);
	/* Still subordinate to the value it names, but no longer the smallest
	   text on a page whose whole purpose is this form. */
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fv-ink);
	line-height: 1.2;
}

.woocommerce-checkout .fv-float .required {
	color: var(--fv-hot);
	text-decoration: none;
	border: 0;
	margin-left: 1px;
}

/* District + thana carry no label in Opnar — the value is the label. */
.woocommerce-checkout .fv-nolabel > label {
	display: none;
}

.woocommerce-checkout .form-row label .optional {
	display: none;
}

/* ── Hidden sections ───────────────────────────────────────────── */

.woocommerce-checkout #ship-to-different-address,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout .woocommerce-form-coupon-toggle {
	display: none;
}

/* ── Sidebar card 1: Checkout Summary ──────────────────────────── */

.woocommerce-checkout .fv-co-summary table.shop_table {
	border: 0;
	border-radius: 0;
	width: 100%;
	font-size: 13.5px;
	margin: 0;
	background: transparent;
}

.woocommerce-checkout .fv-co-summary table.shop_table thead {
	display: none;
}

.woocommerce-checkout .fv-co-summary table.shop_table th,
.woocommerce-checkout .fv-co-summary table.shop_table td {
	border: 0;
	padding: 9px 16px;
	background: transparent;
	vertical-align: middle;
}

.woocommerce-checkout .fv-co-summary table.shop_table tbody tr:last-child td,
.woocommerce-checkout .fv-co-summary table.shop_table tbody tr:last-child th {
	padding-bottom: 14px;
	border-bottom: 1px solid var(--fv-line);
}

.woocommerce-checkout .fv-co-summary .product-name {
	color: var(--fv-ink-2);
	font-weight: 500;
	font-size: 13px;
}

.woocommerce-checkout .fv-co-summary .product-quantity {
	font-family: var(--fv-mono);
	color: var(--fv-ink-3);
	font-weight: 500;
}

.woocommerce-checkout .fv-co-summary tfoot th {
	font-family: var(--fv-font);
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--fv-ink-2);
	text-align: left;
}

.woocommerce-checkout .fv-co-summary tfoot td {
	text-align: right;
	font-family: var(--fv-mono);
	font-weight: 600;
	color: var(--fv-ink);
}

.woocommerce-checkout .fv-co-summary tfoot tr {
	border-top: 1px solid var(--fv-line);
}

.woocommerce-checkout .fv-co-summary tfoot tr:first-child {
	border-top: 0;
}

.fv-free {
	color: var(--fv-good);
	font-family: var(--fv-mono);
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* WooCommerce's own total row, relabelled "Payable Total". */
.woocommerce-checkout .fv-co-summary tfoot tr.order-total th {
	font-size: 15px;
	font-weight: 700;
	color: var(--fv-ink);
	padding-top: 14px;
	padding-bottom: 16px;
}

.woocommerce-checkout .fv-co-summary tfoot tr.order-total td {
	font-size: 17px;
	font-weight: 800;
	color: var(--fv-ink);
	padding-top: 14px;
	padding-bottom: 16px;
}

.woocommerce-checkout .fv-co-summary tfoot tr.order-total {
	border-top: 1px solid var(--fv-line-2);
}

/* ── Sidebar card 2: promo ─────────────────────────────────────── */

.woocommerce-checkout .fv-coupon {
	display: flex;
	gap: 10px;
	align-items: stretch;
	padding: 0 16px 4px;
}

.woocommerce-checkout .fv-coupon input.input-text {
	flex: 1 1 auto;
	min-width: 0;
	/* Field and button share one height so the pair reads as one control. */
	height: 40px;
	border: 1px solid var(--fv-line-2);
	border-radius: var(--fv-radius-lg);
	background: var(--fv-surface);
	padding: 0 14px;
	/*
	 * Also 16px: iOS zooms on any focused input below it, and the coupon
	 * field is no exception. The uppercase treatment and the narrower box
	 * keep it reading as secondary to the address without shrinking the text.
	 */
	font-size: 16px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--fv-ink);
	font-family: var(--fv-font);
}

/*
 * The prompt is quieter than what gets typed into it.
 *
 * The field has to be 16px so iOS does not zoom on focus, but at 16px
 * uppercase the placeholder ran the full width of the card and pulled the eye
 * away from the address form above — the opposite of the order of importance
 * on this page. Styling the placeholder alone keeps the field itself at 16px,
 * so an entered code still reads large and uppercase.
 */
.woocommerce-checkout .fv-coupon input.input-text::placeholder {
	text-transform: none;
	font-size: 14px;
	letter-spacing: 0;
	color: var(--fv-ink-3);
}

.woocommerce-checkout .fv-coupon input.input-text:focus {
	border-color: var(--fv-accent);
	outline: 0;
}

/*
 * Always a live button.
 *
 * It greyed out whenever the field was empty — which is most of the time —
 * so the control a customer glanced at was a dead slab, and on a touch
 * screen there is no hover to suggest otherwise. It stays lit and answers on
 * click instead.
 */
.woocommerce-checkout .fv-coupon button.button {
	flex: 0 0 auto;
	height: 40px;
	padding: 0 20px;
	background: var(--fv-accent);
	border: 0;
	border-radius: var(--fv-radius-lg);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	white-space: nowrap;
}

.woocommerce-checkout .fv-coupon button.button:hover,
.woocommerce-checkout .fv-coupon button.button:focus-visible {
	background: var(--fv-accent-hover);
}

/*
 * Undo is not a call to action.
 *
 * With a code applied the button's job is to take it off again, which should
 * not compete with the order button below it — so it drops to an outline.
 */
.woocommerce-checkout .fv-coupon button.button.is-remove {
	background: transparent;
	border: 1px solid var(--fv-line-2);
	color: var(--fv-ink-2);
}

.woocommerce-checkout .fv-coupon button.button.is-remove:hover,
.woocommerce-checkout .fv-coupon button.button.is-remove:focus-visible {
	background: var(--fv-cream);
	border-color: var(--fv-ink-3);
	color: var(--fv-ink);
}

.woocommerce-checkout .fv-co-promo.is-busy {
	opacity: 0.6;
	pointer-events: none;
}

.woocommerce-checkout .fv-coupon-msg {
	padding: 0 16px;
	font-size: 11.5px;
	line-height: 1.5;
}

.woocommerce-checkout .fv-coupon-msg:not(:empty) {
	padding-bottom: 14px;
}

.woocommerce-checkout .fv-coupon-msg.is-error {
	color: var(--fv-hot);
}

.woocommerce-checkout .fv-coupon-msg.is-success {
	color: var(--fv-good);
}

/* ── Sidebar card 3: payment ───────────────────────────────────── */

.woocommerce-checkout .fv-co-payment #payment {
	background: transparent;
	border-radius: 0;
	margin: 0;
	padding: 14px 16px 16px;
}

.woocommerce-checkout #payment ul.payment_methods {
	border: 0;
	padding: 0;
	margin: 0 0 14px;
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
	/*
	 * Radio | icon | text — a two-row grid so the description aligns under
	 * the method name instead of starting to the left of it, which is what
	 * the default float-y markup produced.
	 */
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 10px;
	row-gap: 2px;
	border: 1px solid var(--fv-line);
	background: var(--fv-surface);
	border-radius: var(--fv-radius-lg);
	padding: 13px 14px;
	margin: 0;
	list-style: none;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.woocommerce-checkout #payment ul.payment_methods li + li {
	margin-top: 10px;
}

.woocommerce-checkout #payment ul.payment_methods li:has( input:checked ) {
	border-color: var(--fv-accent);
	background: var(--fv-accent-soft);
}

.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
	grid-column: 1;
	grid-row: 1;
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--fv-accent);
}

.woocommerce-checkout #payment ul.payment_methods li label {
	grid-column: 2 / span 2;
	grid-row: 1;
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	padding: 0;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--fv-ink);
	text-transform: none;
	cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods li label img {
	max-height: 22px;
	width: auto;
	margin: 0;
}

.woocommerce-checkout #payment div.payment_box {
	grid-column: 2 / span 2;
	grid-row: 2;
	background: transparent;
	color: var(--fv-ink-3);
	font-size: 12px;
	line-height: 1.5;
	padding: 0;
	margin: 0;
	width: auto;
}

.woocommerce-checkout #payment div.payment_box::before,
.woocommerce-checkout #payment div.payment_box::after {
	display: none;
}

.woocommerce-checkout #payment div.payment_box p {
	margin: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	border: 0;
	padding: 0;
	margin: 0;
	list-style: none;
}

/* Empty once the privacy blurb is removed — stops it adding dead space. */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper:empty {
	display: none;
}

.woocommerce-checkout .woocommerce-privacy-policy-text {
	font-size: 11px;
	color: var(--fv-ink-3);
	line-height: 1.5;
	margin: 0 0 12px;
}

.woocommerce-checkout .woocommerce-privacy-policy-text p {
	margin: 0;
}

.woocommerce-checkout #payment .place-order {
	padding: 0;
	margin: 0;
}

.woocommerce-checkout #place_order {
	width: 100%;
	background: var(--fv-accent);
	color: #fff;
	border: 0;
}

/*
 * The funnel's three buttons are one button in three places.
 *
 * Add to Bag, Start Checkout and this one are the same decision at three
 * stages, so they are the same object: 46px tall, Inter 13/700, the same
 * tracking and the same corner. Add to Bag is the reference; the other two
 * follow it.
 *
 * The selector is heavier than it looks because it has to be. WooCommerce
 * ships `#payment .place-order .button { font-size: 1.41575em }` — an id and
 * two classes — which outranked the plain `#place_order` rule above and was
 * quietly rendering this button at 18.4px while the stylesheet said 14. Two
 * ids and a type selector puts the question beyond doubt.
 */
#payment .place-order button#place_order {
	min-height: 46px;
	height: 46px;
	border-radius: var(--fv-radius-md);
	/*
	 * Type taken from the coupon Apply button, which is the reference for
	 * every button in the funnel: Inter 14/700 with 0.06em of tracking.
	 */
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.woocommerce-checkout #place_order:hover {
	background: var(--fv-accent-hover);
}

/* ── Mobile: sticky place-order bar ────────────────────────────── */

@media (max-width: 1023px) {
	/*
	 * Only the button is pinned. `.place-order` also wraps the terms and
	 * privacy copy, so fixing the whole row dragged that text into the bar
	 * and made it three lines tall — Opnar's bar is the button alone.
	 */
	.fv-checkout-focus .woocommerce-checkout #place_order {
		position: fixed;
		left: 14px;
		right: 14px;
		bottom: calc(12px + env(safe-area-inset-bottom, 0px));
		z-index: 60;
		width: auto;
		margin: 0;
		box-shadow: 0 6px 22px rgba(255, 107, 0, 0.35);
	}

	/* Room so the bar never covers the last field. */
	.fv-checkout-focus .site-main {
		padding-bottom: 92px;
	}
}

/* ── Corrections ───────────────────────────────────────────────── */

/* WooCommerce's floated half-width rows fight the grid cells. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-first,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-last,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper .form-row-wide,
.woocommerce-checkout .fv-co-promo .form-row-first,
.woocommerce-checkout .fv-co-promo .form-row-last {
	width: 100%;
	float: none;
	margin: 0;
}



/* Checkout is a focused task — no breadcrumb trail. */
.fv-checkout-focus .storefront-breadcrumb,
.fv-checkout-focus .woocommerce-breadcrumb {
	display: none;
}

/* Only the amount column is mono / nowrap. Applying `white-space: nowrap`
 * to every <td> also hit `.product-name`, which forced the table wider
 * than the card and let `overflow: hidden` clip the whole amount column. */
.woocommerce-checkout .fv-co-summary td.product-total,
.woocommerce-checkout .fv-co-summary tfoot td {
	text-align: right;
	font-family: var(--fv-mono);
	white-space: nowrap;
	vertical-align: top;
	width: 1%;
}

.woocommerce-checkout .fv-co-summary td.product-name {
	text-align: left;
	white-space: normal;
	word-break: break-word;
}

.woocommerce-checkout .fv-co-summary .product-quantity {
	white-space: nowrap;
}

/* With the privacy blurb removed, the button sat flush against the
 * gateway box — restore the gap. */
.woocommerce-checkout #payment .place-order {
	margin-top: 14px;
}

@media (max-width: 1023px) {
	.fv-checkout-focus .woocommerce-checkout #payment .place-order {
		margin-top: 0;
	}
}

/* ── Payment row: bottom edge + radio ──────────────────────────────
 * WooCommerce strips the last row's bottom padding and border with
 *   #payment .payment_methods li:last-child:not(.woocommerce-notice)
 *     { padding-bottom: 0; border-bottom: 0 }
 * which assumes rows are separator-divided list items. Our rows are
 * self-contained cards, and with a single gateway that row is ALSO the
 * last child — so the card rendered with an open bottom edge and its
 * description flush against it. Matched specificity to restore both. */
.woocommerce-checkout #payment .payment_methods li:last-child:not(.woocommerce-notice) {
	padding-bottom: 13px;
	border-bottom: 1px solid var(--fv-line);
}

.woocommerce-checkout #payment .payment_methods li:last-child:not(.woocommerce-notice):has( input:checked ) {
	border-bottom-color: var(--fv-accent);
}

/* WooCommerce hides the radio when a single gateway is available
 * (checkout.js: `if ( 1 === $payment_methods.length ) $payment_methods.eq(0).hide()`).
 * That is deliberate UX and sets an inline style, so CSS cannot and should
 * not fight it. These rules size the radio for the multi-gateway case, when
 * it IS shown. */
.woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
	width: 17px;
	height: 17px;
	margin: 0;
	accent-color: var(--fv-accent);
}

.woocommerce-checkout #payment .payment_methods li img {
	float: none;
	max-height: 22px;
}

/* The method-name marker renders as `label::before` INSIDE the label, so the
 * name's text starts further in than the label's own box. The description
 * has to clear the same distance to line up beneath it:
 *
 *     13.44px  marker width
 *    +  7.30px marker margin-right
 *    +  9.00px label flex gap
 *    = 29.74px
 *
 * Measured, not guessed — an earlier 22px estimate left it visibly short.
 * The selector stays specific enough to beat WooCommerce's
 * `#payment .payment_methods li .payment_box { padding: 1.41575em }`. */
.woocommerce-checkout #payment .payment_methods li {
	--fv-pay-indent: 29.75px;
}

.woocommerce-checkout #payment .payment_methods li .payment_box {
	padding: 0 0 0 var(--fv-pay-indent);
}

/* The promo heading is a long string in a narrow card — step it down from
 * the summary card's 15px so it doesn't dominate the panel. */
.woocommerce-checkout .fv-co-promo .fv-co-card-title {
	font-size: 13.5px;
	padding-bottom: 12px;
}

/* The review table carries a ~35px bottom margin from WooCommerce's table
 * defaults, which left dead space under Payable Total. Scoped through the
 * #order_review id so it outranks whatever sets it. */
.woocommerce-checkout #order_review .fv-co-summary table.shop_table {
	margin: 0;
	padding-bottom: 0;
}

.woocommerce-checkout .fv-co-summary tfoot tr:last-child th,
.woocommerce-checkout .fv-co-summary tfoot tr:last-child td {
	padding-bottom: 16px;
}

/* ── Summary line thumbnails ───────────────────────────────────── */

.woocommerce-checkout .fv-co-summary td.product-name,
.woocommerce-order-received td.woocommerce-table__product-name {
	/* The quantity <strong> and variation data are appended by the template
	 * after the name, so the image floats and the rest of the line wraps
	 * beside it rather than forcing a grid over siblings we don't control. */
	overflow: hidden;
}

/* One rule for both surfaces: the thank-you page's order details table gets
 * the same line thumbnail as the checkout summary, so a placed order reads
 * like the cart the shopper reviewed a moment earlier. */
.woocommerce-checkout .fv-co-summary .fv-sum-thumb,
.woocommerce-order-received td.woocommerce-table__product-name .fv-sum-thumb {
	float: left;
	width: 46px;
	height: 46px;
	margin: 2px 10px 2px 0;
	object-fit: cover;
	background: var(--fv-surface);
	border: 1px solid var(--fv-line);
	border-radius: var(--fv-radius-md);
	display: block;
}

.woocommerce-checkout .fv-co-summary .fv-sum-name,
.woocommerce-order-received td.woocommerce-table__product-name .fv-sum-name {
	font-weight: 600;
	color: var(--fv-ink);
}

.woocommerce-checkout .fv-co-summary .variation {
	margin: 2px 0 0;
	font-family: var(--fv-mono);
	font-size: 10.5px;
	color: var(--fv-ink-3);
}

.woocommerce-checkout .fv-co-summary .variation dt,
.woocommerce-checkout .fv-co-summary .variation dd {
	display: inline;
	margin: 0;
	font-weight: 500;
}

.woocommerce-checkout .fv-co-summary tbody td {
	padding-top: 12px;
	padding-bottom: 12px;
}

/* ── District field (Select2) ──────────────────────────────────────
 * WooCommerce enhances the state select with Select2, whose default box
 * does not match a native <select>:
 *   - `.select2-selection__rendered` adds its own 8px left padding on top
 *     of the box's, pushing the text ~9px right of the Thana field's;
 *   - it renders as a 28px line top-aligned inside the 52px box, sitting
 *     ~11px above where the native select centres its text.
 * Laying the box out as flex fixes both at once. */

.woocommerce-checkout .form-row .select2-container {
	width: 100% !important;
}

.woocommerce-checkout .form-row .select2-container--default .select2-selection--single {
	display: flex;
	align-items: center;
	height: 52px;
	padding: 0 14px;
	border: 1px solid var(--fv-line-2);
	border-radius: var(--fv-radius-lg);
	background: var(--fv-surface);
	outline: 0;
}

.woocommerce-checkout .form-row .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce-checkout .form-row .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--fv-accent);
}

.woocommerce-checkout .form-row .select2-container--default .select2-selection--single .select2-selection__rendered {
	flex: 1 1 auto;
	min-width: 0;
	padding: 0;
	margin: 0;
	line-height: 1.2;
	font-family: var(--fv-font);
	font-size: 14px;
	color: var(--fv-ink);
	text-align: left;
}

.woocommerce-checkout .form-row .select2-container--default .select2-selection--single .select2-selection__placeholder {
	color: var(--fv-ink-3);
}

/* Arrow rides along at the end instead of being absolutely positioned,
 * so it stays centred with the flex row. */
.woocommerce-checkout .form-row .select2-container--default .select2-selection--single .select2-selection__arrow {
	position: static;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin-left: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.woocommerce-checkout .form-row .select2-container--default .select2-selection--single .select2-selection__arrow b {
	position: static;
	margin: 0;
	border-color: var(--fv-ink-3) transparent transparent;
	border-width: 5px 4px 0;
}

/* Dropdown panel matches the field family. */
.select2-container--default .select2-dropdown {
	border-color: var(--fv-line-2);
	border-radius: var(--fv-radius-lg);
	font-family: var(--fv-font);
	font-size: 13.5px;
	overflow: hidden;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background: var(--fv-accent);
}

/* ══════════════════════════════════════════════════════════════
   VALIDATION — at the field, not in a list above the form
   ══════════════════════════════════════════════════════════════ */

/*
 * WooCommerce's summary of missing fields is suppressed. It made the customer
 * read a list, remember it, then go looking for the fields it named — and the
 * script prepends it into a two-column grid, so it landed under the Place
 * order button in the other column. Each message now sits under its own
 * field instead.
 *
 * Hidden rather than removed: WooCommerce's script scrolls to this element
 * after a failed submit, and it still needs something to find.
 */
.woocommerce-checkout form.checkout > .woocommerce-NoticeGroup {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ── The message WooCommerce puts under a field ─────────────────── */

.woocommerce-checkout .checkout-inline-error-message {
	margin: 5px 2px 0;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--fv-hot-ink);
}

/*
 * WooCommerce marks a row valid as soon as it has any content, so this
 * clears the moment the customer starts typing.
 */
.woocommerce-checkout .woocommerce-invalid input.input-text,
.woocommerce-checkout .woocommerce-invalid textarea,
.woocommerce-checkout .woocommerce-invalid select,
.woocommerce-checkout .woocommerce-invalid .select2-selection {
	border-color: var(--fv-hot);
	background: #fffafa;
}

.woocommerce-checkout .woocommerce-invalid input.input-text:focus,
.woocommerce-checkout .woocommerce-invalid textarea:focus,
.woocommerce-checkout .woocommerce-invalid select:focus {
	border-color: var(--fv-hot);
	box-shadow: 0 0 0 3px rgba(230, 24, 42, 0.12);
}

/* The float label sits on the border, so it has to move with it. */
.woocommerce-checkout .woocommerce-invalid.fv-float > label {
	color: var(--fv-hot-ink);
}

/* ══════════════════════════════════════════════════════════════
   THE ADD-TO-CART CONFIRMATION, ON A NARROW SCREEN
   ══════════════════════════════════════════════════════════════ */

/*
 * Buy Now adds the item and sends the customer straight here, so WooCommerce
 * greets them with "X has been added to your cart." — telling them something
 * they just did, about an item the order summary is already showing, and
 * pushing the form down to say it.
 *
 * On a wide screen that costs a strip of space. On a stacked layout it costs
 * a scroll before the first field, so it is hidden below the width the
 * checkout already collapses at — one breakpoint governing the whole page
 * rather than a second invented for this.
 *
 * `:has(.wc-forward)` matches only notices carrying a "View cart" style
 * link, which is the add-to-cart family. Anything else WooCommerce needs to
 * say here still gets through.
 */
@media (max-width: 1023px) {
	.woocommerce-checkout .woocommerce-notices-wrapper .woocommerce-message:has( .wc-forward ) {
		display: none;
	}
}

/* ==========================================================================
   Inline field errors
   ==========================================================================

   Bound to the field rather than collected in a notice at the top of the
   page: a customer who mistypes a phone number needs the message beside the
   number, not above a form they have already scrolled past.
*/

.woocommerce-checkout .form-row.fv-invalid input,
.woocommerce-checkout .form-row.fv-invalid select,
.woocommerce-checkout .form-row.fv-invalid textarea {
	border-color: var(--fv-danger, #d92d20);
	box-shadow: 0 0 0 1px var(--fv-danger, #d92d20) inset;
}

.woocommerce-checkout .fv-field-error {
	display: block;
	margin: 5px 2px 0;
	font-family: 'Hind Siliguri', var(--fv-sans, 'Inter', system-ui, sans-serif);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--fv-danger, #d92d20);
}

/* ==========================================================================
   Promo code — folded
   ========================================================================== */

/*
 * A card, like the two beneath it.
 *
 * It was stripped back to a bare toggle line — transparent, borderless —
 * which left it reading as a stray link between two panels rather than as
 * one of them. It keeps the shared `.fv-co-card` shell now; only its
 * contents stay collapsed.
 */
/* The promo card carries no disclosure widget — it is never folded. */
.woocommerce-checkout .fv-co-promo .fv-coupon {
	margin: 0;
	padding: 0 16px 14px;
}


/* ==========================================================================
   Order received
   ==========================================================================

   Built as a sequence of cards rather than WooCommerce's overview grid: the
   customer reads this page top to bottom once, looking for reassurance, and
   a grid of four equal facts gives no order to read them in.
*/

.fv-ty {
	max-width: 640px;
	margin: 0 auto;
}

.fv-ty-head {
	text-align: center;
	padding: 4px 0 22px;
}

.fv-ty-tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 12px;
	border-radius: 50%;
	background: var(--fv-ok, #0f9d58);
	color: #fff;
}

.fv-ty-tick svg {
	width: 24px;
	height: 24px;
}

.fv-ty-title {
	margin: 0 0 6px;
	font-family: 'Hind Siliguri', var(--fv-sans, 'Inter', system-ui, sans-serif);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--fv-ink, #1c1917);
}

.fv-ty-sub {
	margin: 0;
	font-family: 'Hind Siliguri', var(--fv-sans, 'Inter', system-ui, sans-serif);
	font-size: 14.5px;
	color: var(--fv-ink-2, #57534e);
}

.fv-ty-sub strong {
	font-family: var(--fv-mono, ui-monospace, monospace);
	font-weight: 700;
	color: var(--fv-ink, #1c1917);
}

.fv-ty-card {
	margin: 0 0 14px;
	padding: 16px 16px 18px;
	border: 1px solid var(--fv-line, #ece7e2);
	border-radius: var(--fv-radius-md, 4px);
	background: #fff;
}

.fv-ty-card-t {
	margin: 0 0 12px;
	font-family: 'Hind Siliguri', var(--fv-sans, 'Inter', system-ui, sans-serif);
	font-size: 15px;
	font-weight: 700;
	color: var(--fv-ink, #1c1917);
}

/* --- what happens next ------------------------------------------------- */

/*
 * Numbered because the steps genuinely are a sequence — the call comes
 * before the courier, and the money comes last. The counter is drawn rather
 * than using list-style so the digits can sit in a fixed column and the
 * wrapped text can align under itself.
 */
.fv-ty-steps {
	list-style: none;
	counter-reset: fv-step;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

.fv-ty-steps li {
	counter-increment: fv-step;
	position: relative;
	margin: 0;
	padding-left: 34px;
	font-family: 'Hind Siliguri', var(--fv-sans, 'Inter', system-ui, sans-serif);
}

.fv-ty-steps li::before {
	content: counter(fv-step);
	position: absolute;
	left: 0;
	top: 1px;
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--fv-tint, #fff7f1);
	border: 1px solid var(--fv-accent, #ff6b00);
	color: var(--fv-accent, #ff6b00);
	font-family: var(--fv-mono, ui-monospace, monospace);
	font-size: 11px;
	font-weight: 700;
}

.fv-ty-steps li strong {
	display: block;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--fv-ink, #1c1917);
}

.fv-ty-steps li span {
	display: block;
	margin-top: 2px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--fv-ink-2, #57534e);
}

/* --- delivery details --------------------------------------------------- */

.fv-ty-dl {
	margin: 0;
}

.fv-ty-dl-row {
	display: grid;
	grid-template-columns: 82px 1fr;
	gap: 10px;
	padding: 9px 0;
	border-bottom: 1px dashed var(--fv-line, #ece7e2);
}

.fv-ty-dl-row:last-child {
	border-bottom: 0;
}

.fv-ty-dl dt {
	margin: 0;
	font-family: 'Hind Siliguri', var(--fv-sans, 'Inter', system-ui, sans-serif);
	font-size: 13px;
	font-weight: 500;
	color: var(--fv-ink-3, #8a8078);
}

.fv-ty-dl dd {
	margin: 0;
	font-family: 'Hind Siliguri', var(--fv-sans, 'Inter', system-ui, sans-serif);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
	color: var(--fv-ink, #1c1917);
	overflow-wrap: anywhere;
}

/* The number the courier will dial gets the tabular face, so a wrong digit
   is easy to spot — which is the only reason this row is on the page. */
.fv-ty-dl dd.is-num {
	font-family: var(--fv-mono, ui-monospace, monospace);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

.fv-ty-fix {
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--fv-line, #ece7e2);
	font-family: 'Hind Siliguri', var(--fv-sans, 'Inter', system-ui, sans-serif);
	font-size: 13px;
	color: var(--fv-ink-2, #57534e);
}

.fv-ty-tel {
	font-family: var(--fv-mono, ui-monospace, monospace);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--fv-accent, #ff6b00);
	text-decoration: none;
	white-space: nowrap;
}

.fv-ty-tel:hover,
.fv-ty-tel:focus-visible {
	text-decoration: underline;
}

/* --- order table + actions ---------------------------------------------- */

.fv-ty .woocommerce-order-details,
.fv-ty .woocommerce-customer-details {
	margin: 0 0 14px;
	padding: 16px;
	border: 1px solid var(--fv-line, #ece7e2);
	border-radius: var(--fv-radius-md, 4px);
	background: #fff;
}

.fv-ty .woocommerce-order-details__title,
.fv-ty .woocommerce-column__title {
	margin: 0 0 12px;
	font-family: 'Hind Siliguri', var(--fv-sans, 'Inter', system-ui, sans-serif);
	font-size: 15px;
	font-weight: 700;
}

/*
 * The order table repeats the payment method the steps have already
 * explained, and a second total under the one in step 4.
 */
.fv-ty .woocommerce-table--order-details tfoot tr:last-child th,
.fv-ty .woocommerce-table--order-details tfoot tr:last-child td {
	border-top: 1px solid var(--fv-line, #ece7e2);
}

.fv-ty-actions {
	margin: 18px 0 0;
	text-align: center;
}

.fv-ty .button.fv-ty-more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 26px;
	border: 1px solid var(--fv-accent, #ff6b00);
	border-radius: var(--fv-radius-md, 4px);
	background: transparent;
	color: var(--fv-accent, #ff6b00);
	font-family: 'Hind Siliguri', var(--fv-sans, 'Inter', system-ui, sans-serif);
	font-size: 14.5px;
	font-weight: 700;
}

.fv-ty .button.fv-ty-more:hover,
.fv-ty .button.fv-ty-more:focus-visible {
	background: var(--fv-accent, #ff6b00);
	color: #fff;
}

@media (min-width: 768px) {
	.fv-ty-title {
		font-size: 28px;
	}

	.fv-ty-card {
		padding: 20px 22px 22px;
	}
}

/*
 * The page already has a heading.
 *
 * WooCommerce sets the endpoint title to "Order received" and Storefront
 * prints it as the h1, which left the page with two h1s saying the same
 * thing in two languages. The Bangla one is the page's own and stays.
 */
.woocommerce-order-received .entry-title {
	display: none;
}

/* Breadcrumb, like the category strip, is a way out of a funnel that has
   one step left — and that step is reading this page. */
.woocommerce-order-received .storefront-breadcrumb,
.woocommerce-order-received .woocommerce-breadcrumb {
	display: none;
}

/*
 * The payable amount inside step 4 must read as part of the sentence.
 *
 * `.woocommerce-Price-amount` is display:block site-wide — correct where a
 * price is its own line, wrong inside running text, where it broke
 * "ডেলিভারি ম্যানকে 1,100 Tk. দেবেন।" across three lines.
 */
.fv-ty-steps .woocommerce-Price-amount,
.fv-ty-steps .woocommerce-Price-amount bdi,
.fv-ty-steps .woocommerce-Price-currencySymbol {
	display: inline;
	white-space: nowrap;
}

/* ── Offered coupons ───────────────────────────────────────────────
 *
 * The answer to the question the promo field asks. Listing the codes that
 * are valid for this cart means nobody has to leave the checkout to find
 * one — which is the actual cost of a promo field, not the field itself.
 */

.woocommerce-checkout .fv-coupon-offers {
	margin: 0;
	padding: 0 16px 14px;
}

.woocommerce-checkout .fv-coupon-offers-t {
	margin: 0 0 8px;
	font-family: 'Hind Siliguri', var(--fv-sans);
	font-size: 12px;
	font-weight: 500;
	color: var(--fv-ink-3);
}

.woocommerce-checkout .fv-coupon-offers ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.woocommerce-checkout .fv-coupon-offers li {
	margin: 0;
}

/*
 * A dashed edge, the way a paper voucher is torn — it reads as something to
 * take rather than as another button competing with Apply.
 */
.woocommerce-checkout .fv-coupon-pick {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 4px 10px;
	width: 100%;
	padding: 10px 12px;
	border: 1px dashed var(--fv-accent);
	border-radius: var(--fv-radius-md);
	background: var(--fv-accent-soft);
	text-align: left;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.woocommerce-checkout .fv-coupon-pick:hover,
.woocommerce-checkout .fv-coupon-pick:focus-visible {
	background: var(--fv-cream);
	border-style: solid;
}

.woocommerce-checkout .fv-coupon-pick .code {
	font-family: var(--fv-mono);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--fv-ink);
}

.woocommerce-checkout .fv-coupon-pick .save {
	font-family: 'Hind Siliguri', var(--fv-sans);
	font-size: 12.5px;
	font-weight: 700;
	color: var(--fv-accent);
}

.woocommerce-checkout .fv-coupon-pick .use {
	justify-self: end;
	font-family: 'Hind Siliguri', var(--fv-sans);
	font-size: 12px;
	font-weight: 600;
	color: var(--fv-accent);
	white-space: nowrap;
}

/* The description, when there is one, takes the full width beneath. */
.woocommerce-checkout .fv-coupon-pick .note {
	grid-column: 1 / -1;
	font-family: 'Hind Siliguri', var(--fv-sans);
	font-size: 12px;
	line-height: 1.4;
	color: var(--fv-ink-2);
}

/* `[hidden]` is only a UA display rule; make it stick regardless of the grid. */
.woocommerce-checkout .fv-coupon-offers[hidden],
.woocommerce-checkout .fv-coupon-offers li[hidden] {
	display: none;
}

/* A settled coupon field reads as settled, not as an input awaiting one. */
.woocommerce-checkout #fv_coupon_code[readonly] {
	background: var(--fv-cream);
	border-color: var(--fv-line);
	color: var(--fv-ink);
	font-family: var(--fv-mono);
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: default;
}



/* ── Voucher countdown ─────────────────────────────────────────────
 *
 * Four labelled boxes, centred in the voucher, with no caption — inside the
 * coupon there is nothing else the clock could be counting, so a heading
 * would only repeat what the position already says.
 *
 * Each box holds its width and the digits are tabular monospace, so nothing
 * reflows as the numbers change: a clock that shifts every second reads as a
 * fault rather than as urgency.
 */

/*
 * Left-aligned, not centred.
 *
 * Centring gave the clock its own axis, so it sat off the left edge every
 * other line in the voucher shares. What matters is that the four boxes stay
 * on one line — that is enforced below — not that they are middled.
 */
.woocommerce-checkout .fv-coupon-pick .cd {
	grid-column: 1 / -1;
	display: flex;
	justify-content: flex-start;
	margin-top: 5px;
	min-width: 0;
}

/*
 * `nowrap` is stated rather than relied on.
 *
 * It is the flex default, but this row is four boxes whose width depends on
 * a Bangla label and the visitor's own font-size setting — a wrapped clock
 * would break into two ragged lines mid-tick. Held on one line, and the
 * boxes may shrink before that ever happens.
 */
.woocommerce-checkout .fv-coupon-pick .cd-t {
	display: flex;
	align-items: stretch;
	flex-wrap: nowrap;
	gap: 4px;
	max-width: 100%;
}

.woocommerce-checkout .fv-coupon-pick .cd-t .u {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* Shrink before wrapping: one cramped line beats two ragged ones. */
	flex: 0 1 auto;
	min-width: 0;
	width: 34px;
	padding: 3px 4px;
	border: 1px solid var(--fv-line-2);
	border-radius: var(--fv-radius-md);
	background: var(--fv-surface);
	line-height: 1.05;
}

.woocommerce-checkout .fv-coupon-pick .cd-t .u[hidden] {
	display: none;
}

.woocommerce-checkout .fv-coupon-pick .cd-t b {
	font-family: var(--fv-mono);
	font-size: 12.5px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--fv-ink);
}

.woocommerce-checkout .fv-coupon-pick .cd-t i {
	font-family: 'Hind Siliguri', var(--fv-sans);
	font-style: normal;
	font-size: 8px;
	white-space: nowrap;
	font-weight: 500;
	color: var(--fv-ink-3);
}

/* Last day: the boxes take the accent, and the one that visibly moves leads. */
.woocommerce-checkout .fv-coupon-pick .cd-t.is-urgent .u {
	border-color: var(--fv-accent);
}

.woocommerce-checkout .fv-coupon-pick .cd-t.is-urgent b {
	color: var(--fv-accent);
}

.woocommerce-checkout .fv-coupon-pick .cd-t.is-urgent .u[data-u="s"] {
	background: var(--fv-accent);
	border-color: var(--fv-accent);
}

.woocommerce-checkout .fv-coupon-pick .cd-t.is-urgent .u[data-u="s"] b,
.woocommerce-checkout .fv-coupon-pick .cd-t.is-urgent .u[data-u="s"] i {
	color: #fff;
}

/* ── Applied-coupon reward panel ───────────────────────────────────
 *
 * Two feelings in one block: the figure the customer keeps, and the clock
 * saying how long they have to keep it. Both used to disappear the moment
 * the code was applied — a single line of green text replaced the saving,
 * and hiding the voucher took the countdown with it.
 */

.woocommerce-checkout .fv-co-win {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 16px 12px;
	padding: 12px;
	border: 1px solid var(--fv-ok, #0f9d58);
	border-radius: var(--fv-radius-md);
	background: rgba(15, 157, 88, 0.06);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.22s ease, transform 0.22s ease;
}

.woocommerce-checkout .fv-co-win.is-in {
	opacity: 1;
	transform: none;
}

.woocommerce-checkout .fv-co-win[hidden] {
	display: none;
}

.woocommerce-checkout .fv-co-win-tick {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--fv-ok, #0f9d58);
	color: #fff;
}

.woocommerce-checkout .fv-co-win-tick svg {
	width: 15px;
	height: 15px;
}

.woocommerce-checkout .fv-co-win-body {
	min-width: 0;
	flex: 1 1 auto;
}

/* The number is the reward, so it is the biggest thing in the card. */
.woocommerce-checkout .fv-co-win-save {
	margin: 0;
	font-family: 'Hind Siliguri', var(--fv-sans);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--fv-ink-2);
}

.woocommerce-checkout .fv-co-win-save b {
	font-family: var(--fv-mono);
	font-size: 17px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--fv-ok, #0f9d58);
}

.woocommerce-checkout .fv-co-win-code {
	margin: 1px 0 0;
	font-family: 'Hind Siliguri', var(--fv-sans);
	font-size: 11.5px;
	font-weight: 500;
	color: var(--fv-ink-3);
}

.woocommerce-checkout .fv-co-win-code b {
	font-family: var(--fv-mono);
	font-weight: 800;
	letter-spacing: 0.04em;
	color: var(--fv-ink-2);
}

/* The clock, carried over from the voucher. */
.woocommerce-checkout .fv-co-win-cd {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 8px;
	margin-top: 8px;
	min-width: 0;
}

.woocommerce-checkout .fv-co-win-cd[hidden] {
	display: none;
}

.woocommerce-checkout .fv-co-win-cd .lead {
	font-family: 'Hind Siliguri', var(--fv-sans);
	font-size: 11px;
	font-weight: 500;
	color: var(--fv-ink-3);
	white-space: nowrap;
}

.woocommerce-checkout .fv-co-win-cd .cd-t {
	display: flex;
	flex-wrap: nowrap;
	gap: 4px;
}

.woocommerce-checkout .fv-co-win-cd .u {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 0 1 auto;
	width: 32px;
	padding: 2px 3px;
	border: 1px solid var(--fv-line-2);
	border-radius: var(--fv-radius-sm);
	background: #fff;
	line-height: 1.05;
}

.woocommerce-checkout .fv-co-win-cd .u[hidden] {
	display: none;
}

.woocommerce-checkout .fv-co-win-cd b {
	font-family: var(--fv-mono);
	font-size: 12px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	color: var(--fv-ink);
}

.woocommerce-checkout .fv-co-win-cd i {
	font-family: 'Hind Siliguri', var(--fv-sans);
	font-style: normal;
	font-size: 7.5px;
	font-weight: 500;
	color: var(--fv-ink-3);
	white-space: nowrap;
}

/* Last day: the discount is genuinely about to go. */
.woocommerce-checkout .fv-co-win-cd.is-urgent .u {
	border-color: var(--fv-accent);
}

.woocommerce-checkout .fv-co-win-cd.is-urgent b {
	color: var(--fv-accent);
}

.woocommerce-checkout .fv-co-win-urge {
	margin: 8px 0 0;
	font-family: 'Hind Siliguri', var(--fv-sans);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--fv-accent);
}

@media (prefers-reduced-motion: reduce) {
	.woocommerce-checkout .fv-co-win {
		transition: none;
		transform: none;
	}
}

/* ── Autofilled fields ─────────────────────────────────────────────
 *
 * Chrome paints its own background on a field it filled, and that colour is
 * not reachable through `background-color` — it has to be covered with an
 * inset shadow. Without this a customer whose phone filled the form saw the
 * cream card sprouting three pale-blue boxes, which reads as an error state
 * rather than as help.
 */

.woocommerce-checkout .form-row input:-webkit-autofill,
.woocommerce-checkout .form-row input:-webkit-autofill:hover,
.woocommerce-checkout .form-row input:-webkit-autofill:focus,
.woocommerce-checkout .form-row textarea:-webkit-autofill,
.woocommerce-checkout .form-row select:-webkit-autofill {
	-webkit-box-shadow: inset 0 0 0 100px var(--fv-surface);
	box-shadow: inset 0 0 0 100px var(--fv-surface);
	-webkit-text-fill-color: var(--fv-ink);
	caret-color: var(--fv-ink);
}

/* The focus ring still has to win over that shadow. */
.woocommerce-checkout .form-row input:-webkit-autofill:focus,
.woocommerce-checkout .form-row textarea:-webkit-autofill:focus {
	-webkit-box-shadow: inset 0 0 0 100px var(--fv-surface), 0 0 0 1px var(--fv-accent);
	box-shadow: inset 0 0 0 100px var(--fv-surface), 0 0 0 1px var(--fv-accent);
	border-color: var(--fv-accent);
}

/* The channel name sits with the number it belongs to, not with the sentence. */
.fv-ty-fix-via {
	font-family: 'Hind Siliguri', var(--fv-sans);
	font-size: 13px;
	font-weight: 600;
	color: var(--fv-ink-2);
}

/* ── Order summary: a disclosure on mobile only ────────────────── */

.fv-co-summary .fv-co-card-title {
	padding: 0;
}

.fv-co-summary .fv-sum-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	margin: 0;
	padding: 13px 16px 10px;
	background: none;
	border: 0;
	border-radius: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: default;
}

.fv-co-summary .fv-sum-label {
	font-weight: 700;
}

.fv-co-summary .fv-sum-count {
	font-family: var(--fv-mono);
	font-size: 12px;
	font-weight: 600;
	color: var(--fv-ink-3);
	letter-spacing: 0;
}

.fv-co-summary .fv-sum-total {
	display: none;
	margin-left: auto;
	font-family: var(--fv-mono);
	font-size: 15px;
	font-weight: 800;
	color: var(--fv-ink);
	letter-spacing: -0.01em;
}

/* The chevron is the only part that says "this opens", so it is mobile-only. */
.fv-co-summary .fv-sum-chev {
	display: none;
	margin-left: auto;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--fv-ink-3);
	border-bottom: 2px solid var(--fv-ink-3);
	/* Open: pointing up, "close me". */
	transform: rotate(-135deg) translate(-2px, -2px);
	transition: transform 160ms ease;
}

@media (max-width: 1023px) {
	.fv-co-summary .fv-sum-toggle {
		cursor: pointer;
		/* A comfortable tap target without moving the title off its baseline. */
		padding-top: 15px;
		padding-bottom: 13px;
	}

	.fv-co-summary .fv-sum-chev {
		display: block;
	}

	/* Closed: pointing down, "open me". */
	.fv-js .fv-co-summary:not(.is-open) .fv-sum-chev {
		transform: rotate(45deg) translate(-2px, -2px);
		/* The total takes the free space, so the chevron sits beside it. */
		margin-left: 10px;
	}

	/*
	 * Everything folds: items, subtotal, delivery and total.
	 *
	 * Keyed on the ABSENCE of .is-open rather than the presence of a collapsed
	 * class, so folded is what the page paints before any script runs. The
	 * markup arrives expanded — the server cannot know the viewport — and when
	 * the script did the folding the summary visibly snapped shut on every
	 * load and again after each AJAX refresh. Now the class only ever opens
	 * it, and there is nothing to correct after paint.
	 */
	.fv-js .woocommerce-checkout .fv-co-summary:not(.is-open) table.shop_table {
		display: none;
	}

	/*
	 * The payable total, mirrored into the closed header.
	 *
	 * Shown only while folded — open, it would sit two lines above the real
	 * total row and read as a second, conflicting figure.
	 */
	.fv-js .fv-co-summary:not(.is-open) .fv-sum-total {
		display: block;
	}

	.fv-js .fv-co-summary:not(.is-open) .fv-sum-count {
		/* The total is the useful number once the rows are hidden. */
		display: none;
	}

	.fv-js .fv-co-summary:not(.is-open) .fv-sum-toggle {
		padding-bottom: 15px;
	}
}

.fv-co-summary .fv-sum-toggle:focus-visible {
	outline: 2px solid var(--fv-accent);
	outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
	.fv-co-summary .fv-sum-chev {
		transition: none;
	}
}

/* ── Phone placeholder: 017 then a mask ────────────────────────── */

/*
 * No vertical correction, deliberately.
 *
 * An asterisk rides high on the line in most faces, which would leave the mask
 * floating above the 017 before it. JetBrains Mono does not: measured against
 * a digit, the two glyphs have the same ink midpoint to within a rounding
 * error, so a nudge here only pushes the whole hint off centre in its box.
 *
 * What the mask does need is tracking. Eight asterisks set solid read as one
 * grey smear; spaced, they read as eight characters, which is the only thing
 * they are there to say.
 */
.woocommerce-checkout #billing_phone::placeholder {
	font-family: var(--fv-mono);
	/* Matches the field, so nothing shifts size when typing begins. */
	font-size: 16px;
	letter-spacing: 0.12em;
	color: var(--fv-ink-3);
}

/* The typed number keeps its own tracking; only the hint is spaced out. */
.woocommerce-checkout #billing_phone {
	letter-spacing: 0.02em;
}

/* ── Header: Back ──────────────────────────────────────────────── */

.fv-co-hdr .fv-co-back {
	margin-left: auto;
	padding: 9px 16px;
	border: 1px solid var(--fv-line-2);
	border-radius: 999px;
	background: var(--fv-surface);
	font-family: var(--fv-font);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--fv-ink-2);
	cursor: pointer;
	transition: border-color 140ms ease, color 140ms ease;
}

.fv-co-hdr .fv-co-back:hover,
.fv-co-hdr .fv-co-back:focus-visible {
	border-color: var(--fv-ink-3);
	color: var(--fv-ink);
}

.fv-co-hdr .fv-co-back:focus-visible {
	outline: 2px solid var(--fv-accent);
	outline-offset: 2px;
}

/* The lockup is a span on this page, so it must not look clickable. */
.fv-co-hdr .lock {
	cursor: default;
}

/* ── Exit offer ────────────────────────────────────────────────── */

.fv-exit {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	/*
	 * The gutter respects the phone's own furniture: a notch at the top, the
	 * home indicator at the bottom. Without it the card can sit under either.
	 */
	padding: max(16px, env(safe-area-inset-top, 0px))
		max(16px, env(safe-area-inset-right, 0px))
		max(16px, env(safe-area-inset-bottom, 0px))
		max(16px, env(safe-area-inset-left, 0px));
}

/*
 * `hidden` needs help here.
 *
 * The attribute only carries a `display: none` from the browser's own default
 * stylesheet, and the rule above is a class selector, so it wins — the dialog
 * sat open on every page load with nobody having touched Back. Any element
 * given an explicit display needs its hidden state restated.
 */
.fv-exit[hidden] {
	display: none;
}

body.fv-exit-open {
	overflow: hidden;
}

.fv-exit-veil {
	position: absolute;
	inset: 0;
	background: rgba(18, 14, 10, 0.55);
	backdrop-filter: blur(2px);
	animation: fv-exit-fade 180ms ease both;
}

.fv-exit-card {
	position: relative;
	width: 100%;
	/*
	 * Bounded both ways. min() keeps it inside a 320px phone; the ceiling
	 * stops it stretching into a banner on a desktop, where a dialog wider
	 * than a paragraph stops reading as one thing.
	 */
	max-width: min(380px, 100%);
	/*
	 * A landscape phone is barely 340px tall. Without this the buttons fall
	 * below the fold of the dialog itself and the offer cannot be taken.
	 */
	max-height: 100%;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: clamp(22px, 6vw, 30px) clamp(18px, 5vw, 26px) clamp(16px, 4vw, 20px);
	border-radius: 20px;
	background: var(--fv-surface);
	box-shadow: 0 24px 60px rgba(18, 14, 10, 0.3);
	text-align: center;
	animation: fv-exit-rise 220ms cubic-bezier(0.2, 0.8, 0.3, 1) both;
}

@keyframes fv-exit-fade {
	from { opacity: 0; }
}

@keyframes fv-exit-rise {
	from { opacity: 0; transform: translateY(14px) scale(0.97); }
}

/*
 * The figure is the argument, so it is the first and largest thing.
 *
 * clamp() rather than a media query: it scales continuously between a 320px
 * phone and a desktop instead of jumping at one width, and the amount is the
 * element most likely to overflow a narrow card.
 */
.fv-exit-lede {
	margin: 0 0 4px;
	font-family: var(--fv-font);
	font-size: clamp(13px, 3.6vw, 14px);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--fv-ink-2);
}

.fv-exit-amount {
	display: block;
	/* An h2 now, so the browser's own heading margins have to go. */
	margin: 0 0 6px;
	font-family: var(--fv-mono);
	font-size: clamp(34px, 11vw, 44px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.04em;
	/*
	 * The money format puts a non-breaking space between the figure and the
	 * suffix, and in a monospaced face that space is a full character cell —
	 * at 44px it opened a gap wide enough to read as two separate things.
	 * Tightened here only; the summary keeps the standard spacing.
	 */
	word-spacing: -0.28em;
	color: var(--fv-accent);
}


/* "ছাড়" rides with the figure but never competes with it. */
.fv-exit-amount-word {
	font-family: var(--fv-font);
	font-size: 0.52em;
	font-weight: 700;
	letter-spacing: 0;
	word-spacing: normal;
}

.fv-exit-body {
	margin: 0 auto 18px;
	max-width: 28ch;
	font-size: clamp(14px, 3.8vw, 15px);
	line-height: 1.55;
	color: var(--fv-ink-2);
}

/* ── Countdown ─────────────────────────────────────────────────── */

.fv-exit-timer {
	display: flex;
	align-items: baseline;
	justify-content: center;
	/* The label is long in Bangla; on a 320px card it may need a second line
	   rather than squeezing the clock out of shape. */
	flex-wrap: wrap;
	gap: 2px 7px;
	margin: 0 0 7px;
	font-size: 13px;
	color: var(--fv-ink-3);
}

.fv-exit-timer-value {
	font-family: var(--fv-mono);
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	color: var(--fv-ink);
}

/* The last ten seconds look like the last ten seconds. */
.fv-exit-timer.is-urgent .fv-exit-timer-value {
	color: var(--fv-hot);
}

/*
 * The bar carries the same number the clock does.
 *
 * Read at a glance without counting, which is what someone half out of the
 * page will do — and it is the only part of the dialog that moves, so it is
 * where the eye goes.
 */
.fv-exit-bar {
	display: block;
	height: 3px;
	margin: 0 0 20px;
	border-radius: 999px;
	background: var(--fv-line);
	overflow: hidden;
}

/*
 * One animation for the whole minute, not a width nudged on every tick.
 *
 * Driven from JavaScript it moved in 250ms jumps — the eye reads that as
 * stuttering, and a stuttering progress bar looks broken rather than urgent.
 * A single keyframe animation is interpolated by the compositor instead, so it
 * glides at the display's own refresh rate and costs no main-thread work.
 *
 * transform rather than width: width relayouts the bar on every frame, while a
 * scale is composited. Right-anchored so it drains towards the end.
 */
.fv-exit-bar i {
	display: block;
	height: 100%;
	width: 100%;
	border-radius: inherit;
	background: var(--fv-accent);
	transform-origin: left center;
	will-change: transform;
}

.fv-exit-bar i.is-running {
	animation-name: fv-exit-drain;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}

@keyframes fv-exit-drain {
	from { transform: scaleX(1); }
	to   { transform: scaleX(0); }
}

.fv-exit-timer.is-urgent ~ .fv-exit-bar i {
	background: var(--fv-hot);
}

.fv-exit-apply {
	display: block;
	width: 100%;
	/* 52px, the same target as the checkout fields and the confirm button. */
	min-height: 52px;
	padding: 14px 18px;
	border: 0;
	border-radius: var(--fv-radius-lg);
	background: var(--fv-accent);
	font-family: var(--fv-font);
	font-size: clamp(15px, 4.2vw, 16.5px);
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: filter 140ms ease, transform 90ms ease;
}

.fv-exit-apply:hover {
	filter: brightness(0.94);
}

/*
 * A press the finger can feel.
 *
 * Without it a tap on a phone either does nothing visible or shows the
 * browser's own highlight over the brand orange, which reads as a rendering
 * fault. The dip is small enough not to shift anything around it.
 */
.fv-exit-apply:active {
	filter: brightness(0.88);
	transform: translateY(1px);
}

.fv-exit-apply:focus-visible {
	outline: 2px solid var(--fv-ink);
	outline-offset: 2px;
}

.fv-exit-apply:disabled {
	opacity: 0.6;
	cursor: default;
}

/*
 * Leaving stays plainly available.
 *
 * A dialog that buries its own exit is the reason people distrust these, and a
 * customer who feels cornered on a cash-on-delivery order does not come back.
 * Quieter than the offer, never hidden from it — and still a full-width tap
 * target, because a link too small to hit is its own kind of trap.
 */
/*
 * The target hugs the words, rather than spanning the card.
 *
 * It was a full-width invisible button: hovering changed only the text colour
 * while the thing actually reacting was a silent block the whole width of the
 * dialog, and on a phone the browser painted its default tap highlight across
 * all of it — a grey bar flashing under the offer every time it was pressed.
 *
 * Now the interactive area is the pill around the text, it still clears the
 * 44px a thumb needs, and the tap highlight is replaced by a pressed state
 * the design controls.
 */
.fv-exit-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin: 6px auto 0;
	padding: 10px 18px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	font-family: var(--fv-font);
	font-size: 13.5px;
	font-weight: 500;
	color: var(--fv-ink-3);
	text-decoration: underline;
	text-underline-offset: 3px;
	/* The rule sits back until the link is wanted. */
	text-decoration-color: var(--fv-line-2);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: color 140ms ease, background-color 140ms ease;
}

.fv-exit-close:hover {
	background: var(--fv-muted);
	color: var(--fv-ink-2);
	text-decoration-color: currentColor;
}

/* Pressed reads as pressed, on a touch screen as much as under a cursor. */
.fv-exit-close:active {
	background: var(--fv-line);
	color: var(--fv-ink);
}

.fv-exit-close:focus-visible {
	outline: 2px solid var(--fv-accent);
	outline-offset: 2px;
}

.fv-exit.is-busy .fv-exit-card {
	opacity: 0.65;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.fv-exit-veil,
	.fv-exit-card {
		animation: none;
	}

	.fv-exit-apply:active {
		transform: none;
	}
}