/**
 * Boutique café — bloc prix (format présélectionné + équivalent au kilo),
 * bandeau « professionnels » et sa modale de contact.
 * Chargée sur l'archive boutique ET les fiches café (voir functions.php).
 */

/* ============================================================
   Prix de la fiche café
   Sous le nom : prix du format présélectionné (le plus grand) puis
   « Soit XX,XX €/kg ». Mis à jour en JS au changement de poids.
   ============================================================ */
.single-product .summary .cafeo-price{display:flex;flex-direction:column;gap:4px;margin:0 0 22px;}
.single-product .summary .cafeo-price__main{font-size:26px;color:#482b13;font-weight:500;line-height:1.2;}
.single-product .summary .cafeo-price__main .woocommerce-price-suffix{font-size:.55em;color:#9a7862;font-weight:400;}
.single-product .summary .cafeo-price__unit{font-size:14px;color:#9a7862;letter-spacing:.3px;}
.single-product .summary .cafeo-price__unit:empty{display:none;}
/* Le prix est déjà affiché sous le nom → on retire le doublon du formulaire. */
.single-product .cafeo-price ~ form.variations_form .woocommerce-variation-price{display:none;}

/* ============================================================
   Bandeau « Vous êtes un professionnel ? »
   ============================================================ */
.cafeo-pro{
	display:flex;align-items:center;gap:20px;flex-wrap:wrap;
	font-family:'Onest',sans-serif;background:#fff;
	border:1px solid rgba(74,45,31,.14);border-left:4px solid #ffd17c;
	border-radius:14px;padding:20px 24px;
}
.cafeo-pro__text{flex:1 1 260px;}
.cafeo-pro__title{margin:0 0 4px;font-size:16px;font-weight:600;color:#42240c;}
.cafeo-pro__deck{margin:0;font-size:15px;line-height:1.5;color:#5b4636;}
.cafeo-pro__btn{
	flex:none;background:#ffd17c;color:#42240c;border:0;border-radius:30px;
	padding:13px 28px;font-family:'Onest',sans-serif;font-size:13px;font-weight:600;
	letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:background .2s;
}
.cafeo-pro__btn:hover{background:#e9b74f;}
.cafeo-pro--wide{margin:36px 0 8px;}
.cafeo-pro--compact{margin:24px 0 0;padding:18px 20px;}
@media(max-width:620px){
	.cafeo-pro{padding:18px;}
	.cafeo-pro__btn{width:100%;}
}

/* ============================================================
   Modale de contact professionnels
   ============================================================ */
.cafeo-pro-modal[hidden]{display:none;}
.cafeo-pro-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;}
.cafeo-pro-modal__backdrop{position:absolute;inset:0;background:rgba(28,12,4,.6);}
.cafeo-pro-modal__box{
	position:relative;background:#fcf3e5;border-radius:18px;
	width:100%;max-width:560px;max-height:90vh;overflow-y:auto;
	padding:34px 34px 30px;box-shadow:0 24px 60px rgba(28,12,4,.35);
	font-family:'Onest',sans-serif;
}
.cafeo-pro-modal__close{position:absolute;top:10px;right:14px;background:none;border:0;font-size:30px;line-height:1;color:#9a7862;cursor:pointer;padding:4px 8px;}
.cafeo-pro-modal__close:hover{color:#42240c;}
.cafeo-pro-modal__eyebrow{margin:0 0 6px;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#c8932e;}
.cafeo-pro-modal__title{margin:0 0 10px;font-size:24px;font-weight:400;color:#42240c;letter-spacing:.5px;}
.cafeo-pro-modal__deck{margin:0 0 22px;font-size:15px;line-height:1.6;color:#5b4636;}
body.cafeo-pro-open{overflow:hidden;}

/* Champs du formulaire (fond crème → styles explicites, indépendants du parent). */
.cafeo-pro-modal__form label{display:block;font-size:13px;color:#5b4636;margin:0 0 6px;}
.cafeo-pro-modal__form input[type=text],
.cafeo-pro-modal__form input[type=tel],
.cafeo-pro-modal__form input[type=email],
.cafeo-pro-modal__form textarea{
	width:100%;background:#fff;border:1px solid rgba(74,45,31,.18);border-radius:10px;
	padding:13px 16px;margin:0 0 14px;font-family:'Onest',sans-serif;font-size:15px;color:#2c3235;
}
.cafeo-pro-modal__form input:focus,
.cafeo-pro-modal__form textarea:focus{outline:none;border-color:#ffd17c;box-shadow:0 0 0 3px rgba(255,209,124,.35);}
.cafeo-pro-modal__form .wpcf7-submit{
	background:#ffd17c;color:#42240c;border:0;border-radius:30px;padding:14px 32px;
	font-family:'Onest',sans-serif;font-size:13px;font-weight:600;letter-spacing:1.5px;
	text-transform:uppercase;cursor:pointer;transition:background .2s;
}
.cafeo-pro-modal__form .wpcf7-submit:hover{background:#e9b74f;}
.cafeo-pro-modal__form .wpcf7-not-valid-tip{color:#c0392b;font-size:13px;}
.cafeo-pro-modal__form .wpcf7-response-output{border-radius:10px;font-size:14px;margin:14px 0 0;}

/* Le formulaire du site utilise le gabarit « main-form » du thème parent
   (grille 3 colonnes + bouton clair) : dans la modale étroite, on repasse en
   une colonne et on remet le bouton à la charte. */
.cafeo-pro-modal__form .main-form__wrap{grid-template-columns:1fr !important;gap:6px !important;}
.cafeo-pro-modal__form .main-form__button{margin-top:18px;}
.cafeo-pro-modal__form button.button{background:#ffd17c !important;color:#42240c !important;border:0 !important;border-radius:30px !important;}
.cafeo-pro-modal__form button.button:hover{background:#e9b74f !important;}
.cafeo-pro-modal__form button.button svg,
.cafeo-pro-modal__form button.button path{stroke:#42240c !important;}

/* Téléphone dans le bloc « professionnels » (demande cliente 2026-08-24). */
.cafeo-pro__tel{color:#42240c;font-weight:600;text-decoration:none;border-bottom:1px solid rgba(66,36,12,.35);white-space:nowrap;}
.cafeo-pro__tel:hover{border-bottom-color:#42240c;}