/* Single product page.

   Two jobs. First, undo the stacked-grid gallery that style.css used before
   WooCommerce's slider was switched on - the two layouts cannot both apply.
   Second, lay out the trade sheet: measurements, rate table, slab picker.

   Layout follows the supplied reference. Its terracotta is replaced by the
   site's navy and gold throughout. */

/* ------------------------------------------------------ gallery ------- */

/* Thumbnails run down the left of the main shot, as in the reference. */
.woocommerce div.product .woocommerce-product-gallery {
	position: relative;
	display: grid; grid-template-columns: 88px minmax(0, 1fr);
	gap: .7rem; align-items: start;
}

.woocommerce div.product .flex-viewport {
	grid-column: 2; grid-row: 1;
	overflow: hidden !important; height: auto !important;
	border: 1px solid var(--vv-line);
}

/* No slider yet (single image): the lone figure still belongs on the right. */
.woocommerce div.product .woocommerce-product-gallery__wrapper {
	grid-column: 2; grid-row: 1;
	display: block; margin: 0; padding: 0;
}

.woocommerce div.product .flex-viewport .woocommerce-product-gallery__wrapper { grid-column: auto; }

.woocommerce div.product .woocommerce-product-gallery__image {
	background: var(--vv-cream);
	overflow: hidden;
}

.woocommerce div.product .woocommerce-product-gallery__image img {
	width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
}

/* The slide on show must not scale on hover - it would drift out of frame. */
.woocommerce div.product .woocommerce-product-gallery__image:hover img { transform: none; }

.woocommerce div.product .flex-control-thumbs {
	grid-column: 1; grid-row: 1;
	display: grid !important; grid-auto-rows: min-content;
	gap: .5rem; margin: 0; padding: 0; list-style: none;
}

/* FlexSlider ships width:25%;float:left on these. The grid handles placement,
   so both have to go - and its rule needs beating outright. */
.woocommerce div.product .flex-control-thumbs li {
	margin: 0 !important; width: 100% !important; float: none !important;
}

.woocommerce div.product .flex-control-thumbs img {
	width: 100%; aspect-ratio: 2 / 3; object-fit: cover;
	opacity: .6; cursor: pointer;
	border: 1px solid var(--vv-line);
	transition: opacity .2s var(--vv-ease), border-color .2s var(--vv-ease);
}

.woocommerce div.product .flex-control-thumbs img:hover,
.woocommerce div.product .flex-control-thumbs img.flex-active {
	opacity: 1; border-color: var(--vv-gold);
}

/* Prev / next over the main shot. */
.woocommerce div.product .flex-direction-nav { display: block !important; margin: 0; padding: 0; list-style: none; }

.woocommerce div.product .flex-direction-nav a {
	position: absolute; top: 50%; z-index: 3;
	display: grid; place-items: center;
	width: 40px; height: 40px; margin-top: -20px;
	background: rgba(255, 255, 255, .9); color: var(--vv-navy);
	font-size: 0; opacity: 0;
	transition: opacity .25s var(--vv-ease), background .2s var(--vv-ease);
}

.woocommerce div.product .woocommerce-product-gallery:hover .flex-direction-nav a { opacity: 1; }
.woocommerce div.product .flex-direction-nav a:hover { background: var(--vv-navy); color: #fff; }
.woocommerce div.product .flex-direction-nav .flex-prev { left: 88px; }
.woocommerce div.product .flex-direction-nav .flex-next { right: 0; }

.woocommerce div.product .flex-direction-nav a::before {
	content: ""; width: 10px; height: 10px;
	border-top: 2px solid currentColor; border-right: 2px solid currentColor;
}

.woocommerce div.product .flex-direction-nav .flex-prev::before { transform: rotate(-135deg); margin-left: 3px; }
.woocommerce div.product .flex-direction-nav .flex-next::before { transform: rotate(45deg); margin-right: 3px; }

/* ------------------------------------------------------- summary ------ */

.vvt-sp-eyebrow {
	display: inline-block; margin-bottom: .45rem;
	font-size: var(--vv-eyebrow); font-weight: 700; letter-spacing: var(--vv-eyebrow-track);
	text-transform: uppercase; color: var(--vv-gold-deep);
}

.vvt-sp-eyebrow:hover { color: var(--vv-navy); }

.woocommerce div.product .product_title { font-size: var(--vv-h2); margin-bottom: .2em; color: var(--vv-ink); }

.vvt-sp-divider .vvt-divider { justify-content: flex-start; margin: 0 0 1rem; color: var(--vv-gold); }
.vvt-sp-divider .vvt-divider svg { width: var(--vv-divider-w); }

/* Price band. */
.woocommerce div.product p.price,
.woocommerce div.product span.price {
	display: inline-block;
	margin: 0 0 1.2rem; padding: .6rem 1.15rem;
	background: var(--vv-cream);
	border: 1px solid var(--vv-line); border-radius: var(--vv-radius);
	font-size: 1.05rem; font-weight: 600; color: var(--vv-navy);
}

.woocommerce div.product p.price:empty { display: none; }

/* Small caps label used above measurements and the slab picker. */
.vvt-sp-label {
	margin: 0 0 .5rem;
	font-family: var(--vv-sans); font-size: .74rem; font-weight: 700;
	letter-spacing: .18em; text-transform: uppercase; color: var(--vv-gold-deep);
}

.vvt-sp-measure { margin-bottom: 1rem; }
.vvt-sp-measure dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .2rem .5rem; margin: 0; font-size: .9rem; }
.vvt-sp-measure dt { color: var(--vv-ink); }
.vvt-sp-measure dt::after { content: " :"; }
.vvt-sp-measure dd { margin: 0; color: var(--vv-ink); }

.vvt-sp-note {
	margin: 0 0 1.3rem; padding: .7rem 1rem;
	background: var(--vv-cream);
	border: 1px solid var(--vv-gold); border-radius: var(--vv-radius);
	font-size: .84rem; line-height: 1.6; color: var(--vv-ink);
}

.vvt-sp-note strong { color: var(--vv-gold-deep); }

/* --------------------------------------------------- rate table ------- */

.vvt-sp-rates { margin: 0 0 1.3rem; }

.vvt-sp-rates table {
	width: 100%; border-collapse: collapse;
	border: 1px solid var(--vv-line);
	font-size: .88rem;
}

.vvt-sp-rates th, .vvt-sp-rates td {
	padding: .6rem .85rem; text-align: left;
	border: 1px solid var(--vv-line);
}

.vvt-sp-rates thead th {
	background: var(--vv-cream);
	font-size: .7rem; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--vv-navy);
}

.vvt-sp-rates tbody th { font-weight: 500; color: var(--vv-ink); }
.vvt-sp-rates tbody td { color: var(--vv-ink); }
.vvt-sp-rates__hidden { letter-spacing: .18em; color: var(--vv-muted); }
.vvt-sp-rates__lock { margin: .6rem 0 0; font-size: .78rem; color: var(--vv-muted); }

.vvt-sp-chosen { margin: .9rem 0 1rem; font-size: .9rem; color: var(--vv-ink); }
.vvt-sp-chosen strong { color: var(--vv-gold-deep); font-weight: 700; }

/* Slab picker. */
.vvt-sp-slabs { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1rem; }

.vvt-sp-slab {
	padding: .7rem 1.5rem;
	background: #fff;
	border: 1px solid var(--vv-line); border-radius: var(--vv-radius);
	font-family: var(--vv-sans); font-size: .8rem; font-weight: 600;
	letter-spacing: .08em; color: var(--vv-ink); cursor: pointer;
	transition: background .2s var(--vv-ease), border-color .2s var(--vv-ease), color .2s var(--vv-ease);
}

.vvt-sp-slab:hover { border-color: var(--vv-navy); }
.vvt-sp-slab.is-on { background: var(--vv-navy); border-color: var(--vv-navy); color: #fff; }

.vvt-sp-total {
	margin: 0 0 1rem;
	font-family: var(--vv-sans); font-size: 1.75rem; font-weight: 700;
	color: var(--vv-ink);
}

/* ------------------------------------------------------- actions ------ */

.woocommerce div.product form.cart { display: block; margin: 0 0 .6rem; }
.woocommerce div.product form.cart .quantity { display: none; }
.woocommerce div.product form.cart .button { width: 100%; padding: 1rem 2rem; }

.vvt-sp-save {
	display: block; margin-bottom: 1.3rem; padding: .95rem 1.5rem;
	border: 1px solid var(--vv-line); border-radius: var(--vv-radius);
	background: #fff; text-align: center;
	font-size: .78rem; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--vv-navy);
	transition: background .2s var(--vv-ease), border-color .2s var(--vv-ease), color .2s var(--vv-ease);
}

.vvt-sp-save:hover { background: var(--vv-navy); border-color: var(--vv-navy); color: #fff; }

/* Meta, boxed like the reference. */
.woocommerce div.product .product_meta {
	display: grid; gap: .45rem;
	padding: .95rem 1.15rem;
	background: #fffdf8;
	border: 1px solid var(--vv-line); border-radius: var(--vv-radius);
	font-size: .86rem; color: var(--vv-ink);
}

.woocommerce div.product .product_meta > span { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); }
.woocommerce div.product .product_meta .sku_wrapper .sku,
.woocommerce div.product .product_meta a,
.vvt-sp-brand span { color: var(--vv-muted); }
.woocommerce div.product .product_meta a:hover { color: var(--vv-navy); }

/* -------------------------------------------------------- quote ------- */

.vvt-sp-quote {
	display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 1.1rem; align-items: center;
	margin: 2rem 0 0; padding: 1.25rem 1.5rem;
	background: #fffdf8;
	border: 1px solid var(--vv-line); border-radius: var(--vv-radius);
}

.vvt-sp-quote__ico { display: grid; place-items: center; width: 46px; height: 46px; color: var(--vv-gold-deep); }
.vvt-sp-quote__ico svg { width: 30px; height: 30px; }

.vvt-sp-quote__copy h2 {
	margin: 0 0 .2rem;
	font-family: var(--vv-serif); font-size: var(--vv-h3); font-weight: 700; color: var(--vv-ink);
}

.vvt-sp-quote__copy p { margin: 0; font-size: .84rem; color: var(--vv-muted); }
.vvt-sp-quote__btn { white-space: nowrap; }

/* -------------------------------------------------------- trust ------- */

.vvt-sp-trust {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 2rem 0 0; padding: 1.4rem 1.5rem;
	background: var(--vv-cream);
	border: 1px solid var(--vv-line); border-radius: var(--vv-radius);
	list-style: none;
}

.vvt-sp-trust li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: .8rem; align-items: center; }
.vvt-sp-trust li > span { display: grid; place-items: center; color: var(--vv-gold-deep); }
.vvt-sp-trust svg { width: 26px; height: 26px; }
.vvt-sp-trust h3 { margin: 0 0 .1rem; font-family: var(--vv-sans); font-size: .86rem; font-weight: 700; color: var(--vv-navy); }
.vvt-sp-trust p { margin: 0; font-size: .76rem; line-height: 1.45; color: var(--vv-muted); }

/* Minimum order on catalogue cards. */
.vvt-card__moq {
	display: block; margin-top: .2rem;
	font-size: .74rem; font-weight: 600; letter-spacing: .06em;
	text-transform: uppercase; color: var(--vv-muted);
}

/* ------------------------------------------------------ responsive ---- */

@media (max-width: 900px) {
	.woocommerce div.product { grid-template-columns: 1fr; }
	.vvt-sp-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.vvt-sp-quote { grid-template-columns: auto minmax(0, 1fr); }
	.vvt-sp-quote__btn { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
	/* Thumbnails move under the shot - a left rail leaves too little for it. */
	.woocommerce div.product .woocommerce-product-gallery { grid-template-columns: 1fr; }
	.woocommerce div.product .flex-viewport,
	.woocommerce div.product .woocommerce-product-gallery__wrapper { grid-column: 1; grid-row: 1; }
	.woocommerce div.product .flex-control-thumbs {
		grid-column: 1; grid-row: 2;
		grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
	}
	.woocommerce div.product .flex-direction-nav .flex-prev { left: 0; }

	.vvt-sp-trust { grid-template-columns: 1fr; }
	.vvt-sp-slabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.vvt-sp-slab { padding: .7rem .5rem; text-align: center; }
	.vvt-sp-rates table { font-size: .8rem; }
	.vvt-sp-rates th, .vvt-sp-rates td { padding: .5rem .5rem; }
	.woocommerce div.product .product_meta > span { grid-template-columns: 6rem minmax(0, 1fr); }
}

/* The product wrapper is a two-column grid. Everything after the summary is
   full-width furniture and has to say so, the way the tabs already do. */
.woocommerce div.product .vvt-sp-quote,
.woocommerce div.product .vvt-sp-trust,
.woocommerce div.product .related,
.woocommerce div.product .upsells { grid-column: 1 / -1; }

/* The save button is a real button now, not a link. */
button.vvt-sp-save { width: 100%; cursor: pointer; font-family: var(--vv-sans); }

/* -------------------------------------------------- size breakdown ---- */

.vvt-sp-size { display: grid; gap: .35rem; margin: 0 0 .9rem; }

.vvt-sp-size label {
	font-family: var(--vv-sans); font-size: var(--vv-eyebrow); font-weight: 700;
	letter-spacing: var(--vv-eyebrow-track); text-transform: uppercase;
	color: var(--vv-gold-deep);
}

.vvt-sp-size input {
	width: 100%; padding: .8rem .95rem;
	background: #fff;
	border: 1px solid var(--vv-line); border-radius: var(--vv-radius);
	font-family: var(--vv-sans); font-size: .9rem; color: var(--vv-ink);
	transition: border-color .2s var(--vv-ease), box-shadow .2s var(--vv-ease);
}

.vvt-sp-size input:focus {
	outline: 0; border-color: var(--vv-navy-soft);
	box-shadow: 0 0 0 3px rgba(36, 64, 108, .12);
}

.vvt-sp-size > span { font-size: .74rem; line-height: 1.5; color: var(--vv-muted); }

/* ------------------------------- quote & custom design ----------------- */

/* The slab picker prices 20, 50 and 100. Anything past the top slab, or made
   to the buyer's own design, is quoted by hand - so these two sit just under
   the total and lead to the Contact form instead of the cart. */
.vvt-sp-ask {
	margin-top: 1.1rem;
	padding-top: 1.1rem;
	border-top: 1px solid var(--vv-line);
}

.vvt-sp-ask__note {
	margin: 0 0 .7rem;
	max-width: 44ch;
	font-size: .84rem;
	line-height: 1.6;
	color: var(--vv-muted);
}

.vvt-sp-ask__row { display: flex; flex-wrap: wrap; gap: .6rem; }

.vvt-sp-ask__btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: .7rem 1.15rem;
	border: 1px solid var(--vv-navy);
	color: var(--vv-navy) !important;
	font-size: .74rem; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase;
	text-decoration: none;
	transition: background .22s var(--vv-ease), color .22s var(--vv-ease);
}

.vvt-sp-ask__btn:hover { background: var(--vv-navy); color: #fff !important; }

.vvt-sp-ask__btn--alt { border-color: var(--vv-gold); color: var(--vv-gold-deep) !important; }
.vvt-sp-ask__btn--alt:hover { background: var(--vv-gold-deep); border-color: var(--vv-gold-deep); color: #fff !important; }

@media (max-width: 480px) {
	.vvt-sp-ask__row { flex-direction: column; }
	.vvt-sp-ask__btn { width: 100%; }
}

/* Buy now, under Add to cart. Deliberately the quieter of the two - the cart is
   the normal path for a wholesale lot, and this is the shortcut.

   The gap hangs off the add-to-cart button above, not off this one. A margin-top
   here computes correctly but never renders - something in WooCommerce's own
   button styling swallows it - while a margin-bottom on the button above works,
   so that is where the spacing lives. */
.woocommerce div.product form.cart .single_add_to_cart_button {
	margin-bottom: 14px;
}

.woocommerce div.product form.cart .vvt-sp-buynow,
.vvt-sp-buynow {
	display: block; width: 100%;
	margin-top: 0; padding: .95rem 2rem;
	background: transparent;
	color: var(--vv-navy);
	border: 1px solid var(--vv-navy);
	border-radius: var(--vv-radius);
	font-family: var(--vv-sans);
	font-size: .78rem; font-weight: 700;
	letter-spacing: .16em; text-transform: uppercase;
	cursor: pointer;
	transition: background .22s var(--vv-ease), color .22s var(--vv-ease);
}

.vvt-sp-buynow:hover { background: var(--vv-navy); color: #fff; }