/**
 * HomeBe — Habillage WooCommerce (checkout, panier, espace client).
 * Couleurs/typo de la marque, boutons dorés, champs et cartes arrondis.
 * Chargé uniquement sur les pages WooCommerce.
 */

:root {
	--hb-navy: #1B2A4E;
	--hb-amber: #D9A441;
	--hb-amber2: #B8852B;
	--hb-line: #D7DBE3;
	--hb-mist: #F4F5F7;
}

.woocommerce,
.wc-block-checkout,
.wc-block-cart,
.woocommerce-account,
.woocommerce-order-received {
	font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
	color: var(--hb-navy);
}

/* ── Titres ───────────────────────────────────────────── */
.wc-block-components-title,
.wc-block-components-checkout-step__title,
.woocommerce-account h1,
.woocommerce h1,
.woocommerce h2,
.woocommerce h3 {
	color: var(--hb-navy) !important;
	font-family: 'DM Sans', system-ui, sans-serif !important;
	font-weight: 700;
}

/* ── Champs de formulaire ─────────────────────────────── */
.wc-block-components-text-input input,
.wc-block-components-select .components-select-control__input,
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.select2-container--default .select2-selection--single {
	border: 1px solid var(--hb-line) !important;
	border-radius: 10px !important;
}
.wc-block-components-text-input input:focus,
.woocommerce form .form-row input.input-text:focus {
	border-color: var(--hb-navy) !important;
	box-shadow: 0 0 0 2px rgba(27, 42, 78, .12) !important;
	outline: none !important;
}

/* ── Boutons principaux (Commander, etc.) ─────────────── */
.wc-block-components-button:not(.is-link),
.wc-block-components-checkout-place-order-button,
.woocommerce #place_order,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce button.button {
	background: var(--hb-amber) !important;
	color: var(--hb-navy) !important;
	border: none !important;
	border-radius: 999px !important;
	font-weight: 700 !important;
	box-shadow: none !important;
}
.wc-block-components-button:not(.is-link):hover,
.woocommerce #place_order:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--hb-amber2) !important;
	color: #fff !important;
}

/* ── Liens ────────────────────────────────────────────── */
.woocommerce a:not(.button),
.wc-block-components-button.is-link {
	color: var(--hb-amber2);
}

/* ── Récapitulatif de commande / cartes ───────────────── */
.wp-block-woocommerce-checkout-order-summary-block,
.woocommerce .cart_totals,
.woocommerce-order-received .woocommerce-order > .woocommerce-table {
	border: 1px solid var(--hb-line);
	border-radius: 14px;
	background: var(--hb-mist);
	padding: 6px 18px;
}
.wc-block-components-totals-item__value,
.order-total .amount {
	color: var(--hb-navy) !important;
	font-weight: 700;
}

/* ── Masquer le header/footer Hello Elementor par défaut ──
   (notre header .hb-header + footer .hb-footer les remplacent ;
   sinon un « HomeBe » fantôme apparaît derrière). */
.site-header,
header#masthead,
header#site-header,
.site-branding,
.site-title,
.elementor-location-header,
.site-footer,
footer#colophon {
	display: none !important;
}

/* Le header HomeBe est en position fixed : on insère une BANDE BLANCHE en
   haut de page pour faire descendre tout le contenu sous le header
   (rien derrière le header, juste du blanc). */
body::before {
	content: "";
	display: block;
	width: 100%;
	height: 104px;
	background: #ffffff;
}
@media (max-width: 760px) {
	body::before { height: 82px; }
}
/* Fil d'Ariane WooCommerce redondant : masqué. */
.woocommerce-breadcrumb {
	display: none !important;
}

/* ── Espace client (Mon compte) : layout en 2 colonnes ──── */
.woocommerce-account .woocommerce {
	display: flex;
	gap: 28px;
	align-items: flex-start;
	max-width: 1040px;
	margin: 40px auto;
}
.woocommerce-account .woocommerce-MyAccount-navigation {
	flex: 0 0 248px;
	width: 248px;
	float: none;
	margin: 0;
}
.woocommerce-account .woocommerce-MyAccount-content {
	flex: 1 1 auto;
	float: none;
	width: auto;
	margin: 0;
	background: #fff;
	border: 1px solid var(--hb-line);
	border-radius: 16px;
	padding: 30px 34px;
}
.woocommerce-MyAccount-navigation ul {
	list-style: none !important;
	margin: 0;
	padding: 8px;
	background: #fff;
	border: 1px solid var(--hb-line);
	border-radius: 16px;
}
.woocommerce-MyAccount-navigation ul li {
	margin: 0 !important;
	list-style: none !important;
}
.woocommerce-MyAccount-navigation ul li a {
	display: block;
	padding: 12px 16px;
	border-radius: 10px;
	color: var(--hb-navy) !important;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s ease;
}
.woocommerce-MyAccount-navigation ul li a:hover {
	background: var(--hb-mist);
	color: var(--hb-navy) !important;
}
.woocommerce-MyAccount-navigation ul li.is-active a {
	background: var(--hb-navy);
	color: #fff !important;
	font-weight: 700;
}

/* Tableau des commandes dans l'espace client */
.woocommerce-orders-table {
	width: 100%;
	border-collapse: collapse;
}
.woocommerce-orders-table th {
	text-align: left;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--hb-navy);
	padding: 10px 12px;
	border-bottom: 2px solid var(--hb-line);
}
.woocommerce-orders-table td {
	padding: 14px 12px;
	border-bottom: 1px solid var(--hb-line);
	vertical-align: middle;
}

/* Formulaire de connexion / inscription : carte centrée */
.woocommerce-account:not(.logged-in) .woocommerce {
	display: block;
	max-width: 460px;
	margin: 40px auto;
}
.woocommerce form.woocommerce-form-login,
.woocommerce form.woocommerce-form-register,
.woocommerce form.register {
	border: 1px solid var(--hb-line);
	border-radius: 16px;
	padding: 28px 30px;
	background: #fff;
}

@media (max-width: 760px) {
	.woocommerce-account .woocommerce { flex-direction: column; margin: 24px auto; }
	.woocommerce-account .woocommerce-MyAccount-navigation,
	.woocommerce-account .woocommerce-MyAccount-content { width: 100%; flex: 1 1 auto; }
}

/* ── Page « Adresses » : on garde la mise en page native
   WooCommerce (2 colonnes), on corrige juste les détails. */
.woocommerce-Address-title {
	text-align: left;
	margin-bottom: 12px;
}
.woocommerce-Address-title h2,
.woocommerce-Address-title h3 {
	display: block !important;
	font-size: 18px !important;
	line-height: 1.3;
	color: var(--hb-navy) !important;
	margin: 0 0 2px !important;
}
.woocommerce-Address-title .edit {
	float: none !important;
	display: inline-block;
	margin: 0 0 6px !important;
	font-size: 13px;
	font-weight: 600;
	color: var(--hb-amber2) !important;
}
.woocommerce-Address address {
	font-style: normal;
	text-align: left;
	color: var(--hb-navy);
	line-height: 1.7;
}

/* ── Boutons d'action commandes (dont « Voir mon rapport ») ── */
.woocommerce-orders-table__cell a.button,
.woocommerce-MyAccount-content a.button {
	background: var(--hb-navy) !important;
	color: #fff !important;
	border-radius: 999px !important;
}
.woocommerce-orders-table__cell a.button.homebe_report,
.woocommerce a.button.homebe_report {
	background: var(--hb-amber) !important;
	color: var(--hb-navy) !important;
}