@charset "utf-8";
/* ==========================================================================
   sg.css — our additions on top of the UI coder's CSS (loaded last).
   Not part of the coder's repo: their files in public/assets/{css,js,images}
   stay untouched so a new pull can be copied over as-is. Only states the
   static design never needed (real errors, disabled buttons, toasts with
   links, install button) belong here — same tokens, same rem scale.
   ========================================================================== */

/* cart toast: icon + text + link (the design toast is text only) */
.sg-cart-toast {
    display: flex;
    align-items: center;
    gap: .08rem;
    /* left:50% + translate(-50%) only leaves HALF the screen for shrink-to-fit, so on a phone the toast wrapped every
       word or two (found 2026-10-15). Size to the content instead, capped at the screen width minus a margin. */
    width: max-content;
    max-width: calc(100vw - .32rem);
    border-radius: .08rem;
    padding: .12rem .16rem;
}
.sg-cart-toast .icon { flex-shrink: 0; color: var(--c-gold); }
.sg-cart-toast a { flex-shrink: 0; color: var(--c-gold); font-weight: 600; text-decoration: underline; text-underline-offset: .04rem; }
.sg-cart-toast.is-error .icon { color: var(--c-coral); }

/* footer: PWA install */
.sg-install { margin-top: .16rem; font-size: .13rem; color: var(--c-on-ink); }
.sg-install_btn {
    padding: .08rem .16rem;
    border: 1px solid var(--c-gold);
    border-radius: 9999px;
    color: var(--c-gold);
    font-weight: 600;
}
.sg-install_btn:hover { background: var(--c-gold); color: var(--c-ink); }

/* disabled add-to-cart (out of stock / limit reached / price coming soon) */
.c-btn-cart:disabled { opacity: .5; cursor: not-allowed; }

/* field error under an input (Laravel validation) */
.sg-error { margin-top: .06rem; font-size: .13rem; color: #B42318; }

/* Facebook "Finish sign-up": the email Facebook gave us is shown but can't be edited */
.c-input[readonly] { background: var(--c-warm); color: var(--c-ink-muted); cursor: default; }
.sg-fb-who { display: flex; align-items: center; gap: .1rem; font-size: .14rem; color: var(--c-ink-muted); }
.sg-fb-who i { font-size: .2rem; color: #1877F2; }
.sg-fb-who strong { color: var(--c-ink); font-weight: 600; }

/* /wholesale gate: "Stella Glow sent you the password — see it on My Page" (only when it was sent, 2026-10-13). */
.sg-ws-sent { display: flex; align-items: center; gap: .06rem; margin-top: .08rem; }
.sg-ws-sent .icon { flex-shrink: 0; }

/* ♡ Favorites (2026-10-13): on product cards (top-right of the photo) and next to Share on the product page. */
.sg-fav { display: inline-flex; align-items: center; justify-content: center; width: .38rem; height: .38rem; border: 0; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--c-ink); cursor: pointer; transition: color var(--dur), transform var(--dur); }
.sg-fav:hover { transform: scale(1.08); }
.sg-fav.is-on { color: #c0392b; }
.sg-fav.is-on .icon path { fill: currentColor; }
.sg-fav-form { display: inline-flex; margin: 0; }
.c-product { position: relative; }
.c-product > .sg-fav-card, .c-product > .sg-fav.sg-fav-card { position: absolute; top: .1rem; right: .1rem; z-index: 2; }
.sg-pd-actions { display: inline-flex; align-items: center; gap: .08rem; }
.sg-fav-pd .sg-fav { background: var(--c-warm); }

/* Unread My Page → Messages (order updates from Admin → Orders, 2026-10-13): dot on the account icon (PC) and a
   "N new messages" row in the drawer (SP, where the account icon is hidden). */
.header_tool--account { position: relative; }
.sg-header-dot { position: absolute; top: 6px; right: 6px; width: 8px; height: 8px; border-radius: 50%; background: #c0392b; box-shadow: 0 0 0 2px #fff; }
.drawer_login.sg-drawer-msgs { margin-top: .08rem; border-color: #c0392b; color: #c0392b; font-size: .12rem; }