/* Promosyon catalogue: listing and product detail.
   The theme styles the surrounding grid and cards; this file covers only what the catalogue adds. */

/* ---------- product detail: gallery ---------- */

/* The frame the theme's old slider sat in, with room between the border and the artwork.
   Vendor images are photographed on white, so a tight border reads as a box drawn round the
   product rather than a frame around the picture. */
.promosyon_gallery_frame {
	border: 3px solid #eee;
	border-radius: 5px;
	padding: 22px;
}

.promosyon_gallery {
	list-style: none;
	margin: 0;
	padding: 0;
}

.promosyon_gallery li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.promosyon_gallery li:before {
	content: none;
}

/* One flat list: the first image leads, the rest are thumbnails beside it. Driving that from
   :first-child rather than two containers keeps it a single repeater over the image list.
   Aspect ratios vary wildly between vendor photographs, so thumbnails are fixed boxes with the
   image contained rather than cropped - that keeps the row aligned without cutting products
   in half. */
.promosyon_gallery li:first-child {
	display: block;
	text-align: center;
	margin-bottom: 18px;
}

.promosyon_gallery li:first-child img {
	max-width: 100%;
	max-height: 420px;
	width: auto;
	height: auto;
}

.promosyon_gallery li + li {
	display: inline-block;
	vertical-align: top;
	margin: 0 10px 10px 0;
}

.promosyon_gallery li + li a {
	display: block;
	width: 88px;
	height: 88px;
	line-height: 84px;
	text-align: center;
	padding: 5px;
	border: 1px solid #eee;
	border-radius: 4px;
	overflow: hidden;
}

.promosyon_gallery li + li a:hover {
	border-color: #ccc;
}

.promosyon_gallery li + li img {
	max-width: 100%;
	max-height: 100%;
	vertical-align: middle;
}

/* The quote form opens in a fancybox; this is its panel, hidden until then. */
.promosyon_order_modal {
	display: none;
	width: 420px;
	max-width: 100%;
	padding: 30px;
	box-sizing: border-box;
}

.promosyon_order_modal h4 {
	margin-top: 0;
}

/* ---------- product detail: lightbox ---------- */

/* A white mat around the picture, drawn OUTSIDE the box. fancyBox v4 has no padding option - the
   only "padding" in the bundle is it reading computed values while measuring - so this is CSS, but
   it must not touch the geometry: Panzoom sizes .fancybox__content and positions the image against
   it, so padding or a border there moves the image out of its own frame. box-shadow paints the mat
   without occupying any layout at all.

   More specific than fancyBox's own rule so link order cannot disable it. This file is only linked
   from the promotion pages, so the portfolio lightbox is untouched. */
.fancybox__container .has-image .fancybox__content {
	background: #fff;
	box-shadow: 0 0 0 15px #fff;
}

/* ---------- product detail: specifications ---------- */

.promosyon_spec_table {
	width: 100%;
	margin: 0 0 18px;
}

.promosyon_spec_table th,
.promosyon_spec_table td {
	padding: 7px 0;
	border-bottom: 1px solid #eee;
	vertical-align: top;
}

.promosyon_spec_table th {
	width: 45%;
	text-align: left;
	font-weight: normal;
	color: #999;
}

/* ---------- product detail: quote form ---------- */

/* !important against the theme: its form fields are sized for the contact page's own column, and
   that width reaches these through a rule this one cannot out-specify cleanly. The override is
   scoped to this panel, so no other form on the site is affected. */
.promosyon_order_modal input[type="text"],
.promosyon_order_modal textarea {
	width: 100% !important;
	max-width: none !important;
	margin-bottom: 12px;
	box-sizing: border-box !important;
}

.promosyon_order_modal textarea {
	min-height: 110px;
}

.promosyon_order_modal .feedback_go {
	width: 100%;
}

/* jQuery Validate drops its message after the field it belongs to. */
.promosyon_order_modal label.error {
	display: block;
	margin: -8px 0 10px;
	color: #c0392b;
}

/* ---------- listing: category description ---------- */

.promosyon_category_description {
	margin-bottom: 25px;
}