/* pages/product.css
   Single product: the detail grid, drawings and datasheet.

   Part of assets/css/. The load order lives in
   inc/setup.php - add new files there, not with @import. */

.breadcrumb { border-bottom: 1px solid var(--line); background: var(--soft); }

.breadcrumb-inner {
	padding-top: 16px;
	padding-bottom: 16px;
	display: flex;
	gap: 10px;
	align-items: center;
	font-size: 12.5px;
	color: var(--ink-3);
	flex-wrap: wrap;
}

.breadcrumb-inner a { color: var(--ink-3); }

.breadcrumb-inner a:hover { color: var(--blue); }

.breadcrumb-current { color: var(--ink); font-weight: 500; }

.detail-grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 70px;
	align-items: start;
	padding-top: 52px;
	padding-bottom: 90px;
}

/* 90px is right when the related-products band comes straight after, but the tabs are
   a continuation of the same product, so they sit closer. */
.detail-grid:has(+ .ptabs) { padding-bottom: 38px; }

.detail-media { display: flex; flex-direction: column; gap: 14px; }

.detail-info { display: flex; flex-direction: column; gap: 22px; }

.detail-info .kicker { font-size: 11px; letter-spacing: 0.16em; }

/* Price sits directly under the title, the way a product page is normally read. */
.detail-price {
	margin: -8px 0 0;
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--red);
}

.detail-short { font-size: 15.5px; font-weight: 400; line-height: 1.8; color: var(--ink-2); }

.detail-short p { margin: 0; }

.detail-long { font-size: 15.5px; }

.detail-actions { display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; }

.drawings { margin-top: 8px; display: flex; flex-direction: column; gap: 12px; }

.drawings .spec-head { padding: 0; }

.datasheet { font-size: 13px; font-weight: 600; }

@media (max-width: 680px) {
	/* .ptabs padding-bottom for this width is NOT here - it is in the 680px block near
		   the bottom of the file, because the 980px block sits between the two and would
		   override anything set here. */
	/* 26px put the tab row almost on top of the last spec row's divider - two rules
		   26px apart reading as one control. The specs stack into a tall single column on a
		   phone, so the list needs a clear end before the tabs start. */
	.detail-grid:has(+ .ptabs) { padding-bottom: 42px; }
}

.breadcrumb-inner a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

@media (max-width: 980px) {
	.detail-grid {
		grid-template-columns: 1fr; gap: 40px;
	}
}