/* The "prices shown for ..." line. Loaded on every page that prints a price -
   the listing, a category and the product page all show it, so it cannot live
   in product.css the way it used to. */

.vvt-cur {
	display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
	margin: -.5rem 0 1.2rem;
}

.vvt-cur__ico { display: grid; place-items: center; color: var(--vv-gold-deep); }
.vvt-cur__ico svg { width: 17px; height: 17px; }

.vvt-cur__now { font-size: .8rem; font-weight: 600; color: var(--vv-ink); }
.vvt-cur__note { font-size: .72rem; color: var(--vv-muted); }

/* On the listing the line sits under the shop header rather than beside a
   price, so it needs the shell's own gutter and a little more air. */
.woocommerce-products-header ~ .vvt-cur,
.vvt-shop .vvt-cur {
	margin: 0 0 1.5rem;
	justify-content: center;
}

/* Rupee-billing note at the top of the cart and the checkout. */
.vvt-billing-note {
	max-width: var(--vv-shell);
	margin: 0 auto 1.5rem;
	padding: .75rem 1rem;
	background: var(--vv-cream-deep);
	border-left: 3px solid var(--vv-gold);
	font-size: .85rem;
	color: var(--vv-ink);
}

/* Shipment tracking on the customer's order page. */
.vvt-track { margin: 2rem 0; }
.vvt-track h2 { font-family: var(--vv-serif); font-size: 1.1rem; margin: 0 0 .75rem; }
.vvt-track th { width: 40%; text-align: left; }


/* --------------------------------------------- currency selector ------- */

/* The detection is a guess - it has been wrong - so the visitor can override
   it here. Styled to sit in the line rather than shout from it. */
.vvt-cur__pick {
	max-width: 15rem;
	padding: .2rem 1.4rem .2rem .4rem;
	border: 1px solid var(--vv-line);
	border-radius: 3px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: .78em;
	line-height: 1.4;
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5l4-4' fill='none' stroke='%237a7367' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right .35rem center;
	background-size: 11px;
}

.vvt-cur__pick:hover { border-color: var(--vv-gold); }
.vvt-cur__pick:focus-visible { outline: 2px solid var(--vv-gold); outline-offset: 1px; }
.vvt-cur__pick option { color: initial; }
/* The approximate equivalent printed beside a cart or checkout figure. Quiet
   on purpose: the rupee amount next to it is the one actually charged. */
.vvt-approx {
	display: inline-block;
	margin-left: .4em;
	font-size: .82em;
	font-weight: 400;
	white-space: nowrap;
	opacity: .72;
}

/* The currency line sits above the basket on cart and checkout, where the
   blocks give it no room of its own. */
.woocommerce-cart .vvt-cur,
.woocommerce-checkout .vvt-cur { margin-bottom: .9rem; }

/* ------------------------------------------- cart and checkout width --- */

/* Cart and checkout are ordinary pages, so they were coming through page.php
   inside .vvt-prose - a 74ch reading column. That capped the whole checkout at
   752px, and WooCommerce's two-column block then had to fit its sidebar into
   what was left: 263px, of which the product name got 61. The name wrapped one
   word to a line, and once an approximate price sat beside the rupee figure it
   wrapped one letter to a line. These are not prose; they get the full shell. */
.woocommerce-cart .vvt-prose,
.woocommerce-checkout .vvt-prose {
	max-width: none;
	font-size: 1rem;
}

/* Enough room for a product name to read as a name. WooCommerce's own default
   is a percentage, which on a wide screen leaves the summary looking stranded
   and on a narrow one squeezes it again. */
.woocommerce-cart .wc-block-components-sidebar,
.woocommerce-checkout .wc-block-components-sidebar {
	flex-basis: clamp(20rem, 34%, 27rem);
}

/* The approximate price goes under the rupee figure inside a line item: the
   cell there is narrow by design and an inline pair pushes the name out. In
   the totals rows underneath there is room, so it stays on the line. */
.wc-block-components-order-summary-item .vvt-approx {
	display: block;
	margin-left: 0;
}