/* =========================================================
   C2c.css — Thème Ultra Stylé pour viewBoutique.php (UPDATED)
   - Glassmorphism + dégradés subtils
   - Cartes avec tilt 3D et halo néon discret
   - Vignettes + petites (meilleure densité)
   - Filtre sticky sous la nav avec bordure dégradée animée (desktop)
   - Mobile : même look que PC (sans fond noir), nav type "La Centrale"
   - Respecte la structure existante
   ========================================================= */

/* ------------------ Variables thème ------------------ */
:root{
  --primary: #00b7ff;
  --primary-2: #0056b3;
  --accent:  #91ff00;
  --ok:      #28a745;
  --ok-2:    #1e7e34;
  --sale:    #22c55e; /* vert à la place du rouge */

  --text:    #0f172a;
  --muted:   #475569;

  --glass:   rgba(255,255,255,.55);
  --glass-2: rgba(255,255,255,.8);

  --card-br: 14px;
  --radius:  14px;

  --shadow-soft: 0 8px 24px rgba(0,0,0,.12);
  --shadow-card: 0 10px 30px rgba(2,6,23,.14);
  --ring:    0 0 0 2px rgba(0,183,255,.18), 0 12px 28px rgba(2,6,23,.18);

  --sticky-gap: 10px; /* espace sous la nav */

  /* hauteur nav (utilisée desktop uniquement) */
  --nav-h: 56px;
}

/* ------------------ Reset ------------------ */
*{ box-sizing:border-box; margin:0; padding:0; }
img,video{ max-width:100%; display:block; }

/* ------------------ Fond + typo ------------------ */
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text);
  margin: 20px;
}

/* voile animé ultra léger */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:
    radial-gradient(40% 35% at 75% 20%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(28% 25% at 20% 85%, rgba(255,255,255,.10), transparent 60%);
  animation: bgFloat 22s ease-in-out infinite alternate;
}
@keyframes bgFloat{
  0%{ transform: translate3d(0,0,0) scale(1); }
  100%{ transform: translate3d(0,-12px,0) scale(1.02); }
}

/* ------------------ Header / Titre ------------------ */
.boutique-title{
  text-align:center;
  color: rgb(255,123,0);
  margin: 6px 0 10px;
  letter-spacing:.2px;
  text-shadow: 0 3px 18px rgba(0,0,0,.18);
}

/* === Ordre: Nav en haut, Titre dessous === */
.boutique-header{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.boutique-header .footer-nav{
  order: -1;
  align-self: stretch;
  margin-bottom: 4px;
}
.boutique-header .boutique-title{
  order: 0;
  text-align: center;
  margin-top: 6px;
}

/* Nav élégante déjà fournie par PHP -> .footer-nav */
.footer-nav{
  background: rgb(1, 1, 2);
  color:#fff;
  padding:12px;
  text-align:center;
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(10px) saturate(120%);
  border: 1px solid rgba(255,255,255,.18);
}
.footer-nav a{
  color:#fff; margin:0 12px; text-decoration:none; font-weight:700; letter-spacing:.2px;
  position:relative; opacity:.95; transition: color .2s ease, opacity .2s ease;
}
.footer-nav a:hover{ color: var(--accent); opacity:1; }
.footer-nav a::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-6px; height:2px; border-radius:2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: scaleX(0); transform-origin: center; transition: transform .25s ease;
}
.footer-nav a:hover::after{ transform: scaleX(1); }

/* ------------------ Barre de Filtres sticky sous nav ------------------ */
.filter-bar-wrapper{
  position: sticky;
  top: calc(0px + var(--sticky-gap));
  z-index: 60;
  margin: 10px 0 18px;
  padding: 12px;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.65));
  backdrop-filter: blur(10px) saturate(120%);
  box-shadow: var(--shadow-soft);

  /* cadre dégradé animé */
  border: 2px solid transparent;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.66)),
    linear-gradient(120deg, rgba(0,183,255,.7), rgba(145,255,0,.7), rgba(0,183,255,.7));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  animation: borderShift 8s ease infinite;
}
@keyframes borderShift{
  0%{ background-position: 0% 50%, 0% 50%; }
  100%{ background-position: 0% 50%, 200% 50%; }
}

/* Formulaire des filtres existant */
.filters{
  display:flex; flex-wrap:wrap; gap:12px; justify-content:center; align-items:flex-end;
}
.filters select,
.filters input[type="number"]{
  padding:10px 12px;
  border-radius: 12px;
  border: 1px solid #d5dbe3;
  background: var(--glass-2);
  outline: none;
  transition: box-shadow .18s ease, transform .08s ease, border-color .18s ease;
}
.filters select:focus,
.filters input[type="number"]:focus{
  box-shadow: var(--ring);
  border-color: var(--primary);
}

/* Boutons 🎚️ / 📞 */
.filters .btn-basic{
  padding: 10px 18px;
  background: linear-gradient(180deg, var(--ok), var(--ok-2));
  color: #fff; border: none; border-radius: 999px; cursor: pointer;
  box-shadow: 0 10px 20px rgba(30,126,52,.35);
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.filters .btn-basic:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(30,126,52,.35);
}

/* Champ filtre individuel */
.filter{
  display:flex; flex-direction:column; gap:6px;
  background:#fff; border: 1px solid rgba(2,6,23,.08);
  border-radius: 12px; padding:10px 12px; min-width: 220px;
  box-shadow: 0 8px 16px rgba(2,6,23,.06);
}
.filter label strong{ font-size:.92rem; color: var(--muted); }
.filter .hint{ font-size:.8rem; opacity:.7; margin-left:6px; }

/* Sélecteur colonnes */
#colSelect{
  padding:10px 12px; border-radius:12px; border:1px solid #d5dbe3; background:#fff;
}

/* ------------------ Sections & Grille ------------------ */
.category-section > h2{
  margin: 18px 4px 10px; padding: 6px 10px; font-size: 1.06rem;
  background: rgba(255,255,255,.78);
  display:inline-block; border-radius: 10px; border: 1px solid rgba(2,6,23,.08);
  box-shadow: 0 10px 18px rgba(2,6,23,.06);
}

.category-block{
  display:grid; gap: 18px;
  /* la grille (1–4) reste pilotée par le JS via --cols / classes body */
}

/* ------------------ Carte Produit — Ultra stylée ------------------ */
.product-card{
  background: linear-gradient(180deg, #ffffff, #fbfbfd);
  border: 1px solid rgba(2,6,23,.08);
  border-radius: var(--card-br);
  padding: 14px;
  box-shadow: var(--shadow-card);
  display:flex; flex-direction:column; align-items:center; position:relative;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  transform-style: preserve-3d;
  overflow: hidden; isolation: isolate;
}
.product-card:hover{
  transform: translateY(-6px) rotateX(.6deg) rotateY(.6deg);
  box-shadow: var(--ring);
  filter: saturate(1.03);
}

/* Halo néon subtil */
.product-card::after{
  content:"";
  position:absolute; inset: -35% -35% auto -35%; height: 58%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,183,255,.17), transparent 60%);
  transform: translateY(-110%) rotate(0deg); opacity: .0; pointer-events:none;
  transition: transform .7s ease, opacity .7s ease;
}
.product-card:hover::after{
  transform: translateY(-22%) rotate(10deg); opacity:.9;
}

/* ------------------ Vignettes (PLUS PETITES) ------------------ */
.product-image{
  width:100%; border-radius: 12px; background: #f6f7f9; overflow:hidden; position:relative;
}
.product-image img,
.product-image video{
  width: 92%;
  height: clamp(120px, 16vw, 170px);
  object-fit: cover;
  border-radius: 10px;
  margin: 0 auto;
  transition: transform .35s ease, filter .2s ease;
}
.product-card:hover .product-image img{ transform: scale(1.025); }

/* Placeholder / icône vidéo */
.product-image .video-thumb,
.product-image .img-placeholder{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:2rem; color:#223;
}

/* Badge solde natif */
.badge-solde{
  position:absolute; top:.55rem; left:.6rem; padding:.25rem .5rem;
  background: var(--sale); color:#fff; border-radius:8px; font-size:.82rem; font-weight:800;
  box-shadow: 0 10px 18px rgba(34,197,94,.35);
}

/* ------------------ Infos Produit ------------------ */
.product-info h3{
  margin: 10px 0 6px; font-size: 1.1rem; text-align: center; letter-spacing:.2px;
}

/* Prix */
.product-price{
  font-weight: 800; color: #0a7a2f; margin-top: 6px;
}
.product-price .prix-original{ text-decoration: line-through; color: #8a8a8a; margin-right: 6px; }
.product-price .prix-solde{ color: #16a34a; }

/* Chips */
.custom-summary.chips{
  max-width: 92%; margin: 6px auto 0;
}
.chip{ backdrop-filter: blur(2px); }

/* Détails déroulants */
.extra-info{
  display:flex; flex-direction:column; gap:4px; max-width:92%; width:92%;
  margin: 6px auto 0; transition: opacity .18s ease, transform .18s ease;
}
.extra-info.hidden{ display:none!important; }
.extra-info li{
  display:flex; justify-content:space-between; width:100%;
  border-bottom:1px dashed rgba(2,6,23,.06); padding: 3px 0; flex-wrap:wrap;
}
.extra-info li em{ color:#4b5563; }

/* Actions */
.actions-row{
  display:flex; gap:.55rem; flex-wrap:wrap; justify-content:center; margin:.35rem 0 .25rem;
}
.actions-row button{
  padding: 10px 18px;
  background: linear-gradient(180deg, var(--primary), var(--primary-2));
  color:#fff; border:none; border-radius: 999px; cursor:pointer;
  box-shadow: 0 12px 24px rgba(0,86,179,.35);
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease;
}
.actions-row button:hover{
  filter:brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 16px 28px rgba(0,86,179,.35);
}

/* ------------------ Contact ------------------ */
#contactSection{
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(2,6,23,.08);
  box-shadow: var(--shadow-soft);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 12px 0 18px;
}
#contactSection p{ margin: 6px 0; }
#contactSection input[type="text"]{
  width: min(520px, 92%);
  padding: 10px 12px; border-radius: 12px; border:1px solid #d5dbe3; background:#fff;
}
#copyMsg{ margin-left: 8px; }

/* ------------------ Lightbox (base) ------------------ */
#lightbox{
  display:none; position:fixed; inset:0; width:100%; height:100%;
  background: rgba(2,6,23,.86);
  justify-content:center; align-items:center; z-index:1000;
  flex-direction:column; padding: 12px;
  opacity:0; transform: scale(.985);
  transition: opacity .2s ease, transform .2s ease;
}
#lightbox:not(.hidden){ display:flex; opacity:1; transform: scale(1); }
#lightbox img, #lightbox video{
  max-width: 95%; max-height: 95%;
  border-radius: 14px; margin-bottom: 10px; box-shadow: var(--shadow-card);
}
#lightbox .close-btn{
  position:absolute; top:16px; right:18px; font-size: 1.5rem; cursor:pointer;
  filter: drop-shadow(0 2px 10px rgba(0,0,0,.45));
}
#lightbox .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:2.3rem; cursor:pointer; user-select:none;
  padding:.2rem .6rem; border-radius: 10px;
  background: rgba(255,255,255,.08); color:#fff; border: 1px solid rgba(255,255,255,.18);
}
#lightbox .nav.prev { left: 16px; }
#lightbox .nav.next { right: 16px; }
#lightbox button{
  padding: 10px 16px; background: var(--ok);
  border:none; color:#fff; border-radius: 10px; cursor:pointer; margin:6px;
  box-shadow: 0 10px 20px rgba(30,126,52,.35);
}
#lightbox button:hover{ background: var(--ok-2); }

/* ------------------ Responsive (petits ajustements) ------------------ */
@media (max-width: 1100px){
  .filter{ min-width: 200px; }
}
@media (max-width: 820px){
  .product-image img, .product-image video{
    height: clamp(110px, 22vw, 150px);
  }
}

/* Apparition douce des cartes (respecte prefers-reduced-motion) */
@media (prefers-reduced-motion: no-preference){
  .product-card{ opacity:0; transform: translateY(10px) scale(.995); animation: cardIn .5s ease forwards; }
  .product-card:nth-child(2){ animation-delay:.05s; }
  .product-card:nth-child(3){ animation-delay:.1s; }
  .product-card:nth-child(4){ animation-delay:.15s; }
  @keyframes cardIn{ to{ opacity:1; transform: translateY(0) scale(1); } }
}

/* === Bouton RETOUR fixé en bas === */
.back-btn {
  position: fixed !important;
  bottom: calc(18px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  background: linear-gradient(180deg, var(--primary), var(--primary-2));
  color: #fff !important;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 10px 20px rgba(0,86,179,.35);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.back-btn:hover {
  filter: brightness(1.1);
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 14px 26px rgba(0,86,179,.4);
}
@media (max-width: 768px){
  .back-btn { padding: 12px 16px; font-size: 0.95rem; }
}
@media print{
  .back-btn { display: none !important; }
}

/* Cache la bannière soldes si tu le souhaites */
[aria-label="Articles en soldes"]{
  display:none !important;
}

/* =========================================================
   DESKTOP : NAV FIXE (uniquement >= 769px)
   ========================================================= */
@media (min-width: 769px){

  .boutique-header .footer-nav{
    position: fixed !important;
    top: 0; left: 0; right: 0;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 1200 !important;
    padding-top: calc(12px + env(safe-area-inset-top, 0px));
  }

  body{
    margin-top: 0 !important;
    padding-top: calc(var(--nav-h) + env(safe-area-inset-top, 0px)) !important;
  }

  .filter-bar-wrapper{
    top: calc(var(--nav-h) + var(--sticky-gap)) !important;
  }
}

/* =========================================================
   LIGHTBOX — ORANGEWAVE-LIKE (plein écran, centrée, fiable)
   ========================================================= */
#lightbox.hidden{ display: none !important; }

#lightbox{
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
  inset: 0 !important;
  display: none !important;
  justify-content: center !important;
  align-items: center !important;
  background: rgba(0,0,0,.85) !important;
  z-index: 999999 !important;

  transform: none !important;
  opacity: 1 !important;

  min-height: 100vh;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: none;

  padding:
    max(16px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
}
@supports (height: 100dvh){
  #lightbox{ min-height: 100dvh; }
}
#lightbox:not(.hidden){
  display: flex !important;
}
#lightboxContent img,
#lightboxContent video{
  max-width: 92vw !important;
  max-height: 90vh !important;
  width: auto !important;
  height: auto !important;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(255,102,0,.35);
}
@supports (height: 100dvh){
  #lightboxContent img,
  #lightboxContent video{ max-height: calc(100dvh - 96px) !important; }
}
#lightbox .close-btn,
#lightbox .nav.prev,
#lightbox .nav.next{
  position: fixed !important;
  width: 44px; height: 44px; line-height: 44px; text-align: center;
  background: rgba(0,0,0,.35); color: #fff;
  border-radius: 999px;
  font-size: 2rem;
  z-index: 1000000 !important;
  -webkit-tap-highlight-color: transparent;
  display: block !important;
}
#lightbox .close-btn{
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
}
#lightbox .nav.prev{
  top: 50%; left: max(16px, env(safe-area-inset-left));
  transform: translateY(-50%);
}
#lightbox .nav.next{
  top: 50%; right: max(16px, env(safe-area-inset-right));
  transform: translateY(-50%);
}
html:has(#lightbox:not(.hidden)),
body:has(#lightbox:not(.hidden)){
  overflow: hidden !important;
  position: fixed !important;
  width: 100% !important;
}
@media (prefers-reduced-motion: reduce){
  #lightbox, #lightboxContent img, #lightboxContent video{
    animation: none !important; transition: none !important;
  }
}

/* Fond global derrière le margin du body */
html{ background:#ffffff; }
body{ margin:0 !important; }

/* =========================================================
   MOBILE (<=768px) — GARDE LE LOOK PC + NAV "LA CENTRALE"
   ========================================================= */
@media (max-width: 768px){

  /* Nav sticky, hauteur auto */
  .boutique-header .footer-nav{
    position: sticky !important;
    top: 0;
    height: auto !important;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 8px 8px !important;
    border-radius: 0 !important;
  }

  /* Sur mobile on ne réserve pas de place pour une nav fixed */
  body{
    padding-top: 0 !important;
  }

  /* Liens en "pills" sur 1-2 lignes */
  .footer-nav{
    display:flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 6px 8px !important;
  }
  .footer-nav a{
    display:inline-flex !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    font-size: 14px !important;
    white-space: nowrap;
  }

  /* Couper blur lourd mais garder les couleurs PC */
  .footer-nav,
  .filter-bar-wrapper,
  .chip,
  .product-card{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Stopper l’anim de fond */
  body::before{
    animation: none !important;
    opacity: .6 !important;
  }

  /* Filter-bar : même style que PC, juste sans animation */
  .filter-bar-wrapper{
    animation: none !important;
    position: sticky !important;
    top: 0 !important;
    box-shadow: var(--shadow-soft) !important;
  }

  /* Cartes plus légères */
  .product-card{
    transform: none !important;
    transform-style: flat !important;
    filter: none !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
  }
  .product-card::after{ display:none !important; }

  /* Désactiver hovers */
  .product-card:hover,
  .actions-row button:hover,
  .filters .btn-basic:hover{
    transform:none !important;
    filter:none !important;
    box-shadow: inherit !important;
  }

  @media (prefers-reduced-motion: no-preference){
    .product-card{ animation:none !important; opacity:1 !important; transform:none !important; }
  }

  /* Vignettes */
  .product-image img,
  .product-image video{
    height: clamp(110px, 38vw, 160px) !important;
    will-change: auto !important;
  }

  /* Alléger ombres boutons */
  .filters .btn-basic,
  .actions-row button{
    box-shadow: 0 4px 10px rgba(0,0,0,.12) !important;
  }

  /* Virtualisation */
  .category-section{ content-visibility:auto; contain-intrinsic-size: 600px 800px; }
  .category-block{ contain: content; }

  /* Mobile spacing */
  body{ margin:0 !important; }
}

/* ---------------------------------------------------------
   FIN
   --------------------------------------------------------- */

   /* ===== BACK BUTTON — MOBILE: en bas de page + plus petit ===== */
@media (max-width: 768px){

  .back-btn{
    position: static !important;       /* plus fixed */
    left: auto !important;
    bottom: auto !important;
    transform: none !important;

    display: inline-block !important;
    margin: 18px auto 24px !important; /* colle au bas du contenu */
    padding: 10px 14px !important;     /* plus petit */
    font-size: .92rem !important;

    z-index: auto !important;
  }

  /* pour être sûr qu'il soit centré */
  .back-btn{
    text-align: center;
  }
}

/* Menu mobile universel : couleurs héritées du thème. */
:root{
  --bzc-mobile-menu-accent:var(--primary);
  --bzc-mobile-menu-bg:#0f172a;
  --bzc-mobile-menu-border:rgba(0,183,255,.45);
  --bzc-mobile-menu-link-color:#ffffff;
  --bzc-mobile-menu-link-bg:rgba(255,255,255,.08);
  --bzc-mobile-menu-link-border:rgba(0,183,255,.45);
  --bzc-mobile-menu-button-bg:#0f172a;
  --bzc-mobile-menu-button-color:#ffffff;
}

/* ===== BIZCREATOR RESPONSIVE COMPATIBILITY ===== */
/* Compatibilité commune PC / tablette / téléphone sans modifier l'identité du thème. */
*,
*::before,
*::after{
  box-sizing:border-box;
}
html{
  max-width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

body{
  max-width:100%;
}

img,
video,
svg,
canvas,
iframe{
  max-width:100%;
}

.boutique-header,
.boutique-info,
.filter-bar-wrapper,
.filters,
#filtersFields,
#contactSection,
#infosSection,
.category-section,
.category-block,
.product-card,
.product-info,
.custom-summary,
.banniere-soldes{
  min-width:0;
  max-width:100%;
}

.category-block > *,
.filters > *,
.filters-actions > *,
.actions-row > *{
  min-width:0;
}

.product-card,
.product-info,
.boutique-info,
#contactSection,
#infosSection{
  overflow-wrap:anywhere;
  word-break:normal;
}

@media (max-width:768px){
  body{
    overflow-x:hidden;
    scroll-padding-bottom:96px;
  }

  .boutique-header,
  .boutique-info,
  .filter-bar-wrapper,
  #contactSection,
  #infosSection,
  .category-section{
    width:100%;
    margin-left:auto;
    margin-right:auto;
  }

  .filters,
  .filters-actions,
  .filter-bar,
  .row,
  .actions-row{
    max-width:100%;
    flex-wrap:wrap;
  }

  .filters input,
  .filters select,
  .filters textarea,
  .filter-bar input,
  .filter-bar select,
  .filter-bar textarea{
    max-width:100%;
    font-size:16px;
  }

  .filters label,
  #filtersFields label{
    min-width:0;
    max-width:100%;
  }

  body.columns-1 .product-card,
  body.cols-1 .product-card,
  .product-card{
    width:100%;
    max-width:100%;
  }

  .product-image,
  .product-image img,
  .product-image video,
  .video-thumb,
  .img-placeholder{
    max-width:100%;
  }

  .banniere-soldes{
    overflow-x:auto;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }

  button,
  .btn-basic,
  .actions-row a,
  .actions-row button,
  .footer-nav a{
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }

  .actions-row a,
  .actions-row button,
  .btn-basic{
    min-height:44px;
  }
}

@media (max-width:520px){
  .boutique-header{
    padding-left:clamp(12px,4vw,20px);
    padding-right:clamp(12px,4vw,20px);
  }

  .filters-actions{
    width:100%;
  }

  .filters-actions > .btn-basic{
    flex:1 1 140px;
  }

  .actions-row{
    width:100%;
  }

  .actions-row > a,
  .actions-row > button{
    flex:1 1 120px;
  }
}

@media (hover:none){
  .product-card:hover{
    transform:none;
  }
}

@media (prefers-reduced-motion:reduce){
  html:focus-within{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
}