/* ==========================================================================
   Cobalt Aurora - commerce views
   Loaded only on product, catalog, cart and checkout.
   ========================================================================== */

/* 1. Order section ------------------------------------------------------------ */

.bcp-order {
	padding-block: var(--bcp-xl);
	background: var(--bcp-bg);
}

.bcp-order__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
	align-items: start;
	gap: var(--bcp-lg);
}

.bcp-order__listhead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bcp-md);
	margin-bottom: var(--bcp-md);
}

.bcp .bcp-order__listhead h2 {
	font-size: var(--bcp-text-xl);
}

.bcp-variants {
	list-style: none;
	display: grid;
	gap: var(--bcp-sm);
}

.bcp-variant__btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--bcp-md);
	width: 100%;
	padding: 15px var(--bcp-md) 15px 18px;
	font-family: inherit;
	font-size: var(--bcp-text-sm);
	text-align: left;
	color: var(--bcp-ink);
	background: var(--bcp-surface);
	border: 1px solid var(--bcp-line);
	border-left: 3px solid transparent;
	border-radius: var(--bcp-r-sm);
	cursor: pointer;
	transition: border-color var(--bcp-t), background-color var(--bcp-t), box-shadow var(--bcp-t);
}

.bcp-variant__btn.is-static {
	cursor: default;
}

/* Astra's dynamic CSS paints EVERY <button> with its accent on interaction:
       button:focus, button:hover { background-color:#1f3fd6; color:#fff }
   That selector is (0,1,1), so a one-class component background such as
   `.bcp-variant__btn` (0,1,0) lost to it: the row went dark blue while our
   higher-specificity colour rule held the text dark navy, about 1.6:1.
   Pin BOTH background and colour for every state, anchored on button.<class>
   so nothing in the parent theme can repaint them. */
.bcp button.bcp-variant__btn,
.bcp button.bcp-variant__btn:hover,
.bcp button.bcp-variant__btn:focus,
.bcp button.bcp-variant__btn:focus-visible,
.bcp button.bcp-variant__btn:active {
	color: var(--bcp-ink);
	background-color: var(--bcp-surface);
	background-image: none;
}

.bcp button.bcp-variant__btn:hover,
.bcp button.bcp-variant__btn:focus-visible {
	border-color: rgba(49, 91, 255, 0.5);
	border-left-color: var(--bcp-accent);
	box-shadow: var(--bcp-shadow);
}

.bcp button.bcp-variant__btn:hover .bcp-variant__price,
.bcp button.bcp-variant__btn:focus .bcp-variant__price {
	color: var(--bcp-accent-deep);
}

/* ---- Selected configuration: vivid blue-to-indigo, pure white label ---- */
.bcp button.bcp-variant__btn[aria-pressed="true"],
.bcp button.bcp-variant__btn[aria-pressed="true"]:hover,
.bcp button.bcp-variant__btn[aria-pressed="true"]:focus,
.bcp button.bcp-variant__btn[aria-pressed="true"]:focus-visible,
.bcp button.bcp-variant__btn[aria-pressed="true"]:active {
	color: #ffffff;
	background-color: var(--bcp-accent);
	background-image: linear-gradient(135deg, #315bff 0%, #5b3df5 100%);
	border-color: var(--bcp-accent-deep);
	border-left-color: var(--bcp-cyan);
	box-shadow: 0 8px 22px rgba(49, 91, 255, 0.3);
}

/* Every label inside the selected row, including the enquiry-only caution
   colour, which would otherwise sit unreadably on the gradient. */
.bcp button.bcp-variant__btn[aria-pressed="true"] .bcp-variant__name,
.bcp button.bcp-variant__btn[aria-pressed="true"] .bcp-variant__price,
.bcp .bcp-variant.is-enquiry button.bcp-variant__btn[aria-pressed="true"] .bcp-variant__price {
	color: #ffffff;
}

/* Selected state is not signalled by colour alone: a check mark appears and
   the row carries a cyan left edge, alongside aria-pressed for assistive tech. */
.bcp-variant__check {
	display: none;
	flex: none;
	width: 18px;
	height: 18px;
	color: #ffffff;
}

.bcp button.bcp-variant__btn[aria-pressed="true"] .bcp-variant__check {
	display: block;
}

button.bcp-variant__btn:hover {
	border-color: rgba(49, 91, 255, 0.45);
	border-left-color: var(--bcp-accent);
	box-shadow: var(--bcp-shadow);
}

.bcp-variant__btn[aria-pressed="true"] {
	background: var(--bcp-accent-soft);
	border-color: rgba(49, 91, 255, 0.5);
	border-left-color: var(--bcp-accent);
	box-shadow: var(--bcp-shadow);
}

.bcp-variant__name {
	flex: 1 1 auto;
	font-weight: 600;
}

.bcp-variant__price {
	/* Shrinkable rather than fixed: the enquiry label ("Price on request") is
	   long enough to overflow the row on a narrow phone. */
	flex: 0 1 auto;
	text-align: right;
	font-family: var(--bcp-font-display);
	font-size: var(--bcp-text-lg);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--bcp-accent-deep);
	font-variant-numeric: tabular-nums;
}

.bcp-variant.is-enquiry .bcp-variant__price {
	font-family: var(--bcp-font-body);
	font-size: var(--bcp-text-xs);
	font-weight: 600;
	color: var(--bcp-caution);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	line-height: 1.3;
	max-width: 48%;
}

/* On a phone the long enquiry label gets its own line instead of clipping. */
@media (max-width: 479px) {
	.bcp-variant__btn {
		flex-wrap: wrap;
		row-gap: 4px;
	}

	.bcp-variant__name {
		flex: 1 1 100%;
	}

	.bcp-variant__price,
	.bcp-variant.is-enquiry .bcp-variant__price {
		max-width: none;
		text-align: left;
	}
}

.bcp-order__notice {
	margin-top: var(--bcp-md);
	padding: 13px var(--bcp-md);
	font-size: var(--bcp-text-sm);
	/* Amber on an amber wash only reached 4.50:1, exactly on the AA limit.
	   The accent now lives in the border and the copy is set in ink. */
	color: var(--bcp-ink);
	background: var(--bcp-caution-wash);
	border: 1px solid var(--bcp-caution-line);
	border-left: 3px solid var(--bcp-caution);
	border-radius: var(--bcp-r-sm);
}

/* 3. The order panel ------------------------------------------------------------ */

.bcp-panel {
	position: sticky;
	top: 96px;
	padding: var(--bcp-lg);
	background: var(--bcp-surface);
	border: 1px solid var(--bcp-line);
	border-radius: var(--bcp-r-lg);
	box-shadow: var(--bcp-shadow-panel);
	overflow: hidden;
}

/* The gradient top edge. */
.bcp-panel::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: var(--bcp-grad);
}

.bcp-panel__label {
	display: block;
	font-size: var(--bcp-text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bcp-muted);
}

.bcp-panel__name {
	display: block;
	margin-top: 6px;
	font-family: var(--bcp-font-display);
	font-size: var(--bcp-text-lg);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--bcp-ink);
}

.bcp-panel__price {
	display: flex;
	align-items: baseline;
	gap: var(--bcp-sm);
	margin: var(--bcp-md) 0;
	padding-bottom: var(--bcp-md);
	border-bottom: 1px solid var(--bcp-line);
	font-family: var(--bcp-font-display);
	font-size: var(--bcp-text-3xl);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	color: var(--bcp-ink);
	font-variant-numeric: tabular-nums;
}

.bcp-panel__from {
	font-family: var(--bcp-font-body);
	font-size: var(--bcp-text-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bcp-muted);
}

.bcp-panel__note {
	margin-top: var(--bcp-md);
	font-size: var(--bcp-text-xs);
	color: var(--bcp-muted);
}

.bcp-panel__meta {
	list-style: none;
	display: grid;
	gap: var(--bcp-sm);
	margin-top: var(--bcp-md);
	padding-top: var(--bcp-md);
	border-top: 1px solid var(--bcp-line);
}

.bcp-panel__meta li {
	display: flex;
	align-items: flex-start;
	gap: var(--bcp-sm);
	font-size: var(--bcp-text-xs);
	color: var(--bcp-muted);
}

.bcp-panel__meta .bcp-icon {
	width: 15px;
	height: 15px;
	margin-top: 2px;
	color: var(--bcp-accent);
}

/* WooCommerce's own form, restyled. The native attribute select is hidden
   because the variant rows above drive it; it stays in the DOM and keeps
   working, so selection and Add to Cart remain real WooCommerce behaviour. */
.bcp-panel__cart .variations {
	display: none;
}

/* The panel's own price element shows WooCommerce's price_html, so its
   built-in copy would be a duplicate. */
.bcp-panel__cart .woocommerce-variation-price {
	display: none;
}

.bcp-panel__cart .woocommerce-variation-availability {
	font-size: var(--bcp-text-xs);
	color: var(--bcp-muted);
}

.bcp-panel__cart .reset_variations {
	display: inline-block;
	margin-bottom: var(--bcp-sm);
	font-size: var(--bcp-text-xs);
}

.bcp-panel__cart form.cart {
	display: grid;
	gap: var(--bcp-sm);
	margin: 0;
}

/* Quantity stays available; it sits beside the action rather than above it. */
.bcp-panel__cart .woocommerce-variation-add-to-cart,
.bcp-panel__cart form.cart:not(.variations_form) {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr);
	align-items: center;
	gap: var(--bcp-sm);
}

.bcp .bcp-panel__cart .quantity {
	display: block;
	float: none;
	margin: 0;
}

.bcp .bcp-panel__cart .quantity input.qty {
	width: 100%;
	height: 52px;
	padding: 0 10px;
	text-align: center;
	font-size: var(--bcp-text-base);
	font-weight: 600;
	border-radius: var(--bcp-r-pill);
}

.bcp .bcp-panel__cart button.single_add_to_cart_button,
.bcp .bcp-panel__cart .single_add_to_cart_button {
	width: 100%;
	padding: 16px 26px;
	font-family: var(--bcp-font-body);
	font-size: var(--bcp-text-base);
	font-weight: 700;
	color: #fff;
	background: var(--bcp-grad);
	border: 0;
	border-radius: var(--bcp-r-pill);
	box-shadow: 0 8px 22px rgba(49, 91, 255, 0.28);
	cursor: pointer;
	transition: filter var(--bcp-t), transform var(--bcp-t), box-shadow var(--bcp-t);
}

.bcp .bcp-panel__cart button.single_add_to_cart_button:hover {
	filter: saturate(1.1) brightness(1.06);
	transform: translateY(-1px);
	box-shadow: 0 12px 30px rgba(49, 91, 255, 0.34);
}

.bcp .bcp-panel__cart button.single_add_to_cart_button.disabled,
.bcp .bcp-panel__cart button.single_add_to_cart_button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

.bcp-panel .bcp-btn--telegram {
	margin-top: var(--bcp-sm);
}

@media (max-width: 979px) {
	.bcp-order__grid {
		grid-template-columns: 1fr;
	}

	/* Price and purchase stay reachable without scrolling the whole page. */
	.bcp-panel {
		position: static;
		order: -1;
	}
}

/* 4. On this page --------------------------------------------------------------- */

.bcp-toc-wrap {
	background: var(--bcp-surface);
	border-block: 1px solid var(--bcp-line);
}

.bcp-toc {
	padding: var(--bcp-lg);
	background: var(--bcp-sunken);
	border-radius: var(--bcp-r-md);
}

.bcp .bcp-toc__title {
	font-size: var(--bcp-text-xs);
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bcp-muted);
	margin-bottom: var(--bcp-md);
}

.bcp-toc__list {
	columns: 2;
	column-gap: var(--bcp-xl);
	list-style: none;
}

.bcp-toc__list li {
	break-inside: avoid;
	margin-bottom: 9px;
}

.bcp .bcp-toc__list a {
	font-size: var(--bcp-text-sm);
	font-weight: 500;
	color: var(--bcp-ink);
	text-decoration: none;
}

.bcp .bcp-toc__list a:hover {
	color: var(--bcp-accent);
	text-decoration: underline;
}

@media (max-width: 767px) {
	.bcp-toc__list {
		columns: 1;
	}
}

/* 5. Long-form body: alternating grounds by section ------------------------------- */

.bcp-psec {
	padding-block: var(--bcp-xl);
	background: var(--bcp-bg);
	scroll-margin-top: 96px;
}

/* Rotate the ground so the body never reads as one long white page. */
.bcp-psec:nth-of-type(4n + 1) {
	background: var(--bcp-surface);
}

.bcp-psec:nth-of-type(4n + 2) {
	background: var(--bcp-sunken);
}

.bcp-psec:nth-of-type(4n + 3) {
	background: var(--bcp-surface);
}

.bcp-psec:nth-of-type(4n + 4) {
	background: var(--bcp-tint-cyan);
}

.bcp-psec__head {
	margin-bottom: var(--bcp-lg);
	max-width: 68ch;
}

/* Prose sections run editorial: heading in a narrow left column, the reading
   measure on the right. A measure-capped block alone left half the page empty. */
.bcp-psec--prose > .bcp-wrap {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
	align-items: start;
	gap: var(--bcp-xl);
}

.bcp-psec--prose .bcp-psec__head {
	position: sticky;
	top: 104px;
	max-width: none;
	margin-bottom: 0;
}

.bcp-psec--prose .bcp-prose {
	max-width: var(--bcp-measure);
}

/* Declared collapse. */
@media (max-width: 979px) {
	.bcp-psec--prose > .bcp-wrap {
		grid-template-columns: 1fr;
		gap: var(--bcp-lg);
	}

	.bcp-psec--prose .bcp-psec__head {
		position: static;
	}
}

.bcp-psec h3 {
	scroll-margin-top: 96px;
}

/* 6. Catalog ----------------------------------------------------------------------- */

.bcp .woocommerce-products-header {
	padding-block: var(--bcp-xl) 0;
}

.bcp ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--bcp-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.bcp ul.products::before,
.bcp ul.products::after {
	content: none;
}

.bcp ul.products li.product {
	width: auto;
	margin: 0;
	padding: var(--bcp-lg);
	background: var(--bcp-surface);
	border: 1px solid var(--bcp-line);
	border-radius: var(--bcp-r-md);
	box-shadow: var(--bcp-shadow);
	transition: border-color var(--bcp-t), box-shadow var(--bcp-t), transform var(--bcp-t);
}

.bcp ul.products li.product:hover {
	border-color: rgba(49, 91, 255, 0.45);
	box-shadow: var(--bcp-shadow-lift);
	transform: translateY(-3px);
}

.bcp ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--bcp-font-display);
	font-size: var(--bcp-text-lg);
	font-weight: 800;
	letter-spacing: -0.02em;
	padding: 0;
	margin-block: var(--bcp-sm);
}

.bcp ul.products li.product .price {
	font-family: var(--bcp-font-display);
	font-size: var(--bcp-text-lg);
	font-weight: 800;
	color: var(--bcp-accent-deep);
	font-variant-numeric: tabular-nums;
}

@media (max-width: 1023px) {
	.bcp ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.bcp ul.products {
		grid-template-columns: 1fr;
	}
}

/* 7. Cart and checkout -------------------------------------------------------------- */

.bcp .woocommerce-cart-form,
.bcp .woocommerce-checkout,
.bcp .woocommerce-order,
.bcp .woocommerce-account {
	padding-block: var(--bcp-lg);
}

.bcp .woocommerce table.shop_table {
	background: var(--bcp-surface);
	border: 1px solid var(--bcp-line);
	border-radius: var(--bcp-r-md);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.bcp .woocommerce table.shop_table th {
	padding: 14px var(--bcp-md);
	font-family: var(--bcp-font-display);
	font-size: var(--bcp-text-xs);
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-align: left;
	color: var(--bcp-muted);
	background: var(--bcp-sunken);
	border-bottom: 1px solid var(--bcp-line);
}

.bcp .woocommerce table.shop_table td {
	padding: 14px var(--bcp-md);
	border-top: 1px solid var(--bcp-line);
	font-variant-numeric: tabular-nums;
}

.bcp .woocommerce table.shop_table tbody tr:first-child td {
	border-top: 0;
}

/* One button language across the whole site. */
.bcp .woocommerce a.button,
.bcp .woocommerce button.button,
.bcp .woocommerce input.button,
.bcp .woocommerce a.button.alt,
.bcp .woocommerce button.button.alt,
.bcp .woocommerce #respond input#submit {
	padding: 14px 26px;
	font-family: var(--bcp-font-body);
	font-size: var(--bcp-text-sm);
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	background: var(--bcp-grad);
	border: 1px solid transparent;
	border-radius: var(--bcp-r-pill);
	box-shadow: 0 8px 22px rgba(49, 91, 255, 0.24);
	transition: filter var(--bcp-t), transform var(--bcp-t);
}

.bcp .woocommerce a.button:hover,
.bcp .woocommerce button.button:hover,
.bcp .woocommerce input.button:hover,
.bcp .woocommerce a.button.alt:hover,
.bcp .woocommerce button.button.alt:hover {
	color: #fff;
	filter: saturate(1.1) brightness(1.06);
	transform: translateY(-1px);
}

/* Secondary cart actions must not compete with the primary one. */
.bcp .woocommerce button[name="update_cart"],
.bcp .woocommerce a.button.wc-backward {
	color: var(--bcp-ink);
	background: var(--bcp-surface);
	border-color: var(--bcp-line);
	box-shadow: none;
}

.bcp .woocommerce button[name="update_cart"]:hover,
.bcp .woocommerce a.button.wc-backward:hover {
	color: var(--bcp-accent-deep);
	background: var(--bcp-surface);
	border-color: var(--bcp-accent);
	filter: none;
}

.bcp .woocommerce button[name="update_cart"]:disabled {
	opacity: 0.5;
}

.bcp .woocommerce form .form-row input.input-text,
.bcp .woocommerce form .form-row textarea,
.bcp .woocommerce form .form-row select,
.bcp .woocommerce .quantity input.qty,
.bcp .woocommerce-cart-form .coupon input {
	padding: 12px 14px;
	font-family: inherit;
	font-size: var(--bcp-text-sm);
	color: var(--bcp-ink);
	background: var(--bcp-surface);
	border: 1px solid var(--bcp-line);
	border-radius: var(--bcp-r-sm);
}

.bcp .woocommerce .cart_totals h2,
.bcp .woocommerce-checkout h3 {
	font-size: var(--bcp-text-xl);
	margin-bottom: var(--bcp-md);
}

.bcp .cart_totals,
.bcp .woocommerce-checkout-review-order {
	padding: var(--bcp-lg);
	background: var(--bcp-surface);
	border: 1px solid var(--bcp-line);
	border-radius: var(--bcp-r-md);
	box-shadow: var(--bcp-shadow);
}

/* Notices */
.bcp .woocommerce-message,
.bcp .woocommerce-info {
	border-top: 0;
	border-left: 3px solid var(--bcp-accent);
	border-radius: var(--bcp-r-sm);
	background: var(--bcp-accent-soft);
	color: var(--bcp-ink);
	font-size: var(--bcp-text-sm);
}

.bcp .woocommerce-error {
	border-top: 0;
	border-left: 3px solid var(--bcp-caution);
	border-radius: var(--bcp-r-sm);
	background: var(--bcp-caution-wash);
	color: var(--bcp-ink);
	font-size: var(--bcp-text-sm);
}

.bcp .woocommerce-message::before,
.bcp .woocommerce-info::before {
	color: var(--bcp-accent);
}