/* ==========================================================================
   Product detail — DTKA 东特矿安 (independent of style.css)
   Loaded on single product only (see functions.php: dtka_scripts).
   ========================================================================== */
.product-detail { --pg-blue: #004DA5; --pg-blue-dark: #08408f; --pg-gold: #f5a623; --pg-gold-dark: #e08e00; --pg-gold-rim: #714f10; --pg-wa: #25d366; --pg-wa-dark: #1eb257; --pg-wa-rim: #11612f; }

/* ---------- Breadcrumb ---------- */
.dtka-breadcrumb { padding: 18px 0 0; }
.dtka-bc-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	font-size: 14px;
	color: var(--dtka-muted);
}
.dtka-bc-item { display: inline-flex; align-items: center; gap: 8px; }
.dtka-bc-item + .dtka-bc-item::before { content: "/"; color: #c2c8d0; }
.dtka-bc-item a { color: var(--dtka-muted); text-decoration: none; }
.dtka-bc-item a:hover { color: var(--pg-blue); }
.dtka-bc-item.is-current span { color: var(--dtka-heading); }

/* ---------- Top: info + gallery ---------- */
.product-detail .container { max-width: 1360px; }
.product-top { padding: 46px 0; border-bottom: 1px solid var(--dtka-border); }
.product-top-inner {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 48px;
	align-items: start;
}
.product-eyebrow {
	display: inline-block;
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--dtka-muted);
	margin-bottom: 8px;
}
.product-model {
	margin: 0 0 14px;
	font-size: clamp(26px, 4vw, 36px);
	line-height: 1.1;
	font-weight: 700;
	color: #111;
}
.product-moq {
	font-size: 14px;
	color: var(--dtka-muted);
	margin: 0 0 18px;
}
.product-desc {
	margin: 0 0 22px;
	max-width: 520px;
	font-size: 15px;
	line-height: 1.7;
	color: #555;
}
.product-keys {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 0 26px;
}
.product-key {
	padding: 0 26px;
	border-left: 1px solid var(--dtka-border);
}
.product-key:first-child { padding-left: 0; border-left: 0; }
.product-key-label {
	display: block;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--dtka-muted);
	margin-bottom: 4px;
}
.product-key-value {
	display: block;
	font-size: 20px;
	font-weight: 600;
	color: #111;
	line-height: 1.1;
}
.product-inquiry {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 40px;
	padding: 0 28px;
	border-radius: 999px;
	background: var(--pg-gold);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	/* Hard dark bottom rim + warm glow, sampled from the reference swatch. */
	box-shadow: 0 2px 0 var(--pg-gold-rim), 0 6px 16px rgba(245, 166, 35, .35);
	transition: background .2s ease, transform .2s ease;
}
.product-inquiry:hover { background: var(--pg-gold-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 2px 0 var(--pg-gold-rim), 0 8px 18px rgba(245, 166, 35, .42); }

/* Margins collapse with the neighbouring .product-keys / .product-share
   margins, so these have to exceed them to widen the gap. */
.product-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 34px 0 30px; }
.product-whatsapp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 40px;
	padding: 0 24px;
	border-radius: 999px;
	background: var(--pg-wa);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 2px 0 var(--pg-wa-rim), 0 6px 16px rgba(37, 211, 102, .3);
	transition: background .2s ease, transform .2s ease;
}
.product-whatsapp svg { width: 18px; height: 18px; }
.product-whatsapp:hover { background: var(--pg-wa-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 2px 0 var(--pg-wa-rim), 0 8px 18px rgba(37, 211, 102, .38); }

/* Share buttons */
.product-share {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 22px;
}
.product-share-label {
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--dtka-muted);
}
.product-share-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #e9edf2;
	color: #6b7280;
	transition: background .2s ease, color .2s ease;
}
.product-share-btn svg { width: 16px; height: 16px; }
.product-share-btn:hover { background: #d3dae3; color: #374151; }

/* Gallery */
.product-gallery {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}
.pg-main {
	position: relative;
	flex: 1 1 auto;
	width: auto;
	min-width: 0;
	aspect-ratio: 1 / 1;
	background: #f6f8fb;
	border-radius: var(--dtka-radius);
	overflow: hidden;
}
.pg-main-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pg-thumbs {
	order: -1;               /* 缩略图放主图左侧 */
	display: flex;
	flex-direction: column;  /* 竖排 */
	flex-wrap: nowrap;
	gap: 10px;
	flex: 0 0 auto;
	max-width: none;
	margin: 0;
}
.pg-thumb {
	width: 92px;
	height: 92px;
	padding: 5px;
	background: #fff;
	border: 2px solid var(--dtka-border);
	border-radius: var(--dtka-radius);
	cursor: pointer;
	transition: border-color .2s ease;
}
.pg-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pg-thumb:hover { border-color: #c8d2df; }
.pg-thumb.is-active { border-color: var(--pg-blue); }

/* ---------- Content sections ---------- */
.dt-section { padding: 46px 0 6px; }
.dt-section-title {
	position: relative;
	display: inline-block;
	margin: 0;
	padding-bottom: 14px;
	font-size: 24px;
	font-weight: 800;
	letter-spacing: .5px;
	color: var(--pg-blue);
}
.dt-section-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 3px;
	background: var(--pg-blue);
}
.dt-section-text { margin: 22px 0 0; color: #555; line-height: 1.8; }

/* Spec table (rendered from post_content) */
.product-spec-content { margin-top: 24px; }
.product-spec-content table {
	width: 100%;
	max-width: 760px;   /* 桌面端不撑满屏幕 */
	border-collapse: collapse;
	font-size: 13px;
}
.product-spec-content h3 { display: none; }
.product-spec-content td,
.product-spec-content th {
	padding: 6px 10px;
	border: 1px solid #e2e6ec;
	text-align: left;
	line-height: 1.5;
}
.product-spec-content tr:nth-child(1) td,
.product-spec-content thead th {
	background: var(--dtka-blue-soft);
	color: var(--dtka-heading);
	font-weight: 700;
}
.product-spec-content tbody tr:nth-child(even) td { background: #f5f7fa; }
.product-spec-content tbody tr:nth-child(odd) td { background: #fff; }

/* ---------- Content layout: main + sidebar ---------- */
.dt-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 44px;
	align-items: start;
}

/* Sidebar widgets */
.dt-sidebar { display: flex; flex-direction: column; gap: 24px; }
.dt-widget {
	border: 1px solid var(--dtka-border);
	border-radius: var(--dtka-radius);
	background: #fff;
	padding: 18px 18px 20px;
}
.dt-widget__title {
	position: relative;
	margin: 0 0 14px;
	padding-bottom: 10px;
	font-size: 17px;
	font-weight: 700;
	color: var(--pg-blue);
}
.dt-widget__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 34px;
	height: 2px;
	background: var(--pg-blue);
}

/* Categories */
.dt-cat-list { list-style: none; margin: 0; padding: 0; }
.dt-cat-item + .dt-cat-item { border-top: 1px solid #eef1f5; }
.dt-cat-item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 0;
	font-size: 14px;
	color: var(--dtka-heading);
	text-decoration: none;
	transition: color .2s ease;
}
.dt-cat-item a:hover { color: var(--pg-blue); }
.dt-cat-item.is-current > a { color: var(--pg-blue); font-weight: 600; }
.dt-cat-count {
	flex: 0 0 auto;
	min-width: 24px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--dtka-blue-soft);
	color: var(--pg-blue);
	font-size: 12px;
	text-align: center;
}

/* Latest products */
.dt-new-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.dt-new-link { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.dt-new-thumb { flex: 0 0 auto; width: 58px; height: 58px; border-radius: var(--dtka-radius); overflow: hidden; background: #f6f8fb; }
.dt-new-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dt-new-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dt-new-title { font-size: 14px; color: var(--dtka-heading); line-height: 1.35; }
.dt-new-link:hover .dt-new-title { color: var(--pg-blue); }

/* Inquiry CTA */
.dt-widget--cta { background: linear-gradient(180deg, #f7faff, #fff); }
.dt-cta-text { margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: #555; }
.dt-cta-btn {
	display: block;
	width: 100%;
	height: 42px;
	border: 0;
	border-radius: 999px;
	background: var(--pg-gold);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(245, 166, 35, .3);
	transition: background .2s ease, transform .2s ease;
}
.dt-cta-btn:hover { background: var(--pg-gold-dark); transform: translateY(-2px); }
.dt-cta-contacts { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.dt-cta-contact { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dtka-heading); text-decoration: none; word-break: break-all; }
.dt-cta-contact svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--pg-blue); }
.dt-cta-contact:hover { color: var(--pg-blue); }
.dt-cta-wa svg { color: #25d366; }

/* ---------- Related products (inside .dt-main, reuses .prod-card from style.css) ---------- */
.product-related { margin-top: 46px; }
.product-related .prod-grid { margin-top: 22px; grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.product-top-inner { grid-template-columns: 1fr; gap: 30px; }
	.dt-layout { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 600px) {
	/* Four cards get too narrow on phones; three keeps the list-page sizing. */
	.product-related .prod-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	/* Thumbs sit under the main photo on phones, not beside it. */
	.product-gallery { flex-direction: column; align-items: stretch; gap: 12px; }
	.pg-thumbs { order: 1; flex-direction: row; flex-wrap: wrap; gap: 10px; }
	.pg-thumb { width: 68px; height: 68px; padding: 4px; }
}
@media (max-width: 520px) {
	/* Three side-by-side keys wrap into ragged, uneven rows once a value is
	   long ("20 kW (2300 RPM)"), so stack them as label / value lines. */
	.product-keys { flex-direction: column; }
	.product-key {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 14px;
		padding: 9px 0;
		border-left: 0;
		border-bottom: 1px solid var(--dtka-border);
	}
	.product-key:first-child { padding-top: 0; }
	.product-key:last-child { padding-bottom: 0; border-bottom: 0; }
	.product-key-label { margin-bottom: 0; flex: 0 0 auto; }
	.product-key-value { font-size: 16px; text-align: right; }
}

/* ---------- Inquiry modal ---------- */
.inq-modal { position: fixed; inset: 0; z-index: 9999; display: none; }
.inq-modal.is-open { display: block; }
.inq-modal__overlay {
	position: absolute; inset: 0;
	background: rgba(2, 16, 48, .55);
}
.inq-modal__dialog {
	position: relative;
	width: min(480px, calc(100% - 32px));
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	margin: 6vh auto 0;
	background: #fff;
	border-radius: 10px;
	padding: 28px 26px 26px;
	box-shadow: var(--dtka-shadow);
}
.inq-modal__close {
	position: absolute; top: 10px; right: 14px;
	border: 0; background: transparent;
	font-size: 26px; line-height: 1; color: #9aa3af;
	cursor: pointer;
}
.inq-modal__close:hover { color: #333; }
.inq-modal__title {
	margin: 0 0 18px; font-size: 22px; font-weight: 800;
	color: var(--pg-blue);
}
.inq-field { display: block; margin-bottom: 14px; }
.inq-field > span {
	display: block; font-size: 13px; font-weight: 600;
	color: #444; margin-bottom: 5px;
}
.inq-field em { color: var(--dtka-red); font-style: normal; }
.inq-field input,
.inq-field textarea {
	width: 100%; padding: 10px 12px;
	border: 1px solid var(--dtka-border); border-radius: var(--dtka-radius);
	font: inherit; font-size: 14px; color: var(--dtka-text);
	background: #fff;
}
.inq-field input[readonly] { background: #f2f5f9; color: #555; }
.inq-field input:focus,
.inq-field textarea:focus { outline: none; border-color: var(--pg-blue); }
.inq-form__feedback { min-height: 20px; margin: 4px 0 12px; font-size: 14px; }
.inq-form__feedback.is-ok { color: #1a7f37; }
.inq-form__feedback.is-err { color: var(--dtka-red); }
.inq-form__submit {
	width: 100%; padding: 12px;
	border: 0; border-radius: var(--dtka-radius);
	background: var(--pg-gold); color: #fff;
	font-size: 15px; font-weight: 700; cursor: pointer;
	transition: background .2s ease;
}
.inq-form__submit:hover { background: var(--pg-gold-dark); }
.inq-form__submit:disabled { opacity: .6; cursor: default; }
body.inq-modal-open { overflow: hidden; }