/* ---- Browse by Category modal — matches Sharwan brand (var(--brand) = #E85A24) ---- */
#bcScrim .bc-card{
  background: var(--paper, #fff);
  width: 100%;
  max-width: 520px;
  border-radius: 22px 22px 0 0;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -14px 40px -8px rgba(0,0,0,.45);
  animation: bcSlideUp .38s cubic-bezier(.2,.7,.3,1);
}
@keyframes bcSlideUp {
  0%   { transform: translateY(28px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}
#bcScrim .bc-head{
  background: linear-gradient(135deg, #FF7A47 0%, var(--brand, #E85A24) 100%);
  color: #fff;
  padding: 16px 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
}
#bcScrim .bc-head::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:14px;
  background: var(--paper, #fff);
  border-radius: 14px 14px 0 0;
}
#bcScrim .bc-head-icon{
  width:46px; height:46px; border-radius:12px;
  background: #fff;
  display:flex; align-items:center; justify-content:center;
  color:#fff; flex-shrink:0;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 4px 10px -3px rgba(0,0,0,.25);
  overflow: hidden;
  padding: 3px;
}
#bcScrim .bc-head-txt{ flex:1; min-width:0; }
#bcScrim .bc-head-title{
  font-family:'Outfit', sans-serif;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.15;
}
#bcScrim .bc-head-sub{
  font-size: 12.5px;
  font-weight: 600;
  opacity: .92;
  margin-top: 3px;
  line-height: 1.3;
}
#bcScrim .bc-head-sub .dot{ opacity:.6; margin:0 4px; }
#bcScrim .bc-close{
  width:36px; height:36px; border-radius:10px;
  background: rgba(255,255,255,.22);
  color:#fff; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition: background .15s, transform .12s;
  font-family: inherit;
}
#bcScrim .bc-close:active{ transform: scale(.94); background: rgba(255,255,255,.35); }

#bcScrim .bc-body{
  flex: 1;
  overflow-y: auto;
  padding: 14px 14px 4px;
  background: var(--paper, #fff);
  position: relative;
  z-index: 1;
}
#bcScrim .bc-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding-bottom: 8px;
}
#bcScrim .bc-cat{
  background: var(--paper, #fff);
  border: 1px solid var(--line, #EEE9DE);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, border-color .15s;
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-family: inherit;
  text-align: left;
  padding: 0;
}
#bcScrim .bc-cat:active{ transform: scale(.97); }
#bcScrim .bc-cat:hover{
  box-shadow: 0 10px 24px -12px rgba(232,90,36,.35);
  border-color: rgba(232,90,36,.45);
}
#bcScrim .bc-cat .img{
  aspect-ratio: 1 / 1;
  background: #F3F2EE center/cover no-repeat;
  position: relative;
}
#bcScrim .bc-cat .fallback{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-size: 46px; color: rgba(232,90,36,.35);
  background: linear-gradient(135deg, #FFF1E6 0%, #FFE0CC 100%);
}
#bcScrim .bc-cat .from{
  position: absolute;
  left: 10px; bottom: 10px;
  background: rgba(15,17,21,.86);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .02em;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: 'Outfit', sans-serif;
  backdrop-filter: blur(4px);
}
#bcScrim .bc-cat .body{
  padding: 11px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
#bcScrim .bc-cat .head-row{
  display: flex; align-items: center; gap: 6px;
  min-width: 0;
}
#bcScrim .bc-cat .nm{
  font-family: 'Outfit', sans-serif;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink, #1A0F0A);
  letter-spacing: -.005em;
  line-height: 1.15;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#bcScrim .bc-cat .ct{
  background: rgba(232,90,36,.10);
  color: var(--brand, #E85A24);
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: .02em;
  flex-shrink: 0;
  font-family: 'Outfit', sans-serif;
}
#bcScrim .bc-cat .samples{
  font-size: 11.5px;
  color: var(--mute, #7A5A40);
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#bcScrim .bc-cat .explore{
  margin-top: 6px;
  color: var(--brand, #E85A24);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Outfit', sans-serif;
}
#bcScrim .bc-cat .explore .ar{
  transition: transform .18s;
}
#bcScrim .bc-cat:hover .explore .ar,
#bcScrim .bc-cat:active .explore .ar{
  transform: translateX(4px);
}
#bcScrim .bc-empty{
  padding: 40px 16px;
  text-align: center;
  color: var(--mute, #7A5A40);
}
#bcScrim .bc-empty .ic{ font-size:44px; margin-bottom:6px; opacity:.6; }
#bcScrim .bc-empty .ttl{ font-family:'Outfit',sans-serif; font-weight:800; font-size:16px; color:var(--ink,#1A0F0A); margin-bottom:4px; }
#bcScrim .bc-empty .sub{ font-size:12.5px; font-weight:600; }
#bcScrim .bc-foot{
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  background: var(--paper, #fff);
  border-top: 1px solid var(--line, #EEE9DE);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
#bcScrim .bc-foot-lbl{
  font-size: 13px;
  color: var(--mute, #7A5A40);
  font-weight: 700;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}
#bcScrim .bc-view-all{
  background: linear-gradient(135deg, #FF7A47 0%, var(--brand, #E85A24) 100%);
  color: #fff;
  border: 0;
  padding: 0 18px;
  height: 48px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14.5px;
  font-family: 'Outfit', sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: .005em;
  box-shadow: 0 10px 22px -8px rgba(232,90,36,.55);
  transition: transform .12s;
  flex-shrink: 0;
}
#bcScrim .bc-view-all:active{ transform: scale(.97); }
/* Dark mode support — inherits var(--paper), --ink, --line already themed by app */
html[data-theme="dark"] #bcScrim .bc-cat .fallback{
  background: linear-gradient(135deg, rgba(232,90,36,.20) 0%, rgba(232,90,36,.08) 100%);
  color: rgba(232,90,36,.55);
}
/* Small screens (<380px) — tighter grid */
@media (max-width: 360px){
  #bcScrim .bc-grid{ gap: 10px; }
  #bcScrim .bc-cat .body{ padding: 9px 10px 10px; }
  #bcScrim .bc-cat .nm{ font-size: 14px; }
}

/* ---- Closed / holiday empty state + item-preview carousel ---- */
#bcScrim .bc-closed{
  text-align: center;
  padding: 22px 20px 24px;
}
#bcScrim .bc-closed-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(232,90,36,.10);
  color: var(--brand, #E85A24);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  padding: 6px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
  font-family: 'Outfit', sans-serif;
  border: 1px solid rgba(232,90,36,.20);
}
#bcScrim .bc-closed-badge-holiday{
  background: rgba(180,83,9,.10);
  color: #B45309;
  border-color: rgba(180,83,9,.25);
}
#bcScrim .bc-closed-title{
  font-family: 'Outfit', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink, #1A0F0A);
  letter-spacing: -.01em;
  line-height: 1.15;
}
#bcScrim .bc-closed-sub{
  font-size: 13.5px;
  color: var(--mute, #7A5A40);
  font-weight: 600;
  margin-top: 6px;
  line-height: 1.5;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}
#bcScrim .bc-closed-sub b { color: var(--brand, #E85A24); font-weight: 800; }
#bcScrim .bc-next-card-standalone{
  margin: 18px auto 4px;
  max-width: 260px;
  background: linear-gradient(135deg, #FFF1E6 0%, #FFE0CC 100%);
  border: 1.5px solid rgba(232,90,36,.30);
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: 0 10px 22px -12px rgba(232,90,36,.40);
  position: relative;
  animation: bcNextPulse 2.4s ease-in-out infinite;
}
#bcScrim .bc-next-card-standalone .lbl{
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  color: var(--brand, #E85A24);
  font-family: 'Outfit', sans-serif;
}
#bcScrim .bc-next-card-standalone .time{
  font-family: 'Outfit', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--ink, #1A0F0A);
  letter-spacing: -.02em;
  line-height: 1.05;
  margin-top: 2px;
}
#bcScrim .bc-next-card-standalone .cat{
  font-size: 12px;
  font-weight: 700;
  color: var(--mute, #7A5A40);
  margin-top: 4px;
}
@keyframes bcNextPulse {
  0%,100%{ box-shadow: 0 10px 22px -12px rgba(232,90,36,.40), 0 0 0 0 rgba(232,90,36,.28); }
  50%    { box-shadow: 0 10px 22px -12px rgba(232,90,36,.40), 0 0 0 14px rgba(232,90,36,0); }
}
html[data-theme="dark"] #bcScrim .bc-next-card-standalone{
  background: linear-gradient(135deg, rgba(232,90,36,.20) 0%, rgba(232,90,36,.10) 100%);
}
/* --- Auto-scrolling item preview carousel (shown in closed state) --- */
#bcScrim .bc-cx-wrap{
  position: relative;
  margin: 22px -20px 6px;
  overflow: hidden;
  padding: 4px 0 8px;
  -webkit-user-select: none;
  user-select: none;
}
#bcScrim .bc-cx-fade{
  position: absolute;
  top: 0; bottom: 0;
  width: 32px;
  pointer-events: none;
  z-index: 2;
}
#bcScrim .bc-cx-fade-l{ left: 0;  background: linear-gradient(90deg, var(--paper,#fff) 0%, rgba(255,255,255,0) 100%); }
#bcScrim .bc-cx-fade-r{ right: 0; background: linear-gradient(-90deg, var(--paper,#fff) 0%, rgba(255,255,255,0) 100%); }
#bcScrim .bc-cx-track{
  display: flex;
  gap: 12px;
  width: max-content;
  padding: 0 20px;
  animation: bcCxScroll 42s linear infinite;
}
#bcScrim .bc-cx-wrap:hover .bc-cx-track,
#bcScrim .bc-cx-wrap:active .bc-cx-track{
  animation-play-state: paused;
}
@keyframes bcCxScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
#bcScrim .bc-cx-item{
  width: 128px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--line, #EEE9DE);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 14px -10px rgba(15,23,42,.20);
  text-align: left;
}
#bcScrim .bc-cx-item .bc-cx-img{
  aspect-ratio: 1 / 1;
  background: #F3F2EE center/cover no-repeat;
}
#bcScrim .bc-cx-item .bc-cx-body{
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#bcScrim .bc-cx-item .bc-cx-name{
  font-family: 'Outfit', sans-serif;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink, #1A0F0A);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -.005em;
}
#bcScrim .bc-cx-item .bc-cx-price{
  font-family: 'Outfit', sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--brand, #E85A24);
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#bcScrim .bc-cx-item .bc-cx-price .cat{
  color: var(--mute, #7A5A40);
  font-weight: 700;
  font-size: 10.5px;
}
html[data-theme="dark"] #bcScrim .bc-cx-fade-l{ background: linear-gradient(90deg, var(--paper) 0%, rgba(0,0,0,0) 100%); }
html[data-theme="dark"] #bcScrim .bc-cx-fade-r{ background: linear-gradient(-90deg, var(--paper) 0%, rgba(0,0,0,0) 100%); }