/**
 * Styles WooCommerce — Thème K-Style DJ
 *
 * Feuille unique regroupant toutes les pages de la boutique. Les couleurs
 * proviennent des variables définies dans style.css : modifier la charte du
 * thème met la boutique à jour automatiquement.
 *
 * Sommaire
 *   0.  Jetons de la boutique ( dont surcharge des jetons --wc-* )
 *   1.  Conteneurs de page
 *   2.  Panier de la barre de navigation
 *   3.  Boutons
 *   4.  Bandeau de la boutique
 *   5.  Grille de produits
 *   6.  Fiche produit
 *   7.  Panier
 *   8.  Commande
 *   8b. Panier et Commande ( blocs WooCommerce )
 *   9.  Mon compte
 *   10. Messages
 *   11. Pagination
 *   12. Adaptation aux petits écrans
 *
 * @package K-Style DJ Theme
 * @since 1.1.0
 */

/* ==========================================================================
   0. Jetons de la boutique
   ========================================================================== */

:root {
    /* Neutres légèrement réchauffés vers le corail de la marque. Un gris pur
       jurerait à côté de cet accent ; ce décalage se lit comme un choix. */
    --woo-page: #faf8f7;
    --woo-surface: #ffffff;
    --woo-surface-muted: #f6f4f3;
    --woo-hairline: #eae5e3;

    /* Échelle de rayons unique. Les pages de la boutique arboraient jusqu'ici
       quatre arrondis différents ( 8, 10, 14, 22 px ) : rien ne semblait
       appartenir au même ensemble. */
    --woo-radius-panel: 16px;
    --woo-radius-control: 12px;
    --woo-radius-pill: 999px;

    /* Couleurs de statut, volontairement désaturées : elles doivent informer
       sans jamais rivaliser avec le dégradé corail, réservé aux actions. */
    --woo-info: #4a5568;
    --woo-success: #2f7d4f;
    --woo-error: #c0392b;

    /* Jetons de WooCommerce lui-même. Les surcharger ici habille d'un seul
       geste les blocs Panier et Commande, qui s'en servent pour leurs liens,
       leurs champs et leurs cartes. Le violet #720eec livré par défaut est ce
       qui rendait les noms de produit violets dans le panier. */
    --wc-primary: var(--primary-gradient-start);
    --wc-primary-text: #ffffff;
    --wc-form-border-color: #d8d2d0;
    --wc-form-border-radius: var(--woo-radius-control);
    --wc-card-border-radius: var(--woo-radius-panel);
}

/* ==========================================================================
   0 bis. Neutralisation du clearfix de WooCommerce
   ========================================================================== */

/**
 * WooCommerce pose un clearfix ( ::before / ::after en display:table ) sur une
 * quinzaine de conteneurs, hérité de son ancienne mise en page en float.
 *
 * Dans une grille ou une flexbox, un pseudo-élément n'est plus invisible : il
 * devient un enfant à part entière et occupe une cellule. Sur la boutique,
 * ::before s'appropriait la première case et décalait toute la grille d'un
 * cran. On les désactive donc sur les conteneurs que ce thème dispose en grid
 * ou en flex — et sur ceux-là uniquement, pour ne pas casser le clearfix là où
 * WooCommerce s'en sert encore.
 */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after,
.woocommerce div.product form.cart::before,
.woocommerce div.product form.cart::after,
.woocommerce div.product .woocommerce-tabs ul.tabs::before,
.woocommerce div.product .woocommerce-tabs ul.tabs::after,
.woocommerce nav.woocommerce-pagination ul.page-numbers::before,
.woocommerce nav.woocommerce-pagination ul.page-numbers::after,
.woocommerce-account .woocommerce::before,
.woocommerce-account .woocommerce::after,
.woocommerce .col2-set::before,
.woocommerce .col2-set::after,
.woocommerce .addresses .title::before,
.woocommerce .addresses .title::after,
.woocommerce ul.order_details::before,
.woocommerce ul.order_details::after,
.woocommerce-error::before,
.woocommerce-error::after,
.woocommerce-info::before,
.woocommerce-info::after,
.woocommerce-message::before,
.woocommerce-message::after {
    display: none;
}

/* ==========================================================================
   1. Conteneurs de page
   ========================================================================== */

/* Fond légèrement teinté : les fiches produit blanches s'en détachent. */
.woocommerce-page .site-main.woocommerce-page {
    background: var(--woo-page);
}

/* Restreint au contenu principal : le pied de page utilise lui aussi la classe
   « container » ( <div class="footer-inner container clr"> ). Sans le
   .site-main, le pied de page héritait du padding vertical ci-dessous et
   devenait 100 px plus haut sur la boutique que sur le reste du site. */
.woocommerce-page .site-main .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 50px 60px;
}

/* ==========================================================================
   2. Panier de la barre de navigation
   ========================================================================== */

.kstyle-cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44 px : taille de cible tactile recommandée. */
    width: 44px;
    height: 44px;
    color: var(--text-light);
    text-decoration: none;
    border-radius: 50%;
    transition: color 0.3s ease, background 0.3s ease;
}

.kstyle-cart-link:hover,
.kstyle-cart-link:focus-visible {
    color: var(--primary-gradient-end);
    background: rgba(255, 255, 255, 0.1);
}

.kstyle-cart-icon {
    width: 24px;
    height: 24px;
}

.kstyle-cart-count {
    position: absolute;
    top: 1px;
    right: 1px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    background: linear-gradient(90deg, var(--primary-gradient-start), var(--primary-gradient-end));
    color: #fff;
    border-radius: var(--woo-radius-control);
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 19px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

/* Panier vide : on masque la pastille, l'icône suffit. */
.kstyle-cart-link.is-empty .kstyle-cart-count {
    display: none;
}

/* ==========================================================================
   3. Boutons
   ========================================================================== */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
    background: linear-gradient(90deg, var(--primary-gradient-start), var(--primary-gradient-end));
    color: #fff;
    border: none;
    border-radius: var(--woo-radius-pill);
    padding: 12px 28px;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
    background: linear-gradient(90deg, var(--primary-gradient-end), var(--primary-gradient-start));
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255, 107, 107, 0.28);
}

/* Boutons secondaires (« Mettre à jour le panier », « Appliquer le code »). */
.woocommerce a.button.wc-backward,
.woocommerce button.button[name="update_cart"],
.woocommerce button.button[name="apply_coupon"] {
    background: transparent;
    color: var(--text-dark);
    border: 2px solid #ddd;
}

.woocommerce a.button.wc-backward:hover,
.woocommerce button.button[name="update_cart"]:hover,
.woocommerce button.button[name="apply_coupon"]:hover {
    background: transparent;
    color: var(--primary-gradient-start);
    border-color: var(--primary-gradient-start);
    box-shadow: none;
}

/* Bouton désactivé : WooCommerce le grise tant que le panier n'a pas changé. */
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.woocommerce .star-rating span:before {
    color: var(--primary-gradient-end);
}

/* ==========================================================================
   4. Bandeau de la boutique
   ========================================================================== */

.shop-header-wrapper {
    width: 100%;
    background: var(--woo-page);
    /* Le bandeau se place au-dessus de <main>, donc sous la navbar fixe :
       ce décalage l'empêche de passer dessous. */
    padding: calc(80px + 26px) 0 26px;
}

/* Le bandeau porte déjà le décalage de la navbar. */
.shop-header-wrapper + .site-main.woocommerce-page {
    padding-top: 0;
}

.shop-header {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 50px;
}

/* Fil d'Ariane au-dessus de la carte, sur le fond clair de la page.
   La couleur est posée ici plutôt que sur « .woocommerce .woocommerce-breadcrumb » :
   cette dernière dépend d'une classe portée par le <body>, alors que le bandeau
   est un contexte que le thème maîtrise entièrement. */
.shop-header .woocommerce-breadcrumb {
    margin: 0 0 14px;
    padding: 0;
    color: var(--text-gray);
    font-size: 0.92rem;
}

.shop-header .woocommerce-breadcrumb a {
    color: var(--primary-gradient-start);
    text-decoration: none;
}

.shop-header .woocommerce-breadcrumb a:hover {
    text-decoration: underline;
}

/**
 * Composition du bandeau : où suis-je ( fil d'Ariane ), qu'est-ce que je
 * regarde ( titre et nombre de résultats ), qu'est-ce que je peux faire
 * ( tri, compte ). Le titre était auparavant centré entre deux blocs de
 * tailles inégales, ce qui ouvrait un grand vide au milieu de la barre.
 */
.shop-header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 30px;
    padding: 24px 30px;
    background: linear-gradient(100deg, #202224 0%, #33363a 100%);
    border-radius: var(--woo-radius-panel);
    color: #fff;
}

.shop-header-heading {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.shop-header .shop-title {
    margin: 0;
    color: #fff;
    font-size: 1.9rem;
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

/* Le nombre de résultats précise le titre : il se lit sous lui, en retrait,
   plutôt que comme une étiquette autonome. */
.shop-header .woocommerce-result-count {
    margin: 0;
    padding: 0;
    background: none;
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.9rem;
    font-weight: 500;
}

.shop-header-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.shop-header .woocommerce-ordering {
    margin: 0;
}

.shop-header .woocommerce-ordering select {
    padding: 11px 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--woo-radius-control);
    color: #fff;
    font-size: 0.94rem;
    font-weight: 600;
    cursor: pointer;
}

/* Les options d'un <select> sombre restent peintes par le système : sans
   cela, elles s'affichent en blanc sur blanc à l'ouverture de la liste. */
.shop-header .woocommerce-ordering select option {
    background: #fff;
    color: var(--text-dark);
}

.shop-header .woocommerce-ordering select:focus-visible {
    outline: 2px solid var(--primary-gradient-start);
    outline-offset: 2px;
}

/* Accès au compte : un contrôle, au même rang que le tri. Le carré orange
   plein rivalisait avec les boutons « Ajouter au panier » de la grille, alors
   qu'il ne mène qu'à une page de gestion. */
.shop-account-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 18px 10px 14px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--woo-radius-control);
    color: #fff;
    font-size: 0.94rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.shop-account-link svg {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
}

.shop-account-link:hover,
.shop-account-link:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.42);
    color: #fff;
}

/* Description de catégorie affichée par WooCommerce sous le titre. */
.woocommerce-products-header {
    margin-bottom: 10px;
}

.woocommerce-products-header .term-description {
    color: var(--text-gray);
    font-size: 1.05rem;
    line-height: 1.7;
}

/* ==========================================================================
   5. Grille de produits
   ========================================================================== */

.woocommerce ul.products {
    display: grid;
    /* min() empêche tout débordement quand la colonne est plus étroite que 280 px. */
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 35px 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Neutralise la grille flottante par défaut de WooCommerce. */
.woocommerce ul.products li.product {
    width: auto;
    margin: 0;
    float: none;
    min-width: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--woo-surface);
    border-radius: var(--woo-radius-panel);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
    padding-bottom: 25px;
    transition: box-shadow 0.3s ease, transform 0.2s ease;
}

/**
 * WooCommerce impose encore une largeur en pourcentage selon le nombre de
 * colonnes ( .columns-3 → width: 30.75% ), héritée de sa mise en page en float.
 * Ces sélecteurs sont plus spécifiques que celui ci-dessus, et le pourcentage
 * s'appliquait alors à la cellule de grille et non au conteneur : les cartes
 * des produits similaires tombaient à une bande de ~90 px de large.
 * Spécificité alignée sur la sienne, déclarée après : la grille reprend la main.
 */
.woocommerce ul.products[class*="columns-"] li.product,
.woocommerce-page ul.products[class*="columns-"] li.product,
.woocommerce[class*="columns-"] ul.products li.product,
.woocommerce-page[class*="columns-"] ul.products li.product {
    width: auto;
    float: none;
    margin: 0;
    min-width: 0;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(255, 107, 107, 0.18);
}

.woocommerce ul.products li.product a img {
    width: 100%;
    height: 260px;
    margin: 0 0 15px;
    object-fit: cover;
    border-radius: var(--woo-radius-panel) var(--woo-radius-panel) 0 0;
    transition: transform 0.3s ease;
}

.woocommerce ul.products li.product:hover a img {
    transform: scale(1.04);
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
    margin: 0 20px 10px;
    padding: 0;
    color: var(--text-dark);
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.woocommerce ul.products li.product .price {
    display: block;
    margin: 0 20px 15px;
    color: var(--primary-gradient-start);
    font-size: 1.2rem;
    font-weight: 700;
}

.woocommerce ul.products li.product .price del {
    margin-right: 8px;
    color: var(--text-gray);
    font-size: 1rem;
    opacity: 0.7;
}

.woocommerce ul.products li.product .price ins {
    text-decoration: none;
}

/* Le bouton reste collé en bas quelle que soit la longueur du titre. */
.woocommerce ul.products li.product .button {
    margin: auto 20px 0;
}

.woocommerce ul.products li.product .star-rating {
    margin: 0 auto 12px;
}

/* Pastille « Promo ». */
.woocommerce span.onsale {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    min-height: auto;
    min-width: auto;
    margin: 0;
    padding: 6px 14px;
    background: var(--primary-accent);
    border-radius: var(--woo-radius-control);
    color: var(--bg-dark);
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
}

/* ==========================================================================
   6. Fiche produit
   ========================================================================== */

.woocommerce div.product {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 50px;
    width: 100%;
    margin: 0 0 50px;
    padding: 45px;
    background: var(--woo-surface);
    border-radius: var(--woo-radius-panel);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.woocommerce div.product .woocommerce-product-gallery {
    flex: 1 1 380px;
    min-width: 0;
    max-width: 100%;
    margin: 0;
}

.woocommerce div.product .woocommerce-product-gallery img {
    border-radius: var(--woo-radius-panel);
}

.woocommerce div.product .summary {
    flex: 1 1 380px;
    min-width: 0;
    margin: 0;
}

.woocommerce div.product .product_title {
    margin: 0 0 20px;
    color: var(--text-dark);
    font-size: 2.3rem;
    font-weight: 900;
    line-height: 1.2;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
    margin-bottom: 25px;
    color: var(--primary-gradient-start);
    font-size: 1.8rem;
    font-weight: 800;
}

.woocommerce div.product p.price del {
    margin-right: 10px;
    color: var(--text-gray);
    font-size: 1.2rem;
    opacity: 0.7;
}

.woocommerce div.product p.price ins {
    text-decoration: none;
}

.woocommerce div.product .woocommerce-product-details__short-description {
    margin-bottom: 28px;
    color: var(--text-gray);
    font-size: 1.05rem;
    line-height: 1.8;
}

/* Sélecteur de quantité. */
.woocommerce div.product form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-bottom: 28px;
}

.woocommerce div.product form.cart .quantity {
    margin: 0;
}

.woocommerce div.product form.cart .quantity input.qty {
    width: 80px;
    padding: 13px 10px;
    border: 2px solid #ddd;
    border-radius: var(--woo-radius-control);
    font-size: 1rem;
    text-align: center;
    transition: border-color 0.3s ease;
}

.woocommerce div.product form.cart .quantity input.qty:focus {
    outline: none;
    border-color: var(--primary-gradient-start);
}

.woocommerce div.product form.cart .single_add_to_cart_button {
    padding: 15px 40px;
    font-size: 1.05rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Déclinaisons (taille, couleur…). */
.woocommerce div.product form.cart .variations {
    width: 100%;
    margin-bottom: 10px;
}

.woocommerce div.product form.cart .variations th,
.woocommerce div.product form.cart .variations td {
    padding: 8px 0;
    text-align: left;
    vertical-align: middle;
}

.woocommerce div.product form.cart .variations label {
    color: var(--text-dark);
    font-weight: 700;
}

.woocommerce div.product form.cart .variations select {
    min-width: 180px;
    padding: 11px 14px;
    border: 2px solid #ddd;
    border-radius: var(--woo-radius-control);
    background: #fff;
    font-size: 0.98rem;
    cursor: pointer;
}

/* Métadonnées (référence, catégories, étiquettes). */
.woocommerce div.product .product_meta {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 2px solid #eee;
    color: var(--text-gray);
    font-size: 0.95rem;
}

.woocommerce div.product .product_meta > span {
    display: block;
    margin-bottom: 8px;
}

.woocommerce div.product .product_meta a {
    color: var(--primary-gradient-start);
    text-decoration: none;
}

.woocommerce div.product .product_meta a:hover {
    text-decoration: underline;
}

/* Onglets (description, avis…). */
.woocommerce div.product .woocommerce-tabs {
    flex: 1 1 100%;
    margin-top: 20px;
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 25px;
    padding: 0;
    border-bottom: 2px solid #eee;
    list-style: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
    margin: 0;
    padding: 0;
    border: none;
    border-radius: var(--woo-radius-control) var(--woo-radius-control) 0 0;
    background: transparent;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 14px 26px;
    color: var(--text-gray);
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--woo-radius-control) var(--woo-radius-control) 0 0;
    transition: background 0.3s ease, color 0.3s ease;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
    color: var(--text-dark);
}

/* Onglet courant : un soulignement corail. Le pavé en dégradé plein disputait
   l'attention au bouton d'ajout au panier, seule vraie action de la page. */
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: var(--text-dark);
    box-shadow: inset 0 -3px 0 var(--primary-gradient-start);
}

.woocommerce div.product .woocommerce-tabs .panel {
    margin: 0;
    padding: 30px;
    background: var(--woo-surface-muted);
    border-radius: var(--woo-radius-panel);
    color: var(--text-gray);
    line-height: 1.8;
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
    margin-top: 0;
    color: var(--text-dark);
}

/**
 * Produits liés et ventes croisées.
 *
 * Le thème applique « padding: 60px 50px; text-align: center » à tout <section>
 * du contenu principal, et WooCommerce enveloppe justement ces blocs dans un
 * <section> : ils héritaient d'un vide de 60 px et d'un titre centré au-dessus
 * d'une grille alignée à gauche. Sélecteurs volontairement plus spécifiques.
 */
.site-main section.related,
.site-main section.upsells,
.site-main section.cross-sells {
    padding: 0;
    text-align: left;
}

.woocommerce .related,
.woocommerce .upsells.products {
    flex: 1 1 100%;
    margin-top: 20px;
}

.woocommerce .related > h2,
.woocommerce .upsells.products > h2,
.woocommerce .cross-sells > h2 {
    margin-bottom: 28px;
    color: var(--text-dark);
    font-size: 1.7rem;
    font-weight: 800;
}

/* ==========================================================================
   7. Panier
   ========================================================================== */

.woocommerce table.shop_table {
    width: 100%;
    margin-bottom: 30px;
    border: none;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.woocommerce table.shop_table th {
    padding: 16px 14px;
    background: var(--bg-dark);
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: left;
}

.woocommerce table.shop_table th:first-child {
    border-radius: var(--woo-radius-control) 0 0 var(--woo-radius-control);
}

.woocommerce table.shop_table th:last-child {
    border-radius: 0 10px 10px 0;
}

.woocommerce table.shop_table td {
    padding: 18px 14px;
    background: #fff;
    border: none;
    vertical-align: middle;
}

.woocommerce table.shop_table tbody tr {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.woocommerce table.shop_table td.product-thumbnail img {
    width: 80px;
    height: auto;
    border-radius: var(--woo-radius-control);
}

.woocommerce table.shop_table td.product-name a {
    color: var(--text-dark);
    font-weight: 600;
    text-decoration: none;
}

.woocommerce table.shop_table td.product-name a:hover {
    color: var(--primary-gradient-start);
}

.woocommerce table.shop_table td.product-price,
.woocommerce table.shop_table td.product-subtotal {
    color: var(--primary-gradient-start);
    font-weight: 700;
}

/* Croix de suppression d'une ligne. */
.woocommerce table.shop_table td.product-remove a.remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: #f0f0f0;
    color: var(--text-gray) !important;
    border-radius: 50%;
    font-size: 1.1rem;
    line-height: 1;
    text-decoration: none;
}

.woocommerce table.shop_table td.product-remove a.remove:hover {
    background: var(--primary-gradient-start);
    color: #fff !important;
}

/* Code promo. */
.woocommerce table.shop_table td.actions .coupon {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.woocommerce table.shop_table td.actions .coupon input.input-text {
    width: auto;
    min-width: 180px;
    padding: 12px 15px;
    border: 2px solid #ddd;
    border-radius: var(--woo-radius-control);
    font-size: 0.98rem;
}

/* Totaux. */
.woocommerce .cart-collaterals .cart_totals {
    width: 100%;
    max-width: 480px;
    margin-left: auto;
    padding: 30px;
    background: var(--bg-dark-secondary);
    border-radius: var(--woo-radius-panel);
    color: var(--text-light);
}

.woocommerce .cart-collaterals .cart_totals h2 {
    margin: 0 0 20px;
    color: #fff;
    font-size: 1.6rem;
}

.woocommerce .cart-collaterals .cart_totals table {
    width: 100%;
    border-collapse: collapse;
}

.woocommerce .cart-collaterals .cart_totals table th,
.woocommerce .cart-collaterals .cart_totals table td {
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    background: transparent;
    color: var(--text-light);
    text-align: left;
}

.woocommerce .cart-collaterals .cart_totals .order-total th,
.woocommerce .cart-collaterals .cart_totals .order-total td {
    border-bottom: none;
    font-size: 1.25rem;
    font-weight: 800;
}

.woocommerce .cart-collaterals .cart_totals .order-total .amount {
    color: var(--primary-gradient-end);
}

.woocommerce .wc-proceed-to-checkout {
    padding: 20px 0 0;
}

.woocommerce .wc-proceed-to-checkout a.checkout-button {
    display: block;
    width: 100%;
    padding: 17px 30px;
    font-size: 1.1rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ==========================================================================
   8. Commande
   ========================================================================== */

.woocommerce-checkout .woocommerce {
    padding: 40px;
    background: var(--bg-light);
    border-radius: var(--woo-radius-panel);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields > h3,
.woocommerce-checkout #order_review_heading {
    margin-bottom: 22px;
    padding-bottom: 14px;
    border-bottom: 3px solid var(--primary-gradient-start);
    color: var(--text-dark);
    font-size: 1.5rem;
    font-weight: 800;
}

.woocommerce form .form-row {
    margin-bottom: 18px;
    padding: 0;
}

.woocommerce form .form-row label {
    display: block;
    margin-bottom: 8px;
    color: var(--text-dark);
    font-weight: 600;
}

.woocommerce form .form-row .required {
    color: var(--primary-gradient-start);
    text-decoration: none;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-container .select2-selection {
    width: 100%;
    padding: 13px 15px;
    border: 2px solid #ddd;
    border-radius: var(--woo-radius-control);
    font-size: 1rem;
    font-family: inherit;
    transition: border-color 0.3s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    outline: none;
    border-color: var(--primary-gradient-start);
}

.woocommerce form .form-row.woocommerce-invalid input.input-text {
    border-color: #d32f2f;
}

.woocommerce-checkout-review-order {
    padding: 28px;
    background: var(--woo-surface-muted);
    border-radius: var(--woo-radius-panel);
}

.woocommerce-checkout-review-order table.shop_table {
    border-spacing: 0;
}

.woocommerce-checkout-review-order table.shop_table th,
.woocommerce-checkout-review-order table.shop_table td {
    background: transparent;
    border-radius: 0;
}

.woocommerce-checkout-review-order table.shop_table tbody tr {
    box-shadow: none;
}

/* Moyens de paiement. */
.woocommerce-checkout #payment {
    margin-top: 25px;
    padding: 28px;
    background: var(--woo-surface-muted);
    border-radius: var(--woo-radius-panel);
}

.woocommerce-checkout #payment ul.payment_methods {
    margin: 0 0 22px;
    padding: 0;
    border: none;
    list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
    margin-bottom: 12px;
    padding: 16px;
    background: #fff;
    border-radius: var(--woo-radius-control);
    list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li label {
    display: inline;
    color: var(--text-dark);
    font-weight: 600;
}

.woocommerce-checkout #payment div.payment_box {
    margin-top: 12px;
    padding: 16px;
    background: #f4f4f4;
    border-radius: var(--woo-radius-control);
    color: var(--text-gray);
    font-size: 0.95rem;
}

.woocommerce-checkout #payment div.payment_box::before {
    display: none;
}

.woocommerce-checkout #payment .place-order .button {
    width: 100%;
    padding: 18px 30px;
    font-size: 1.15rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Confirmation de commande. */
.woocommerce .woocommerce-order .woocommerce-order-overview {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 30px 0;
    padding: 25px;
    background: var(--woo-surface-muted);
    border-radius: var(--woo-radius-panel);
    list-style: none;
}

.woocommerce .woocommerce-order .woocommerce-order-overview li {
    flex: 1 1 160px;
    border: none;
    color: var(--text-gray);
    font-size: 0.9rem;
    text-transform: uppercase;
}

.woocommerce .woocommerce-order .woocommerce-order-overview li strong {
    display: block;
    margin-top: 6px;
    color: var(--text-dark);
    font-size: 1.1rem;
    text-transform: none;
}

/* ==========================================================================
   8 bis. Panier et Commande ( blocs WooCommerce )
   ========================================================================== */

/**
 * Ces deux pages sont rendues par les blocs WooCommerce, dont le balisage
 * ( wc-block-* ) n'a rien de commun avec le balisage classique visé plus haut
 * ( table.shop_table, .cart_totals, .wc-proceed-to-checkout ). Elles ne
 * recevaient donc aucun style du thème et s'affichaient telles que WooCommerce
 * les livre : bouton gris ardoise, liens produit violets, colonne de totaux
 * flottant sans surface.
 *
 * On ne les reconvertit pas en shortcodes : les blocs apportent les totaux en
 * direct et les paiements express, et c'est la voie retenue par WooCommerce.
 * L'essentiel de la mise en couleur passe par les jetons --wc-* redéfinis en
 * section 0 ; ne restent ici que la structure et la hiérarchie.
 */

/* Titre rattaché au panneau, comme dans l'espace compte. */
.woocommerce-cart .entry-header,
.woocommerce-checkout .entry-header {
    margin-bottom: 18px;
    text-align: left;
}

.woocommerce-cart .entry-title,
.woocommerce-checkout .entry-title {
    font-size: 1.9rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    text-align: left;
}

/* Colonne des totaux : une vraie surface, pour se détacher de la liste. */
.wc-block-components-sidebar {
    padding: 26px 24px;
    background: var(--woo-surface-muted);
    border: 1px solid var(--woo-hairline);
    border-radius: var(--woo-radius-panel);
}

.wc-block-cart__totals-title {
    color: var(--text-gray);
    letter-spacing: 0.1em;
}

/**
 * Action principale de la page.
 *
 * Les blocs livrent un pavé ardoise pleine largeur qui se lit comme inactif.
 * C'est pourtant la seule action de l'écran : elle prend le dégradé de la
 * marque, comme « Ajouter au panier » ailleurs sur la boutique.
 */
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button {
    background: linear-gradient(90deg, var(--primary-gradient-start), var(--primary-gradient-end));
    border: none;
    border-radius: var(--woo-radius-pill);
    padding: 16px 30px;
    color: #fff;
    font-size: 1.02rem;
    font-weight: 800;
    transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
    background: linear-gradient(90deg, var(--primary-gradient-end), var(--primary-gradient-start));
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(255, 107, 107, 0.28);
}

/* Nom du produit : le lien du thème, pas le violet livré par WooCommerce. */
.wc-block-components-product-name {
    color: var(--text-dark);
    font-weight: 700;
    text-decoration: none;
}

.wc-block-components-product-name:hover {
    color: var(--primary-gradient-start);
    text-decoration: underline;
}

/* Chiffres alignés en colonne : montants, quantités, sous-totaux. */
.wc-block-components-product-price,
.wc-block-components-totals-item,
.wc-block-components-totals-footer-item,
.wc-block-cart-item__total,
.wc-block-components-order-summary-item__total-price {
    font-variant-numeric: tabular-nums;
}

/* Le total reprend la couleur des montants du reste de la boutique. */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: var(--primary-gradient-end);
    font-weight: 800;
}

/* Bandeau des codes promo : discret, il ne doit pas concurrencer le total. */
.wc-block-components-panel__button {
    color: var(--text-dark);
    font-weight: 600;
}

.wc-block-components-totals-coupon__button {
    border-radius: var(--woo-radius-pill);
}

/* ==========================================================================
   9. Mon compte
   ========================================================================== */

/* Titre d'étape rattaché au panneau, plutôt que centré au-dessus du vide. */
.woocommerce-account .entry-header {
    margin-bottom: 18px;
    text-align: left;
}

.woocommerce-account .entry-title {
    font-size: 1.9rem;
    font-weight: 900;
    letter-spacing: -0.01em;
    text-align: left;
}

/**
 * L'ancienne version empilait trois surfaces — carte blanche contenant un rail
 * sombre et une seconde carte grise. Trois plans pour deux niveaux
 * d'information : le panneau extérieur disparaît, il ne reste que le rail de
 * navigation et la surface de contenu.
 */
.woocommerce-account .woocommerce {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    align-items: start;
    gap: 26px;
    padding: 0;
    background: none;
    box-shadow: none;
}

/* Connexion et inscription : pas de menu latéral, une colonne de lecture. */
.woocommerce-account:not(.logged-in) .woocommerce {
    display: block;
    max-width: 520px;
    margin: 0 auto;
}

.woocommerce-account .woocommerce-MyAccount-navigation {
    /* Remplace le float par défaut de WooCommerce, qui casse sur mobile. */
    float: none;
    width: auto;
    margin: 0;
    padding: 10px;
    background: var(--bg-dark);
    border-radius: var(--woo-radius-panel);
}

.woocommerce-account .woocommerce-MyAccount-navigation ul {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li {
    margin: 0;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 12px 16px;
    /* Liseré toujours présent mais transparent : l'entrée active ne décale
       donc pas le texte de ses voisines. */
    border-left: 3px solid transparent;
    border-radius: 0 10px 10px 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.97rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li a:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

/* Position courante. Le liseré porte la couleur de marque ; le fond se
   contente d'éclaircir la ligne. Teinter le fond en corail à 14 % sur un noir
   à #1a1a1a virait au bordeaux terne — une couleur que personne n'a choisie. */
.woocommerce-account .woocommerce-MyAccount-navigation ul li.is-active a {
    background: rgba(255, 255, 255, 0.09);
    border-left-color: var(--primary-gradient-start);
    color: #fff;
}

/* La déconnexion n'est pas une rubrique : on la détache des autres. */
.woocommerce-account .woocommerce-MyAccount-navigation-link--customer-logout {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.woocommerce-account .woocommerce-MyAccount-content {
    /* Remplace le margin-left fixe de WooCommerce. */
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 30px 32px;
    background: var(--woo-surface);
    border: 1px solid var(--woo-hairline);
    border-radius: var(--woo-radius-panel);
}

.woocommerce-account .woocommerce-MyAccount-content p {
    color: var(--text-gray);
    line-height: 1.7;
}

.woocommerce-account .woocommerce-MyAccount-content > p:last-child {
    margin-bottom: 0;
}

/**
 * Liens du contenu.
 *
 * Le tableau de bord et la page Adresses affichaient leurs liens en bleu et
 * violet : le style par défaut du navigateur, que le thème n'avait jamais
 * repris. On exclut les boutons et les blocs, qui ont leur propre traitement.
 */
.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.edit):not([class*="wc-block"]) {
    color: var(--primary-gradient-start);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.woocommerce-account .woocommerce-MyAccount-content a:not(.button):not(.edit):not([class*="wc-block"]):hover {
    color: var(--primary-gradient-end);
}

/* Phrase d'introduction d'une rubrique. */
.woocommerce-account .woocommerce-MyAccount-content > p:first-child {
    margin-bottom: 22px;
    color: var(--text-gray);
}

/* ---- Adresses ---- */

/**
 * WooCommerce dispose ici deux colonnes flottantes et fait remonter le lien
 * « Ajouter » à droite du titre, où il chevauchait le texte. Chaque adresse
 * devient une fiche autonome : intitulé, contenu, action.
 */
.woocommerce-account .woocommerce-Addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
    margin: 0;
}

/* Spécificité alignée sur « .woocommerce .col2-set .col-1 », qui impose
   encore un float et une largeur de 48 %. */
.woocommerce .col2-set .woocommerce-Address,
.woocommerce-account .woocommerce-Address {
    float: none;
    width: auto;
    padding: 22px;
    background: var(--woo-surface-muted);
    border: 1px solid var(--woo-hairline);
    border-radius: var(--woo-radius-panel);
}

.woocommerce-account .woocommerce-Address-title {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.woocommerce-account .woocommerce-Address-title h2,
.woocommerce-account .woocommerce-Address-title h3 {
    margin: 0;
    color: var(--text-dark);
    font-size: 1.05rem;
    font-weight: 800;
}

/* L'action reprend le contour des boutons secondaires du site. */
.woocommerce-account .woocommerce-Address-title .edit {
    float: none;
    padding: 7px 16px;
    border: 1.5px solid var(--woo-hairline);
    border-radius: var(--woo-radius-pill);
    color: var(--text-dark);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.woocommerce-account .woocommerce-Address-title .edit:hover {
    border-color: var(--primary-gradient-start);
    color: var(--primary-gradient-start);
}

/* <address> s'affiche en italique par défaut dans les navigateurs. */
.woocommerce-account .woocommerce-Address address {
    margin: 0;
    color: var(--text-gray);
    font-style: normal;
    line-height: 1.7;
}

/* ---- Formulaires du compte ---- */

/**
 * WooCommerce dispose encore ces champs en float ( .form-row-first et
 * .form-row-last à 47 % ), ce qui se disloque dès que le panneau se resserre.
 * En grille, les paires se placent seules et les champs pleine largeur
 * s'étendent sans calcul de pourcentage.
 */
.woocommerce-account .woocommerce-address-fields__field-wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 2px 18px;
}

.woocommerce-account form .form-row-first,
.woocommerce-account form .form-row-last {
    float: none;
    width: auto;
}

.woocommerce-account form .form-row-wide {
    grid-column: 1 / -1;
}

.woocommerce-account fieldset {
    margin-top: 24px;
    padding: 20px 22px;
    border: 1px solid var(--woo-hairline);
    border-radius: var(--woo-radius-panel);
}

.woocommerce-account fieldset legend {
    padding: 0 8px;
    color: var(--text-dark);
    font-weight: 800;
}

/* Tableau des commandes : numéros, montants et dates s'alignent en colonne. */
.woocommerce-account .woocommerce-orders-table {
    font-variant-numeric: tabular-nums;
}

.woocommerce-account .woocommerce-orders-table th {
    background: var(--bg-dark);
}

/* ==========================================================================
   10. Messages
   ========================================================================== */

/**
 * WooCommerce livre ces encarts en bleu Material ( #e3f2fd sur #1976d2 ).
 * Cette couleur n'appartient à aucune partie de l'identité du site : sur un
 * fond corail et noir, elle se lit comme une erreur. On les ramène donc sur la
 * surface neutre du thème, et l'information passe par un liseré de statut.
 */
.woocommerce-error,
.woocommerce-info,
.woocommerce-message {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin: 0 0 20px;
    padding: 15px 22px;
    background: var(--woo-surface-muted);
    border: 1px solid var(--woo-hairline);
    border-left: 4px solid var(--woo-notice-accent, var(--woo-info));
    border-radius: var(--woo-radius-control);
    color: var(--text-dark);
    font-weight: 500;
    line-height: 1.55;
    list-style: none;
}

/* Les pseudo-éléments (icône et clearfix) sont neutralisés en section 0 bis. */

.woocommerce-info {
    --woo-notice-accent: var(--woo-info);
}

.woocommerce-message {
    --woo-notice-accent: var(--woo-success);
}

.woocommerce-error {
    --woo-notice-accent: var(--woo-error);
}

/**
 * Action d'un message : contour, jamais le dégradé corail.
 *
 * Celui-ci est réservé à l'action principale de l'écran. Deux boutons pleins
 * dans un même panneau ( « Confirmer l'adresse e-mail » et « Parcourir les
 * produits » ) criaient aussi fort et plus rien ne primait.
 *
 * order:1 place le bouton après le texte quel que soit l'ordre du HTML :
 * WooCommerce l'écrit tantôt avant, tantôt après, et il se retrouvait seul
 * sur une ligne au-dessus du message.
 */
.woocommerce-error .button,
.woocommerce-info .button,
.woocommerce-message .button,
.woocommerce-error a.button,
.woocommerce-info a.button,
.woocommerce-message a.button {
    order: 1;
    margin-left: auto;
    padding: 9px 20px;
    background: transparent;
    border: 1.5px solid var(--woo-notice-accent, var(--woo-info));
    border-radius: var(--woo-radius-pill);
    color: var(--woo-notice-accent, var(--woo-info));
    font-size: 0.88rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: none;
}

.woocommerce-error .button:hover,
.woocommerce-info .button:hover,
.woocommerce-message .button:hover,
.woocommerce-error a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-message a.button:hover {
    background: var(--woo-notice-accent, var(--woo-info));
    color: #fff;
    transform: none;
    box-shadow: none;
}

.woocommerce-error li,
.woocommerce-info li,
.woocommerce-message li {
    list-style: none;
}

/* ==========================================================================
   11. Pagination
   ========================================================================== */

.woocommerce nav.woocommerce-pagination {
    margin: 45px 0 10px;
    text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    border: none;
    list-style: none;
}

.woocommerce nav.woocommerce-pagination ul li {
    margin: 0;
    border: none;
    overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: block;
    min-width: 44px;
    padding: 12px 18px;
    background: var(--bg-dark);
    border-radius: var(--woo-radius-control);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s ease, transform 0.2s ease;
}

.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: linear-gradient(90deg, var(--primary-gradient-start), var(--primary-gradient-end));
    color: #fff;
    transform: translateY(-2px);
}

/* ==========================================================================
   12. Adaptation aux petits écrans
   ========================================================================== */

@media (max-width: 1024px) {
    .woocommerce div.product {
        gap: 35px;
        padding: 30px;
    }

    .woocommerce div.product .product_title {
        font-size: 1.9rem;
    }
}

@media (max-width: 900px) {
    .woocommerce-page .site-main .container {
        padding: 25px 20px 40px;
    }

    /* La navbar est plus compacte sur mobile. */
    .shop-header-wrapper {
        padding: calc(70px + 20px) 0 20px;
    }

    .shop-header {
        padding: 0 20px;
    }

    .shop-header-row {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 20px;
    }

    .shop-header .shop-title {
        font-size: 1.45rem;
    }

    /* Les contrôles passent sous le titre et se partagent la largeur. */
    .shop-header-tools {
        width: 100%;
        padding-top: 16px;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }

    .shop-header .woocommerce-ordering {
        flex: 1 1 160px;
    }

    .shop-header .woocommerce-ordering select {
        width: 100%;
    }

    .woocommerce ul.products {
        gap: 25px 20px;
    }

    .woocommerce ul.products li.product a img {
        height: 200px;
    }

    .woocommerce-checkout .woocommerce {
        padding: 25px;
    }

    /* Le menu du compte repasse au-dessus du contenu. */
    .woocommerce-account .woocommerce {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .woocommerce-account .woocommerce-MyAccount-content {
        padding: 24px 20px;
    }

    .woocommerce-account .entry-title {
        font-size: 1.55rem;
    }

    .woocommerce .cart-collaterals .cart_totals {
        max-width: none;
    }
}

@media (max-width: 600px) {
    .woocommerce div.product {
        padding: 22px;
    }

    .woocommerce div.product .product_title {
        font-size: 1.6rem;
    }

    .woocommerce div.product form.cart {
        gap: 12px;
    }

    .woocommerce div.product form.cart .quantity,
    .woocommerce div.product form.cart .quantity input.qty {
        width: 100%;
    }

    .woocommerce div.product form.cart .single_add_to_cart_button {
        width: 100%;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs {
        gap: 4px;
    }

    .woocommerce div.product .woocommerce-tabs ul.tabs li a {
        padding: 11px 16px;
        font-size: 0.92rem;
    }

    .woocommerce div.product .woocommerce-tabs .panel {
        padding: 20px;
    }

    /* Tableaux en cartes : l'affichage colonne par colonne est illisible ici.
       WooCommerce fournit les intitulés via l'attribut data-title. */
    .woocommerce table.shop_table thead {
        display: none;
    }

    .woocommerce table.shop_table tbody tr {
        display: block;
        margin-bottom: 14px;
        padding: 12px;
        background: #fff;
        border-radius: var(--woo-radius-control);
    }

    .woocommerce table.shop_table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 4px;
        text-align: right;
    }

    .woocommerce table.shop_table tbody td::before {
        content: attr(data-title);
        color: var(--text-gray);
        font-weight: 700;
        text-align: left;
    }

    .woocommerce table.shop_table tbody td.product-remove::before,
    .woocommerce table.shop_table tbody td.actions::before {
        content: none;
    }

    .woocommerce table.shop_table td.actions .coupon input.input-text {
        min-width: 0;
        flex: 1 1 140px;
    }

    .woocommerce-error,
    .woocommerce-info,
    .woocommerce-message {
        padding: 14px 18px;
        font-size: 0.95rem;
    }

    .woocommerce-error .button,
    .woocommerce-info .button,
    .woocommerce-message .button {
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
}