/* =====================================================================
   BaliShopping design system — tokens + shared components.
   Loaded by layouts/marketplace, vendor/layout and admin/layout.
   Class prefix: bs-  (the old MarketPro/Bootstrap CSS may still be loaded
   for legacy markup, so every rule here is scoped to bs- classes).
   ===================================================================== */

:root {
    --brand-orange: #FC5409;
    --brand-pink: #FF175D;
    --brand-gradient: linear-gradient(45deg, #FF175D, #FC5409);
    --action: #D63D06;
    --action-hover: #B83300;
    --sale: #E0124F;
    --ink: #1C1714;
    --ink-2: #4A423D;
    --muted: #6B625C;
    --muted-2: #7A706A;
    --line: #EFE9E4;
    --line-2: #F0EAE5;
    --input-line: #E6DED8;
    --bg: #F7F5F2;
    --surface: #FFFFFF;
    --tint: #FFF1EA;
    --tint-2: #FFF6F1;
    --tint-line: #F6C9B4;
    --ok: #1E6B36;
    --ok-bg: #E6F5EA;
    --warn: #8A5300;
    --warn-bg: #FFF4DB;
    --err: #B42318;
    --err-bg: #FDECEC;
    --info: #1D4F9E;
    --info-bg: #E8F0FE;
    --radius-input: 12px;
    --radius-card: 16px;
    --radius-hero: 20px;
    --shadow-sm: 0 1px 3px rgba(28, 23, 20, .08);
    --shadow-md: 0 10px 30px rgba(28, 23, 20, .12);
    --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.bs-panel-body { --line: #EBE5E0; --bg: #F4F1EE; }

/* ---------- Base ---------- */
body.bs-body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
.bs-body h1, .bs-body h2, .bs-body h3, .bs-body h4, .bs-body h5 { font-family: var(--font); color: var(--ink); letter-spacing: -0.02em; }
.bs-body a { color: var(--action); }
.bs-body a:hover { color: var(--action-hover); }
.bs-body img { max-width: 100%; }
.bs-body :focus-visible { outline: 3px solid rgba(214, 61, 6, .35); outline-offset: 2px; }
.bs-container { max-width: 1240px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.bs-main { min-height: 50vh; padding-bottom: 56px; }
.bs-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bs-muted { color: var(--muted); }
.bs-ico { display: inline-block; vertical-align: middle; flex: none; }
.bs-nowrap { white-space: nowrap; }

/* ---------- Buttons ---------- */
.bs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 10px; border: 1.5px solid transparent; font: inherit; font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none !important; cursor: pointer; white-space: nowrap; box-sizing: border-box; transition: background .15s, border-color .15s, color .15s; }
.bs-btn--primary { background: var(--action); color: #fff !important; }
.bs-btn--primary:hover { background: var(--action-hover); color: #fff !important; }
.bs-btn--outline { background: #fff; color: var(--ink) !important; border-color: var(--input-line); }
.bs-btn--outline:hover { border-color: var(--ink-2); }
.bs-btn--soft { background: var(--tint-2); color: var(--action-hover) !important; border-color: var(--tint-line); }
.bs-btn--soft:hover { background: var(--tint); }
.bs-btn--ghost { background: transparent; color: var(--ink-2) !important; }
.bs-btn--ghost:hover { background: var(--line-2); }
.bs-btn--danger { background: #fff; color: var(--err) !important; border-color: #F5C2C0; }
.bs-btn--danger:hover { background: var(--err-bg); }
.bs-btn--dark { background: var(--ink); color: #fff !important; }
.bs-btn--block { width: 100%; }
.bs-btn--lg { min-height: 52px; font-size: 15px; padding: 0 24px; border-radius: 12px; }
.bs-btn--sm { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 9px; }
.bs-btn[disabled], .bs-btn.is-disabled { background: #F1EEEB !important; color: var(--muted-2) !important; border-color: #F1EEEB !important; cursor: not-allowed; }
.bs-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--action); cursor: pointer; text-decoration: none; }
.bs-link:hover { color: var(--action-hover); text-decoration: underline; }
.bs-iconbtn { position: relative; width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 12px; color: var(--ink) !important; background: transparent; border: 0; cursor: pointer; text-decoration: none; }
.bs-iconbtn:hover { background: var(--line-2); }

/* ---------- Forms ---------- */
.bs-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.bs-label { font-size: 13px; font-weight: 700; color: var(--ink); }
.bs-label small, .bs-label .opt { font-weight: 500; color: var(--muted); }
.bs-input, .bs-select, .bs-textarea { width: 100%; box-sizing: border-box; min-height: 46px; padding: 10px 14px; border: 1.5px solid var(--input-line); border-radius: var(--radius-input); background: #fff; font: inherit; font-size: 14.5px; color: var(--ink); }
.bs-textarea { min-height: 96px; resize: vertical; }
.bs-input:focus, .bs-select:focus, .bs-textarea:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px rgba(214, 61, 6, .14); }
.bs-help { font-size: 12.5px; color: var(--muted); }
.bs-check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.bs-check input { width: 18px; height: 18px; accent-color: var(--action); margin-top: 1px; flex: none; }
.bs-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }

/* ---------- Cards, page heads, alerts ---------- */
.bs-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-sizing: border-box; }
.bs-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line-2); }
.bs-card__head h2, .bs-card__head h3 { margin: 0; font-size: 17px; font-weight: 800; }
.bs-card__body { padding: 20px; }
.bs-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 28px 0 20px; }
.bs-pagehead h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
.bs-pagehead p { margin: 4px 0 0; color: var(--muted); }
.bs-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); margin: 20px 0 0; }
.bs-crumbs a { color: var(--muted); text-decoration: none; }
.bs-crumbs a:hover { color: var(--action); }
.bs-alert { padding: 12px 16px; border-radius: 12px; font-size: 14px; margin: 0 0 16px; border: 1px solid transparent; }
.bs-alert ul { margin: 0; padding-left: 18px; }
.bs-alert--ok { background: var(--ok-bg); color: var(--ok); border-color: #C6E7CF; }
.bs-alert--err { background: var(--err-bg); color: var(--err); border-color: #F5C2C0; }
.bs-alert--info { background: var(--info-bg); color: var(--info); border-color: #CFDDF7; }
.bs-alert--warn { background: var(--warn-bg); color: var(--warn); border-color: #F5DFA6; }
.bs-empty { text-align: center; padding: 48px 20px; color: var(--muted); }
.bs-empty__ico { width: 64px; height: 64px; margin: 0 auto 14px; border-radius: 18px; background: var(--tint); color: var(--action); display: grid; place-items: center; }
.bs-empty h3 { margin: 0 0 6px; font-size: 18px; font-weight: 800; color: var(--ink); }
.bs-empty p { margin: 0 0 16px; }

/* ---------- Status pills & counters ---------- */
.bs-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap; background: #F1EEEB; color: #4A423D; }
.bs-pill--pending { background: #F1EEEB; color: #4A423D; }
.bs-pill--unpaid, .bs-pill--warn { background: #FFF4DB; color: #8A5300; }
.bs-pill--processing, .bs-pill--info { background: #E8F0FE; color: #1D4F9E; }
.bs-pill--shipped { background: #EEECFD; color: #4338CA; }
.bs-pill--delivered { background: #E3F6F4; color: #0B6B63; }
.bs-pill--completed, .bs-pill--paid, .bs-pill--ok { background: #E6F5EA; color: #1E6B36; }
.bs-pill--cancelled, .bs-pill--failed, .bs-pill--err { background: #FDECEC; color: #B42318; }
.bs-pill--brand { background: var(--tint); color: var(--action-hover); }
.bs-count { min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: var(--sale); color: #fff; font-size: 11px; font-weight: 800; display: inline-grid; place-items: center; line-height: 1; }
.bs-iconbtn .bs-count { position: absolute; top: 4px; right: 2px; border: 2px solid #fff; }

/* ---------- Store header ---------- */
.bs-header { background: #fff; position: relative; z-index: 50; }
.bs-topbar { background: var(--ink); color: #EDE6E1; font-size: 12.5px; }
.bs-topbar__in { min-height: 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; }
.bs-topbar nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.bs-topbar a { color: #EDE6E1 !important; text-decoration: none; }
.bs-topbar a:hover { color: #fff !important; text-decoration: underline; }
.bs-topbar__right { display: flex; align-items: center; gap: 18px; }
.bs-lang { display: flex; align-items: center; gap: 6px; }
.bs-lang a.is-on { color: #fff !important; font-weight: 700; }
.bs-lang span { opacity: .4; }
.bs-user { position: relative; }
.bs-user__btn { all: unset; cursor: pointer; display: flex; align-items: center; gap: 6px; color: #fff; font-weight: 600; min-height: 36px; }
.bs-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); width: 270px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-md); padding: 8px; z-index: 80; font-size: 14px; }
.bs-user.open .bs-menu { display: block; }
.bs-menu__head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line-2); margin-bottom: 6px; display: flex; flex-direction: column; }
.bs-menu__head strong { font-size: 14.5px; }
.bs-menu__head span { font-size: 12px; color: var(--muted); }
.bs-menu a, .bs-menu button { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; min-height: 40px; padding: 0 10px; border-radius: 9px; color: #3A332E !important; text-decoration: none !important; font: inherit; font-size: 14px; font-weight: 600; background: none; border: 0; cursor: pointer; text-align: left; }
.bs-menu a:hover, .bs-menu button:hover { background: var(--tint-2); color: var(--action-hover) !important; }
.bs-menu .bs-count { margin-left: auto; }
.bs-menu__sep { height: 1px; background: var(--line-2); margin: 6px 0; }
.bs-menu__status { margin-left: auto; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.bs-menu__status.amber { background: var(--warn-bg); color: var(--warn); }
.bs-menu__status.red { background: var(--err-bg); color: var(--err); }
.bs-menu__status.cta { background: var(--tint); color: var(--action-hover); }
.bs-header__main { padding: 16px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.bs-logo { display: flex; align-items: center; gap: 10px; text-decoration: none !important; color: var(--ink) !important; }
.bs-logo img { width: 40px; height: 41px; }
.bs-logo__txt { font-size: 22px; font-weight: 800; letter-spacing: -0.03em; }
.bs-logo__txt b { color: var(--action); font-weight: 800; }
.bs-search { flex: 1 1 380px; display: flex; align-items: stretch; height: 46px; border: 1.5px solid var(--input-line); border-radius: 12px; overflow: hidden; background: #fff; margin: 0; }
.bs-search:focus-within { border-color: var(--action); box-shadow: 0 0 0 3px rgba(214, 61, 6, .14); }
.bs-search__ico { display: flex; align-items: center; padding: 0 0 0 14px; color: var(--muted); }
.bs-search input { flex: 1; min-width: 0; border: 0; outline: none; padding: 0 12px; font: inherit; font-size: 14px; color: var(--ink); background: transparent; }
.bs-search button { border: 0; background: var(--action); color: #fff; font: inherit; font-weight: 700; font-size: 14px; padding: 0 22px; cursor: pointer; }
.bs-search button:hover { background: var(--action-hover); }
.bs-actions { display: flex; align-items: center; gap: 6px; }
.bs-avatar { width: 40px; height: 40px; border-radius: 999px; background: var(--ink); color: #fff !important; display: grid; place-items: center; font-weight: 800; text-decoration: none !important; font-size: 15px; overflow: hidden; flex: none; }
.bs-avatar img { width: 100%; height: 100%; object-fit: cover; }
.bs-catbar { border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); background: #fff; }
.bs-catbar nav { min-height: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 26px; font-size: 14px; font-weight: 600; }
.bs-catbar a { color: #4A423D !important; text-decoration: none; padding: 12px 0; }
.bs-catbar a:hover, .bs-catbar a.is-on { color: var(--action) !important; }
.bs-catbar a.bs-catbar__all { display: flex; align-items: center; gap: 8px; color: var(--ink) !important; }
.bs-catbar__help { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 500; font-size: 13px; }
.bs-catbar__help a { font-weight: 700; color: var(--action) !important; padding: 0; }

/* Dompet Gofee chip */
.gw-hdr { position: relative; margin-right: 8px; }
.bs-wallet { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--tint); min-height: 44px; text-decoration: none !important; }
.bs-wallet:hover { background: #FFE6D8; }
.bs-wallet__g { width: 30px; height: 30px; border-radius: 999px; background: var(--brand-gradient); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; flex: none; }
.bs-wallet__txt { display: flex; flex-direction: column; line-height: 1.15; }
.bs-wallet__txt small { font-size: 11px; color: var(--muted); font-weight: 600; }
.bs-wallet__txt strong { font-size: 14px; font-weight: 800; color: var(--ink); }
.bs-wallet.warn { background: var(--warn-bg); }
.bs-wallet.warn strong { color: var(--warn); }
.gw-hdr.gw-loading .bs-wallet__txt strong { opacity: .55; }
.bs-wallet-dd { display: none; position: absolute; right: 0; top: calc(100% + 8px); width: 290px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-md); overflow: hidden; z-index: 80; }
.gw-hdr.open .bs-wallet-dd { display: block; }
.bs-wallet-dd__card { background: var(--brand-gradient); color: #fff; padding: 16px 18px; }
.bs-wallet-dd__top { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 700; opacity: .95; }
.bs-wallet-dd__eye { all: unset; cursor: pointer; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; color: #fff; }
.bs-wallet-dd__eye:hover { background: rgba(255, 255, 255, .18); }
.bs-wallet-dd__bal { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin-top: 4px; }
.bs-wallet-dd__who { font-size: 12px; opacity: .9; margin-top: 2px; }
.bs-wallet-dd__links { padding: 8px; }
.bs-wallet-dd__links a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 9px; font-weight: 700; font-size: 14px; color: var(--ink) !important; text-decoration: none !important; }
.bs-wallet-dd__links a:hover { background: var(--tint-2); }
.bs-wallet-dd__tip { padding: 0 18px 14px; font-size: 12.5px; color: var(--muted); }

/* ---------- Store footer ---------- */
.bs-footer, #footer.bs-footer { background: var(--ink); color: #D9CFC8; font-size: 14px; }
.bs-footer a { color: #D9CFC8 !important; text-decoration: none; }
.bs-footer a:hover { color: #fff !important; }
.bs-footer__stripe { height: 4px; background: linear-gradient(90deg, #FF175D, #FC5409); }
.bs-footer__grid { padding: 56px 24px 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 40px; }
.bs-footer__brand { display: flex; align-items: center; gap: 10px; }
.bs-footer__brand img { width: 36px; height: 37px; }
.bs-footer__brand span { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -0.03em; }
.bs-footer p { margin: 0; line-height: 1.6; max-width: 280px; }
.bs-footer h3 { margin: 0 0 16px; font-size: 14px; color: #fff; letter-spacing: .02em; font-weight: 800; }
.bs-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bs-footer__contact { gap: 8px !important; font-size: 13.5px; }
.bs-footer__social { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-footer__social a { width: 36px; height: 36px; border-radius: 10px; background: #2E2622; display: grid; place-items: center; }
.bs-footer__social a:hover { background: var(--action); }
.bs-footer__pays { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bs-footer__pays span { height: 34px; border-radius: 8px; background: #fff; color: var(--ink); font-size: 11.5px; font-weight: 800; display: grid; place-items: center; }
.bs-footer__bottom { border-top: 1px solid #2E2622; }
.bs-footer__bottom > div { padding: 18px 24px; font-size: 13px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }

/* ---------- Sections & product grid ---------- */
.bs-section { margin: 40px 0 0; }
.bs-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.bs-section__head h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.bs-section__head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.bs-section__more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 14px; text-decoration: none; }
.bs-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.bs-products--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bs-products--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ---------- Product card ---------- */
.bs-pcard { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; height: 100%; box-sizing: border-box; transition: box-shadow .15s, transform .15s; }
.bs-pcard:hover { box-shadow: 0 8px 22px rgba(28, 23, 20, .08); }
.bs-pcard__media { position: relative; aspect-ratio: 1 / 1; background: #FBF3EE; display: grid; place-items: center; }
.bs-pcard__media > a { position: absolute; inset: 0; display: grid; place-items: center; }
.bs-pcard__media img { width: 100%; height: 100%; object-fit: cover; }
.bs-pcard__noimg { display: grid; place-items: center; gap: 6px; color: rgba(28, 23, 20, .3); font-size: 12px; font-weight: 600; text-align: center; }
.bs-pcard__badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 6px; z-index: 2; pointer-events: none; }
.bs-badge-sale { background: var(--sale); color: #fff; font-size: 12px; font-weight: 800; padding: 4px 8px; border-radius: 8px; }
.bs-badge-out { background: var(--ink-2); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 8px; border-radius: 8px; }
.bs-pcard__wish { position: absolute; top: 8px; right: 8px; z-index: 2; margin: 0; }
.bs-heart { width: 40px; height: 40px; border-radius: 999px; border: 0; background: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-sm); color: var(--ink-2) !important; text-decoration: none; }
.bs-heart:hover { color: var(--sale) !important; }
.bs-heart.is-on { color: var(--sale) !important; }
.bs-heart.is-on svg { fill: var(--sale); }
.bs-pcard__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.bs-pcard__title { font-size: 14px; font-weight: 600; line-height: 1.4; text-decoration: none; color: var(--ink) !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 39px; }
.bs-pcard__title:hover { color: var(--action) !important; }
.bs-pcard__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bs-pcard__price strong { font-size: 16px; font-weight: 800; }
.bs-pcard__price del { font-size: 12px; color: var(--muted-2); }
.bs-pcard__meta { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: var(--muted); }
.bs-pcard__meta b { color: var(--ink); }
.bs-pcard__shop { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted) !important; text-decoration: none; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bs-pcard__shop:hover { color: var(--action) !important; }
.bs-pcard__cta { margin-top: auto; padding-top: 6px; }
.bs-pcard__cta form { margin: 0; }
.bs-pcard__btn { width: 100%; min-height: 40px; border-radius: 10px; border: 1.5px solid var(--tint-line); background: var(--tint-2); color: var(--action-hover) !important; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none !important; box-sizing: border-box; }
.bs-pcard__btn:hover { background: var(--tint); }
.bs-pcard__btn[disabled] { border-color: var(--line); background: var(--bg); color: var(--muted-2) !important; cursor: not-allowed; }
.bs-stars { position: relative; display: inline-block; font-size: 13px; line-height: 1; letter-spacing: 1px; color: #E6DED8; }
.bs-stars i { position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap; color: #F5A524; font-style: normal; }

/* ---------- Checkout stepper ---------- */
.bs-steps { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 14px 18px; margin: 0 0 20px; }
.bs-steps ol { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 8px; }
.bs-steps li { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.bs-steps li:last-child { flex: 0 0 auto; }
.bs-step { all: unset; display: flex; align-items: center; gap: 10px; white-space: nowrap; padding: 4px 2px; border-radius: 8px; color: var(--muted); font-size: 14px; font-weight: 600; }
a.bs-step, .bs-step[data-go] { cursor: pointer; }
.bs-step__dot { width: 30px; height: 30px; flex: none; border-radius: 999px; display: grid; place-items: center; font-size: 13px; font-weight: 800; background: #F1EEEB; color: var(--muted); }
.bs-steps li.done .bs-step__dot { background: var(--ok); color: #fff; }
.bs-steps li.done .bs-step { color: var(--ink); }
.bs-steps li.current .bs-step__dot { background: var(--action); color: #fff; box-shadow: 0 0 0 4px var(--tint); }
.bs-steps li.current .bs-step { color: var(--ink); font-weight: 800; }
.bs-steps__line { flex: 1; min-width: 16px; height: 2px; border-radius: 2px; background: var(--line); }
.bs-steps li.done .bs-steps__line { background: var(--ok); }
.bs-steps a.bs-step:hover .bs-step__dot, .bs-steps li.done .bs-step[data-go]:hover .bs-step__dot { transform: scale(1.06); }

/* ---------- Account layout & nav ---------- */
.bs-account { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 28px; }
.bs-accnav { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }
.bs-accnav__me { display: flex; align-items: center; gap: 12px; padding: 4px 6px 12px; border-bottom: 1px solid var(--line-2); }
.bs-accnav__me .bs-avatar { width: 44px; height: 44px; }
.bs-accnav__me strong { display: block; font-size: 15px; }
.bs-accnav__me span { font-size: 12.5px; color: var(--muted); }
.bs-accnav__group { display: flex; flex-direction: column; gap: 2px; }
.bs-accnav__group > span { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-2); padding: 0 10px 6px; }
.bs-accnav__group a { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 10px; border-radius: 10px; text-decoration: none !important; font-size: 14px; font-weight: 600; color: #3A332E !important; }
.bs-accnav__group a::before { content: ''; width: 6px; height: 6px; border-radius: 999px; background: transparent; flex: none; }
.bs-accnav__group a:hover { background: var(--tint-2); }
.bs-accnav__group a[aria-current="page"] { background: var(--tint); color: var(--action-hover) !important; font-weight: 800; }
.bs-accnav__group a[aria-current="page"]::before { background: var(--action); }
.bs-accnav__group a span { flex: 1; }
.bs-accnav__seller { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; background: var(--ink); color: #fff !important; text-decoration: none !important; }
.bs-accnav__seller strong { font-size: 14px; }
.bs-accnav__seller span { font-size: 12.5px; color: #FF8A5C; font-weight: 700; }
.bs-accnav__out { width: 100%; min-height: 42px; border-radius: 10px; border: 1px solid var(--line); background: #fff; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.bs-accnav__out:hover { border-color: var(--input-line); background: var(--bg); }

/* ---------- Flash toast ---------- */
.mp-toasts { position: fixed; top: 92px; right: 16px; left: 16px; z-index: 1080; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; pointer-events: none; }
.mp-toast { pointer-events: auto; max-width: 420px; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 16px; border-radius: 12px; background: #fff; box-shadow: var(--shadow-md); border: 1px solid var(--line); border-left: 4px solid var(--ok); font-family: var(--font); font-size: 14px; color: var(--ink); transition: opacity .3s ease; }
.mp-toast-error { border-left-color: var(--err); }
.mp-toast a { font-weight: 700; color: var(--action); white-space: nowrap; }
.mp-toast button { border: 0; background: none; font-size: 20px; line-height: 1; color: var(--muted); padding: 0 4px; margin-left: auto; min-width: 32px; min-height: 32px; cursor: pointer; }

/* ---------- Pagination (Bootstrap 5 markup from Laravel) ---------- */
.bs-body .pagination { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 24px 0 0; justify-content: center; }
.bs-body .page-link { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; box-sizing: border-box; border-radius: 10px; border: 1.5px solid var(--input-line); background: #fff; color: var(--ink) !important; font-weight: 700; font-size: 14px; text-decoration: none; }
.bs-body .page-item.active .page-link { background: var(--action); border-color: var(--action); color: #fff !important; }
.bs-body .page-item.disabled .page-link { opacity: .45; }
.bs-body nav .small.text-muted, .bs-body nav p.small { color: var(--muted); font-size: 13px; text-align: center; margin: 12px 0 0; }
.bs-body nav .d-sm-none { display: none !important; }
.bs-body nav .d-none.flex-sm-fill { display: block !important; }

/* ---------- Mobile bottom tab bar ---------- */
.bs-tabbar { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .bs-products--5 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .bs-account { grid-template-columns: 1fr; }
    .bs-accnav { position: static; }
}
@media (max-width: 860px) {
    .bs-products--4, .bs-products--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    body.bs-body { padding-bottom: 68px; }
    .bs-container { padding: 0 16px; }
    .bs-topbar nav { display: none; }
    .bs-topbar__in { justify-content: flex-end; }
    .bs-header__main { padding: 12px 16px; gap: 12px; }
    .bs-logo__txt { font-size: 19px; }
    .bs-logo img { width: 34px; height: 35px; }
    .bs-search { order: 3; flex: 1 1 100%; height: 44px; }
    .bs-search button { padding: 0 16px; }
    .bs-actions { margin-left: auto; }
    .bs-actions .bs-hide-sm { display: none !important; }
    .bs-wallet__txt small { display: none; }
    .bs-wallet { padding-right: 10px; }
    .bs-catbar nav { flex-wrap: nowrap; overflow-x: auto; gap: 22px; scrollbar-width: none; }
    .bs-catbar nav::-webkit-scrollbar { display: none; }
    .bs-catbar a { white-space: nowrap; }
    .bs-catbar__help { display: none; }
    .bs-products, .bs-products--4, .bs-products--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .bs-pcard__body { padding: 10px 10px 12px; }
    .bs-pagehead h1 { font-size: 23px; }
    .bs-grid-2 { grid-template-columns: 1fr; }
    .bs-steps { padding: 10px 12px; overflow-x: auto; }
    .bs-steps .bs-step__lbl { display: none; }
    .bs-steps li.current .bs-step__lbl { display: inline; }
    .bs-footer__grid { padding: 40px 16px 24px; gap: 28px; }
    .mp-toasts { top: 16px; }
    .bs-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: #fff; border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(28, 23, 20, .06); }
    .bs-tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; font-size: 11px; font-weight: 700; color: var(--muted) !important; text-decoration: none !important; }
    .bs-tabbar a.is-on { color: var(--action) !important; }
    .bs-tabbar .bs-count { position: absolute; top: 2px; left: calc(50% + 6px); border: 2px solid #fff; }
}
.bs-footer__social .soc-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Home ---------- */
.bs-home { padding-top: 24px; }
.bs-hero-row { display: flex; flex-wrap: wrap; gap: 16px; }
.bs-hero { flex: 2 1 560px; position: relative; overflow: hidden; border-radius: var(--radius-hero); min-height: 380px; background: #2A120E; color: #fff; }
.bs-hero__slide { position: absolute; inset: 0; display: none; align-items: flex-end; background-size: cover; background-position: center; }
.bs-hero__slide.active { display: flex; }
.bs-hero__shade { position: absolute; inset: 0; background: linear-gradient(120deg, rgba(199, 15, 69, .92) 0%, rgba(214, 61, 6, .86) 70%); }
.bs-hero__slide[style*="background-image"] .bs-hero__shade { background: linear-gradient(110deg, rgba(150, 10, 52, .9) 0%, rgba(214, 61, 6, .72) 55%, rgba(28, 23, 20, .1) 100%); }
.bs-hero__mark { position: absolute; right: -40px; bottom: -60px; width: 420px; height: 430px; opacity: .14; filter: brightness(0) invert(1); pointer-events: none; }
.bs-hero__body { position: relative; padding: 44px 44px 64px; display: flex; flex-direction: column; gap: 16px; max-width: 540px; }
.bs-hero__tag { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: rgba(255, 255, 255, .16); padding: 6px 12px; border-radius: 999px; }
.bs-hero h1 { margin: 0; font-size: 44px; line-height: 1.08; font-weight: 800; letter-spacing: -0.03em; color: #fff; }
.bs-hero p { margin: 0; font-size: 16px; line-height: 1.6; color: #FFE7DC; }
.bs-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.bs-hero__btn { background: #fff; color: var(--action-hover) !important; font-weight: 800; font-size: 15px; padding: 0 22px; min-height: 48px; display: inline-flex; align-items: center; border-radius: 12px; text-decoration: none !important; }
.bs-hero__btn:hover { background: #FFF1EA; }
.bs-hero__dots { position: absolute; left: 44px; bottom: 28px; display: flex; gap: 8px; z-index: 2; }
.bs-hero__dots button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .45); cursor: pointer; transition: width .2s; }
.bs-hero__dots button.active { width: 28px; background: #fff; }
.bs-hero-side { flex: 1 1 300px; display: grid; grid-template-rows: 1fr 1fr; gap: 16px; }
.bs-promo { border-radius: var(--radius-hero); background: #fff; border: 1px solid var(--line); padding: 24px; text-decoration: none !important; color: var(--ink) !important; display: flex; flex-direction: column; justify-content: space-between; gap: 12px; }
.bs-promo:hover { box-shadow: 0 8px 22px rgba(28, 23, 20, .08); }
.bs-promo--dark { background: var(--ink); border-color: var(--ink); color: #fff !important; }
.bs-promo__ico { width: 44px; height: 44px; border-radius: 12px; background: #2E2622; color: var(--brand-orange); display: grid; place-items: center; }
.bs-promo__ico--g { background: var(--brand-gradient); color: #fff; font-weight: 800; font-size: 20px; }
.bs-promo__txt { display: flex; flex-direction: column; gap: 4px; }
.bs-promo__txt strong { font-size: 18px; letter-spacing: -0.01em; }
.bs-promo__txt span { font-size: 14px; color: var(--muted); }
.bs-promo--dark .bs-promo__txt span { color: #D9CFC8; }
.bs-promo__more { font-size: 14px; font-weight: 700; color: var(--action); }
.bs-promo--dark .bs-promo__more { color: #FF8A5C; }
.bs-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-top: 24px; }
.bs-perk { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.bs-perk__n { width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--tint); color: var(--action); display: grid; place-items: center; font-weight: 800; font-size: 14px; }
.bs-perk > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.bs-perk strong { font-size: 14px; }
.bs-perk span span { font-size: 12.5px; color: var(--muted); }
.bs-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 12px; }
.bs-cat { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-decoration: none !important; color: var(--ink) !important; text-align: center; }
.bs-cat:hover { border-color: var(--tint-line); box-shadow: 0 6px 18px rgba(28, 23, 20, .06); }
.bs-cat__ico { width: 64px; height: 64px; border-radius: 999px; display: grid; place-items: center; font-size: 22px; font-weight: 800; }
.bs-cat__name { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.bs-deals { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-hero); padding: 24px; }
.bs-deals__tag { background: var(--sale); color: #fff; font-weight: 800; font-size: 13px; padding: 6px 10px; border-radius: 8px; }
.bs-banners { display: flex; flex-wrap: wrap; gap: 16px; }
.bs-banner { min-height: 180px; border-radius: var(--radius-hero); overflow: hidden; background: #F3E3C7; display: block; }
.bs-banner img { width: 100%; height: 100%; max-height: 260px; object-fit: cover; display: block; }
.bs-ad { border: 1.5px dashed #DCD2CB; border-radius: 14px; min-height: 90px; display: grid; place-items: center; overflow: hidden; }
@media (max-width: 767px) {
    .bs-home { padding-top: 14px; }
    .bs-hero { min-height: 320px; flex-basis: 100%; }
    .bs-hero h1 { font-size: 28px; }
    .bs-hero p { font-size: 14.5px; }
    .bs-hero__body { padding: 24px 22px 52px; }
    .bs-hero__dots { left: 22px; bottom: 22px; }
    .bs-hero__mark { width: 260px; height: 266px; }
    .bs-hero-side { grid-template-rows: none; grid-template-columns: 1fr; }
    .bs-perks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .bs-perk { padding: 12px; align-items: flex-start; }
    .bs-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .bs-cat { padding: 12px 6px; border-radius: 14px; }
    .bs-cat__ico { width: 48px; height: 48px; font-size: 17px; }
    .bs-cat__name { font-size: 12px; }
    .bs-deals { padding: 16px; }
    .bs-section__head h2 { font-size: 19px; }
}

/* ---------- Listing ---------- */
.bs-listing { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.bs-filter { flex: 1 1 260px; max-width: 300px; background: #fff; border: 1px solid var(--line); border-radius: 16px; position: sticky; top: 16px; }
.bs-filter__sum { display: none; }
.bs-filter__form { padding: 20px; display: flex; flex-direction: column; gap: 22px; margin: 0; }
.bs-filter__head { display: flex; align-items: center; justify-content: space-between; }
.bs-filter__head h2 { margin: 0; font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.bs-filter__head a { font-size: 13px; font-weight: 700; text-decoration: none; }
.bs-filter fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bs-filter legend { font-size: 12.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 10px; padding: 0; }
.bs-radio { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 10px; font-size: 14px; cursor: pointer; margin: 0; font-weight: 500; }
.bs-radio:hover { background: var(--bg); }
.bs-radio.is-on { background: var(--tint); font-weight: 700; }
.bs-radio input { accent-color: var(--action); width: 16px; height: 16px; margin: 0; }
.bs-price { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.bs-price label { flex: 1; display: flex; align-items: center; gap: 6px; border: 1.5px solid var(--input-line); border-radius: 10px; padding: 0 10px; height: 44px; font-size: 13px; color: var(--muted); margin: 0; min-width: 0; }
.bs-price label:focus-within { border-color: var(--action); }
.bs-price input { width: 100%; min-width: 0; border: 0; outline: none; font: inherit; font-size: 14px; color: var(--ink); background: transparent; -moz-appearance: textfield; }
.bs-price input::-webkit-outer-spin-button, .bs-price input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bs-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.bs-chip { font-size: 12.5px; font-weight: 600; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--input-line); background: #fff; color: var(--ink) !important; text-decoration: none !important; }
.bs-chip:hover { border-color: var(--ink-2); }
.bs-chip.is-on { border: 1.5px solid var(--action); background: var(--tint); color: var(--action-hover) !important; }
.bs-results { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.bs-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px 10px 16px; }
.bs-toolbar__chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bs-fchip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 4px 5px 4px 12px; }
.bs-fchip a { width: 24px; height: 24px; border-radius: 999px; background: #EAE3DD; color: var(--ink) !important; display: grid; place-items: center; }
.bs-fchip a:hover { background: var(--input-line); }
.bs-sort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: 0; }
.bs-sort .bs-select { width: auto; min-height: 40px; font-weight: 700; padding: 0 34px 0 12px; }
@media (max-width: 767px) {
    .bs-filter { max-width: none; flex-basis: 100%; position: static; }
    .bs-filter__sum { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; font-weight: 800; cursor: pointer; list-style: none; }
    .bs-filter__sum::-webkit-details-marker { display: none; }
    .bs-filter__sum .bs-count { margin-left: 4px; }
    .bs-filter[open] .bs-filter__sum { border-bottom: 1px solid var(--line-2); }
    .bs-filter__head h2 { display: none; }
    .bs-filter__form { padding: 16px; }
    .bs-toolbar { padding: 10px 12px; }
    .bs-sort { width: 100%; justify-content: space-between; }
}

/* ---------- Product detail ---------- */
.bs-pd__main { display: flex; flex-wrap: wrap; gap: 32px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-hero); padding: 24px; margin-top: 16px; }
.bs-pd__gallery { flex: 1 1 420px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bs-pd__image { position: relative; aspect-ratio: 1 / 1; border-radius: 16px; background: #FBF3EE; overflow: hidden; }
.bs-pd__image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-pd__off { position: absolute; top: 14px; left: 14px; font-size: 13px; padding: 5px 10px; }
.bs-pd__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.bs-pd__thumb { aspect-ratio: 1 / 1; border-radius: 12px; border: 1.5px solid var(--line); padding: 0; overflow: hidden; background: #FBF3EE; cursor: pointer; }
.bs-pd__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-pd__thumb.active { border: 2px solid var(--action); }
.bs-pd__info { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.bs-pd__titleblock { display: flex; flex-direction: column; gap: 8px; }
.bs-pd h1 { margin: 0; font-size: 28px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; }
.bs-pd__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 14px; color: var(--muted); }
.bs-pd__meta a { font-weight: 700; text-decoration: none; }
.bs-pd__rating { display: inline-flex; align-items: center; gap: 4px; color: var(--muted) !important; font-weight: 500 !important; }
.bs-pd__rating strong { color: var(--ink); }
.bs-pd__short { margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.6; }
.bs-pd__pricebox { background: var(--tint-2); border-radius: 14px; padding: 16px 18px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.bs-pd__price { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; }
.bs-pd__pricebox del { font-size: 15px; color: var(--muted-2); }
.bs-pd__coupons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bs-pd__coupons > span:first-child { font-size: 13px; font-weight: 700; color: var(--muted); margin-right: 4px; }
.bs-coupon { font-size: 13px; font-weight: 800; color: var(--action-hover); border: 1.5px dashed #F2A98A; background: #fff; border-radius: 8px; padding: 6px 10px; }
.bs-pd__variants { border: 0; margin: 0; padding: 0; min-width: 0; }
.bs-pd__variants legend { font-size: 14px; font-weight: 800; margin-bottom: 10px; padding: 0; }
.bs-pd__variants legend span { font-weight: 500; color: var(--muted); }
.bs-pd__vopts { display: flex; flex-wrap: wrap; gap: 8px; }
.bs-vopt { min-width: 108px; min-height: 54px; padding: 6px 14px; border-radius: 12px; border: 1.5px solid var(--input-line); background: #fff; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.bs-vopt small { font-size: 11.5px; font-weight: 500; color: var(--muted); }
.bs-vopt:hover { border-color: var(--ink-2); }
.bs-vopt.is-on { border: 2px solid var(--action); background: var(--tint); color: var(--action-hover); }
.bs-vopt[disabled] { opacity: .45; text-decoration: line-through; cursor: not-allowed; background: var(--bg); }
.bs-pd__sku { margin: 0; color: var(--muted); font-size: 14px; }
.bs-pd__qty { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.bs-pd__qty > span { font-size: 14px; font-weight: 800; }
.bs-stepper { display: inline-flex; align-items: center; border: 1.5px solid var(--input-line); border-radius: 12px; overflow: hidden; background: #fff; }
.bs-stepper button { width: 44px; height: 44px; border: 0; background: #fff; font-size: 20px; cursor: pointer; color: var(--ink); }
.bs-stepper button:hover:not(:disabled) { background: var(--bg); }
.bs-stepper button:disabled { color: #CFC6C0; cursor: not-allowed; }
.bs-stepper input, .bs-stepper span { width: 48px; height: 44px; border: 0; text-align: center; font: inherit; font-weight: 800; font-size: 15px; color: var(--ink); background: transparent; -moz-appearance: textfield; display: grid; place-items: center; }
.bs-stepper input::-webkit-outer-spin-button, .bs-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bs-pd__actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.bs-pd__cart { flex: 1 1 240px; min-height: 54px; border-radius: 14px; font-size: 16px; font-weight: 800; }
.bs-pd__iconbtn { width: 54px; height: 54px; border-radius: 14px; border: 1.5px solid var(--input-line); background: #fff; display: grid; place-items: center; cursor: pointer; color: var(--ink-2) !important; flex: none; }
.bs-pd__iconbtn:hover, .bs-pd__iconbtn.is-on { color: var(--sale) !important; border-color: #F5B8C9; }
.bs-pd__chatbtn { min-height: 54px; padding: 0 18px; border-radius: 14px; border: 1.5px solid var(--input-line); background: #fff; display: flex; align-items: center; gap: 8px; color: var(--ink); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.bs-pd__chatbtn:hover { border-color: var(--ink-2); }
.bs-pd__notes { border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; }
.bs-pd__notes > div { display: flex; gap: 12px; padding: 14px 16px; font-size: 14px; color: var(--ink); }
.bs-pd__notes > div + div { border-top: 1px solid var(--line); }
.bs-pd__notes .bs-ico { color: var(--action); margin-top: 2px; }
.bs-shopcard { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 18px 22px; margin-top: 24px; }
.bs-shopcard__av { width: 56px; height: 56px; font-size: 19px; }
.bs-shopcard__txt { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.bs-shopcard__name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 800; font-size: 17px; }
.bs-shopcard__stats { display: flex; gap: 28px; font-size: 13px; color: var(--muted); }
.bs-shopcard__stats span { display: flex; flex-direction: column; }
.bs-shopcard__stats strong { font-size: 17px; color: var(--ink); }
.bs-pd__lower { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; margin-top: 24px; }
.bs-pd__desc { flex: 999 1 560px; min-width: 0; padding: 24px; }
.bs-pd__desc h2, .bs-pd__reviews h2 { margin: 0 0 14px; font-size: 20px; font-weight: 800; }
.bs-prose { font-size: 15px; line-height: 1.75; color: #3A332E; overflow-wrap: anywhere; }
.bs-prose img { border-radius: 12px; height: auto; }
.bs-prose p { margin: 0 0 10px; }
.bs-pd__reviews { flex: 1 1 380px; min-width: 0; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.bs-pd__reviews h2 { margin: 0; }
.bs-rv-sum { display: flex; align-items: center; gap: 20px; }
.bs-rv-sum__avg { display: flex; flex-direction: column; align-items: center; }
.bs-rv-sum__avg strong { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.bs-rv-sum__avg small { font-size: 12px; color: var(--muted); }
.bs-rv-stars { color: #F5A524; font-size: 14px; letter-spacing: 2px; }
.bs-rv-sum__bars { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.bs-rv-sum__bars div { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.bs-rv-sum__bars span:first-child { width: 10px; }
.bs-rv-sum__bars .bar { flex: 1; height: 6px; border-radius: 999px; background: var(--line-2); overflow: hidden; }
.bs-rv-sum__bars .bar i { display: block; height: 100%; background: #F5A524; border-radius: 999px; }
.bs-rv-form { border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: #FCFBFA; margin: 0; }
.bs-rv-form fieldset { border: 0; margin: 0; padding: 0; }
.bs-rv-form legend { font-size: 14px; font-weight: 800; margin-bottom: 6px; padding: 0; }
.bs-rv-form .bs-btn { align-self: flex-start; }
.rv-stars { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.rv-stars label { cursor: pointer; width: 38px; height: 38px; display: grid; place-items: center; color: #E6DED8; font-size: 26px; margin: 0; position: relative; }
.rv-stars input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rv-stars label:hover, .rv-stars label:hover ~ label, .rv-stars label:has(input:checked), .rv-stars label:has(input:checked) ~ label { color: #F5A524; }
.rv-stars input:focus-visible + span { outline: 3px solid rgba(214, 61, 6, .35); border-radius: 6px; }
.bs-rv { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line-2); }
.bs-rv__head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bs-rv__av { width: 32px; height: 32px; border-radius: 999px; background: var(--line-2); display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.bs-rv__head strong { font-size: 14px; }
.bs-rv__head small { margin-left: auto; font-size: 12px; color: var(--muted-2); }
.bs-rv p { margin: 0; font-size: 14px; line-height: 1.6; color: #3A332E; }
@media (max-width: 767px) {
    .bs-pd__main { padding: 0; border: 0; background: transparent; gap: 18px; }
    .bs-pd__gallery { flex-basis: 100%; }
    .bs-pd h1 { font-size: 21px; }
    .bs-pd__price { font-size: 27px; }
    .bs-pd__info { flex-basis: 100%; }
    /* Sticky add-to-cart bar replaces the tab bar */
    body.bs-has-actionbar .bs-tabbar { display: none; }
    body.bs-has-actionbar { padding-bottom: 84px; }
    .bs-actionbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: #fff; border-top: 1px solid var(--line); padding: 10px 12px calc(12px + env(safe-area-inset-bottom)); flex-wrap: nowrap; gap: 8px; box-shadow: 0 -4px 16px rgba(28, 23, 20, .06); }
    .bs-actionbar .bs-pd__cart { order: 3; min-height: 48px; font-size: 15px; border-radius: 12px; flex: 1; }
    .bs-actionbar .bs-pd__iconbtn { width: 48px; height: 48px; border-radius: 12px; order: 2; }
    .bs-actionbar .bs-pd__chatbtn { order: 1; width: 48px; min-height: 48px; padding: 0; justify-content: center; border-radius: 12px; }
    .bs-actionbar .bs-pd__chatbtn span { display: none; }
    .bs-shopcard { padding: 16px; }
    .bs-shopcard .bs-btn { width: 100%; }
    .bs-pd__desc, .bs-pd__reviews { padding: 18px; }
}

/* ---------- Shop page ---------- */
.bs-shop { padding-top: 24px; }
.bs-shophero { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-hero); overflow: hidden; margin-bottom: 24px; }
.bs-shophero__cover { height: 140px; background: var(--ink); position: relative; overflow: hidden; }
.bs-shophero__cover::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient(90deg, #FF175D, #FC5409); }
.bs-shophero__cover img { position: absolute; right: 40px; top: -30px; width: 200px; height: 205px; opacity: .12; filter: brightness(0) invert(1); }
.bs-shophero__main { padding: 0 28px 24px; display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: flex-end; }
.bs-shophero__main form { margin: 0; }
.bs-shophero__av { width: 104px; height: 104px; margin-top: -52px; border-radius: 24px; border: 4px solid #fff; background: #FBE3D6; color: var(--action-hover); display: grid; place-items: center; font-weight: 800; font-size: 34px; overflow: hidden; flex: none; position: relative; }
.bs-shophero__av img { width: 100%; height: 100%; object-fit: cover; }
.bs-shophero__id { flex: 1 1 320px; display: flex; flex-direction: column; gap: 6px; padding-top: 14px; font-size: 14px; }
.bs-shophero__id h1 { margin: 0; font-size: 28px; font-weight: 800; letter-spacing: -0.02em; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.bs-shophero__stats { border-top: 1px solid var(--line-2); padding: 18px 28px; display: flex; flex-wrap: wrap; gap: 16px 48px; align-items: flex-start; }
.bs-shophero__nums { display: flex; gap: 36px; }
.bs-shophero__nums span { display: flex; flex-direction: column; font-size: 13px; color: var(--muted); }
.bs-shophero__nums strong { font-size: 20px; color: var(--ink); }
.bs-shophero__stats p { flex: 1 1 360px; margin: 0; font-size: 14px; line-height: 1.65; color: var(--ink-2); }
.bs-shophero__place { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--ink); }
.bs-shopbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.bs-chip--lg { padding: 10px 16px; font-size: 14px; font-weight: 700; }
.bs-chip.is-dark { background: var(--ink); color: #fff !important; border-color: var(--ink); }
.bs-shopsearch { display: flex; align-items: center; gap: 8px; height: 44px; border: 1.5px solid var(--input-line); border-radius: 12px; padding: 0 12px; background: #fff; flex: 0 1 320px; margin: 0; color: var(--muted); }
.bs-shopsearch:focus-within { border-color: var(--action); }
.bs-shopsearch input { border: 0; outline: none; font: inherit; font-size: 14px; width: 100%; color: var(--ink); background: transparent; }
.bs-body .page-item.active .page-link { background: var(--ink); border-color: var(--ink); }
@media (max-width: 767px) {
    .bs-shop { padding-top: 14px; }
    .bs-shophero__cover { height: 96px; }
    .bs-shophero__main { padding: 0 16px 18px; }
    .bs-shophero__av { width: 80px; height: 80px; margin-top: -40px; font-size: 26px; border-radius: 20px; }
    .bs-shophero__id h1 { font-size: 22px; }
    .bs-shophero__main form, .bs-shophero__main form .bs-btn { width: 100%; }
    .bs-shophero__stats { padding: 14px 16px; }
    .bs-shopbar .bs-chips { flex-wrap: nowrap; overflow-x: auto; width: 100%; }
    .bs-shopbar .bs-chip { white-space: nowrap; }
    .bs-shopsearch { flex-basis: 100%; }
}

/* ---------- Cart ---------- */
.bs-cart__grid { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.bs-cart__list { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.bs-cart__note { display: flex; gap: 12px; align-items: center; margin: 0; }
.bs-cart__all { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; font-weight: 700; font-size: 14px; margin: 0; cursor: pointer; }
.bs-cart input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--action); margin: 0; flex: none; cursor: pointer; }
.bs-cart__shop { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.bs-cart__shop header { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); font-size: 15px; }
.bs-cart__shop header a, .bs-cart__shop header strong { font-weight: 800; color: var(--ink) !important; text-decoration: none; }
.bs-cart__shop header a:hover { color: var(--action) !important; }
.bs-cart__shop header .bs-muted { font-size: 13px; }
.bs-cart__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; padding: 16px 18px; border-bottom: 1px solid #F7F3F0; }
.bs-cart__row:last-child { border-bottom: 0; }
.bs-cart__row form { margin: 0; }
.bs-cart__img { width: 76px; height: 76px; border-radius: 12px; overflow: hidden; background: #FBF3EE; flex: none; display: block; }
.bs-cart__img img { width: 100%; height: 100%; object-fit: cover; }
.bs-cart__info { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.bs-cart__name { font-weight: 700; font-size: 15px; color: var(--ink) !important; text-decoration: none; line-height: 1.35; }
.bs-cart__name:hover { color: var(--action) !important; }
.bs-cart__sub { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 13px; }
.bs-cart__var { font-size: 12px; font-weight: 700; background: #F4F0EC; border-radius: 6px; padding: 3px 8px; }
.bs-cart .bs-stepper button { width: 40px; height: 40px; font-size: 18px; }
.bs-cart .bs-stepper span { width: 36px; height: 40px; font-size: 14px; }
.bs-cart__total { width: 110px; text-align: right; font-size: 16px; }
.bs-cart__rm { color: var(--muted-2) !important; }
.bs-cart__rm:hover { color: var(--err) !important; background: var(--err-bg); }
.bs-cart__sum { flex: 1 1 340px; max-width: 400px; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; }
.bs-cart__sum h2 { margin: 0; font-size: 18px; font-weight: 800; }
.bs-sumrow { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.bs-sumrow--total { border-top: 1px dashed var(--input-line); padding-top: 14px; align-items: baseline; font-weight: 700; }
.bs-sumrow--total strong { font-size: 24px; letter-spacing: -0.02em; }
.bs-cpn-box { border: 1px solid var(--line); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.bs-cpn-box__t { font-size: 13px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.bs-cpn { display: flex; align-items: center; gap: 10px; border: 1.5px dashed #F2A98A; border-radius: 10px; padding: 10px 12px; background: #FFF9F6; margin: 0; }
.bs-cpn.is-off { border-color: var(--input-line); background: #FAF8F6; }
.bs-cpn__txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.bs-cpn__txt strong { font-size: 13.5px; }
.bs-cpn__txt span { font-size: 12px; color: var(--ok); font-weight: 600; }
.bs-cpn.is-off .bs-cpn__txt strong, .bs-cpn.is-off .bs-cpn__txt span { color: var(--muted); }
.bs-cpn__btn { min-height: 36px; padding: 0 14px; border-radius: 8px; border: 0; background: var(--ink); color: #fff; font: inherit; font-weight: 800; font-size: 13px; cursor: pointer; }
.bs-cpn__btn[disabled] { background: #EAE3DD; color: var(--muted-2); cursor: not-allowed; }
.bs-cpn-applied { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--ok-bg); color: var(--ok); border: 1px dashed #9ED3AE; border-radius: 12px; padding: 10px 12px; font-size: 14px; }
.bs-cpn-applied form { margin: 0; }
@media (max-width: 767px) {
    .bs-cart__row { gap: 10px 12px; padding: 14px; position: relative; }
    .bs-cart__img { width: 64px; height: 64px; }
    .bs-cart__info { flex: 1 1 calc(100% - 120px); }
    .bs-cart__total { width: auto; margin-left: auto; }
    .bs-cart__row .bs-stepper { margin-left: 32px; }
    .bs-cart__sum { max-width: none; position: static; }
}
.bs-cart__total { color: var(--ink); }

/* ---------- Checkout (markup classes kept for the step script) ---------- */
.bs-co__grid { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.bs-co__main { flex: 999 1 600px; min-width: 0; }
.bs-co__aside { flex: 1 1 340px; max-width: 400px; position: sticky; top: 16px; }
.bs-co .checkout-box { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 22px; margin-bottom: 16px; }
.bs-co .box-title { font-size: 18px; font-weight: 800; margin: 0 0 16px; display: flex; align-items: center; gap: 10px; letter-spacing: -0.01em; }
.bs-co .box-title .bs-ico { color: var(--action); }
.bs-co .box-headrow { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.bs-co .box-headrow .box-title { margin: 0; }
.bs-co .co-link { font-size: 14px; color: var(--action); font-weight: 700; background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; text-decoration: none; }
.bs-co .co-link:hover { color: var(--action-hover); text-decoration: underline; }
.bs-co .co-hint { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.bs-co .co-err { display: none; font-size: 14px; color: var(--err); background: var(--err-bg); border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; }
/* Address cards */
.bs-co .addr-choose { display: flex; gap: 14px; align-items: flex-start; border: 1.5px solid var(--line); border-radius: 14px; padding: 16px 18px; margin: 0 0 10px; cursor: pointer; }
.bs-co .addr-choose:hover { border-color: var(--input-line); }
.bs-co .addr-choose:has(input:checked) { border: 2px solid var(--action); background: var(--tint-2); padding: 15px 17px; }
.bs-co .addr-choose input, .bs-co .ship-opt input, .bs-co .pay-choose input { accent-color: var(--action); width: 18px; height: 18px; margin: 2px 0 0; flex: none; }
.bs-co .addr-name { font-weight: 700; font-size: 15px; }
.bs-co .addr-line { color: var(--muted); font-size: 14px; margin-top: 3px; line-height: 1.5; }
.bs-co .addr-warn { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--warn); margin-top: 6px; font-weight: 600; }
.bs-co .badge-utama { display: inline-block; background: var(--tint); color: var(--action-hover); font-size: 11.5px; font-weight: 800; padding: 2px 8px; border-radius: 999px; margin-left: 8px; vertical-align: middle; }
.bs-co .co-add { border: 1.5px dashed var(--input-line); border-radius: 14px; margin-top: 6px; }
.bs-co .co-add > summary { list-style: none; min-height: 52px; display: flex; align-items: center; justify-content: center; color: var(--action); font-weight: 800; font-size: 14px; cursor: pointer; }
.bs-co .co-add > summary::-webkit-details-marker { display: none; }
.bs-co .co-add[open] > summary { border-bottom: 1px dashed var(--input-line); }
.bs-co .co-add form { padding: 18px; margin: 0; }
.bs-co .co-shipto { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; margin-bottom: 16px; }
.bs-co .co-shipto .ic { color: var(--action); display: grid; place-items: center; }
.bs-co .co-shipto .k { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bs-co .co-shipto .addr-name { font-size: 14px; }
.bs-co .co-shipto .addr-line { font-size: 13px; margin-top: 0; }
/* Shipping per shop */
.bs-co .ship-shop { border: 1px solid var(--line); border-radius: 16px; padding: 18px; margin-bottom: 14px; }
.bs-co .ship-shop:last-child { margin-bottom: 0; }
.bs-co .ship-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: baseline; margin-bottom: 10px; }
.bs-co .ship-head strong { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; }
.bs-co .ship-head span { font-size: 13px; color: var(--muted); }
.bs-co .ship-items { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; align-items: center; }
.bs-co .ship-items img { width: 40px; height: 40px; border-radius: 9px; object-fit: cover; background: #FBF3EE; border: 1px solid var(--line); }
.bs-co .ship-items small { color: var(--muted); font-size: 12.5px; margin-left: 4px; }
.bs-co .ship-opt { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; margin: 0 0 8px; cursor: pointer; }
.bs-co .ship-opt:hover { border-color: var(--input-line); }
.bs-co .ship-opt:has(input:checked) { border: 2px solid var(--action); background: var(--tint-2); padding: 11px 13px; }
.bs-co .ship-opt input { margin-top: 0; }
.bs-co .ship-name { flex: 1; line-height: 1.35; }
.bs-co .ship-name b { font-size: 14.5px; font-weight: 800; }
.bs-co .ship-name small { display: block; color: var(--muted); font-size: 12.5px; }
.bs-co .ship-cost { font-weight: 800; white-space: nowrap; font-size: 15px; }
.bs-co .ship-list .ship-more { display: none; }
.bs-co .ship-list.all .ship-more { display: flex; }
.bs-co .ship-toggle { background: none; border: 0; color: var(--action); font-weight: 700; font-size: 14px; padding: 6px 0; min-height: 36px; cursor: pointer; }
.bs-co .ship-toggle .less, .bs-co .ship-list.all .ship-toggle .more { display: none; }
.bs-co .ship-list.all .ship-toggle .less { display: inline; }
.bs-co .ship-note { font-size: 14px; color: var(--ink-2); background: var(--bg); border: 1px dashed var(--input-line); border-radius: 12px; padding: 12px 14px; }
.bs-co .ship-note.err { color: var(--err); background: var(--err-bg); border-color: #F5C2C0; }
.bs-co .ship-note a { color: var(--action); font-weight: 700; margin-left: 6px; }
/* Payment */
.bs-co .pay-group { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 18px 0 10px; }
.bs-co .pay-group:first-of-type { margin-top: 0; }
.bs-co .pay-choose { display: flex; gap: 14px; align-items: center; border: 1.5px solid var(--line); border-radius: 14px; padding: 14px 16px; margin: 0 0 10px; cursor: pointer; }
.bs-co .pay-choose:hover { border-color: var(--input-line); }
.bs-co .pay-choose:has(input:checked) { border: 2px solid var(--action); background: var(--tint-2); padding: 13px 15px; }
.bs-co .pay-choose.disabled { opacity: .6; cursor: not-allowed; }
.bs-co .pay-choose input { margin-top: 0; }
.bs-co .pay-choose .addr-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.bs-co .pay-choose .addr-line { font-size: 13px; }
.bs-co .pay-g { width: 28px; height: 28px; border-radius: 999px; background: var(--brand-gradient); color: #fff; display: inline-grid; place-items: center; font-weight: 800; font-size: 13px; }
.bs-co .badge-auto { display: inline-block; background: var(--ok-bg); color: var(--ok); font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; }
.bs-co .pay-fee { text-align: right; font-weight: 800; font-size: 14px; white-space: nowrap; }
.bs-co .pay-fee small { display: block; font-weight: 500; font-size: 11.5px; color: var(--muted); }
/* Voucher */
.bs-co .vc-row { display: flex; gap: 8px; margin: 0; }
.bs-co .vc-row input { flex: 1; min-width: 0; border: 1.5px solid var(--input-line); border-radius: 12px; min-height: 46px; padding: 0 14px; font: inherit; font-size: 14px; text-transform: uppercase; }
.bs-co .vc-row input:focus { outline: none; border-color: var(--action); }
.bs-co .vc-applied { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--ok-bg); border: 1px dashed #9ED3AE; color: var(--ok); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
.bs-co .vc-applied form { margin: 0; }
.bs-co .vc-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin-top: 10px; }
.bs-co .vc-opts form { margin: 0; }
.bs-co .vc-opt { width: 100%; text-align: left; background: #FFF9F6; border: 1.5px dashed #F2A98A; color: var(--ink); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; }
.bs-co .vc-opt small { display: block; color: var(--ok); font-size: 12px; font-weight: 600; }
.bs-co .vc-opt[disabled] { border-color: var(--input-line); background: #FAF8F6; color: var(--muted); cursor: not-allowed; }
.bs-co .vc-opt[disabled] small { color: var(--muted); }
/* Review */
.bs-co .co-express { display: flex; gap: 10px; align-items: center; background: var(--info-bg); color: var(--info); border-radius: 12px; padding: 12px 14px; font-size: 14px; margin: 0 0 16px; }
.bs-co .rv-sec { padding: 16px 0; border-bottom: 1px solid var(--line-2); }
.bs-co .rv-sec:first-of-type { padding-top: 0; }
.bs-co .rv-sec:last-child { border-bottom: 0; padding-bottom: 0; }
.bs-co .rv-k { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bs-co .rv-k > span { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); flex: 1; }
.bs-co .rv-k small { font-size: 12px; }
.bs-co .rv-item { display: flex; gap: 12px; align-items: center; padding: 6px 0; }
.bs-co .rv-item img { width: 52px; height: 52px; border-radius: 10px; object-fit: cover; background: #FBF3EE; flex: none; }
.bs-co .rv-item .nm { font-size: 14px; line-height: 1.35; font-weight: 700; }
.bs-co .rv-item .sub { font-size: 12.5px; color: var(--muted); }
.bs-co .rv-item .amt { margin-left: auto; font-weight: 800; white-space: nowrap; }
.bs-co .rv-ship { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--bg); border-radius: 10px; padding: 10px 12px; margin-top: 8px; font-size: 14px; }
.bs-co .rv-ship > span:first-child { display: flex; align-items: center; gap: 8px; }
.bs-co .rv-coupon { display: flex; align-items: center; gap: 8px; color: var(--ok); font-weight: 700; }
.bs-co .pay-pin { margin-top: 12px; padding: 14px 16px; border: 1.5px solid var(--tint-line); border-radius: 12px; background: var(--tint-2); }
.bs-co .pay-pin label { display: block; font-size: 13px; font-weight: 800; margin-bottom: 6px; }
.bs-co .pay-pin input { width: 180px; letter-spacing: .5em; font-size: 18px; text-align: center; border: 1.5px solid var(--input-line); border-radius: 10px; min-height: 46px; padding: 0 12px; font-family: inherit; }
.bs-co .pay-pin input:focus { outline: none; border-color: var(--action); }
.bs-co .place-box { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.bs-co .place-box .k { font-size: 13px; color: var(--muted); }
.bs-co .place-box .grand { font-weight: 800; font-size: 26px; letter-spacing: -0.02em; line-height: 1.1; }
.bs-co .place-terms { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
/* Step navigation */
.bs-co .co-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 4px 0 24px; flex-wrap: wrap; }
.bs-co .co-back { color: var(--ink-2); font-size: 14px; font-weight: 700; background: none; border: 0; padding: 0; min-height: 44px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; }
.bs-co .co-back:hover { color: var(--ink); }
.bs-co .btn-next, .bs-co .btn-place { min-height: 50px; padding: 0 24px; border: 0; border-radius: 12px; background: var(--action); color: #fff; font: inherit; font-weight: 800; font-size: 15px; cursor: pointer; }
.bs-co .btn-next:hover, .bs-co .btn-place:hover { background: var(--action-hover); }
.bs-co .btn-next[disabled], .bs-co .btn-place[disabled] { background: #F1EEEB; color: var(--muted-2); cursor: not-allowed; }
/* Summary */
.bs-co .summary { padding: 22px; }
.bs-co .summary .box-title { margin-bottom: 12px; }
.bs-co .sum-items { max-height: 280px; overflow: auto; }
.bs-co .summary .item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line-2); }
.bs-co .summary .item img { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; background: #FBF3EE; flex: none; }
.bs-co .summary .item .nm { font-size: 13.5px; line-height: 1.3; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bs-co .summary .item .qty { font-size: 12px; color: var(--muted); }
.bs-co .summary .item .amt { margin-left: auto; font-weight: 700; white-space: nowrap; font-size: 13.5px; }
.bs-co .sum-lines { margin-top: 12px; }
.bs-co .summary .line { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 14px; }
.bs-co .summary .line.muted span:first-child { color: var(--muted); }
.bs-co .summary .line.ok { color: var(--ok); }
.bs-co .summary .grand-row { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; margin-top: 8px; border-top: 1px dashed var(--input-line); font-weight: 700; }
.bs-co .summary .grand { font-weight: 800; font-size: 24px; letter-spacing: -0.02em; }
.bs-co .co-aside-place { display: none; margin-top: 16px; }
.bs-co .co-aside-note { font-size: 12.5px; color: var(--muted); margin: 12px 0 0; }
.bs-co:has(.co-step[data-step="review"]:not([hidden])) .co-aside-place { display: block; }
.bs-co:has(.co-step[data-step="review"]:not([hidden])) .co-aside-note { display: none; }
.bs-co .bs-btn { min-height: 46px; }
@media (min-width: 768px) {
    /* Desktop places the order from the summary; the review step keeps the total box only. */
    .bs-co:has(.co-aside-place) .place-box .btn-place { display: none; }
}
@media (max-width: 767px) {
    body.bs-no-tabbar .bs-tabbar { display: none; }
    body.bs-no-tabbar { padding-bottom: 96px; }
    .bs-co__aside { max-width: none; position: static; flex-basis: 100%; order: -1; }
    .bs-co .checkout-box { padding: 16px; border-radius: 16px; }
    .bs-co .sum-items { display: none; }
    .bs-co .co-nav { flex-direction: column-reverse; align-items: stretch; }
    .bs-co .co-nav .btn-next { width: 100%; }
    /* Sticky total + place-order bar on the review step */
    .bs-co .co-step[data-step="review"] .place-box { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: #fff; border-top: 1px solid var(--line); padding: 12px 14px calc(14px + env(safe-area-inset-bottom)); flex-wrap: nowrap; box-shadow: 0 -4px 16px rgba(28, 23, 20, .06); }
    .bs-co .co-step[data-step="review"] .place-box .grand { font-size: 20px; }
    .bs-co .co-step[data-step="review"] .place-box .btn-place { min-height: 50px; }
    .bs-co .co-aside-place { display: none !important; }
    .bs-co .ship-shop { padding: 14px; }
}
@media (min-width: 768px) { .bs-co:has(.co-aside-place) .co-step[data-step="review"] .place-terms { display: none; } }

/* ---------- Order confirmation ---------- */
.bs-ok { max-width: 900px; }
.bs-ok__hero { text-align: center; padding: 36px 28px 28px; margin-bottom: 16px; }
.bs-ok__check { width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 999px; background: var(--ok-bg); color: var(--ok); display: grid; place-items: center; }
.bs-ok__hero h1 { margin: 0 0 8px; font-size: 28px; font-weight: 800; letter-spacing: -0.03em; }
.bs-ok__hero > p { margin: 0 auto; max-width: 560px; color: var(--ink-2); line-height: 1.6; }
.bs-ok__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 24px; text-align: left; }
.bs-ok__meta > div { background: var(--bg); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.bs-ok__meta > div > span { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bs-ok__meta strong { font-size: 15px; line-height: 1.4; }
.bs-ok__meta small { font-size: 12.5px; color: var(--muted); }
.bs-ok__total { font-size: 20px !important; letter-spacing: -0.02em; }
.bs-ok__card { padding: 22px 24px; margin-bottom: 16px; }
.bs-ok__card h2 { margin: 0 0 14px; font-size: 18px; font-weight: 800; }
.bs-ok__next { list-style: none; margin: 0; padding: 0; counter-reset: n; display: flex; flex-direction: column; gap: 12px; }
.bs-ok__next li { position: relative; padding-left: 42px; min-height: 30px; display: flex; align-items: center; font-size: 14.5px; color: #3A332E; }
.bs-ok__next li::before { counter-increment: n; content: counter(n); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 999px; background: var(--tint); color: var(--action); font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.bs-ok__addr { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; padding-bottom: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--line-2); }
.bs-ok__addr .bs-ico { color: var(--action); margin-top: 2px; }
.bs-ok__order { border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-top: 14px; }
.bs-ok__ohead { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.bs-ok__ohead strong { display: flex; align-items: center; gap: 8px; }
.bs-ok__row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: 14px; }
.bs-ok__row.muted { color: var(--muted); }
.bs-ok__row.ok { color: var(--ok); }
.bs-ok__row.total { font-weight: 800; font-size: 15px; padding-top: 8px; }
.bs-ok__sums { border-top: 1px dashed var(--input-line); margin-top: 8px; padding-top: 8px; }
.bs-ok__actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 8px 0 24px; }

/* ---------- Payment (Gofee) ---------- */
.bs-pay__grid { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.bs-pay__main { flex: 999 1 560px; min-width: 0; padding: 24px; }
.bs-pay__aside { flex: 1 1 320px; max-width: 380px; display: flex; flex-direction: column; gap: 14px; }
.bs-pay__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding-bottom: 18px; border-bottom: 1px solid var(--line-2); }
.bs-pay__head > div { display: flex; flex-direction: column; gap: 2px; }
.bs-pay__head .bs-muted { font-size: 13px; }
.bs-pay__total { font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.bs-pay__status { font-size: 13px; padding: 6px 12px; }
.bs-pay__status::before { content: ''; width: 8px; height: 8px; border-radius: 999px; background: currentColor; }
.bs-pay__body { display: flex; flex-wrap: wrap; gap: 24px; padding-top: 20px; }
.bs-pay__qr { margin: 0; flex: 0 0 auto; text-align: center; }
.bs-pay__qr img { width: 240px; max-width: 100%; border: 1px solid var(--line); border-radius: 16px; padding: 10px; background: #fff; }
.bs-pay__qr figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; }
.bs-pay__info { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.bs-pay__timer { background: var(--warn-bg); color: var(--warn); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; font-weight: 600; }
.bs-pay__timer strong { font-size: 18px; font-weight: 800; }
.bs-pay__timer .pay-left.expired { color: var(--err); }
.bs-pay__dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; margin: 0; font-size: 14px; }
.bs-pay__dl dt { color: var(--muted); font-weight: 500; }
.bs-pay__dl dd { margin: 0; font-weight: 700; text-align: right; word-break: break-word; }
.bs-pay__copyrow { display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }
.bs-pay__copyrow span { font-size: 16px; letter-spacing: .02em; }
.bs-pay__live { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin: 0; }
.bs-pay__dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ok); animation: bsPulse 1.6s ease-in-out infinite; }
@keyframes bsPulse { 50% { opacity: .3; } }
.bs-pay__paid { display: flex; align-items: center; gap: 14px; padding: 20px 0 8px; }
.bs-pay__paid .bs-ok__check { margin: 0; width: 56px; height: 56px; }
.bs-pay__paid p { margin: 0; font-size: 15px; }
.bs-pay__retry { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.bs-pay__opt { display: flex; align-items: center; gap: 12px; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; margin: 0; font-size: 14px; }
.bs-pay__opt:has(input:checked) { border: 2px solid var(--action); background: var(--tint-2); padding: 11px 13px; }
.bs-pay__opt input { accent-color: var(--action); width: 18px; height: 18px; margin: 0; }
.bs-pay__opt .pay-g { width: 28px; height: 28px; border-radius: 999px; background: var(--brand-gradient); color: #fff; display: inline-grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; }
.bs-pay__pin { border: 1.5px solid var(--tint-line); background: var(--tint-2); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.bs-pay__pin label { font-size: 13px; font-weight: 800; margin: 0; }
.bs-pay__pin input { width: 180px; letter-spacing: .5em; font-size: 18px; text-align: center; border: 1.5px solid var(--input-line); border-radius: 10px; min-height: 46px; padding: 0 12px; font-family: inherit; }
.bs-pay__orders { padding: 20px; }
.bs-pay__orders h2 { margin: 0 0 10px; font-size: 16px; font-weight: 800; }
.bs-pay__orow { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line-2); font-size: 14px; }
.bs-pay__orow > span { display: flex; flex-direction: column; }
.bs-pay__orow .bs-muted { font-size: 12.5px; }
.bs-pay__btns { display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 767px) {
    .bs-ok__hero { padding: 28px 18px 20px; }
    .bs-ok__hero h1 { font-size: 23px; }
    .bs-ok__card { padding: 18px; }
    .bs-ok__actions .bs-btn { flex: 1 1 100%; }
    .bs-pay__main { padding: 18px; }
    .bs-pay__total { font-size: 28px; }
    .bs-pay__qr { width: 100%; }
    .bs-pay__aside { max-width: none; }
}

/* ---------- Account pages ---------- */
.bs-account__main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.bs-account__main > .bs-pagehead { margin: 0; }

/* ---------- My Orders (mo-*, also used inside the vendor panel) ---------- */
.mo { display: flex; flex-direction: column; gap: 16px; }
.mo-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.mo-top h1 { margin: 0; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.mo-search { display: flex; align-items: center; gap: 4px; height: 44px; border: 1.5px solid var(--input-line); border-radius: 12px; padding: 0 4px 0 14px; background: #fff; flex: 0 1 340px; margin: 0; }
.mo-search:focus-within { border-color: var(--action); }
.mo-search input { border: 0; outline: none; font: inherit; font-size: 14px; width: 100%; background: transparent; color: var(--ink); min-height: 0 !important; padding: 0 !important; box-shadow: none !important; }
.mo-search button { width: 38px; height: 38px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.mo-search button:hover { background: var(--bg); color: var(--ink); }
.mo-tabs { display: flex; gap: 4px; overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 5px; scrollbar-width: none; }
.mo-tabs::-webkit-scrollbar { display: none; }
.mo-tabs a { flex: 1 0 auto; min-height: 40px; padding: 0 14px; border-radius: 10px; font-size: 14px; font-weight: 700; color: var(--ink-2) !important; text-decoration: none !important; display: flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; }
.mo-tabs a:hover { background: var(--bg); }
.mo-tabs a.active { background: var(--ink); color: #fff !important; }
.mo-tabs .cnt { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--sale); color: #fff; font-size: 11px; font-weight: 800; display: inline-grid; place-items: center; }
.mo-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.mo-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 20px; border-bottom: 1px solid var(--line-2); }
.mo-shop { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; flex: 1; min-width: 0; }
.mo-shop .ic { color: var(--ink-2); display: grid; place-items: center; }
.mo-shop .name { font-weight: 800; font-size: 15px; color: var(--ink) !important; text-decoration: none; }
.mo-shop form { margin: 0; }
.mo-chip { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; font: inherit; font-size: 12.5px; font-weight: 700; text-decoration: none !important; border: 1px solid var(--tint-line); background: var(--tint-2); color: var(--action-hover) !important; border-radius: 999px; padding: 0 10px; cursor: pointer; }
.mo-chip.gray { border-color: transparent; background: transparent; color: var(--ink-2) !important; }
.mo-chip.gray:hover { background: var(--bg); }
.mo-state { margin-left: auto; font-size: 12.5px; font-weight: 800; border-radius: 999px; padding: 5px 11px; background: var(--info-bg); color: var(--info); }
.mo-state.warn { background: var(--warn-bg); color: var(--warn); }
.mo-state.done { background: var(--ok-bg); color: var(--ok); }
.mo-state.muted { background: var(--err-bg); color: var(--err); }
.mo-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 20px; background: var(--warn-bg); color: #7A4B00; font-size: 13.5px; }
.mo-banner > span { flex: 1; }
.mo-banner.err { background: var(--err-bg); color: var(--err); }
.mo-item { display: flex; flex-wrap: wrap; gap: 14px 16px; padding: 16px 20px; border-bottom: 1px solid #F7F3F0; }
.mo-item img { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; background: #FBF3EE; flex: none; display: block; }
.mo-item .info { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.mo-item .title { font-weight: 700; font-size: 14.5px; color: var(--ink) !important; text-decoration: none; line-height: 1.35; }
.mo-item .title:hover { color: var(--action) !important; }
.mo-item .meta { font-size: 13px; color: var(--muted); }
.mo-item .ship { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.mo-item .ship code { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; font-weight: 700; color: var(--ink); background: var(--bg); padding: 1px 6px; border-radius: 5px; }
.mo-item .side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; align-self: center; }
.mo-item .price { font-weight: 800; font-size: 15px; }
.mo-item .acts, .mo-foot .acts { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.mo-item .acts form, .mo-foot .acts form { margin: 0; }
.mo-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 10px; font: inherit; font-size: 13px; font-weight: 800; text-decoration: none !important; background: #fff; color: var(--ink) !important; border: 1.5px solid var(--input-line); cursor: pointer; white-space: nowrap; }
.mo-btn:hover { border-color: var(--ink-2); }
.mo-btn.primary { background: var(--action); color: #fff !important; border-color: var(--action); }
.mo-btn.primary:hover { background: var(--action-hover); border-color: var(--action-hover); }
.mo-btn.green { background: var(--ok); color: #fff !important; border-color: var(--ok); }
.mo-btn.danger { color: var(--err) !important; border-color: #F5C2C0; }
.mo-btn.danger:hover { background: var(--err-bg); }
.mo-pill { display: inline-flex; align-items: center; font-weight: 800; font-size: 12px; border-radius: 999px; padding: 3px 9px; background: #F1EEEB; color: var(--ink-2); }
.mo-pill.processing { background: #E8F0FE; color: #1D4F9E; }
.mo-pill.shipped { background: #EEECFD; color: #4338CA; }
.mo-pill.delivered { background: #E3F6F4; color: #0B6B63; }
.mo-pill.completed, .mo-pill.paid { background: #E6F5EA; color: #1E6B36; }
.mo-pill.cancelled, .mo-pill.failed { background: #FDECEC; color: #B42318; }
.mo-pill.unpaid, .mo-pill.confirm { background: #FFF4DB; color: #8A5300; }
.mo-pill.cod { background: #E8F0FE; color: #1D4F9E; }
.mo-pill.void { background: #F1EEEB; color: #4A423D; }
.mo-return { display: none; gap: 8px; padding: 0 20px 16px; margin: 0; }
.mo-return input { flex: 1; min-width: 0; min-height: 40px; border: 1.5px solid var(--input-line); border-radius: 10px; padding: 0 12px; font: inherit; font-size: 14px; }
.mo-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 14px 20px; background: #FAF8F6; font-size: 13px; }
.mo-foot .ref { display: flex; flex-wrap: wrap; gap: 4px 18px; color: var(--muted); flex: 1 1 320px; }
.mo-foot .ref b { color: var(--ink); }
.mo-foot .copy { all: unset; cursor: pointer; color: var(--action); font-weight: 700; margin-left: 4px; }
.mo-total { display: flex; flex-direction: column; align-items: flex-end; }
.mo-total .lbl { color: var(--muted); font-size: 12px; }
.mo-total .amt { font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.mo-total .fee { font-size: 11.5px; color: var(--muted); }
.mo-foot .mo-btn { min-height: 36px; font-size: 12.5px; }
.mo-details { border-top: 1px solid var(--line-2); }
.mo-details > summary { list-style: none; min-height: 44px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13.5px; color: var(--ink-2); cursor: pointer; }
.mo-details > summary::-webkit-details-marker { display: none; }
.mo-details > summary::after { content: '▾'; margin-left: 6px; }
.mo-details[open] > summary::after { content: '▴'; }
.mo-details[open] > summary { border-bottom: 1px solid var(--line-2); }
.mo-cancelled-note { margin: 16px 20px 0; padding: 12px 14px; border-radius: 12px; background: var(--err-bg); color: var(--err); font-size: 13.5px; }
.mo-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 18px 20px 0; }
.mo-step { display: flex; flex-direction: column; gap: 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
.mo-step .dot { height: 6px; border-radius: 999px; background: var(--line-2); font-size: 0; overflow: hidden; }
.mo-step.done { color: var(--ink); }
.mo-step.done .dot { background: var(--ok); }
.mo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; padding: 18px 20px 20px; font-size: 13.5px; line-height: 1.55; }
.mo-box { border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.mo-box h4 { margin: 0 0 6px; font-size: 13.5px; font-weight: 800; }
.mo-box .row2 { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; }
.mo-box .row2 > span:first-child { color: var(--muted); }
.mo-box .row2.grand { border-top: 1px dashed var(--input-line); margin-top: 6px; padding-top: 6px; font-weight: 800; }
.mo-box .row2.grand > span:first-child { color: var(--ink); }
.mo-empty { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 48px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--muted); }
.mo-empty h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--ink); }
.mo-empty p { margin: 0 0 6px; }
.mo-empty .bs-empty__ico { margin-bottom: 4px; }
@media (max-width: 767px) {
    .mo-top h1 { font-size: 24px; }
    .mo-search { flex-basis: 100%; }
    .mo-head, .mo-item, .mo-foot { padding-left: 14px; padding-right: 14px; }
    .mo-state { margin-left: 0; }
    .mo-item .side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
    .mo-total { align-items: flex-start; }
    .mo-foot .acts { width: 100%; justify-content: flex-start; }
    .mo-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 14px 14px 0; font-size: 11px; }
    .mo-grid { padding: 14px; }
}

/* ---------- Tracking ---------- */
.bs-trk__back { font-size: 14px; font-weight: 700; color: var(--ink-2) !important; text-decoration: none; align-self: flex-start; }
.bs-trk__back:hover { color: var(--action) !important; }
.bs-trk__card { overflow: hidden; }
.bs-trk__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 24px; border-bottom: 1px solid var(--line-2); }
.bs-trk__head h1 { margin: 0 0 4px; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.bs-trk__head .bs-muted { font-size: 14px; }
.bs-trk__awb { display: flex; align-items: center; gap: 14px; background: var(--bg); border-radius: 14px; padding: 12px 14px 12px 16px; }
.bs-trk__awb > span { display: flex; flex-direction: column; }
.bs-trk__awb > span > span { font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bs-trk__awb strong { font-size: 20px; font-weight: 800; letter-spacing: .03em; font-family: ui-monospace, Menlo, monospace; }
.bs-trk__steps { list-style: none; margin: 0; padding: 22px 24px 24px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.bs-trk__steps li { display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--muted); }
.bs-trk__bar { height: 6px; border-radius: 999px; background: var(--line-2); }
.bs-trk__ico { width: 38px; height: 38px; border-radius: 12px; background: var(--bg); color: var(--muted); display: grid; place-items: center; }
.bs-trk__steps li strong { font-size: 13.5px; color: var(--muted); }
.bs-trk__steps li.reached .bs-trk__bar { background: var(--ok); }
.bs-trk__steps li.reached .bs-trk__ico { background: var(--ok-bg); color: var(--ok); }
.bs-trk__steps li.reached strong { color: var(--ink); }
.bs-trk__steps li.current .bs-trk__ico { background: var(--action); color: #fff; }
.bs-trk__histhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 24px; border-bottom: 1px solid var(--line-2); }
.bs-trk__histhead h2 { margin: 0; font-size: 18px; font-weight: 800; }
.bs-trk__tl { list-style: none; margin: 0; padding: 20px 24px; }
.bs-trk__tl li { position: relative; display: flex; gap: 14px; padding-bottom: 20px; }
.bs-trk__tl li:last-child { padding-bottom: 0; }
.bs-trk__tl li::before { content: ''; position: absolute; left: 6px; top: 16px; bottom: 0; width: 2px; background: var(--line-2); }
.bs-trk__tl li:last-child::before { display: none; }
.bs-trk__dot { width: 14px; height: 14px; border-radius: 999px; background: #D6CDC7; flex: none; margin-top: 3px; position: relative; }
.bs-trk__tl li:first-child .bs-trk__dot { background: var(--action); box-shadow: 0 0 0 4px var(--tint); }
.bs-trk__tl li > span:last-child { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.bs-trk__tl li > span:last-child strong { font-weight: 600; }
.bs-trk__tl li:first-child > span:last-child strong { font-weight: 800; }
.bs-trk__tl .bs-muted { font-size: 12.5px; }
@media (max-width: 767px) {
    .bs-trk__head { padding: 18px; }
    .bs-trk__awb { width: 100%; justify-content: space-between; }
    .bs-trk__steps { padding: 18px; gap: 6px; }
    .bs-trk__steps li strong { font-size: 11.5px; }
    .bs-trk__ico { width: 32px; height: 32px; }
    .bs-trk__histhead, .bs-trk__tl { padding-left: 18px; padding-right: 18px; }
}

/* ---------- Wallet (gw-*) ---------- */
.gw-card { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.gw-pad { padding: 22px 24px; }
.gw-hero { position: relative; overflow: hidden; background: var(--brand-gradient); color: #fff; padding: 24px 26px 28px; min-height: 170px; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; }
.gw-mark { position: absolute; right: -30px; top: -30px; width: 220px; height: 225px; opacity: .14; filter: brightness(0) invert(1); pointer-events: none; }
.gw-hero .logo { position: absolute; left: 26px; top: 22px; display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; }
.gw-hero .logo .g { width: 28px; height: 28px; border-radius: 999px; background: #fff; color: var(--brand-pink); display: grid; place-items: center; font-size: 14px; }
.gw-on { position: absolute; right: 22px; top: 22px; display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; background: rgba(255, 255, 255, .18); padding: 5px 10px; border-radius: 999px; }
.gw-on span { width: 7px; height: 7px; border-radius: 999px; background: #B6F5C8; }
.gw-hero .lbl { font-size: 13px; font-weight: 700; opacity: .9; }
.gw-hero .bal { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; }
.gw-hero .who { font-size: 13px; opacity: .92; }
.gw-row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line-2); font-size: 14px; }
.gw-row:last-child { border-bottom: 0; }
.gw-row span:first-child { color: var(--muted); }
.gw-row span:last-child { font-weight: 700; text-align: right; }
.gw-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.gw-actions form { margin: 0; }
.gw-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 10px; font: inherit; font-size: 14px; font-weight: 700; padding: 0 18px; border: 1.5px solid var(--input-line); background: #fff; color: var(--ink) !important; cursor: pointer; text-decoration: none !important; }
.gw-btn:hover { border-color: var(--ink-2); }
.gw-btn.primary { background: var(--action); border-color: var(--action); color: #fff !important; }
.gw-btn.primary:hover { background: var(--action-hover); border-color: var(--action-hover); }
.gw-btn.danger { color: var(--err) !important; border-color: #F5C2C0; }
.gw-btn.danger:hover { background: var(--err-bg); }
.gw-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; counter-reset: s; }
.gw-steps li { counter-increment: s; background: var(--bg); border-radius: 14px; padding: 14px 16px 14px 56px; position: relative; font-size: 14px; color: var(--ink-2); line-height: 1.5; min-height: 44px; display: flex; align-items: center; }
.gw-steps li::before { content: counter(s); position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 999px; background: var(--tint); color: var(--action); font-weight: 800; display: grid; place-items: center; font-size: 13px; }
.gw-tabs { display: flex; gap: 4px; padding: 6px; border-bottom: 1px solid var(--line-2); }
.gw-tabs button { flex: 1; min-height: 44px; background: none; border: 0; border-radius: 10px; font: inherit; font-weight: 800; font-size: 14px; color: var(--ink-2); cursor: pointer; }
.gw-tabs button:hover { background: var(--bg); }
.gw-tabs button.active { background: var(--ink); color: #fff; }
.gw-pane { display: none; }
.gw-pane.active { display: block; }
.gw-pane form { margin: 0; }
.gw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.gw-grid .full { grid-column: 1 / -1; }
.gw-field { margin-bottom: 14px; }
.gw-field label { display: block; font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.gw-field input, .gw-field textarea { width: 100%; box-sizing: border-box; min-height: 46px; border: 1.5px solid var(--input-line); border-radius: 12px; padding: 10px 14px; font: inherit; font-size: 14.5px; color: var(--ink); background: #fff; }
.gw-field input:focus, .gw-field textarea:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px rgba(214, 61, 6, .14); }
.gw-field .hint { font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.gw-field .err { font-size: 12.5px; color: var(--err); margin-top: 4px; font-weight: 600; }
.gw-sep { font-size: 12px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 4px 0 12px; }
.gw-note { display: flex; gap: 10px; align-items: flex-start; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; font-size: 13.5px; color: var(--ink-2); }
.gw-note .bs-ico { color: var(--action); margin-top: 1px; }
.gw-warn { background: var(--warn-bg); border-color: #F5DFA6; color: var(--warn); }
.gw-warn .bs-ico { color: var(--warn); }
@media (max-width: 640px) { .gw-grid { grid-template-columns: 1fr; } .gw-hero .bal { font-size: 30px; } .gw-pad { padding: 18px; } }

/* ---------- Addresses ---------- */
.bs-addr__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.bs-addr__card { padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.bs-addr__card.is-primary { border: 2px solid var(--action); padding: 17px 19px; }
.bs-addr__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.bs-addr__top strong { font-size: 15.5px; }
.bs-addr__line { color: var(--ink-2); line-height: 1.5; }
.bs-addr__warn { display: flex; align-items: center; gap: 6px; color: var(--warn); font-size: 13px; font-weight: 600; margin-top: 4px; }
.bs-addr__acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bs-addr__acts form { margin: 0; }
.bs-addr__edit { margin-top: 0; }
.bs-addr__edit[open] { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.bs-addr__edit > summary { list-style: none; }
.bs-addr__add > summary { list-style: none; min-height: 56px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--action); font-weight: 800; font-size: 15px; cursor: pointer; }
.bs-addr__add > summary::-webkit-details-marker { display: none; }
.bs-addr__add[open] > summary { border-bottom: 1px solid var(--line-2); justify-content: flex-start; padding: 0 22px; color: var(--ink); font-size: 18px; }
.bs-addr__add form { padding: 22px; margin: 0; }
.bs-addr__formacts { margin-top: 16px; display: flex; gap: 10px; }

/* ---------- Chat (two-pane; storefront and vendor panel) ---------- */
.bs-chat { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 0; background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; margin: 24px 0 8px; height: min(760px, calc(100vh - 220px)); min-height: 520px; }
.bs-panel-body .bs-chat { margin-top: 0; height: calc(100vh - 150px); }
.bs-chat__inbox { border-right: 1px solid var(--line-2); display: flex; flex-direction: column; min-height: 0; }
.bs-chat__inhead { padding: 18px 18px 12px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--line-2); }
.bs-chat__inhead h1 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.bs-chat__search { display: flex; align-items: center; gap: 8px; height: 42px; border: 1.5px solid var(--input-line); border-radius: 12px; padding: 0 12px; color: var(--muted); margin: 0; }
.bs-chat__search:focus-within { border-color: var(--action); }
.bs-chat__search input { border: 0 !important; outline: none; font: inherit; font-size: 14px; width: 100%; background: transparent; color: var(--ink); min-height: 0 !important; padding: 0 !important; box-shadow: none !important; }
.bs-chat__threads { flex: 1; overflow-y: auto; }
.bs-thread { display: flex; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #F7F3F0; text-decoration: none !important; color: var(--ink) !important; }
.bs-thread:hover { background: #FCFAF8; }
.bs-thread[aria-current="page"] { background: var(--tint); box-shadow: inset 3px 0 0 var(--action); }
.bs-thread__av { width: 44px; height: 44px; border-radius: 999px; background: var(--ink); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 14px; flex: none; }
.bs-thread__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bs-thread__row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.bs-thread__row strong { font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-thread__time { font-size: 11.5px; color: var(--muted-2); white-space: nowrap; }
.bs-thread__sub { font-size: 12px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-thread__last { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-thread.unread .bs-thread__last { color: var(--ink); font-weight: 700; }
.bs-chat__conv { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.bs-chat__conv--empty { justify-content: center; align-items: center; background: #FCFBFA; }
.bs-chat__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line-2); }
.bs-chat__backbtn { display: none !important; }
.bs-chat__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bs-chat__who strong { font-size: 15.5px; }
.bs-chat__who .bs-muted { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bs-chat__body { flex: 1; overflow-y: auto; padding: 20px; background: #FAF7F4; display: flex; flex-direction: column; gap: 10px; }
.bs-chat .msg { display: flex; }
.bs-chat .msg.me { justify-content: flex-end; }
.bs-chat .msg .bubble { max-width: 72%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.bs-chat .msg.me .bubble { background: var(--action); color: #fff; border-bottom-right-radius: 4px; }
.bs-chat .msg.them .bubble { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.bs-chat .msg .time { display: block; font-size: 11px; opacity: .75; margin-top: 4px; }
.bs-chat .chat-att-img { max-width: 220px; max-height: 220px; border-radius: 10px; display: block; margin-top: 6px; }
.bs-chat .chat-att-file { display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, .05); color: inherit !important; text-decoration: none; font-size: 13px; font-weight: 700; }
.bs-chat .msg.me .chat-att-file { background: rgba(255, 255, 255, .18); }
.bs-chat .chat-att-file small { font-weight: 500; opacity: .8; }
.bs-chat__compose { position: relative; display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--line-2); margin: 0; }
.bs-chat__compose input[type=text] { flex: 1; min-width: 0; min-height: 46px; padding: 0 14px; border: 1.5px solid var(--input-line); border-radius: 12px; font: inherit; font-size: 14.5px; color: var(--ink); }
.bs-chat__compose input[type=text]:focus { outline: none; border-color: var(--action); }
.bs-chat__compose .bs-iconbtn { border: 1.5px solid var(--input-line); flex: none; margin: 0; }
.bs-chat .emoji-panel { position: absolute; bottom: 70px; left: 14px; z-index: 20; display: none; flex-wrap: wrap; gap: 2px; width: 272px; max-height: 190px; overflow-y: auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-md); padding: 8px; }
.bs-chat .emoji-panel.open { display: flex; }
.bs-chat .emoji-panel span { font-size: 20px; line-height: 1; padding: 5px; cursor: pointer; border-radius: 8px; }
.bs-chat .emoji-panel span:hover { background: var(--bg); }
.bs-chat .att-name { font-size: 12px; color: var(--muted); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 860px) {
    .bs-chat { grid-template-columns: 1fr; height: auto; min-height: 0; border-radius: 16px; margin-top: 14px; }
    .bs-chat--open .bs-chat__inbox { display: none; }
    .bs-chat:not(.bs-chat--open) .bs-chat__conv { display: none; }
    .bs-chat__inbox { border-right: 0; }
    .bs-chat__threads { max-height: none; }
    .bs-chat--open .bs-chat__conv { height: calc(100vh - 230px); min-height: 460px; }
    .bs-chat__backbtn { display: inline-grid !important; }
    .bs-chat .msg .bubble { max-width: 85%; }
}

/* ---------- Auth ---------- */
.bs-auth-body { min-height: 100vh; }
.bs-auth__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 20px; }
.bs-auth__topr { display: flex; align-items: center; gap: 20px; font-size: 13.5px; }
.bs-auth__topr .bs-lang a { color: var(--muted) !important; text-decoration: none; }
.bs-auth__topr .bs-lang a.is-on { color: var(--ink) !important; font-weight: 800; }
.bs-auth__back { font-weight: 700; text-decoration: none; }
.bs-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); gap: 24px; align-items: stretch; padding-bottom: 48px; max-width: 1080px; }
.bs-auth__brand { position: relative; overflow: hidden; background: var(--ink); color: #fff; border-radius: 24px; padding: 44px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; min-height: 520px; }
.bs-auth__brand::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; background: var(--brand-gradient); }
.bs-auth__mark { width: 72px; height: 74px; }
.bs-auth__brand h2 { margin: 0 0 10px; color: #fff; font-size: 34px; line-height: 1.12; font-weight: 800; letter-spacing: -0.03em; max-width: 420px; }
.bs-auth__brand p { margin: 0; color: #D9CFC8; font-size: 15.5px; line-height: 1.6; max-width: 400px; }
.bs-auth__brand ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 15px; font-weight: 600; }
.bs-auth__brand li { display: flex; align-items: center; gap: 12px; }
.bs-auth__brand li span { width: 28px; height: 28px; border-radius: 999px; background: #2E2622; color: #FF8A5C; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.bs-auth__card { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 28px 32px 32px; display: flex; flex-direction: column; gap: 18px; }
.bs-auth__tabs { display: flex; gap: 4px; background: var(--bg); border-radius: 14px; padding: 5px; }
.bs-auth__tabs a { flex: 1; min-height: 44px; display: grid; place-items: center; border-radius: 10px; font-weight: 800; font-size: 14.5px; color: var(--ink-2) !important; text-decoration: none !important; }
.bs-auth__tabs a[aria-current="page"] { background: #fff; color: var(--ink) !important; box-shadow: var(--shadow-sm); }
.bs-auth__form { margin: 0; }
.bs-auth__head { margin-bottom: 18px; }
.bs-auth__head h1 { margin: 0 0 4px; font-size: 26px; font-weight: 800; letter-spacing: -0.03em; }
.bs-auth__head p { margin: 0; color: var(--muted); }
.bs-auth__foot { text-align: center; margin: 16px 0 0; color: var(--muted); font-size: 14px; }
.bs-auth__foot a { font-weight: 800; }
@media (max-width: 860px) {
    .bs-auth { grid-template-columns: 1fr; }
    .bs-auth__brand { display: none; }
    .bs-auth__card { padding: 22px 18px; border-radius: 20px; }
    .bs-auth__back { display: none; }
}

/* ---------- Blog, article, contact, static page ---------- */
.bs-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--action); }
.bs-blog__head { display: flex; flex-direction: column; gap: 8px; margin: 32px 0 24px; }
.bs-blog__head h1 { margin: 0; font-size: 38px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.12; }
.bs-blog__feature { display: flex; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; text-decoration: none !important; color: var(--ink) !important; margin-bottom: 24px; }
.bs-blog__feature:hover { box-shadow: 0 10px 28px rgba(28, 23, 20, .08); }
.bs-blog__fimg { flex: 1 1 480px; min-height: 320px; background: #FBE3D6; display: block; }
.bs-blog__fimg img, .bs-blog__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-blog__ftxt { flex: 1 1 380px; padding: 36px; display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.bs-blog__ftxt strong { font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; }
.bs-blog__ftxt .bs-muted { font-size: 13px; }
.bs-blog__sum { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.bs-blog__more { font-size: 14px; font-weight: 800; color: var(--action); }
.bs-blog__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.bs-blog__card { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; text-decoration: none !important; color: var(--ink) !important; display: flex; flex-direction: column; }
.bs-blog__card:hover { box-shadow: 0 8px 22px rgba(28, 23, 20, .07); }
.bs-blog__img { aspect-ratio: 16 / 10; background: #F1E4CC; display: block; }
.bs-blog__body { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.bs-blog__body .bs-muted { font-size: 12.5px; }
.bs-blog__body strong { font-size: 17px; line-height: 1.35; }
.bs-article { max-width: 880px; }
.bs-article__card { padding: 40px 44px; margin-top: 16px; }
.bs-article__card h1 { margin: 8px 0 10px; font-size: 34px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.bs-article__meta { font-size: 14px; margin-bottom: 20px; }
.bs-article__hero { width: 100%; max-height: 420px; object-fit: cover; border-radius: 16px; margin: 0 0 22px; display: block; }
.bs-article__lead { font-size: 18px; line-height: 1.6; color: var(--ink-2); margin: 0 0 18px; font-weight: 500; }
.bs-article .bs-prose { font-size: 16px; line-height: 1.8; }
.bs-article .bs-prose h2, .bs-article .bs-prose h3 { margin: 1.4em 0 .5em; }
.bs-article .bs-prose a { text-decoration: underline; }
.bs-article__related { padding: 22px 26px; margin-top: 16px; }
.bs-article__related h2 { margin: 0 0 10px; font-size: 18px; font-weight: 800; }
.bs-article__related ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.bs-article__related a { font-weight: 700; text-decoration: none; }
.bs-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.bs-contact__item { display: flex; gap: 14px; align-items: center; padding: 20px; text-decoration: none !important; color: var(--ink) !important; }
.bs-contact__item:hover { border-color: var(--tint-line); }
.bs-contact__item > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.bs-contact__item strong { font-size: 13px; color: var(--muted); font-weight: 700; }
.bs-contact__ic { width: 48px; height: 48px; border-radius: 14px; background: var(--tint); color: var(--action); display: grid; place-items: center; flex: none; }
.bs-contact__social { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; margin-top: 14px; }
.bs-contact__social .soc-link { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink) !important; text-decoration: none; font-size: 13.5px; font-weight: 700; }
.bs-contact__social .soc-link:hover { border-color: var(--action); color: var(--action) !important; }
@media (max-width: 767px) {
    .bs-blog__head h1 { font-size: 28px; }
    .bs-blog__ftxt { padding: 22px; }
    .bs-blog__ftxt strong { font-size: 21px; }
    .bs-blog__fimg { min-height: 200px; }
    .bs-article__card { padding: 24px 18px; }
    .bs-article__card h1 { font-size: 26px; }
}

/* ---------- Account forms ---------- */
.bs-formcard .bs-card__body { display: flex; flex-direction: column; }
.bs-formcard .bs-btn { align-self: flex-start; margin-top: 4px; }
.bs-avatar-row { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }

/* ---------- Checkout: Dompet Gofee PIN dialog (opened by "Place order") ---------- */
.bs-pindlg { width: min(400px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 20px; box-shadow: 0 24px 60px rgba(28, 23, 20, .28); color: var(--ink); font-family: var(--font); }
.bs-pindlg::backdrop { background: rgba(28, 23, 20, .55); }
.bs-co .bs-pindlg .pay-pin { margin: 0; padding: 26px 24px 22px; border: 0; border-radius: 0; background: #fff; text-align: center; }
.bs-pindlg__ic { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 16px; background: var(--tint); color: var(--action); display: grid; place-items: center; }
.bs-pindlg h2 { margin: 0 0 4px; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.bs-pindlg__amt { margin: 0 0 18px; font-size: 13.5px; color: var(--muted); }
.bs-pindlg__amt strong { display: block; margin-top: 2px; font-size: 22px; color: var(--ink); letter-spacing: -0.02em; }
.bs-co .bs-pindlg .pay-pin label { margin-bottom: 8px; }
.bs-co .bs-pindlg .pay-pin input { width: 100%; max-width: 220px; margin: 0 auto; display: block; }
.bs-pindlg__err { min-height: 18px; margin: 8px 0 2px; font-size: 13px; font-weight: 700; color: var(--err); }
.bs-pindlg .co-hint { font-size: 12.5px; }
.bs-pindlg__btns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; margin-top: 18px; }
.bs-pindlg__btns .bs-btn { min-height: 48px; }
#walletPinHint { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
#walletPinHint[hidden] { display: none; }

/* ---------- Yes/No confirmation dialog (partials/confirm-dialog) ---------- */
.bs-confirm { width: min(400px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 20px; box-shadow: 0 24px 60px rgba(28, 23, 20, .28); color: var(--ink); font-family: var(--font); }
.bs-confirm::backdrop { background: rgba(28, 23, 20, .55); }
.bs-confirm[open] { animation: bs-confirm-in .16s ease-out; }
@keyframes bs-confirm-in { from { transform: translateY(8px) scale(.98); } to { transform: none; } }
.bs-confirm__box { padding: 26px 24px 22px; text-align: center; }
.bs-confirm__ic { width: 52px; height: 52px; margin: 0 auto 14px; border-radius: 16px; background: var(--tint); color: var(--action); display: grid; place-items: center; }
.bs-confirm__ic [data-ic] { display: none; line-height: 0; }
.bs-confirm__box:not(.is-danger) .bs-confirm__ic [data-ic="info"], .bs-confirm__box.is-danger .bs-confirm__ic [data-ic="danger"] { display: block; }
.bs-confirm__box.is-danger .bs-confirm__ic { background: var(--err-bg); color: var(--err); }
.bs-confirm__box.is-notice .bs-confirm__btns { grid-template-columns: 1fr; }
.bs-confirm__btns [hidden] { display: none; }
.bs-confirm h2 { margin: 0 0 6px; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.bs-confirm p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.bs-confirm__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.bs-confirm__btns .bs-btn { min-height: 48px; }
.bs-confirm__box.is-danger .bs-btn--primary { background: var(--err); border-color: var(--err); }
.bs-confirm__box.is-danger .bs-btn--primary:hover { background: #A11B12; border-color: #A11B12; }

/* ---------- Chat: product card ("Contact seller" posts the product into the conversation) ---------- */
.bs-chat .msg .bubble.has-product { width: 320px; max-width: 85%; padding: 8px 8px 6px; background: #fff; color: var(--ink); border: 1px solid var(--line); }
.bs-chat .msg.me .bubble.has-product { border-color: var(--tint-line); border-bottom-right-radius: 4px; }
.bs-chat .msg .bubble.has-product .time { padding: 0 6px; color: var(--muted); opacity: 1; }
.chat-product { display: flex; gap: 12px; align-items: center; padding: 4px; border-radius: 12px; color: var(--ink) !important; text-decoration: none !important; }
a.chat-product:hover { background: var(--tint-2); }
a.chat-product:hover strong { color: var(--action-hover); }
.chat-product img { width: 68px; height: 68px; flex: none; border-radius: 10px; object-fit: cover; background: var(--bg); border: 1px solid var(--line); }
.chat-product__info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.chat-product__k { font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted-2); }
.chat-product strong { font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.chat-product__price { font-size: 14px; font-weight: 800; color: var(--action); }
.chat-product__cta { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--action-hover); }
.chat-product.is-gone { color: var(--muted) !important; font-size: 13px; padding: 8px; }
.bs-chat .msg .bubble.has-product + .bubble, .bs-chat .msg .bubble .chat-product + * { margin-top: 6px; }

/* Product card sent together with a text message: a white card at the top of the bubble. */
.bs-chat .msg .bubble:not(.has-product) .chat-product { background: #fff; margin: -2px -6px 8px; padding: 6px; border: 1px solid var(--line); }
.bs-chat .msg .bubble:not(.has-product) .chat-product img { width: 56px; height: 56px; }
.bs-chat .msg .bubble:not(.has-product) .chat-product.is-gone { color: var(--muted) !important; }

/* "Contact seller": the product waits above the message box until the next message is sent. */
.chat-ask { display: flex; align-items: center; gap: 12px; margin: 0 16px; padding: 10px 10px 10px 12px; background: var(--tint-2); border: 1.5px solid var(--tint-line); border-bottom: 0; border-radius: 14px 14px 0 0; }
.chat-ask img { width: 48px; height: 48px; flex: none; border-radius: 9px; object-fit: cover; background: #fff; border: 1px solid var(--line); }
.chat-ask__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.chat-ask__info strong { font-size: 13.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-ask__info .chat-product__price { font-size: 13px; }
.chat-ask__x { width: 36px; height: 36px; flex: none; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center; }
.chat-ask__x:hover { background: #fff; color: var(--ink); }

/* ---------- API documentation (/docs, admin "Dokumentasi API") ---------- */
.apid-page { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); }
.apid-top { position: sticky; top: 0; z-index: 30; background: #fff; border-bottom: 1px solid var(--line); }
.apid-top__in { max-width: 1240px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 16px; }
.apid-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.apid-brand b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -0.03em; }
.apid-brand b i { font-style: normal; color: var(--action); }
.apid-brand small { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.apid-top__nav { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.apid-top__nav a { min-height: 40px; padding: 0 12px; border-radius: 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ink-2); text-decoration: none; }
.apid-top__nav a:hover { background: var(--bg); }
.apid-top__nav a.is-on { background: var(--tint); color: var(--action-hover); }
.apid-main { max-width: 1240px; margin: 0 auto; padding: 28px 24px 64px; }
.apid-hero { margin-bottom: 22px; }
.apid-hero h1 { margin: 0 0 6px; font-size: 30px; font-weight: 800; letter-spacing: -0.03em; }
.apid-hero p { margin: 0; max-width: 720px; color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.apid code, .apid-hero code, .apid-md code { font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace; font-size: .9em; }

.apid { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 28px; align-items: start; }
.apid-toc { position: sticky; top: 84px; max-height: calc(100vh - 100px); overflow: auto; display: flex; flex-direction: column; gap: 2px; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px; }
.content .apid-toc { top: 96px; }
.apid-toc__k { margin: 12px 8px 4px; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.apid-toc a { display: flex; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--ink-2) !important; text-decoration: none !important; }
.apid-toc a span { font-size: 12px; color: var(--muted); font-weight: 700; }
.apid-toc a:hover, .apid-toc a.is-on { background: var(--tint-2); color: var(--action-hover) !important; }
.apid-toc a[hidden] { display: none; }
.apid-search { display: flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 12px; border: 1.5px solid var(--input-line); border-radius: 11px; color: var(--muted); margin: 0 !important; }
.apid-search:focus-within { border-color: var(--action); }
.content .apid-search input, .apid-search input { flex: 1; min-width: 0; min-height: 0 !important; border: 0 !important; padding: 8px 0 !important; outline: none; font: inherit; font-size: 14px; color: var(--ink); background: transparent; box-shadow: none !important; }

.apid-body { min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.apid-intro, .apid-group { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px; scroll-margin-top: 90px; }
.apid-intro h2, .apid-group h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; }
.apid-intro dl { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 10px 16px; margin: 14px 0 0; font-size: 14px; line-height: 1.6; }
.apid-intro dt { font-weight: 800; color: var(--ink); }
.apid-intro dd { margin: 0; color: var(--ink-2); }
.apid-intro dd code, .apid-desc code { background: var(--bg); border-radius: 5px; padding: 1px 5px; }
.apid-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line-2); font-size: 12.5px; color: var(--muted); }
.apid-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.apid-none { margin: 0; padding: 24px; text-align: center; color: var(--muted); background: #fff; border: 1px dashed var(--line); border-radius: 16px; }
.apid-group[hidden], .apid-ep[hidden], .apid-none[hidden] { display: none; }
.apid-group__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.apid-guide { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; color: var(--action-hover) !important; text-decoration: none; }
.apid-group__intro { margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }
.apid-ep { padding: 14px 0; border-top: 1px solid var(--line-2); }
.apid-group__head + .apid-ep, .apid-group__intro + .apid-ep { margin-top: 12px; }
.apid-ep__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.apid-m { min-width: 58px; text-align: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; font-weight: 700; padding: 3px 7px; border-radius: 6px; color: #fff; }
.apid-m--get { background: #1E7A3C; } .apid-m--post { background: #1D4F9E; } .apid-m--put, .apid-m--patch { background: #9A5B00; } .apid-m--delete { background: #B42318; }
.apid-path { font-size: 14px !important; font-weight: 600; color: var(--ink); cursor: copy; border-radius: 6px; padding: 2px 4px; word-break: break-all; }
.apid-path:hover { background: var(--tint-2); }
.apid-var { color: var(--action); }
.apid-copy.is-copied { background: var(--ok-bg); color: var(--ok); }
.apid-intro .apid-copy { cursor: copy; }
.apid-tags { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; }
.apid-acc { display: inline-block; font-size: 11.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: #F1EEEB; color: var(--ink-2); white-space: nowrap; }
.apid-acc--public { background: var(--ok-bg); color: var(--ok); }
.apid-acc--token { background: var(--info-bg); color: var(--info); }
.apid-acc--member { background: #EEECFD; color: #4338CA; }
.apid-acc--seller { background: var(--tint); color: var(--action-hover); }
.apid-acc--admin { background: var(--ink); color: #fff; }
.apid-acc--identity, .apid-acc--gofee, .apid-acc--webhook { background: var(--warn-bg); color: var(--warn); }
.apid-thr { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.apid-desc { margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--ink-2); }
.apid-params { display: flex; gap: 10px; margin-top: 8px; font-size: 12.5px; }
.apid-params > span { flex: none; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-size: 11px; padding-top: 3px; }
.apid-params code { min-width: 0; color: var(--ink); background: var(--bg); border-radius: 8px; padding: 4px 8px; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }

/* guides (rendered Markdown) */
.apid-md { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 28px 32px; font-size: 15px; line-height: 1.7; color: var(--ink-2); }
.apid-md h1 { margin: 0 0 12px; font-size: 28px; color: var(--ink); letter-spacing: -0.03em; }
.apid-md h2 { margin: 32px 0 10px; font-size: 21px; color: var(--ink); letter-spacing: -0.02em; padding-top: 18px; border-top: 1px solid var(--line-2); }
.apid-md h3 { margin: 24px 0 8px; font-size: 17px; color: var(--ink); }
.apid-md a { color: var(--action-hover); }
.apid-md code { background: var(--bg); border-radius: 5px; padding: 1px 5px; color: var(--ink); overflow-wrap: anywhere; }
.apid-md pre { background: var(--ink); color: #EDE6E1; border-radius: 12px; padding: 14px 16px; overflow-x: auto; font-size: 13px; line-height: 1.55; }
.apid-md pre code { background: none; padding: 0; color: inherit; }
.apid-md table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13.5px; display: block; overflow-x: auto; }
.apid-md th, .apid-md td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; }
.apid-md th { background: var(--bg); color: var(--ink); }
.apid-md blockquote { margin: 14px 0; padding: 10px 16px; border-left: 4px solid var(--action); background: var(--tint-2); border-radius: 0 10px 10px 0; }
.apid-md hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }

@media (max-width: 960px) {
    .apid { grid-template-columns: 1fr; }
    .apid-toc { position: static; max-height: none; flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .apid-toc .apid-search { flex: 1 1 100%; }
    .apid-toc__k { display: none; }
    .apid-toc a { border: 1px solid var(--line); }
}
@media (max-width: 600px) {
    .apid-top__in, .apid-main { padding-left: 16px; padding-right: 16px; }
    .apid-brand small, .apid-top__shop { display: none !important; }
    .apid-hero h1 { font-size: 24px; }
    .apid-intro dl { grid-template-columns: 1fr; gap: 2px; }
    .apid-intro dd { margin-bottom: 8px; }
    .apid-tags { margin-left: 0; width: 100%; }
    .apid-md { padding: 20px 18px; }
}

/* My Orders: money returned to Dompet Gofee after a cancellation */
.mo-refund { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 20px; border-top: 1px solid var(--line-2); font-size: 13.5px; color: var(--ink-2); background: var(--info-bg); }
.mo-refund > span { flex: 1; min-width: 200px; }
.mo-refund strong { color: var(--ink); }
.mo-refund > .bs-ico { flex: none; color: var(--info); }
.mo-refund.is-ok { background: var(--ok-bg); }
.mo-refund.is-ok > .bs-ico { color: var(--ok); }
.mo-refund.is-wait { background: var(--warn-bg); }
.mo-refund.is-wait > .bs-ico { color: var(--warn); }
@media (max-width: 600px) { .mo-refund { padding-left: 14px; padding-right: 14px; } }

/* confirm dialog: optional text box (e.g. rejection reason) */
.bs-confirm__box.has-input { text-align: left; }
.bs-confirm__box.has-input .bs-confirm__ic { margin-left: 0; }
.bs-confirm__field { margin-top: 16px; }
.bs-confirm__field[hidden], .bs-confirm__hints[hidden], .bs-confirm__field label[hidden] { display: none; }
.bs-confirm__field label { display: block; font-size: 13px; font-weight: 800; margin-bottom: 8px; color: var(--ink); }
.bs-confirm__hints { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.bs-confirm__hint { min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--ink-2); cursor: pointer; }
.bs-confirm__hint:hover { border-color: var(--action); color: var(--action-hover); background: var(--tint-2); }
.bs-confirm__field textarea { display: block; width: 100%; box-sizing: border-box; min-height: 84px; padding: 10px 12px; border: 1.5px solid var(--input-line); border-radius: 12px; font: inherit; font-size: 14px; line-height: 1.5; color: var(--ink); resize: vertical; }
.bs-confirm__field textarea:focus { outline: none; border-color: var(--action); box-shadow: 0 0 0 3px rgba(214, 61, 6, .12); }
.bs-confirm__meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.bs-confirm__err { color: var(--err); font-weight: 700; }

/* ---------- Buyer notifications: header bell, toast, /account/notifications ---------- */
.bs-accnav__group a .bs-count { flex: none; }
.bs-notif { position: relative; }
.bs-notif.open > .bs-iconbtn { background: var(--tint); color: var(--action-hover) !important; }
.bs-notif__menu { display: none; position: absolute; right: -8px; top: calc(100% + 8px); width: 380px; max-width: calc(100vw - 32px); background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-md); z-index: 80; overflow: hidden; text-align: left; }
.bs-notif.open .bs-notif__menu { display: block; }
.bs-notif__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--line-2); }
.bs-notif__head strong { font-size: 15px; font-weight: 800; }
.bs-notif__head form { margin: 0; }
.bs-notif__head form[hidden] { display: none; }
.bs-notif__head button { border: 0; background: none; padding: 6px 8px; margin: -6px -8px; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 700; color: var(--action); cursor: pointer; }
.bs-notif__head button:hover { background: var(--tint-2); color: var(--action-hover); }
#bsNotifList { max-height: min(440px, 60vh); overflow-y: auto; overscroll-behavior: contain; }
.bs-notif__item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-2); text-decoration: none !important; color: var(--ink) !important; }
.bs-notif__item:last-child { border-bottom: 0; }
.bs-notif__item:hover { background: var(--bg); }
.bs-notif__item.is-unread { background: var(--tint-2); }
.bs-notif__item.is-unread:hover { background: var(--tint); }
.bs-notif__ic { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--info-bg); color: var(--info); }
.bs-notif__ic.is-ok { background: var(--ok-bg); color: var(--ok); }
.bs-notif__ic.is-warn { background: var(--warn-bg); color: var(--warn); }
.bs-notif__ic.is-bad { background: var(--err-bg); color: var(--err); }
.bs-notif__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bs-notif__txt strong { font-size: 14px; font-weight: 800; line-height: 1.35; }
.bs-notif__txt span { font-size: 13px; line-height: 1.45; color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.bs-notif__txt small { font-size: 12px; color: var(--muted-2); margin-top: 2px; }
.bs-notif__dot { flex: none; width: 9px; height: 9px; margin-top: 6px; border-radius: 999px; background: var(--action); }
.bs-notif__empty { margin: 0; padding: 32px 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; text-align: center; }
.bs-notif__all { display: flex; align-items: center; justify-content: center; min-height: 46px; border-top: 1px solid var(--line-2); font-size: 13.5px; font-weight: 800; text-decoration: none !important; background: #fff; }
.bs-notif__all:hover { background: var(--tint-2); }
@media (max-width: 767px) {
    .bs-notif { position: static; }
    .bs-notif__menu { left: 16px; right: 16px; width: auto; max-width: none; top: calc(100% - 4px); }
    #bsNotifList { max-height: 44vh; } /* stays above the bottom tab bar */
}

.bs-toast { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: flex; flex-direction: column; gap: 3px; width: 340px; max-width: calc(100vw - 32px); box-sizing: border-box; padding: 14px 18px 14px 20px; border-radius: 14px; background: var(--ink); color: #fff !important; box-shadow: 0 16px 40px rgba(28, 23, 20, .3); text-decoration: none !important; border-left: 4px solid #FF8A5C; animation: bs-toast-in .2s ease-out; }
.bs-toast.is-ok { border-left-color: #6FCF8E; }
.bs-toast.is-warn { border-left-color: #F5C04A; }
.bs-toast.is-bad { border-left-color: #FF7A7A; }
.bs-toast strong { font-size: 14.5px; line-height: 1.35; }
.bs-toast span { font-size: 13px; line-height: 1.45; color: #E9E2DC; }
.bs-toast em { font-style: normal; font-size: 13px; font-weight: 700; color: #FFB08A; margin-top: 2px; }
.bs-toast.is-out { opacity: 0; transform: translateY(8px); transition: .3s; }
@keyframes bs-toast-in { from { transform: translateY(12px); } to { transform: none; } }
@media (max-width: 767px) { .bs-toast { left: 16px; right: 16px; width: auto; max-width: none; bottom: calc(76px + env(safe-area-inset-bottom)); } }

.bs-notifs__head form { margin: 0; }
.bs-notifs__head .bs-btn { display: inline-flex; align-items: center; gap: 6px; }
.bs-notifs__tabs { display: flex; gap: 6px; margin: 0 0 14px; }
.bs-notifs__tabs a { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 13.5px; font-weight: 700; color: var(--ink-2) !important; text-decoration: none !important; }
.bs-notifs__tabs a:hover { border-color: var(--input-line); }
.bs-notifs__tabs a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff !important; }
.bs-notifs__tabs a[aria-current="page"] .bs-count { border: 0; }
.bs-notifs { background: #fff; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.bs-notifs__row { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--line-2); text-decoration: none !important; color: var(--ink) !important; }
.bs-notifs__row:last-child { border-bottom: 0; }
.bs-notifs__row:hover { background: var(--bg); }
.bs-notifs__row.is-unread { background: var(--tint-2); }
.bs-notifs__row.is-unread:hover { background: var(--tint); }
.bs-notifs__row .bs-notif__ic { width: 42px; height: 42px; border-radius: 13px; }
.bs-notifs__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bs-notifs__txt strong { font-size: 15px; font-weight: 800; line-height: 1.35; }
.bs-notifs__txt span { font-size: 14px; line-height: 1.5; color: var(--ink-2); overflow-wrap: anywhere; }
.bs-notifs__txt small { font-size: 12.5px; color: var(--muted-2); }
.bs-notifs__go { flex: none; align-self: center; color: var(--muted-2); }
.bs-notifs__row .bs-notif__dot { margin-top: 8px; }
.bs-notifs__empty { padding: 48px 24px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.bs-notifs__empty > span { width: 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--tint); color: var(--action); margin-bottom: 6px; }
.bs-notifs__empty strong { font-size: 16px; }
.bs-notifs__empty p { margin: 0 0 10px; color: var(--muted); font-size: 14px; max-width: 360px; }
.bs-notifs__pages { margin-top: 18px; }
@media (max-width: 767px) {
    .bs-notifs__row { padding: 14px; gap: 12px; }
    .bs-notifs__go { display: none; }
}

/* ---------- Returns: evidence form, return page, return chat ---------- */
.bs-chat .msg-text { white-space: pre-line; }
.bs-chat .chat-att-video { display: block; width: 280px; max-width: 100%; max-height: 360px; margin-top: 6px; border-radius: 10px; background: #000; }
.bs-thread__ret { display: inline-block; padding: 0 6px; margin-right: 4px; border-radius: 6px; background: var(--warn-bg); color: var(--warn); font-weight: 800; font-size: 11px; }
.chat-ret { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 16px; background: var(--warn-bg); border-bottom: 1px solid #F5DFA6; color: var(--ink) !important; text-decoration: none !important; }
.chat-ret svg { flex: none; color: var(--warn); }
.chat-ret__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-ret__txt strong { font-size: 14px; }
.chat-ret__txt span { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-ret__go { flex: none; font-size: 13px; font-weight: 800; color: var(--action); }
.chat-ret:hover .chat-ret__go { color: var(--action-hover); }

.mo-ret { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--warn-bg); color: var(--warn) !important; font-size: 12px; font-weight: 800; text-decoration: none !important; }
.mo-ret.is-completed { background: var(--ok-bg); color: var(--ok) !important; }
.mo-ret.is-rejected { background: #F1EEEB; color: var(--ink-2) !important; }

.rt-item { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 16px; background: #fff; border: 1px solid var(--line); border-radius: 16px; }
.rt-item img { width: 60px; height: 60px; border-radius: 12px; object-fit: cover; flex: none; background: var(--bg); }
.rt-item > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rt-item > div:nth-child(2) { flex: 1; }
.rt-item strong { font-size: 15px; }
.rt-item span { font-size: 13px; color: var(--muted); }
.rt-item__back { text-align: right; }
.rt-item__back small { font-size: 12px; color: var(--muted); }
.rt-item__back strong { font-size: 18px; color: var(--ok); }
.rt-item--flat { padding: 0; margin: 0 0 12px; border: 0; }
.rt-form { display: flex; flex-direction: column; gap: 16px; }
.rt-sec { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
.rt-sec h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 16px; font-weight: 800; }
.rt-sec h2 .n { width: 26px; height: 26px; border-radius: 999px; background: var(--tint); color: var(--action); font-size: 13px; display: grid; place-items: center; flex: none; }
.rt-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.rt-reason { position: relative; cursor: pointer; }
.rt-reason input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rt-reason span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--input-line); background: #fff; font-size: 14px; font-weight: 700; color: var(--ink-2); }
.rt-reason input:checked + span { border-color: var(--action); background: var(--tint); color: var(--action-hover); }
.rt-reason input:focus-visible + span { box-shadow: 0 0 0 3px rgba(214, 61, 6, .2); }
.rt-err { display: block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--err); }
.rt-form .is-bad { border-color: var(--err) !important; }
.rt-count { float: right; font-weight: 600; color: var(--muted-2); }
.rt-hint { margin: 0 0 14px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.rt-drop { display: flex; flex-wrap: wrap; gap: 10px; }
.rt-thumbs { display: contents; }
.rt-thumb { position: relative; width: 96px; height: 96px; border-radius: 12px; overflow: hidden; background: var(--bg); }
.rt-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rt-thumb button { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; border-radius: 999px; border: 0; background: rgba(28, 23, 20, .72); color: #fff; font-size: 16px; line-height: 1; cursor: pointer; }
.rt-add { position: relative; width: 96px; height: 96px; border-radius: 12px; border: 1.5px dashed var(--input-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--muted); font-size: 12px; font-weight: 700; text-align: center; cursor: pointer; background: var(--bg); }
.rt-add:hover { border-color: var(--action); color: var(--action); }
.rt-add[hidden] { display: none; }
.rt-add input, .rt-video input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.rt-video { position: relative; display: block; border-radius: 14px; border: 1.5px dashed var(--input-line); background: var(--bg); cursor: pointer; overflow: hidden; }
.rt-video:hover { border-color: var(--action); }
.rt-video__empty { display: flex; align-items: center; gap: 12px; padding: 18px; color: var(--muted); }
.rt-video__empty svg { color: var(--action); flex: none; }
.rt-video__empty strong { display: block; color: var(--ink); font-size: 14px; }
.rt-video__empty small { font-size: 12.5px; }
.rt-video.has { border-style: solid; }
.rt-video.has .rt-video__empty { padding: 10px 14px; }
.rt-video video { display: block; width: 100%; max-height: 320px; background: #000; }
.rt-next ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.rt-submit { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rt-submit .rt-hint { margin: 0; }
.rt-steps { list-style: none; margin: 0 0 16px; padding: 14px 16px; display: flex; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow-x: auto; }
.rt-steps li { flex: 1; min-width: 96px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--muted-2); position: relative; }
.rt-steps li + li::before { content: ""; position: absolute; top: 13px; right: calc(50% + 18px); width: calc(100% - 28px); height: 2px; background: var(--line); }
.rt-steps .dot { width: 28px; height: 28px; border-radius: 999px; display: grid; place-items: center; background: var(--bg); border: 2px solid var(--line); font-size: 12px; position: relative; z-index: 1; }
.rt-steps .is-done { color: var(--ok); }
.rt-steps .is-done .dot { background: var(--ok); border-color: var(--ok); color: #fff; }
.rt-steps .is-done + li::before, .rt-steps .is-now::before { background: var(--ok); }
.rt-steps .is-now { color: var(--ink); }
.rt-steps .is-now .dot { border-color: var(--action); color: var(--action); background: #fff; }
.rt-now { padding: 20px; margin-bottom: 16px; border-radius: 16px; background: var(--info-bg); border: 1px solid #CFDDF7; }
.rt-now h2 { margin: 0 0 6px; font-size: 18px; font-weight: 800; }
.rt-now p { margin: 0 0 12px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.rt-now p:last-child { margin-bottom: 0; }
.rt-now blockquote { margin: 0; padding: 10px 14px; border-left: 3px solid var(--warn); background: #fff; border-radius: 8px; font-size: 14px; }
.rt-now.is-pickup { background: var(--tint-2); border-color: var(--tint-line); }
.rt-now.is-completed { background: var(--ok-bg); border-color: #C6E7CF; }
.rt-now.is-rejected { background: #F7F4F1; border-color: var(--line); }
.rt-now.is-disputed, .rt-now.is-arrived { background: var(--warn-bg); border-color: #F5DFA6; }
.rt-pickup { display: grid; grid-template-columns: 1fr 1fr 1.2fr auto; gap: 12px; align-items: end; margin-bottom: 8px; }
.rt-pickup .bs-field { margin: 0; }
.rt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.rt-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; min-width: 0; }
.rt-card h3 { margin: 0 0 12px; font-size: 15px; font-weight: 800; }
.rt-card h4 { margin: 16px 0 8px; font-size: 13.5px; font-weight: 800; }
.rt-refresh { font-size: 12px; font-weight: 700; margin-left: 6px; }
.rt-dl { display: grid; grid-template-columns: 140px 1fr; gap: 8px 12px; margin: 0; font-size: 13.5px; }
.rt-dl dt { color: var(--muted); }
.rt-dl dd { margin: 0; overflow-wrap: anywhere; }
.rt-dl small { display: block; color: var(--muted); font-size: 12px; }
.rt-track { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.rt-track li { display: flex; flex-direction: column; padding-left: 12px; border-left: 2px solid var(--line); }
.rt-track li:first-child { border-left-color: var(--action); }
.rt-track small { color: var(--muted); font-size: 12px; }
.rt-reason-line { margin: 0 0 4px; }
.rt-desc { margin: 0 0 12px; font-size: 14px; color: var(--ink-2); line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere; }
.rt-gallery { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.rt-gallery img { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; border: 1px solid var(--line); }
.rt-video-play { display: block; width: 100%; max-height: 300px; border-radius: 12px; background: #000; }
@media (max-width: 767px) {
    .rt-item { flex-wrap: wrap; }
    .rt-item__back { width: 100%; text-align: left; display: flex; justify-content: space-between; align-items: baseline; }
    .rt-pickup { grid-template-columns: 1fr 1fr; }
    .rt-pickup .bs-btn { grid-column: 1 / -1; }
    .rt-grid { grid-template-columns: 1fr; }
    .rt-dl { grid-template-columns: 1fr; gap: 2px; }
    .rt-dl dd { margin-bottom: 8px; }
    .rt-steps li { min-width: 82px; font-size: 11.5px; }
    .chat-ret__go { display: none; }
}

/* API reference: request / response / error examples */
.apid-ex { margin-top: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.apid-ex > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 13px; font-weight: 800; color: var(--action); }
.apid-ex > summary::-webkit-details-marker { display: none; }
.apid-ex > summary::before { content: "▸"; font-size: 11px; transition: transform .15s; }
.apid-ex[open] > summary::before { transform: rotate(90deg); }
.apid-ex > summary span { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.apid-ex[open] > summary { border-bottom: 1px solid var(--line-2); }
.apid-ex__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px; }
.apid-ex__col { min-width: 0; display: flex; flex-direction: column; }
.apid-ex__h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.apid-ex__h--errs { padding: 0 12px; margin: 2px 0 6px; }
.apid-ex__copy { border: 1px solid var(--line); background: #fff; color: var(--ink-2); border-radius: 8px; padding: 3px 9px; font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: 0; text-transform: none; cursor: pointer; }
.apid-ex__copy:hover { border-color: var(--input-line); color: var(--ink); }
.apid-code { margin: 0; flex: 1; max-height: 340px; overflow: auto; padding: 10px 12px; border-radius: 10px; background: #1C1714; color: #F3EDE8; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre; tab-size: 2; }
.apid-code code { font: inherit; color: inherit; background: none; padding: 0; }
.apid-st { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; padding: 1px 7px; border-radius: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: 0; }
.apid-st--ok { background: var(--ok-bg); color: var(--ok); }
.apid-st--warn { background: var(--warn-bg); color: var(--warn); }
.apid-st--bad { background: var(--err-bg); color: var(--err); }
.apid-errs { display: flex; flex-direction: column; gap: 6px; padding: 0 12px 12px; }
.apid-err { border: 1px solid var(--line-2); border-radius: 10px; }
.apid-err > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; padding: 7px 10px; font-size: 12.5px; }
.apid-err > summary::-webkit-details-marker { display: none; }
.apid-err__when { font-weight: 700; color: var(--ink); flex: none; }
.apid-err__msg { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apid-err .apid-code { margin: 0 10px 10px; max-height: 220px; }
@media (max-width: 900px) { .apid-ex__grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .apid-err > summary { flex-wrap: wrap; } .apid-err__msg { white-space: normal; } }