/*
  SaloCart V5.2.29 — Shopper Shortcut Menu Layout Repair
  Purpose: preserve clear icons and readable labels without compression.
  The menu adapts its column count and card orientation before text becomes tight.
*/

.shopper-shortcut-menu{
  margin-top:16px;
  padding:15px;
  border:1px solid color-mix(in srgb,var(--sc-line) 92%,transparent);
  border-radius:24px;
  background:linear-gradient(145deg,color-mix(in srgb,var(--sc-surface) 98%,#fff),color-mix(in srgb,var(--sc-mint) 16%,var(--sc-surface)));
  box-shadow:var(--sc-shadow-xs);
}
.shopper-shortcut-menu__heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding:1px 3px 13px;
}
.shopper-shortcut-menu__heading .section-kicker{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin:0 0 3px;
}
.shopper-shortcut-menu__heading .section-kicker i{color:var(--sc-orange);}
.shopper-shortcut-menu__heading h2{
  margin:0;
  color:var(--sc-ink);
  font-family:var(--font-display);
  font-size:1.05rem;
  font-weight:830;
  letter-spacing:-.04em;
}
.shopper-shortcut-menu__heading p{
  max-width:330px;
  margin:0;
  color:var(--sc-muted);
  font-size:.68rem;
  font-weight:650;
  line-height:1.45;
  text-align:right;
}

/* Desktop: six equally sized action cards. Icon and copy sit side-by-side,
   removing the stacked, compressed label treatment. */
.shopper-shortcut-menu .shopper-command-nav{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.shopper-shortcut-menu .shopper-command-item{
  position:relative;
  display:flex;
  min-width:0;
  min-height:88px;
  align-items:center;
  justify-content:flex-start;
  flex-direction:row;
  gap:10px;
  padding:11px;
  border:1px solid color-mix(in srgb,var(--sc-line) 88%,transparent);
  border-radius:18px;
  background:color-mix(in srgb,var(--sc-surface) 97%,transparent);
  color:var(--sc-ink-soft);
  box-shadow:0 7px 17px rgba(19,47,37,.035);
  font-family:var(--font-ui);
  text-align:left;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
.shopper-shortcut-menu .shopper-command-item:hover,
.shopper-shortcut-menu .shopper-command-item:focus-visible{
  z-index:1;
  border-color:color-mix(in srgb,var(--sc-green) 34%,var(--sc-line));
  background:var(--sc-mint);
  color:var(--sc-green-deep);
  box-shadow:0 12px 24px color-mix(in srgb,var(--sc-green) 11%,transparent);
  outline:none;
  transform:translateY(-2px);
}
.shopper-shortcut-menu .shopper-command-item:active{transform:translateY(0) scale(.985);}
.shopper-shortcut-menu .shopper-command-item__icon{
  position:relative;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:15px;
  background:var(--sc-surface-alt);
  color:var(--sc-blue);
  font-size:1.17rem;
  line-height:1;
}
.shopper-shortcut-menu .shopper-command-item__icon b{
  position:absolute;
  right:-8px;
  top:-7px;
  display:grid;
  place-items:center;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border:2px solid var(--sc-surface);
  border-radius:999px;
  background:var(--sc-coral);
  color:#fff;
  font-size:.53rem;
  font-style:normal;
  font-variant-numeric:tabular-nums;
  line-height:1;
  box-shadow:0 4px 8px rgba(196,73,94,.18);
}
.shopper-shortcut-menu .shopper-command-item__copy{
  display:flex;
  min-width:0;
  flex:1 1 auto;
  flex-direction:column;
  align-items:flex-start;
  gap:3px;
}
.shopper-shortcut-menu .shopper-command-item strong,
.shopper-shortcut-menu .shopper-command-item small{
  display:block;
  max-width:100%;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
}
.shopper-shortcut-menu .shopper-command-item strong{
  color:currentColor;
  font-family:var(--font-ui);
  font-size:.75rem;
  font-weight:850;
  line-height:1.18;
}
.shopper-shortcut-menu .shopper-command-item small{
  color:var(--sc-muted);
  font-size:.59rem;
  font-weight:660;
  line-height:1.28;
}

/* Familiar tones improve scan speed without depending on text colour alone. */
.shopper-shortcut-menu .shopper-command-item:nth-child(1) .shopper-command-item__icon{background:var(--sc-mint);color:var(--sc-green);}
.shopper-shortcut-menu .shopper-command-item:nth-child(2) .shopper-command-item__icon{background:var(--sc-blue-soft);color:var(--sc-blue);}
.shopper-shortcut-menu .shopper-command-item:nth-child(3) .shopper-command-item__icon{background:#FCECEF;color:#C94D63;}
.shopper-shortcut-menu .shopper-command-item:nth-child(4) .shopper-command-item__icon{background:var(--sc-lime-soft);color:#6A851E;}
.shopper-shortcut-menu .shopper-command-item:nth-child(5) .shopper-command-item__icon{background:#F0ECFF;color:#6A55B5;}
.shopper-shortcut-menu .shopper-command-item:nth-child(6) .shopper-command-item__icon{background:#FFF2DE;color:#B96D17;}
.shopper-shortcut-menu .shopper-command-item.active{
  border-color:transparent;
  background:linear-gradient(145deg,var(--sc-green),var(--sc-green-deep));
  color:#fff;
  box-shadow:0 13px 25px color-mix(in srgb,var(--sc-green) 24%,transparent);
}
.shopper-shortcut-menu .shopper-command-item.active .shopper-command-item__icon{background:rgba(255,255,255,.16);color:#fff;}
.shopper-shortcut-menu .shopper-command-item.active small{color:rgba(255,255,255,.78);}
.shopper-shortcut-menu .shopper-command-item.active .shopper-command-item__icon b{border-color:var(--sc-green-deep);}

html[data-theme="dark"] .shopper-shortcut-menu{
  border-color:var(--sc-line);
  background:linear-gradient(145deg,color-mix(in srgb,var(--sc-surface) 95%,#14382b),var(--sc-surface-alt));
}
html[data-theme="dark"] .shopper-shortcut-menu .shopper-command-item{
  border-color:var(--sc-line);
  background:color-mix(in srgb,var(--sc-surface) 95%,transparent);
}
html[data-theme="dark"] .shopper-shortcut-menu .shopper-command-item:hover,
html[data-theme="dark"] .shopper-shortcut-menu .shopper-command-item:focus-visible{background:color-mix(in srgb,var(--sc-mint) 32%,var(--sc-surface));}
html[data-theme="dark"] .shopper-shortcut-menu .shopper-command-item__icon{background:var(--sc-surface-alt);}
html[data-theme="dark"] .shopper-shortcut-menu .shopper-command-item:nth-child(3) .shopper-command-item__icon{background:#392329;color:#FFACB5;}
html[data-theme="dark"] .shopper-shortcut-menu .shopper-command-item:nth-child(5) .shopper-command-item__icon{background:#30274A;color:#C3B5FF;}
html[data-theme="dark"] .shopper-shortcut-menu .shopper-command-item:nth-child(6) .shopper-command-item__icon{background:#3B2A18;color:#FFC377;}

/* Tablet: wider three-column cards, still horizontal and comfortable. */
@media(max-width:1199.98px){
  .shopper-shortcut-menu .shopper-command-nav{grid-template-columns:repeat(3,minmax(0,1fr));}
  .shopper-shortcut-menu .shopper-command-item{min-height:82px;}
}

/* Compact tablets: keep labels on a separate row from the icon before cards get narrow. */
@media(max-width:759.98px){
  .shopper-shortcut-menu{margin-top:12px;padding:12px;border-radius:20px;}
  .shopper-shortcut-menu__heading{align-items:flex-start;padding:0 2px 10px;}
  .shopper-shortcut-menu__heading h2{font-size:.98rem;}
  .shopper-shortcut-menu__heading p{display:none;}
  .shopper-shortcut-menu .shopper-command-nav{gap:9px;}
  .shopper-shortcut-menu .shopper-command-item{
    min-height:101px;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:7px;
    padding:10px 8px;
    border-radius:16px;
    text-align:center;
  }
  .shopper-shortcut-menu .shopper-command-item__icon{width:40px;height:40px;flex-basis:40px;border-radius:14px;font-size:1.08rem;}
  .shopper-shortcut-menu .shopper-command-item__copy{align-items:center;gap:2px;}
  .shopper-shortcut-menu .shopper-command-item strong{font-size:.69rem;line-height:1.15;}
  .shopper-shortcut-menu .shopper-command-item small{font-size:.54rem;line-height:1.2;}
}

/* Phone: two comfortable columns prevent icon/text compression at 320–480px. */
@media(max-width:519.98px){
  .shopper-shortcut-menu{padding:10px;border-radius:19px;}
  .shopper-shortcut-menu__heading{padding-bottom:9px;}
  .shopper-shortcut-menu__heading h2{font-size:.93rem;}
  .shopper-shortcut-menu .shopper-command-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .shopper-shortcut-menu .shopper-command-item{
    min-height:78px;
    align-items:center;
    justify-content:flex-start;
    flex-direction:row;
    gap:9px;
    padding:10px;
    border-radius:15px;
    text-align:left;
  }
  .shopper-shortcut-menu .shopper-command-item__icon{width:38px;height:38px;flex-basis:38px;border-radius:13px;font-size:1.02rem;}
  .shopper-shortcut-menu .shopper-command-item__icon b{right:-7px;top:-7px;min-width:17px;height:17px;font-size:.49rem;}
  .shopper-shortcut-menu .shopper-command-item__copy{align-items:flex-start;gap:2px;}
  .shopper-shortcut-menu .shopper-command-item strong{font-size:.68rem;line-height:1.16;}
  .shopper-shortcut-menu .shopper-command-item small{font-size:.53rem;line-height:1.18;}
}
@media(max-width:359.98px){
  .shopper-shortcut-menu{padding:9px;}
  .shopper-shortcut-menu .shopper-command-nav{gap:7px;}
  .shopper-shortcut-menu .shopper-command-item{min-height:74px;gap:8px;padding:9px;}
  .shopper-shortcut-menu .shopper-command-item__icon{width:35px;height:35px;flex-basis:35px;border-radius:12px;font-size:.96rem;}
  .shopper-shortcut-menu .shopper-command-item strong{font-size:.65rem;}
  .shopper-shortcut-menu .shopper-command-item small{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .shopper-shortcut-menu .shopper-command-item{transition:none!important;}
}