/* ==========================================================================
   Pro (cbdconnectionpro.fr) — B2B additions on top of main.css.
   ========================================================================== */

/* --- B2B registration: SIRET block of cbd-siret-validator inside the theme form --- */

.cbdco-login__form .cbd-section-title {
	margin: 18px 0 4px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #C9A961;
}

.cbdco-login__form .form-row-first,
.cbdco-login__form .form-row-last {
	width: 100%;
	float: none;
}

@media (min-width: 640px) {
	.cbdco-login__form .cbd-extras.is-revealed {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 12px 14px;
	}
	.cbdco-login__form .cbd-extras .form-row-wide,
	.cbdco-login__form .cbd-extras .cbd-section-title {
		grid-column: 1 / -1;
	}
}

.cbdco-login__form select,
.cbdco-login__form .cbd-select {
	width: 100%;
	height: 42px;
	padding: 0 12px;
	background: #1a1a1a;
	border: 1px solid #2a2a2a;
	border-radius: 8px;
	color: #ffffff;
	font-family: inherit;
	font-size: 13.5px;
	color-scheme: dark;
}

.cbdco-login__form select:focus {
	outline: none;
	border-color: #C9A961;
	box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.15);
}

.cbdco-login__form .cbd-siret-hint,
.cbdco-login__form .cbd-vat-hint {
	color: var(--text-dim, #9a9a9a);
}

.cbdco-login__form .cbd-siret-company-card {
	background: #141414;
	border: 1px solid #2a2a2a;
	border-radius: 8px;
	color: #e8e8e8;
}

/* The plugin's card text (company name, address, NAF code) and section headings are dark grey,
   made for a white form: light on the theme's black form. */
.cbdco-login__form .cbd-siret-company-card__name { color: #f5f1e8; }
.cbdco-login__form .cbd-siret-company-card__address { color: #d6d0c4; }
.cbdco-login__form .cbd-siret-company-card__meta { color: #b9b2a4; }
.cbdco-login__form h3.cbd-section-title,
.woocommerce-form-register h3.cbd-section-title { color: #C9A961; }

/* --- Prices hidden from guests --- */

.cbdco-login-price {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	color: #C9A961;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cbdco-login-buy {
	margin: 18px 0;
	padding: 16px 18px;
	border: 1px solid #2a2a2a;
	border-radius: 10px;
	background: #141414;
}

.cbdco-login-buy p {
	margin: 0 0 10px;
	color: var(--text-dim, #9a9a9a);
}

/* --- Contact page: stand-in for The7 contact shortcodes --- */

.cbdco-pro-contact__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.cbdco-pro-contact__list a.button {
	display: inline-flex;
	align-items: center;
	padding: 10px 18px;
	border: 1px solid var(--line, #2a2a2a);
	border-radius: 999px;
	color: var(--gold, #d4a648);
	font-size: 13.5px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color .15s, background .15s;
}

.cbdco-pro-contact__list a.button:hover {
	border-color: var(--gold, #d4a648);
	background: rgba(212, 168, 75, .08);
}

/* Account dashboard: main.css asks for one stat column under 768px, but its later base rules
   win, so the 2 columns overflow at phone width. Same on cbdconnection.fr. */
@media (max-width: 768px) {
	.cbdco-account__stats { grid-template-columns: 1fr; gap: 10px; }
}

.cbdco-pro-contact__trap {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cbdco-pro-contact__consent label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	font-size: 13px;
	line-height: 1.5;
}

.cbdco-contact-fields .cbdco-pro-contact__consent input {
	width: auto;
	margin-top: 3px;
	accent-color: var(--gold);
}

.cbdco-pro-icon-text {
	margin: 0 0 6px;
}

/* --- Ported from The7 custom CSS (option the7 → general-custom_css), adapted to the dark theme --- */

/* Scrolling banner (marquee3k). */
.marquee3k__copy { padding-right: 15ch; box-sizing: border-box; }

/* Product page: no SKU/category meta, no "in stock" line, no "clear" link. */
.single-product .product_meta { display: none; }
.single-product p.stock.in-stock { display: none !important; }
.single-product a.reset_variations { display: none; }
.woocommerce-variation-price { margin-bottom: 30px; }

/* Product add-ons (Advanced Product Fields) blocks. */
.wapf-field-container.wapf-field-image-swatch,
.wapf-field-container.wapf-field-text,
.wapf-field-container.wapf-field-color-swatch,
.wapf-field-container.wapf-field-checkboxes {
	background: #141414;
	border: 1px solid #2a2a2a;
	border-radius: 5px;
	padding: 20px;
	margin-top: 15px;
}
.wapf-swatch.wapf-swatch--image { padding-top: 5px !important; }
.wapf-swatch--image.wapf-checked { border-color: #C9A961; background: rgba(201, 169, 97, 0.15); border-radius: 5px; padding-top: 7px; }

/* Loyalty points boxes and product notices written in product content. */
div#points,
div#points-var { background: #becec7; color: #1a1a1a; padding: 5px; border-radius: 5px; text-align: center; }
div#points-var { margin-bottom: 22px; }
.enu_warning { background-color: #ff9966; padding: 20px; color: #fff; margin-bottom: 30px; }
div#des { background: #141414; border-radius: 5px; padding: 20px 25px 15px; }
#des h2 { font-size: 1.5rem; }
#des h3 { font-size: 1rem; }

/* --- Footer legal links rendered from the "legal" menu location (li items) --- */
.site-footer__legal-links li { display: inline; list-style: none; margin: 0; padding: 0; }
.site-footer__legal-links li + li::before,
.site-footer__legal-links li + a::before { content: "·"; margin: 0 6px; opacity: .5; }

/* --- Home hero. homepage.css loads after this file: the section prefix gives priority. --- */
/* Client feedback 2026-11-03: the banners must have exactly cbdconnection.fr's heights, so the
   retail sizes in homepage.css apply unchanged (500 px block, two equal side banners). The pro
   banners are wider than retail's, so the big one is anchored left, where its text is. */
/* Inline style sets "center": !important needed. */
.hp-hero-section .hp-hero__main .hp-hero__bg { background-position: left center !important; }
/* Side banners fill their box (retail's own images happen to match its ratio). */
@media (min-width: 901px) {
	.hp-hero-section .hp-hero__small .hp-hero__img { height: 100% !important; object-fit: cover; object-position: left center; }
}
/* Phones: side banners at cbdconnection.fr's height (its 800x334 banners: 332x140 at 390 px). */
@media (max-width: 900px) {
	.hp-hero-section .hp-hero__small { aspect-ratio: 800 / 334; overflow: hidden; }
	.hp-hero-section .hp-hero__small .hp-hero__img { height: 100% !important; object-fit: cover; object-position: left center; }
}

/* --- The Running Text plugin bar: its messages are shown in the theme top bar instead. --- */
.runtext-container { display: none !important; }

/* --- Guest "log in to order" button on the product page: same look as the theme add-to-cart --- */
.single-product .cbdco-login-buy .cbdco-login-buy__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	padding: 14px 18px;
	background: var(--btn-bg) !important;
	color: #1a1208 !important;
	border: 0;
	border-radius: 6px;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(212, 168, 75, 0.25);
}
.single-product .cbdco-login-buy .cbdco-login-buy__btn:hover { transform: translateY(-1px); }

/* --- Product short description, collapsed to 2 lines (main.css): pro descriptions have several
       paragraphs; their margins pushed line 2 half below the cut. No paragraph gaps while collapsed. --- */
.single-product .woocommerce-product-details__short-description:not(.is-expanded) p,
.single-product .woocommerce-product-details__short-description:not(.is-expanded) ul,
.single-product .woocommerce-product-details__short-description:not(.is-expanded) h2,
.single-product .woocommerce-product-details__short-description:not(.is-expanded) h3 {
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}

/* --- iThemeland gift plugin message (prints raw text above the checkout): keep it inside the
       page width and styled like the theme notices. --- */
.itg_shortcode_gift_products_wrapper {
	box-sizing: border-box;
	max-width: 1200px;
	margin: 16px auto;
	padding: 12px 16px;
	border: 1px solid var(--line, #2f2922);
	border-radius: 8px;
	background: var(--bg-2, #14120f);
	color: var(--text-dim, #d6d0c4);
	font-size: 13px;
}
.itg_shortcode_gift_products_wrapper:empty { display: none; }

/* --- Click to Chat plugin bubble: the theme WhatsApp pill (bottom-left, as on cbdconnection.fr)
       replaces it; the plugin bubble sat on top of the bottom-right theme button. --- */
#ht-ctc-chat { display: none !important; }

/* Product page: on retail the reviews section sits between the trust bar and the tabs, and the
   tabs' -32px top margin (main.css) offsets its bottom margin. Without it the tabs overlap the
   trust bar, so keep the normal grid gap. */
.single-product-wrap > .sp-trust + .woocommerce-tabs,
.woocommerce div.product > .sp-trust + .woocommerce-tabs {
	margin-top: 0;
}

/* Product without reviews: the "Écrire un avis" button is absolutely placed for the rating header,
   which the empty state does not have, so it hung below the card. Keep it in the empty block;
   reviews.css forces it with !important, so this does too. */
.cbdco-reviews__empty .cbdco-reviews__write-btn {
	position: static !important;
	transform: none !important;
	margin: 0 auto !important;
}
/* The reviews card has no bottom padding (main.css: the review list brings its own); the empty
   state does not, so give the card the same 28px at the bottom as on the other sides. */
.sp-reviews-section:has(.cbdco-reviews__empty) {
	padding-bottom: 28px;
}
@media (max-width: 900px) {
	.sp-reviews-section:has(.cbdco-reviews__empty) {
		padding-bottom: 18px;
	}
}

/* Review form: the criteria box keeps the dark card background of reviews.css inside the light
   modal, where cbdco-modal.css turns the labels dark, so they could not be read. */
dialog.cbdco-rev-modal .cbdco-rev-criteria {
	background: rgba(216, 183, 104, 0.06) !important;
}
dialog.cbdco-rev-modal .cbdco-rev-crit-row + .cbdco-rev-crit-row {
	border-top-color: rgba(216, 183, 104, 0.2) !important;
}

/* Stand-ins for the Ultimate Addons heading/spacer on the Contact page (inc/pro/pages.php),
   same measurements as the plugin's output. */
.cbdco-ult-heading .cbdco-ult-heading__title {
	margin: 0 0 5px !important; /* page content headings get a top margin from the theme */
	font-weight: 400;
	line-height: normal;
}
.cbdco-ult-heading__line {
	display: block;
	border-bottom: 3px solid #ccc;
	margin-bottom: 30px;
}
.cbdco-ult-spacer {
	clear: both;
	height: var(--h);
}
@media (max-width: 1024px) {
	.cbdco-ult-spacer { height: var(--h-tab); }
}
@media (max-width: 767px) {
	.cbdco-ult-spacer { height: var(--h-mob); }
}

/* Home testimonials: where the reviews come from (cbdconnection.fr), under the title. */
.hp-shead__note {
	margin: 10px 0 0;
	max-width: 62ch;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.62);
}

/* --- Account › Détails du compte: section titles of cbd-siret-validator --- */
/* main.css pulls every account h3 up by 7px with no bottom margin, so the titles sat on the field
   above and the label below. Give them a divider and room on both sides. */
.woocommerce-EditAccountForm .cbd-section-title {
	clear: both;
	margin: 30px 0 18px !important;
	padding: 22px 0 0 !important;
	border: 0 !important;
	border-top: 1px solid rgba(255,255,255,0.08) !important;
	font-family: var(--font-body, 'Inter', sans-serif);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #C9A961;
}
.woocommerce-EditAccountForm .cbd-extras { margin-top: 8px; }

/* --- Account notices that carry a button (e.g. WooCommerce's "Confirmer l'adresse e-mail") --- */
/* The button inherited the notice's underlined blue link colour on a gold background. */
.woocommerce-MyAccount-content .woocommerce-info .button,
.woocommerce-MyAccount-content .woocommerce-message .button {
	order: 2;
	flex: none;
	margin: 0 0 0 auto !important;
	padding: 9px 16px !important;
	min-height: 0 !important;
	border: 0 !important;
	border-radius: 8px !important;
	background: linear-gradient(135deg, #e2cb97 4%, #a88659 100%) !important;
	color: #1a1208 !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0.02em;
	text-decoration: none !important;
	text-transform: none !important;
	white-space: nowrap;
	box-shadow: none !important;
}
.woocommerce-MyAccount-content .woocommerce-info .button:hover,
.woocommerce-MyAccount-content .woocommerce-message .button:hover { filter: brightness(1.06); }
@media (max-width: 600px) {
	.woocommerce-MyAccount-content .woocommerce-info:has(.button),
	.woocommerce-MyAccount-content .woocommerce-message:has(.button) { flex-wrap: wrap; }
	.woocommerce-MyAccount-content .woocommerce-info .button,
	.woocommerce-MyAccount-content .woocommerce-message .button {
		width: 100%;
		margin: 4px 0 0 !important;
		justify-content: center;
		text-align: center;
	}
}
.woocommerce-EditAccountForm select.cbd-select { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }

/* --- Home FAQ: open question --- */
/* main.js colours an open question's border gold (inline border-color). WordPress's global styles
   then force border-style:solid on all four sides at the default 3px width, so every open answer got
   a thick gold box. Keep only the 1px gold line on top. */
.faq-item[style*="border-color"] {
	border-left-style: none !important;
	border-right-style: none !important;
	border-bottom-style: none !important;
}
.faq-item:last-child[style*="border-color"] { border-bottom: 1px solid var(--line) !important; }
/* Two columns: the bottom question of the left column also gets the closing line. */
@media (min-width: 769px) {
	.hp-faq-grid .faq-item:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--line) !important; }
}

/* Client feedback 2026-11-03: no star ratings on product cards (the site's review system is not
   used on pro; the product page module is skipped in bootstrap.php). */
.product__rating--cbdco { display: none !important; }

/* --- Home reassurance section (replaces the reviews rail on pro, client feedback 2026-11-03) --- */
.hp-pro-trust-section { padding: 56px 0; }
.hp-pro-trust {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}
.hp-pro-trust__item {
	padding: 24px 22px;
	background: var(--bg-2, #141414);
	border: 1px solid var(--line, #2a2a2a);
	border-radius: 12px;
}
.hp-pro-trust__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: 1px solid var(--line, #2a2a2a);
	color: var(--gold, #C9A961);
	margin-bottom: 16px;
}
.hp-pro-trust__title { margin: 0 0 8px; font-size: 17px; line-height: 1.3; color: var(--text, #f5f1e8); }
.hp-pro-trust__text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--text-dim, #b9b2a4); }
@media (max-width: 1000px) { .hp-pro-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hp-pro-trust-section { padding: 40px 0; } .hp-pro-trust { grid-template-columns: 1fr; } }

/* --- Legal and help pages: heading scale and spacing (client feedback 2026-11-03) --- */
.cbdco-legal-page .entry-article { max-width: 860px; }
.cbdco-legal-page .entry-article h2 {
	font-size: clamp(18px, 1.6vw, 22px);
	line-height: 1.3;
	margin: 36px 0 12px;
}
.cbdco-legal-page .entry-article h2:first-child { margin-top: 8px; }
.cbdco-legal-page .entry-article h3 {
	font-size: clamp(16px, 1.3vw, 18px);
	line-height: 1.35;
	margin: 26px 0 8px;
}
.cbdco-legal-page .entry-article p,
.cbdco-legal-page .entry-article ul { margin: 0 0 12px; line-height: 1.65; }
.cbdco-legal-page .entry-article ul { padding-left: 20px; }
.cbdco-legal-page .entry-article li { margin-bottom: 6px; }

/* --- WPBakery stand-ins (inc/pro/pages.php) when the plugin is removed --- */
.cbdco-vc-row { display: flex; flex-wrap: wrap; gap: 24px; width: 100%; }
.cbdco-vc-col { flex: 1 1 calc(var(--cbdco-vc-w, 100%) - 24px); min-width: 0; }
.cbdco-vc-text > :last-child { margin-bottom: 0; }
@media (max-width: 768px) { .cbdco-vc-col { flex-basis: 100%; } }
.cbdco-legal-page .entry-article .cbdco-vc-text h2:first-child { margin-top: 8px; }
.cbdco-legal-page .entry-article hr { margin: 28px 0; }
.cbdco-legal-page .entry-article h1 { font-size: clamp(20px, 1.9vw, 26px); line-height: 1.25; margin: 8px 0 14px; }

/* --- "Payer la commande" (WooCommerce order-pay: payment links sent by the CRM app and by email).
   checkout-shopify.css hides the site header, top bar and footer on every checkout page because the
   checkout template prints its own header; order-pay does not, so it had no header at all, and its
   table labels were drawn with a transparent text fill. Give it the normal site chrome and a
   readable, centred layout. --- */
html body.woocommerce-order-pay.woocommerce-checkout .topbar,
html body.woocommerce-order-pay.woocommerce-checkout .site-header,
html body.woocommerce-order-pay.woocommerce-checkout .page-hero { display: block !important; }
html body.woocommerce-order-pay.woocommerce-checkout .site-footer__inner { display: grid !important; }
@media (min-width: 769px) {
	html body.woocommerce-order-pay.woocommerce-checkout .breadcrumb { display: block !important; }
}
body.woocommerce-order-pay .entry-article > .woocommerce,
body.woocommerce-order-pay main .woocommerce { max-width: 980px; margin: 28px auto 48px; padding: 0 16px; }
body.woocommerce-order-pay .shop_table th,
body.woocommerce-order-pay .shop_table th * {
	-webkit-text-fill-color: currentColor !important;
	color: var(--gold, #d4a648) !important;
	background: none !important;
}
body.woocommerce-order-pay .shop_table { border-radius: 12px; overflow: hidden; }
body.woocommerce-order-pay .shop_table th,
body.woocommerce-order-pay .shop_table td { padding: 12px 14px !important; }
/* Customer not logged in: WooCommerce's login form before payment, in the theme's field style. */
body.woocommerce-order-pay .woocommerce-form-login { max-width: 520px; margin: 0 auto; }
body.woocommerce-order-pay .woocommerce-form-login input.input-text {
	width: 100%;
	background: var(--bg-2, #1c1a16) !important;
	color: var(--text, #f5f1e8) !important;
	border: 1px solid var(--line, #2a2a2a) !important;
	border-radius: 8px;
	padding: 12px 14px;
}
body.woocommerce-order-pay .woocommerce-form-login .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; margin: 6px 0 14px; }
body.woocommerce-order-pay .woocommerce-form-login .button { width: 100%; }
html body.woocommerce-order-pay.woocommerce-checkout .site-footer { padding: 56px 24px 24px; background: #000; border-top: 1px solid rgb(47, 41, 34); }
@media (max-width: 768px) {
	html body.woocommerce-order-pay.woocommerce-checkout .site-footer { padding: 28px 12px 0; }
}
body.woocommerce-order-pay .woocommerce-form-login .woocommerce-form-login__rememberme {
	display: flex !important;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	width: auto;
	text-transform: none;
	letter-spacing: 0;
	font-size: 14px;
}
body.woocommerce-order-pay .woocommerce-form-login .woocommerce-form-login__rememberme input { margin: 0 !important; width: 18px !important; height: 18px; flex: 0 0 18px; }
body.woocommerce-order-pay .woocommerce-form-login .button {
	background: linear-gradient(135deg, rgb(240, 210, 138) 4%, rgb(168, 134, 89) 100%) !important;
	color: rgb(26, 18, 8) !important;
	border: 0 !important;
	border-radius: 8px;
	padding: 13px 18px;
	font-weight: 700;
}

/* Contact / partner form: the global input[type="text"] rule (main.css) outranks the form's own
   field style, so Nom and Prénom had a lighter background than the other fields. */
#cbdco-pro-contact-form input[type="text"] { background: var(--bg-0, #0c0a08); }

/* Price "TTC / HT" block (inc/pro/prices.php woocommerce_get_price_suffix). */
.price:has(.cbdco-pro-suffix) { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .35em; row-gap: .2em; }
.price .cbdco-pro-suffix { display: contents; font-size: inherit; color: inherit; }
.price .cbdco-pro-suffix__ttc { margin-left: 0; font-size: .55em; font-weight: 600; letter-spacing: .05em; color: var(--gold-soft, #f0d28a); vertical-align: baseline; }
.price .cbdco-pro-suffix__ht { display: inline-flex; align-items: baseline; gap: .3em; margin-left: .5em; padding-left: .7em; border-left: 1px solid rgba(240, 210, 138, .35); font-size: .7em; font-weight: 500; color: rgba(255, 255, 255, .62); }
.price .cbdco-pro-suffix__ht .amount, .price .cbdco-pro-suffix__ht bdi { color: rgba(255, 255, 255, .82); font-weight: 600; }
.price .cbdco-pro-suffix__ht abbr { text-decoration: none; border: 0; color: rgba(255, 255, 255, .62); }

/* La Poste relay-point map (plugin modal, white list): readable names and buttons (client 2026-11-05). */
#laposteproexp-map#laposteproexp-map [class*="laposteproexp-show-info"] { color: #7a5c33 !important; font-weight: 700; }
#laposteproexp-map#laposteproexp-map [class*="laposteproexp-show-info"]:hover { color: #1a1308 !important; }
#laposteproexp-map#laposteproexp-map .laposteproexp-parcel-point-button {
	background: linear-gradient(180deg, #a88659 0%, #8a6a3d 60%, #7a5c33 100%) !important;
	border-color: #7a5c33 !important;
	color: #fff !important;
	text-shadow: none !important;
}
#laposteproexp-map#laposteproexp-map .laposteproexp-parcel-point-button b,
#laposteproexp-map#laposteproexp-map .laposteproexp-parcel-point-button * { color: #fff !important; }
#laposteproexp-map#laposteproexp-map .laposteproexp-parcel-point-button:hover { background: #6b4f2b !important; }

/* TTC / HT block outside the product page (cards, carousels, search, quiz): spaced, no dotted HT. */
.cbdco-pro-suffix abbr { text-decoration: none; border: 0; cursor: default; }
.cbdco-pro-suffix__ttc { margin-left: .3em; font-size: .6em; font-weight: 600; letter-spacing: .05em; color: var(--gold-soft, #f0d28a); }
.cbdco-pro-suffix__ht { margin-left: .5em; font-size: .7em; font-weight: 500; color: rgba(255, 255, 255, .62); white-space: nowrap; }
.cbdco-pro-suffix__ht .amount, .cbdco-pro-suffix__ht bdi { color: rgba(255, 255, 255, .82); font-weight: 600; }
/* Product cards: "2,40 € TTC" then "2,00 € HT" on its own quieter line. */
.product__price .cbdco-pro-suffix { display: inline; font-size: inherit; color: inherit; }
.product__price .cbdco-pro-suffix__ht { display: block; margin: .3em 0 0; font-size: .62em; }

/* Home: "Grossiste CBD n°1" + "Pourquoi travailler avec CBD Connection ?" (inc/pro/home-about.php). */
.hp-about-section { padding: clamp(56px, 7vw, 96px) 0; border-top: 1px solid rgba(212, 166, 72, .14); }
.hp-about-section .hp__inner { max-width: 1180px; margin: 0 auto; padding-left: 16px; padding-right: 16px; box-sizing: border-box; }
.hp-about { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.hp-about__intro .hp-shead__title { margin: 10px 0 16px; }
.hp-about__intro p { margin: 0 0 14px; max-width: 58ch; color: rgba(255, 255, 255, .72); line-height: 1.7; font-size: 15px; }
.hp-about__lead { font-size: 17px !important; color: #fff !important; font-weight: 600; }
.hp-about__brands { list-style: none; margin: 2px 0 18px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hp-about__brands li { padding: 6px 12px; border: 1px solid rgba(212, 166, 72, .4); border-radius: 999px; color: var(--gold-soft, #f0d28a); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.hp-about__card { background: linear-gradient(180deg, rgba(212, 166, 72, .07), rgba(212, 166, 72, .02)); border: 1px solid rgba(212, 166, 72, .22); border-radius: 16px; padding: clamp(22px, 3vw, 32px); }
.hp-about__card-title { margin: 0 0 16px; font-size: 17px; color: #fff; }
.hp-about__checks { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 11px; }
.hp-about__checks li { display: flex; gap: 10px; align-items: baseline; color: rgba(255, 255, 255, .82); font-size: 14.5px; }
.hp-about__tick { color: var(--gold, #d4a648); font-weight: 700; }
.hp-about__call { border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 18px; display: grid; gap: 4px; }
.hp-about__call p { margin: 0; color: rgba(255, 255, 255, .65); font-size: 13.5px; }
.hp-about__phone { font-size: 22px; font-weight: 700; color: var(--gold-soft, #f0d28a); text-decoration: none; }
.hp-about__call small { color: rgba(255, 255, 255, .5); font-size: 12.5px; }
.hp-why { margin-top: clamp(56px, 7vw, 96px); }
.hp-why .hp-shead { margin-bottom: 14px; }
.hp-why__intro, .hp-why__outro { max-width: 720px; margin: 0 auto 36px; text-align: center; color: rgba(255, 255, 255, .66); line-height: 1.7; font-size: 15px; }
.hp-why__outro { margin: 40px auto 0; }
.hp-why__grid { list-style: none; margin: 0 auto; padding: 0; max-width: 1040px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 5vw, 64px); }
.hp-why__item { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: start; column-gap: 16px; padding: 22px 0; border-top: 1px solid rgba(212, 166, 72, .16); }
.hp-why__num { grid-row: 1 / span 2; grid-column: 1; display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(212, 166, 72, .55); color: var(--gold-soft, #f0d28a); font-weight: 700; font-size: 14px; }
.hp-why__title { grid-column: 2; margin: 6px 0 6px; font-size: 16px; color: #fff; }
.hp-why__item p { grid-column: 2; margin: 0; color: rgba(255, 255, 255, .64); font-size: 14px; line-height: 1.65; }
@media (max-width: 900px) { .hp-about { grid-template-columns: minmax(0, 1fr); } .hp-why__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .hp-about-section .hp-shead__title { font-size: 26px; line-height: 1.2; } }

/* Cartes catalogue, produits variables : « 2,40 € /gr  TTC | 2,00 €/gr HT » sur une seule ligne (05/11/2026). */
.product__price-amount:has(.cbdco-pro-suffix) { flex-wrap: nowrap; gap: 6px; white-space: nowrap; }
.product__price-amount .cbdco-pro-suffix { display: inline-flex; align-items: baseline; gap: .4em; margin: 0; font-size: 13px; line-height: 1; color: inherit; white-space: nowrap; }
.product__price-amount .cbdco-pro-suffix * { font-size: 13px; }
.product__price-amount .cbdco-pro-suffix__ttc { font-weight: 600; letter-spacing: .05em; color: var(--gold-soft, #f0d28a); }
.product__price-amount .cbdco-pro-suffix__ht { padding-left: .4em; border-left: 1px solid rgba(240, 210, 138, .35); color: rgba(255, 255, 255, .62); }
.product__price-amount .cbdco-pro-suffix__ht .amount, .product__price-amount .cbdco-pro-suffix__ht bdi { color: rgba(255, 255, 255, .82); font-weight: 600; }
/* Petits écrans (2 cartes par ligne) : le HT passe dessous plutôt que de déborder. */
@media (max-width: 600px) {
	.product__price-amount:has(.cbdco-pro-suffix) { flex-wrap: wrap; white-space: normal; }
	.product__price-amount .cbdco-pro-suffix { flex-basis: 100%; justify-content: center; }
}

/* Cases de format (fiche produit variable) : ligne HT sous le prix au gramme TTC (05/11/2026). */
.cbdco-cell__ht { display: block; margin-top: 2px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 400; letter-spacing: .04em; color: var(--text-mute); white-space: nowrap; }
.cbdco-cell.is-active .cbdco-cell__ht { color: rgba(26, 18, 8, 0.7); }