:root{ --smpms-chip-scale:0.9; --smpms-card-scale:0.95; }

/* Touch: permitir scroll horizontal e vertical sem "bloqueios" */
.smpms-topcats, .smpms-subwrap{ touch-action:pan-x pan-y; overscroll-behavior-x:contain; }

/* Scroll bonito (sem barra nativa) */
body.smpmsne-pretty-scroll .smpms-topcats,
body.smpmsne-pretty-scroll .smpms-subwrap{
  scrollbar-width:none;
}
body.smpmsne-pretty-scroll .smpms-topcats::-webkit-scrollbar,
body.smpmsne-pretty-scroll .smpms-subwrap::-webkit-scrollbar{
  width:0; height:0; display:none;
}

/* Scroll vs wrap (aplicado por JS conforme o layout) */
body.smpmsne-cats-scroll .smpms-topcats{
  overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  padding-bottom:.25rem;
}
/* Em layouts com scroll, evitar centragem do tema (center) que pode "prender" o overflow */
body.smpmsne-cats-scroll .smpms-topcats.center{ justify-content:flex-start; }
body.smpmsne-cats-wrap .smpms-topcats{
  overflow:visible; flex-wrap:wrap; scroll-snap-type:none;
  padding-bottom:.25rem;
}

body.smpmsne-sub-scroll .smpms-subwrap{
  overflow-x:auto; overflow-y:hidden; flex-wrap:nowrap;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
  padding-bottom:.25rem;
}
/* Subwrap precisa ocupar a largura disponível para o scroll funcionar */
.smpms-subcats .smpms-subwrap{ flex:1 1 0; min-width:0; }
body.smpmsne-sub-wrap .smpms-subwrap{
  overflow:visible; flex-wrap:wrap; scroll-snap-type:none;
  padding-bottom:.25rem;
}

body.smpmsne-cats-wrap .smpms-topcats.smpms-edgefade:before,
body.smpmsne-cats-wrap .smpms-topcats.smpms-edgefade:after,
body.smpmsne-sub-wrap  .smpms-subwrap.smpms-edgefade:before,
body.smpmsne-sub-wrap  .smpms-subwrap.smpms-edgefade:after{ display:none !important; }

/* Sticky robusto */
.smpms-header{ background:#fff; }
.smpms-header.is-sticky{ position:sticky; top:0; z-index:50; }
.smpms-header.is-sticky.is-scrolled{ box-shadow:0 10px 24px rgba(0,0,0,.06); }
body.admin-bar .smpms-header.is-sticky{ top:32px; }
@media (max-width:782px){ body.admin-bar .smpms-header.is-sticky{ top:46px; } }

.smpms-nav.container, .smpms-nav{ padding:1rem 0; display:grid; gap:.75rem; }

/* Breadcrumb */
.smpms-breadcrumb{ display:none; align-items:center; gap:.5rem; font-size:.9rem; color:#516158; padding:0 .25rem; }
.smpms-breadcrumb.enabled{ display:flex; }
.smpms-breadcrumb a{ color:inherit; text-decoration:none; }
.smpms-breadcrumb a:hover{ text-decoration:underline; }

/* Titlebar (centrado abaixo do nav) */
.smpmsne-titlebar{ display:none; text-align:center; padding:.25rem .25rem .1rem; }
.smpmsne-titlebar.enabled{ display:block; }
.smpmsne-titlebar .main{ font-weight:700; font-size:1.2rem; color:#1b5e3b; line-height:1.2; }
.smpmsne-titlebar .sub{ margin-top:.15rem; font-weight:600; color:#1b5e3b; font-size:1rem; }
.smpmsne-titlebar .sub small{ font-weight:600; color:#516158; }

/* Nav lines */
.smpms-navline{ position:relative; display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.smpms-edgefade:before,.smpms-edgefade:after{ content:""; position:sticky; top:0; width:16px; height:32px; pointer-events:none; z-index:1; }
.smpms-edgefade:before{ left:0; background:linear-gradient(90deg,#fff 25%,transparent); }
.smpms-edgefade:after{ right:0; background:linear-gradient(270deg,#fff 25%,transparent); }
.smpms-edgefade:not(.is-scrollable):before,.smpms-edgefade:not(.is-scrollable):after{ display:none; }

.smpms-subcats .smpms-nosub{ display:none!important; }

.smpms-chip{
  scroll-snap-align:start;
  flex:0 0 auto;
  border:1px solid #dfe7e3; background:#fff; color:#2d3b35;
  padding:calc(.5rem*var(--smpms-chip-scale)) calc(.8rem*var(--smpms-chip-scale));
  border-radius:999px;
  font-size:calc(.95rem*var(--smpms-chip-scale));
  line-height:1; white-space:nowrap;
  cursor:pointer;
  transition:border-color .2s, background .2s, box-shadow .2s, color .2s;
}
.smpms-chip:hover{ border-color:#b6c9bf; }
.smpms-chip.active{ background:#e9f7ef; border-color:#a8e0c1; color:#1b5e3b; font-weight:700; }
.smpms-chip.smpms-more{ border-style:dashed; opacity:.9; }
.smpms-hidden{ display:none !important; }
.smpmsne-forcehidden{ display:none !important; }

/* Botões de scroll (chips + scroll bonito)
   -> botões centrados e na mesma linha, em baixo do nav */
.smpmsne-scrollwrap{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; }
.smpmsne-scrollwrap > .smpms-topcats,
.smpmsne-scrollwrap > .smpms-subwrap{ flex:0 0 100%; min-width:0; }
.smpmsne-scrollbtnrow{ flex:0 0 100%; display:flex; justify-content:center; align-items:center; flex-wrap:nowrap; gap:.55rem; margin-top:.35rem; }

.smpmsne-scrollbtn{
  position:static; transform:none;
  width:36px; height:36px; border-radius:999px;
  border:1px solid #a8e0c1;
  background:#e9f7ef;
  color:#1b5e3b;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  display:flex; align-items:center; justify-content:center;
  font-size:24px; line-height:1;
  cursor:pointer;
}
.smpmsne-scrollbtn:hover{ background:#dff2e7; }
.smpmsne-scrollbtn:disabled{ opacity:.35; cursor:default; }

.smpms-backcats{
  display:none; align-items:center; gap:.4rem;
  padding:.45rem .7rem; border-radius:999px;
  border:1px solid #eef3f0; background:#fff; color:#2d3b35;
  cursor:pointer;
}
.smpms-backcats.enabled{ display:inline-flex; }

.smpms-subcats{ gap:.5rem; border-top:1px solid #eef3f0; padding-top:.5rem; }
.smpms-subwrap{ display:flex; gap:.5rem; }

/* Dropdown: selects (estilo consistente em mobile e desktop) */
.smpmsne-selectrow{
  display:none;
  position:relative;
  width:100%;
  max-width:460px;
  margin:.35rem auto .55rem;  /* centrado */
}
@media (max-width:768px){
  .smpmsne-selectrow{ max-width:100%; }
}
.smpmsne-selectrow:after{
  content:"▾";
  position:absolute;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  color:#1b5e3b;
  font-size:18px;
  opacity:.9;
  pointer-events:none;
}
.smpmsne-selectrow select{
  width:100%;
  -webkit-appearance:none;
  appearance:none;
  border:1px solid #a8e0c1;
  border-radius:999px;
  padding:12px 44px 12px 14px;
  font-size:1rem;
  font-weight:800;
  background:linear-gradient(180deg, #f3fbf7, #e9f7ef);
  color:#1b5e3b;
  outline:none;
  box-shadow:0 6px 16px rgba(0,0,0,.05);
  text-align:center;
  text-align-last:center;
}
.smpmsne-selectrow select:focus{
  box-shadow:0 0 0 3px rgba(168,224,193,.55), 0 6px 16px rgba(0,0,0,.05);
}
.smpms-hidden{ display:none !important; }

/* Sidebar bar (botão "Categorias") */
.smpmsne-sidebarbar{
  display:none;
  align-items:center;
  gap:.5rem;
  width:100%;
  min-width:0;
  flex-wrap:nowrap;
}
.smpmsne-sidebarbar.enabled{ display:flex; }
.smpmsne-sidebarbar .open{
  flex:0 0 auto;
  border:1px solid #dfe7e3; background:#fff; color:#2d3b35;
  padding:.55rem .85rem; border-radius:999px;
  font-weight:700; cursor:pointer;
}
.smpmsne-sidebarbar .smpmsne-current{
  flex:1 1 0;
  min-width:0; /* crítico para ellipsis em flex */
  /* 2 linhas (só passa à 2ª se não couber na 1ª) */
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  border:1px solid #a8e0c1; background:#e9f7ef; color:#1b5e3b;
  padding:.45rem .75rem; border-radius:999px;
  font-weight:700;
  line-height:1.15;
  white-space:normal;
  overflow:hidden;
  text-overflow:ellipsis;
  word-break:break-word;
  text-align:center;
}

@media (max-width:360px){
  .smpmsne-sidebarbar .smpmsne-current{
    font-size:.86rem;
    padding:.42rem .60rem;
  }
}

/* Drawer */
body.smpmsne-drawer-open{ overflow:hidden; }
.smpmsne-drawer-overlay{
  position:fixed; inset:0; z-index:9999;
  background:rgba(0,0,0,.35);
  display:flex; justify-content:flex-start; align-items:stretch;
}
.smpmsne-drawer{
  width:min(92vw, 360px);
  background:#fff;
  box-shadow:12px 0 40px rgba(0,0,0,.18);
  display:flex; flex-direction:column;
  height:100%;
  max-height:100vh;
  transform:translateX(-100%);
  transition:transform .2s ease;
}
.smpmsne-drawer-overlay.show .smpmsne-drawer{ transform:translateX(0); }
.smpmsne-drawer-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 12px 10px;
  border-bottom:1px solid #eef3f0;
}
.smpmsne-drawer-head .title{ font-size:1.05rem; font-weight:800; color:#2d3b35; }
.smpmsne-drawer-head .close{
  border:1px solid #eef3f0; background:#fff; color:#2d3b35;
  border-radius:12px; width:40px; height:34px; cursor:pointer;
}
.smpmsne-drawer-search{ padding:10px 12px 0; }
.smpmsne-drawer-search input{
  width:100%; border:1px solid #dfe7e3; border-radius:12px;
  padding:10px 12px; font-size:1rem; outline:none;
}
.smpmsne-drawer-actions{ padding:10px 12px 0; display:flex; gap:10px; }
.smpmsne-drawer-actions .back,
.smpmsne-drawer-actions .viewall{
  border:1px solid #dfe7e3; background:#fff; color:#2d3b35;
  border-radius:999px; padding:.55rem .85rem;
  font-weight:700; cursor:pointer;
}
.smpmsne-drawer-actions .viewall{
  border-color:#a8e0c1; background:#e9f7ef; color:#1b5e3b;
}
.smpmsne-drawer-list{
  padding:12px;
  overflow:auto;
  flex:1;
  min-height:0;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:10px;
}
.smpmsne-drawer-item{
  border:1px solid #dfe7e3; background:#fff; color:#2d3b35;
  border-radius:14px; padding:12px 12px;
  font-size:1rem; text-align:left; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between;
}
.smpmsne-drawer-item.active{
  background:#e9f7ef; border-color:#a8e0c1; color:#1b5e3b; font-weight:800;
}
.smpmsne-drawer-item .arrow{
  opacity:.65;
  margin-left:14px;
  font-size:20px;
  line-height:1;
  min-width:22px;
  text-align:right;
}
.smpmsne-drawer-empty{ padding:10px 12px; color:#607066; font-size:.95rem; }

/* Bottom sheet ("Mais") */
body.smpmsne-sheet-open{ overflow:hidden; }
.smpmsne-sheet-overlay{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:flex-end; justify-content:center;
  padding:10px;
  background:rgba(0,0,0,.35);
}
.smpmsne-sheet{
  width:100%;
  max-width:560px;
  background:#fff;
  border-radius:18px 18px 14px 14px;
  box-shadow:0 -18px 50px rgba(0,0,0,.18);
  max-height:85vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.smpmsne-sheet-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 12px 8px;
  border-bottom:1px solid #eef3f0;
}
.smpmsne-sheet-head .title{ font-size:1.05rem; font-weight:800; color:#2d3b35; }
.smpmsne-sheet-head .close{
  border:1px solid #eef3f0; background:#fff; color:#2d3b35;
  border-radius:12px; width:40px; height:34px; cursor:pointer;
}
.smpmsne-sheet-search{ padding:10px 12px 0; }
.smpmsne-sheet-search input{
  width:100%; border:1px solid #dfe7e3; border-radius:12px;
  padding:10px 12px; font-size:1rem; outline:none;
}
.smpmsne-sheet-hint{ padding:8px 12px 0; font-size:.88rem; color:#607066; }
.smpmsne-sheet-list{
  padding:10px 12px 14px;
  overflow:auto;
  flex:1;
  min-height:0;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  display:grid;
  gap:10px;
}
.smpmsne-sheet-item{
  border:1px solid #dfe7e3; background:#fff; color:#2d3b35;
  border-radius:14px; padding:12px 12px;
  font-size:1rem; text-align:left; cursor:pointer;
}
.smpmsne-sheet-item.active{
  background:#e9f7ef; border-color:#a8e0c1; color:#1b5e3b; font-weight:800;
}

/* Tipografia cards mobile */
@media (max-width:480px){
  .smpms-product .smpms-title{ font-size:calc(1.05rem*var(--smpms-card-scale)); line-height:1.2; }
  .smpms-product .smpms-price{ font-size:calc(1.02rem*var(--smpms-card-scale)); }
  .smpms-product .smpms-unit{ font-size:calc(.95em*var(--smpms-card-scale)); }
  .smpms-product .smpms-qtyrow input.smpms-qty{ font-size:calc(.95rem*var(--smpms-card-scale)); }
  .smpms-product .smpms-buy .button.smpms-add{ font-size:calc(.9rem*var(--smpms-card-scale)); padding:.6rem .8rem; }
}

/* UNI/KG menores em compact & super */
body.smpms-qty-compact .smpms-qtyrow .smpms-measure{ font-size:.72rem; opacity:.9; letter-spacing:.01em; }
body.smpms-qty-super   .smpms-qtyrow .smpms-measure{ font-size:.68rem; opacity:.9; letter-spacing:.01em; }

/* Presets de quantidade */
body.smpms-qty-compact .smpms-qtyrow .smpms-minus,
body.smpms-qty-compact .smpms-qtyrow .smpms-plus{ width:26px;height:26px;line-height:24px;font-size:16px;padding:0;border-radius:999px;}
body.smpms-qty-compact .smpms-qtyrow input.smpms-qty{ width:54px;height:26px;padding:2px 6px;font-size:.9rem;}
body.smpms-qty-compact .smpms-qtyrow{ gap:6px;min-height:30px;}
body.smpms-qty-super .smpms-qtyrow .smpms-minus,
body.smpms-qty-super .smpms-qtyrow .smpms-plus{ width:22px;height:22px;line-height:20px;font-size:14px;}
body.smpms-qty-super .smpms-qtyrow input.smpms-qty{ width:46px;height:22px;font-size:.86rem;padding:1px 5px;}
body.smpms-qty-super .smpms-qtyrow{ gap:4px;min-height:28px;}

/* Remover spin-buttons no mobile */
@media (max-width:480px){
  .smpms-qtyrow input.smpms-qty{
    border:1px solid #dfe7e3 !important;
    border-bottom:1px solid #dfe7e3 !important;
    border-radius:6px !important;
    outline:none !important;
    box-shadow:none !important;
    background:#fff !important;
    -webkit-appearance:textfield;
    appearance:textfield;
  }
  .smpms-qtyrow input.smpms-qty::-webkit-outer-spin-button,
  .smpms-qtyrow input.smpms-qty::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
}