/* ============================================================
   BMW Maps Updates — Product Page CSS  v2.4
   Place at: wp-content/themes/bmw-maps-child/assets/css/bmw-product.css
   ============================================================ */


/* ── BREADCRUMB BAR ─────────────────────────────────────────── */
.pdp-crumb-bar {
	background: var(--bg-2);
	border-bottom: 1px solid var(--line);
	padding: 18px 0;
	width: 100%;
}
.pdp-crumb-bar .crumbs {
	display: flex;
	gap: 8px;
	align-items: center;
	font-family: var(--f-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	flex-wrap: wrap;
}
.pdp-crumb-bar .crumbs a { color: var(--muted); text-decoration: none; transition: color .15s; }
.pdp-crumb-bar .crumbs a:hover { color: var(--brand); }


/* ── SHORT DESCRIPTION ──────────────────────────────────────── */
.pdp-info .pdp-short-desc { font-size: 15px; color: var(--muted); line-height: 1.65; margin-bottom: 18px; }
.pdp-info .pdp-short-desc p { margin: 0 0 8px; }
.pdp-info .pdp-short-desc p:last-child { margin: 0; }


/* ── AJAX NOTICE ─────────────────────────────────────────────── */
#pdp-notice {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 16px;
	border-radius: var(--r-md);
	font-size: 14px;
	margin-top: 12px;
}
#pdp-notice.ok { background: rgba(10,166,110,.08); border: 1px solid rgba(10,166,110,.22); color: #0a7a52; }
#pdp-notice.ok a { color: inherit; font-weight: 700; }
#pdp-notice.err { background: rgba(226,35,26,.07); border: 1px solid rgba(226,35,26,.2); color: var(--accent); }


/* ============================================================
   SHARED SELECT STYLES
   ── The mono-uppercase label + styled dropdown ──
   Applied to EVERYTHING: WC variation rows, custom fields
   ============================================================ */

/* Shared label — the injected .bmw-var-label (variation) AND .bmw-sel-field label (custom) */
.pdp-atc .bmw-var-label,
.pdp-atc .bmw-sel-field label {
	font-family: var(--f-mono) !important;
	font-size: 11px !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	color: var(--muted) !important;
	font-weight: 500 !important;
	display: block !important;
	margin: 0 0 6px !important;
	cursor: default;
}

/* Shared select */
.pdp-atc table.variations select,
.pdp-atc .bmw-sel-ctrl {
	display: block !important;
	height: 48px !important;
	width: 100% !important;
	max-width: 100% !important;
	padding: 0 42px 0 16px !important;
	border: 1px solid var(--line) !important;
	border-radius: var(--r-md) !important;
	background-color: #fff !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235b6473' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	font-family: var(--f-body) !important;
	font-size: 15px !important;
	color: var(--ink) !important;
	cursor: pointer !important;
	transition: border-color .2s, box-shadow .2s !important;
	box-shadow: none !important;
	outline: none !important;
}
.pdp-atc table.variations select:hover,
.pdp-atc .bmw-sel-ctrl:hover { border-color: var(--line-2) !important; }
.pdp-atc table.variations select:focus,
.pdp-atc .bmw-sel-ctrl:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(28,100,242,.12) !important; }
.pdp-atc .bmw-sel-ctrl.invalid { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(226,35,26,.1) !important; }


/* ============================================================
   WC VARIATIONS TABLE
   JS injects .bmw-var-label into td.value and hides td.label.
   We only need basic layout overrides here.
   ============================================================ */

/* Remove table formatting */
.pdp-atc table.variations {
	display: block !important;
	width: 100% !important;
	border: none !important;
	border-collapse: unset !important;
	margin: 0 0 4px !important;
	padding: 0 !important;
}
.pdp-atc table.variations tbody {
	display: block !important;
	width: 100%;
}
.pdp-atc table.variations tr {
	display: block !important;
	width: 100% !important;
	margin-bottom: 14px !important;
}
.pdp-atc table.variations tr:last-child { margin-bottom: 4px !important; }

/* Both cells full-width block */
.pdp-atc table.variations td {
	display: block !important;
	width: 100% !important;
	padding: 0 !important;
	border: 0 !important;
	vertical-align: top !important;
}
/* Hide label cell after JS injects label into value cell */
.pdp-atc table.variations td.label.bmw-label-hidden { display: none !important; }

/* value cell: contains injected label + select + reset link */
.pdp-atc table.variations td.value {
	white-space: normal !important;
}
.pdp-atc table.variations td.value > select {
	margin-top: 0 !important;
}

/* Hide reset link */
.pdp-atc .reset_variations { display: none !important; }

.woocommerce-variation-price {
    padding: 20px 0px;
}
.woocommerce div.product form.cart .variations label {
    font-weight: 600;
    font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    letter-spacing: 0.12em;
}
/* ============================================================
   CUSTOM SELECTION FIELDS (.bmw-sel-fields)
   ============================================================ */
.pdp-atc .bmw-sel-fields {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 14px 0 4px;
	width: 100%;
}
.pdp-atc .bmw-sel-field { display: flex; flex-direction: column; gap: 0; }
.pdp-atc .bmw-sel-req {
	color: var(--accent);
	font-family: var(--f-body);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}


/* ============================================================
   SINGLE VARIATION WRAP + PRICE
   ============================================================ */
.pdp-atc .single_variation_wrap {
	display: flex;
	flex-direction: column;
}
.pdp-atc .woocommerce-variation.single-variation {
	padding: 20px 0 14px;
}
.pdp-atc .woocommerce-variation.single-variation:empty { display: none; padding: 0; }
.pdp-atc .woocommerce-variation-description p { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.pdp-atc .woocommerce-variation-price .price {
	display: flex;
	align-items: baseline;
	gap: 12px;
	font-family: var(--f-display);
	font-size: 44px;
	font-weight: 600;
	letter-spacing: -.02em;
	color: var(--ink);
	line-height: 1;
}
.pdp-atc .woocommerce-variation-price .price del { font-size: 18px; color: var(--muted); font-weight: 400; order: 2; }
.pdp-atc .woocommerce-variation-price .price ins { text-decoration: none; order: 1; }
.pdp-atc .woocommerce-variation-availability .stock { font-size: 13px; font-weight: 600; color: var(--success); margin-top: 6px; }
.pdp-atc .woocommerce-variation-availability .out-of-stock { color: var(--accent); font-size: 13px; font-weight: 600; margin-top: 6px; }


/* ============================================================
   ADD TO CART ROW — qty + button
   ============================================================ */
.pdp-atc .woocommerce-variation-add-to-cart,
.pdp-atc form.cart:not(.variations_form) {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	padding-top: 16px;
}
.pdp-atc form.cart:not(.variations_form) { flex-direction: row; }

/* ── Quantity pill ── */
.pdp-atc .quantity {
	display: flex !important;
	align-items: center;
	border: 1px solid var(--line);
	border-radius: var(--r-pill);
	height: 56px;
	overflow: hidden;
	background: #fff;
	flex-shrink: 0;
}
.pdp-atc .quantity input.qty {
	width: 44px;
	height: 100%;
	border: 0 !important;
	text-align: center;
	font-family: var(--f-display);
	font-weight: 600;
	font-size: 16px;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent;
	padding: 0;
	-moz-appearance: textfield;
}
.pdp-atc .quantity input.qty::-webkit-outer-spin-button,
.pdp-atc .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; }
.pdp-atc .qty-dec, .pdp-atc .qty-inc {
	width: 44px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
	color: var(--muted);
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
	transition: color .15s;
	user-select: none;
	flex-shrink: 0;
}
.pdp-atc .qty-dec:hover, .pdp-atc .qty-inc:hover { color: var(--brand); }

/* ── Add to cart button ── */
.pdp-atc .single_add_to_cart_button,
.pdp-atc button.button {
	flex: 1;
	min-width: 140px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	height: 56px;
	padding: 0 28px;
	border-radius: var(--r-pill) !important;
	background: var(--brand) !important;
	color: #fff !important;
	font-family: var(--f-body) !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	border: 0 !important;
	cursor: pointer;
	box-shadow: var(--shadow-brand);
	transition: background .2s, transform .2s !important;
	white-space: nowrap;
}
.pdp-atc .single_add_to_cart_button:hover,
.pdp-atc button.button:hover { background: #154fc4 !important; transform: translateY(-1px); }
.pdp-atc .single_add_to_cart_button.loading { background: var(--muted) !important; box-shadow: none; cursor: wait; pointer-events: none; }
.pdp-atc .single_add_to_cart_button.added { background: var(--success) !important; box-shadow: none; }
.pdp-atc .single_add_to_cart_button.disabled,
.pdp-atc .single_add_to_cart_button[disabled] { background: var(--bg-3) !important; color: var(--muted) !important; box-shadow: none; cursor: not-allowed; pointer-events: none; }
.pdp-atc form.cart.sold-individually .quantity { display: none !important; }


/* ============================================================
   PRICE (non-variable products)
   ============================================================ */
.pdp-price {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	margin: 0 0 20px;
}
.pdp-price .now { font-family: var(--f-display); font-size: 44px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); line-height: 1; }
.pdp-price .was { font-family: var(--f-display); font-size: 22px; color: var(--muted); text-decoration: line-through; font-weight: 400; }
.pdp-price .save { font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; background: rgba(226,35,26,.1); color: var(--accent); border: 1px solid rgba(226,35,26,.2); border-radius: var(--r-pill); padding: 4px 10px; }
.pdp-price .woocommerce-Price-amount { font-family: var(--f-display) !important; }


/* ============================================================
   RATING
   ============================================================ */
.pdp-rating { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; }
.pdp-rating .stars { color: var(--gold); font-size: 16px; letter-spacing: 2px; }
.pdp-rating span:last-child { font-size: 13px; color: var(--muted); }


/* ============================================================
   TABS
   ============================================================ */
.pdp-tabs-section { border-top: 1px solid var(--line); padding: 56px 0 72px; }
.pdp-tabs-section .pdp-tablist { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 36px; }
.pdp-tabs-section .pdp-tab {
	padding: 11px 20px;
	border-radius: var(--r-pill);
	background: var(--bg-2);
	font-size: 14px;
	font-weight: 500;
	border: 1px solid transparent;
	cursor: pointer;
	color: var(--ink);
	font-family: var(--f-body);
	transition: background .15s;
}
.pdp-tabs-section .pdp-tab.on { background: var(--ink); color: #fff; }
.pdp-tabs-section .pdp-tab:not(.on):hover { background: var(--bg-3); }
.pdp-tabs-section .pdp-tabpanel { max-width: 760px; font-size: 16px; line-height: 1.7; }
.pdp-tabs-section .pdp-tabpanel h2,
.pdp-tabs-section .pdp-tabpanel h3 { font-family: var(--f-display); font-size: 20px; margin: 0 0 14px; }
.pdp-tabs-section .pdp-tabpanel p { margin: 0 0 14px; }
.pdp-tabs-section .pdp-tabpanel table { width: 100%; border-collapse: collapse; }
.pdp-tabs-section .pdp-tabpanel table th,
.pdp-tabs-section .pdp-tabpanel table td { padding: 10px 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
.pdp-tabs-section .pdp-tabpanel table th { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); text-align: left; }


/* ============================================================
   RELATED PRODUCTS
   ============================================================ */
.bmw-app .related > h2 { display: none; }
.bmw-app .related ul.products,
.bmw-app .upsells ul.products { display: grid !important; grid-template-columns: repeat(3,1fr); gap: 20px; list-style: none; margin: 0; padding: 0; }
.bmw-app .related ul.products li.product,
.bmw-app .upsells ul.products li.product { width: 100% !important; margin: 0 !important; }


/* ============================================================
   HIDE UNWANTED WC ELEMENTS
   ============================================================ */
.bmw-app .woocommerce-breadcrumb { display: none !important; }
.bmw-app .woocommerce-product-gallery { display: none !important; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }


/* ============================================================
   WC NOTICES
   ============================================================ */
.bmw-app.product .woocommerce-message,
.bmw-app.product .woocommerce-error,
.bmw-app.product .woocommerce-info { padding: 13px 16px; border-radius: var(--r-md); font-size: 14px; list-style: none; margin: 0 0 16px; border-left: 4px solid var(--brand); background: rgba(28,100,242,.05); }
.bmw-app.product .woocommerce-error { border-left-color: var(--accent); background: rgba(226,35,26,.05); }


/* ============================================================
   CART DRAWER — button styles + image constraints
   These override whatever WC mini-cart / drawer plugin you're using.
   ============================================================ */

/* Buttons inside any cart drawer / sidebar cart / offcanvas cart */
.widget_shopping_cart .button,
.woocommerce-mini-cart__buttons .button,
.woocommerce-mini-cart__buttons a,
.cart-drawer .button,
.cart-drawer a.button,
.side-cart .button,
.side-cart a.button,
.offcanvas-cart .button,
.offcanvas-cart a.button,
.woocommerce-cart-form .button,
[class*="cart-drawer"] .button,
[class*="mini-cart"] .button,
[class*="side-cart"] .button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 13px 22px !important;
	border-radius: var(--r-pill) !important;
	background: var(--brand) !important;
	color: #fff !important;
	font-family: var(--f-body) !important;
	font-weight: 600 !important;
	font-size: 14px !important;
	text-decoration: none !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	border: 0 !important;
	box-shadow: var(--shadow-brand) !important;
	transition: background .2s, transform .2s !important;
}
.widget_shopping_cart .button:hover,
.woocommerce-mini-cart__buttons .button:hover,
.woocommerce-mini-cart__buttons a:hover,
.cart-drawer .button:hover,
[class*="cart-drawer"] .button:hover,
[class*="mini-cart"] .button:hover,
[class*="side-cart"] .button:hover {
	background: #154fc4 !important;
	transform: translateY(-1px) !important;
	color: #fff !important;
}

/* "View cart" secondary button — outline style */
.woocommerce-mini-cart__buttons .button.wc-forward,
.widget_shopping_cart .wc-forward {
	background: transparent !important;
	color: var(--brand) !important;
	border: 1px solid var(--brand) !important;
	box-shadow: none !important;
}
.woocommerce-mini-cart__buttons .button.wc-forward:hover,
.widget_shopping_cart .wc-forward:hover {
	background: rgba(28,100,242,.06) !important;
	transform: none !important;
}

/* Cart drawer product images — constrain to thumbnail size */
.widget_shopping_cart .mini_cart_item img,
.woocommerce-mini-cart .mini_cart_item img,
.cart-drawer .mini_cart_item img,
[class*="cart-drawer"] .mini_cart_item img,
[class*="mini-cart"] .mini_cart_item img,
[class*="side-cart"] .mini_cart_item img {
	width: 72px !important;
	height: 72px !important;
	min-width: 72px !important;
	object-fit: cover !important;
	border-radius: var(--r-sm) !important;
	flex-shrink: 0 !important;
}

/* Cart drawer product name */
.widget_shopping_cart .mini_cart_item a:first-child,
.woocommerce-mini-cart .mini_cart_item a:first-child,
[class*="cart-drawer"] .mini_cart_item a:first-child {
	font-family: var(--f-display) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: var(--ink) !important;
	text-decoration: none !important;
}

/* Cart drawer price */
.widget_shopping_cart .quantity,
.woocommerce-mini-cart .quantity {
	font-size: 14px !important;
	color: var(--muted) !important;
}

/* Cart total */
.widget_shopping_cart .total strong,
.woocommerce-mini-cart__total strong,
[class*="cart-drawer"] .total strong {
	font-family: var(--f-display) !important;
	font-size: 20px !important;
	font-weight: 600 !important;
	color: var(--ink) !important;
}

.woocommerce div.product form.cart .variations td, .woocommerce div.product form.cart .variations th {
    line-height: 0;
    padding: 4px 0px;
}
table tbody>tr:nth-child(odd)>td, table tbody>tr:nth-child(odd)>th {
    background-color: #fff!important;
}

table tbody tr:hover>td, table tbody tr:hover>th {
    background-color: #fff!important;
}
/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
	.pdp { gap: 32px !important; }
}
@media (max-width: 900px) {
	.pdp { grid-template-columns: 1fr !important; gap: 0 !important; }
	.pdp-media { position: static !important; margin-bottom: 32px; }
	.pdp-info { padding-bottom: 48px; }
	.bmw-app .related ul.products,
	.bmw-app .upsells ul.products { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
	.pdp-atc table.variations select,
	.pdp-atc .bmw-sel-ctrl { font-size: 16px !important; } /* prevent iOS auto-zoom */
	.pdp-atc .woocommerce-variation-add-to-cart,
	.pdp-atc form.cart:not(.variations_form) { flex-direction: column; align-items: stretch; }
	.pdp-atc .quantity { width: 100%; justify-content: center; }
	.pdp-atc .single_add_to_cart_button,
	.pdp-atc button.button { width: 100%; flex: none; }
	.pdp-atc .woocommerce-variation-price .price { font-size: 36px; }
	.pdp-price .now { font-size: 36px; }
}
@media (max-width: 480px) {
	.bmw-app .related ul.products,
	.bmw-app .upsells ul.products { grid-template-columns: 1fr !important; }
}