/*=============================================================================
# STOCK-SOFT — Couche de finition téléphone
#
# Chargée après style.css, cette feuille regroupe TOUTES les retouches propres
# aux téléphones (et écrans tactiles) qui ne concernent aucun écran en
# particulier. Les règles par écran (cartes mobiles des tableaux, visionneuse
# PDF, inventaire, retours…) restent dans style.css ou dans leur vue.
#
# Organisation :
#   1. Cibles tactiles          (pointer: coarse) + retour d'appui
#   2. Anti-débordement         (≤ 767.98px) + indices de défilement, rythme
#   3. Formulaires              (≤ 767.98px)
#   4. Barres d'action          (≤ 767.98px) + boutons d'en-tête d'onglets
#   5. Onglets                  (≤ 767.98px)
#   6. simple-datatables        (≤ 767.98px)
#   7. Select2 et menus         (≤ 767.98px)
#   8. Fenêtres modales         (≤ 575.98px) — feuilles ancrées en bas
#   9. SweetAlert               (≤ 575.98px)
#  10. Zones de sécurité        (≤ 767.98px)
#  11. Panneau latéral          (≤ 767.98px)
#  12. Préloader                (≤ 575.98px) — compact et toujours centré
=============================================================================*/

/*-----------------------------------------------------------------------------
# 1. Cibles tactiles
#
# Sur écran tactile (téléphone OU tablette), chaque élément interactif doit
# offrir au doigt une zone d'au moins ~44px et réagir sans le délai de 300 ms.
# « pointer: coarse » laisse les postes souris/clavier inchangés.
-----------------------------------------------------------------------------*/
@media (pointer: coarse) {
  .btn,
  .page-link,
  .nav-link,
  .dropdown-item,
  .form-control,
  .form-select,
  .form-check-input,
  .btn-close {
    touch-action: manipulation;
  }

  .btn {
    min-height: 44px;
  }

  .btn-sm {
    min-height: 38px;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }

  .btn-close {
    padding: 0.75rem;
  }

  .dropdown-menu .dropdown-item {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
  }

  .form-check-input {
    width: 1.25em;
    height: 1.25em;
  }

  /* Deux actions voisines ne doivent pas se toucher : le doigt rate. */
  td .btn + .btn,
  .modal-footer .btn + .btn {
    margin-left: 0.5rem;
  }
}

/* Retour visuel à l'appui : le bouton « répond » sous le doigt, comme dans une
   application native. Jamais quand l'utilisateur a réduit les animations. */
@media (pointer: coarse) and (prefers-reduced-motion: no-preference) {
  .btn {
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
      border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out,
      transform 120ms ease;
  }

  .btn:active {
    transform: scale(0.96);
  }
}

/*-----------------------------------------------------------------------------
# 2. Anti-débordement
#
# Un seul élément plus large que l'écran suffit à décaler toute la page et à
# donner l'impression de désordre. La page elle-même ne défile jamais
# latéralement : chaque bloc large défile dans son propre conteneur.
-----------------------------------------------------------------------------*/
@media (max-width: 767.98px) {
  #main {
    overflow-x: hidden;
    overflow-x: clip;
  }

  #main img,
  #main video,
  #main canvas,
  #main svg {
    max-width: 100%;
    height: auto;
  }

  .table-responsive,
  .rt-tablewrap,
  .inv-scroll {
    -webkit-overflow-scrolling: touch;
  }

  /* Un tableau plus large que l'écran le laisse deviner : une ombre discrète
     marque le bord où le contenu continue et s'efface en fin de course. */
  .table-responsive {
    background:
      linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) 0 0,
      linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(45, 27, 78, 0.16), transparent) 0 0,
      radial-gradient(farthest-side at 100% 50%, rgba(45, 27, 78, 0.16), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 44px 100%, 44px 100%, 16px 100%, 16px 100%;
    background-attachment: local, local, scroll, scroll;
  }

  /* Rythme vertical resserré : sur un petit écran, les grandes marges du
     bureau diluent le contenu au lieu de l'aérer. */
  .card {
    margin-bottom: 1rem;
  }

  .card-body {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Les intitulés longs (produits, clients…) se coupent au lieu de pousser
     la mise en page. */
  .card-title,
  .card-header,
  .modal-title,
  .pagetitle h1 {
    overflow-wrap: break-word;
    min-width: 0;
  }

  .pagetitle h1 {
    font-size: 1.25rem;
  }

  .breadcrumb {
    flex-wrap: wrap;
    font-size: 0.8rem;
  }
}

/*-----------------------------------------------------------------------------
# 2 bis. Boutons d'action des tableaux en cartes
#
# Dans le mode cartes (table.mobile-card-table), la cellule est une grille à
# deux colonnes « libellé | valeur » : chaque bouton posé directement dans la
# cellule y reçoit sa propre ligne et les actions s'empilent verticalement.
# Les cellules d'action passent en disposition horizontale : libellé à gauche,
# boutons sur une même rangée à droite, repli seulement si la place manque.
-----------------------------------------------------------------------------*/
@media (max-width: 767.98px) {
  table.mobile-card-table tbody td[data-label*="Action"],
  table.mobile-card-table tbody td[data-label*="action"],
  table.mobile-card-table tbody td[data-label="Détail"],
  table.mobile-card-table tbody td:has(> .btn + .btn),
  table.mobile-card-table tbody td:has(> button + button),
  table.mobile-card-table tbody td:has(> .btn + button),
  table.mobile-card-table tbody td:has(> button + .btn) {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
  }

  table.mobile-card-table tbody td[data-label*="Action"]::before,
  table.mobile-card-table tbody td[data-label*="action"]::before,
  table.mobile-card-table tbody td[data-label="Détail"]::before,
  table.mobile-card-table tbody td:has(> .btn + .btn)::before,
  table.mobile-card-table tbody td:has(> button + button)::before,
  table.mobile-card-table tbody td:has(> .btn + button)::before,
  table.mobile-card-table tbody td:has(> button + .btn)::before {
    margin-right: auto;
    padding-right: 8px;
  }

  table.mobile-card-table tbody td[data-label*="Action"] > *,
  table.mobile-card-table tbody td[data-label*="action"] > *,
  table.mobile-card-table tbody td[data-label="Détail"] > *,
  table.mobile-card-table tbody td:has(> .btn + .btn) > *,
  table.mobile-card-table tbody td:has(> button + button) > *,
  table.mobile-card-table tbody td:has(> .btn + button) > *,
  table.mobile-card-table tbody td:has(> button + .btn) > * {
    width: auto;
    margin: 0;
  }
}

/*-----------------------------------------------------------------------------
# 3. Formulaires
#
# iOS zoome automatiquement sur tout champ dont la police est < 16px : la mise
# en page « saute » à chaque saisie. 1rem = 16px supprime ce zoom, et la
# hauteur minimale rend chaque champ confortable au doigt.
-----------------------------------------------------------------------------*/
@media (max-width: 767.98px) {
  .form-control,
  .form-select,
  textarea.form-control,
  .datatable-input {
    font-size: 1rem;
  }

  .form-control,
  .form-select {
    min-height: 44px;
  }

  .form-control-sm,
  .form-select-sm {
    min-height: 38px;
  }

  textarea.form-control {
    min-height: 88px;
  }

  .input-group > .btn {
    min-height: 44px;
  }

  /* Les colonnes de formulaire trop étroites se replient naturellement grâce
     à Bootstrap ; on garde simplement un rythme vertical régulier. */
  .form-label {
    margin-bottom: 0.25rem;
  }
}

/*-----------------------------------------------------------------------------
# 4. Barres d'action et en-têtes de carte
#
# Le motif « titre à gauche, boutons à droite » (d-flex justify-content-between)
# écrase son contenu quand la largeur manque. Autoriser le repli avec un
# espacement régulier : les boutons passent sous le titre, rien ne se chevauche.
-----------------------------------------------------------------------------*/
@media (max-width: 767.98px) {
  .card-header .d-flex,
  .card-header.d-flex,
  .card-body > .d-flex:first-child,
  .pagetitle + .d-flex,
  .pagetitle .d-flex {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .card-header {
    padding: 0.75rem 1rem;
  }

  /* Une rangée d'actions ne déborde jamais : elle se replie. */
  .card-body .btn-toolbar,
  .modal-body .btn-toolbar {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Boutons d'action posés au-dessus des onglets (Réinitialiser, Ajouter
     Client, Ajouter Vente, Rapports…) : flottants à droite, ils s'entassaient
     en escalier au-dessus des onglets sur téléphone. Ils forment désormais une
     grille régulière de deux par rangée, pleine largeur, à hauteur de doigt ;
     un bouton isolé en fin de rangée prend toute la largeur. */
  .card-header > .float-end {
    float: none !important;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 0.75rem;
    text-align: initial;
  }

  .card-header > .float-end > .btn,
  .card-header > .float-end > .btn-group,
  .card-header > .float-end > .dropdown {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: calc(50% - 0.5rem);
    min-height: 44px;
    margin: 0;
    white-space: nowrap;
  }

  .card-header > .float-end > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .card-header > .float-end > .btn-group > .btn,
  .card-header > .float-end > .dropdown > .btn {
    width: 100%;
    min-height: 44px;
  }
}

/*-----------------------------------------------------------------------------
# 4 bis. Zones de filtres et de recherche
#
# Trois motifs récurrents dans les vues désorganisent ces zones sur téléphone :
#   – des rangées « d-flex » contenant des colonnes col-md-* : sans largeur
#     définie sous 768px, recherche et boutons s'écrasent côte à côte ;
#   – des étiquettes-espaceurs (« &nbsp; ») posées au-dessus des boutons pour
#     l'alignement sur ordinateur : empilées, elles laissent des trous ;
#   – des rangées de boutons de tailles inégales qui se replient en escalier.
# Sur téléphone : chaque champ prend toute la largeur, les espaceurs
# disparaissent, et les boutons se rangent en grille régulière de deux par
# rangée, à hauteur uniforme.
-----------------------------------------------------------------------------*/
@media (max-width: 767.98px) {
  /* Rangée d-flex contenant des colonnes : repli, chaque bloc pleine largeur */
  .card .d-flex > [class*="col-"],
  .tab-content .d-flex > [class*="col-"] {
    flex: 0 0 100%;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    text-align: left;
  }

  .tab-content .tab-pane > .d-flex,
  .card-body > .d-flex {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* Étiquette-espaceur posée juste au-dessus d'un bouton pour l'alignement
     ordinateur : sans objet une fois la colonne empilée. */
  [class*="col-"]:has(> .form-label + .btn) > .form-label,
  [class*="col-"]:has(> .form-label + .dropdown) > .form-label,
  [class*="col-"]:has(> .form-label + .btn-group) > .form-label {
    display: none;
  }
}

@media (max-width: 575.98px) {
  /* Groupes d'actions (Rechercher / Filtres / Réinitialiser / PDF / Ajouter) :
     chaque groupe occupe sa rangée, ses boutons se partagent la largeur en
     grille régulière — fini l'escalier de boutons dépareillés. */
  .tab-pane .d-flex.justify-content-between > .d-flex,
  .card-body .d-flex.justify-content-between > .d-flex {
    width: 100%;
  }

  .tab-pane .d-flex.flex-wrap > .btn,
  .tab-pane .d-flex.flex-wrap > .btnPage,
  .card-body .d-flex.flex-wrap > .btn,
  .card-body .d-flex.flex-wrap > .btnPage {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: calc(50% - 0.5rem);
    min-height: 44px;
    white-space: nowrap;
  }

  /* Rangées de validation alignées à droite (Annuler / Enregistrer,
     Annuler / Exporter…) : mêmes règles — deux boutons pleine hauteur qui se
     partagent la largeur, l'espacement venant du gap et non des marges. */
  .tab-pane .d-flex.justify-content-end,
  .card-body .d-flex.justify-content-end,
  .modal-body .d-flex.justify-content-end {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .tab-pane .d-flex.justify-content-end > .btn,
  .card-body .d-flex.justify-content-end > .btn,
  .modal-body .d-flex.justify-content-end > .btn {
    flex: 1 1 calc(50% - 0.5rem);
    min-width: calc(50% - 0.5rem);
    min-height: 44px;
    white-space: nowrap;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Un bouton seul sur sa rangée (Réinitialiser, Exporter…) reste pleine
     largeur et garde une hauteur confortable. */
  .tab-pane [class*="col-"] > .btn.w-100,
  .tab-pane [class*="col-"] > .btn.d-block,
  .card-body [class*="col-"] > .btn.w-100 {
    min-height: 44px;
  }
}

/*-----------------------------------------------------------------------------
# 5. Onglets
#
# Les onglets qui se replient sur trois lignes brouillent la hiérarchie : une
# seule ligne qui défile latéralement (motif natif iOS/Android), sans barre de
# défilement visible.
-----------------------------------------------------------------------------*/
@media (max-width: 767.98px) {
  .nav-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .nav-tabs::-webkit-scrollbar {
    display: none;
  }

  .nav-tabs .nav-link {
    white-space: nowrap;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* L'onglet courant se repère d'un coup d'œil, même en défilant. */
  .nav-tabs .nav-link.active {
    font-weight: 600;
  }
}

/*-----------------------------------------------------------------------------
# 6. simple-datatables (recherche, sélecteur, pagination)
#
# Les contrôles flottent côte à côte et s'entassent sur téléphone : la
# recherche prend toute la largeur, le reste se répartit dessous, la
# pagination se centre avec des cibles à la taille du doigt.
-----------------------------------------------------------------------------*/
@media (max-width: 767.98px) {
  .datatable-top,
  .datatable-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-left: 0;
    padding-right: 0;
  }

  .datatable-top > div,
  .datatable-bottom > div,
  .datatable-top > nav,
  .datatable-bottom > nav {
    float: none;
  }

  .datatable-search {
    order: -1;
    width: 100%;
  }

  .datatable-search .datatable-input {
    width: 100%;
    min-height: 44px;
  }

  .datatable-dropdown {
    font-size: 0.85rem;
  }

  .datatable-dropdown .datatable-selector {
    min-height: 38px;
  }

  .datatable-info {
    font-size: 0.78rem;
    color: #777086;
  }

  .datatable-pagination {
    width: 100%;
  }

  .datatable-pagination ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
    padding-left: 0;
    margin-bottom: 0;
  }

  .datatable-pagination a,
  .datatable-pagination button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
  }
}

/*-----------------------------------------------------------------------------
# 7. Select2 et menus déroulants
-----------------------------------------------------------------------------*/
@media (max-width: 767.98px) {
  /* Select2 fige une largeur en pixels au premier rendu : sur téléphone il
     doit simplement occuper son conteneur. */
  .select2-container {
    width: 100% !important;
    max-width: 100%;
  }

  .select2-container .select2-selection--single,
  .select2-container .select2-selection--multiple {
    min-height: 44px;
  }

  .select2-dropdown {
    max-width: calc(100vw - 2rem);
  }

  .dropdown-menu {
    max-width: calc(100vw - 1rem);
    overflow-wrap: break-word;
  }
}

/*-----------------------------------------------------------------------------
# 8. Fenêtres modales
#
# Quasi plein écran sur téléphone : le corps défile à l'intérieur, l'en-tête
# et le pied restent visibles, les boutons du pied se partagent la largeur.
# (Les visionneuses PDF ont déjà leur propre mise en page dans style.css :
# ces règles génériques restent compatibles — max-height ≥ leur height.)
-----------------------------------------------------------------------------*/
@media (max-width: 575.98px) {
  /* Feuille ancrée en bas (motif natif Android/iOS) : la fenêtre monte depuis
     le bord inférieur, coins supérieurs arrondis, poignée de préhension. */
  .modal-dialog:not([class*="modal-fullscreen"]) {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    margin: 0;
    min-height: 100%;
    min-height: 100dvh;
  }

  .modal.fade .modal-dialog:not([class*="modal-fullscreen"]) {
    transform: translateY(2.5rem);
  }

  .modal.show .modal-dialog:not([class*="modal-fullscreen"]) {
    transform: none;
  }

  .modal-dialog:not([class*="modal-fullscreen"]) .modal-content {
    max-height: calc(100vh - 2.5rem);
    max-height: calc(100dvh - 2.5rem);
    border: 0;
    border-radius: 18px 18px 0 0;
  }

  .modal-dialog:not([class*="modal-fullscreen"]) .modal-content::before {
    content: "";
    flex: 0 0 auto;
    align-self: center;
    width: 40px;
    height: 4px;
    margin-top: 8px;
    border-radius: 2px;
    background: #d5cfe3;
  }

  .modal-content {
    max-height: calc(100vh - 2.5rem);
    max-height: calc(100dvh - 2.5rem);
  }

  .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-header {
    padding: 0.75rem 1rem;
  }

  .modal-title {
    font-size: 1.05rem;
  }

  .modal-footer {
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
  }

  .modal-footer > * {
    margin: 0;
  }

  .modal-footer > .btn {
    flex: 1 1 auto;
    min-width: calc(50% - 0.5rem);
  }
}

/*-----------------------------------------------------------------------------
# 9. SweetAlert
-----------------------------------------------------------------------------*/
@media (max-width: 575.98px) {
  .swal2-popup {
    width: min(94vw, 32em);
    padding: 1.5em 1em;
  }

  .swal2-title {
    font-size: 1.3em;
  }

  .swal2-html-container {
    font-size: 1em;
  }

  .swal2-actions {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .swal2-actions .swal2-styled {
    min-height: 44px;
    margin: 0;
  }
}

/*-----------------------------------------------------------------------------
# 9 bis. Fiches de détail — tableaux étiquette/valeur
#
# Les panneaux « Détails » (mouvement, fournisseur…) présentent leurs
# informations dans des tableaux à deux cellules « <th>Étiquette</th><td>
# Valeur</td> », sans thead. Sur téléphone, l'étiquette à 35 % écrase la
# valeur. Ces tableaux deviennent une liste : étiquette discrète au-dessus,
# valeur pleine largeur en dessous — même langage visuel que les cartes des
# tableaux de données. (Sans thead = fiche de détail : tous les tableaux de
# données de l'application ont un thead.)
-----------------------------------------------------------------------------*/
@media (max-width: 575.98px) {
  .table:not(.mobile-card-table):not(:has(> thead)) {
    display: block;
    width: 100%;
  }

  .table:not(.mobile-card-table):not(:has(> thead)) tbody {
    display: block;
    width: 100%;
  }

  .table:not(.mobile-card-table):not(:has(> thead)) tr {
    display: block;
    width: 100%;
    padding: 0.45rem 0;
    border-bottom: 1px solid #ece9f3;
  }

  .table:not(.mobile-card-table):not(:has(> thead)) tr:last-child {
    border-bottom: 0;
  }

  .table:not(.mobile-card-table):not(:has(> thead)) th,
  .table:not(.mobile-card-table):not(:has(> thead)) td {
    display: block;
    width: 100% !important;
    padding: 0;
    border: 0;
    background: transparent;
    text-align: left;
  }

  .table:not(.mobile-card-table):not(:has(> thead)) th {
    font-size: 0.67rem;
    font-weight: 700;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    color: #777086;
    margin-bottom: 2px;
  }
}

/*-----------------------------------------------------------------------------
# 10. Zones de sécurité (encoche, barre de gestes)
#
# Sur les téléphones à encoche ou à barre de gestes, le bas de page et les
# éléments fixés ne doivent pas passer sous les zones système.
-----------------------------------------------------------------------------*/
@media (max-width: 767.98px) {
  #main {
    padding-bottom: calc(var(--spacing-lg, 1.5rem) + env(safe-area-inset-bottom, 0px));
  }

  .back-to-top {
    bottom: calc(var(--spacing-md, 1rem) + env(safe-area-inset-bottom, 0px));
  }

  .footer {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/*-----------------------------------------------------------------------------
# 11. Panneau latéral (téléphone)
#
# Le menu occupe 300px : sur un petit écran il couvrait presque toute la page
# sans laisser voir le contexte derrière. Il laisse désormais une tranche de
# page visible, son ombre le détache nettement, le fond s'assombrit et se
# floute légèrement, et chaque entrée est à hauteur de doigt.
-----------------------------------------------------------------------------*/
@media (max-width: 767.98px) {
  .sidebar {
    width: min(var(--sidebar-width, 300px), 86vw);
    padding: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 0 40px rgba(20, 12, 35, 0.35);
  }

  .sidebar-nav .nav-link {
    min-height: 46px;
  }

  .sidebar-overlay {
    background-color: rgba(20, 12, 35, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
  }
}

/*-----------------------------------------------------------------------------
# 12. Préloader (téléphone et terminaux SUNMI)
#
# Sur petit écran, le préloader de bureau prend trop de place : version
# compacte, toujours parfaitement centrée (flex sur toute la fenêtre), sans
# les cercles décoratifs qui débordent des petits écrans.
# (Dans l'application mobile STOCK SOFT, le préloader est retiré dès le
# chargement : le terminal affiche déjà son propre écran de démarrage.)
-----------------------------------------------------------------------------*/
@media (max-width: 575.98px) {
  .stock-preloader {
    padding: 16px;
    min-height: 100vh;
    min-height: 100dvh;
  }

  /* Cercles décoratifs : inutiles et débordants sur un écran étroit */
  .stock-preloader::before,
  .stock-preloader::after {
    display: none;
  }

  .stock-preloader__content {
    width: min(100%, 230px);
  }

  .stock-preloader__visual {
    width: 66px;
    height: 66px;
    margin-bottom: 14px;
  }

  .stock-preloader__icon {
    width: 44px;
    height: 44px;
    gap: 4px;
    border-radius: 13px;
  }

  .stock-preloader__bar {
    width: 5px;
  }

  .stock-preloader__bar--one {
    height: 10px;
  }

  .stock-preloader__bar--two {
    height: 16px;
  }

  .stock-preloader__bar--three {
    height: 23px;
  }

  .stock-preloader__brand {
    font-size: 1.25rem;
  }

  .stock-preloader__tagline {
    margin: 7px 0 13px;
    font-size: 0.64rem;
    letter-spacing: 0.12em;
  }

  .stock-preloader__progress {
    width: min(100%, 160px);
  }

  .stock-preloader__status {
    font-size: 0.66rem;
  }
}