/* ===========================
   Responsive Store – CSS only
   (Mobile-first, Tailwind v1 friendly)
   =========================== */

/* --- Base: reset doux pour images & liens --- */
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; }

/* --- Scroll anchors: ~30px en haut au stop --- */
#filters-top,
[id^="rf-block-"],
[id^="panel-desktop-"] {
  scroll-margin-top: 30px;
}

/* --- Colonne filtres (desktop sticky) / Mobile overlay --- */
#filterSidebar {
  display: none; /* mobile par défaut: sidebar cachée (overlay utilisé) */
}

/* Overlay mobile: déjà contrôlé par JS; ici on force un scroll fluide + inertie */
#mobileFilter {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}

/* Bouton filtre mobile (le tien a déjà md:hidden).
   On ajuste juste quelques “safe defaults” */
.bottom-0-mobile {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
}

/* --- “Filtres actifs” (chips) --- */
.rf-active { margin-bottom: 0.75rem; }
.rf-active .rf-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rf-chip, .rf-chip-clear {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 9999px;
  background: #f3f4f6; /* gray-100 */
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #111827;
}
.rf-chip.selected { background: #111827; color: #fff; }
.rf-chip .rf-chip-x { display: inline-flex; margin-left: 6px; color: inherit; }
.rf-chip-clear { background: #111827; color: #fff; }

/* --- Wrap (pills) générique --- */
.rf-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.rf-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 6px 10px;
  border-radius: 9999px;
  background: #f3f4f6;
  font-size: 0.875rem;
  color: #111827;
  white-space: nowrap;
}
.rf-pill.selected { background: #111827; color: #fff; }
.rf-more {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  font-size: 0.875rem;
  border-radius: 9999px;
  background: #f9fafb;
}

/* --- Pastilles couleur (Vue filtres) --- */
.clr-pill .clr-dot {
  width: 14px; height: 14px; border-radius: 9999px;
  display: inline-block;
  border: 1px solid rgba(0,0,0,.08);
}
.clr-pill .clr-dot.transparent {
  background: repeating-conic-gradient(#ddd 0 25%, transparent 0 50%) 50% / 8px 8px;
}

/* ===========================
   VUE 1 – Catégories (radios)
   même esprit que Vue 2 (sans bordures)
   =========================== */
.base-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .35rem .5rem;
  border-radius: .5rem;
  background: transparent;       /* pas de bordures */
  transition: background .15s ease;
}
.base-row:hover { background: #f9fafb; } /* hover discret, comme Vue 2 */

/* Radio plus grand + marge avec le label + style “cohérent Vue 2” */
.base-input {
  appearance: none;
  width: 18px; height: 18px;
  border: 2px solid #111827;     /* gris très sombre (même ton que Vue 2) */
  border-radius: 9999px;
  display: inline-block;
  position: relative;
  flex: 0 0 auto;
  margin-right: .5rem;           /* espace entre la bulle et le texte */
  outline: none;
}
.base-input:focus { box-shadow: 0 0 0 3px rgba(17,24,39,.15); }
.base-input:checked {
  background: #111827;           /* “checked” = fond sombre */
  border-color: #111827;
}
.base-input:checked::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 8px; height: 8px;
  transform: translate(-50%, -50%);
  background: #fff;              /* petit point blanc au centre */
  border-radius: 9999px;
}

/* Ligne légèrement teintée quand la radio est cochée */
.base-row:has(.base-input:checked) {
  background: #f3f4f6; /* même gris que les pills non-sélectionnées */
}

/* Texte label */
.base-row .text-sm { color: #111827; }

/* Icône flèche (à droite) */
.base-row svg { color: #111827; }

/* “Afficher plus/moins” – Vue 1 */
#desktopCatViewBases .rf-more {
  margin-top: .25rem;
  background: #f3f4f6;
}

/* ===========================
   VUE 2 – Catégories (valeurs)
   =========================== */
/* Harmonisation des items liste catégories (Vue 2) */
#desktopCatViewValues label {
  border: none;           /* enlève les bordures comme demandé */
  background: transparent;
}
#desktopCatViewValues label:hover {
  background: #f9fafb;
}
#desktopCatViewValues .custom-radio {
  appearance: none;
  width: 18px; height: 18px;
  border: 2px solid #111827;
  border-radius: 9999px;
  position: relative;
  margin-right: .5rem;
}
#desktopCatViewValues .custom-radio:checked {
  background: #111827;
  border-color: #111827;
}
#desktopCatViewValues .custom-radio:checked::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 8px; height: 8px;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 9999px;
}

/* ===========================
   Prix / Budget / Évaluation
   =========================== */
#rf-block-Prix input[type="number"] {
  width: 7rem;
  padding: .375rem .5rem;
  font-size: .875rem;
}
#rf-block-Budget .rtg-wrap,
#rf-block-Evaluation .rtg-wrap {
  display: flex; flex-wrap: wrap; gap: .5rem;
}
#rf-block-Budget .rtg-pill,
#rf-block-Evaluation .rtg-pill {
  display: inline-flex; align-items: center;
  padding: 6px 10px;
  border-radius: 9999px;
  background: #f3f4f6;
  font-size: .875rem; color:#111827;
}
#rf-block-Budget .rtg-input,
#rf-block-Evaluation .rtg-input {
  appearance: none;
  width: 18px; height: 18px;
  border: 2px solid #111827;
  border-radius: 9999px;
  margin-right: .5rem;
  position: relative;
}
#rf-block-Budget .rtg-input:checked,
#rf-block-Evaluation .rtg-input:checked {
  background: #111827; border-color:#111827;
}
#rf-block-Budget .rtg-input:checked::after,
#rf-block-Evaluation .rtg-input:checked::after {
  content: ''; position:absolute; inset:50% auto auto 50%;
  width: 8px; height: 8px; transform: translate(-50%,-50%);
  background: #fff; border-radius: 9999px;
}

/* ===========================
   Grille produits (fallback)
   =========================== */
/* Si tu as un wrapper pour les produits, ajoute-lui l’une des classes ci-dessous:
   .grid-products  OU  [data-products]  OU  .products-grid
   (La règle s’applique aux trois pour couvrir les cas) */
.grid-products,
.products-grid,
[data-products] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
}
.product-card, .similar-product-card {
  width: 100%;
}

/* ===========================
   Breakpoints (Tailwind v1)
   sm:640px, md:768px, lg:1024px, xl:1280px
   =========================== */
@media (min-width: 640px) {
  .grid-products,
  .products-grid,
  [data-products] {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
  }
}

@media (min-width: 768px) {
  .grid-products,
  .products-grid,
  [data-products] {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .grid-products,
  .products-grid,
  [data-products] {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 18px;
  }
}

/* Desktop restore: cards + sidebar scrollbar (match previous look) */
@media (min-width: 1024px) {
  #filterSidebar {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
  }
  #filterSidebar::-webkit-scrollbar { width: 6px; }
  #filterSidebar::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }
  #filterSidebar::-webkit-scrollbar-track { background: transparent; }

  .similar-product-card {
    border-radius: 18px;
    border: 0;
    box-shadow: 0 10px 20px rgba(15,23,42,.08);
    overflow: hidden;
    background: #fff;
  }
  .similar-product-media {
    overflow: hidden;
    border-radius: 18px 18px 0 0;
    background: #f8fafc;
  }
  .similar-product-media img {
    width: 100%;
    height: auto;
    display: block;
  }
  .similar-product-body {
    padding: 1rem 1rem 1.1rem;
  }
  .similar-product-title { font-weight: 600; color: #111827; }
  .similar-product-price { font-weight: 700; color: #111827; }
}

/* Trend block responsive */
.trend-products-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
}
.trend-carousel-nav{
  display:none;
  align-items:center;
  gap:.5rem;
  flex:0 0 auto;
}
.trend-carousel-btn{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#374151;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.trend-carousel-btn svg{
  width:18px;
  height:18px;
}
.trend-carousel-btn:hover{
  background:#f9fafb;
  border-color:#d1d5db;
}
.trend-carousel-btn:active{
  transform:translateY(1px);
}
.trend-carousel-btn:disabled{
  opacity:.45;
  cursor:default;
  transform:none;
}
.trend-subcats-grid{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.trend-subcat-card,
.trend-product-card{
  min-width: 0;
  max-width: 100%;
}
.trend-subcat-card span{
  min-width: 0;
  overflow-wrap: anywhere;
}
.trend-products-carousel{
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(170px, 72%);
  gap: .9rem;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: .25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: .1rem .1rem .45rem;
}
.trend-products-carousel::-webkit-scrollbar{
  display: none;
}
.trend-products-carousel .trend-product-slide{
  scroll-snap-align: start;
}
@media (max-width: 380px){
  .trend-subcats-grid{
    grid-template-columns: minmax(0, 1fr);
  }
  .trend-products-carousel{
    grid-auto-columns: minmax(150px, 84%);
  }
}
@media (min-width: 480px){
  .trend-products-carousel{
    grid-auto-columns: minmax(190px, 58%);
  }
}
@media (min-width: 768px){
  .trend-subcats-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .trend-products-carousel{
    grid-auto-columns: minmax(220px, 42%);
  }
}
@media (min-width: 992px){
  .trend-carousel-nav{
    display:flex;
  }
  .trend-products-carousel{
    grid-auto-columns: minmax(220px, 32%);
  }
}
@media (min-width: 1200px){
  .trend-subcats-grid{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .trend-products-carousel{
    grid-auto-columns: minmax(230px, 25%);
  }
}
@media (min-width: 1536px){
  .trend-products-carousel{
    grid-auto-columns: minmax(240px, 21%);
  }
}
/* ===============================
   Avatar + nom (responsive, CSS-only)
   =============================== */

/* Le cercle avatar : taille fluide, override l’inline style via !important */
#filterSidebar .rounded-full.overflow-hidden.ring-1.bg-gray-100.flex {
  width: clamp(72px, 32vw, 160px) !important;   /* 72px en très petit, max ~10rem */
  height: clamp(72px, 32vw, 160px) !important;
}

/* L’image se comporte déjà bien (w-full h-full object-cover).
   On s’assure juste qu’elle ne déborde jamais. */
#filterSidebar .rounded-full.overflow-hidden.ring-1.bg-gray-100.flex img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Fallback lettre (quand l’image ne charge pas) : taille réactive */
#filterSidebar .avatar-fallback {
  font-size: clamp(12px, 3.4vw, 18px);
  line-height: 1;                /* bien centré dans le cercle */
  color: #4b5563;                /* gray-600 */
}

/* Le nom sous l’avatar : largeur et typo fluides + ellipsis propre */
#filterSidebar .flex.flex-col.items-center.mb-4.text-center > div:last-child {
  max-width: clamp(140px, 60vw, 200px);  /* suit la taille du cercle */
  font-size: clamp(12px, 3.2vw, 14px);
  color: #4b5563;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Option 2 lignes (décommente si tu préfères wrap sur 2 lignes) */
/*
#filterSidebar .flex.flex-col.items-center.mb-4.text-center > div:last-child {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
*/

/* Petites retouches sur mobile : un peu d’air en dessous */
#filterSidebar .flex.flex-col.items-center.mb-4.text-center {
  margin-bottom: .75rem;
}

/* Desktop : taille un peu plus généreuse si tu veux */
@media (min-width: 768px) {
  #filterSidebar .rounded-full.overflow-hidden.ring-1.bg-gray-100.flex {
    width: 10rem !important;
    height: 10rem !important;
  }
  #filterSidebar .flex.flex-col.items-center.mb-4.text-center > div:last-child {
    max-width: 10rem;
  }
}
/* ===============================
   Galerie de catégories — CSS finale responsive
   Couvre : #categoriesGallery, #catGallery, .galerie-categories,
            .categories-gallery, .category-gallery, .cat-gallery
   =============================== */

/* --- Reset léger --- */
html, body { max-width: 100%; }
*, *::before, *::after { box-sizing: border-box; }

/* --- Conteneur de galerie (grid responsive) --- */
#categoriesGallery,
#catGallery,
.galerie-categories,
.categories-gallery,
.category-gallery,
.cat-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* Mobile : 2 colonnes */
  gap: 12px;
  width: 100%;
  max-width: 100%;
  padding: 0 8px;           /* petit padding interne */
  margin: 0 auto 2rem;      /* centrage + espace bas */
  overflow-x: hidden;       /* coupe tout débordement horizontal */
}

/* ≥480px : 3 colonnes */
@media (min-width: 480px) {
  #categoriesGallery,
  #catGallery,
  .galerie-categories,
  .categories-gallery,
  .category-gallery,
  .cat-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ≥768px : 4 colonnes + gap un peu plus large */
@media (min-width: 768px) {
  #categoriesGallery,
  #catGallery,
  .galerie-categories,
  .categories-gallery,
  .category-gallery,
  .cat-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
  }
}

/* ≥1024px : 6 colonnes */
@media (min-width: 1024px) {
  #categoriesGallery,
  #catGallery,
  .galerie-categories,
  .categories-gallery,
  .category-gallery,
  .cat-gallery {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* --- Cartes (lien/bouton/div direct enfant du wrapper) --- */
#categoriesGallery > a, #categoriesGallery > button, #categoriesGallery > div,
#catGallery       > a, #catGallery       > button, #catGallery       > div,
.galerie-categories > a, .galerie-categories > button, .galerie-categories > div,
.categories-gallery > a, .categories-gallery > button, .categories-gallery > div,
.category-gallery  > a, .category-gallery  > button, .category-gallery  > div,
.cat-gallery       > a, .cat-gallery       > button, .cat-gallery       > div {
  display: block;
  min-width: 0;                 /* important en grid pour éviter l’overflow */
  text-decoration: none;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 1px 1px rgba(0,0,0,.03);
  transition: transform .12s ease, box-shadow .12s ease;
}

#categoriesGallery > a:hover, #categoriesGallery > button:hover, #categoriesGallery > div:hover,
#catGallery       > a:hover, #catGallery       > button:hover, #catGallery       > div:hover,
.galerie-categories > a:hover, .galerie-categories > button:hover, .galerie-categories > div:hover,
.categories-gallery > a:hover, .categories-gallery > button:hover, .categories-gallery > div:hover,
.category-gallery  > a:hover, .category-gallery  > button:hover, .category-gallery  > div:hover,
.cat-gallery       > a:hover, .cat-gallery       > button:hover, .cat-gallery       > div:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* --- Vignette carrée (thumb) --- */
#categoriesGallery .thumb,
#catGallery .thumb,
.galerie-categories .thumb,
.categories-gallery .thumb,
.category-gallery .thumb,
.cat-gallery .thumb {
  width: 100%;
  aspect-ratio: 1 / 1;    /* carré moderne */
  overflow: hidden;
}

#categoriesGallery .thumb img,
#catGallery .thumb img,
.galerie-categories .thumb img,
.categories-gallery .thumb img,
.category-gallery .thumb img,
.cat-gallery .thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;       /* recadrage propre */
}

/* Fallback si aspect-ratio non supporté */
@supports not (aspect-ratio: 1 / 1) {
  #categoriesGallery .thumb,
  #catGallery .thumb,
  .galerie-categories .thumb,
  .categories-gallery .thumb,
  .category-gallery .thumb,
  .cat-gallery .thumb { position: relative; padding-top: 100%; }

  #categoriesGallery .thumb img,
  #catGallery .thumb img,
  .galerie-categories .thumb img,
  .categories-gallery .thumb img,
  .category-gallery .thumb img,
  .cat-gallery .thumb img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
  }

  /* Fallback “direct image” si pas de .thumb dans le HTML */
  #categoriesGallery > a > img, #categoriesGallery > button > img, #categoriesGallery > div > img,
  #catGallery       > a > img, #catGallery       > button > img, #catGallery       > div > img,
  .galerie-categories > a > img, .galerie-categories > button > img, .galerie-categories > div > img,
  .categories-gallery > a > img, .categories-gallery > button > img, .categories-gallery > div > img,
  .category-gallery  > a > img, .category-gallery  > button > img, .category-gallery  > div > img,
  .cat-gallery       > a > img, .cat-gallery       > button > img, .cat-gallery       > div > img {
    display: block;
    width: 100%;
    height: clamp(96px, 28vw, 160px); /* mobile → desktop */
    object-fit: cover;
  }
}

/* --- Titre sous l’image --- */
#categoriesGallery .title,
#catGallery .title,
.galerie-categories .title,
.categories-gallery .title,
.category-gallery .title,
.cat-gallery .title {
  display: block;
  text-align: center;
  padding: .5rem .75rem .75rem;
  font-size: clamp(12px, 3.4vw, 14px);
  font-weight: 500;
  color: #111827; /* gray-900 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Isolé par préfixe pour éviter tout conflit */
.rtg-wrap { display:flex; flex-wrap:wrap; gap:.5rem; }
.rtg-label { display:inline-block; margin:0 .5rem .5rem 0; cursor:pointer; }
.rtg-input { position:absolute; opacity:0; pointer-events:none; }
.rtg-pill {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem .75rem; border:1px solid #e5e7eb; /* gray-200 */
  border-radius:9999px; font-size:.875rem; line-height:1rem;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:all .15s ease;
}
.rtg-label:hover .rtg-pill { background:#f9fafb; /* gray-50 */ }
.rtg-input:focus + .rtg-pill { box-shadow:0 0 0 3px rgba(59,130,246,.35); } /* focus ring */
.rtg-input:checked + .rtg-pill {
  background:#111827; /* gray-900 (look “noir”) */
  color:#fff; border-color:#111827; box-shadow:0 2px 6px rgba(0,0,0,.15);
  transform:translateY(-1px);
}
/* ====== Filters UI ====== */
.rf-wrap { display:flex; flex-wrap:wrap; gap:.5rem; }

.rf-pill {
  display:inline-flex; align-items:center; gap:.5rem; justify-content:center;
  padding:.5rem .75rem; border:1px solid #e5e7eb; border-radius:9999px;
  font-size:.875rem; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.04);
  transition:all .15s ease; margin:0 .5rem .5rem 0; text-decoration:none; color:#111827;
}
.rf-pill:hover { background:#f9fafb; }
.rf-pill.selected {
  background:#111827; color:#fff; border-color:#111827;
  box-shadow:0 2px 6px rgba(0,0,0,.15); transform:translateY(-1px);
}

@media (max-width: 640px) {
  /* Conserver l’alignement “desktop” dans la modale filtres mobile */
  .rtg-wrap,
  .rf-wrap { display:flex; flex-wrap:wrap; gap:.5rem; }
  .rtg-label { display:inline-block; margin:0 .5rem .5rem 0; }
  .rtg-pill,
  .rf-pill { width:auto; justify-content:center; margin-right:0; }
}
.price_tri_dark {
  background:#111827 !important;
  color:#fff !important;
  border-color:#111827 !important;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.price_tri_dark svg,
.price_tri_dark .pdc,
.price_tri_dark .dpc,
.price_tri_dark .icp {
  color:#fff;
  fill:#fff;
}

.clr-pill .clr-dot {
  width:.875rem; height:.875rem; border-radius:9999px;
  border:1px solid rgba(0,0,0,.1); display:inline-block;
}
.clr-dot.transparent {
  background-image:repeating-conic-gradient(#ccc 0 25%, transparent 0 50%);
  background-size:8px 8px;
}

/* bouton plus/moins */
.rf-more {
  display:inline-block; padding:.25rem .75rem; border:1px solid #e5e7eb; border-radius:.5rem;
  background:#fff; font-size:.875rem; cursor:pointer;
}
.rf-more:hover { background:#f9fafb; }

/* masquage */
.rfbc-hidden { display:none !important; }

/* ====== Filtres actifs ====== */
.rf-active {
  background:#fff; border:1px solid #e5e7eb; border-radius:.75rem;
  padding:.75rem; margin-bottom:1rem;
}
.rf-active-title { font-weight:600; font-size:.95rem; margin-bottom:.5rem; }
.rf-active-chips { display:flex; flex-wrap:wrap; gap:.5rem; }
.rf-chip {
  display:inline-flex; align-items:center; gap:.5rem; padding:.25rem .5rem;
  background:#111827; color:#fff; border-radius:9999px; font-size:.8rem; text-decoration:none;
}
.rf-chip .rf-chip-x {
  display:inline-flex; align-items:center; justify-content:center; width:1.2rem; height:1.2rem;
  border-radius:50%; background:#fff; color:#111827; text-decoration:none; line-height:1.2rem;
}
.rf-chip .rf-chip-x:hover { opacity:.8; }
.rf-chip.rf-chip-clear { background:#fff; color:#111827; border:1px solid #e5e7eb; }
.rf-chip.rf-chip-clear:hover { background:#f9fafb; }
.rf-chip .rf-chip-x svg { display:block; }
#mobileFilter header button:hover { background: rgba(17,24,39,.06); }
#mobileOverlay{ z-index:999; }
#mobileFilter{ z-index:1000; }
html,body{ max-width:100%; }
/* Conteneur */
#mobileFilterBar{
  padding:.5rem 1rem;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.05),0 2px 10px rgba(0,0,0,.05);
  margin:0 auto 10px;
  max-width:1280px;
}

#mobileFilterBar .rf-active{
  margin:0;
}

/* === Ajustements modale filtres mobile === */
#mobileFilterBody{
  padding: .65rem 1rem !important;
  padding-bottom: calc(2.75rem + env(safe-area-inset-bottom)) !important;
}
/* Catégories mobile: liste fluide, sans alignement rigide */
#mobileFilterBody #catbases-wrap{
  display: block;
}
#mobileFilterBody #catbases-wrap .base-row{
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: .5rem;
  padding: .35rem 0;
}
#mobileFilterBody #catbases-wrap .base-input{
  flex: 0 0 auto;
  margin-top: .2rem;
}
#mobileFilterBody #catbases-wrap .base-row-link{
  display: block;
  min-width: 0;
  max-width: 100%;
}
#mobileFilterBody #catbases-wrap .base-row-label{
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  width: 100%;
}
#mobileFilterBody #catbases-wrap .base-row .text-sm{
  white-space: normal;
  line-height: 1.25;
}
#mobileFilterBody #desktopCatViewBases{
  margin-bottom: .5rem;
}
/* Prix / Budget / Évaluation – resserrer les espacements dans la modale */
#mobileFilterBody #rf-block-Prix .flex{
  gap: .4rem;
}
#mobileFilterBody #rf-block-Prix input[type="number"]{
  width: 5.25rem !important;
  padding: .35rem .5rem !important;
  border: 1px solid #e5e7eb;
  border-radius: .5rem;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
  outline: none !important;
  box-shadow: none !important;
}
#mobileFilterBody #rf-block-Prix input[type="number"]:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}
#mobileFilterBody #rf-block-Prix input[type="number"]:focus{
  outline: none !important;
  border-color: #111827;
  box-shadow: none !important;
}
#mobileFilterBody #rf-block-Prix button{
  padding: .35rem .6rem !important;
  border-radius: .5rem !important;
}
#mobileFilterBody .rtg-wrap,
#mobileFilterBody .rf-wrap{
  gap: .2rem .3rem;
  justify-content: flex-start;
}
#mobileFilterBody .rtg-label{
  margin: 0 .15rem .15rem 0;
}
#mobileFilterBody .rtg-pill,
#mobileFilterBody .rf-pill{
  padding: .28rem .5rem;
}
#mobileFilterBody .rtg-input:focus + .rtg-pill{
  outline: none !important;
  box-shadow: none !important;
}
/* Réduire les espaces entre blocs filtres dans la modale */
#mobileFilterBody .mt-8{
  margin-top: .75rem !important;
}
#mobileFilterBody h4{
  margin-bottom: .5rem !important;
}

/* Catégories du menu gauche: empiler en vertical, sans alignement multi-colonnes */
#filterSidebar #desktopCatViewBases #catbases-wrap{
  display: block;
}
#filterSidebar #desktopCatViewBases #catbases-wrap .base-row{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
#filterSidebar #desktopCatViewBases #catbases-wrap .base-row .base-row-link{
  display: block;
  flex: 1;
  min-width: 0;
}
#filterSidebar #desktopCatViewBases #catbases-wrap .base-row .base-row-label{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0 !important;
}
#filterSidebar #desktopCatViewBases #catbases-wrap .base-row .text-sm{
  white-space: normal;
  line-height: 1.25;
}

/* Cross-browser store grid stability (Chrome/Firefox/Edge) */
.store-page .store-section > .container,
.store-page .store-section > .container > .grid,
.store-page .pdeskp-top,
.store-page .similar-products-content,
.store-page .similar-products-content > *,
.store-page .similar-product-card,
.store-page .similar-product-body,
.store-page .similar-product-title,
.store-page .rtg-row{
  min-width: 0;
  max-width: 100%;
}
.store-page .similar-products-content{
  width: 100%;
  box-sizing: border-box;
}
.store-page .similar-product-media img{
  width: 100%;
  height: auto;
  display: block;
}
.store-page .store-layout > .store-main{
  min-width: 0;
  max-width: 100%;
}
@media (min-width: 768px){
  .store-page .store-layout > #filterSidebar{
    grid-column: 1 / span 1;
  }
  .store-page .store-layout > .store-main.store-main--with-sidebar{
    grid-column: 2 / -1;
  }
  .store-page .store-layout > .store-main.store-main--full{
    grid-column: 1 / -1;
  }
}
@media (max-width: 1023px){
  .store-page .similar-products-content{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .75rem !important;
  }
}
@media (min-width: 768px) and (max-width: 1023px){
  .store-page .similar-products-content{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 1024px){
  .store-page .similar-products-content{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* Ligne unique, défilable si trop long */
.mfb-row{
  display:flex;
  align-items:center;
  gap:.5rem;
  overflow-x:auto;
  scrollbar-width:none;
}
.mfb-row::-webkit-scrollbar{ display:none; }

/* Bouton principal Filtres */
.mfb-main{
  display:inline-flex; align-items:center; gap:.45rem;
  border:1px solid #111; background:#fff; color:#111;
  border-radius:9999px; padding:.55rem .85rem;
  font-weight:700; line-height:1;
}
.mfb-main .mfb-icon{ display:inline-flex; width:20px; height:20px; }
.mfb-main .mfb-badge{
  margin-left:.2rem; font-weight:700; font-size:.875rem; line-height:1;
  /* pas de background si N>0 comme demandé */
}
.mfb-main:active{ transform:translateY(1px); }

/* Éléments (sections & catégories) */
.mfb-item{
  flex:0 0 auto;
  display:inline-flex; align-items:center; gap:.4rem;
  background:#fff; border:1px solid #111; color:#111;
  border-radius:9999px; padding:.25rem .35rem;
}
.mfb-heading{ margin:0; font-size:inherit; font-weight:700; line-height:1; }
.mfb-item-cat{
  align-items: flex-start;
}
.mfb-item-cat .mfb-item-label{
  white-space: normal;
  text-align: left;
  line-height: 1.2;
}

/* Bouton “vider” interne de chaque item (affiché seulement si N>0 car rendu par JS) */
.mfb-item-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:9999px;
  border:1px solid #e5e7eb; background:#fff;
}
.mfb-item-btn:active{ transform:translateY(1px); }

/* Libellé cliquable */
.mfb-item-label{
  display:inline-flex; align-items:center; gap:.35rem;
  padding:.35rem .6rem; border-radius:9999px;
  background:#f9fafb; border:1px solid #eef0f2;
  font-size:.875rem; line-height:1.1; white-space:nowrap; color:#111;
}
.mfb-item-label:active{ transform:translateY(1px); }

/* Compteur (rendu seulement si N>0 par JS) */
.mfb-item-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.2rem; height:1.05rem; padding:0 .35rem; border-radius:9999px;
  background:#111; color:#fff; font-size:.7rem; line-height:1;
}

/* Flèche */
.mfb-item-arrow{ width:16px; height:16px; }

/* Flèche séparée (catégories) */
.mfb-item-arrow-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:9999px;
  border:1px solid #e5e7eb; background:#fff;
}
.mfb-item-arrow-btn:active{ transform:translateY(1px); }

/* store.php inline mobile/tablette overrides (moved here) */
/* Pagination (mobile/tablette only) */
html.ui-mobile .pagination,
html.ui-tablet .pagination{
  margin: 1.5rem 0 2rem;
}
html.ui-mobile .pagination__list,
html.ui-tablet .pagination__list{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
html.ui-mobile .pagination__item,
html.ui-tablet .pagination__item{
  display: inline-flex;
}
html.ui-mobile .pagination__item.num,
html.ui-tablet .pagination__item.num,
html.ui-mobile .pagination__item.edge,
html.ui-tablet .pagination__item.edge,
html.ui-mobile .pagination__item.gap,
html.ui-tablet .pagination__item.gap{
  display: inline-flex;
}
html.ui-mobile .pagination__item a,
html.ui-tablet .pagination__item a,
html.ui-mobile .pagination__item span,
html.ui-tablet .pagination__item span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 .8rem;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #fff;
  color: #111827;
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
html.ui-mobile .pagination__item a:hover,
html.ui-tablet .pagination__item a:hover{
  background: #f9fafb;
  border-color: #e5e7eb;
}
html.ui-mobile .pagination__item.is-active span,
html.ui-tablet .pagination__item.is-active span{
  background: #fff;
  color: #111827;
  border-color: #111827;
}
html.ui-mobile .pagination__item.is-disabled span,
html.ui-tablet .pagination__item.is-disabled span{
  opacity: .5;
  cursor: not-allowed;
}
html.ui-mobile .pagination__item.has-icon a,
html.ui-tablet .pagination__item.has-icon a,
html.ui-mobile .pagination__item.has-icon span,
html.ui-tablet .pagination__item.has-icon span{
  min-width: 44px;
  height: 44px;
  border-radius: 14px;
  padding: 0;
}
html.ui-mobile .pagination__icon,
html.ui-tablet .pagination__icon{
  width: 20px;
  height: 20px;
}
html.ui-mobile .pagination__item.gap span,
html.ui-tablet .pagination__item.gap span{
  min-width: 14px;
  height: 38px;
  padding: 0;
  border: 0;
  background: transparent;
}
@media (max-width: 480px){
  /* Force les numéros visibles comme desktop (store.css cache sur mobile) */
  html.ui-mobile .pagination__item.num,
  html.ui-tablet .pagination__item.num,
  html.ui-mobile .pagination__item.edge,
  html.ui-tablet .pagination__item.edge,
  html.ui-mobile .pagination__item.gap,
  html.ui-tablet .pagination__item.gap{
    display: inline-flex !important;
  }
}
@media (max-width: 768px){
  /* Évite les retours à la ligne (pagination sur une seule ligne) */
  html.ui-mobile .pagination__list,
  html.ui-tablet .pagination__list{
    flex-wrap: nowrap;
    justify-content: center;
    gap: clamp(.3rem, 1.5vw, .5rem);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  html.ui-mobile .pagination__list::-webkit-scrollbar,
  html.ui-tablet .pagination__list::-webkit-scrollbar{ display:none; }
  html.ui-mobile .pagination__item a,
  html.ui-tablet .pagination__item a,
  html.ui-mobile .pagination__item span,
  html.ui-tablet .pagination__item span{
    min-width: clamp(28px, 7vw, 32px);
    height: clamp(28px, 7vw, 32px);
    padding: 0 .45rem;
    border-radius: 10px;
    font-size: clamp(.75rem, 2.6vw, .85rem);
  }
  html.ui-mobile .pagination__item.has-icon a,
  html.ui-tablet .pagination__item.has-icon a,
  html.ui-mobile .pagination__item.has-icon span,
  html.ui-tablet .pagination__item.has-icon span{
    min-width: clamp(32px, 8vw, 36px);
    height: clamp(32px, 8vw, 36px);
    border-radius: 11px;
  }
  html.ui-mobile .pagination__icon,
  html.ui-tablet .pagination__icon{
    width: clamp(16px, 4vw, 18px);
    height: clamp(16px, 4vw, 18px);
  }
}
html.ui-tablet .pagination__list,
html.ui-mobile .pagination__list{
  flex-wrap: nowrap;
  justify-content: center;
  gap: clamp(.3rem, 1.5vw, .5rem);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
html.ui-tablet .pagination__list::-webkit-scrollbar,
html.ui-mobile .pagination__list::-webkit-scrollbar{ display:none; }

/* Store UI polish (mobile/tablette uniquement) */
html.ui-mobile,
html.ui-tablet{
  --store-card-radius: 18px;
  --store-card-shadow: 0 12px 24px rgba(15,23,42,.06);
  --store-border: #eef0f2;
}
html.ui-mobile #filterSidebar,
html.ui-tablet #filterSidebar{
  border: 1px solid var(--store-border);
  border-radius: 18px !important;
  box-shadow: var(--store-card-shadow);
  padding: 1.25rem;
}
html.ui-mobile #filterSidebar h4,
html.ui-tablet #filterSidebar h4{
  font-size: .95rem;
  font-weight: 700;
  color: #111827;
}
html.ui-mobile #filterSidebar .base-row,
html.ui-tablet #filterSidebar .base-row{
  border-radius: 12px;
  border: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease;
}
html.ui-mobile #filterSidebar .base-row:hover,
html.ui-tablet #filterSidebar .base-row:hover{
  background: #f9fafb;
  border-color: #f1f5f9;
}
html.ui-mobile #filterSidebar #desktopCatViewBases,
html.ui-tablet #filterSidebar #desktopCatViewBases{
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid #f1f5f9;
}
html.ui-mobile #filterSidebar [id^="rf-block-"],
html.ui-tablet #filterSidebar [id^="rf-block-"]{
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid #f1f5f9;
}
html.ui-mobile #filterSidebar [id^="rf-block-"]:first-child,
html.ui-tablet #filterSidebar [id^="rf-block-"]:first-child{
  border-top: 0;
  margin-top: 0;
  padding-top: 0;
}
html.ui-mobile .rtg-pill,
html.ui-tablet .rtg-pill,
html.ui-mobile .rf-pill,
html.ui-tablet .rf-pill{
  box-shadow: 0 6px 14px rgba(15,23,42,.05);
}
html.ui-mobile .rtg-pill:focus-visible,
html.ui-tablet .rtg-pill:focus-visible,
html.ui-mobile .rf-pill:focus-visible,
html.ui-tablet .rf-pill:focus-visible,
html.ui-mobile .rf-chip:focus-visible,
html.ui-tablet .rf-chip:focus-visible{
  outline: 2px solid #111827;
  outline-offset: 2px;
}
html.ui-mobile .store-page #mobileFilterBar,
html.ui-tablet .store-page #mobileFilterBar{
  margin-top: 0;
}
html.ui-mobile .store-page #mobileFilterBar:empty,
html.ui-tablet .store-page #mobileFilterBar:empty{
  display: none;
  padding: 0;
  margin: 0;
}
html.ui-mobile .store-page,
html.ui-tablet .store-page{
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
html.ui-mobile .store-page footer,
html.ui-tablet .store-page footer{
  margin-bottom: 0 !important;
}
html.ui-mobile .page-content-store,
html.ui-tablet .page-content-store{padding-bottom:0}
html.ui-mobile .page-content-store:after,
html.ui-tablet .page-content-store:after{content:"";display:block;clear:both}
html.ui-mobile .store-section .container,
html.ui-tablet .store-section .container,
html.ui-mobile .page-content-store .container,
html.ui-tablet .page-content-store .container{
  max-width:100% !important;
  width:100% !important;
}
html.ui-mobile .store-section > .container > .grid,
html.ui-tablet .store-section > .container > .grid{
  grid-template-columns: 1fr !important;
}
html.ui-mobile .store-section > .container > .grid > .pdeskp-top,
html.ui-tablet .store-section > .container > .grid > .pdeskp-top{
  grid-column: 1 / -1 !important;
  width: 100% !important;
}
@media (max-width: 1023px){
  html.ui-mobile .store-section > .container > .grid,
  html.ui-tablet .store-section > .container > .grid{
    grid-template-columns: 1fr !important;
  }
  html.ui-mobile .store-section > .container > .grid > .pdeskp-top,
  html.ui-tablet .store-section > .container > .grid > .pdeskp-top{
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }
  html.ui-mobile .similar-products-content,
  html.ui-tablet .similar-products-content{
    width: 100% !important;
    max-width: 100% !important;
  }
  html.ui-mobile .similar-products-content > *,
  html.ui-tablet .similar-products-content > *{
    min-width: 0 !important;
  }
}
html.ui-mobile .similar-products-content,
html.ui-tablet .similar-products-content{
  align-items: stretch;
}
@media (max-width: 1023px){
  /* Auto grid pour éviter le vide hors desktop */
  html.ui-mobile .similar-products-content,
  html.ui-tablet .similar-products-content{
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
    gap: clamp(.6rem, 2vw, 1rem) !important;
  }
}
@media (min-width: 992px) and (max-width: 1199px){
  html.ui-desktop .store-section > .container{
    width: 100% !important;
    max-width: 1536px !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  html.ui-desktop .store-section > .container > .grid{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 1.25rem !important;
  }
  html.ui-desktop .store-section > .container > .grid > #filterSidebar{
    display: block !important;
    grid-column: span 1 / span 1 !important;
  }
  html.ui-desktop .store-section > .container > .grid > .store-main.store-main--with-sidebar{
    grid-column: 2 / -1 !important;
  }
  html.ui-desktop .store-section > .container > .grid > .store-main.store-main--full{
    grid-column: 1 / -1 !important;
  }
  html.ui-desktop #mobileFilterBar{
    display: none !important;
  }
  html.ui-desktop .similar-products-content{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }
}
html.ui-tablet #filterSidebar,
html.ui-mobile #filterSidebar{
  display: none !important;
}
html.ui-tablet #mobileFilterBar,
html.ui-mobile #mobileFilterBar{
  display: block !important;
}
@media (max-width: 1023px) and (orientation: landscape){
  html.ui-mobile .store-section > .container,
  html.ui-tablet .store-section > .container{
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  html.ui-mobile #filterSidebar,
  html.ui-tablet #filterSidebar{
    display: none !important;
  }
  html.ui-mobile #mobileFilterBar,
  html.ui-tablet #mobileFilterBar{
    display: block !important;
  }
}
html.ui-mobile .similar-product-card,
html.ui-tablet .similar-product-card{
  border-radius: var(--store-card-radius) !important;
  border: 1px solid var(--store-border);
  box-shadow: var(--store-card-shadow);
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
html.ui-mobile .similar-product-card:hover,
html.ui-tablet .similar-product-card:hover{
  box-shadow: 0 16px 30px rgba(15,23,42,.08);
}
html.ui-mobile .similar-product-media,
html.ui-tablet .similar-product-media{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--store-card-radius) var(--store-card-radius) 0 0;
  background: #f8fafc;
  margin-bottom: .75rem;
}
html.ui-mobile .similar-product-media img,
html.ui-tablet .similar-product-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
}
html.ui-mobile .similar-product-body,
html.ui-tablet .similar-product-body{
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: .85rem .9rem .95rem;
}
html.ui-mobile .similar-product-body > a,
html.ui-tablet .similar-product-body > a{
  display: flex;
  flex-direction: column;
  height: 100%;
}
html.ui-mobile .similar-product-title,
html.ui-tablet .similar-product-title{
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.6em;
  line-height: 1.35;
}
html.ui-mobile .similar-product-meta,
html.ui-tablet .similar-product-meta{
  margin-top: auto;
  padding-top: .25rem;
}
html.ui-mobile #mobileFilter,
html.ui-tablet #mobileFilter{
  width: 100%;
  max-width: 100%;
}
html.ui-mobile #mobileFilterBody,
html.ui-tablet #mobileFilterBody{
  padding: .65rem 1rem !important;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
html.ui-mobile #mobileFilter footer,
html.ui-tablet #mobileFilter footer{
  padding: .85rem 1.25rem !important;
}
html.ui-mobile #mobileFilterApply,
html.ui-tablet #mobileFilterApply{
  min-width: 8.5rem;
  border-radius: 9999px;
}
@media (max-width: 640px){
  html.ui-mobile .similar-products-content,
  html.ui-tablet .similar-products-content{
    gap: .75rem !important;
  }
}
html.ui-mobile #mobileFilter,
html.ui-tablet #mobileFilter{
  flex-direction: column;
  overflow: hidden;
}
html.ui-mobile #mobileFilterBody,
html.ui-tablet #mobileFilterBody{
  flex: 1;
  min-height: 0;
}
html.ui-mobile #mobileFilter footer,
html.ui-tablet #mobileFilter footer{
  margin-top: auto;
}
html.ui-mobile #mobileFilter,
html.ui-tablet #mobileFilter{
  height: 100dvh;
  z-index: 1200;
  position: fixed;
  inset: 0;
}
html.ui-mobile #mobileOverlay,
html.ui-tablet #mobileOverlay{
  z-index: 1100;
  position: fixed;
  inset: 0;
}
html.ui-mobile #mobileFilter footer,
html.ui-tablet #mobileFilter footer{
  position: sticky;
  bottom: 0;
  z-index: 30;
  padding-bottom: calc(.75rem + env(safe-area-inset-bottom));
}
html.ui-mobile #mobileFilterBody,
html.ui-tablet #mobileFilterBody{
  padding-bottom: calc(2.75rem + env(safe-area-inset-bottom)) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  max-height: calc(100dvh - 56px - 2.75rem - env(safe-area-inset-bottom));
}

/* Store mobile stabilization patch */
html.ui-mobile,
html.ui-tablet{
  max-width: 100%;
}
html.ui-mobile .store-page,
html.ui-tablet .store-page,
html.ui-mobile .page-content-store,
html.ui-tablet .page-content-store,
html.ui-mobile .store-section,
html.ui-tablet .store-section{
  max-width: 100%;
  overflow-x: clip;
}
html.ui-mobile .store-section > .container,
html.ui-tablet .store-section > .container{
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}
html.ui-mobile .store-section > .container > .grid,
html.ui-tablet .store-section > .container > .grid{
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 1rem !important;
}
html.ui-mobile .store-section > .container > .grid > .pdeskp-top,
html.ui-tablet .store-section > .container > .grid > .pdeskp-top{
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 0;
}
html.ui-mobile .similar-products-content,
html.ui-tablet .similar-products-content{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: .75rem !important;
}
@media (min-width: 820px){
  html.ui-mobile .similar-products-content,
  html.ui-tablet .similar-products-content{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
html.ui-mobile .similar-products-content > *,
html.ui-tablet .similar-products-content > *{
  min-width: 0 !important;
  max-width: 100%;
}
html.ui-mobile #mobileFilter,
html.ui-tablet #mobileFilter{
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100dvh !important;
  inset: 0;
  flex-direction: column;
  overflow: hidden;
}
html.ui-mobile #mobileOverlay,
html.ui-tablet #mobileOverlay{
  position: fixed;
  inset: 0;
}
html.ui-mobile #mobileFilter > header,
html.ui-tablet #mobileFilter > header{
  flex: 0 0 auto;
  position: sticky;
  top: 0;
  z-index: 20;
}
html.ui-mobile #mobileFilterBody,
html.ui-tablet #mobileFilterBody{
  display: block !important;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: .75rem .9rem calc(5.25rem + env(safe-area-inset-bottom)) !important;
}
html.ui-mobile #mobileFilter > footer,
html.ui-tablet #mobileFilter > footer{
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 25;
  background: #fff;
  border-top: 1px solid #e5e7eb;
  padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom)) !important;
}
html.ui-mobile #mobileFilterCount,
html.ui-tablet #mobileFilterCount{
  min-height: 1.1rem;
  line-height: 1.2;
  font-size: .83rem;
}
html.ui-mobile #mobileFilterApply,
html.ui-tablet #mobileFilterApply{
  min-width: 9.5rem;
  height: 40px;
  border-radius: 9999px;
  padding: 0 1rem;
  white-space: nowrap;
}
html.ui-mobile #mobileFilterBar,
html.ui-tablet #mobileFilterBar{
  margin: 0 auto .65rem;
  padding: .45rem .75rem;
  max-width: 100%;
  border-bottom: 1px solid #eef0f2;
  box-shadow: none;
}
html.ui-mobile .mfb-row,
html.ui-tablet .mfb-row{
  gap: .4rem;
}
html.ui-mobile .mfb-main,
html.ui-tablet .mfb-main,
html.ui-mobile .mfb-item,
html.ui-tablet .mfb-item{
  min-height: 36px;
}
html.ui-mobile .mfb-main,
html.ui-tablet .mfb-main{
  border-color: #d1d5db;
  padding: .5rem .8rem;
}
html.ui-mobile .mfb-item,
html.ui-tablet .mfb-item{
  border-color: #d1d5db;
  padding: .2rem .3rem;
}
html.ui-mobile .mfb-item-label,
html.ui-tablet .mfb-item-label{
  background: #fff;
  border: 0;
  padding: .35rem .55rem;
}

/* Tablet portrait/landscape tuning */
html.ui-tablet .store-section > .container{
  padding-left: 14px !important;
  padding-right: 14px !important;
}
html.ui-tablet .rtg-row{
  width: 100%;
  max-width: 100%;
  padding-right: .25rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
html.ui-tablet .similar-products-content{
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: .8rem !important;
}
html.ui-tablet .similar-product-card{
  min-width: 0;
}
html.ui-tablet .cat-gallery{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (orientation: landscape){
  html.ui-tablet .store-section > .container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  html.ui-tablet .similar-products-content{
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
  html.ui-tablet .cat-gallery{
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

/* Width-first responsive fallback (cross-browser resize stability). */
@media (max-width: 1199px){
  .store-page #filterSidebar{
    display:none !important;
  }
  .store-page #mobileFilterBar{
    display:block !important;
  }
  .store-page .store-section > .container > .grid{
    grid-template-columns:minmax(0, 1fr) !important;
    gap:1rem !important;
  }
  .store-page .store-section > .container > .grid > .pdeskp-top{
    grid-column:1 / -1 !important;
    width:100% !important;
  }
  .store-page .similar-products-content{
    grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)) !important;
    gap:clamp(.6rem, 2vw, 1rem) !important;
  }
}
@media (min-width: 1200px){
  .store-page #mobileFilterBar{
    display:none !important;
  }
}

/* Active filters block: visible on tablet+desktop, hidden on small mobile only. */
@media (max-width: 767px){
  .rf-active-host{
    display:none !important;
  }
}

/* ===== Store page hardening (final) ===== */
.store-page,
.store-page .page-content-store,
.store-page .store-section,
.store-page .store-section > .container,
.store-page .store-section > .container > .grid,
.store-page .store-layout,
.store-page .store-main,
.store-page .similar-products-content,
.store-page .similar-products-content > *,
.store-page .similar-product-card,
.store-page .similar-product-body{
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
}

.store-page img,
.store-page video,
.store-page iframe{
  max-width:100%;
  height:auto;
}

.store-page .similar-product-title{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  overflow-wrap:anywhere;
}

.store-page table{
  display:block;
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.store-page th,
.store-page td{
  overflow-wrap:anywhere;
}

@media (max-width: 1199px){
  .store-page #filterSidebar{
    display:none !important;
  }
  .store-page #mobileFilterBar{
    display:block !important;
  }
  .store-page .store-section > .container{
    width:100% !important;
    max-width:100% !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .store-page .store-section > .container > .grid{
    grid-template-columns:minmax(0,1fr) !important;
    gap:1rem !important;
  }
  .store-page .store-section > .container > .grid > .pdeskp-top{
    grid-column:1 / -1 !important;
    width:100% !important;
  }
  .store-page .similar-products-content{
    grid-template-columns:repeat(auto-fit, minmax(148px, 1fr)) !important;
    gap:.75rem !important;
  }
}

@media (min-width: 768px) and (max-width: 1199px){
  .store-page .similar-products-content{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 1200px){
  .store-page #mobileFilterBar{
    display:none !important;
  }
  .store-page .store-layout{
    align-items:start !important;
  }
  .store-page #filterSidebar{
    display:block !important;
    position:sticky !important;
    top:calc(var(--header-h,72px) + .75rem) !important;
    align-self:start !important;
    height:auto !important;
    max-height:calc(100dvh - var(--header-h,72px) - 1rem) !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    padding-bottom:1rem !important;
  }
  .store-page .store-section > .container{
    width:100% !important;
    max-width:1536px !important;
  }
  .store-page .similar-products-content{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px){
  .store-page .page-content-store{
    padding-bottom:68px;
  }
}

/* ===== Filter content layout hardening (store.php) ===== */
.store-page{
  --store-filter-overlay-z: 4100;
  --store-filter-panel-z: 4200;
  --store-filter-tablet-max: 840px;
}

.store-page .store-filter-overlay{
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .45);
  z-index: var(--store-filter-overlay-z);
}

.store-page .store-filter-drawer{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  width: 100%;
  max-width: none;
  background: #fff;
  z-index: var(--store-filter-panel-z);
  transform: translateX(-100%);
  transition: transform .25s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.store-page .store-filter-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1rem;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}

.store-page #mobileFilterBody.store-filter-body{
  flex: 1 1 auto;
  min-height: 0;
  display: block !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 1rem 1rem calc(var(--mobileFilterFooterH, 78px) + 1rem + env(safe-area-inset-bottom)) !important;
}

.store-page .store-filter-footer{
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border-top: 1px solid #e5e7eb;
  background: #fff;
  padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom));
}

.store-page #mobileFilterCount{
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.3;
}

.store-page #mobileFilterApply{
  flex: 0 0 auto;
  min-height: 44px;
  white-space: nowrap;
}

.store-page #mobileFilterBody #catbases-wrap{
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.store-page #mobileFilterBody #catbases-wrap .base-row{
  width: 100%;
  justify-content: flex-start;
}

.store-page #mobileFilterBody .rtg-wrap,
.store-page #mobileFilterBody .rf-wrap,
.store-page #filterSidebar .rtg-wrap,
.store-page #filterSidebar .rf-wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: .5rem;
}

.store-page #mobileFilterBody .rtg-label,
.store-page #filterSidebar .rtg-label{
  margin: 0 !important;
}

.store-page #mobileFilterBody .rtg-pill,
.store-page #mobileFilterBody .rf-pill,
.store-page #filterSidebar .rtg-pill,
.store-page #filterSidebar .rf-pill{
  margin: 0 !important;
  max-width: 100%;
}

.store-page #mobileFilterBody .rf-more,
.store-page #filterSidebar .rf-more{
  margin-top: .5rem;
  align-self: flex-start;
}

.store-page .rf-price-row{
  display: flex;
  align-items: center;
  width: 100%;
  gap: .55rem;
}

.store-page .rf-price-input{
  flex: 1 1 0;
  min-width: 0;
  width: auto !important;
  height: 40px;
  border: 1px solid #d1d5db;
  border-radius: .6rem;
  background: #fff;
  padding: 0 .65rem;
  outline: none;
  box-shadow: none;
}

.store-page .rf-price-input:focus{
  border-color: #111827;
}

.store-page .rf-price-separator{
  flex: 0 0 14px;
  height: 2px;
  border-radius: 999px;
  background: #cbd5e1;
}

.store-page .rf-price-ok{
  flex: 0 0 auto;
  min-width: 52px;
  height: 40px;
  border-radius: .6rem !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

@media (max-width: 1199px){
  .store-page #filterSidebar{
    display: none !important;
  }

  .store-page #mobileFilterBar{
    display: block !important;
  }

  .store-page .store-filter-drawer{
    max-height: 100dvh;
  }
}

@media (max-width: 767px){
  .store-page .store-filter-drawer{
    width: 100vw !important;
    max-width: none !important;
    border-radius: 0;
  }

  .store-page #mobileFilterBody.store-filter-body{
    padding: 1rem .9rem calc(var(--mobileFilterFooterH, 78px) + .9rem + env(safe-area-inset-bottom)) !important;
  }

  .store-page .store-filter-footer{
    display: block;
    padding: .75rem .9rem calc(.9rem + env(safe-area-inset-bottom));
  }

  .store-page #mobileFilterCount{
    margin-bottom: .5rem;
  }

  .store-page #mobileFilterApply{
    display: block;
    width: 100%;
    min-width: 0 !important;
  }

  .store-page .rf-price-row{
    gap: .45rem;
  }
}

@media (min-width: 768px) and (max-width: 1199px){
  .store-page .store-filter-drawer{
    width: min(var(--store-filter-tablet-max), calc(100vw - 2rem)) !important;
    max-width: min(var(--store-filter-tablet-max), calc(100vw - 2rem)) !important;
    margin-inline: auto;
    border-radius: 18px 18px 0 0;
  }

  .store-page .store-filter-footer{
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .store-page #mobileFilterBody.store-filter-body{
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  .store-page #mobileFilterApply{
    min-width: 14rem;
  }
}

@media (min-width: 1200px){
  .store-page #mobileFilterBar{
    display: none !important;
  }
}

/* ===== STORE MOBILE-FIRST VISUAL LOCK (header chips / sort / cards) ===== */
.store-page{
  --store-chip-h: 40px;
  --store-chip-gap: 10px;
  --store-card-radius: 18px;
  --store-card-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

@media (max-width: 1199px){
  .store-page #mobileFilterBar{
    display: block !important;
    width: 100%;
    max-width: 100%;
    margin: 0 0 10px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid #eceff3;
    box-shadow: none !important;
    overflow: hidden;
  }

  .store-page #mobileFilterBar .mfb-row{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: var(--store-chip-gap);
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 0 2px;
  }

  .store-page #mobileFilterBar .mfb-row::-webkit-scrollbar{
    display: none;
  }

  .store-page #mobileFilterBar .mfb-main,
  .store-page #mobileFilterBar .mfb-item{
    height: var(--store-chip-h);
    min-height: var(--store-chip-h);
    flex: 0 0 auto;
    border: 1px solid #e6e6e6;
    border-radius: 999px;
    background: #fff;
    box-shadow: none;
  }

  .store-page #mobileFilterBar .mfb-main{
    padding: 0 14px;
    font-weight: 700;
    gap: 8px;
  }

  .store-page #mobileFilterBar .mfb-item{
    padding: 0 8px;
    gap: 6px;
    justify-content: flex-start;
  }

  .store-page #mobileFilterBar .mfb-item-label{
    max-width: 140px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 0;
    background: transparent;
    padding: 0;
  }

  .store-page #mobileFilterBar .mfb-item-count{
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 11px;
  }

  .store-page #orderBy{
    margin-bottom: 10px !important;
  }

  .store-page #orderBy .rtg-row{
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
    gap: var(--store-chip-gap);
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 6px 12px 12px !important;
    margin: 0 !important;
    max-width: 100%;
  }

  .store-page #orderBy .rtg-row::-webkit-scrollbar{
    display: none;
  }

  .store-page #orderBy .rtg-pill{
    flex: 0 0 auto;
    height: var(--store-chip-h);
    min-height: var(--store-chip-h);
    padding: 0 16px !important;
    margin: 0 !important;
    border-radius: 999px;
    border: 1px solid #e6e6e6;
    background: #fff;
    color: #1f2937;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    box-shadow: none;
  }

  .store-page #orderBy .rtg-pill.price_tri_active,
  .store-page #orderBy .rtg-pill.price_tri_dark{
    background: #f28a2e !important;
    color: #fff !important;
    border-color: transparent !important;
  }
}

@media (max-width: 767px){
  .store-page #rf-products .similar-products-content{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
    padding: 12px !important;
    width: 100%;
    max-width: 100%;
  }

  .store-page #rf-products .similar-product-card{
    border-radius: var(--store-card-radius) !important;
    box-shadow: var(--store-card-shadow) !important;
    border: 1px solid #edf0f5 !important;
    background: #fff;
    overflow: hidden;
    padding: 12px;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
  }

  .store-page #rf-products .similar-product-media{
    margin: 0 0 10px !important;
    border-radius: 14px !important;
    background: #f7f7f7;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
  }

  .store-page #rf-products .similar-product-media img{
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 14px !important;
  }

  .store-page #rf-products .similar-product-body{
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }

  .store-page #rf-products .similar-product-title{
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    min-height: calc(1.25em * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .store-page #rf-products .similar-product-price{
    margin: 0 !important;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.2;
    color: #111827 !important;
  }

  .store-page #rf-products .similar-product-price .line-through{
    font-size: 14px !important;
    font-weight: 400 !important;
    opacity: .55;
  }

  .store-page #rf-products .similar-product-meta{
    margin-top: 4px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    font-size: 13px !important;
    line-height: 1.2;
  }

  .store-page #rf-products .similar-product-meta .sp-rating{
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .store-page #rf-products .similar-product-meta .sp-sales{
    opacity: .75;
  }
}

/* Final mobile lock: compact spacing around sort row + stable 2-column cards */
@media (max-width: 767px){
  .store-page #mobileFilterBar{
    margin: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  .store-page #orderBy{
    margin-top: 4px !important;
    margin-bottom: 4px !important;
  }

  .store-page #orderBy .rtg-row{
    margin: 0 !important;
    padding-top: 2px !important;
    padding-bottom: 6px !important;
  }

  .store-page #rf-products .similar-products-content{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 8px 12px !important;
  }

  .store-page #rf-products .similar-product-card{
    padding: 8px !important;
  }

  .store-page #rf-products .similar-product-title{
    font-size: 13px !important;
    line-height: 1.25 !important;
    min-height: 0 !important;
    display: block !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .store-page #rf-products .similar-product-price{
    font-size: 15px !important;
    line-height: 1.15 !important;
  }

  .store-page #rf-products .similar-product-meta{
    gap: 3px !important;
    font-size: 11px !important;
  }
}