/* ============================================================
   custom.css — Habrita (groupe Foresta)
   LiteCart theme overrides + composants homepage
   Police : Asap (Google Fonts)
   Breakpoints : SM 576 / MD 768 / LG 992 / XL 1200 / XXL 1400
   ============================================================ */


/* ============================================================
   1. VARIABLES LITECART (remappées aux couleurs Habrita)
   ============================================================ */
:root {
  /* Couleurs Habrita */
  --hb-green:          #2e5e25;   /* vert primaire AAA — ratio 7.65 sur blanc */
  --hb-green-dark:     #245020;
  --hb-green-light:    #525c4e;   /* vert clair AAA — ratio 7.00 sur blanc  */
  --hb-teal:           #005563;   /* bleu-pétrole AAA — ratio 8.47 sur blanc */
  --hb-black:          #1a1a18;
  --hb-ink:            #2c2c2a;
  --hb-muted:          #6b6b68;
  --hb-border:         #e8e8e5;
  --hb-surface:        #f7f7f5;
  --hb-warm:           #faf9f6;
  --hb-white:          #ffffff;
  --hb-font:           'Asap', sans-serif;
  --hb-r:              4px;
  --hb-ease:           cubic-bezier(.4, 0, .2, 1);
  --hb-t:              .22s;
  --hb-max:            1280px;
  --hb-pad:            48px;

  /* Variables LiteCart remappées */
  --border-radius:                          var(--hb-r);
  --gutter-x:                               0.5rem;
  --gutter-y:                               1rem;
  --link-text-color:                        var(--hb-ink);
  --shadow-color:                           rgba(0, 0, 0, 0.12);
  --whitespace-color:                       var(--hb-surface);
  --site-background-color:                  var(--hb-white);
  --sidebar-width:                          300px;

  --header-background-color:                transparent;
  --header-text-color:                      var(--hb-ink);

  --important-notice-background-color:      var(--hb-black);
  --important-notice-text-color:            var(--hb-white);

  --cookie-notice-background-color:         rgba(26, 26, 24, 0.82);
  --cookie-notice-text-color:               var(--hb-white);

  --navigation-background-color:            var(--hb-white);
  --navigation-background-color-hover:      var(--hb-surface);
  --navigation-background-color-active:     rgba(46, 94, 37, 0.08);
  --navigation-text-color:                  var(--hb-ink);
  --navigation-text-color-hover:            var(--hb-green);
  --navigation-text-color-active:           var(--hb-green);
  --offcanvas-background-color:             var(--hb-white);
  --offcanvas-text-color:                   var(--hb-ink);

  --default-background-color:               var(--hb-white);
  --default-border-color:                   var(--hb-border);
  --default-line-height:                    1.5;
  --default-text-font:                      var(--hb-font);
  --default-text-color:                     var(--hb-ink);
  --default-text-size:                      16px;

  --default-button-background-color:        var(--hb-green);
  --default-button-background-color-hover:  var(--hb-green-dark);
  --default-button-background-color-active: var(--hb-white);
  --default-button-border-color:            rgba(0, 0, 0, 0.075);
  --default-button-text-color:              var(--hb-white);

  --primary-button-background-color:        var(--hb-green);
  --primary-button-background-color-hover:  var(--hb-green-dark);
  --primary-button-background-color-active: #bdbdbd;
  --primary-button-border-color:            rgba(0, 0, 0, 0.075);
  --primary-button-text-color:              var(--hb-white);

  --secondary-button-background-color:       var(--hb-white);
  --secondary-button-background-color-hover: var(--hb-surface);
  --secondary-button-background-color-active: var(--hb-white);
  --secondary-button-border-color:           var(--hb-green);
  --secondary-button-text-color:             var(--hb-green);

  --success-button-background-color:        var(--hb-green);
  --success-button-background-color-hover:  var(--hb-green-dark);
  --success-button-background-color-active: #89b82e;
  --success-button-border-color:            rgba(0, 0, 0, 0.075);
  --success-button-text-color:              var(--hb-white);

  --warning-button-background-color:        #f0ad4e;
  --warning-button-background-color-hover:  #f2b866;
  --warning-button-background-color-active: #f1b25a;
  --warning-button-border-color:            rgba(0, 0, 0, 0.1);
  --warning-button-text-color:              #aa0000;

  --danger-button-background-color:         #d9534f;
  --danger-button-background-color-hover:   #de6764;
  --danger-button-background-color-active:  #db5d59;
  --danger-button-border-color:             rgba(0, 0, 0, 0.1);
  --danger-button-text-color:               var(--hb-white);

  --default-notice-background-color:        #e6e8ed;
  --default-notice-text-color:              #000;
  --default-notice-border-color:            #e6e8ed;
  --primary-notice-background-color:        #3ba5c6;
  --primary-notice-text-color:              var(--hb-white);
  --primary-notice-border-color:            #3ba5c6;
  --success-notice-background-color:        var(--hb-green);
  --success-notice-text-color:              var(--hb-white);
  --success-notice-border-color:            var(--hb-green);
  --warning-notice-background-color:        #ffcc66;
  --warning-notice-text-color:              #aa0000;
  --warning-notice-border-color:            #ffcc66;
  --danger-notice-background-color:         #d9534f;
  --danger-notice-text-color:               var(--hb-white);
  --danger-notice-border-color:             #d9534f;

  --breadcrumbs-background-color:           var(--hb-warm) !important;
  --breadcrumbs-text-color:                 var(--hb-muted);
  --breadcrumbs-border-color:               transparent;

  --card-background-color:                  transparent !important;
  --card-text-color:                        var(--hb-ink);
  --card-border-color:                      transparent !important;
  --card-header-background-color:           transparent;
  --card-header-text-color:                 var(--hb-ink);
  --card-body-background-color:             var(--hb-white);
  --card-footer-background-color:           var(--hb-surface);

  --input-background-color:                 var(--hb-surface);
  --input-padding-x:                        1.25em;
  --input-padding-y:                        0.5em;
  --input-text-color:                       var(--hb-black);
  --input-border-radius:                    var(--hb-r);

  --pills-background-color:                 transparent;
  --pills-background-color-active:          rgba(46, 94, 37, 0.10);
  --pills-background-color-hover:           var(--hb-surface);
  --pills-text-color:                       var(--hb-ink);
  --pills-text-color-active:                var(--hb-green);

  --tabs-pane-background-color:             var(--hb-surface);
  --tabs-pane-border-color:                 var(--hb-surface);
  --tabs-background-color:                  #e8e8eb;
  --tabs-background-color-active:           var(--hb-white);
  --tabs-text-color:                        var(--hb-ink);
  --tabs-text-color-active:                 var(--hb-green);
  --tabs-border-color:                      #e8e8eb;
  --tabs-border-color-active:               var(--hb-white);
  --tabs-content-background-color:          var(--hb-white);

  --dropdown-menu-background-color:          var(--hb-white);
  --dropdown-menu-item-background-color:     var(--hb-white);
  --dropdown-menu-item-text-color:           var(--hb-ink);

  --table-striped-row-background-odd:        var(--hb-surface);
  --table-striped-row-background-even:       var(--hb-white);
  --table-row-hover-background:              var(--hb-warm);

  --pagination-background-color:             var(--hb-white);
  --pagination-background-color-active:      var(--hb-green);
  --pagination-background-color-hover:       var(--hb-surface);
  --pagination-text-color:                   var(--hb-ink);
  --pagination-text-color-active:            var(--hb-white);
  --pagination-text-color-hover:             var(--hb-ink);
  --pagination-border-color:                 var(--hb-border);

  --footer-background-color:                 #343434;
  --footer-title-color:                      var(--hb-surface);
  --footer-text-color:                       var(--hb-surface);
  --copyright-background-color:              #2a2a28;
  --copyright-text-color:                    var(--hb-muted);
}

@media (min-width: 768px)  { :root { --gutter-x: 1rem;   --gutter-y: 1rem;   } }
@media (min-width: 992px)  { :root { --gutter-x: 1.5rem; --gutter-y: 1.5rem; } }
@media (min-width: 1200px) { :root { --gutter-x: 2rem;   --gutter-y: 2rem;   } }


/* ============================================================
   2. BASE
   ============================================================ */
body {
  font-family: var(--hb-font);
  color: var(--hb-ink);
  background: var(--hb-white);
  -webkit-font-smoothing: antialiased;
}
a             { color: var(--hb-green); transition: color var(--hb-t); }
a:hover       { color: var(--hb-green-dark); }
.full_width   { left: 0; width: 100%; }
.full_flex    { display: flex; width: 100%; }
.col_3        { width: 33%; align-items: flex-start; }


/* ============================================================
   3. TYPOGRAPHIE
   ============================================================ */
h1 { font-size: 40px; font-weight: 400; line-height: 47px; color: var(--hb-green); margin-bottom: 40px; }
h2 { font-size: 29px; font-weight: 300; line-height: 34px; color: var(--hb-green); margin-bottom: 30px; }
h3 { font-size: 18px; font-weight: 800; line-height: 24px; color: var(--hb-ink);   margin-bottom: 10px; }
h4 { font-size: 17px; font-weight: 700; line-height: 20px; }
h5 { font-size: 14px; font-weight: 600; line-height: 17px; }

.title { color: var(--hb-green); }
.breadcrumb { font-size: 14px !important; }
.breadcrumb-item.active { color: var(--hb-green); font-weight: 700; }
.sticker.new  { background: var(--hb-green) !important; }
.sticker.sale { border-radius: var(--hb-r); text-transform: uppercase; }


/* ============================================================
   4. HEADER & NAVIGATION
   ============================================================ */
.navbar                    { margin-bottom: 0 !important; }
.navbar-header.logotype    { width: 100% !important; }
.navbar-header .input-group { background-color: var(--hb-white) !important; }

#cart       { background-color: var(--hb-green) !important; }
#cart:hover { background-color: var(--hb-green-light) !important; text-decoration: none !important; }

.navbar-toggler          { background-color: var(--hb-surface) !important; border: 1px solid var(--hb-green) !important; }
.navbar-toggler .icon-bar { background-color: var(--hb-green); }

/* Barre catégories desktop */
#category-bar-menu {
  width: 100%;
  border-bottom: 1px solid var(--hb-border);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
  margin: 0 0 32px;
  padding: 0;
}
#category-bar-menu .fourteen-forty {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 10px 0;
}
#category-bar-menu a.category-link {
  text-decoration: none;
  color: var(--hb-muted);
  padding: 0 8px;
  text-transform: uppercase;
  font-size: 13px;
  white-space: nowrap;
  transition: color var(--hb-t);
}
#category-bar-menu a.category-link:hover { color: var(--hb-green); }

@media (max-width: 991px) { #category-bar-menu { display: none !important; } }


/* ============================================================
   5. LISTING PRODUITS & CARDS
   ============================================================ */
#box-campaign-products, #box-popular-products, #box-latest-products,
#box-categories, #box-similar-products, #box-checkout-cart,
#box-checkout-customer, #box-login, #box-checkout-summary {
  background-color: var(--hb-white);
  padding: 0 20px;
  text-align: center;
}
#box-campaign-products h2, #box-popular-products h2, #box-latest-products h2,
#box-categories h2, #box-similar-products h2, #box-checkout-cart h2,
#box-checkout-customer h2, #box-login h2 {
  font-size: 2.2rem !important;
  font-weight: 600;
  color: var(--hb-green);
  margin-bottom: 32px;
  letter-spacing: -0.5px;
}

#box-category .row  { background-color: var(--hb-white); padding-top: 8px; }
#box-category .title { margin-left: 16px; }

.filters .btn-group-inline .btn       { background-color: var(--hb-surface); color: var(--hb-green); }
.filters .btn-group-inline .btn:hover { background-color: var(--hb-green-dark); color: var(--hb-white); }
.filter .fa { color: var(--hb-green); }

.listing .product             { padding: 8px; min-height: 320px; }
.listing .product .name       { justify-content: flex-start !important; text-overflow: ellipsis !important; min-height: min-content; line-height: 1.2 !important; }
.listing .product .manufacturer-name { display: none; }
.listing.columns .product .price-wrapper { margin-top: auto; }
.listing .product .price-wrapper .price  { color: var(--hb-teal); font-weight: 600; }
.listing .product .link       { display: flex; flex-direction: column; height: 100%; }
.listing.columns .product .info { display: flex; flex-direction: column; flex-grow: 1; gap: 0.5rem; }


/* ============================================================
   6. FICHE PRODUIT
   ============================================================ */
#box-product form[name="buy_now_form"] { padding: 0; }
#box-product .price { font-weight: 600; color: var(--hb-teal); }
.offer-expires { display: none !important; }

/* Galerie */
.product-page .image-row     { text-align: center; margin-bottom: 1.5rem; }
.product-page .image-row img { width: 100%; border-radius: 8px; object-fit: cover; }
.thumbnails-row               { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.thumbnails-row .thumbnail    { border: none; background: transparent; padding: 0; }
.thumbnails-row img           { width: 100%; border-radius: var(--hb-r); transition: transform .3s, filter .3s; }
.thumbnails-row img:hover     { transform: scale(1.05); filter: brightness(.9); }
@media (max-width: 768px) { .thumbnails-row .col-xs-3 { flex: 0 0 45%; max-width: 45%; } }

/* Modale fiche technique */
.fp-modal         { display: none; position: fixed; z-index: 10000; inset: 0; background: rgba(0,0,0,.8); overflow: auto; }
.fp-modal-content { background: var(--hb-white); margin: 5% auto; padding: 20px; border: 1px solid #888; width: 90%; max-width: 900px; position: relative; border-radius: var(--hb-r); }
.fp-datasheet-img { max-width: 100%; height: auto; display: block; margin: 15px auto; border: 1px solid var(--hb-border); }
.fp-close-btn     { color: #aaa; float: right; font-size: 28px; font-weight: bold; position: absolute; top: 10px; right: 20px; cursor: pointer; }
.fp-close-btn:hover { color: var(--hb-black); }


/* ============================================================
   7. CHECKOUT
   ============================================================ */
#box-checkout #box-checkout-customer    { text-align: left !important; }
#box-checkout-customer .card-body .form-check { border: 0.25px solid var(--hb-ink); }

#box-checkout-payment > div > label.option.btn.btn-default.btn-block.active { color: #4d4d4d !important; }
#box-checkout-shipping .option.active,
#box-checkout-payment  .option.active  { background: rgba(46, 94, 37, .10); }
#box-checkout-payment > div > label   { color: #4d4d4d !important; }
#box-checkout-payment > div > label > div.header.row > div.col-xs-2.thumbnail { background-color: transparent; }
#box-checkout-payment > div > label.option.btn.btn-default.btn-block.active > div.header.row > div.col-xs-10.text-start > div.title { color: var(--hb-green); }
#box-checkout-payment > div > label.option.btn.btn-default.btn-block.active > div.header.row > div.col-xs-10.text-start > div.price { color: var(--hb-green-dark); }
#box-checkout-customer button[type=submit]:not([disabled]) { font-weight: bold; color: var(--hb-white); animation: flasher 1s linear infinite; }


/* ============================================================
   8. PAGES STATIQUES
   ============================================================ */
#box-page            { background-color: var(--hb-white) !important; }
#box-page.card       { border-style: none !important; box-shadow: none !important; }


/* ============================================================
   9. FOOTER
   ============================================================ */
footer,
#footer {
  background-color: var(--footer-background-color);
  color: var(--hb-white);
  padding: 50px 0 0;
}
footer h4 {
   color: var(--hb-white);
}
footer a,
#footer a { color: var(--hb-white); transition: color var(--hb-warm); }
footer a:hover,
#footer a:hover { color: var(--hb-muted); }

.hb-footer-bottom,
#footer-bottom {
  background-color: #2a2a28;
  text-align: center;
  padding: 20px;
  font-size: 14px;
  color: var(--hb-muted);
}
.links {
   margin-left: 40px;
}


/* ============================================================
   10. COMPOSANTS HOMEPAGE — SLIDER HERO
       Styles extraits de box_habrita_slider_hero.inc.php
       (décommenter et supprimer les <style> inline du .inc.php
       une fois le rendu validé en production)
   ============================================================ */
/*
.hb-slider { ... }
*/


/* ============================================================
   11. COMPOSANTS HOMEPAGE — HERO SECTION
       Styles extraits de habrita_hero.inc.php
       (décommenter et supprimer les <style> inline du .inc.php
       une fois le rendu validé en production)
   ============================================================ */
/*
.hb-hero { ... }
*/


/* ============================================================
   12. RESPONSIVE GLOBAL
   ============================================================ */
@media (max-width: 991px) { body { font-size: 14.4px; } }
@media (max-width: 767px) { body { font-size: 13.6px; } }
@media (max-width: 575px) { body { font-size: 12.8px; } }

/*
 * habrita-product.css
 * Override charte Habrita — fiche produit LiteCart
 *
 * ⚠️  Zéro modification PHP/JS.
 *     Tous les sélecteurs ciblent #box-product et ses enfants.
 *     Les prix sont masqués via display:none.
 */

/* ════════════════════════════════════════════════════════════
   0.  Variables locales
   ════════════════════════════════════════════════════════════ */
#box-product {
  --hb-accent:      #2e5e25;
  --hb-accent-dark: #245020;
  --hb-ink:         #2c2c2a;
  --hb-muted:       #6b6b68;
  --hb-border:      #e8e8e5;
  --hb-surface:     #f7f7f5;
  --hb-white:       #ffffff;
  --hb-font:        'Asap', sans-serif;
  --hb-r:           8px;
  --hb-t:           .22s;
  --hb-ease:        cubic-bezier(.4, 0, .2, 1);
}


/* ════════════════════════════════════════════════════════════
   1.  Conteneur article
   ════════════════════════════════════════════════════════════ */
#box-product {
  font-family: var(--hb-font);
  color: var(--hb-ink);
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 40px) clamp(16px, 4vw, 48px);
  box-sizing: border-box;
}

/* Cards LiteCart → réinitialisation propre */
#box-product .card {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  margin-bottom: 32px;
}
#box-product .card-body {
  padding: 0 !important;
}


/* ════════════════════════════════════════════════════════════
   2.  Zone images (colonne gauche)
   ════════════════════════════════════════════════════════════ */

/* Image principale */
#box-product .main-image {
  display: block;
  border: 1px solid var(--hb-border) !important;
  border-radius: var(--hb-r) !important;
  overflow: hidden;
  background: var(--hb-surface);
  padding: 0 !important;
  box-shadow: none !important;
  transition: box-shadow var(--hb-t) var(--hb-ease);
}
#box-product .main-image:hover {
  box-shadow: 0 6px 24px rgba(44, 44, 42, .1) !important;
}
#box-product .main-image img {
  width: 100%;
  object-fit: contain;
  background: var(--hb-surface);
  display: block;
  transition: transform .45s var(--hb-ease);
}
#box-product .main-image:hover img {
  transform: scale(1.03);
}

/* Galerie miniatures */
#box-product .thumbnails-row {
  margin-top: 16px !important;
  gap: 8px;
}
#box-product .extra-image {
  display: block;
  border: 1px solid var(--hb-border) !important;
  border-radius: 6px !important;
  overflow: hidden;
  background: var(--hb-surface);
  padding: 4px !important;
  box-shadow: none !important;
  transition: border-color var(--hb-t) var(--hb-ease),
              box-shadow  var(--hb-t) var(--hb-ease);
}
#box-product .extra-image:hover,
#box-product .extra-image.active {
  border-color: var(--hb-accent) !important;
  box-shadow: 0 0 0 2px rgba(46, 94, 37, .2) !important;
}
#box-product .extra-image img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
}

/* Sticker (nouveau, promo…) */
#box-product .sticker {
  font-family: var(--hb-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  background: var(--hb-accent) !important;
  color: var(--hb-white) !important;
  border-radius: 4px !important;
  padding: 3px 9px !important;
  border: none !important;
  box-shadow: none !important;
}


/* ════════════════════════════════════════════════════════════
   3.  Colonne infos (colonne droite)
   ════════════════════════════════════════════════════════════ */

/* Titre produit */
#box-product h1.title {
  font-family: var(--hb-font) !important;
  font-size: clamp(20px, 2.8vw, 30px) !important;
  font-weight: 600 !important;
  color: var(--hb-ink) !important;
  line-height: 1.2 !important;
  margin: 0 0 10px !important;
  border: none !important;
}

/* SKU / Code */
#box-product p > span,
#box-product .sku,
#box-product .code {
  font-family: var(--hb-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--hb-muted) !important;
  background: var(--hb-surface) !important;
  border: 1px solid var(--hb-border) !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
  display: inline-block !important;
  margin: 0 0 14px !important;
}

/* Description courte */
#box-product .short-description {
  font-family: var(--hb-font) !important;
  font-size: 15px !important;
  color: var(--hb-muted) !important;
  line-height: 1.75 !important;
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: none !important;
}

/* Marque/fabricant */
#box-product .manufacturer {
  margin: 0 0 16px !important;
}
#box-product .manufacturer img {
  max-height: 32px;
  width: auto;
  opacity: .75;
  transition: opacity var(--hb-t);
}
#box-product .manufacturer img:hover { opacity: 1; }
#box-product .manufacturer h3 {
  font-family: var(--hb-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--hb-muted) !important;
  margin: 0 !important;
}


/* ════════════════════════════════════════════════════════════
   4.  PRIX
   ════════════════════════════════════════════════════════════ */

/* Éléments toujours masqués */
#box-product .cheapest-shipping,
#box-product .tax,
#box-product .offer-expires {
  display: none !important;
}

/* Wrapper prix */
#box-product .price-wrapper {
  display: flex !important;
  align-items: baseline !important;
  flex-wrap: wrap !important;
  gap: 4px 10px !important;
  margin: 16px 0 !important;
}

/* Label "Prix conseillé" */
#box-product .price-wrapper::before {
  content: 'Prix conseillé';
  font-family: var(--hb-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--hb-muted) !important;
  display: block !important;
  width: 100% !important;
  margin-bottom: 2px !important;
}

/* Prix normal */
#box-product .price-wrapper .price {
  display: block !important;
  font-family: var(--hb-font) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--hb-ink) !important;
  line-height: 1.1 !important;
}

/* Prix barré (promo) */
#box-product .price-wrapper .regular-price {
  display: block !important;
  font-family: var(--hb-font) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: var(--hb-muted) !important;
  text-decoration: line-through !important;
}

/* Prix campagne (promo) */
#box-product .price-wrapper .campaign-price {
  display: block !important;
  font-family: var(--hb-font) !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: var(--hb-accent) !important;
}

/* Sur Devis — cas où price est le seul enfant et vaut "Sur Devis" */
#box-product .price-wrapper .price:only-child {
  color: var(--hb-muted) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  font-style: italic !important;
}


/* ════════════════════════════════════════════════════════════
   5.  Options produit (variantes)
   ════════════════════════════════════════════════════════════ */
#box-product .options {
  margin-bottom: 20px !important;
}
#box-product .options .form-group {
  margin-bottom: 14px !important;
}
#box-product .options label {
  font-family: var(--hb-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: var(--hb-muted) !important;
  display: block !important;
  margin-bottom: 6px !important;
}

/* Selects */
#box-product .options select {
  font-family: var(--hb-font) !important;
  font-size: 14px !important;
  color: var(--hb-ink) !important;
  background: var(--hb-white) !important;
  border: 1px solid var(--hb-border) !important;
  border-radius: var(--hb-r) !important;
  padding: 8px 36px 8px 12px !important;
  width: 100% !important;
  height: 44px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236b6b68'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  cursor: pointer !important;
  transition: border-color var(--hb-t) var(--hb-ease),
              box-shadow   var(--hb-t) var(--hb-ease) !important;
}
#box-product .options select:focus {
  outline: none !important;
  border-color: var(--hb-accent) !important;
  box-shadow: 0 0 0 3px rgba(46, 94, 37, .15) !important;
}

/* Radio / checkbox options */
#box-product .options input[type="radio"],
#box-product .options input[type="checkbox"] {
  accent-color: var(--hb-accent) !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
}


/* ════════════════════════════════════════════════════════════
   6.  Bouton CTA — "Demander un devis" / "Sur Devis"
       (le formulaire buy_now reste mais on recentre le CTA)
   ════════════════════════════════════════════════════════════ */
#box-product .buy_now {
  margin: 20px 0 !important;
  display: none;
}

/* Bouton submit caché (pas de panier sur ce site vitrine) */
#box-product .buy_now button[type="submit"],
#box-product .buy_now input[type="submit"],
#box-product .buy_now .btn-cart,
#box-product .buy_now .btn-add-to-cart {
  display: none !important;
}

/* Stock notice */
#box-product .stock-notice {
  font-family: var(--hb-font) !important;
  font-size: 13px !important;
  color: var(--hb-muted) !important;
  margin-top: 8px !important;
}
#box-product .stock-notice.warning { color: #b05a00 !important; }
#box-product .stock-notice.notice  { color: var(--hb-accent) !important; }

/* Out of stock */
#box-product .out-of-stock-notice {
  font-family: var(--hb-font) !important;
  font-size: 13px !important;
  color: #b05a00 !important;
  background: #fff8e4 !important;
  border-left: 3px solid #e8a000 !important;
  border-radius: 0 4px 4px 0 !important;
  padding: 10px 14px !important;
  margin-top: 12px !important;
}

/* Codes MPN / GTIN */
#box-product .codes {
  font-family: var(--hb-font) !important;
  font-size: 12px !important;
  color: var(--hb-muted) !important;
  margin: 0 0 16px !important;
}
#box-product .codes .value {
  font-weight: 600 !important;
  color: var(--hb-ink) !important;
}


/* ════════════════════════════════════════════════════════════
   7.  Partage social — masqué (ou discret)
   ════════════════════════════════════════════════════════════ */
#box-product .social-bookmarks {
  display: none !important;
  /* Si vous souhaitez le garder discret à la place de le cacher :
  opacity: .4;
  transition: opacity .2s;
  margin-top: 24px !important;
  */
}


/* ════════════════════════════════════════════════════════════
   8.  Section description + données techniques
   ════════════════════════════════════════════════════════════ */
#box-product .card:nth-child(2) {
  border-top: 1px solid var(--hb-border) !important;
  padding-top: 32px !important;
  margin-top: 8px !important;
}

/* Titres de section H3 */
#box-product h3 {
  font-family: var(--hb-font) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--hb-ink) !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  margin: 0 0 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid var(--hb-accent) !important;
  display: inline-block !important;
}

/* Zone description */
#box-product .description {
  font-family: var(--hb-font) !important;
  font-size: 15px !important;
  color: var(--hb-ink) !important;
  line-height: 1.8 !important;
}
#box-product .description p { margin-bottom: 12px !important; }
#box-product .description ul,
#box-product .description ol {
  padding-left: 20px !important;
  margin-bottom: 12px !important;
}
#box-product .description li { margin-bottom: 6px !important; }

/* Bouton fiche technique */
#box-product .description .btn.btn-default {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 16px !important;
  font-family: var(--hb-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--hb-accent) !important;
  background: transparent !important;
  border: 1.5px solid var(--hb-accent) !important;
  border-radius: var(--hb-r) !important;
  padding: 9px 18px !important;
  text-decoration: none !important;
  transition: background var(--hb-t) var(--hb-ease),
              color     var(--hb-t) var(--hb-ease) !important;
  box-shadow: none !important;
}
#box-product .description .btn.btn-default:hover {
  background: var(--hb-accent) !important;
  color: var(--hb-white) !important;
}


/* ════════════════════════════════════════════════════════════
   9.  Tableau données techniques
   ════════════════════════════════════════════════════════════ */
#box-product .technical-data {
  overflow-x: auto;
}
#box-product .technical-data .table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-family: var(--hb-font) !important;
  font-size: 14px !important;
  border: none !important;
}

/* En-têtes de groupe (th colspan) */
#box-product .technical-data .table th {
  font-family: var(--hb-font) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: var(--hb-accent) !important;
  background: rgba(46, 94, 37, .07) !important;
  padding: 10px 14px !important;
  border: none !important;
  border-bottom: 1px solid var(--hb-border) !important;
}

/* Lignes clé / valeur */
#box-product .technical-data .table td {
  padding: 9px 14px !important;
  border: none !important;
  border-bottom: 1px solid var(--hb-border) !important;
  line-height: 1.5 !important;
  vertical-align: middle !important;
}
#box-product .technical-data .table td:first-child {
  color: var(--hb-muted) !important;
  font-weight: 500 !important;
  width: 45% !important;
  white-space: nowrap !important;
}
#box-product .technical-data .table td:last-child {
  color: var(--hb-ink) !important;
  font-weight: 600 !important;
}

/* Zèbre discret */
#box-product .technical-data .table.table-striped tr:nth-child(even) td {
  background: var(--hb-surface) !important;
}
#box-product .technical-data .table tr:hover td {
  background: rgba(46, 94, 37, .04) !important;
}
#box-product .technical-data .table tr:last-child td {
  border-bottom: none !important;
}


/* ════════════════════════════════════════════════════════════
   10. CTA contact — bloc ajouté sous les infos produit
       (optionnel — à activer si un bouton "Demander un devis"
        est ajouté manuellement dans le template)
   ════════════════════════════════════════════════════════════ */
#box-product .hb-product-cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.hb-product-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 24px;
  font-family: var(--hb-font);
  font-size: 14px;
  font-weight: 700;
  border-radius: var(--hb-r);
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: background var(--hb-t) var(--hb-ease),
              transform  var(--hb-t) var(--hb-ease),
              box-shadow var(--hb-t) var(--hb-ease);
}
.hb-product-cta__btn--primary {
  background: var(--hb-accent);
  color: #fff !important;
}
.hb-product-cta__btn--primary:hover {
  background: var(--hb-accent-dark);
  box-shadow: 0 4px 16px rgba(46, 94, 37, .3);
  transform: translateY(-1px);
}
.hb-product-cta__btn--outline {
  background: transparent;
  color: var(--hb-accent) !important;
  border: 1.5px solid var(--hb-accent) !important;
}
.hb-product-cta__btn--outline:hover {
  background: var(--hb-accent);
  color: #fff !important;
  transform: translateY(-1px);
}


/* ════════════════════════════════════════════════════════════
   11. Responsive
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  #box-product {
    padding: 16px !important;
  }
  #box-product h1.title {
    font-size: 20px !important;
    margin-top: 20px !important;
  }
  #box-product .technical-data .table td:first-child {
    width: 50% !important;
    white-space: normal !important;
  }
  #box-product .hb-product-cta {
    flex-direction: column;
  }
  .hb-product-cta__btn { width: 100%; justify-content: center; }
}

/*
 * habrita-listing-product.css
 * Cartes produit — listing_product.inc.php
 *
 * ⚠️  Zéro modification PHP.
 *     Le SKU est affiché via content: attr(data-sku) — CSS pur.
 *     Les prix sont masqués.
 */

/* ════════════════════════════════════════════════════════════
   0. Variables
   ════════════════════════════════════════════════════════════ */
article.product {
  --hb-accent:      #2e5e25;
  --hb-accent-dark: #245020;
  --hb-ink:         #2c2c2a;
  --hb-muted:       #6b6b68;
  --hb-border:      #e8e8e5;
  --hb-surface:     #f7f7f5;
  --hb-white:       #ffffff;
  --hb-font:        'Asap', sans-serif;
  --hb-r:           8px;
  --hb-t:           .24s;
  --hb-ease:        cubic-bezier(.4, 0, .2, 1);
}


/* ════════════════════════════════════════════════════════════
   1. Carte — conteneur
   ════════════════════════════════════════════════════════════ */
article.product {
  position: relative;
  background: var(--hb-white);
  border: 1px solid var(--hb-border);
  border-radius: var(--hb-r);
  overflow: hidden;
  transition: box-shadow var(--hb-t) var(--hb-ease),
              transform  var(--hb-t) var(--hb-ease);
  display: flex;
  flex-direction: column;
  height: 100%;
}
article.product:hover {
  box-shadow: 0 8px 28px rgba(44, 44, 42, .11);
  transform: translateY(-2px);
}


/* ════════════════════════════════════════════════════════════
   2. Lien — wraps image + info
   ════════════════════════════════════════════════════════════ */
article.product .link {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  text-decoration: none !important;
  color: inherit !important;
  outline: none;
}
article.product .link:focus-visible {
  outline: 3px solid var(--hb-accent) !important;
  outline-offset: 2px !important;
  border-radius: var(--hb-r) !important;
}


/* ════════════════════════════════════════════════════════════
   3. Zone image
   ════════════════════════════════════════════════════════════ */
article.product .image-wrapper {
  position: relative;
  overflow: hidden;
  background: var(--hb-surface);
  border-bottom: 1px solid var(--hb-border);
  flex-shrink: 0;
}
article.product .image-wrapper img.image {
  width: 100% !important;
  height: 200px !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  background: var(--hb-surface) !important;
  transition: transform .45s var(--hb-ease) !important;
}
article.product:hover .image-wrapper img.image {
  transform: scale(1.05) !important;
}

/* Sticker */
article.product .sticker {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  font-family: var(--hb-font) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  background: var(--hb-accent) !important;
  color: var(--hb-white) !important;
  border-radius: 4px !important;
  padding: 3px 8px !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 2 !important;
}


/* ════════════════════════════════════════════════════════════
   4. Zone infos
   ════════════════════════════════════════════════════════════ */
article.product .info {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding: 14px 16px 16px !important;
  gap: 4px !important;
}

/* Nom produit */
article.product .info .name {
  font-family: var(--hb-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--hb-ink) !important;
  line-height: 1.35 !important;
  margin: 0 0 4px !important;

  /* Tronque à 2 lignes */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
article.product:hover .info .name {
  color: var(--hb-accent) !important;
  transition: color var(--hb-t) var(--hb-ease) !important;
}

/* Fabricant */
article.product .info .manufacturer-name {
  font-family: var(--hb-font) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--hb-muted) !important;
  min-height: 16px !important;
}

/* Description courte — masquée sur les cards pour garder un design compact */
article.product .info .description {
  display: none !important;
}


/* ════════════════════════════════════════════════════════════
   5. Prix — masqués
      Remplacés par le badge SKU via attr(data-sku) sur .link
   ════════════════════════════════════════════════════════════ */
article.product .price-wrapper {
  display: none !important;
}

/* Badge SKU — injecté en CSS pur via attr(data-sku) sur .link */
article.product .link::after {
  content: attr(data-sku);
  display: block;
  font-family: var(--hb-font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--hb-muted);
  background: var(--hb-surface);
  border: 1px solid var(--hb-border);
  border-radius: 4px;
  padding: 3px 8px;
  width: fit-content;
  margin: auto 16px 14px; /* pousse en bas de la card */
}


/* ════════════════════════════════════════════════════════════
   6. Bouton aperçu rapide
   ════════════════════════════════════════════════════════════ */
article.product .preview {
  position: absolute !important;
  bottom: 14px !important;
  right: 12px !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--hb-white) !important;
  border: 1px solid var(--hb-border) !important;
  border-radius: 50% !important;
  color: var(--hb-muted) !important;
  font-size: 13px !important;
  box-shadow: none !important;
  cursor: pointer !important;
  opacity: 0 !important;
  transform: scale(.8) translateY(4px) !important;
  transition: opacity    var(--hb-t) var(--hb-ease),
              transform  var(--hb-t) var(--hb-ease),
              background var(--hb-t) var(--hb-ease),
              color      var(--hb-t) var(--hb-ease) !important;
  z-index: 3 !important;
}
article.product:hover .preview {
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
}
article.product .preview:hover {
  background: var(--hb-accent) !important;
  border-color: var(--hb-accent) !important;
  color: var(--hb-white) !important;
}
article.product .preview:focus-visible {
  outline: 3px solid var(--hb-accent) !important;
  outline-offset: 2px !important;
  opacity: 1 !important;
  transform: scale(1) translateY(0) !important;
}


/* ════════════════════════════════════════════════════════════
   7. Responsive — hauteur image adaptée
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  article.product .image-wrapper img.image {
    height: 180px !important;
  }
}
@media (max-width: 767px) {
  article.product .image-wrapper img.image {
    height: 150px !important;
    padding: 12px !important;
  }
  article.product .info {
    padding: 12px 14px 14px !important;
  }
  article.product .link::after {
    margin: auto 14px 12px !important;
  }
  /* Bouton aperçu toujours visible sur mobile (pas de hover) */
  article.product .preview {
    opacity: 1 !important;
    transform: scale(1) translateY(0) !important;
  }
}


/*Masquage affichage image catégorie*/
#box-category > div.row > div.hidden-xs.hidden-sm.col-md-4 {
  display: none;
}