/*
 * [linked_product] card — styles.
 *
 * Enqueued on demand by JMA_Linked_Product::render(), so only pages that
 * actually contain the shortcode load it.
 *
 * Extracted from the "Jasmin Maziva - Child Croator" theme's style.css, where
 * these rules were scattered across the file. Declarations are verbatim; only
 * the selectors changed, and only in one direction — three of them were global
 * and are scoped to the card here, so the plugin cannot restyle anything else:
 *
 *   .flex                        -> .product-info.flex, .product-info .buttons.flex
 *   ul.no-style, .no-style       -> .product-info .buttons li.no-style
 *   .image-wrap img              -> .product-info .image-wrap img
 *
 * The theme's own copies of those three stay where they are — .flex and
 * .no-style are site-wide utilities, and .image-wrap is shared with .piktogrami,
 * the matica promo card and the loyalty module. Nothing here removes them.
 *
 * NOT copied, because it is not this card's to own: the base `.button`
 * appearance (background, colour, radius, font) still comes from the parent
 * croator/Shoptimizer theme. Only the card's padding/transition override for
 * .spec-sheet and .product-link is below. If the theme's button styling ever
 * goes away, these buttons go with it.
 *
 * .title-holder and .button-holder carry no rules — they had none in the theme
 * either. They are structural hooks only.
 *
 * There is no companion JS: the card is static markup with no handlers, data
 * attributes or state.
 */

/* Layout ------------------------------------------------------------------ */

.product-info.flex,
.product-info .buttons.flex {
	display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;     /* OLD - Firefox 19- */
	display: -ms-flexbox;  /* TWEENER - IE 10 */
	display: -webkit-flex; /* NEW - Chrome */
	display: flex;         /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.product-info.flex .image-wrap {
	flex: 1;
}

.product-info.flex .content-wrap {
	flex: 3;
}

.product-info .image-wrap img {
	margin: auto;
}

/* Buttons ----------------------------------------------------------------- */

.product-info ul.buttons {
	margin: 0px;
}

.product-info ul.buttons li {
	margin-right: 10px;
}

.product-info .buttons li.no-style {
	list-style: none;
}

.product-info a.button.product-link,
.product-info a.button.spec-sheet {
	transition: 200ms;
	padding: 15px 30px;
}

/* Below 768px the card restacks: image over content, buttons full-width. ---- */

@media (max-width: 768px) {

	.product-info.flex,
	.product-info .buttons.flex {
		flex-direction: column;
	}

	.product-info ul.buttons a {
		width: 100%;
		text-align: center;
	}
}