/* ============================================================
   BIJOUX HÉLÈNE RIU — Visual Fixes CSS
   iter-33 audit 2026-04-25 — FP3 neutralisée supprimée, touch-target/show-password dédupliqués
   ============================================================ */

/* ── 1. NEWSLETTER MODULE (block_newsletter) ─────────────── */
/* Bug: module PS natif injecte background blanc */
#blockEmailSubscription_displayFooterBefore,
.block_newsletter,
#ps_emailsubscription,
.ps_emailsubscription_module,
[id*="blockEmailSubscription"] {
  background: var(--night-2) !important;
  border: 1px solid rgba(212, 181, 112, 0.15) !important;
  color: var(--moon) !important;
  padding: 2rem !important;
}
.block_newsletter h2,
.block_newsletter .h2,
.block_newsletter p,
[id*="blockEmailSubscription"] h2,
[id*="blockEmailSubscription"] p {
  color: var(--moon) !important;
  font-family: var(--serif) !important;
}
.block_newsletter .input-wrapper input,
[id*="blockEmailSubscription"] input[type="email"],
[id*="blockEmailSubscription"] input[type="text"] {
  background: rgba(22, 18, 42, 0.8) !important;
  border: 1px solid rgba(232, 223, 232, 0.2) !important;
  color: var(--moon) !important;
}
.block_newsletter .btn,
[id*="blockEmailSubscription"] .btn,
[id*="blockEmailSubscription"] button[type="submit"] {
  background: transparent !important;
  border: 1px solid var(--gold) !important;
  color: var(--gold) !important;
}
.block_newsletter .btn:hover,
[id*="blockEmailSubscription"] .btn:hover,
[id*="blockEmailSubscription"] button[type="submit"]:hover {
  background: var(--gold) !important;
  color: var(--night) !important;
}

/* ── 2. MOBILE MENU ──────────────────────────────────────── */
/* Bug: #mobile_top_menu_wrapper reste blanc */
#mobile_top_menu_wrapper,
#_mobile_top_menu,
.mobile-top-menu {
  background: var(--night-2) !important;
  border-color: rgba(212, 181, 112, 0.15) !important;
}
#mobile_top_menu_wrapper .top-menu a,
#mobile_top_menu_wrapper .top-menu li {
  color: var(--moon) !important;
  border-color: rgba(232, 223, 232, 0.08) !important;
}
#mobile_top_menu_wrapper .top-menu a:hover {
  color: var(--gold) !important;
}
#_mobile_top_menu .navbar-toggler,
#mobile_top_menu_wrapper .navbar-toggler {
  color: var(--moon) !important;
}

/* ── 3. UI SLIDER (prix range) ───────────────────────────── */
/* Bug: slider jQuery UI garde background blanc */
.ui-slider.ui-widget,
.ui-slider-horizontal,
div.ui-widget-content {
  background: rgba(232, 223, 232, 0.15) !important;
  border: none !important;
  border-radius: 0 !important;
}
.ui-slider .ui-slider-range {
  background: var(--gold) !important;
}
.ui-slider-handle,
.ui-slider .ui-slider-handle {
  background: var(--gold) !important;
  border: 2px solid var(--gold-deep) !important;
  border-radius: 50% !important;
  width: 16px !important;
  height: 16px !important;
  top: -5px !important;
  cursor: pointer !important;
}
.ui-slider-handle:focus,
.ui-slider-handle.ui-state-focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(212, 181, 112, 0.3) !important;
}
/* Facet filter values text */
#facet_price .facet-slider-label,
p.facet-label.text-muted {
  color: var(--moon) !important;
  opacity: 0.7 !important;
}

/* ── 4. MODAUX (quickview, wishlist) ─────────────────────── */
/* Bug: .modal-content garde le fond blanc PS natif */
.modal-content,
.modal-body,
.modal-header,
.modal-footer,
.quickview .modal-content {
  background: var(--night-2) !important;
  border: 1px solid rgba(212, 181, 112, 0.2) !important;
  color: var(--moon) !important;
}
.modal-header {
  border-bottom: 1px solid rgba(212, 181, 112, 0.15) !important;
}
.modal-footer {
  border-top: 1px solid rgba(212, 181, 112, 0.15) !important;
}
.modal-title,
.modal-header .close,
.modal-header button.close {
  color: var(--moon) !important;
}
.modal-backdrop:not(.show) { display:none !important; }
.modal-backdrop {
  background: var(--night) !important;
  opacity: 0.85 !important;
}

/* ── 5. WISHLIST TOAST ───────────────────────────────────── */
.wishlist-toast,
.wishlist-toast-container {
  background: var(--night-2) !important;
  border: 1px solid rgba(212, 181, 112, 0.2) !important;
  color: var(--moon) !important;
}

/* ── 6. PRODUCT DESCRIPTION TABS (fond blanc) ────────────── */
/* Bug: zone tab-content/description + wrapper .tabs garde fond blanc PS */
.product-tabs .tab-content,
.product-tabs .tab-pane,
.product-tabs .tabs,
#product .tab-content,
#product .tabs,
.product-description-tab {
  background: var(--night-2) !important;
  border: 1px solid rgba(232, 223, 232, 0.08) !important;
  color: var(--moon) !important;
  padding: 1.5rem !important;
}
/* Nav-link tabs PS natif */
.product-tabs .nav-link,
#product .nav-link {
  background: transparent !important;
  color: rgba(244, 239, 230, 0.5) !important;
}
.product-tabs .nav-link.active,
#product .nav-link.active {
  background: transparent !important;
  color: var(--gold) !important;
  border-bottom: 1px solid var(--gold) !important;
}

/* ── SOCIAL SHARE BUTTONS ───────────────────────────────── */
/* Bug: boutons réseaux sociaux LI.facebook/twitter/pinterest blancs */
.social-sharing li,
.social-sharing a,
li.facebook a,
li.twitter a,
li.pinterest a {
  background: var(--night-3) !important;
  border-color: rgba(232, 223, 232, 0.1) !important;
}
.social-sharing li:hover a,
li.facebook:hover a,
li.twitter:hover a,
li.pinterest:hover a {
  background: var(--amethyst-deep) !important;
}

/* ── WISHLIST BUTTON ─────────────────────────────────────── */
.wishlist-button-add,
.btn-product-wishlist {
  background: transparent !important;
  border: 1px solid rgba(232, 223, 232, 0.15) !important;
  color: var(--moon) !important;
}
.wishlist-button-add:hover,
.btn-product-wishlist:hover {
  background: var(--amethyst-deep) !important;
  border-color: var(--amethyst-light) !important;
}

/* ── PRODUCT COMMENT FORM ────────────────────────────────── */
/* Bug: #empty-product-comment et criterion input blancs */
#empty-product-comment,
.product-comment-list-item {
  background: var(--night-2) !important;
  color: var(--moon) !important;
}
input[id^="criterion"],
.product-comment-form input,
.product-comment-form textarea,
.product-comment-form select {
  background: rgba(22, 18, 42, 0.8) !important;
  border-color: rgba(232, 223, 232, 0.2) !important;
  color: var(--moon) !important;
}

/* ── IMAGE CAPTIONS ──────────────────────────────────────── */
figcaption.image-caption {
  background: rgba(14, 11, 26, 0.7) !important;
  color: var(--moon) !important;
}

/* ── 7. AVIS / REVIEW SECTION ────────────────────────────── */
/* Bug: section avis clients a fond blanc */
#product-comments-list,
.product-comments-list-header,
.comments_block,
#product-reviews,
.product-comment-list {
  background: var(--night-2) !important;
  border: 1px solid rgba(232, 223, 232, 0.08) !important;
  color: var(--moon) !important;
}
.product-comments-list-header h3,
.product-comments-list-header p {
  color: var(--moon) !important;
}
.product-comment-author,
.product-comment-content {
  color: var(--moon) !important;
}
.btn-comment,
.open-comment-form {
  background: transparent !important;
  border: 1px solid var(--gold) !important;
  color: var(--gold) !important;
}
.btn-comment:hover,
.open-comment-form:hover {
  background: var(--gold) !important;
  color: var(--night) !important;
}

/* ── 8. IMAGE GALLERY BG ─────────────────────────────────── */
/* Bug: custom-bijoux.css définit #f5f0e8 (crème clair) */
.product__images .carousel-item {
  background: var(--night-2) !important;
}

/* ── 9. BUTTONS PS NATIFS BLANCS ─────────────────────────── */
/* Bug: certains BUTTON.btn natifs PS restent blancs */
.btn:not(.btn-primary):not(.btn-secondary):not([class*="bhr-"]) {
  background: transparent !important;
  color: var(--moon) !important;
}

/* ── 10. CHECKOUT TUNNEL ─────────────────────────────────── */
/* Cohérence dark pour toutes les étapes PS natif */
#checkout-personal-information-step,
#checkout-addresses-step,
#checkout-delivery-step,
#checkout-payment-step,
.checkout-step {
  background: var(--night-2) !important;
  border: 1px solid rgba(232, 223, 232, 0.08) !important;
  color: var(--moon) !important;
}
.checkout-step .step-title,
.checkout-step__title {
  background: var(--night-3) !important;
  border-bottom: 1px solid rgba(212, 181, 112, 0.1) !important;
  color: var(--moon) !important;
}
/* Adresses cards dans checkout */
.address-item,
.address-item .card,
.checkout-step .address-container {
  background: rgba(31, 25, 52, 0.5) !important;
  border: 1px solid rgba(232, 223, 232, 0.1) !important;
  color: var(--moon) !important;
}
.address-item .card-header {
  background: rgba(14, 11, 26, 0.6) !important;
  color: var(--moon) !important;
}
/* Labels et textes checkout */
.checkout-step label,
.checkout-step p,
.checkout-step h3,
.checkout-step h4,
.checkout-step .custom-checkbox span {
  color: var(--moon) !important;
}
/* Payment logos/options */
#payment-option-1,
.payment-options .payment-option,
#conditions-to-approve {
  background: var(--night-2) !important;
  border: 1px solid rgba(232, 223, 232, 0.08) !important;
  color: var(--moon) !important;
}
#conditions-to-approve label {
  color: var(--moon) !important;
}
/* Order summary dans checkout */
.cart-summary-line,
.cart-detailed-totals,
.block-promo {
  background: transparent !important;
  color: var(--moon) !important;
}
.block-promo .collapse,
.cart-voucher .collapse {
  background: var(--night-2) !important;
}

/* ── 11. BLOCK CATEGORIES SIDEBAR ────────────────────────── */
/* Bug: .block-categories fond blanc sur desktop */
.block-categories,
.block-categories .category-top-menu {
  background: var(--night-2) !important;
  border: 1px solid rgba(232, 223, 232, 0.08) !important;
}
.block-categories a,
.block-categories li a {
  color: var(--moon) !important;
}
.block-categories a:hover,
.block-categories li a:hover {
  color: var(--gold) !important;
}
.block-categories .category-sub-menu li {
  border-color: rgba(232, 223, 232, 0.08) !important;
}

/* ── 12. DROPDOWN CART PREVIEW ───────────────────────────── */
.cart-preview .cart-body,
.blockcart .cart-body,
.cart-detailed-product-line {
  background: var(--night-2) !important;
  color: var(--moon) !important;
}
.cart-preview .cart-products-count {
  background: var(--amethyst) !important;
  color: var(--moon) !important;
}

/* ── 13. MOBILE VIEWPORT OVERFLOW FIXES ──────────────────── */
@media (max-width: 767.98px) {
  /* Prevent any child from causing horizontal scroll */
  .bhr-hero__title {
    word-break: break-word;
  }
  .bhr-collections__grid,
  .bhr-pierres__grid,
  .bhr-intentions__grid {
    overflow-x: hidden;
  }
  /* Product image gallery height cap */
  .product__images .carousel-item {
    max-height: 360px;
  }
  /* Newsletter banner ne cache pas le contenu principal */
  #bijoux-newsletter-sticky {
    max-width: 100vw;
    overflow: hidden;
  }
}

/* ── 14. FACET CUSTOM RADIO/CHECKBOX ─────────────────────── */
/* Bug: .custom-radio garde fond blanc */
.custom-radio .custom-control-label::before,
.custom-checkbox .custom-control-label::before {
  background: rgba(22, 18, 42, 0.8) !important;
  border-color: rgba(232, 223, 232, 0.25) !important;
}
.custom-radio input:checked ~ .custom-control-label::before,
.custom-checkbox input:checked ~ .custom-control-label::before {
  background: var(--amethyst) !important;
  border-color: var(--amethyst) !important;
}
.custom-control-label {
  color: var(--moon) !important;
}

/* ── 15. PRODUCT QUANTITY INPUT ──────────────────────────── */
.product-quantity .qty input,
.product-quantity input[type="number"],
.input-group .form-control {
  background: rgba(22, 18, 42, 0.8) !important;
  border-color: rgba(232, 223, 232, 0.2) !important;
  color: var(--moon) !important;
}
.product-quantity .btn-touchspin,
.input-group-btn .btn {
  background: var(--night-3) !important;
  border-color: rgba(232, 223, 232, 0.2) !important;
  color: var(--moon) !important;
}
.product-quantity .btn-touchspin:hover,
.input-group-btn .btn:hover {
  background: var(--amethyst-deep) !important;
  color: var(--moon) !important;
}

/* ── 16a. REMAINING WHITE ELEMENTS ──────────────────────── */
/* custom-radio input style */
.custom-radio {
  background: transparent !important;
}
.custom-radio span,
.custom-radio .custom-control-label::before {
  background: rgba(22, 18, 42, 0.8) !important;
  border-color: rgba(232, 223, 232, 0.25) !important;
}

/* btn-unstyle (boutons icônes PS natif) */
.btn-unstyle {
  background: transparent !important;
  color: var(--moon) !important;
}

/* highlighted-informations (quickview bar sur cards) */
.highlighted-informations {
  background: rgba(14, 11, 26, 0.75) !important;
  border-top: 1px solid rgba(212, 181, 112, 0.15) !important;
  color: var(--moon) !important;
}
.highlighted-informations .quick-view {
  color: var(--gold-pale) !important;
  font-family: var(--sans) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* page-list (pagination) */
.page-list,
.pagination .page-list {
  background: transparent !important;
}

/* ── 16. REASSURANCE BLOCK (icônes sous add-to-cart) ─────── */
.product-reassurance,
.product-reassurance li {
  color: rgba(244, 239, 230, 0.6) !important;
}
.product-reassurance .material-icons {
  color: var(--gold) !important;
}

/* ── 17. TOUCH TARGETS 44px ──────────────────────────────── */
/* a inline : tel:, mailto:, breadcrumb, footer links, login links */
a[href^="tel:"],
a[href^="mailto:"],
.breadcrumb a,
.breadcrumb-item a,
footer a,
#footer a,
.footer-container a,
a.lost-password,
a.no-account {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 6px 0;
}

/* ── 18. BOUTON MONTRER MOT DE PASSE ─────────────────────── */
/* Font-size:0 rend le bouton invisible */
.input-group-btn .btn,
button[data-action="show-password"] {
  font-size: 14px !important;
  padding: 8px 14px !important;
}

/* ── 19. FORM LABELS CONTRAST (login + register) ─────────── */
form label,
.form-control-label {
  color: var(--cream, #E8E0D0) !important;
  font-size: 14px;
  font-weight: 500;
}
.form-control,
input.form-control,
select.form-control,
textarea.form-control {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--cream, #E8E0D0) !important;
  border: 1px solid rgba(107, 74, 140, 0.4) !important;
}

/* ── 20. A11Y ARIA-LABELS + FOCUS OUTLINE ────────────────── */
[aria-label]:not([aria-label=""]) {
  cursor: pointer;
}
/* Ne pas supprimer outline focus (accessibilité) */
:focus-visible {
  outline: 2px solid var(--gold, #D4B570) !important;
  outline-offset: 2px !important;
}

/* ── 21. PRIX PRODUITS CONTRASTE ─────────────────────────── */
.product-price,
.price,
.bhr-card .price,
span.price,
.product-price-and-shipping .price {
  color: var(--gold, #D4B570) !important;
  font-weight: 600;
  font-size: 1.05rem;
}

/* ── 22. SUB-CATEGORY CARD VIDE DANS GRID ────────────────── */
.product-miniature[data-id-product=""],
.subcategory-image:empty {
  display: none;
}

/* ── 23. TEXTE CGV JUSTIFIÉ ──────────────────────────────── */
.page-cms p {
  text-align: left !important;
  line-height: 1.65;
  margin-bottom: 1.2em;
}

/* ── 24. POPUP NEWSLETTER MOBILE ─────────────────────────── */
@media (max-width: 767px) {
  .modal-newsletter,
  #bijoux-newsletter-sticky {
    padding: 16px;
  }
  .modal-newsletter .close,
  .nl-dismiss {
    width: 44px;
    height: 44px;
  }
}

/* === FINAL POLISH 2026-04-25 === */

/* ── FP1. TINY TEXT — .bhr-eyebrow-sm (10px) ──────────────── */
/* Audit: font-size 10px détecté sur SPAN.bhr-eyebrow-sm */
.bhr-eyebrow-sm {
  font-size: 11px !important;
}

/* ── FP2. TINY TEXT — .bhr-footer__brand-sub (10.4px) ─────── */
/* Audit: sous-ligne footer 10.4px */
.bhr-footer__brand-sub {
  font-size: 11px !important;
}

/* ── FP3. OVERFLOW — #bhr-mobile-menu hors-écran ──────────── */
/* Audit: #bhr-mobile-menu positionné à left:1432px cause
   body.scrollWidth=1792 → scroll horizontal masqué.
   Le menu slide-in doit être clippé par son parent. */
#bhr-mobile-menu {
  overflow: hidden;
}
/* NOTE: body overflow-x:clip consolidé dans FIX A ci-dessous */

/* ── FP4. TOUCH TARGET — a[href^="tel:"] display:flex ────────*/
/* Audit: tel: link height=0 car display:flex écrase inline-flex
   La règle #17 utilise inline-flex mais display:flex hérité
   prend le dessus. On force le min-height directement. */
a[href^="tel:"] {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* ── FP5. TOUCH TARGET — pagination .js-search-link ─────────*/
/* Audit: liens pagination h=17-25px */
.page-list .js-search-link,
.pagination .js-search-link {
  min-width: 36px !important;
  min-height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 6px !important;
}

/* ── FP6. PRIX BARRÉS — regular-price visibilité ────────────*/
/* Assure contraste des prix barrés si présents */
.regular-price,
.price-old,
.product-price .regular-price {
  color: rgba(244, 239, 230, 0.5) !important;
  text-decoration: line-through !important;
}
.product-flag.discount,
.discount-percentage,
.discount-amount {
  background: var(--amethyst, #6B4A8C) !important;
  color: var(--moon, #F4EFE6) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

/* === FIXES 80 DÉFAUTS === */

/* 1. Mini-cart dropdown fermé au load */
.cart-preview .body, .blockcart .body { display: none !important; }
.cart-preview:hover .body, .blockcart.active .body { display: block !important; }

/* 2. Bouton MONTRER mot de passe */
.input-group-btn, .input-group-btn .btn, button[data-action="show-password"], .show-password { font-size: 14px !important; padding: 8px 14px !important; min-width:80px; min-height:44px; color: var(--gold) !important; background: transparent !important; border:1px solid var(--gold) !important; }

/* 3. Double cart mobile */
@media (max-width: 767px) { #_desktop_cart, #_desktop_user_info, #_desktop_logo, #_desktop_top_menu { display: none !important; } }
@media (min-width: 768px) { #_mobile_cart, #_mobile_user_info, #_mobile_logo { display: none !important; } }

/* 5. Touch targets liens inline */
a[href^="tel:"], a[href^="mailto:"], .breadcrumb a, .footer a, .nav-link, .footer-bottom-bar a { min-height: 44px !important; display: inline-flex !important; align-items: center; padding: 6px 0; }

/* 6. Breadcrumb opacity */
.breadcrumb-item a, .breadcrumb a { color: rgba(232,224,208,0.8) !important; font-size: 13px; }
.breadcrumb-item.active, .breadcrumb-item:last-child { color: var(--cream) !important; }

/* 7. Copyright lisible */
.footer-bottom-bar, .bhr-footer__bottom { color: rgba(232,224,208,0.7) !important; font-size: 13px; }

/* === CARDS IMAGES NEUTRES (v1.5) === */
.product-miniature img, .bhr-card img, .product-cover img,
.featured-products img, .subcategory img {
  filter: none !important;
  mix-blend-mode: normal !important;
  background: transparent !important;
}
.product-miniature .thumbnail-container, .bhr-card .product-thumbnail {
  background: var(--ink, #14102A) !important;
  mix-blend-mode: normal;
}

/* === BREADCRUMB SOUS HEADER PARTOUT (v1.5) === */
.breadcrumb, nav.breadcrumb, #wrapper .breadcrumb {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 0 !important;
  padding-top: 16px !important;
}
.page-product #wrapper, .page-category #wrapper, .page-cms #wrapper {
  padding-top: clamp(80px, 10vw, 140px) !important;
}

/* === IMG SHIMMER PLACEHOLDER (anti-black-flash sur lazy load) === */
.product-miniature .thumbnail-container,
.product-miniature .product-thumbnail,
.bhr-card__img-wrap,
.bhr-card .bhr-img-wrap {
  position: relative;
  background: linear-gradient(135deg, #1a1428 0%, #2a2240 50%, #1a1428 100%);
  background-size: 200% 200%;
  animation: bhr-shimmer 2.4s ease-in-out infinite;
}
.product-miniature img.loaded ~ *,
.product-miniature img[src]:not([src=''])[complete] {
  animation: none;
}
@keyframes bhr-shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.product-miniature img,
.bhr-card img {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* === ITER 1 FIXES 2026-04-25 === */

/* FIX A0 — Hero glow / marquee débordent sur mobile (scrollWidth=390)
   .bhr-hero a overflow:hidden mais ne clip pas les enfants absolus
   dont left/right dépassent. Forcer containment. */
.bhr-hero {
  overflow: hidden !important;
  contain: layout !important;
}
.bhr-hero__glow {
  /* Déjà pointer-events:none, juste s'assurer qu'il ne génère pas de scrollbar */
  max-width: 100% !important;
  overflow: hidden !important;
}
.bhr-marquee-wrap {
  overflow: hidden !important;
  contain: layout !important;
}

/* FIX A — MOBILE MENU overflow horizontal
   Correction iter29: l'ancienne approche left:100vw + translateX(0)
   causait left=380px sur viewport 375px (scrollbar offset).
   Solution : body overflow-x:clip suffit. Le menu utilise
   bijoux-mobile-nav.css : right:0; transform:translateX(100%) → translateX(0)
   qui est position:fixed donc hors du flux normal, sans affecter scrollWidth. */
body {
  overflow-x: clip !important;
  max-width: 100vw !important;
}
/* NE PAS surcharger left/transform du menu : bijoux-mobile-nav.css gère seul */

/* FIX B — Cards home .js-product float:left casse grid
   .products.row est display:grid mais les enfants .js-product
   conservent float:left → article.product-miniature écrasé à 37px.
   Forcer les colonnes Bootstrap en cellules de grille normales. */
.products.row > .js-product,
.products.row > [class*="col-"] {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  flex: none !important;
}
/* L'article doit remplir la cellule */
.products.row .product-miniature,
.products.row .bhr-card {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* FIX C — .bhr-pierre-card__tag 10px → 11px (déjà dans bijoux-homepage
   mais le sélecteur d'audit retourne 10px) */
.bhr-pierre-card__tag {
  font-size: 11px !important;
}

/* FIX D — Product title sur cards home invisible (article trop petit)
   Le title a -webkit-line-clamp:2 mais container à 37px ne laisse
   pas de place. Avec FIX B résolu, s'assurer que le body flex-grow. */
.product-miniature .product-description,
.product-miniature .product-body,
.bhr-card .bhr-body {
  flex: 1 1 auto !important;
}
.product-miniature .product-title,
.product-miniature .product-title a {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 2 !important;
  overflow: hidden !important;
  font-family: var(--serif) !important;
  font-size: 1rem !important;
  color: var(--cream) !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  min-height: 0 !important;
  width: 100% !important;
}

/* FIX E — Category grid mobile 1col at 375px (était 4col) */
@media (max-width: 479px) {
  #products .products,
  .products-grid .products,
  #js-product-list .products {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* FIX F — Breadcrumb page-index (home) chevauchement header */
.page-index .breadcrumb,
.page-index nav.breadcrumb {
  display: none !important;
}
/* Sur pages avec header sticky, le breadcrumb doit être visible */
.page-product .breadcrumb,
.page-category .breadcrumb {
  padding-top: 8px !important;
  margin-top: 0 !important;
}

/* === ITER 8 FIXES 2026-04-25 === */

/* FIX G — scroll-padding-top manquant (sticky header ~117px)
   Sans cette règle, les ancres (#section, #tab) sautent SOUS
   le header sticky. Valeur CSS custom fallback 120px. */
html {
  scroll-padding-top: var(--header-height, 120px) !important;
}

/* FIX I — Broken img fallback propre (min-height évite collapse à 0)
   Quand l'image ne charge pas, le conteneur shimmer reste visible
   mais l'img elle-même colapses à 0x0. On lui donne un min-height
   et un background sombre pour que la zone reste occupée. */
img:not([src]),
img[src=""],
img.img-error {
  min-height: 80px !important;
  background: var(--ink, #14102A) !important;
  display: block !important;
}

/* FIX K — Print: compléments non couverts par bijoux-polish.css */
@media print {
  /* bijoux-polish couvre body/nav/footer. On ajoute uniquement: */
  .product-name,
  .product-price,
  .price,
  h1, h2, h3 {
    color: #000 !important;
  }
  a[href]::after {
    content: none !important;
  }
}