/* Shop Soshi (buyer side), laid out like shop.com: icon rail on the left, one rounded panel, a search pill at the bottom */
@font-face{font-family:'Shopify-Inter';src:url('../media/inter-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body.sx{background:#f4f4f5;color:#18181b;font-family:'Shopify-Inter',Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
body.sx a{color:inherit}
h1,h2,h3,p{margin:0}
button{font:inherit}

/* rail */
.sx-rail{position:fixed;left:0;top:0;bottom:0;width:4.75rem;display:flex;flex-direction:column;align-items:center;padding:1.1rem 0 1rem;z-index:30}
.sx-rail__logo img{width:2rem;height:2rem;border-radius:.5rem;display:block}
.sx-rail__mid{flex:1;display:flex;flex-direction:column;justify-content:center;gap:1.1rem}
body.sx .sx-rail a{color:#b4b4bb;display:grid;place-items:center;width:2.9rem;height:2.9rem;border-radius:.8rem;position:relative;text-decoration:none;transition:color .15s,background .15s}
body.sx .sx-rail a:hover{color:#18181b;background:rgba(0,0,0,.04)}
body.sx .sx-rail a.on{color:#18181b}
.sx-rail__mid a::after{content:attr(data-t);position:absolute;left:calc(100% + .5rem);top:50%;transform:translateY(-50%);background:#fff;color:#18181b;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 4px 12px -4px rgba(0,0,0,.2);font-size:.78rem;padding:.3rem .6rem;border-radius:.5rem;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .12s}
.sx-rail__mid a:hover::after{opacity:1}
.sx-rail__me{height:auto!important;gap:.2rem;font-size:.72rem;color:#71717a!important}
.sx-av{width:2.2rem;height:2.2rem;border-radius:50%;background:#2f6b3a;color:#fff;display:grid;place-items:center;font-size:.95rem;font-weight:600}

/* panel */
.sx-panel{position:relative;margin:.55rem .55rem .55rem 4.75rem;background:#fafafa;border-radius:1.4rem;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 6px 24px -12px rgba(0,0,0,.12);min-height:calc(100vh - 1.1rem);padding:2.2rem clamp(1.2rem,3vw,2.6rem) 8rem}
.sx-h1{font-size:2rem;font-weight:700;letter-spacing:-.02em;text-align:center;margin:.4rem 0 1.8rem}
.sx-h1--l{text-align:left}
.sx-sec{margin-top:2.4rem}
.sx-sec>h2,.sx-row>h2{font-size:1.3rem;font-weight:600;letter-spacing:-.01em;margin-bottom:1rem}
.sx-row>h2 a{text-decoration:none;display:inline-flex;align-items:center;gap:.35rem}
.sx-row>h2 a svg{width:14px}
.sx-muted{color:#71717a}

/* bottom search pill */
.sx-ask{position:fixed;left:calc(50% + 2.375rem);bottom:1.4rem;transform:translateX(-50%);z-index:20;width:min(30rem,calc(100% - 7rem));display:flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-radius:999px;padding:.4rem .4rem .4rem 1.3rem;box-shadow:0 14px 40px -12px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.04)}
.sx-ask input{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:1rem;height:2.6rem;color:#18181b}
.sx-ask button{flex:none;width:2.6rem;height:2.6rem;border-radius:50%;border:0;background:#b48ad8;color:#fff;display:grid;place-items:center;cursor:pointer}
.sx-ask button:hover{background:#a275cc}

/* product cards + rows */
.sx-row{margin-top:2.4rem;position:relative}
.sx-row__s{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(11rem,1fr);gap:1rem;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x mandatory;padding-bottom:.3rem}
.sx-row__s::-webkit-scrollbar{display:none}
.sx-pc{display:block;text-decoration:none;scroll-snap-align:start;min-width:0}
.sx-pc__i{position:relative;aspect-ratio:1;border-radius:1rem;overflow:hidden;background:#f1f1f3;box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.sx-pc__i img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s cubic-bezier(.22,1,.36,1)}
.sx-pc:hover .sx-pc__i img{transform:scale(1.04)}
.sx-pc small{display:block;margin-top:.6rem;font-size:.8rem;color:#52525b}
.sx-pc b{display:block;font-size:.95rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.1rem}
.sx-pc>span{display:block;font-size:.92rem;margin-top:.15rem}
.sx-tag{position:absolute;left:.6rem;top:.6rem;background:#5a31f4;color:#fff;font-size:.72rem;font-weight:600;border-radius:999px;padding:.2rem .55rem}
.sx-tag--dk{background:#18181b}

/* boxes */
.sx-box{background:#fff;border-radius:1.1rem;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 2px 8px -4px rgba(0,0,0,.08)}
.sx-btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;border:0;border-radius:999px;background:#18181b;color:#fff!important;font-weight:600;font-size:.95rem;padding:.75rem 1.3rem;text-decoration:none;cursor:pointer}
.sx-btn:hover{background:#000}
.sx-btn--lt{background:#fff;color:#18181b!important;box-shadow:0 0 0 1px #e4e4e7}
.sx-btn--lt:hover{background:#f4f4f5}
.sx-empty{text-align:center;padding:2.5rem 1rem 1rem}
.sx-empty h2{font-size:1.25rem;font-weight:600;margin-top:1.4rem}
.sx-empty p{color:#52525b;margin:.5rem auto 1.4rem;max-width:26rem}
.sx-toast{position:fixed;left:50%;top:1.2rem;transform:translate(-50%,-150%);background:#18181b;color:#fff;border-radius:999px;padding:.6rem 1.1rem;font-size:.9rem;z-index:90;transition:transform .25s}
.sx-toast.on{transform:translate(-50%,0)}

/* mobile: the rail becomes a bottom tab bar */
@media (max-width:640px){
  .sx-rail{top:auto;bottom:0;right:0;width:auto;height:3.8rem;flex-direction:row;background:#fff;box-shadow:0 -1px 0 #e4e4e7;padding:0 .6rem}
  body.sx .sx-rail .sx-rail__logo,.sx-rail__me span{display:none}
  .sx-rail__mid{flex-direction:row;justify-content:space-around}
  .sx-rail__mid a::after{display:none}
  .sx-panel{margin:0 0 3.8rem;border-radius:0;padding:1.4rem 1rem 9rem}
  .sx-ask{left:50%;bottom:4.6rem;width:calc(100% - 2rem)}
}

/* order cards (Orders + Account) */
.sx-oc{padding:1.1rem 1.2rem 1.15rem;display:block;text-decoration:none;transition:box-shadow .15s,transform .15s}a.sx-oc:hover{box-shadow:0 0 0 1px rgba(0,0,0,.1),0 10px 24px -12px rgba(0,0,0,.22);transform:translateY(-1px)}
.sx-oc+.sx-oc{margin-top:.8rem}
.sx-oc__top{display:flex;align-items:center;gap:.55rem;font-size:.92rem}
.sx-oc__top img,.sx-oc__a{width:1.6rem;height:1.6rem;border-radius:.45rem;object-fit:cover;background:#ece6ff;display:grid;place-items:center;font-size:.75rem;font-weight:600;color:#5a31f4}
.sx-oc__top .sx-muted{margin-left:auto;font-size:.85rem}
.sx-oc h3{font-size:1.15rem;font-weight:700;margin:.55rem 0 .7rem}
.sx-oc__bar{position:relative;height:.42rem;border-radius:999px;background:#ececee;margin-right:1rem}
.sx-oc__bar i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,#a46bff,#5a31f4)}
.sx-oc__bar img{position:absolute;top:50%;width:1.9rem;height:1.9rem;border-radius:.4rem;object-fit:cover;transform:translate(-50%,-50%);box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.2);background:#f1f1f3}
.sx-oc__f{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 1rem;margin-top:.95rem;font-size:.88rem}
.sx-oc__f a{font-weight:600;text-decoration:underline;text-underline-offset:2px}
.sx-oc__f span:first-child{font-weight:500}

/* phone: on a product page the floating "What are you shopping for today?" bar sat over Add to bag and the title, so it
   hides there (search is one tap away in the rail). Kaysi 2026-10-21 */
@media (max-width:640px){body[data-slug] .sx-ask{display:none}}