/* ==========================================================================
   Express Motorcycle Parts - Product Detail Page (PDP) Stylesheet
   Matches structure of MTW_REVERSE_ENGINEERING.md section 5
   Uses theme tokens defined in style.css:
     --emp-bg: #000000
     --emp-surface: #101011
     --emp-line: #30363b
     --emp-ink: #d0d7dd
     --emp-ink-strong: #ffffff
     --emp-muted: #8b949e
     --emp-accent: #4fcfff
     --emp-accent-ink: #000000
   ========================================================================== */

/* --- Container & Global PDP Tweaks --- */
.emp-pdp-wrap {
	color: var(--emp-ink);
	background: transparent;
}

/* Breadcrumbs */
.emp-pdp-breadcrumb-nav .breadcrumb {
	background-color: transparent;
	padding: 0.5rem 0;
	margin-bottom: 0.75rem;
	font-size: 0.825rem;
	border-bottom: 1px solid var(--emp-line);
}

.emp-pdp-breadcrumb-nav .breadcrumb-item,
.emp-pdp-breadcrumb-nav .breadcrumb-item a {
	color: var(--emp-muted);
	text-decoration: none;
	transition: color 0.15s ease;
}

.emp-pdp-breadcrumb-nav .breadcrumb-item a:hover,
.emp-pdp-breadcrumb-nav .breadcrumb-item a:focus {
	color: var(--emp-accent);
}

.emp-pdp-breadcrumb-nav .breadcrumb-item.active {
	color: var(--emp-ink-strong);
	max-width: 280px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: bottom;
}

.emp-pdp-breadcrumb-nav .breadcrumb-item + .breadcrumb-item::before {
	color: var(--emp-muted);
	content: "/";
}

/* --- Gallery (Left Column) --- */
.emp-pdp-gallery-col {
	margin-bottom: 1.5rem;
}

.emp-gallery-main {
	background: var(--emp-surface);
	border: 1px solid var(--emp-line);
	border-radius: 8px;
	padding: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
	position: relative;
}

.emp-gallery-link {
	display: block;
	width: 100%;
	text-align: center;
}

.emp-main-img {
	max-height: 420px;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	margin: 0 auto;
	transition: transform 0.2s ease-in-out;
}

.emp-gallery-main:hover .emp-main-img {
	transform: scale(1.02);
}

.emp-gallery-thumbs {
	margin-top: 0.75rem;
}

.emp-thumb-link {
	display: block;
	background: var(--emp-surface);
	border: 1px solid var(--emp-line);
	border-radius: 6px;
	padding: 4px;
	text-align: center;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.emp-thumb-link:hover,
.emp-thumb-link:focus {
	border-color: var(--emp-accent);
	box-shadow: 0 0 10px rgba(79, 207, 255, 0.35);
	outline: none;
}

.emp-thumb-img {
	max-height: 70px;
	width: auto;
	object-fit: contain;
	border-radius: 4px;
}

.emp-brochure-link {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--emp-surface);
	border: 1px solid var(--emp-line);
	border-radius: 6px;
	height: 78px;
	color: var(--emp-accent);
	transition: all 0.2s ease;
}

.emp-brochure-link:hover,
.emp-brochure-link:focus {
	border-color: var(--emp-accent);
	color: var(--emp-ink-strong);
	box-shadow: 0 0 10px rgba(79, 207, 255, 0.35);
}

/* --- Right Column Info --- */
.emp-pdp-info-col {
	display: flex;
	flex-direction: column;
}

@media (min-width: 992px) {
	.emp-pdp-info-col {
		padding-left: 2rem;
	}
}

/* Brand badge */
.emp-pdp-brand {
	display: inline-block;
	color: var(--emp-accent);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.35rem;
}

/* Title & Subtitle */
.emp-pdp-title {
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.25;
	color: var(--emp-ink-strong);
	margin-bottom: 0.4rem;
	overflow-wrap: anywhere;
}

.emp-pdp-subtitle {
	font-size: 0.95rem;
	color: var(--emp-muted);
	margin-bottom: 0.75rem;
}

/* Meta Bar (Reviews + Share) */
.emp-pdp-meta-bar {
	gap: 0.75rem;
	padding-bottom: 0.75rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--emp-line);
}

.emp-pdp-meta-bar .fa-star {
	color: #f59e0b;
}

.emp-pdp-meta-bar .fa-star.far {
	color: var(--emp-muted);
}

.emp-share-btn {
	background: var(--emp-surface);
	border-color: var(--emp-line);
	color: var(--emp-muted);
	font-size: 0.8rem;
	padding: 0.25rem 0.6rem;
	border-radius: 4px;
	transition: all 0.15s ease;
}

.emp-share-btn:hover,
.emp-share-btn:focus {
	border-color: var(--emp-accent);
	color: var(--emp-ink-strong);
	background: var(--emp-surface);
}

/* --- Pricing (Large Neon) --- */
.emp-pdp-pricing {
	margin-bottom: 0.75rem;
}

.emp-pdp-price {
	font-size: 2.25rem;
	font-weight: 800;
	line-height: 1.1;
	color: var(--emp-accent);
	text-shadow: 0 0 16px rgba(79, 207, 255, 0.4);
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.emp-pdp-price--promo {
	color: var(--emp-accent);
}

.emp-pdp-gst {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--emp-muted);
	text-shadow: none;
	letter-spacing: normal;
}

.emp-pdp-savings {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.25rem;
}

.emp-pdp-pricing .productrrp s {
	color: var(--emp-muted);
}

.emp-pdp-pricing .productsave {
	background: rgba(79, 207, 255, 0.15);
	color: var(--emp-accent);
	border: 1px solid rgba(79, 207, 255, 0.35);
	padding: 0.2rem 0.5rem;
	border-radius: 4px;
	font-weight: 600;
	font-size: 0.8rem;
}

.emp-pdp-pricing .productwasprice {
	color: var(--emp-muted);
	font-size: 0.9rem;
}

/* --- Availability Badge --- */
.emp-pdp-stock-status {
	margin-top: 0.5rem;
	margin-bottom: 1rem;
}

.emp-badge-stock {
	font-size: 0.825rem;
	font-weight: 600;
	padding: 0.35rem 0.75rem;
	border-radius: 4px;
	letter-spacing: 0.02em;
	display: inline-flex;
	align-items: center;
}

.emp-badge-stock--instock {
	background-color: #064e3b;
	color: #34d399;
	border: 1px solid #059669;
}

.emp-badge-stock.badge-warning {
	background-color: #78350f;
	color: #fde68a;
	border: 1px solid #d97706;
}

.emp-badge-stock.badge-danger {
	background-color: #7f1d1d;
	color: #fca5a5;
	border: 1px solid #dc2626;
}

/* --- Buying Options & Variations --- */
.emp-pdp-buying {
	margin-top: 0.5rem;
	margin-bottom: 1rem;
}

.emp-pdp-buying .table {
	color: var(--emp-ink);
	background: var(--emp-surface);
	border-color: var(--emp-line);
}

.emp-pdp-buying .table td,
.emp-pdp-buying .table th {
	border-color: var(--emp-line);
}

/* Variations styling */
.variation-wrapper {
	margin-top: 0.5rem;
	margin-bottom: 0.75rem;
}

.variation-wrapper .variation-name {
	color: var(--emp-ink-strong);
	font-size: 0.875rem;
	margin-bottom: 0.25rem;
}

.variation-wrapper .form-control {
	background-color: var(--emp-surface);
	border: 1px solid var(--emp-line);
	color: var(--emp-ink-strong);
}

.variation-wrapper .form-control:focus {
	border-color: var(--emp-accent);
	box-shadow: 0 0 0 2px rgba(79, 207, 255, 0.25);
}

._itmspec_lnk {
	display: inline-block;
	background: var(--emp-surface);
	border: 1px solid var(--emp-line);
	color: var(--emp-ink);
	padding: 0.4rem 0.75rem;
	border-radius: 4px;
	margin: 2px;
	text-decoration: none;
	transition: all 0.15s ease;
}

._itmspec_lnk:hover,
._itmspec_lnk:focus {
	border-color: var(--emp-accent);
	color: var(--emp-ink-strong);
	text-decoration: none;
}

._itmspec_selected,
._itmspec_lnk._itmspec_selected {
	background: rgba(79, 207, 255, 0.15);
	border-color: var(--emp-accent);
	color: var(--emp-accent);
	font-weight: 700;
	box-shadow: 0 0 8px rgba(79, 207, 255, 0.3);
}

/* --- Qty + Add to Cart (Neon Full Width) --- */
.emp-pdp-cta-wrap {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.emp-pdp-cta-row {
	display: flex;
	gap: 12px;
	align-items: stretch;
	width: 100%;
}

.emp-qty-cell {
	width: 90px;
	flex-shrink: 0;
}

.emp-qty-input-group {
	height: 100%;
	display: flex;
	align-items: center;
	background: var(--emp-surface);
	border: 1px solid var(--emp-line);
	border-radius: 4px;
	overflow: hidden;
	transition: border-color 0.15s ease;
}

.emp-qty-input-group:focus-within {
	border-color: var(--emp-accent);
	box-shadow: 0 0 0 2px rgba(79, 207, 255, 0.25);
}

.emp-qty-prefix {
	padding-left: 8px;
	color: var(--emp-muted);
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
}

.emp-qty-field {
	height: 100%;
	min-height: 48px;
	border: none;
	background: transparent;
	color: var(--emp-ink-strong);
	font-weight: 700;
	font-size: 1.15rem;
	text-align: center;
	padding: 0.25rem;
	box-shadow: none !important;
}

.emp-cart-cell {
	flex: 1 1 auto;
}

/* Neon Full-Width Add To Cart Button */
.emp-btn-neon {
	background-color: var(--emp-accent) !important;
	color: var(--emp-accent-ink) !important;
	border: 1px solid var(--emp-accent) !important;
	font-weight: 700;
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	box-shadow: 0 0 16px rgba(79, 207, 255, 0.4);
	transition: all 0.2s ease-in-out;
	width: 100%;
	cursor: pointer;
}

.emp-btn-neon:hover,
.emp-btn-neon:focus {
	background-color: #72dbff !important;
	color: #000000 !important;
	box-shadow: 0 0 28px rgba(79, 207, 255, 0.75);
	transform: translateY(-1px);
	outline: none;
}

.emp-btn-neon:active {
	transform: translateY(0);
	box-shadow: 0 0 12px rgba(79, 207, 255, 0.5);
}

.emp-btn-addtocart.btn-warning {
	background-color: #d97706;
	border-color: #b45309;
	color: #000;
	font-weight: 700;
	min-height: 48px;
}

.emp-btn-notify {
	background-color: transparent;
	border: 1px solid var(--emp-accent);
	color: var(--emp-accent);
	font-weight: 600;
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	transition: all 0.2s ease;
}

.emp-btn-notify:hover,
.emp-btn-notify:focus {
	background-color: rgba(79, 207, 255, 0.15);
	color: var(--emp-ink-strong);
	border-color: var(--emp-accent);
}

/* Wishlist Button */
.emp-btn-wishlist {
	background: var(--emp-surface);
	border: 1px solid var(--emp-line);
	color: var(--emp-muted);
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.4rem;
	transition: all 0.15s ease;
}

.emp-btn-wishlist:hover,
.emp-btn-wishlist:focus {
	border-color: var(--emp-accent);
	color: var(--emp-accent);
}

.emp-btn-wishlist-active {
	background: var(--emp-surface);
	border: 1px solid #f59e0b;
	color: #f59e0b;
	font-size: 0.85rem;
	font-weight: 600;
}

/* --- Fulfilment Block (Kept loaded in place) --- */
.emp-fulfilment {
	display: grid;
	gap: 0.5rem;
	margin-top: 1rem;
}

.emp-fulfilment__option {
	padding: 0.75rem 1rem;
	background: var(--emp-surface);
	border: 1px solid var(--emp-line);
	border-radius: 4px;
	color: var(--emp-ink);
}

.emp-fulfilment__option h2,
.emp-fulfilment__option .h5 {
	color: var(--emp-accent);
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	margin-bottom: 0.25rem;
}

/* --- Trust List (4 Inline SVG Items) --- */
.emp-pdp-trust-list {
	margin-top: 1.25rem;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.75rem;
	background: var(--emp-surface);
	border: 1px solid var(--emp-line);
	border-radius: 6px;
	padding: 1rem;
}

.emp-trust-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.emp-trust-icon {
	color: var(--emp-accent);
	flex-shrink: 0;
	margin-top: 2px;
}

.emp-trust-content {
	display: flex;
	flex-direction: column;
}

.emp-trust-title {
	color: var(--emp-ink-strong);
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1.2;
}

.emp-trust-desc {
	color: var(--emp-muted);
	font-size: 0.75rem;
	line-height: 1.3;
	margin-top: 2px;
}

/* --- "Ask about this tyre" Phone Link --- */
.emp-pdp-ask-wrap {
	margin-top: 1rem;
}

.emp-pdp-ask-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0.75rem 1rem;
	background: rgba(79, 207, 255, 0.06);
	border: 1px dashed rgba(79, 207, 255, 0.4);
	border-radius: 6px;
	color: var(--emp-accent);
	font-size: 0.9rem;
	text-decoration: none;
	transition: all 0.2s ease;
}

.emp-pdp-ask-link:hover,
.emp-pdp-ask-link:focus {
	background: rgba(79, 207, 255, 0.15);
	border-color: var(--emp-accent);
	color: var(--emp-ink-strong);
	text-decoration: none;
	box-shadow: 0 0 12px rgba(79, 207, 255, 0.25);
}

.emp-pdp-ask-link strong {
	color: var(--emp-ink-strong);
}

/* --- Shipping Calculator (Dark) --- */
#shipbox {
	background: var(--emp-surface);
	border: 1px solid var(--emp-line);
	color: var(--emp-ink);
	margin-top: 1rem;
}

#shipbox .card-header {
	background: var(--emp-surface);
	border-bottom: 1px solid var(--emp-line);
	color: var(--emp-ink-strong);
}

#shipbox .card-header h3 {
	font-size: 1rem;
	font-weight: 700;
}

#shipbox .form-control {
	background: #000;
	border: 1px solid var(--emp-line);
	color: var(--emp-ink-strong);
}

#shipbox .form-control:focus {
	border-color: var(--emp-accent);
	box-shadow: 0 0 0 2px rgba(79, 207, 255, 0.25);
}

#shipbox .btn-primary {
	background: var(--emp-surface);
	border: 1px solid var(--emp-accent);
	color: var(--emp-accent);
	font-weight: 600;
	transition: all 0.2s ease;
}

#shipbox .btn-primary:hover,
#shipbox .btn-primary:focus {
	background: var(--emp-accent);
	color: var(--emp-accent-ink);
	border-color: var(--emp-accent);
}

/* --- Tabs & Specifications --- */
.emp-pdp-tabbable {
	margin-top: 2rem;
}

.emp-pdp-nav-tabs {
	border-bottom: 2px solid var(--emp-line);
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 0;
	margin-bottom: 0;
}

.emp-pdp-nav-tabs .nav-link {
	background: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	color: var(--emp-muted);
	font-weight: 600;
	font-size: 0.95rem;
	padding: 0.75rem 1.25rem;
	border-radius: 0;
	transition: all 0.2s ease;
}

.emp-pdp-nav-tabs .nav-link:hover,
.emp-pdp-nav-tabs .nav-link:focus {
	color: var(--emp-ink-strong);
	border-bottom-color: rgba(79, 207, 255, 0.4);
	outline: none;
}

/* Neon Active Underline */
.emp-pdp-nav-tabs .nav-link.active {
	color: var(--emp-accent);
	background: var(--emp-surface);
	border-bottom: 3px solid var(--emp-accent);
	box-shadow: 0 4px 12px rgba(79, 207, 255, 0.25);
}

.emp-tab-ask-item .emp-tab-ask-link {
	color: var(--emp-accent);
	border: 1px solid var(--emp-line);
	border-radius: 4px;
	margin-bottom: 4px;
	padding: 0.5rem 1rem;
	font-size: 0.85rem;
}

.emp-tab-ask-item .emp-tab-ask-link:hover,
.emp-tab-ask-item .emp-tab-ask-link:focus {
	background: rgba(79, 207, 255, 0.15);
	border-color: var(--emp-accent);
	color: var(--emp-ink-strong);
}

.emp-pdp-tab-content {
	background: var(--emp-surface);
	border: 1px solid var(--emp-line);
	border-top: none;
	border-radius: 0 0 6px 6px;
	padding: 1.5rem;
	color: var(--emp-ink);
}

.emp-pdp-tab-content .card {
	background: transparent;
	border: none;
}

.emp-pdp-tab-content .card-header {
	background: var(--emp-surface);
	border: 1px solid var(--emp-line);
	border-radius: 4px;
}

.emp-pdp-tab-content .card-header .btn-link {
	color: var(--emp-ink-strong);
	font-weight: 600;
	text-decoration: none;
}

.emp-pdp-tab-content .card-header .btn-link:hover,
.emp-pdp-tab-content .card-header .btn-link:focus {
	color: var(--emp-accent);
	text-decoration: none;
}

/* --- Specification 2-Column Key/Value Table --- */
.emp-specs-table-wrap {
	margin-top: 0.5rem;
}

.emp-specs-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--emp-surface);
	border: 1px solid var(--emp-line);
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 0;
}

.emp-specs-table th {
	color: var(--emp-muted);
	font-weight: 600;
	font-size: 0.875rem;
	padding: 0.75rem 1rem;
	width: 35%;
	border-top: 1px solid var(--emp-line);
	border-bottom: none;
	background: rgba(255, 255, 255, 0.02);
	vertical-align: middle;
}

.emp-specs-table td {
	color: var(--emp-ink-strong);
	font-weight: 500;
	font-size: 0.875rem;
	padding: 0.75rem 1rem;
	width: 65%;
	border-top: 1px solid var(--emp-line);
	border-bottom: none;
	vertical-align: middle;
}

.emp-specs-table tr:first-child th,
.emp-specs-table tr:first-child td {
	border-top: none;
}

.emp-specs-table tr:nth-child(even) td {
	background: rgba(255, 255, 255, 0.015);
}

/* Collapsible toggle behavior (after 6 rows) */
.emp-specs-table.emp-has-collapsed tbody tr:nth-child(n+7) {
	display: none;
}

.emp-specs-table.emp-specs-expanded tbody tr:nth-child(n+7) {
	display: table-row;
}

.emp-specs-toggle-btn {
	background: var(--emp-surface);
	border: 1px solid var(--emp-line);
	color: var(--emp-accent);
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.45rem 1.25rem;
	border-radius: 20px;
	transition: all 0.2s ease;
	cursor: pointer;
}

.emp-specs-toggle-btn:hover,
.emp-specs-toggle-btn:focus {
	border-color: var(--emp-accent);
	color: var(--emp-ink-strong);
	background: rgba(79, 207, 255, 0.1);
	box-shadow: 0 0 12px rgba(79, 207, 255, 0.25);
	outline: none;
}

.emp-specs-toggle-btn i {
	transition: transform 0.2s ease;
}

.emp-specs-table.emp-specs-expanded ~ .emp-specs-toggle-wrap .emp-specs-toggle-btn i {
	transform: rotate(180deg);
}

/* --- Ask About This Tyre Callout Banner --- */
.emp-tab-enquiry-banner {
	background: rgba(79, 207, 255, 0.06);
	border: 1px solid rgba(79, 207, 255, 0.25);
}

.emp-btn-ask-phone {
	color: var(--emp-accent);
	border-color: var(--emp-accent);
	font-weight: 600;
	transition: all 0.2s ease;
}

.emp-btn-ask-phone:hover,
.emp-btn-ask-phone:focus {
	background: var(--emp-accent);
	color: var(--emp-accent-ink);
	border-color: var(--emp-accent);
	box-shadow: 0 0 14px rgba(79, 207, 255, 0.4);
}

/* --- Child Products Table (Pair & Component Views) --- */
#multiitemadd table {
	background: var(--emp-surface);
	border-color: var(--emp-line);
	color: var(--emp-ink);
}

#multiitemadd th,
#multiitemadd td {
	border-color: var(--emp-line);
	vertical-align: middle;
}

#multiitemadd th {
	color: var(--emp-muted);
	font-size: 0.85rem;
}

#multiitemadd .child-price {
	color: var(--emp-accent);
	font-weight: 700;
}

/* --- Crosssell / Upsell / Related Cards --- */
.products-row .thumbnail {
	background: var(--emp-surface);
	border: 1px solid var(--emp-line);
	border-radius: 6px;
	transition: border-color 0.2s, box-shadow 0.2s;
}

.products-row .thumbnail:hover {
	border-color: var(--emp-accent);
	box-shadow: 0 0 14px rgba(79, 207, 255, 0.25);
}

/* --- Mobile Responsiveness (360px Safe) --- */
@media (max-width: 576px) {
	.emp-pdp-title {
		font-size: 1.35rem;
	}

	.emp-pdp-price {
		font-size: 1.85rem;
	}

	.emp-gallery-main {
		min-height: 240px;
		padding: 0.75rem;
	}

	.emp-main-img {
		max-height: 280px;
	}

	.emp-pdp-trust-list {
		grid-template-columns: 1fr;
		padding: 0.75rem;
		gap: 0.6rem;
	}

	.emp-pdp-cta-row {
		gap: 8px;
	}

	.emp-qty-cell {
		width: 75px;
	}

	.emp-qty-field {
		font-size: 1rem;
		min-height: 44px;
	}

	.emp-btn-neon {
		font-size: 0.95rem;
		min-height: 44px;
		padding: 0.5rem;
	}

	.emp-pdp-nav-tabs .nav-link {
		padding: 0.5rem 0.75rem;
		font-size: 0.85rem;
	}

	.emp-pdp-tab-content {
		padding: 1rem;
	}

	.emp-specs-table th,
	.emp-specs-table td {
		padding: 0.5rem 0.6rem;
		font-size: 0.8rem;
	}
}