/**
 * The optional accessories list on a product page.
 *
 * Taken from the classic theme's style.css as it stood, so the list looks the same after the move.
 * It lives with the markup, in the plugin, rather than in each theme: the markup is Modules\
 * Accessories', and a stylesheet per theme would be the same decision written twice.
 *
 * Two things that did not come across. The ten #product-<id> rules that hid the list, or one group
 * of it, on named products are settings now, on the Acessórios tab of the QuadrosVidro.pt admin
 * page, because they only ever worked while Storefront's post_class() was putting that id on the
 * wrapper. And .webdados_toolbox_acessories_title, which shared a selector with ours but belongs to
 * another plugin, stayed in the theme.
 *
 * The teal is the classic theme's brand colour, hardcoded there and hardcoded here. Under the block
 * theme it should come from the palette instead, which is part of deciding what this list looks
 * like on the new product page.
 */

#qv_accessories {
	margin-top: 1.41575em;
	margin-bottom: 1.41575em;
}

.product-type-simple #qv_accessories {
	margin-top: 0px;
}

#qv_accessories p {
	margin-bottom: 0px;
}

#qv_accessories p label {
	color: #4db8c6;
	font-weight: bold;
}

#qv_accessories .qv_accessories_group {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

#qv_accessories .qv_accessories_group_title {
	font-weight: 600;
}

#qv_accessories .qv_accessories_group_item {
	font-size: 0.85em;
	position: relative;
}

/* The VAT inclusive price, which Modules\Price adds to every price on the page. */
#qv_accessories .qv_accessories_group_item .qv_price_with_vat {
	margin-left: 0.25em;
}

/* QV-PREVIEW BEGIN - miniaturas dos acessorios + pre-visualizacao ao passar o rato */
#qv_accessories .qv_accessory_thumb {
	display: inline-block;
	position: relative;
	width: 32px;
	height: 32px;
	vertical-align: middle;
	margin: 2px 5px 2px 0;
}

#qv_accessories .qv_accessory_thumb img {
	display: block;
	width: 32px;
	height: 32px;
	max-width: none;
	object-fit: contain;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 2px;
}

/* Ao passar o rato POR CIMA DA IMAGEM (e so da imagem), a miniatura passa a
   position:absolute e cresce em width/height. Como sai do fluxo, o espaco de 32px
   mantem-se e nao ha salto no layout. Ao contrario do transform:scale(), aqui a
   moldura e o raio dos cantos nao crescem.
   NAO usar :focus-within na linha: disparava ao clicar na checkbox ou na etiqueta,
   o que nao faz sentido nenhum. A miniatura de 32px esta sempre visivel, por isso
   quem navega com teclado nao fica sem a informacao. */
@media (hover: hover) {
	#qv_accessories .qv_accessory_thumb:hover img {
		position: absolute;
		z-index: 100;
		left: 0;
		top: 50%;
		width: 160px;
		height: 160px;
		max-width: none;
		max-height: none;
		margin-top: -80px;
		padding: 8px;
		border: 0;
		border-radius: 3px;
		box-shadow: 0 2px 14px rgba( 0, 0, 0, .22 );
	}
}

#qv_accessories .qv_accessory_link {
	margin-left: 8px;
	font-size: .85em;
	line-height: 1;
	white-space: nowrap;
	color: #4db8c6;
	text-decoration: underline;
}

#qv_accessories .qv_accessory_link:hover,
#qv_accessories .qv_accessory_link:focus {
	color: #2c8e9b;
	text-decoration: underline;
}
/* QV-PREVIEW END */