/* =====================================================================
   SBM Skincare - shared stylesheet (public storefront + admin console)
   ===================================================================== */

:root{
  /* ---- SBM brand -------------------------------------------------
     Primary   CMYK C14 M100 Y16 K18  ->  #B3086A   (logo art: #B10966)
     Secondary "Wood 12" bronze       ->  #8A5423   (logo gradient #6D3017 - #9C6D46)
     Brand black from the logo lockup ->  #231F20
     White on #B3086A = 6.65:1 contrast, WCAG AA at every size.        */
  --sbm-magenta:#B3086A;
  --sbm-magenta-dk:#8A0651;
  --sbm-magenta-soft:#F7E6F0;
  --sbm-bronze:#8A5423;
  --sbm-bronze-dk:#6D3017;
  --sbm-bronze-lt:#9C6D46;
  --sbm-bronze-soft:#F6EEE4;

  --sbm-ink:#231F20;
  --sbm-ink-2:#4a4446;
  --sbm-muted:#7a7376;
  --sbm-line:#e9e5e7;
  --sbm-bg:#f8f6f7;
  --sbm-band:#faf7f9;
  --sbm-accent:var(--sbm-magenta);
  --sbm-accent-dk:var(--sbm-magenta-dk);
  --sbm-accent-soft:var(--sbm-magenta-soft);
  --sbm-sidebar:#231F20;
  --sbm-radius:16px;
  --sbm-radius-sm:10px;
  --sbm-shadow:0 1px 2px rgba(35,31,32,.04), 0 8px 28px rgba(35,31,32,.07);
  --sbm-shadow-lg:0 18px 48px rgba(35,31,32,.14);
}

body{
  color:var(--sbm-ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--sbm-accent); text-decoration:none; }
a:hover{ color:var(--sbm-accent-dk); }
.btn-dark{ background:var(--sbm-ink); border-color:var(--sbm-ink); }
.btn-dark:hover{ background:#000; border-color:#000; }
.btn-outline-dark{ border-color:var(--sbm-ink); color:var(--sbm-ink); }

.sbm-logo{ letter-spacing:.16em; font-weight:800; }
.sbm-logo-sub{ font-weight:400; color:var(--sbm-muted); margin-left:.45rem; }



/* =====================================================================
   PUBLIC - chrome (utility strip + two-row header + category nav)
   ===================================================================== */
.sbm-public{ background:#fff; }

.sbm-skip{
  position:absolute; left:-9999px; top:0; z-index:2000;
  background:var(--sbm-ink); color:#fff; padding:.6rem 1rem; border-radius:0 0 8px 0;
}
.sbm-skip:focus{ left:0; color:#fff; }

.sbm-topstrip{
  background:var(--sbm-ink); color:#EDE6E9;
  font-size:.78rem; padding:.45rem 0; letter-spacing:.01em;
}
.sbm-topstrip i{ opacity:.75; }
.sbm-topstrip a{ color:#EDE6E9; }
.sbm-topstrip a:hover{ color:#fff; text-decoration:underline; }

.sbm-header{ position:sticky; top:0; z-index:1030; background:#fff; box-shadow:0 1px 0 var(--sbm-line); }
.sbm-header-main{ padding:.85rem 0; }
.sbm-header-grid{
  display:grid; align-items:center; gap:1.25rem;
  grid-template-columns:auto minmax(0,1fr) auto;
}

/* logo - the lockup carries a strapline, so it needs real height */
.sbm-brand{ display:inline-flex; align-items:center; padding:0; }
.sbm-brand-full{ display:block; }
.sbm-brand-mark{ display:none; }

/* Type-set brand mark. No logo artwork is used anywhere - swap one flag in
   includes/brand_mark.php to switch this for real files. */
.sbm-mark{
  display:inline-flex; flex-direction:column; justify-content:center;
  height:var(--mark-h); line-height:1;
}
.sbm-mark-word{ font-weight:800; letter-spacing:.17em; color:var(--sbm-magenta); }
.sbm-mark-tag{
  text-transform:uppercase; letter-spacing:.2em; font-weight:600;
  color:var(--sbm-muted); margin-top:.42em; white-space:nowrap;
}
.sbm-mark-light .sbm-mark-word{ color:#fff; }
.sbm-mark-light .sbm-mark-tag{ color:rgba(255,255,255,.6); }
.sbm-mark-img{ display:block; }

/* search - the primary way people find things, so it gets the space */
.sbm-searchbar{ position:relative; display:flex; align-items:center; }
.sbm-searchbar > i{
  position:absolute; left:1rem; color:var(--sbm-muted); font-size:.95rem; pointer-events:none; z-index:2;
}
.sbm-searchbar .form-control{
  height:46px; padding-left:2.6rem; padding-right:7rem;
  border-radius:999px; border:1.5px solid var(--sbm-line); background:var(--sbm-bg);
  font-size:.94rem;
}
.sbm-searchbar .form-control:focus{
  background:#fff; border-color:var(--sbm-magenta); box-shadow:0 0 0 4px rgba(179,8,106,.10);
}
.sbm-searchbar .btn{
  position:absolute; right:5px; height:36px; padding:0 1.15rem; border-radius:999px;
  background:var(--sbm-magenta); color:#fff; font-size:.85rem; font-weight:600; border:0;
}
.sbm-searchbar .btn:hover{ background:var(--sbm-magenta-dk); color:#fff; }

/* account + bag */
.sbm-header-actions{ display:flex; align-items:center; gap:.35rem; }
.sbm-action{
  display:flex; align-items:center; gap:.6rem; padding:.45rem .7rem;
  border-radius:10px; color:var(--sbm-ink); white-space:nowrap;
}
.sbm-action:hover{ background:var(--sbm-bg); color:var(--sbm-ink); }
.sbm-action > i{ font-size:1.3rem; }
.sbm-action span{ display:flex; flex-direction:column; line-height:1.15; }
.sbm-action small{ font-size:.68rem; color:var(--sbm-muted); }
.sbm-action strong{ font-size:.86rem; font-weight:650; }
.sbm-bag-icon{ position:relative; display:inline-flex; }
.sbm-bag-icon i{ font-size:1.3rem; }
.sbm-cart-count{
  position:absolute; top:-6px; right:-9px; min-width:18px; height:18px;
  border-radius:999px; background:var(--sbm-magenta); color:#fff;
  font-size:.66rem; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 4px;
}

/* category nav */
.sbm-catnav{ border-top:1px solid var(--sbm-line); background:#fff; }
.sbm-catnav-toggle{
  border:0; padding:.7rem 0; font-size:.9rem; font-weight:600; color:var(--sbm-ink);
  box-shadow:none !important; width:100%; text-align:left;
}
.sbm-catnav-list{ width:100%; gap:.1rem; }
.sbm-catnav .nav-link{
  color:var(--sbm-ink-2); font-size:.9rem; font-weight:550;
  padding:.7rem .8rem; border-radius:0; border-bottom:2px solid transparent;
}
.sbm-catnav .nav-link:hover{ color:var(--sbm-magenta); }
.sbm-catnav .nav-link.active{ color:var(--sbm-magenta); border-bottom-color:var(--sbm-magenta); }
.sbm-catnav .dropdown-toggle::after{ margin-left:.35rem; opacity:.5; }

/* mega menu */
@media (min-width:992px){
  .sbm-mega-parent{ position:static; }
  /* The [data-bs-popper] half is not decoration: Bootstrap ships
     `.dropdown-menu[data-bs-popper]{ left:0 }` at specificity (0,2,0), which
     outranks a bare `.sbm-mega` and drags the full-width panel a half screen
     to the left. Matching that specificity puts it back under the nav. */
  .sbm-mega,
  .sbm-mega[data-bs-popper]{
    width:100vw; left:50%; right:auto; transform:translateX(-50%); margin-top:0;
    border:0; border-top:1px solid var(--sbm-line); border-radius:0 0 var(--sbm-radius) var(--sbm-radius);
    box-shadow:var(--sbm-shadow-lg); padding-bottom:1rem !important;
  }
}
.sbm-mega{ background:#fff; }
.sbm-mega-col{ padding:1.4rem 1.1rem; }
@media (min-width:992px){ .sbm-mega-col + .sbm-mega-col{ border-left:1px solid var(--sbm-line); } }
@media (max-width:991.98px){ .sbm-mega-col{ padding:.6rem .25rem; } .sbm-mega{ box-shadow:none; border:0; } }
.sbm-mega-head{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--sbm-muted); margin-bottom:.6rem; font-weight:700; display:block;
}
.sbm-mega-head-link{ color:var(--sbm-ink); }
.sbm-mega-head-link:hover{ color:var(--sbm-magenta); }
.sbm-mega-link{
  display:block; padding:.36rem .5rem; border-radius:8px;
  color:var(--sbm-ink); font-size:.88rem; font-weight:500;
}
.sbm-mega-link span{ font-size:.73rem; font-weight:400; }
.sbm-mega-link:hover{ background:var(--sbm-accent-soft); color:var(--sbm-accent-dk); }
.sbm-mega-n{ color:var(--sbm-muted); font-size:.72rem; font-weight:400; }

/* Product thumbnails inside the Products panel. */
.sbm-mega-picks{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem; }
.sbm-mega-pick{
  display:flex; align-items:center; gap:.6rem; padding:.4rem;
  border-radius:10px; color:var(--sbm-ink); min-width:0;
}
.sbm-mega-pick:hover{ background:var(--sbm-accent-soft); color:var(--sbm-ink); }
.sbm-mega-pick img{
  width:52px; height:52px; object-fit:contain; flex:0 0 auto;
  border-radius:8px; background:var(--sbm-bg);
}
.sbm-mega-pick > span{ display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.sbm-mega-pick-brand{
  font-size:.6rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--sbm-magenta);
}
.sbm-mega-pick-name{
  font-size:.82rem; font-weight:600;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sbm-mega-pick-price{ font-size:.78rem; font-weight:700; color:var(--sbm-ink-2); margin-top:.15rem; }
@media (max-width:991.98px){ .sbm-mega-picks{ grid-template-columns:1fr; } }
.sbm-mega-foot{
  border-top:1px solid var(--sbm-line); margin:0 1.1rem; padding-top:.8rem;
  display:flex; flex-wrap:wrap; gap:1rem; font-size:.85rem; font-weight:600;
}

@media (max-width:991.98px){
  .sbm-header-grid{ grid-template-columns:auto 1fr auto; gap:.75rem; }
  .sbm-brand-full{ display:none; }
  .sbm-brand-mark{ display:block; }
  .sbm-searchbar .form-control{ height:42px; padding-right:1rem; }
  .sbm-searchbar .btn{ display:none; }
  /* hide the two-line label, but never the bag icon itself */
  .sbm-action > span:not(.sbm-bag-icon){ display:none; }
}

/* =====================================================================
   PUBLIC - hero
   ===================================================================== */
.sbm-hero-wrap{
  padding:3.5rem 0 3rem;
  background:
    radial-gradient(1100px 380px at 88% -8%, #FBEFF6 0%, rgba(255,255,255,0) 62%),
    radial-gradient(800px 340px at 4% 8%, #F7EFE4 0%, rgba(255,255,255,0) 60%);
}
.sbm-eyebrow{
  display:inline-block; font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--sbm-accent); margin-bottom:1rem;
}
.sbm-eyebrow-light{ color:rgba(255,255,255,.75); }
.sbm-hero-title{
  font-size:clamp(2.1rem, 4.2vw, 3.3rem); font-weight:800;
  letter-spacing:-.025em; line-height:1.08; margin-bottom:1.1rem;
}
.sbm-hero-lead{ font-size:1.06rem; color:var(--sbm-ink-2); max-width:33rem; margin-bottom:1.6rem; }

.sbm-hero-quick{ display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; }
.sbm-hero-quick-label{ font-size:.82rem; color:var(--sbm-muted); margin-right:.25rem; }
.sbm-chip{
  display:inline-block; padding:.32rem .8rem; border-radius:999px;
  border:1px solid var(--sbm-line); background:#fff;
  font-size:.82rem; color:var(--sbm-ink-2); font-weight:500;
}
.sbm-chip:hover{ border-color:var(--sbm-accent); color:var(--sbm-accent); background:var(--sbm-accent-soft); }

/* ---- hero slider ------------------------------------------------------- */
.sbm-hero-slider{
  position:relative; height:420px; border-radius:var(--sbm-radius);
  overflow:hidden; background:linear-gradient(150deg,#fdf7fa 0%,#f6eee4 100%);
  box-shadow:var(--sbm-shadow-lg);
}
.sbm-hero-slider .carousel-inner,
.sbm-hero-slider .carousel-item{ height:100%; }

.sbm-hero-slide{ display:block; height:100%; position:relative; text-decoration:none; }
.sbm-hero-slide img{
  width:100%; height:100%; object-fit:contain; display:block; padding:1.5rem 1.5rem 3.5rem;
  transition:transform .5s ease;
}
.sbm-hero-slide:hover img{ transform:scale(1.03); }

/* Caption card, bottom-left, over the artwork. */
.sbm-hero-cap{
  position:absolute; left:1rem; bottom:1rem; z-index:3; max-width:62%;
  display:flex; flex-direction:column; gap:.15rem;
  background:rgba(255,255,255,.94); backdrop-filter:blur(6px);
  border:1px solid var(--sbm-line); border-radius:var(--sbm-radius-sm);
  padding:.7rem .9rem; box-shadow:0 6px 22px rgba(35,31,32,.1);
}
.sbm-hero-cap-brand{
  font-size:.64rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--sbm-magenta);
}
.sbm-hero-cap-name{
  font-weight:700; color:var(--sbm-ink); line-height:1.25; font-size:.95rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sbm-hero-cap-foot{ display:flex; align-items:center; gap:.5rem; margin-top:.35rem; flex-wrap:wrap; }
.sbm-hero-cap-price{ font-weight:800; color:var(--sbm-ink); font-size:.9rem; }

/* Arrows: small round buttons rather than Bootstrap's full-height strips. */
.sbm-hero-nav{
  width:38px; height:38px; top:50%; transform:translateY(-50%); opacity:0;
  background:rgba(255,255,255,.94); border:1px solid var(--sbm-line); border-radius:50%;
  color:var(--sbm-ink); display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(35,31,32,.12); transition:opacity .18s ease, background .18s ease;
}
.carousel-control-prev.sbm-hero-nav{ left:.65rem; }
.carousel-control-next.sbm-hero-nav{ right:.65rem; }
.sbm-hero-slider:hover .sbm-hero-nav,
.sbm-hero-nav:focus-visible{ opacity:1; }
.sbm-hero-nav:hover{ background:var(--sbm-magenta); color:#fff; border-color:var(--sbm-magenta); }
.sbm-hero-nav i{ font-size:1.05rem; }

.sbm-hero-dots{ margin-bottom:.45rem; }
.sbm-hero-dots [data-bs-target]{
  width:7px; height:7px; border-radius:50%; border:0; opacity:.35;
  background:var(--sbm-ink); margin:0 3px; transition:all .18s ease;
}
.sbm-hero-dots .active{ opacity:1; width:18px; border-radius:4px; background:var(--sbm-magenta); }

.sbm-hero-badge{
  position:absolute; right:1rem; top:1rem; z-index:4;
  background:var(--sbm-ink); color:#fff; border-radius:var(--sbm-radius-sm);
  padding:.7rem .9rem; box-shadow:var(--sbm-shadow-lg); pointer-events:none;
}
.sbm-hero-badge-n{ font-size:1.4rem; font-weight:800; line-height:1; }
.sbm-hero-badge-t{ font-size:.64rem; opacity:.72; line-height:1.25; margin-top:.2rem; }

/* Shown only when the catalog has no active products. */
.sbm-hero-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:2rem; gap:.5rem;
}
.sbm-hero-empty i{ font-size:2.2rem; color:var(--sbm-magenta); }
.sbm-hero-empty strong{ color:var(--sbm-ink); }
.sbm-hero-empty p{ font-size:.85rem; color:var(--sbm-muted); max-width:34ch; margin:0; }

@media (max-width:991.98px){
  .sbm-hero-slider{ height:330px; margin-top:1rem; }
  .sbm-hero-cap{ max-width:76%; }
  .sbm-hero-nav{ opacity:1; }
}

/* =====================================================================
   PUBLIC - sections
   ===================================================================== */
.sbm-section{ padding:3.25rem 0; }
.sbm-band{ background:var(--sbm-band); padding:3.25rem 0; }
.sbm-section-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:1rem; margin-bottom:1.5rem; flex-wrap:wrap;
}
.sbm-section-head h2{ font-size:1.55rem; font-weight:750; letter-spacing:-.015em; margin:0 0 .25rem; }
.sbm-section-head p{ color:var(--sbm-muted); margin:0; font-size:.94rem; }
.sbm-section-link{ font-size:.88rem; font-weight:600; white-space:nowrap; }

/* trust strip */
.sbm-trust{ border-block:1px solid var(--sbm-line); padding:1.5rem 0; background:#fff; }
.sbm-trust-item{ display:flex; gap:.8rem; align-items:flex-start; }
.sbm-trust-item i{ font-size:1.25rem; color:var(--sbm-accent); margin-top:.1rem; }
.sbm-trust-title{ font-weight:650; font-size:.92rem; }
.sbm-trust-text{ font-size:.8rem; color:var(--sbm-muted); line-height:1.35; }

/* concern tiles */
.sbm-concern{
  display:block; height:100%; padding:1.15rem 1rem;
  border:1px solid var(--sbm-line); border-radius:var(--sbm-radius);
  background:#fff; color:var(--sbm-ink); transition:all .18s ease;
}
.sbm-concern i{ font-size:1.35rem; color:var(--sbm-accent); }
.sbm-concern-name{ font-weight:650; margin-top:.55rem; font-size:.95rem; }
.sbm-concern-n{ font-size:.78rem; color:var(--sbm-muted); }
.sbm-concern:hover{
  border-color:var(--sbm-accent); background:var(--sbm-accent-soft);
  transform:translateY(-3px); color:var(--sbm-ink);
}

/* category tiles */
.sbm-cat-tile{
  display:flex; align-items:center; gap:.9rem; height:100%;
  background:#fff; border:1px solid var(--sbm-line); border-radius:var(--sbm-radius);
  padding:.7rem .9rem .7rem .7rem; color:var(--sbm-ink); transition:all .18s ease;
}
.sbm-cat-media{
  width:64px; height:64px; flex:0 0 64px; border-radius:12px; overflow:hidden;
  background:var(--sbm-bg); display:block;
}
.sbm-cat-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.sbm-cat-body{ display:flex; flex-direction:column; min-width:0; }
.sbm-cat-name{ font-weight:650; font-size:.98rem; }
.sbm-cat-n{ font-size:.78rem; color:var(--sbm-muted); }
.sbm-cat-tile > i{ margin-left:auto; color:var(--sbm-muted); transition:transform .18s ease; }
.sbm-cat-tile:hover{
  border-color:var(--sbm-magenta); box-shadow:var(--sbm-shadow); color:var(--sbm-ink);
}
.sbm-cat-tile:hover > i{ transform:translateX(3px); color:var(--sbm-magenta); }

/* treatment-form rail */
.sbm-form-rail{
  display:grid; gap:.85rem;
  grid-template-columns:repeat(auto-fit, minmax(132px, 1fr));
}
.sbm-form-tile{
  background:#fff; border:1px solid var(--sbm-line); border-radius:var(--sbm-radius);
  padding:.85rem .75rem 1rem; text-align:center; color:var(--sbm-ink);
  transition:all .18s ease;
}
.sbm-form-tile:hover{ transform:translateY(-3px); box-shadow:var(--sbm-shadow); color:var(--sbm-ink); }
.sbm-form-img{
  height:96px; display:flex; align-items:center; justify-content:center;
  margin-bottom:.5rem; overflow:hidden; border-radius:var(--sbm-radius-sm);
}
.sbm-form-img img{ height:100%; width:100%; object-fit:cover; border-radius:var(--sbm-radius-sm); }
.sbm-form-img i{ font-size:1.6rem; color:#c3c8d1; }
.sbm-form-name{ font-weight:650; font-size:.88rem; }
.sbm-form-n{ font-size:.74rem; color:var(--sbm-muted); }

/* =====================================================================
   PUBLIC - product card
   ===================================================================== */
.sbm-card{
  display:flex; flex-direction:column; height:100%; background:#fff;
  border:1px solid var(--sbm-line); border-radius:var(--sbm-radius);
  overflow:hidden; transition:transform .2s ease, box-shadow .2s ease;
}
.sbm-card:hover{ transform:translateY(-4px); box-shadow:var(--sbm-shadow-lg); }
.sbm-card-media{ position:relative; display:block; aspect-ratio:1/1; background:var(--sbm-bg); }
.sbm-card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Sits at the bottom so it never collides with the brand lettering that the
   generated artwork prints across the top of the tile. */
.sbm-card-flag{
  position:absolute; bottom:.6rem; left:.6rem; font-size:.66rem; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; padding:.22rem .5rem; border-radius:6px;
}
.sbm-flag-hot{ background:var(--sbm-ink); color:#fff; }
.sbm-flag-out{ background:#fee2e2; color:#991b1b; }

.sbm-card-body{ padding:.85rem .9rem 1rem; display:flex; flex-direction:column; flex-grow:1; gap:.3rem; }
.sbm-card-brand{
  font-size:.68rem; letter-spacing:.11em; text-transform:uppercase;
  color:var(--sbm-muted); font-weight:700;
}
.sbm-card-name{
  font-weight:600; color:var(--sbm-ink); font-size:.94rem; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.sbm-card-name:hover{ color:var(--sbm-accent); }
.sbm-pill{
  display:inline-block; font-size:.68rem; padding:.14rem .55rem; border-radius:999px;
  background:var(--sbm-accent-soft); color:var(--sbm-accent-dk); font-weight:650;
}
.sbm-card-foot{
  margin-top:auto; padding-top:.6rem; display:flex; align-items:center;
  justify-content:space-between; gap:.4rem;
}
.sbm-price{ font-weight:750; font-size:.98rem; }
.sbm-btn-add{
  background:var(--sbm-ink); color:#fff; border:0; border-radius:8px;
  font-size:.8rem; padding:.36rem .7rem;
}
.sbm-btn-add:hover{ background:var(--sbm-accent); color:#fff; }

/* brand cards */
.sbm-brand-card{
  display:block; height:100%; background:#fff; border:1px solid var(--sbm-line);
  border-radius:var(--sbm-radius); overflow:hidden; transition:all .18s ease;
}
.sbm-brand-card img{ width:100%; display:block; }
.sbm-brand-tag{
  padding:.6rem .8rem; font-size:.76rem; color:var(--sbm-muted);
  border-top:1px solid var(--sbm-line); text-align:center;
}
.sbm-brand-card:hover{ transform:translateY(-3px); box-shadow:var(--sbm-shadow); }

/* routine band */
.sbm-routine{
  background:linear-gradient(120deg, var(--sbm-magenta) 0%, var(--sbm-magenta-dk) 48%, var(--sbm-bronze-dk) 100%);
  color:#fff; border-radius:var(--sbm-radius); padding:2.5rem;
}
.sbm-routine-step{
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14);
  border-radius:var(--sbm-radius-sm); padding:1.1rem; height:100%;
}
.sbm-routine-n{
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%;
  background:#fff; color:var(--sbm-accent-dk); font-weight:800; font-size:.9rem;
}

/* help cards */
.sbm-help{
  display:flex; align-items:center; gap:1rem; height:100%;
  padding:1.25rem 1.35rem; border:1px solid var(--sbm-line);
  border-radius:var(--sbm-radius); background:#fff; color:var(--sbm-ink);
  transition:all .18s ease;
}
.sbm-help > i:first-child{ font-size:1.4rem; color:var(--sbm-accent); }
.sbm-help-title{ font-weight:650; }
.sbm-help-text{ font-size:.83rem; color:var(--sbm-muted); }
.sbm-help:hover{ border-color:var(--sbm-accent); color:var(--sbm-ink); box-shadow:var(--sbm-shadow); }

/* product detail */
.sbm-product-hero{
  aspect-ratio:1/1; border-radius:var(--sbm-radius); overflow:hidden;
  border:1px solid var(--sbm-line); background:var(--sbm-bg);
}
.sbm-product-hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.sbm-product-thumbs{ display:flex; gap:.5rem; margin-top:.6rem; }
.sbm-product-thumbs img{
  width:76px; height:76px; object-fit:cover; border-radius:var(--sbm-radius-sm);
  border:1px solid var(--sbm-line); cursor:pointer; background:var(--sbm-bg);
}
.sbm-product-thumbs img:hover{ border-color:var(--sbm-accent); }

.accordion-button{ font-weight:600; }
.accordion-button:not(.collapsed){ background:var(--sbm-accent-soft); color:var(--sbm-accent-dk); }
.accordion-button:focus{ box-shadow:none; border-color:var(--sbm-line); }
.accordion-item{ border-color:var(--sbm-line); }

/* generic surfaces reused across public pages */
.sbm-thumb{
  aspect-ratio:1/1; background:var(--sbm-bg) center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--sbm-radius); color:#c3c8d1; font-size:2.4rem;
}
.sbm-filter-card{ border:1px solid var(--sbm-line); border-radius:var(--sbm-radius); background:#fff; }
.sbm-step-dot{
  width:34px; height:34px; border-radius:50%; background:var(--sbm-accent); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:700; flex:0 0 34px;
}
.sbm-hero{
  background:linear-gradient(120deg,var(--sbm-magenta) 0%,var(--sbm-magenta-dk) 52%,var(--sbm-bronze-dk) 100%);
  color:#fff; border-radius:var(--sbm-radius); overflow:hidden;
}
.sbm-hero .badge{ background:rgba(255,255,255,.16); }

.sbm-footer{ background:var(--sbm-bg); border-top:1px solid var(--sbm-line); }

/* =====================================================================
   ADMIN
   ===================================================================== */
.sbm-admin{ background:var(--sbm-bg); }
.sbm-shell{ display:flex; min-height:100vh; }

.sbm-sidebar{
  width:260px; flex:0 0 260px; background:var(--sbm-sidebar); color:#d6cccf;
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
}
.sbm-sidebar-brand{ padding:1.1rem 1.25rem; color:#fff; font-size:1.15rem; border-bottom:1px solid rgba(255,255,255,.07); }
.sbm-role-chip{
  margin:.9rem 1.25rem; padding:.4rem .7rem; font-size:.75rem; border-radius:8px;
  background:rgba(255,255,255,.06); color:#e5e9f0;
}
.sbm-nav{ padding:0 .6rem 1rem; flex:1; }
.sbm-nav-group{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.12em;
  color:#8a7c81; padding:.9rem .75rem .35rem;
}
.sbm-nav-link{
  display:flex; align-items:center; gap:.7rem; padding:.55rem .75rem; margin-bottom:2px;
  border-radius:9px; color:#d6cccf; text-decoration:none; font-size:.9rem;
}
.sbm-nav-link:hover{ background:rgba(255,255,255,.06); color:#fff; }
.sbm-nav-link.active{ background:var(--sbm-accent); color:#fff; }
.sbm-nav-link i{ font-size:1rem; }
.sbm-sidebar-foot{ padding:1rem 1.25rem; border-top:1px solid rgba(255,255,255,.07); }
.sbm-sidebar-foot a{ color:#b5a9ad; text-decoration:none; }

.sbm-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.sbm-topbar{
  background:#fff; border-bottom:1px solid var(--sbm-line);
  padding:.85rem 1.4rem; display:flex; align-items:center; gap:1rem;
  position:sticky; top:0; z-index:20;
}
.sbm-content{ padding:1.4rem; flex:1; }

.sbm-stat{ background:#fff; border:1px solid var(--sbm-line); border-radius:var(--sbm-radius); padding:1.1rem 1.2rem; height:100%; }
.sbm-stat .label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.09em; color:var(--sbm-muted); }
.sbm-stat .value{ font-size:1.6rem; font-weight:700; line-height:1.2; }

.sbm-panel{ background:#fff; border:1px solid var(--sbm-line); border-radius:var(--sbm-radius); }
.sbm-panel > .sbm-panel-head{
  padding:.9rem 1.15rem; border-bottom:1px solid var(--sbm-line);
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
}
.sbm-panel > .sbm-panel-body{ padding:1.15rem; }

/* two-gate grids */
.sbm-matrix{ font-size:.85rem; }
.sbm-matrix th, .sbm-matrix td{ text-align:center; vertical-align:middle; white-space:nowrap; }
.sbm-matrix th.row-head, .sbm-matrix td.row-head{ text-align:left; position:sticky; left:0; background:#fff; z-index:2; min-width:210px; }
.sbm-matrix thead th{ position:sticky; top:0; background:#fff; z-index:3; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; }
.sbm-matrix thead th.row-head{ z-index:4; }
.sbm-matrix tbody tr:hover td{ background:#fbfcfd; }
.sbm-matrix tbody tr:hover td.row-head{ background:#fbfcfd; }
.sbm-scroll{ max-height:70vh; overflow:auto; }

.sbm-switch{ cursor:pointer; }
.sbm-switch:disabled{ cursor:not-allowed; opacity:.45; }
.sbm-locked-row{ background:#fffbeb; }

.gate-badge{ font-size:.68rem; padding:.2rem .5rem; border-radius:6px; font-weight:600; }
.gate-on{ background:#dcfce7; color:#166534; }
.gate-off{ background:#fee2e2; color:#991b1b; }

.table-sm td, .table-sm th{ padding:.5rem .6rem; }
.sbm-empty{ padding:3rem 1rem; text-align:center; color:var(--sbm-muted); }
.sbm-empty i{ font-size:2.2rem; display:block; margin-bottom:.6rem; opacity:.4; }

code.sbm-uuid{ font-size:.72rem; color:var(--sbm-muted); }

@media (max-width: 991.98px){
  .sbm-sidebar{ position:fixed; z-index:1050; transform:translateX(-100%); transition:transform .2s ease; }
  .sbm-sidebar.open{ transform:translateX(0); }
  .sbm-content{ padding:1rem; }
  .sbm-section, .sbm-band{ padding:2.25rem 0; }
  .sbm-routine{ padding:1.75rem; }
}

/* =====================================================================
   FLOATING WIDGETS - social rail (left) and support chat (bottom right)
   ===================================================================== */
/* ---------------------------------------- payment acceptance marks */
.sbm-pay{ display:flex; flex-wrap:wrap; gap:.5rem; }
.sbm-pay-item{
  display:inline-flex; align-items:center; gap:.45rem;
  background:#fff; border:1px solid var(--sbm-line); border-radius:10px;
  padding:.3rem .55rem .3rem .35rem; line-height:1;
}
.sbm-pay-item img{
  display:block; width:38px; height:26px; object-fit:contain;
  border-radius:4px; flex:0 0 auto;
}
.sbm-pay-name{
  font-size:.74rem; font-weight:600; color:var(--sbm-ink-2); white-space:nowrap;
}
.sbm-pay-sm .sbm-pay-item{ padding:.2rem .4rem .2rem .25rem; gap:.3rem; }
.sbm-pay-sm .sbm-pay-item img{ width:30px; height:20px; }
.sbm-pay-sm .sbm-pay-name{ font-size:.68rem; }
/* Inline mark inside a checkout tab, where it replaces a glyph. */
.sbm-pay-inline{
  display:inline-block; vertical-align:-.35em; margin-right:.4rem;
  object-fit:contain; border-radius:3px;
}

.sbm-social{
  position:fixed; left:0; top:50%; transform:translateY(-50%); z-index:1020;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  background:#fff; border:1px solid var(--sbm-line); border-left:0;
  border-radius:0 12px 12px 0; padding:.55rem .4rem; box-shadow:var(--sbm-shadow);
}
.sbm-social-label{
  writing-mode:vertical-rl; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--sbm-muted); margin-bottom:.35rem; font-weight:700;
}
.sbm-social-link{
  width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center;
  color:var(--sbm-ink-2); font-size:1rem; transition:all .16s ease;
}
.sbm-social-link:hover{ background:var(--sbm-magenta); color:#fff; transform:translateX(2px); }
.sbm-social-whatsapp:hover{ background:#25D366; }
.sbm-social-facebook:hover{ background:#1877F2; }
.sbm-social-instagram:hover{ background:#E1306C; }
.sbm-social-x:hover{ background:#000; }
.sbm-social-youtube:hover{ background:#FF0000; }
.sbm-social-linkedin:hover{ background:#0A66C2; }
.sbm-social-tiktok:hover{ background:#000; }

/* WhatsApp is a contact channel rather than a page to follow, so it sits under
   the rest of the rail, behind a hairline, and carries its brand colour at rest
   instead of only on hover. */
.sbm-social-whatsapp{
  position:relative; margin-top:.35rem; padding-top:.45rem;
  border-top:1px solid var(--sbm-line); border-radius:9px;
  color:#128C4A;
}
.sbm-social-whatsapp:hover{ background:#25D366; color:#fff; }
.sbm-social-tip{
  position:absolute; left:calc(100% + 10px); top:50%; transform:translateY(-50%);
  background:var(--sbm-ink); color:#fff; font-size:.72rem; font-weight:600;
  white-space:nowrap; padding:.3rem .55rem; border-radius:7px;
  opacity:0; visibility:hidden; transition:opacity .16s ease; pointer-events:none;
}
.sbm-social-tip::before{
  content:''; position:absolute; right:100%; top:50%; transform:translateY(-50%);
  border:5px solid transparent; border-right-color:var(--sbm-ink);
}
.sbm-social-whatsapp:hover .sbm-social-tip,
.sbm-social-whatsapp:focus-visible .sbm-social-tip{ opacity:1; visibility:visible; }

/* On small screens the rail would sit on top of content, so it docks flat. */
@media (max-width:1199.98px){
  .sbm-social{
    top:auto; bottom:0; left:0; right:0; transform:none;
    flex-direction:row; justify-content:center; gap:.25rem;
    border:1px solid var(--sbm-line); border-bottom:0; border-radius:14px 14px 0 0;
    padding:.35rem .5rem;
  }
  .sbm-social-label{ display:none; }
  .sbm-social-link{ width:38px; height:38px; }
  /* Rail is horizontal here, so the divider moves to the left edge. */
  .sbm-social-whatsapp{
    margin-top:0; padding-top:0; border-top:0;
    margin-left:.35rem; padding-left:.45rem; border-left:1px solid var(--sbm-line);
  }
  .sbm-social-tip{ display:none; }
}

.sbm-chat{ position:fixed; right:20px; bottom:20px; z-index:1040; }
@media (max-width:1199.98px){ .sbm-chat{ bottom:62px; right:12px; } }

.sbm-chat-launcher{
  display:flex; align-items:center; gap:.55rem; border:0; cursor:pointer;
  background:var(--sbm-magenta); color:#fff; border-radius:999px;
  padding:.8rem 1.25rem; font-weight:600; font-size:.92rem;
  box-shadow:0 10px 30px rgba(179,8,106,.35);
  transition:transform .18s ease, background .18s ease;
}
.sbm-chat-launcher:hover{ background:var(--sbm-magenta-dk); transform:translateY(-2px); }
.sbm-chat-launcher i{ font-size:1.15rem; }
.sbm-chat.open .sbm-chat-launcher{ display:none; }
@media (max-width:575.98px){ .sbm-chat-launcher span{ display:none; } .sbm-chat-launcher{ padding:.85rem; } }

.sbm-chat-panel{
  width:min(92vw, 360px); background:#fff; border-radius:var(--sbm-radius);
  box-shadow:0 24px 60px rgba(35,31,32,.26); overflow:hidden;
  border:1px solid var(--sbm-line);
}
.sbm-chat-head{
  display:flex; align-items:center; gap:.7rem; padding:.9rem 1rem;
  background:linear-gradient(120deg, var(--sbm-magenta) 0%, var(--sbm-magenta-dk) 60%, var(--sbm-bronze-dk) 100%);
  color:#fff;
}
.sbm-chat-mark{ display:inline-flex; align-items:center; }
.sbm-chat-head strong{ display:block; font-size:.95rem; line-height:1.2; }
.sbm-chat-head span{ font-size:.72rem; opacity:.8; }
.sbm-chat-close{
  margin-left:auto; background:rgba(255,255,255,.16); border:0; color:#fff;
  width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:.8rem;
}
.sbm-chat-close:hover{ background:rgba(255,255,255,.3); }

.sbm-chat-body{ padding:1rem; max-height:min(70vh, 520px); overflow-y:auto; }
.sbm-chat-intro{ font-size:.82rem; color:var(--sbm-muted); margin-bottom:.85rem; }
.sbm-chat-channels{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1rem; }
.sbm-chat-channel{
  display:flex; align-items:center; gap:.6rem; padding:.6rem .75rem;
  border:1px solid var(--sbm-line); border-radius:10px;
  font-size:.86rem; font-weight:550; color:var(--sbm-ink);
}
.sbm-chat-channel i:first-child{ font-size:1rem; color:var(--sbm-magenta); }
.sbm-chat-channel .ms-auto{ font-size:.75rem; color:var(--sbm-muted); }
.sbm-chat-channel:hover{ border-color:var(--sbm-magenta); background:var(--sbm-magenta-soft); color:var(--sbm-ink); }

.sbm-chat-form .form-label{ font-size:.75rem; font-weight:650; margin:.55rem 0 .2rem; }
.sbm-chat-send{ background:var(--sbm-ink); color:#fff; border:0; font-weight:600; }
.sbm-chat-send:hover{ background:var(--sbm-magenta); color:#fff; }
.sbm-chat-result{ font-size:.8rem; margin-top:.6rem; }
.sbm-chat-result .ok{ color:#1a7f37; }
.sbm-chat-result .err{ color:#b42318; }