/* ============================================================================
   cad-blocks.co.uk - product page + download-fulfilment styles
   Added 2026-07-31. Ported from the design already live on ca.cad-steel.com,
   cad-steel.com and cad-steel.co.uk.

   Loaded AFTER /assets/css/all.min.css so these rules win. Kept in its own file
   deliberately: all.min.css is a 278 KB minified 2017 bundle and must not be
   hand-edited.

   Layout is BLOCK + position:fixed, never flex on the container. The sibling
   sites originally shipped a flex version of this and it caused content
   mis-centering that took two rounds to fix; the fixed-position approach is
   what is actually live there now, and the flex rules that remain in their
   stylesheets are dead leftovers.
   ========================================================================== */

/* The row that holds the product content and the sidebar. Block, not flex.
   The sidebar is position:fixed at >=1401px so it is out of flow anyway -
   flex would buy nothing and is what caused the earlier centering problem. */
.pd-layout { display: block; }

.pd-main { min-width: 0; }

/* Sidebar container. Empty by design - nothing fills it in this brief. */
.pd-sidebar { width: 300px; min-height: 600px; }

/* Product image + download button ------------------------------------------ */
.img_holder { width: 100%; text-align: center; margin: 0 auto; }
.img_holder img { border: 1px solid gray; max-width: 100%; }

.btn_holder { width: 100%; text-align: center; margin: 20px auto 0; }

a.ppBtn {
	display: inline-block;
	width: 210px;
	max-width: 100%;
	height: 32px;
	line-height: 32px;
	background: #f0f0f0;
	border: 0;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
	color: #222;
	cursor: pointer;
	box-sizing: border-box;
}
a.ppBtn:hover { background: #e4e4e4; }
a.ppBtn .ppSpan { text-decoration: none; }

/* The "buy the whole site" shop block. Was a left-floated 250px box sitting
   beside the image; floated left it fights the sidebar gutter, so it now sits
   below the product content as a normal centred block. */
.pd-shop { clear: both; width: 100%; max-width: 520px; margin: 40px auto 0; text-align: center; }

/* Desktop: reserve a gutter so the main column never runs under the fixed
   sidebar, and fix the sidebar itself.
   top 90px  = 70px fixed header + 20px breathing room
   right 40px = content padding + scrollbar, so its right edge lines up
   z-index 999 matches the sibling sites; #header there is 302. */
@media (min-width: 1401px) {
	.pd-layout { padding-right: 340px; }
	.pd-sidebar {
		position: fixed;
		top: 90px;
		right: 40px;
		width: 300px;
		height: 600px;
		z-index: 999;
	}
}

/* Under 1401px the sidebar stacks below the content instead. Matches the
   sibling breakpoint exactly - 1400 leaves real margin over the ~1365px
   knife-edge where the main column starts squeezing the product content. */
@media (max-width: 1400px) {
	.pd-layout { padding-right: 0; }
	.pd-sidebar {
		position: static;
		width: 300px;
		max-width: 100%;
		height: auto;
		margin: 30px auto 0;
	}
}

/* Download-fulfilment page -------------------------------------------------- */
.dlf-wrap { max-width: 640px; margin: 30px auto 60px; text-align: center; }
.dlf-wrap h1 { margin-bottom: 6px; }
.dlf-shape { font-size: 18px; color: #444; margin: 0 0 24px; }
.dlf-box {
	background: #f4f7f6;
	border: 1px solid #e6eaea;
	border-radius: 5px;
	padding: 18px 20px;
	margin: 0 auto 22px;
}
.dlf-box p { margin: 0; }
.dlf-manual { font-size: 14px; color: #555; }
.dlf-error { color: #a33; }