/*
Theme Name: Rizerie Royale du Bounkani
Theme URI: https://rizerieroyale.ci
Author: Rizerie Royale
Author URI: https://rizerieroyale.ci
Description: Thème WordPress classique pour Rizerie Royale du Bounkani — design fidèle au site Lovable (riz 100% ivoirien).
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: rizerie-royale
Tags: custom-menu, featured-images, woocommerce, one-column, two-columns
*/

/* ==========================================================================
   Design tokens — couleurs, fonts, espacements (source : src/styles.css)
   ========================================================================== */

:root {
  --radius: 0.75rem;
  --background: oklch(0.985 0.012 95);
  --foreground: oklch(0.22 0.04 145);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.22 0.04 145);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.22 0.04 145);
  --primary: oklch(0.42 0.13 145);
  --primary-foreground: oklch(0.98 0.01 95);
  --primary-soft: oklch(0.93 0.05 145);
  --secondary: oklch(0.95 0.03 95);
  --secondary-foreground: oklch(0.3 0.05 145);
  --accent: oklch(0.72 0.18 55);
  --accent-foreground: oklch(0.2 0.02 60);
  --accent-soft: oklch(0.94 0.06 70);
  --muted: oklch(0.95 0.02 90);
  --muted-foreground: oklch(0.5 0.03 130);
  --destructive: oklch(0.58 0.22 27);
  --destructive-foreground: oklch(0.98 0 0);
  --border: oklch(0.9 0.02 110);
  --input: oklch(0.92 0.02 110);
  --ring: oklch(0.42 0.13 145);
  --whatsapp: oklch(0.65 0.18 150);
  --font-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Fraunces", Georgia, serif;
}

.dark {
  --background: oklch(0.18 0.02 145);
  --foreground: oklch(0.96 0.01 95);
  --card: oklch(0.22 0.03 145);
  --card-foreground: oklch(0.96 0.01 95);
  --primary: oklch(0.72 0.15 145);
  --primary-foreground: oklch(0.15 0.03 145);
  --primary-soft: oklch(0.3 0.06 145);
  --secondary: oklch(0.28 0.03 130);
  --secondary-foreground: oklch(0.96 0.01 95);
  --accent-soft: oklch(0.3 0.08 70);
  --muted: oklch(0.25 0.02 140);
  --muted-foreground: oklch(0.7 0.02 110);
  --border: oklch(1 0 0 / 12%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.72 0.15 145);
}

/* ==========================================================================
   Base
   ========================================================================== */

*,
*::before,
*::after {
  border-color: var(--border);
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

/* ==========================================================================
   Utilitaires custom (équivalent @utility container-page / section-pad)
   ========================================================================== */

.container-page {
  width: 100%;
  margin-inline: auto;
  max-width: 1200px;
  padding-inline: 1.25rem;
}

.section-pad {
  padding-block: 4rem;
}

/* ==========================================================================
   Animations — reveal au scroll + hover des cards (design Lovable)
   - Reveal déclenché en JS (IntersectionObserver) via la classe .is-visible
   - Stagger géré côté JS (aucun transition-delay : le hover reste réactif)
   - On utilise la propriété `translate` (indépendante de `transform`) pour
     que le reveal et le scale du hover ne se gênent pas.
   - La classe `.js` est ajoutée sur <html> avant le paint : sans JS, le
     contenu reste visible (jamais masqué).
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  html.js .reveal,
  html.js .reveal-group>* {
    opacity: 0;
    translate: 0 24px;
    transition:
      opacity 0.7s ease-out,
      translate 0.7s ease-out;
  }

  html.js .reveal.is-visible,
  html.js .reveal-group>*.is-visible {
    opacity: 1;
    translate: 0 0;
  }
}

.card-hover {
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
}

.card-hover:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 24px -10px rgb(0 0 0 / 0.18);
}

@media (prefers-reduced-motion: reduce) {
  .card-hover {
    transition: none;
  }

  .card-hover:hover {
    transform: none;
  }
}

/* ==========================================================================
   Navigation WordPress — classes actives
   ========================================================================== */

.rr-nav-desktop .current-menu-item>a,
.rr-nav-desktop .current-menu-ancestor>a {
  background-color: var(--primary-soft);
  color: var(--primary);
}

.rr-nav-desktop a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: color 0.15s, background-color 0.15s;
  color: color-mix(in oklch, var(--foreground) 75%, transparent);
}

.rr-nav-desktop a:hover {
  color: var(--foreground);
  background-color: var(--muted);
}

.rr-nav-desktop li {
  position: relative;
}

/* Indicateur de menu déroulant (chevron) */
.rr-nav-desktop li.menu-item-has-children > a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding-right: 0.9rem;
}

.rr-nav-desktop li.menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 0.35rem;
  height: 0.35rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.7;
  transition: transform 0.2s, margin-top 0.2s;
  margin-top: -3px;
  flex-shrink: 0;
}

.rr-nav-desktop li.menu-item-has-children:hover > a::after {
  transform: rotate(225deg);
  margin-top: 2px;
}

.rr-nav-desktop .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  background-color: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border-radius: var(--radius);
  padding: 0.5rem 0;
  min-width: 200px;
  z-index: 100;
  margin-top: 0.25rem;
}

.rr-nav-desktop li:hover > .sub-menu {
  display: block;
}

.rr-nav-desktop .sub-menu li {
  display: block;
  width: 100%;
}

.rr-nav-desktop .sub-menu a {
  display: block;
  padding: 0.5rem 1.25rem;
  border-radius: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
}

.rr-nav-desktop .sub-menu a:hover {
  background-color: var(--secondary);
  color: var(--primary);
}

/* Timeline Vertical Line */
.rr-timeline {
  position: relative;
}

.rr-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 1rem;
  width: 2px;
  background-color: var(--border);
  opacity: 0.6;
}

@media (min-width: 1024px) {
  .rr-timeline::before {
    left: 50%;
    transform: translateX(-50%);
  }
}

.rr-nav-mobile .sub-menu {
  padding-left: 1.25rem;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
  border-left: 2px solid var(--border);
}

.rr-nav-mobile .sub-menu a {
  padding: 0.5rem 0;
  font-size: 0.825rem;
}

.rr-nav-mobile a {
  display: block;
  padding: 0.625rem 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: color-mix(in oklch, var(--foreground) 80%, transparent);
  transition: color 0.15s;
}

.rr-nav-mobile a:hover {
  color: var(--primary);
}

/* ==========================================================================
   WooCommerce — héritage des couleurs / boutons (pas de templates dédiés)
   ========================================================================== */

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce span.onsale {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border-radius: 9999px;
  font-weight: 600;
  transition: filter 0.15s;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
  filter: brightness(1.1);
  color: var(--primary-foreground);
  background-color: var(--primary);
}

.woocommerce .price,
.woocommerce ul.products li.product .price {
  color: var(--foreground);
  font-weight: 600;
}

.woocommerce-info,
.woocommerce-message {
  border-top-color: var(--primary);
}

.woocommerce-info::before,
.woocommerce-message::before {
  color: var(--primary);
}

/* ==========================================================================
   WooCommerce Single Product — Lovable Design
   ========================================================================== */

/* ===== PRODUCT FORM WRAPPER ===== */
.woocommerce-variation-form {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ===== VARIATION LABEL ===== */
.woocommerce form .form-row label {
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  display: block;
}

/* ===== VARIATION SELECT — Convert to Button-like appearance ===== */
.woocommerce form .form-row.form-row-wide select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 0.125rem);
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  transition: border-color 0.15s, background-color 0.15s;
  cursor: pointer;
}

.woocommerce form .form-row.form-row-wide select:hover {
  border-color: var(--primary);
}

.woocommerce form .form-row.form-row-wide select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--primary) 30%, transparent);
}

/* ===== QUANTITY INPUT ===== */
.woocommerce form .quantity {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 0.125rem);
  overflow: hidden;
}

.woocommerce form .quantity input[type="number"],
.woocommerce form .quantity input.qty {
  width: 3rem;
  height: 2.5rem;
  border: none;
  background: transparent;
  text-align: center;
  font-weight: 600;
  font-family: var(--font-sans);
  font-size: 0.875rem;
}

.woocommerce form .quantity input[type="number"]:focus,
.woocommerce form .quantity input.qty:focus {
  outline: none;
}

/* Spinners — hide (chevrons) */
.woocommerce form .quantity input[type="number"]::-webkit-outer-spin-button,
.woocommerce form .quantity input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.woocommerce form .quantity input[type="number"] {
  -moz-appearance: textfield;
}

/* Plus / Minus buttons (if using button-based qty) */
.woocommerce form .quantity button {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  color: var(--foreground);
  transition: background-color 0.15s;
}

.woocommerce form .quantity button:hover {
  background-color: var(--muted);
}

.woocommerce form .quantity button:first-child {
  border-right: 1px solid var(--border);
}

.woocommerce form .quantity button:last-child {
  border-left: 1px solid var(--border);
}

/* ===== ADD TO CART BUTTON ===== */
.woocommerce form.cart .button.single_add_to_cart_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--primary);
  color: var(--primary-foreground);
  border: none;
  border-radius: 9999px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: filter 0.15s;
  min-width: 200px;
  white-space: nowrap;
}

.woocommerce form.cart .button.single_add_to_cart_button:hover:not(:disabled) {
  filter: brightness(1.1);
}

.woocommerce form.cart .button.single_add_to_cart_button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== CLEAR FLOATS ===== */
.woocommerce form.cart::after {
  content: "";
  display: table;
  clear: both;
}

/* ===== FORM ROWS LAYOUT ===== */
.woocommerce form.cart .form-row {
  margin-bottom: 1.5rem;
}

.woocommerce form.cart .form-row-last {
  clear: left;
}

/* ===== SINGLE VARIATION (Dynamic variation info) ===== */
.woocommerce-variation {
  margin-bottom: 1.5rem;
  padding: 1rem;
  background-color: var(--secondary);
  border-radius: var(--radius);
  display: none;
}

.woocommerce-variation.visible {
  display: block;
}

.woocommerce-variation .woocommerce-variation-price {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--foreground);
}

.woocommerce-variation-description {
  font-size: 0.875rem;
  color: var(--muted-foreground);
  margin-top: 0.5rem;
}

/* ===== VARIATION BUTTONS (JavaScript-generated button swatches) ===== */
.rr-variation-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.rr-variation-buttons button {
  padding: 0.5rem 1rem;
  border-radius: calc(var(--radius) - 0.125rem);
  border: 1px solid var(--border);
  background-color: transparent;
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
  white-space: nowrap;
}

.rr-variation-buttons button:hover {
  border-color: var(--primary);
  background-color: var(--primary-soft);
  color: var(--primary);
}

.rr-variation-buttons button.active,
.rr-variation-buttons button[data-active="true"] {
  border-color: var(--primary);
  background-color: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}

/* ===== CUSTOM VARIANT BUTTONS (Single Product) ===== */
.rr-variant-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.rr-variant-btn {
  padding: 0.5rem 1rem;
  border-radius: calc(var(--radius) - 0.125rem);
  border: 1px solid var(--border);
  background-color: transparent;
  color: var(--foreground);
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.rr-variant-btn:hover {
  border-color: var(--primary);
  background-color: var(--primary-soft);
  color: var(--primary);
}

.rr-variant-btn.active {
  border-color: var(--primary);
  background-color: var(--primary-soft);
  color: var(--primary);
  font-weight: 600;
}

/* ===== QUANTITY SELECTOR ===== */
.rr-quantity-selector {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 0.125rem);
  overflow: hidden;
}

.rr-qty-input {
  width: 3rem;
  height: 2.5rem;
  border: none;
  background: transparent;
  text-align: center;
  font-weight: 600;
  font-family: var(--font-sans);
  font-size: 0.875rem;
  padding: 0;
}

.rr-qty-input:focus {
  outline: none;
}

.rr-qty-minus,
.rr-qty-plus {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  color: var(--foreground);
  transition: background-color 0.15s;
}

.rr-qty-minus:hover,
.rr-qty-plus:hover {
  background-color: var(--muted);
}

.rr-qty-minus:active,
.rr-qty-plus:active {
  background-color: var(--muted);
}

.rr-qty-minus {
  border-right: 1px solid var(--border);
}

.rr-qty-plus {
  border-left: 1px solid var(--border);
}

/* ===== TOTAL PRICE ===== */
.rr-total-price {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--foreground);
}

/* ===== ACTION BUTTONS ===== */
#rr-add-to-cart-btn,
#rr-whatsapp-btn {
  border: none;
  font-family: var(--font-sans);
  cursor: pointer;
}

#rr-add-to-cart-btn:disabled,
#rr-whatsapp-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ==========================================================================
   Éléments d'interface génériques — design Lovable
   (notices WooCommerce, boutons submit, champs de formulaire, paiement)
   ========================================================================== */

/* ---------- Notices WooCommerce ---------- */
.woocommerce-error,
.woocommerce-message,
.woocommerce-info,
.woocommerce .woocommerce-error,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce-page .woocommerce-error,
.woocommerce-page .woocommerce-message,
.woocommerce-page .woocommerce-info {
  position: relative;
  background-color: var(--card);
  color: var(--foreground);
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  padding: 1rem 1.25rem 1rem 3rem;
  margin: 0 0 1.5rem;
  list-style: none;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04);
  font-family: var(--font-sans);
}

.woocommerce-error::before,
.woocommerce-message::before,
.woocommerce-info::before {
  top: 1rem;
  left: 1rem;
  color: var(--primary);
}

/* La notice d'erreur conserve une teinte destructive pour la lisibilité */
.woocommerce-error,
.woocommerce .woocommerce-error,
.woocommerce-page .woocommerce-error {
  border-color: var(--destructive) !important;
  background-color: var(--destructive-soft) !important;
}

.woocommerce-error::before {
  color: var(--destructive);
}

/* Lien/bouton éventuel dans une notice : marge propre */
.woocommerce-message .button,
.woocommerce-info .button {
  margin-left: 1rem;
}

/* ---------- Champs de formulaire génériques ----------
   On exclut volontairement les champs `number` (sélecteurs de quantité
   composites .rr-qty-input) et les types non textuels. */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="date"],
textarea,
select,
.woocommerce form .input-text,
.woocommerce-page form .input-text {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.4;
  padding: 0.625rem 0.875rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus,
.woocommerce form .input-text:focus,
.woocommerce-page form .input-text:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 18%, transparent);
}

textarea {
  min-height: 7rem;
  resize: vertical;
}

select {
  cursor: pointer;
}

/* ---------- Boutons submit / input[type=submit] du site ---------- */
input[type="submit"],
button[type="submit"],
.woocommerce #respond input#submit,
.woocommerce .coupon .button,
.woocommerce .actions .button,
#place_order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: var(--primary);
  color: var(--primary-foreground);
  border: none;
  border-radius: 9999px;
  padding: 0.75rem 1.75rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.2;
  cursor: pointer;
  transition: opacity 0.15s, filter 0.15s;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .coupon .button:hover,
.woocommerce .actions .button:hover,
#place_order:hover {
  opacity: 0.9;
  color: var(--primary-foreground);
}

input[type="submit"]:disabled,
button[type="submit"]:disabled,
#place_order:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---------- Coupon panier ---------- */
.woocommerce .coupon {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.woocommerce .coupon input.input-text {
  flex: 1;
  min-width: 12rem;
}

/* ---------- Méthodes de paiement (checkout) ---------- */
/* Accent vert sur tous les radios/checkboxes du checkout */
.woocommerce-checkout input[type="radio"],
.woocommerce-checkout input[type="checkbox"] {
  accent-color: var(--primary);
  cursor: pointer;
}

/* Liste standard WooCommerce des passerelles de paiement, traitée en cards */
.woocommerce-checkout #payment,
.woocommerce-checkout #payment ul.payment_methods {
  background: transparent;
  border: none;
}

.woocommerce-checkout #payment ul.payment_methods {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.woocommerce-checkout #payment ul.payment_methods li {
  list-style: none;
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
}

.woocommerce-checkout #payment ul.payment_methods li:hover {
  border-color: var(--primary);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.06);
}

.woocommerce-checkout #payment ul.payment_methods li label {
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

.woocommerce-checkout #payment div.payment_box {
  margin-top: 0.75rem;
  background-color: var(--secondary);
  color: var(--muted-foreground);
  border-radius: calc(var(--radius) - 0.125rem);
  font-size: 0.875rem;
}

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

/* ==========================================================================
   Avis produit (WooCommerce Reviews) — design Lovable
   Styling pur : aucune modification de la logique native (comment_form,
   woocommerce_review, hooks WooCommerce).
   ========================================================================== */

/* Alignement de la section sur la largeur du reste de la fiche */
.woocommerce #reviews {
  max-width: 1200px;
  margin-inline: auto;
  padding: 2rem 1.25rem 4rem;
  font-family: var(--font-sans);
}

.woocommerce #reviews #comments>h2,
.woocommerce #reviews .woocommerce-Reviews-title,
.woocommerce #review_form #respond #reply-title {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  display: block;
}

/* ---------- Liste des avis en cards ---------- */
.woocommerce #reviews #comments ol.commentlist {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.woocommerce #reviews #comments ol.commentlist li {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin: 0;
}

.woocommerce #reviews #comments ol.commentlist li .comment_container {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.woocommerce #reviews #comments ol.commentlist li img.avatar {
  position: static;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  border: 1px solid var(--border);
  background: var(--muted);
  padding: 0;
  margin: 0;
  float: none;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text {
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text p.meta {
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  margin: 0.25rem 0 0.5rem;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text .woocommerce-review__author {
  color: var(--foreground);
  font-weight: 600;
}

.woocommerce #reviews #comments ol.commentlist li .comment-text .description {
  color: var(--foreground);
}

/* ---------- Étoiles en --primary ---------- */
.woocommerce .star-rating {
  color: var(--primary);
}

.woocommerce .star-rating::before {
  color: color-mix(in oklch, var(--primary) 22%, transparent);
}

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

/* Étoiles interactives du formulaire d'avis */
.woocommerce #review_form #respond p.stars a {
  color: var(--primary);
}

.woocommerce #review_form #respond p.stars a::before {
  color: color-mix(in oklch, var(--primary) 35%, transparent);
}

.woocommerce #review_form #respond p.stars a:hover::before,
.woocommerce #review_form #respond p.stars a.active::before,
.woocommerce #review_form #respond p.stars.selected a.active::before,
.woocommerce #review_form #respond p.stars:hover a::before {
  color: var(--primary);
}

/* ---------- Formulaire « Laisser un avis » en card ---------- */
.woocommerce #review_form_wrapper {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-top: 1.5rem;
}

.woocommerce #review_form #respond label {
  display: block;
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.375rem;
}

.woocommerce #review_form #respond .comment-form-rating,
.woocommerce #review_form #respond .comment-form-author,
.woocommerce #review_form #respond .comment-form-email,
.woocommerce #review_form #respond .comment-form-comment {
  margin-bottom: 1.25rem;
}

/* Champs : mêmes styles que le reste du site (specificité ID pour primer
   sur la CSS core WooCommerce qui cible #respond input). */
.woocommerce #review_form #respond input[type="text"],
.woocommerce #review_form #respond input[type="email"],
.woocommerce #review_form #respond input[type="url"],
.woocommerce #review_form #respond textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.4;
  padding: 0.625rem 0.875rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.woocommerce #review_form #respond input[type="text"]:focus,
.woocommerce #review_form #respond input[type="email"]:focus,
.woocommerce #review_form #respond input[type="url"]:focus,
.woocommerce #review_form #respond textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--primary) 18%, transparent);
}

.woocommerce #review_form #respond textarea {
  min-height: 7rem;
  resize: vertical;
}

/* Bouton submit : pill --primary, hover opacité (cohérent avec le site) */
.woocommerce #review_form #respond .form-submit input[type="submit"],
.woocommerce #review_form #respond #submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--primary);
  color: var(--primary-foreground);
  border: none;
  border-radius: 9999px;
  padding: 0.75rem 1.75rem;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: opacity 0.15s;
}

.woocommerce #review_form #respond .form-submit input[type="submit"]:hover,
.woocommerce #review_form #respond #submit:hover {
  opacity: 0.9;
}

/* Onglets Description / Avis - fiche produit */
.woocommerce div.product .woocommerce-tabs ul.tabs {
  display: flex;
  gap: 10px;
  padding: 0;
  margin: 2rem 0 2rem;
  list-style: none;
  border-bottom: none;
}
.woocommerce .woocommerce-breadcrumb {
  display: none !important;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
  background-color: var(--secondary);
  color: var(--foreground);
  border-radius: var(--radius) var(--radius) 0 0;
  /* padding: 0.875rem 1.75rem; */
  font-weight: 600;
  cursor: pointer;
  border: none;
  margin: 0;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li:hover {
  background-color: color-mix(in srgb, var(--primary) 15%, var(--secondary));
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
  background-color: var(--primary);
  color: var(--primary-foreground);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
  color: inherit;
  text-decoration: none;
}

.woocommerce div.product .woocommerce-tabs .panel {
  padding: 0 2rem;
}


/* ── Bouton "Passer la commande" dans le bloc panier ── */
.wp-block-woocommerce-cart .wc-block-cart__submit-button,
.wc-block-cart__submit-container .wc-block-components-button {
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-radius: 9999px !important;
  /* rounded-full */
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  padding: 0.75rem 1.5rem !important;
  border: none !important;
  transition: opacity 0.2s !important;
}

.wp-block-woocommerce-cart .wc-block-cart__submit-button:hover,
.wc-block-cart__submit-container .wc-block-components-button:hover {
  opacity: 0.9 !important;
  background-color: var(--primary) !important;
}

/* ── Bouton "Passer la commande" dans le bloc checkout ── */
.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button,
.wc-block-checkout__place-order .wc-block-components-button {
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-radius: 9999px !important;
  font-weight: 600 !important;
  padding: 0.75rem 1.5rem !important;
  border: none !important;
  width: 100% !important;
  transition: opacity 0.2s !important;
}

.wp-block-woocommerce-checkout .wc-block-components-checkout-place-order-button:hover {
  opacity: 0.9 !important;
  background-color: var(--primary) !important;
}


/* ==========================================================================
   WooCommerce Blocs — Panier & Checkout (design Rizerie Royale)
   ========================================================================== */

/* ── Conteneur général ── */
.wp-block-woocommerce-cart,
.wp-block-woocommerce-checkout {
  font-family: var(--font-sans) !important;
  color: var(--foreground) !important;
}

/* ── Titres de section (ex: "Votre panier", "Informations de livraison") ── */
.wc-block-cart__main-heading,
.wc-block-components-sidebar-layout h1,
.wp-block-woocommerce-checkout h1 {
  font-family: var(--font-display) !important;
  letter-spacing: -0.02em !important;
  color: var(--foreground) !important;
}

/* ── Cards articles du panier ── */
.wc-block-cart-items,
.wc-block-cart-items__row {
  border-color: var(--border) !important;
}

/* Tableau du panier */
.wc-block-cart-items {
  border-collapse: separate !important;
  border-spacing: 0 20px !important;
  /* espace vertical entre produits */
}

/* Card produit */
.wc-block-cart-items__row {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgb(0 0 0 / 5%) !important;
}

/* Cellules du produit */
.wc-block-cart-items__row td {
  background: var(--card) !important;
  padding: 1.25rem !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Première cellule */
.wc-block-cart-items__row td:first-child {
  border-left: 1px solid var(--border) !important;
  border-radius: var(--radius) 0 0 var(--radius) !important;
}

/* Dernière cellule */
.wc-block-cart-items__row td:last-child {
  border-right: 1px solid var(--border) !important;
  border-radius: 0 var(--radius) var(--radius) 0 !important;
}

.editor-styles-wrapper table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name,
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
  font-size: var(--text-lg);
  line-height: var(--tw-leading, var(--text-lg--line-height));
}

.wc-block-components-sidebar-layout .wc-block-components-main thead {
  display: none !important;
}

.wc-block-components-product-name {
  font-family: var(--font-display) !important;
  font-size: 1.05rem !important;
  color: var(--foreground) !important;
  font-weight: 600 !important;

}

.wc-block-components-product-price {
  color: var(--foreground) !important;
  font-weight: 600 !important;
}

.editor-styles-wrapper table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link,
table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link:hover {
  color: red !important;
}

/* ── Récapitulatif / Order summary ── */
.wc-block-cart__sidebar .wc-block-components-totals-wrapper,
.wc-block-components-order-summary {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  padding: 1.5rem !important;
  margin-bottom: 1rem !important;
}

.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value {
  color: var(--foreground) !important;
  font-family: var(--font-sans) !important;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
  font-family: var(--font-display) !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
}

.wc-block-cart .wp-block-woocommerce-cart-order-summary-block h2 {
  font-size: 1.5em !important;
  font-family: var(--font-display) !important;
  color: var(--primary) !important;
}

/* ── Séparateurs ── */
.wc-block-components-totals-item+.wc-block-components-totals-item {
  border-top: 1px solid var(--border) !important;
}

/* ── Champs de formulaire Checkout ── */
.wc-block-components-text-input input,
.wc-block-components-select select,
.wc-block-components-textarea textarea {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  background-color: var(--background) !important;
  color: var(--foreground) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.875rem !important;
  padding: 0.625rem 0.875rem !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}

/* ── Section méthodes de paiement ── */
.wc-block-components-payment-method-label {
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
}

.wc-block-components-radio-control--highlight-checked .wc-block-components-radio-control-accordion-option--checked-option-highlighted,
.wc-block-components-radio-control--highlight-checked label.wc-block-components-radio-control__option--checked-option-highlighted {
  box-shadow: inset 0 0 0 1px var(--primary) !important;
}

.wc-block-components-radio-control .wc-block-components-radio-control__input:checked {
  border: 1px solid color-mix(in srgb, var(--primary) 80%, transparent) !important;
}

.wc-block-components-radio-control__option:hover {
  border-color: var(--primary) !important;
}

.wc-block-components-radio-control__option input[type="radio"] {
  accent-color: var(--primary) !important;
}

.wp-block-woocommerce-checkout-order-summary-block, .wc-block-components-form {
  background-color: var(--card) !important;
  border: 1px solid var(--border) !important;
}

.wc-block-components-form {
   background-color: var(--card) !important;
  border-color: var(--input) !important;
  border-width: 1px !important;
  padding: 1rem !important;
  border-radius: var(--radius) !important;
}

/* .wc-block-cart__sidebar .wc-block-components-totals-wrapper,
.wc-block-components-order-summary {
  border: none !important;
  background-color: transparent !important;
} */

.wc-blocks-components-select .wc-blocks-components-select__select, .wc-block-components-textarea{
  background-color: var(--background) ;
  border-color: var(--input) !important;
  border-width: 1px !important;
  border-radius: 0.5rem !important;
  margin-top: 0.375rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}


/* ── Boutons principaux (déjà en haut mais on consolide) ── */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button,
.wc-block-cart__submit-container .wc-block-components-button,
.wc-block-checkout__place-order .wc-block-components-button {
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
  border-radius: 9999px !important;
  font-family: var(--font-sans) !important;
  font-weight: 600 !important;
  font-size: 0.9375rem !important;
  padding: 0.875rem 1.5rem !important;
  border: none !important;
  width: 100% !important;
  transition: opacity 0.2s !important;
  letter-spacing: 0.01em !important;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover,
.wc-block-cart__submit-container .wc-block-components-button:hover,
.wc-block-checkout__place-order .wc-block-components-button:hover {
  opacity: 0.9 !important;
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

/* ── Notices / erreurs blocs ── */
.wc-block-components-notice-banner {
  background-color: var(--card) !important;
  border: 1px solid var(--primary) !important;
  border-radius: var(--radius) !important;
  font-family: var(--font-sans) !important;
  color: var(--foreground) !important;
}

.wc-block-components-notice-banner.is-error {
  border-color: var(--destructive) !important;
}

/* Short vidéo riziculteurs */
.rr-short-wrapper {
    cursor: pointer;
}
.rr-short-video {
    background: #000;
}
.rr-short-video:not(.hidden) {
    display: block !important;
}

.wc-block-cart__empty-cart__title.with-empty-cart-icon:before {
  background-color: var(--primary) !important;
}

.wp-block-separator.is-style-dots {
  color: var(--muted-foreground) !important;
}

.wp-block-product-new {
  margin-top : 2rem !important;
}

.wc-block-grid__product-add-to-cart a{
background-color: var(--primary) !important;
}

    /* .wc-block-cart .wc-block-components-sidebar {

      background-color: var(--card) !important;
      border: 1px solid var(--border) !important;
    } */

@media (max-width: 640px) {

}

/* ==========================================================================
   WooCommerce — Page "Mon Compte" (My Account)
   ========================================================================== */

/* Structure globale du compte */
.woocommerce-account .woocommerce {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .woocommerce-account .woocommerce {
    flex-direction: row;
    gap: 3rem;
  }
}

/* Navigation Latérale */
.woocommerce-MyAccount-navigation {
  flex-shrink: 0;
  width: 100%;
}

@media (min-width: 768px) {
  .woocommerce-MyAccount-navigation {
    width: 260px;
  }
}

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

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

.woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--foreground);
  background-color: var(--secondary);
  transition: background-color 0.2s, color 0.2s;
  text-decoration: none;
}

.woocommerce-MyAccount-navigation li a:hover {
  background-color: var(--accent);
  color: var(--accent-foreground);
}

.woocommerce-MyAccount-navigation li.is-active a {
  background-color: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

/* Contenu du compte */
.woocommerce-MyAccount-content {
  flex: 1;
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 2);
  padding: 1.5rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

@media (min-width: 768px) {
  .woocommerce-MyAccount-content {
    padding: 2.5rem;
  }
}

/* Formulaires Connexion / Inscription (col-2-set) */
.woocommerce-account .u-columns,
.woocommerce-account .col2-set {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 2rem !important;
  max-width: 900px !important;
  margin: 2rem auto !important;
  align-items: start !important;
}

/* Fix CSS Grid gotcha: WooCommerce clearfix pseudo-elements act as grid items */
.woocommerce-account .u-columns::before,
.woocommerce-account .u-columns::after,
.woocommerce-account .col2-set::before,
.woocommerce-account .col2-set::after {
  display: none !important;
  content: none !important;
}

@media (min-width: 768px) {
  .woocommerce-account .u-columns,
  .woocommerce-account .col2-set {
    grid-template-columns: 1fr 1fr !important;
    gap: 3rem !important;
  }
}

.woocommerce-account .u-column1,
.woocommerce-account .u-column2 {
  background-color: var(--card);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) * 2);
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.03);
  width: 100% !important; /* Override Woo float/width */
  float: none !important; /* Override Woo float/width */
  box-sizing: border-box;
}

.woocommerce-account .u-column2 {
  background-color: var(--secondary);
  border-color: transparent;
}

.woocommerce-account .u-columns h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  margin-top: 0;
  color: var(--foreground);
  font-weight: 600;
}

.woocommerce-account form.login,
.woocommerce-account form.register {
  border: none;
  padding: 0;
  margin: 0;
}

.woocommerce-account form .form-row {
  margin-bottom: 1.25rem;
}

.woocommerce-account form .form-row label {
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  display: block;
}

.woocommerce-account form .input-text {
  width: 100%;
  padding: 0.625rem 0.75rem; /* px-3 py-2.5 */
  border-radius: 0.5rem; /* rounded-lg */
  border: 1px solid var(--input); /* border-input */
  background-color: var(--background); /* bg-background */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem;
  color: var(--foreground);
  transition: all 0.2s;
  box-sizing: border-box;
}

.woocommerce-account form .input-text:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 15%, transparent);
}

.woocommerce-account form .button {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.875rem 1rem;
  font-size: 1rem;
}

.woocommerce-account .woocommerce-form-login .woocommerce-form-login__rememberme {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  margin-top: 0.5rem;
}

.woocommerce-account .woocommerce-form-login .woocommerce-LostPassword {
  font-size: 0.875rem;
  margin-top: 1rem;
  text-align: center;
  display: block;
}

.woocommerce-account .woocommerce-form-login .woocommerce-LostPassword a {
  color: var(--muted-foreground);
  text-decoration: underline;
  transition: color 0.2s;
}

.woocommerce-account .woocommerce-form-login .woocommerce-LostPassword a:hover {
  color: var(--foreground);
}

/* Tableaux (Commandes, Téléchargements, etc.) */
.woocommerce table.shop_table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.woocommerce table.shop_table th {
  background-color: var(--secondary);
  color: var(--foreground);
  font-weight: 600;
  text-align: left;
  padding: 1rem;
  font-size: 0.875rem;
}

.woocommerce table.shop_table td {
  padding: 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.woocommerce table.shop_table .button {
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
}