/* ===========================================================
   pepi laboratory — habillage WooCommerce

   Ce fichier n'ajoute aucun composant : il habille ceux que WooCommerce
   produit (galerie, formulaire d'achat, panier, commande, compte client) avec
   la palette et les formes de style.css. C'est ce qui permet de garder le
   design sans réécrire le tunnel de vente.
   =========================================================== */

/* ---------- 1. Menus WordPress dans les panneaux ---------- */

.drawer-body ul,
.footer-cols ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drawer-body .nav-menu li {
  display: block;
}

.drawer-body .nav-menu .sub-menu {
  padding-left: 14px;
}

.drawer-body .nav-menu a {
  display: block;
  padding: 13px 24px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.drawer-body .nav-menu a:hover {
  background: var(--sage-50);
}

/* ---------- 2. Messages WooCommerce ---------- */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.wc-block-components-notice-banner {
  list-style: none;
  margin: 0 0 22px;
  padding: 16px 20px;
  border-radius: var(--radius);
  border-left: 4px solid var(--brand);
  background: var(--sage-100);
  color: var(--brand);
  font-size: 15px;
  font-weight: 600;
}

.woocommerce-error {
  border-left-color: var(--sale);
  background: #FDECEA;
  color: #8C2018;
}

.woocommerce-message a,
.woocommerce-info a,
.woocommerce-error a {
  text-decoration: underline;
}

.woocommerce-message .button,
.woocommerce-info .button {
  float: right;
  font-weight: 700;
}

/* Message de confirmation du formulaire de contact, variante d'erreur. */
.form-err {
  background: #FDECEA;
  color: #8C2018;
}

/* Pot de miel : invisible pour les humains, présent pour les robots. */
.pepi-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Encarts réservés à l'administrateur connecté. */
.news-setup,
.pepi-setup {
  border: 1.5px dashed var(--sage);
  background: var(--sage-50);
  color: var(--ink-soft);
  text-align: left;
}

.news-setup code,
.pepi-setup code {
  background: #fff;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 13.5px;
}

/* ---------- 3. Catalogue ---------- */

.woocommerce-wrap {
  padding-bottom: 20px;
}

ul.products {
  list-style: none;
  margin: 0;
  padding: 0;
}

.grid-produits .card {
  height: 100%;
}

/* La grille de produits associés est rendue par WooCommerce. */
.related.products > h2,
.up-sells > h2 {
  display: none;
}

.related.products ul.products,
.up-sells ul.products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

@media (min-width: 700px) {
  .related.products ul.products,
  .up-sells ul.products {
    grid-template-columns: repeat(4, 1fr);
  }
}

.woocommerce-ordering {
  margin: 0;
}

.woocommerce-ordering select {
  appearance: none;
  border: 0;
  background: transparent;
  padding-right: 22px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}

.woocommerce-pagination ul {
  display: flex;
  justify-content: center;
  gap: 8px;
  list-style: none;
  margin: 40px 0 10px;
  padding: 0;
}

.woocommerce-pagination a,
.woocommerce-pagination span {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font-weight: 700;
  color: var(--ink);
}

.woocommerce-pagination .current {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

.woocommerce-pagination a:hover {
  border-color: var(--sage);
  background: var(--sage-50);
}

/* Widgets de filtres déposés dans le panneau « Filtrer ». */
.drawer-body .filter-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.drawer-body .filter-group li {
  padding: 6px 0;
  font-size: 15px;
}

.drawer-form {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ---------- 4. Fiche produit ---------- */

.pdp .pdp-layout {
  align-items: start;
}

/* Galerie native : mêmes formes que la galerie d'origine. */
.woocommerce-product-gallery {
  position: relative;
}

.woocommerce-product-gallery__wrapper {
  margin: 0;
}

.woocommerce-product-gallery__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--card-img);
}

.woocommerce-product-gallery__image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.woocommerce-product-gallery__trigger {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--shadow);
  font-size: 17px;
  color: var(--brand);
}

.woocommerce-product-gallery .flex-control-thumbs {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  list-style: none;
  margin: 12px 0 0;
  padding: 0 0 6px;
  scrollbar-width: thin;
}

.woocommerce-product-gallery .flex-control-thumbs li {
  flex: 0 0 auto;
}

.woocommerce-product-gallery .flex-control-thumbs img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-img);
  cursor: pointer;
  opacity: 1;
}

.woocommerce-product-gallery .flex-control-thumbs img.flex-active {
  border-color: var(--brand);
}

/* Titre, prix et stock rendus par WooCommerce. */
.pdp-info .product_title {
  font-size: clamp(28px, 4.4vw, 42px);
  margin-bottom: 16px;
}

.pdp-info > .price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  font-size: 27px;
  font-weight: 800;
  color: var(--brand);
}

.pdp-info > .price del {
  font-size: 20px;
  font-weight: 700;
  color: var(--muted);
  opacity: 1;
}

.pdp-info > .price ins {
  text-decoration: none;
  color: var(--sale);
}

.pdp-info .woocommerce-product-details__short-description {
  margin-bottom: 22px;
  color: var(--ink-soft);
}

.pdp-info .stock,
.pdp-info p.stock {
  display: inline-flex;
  margin: 0 0 22px;
}

.pdp-info p.stock.out-of-stock {
  color: var(--muted);
}

/* Le sélecteur natif est masqué : les boutons de dosage le pilotent.
   Il reste dans le DOM, sinon WooCommerce ne sait plus quelle variante
   est choisie. Sans JavaScript, on réaffiche le sélecteur. */
.variations {
  width: 100%;
  border-collapse: collapse;
}

.variations th.label {
  display: none;
}

.variations td {
  padding: 0;
}

.variations_form.pepi-variants-ready select {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.variations select {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 15px;
  font-size: 15.5px;
  background: #fff;
  margin-bottom: 18px;
}

.reset_variations {
  display: inline-block;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: underline;
}

.woocommerce-variation-price {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
  font-size: 24px;
  font-weight: 800;
  color: var(--brand);
}

.woocommerce-variation-availability p {
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ok);
}

/* Barre d'achat : la disposition de .buybar, appliquée au formulaire natif. */
form.cart,
.woocommerce-variation-add-to-cart {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 26px;
  flex-wrap: wrap;
}

form.variations_form.cart {
  display: block;
}

form.cart .quantity,
.woocommerce-variation-add-to-cart .quantity {
  display: inline-flex;
}

form.cart .single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 200px;
  height: 52px;
  padding: 0 28px;
  border-radius: var(--radius);
  background: var(--brand);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  transition: background .18s;
}

form.cart .single_add_to_cart_button:hover {
  background: var(--brand-700);
}

form.cart .single_add_to_cart_button.disabled,
form.cart .single_add_to_cart_button:disabled {
  background: var(--muted);
  cursor: not-allowed;
}

form.cart .single_add_to_cart_button.loading {
  opacity: .75;
}

.qty-solo {
  display: grid;
  place-items: center;
  width: 48px;
  height: 52px;
  font-weight: 700;
}

/* Avis produit : masqués tant qu'ils ne sont pas activés dans le design. */
.pdp .woocommerce-tabs,
.pdp .woocommerce-product-rating {
  display: none;
}

/* ---------- 5. Panier ---------- */

.wc-page {
  padding-bottom: 60px;
}

.cart-layout .cart-row .quantity {
  display: inline-flex;
}

.cart-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 24px;
}

.cart-actions .btn {
  padding: 12px 24px;
  font-size: 15px;
}

.coupon {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.coupon input {
  width: 190px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 15px;
  font-size: 15px;
  background: #fff;
  outline: none;
}

.coupon input:focus {
  border-color: var(--brand);
}

.summary-cta .checkout-button,
.summary-cta .btn {
  display: flex;
  width: 100%;
  margin-top: 22px;
  justify-content: center;
  align-items: center;
  background: var(--brand);
  color: #fff;
  border-radius: 999px;
  padding: 16px 34px;
  font-size: 16px;
  font-weight: 600;
}

.summary-cta .checkout-button:hover {
  background: var(--brand-700);
}

.summary .shipping-calculator-button {
  text-decoration: underline;
  color: var(--brand);
}

.summary .woocommerce-shipping-methods {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  font-size: 14.5px;
}

.summary .woocommerce-shipping-methods li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.summary .woocommerce-shipping-destination {
  font-size: 13px;
  color: var(--muted);
}

.summary td,
.summary th {
  text-align: left;
}

.cross-sells {
  margin-top: 50px;
}

/* ---------- 6. Commande ---------- */

.woocommerce-checkout .wc-page {
  max-width: 1100px;
  margin: 0 auto;
}

.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields h3 {
  font-size: 21px;
  margin: 0 0 20px;
}

#customer_details {
  display: grid;
  gap: 34px;
  margin-bottom: 40px;
}

@media (min-width: 900px) {
  #customer_details {
    grid-template-columns: 1.2fr 1fr;
  }
}

.woocommerce-checkout .form-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

/* WooCommerce place ses champs en paires via form-row-first / form-row-last. */
@media (min-width: 600px) {
  .woocommerce-billing-fields__field-wrapper,
  .woocommerce-shipping-fields__field-wrapper,
  .woocommerce-address-fields__field-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
  }

  .woocommerce-checkout .form-row-wide,
  .woocommerce-checkout .form-row.notes,
  .woocommerce-address-fields .form-row-wide {
    grid-column: 1 / -1;
  }
}

.woocommerce-input-wrapper {
  display: block;
  width: 100%;
}

.woocommerce-checkout .form-row label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 7px;
  color: var(--ink);
}

.woocommerce-checkout .form-row .required {
  color: var(--sale);
  text-decoration: none;
}

.woocommerce-checkout .input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea,
.select2-container .select2-selection--single {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 15px;
  font-size: 15.5px;
  background: #fff;
  outline: none;
  transition: border-color .15s;
}

.woocommerce-checkout .input-text:focus,
.woocommerce-checkout select:focus,
.woocommerce-checkout textarea:focus {
  border-color: var(--brand);
}

.woocommerce-checkout textarea {
  min-height: 110px;
  resize: vertical;
}

/* Select2 est chargé par WooCommerce sur les champs pays et région. */
.select2-container .select2-selection--single {
  height: auto;
  display: flex;
  align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 1.5;
  color: var(--ink);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: 10px;
}

.woocommerce-form__label-for-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

.woocommerce-form__label-for-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}

#order_review_heading {
  margin-top: 10px;
}

.woocommerce-checkout-review-order {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 26px;
}

.woocommerce-checkout-review-order-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 18px;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
  padding: 11px 0;
  text-align: left;
  font-size: 15px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}

.woocommerce-checkout-review-order-table td:last-child,
.woocommerce-checkout-review-order-table th:last-child {
  text-align: right;
}

.woocommerce-checkout-review-order-table tfoot .order-total th,
.woocommerce-checkout-review-order-table tfoot .order-total td {
  border-bottom: 0;
  padding-top: 16px;
  font-size: 19px;
  font-weight: 800;
  color: var(--brand);
}

/* Passerelles de paiement : Stripe, PayPal et consorts s'insèrent ici.
   Aucun style ne masque leurs champs, sans quoi le paiement devient
   inutilisable. */
.woocommerce-checkout #payment {
  background: transparent;
}

.woocommerce-checkout #payment ul.payment_methods {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  border-bottom: 1px solid var(--line);
}

.woocommerce-checkout #payment ul.payment_methods li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.woocommerce-checkout #payment ul.payment_methods li:last-child {
  border-bottom: 0;
}

.woocommerce-checkout #payment ul.payment_methods label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  cursor: pointer;
}

.woocommerce-checkout #payment ul.payment_methods input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}

.woocommerce-checkout #payment .payment_box {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: var(--sage-50);
  font-size: 14.5px;
  color: var(--ink-soft);
}

.woocommerce-checkout #payment .payment_box p:last-child {
  margin-bottom: 0;
}

.woocommerce-checkout #place_order {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
  padding: 17px 34px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  transition: background .18s;
}

.woocommerce-checkout #place_order:hover {
  background: var(--brand-700);
}

.woocommerce-privacy-policy-text {
  font-size: 13.5px;
  color: var(--muted);
}

.woocommerce-terms-and-conditions-wrapper {
  margin: 16px 0;
}

/* Confirmation de commande. */
.woocommerce-order {
  padding-bottom: 40px;
}

.woocommerce-thankyou-order-details {
  display: flex;
  flex-wrap: wrap;
  gap: 26px;
  list-style: none;
  margin: 26px 0;
  padding: 22px 26px;
  border-radius: var(--radius);
  background: var(--sage-50);
}

.woocommerce-thankyou-order-details li {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}

.woocommerce-thankyou-order-details li strong {
  display: block;
  margin-top: 5px;
  font-size: 17px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--brand);
}

.woocommerce-table--order-details,
.woocommerce-table--order-downloads {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 30px;
}

.woocommerce-table--order-details th,
.woocommerce-table--order-details td {
  padding: 13px 0;
  text-align: left;
  font-size: 15px;
  border-bottom: 1px solid var(--line);
}

.woocommerce-table--order-details td:last-child,
.woocommerce-table--order-details th:last-child {
  text-align: right;
}

.woocommerce-customer-details address {
  font-style: normal;
  padding: 20px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  line-height: 1.8;
}

/* ---------- 7. Compte client ---------- */

.woocommerce-account .wc-page {
  display: grid;
  gap: 34px;
  align-items: start;
}

@media (min-width: 860px) {
  .woocommerce-account .woocommerce {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 40px;
    align-items: start;
  }
}

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

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

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

.woocommerce-MyAccount-navigation a {
  display: block;
  padding: 14px 18px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.woocommerce-MyAccount-navigation a:hover {
  background: var(--sage-50);
}

.woocommerce-MyAccount-navigation .is-active a {
  background: var(--brand);
  color: #fff;
}

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

.woocommerce-MyAccount-content th,
.woocommerce-MyAccount-content td {
  padding: 13px 10px 13px 0;
  text-align: left;
  font-size: 15px;
  border-bottom: 1px solid var(--line);
}

.woocommerce-MyAccount-content .button,
.woocommerce-form-login .button,
.woocommerce-form-register .button,
.woocommerce-EditAccountForm .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 26px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}

.woocommerce-form-login,
.woocommerce-form-register {
  max-width: 480px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  background: var(--surface);
}

.woocommerce-form-login .form-row,
.woocommerce-form-register .form-row,
.woocommerce-EditAccountForm .form-row {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

.woocommerce-form-login label,
.woocommerce-form-register label,
.woocommerce-EditAccountForm label {
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 7px;
}

.woocommerce-form-login input,
.woocommerce-form-register input,
.woocommerce-EditAccountForm input {
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 15px;
  font-size: 15.5px;
  outline: none;
  background: #fff;
}

.woocommerce-form-login input:focus,
.woocommerce-form-register input:focus {
  border-color: var(--brand);
}

/* ---------- 8. Blocs Panier / Commande (repli) ---------- */

/* Si les pages utilisent les blocs plutôt que les shortcodes, le thème n'a
   pas la main sur leur structure : on aligne au moins couleurs et boutons.
   Le bandeau d'avertissement de l'admin explique comment revenir au design
   complet. */
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  border-radius: 999px !important;
  background: var(--brand) !important;
  color: #fff !important;
  font-family: var(--font) !important;
  font-weight: 600 !important;
}

.wc-block-components-title,
.wp-block-woocommerce-cart-order-summary-block {
  font-family: var(--font) !important;
  color: var(--ink);
}

/* ---------- 9. FAQ : bloc « Détails » natif ---------- */

.article .wp-block-details,
.prose .wp-block-details {
  border-bottom: 1px solid var(--line);
  padding: 0;
}

.article .wp-block-details summary,
.prose .wp-block-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--brand);
  cursor: pointer;
  list-style: none;
}

.article .wp-block-details summary::-webkit-details-marker,
.prose .wp-block-details summary::-webkit-details-marker {
  display: none;
}

.article .wp-block-details summary::after,
.prose .wp-block-details summary::after {
  content: "+";
  font-size: 22px;
  font-weight: 400;
  color: var(--ink-soft);
}

.article .wp-block-details[open] summary::after,
.prose .wp-block-details[open] summary::after {
  content: "\2212";
}

.article .wp-block-details > *:not(summary),
.prose .wp-block-details > *:not(summary) {
  padding-bottom: 20px;
  font-size: 16px;
  color: var(--ink-soft);
}

/* Tableaux de l'éditeur WordPress : mêmes formes que les tableaux
   du site d'origine, qui utilisaient .table-scroll. */

.article .wp-block-table,
.prose .wp-block-table {
  overflow-x: auto;
  margin: 22px 0 30px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.article .wp-block-table table,
.prose .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  min-width: 560px;
}

.article .wp-block-table th,
.article .wp-block-table td,
.prose .wp-block-table th,
.prose .wp-block-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}

.article .wp-block-table th,
.prose .wp-block-table th {
  background: var(--surface);
  font-weight: 800;
  font-size: 14.5px;
  color: var(--ink);
}

.article .wp-block-table td,
.prose .wp-block-table td {
  color: var(--ink-soft);
}

.article .wp-block-table tr:last-child td,
.prose .wp-block-table tr:last-child td {
  border-bottom: 0;
}

.article .wp-block-table a,
.prose .wp-block-table a {
  color: var(--brand);
  font-weight: 700;
}

.article .wp-block-table a:hover,
.prose .wp-block-table a:hover {
  text-decoration: underline;
}

/* Listes de l'éditeur dans les pages éditoriales. */
.article .wp-block-list,
.prose .wp-block-list {
  padding-left: 22px;
  margin: 0 0 18px;
}

/* ---------- 10. Formulaires SliceWP ---------- */

.slicewp-form .slicewp-form-field,
.slicewp .slicewp-form-field {
  margin-bottom: 16px;
}

.slicewp-form label,
.slicewp label {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  margin-bottom: 7px;
  color: var(--ink);
}

.slicewp-form input[type="text"],
.slicewp-form input[type="email"],
.slicewp-form input[type="password"],
.slicewp-form input[type="url"],
.slicewp-form select,
.slicewp-form textarea,
.slicewp input[type="text"],
.slicewp input[type="email"],
.slicewp input[type="password"],
.slicewp select,
.slicewp textarea {
  width: 100%;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 13px 15px;
  font-size: 15.5px;
  font-family: var(--font);
  background: #fff;
  outline: none;
  transition: border-color .15s;
}

.slicewp-form input:focus,
.slicewp-form select:focus,
.slicewp-form textarea:focus {
  border-color: var(--brand);
}

.slicewp-form input[type="submit"],
.slicewp-form button[type="submit"],
.slicewp input[type="submit"],
.slicewp button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  padding: 16px 34px;
  border: 0;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background .18s;
}

.slicewp-form input[type="submit"]:hover,
.slicewp button[type="submit"]:hover {
  background: var(--brand-700);
}

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

.slicewp table th,
.slicewp table td {
  padding: 13px 10px 13px 0;
  text-align: left;
  font-size: 15px;
  border-bottom: 1px solid var(--line);
}

/* ---------- 11. Divers ---------- */

.drawer.is-loading .drawer-body {
  opacity: .55;
  pointer-events: none;
  transition: opacity .15s;
}

.footer-widgets {
  padding: 20px 0 10px;
}

.news-embed {
  margin: 0 auto 14px;
  max-width: 560px;
}

.page-links {
  margin-top: 24px;
  font-weight: 700;
}

.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

.logo-custom {
  max-height: 40px;
  width: auto;
}

/* Le mode « chargement » des boutons WooCommerce. */
.woocommerce .blockUI.blockOverlay {
  background: rgba(255, 255, 255, .6) !important;
}

/* ---------- 12. Neutralisation des styles par défaut de WooCommerce ----------

   WooCommerce livre sa propre feuille de style et vise des classes qui
   cohabitent, sur les mêmes éléments, avec celles du thème :

   - `div.summary { float: right; width: 48% }` s'applique à `.pdp-info`, qui
     porte aussi la classe `summary`. Dans une colonne de grille de 570 px, le
     bloc retombait à 274 px : titre coupé sur deux lignes et large vide au
     milieu de la fiche.
   - `.button.alt { background-color: #7f54b3 }` repeignait en violet le bouton
     « Ajouter au panier », le panier et la commande.

   Le `!important` n'est pas un raccourci : `.woocommerce div.product div.summary`
   compte trois classes et deux éléments, contre trois classes pour nos propres
   sélecteurs — WooCommerce l'emporte donc sur la spécificité seule. Il est posé
   uniquement sur les déclarations en conflit. */

.pdp .pdp-layout > .pdp-media,
.pdp .pdp-layout > .pdp-info {
  width: 100% !important;
  float: none !important;
  clear: none !important;
  margin: 0 !important;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce button.single_add_to_cart_button,
.woocommerce #respond input#submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 16px 34px;
  border: 0;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  background-color: var(--brand) !important;
  color: #fff !important;
  transition: background-color .18s, transform .18s;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce button.single_add_to_cart_button:hover,
.woocommerce #respond input#submit:hover {
  background-color: var(--brand-700) !important;
}

.woocommerce a.button:active,
.woocommerce button.button:active,
.woocommerce button.single_add_to_cart_button:active {
  transform: translateY(1px);
}

.woocommerce a.button.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
  background-color: var(--muted) !important;
  cursor: not-allowed;
}