/* =========================================================
   Imperiumm Arts / SmartZone — Single Product EXTRA styles (v3)
   - Hides the duplicate black title/breadcrumb bar (.page-header-section)
     ONLY on single product pages, using WordPress's own body class.
     header.php is NOT touched.
   - Explicit button styling for <button class="imperiumm-buy-now">
     (style.css only styled <a> tags with that class).
   - Defensive overrides against the old Additional-CSS rule that
     forces .single_add_to_cart_button to width:100%.
   ========================================================= */

/* 1) Hide the duplicate title+breadcrumb bar on product pages only */
body.single-product .page-header-section {
	display: none !important;
}

/* 2) Our own breadcrumb bar styling */
.single-product-breadcrumb-wrap {
	background: var(--black-mid);
	border-bottom: 1px solid var(--black-border);
	padding: 18px 0;
}

.single-product-breadcrumb-wrap .breadcrumb-nav {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 8px;
	margin-top: 0;
	font-size: 13px;
	color: var(--text-muted);
}

.single-product-breadcrumb-wrap .breadcrumb-nav a {
	color: var(--gold);
	text-decoration: none;
}

.single-product-breadcrumb-wrap .breadcrumb-sep {
	color: var(--black-border);
	margin: 0 4px;
}

.imperiumm-sp-gallery {
	position: relative;
}

.imperiumm-sp-sale-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
}

.imperiumm-sp-price-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 8px;
}

.imperiumm-save-badge {
	display: inline-block;
	background: var(--gold);
	color: var(--black);
	font-size: 12px;
	font-weight: 700;
	padding: 4px 12px;
	border-radius: 999px;
	white-space: nowrap;
}

.product-thumb {
	transition: border-color .2s ease;
}

/* Hide any leftover category/meta line so the card matches the
   target design exactly */
.product-details .product_meta {
	display: none !important;
}

/* ---------------------------------------------------------
   DEFENSIVE OVERRIDES — neutralizes the old Additional CSS
   rule (.single-product .single_add_to_cart_button{width:100%;
   display:block; margin-top:45px}) regardless of whether it
   has been deleted from Customizer yet.
   --------------------------------------------------------- */
.single-add-to-cart-row {
	display: flex !important;
	align-items: stretch !important;
	gap: 14px !important;
	flex-wrap: wrap !important;
	margin-top: 20px !important;
}

.single-add-to-cart-row .single_add_to_cart_button,
.single-add-to-cart-row .imperiumm-buy-now {
	width: auto !important;
	flex: 1 1 180px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	margin-top: 0 !important;
	height: 52px !important;
	padding: 0 20px !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	border-radius: 4px;
	cursor: pointer;
	box-sizing: border-box;
}

/* Explicit Buy Now button colors — style.css only defined these
   for <a class="button imperiumm-buy-now">, our markup is a
   <button class="imperiumm-buy-now"> so we set it here directly. */
button.imperiumm-buy-now {
	background: transparent !important;
	color: var(--gold) !important;
	border: 1.5px solid var(--gold) !important;
}

button.imperiumm-buy-now:hover {
	background: var(--gold) !important;
	color: var(--black) !important;
}

@media (max-width: 480px) {
	.single-add-to-cart-row .single_add_to_cart_button,
	.single-add-to-cart-row .imperiumm-buy-now {
		flex: 1 1 100% !important;
	}
}