/* Bricofix — WooCommerce-scoped overrides (shop/product/cart/checkout/account). Visual only, loaded conditionally. */

/* ==================================================
   Shop banner (distinct from the homepage hero — more
   compact, no CTA button, just title + tagline)
   ================================================== */
.bricofix-shop-banner {
	background: var(--color-secondary);
	color: var(--color-text-inverse);
	padding: var(--space-lg) 20px;
	margin-bottom: 30px;
	text-align: center;
	animation: bricofix-fade-up 0.6s ease;
}

.bricofix-shop-banner h1 {
	color: var(--color-text-inverse);
	margin-bottom: 8px;
}

.bricofix-shop-banner p {
	margin: 0;
	opacity: 0.9;
}

/* ==================================================
   Shop archive
   ================================================== */
.bricofix-product-img-wrap .onsale {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	background: var(--color-primary);
	color: var(--color-text-inverse);
	font-weight: 700;
	font-size: 0.85em;
	padding: 5px 12px;
	border-radius: var(--radius-sm);
	margin: 0;
	animation: bricofix-pulse 2.5s ease-in-out infinite;
}

@keyframes bricofix-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(254, 105, 8, 0.4); }
	50% { box-shadow: 0 0 0 6px rgba(254, 105, 8, 0); }
}

ul.products li.product .bricofix-quick-add {
	width: 100%;
	text-align: center;
	margin-top: 10px;
}

/* Storefront wraps result count + ordering + pagination together inside a
   single .storefront-sorting div (both above and below the product grid),
   but doesn't lay them out — they stacked as separate full-width lines.
   Put ordering/count on the left and pagination on the right, same row. */
.storefront-sorting {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 20px;
}

.storefront-sorting .woocommerce-pagination {
	margin: 0;
}

.woocommerce-result-count {
	color: var(--color-text-muted);
	font-size: 0.9em;
	margin: 0;
}

.woocommerce-ordering select {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 8px 12px;
	font-family: var(--font-body);
	color: var(--color-text-main);
	background: var(--color-bg-surface);
}

.woocommerce-pagination {
	margin-top: 30px;
	text-align: center;
}

.woocommerce-pagination ul.page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 100%;
}

.woocommerce-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 8px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-border);
	color: var(--color-text-main);
	background: var(--color-bg-surface);
}

.woocommerce-pagination .page-numbers.current,
.woocommerce-pagination a.page-numbers:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-text-inverse);
}

/* ==================================================
   Single product
   ================================================== */
.woocommerce-product-gallery {
	border-radius: var(--radius-lg);
	overflow: hidden;
}

.woocommerce-product-gallery .woocommerce-product-gallery__image {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.summary.entry-summary .product_title {
	font-family: var(--font-heading);
	font-weight: 800;
}

.summary.entry-summary .woocommerce-product-rating {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 10px;
}

.summary.entry-summary .woocommerce-product-rating .star-rating,
#reviews .star-rating,
.comment-text .star-rating {
	font-size: 1em;
}

.summary.entry-summary .woocommerce-review-link {
	color: var(--color-link-text);
	font-size: 0.9em;
}

.summary.entry-summary .price {
	color: var(--color-primary);
	font-weight: 700;
	font-size: 1.5em;
}

.summary.entry-summary p.stock {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 0.95em;
	margin: 0 0 12px;
}

.summary.entry-summary p.stock.in-stock {
	color: var(--color-text-main);
}

.summary.entry-summary p.stock.out-of-stock,
.summary.entry-summary p.stock.available-on-backorder {
	color: var(--color-text-muted);
}

.summary.entry-summary .quantity {
	display: inline-flex;
	margin-right: 10px;
	vertical-align: middle;
}

.summary.entry-summary input.qty {
	width: 70px;
	height: 48px;
	padding: 0 10px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: 1em;
	color: var(--color-text-main);
	background: var(--color-bg-surface);
	text-align: center;
}

.summary.entry-summary input.qty:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(254,105,8,0.15);
}

.summary.entry-summary .single_add_to_cart_button.button {
	padding: 14px 32px;
	font-size: 1.05em;
	border-radius: var(--radius-md);
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
}

.summary.entry-summary .single_add_to_cart_button.button:hover {
	background-color: var(--color-primary-hover);
}

.bricofix-trust-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--color-border);
	color: var(--color-text-main);
	font-weight: 600;
	font-size: 1em;
}

.summary.entry-summary .product_meta {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--color-border);
	font-size: 0.9em;
	color: var(--color-text-muted);
}

.summary.entry-summary .product_meta > span {
	display: block;
	margin-bottom: 6px;
}

.summary.entry-summary .product_meta a {
	color: var(--color-link-text);
}

.summary.entry-summary .product_meta a:hover {
	color: var(--color-primary-hover);
}

/* Storefront's own default CSS floats ul.tabs left at ~29% width and floats
   .panel right at ~65% width — the classic "tab list as a left sidebar,
   content on the right" layout. Our flex/block rules below never reset that
   float+width, so it kept applying underneath, leaving a tall empty gap
   under the short tab list once the (taller) panel content rendered next to
   it instead of below it. Explicitly clear float/width here so tabs sit in
   a row above a full-width panel, as intended. */
.woocommerce-tabs {
	overflow: visible;
}

.woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	border-bottom: 1px solid var(--color-border);
	float: none;
	width: 100%;
}

.woocommerce-tabs ul.tabs li {
	margin: 0;
	float: none;
	display: block;
	border: none;
}

.woocommerce-tabs ul.tabs li::before,
.woocommerce-tabs ul.tabs li::after {
	content: none;
}

.woocommerce-tabs ul.tabs li a {
	display: inline-block;
	padding: 12px 20px;
	color: var(--color-text-muted);
	border-bottom: 3px solid transparent;
	font-family: var(--font-heading);
	font-size: 1.05em;
	font-weight: 600;
}

.woocommerce-tabs ul.tabs li.active a {
	color: var(--color-primary);
	border-bottom-color: var(--color-primary);
	font-weight: 600;
}

.woocommerce-tabs .panel {
	background: var(--color-bg-surface);
	float: none;
	width: 100%;
	margin: 0;
	animation: bricofix-fade-up 0.35s ease;
}

.related.products > h2 {
	font-family: var(--font-heading);
	font-weight: 800;
	text-align: center;
	margin-bottom: 30px;
}

.upsells.products > h2,
.cross-sells > h2 {
	font-family: var(--font-heading);
	font-weight: 800;
	text-align: center;
	margin-bottom: 30px;
}

.cross-sells {
	margin-top: var(--space-lg);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--color-border);
}

.upsells.products {
	margin-top: var(--space-lg);
}

/* Storefront's built-in prev/next product nav — long product names with no
   width constraint overflowed the viewport on tablet widths. */
.storefront-product-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 100%;
}

.storefront-product-pagination a {
	display: flex;
	align-items: center;
	gap: 8px;
	width: 100%;
	max-width: 280px;
	min-width: 0;
}

.storefront-product-pagination img {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	object-fit: cover;
}

.storefront-product-pagination__title {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ==================================================
   Cart
   ================================================== */
.woocommerce-cart table.shop_table {
	border-collapse: collapse;
	width: 100%;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.woocommerce-cart table.shop_table th {
	background: var(--color-bg-body);
	color: var(--color-text-main);
	font-family: var(--font-heading);
	font-weight: 700;
	padding: 14px;
	text-align: left;
}

.woocommerce-cart table.shop_table td {
	padding: 14px;
	border-top: 1px solid var(--color-border);
	vertical-align: middle;
}

.woocommerce-cart table.shop_table .product-remove a {
	color: var(--color-text-muted);
}

.cart-collaterals .cart_totals {
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: 25px;
}

.cart_totals h2 {
	margin-top: 0;
}

.cart_totals .order-total .amount {
	color: var(--color-primary);
	font-weight: 700;
	font-size: 1.2em;
}

.cart_totals .checkout-button {
	width: 100%;
	text-align: center;
	padding: 14px;
}

/* ==================================================
   Checkout
   ================================================== */
.woocommerce-billing-fields input.input-text,
.woocommerce-billing-fields select,
.woocommerce-additional-fields input.input-text,
.woocommerce-additional-fields textarea,
.woocommerce-shipping-fields input.input-text,
.woocommerce-shipping-fields select {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	font-family: var(--font-body);
	color: var(--color-text-main);
	background: var(--color-bg-surface);
	width: 100%;
}

.woocommerce-billing-fields input.input-text:focus,
.woocommerce-additional-fields input.input-text:focus,
.woocommerce-additional-fields textarea:focus,
.woocommerce-shipping-fields input.input-text:focus {
	border-color: var(--color-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(254, 105, 8, 0.15);
}

.woocommerce-form-row label {
	font-family: var(--font-body);
	color: var(--color-text-main);
	font-weight: 500;
}

#order_review table.shop_table {
	border-collapse: collapse;
	width: 100%;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--color-bg-surface);
}

#order_review table.shop_table th,
#order_review table.shop_table td {
	padding: 12px;
	border-top: 1px solid var(--color-border);
}

#order_review .order-total .amount {
	color: var(--color-primary);
	font-weight: 700;
	font-size: 1.2em;
}

#payment {
	background: var(--color-bg-body);
	border-radius: var(--radius-lg);
	padding: 20px;
}

#payment ul.payment_methods {
	border: none;
	padding: 0;
}

#payment .payment_box {
	background: var(--color-bg-surface);
	border-radius: var(--radius-sm);
}

#place_order {
	width: 100%;
	padding: 16px;
	font-size: 1.1em;
}

/* ==================================================
   Cart & Checkout — WooCommerce Blocks (this store uses the
   block-based Cart/Checkout, not the classic shortcode markup;
   the .woocommerce-cart/.cart_totals/#payment rules above are
   kept only in case a classic shortcode page is ever used).
   ================================================== */
.wc-block-components-product-name {
	color: var(--color-text-main);
	font-weight: 600;
}

a.wc-block-components-product-name:hover {
	color: var(--color-primary);
}

.wc-block-cart-items__header,
.wc-block-cart-items__row {
	border-bottom: 1px solid var(--color-border);
}

.wc-block-components-totals-item__value,
.wc-block-components-product-price,
.wc-block-cart-item__total {
	font-weight: 600;
	color: var(--color-text-main);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	color: var(--color-primary);
	font-weight: 700;
	font-size: 1.15em;
}

.wc-block-cart__sidebar .wc-block-components-totals-wrapper,
.wc-block-checkout__sidebar .wc-block-components-totals-wrapper,
.wc-block-components-checkout-order-summary,
.wc-block-components-panel {
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}

.wc-block-checkout__sidebar {
	position: sticky;
	top: 20px;
	align-self: flex-start;
}

/* Checkout: order summary below the form instead of beside it — the narrow
   sidebar column was squeezing product names ("sept wheeling" wrap) and
   starving the form of width. Cart page keeps its own side-by-side layout
   (not touched, only scoped to woocommerce-checkout). */
body.woocommerce-checkout .wc-block-components-sidebar-layout {
	flex-direction: column;
}

body.woocommerce-checkout .wc-block-checkout__main,
body.woocommerce-checkout .wc-block-checkout__sidebar,
body.woocommerce-checkout .wp-block-woocommerce-checkout-fields-block,
body.woocommerce-checkout .wp-block-woocommerce-checkout-totals-block {
	width: 100%;
	max-width: 100%;
	padding-right: 0;
}

body.woocommerce-checkout .wc-block-checkout__main {
	order: 0;
}

body.woocommerce-checkout .wc-block-checkout__sidebar {
	order: 1;
	position: static;
	margin-top: 32px;
}

/* Country field is redundant once the store only sells to Tunisia. */
body.woocommerce-checkout .wc-block-components-address-form__country {
	display: none;
}

body.woocommerce-checkout .wc-block-components-product-name {
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Order summary: card treatment + visible product thumbnails instead of a
   flat gray block. */
body.woocommerce-checkout .wc-block-components-checkout-order-summary {
	padding: 24px;
	box-shadow: var(--shadow-sm);
}

body.woocommerce-checkout .wc-block-components-order-summary-item__image {
	border-radius: var(--radius-sm);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
}

body.woocommerce-checkout .wc-block-components-order-summary-item__image img {
	border-radius: var(--radius-sm);
}

@keyframes bricofix-total-pulse {
	0% { transform: scale(1); }
	40% { transform: scale(1.12); color: var(--color-primary-hover); }
	100% { transform: scale(1); }
}

.bricofix-total-pulse {
	display: inline-block;
	animation: bricofix-total-pulse 0.5s ease;
}

.wc-block-components-text-input label,
.wc-block-components-address-form label {
	font-size: 0.85em;
	font-weight: 700;
	letter-spacing: 0.03em;
}

.wc-block-components-quantity-selector {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.wc-block-components-quantity-selector__button {
	color: var(--color-text-main);
}

.wc-block-components-quantity-selector__button:hover {
	color: var(--color-primary);
}

/* Primary CTA buttons (place order, proceed to checkout, coupon apply, etc.) */
.wc-block-components-button:not(.is-link) .wc-block-components-button__text,
.wc-block-components-button:not(.is-link) {
	background-color: var(--color-primary);
	border-radius: var(--radius-md);
	color: var(--color-text-inverse);
	font-family: var(--font-heading);
	font-weight: 600;
	border: none;
	transition: background-color 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
}

.wc-block-components-button:not(.is-link):hover {
	background-color: var(--color-primary-hover);
	color: var(--color-text-inverse);
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
}

.wc-block-components-checkout-place-order-button {
	font-size: 1.05em;
	padding-top: 14px;
	padding-bottom: 14px;
}

/* Coupon "Apply" button (cart + checkout): pinned explicitly because
   WooCommerce Blocks' own coupon-form CSS and WordPress core's generic
   .wp-element-button default (dark gray/black) both carry enough
   specificity to leak through the general button rule above, leaving this
   one button looking off-brand. */
.wc-block-components-totals-coupon__button.wc-block-components-button {
	background-color: var(--color-primary);
	color: var(--color-text-inverse);
	border-radius: var(--radius-sm);
}

.wc-block-components-totals-coupon__button.wc-block-components-button:hover {
	background-color: var(--color-primary-hover);
	color: var(--color-text-inverse);
}

.wc-block-components-totals-coupon__button.wc-block-components-button:disabled {
	background-color: var(--color-border);
	color: var(--color-text-muted);
}

.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-select-input,
.wc-block-components-textarea textarea {
	border-color: var(--color-border);
	border-radius: var(--radius-sm);
}

.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-select-input,
.wc-block-components-textarea textarea {
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wc-block-components-text-input.is-active input,
.wc-block-components-text-input input:focus {
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(254, 105, 8, 0.12);
}

.wc-block-components-checkbox__mark {
	color: var(--color-primary);
}

.wc-block-components-radio-control__option-checked,
.wc-block-components-radio-control__input:checked {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.wc-block-components-checkout-step__heading .wc-block-components-checkout-step__title {
	font-family: var(--font-heading);
	color: var(--color-secondary);
}

/* ==================================================
   My Account
   ================================================== */
.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.woocommerce-MyAccount-navigation li {
	border-bottom: 1px solid var(--color-border);
}

.woocommerce-MyAccount-navigation li:last-child {
	border-bottom: none;
}

.woocommerce-MyAccount-navigation li a {
	display: block;
	padding: 12px 18px;
	color: var(--color-text-main);
	transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

.woocommerce-MyAccount-navigation li a:hover {
	background: var(--color-bg-body);
	color: var(--color-primary);
	padding-left: 22px;
}

.woocommerce-MyAccount-navigation li.is-active a {
	background: var(--color-primary);
	color: var(--color-text-inverse);
	font-weight: 600;
}

.woocommerce-MyAccount-navigation li.is-active a:hover {
	padding-left: 18px;
	color: var(--color-text-inverse);
}

/* Login form (logged-out My Account) */
.woocommerce-form-login,
.woocommerce-form-register {
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: 32px;
	max-width: 480px;
}

.woocommerce-form-login .form-row label,
.woocommerce-form-register .form-row label {
	font-weight: 600;
	display: block;
	margin-bottom: 6px;
}

.woocommerce-form-login input.input-text,
.woocommerce-form-register input.input-text {
	width: 100%;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 10px 14px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce-form-login input.input-text:focus,
.woocommerce-form-register input.input-text:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(254, 105, 8, 0.12);
}

/* WooCommerce core reserves 3.5em of left padding for its own icon font
   glyph (absolutely positioned at left:1.5em/top:1em). Our padding used to
   drop that reserve to 20px without moving the icon, so the checkmark glyph
   sat directly on top of the first few letters — combined with no explicit
   text color, the message looked like an empty colored bar. Hide the
   WooCommerce icon glyph entirely and set an explicit, readable text color
   instead of relying on core's default. */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info {
	list-style: none;
	background: var(--color-bg-surface);
	color: var(--color-text-main);
	border-left: 4px solid var(--color-primary);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
	padding: 16px 20px;
	margin: 0 0 24px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	animation: bricofix-fade-down 0.3s ease;
}

.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
	content: none;
}

.woocommerce-error .button,
.woocommerce-message .button,
.woocommerce-info .button {
	float: none;
	margin-left: auto;
}

.woocommerce-error {
	border-left-color: var(--color-error);
}

.woocommerce-message {
	border-left-color: var(--color-success);
}

@keyframes bricofix-fade-down {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}

/* "Pourquoi créer un compte ?" reassurance block on the logged-out page */
.bricofix-account-perks {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 40px;
	max-width: 900px;
}

.woocommerce-MyAccount-content table.shop_table {
	border-collapse: collapse;
	width: 100%;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.woocommerce-MyAccount-content table.shop_table th {
	background: var(--color-bg-body);
	font-weight: 700;
	padding: 12px;
	text-align: left;
}

.woocommerce-MyAccount-content table.shop_table td {
	padding: 12px;
	border-top: 1px solid var(--color-border);
}

.woocommerce-MyAccount-content .woocommerce-Address {
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: 20px;
}

.woocommerce-EditAccountForm input.input-text,
.woocommerce-address-fields input.input-text,
.woocommerce-address-fields select {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	width: 100%;
}

/* ==================================================
   Checkout — each step as its own card, numbered in the
   brand color, instead of a flat gray unstyled form.
   ================================================== */
body.woocommerce-checkout .wc-block-components-checkout-step {
	background: var(--color-bg-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: 28px !important;
	margin: 0 0 20px !important;
	animation: bricofix-fade-up 0.4s ease;
}

body.woocommerce-checkout .wc-block-components-checkout-step__title {
	font-family: var(--font-heading);
	font-size: 1.2em;
	color: var(--color-secondary);
}

/* Replace the default plain "1." counter with a filled orange circle. */
body.woocommerce-checkout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__title::before {
	background: var(--color-primary);
	color: var(--color-text-inverse);
	border-radius: 50%;
	width: 28px;
	height: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.8em;
	font-weight: 700;
	font-family: var(--font-heading);
	left: -40px;
	top: -2px;
}

body.woocommerce-checkout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number {
	padding-left: 40px !important;
}

body.woocommerce-checkout .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__content::before,
body.woocommerce-checkout .wc-block-components-checkout-step--with-step-number .wc-block-components-checkout-step__description::before {
	display: none;
}

@media (max-width: 768px) {
	body.woocommerce-checkout .wc-block-components-checkout-step {
		padding: 20px !important;
	}
	body.woocommerce-checkout .wc-block-checkout__form--with-step-numbers .wc-block-components-checkout-step--with-step-number {
		padding-left: 0 !important;
	}
}

/* ==================================================
   Order received / Thank you page
   ================================================== */
.woocommerce-order {
	max-width: 760px;
	margin: 0 auto;
}

.woocommerce-order .woocommerce-thankyou-order-received {
	background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-light));
	color: var(--color-text-inverse);
	border-radius: var(--radius-lg);
	padding: 40px 30px;
	text-align: center;
	font-size: 1.3em;
	font-weight: 700;
	font-family: var(--font-heading);
	margin: 0 0 24px;
	animation: bricofix-fade-up 0.5s ease;
}

.woocommerce-order .woocommerce-thankyou-order-received::before {
	content: "✓";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
	border-radius: 50%;
	background: var(--color-primary);
	font-size: 1.4em;
	animation: bricofix-total-pulse 0.6s ease 0.2s both;
}

.woocommerce-order-overview.order_details {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
	background: var(--color-bg-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}

.woocommerce-order-overview.order_details li {
	flex: 1 1 auto;
	padding: 18px 20px;
	border-right: 1px solid var(--color-border);
	font-size: 0.85em;
	color: var(--color-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.woocommerce-order-overview.order_details li:last-child {
	border-right: none;
}

.woocommerce-order-overview.order_details li strong {
	display: block;
	margin-top: 4px;
	font-size: 1.2em;
	color: var(--color-text-main);
	text-transform: none;
	letter-spacing: normal;
	font-family: var(--font-heading);
}

.woocommerce-order .woocommerce-order-details,
.woocommerce-order .woocommerce-customer-details {
	background: var(--color-bg-surface);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	padding: 28px;
	margin: 0 0 24px;
}

.woocommerce-order .woocommerce-order-details h2,
.woocommerce-order .woocommerce-customer-details h2 {
	font-size: 1.3em;
	border-bottom: 2px solid var(--color-primary);
	padding-bottom: 12px;
	margin-bottom: 20px;
}

.woocommerce-order table.woocommerce-table {
	width: 100%;
	border-collapse: collapse;
}

.woocommerce-order table.woocommerce-table th {
	text-align: left;
	padding: 10px;
	background: var(--color-bg-body);
	font-weight: 700;
}

.woocommerce-order table.woocommerce-table td {
	padding: 10px;
	border-top: 1px solid var(--color-border);
}

/* ==================================================
   Add-to-cart feedback: WooCommerce core toggles .loading/.added on the
   button itself (assets/js/frontend/add-to-cart.js) — previously no visual
   change during the AJAX round-trip, so a slow connection made it look
   unresponsive and invited repeat clicks.
   ================================================== */
ul.products li.product .add_to_cart_button.loading {
	position: relative;
	color: transparent !important;
	pointer-events: none;
}

ul.products li.product .add_to_cart_button.loading::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 16px;
	margin: -8px 0 0 -8px;
	border: 2px solid rgba(255, 255, 255, 0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: bricofix-spin 0.6s linear infinite;
}

@keyframes bricofix-spin {
	to { transform: rotate(360deg); }
}

ul.products li.product .add_to_cart_button.added {
	background: var(--color-secondary);
}

/* ==================================================
   Empty cart (.woocommerce-cart-empty is WooCommerce core's own class,
   previously fell back to plain unstyled WP core text/link).
   ================================================== */
.woocommerce-cart-empty {
	text-align: center;
	max-width: 500px;
	margin: 40px auto;
	padding: 50px 30px;
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	font-size: 1.15em;
	color: var(--color-text-muted);
}

.woocommerce-cart-empty::before {
	content: none;
}

.woocommerce-cart-empty + p.return-to-shop .button,
.woocommerce-cart-empty ~ p.return-to-shop .button {
	margin-top: 20px;
}

@media (max-width: 768px) {
	.woocommerce-order-overview.order_details li {
		flex: 1 1 50%;
		border-bottom: 1px solid var(--color-border);
	}
}