/* v213 — small-screen layout polish without changing the store palette. */

/* Categories show only their number and name. */
.category-cards button>small,
.category-cards button>i{display:none!important}
.category-cards button .cat-number,
.category-cards button>b{position:relative!important;z-index:2!important}

/* Read receipts are a clear navy pill with white ticks, rather than tiny black text. */
#customerChatModal[data-chat-mode="question"] .chat-bubble-row:has(.chat-bubble.customer)::after{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:26px!important;
  height:16px!important;
  margin:4px 6px 0 0!important;
  padding:0 5px!important;
  border-radius:999px!important;
  background:#172033!important;
  color:#fff!important;
  font:900 10px/1 system-ui,sans-serif!important;
  letter-spacing:-2px!important;
  box-shadow:0 2px 5px rgba(23,32,51,.18)!important;
}

/* Separate, labelled camera and upload controls; both remain reachable on phones. */
#customerChatModal[data-chat-mode="question"] .chat-composer-tools{justify-content:flex-start!important}
#customerChatModal[data-chat-mode="question"] #customerChatAttach,
#customerChatModal[data-chat-mode="question"] #customerChatCamera{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
  width:auto!important;
  min-width:88px!important;
  height:42px!important;
  min-height:42px!important;
  padding:0 12px!important;
  border:1px solid #172033!important;
  border-radius:12px!important;
  background:#fff!important;
  color:#172033!important;
  font:800 11px/1 system-ui,sans-serif!important;
  box-shadow:none!important;
}
#customerChatModal[data-chat-mode="question"] #customerChatAttach svg,
#customerChatModal[data-chat-mode="question"] #customerChatCamera svg{width:16px!important;height:16px!important;flex:0 0 16px!important}
#customerChatModal[data-chat-mode="question"] #customerChatAttach:after,
#customerChatModal[data-chat-mode="question"] #customerChatCamera:after{content:none!important}
#customerChatModal[data-chat-mode="question"] #customerChatSubmit{margin-left:auto!important;min-width:76px!important;height:42px!important;min-height:42px!important}

@media(max-width:699px){
  /* The two hero actions stay inside the viewport, even at narrow widths. */
  #home .hero-editorial-copy{width:100%!important;min-width:0!important}
  #home .hero-actions{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    width:100%!important;
    max-width:100%!important;
    gap:8px!important;
  }
  #home .hero-actions .btn{
    width:100%!important;
    min-width:0!important;
    min-height:48px!important;
    padding:8px!important;
    text-align:center!important;
    justify-content:center!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    line-height:1.2!important;
  }
  #home .hero-actions .btn span{display:none!important}

  #categories .category-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important}
  #categories .category-cards button{min-height:136px!important;padding:13px!important}
  #categories .category-cards button>b{margin-top:30px!important;font-size:16px!important;line-height:1.15!important}

  /* Keep product actions horizontal and compact; Compare moves to the product view. */
  #products.product-grid .product-body{padding:10px!important}
  #products.product-grid .card-actions{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 40px!important;
    gap:6px!important;
    align-items:center!important;
  }
  #products.product-grid .card-actions .compare-action{display:none!important}
  #products.product-grid .card-actions .primary-action{
    min-width:0!important;
    min-height:40px!important;
    padding:0 7px!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
    text-overflow:ellipsis!important;
    font-size:10px!important;
  }
  #products.product-grid .card-actions .quick{width:40px!important;min-width:40px!important;min-height:40px!important;font-size:17px!important}

  /* New Arrivals copy remains first, followed by its photo and NEW DROP card. */
  #new .promo-grid{display:grid!important;grid-template-columns:1fr!important;gap:20px!important}
  #new .promo-grid>div:first-child{order:0!important}
  #new .promo-shoe{order:1!important;min-height:270px!important;height:auto!important;padding-top:50px!important}
  #new .promo-shoe>span{top:10px!important;right:10px!important}
}

@media(max-width:390px){
  #customerChatModal[data-chat-mode="question"] #customerChatAttach,
  #customerChatModal[data-chat-mode="question"] #customerChatCamera{min-width:42px!important;width:42px!important;padding:0!important}
  #customerChatModal[data-chat-mode="question"] #customerChatAttach span,
  #customerChatModal[data-chat-mode="question"] #customerChatCamera span{display:none!important}
  #customerChatModal[data-chat-mode="question"] #customerChatSubmit{min-width:70px!important;padding-inline:10px!important}
}