/*
 * OH MY BUDDY — theme.css
 * Fichier requis par PrestaShop 8
 * Le style principal est dans ohmybuddy.css
 * Ce fichier importe et complète le style global
 */

/* Import du style principal */
@import url('ohmybuddy.css');

/*
 * Surcharges spécifiques PrestaShop
 * Ces classes sont générées par les modules natifs
 * et doivent être stylisées ici
 */

/* ===== CHECKOUT — PAIEMENT ===== */

/* Masquer le code promo dans la sidebar (il est affiché dans payment.tpl) */
#js-checkout-summary .block-promo { display: none !important; }

/* Bloc code promo dans l'étape paiement */
#checkout-payment-step .block-promo { margin: 24px 0; }
#checkout-payment-step .block-promo .promo-code-button { margin: 0; }
#checkout-payment-step .block-promo .promo-code-button a {
  color: var(--color-primary);
  font-size: 0.9rem;
  text-decoration: none;
  cursor: pointer;
}
#checkout-payment-step .block-promo .promo-code-button a:hover { text-decoration: underline; }
#checkout-payment-step .block-promo #promo-code { margin-top: 12px; }
#checkout-payment-step .block-promo .promo-code form {
  display: flex;
  gap: 8px;
  align-items: center;
}
#checkout-payment-step .block-promo .promo-input {
  flex: 1;
  padding: 10px 14px;
  border: 2px solid #e8e5df;
  border-radius: 6px;
  font-size: 0.9rem;
}
#checkout-payment-step .block-promo .cancel-promo {
  display: block;
  margin-top: 8px;
  font-size: 0.82rem;
  color: #aaa;
  cursor: pointer;
}

/* Bouton de paiement final (en bas, après le résumé) */
.payment-cta-block {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 2px solid #f0ede8;
}

/* Déplacement visuel des boutons binaires ps_checkout en bas du step paiement.
   Le HTML reste en premier (pour l'init du SDK), CSS order le déplace visuellement. */
#checkout-payment-step .step-edit-body,
#checkout-payment-step .step-content {
  display: flex !important;
  flex-direction: column !important;
}
#psc-binary-buttons { order: 20; }
.payment-cta-block    { order: 19; }
.block-promo          { order: 18; }
#order-summary-content{ order: 17; }
#conditions-to-approve{ order: 16; }
.payment-options      { order: 15; }
.js-cart-payment-step-refresh,
.cart-payment-step-refreshed-info { order: 1; }

/* Options de paiement — alignement horizontal */
.payment-option {
  display: flex !important;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid #f0ede8;
  float: none !important;
}
.payment-option:last-child { border-bottom: none; }

/* Radio natif bien aligné */
.payment-option .custom-radio { float: none !important; display: flex; align-items: center; flex-shrink: 0; }
.payment-option .custom-radio input[type="radio"] {
  width: 20px; height: 20px;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
}

/* Label aligné avec l'image logo */
.payment-option > label {
  display: flex !important;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 500;
  color: #2c2c2c;
  margin: 0;
}
.payment-option > label img { height: 28px; width: auto; display: block; }

/* Masquer le formulaire fallback (sans JS) */
.payment-option .ps-hidden-by-js { display: none !important; }

/* Formulaire de paiement ps_checkout visible (après retrait de ps-hidden par Classic's theme.js) */
.js-payment-option-form:not(.ps-hidden) {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  margin: 8px 0 12px 34px;
  padding: 12px 16px;
  background: #f7f6f2;
  border-radius: 8px;
  border-left: 3px solid var(--color-primary);
}

/* CGV — case à cocher visible et mise en avant */
#conditions-to-approve {
  margin: 20px 0;
  padding: 16px 20px;
  background: #f7f6f2;
  border: 2px solid #e8e5df;
  border-radius: 8px;
}
#conditions-to-approve ul { list-style: none; padding: 0; margin: 0; }
#conditions-to-approve li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
#conditions-to-approve .float-xs-left { float: none !important; }
#conditions-to-approve .custom-checkbox { display: flex; align-items: center; flex-shrink: 0; }
#conditions-to-approve input[type="checkbox"].accept-cgv {
  display: block !important;
  width: 20px; height: 20px;
  accent-color: var(--color-primary);
  cursor: pointer;
  flex-shrink: 0;
  margin: 2px 0 0;
}
/* Cacher le span custom de PS (icône matérielle) — on garde le natif */
#conditions-to-approve .custom-checkbox > span { display: none; }
#conditions-to-approve .condition-label { flex: 1; }
#conditions-to-approve .condition-label label {
  font-size: 0.88rem;
  font-weight: 600;
  color: #2c2c2c;
  cursor: pointer;
  line-height: 1.5;
}
#conditions-to-approve .condition-label label a { color: var(--color-primary); }

/* Bootstrap 4 Tabs — requis pour les onglets du checkout (informations personnelles) */
.tab-content > .tab-pane { display: none; }
.tab-content > .tab-pane.active { display: block; }

/* Onglets de choix : Commander en invité | Se connecter */
.nav.nav-inline {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  gap: 0;
  border-bottom: 2px solid #e8e5df;
}

.nav.nav-inline .nav-item { display: flex; align-items: center; }

.nav.nav-inline .nav-separator {
  color: #e8e5df;
  padding: 0 4px;
  font-size: 1.2rem;
  line-height: 1;
}

.nav.nav-inline .nav-link {
  display: block;
  padding: 12px 20px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #888;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
  cursor: pointer;
  white-space: nowrap;
}

.nav.nav-inline .nav-link:hover { color: var(--color-primary); }

.nav.nav-inline .nav-link.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 700;
}

/* Bootstrap 4 Modal — CSS minimal requis par ps_productcomments (le JS vient de Classic's theme.js) */
.modal-open { overflow: hidden; }
.modal { position: fixed; top: 0; left: 0; z-index: 1050; display: none; width: 100%; height: 100%; overflow: hidden; outline: 0; }
.modal-dialog { position: relative; width: auto; margin: 0.5rem; pointer-events: none; }
.modal.fade .modal-dialog { transition: transform .3s ease-out; transform: translateY(-50px); }
.modal.show .modal-dialog { transform: none; }
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 1rem); }
.modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background: #fff; border: 1px solid rgba(0,0,0,.2); border-radius: 6px; outline: 0; box-shadow: 0 8px 40px rgba(0,0,0,.2); }
.modal-backdrop { position: fixed; top: 0; left: 0; z-index: 1040; width: 100vw; height: 100vh; background: #000; }
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show { opacity: .5; }
.modal-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid #e8e5df; }
.modal-title { margin: 0; font-weight: 700; font-size: 1.1rem; }
.modal-body { position: relative; flex: 1 1 auto; padding: 1.25rem; }
.modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 1rem 1.25rem; border-top: 1px solid #e8e5df; }
.modal .close { background: none; border: none; font-size: 1.5rem; cursor: pointer; opacity: .5; line-height: 1; padding: 0; }
.modal .close:hover { opacity: 1; }
@media (min-width: 576px) {
  .modal-dialog { max-width: 500px; margin: 1.75rem auto; }
  .modal-dialog-centered { min-height: calc(100% - 3.5rem); }
}
.modal-lg, .modal-xl { max-width: 760px; }

/* Mécanisme de visibilité JS de PrestaShop (requis par ps_checkout et tous les modules) */
.ps-shown-by-js { display: none; }
.js .ps-shown-by-js { display: block; }
.js .ps-hidden-by-js { display: none !important; }
/* ps-hidden : masque les éléments non sélectionnés */
.ps-hidden { display: none !important; }

/* EXCEPTION pour les formulaires de paiement ACDC (ps_checkout Bancontact) :
   les iframes PayPal ne peuvent pas s'initialiser dans display:none.
   On les garde dans le DOM mais hors-écran, sans impact sur la mise en page. */
.js-payment-option-form.ps-hidden {
  display: block !important;
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* Masquer les boutons TouchSpin injectés par Classic's theme.js
   Cacher UNIQUEMENT les boutons, pas le wrapper (qui contient notre input) */
.bootstrap-touchspin .input-group-btn-vertical,
.btn-touchspin { display: none !important; }

/* Le wrapper TouchSpin ne doit pas casser notre mise en page */
.bootstrap-touchspin.input-group {
  display: contents !important;
}

/* Supprimer le spinner natif des input[type=number] */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* Masquer les blocs de modules injectés par displayFooter hook (ps_linklist, ps_contactinfo…)
   Notre footer custom est complet — seuls .footer-inner et .footer-bottom doivent s'afficher */
#footer > *:not(.footer-inner):not(.footer-bottom) {
  display: none !important;
}

/* ---- MODULES NATIFS PRESTASHOP ---- */

/* Bloc recherche */
.blocksearch {
  position: relative;
}

.blocksearch .ui-autocomplete-input {
  width: 100%;
  padding: 10px 16px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.9rem;
  transition: var(--transition);
  background: var(--color-white);
  color: var(--color-text);
}

.blocksearch .ui-autocomplete-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59,94,69,0.1);
}

/* Bloc panier */
.blockcart {
  position: relative;
}

.blockcart .cart-products-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--color-accent);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- FORMULAIRES PRESTASHOP ---- */

.form-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  margin-bottom: 0;
}

.form-control-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}

.form-control-label .required {
  color: var(--color-accent);
  margin-left: 2px;
}

.form-control {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-white);
  transition: var(--transition);
  appearance: none;
}

.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59,94,69,0.1);
}

.form-control.is-invalid {
  border-color: #C0392B;
}

.form-control select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B6B6B' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
}

.invalid-feedback {
  color: #C0392B;
  font-size: 0.78rem;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ---- BOUTONS PRESTASHOP ---- */

.btn.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary {
  background: var(--color-primary);
  color: var(--color-white);
  border: none;
  padding: 14px 32px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn.btn-primary:hover,
button.btn-primary:hover,
input[type="submit"].btn-primary:hover {
  background: var(--color-primary-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  color: var(--color-white);
}

.btn.btn-secondary,
button.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
  padding: 12px 28px;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}

.btn.btn-secondary:hover {
  background: var(--color-primary);
  color: white;
  transform: translateY(-2px);
}

/* ---- MESSAGES FLASH PRESTASHOP ---- */

.alert {
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.alert-success {
  background: #EBF7EE;
  color: #2D6A3F;
  border-left: 4px solid #3B5E45;
}

.alert-danger,
.alert-error {
  background: #FDEDED;
  color: #922B2B;
  border-left: 4px solid #C0392B;
}

.alert-warning {
  background: #FEF9E7;
  color: #7D6608;
  border-left: 4px solid #C8922A;
}

.alert-info {
  background: #EBF4FF;
  color: #1A56DB;
  border-left: 4px solid #3B82F6;
}

/* ---- MODULE AVIS CLIENTS ---- */

.product-comment-list-item {
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}

.grade-stars span {
  color: var(--color-accent);
  font-size: 1rem;
}

/* ---- MODULE FACETTES / FILTRES ---- */

.facets-title {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 12px;
}

.facet-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--color-text-light);
  cursor: pointer;
  padding: 4px 0;
  transition: var(--transition);
}

.facet-label:hover { color: var(--color-primary); }

.facet-label input[type="checkbox"] {
  accent-color: var(--color-primary);
  width: 15px;
  height: 15px;
}

/* Masquer le bouton OK du filtre (ps_facetedsearch) */
#search_filter_controls { display: none !important; }

/* ---- MODULE REASSURANCE ---- */

.block-reassurance-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
}

.block-reassurance-item img {
  width: 32px;
  height: 32px;
}

/* ---- WISHLIST ---- */

.wishlist-button-add {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  background: rgba(255,255,255,0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--transition);
  border: none;
  box-shadow: var(--shadow-sm);
  z-index: 4;
}

.wishlist-button-add:hover {
  background: var(--color-accent);
  color: white;
  transform: scale(1.1);
}

/* ---- MODULE NEWSLETTER ---- */

.block_newsletter form {
  display: flex;
  gap: 12px;
}

.block_newsletter input[type="email"] {
  flex: 1;
  padding: 14px 20px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  background: var(--color-white);
  color: var(--color-text);
  transition: var(--transition);
}

.block_newsletter input[type="email"]:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59,94,69,0.1);
}

/* ---- RESPONSIVE GLOBAL ---- */

@media (max-width: 768px) {
  .block_newsletter form {
    flex-direction: column;
  }
}

/* FIN DU FICHIER theme.css */
/* ===== CHECKOUT - PAGE COMMANDE ===== */

/* Conteneur principal */
#checkout, .page-checkout {
  max-width: 1100px;
  margin: 0 auto;
  padding: 30px 20px;
}

/* Étapes du checkout */
.checkout-step {
  background: #fff;
  border: 1px solid #e0ddd6;
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 24px 30px;
}

/* Titre des étapes */
.checkout-step .step-title,
.checkout-step h1,
.checkout-step h2 {
  font-size: 18px;
  font-weight: 600;
  color: #2c2c2c;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e8e5df;
}

/* Labels */
.checkout-step label,
.checkout-step .form-control-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #444;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Inputs, selects */
.checkout-step input[type="text"],
.checkout-step input[type="email"],
.checkout-step input[type="password"],
.checkout-step input[type="date"],
.checkout-step select,
.checkout-step textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  color: #333;
  background: #fafafa;
  transition: border-color 0.2s;
  margin-bottom: 16px;
}

.checkout-step input:focus,
.checkout-step select:focus {
  border-color: #3a6b4a;
  outline: none;
  background: #fff;
}

/* Grille des champs */
.checkout-step .form-group,
.checkout-step .col-md-6 {
  margin-bottom: 14px;
}

/* Sections invité vs connexion */
.checkout-step .sign-in,
.checkout-step .no-account {
  padding: 16px;
  background: #f7f6f2;
  border-radius: 6px;
  margin-bottom: 16px;
}

/* Bouton CONTINUER */
.checkout-step button[type="submit"],
.checkout-step .btn-primary,
.checkout-step .continue {
  background-color: #3a6b4a;
  color: #fff;
  border: none;
  padding: 13px 32px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s;
}

.checkout-step button[type="submit"]:hover,
.checkout-step .btn-primary:hover {
  background-color: #2e5539;
}

/* Bouton AFFICHER (mot de passe) */
.checkout-step .btn-show-password,
.checkout-step .show-password {
  background: #f0ede8;
  color: #555;
  border: 1px solid #ddd;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
}

/* Checkboxes */
.checkout-step .custom-checkbox,
.js .checkout-step .ps-shown-by-js {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #555;
  line-height: 1.5;
}

/* Textes d'aide sous les inputs */
.checkout-step .form-text,
.checkout-step small {
  font-size: 11px;
  color: #999;
  margin-top: -10px;
  margin-bottom: 10px;
  display: block;
}

/* Masquer images produits dans le résumé du panier checkout */
.checkout-step .product-image,
.cart-summary .product-image,
.cart-detailed-totals .product-image,
#order-summary .cart-items .product-line-grid-left,
.cart-item .product-line-grid-left {
  display: none !important;
}

/* Réajuster la largeur du bloc produit sans l'image */
#order-summary .cart-items .product-line-grid-body,
.cart-item .product-line-grid-body {
  width: 100% !important;
  flex: 1 !important;
}

/* ===== CHECKOUT - Bouton "Modifier" (crayon) ===== */

/* Réduire la taille du texte "Modifier" / "edit" */
.step-edit {
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
  margin-left: 10px;
}

/* Réduire l'icône crayon à la même petite taille */
.step-edit .material-icons.edit {
  font-size: 13px !important;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* S'assurer que le lien est cliquable et visible */
.step-edit a,
.step-edit.step-to-addresses,
.step-edit.step-to-delivery {
  cursor: pointer;
  color: #3a6b4a;
  text-decoration: none;
}

.step-edit a:hover,
.step-edit.step-to-addresses:hover,
.step-edit.step-to-delivery:hover {
  text-decoration: underline;
  color: #2e5539;
}

/* ===== MASQUER images dans le résumé final de commande ===== */

/* Table des articles de la commande */
#order-summary-content .product-image,
#order-summary-content img,
.order-final-summary-table img,
table.cart-summary-products img,
.cart-summary-product-line img,
#cart-summary-product-list img {
  display: none !important;
}

/* Masquer aussi la colonne image si elle existe en tant que cellule */
#order-summary-content td:first-child img,
#order-summary-content .cart-summary-quantity ~ td img {
  display: none !important;
}

/* ===== CATEGORY CARDS - Photo de fond ===== */

/* =============================================
   Arbre de catégories (ps_categorytree)
   ============================================= */
.block-categories { font-size: 0.92rem; }

.block-categories .category-top-menu,
.block-categories .category-sub-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Ligne de catégorie niveau 0 */
.block-categories .category-top-menu > li,
.block-categories .category-sub-menu > li[data-depth="0"] {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0;
  position: relative;
}

/* Indicateur cercle */
.cat-indicator {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #2c2c2c;
  background: #fff;
  flex-shrink: 0;
  transition: background 0.15s;
}
.cat-indicator.active,
li.current > .cat-indicator {
  background: #2c2c2c;
}

/* Lien catégorie niveau 0 */
.block-categories .category-top-menu > li > a,
.block-categories li[data-depth="0"] > a {
  color: #2c2c2c;
  text-decoration: none;
  font-weight: 500;
  flex: 1;
}
.block-categories li[data-depth="0"] > a.active,
.block-categories li.current > a {
  font-weight: 700;
  color: var(--color-primary);
}

/* Bouton toggle +/- */
.cat-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f7f6f2;
  cursor: pointer;
  padding: 0;
  color: #555;
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}
.cat-toggle-icon::before { content: '+'; }
.cat-toggle[aria-expanded="true"] .cat-toggle-icon::before { content: '−'; }

/* Sous-catégories (collapsible) */
.cat-children {
  display: none;
  width: 100%;
  padding-left: 18px;
}
.cat-children.open { display: block; }

/* Sous-catégories (depth > 0) */
.block-categories li[data-depth="1"],
.block-categories li[data-depth="2"] {
  padding: 3px 0;
  list-style: none;
}
.block-categories .category-sub-link {
  color: #555;
  text-decoration: none;
  font-size: 0.88rem;
  display: block;
  padding: 1px 0;
}
.block-categories .category-sub-link:hover,
.block-categories li.current > .category-sub-link { color: var(--color-primary); font-weight: 600; }

/* =============================================
   Cartes catégories (page accueil)
   ============================================= */
.category-card {
  border-radius: 16px;
  overflow: hidden;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}


/* Overlay sombre pour que le texte reste lisible */
.category-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.05) 0%,
    rgba(0,0,0,0.45) 100%
  );
  border-radius: 16px;
  z-index: 1;
}

/* Texte au-dessus de l'overlay */
.category-card-overlay,
.category-card-arrow {
  position: relative;
  z-index: 2;
}

/* Texte en blanc sur la photo */
.category-card-title {
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.category-card-count {
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.category-card-arrow {
  color: rgba(255,255,255,0.9);
}

/* ===== BOOTSTRAP CARD - classes utilisées par PS sur page-order-confirmation ===== */

.card {
  background: #fff;
  border: 1px solid #e8e5df;
  border-radius: 8px;
  margin-bottom: 20px;
}

.card-block {
  padding: 24px 28px;
}

.card-title {
  margin-top: 0;
  margin-bottom: 16px;
  font-weight: 700;
}

/* ===== ORDER CONFIRMATION - grille Bootstrap manquante ===== */

/* Bootstrap grid de base pour la confirmation commande */
.page-order-confirmation .row,
.order-confirmation-table .row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.page-order-confirmation [class*="col-"] {
  padding-right: 15px;
  padding-left: 15px;
  box-sizing: border-box;
}

/* Colonnes en-têtes */
.page-order-confirmation .col-md-6 { flex: 0 0 50%; max-width: 50%; }
.page-order-confirmation .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.page-order-confirmation .col-md-2 { flex: 0 0 16.666%; max-width: 16.666%; }
.page-order-confirmation .col-md-12 { flex: 0 0 100%; max-width: 100%; }

/* Ligne article dans le tableau */
.order-confirmation-table .order-line {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f0ede8;
}

/* Image produit : petite miniature */
.order-confirmation-table .order-line .col-sm-2 {
  flex: 0 0 70px;
  width: 70px;
  padding: 0 8px 0 0;
}

.order-confirmation-table .order-line .col-sm-2 img,
.order-confirmation-table .order-line .col-sm-2 picture {
  display: block;
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 6px;
}

.order-confirmation-table .order-line .col-sm-2 picture img {
  width: 56px;
  height: 56px;
  object-fit: cover;
}

/* Nom produit */
.order-confirmation-table .order-line .col-sm-4 {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  color: #2c2c2c;
}

/* Colonne prix/qté/total */
.order-confirmation-table .order-line .col-sm-6 {
  flex: 0 0 50%;
  width: 50%;
}

.order-confirmation-table .order-line .qty .row {
  display: flex;
  margin: 0;
}

.order-confirmation-table .order-line .qty .col-xs-4 {
  flex: 0 0 33.333%;
  text-align: center;
  font-size: 0.9rem;
  padding: 0;
}

.order-confirmation-table .order-line .qty .bold {
  font-weight: 600;
}

/* Séparation entre "Mode de livraison" et le tableau des articles */
#order-items {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 2px solid #e8e5df;
}

/* En-têtes du tableau */
#order-items > .row {
  align-items: flex-end;
  padding-bottom: 8px;
  border-bottom: 2px solid #e8e5df;
  margin-bottom: 0;
}

#order-items > .row .card-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #777;
  margin: 0;
  font-weight: 600;
}

#order-items > .row .col-md-6 .card-title {
  color: #2c2c2c;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
}

.text-md-center { text-align: center; }

/* Tableau des totaux */
.order-confirmation-table table {
  width: 50%;
  margin-left: auto;
  margin-top: 16px;
  font-size: 0.9rem;
}

.order-confirmation-table table td {
  padding: 4px 8px;
}

.order-confirmation-table table td:last-child {
  text-align: right;
}

.order-confirmation-table table .total-value td {
  font-weight: 700;
  font-size: 1rem;
  padding-top: 10px;
  border-top: 2px solid #e8e5df;
}

/* Section détails commande */
#order-details {
  margin-top: 24px;
  padding: 20px;
  background: #f7f6f2;
  border-radius: 8px;
  font-size: 0.9rem;
}

#order-details .h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 12px;
}

#order-details ul {
  list-style: none;
  padding: 0;
  margin: 0;
  line-height: 1.8;
}

/* Centrage de la page entière */
.page-order-confirmation #main {
  max-width: 860px;
  margin: 32px auto;
  padding: 0 20px;
}

/* En-tête confirmation */
#content-hook_order_confirmation {
  border-left: 4px solid #3B5E45;
}

#content-hook_order_confirmation .h1 {
  color: #3B5E45;
  font-size: 1.3rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

#content-hook_order_confirmation .material-icons {
  font-size: 1.5rem;
  color: #3B5E45;
}

/* Section paiement (ps_checkout hook) */
#content-hook_payment_return {
  font-size: 0.875rem;
}

#content-hook_payment_return .col-md-12 {
  width: 100%;
}

#content-hook_payment_return dl,
#content-hook_payment_return dt,
#content-hook_payment_return dd,
#content-hook_payment_return p,
#content-hook_payment_return span {
  color: #2c2c2c !important;
}

#content-hook_payment_return a {
  color: #3B5E45;
}

#content-hook_payment_return dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 24px;
  margin: 0;
}

#content-hook_payment_return dt {
  font-weight: 600;
  color: #555 !important;
}

#content-hook_payment_return dd {
  margin: 0;
}

/* Responsive mobile */
@media (max-width: 767px) {
  .page-order-confirmation ._desktop-title { display: none !important; }
  .page-order-confirmation .col-md-6,
  .page-order-confirmation .col-md-4,
  .page-order-confirmation .col-md-2,
  .page-order-confirmation .col-md-12 { flex: 0 0 100%; max-width: 100%; }
  .order-confirmation-table .order-line .col-sm-6 { flex: 0 0 100%; width: 100%; margin-top: 8px; }
  .order-confirmation-table table { width: 100%; }
  .page-order-confirmation #main { margin: 16px auto; }
}

/* ===== CART PAGE ===== */

.page-cart #main {
  max-width: var(--max-width);
  margin: 32px auto;
  padding: 0 20px;
}

/* Deux colonnes : produits (gauche) + totaux (droite) */
.page-cart .cart-grid {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}
.page-cart .cart-grid-body { flex: 1; min-width: 0; }
.page-cart .cart-grid-right { width: 300px; flex-shrink: 0; }

/* Carte produits */
.page-cart .cart-container { border-radius: 8px; overflow: hidden; }
.page-cart .cart-container .card-block { padding: 20px 24px 8px; }
.page-cart .cart-container .h1 { font-size: 1.3rem; margin: 0; }
.page-cart .separator { border: none; border-top: 1px solid #f0ede8; margin: 0; }

/* Liste articles */
.page-cart .cart-items { list-style: none; padding: 0 24px; margin: 0; }
.page-cart .cart-item { padding: 16px 0; border-bottom: 1px solid #f0ede8; }
.page-cart .cart-item:last-child { border-bottom: none; }

/* Ligne produit : flex à plat */
.page-cart .product-line-grid {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Image */
.page-cart .product-line-grid-left { flex: 0 0 64px; }
.page-cart .product-line-grid-left picture { display: block; }
.page-cart .product-line-grid-left img {
  width: 64px; height: 64px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}

/* Nom + prix unitaire */
.page-cart .product-line-grid-body { flex: 1; min-width: 0; }
.page-cart .product-line-info.label a {
  font-weight: 600;
  color: #2c2c2c;
  text-decoration: none;
  font-size: 0.9rem;
  display: block;
  margin-bottom: 4px;
}
.page-cart .product-line-info.label a:hover { color: var(--color-primary); }
.page-cart .product-price .price { font-size: 0.85rem; color: #666; }
.page-cart .regular-price { text-decoration: line-through; color: #aaa; font-size: 0.8rem; }

/* Colonne droite : qté + total + supprimer
   On aplatit la grille Bootstrap imbriquée */
.page-cart .product-line-grid-right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
}
.page-cart .product-line-grid-right > .row { display: contents; }
.page-cart .product-line-grid-right .col-xs-4.hidden-md-up { display: none !important; }
.page-cart .product-line-grid-right .col-md-10 { display: contents; }
.page-cart .product-line-grid-right .col-md-10 > .row { display: contents; }
.page-cart .product-line-grid-right .col-md-2 { display: contents; }

/* Contrôle quantité dans le panier */
.page-cart .cart-qty {
  display: flex;
  align-items: center;
  border: 2px solid #e8e5df;
  border-radius: 6px;
  overflow: hidden;
}
.page-cart .cart-qty .qty-btn {
  width: 30px; height: 34px;
  background: #f7f6f2;
  border: none; cursor: pointer;
  font-size: 1rem; color: #2c2c2c;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.page-cart .cart-qty .qty-btn:hover { background: var(--color-primary); color: white; }
.page-cart .cart-qty .js-cart-line-product-quantity {
  width: 48px; height: 34px;
  border: none; text-align: center;
  font-size: 1rem; font-weight: 700;
  color: #2c2c2c;
  background: white;
  -moz-appearance: textfield; appearance: textfield;
}
.page-cart .cart-qty .js-cart-line-product-quantity::-webkit-inner-spin-button,
.page-cart .cart-qty .js-cart-line-product-quantity::-webkit-outer-spin-button { -webkit-appearance: none; appearance: none; }

/* Total produit */
.page-cart .product-price strong { font-weight: 700; font-size: 0.95rem; white-space: nowrap; }

/* Supprimer */
.page-cart .cart-line-product-actions { display: flex; }
.page-cart .remove-from-cart { color: #bbb; text-decoration: none; display: flex; align-items: center; }
.page-cart .remove-from-cart:hover { color: #c0392b; }
.page-cart .remove-from-cart .material-icons { font-size: 1.1rem; }

/* Continuer mes achats */
.page-cart a.label {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--color-primary); font-size: 0.85rem;
  margin: 12px 0 0 0; text-decoration: none;
}
.page-cart a.label:hover { text-decoration: underline; }

/* Panneau totaux (droite) */
.page-cart .cart-summary { position: sticky; top: 80px; }
.page-cart .cart-summary .card-block { padding: 20px; }

.page-cart .cart-summary-line {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 0.9rem;
  border-bottom: 1px solid #f0ede8;
}
.page-cart .cart-summary-line .label { color: #555; }
.page-cart .cart-summary-line .value { font-weight: 500; }

.page-cart .cart-total-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0 8px;
  font-weight: 700;
  font-size: 1.05rem;
}

/* Coupon */
.page-cart .cart-voucher { margin-top: 12px; }
.page-cart .cart-voucher input[type=text] {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid #e8e5df;
  border-radius: 6px;
  font-size: 0.9rem;
  margin-bottom: 8px;
  box-sizing: border-box;
}
.page-cart .cart-voucher .btn {
  width: 100%;
  justify-content: center;
}

/* Bouton Commander */
.page-cart .cart-detailed-actions { padding: 16px 0 0; }
.page-cart .cart-detailed-actions .btn {
  display: flex; width: 100%; justify-content: center;
}

/* Responsive */
@media (max-width: 768px) {
  .page-cart .cart-grid { flex-direction: column; }
  .page-cart .cart-grid-right { width: 100%; position: static; }
  .page-cart .product-line-grid { flex-wrap: wrap; }
  .page-cart .product-line-grid-right { width: 100%; margin-left: 80px; }
}