/*
 * Quantity deals: the cards on the product page, the deal tag in the bag and
 * at checkout. Built from the theme's own tokens, with fallbacks so a shop
 * without them still reads right.
 *
 * The cards are sized and shaped like the buy row under them — the theme's
 * Add to Bag, Buy Now and quantity box are all 42px tall with a 1px border
 * and a 2px corner (--fv-radius-md) — so the deal reads as part of the same
 * control, not a block of its own.
 */

.fv-qd {
	margin: 0 0 12px;
	font-family: var(--fv-font, 'Inter', 'Hind Siliguri', system-ui, sans-serif);
}

/*
 * The cards. Each is a choice to tap: a radio dot, the quantity and the
 * crossed-out regular price on top, the deal total below, and the saving as
 * a small green tag on the card's top edge — the first thing the eye finds,
 * without taking a row. The chosen card takes the shop's orange, as the Buy
 * Now button does.
 */
.fv-qd-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	grid-auto-flow: column;
	gap: 8px;
	padding-top: 8px; /* room for the tags */
}
.fv-qd .fv-qd-cards button.fv-qd-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	gap: 1px;
	min-width: 0;
	min-height: 42px;
	margin: 0;
	padding: 4px 8px;
	border: 1px solid var(--fv-line-2, #ccc);
	border-radius: var(--fv-radius-md, 2px);
	background: #fff;
	color: var(--fv-ink, #222);
	cursor: pointer;
	text-align: left;
	line-height: 1.15;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
	transition: border-color .15s, background-color .15s, box-shadow .15s, transform .1s;
}
/*
 * The cards are <button>s, and the theme and WooCommerce style every button:
 * on hover and press they turn it orange with white text and their own
 * padding. These pin the card's own look in every state.
 */
.fv-qd .fv-qd-cards button.fv-qd-card:hover,
.fv-qd .fv-qd-cards button.fv-qd-card:focus,
.fv-qd .fv-qd-cards button.fv-qd-card:active {
	background: #fff;
	color: var(--fv-ink, #222);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	padding: 4px 8px;
}
.fv-qd .fv-qd-cards button.fv-qd-card:active { transform: scale(.98); }
.fv-qd .fv-qd-cards button.fv-qd-card:focus-visible { outline: 2px solid var(--fv-accent, #ff6b00); outline-offset: 2px; }
@media (hover: hover) {
	.fv-qd .fv-qd-cards button.fv-qd-card:hover { border-color: var(--fv-accent, #ff6b00); }
}
.fv-qd .fv-qd-cards button.fv-qd-card.is-on,
.fv-qd .fv-qd-cards button.fv-qd-card.is-on:hover,
.fv-qd .fv-qd-cards button.fv-qd-card.is-on:focus,
.fv-qd .fv-qd-cards button.fv-qd-card.is-on:active {
	border-color: var(--fv-accent, #ff6b00);
	background: var(--fv-accent-soft, #fff5ed);
	box-shadow: 0 0 0 1px var(--fv-accent, #ff6b00);
}
.fv-qd .fv-qd-cards button.fv-qd-card.is-short { opacity: .45; }
.fv-qd .fv-qd-cards button.fv-qd-card.is-short .fv-qd-save { display: none; }

/* Top row: dot, quantity, the regular price crossed out. */
.fv-qd-top {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
}
.fv-qd-dot {
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border: 1px solid var(--fv-line-2, #bbb);
	border-radius: 50%;
	background: #fff;
	box-sizing: border-box;
	transition: border-color .15s, box-shadow .15s;
}
.fv-qd .fv-qd-cards button.fv-qd-card.is-on .fv-qd-dot {
	border-color: var(--fv-accent, #ff6b00);
	box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 5px var(--fv-accent, #ff6b00);
}
.fv-qd-qty {
	font-family: 'Hind Siliguri', var(--fv-font, sans-serif);
	font-size: 13px;
	font-weight: 700;
	white-space: nowrap;
}
.fv-qd-was {
	margin-left: auto;
	font-family: var(--fv-mono, ui-monospace, monospace);
	font-size: 10px;
	color: var(--fv-ink-3, #888);
	text-decoration-thickness: 1px;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.fv-qd-was:empty { display: none; }
.fv-qd-was .woocommerce-Price-currencySymbol { display: none; } /* the number alone is enough here */

/* Bottom row: the deal total. */
.fv-qd-total {
	font-family: var(--fv-mono, ui-monospace, monospace);
	font-size: 14px;
	font-weight: 700;
	color: var(--fv-ink, #222);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.fv-qd-total .woocommerce-Price-amount { font-weight: inherit; }
.fv-qd .fv-qd-cards button.fv-qd-card.is-on .fv-qd-total { color: var(--fv-accent-hover, #e85f00); }

/* The saving: a small tag on the top edge, cornered like the theme's micro tags. */
.fv-qd-save {
	position: absolute;
	top: -8px;
	right: 6px;
	padding: 0 4px;
	border-radius: var(--fv-radius-sm, 1px);
	background: var(--fv-good, #0f9d58);
	color: #fff;
	font-family: 'Hind Siliguri', var(--fv-font, sans-serif);
	font-size: 9.5px;
	font-weight: 700;
	line-height: 14px;
	white-space: nowrap;
}
.fv-qd-save:empty { display: none; }
.fv-qd-save .woocommerce-Price-amount,
.fv-qd-save .woocommerce-Price-currencySymbol { color: inherit; font-weight: inherit; }

.fv-qd-stock {
	margin: 6px 0 0;
	font-family: 'Hind Siliguri', var(--fv-font, sans-serif);
	font-size: 12px;
	color: var(--fv-hot-ink, #c41020);
}
.fv-qd-stock[hidden] { display: none; }

/* The deal on a bag line: a small tag, and in the bag one short link. */
.fv-qd-note {
	display: inline-block;
	margin: 4px 6px 0 0;
	padding: 0 5px;
	border-radius: var(--fv-radius-sm, 1px);
	background: color-mix(in srgb, var(--fv-good, #0f9d58) 12%, #fff);
	color: var(--fv-good, #0f9d58);
	font-family: 'Hind Siliguri', var(--fv-font, sans-serif);
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	white-space: nowrap;
}
/* Matches the theme's own cart-name link rule plus a class, which otherwise turns it black. */
.fv-cart-page tr.woocommerce-cart-form__cart-item td.product-name > a.fv-qd-next,
a.fv-qd-next {
	display: inline-block;
	margin-top: 4px;
	color: var(--fv-accent, #ff6b00);
	font-family: 'Hind Siliguri', var(--fv-font, sans-serif);
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.fv-cart-page tr.woocommerce-cart-form__cart-item td.product-name > a.fv-qd-next:hover,
a.fv-qd-next:hover { color: var(--fv-accent-hover, #e85f00); text-decoration: underline; }

/* Narrow phones: keep each row on one line. */
@media (max-width: 380px) {
	.fv-qd-cards { gap: 6px; }
	.fv-qd .fv-qd-cards button.fv-qd-card,
	.fv-qd .fv-qd-cards button.fv-qd-card:hover,
	.fv-qd .fv-qd-cards button.fv-qd-card:focus,
	.fv-qd .fv-qd-cards button.fv-qd-card:active { padding: 4px 6px; }
	.fv-qd-qty { font-size: 12.5px; }
	.fv-qd-was { font-size: 9.5px; }
	.fv-qd-total { font-size: 13px; }
	.fv-qd-save { right: 4px; font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) {
	.fv-qd .fv-qd-cards button.fv-qd-card, .fv-qd-dot { transition: none; }
	.fv-qd .fv-qd-cards button.fv-qd-card:active { transform: none; }
}
.fv-qd[hidden] { display: none; }