/*
  SaloCart V5.2.31 — Shopper Shortcut Horizontal Text Fix
  Purpose: Keep Shopper Action Hub labels horizontal, readable, and balanced.
  The previous shortcut cards allowed long status copy to break character-by-
  character in narrow columns. This layer locks text to horizontal flow and
  introduces controlled ellipsis before any card becomes too narrow.
*/

.shopper-shortcut-menu--smart .shopper-command-nav{
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch;
}

/* A predictable two-column card keeps the icon and all readable text on one
   horizontal reading path. */
.shopper-shortcut-menu--smart .shopper-command-item{
  display:grid;
  min-width:0;
  min-height:108px;
  grid-template-columns:48px minmax(0,1fr);
  grid-template-areas:"icon copy";
  align-items:center;
  column-gap:12px;
  padding:14px;
}
.shopper-shortcut-menu--smart .shopper-command-item__icon{
  grid-area:icon;
  flex:none;
}
.shopper-shortcut-menu--smart .shopper-command-item__copy{
  grid-area:copy;
  min-width:0;
  min-height:0;
  justify-content:center;
}
.shopper-shortcut-menu--smart .shopper-command-item__title-row{
  width:100%;
  min-width:0;
  align-items:center;
}
.shopper-shortcut-menu--smart .shopper-command-item strong{
  display:block;
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
  color:currentColor;
  font-size:.88rem;
  line-height:1.18;
  text-overflow:ellipsis;
  white-space:nowrap;
  word-break:normal !important;
  overflow-wrap:normal !important;
  hyphens:none;
  writing-mode:horizontal-tb;
  text-orientation:mixed;
}
.shopper-shortcut-menu--smart .shopper-command-item__hint{
  max-width:100%;
  margin-top:4px;
  overflow:hidden;
  font-size:.64rem;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
  word-break:normal !important;
  overflow-wrap:normal !important;
  hyphens:none;
  writing-mode:horizontal-tb;
  text-orientation:mixed;
}
.shopper-shortcut-menu--smart .shopper-command-item__footer{
  width:100%;
  min-width:0;
  margin-top:6px;
  padding-top:0;
}
.shopper-shortcut-menu--smart .shopper-command-item__footer em{
  display:block;
  max-width:100%;
  overflow:hidden;
  padding:4px 7px;
  text-overflow:ellipsis;
  white-space:nowrap;
  word-break:normal !important;
  overflow-wrap:normal !important;
  hyphens:none;
  writing-mode:horizontal-tb;
  text-orientation:mixed;
}
.shopper-shortcut-menu--smart .shopper-command-item__chevron{
  flex:0 0 auto;
  margin-left:5px;
}

/* Three generous cards on ordinary tablets/laptops. */
@media(max-width:1199.98px){
  .shopper-shortcut-menu--smart .shopper-command-nav{grid-template-columns:repeat(3,minmax(0,1fr));}
  .shopper-shortcut-menu--smart .shopper-command-item{min-height:104px;}
}

/* Two comfortable cards before a column could squeeze a word. */
@media(max-width:899.98px){
  .shopper-shortcut-menu--smart .shopper-command-nav{grid-template-columns:repeat(2,minmax(0,1fr));}
  .shopper-shortcut-menu--smart .shopper-command-item{min-height:96px;}
}

/* Phone cards keep icon + title horizontal. Helper copy disappears first,
   while the action label and concise status remain visible. */
@media(max-width:599.98px){
  .shopper-shortcut-menu--smart .shopper-command-nav{gap:9px;}
  .shopper-shortcut-menu--smart .shopper-command-item{
    min-height:82px;
    grid-template-columns:40px minmax(0,1fr);
    column-gap:9px;
    padding:10px;
    border-radius:17px;
  }
  .shopper-shortcut-menu--smart .shopper-command-item__icon{
    width:40px;
    height:40px;
    border-radius:13px;
    font-size:1.03rem;
  }
  .shopper-shortcut-menu--smart .shopper-command-item__title-row{min-height:18px;}
  .shopper-shortcut-menu--smart .shopper-command-item strong{font-size:.78rem;}
  .shopper-shortcut-menu--smart .shopper-command-item__chevron{display:none;}
  .shopper-shortcut-menu--smart .shopper-command-item__hint{display:none;}
  .shopper-shortcut-menu--smart .shopper-command-item__footer{margin-top:3px;}
  .shopper-shortcut-menu--smart .shopper-command-item__footer em{
    padding:3px 6px;
    font-size:.54rem;
    line-height:1.18;
  }
}

/* 320px safety: all visible text remains a single horizontal label. */
@media(max-width:359.98px){
  .shopper-shortcut-menu--smart .shopper-command-nav{gap:7px;}
  .shopper-shortcut-menu--smart .shopper-command-item{
    min-height:64px;
    grid-template-columns:34px minmax(0,1fr);
    column-gap:7px;
    padding:8px;
    border-radius:15px;
  }
  .shopper-shortcut-menu--smart .shopper-command-item__icon{
    width:34px;
    height:34px;
    border-radius:11px;
    font-size:.92rem;
  }
  .shopper-shortcut-menu--smart .shopper-command-item strong{font-size:.71rem;}
  .shopper-shortcut-menu--smart .shopper-command-item__footer{display:none;}
}

@media(prefers-reduced-motion:reduce){
  .shopper-shortcut-menu--smart .shopper-command-item{transition:none!important;}
}