/* ==========================================================================
   Benevolence v2.1 — public design system (on top of Bootstrap 5.3, dark theme)
   Flat and square: no gradients, glows, blur, lifts or rounded corners.
   One family (Inter), credentials in JetBrains Mono. Tokens first; components
   use tokens only. Shared by the store AND the /account pages: keep every
   class and --bnv-* variable name (values may change).
   ========================================================================== */

:root,
[data-bs-theme="dark"] {
    --bnv-bg: #0c0f16;
    --bnv-bg-2: #121621;
    --bnv-surface: #121621;
    --bnv-surface-2: #192030;
    --bnv-border: #252c3b;
    --bnv-border-strong: #384155;
    --bnv-border-hover: #4c5670;
    --bnv-text: #eceef4;
    --bnv-muted: #a4abbb;
    --bnv-faint: #8d95a7;          /* >= 4.5:1 on bg, surface and surface-2 */
    --bnv-accent: #8ab4ff;         /* links, focus, selected states */
    --bnv-primary: #f4f4f5;        /* primary button fill */
    --bnv-primary-hover: #ffffff;
    --bnv-on-primary: #0b0b0c;
    --bnv-brand: #8ab4ff;          /* legacy name: selected/active accent */
    --bnv-brand-2: #8ab4ff;
    --bnv-success: #4ade80;
    --bnv-warning: #fbbf24;
    --bnv-danger: #f87171;
    --bnv-shopee: #f97352;
    --bnv-save-tint: rgba(74, 222, 128, .1);    /* savings chips / callouts: tinted fill + line, text in --bnv-success */
    --bnv-save-line: rgba(74, 222, 128, .38);
    --bnv-radius: 0px;
    --bnv-radius-sm: 0px;
    --bnv-shadow: 0 0 0 0 transparent;
    --bnv-ease: ease;

    /* Bootstrap overrides */
    --bs-body-bg: var(--bnv-bg);
    --bs-body-color: var(--bnv-text);
    --bs-emphasis-color: #fff;
    --bs-heading-color: var(--bnv-text);
    --bs-secondary-color: var(--bnv-muted);
    --bs-secondary-bg: var(--bnv-surface-2);
    --bs-tertiary-bg: var(--bnv-surface);
    --bs-border-color: var(--bnv-border);
    --bs-border-color-translucent: var(--bnv-border);
    --bs-primary: #8ab4ff;
    --bs-primary-rgb: 138, 180, 255;
    --bs-link-color: #8ab4ff;
    --bs-link-color-rgb: 138, 180, 255;
    --bs-link-hover-color: #b3cdff;
    --bs-link-hover-color-rgb: 179, 205, 255;
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;
    --bs-border-radius-2xl: 0;
    --bs-border-radius-pill: 0;
    --bs-box-shadow: none;
    --bs-box-shadow-sm: none;
    --bs-box-shadow-lg: none;
    --bs-box-shadow-inset: none;
    --bs-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bs-font-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --bs-focus-ring-color: rgba(138, 180, 255, .5);
    --bs-code-color: #d4d4d8;
}

html { scroll-behavior: smooth; scroll-padding-top: 72px; }
body {
    background: var(--bnv-bg);
    color: var(--bnv-text);
    font-family: var(--bs-font-sans-serif);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main { flex: 1 0 auto; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .font-display { font-family: var(--bs-font-sans-serif); font-weight: 700; letter-spacing: -0.01em; }
.text-muted, .text-body-secondary { color: var(--bnv-muted) !important; }
.text-faint { color: var(--bnv-faint) !important; }
.text-success { color: var(--bnv-success) !important; }
.text-danger { color: var(--bnv-danger) !important; }
.text-warning { color: var(--bnv-warning) !important; }
::selection { background: rgba(138, 180, 255, .35); }

/* ---------- Focus: one flat 2px ring everywhere ---------- */
:focus-visible { outline: 2px solid var(--bnv-accent); outline-offset: 2px; }
.btn:focus-visible, .btn-close:focus-visible, .navbar-toggler:focus-visible, .nav-link:focus-visible,
.page-link:focus-visible, .dropdown-item:focus-visible, .form-check-input:focus-visible {
    box-shadow: none; outline: 2px solid var(--bnv-accent); outline-offset: 2px;
}
.accordion-button:focus-visible { outline: 2px solid var(--bnv-accent); outline-offset: -2px; }
.btn-close:focus, .navbar-toggler:focus, .accordion-button:focus, .page-link:focus { box-shadow: none; }
.btn-check:focus-visible + .btn { box-shadow: none; outline: 2px solid var(--bnv-accent); outline-offset: 2px; }

/* ---------- Top bars & navbar ---------- */
.bnv-topbar { font-size: .8rem; font-weight: 600; text-align: center; padding: .45rem 1rem; }
.bnv-topbar.test { background: var(--bnv-warning); color: #0b0b0c; }
.bnv-topbar.announce { background: var(--bnv-surface-2); color: var(--bnv-text); border-bottom: 1px solid var(--bnv-border); }
.bnv-nav { --bs-navbar-padding-y: .6rem; background: var(--bnv-bg); border-bottom: 1px solid var(--bnv-border); }
.bnv-nav .navbar-brand { display: flex; align-items: center; gap: .55rem; font-size: 1.1rem; font-weight: 700; letter-spacing: -0.01em; color: var(--bnv-text); }
.bnv-nav .navbar-brand img { width: 26px; height: 26px; }
.bnv-nav .brand-tag { display: block; margin-top: 2px; font-size: .7rem; font-weight: 500; color: var(--bnv-faint); }
.bnv-nav .nav-link { color: var(--bnv-muted); font-weight: 500; font-size: .92rem; padding: .55rem .75rem !important; transition: color .12s, background-color .12s; }
.bnv-nav .nav-link:hover { color: #fff; }
.bnv-nav .nav-link.active { color: #fff; background: var(--bnv-surface-2); }
@media (max-width: 991.98px) {
    .bnv-nav .navbar-nav { border-top: 1px solid var(--bnv-border); margin-top: .6rem; }
    .bnv-nav .nav-link { display: flex; align-items: center; min-height: 44px; padding-left: 0 !important; padding-right: 0 !important; }
    .bnv-nav .nav-link.active { background: transparent; }
}
.bnv-nav .navbar-toggler { min-width: 40px; min-height: 40px; }
.btn-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--bnv-border-strong); background: transparent; color: var(--bnv-text); position: relative; transition: background-color .12s, border-color .12s; }
.btn-icon:hover { background: var(--bnv-surface-2); border-color: var(--bnv-border-hover); color: #fff; }
.cart-count { position: absolute; top: -7px; right: -7px; min-width: 20px; height: 20px; padding: 0 4px; background: var(--bnv-primary); color: var(--bnv-on-primary); font-size: .7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--bnv-bg); font-variant-numeric: tabular-nums; }
.dropdown-menu {
    --bs-dropdown-bg: var(--bnv-surface); --bs-dropdown-border-color: var(--bnv-border-strong);
    --bs-dropdown-border-radius: 0; --bs-dropdown-inner-border-radius: 0; --bs-dropdown-box-shadow: none;
    --bs-dropdown-link-color: var(--bnv-text); --bs-dropdown-link-hover-color: #fff; --bs-dropdown-link-hover-bg: var(--bnv-surface-2);
    --bs-dropdown-link-active-color: #fff; --bs-dropdown-link-active-bg: var(--bnv-surface-2);
    --bs-dropdown-divider-bg: var(--bnv-border); --bs-dropdown-header-color: var(--bnv-faint);
}
.dropdown-item { padding-top: .55rem; padding-bottom: .55rem; }

/* ---------- Buttons ---------- */
.btn { --bs-btn-font-weight: 600; --bs-btn-border-radius: 0; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; transition: color .12s, background-color .12s, border-color .12s; }
.btn-lg { --bs-btn-padding-y: .7rem; --bs-btn-padding-x: 1.25rem; --bs-btn-font-size: 1rem; }
.btn-sm { --bs-btn-padding-y: .4rem; --bs-btn-padding-x: .75rem; --bs-btn-font-size: .85rem; }
.btn-brand {
    --bs-btn-color: var(--bnv-on-primary); --bs-btn-bg: var(--bnv-primary); --bs-btn-border-color: var(--bnv-primary);
    --bs-btn-hover-color: var(--bnv-on-primary); --bs-btn-hover-bg: var(--bnv-primary-hover); --bs-btn-hover-border-color: var(--bnv-primary-hover);
    --bs-btn-active-color: var(--bnv-on-primary); --bs-btn-active-bg: #e4e4e7; --bs-btn-active-border-color: #e4e4e7;
    --bs-btn-disabled-color: var(--bnv-on-primary); --bs-btn-disabled-bg: #a1a1aa; --bs-btn-disabled-border-color: #a1a1aa; --bs-btn-disabled-opacity: .6;
}
.btn-soft {
    --bs-btn-color: var(--bnv-text); --bs-btn-bg: transparent; --bs-btn-border-color: var(--bnv-border-strong);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bnv-surface-2); --bs-btn-hover-border-color: var(--bnv-border-hover);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--bnv-surface-2); --bs-btn-active-border-color: var(--bnv-border-hover);
    --bs-btn-disabled-color: var(--bnv-muted); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--bnv-border);
}
/* Telegram support / help buttons (Telegram is the only customer channel) */
.btn-telegram {
    --bs-btn-color: #2aabee; --bs-btn-bg: transparent; --bs-btn-border-color: rgba(42, 171, 238, .55);
    --bs-btn-hover-color: #5cc1f3; --bs-btn-hover-bg: rgba(42, 171, 238, .1); --bs-btn-hover-border-color: #2aabee;
    --bs-btn-active-color: #5cc1f3; --bs-btn-active-bg: rgba(42, 171, 238, .14); --bs-btn-active-border-color: #2aabee;
}
/* Solid Telegram-blue button (#229ED9, white text, the same in both themes): the claim box's "Any issues? Chat with
   us on Telegram" (templates/main.html .claim-tg). Telegram's own blue: white on #229ED9 is about 3:1 (below WCAG AA for 14px text; kept for the brand match). */
.btn-telegram-fill {
    --bs-btn-color: #fff; --bs-btn-bg: #229ed9; --bs-btn-border-color: #229ed9;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #1c8dc4; --bs-btn-hover-border-color: #1c8dc4;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #187db0; --bs-btn-active-border-color: #187db0;
    --bs-btn-focus-shadow-rgb: 34, 158, 217;
}
.btn.is-loading { position: relative; pointer-events: none; opacity: .85; }
.btn.is-loading .btn-label { visibility: hidden; }
.btn.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; left: calc(50% - 9px); top: calc(50% - 9px); border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: bnv-spin .7s linear infinite; }
@keyframes bnv-spin { to { transform: rotate(360deg); } }
.btn-close { border-radius: 0; padding: .75em !important; }   /* 40px tap target */
.btn-outline-danger {
    --bs-btn-color: var(--bnv-danger); --bs-btn-border-color: rgba(248, 113, 113, .5);
    --bs-btn-hover-color: #fca5a5; --bs-btn-hover-bg: rgba(248, 113, 113, .1); --bs-btn-hover-border-color: var(--bnv-danger);
    --bs-btn-active-color: #fca5a5; --bs-btn-active-bg: rgba(248, 113, 113, .15); --bs-btn-active-border-color: var(--bnv-danger);
}

/* ---------- Surfaces ---------- */
.surface { background: var(--bnv-surface); border: 1px solid var(--bnv-border); border-radius: 0; }
.card { --bs-card-bg: var(--bnv-surface); --bs-card-border-color: var(--bnv-border); --bs-card-border-radius: 0; --bs-card-inner-border-radius: 0; --bs-card-cap-bg: transparent; }
.section { padding-top: 3rem; padding-bottom: 3rem; }   /* vertical only: safe to combine with .container */
.section-sm { padding-top: 2rem; padding-bottom: 2rem; }
.divider-fade { height: 1px; border: 0; background: var(--bnv-border); opacity: 1; }
.alert { --bs-alert-border-radius: 0; }
.tooltip { --bs-tooltip-border-radius: 0; }
.pagination { --bs-pagination-border-radius: 0; }
.progress, .progress-stacked { --bs-progress-border-radius: 0; }
.nav { --bs-nav-pills-border-radius: 0; }

/* ---------- Forms ---------- */
.form-control, .form-select { background-color: var(--bnv-bg); border-color: var(--bnv-border-strong); color: var(--bnv-text); border-radius: 0; padding: .65rem .85rem; transition: border-color .12s; }
.form-control:focus, .form-select:focus { background-color: var(--bnv-bg); border-color: var(--bnv-accent); box-shadow: 0 0 0 1px var(--bnv-accent); color: #fff; }
.form-control.is-invalid:focus, .form-select.is-invalid:focus { box-shadow: 0 0 0 1px var(--bs-form-invalid-border-color); }
.form-control::placeholder { color: var(--bnv-faint); }
.form-control-lg, .form-select-lg { font-size: 1rem; }
.form-label { font-size: .8rem; font-weight: 600; color: var(--bnv-muted); }
.form-text { color: var(--bnv-faint); }
.form-floating > .form-control { padding: 1rem .85rem; }
.form-floating > label { color: var(--bnv-faint); }
.input-group-text { background: var(--bnv-surface-2); border-color: var(--bnv-border-strong); color: var(--bnv-muted); border-radius: 0; }
.form-check-input { background-color: var(--bnv-bg); border-color: #71717a; }
.form-check-input[type="checkbox"] { border-radius: 0; }
.form-check-input:focus { border-color: var(--bnv-accent); box-shadow: none; }
.form-check-input:checked { background-color: var(--bnv-accent); border-color: var(--bnv-accent); }
.form-check-input:checked[type="checkbox"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230b0b0c' stroke-linecap='square' stroke-width='3' d='m5.5 10 3 3 6-6'/%3e%3c/svg%3e"); }
.form-switch .form-check-input { border-radius: 0; --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3crect x='-3' y='-3' width='6' height='6' fill='%23a1a1aa'/%3e%3c/svg%3e"); }
.form-switch .form-check-input:focus { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3crect x='-3' y='-3' width='6' height='6' fill='%238ab4ff'/%3e%3c/svg%3e"); }
.form-switch .form-check-input:checked { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3crect x='-3' y='-3' width='6' height='6' fill='%230b0b0c'/%3e%3c/svg%3e"); }
[data-bs-theme="dark"] .form-switch .form-check-input:not(:checked):not(:focus) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3crect x='-3' y='-3' width='6' height='6' fill='%23a1a1aa'/%3e%3c/svg%3e"); }

/* ---------- Badges / chips ---------- */
.badge { --bs-badge-border-radius: 0; --bs-badge-font-weight: 600; }
.badge-save { background: rgba(74, 222, 128, .1); color: var(--bnv-success); border: 1px solid rgba(74, 222, 128, .35); font-weight: 600; }
.badge-hot { background: var(--bnv-warning); color: #0b0b0c; font-weight: 700; }
.badge-soft { background: var(--bnv-surface-2); color: var(--bnv-muted); border: 1px solid var(--bnv-border); font-weight: 500; }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: .45rem .9rem; border: 1px solid var(--bnv-border-strong); border-radius: 0; background: transparent; color: var(--bnv-muted); font-size: .85rem; font-weight: 500; white-space: nowrap; transition: color .12s, border-color .12s, background-color .12s; }
.chip:hover { color: #fff; border-color: var(--bnv-border-hover); }
.chip.active { background: var(--bnv-primary); color: var(--bnv-on-primary); border-color: var(--bnv-primary); }
.chip-scroller { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.chip-scroller::-webkit-scrollbar { display: none; }
.chip-count { margin-left: .35rem; font-size: .8em; font-weight: 600; color: var(--bnv-faint); font-variant-numeric: tabular-nums; }
.chip:hover .chip-count, .chip.active .chip-count { color: inherit; }

/* ---------- Prices ---------- */
.price { font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.price-was { color: var(--bnv-faint); text-decoration: line-through; font-size: .85em; font-variant-numeric: tabular-nums; }
.price-shopee { color: var(--bnv-shopee); font-variant-numeric: tabular-nums; }
s.price-shopee { text-decoration-thickness: 1px; }
.shopee-was { font-size: .86rem; color: var(--bnv-muted); white-space: nowrap; }
.shopee-was .lbl { color: var(--bnv-muted); font-weight: 500; }
.shopee-was s.price-shopee, .pc-was s.price-shopee { font-weight: 600; text-decoration-thickness: 1.5px; }

/* ---------- Product cards ---------- */
.product-card { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--bnv-surface); border: 1px solid var(--bnv-border); overflow: hidden; color: inherit; text-decoration: none; transition: border-color .12s; }
.product-card:hover { border-color: var(--bnv-border-hover); color: inherit; }
.product-thumb { position: relative; aspect-ratio: 1 / 1; overflow: hidden; display: flex; align-items: center; justify-content: center; background: hsl(var(--h, 240) 8% 15%); border-bottom: 1px solid var(--bnv-border); }
/* Shopee product photos are square: show the whole image, never crop it */
.product-thumb img { width: 100%; height: 100%; object-fit: contain; }
.product-thumb .monogram { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.01em; color: rgba(255, 255, 255, .82); }
.product-thumb .corner { position: absolute; top: 0; left: 0; display: flex; }
.product-thumb .corner .badge { padding: .4rem .55rem; }
.product-thumb .save-flag { position: absolute; top: 0; right: 0; }
.product-body { padding: .9rem 1rem 1rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.product-body .title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; }
.product-body .title a { color: inherit; text-decoration: none; }
.product-body .title a:focus-visible { outline: none; }
.product-body .title a:focus-visible::after { outline: 2px solid var(--bnv-accent); outline-offset: -2px; }
.product-body .sub { margin: 0; color: var(--bnv-muted); font-size: .85rem; line-height: 1.45; flex: 1; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-cat { font-size: .78rem; font-weight: 500; color: var(--bnv-faint); }
.save-flag { display: flex; align-items: center; justify-content: center; padding: .45rem .65rem; line-height: 1.05; color: #0b0b0c; background: var(--bnv-success); }
.save-flag b { font-size: 1.02rem; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.save-flag.lg { padding: .6rem .85rem; }
.save-flag.lg b { font-size: 1.3rem; }
/* Card foot (store/_product_card.html): prices + the Order button on one row, the savings chip under them. On narrow
   cards (360px phones and the like) prices, chip and button stack: see "Narrow cards" in the savings section. */
.product-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "prices act" "chip chip"; align-items: end; column-gap: .75rem; margin-top: .5rem; padding-top: .75rem; border-top: 1px solid var(--bnv-border); }
.product-foot > .price-stack { grid-area: prices; }
.product-foot > .btn-add, .product-foot > .soldout-tag { grid-area: act; justify-self: end; }
.product-foot > .save-row { grid-area: chip; }
.price-stack { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.price-line { display: flex; align-items: baseline; gap: .35rem; }
.price-line .from { font-size: .75rem; font-weight: 500; color: var(--bnv-muted); }
.price-line .price { font-size: 1.2rem; line-height: 1.1; }
.btn-add { position: relative; z-index: 2; flex-shrink: 0; min-height: 40px; padding: .45rem .95rem; font-size: .88rem; }
.btn-add .bi { display: none; }
.soldout-tag { position: relative; z-index: 2; }
.product-card.is-soldout .product-thumb { filter: grayscale(1) brightness(.7); }
@media (max-width: 575.98px) {
    .product-card { flex-direction: row; }
    .product-card .product-thumb { width: 112px; min-height: 112px; align-self: stretch; flex-shrink: 0; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--bnv-border); }
    .product-card .product-thumb .monogram { font-size: 1.7rem; }
    .product-card .product-thumb .corner { display: none; }
    .product-card .product-thumb .save-flag { top: auto; right: 0; bottom: 0; left: 0; padding: .35rem .2rem; }
    .product-card .product-thumb .save-flag b { font-size: .86rem; letter-spacing: 0; }
    .product-body { min-width: 0; gap: .2rem; padding: .75rem .85rem .8rem; }
    .product-body .title { font-size: .98rem; }
    .product-body .sub { font-size: .8rem; }
    .product-foot { margin-top: .3rem; padding-top: .55rem; }
    .price-line .price { font-size: 1.1rem; }
    .btn-add { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; }
    .btn-add .bi { display: inline-block; }
    .btn-add .add-text { display: none; }
}

/* ---------- Credentials (claim + order history) ---------- */
.credential-block { background: var(--bnv-bg); border: 1px solid var(--bnv-border-strong); padding: .9rem 1rem; white-space: pre-wrap; word-break: break-word; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .85rem; line-height: 1.6; color: #e4e4e7; text-align: left; }
.credential-block::first-line { color: var(--bnv-accent); font-weight: 600; }
.smart-copy-container { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.copy-action-btn { flex: 1 1 140px; min-height: 40px; background: transparent; border: 1px solid var(--bnv-border-strong); color: var(--bnv-text); padding: .55rem .8rem; font-size: .84rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; transition: color .12s, background-color .12s, border-color .12s; }
.copy-action-btn:hover { background: var(--bnv-surface-2); border-color: var(--bnv-border-hover); color: #fff; }
.copy-action-btn.copied { background: rgba(74, 222, 128, .1); border-color: var(--bnv-success); color: var(--bnv-success); }

/* ---------- Modals / offcanvas / toasts ---------- */
.modal {
    --bs-modal-bg: var(--bnv-surface); --bs-modal-border-color: var(--bnv-border-strong);
    --bs-modal-border-radius: 0; --bs-modal-inner-border-radius: 0; --bs-modal-box-shadow: none;
    --bs-modal-header-border-color: var(--bnv-border); --bs-modal-footer-border-color: var(--bnv-border);
}
.modal-content { box-shadow: none; }
.modal-backdrop { --bs-backdrop-opacity: .8; }
.offcanvas { --bs-offcanvas-bg: var(--bnv-surface); --bs-offcanvas-border-color: var(--bnv-border-strong); --bs-offcanvas-width: 420px; --bs-offcanvas-box-shadow: none; }
.toast { --bs-toast-bg: var(--bnv-surface-2); --bs-toast-border-color: var(--bnv-border-strong); --bs-toast-color: var(--bnv-text); --bs-toast-border-radius: 0; --bs-toast-box-shadow: none; }
@media (max-width: 575.98px) { .modal-dialog { margin-left: 1rem; margin-right: 1rem; } }

/* ---------- Tables / lists / accordion ---------- */
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--bnv-border); --bs-table-hover-bg: var(--bnv-surface-2); }
.list-group { --bs-list-group-bg: transparent; --bs-list-group-border-color: var(--bnv-border); --bs-list-group-border-radius: 0; }
.accordion {
    --bs-accordion-bg: transparent; --bs-accordion-color: var(--bnv-text); --bs-accordion-border-color: var(--bnv-border);
    --bs-accordion-border-radius: 0; --bs-accordion-inner-border-radius: 0;
    --bs-accordion-btn-bg: transparent; --bs-accordion-btn-color: var(--bnv-text);
    --bs-accordion-active-bg: transparent; --bs-accordion-active-color: #fff; --bs-accordion-btn-focus-box-shadow: none;
}
.accordion-button { font-weight: 600; }
.accordion-button::after, [data-bs-theme="dark"] .accordion-button::after {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23a1a1aa' stroke-width='1.5' stroke-linecap='square'%3e%3cpath d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ededed' stroke-width='1.5' stroke-linecap='square'%3e%3cpath d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

/* ---------- Motion: decorative motion removed ---------- */
.skeleton { background: var(--bnv-surface-2); }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Footer ---------- */
.bnv-footer { border-top: 1px solid var(--bnv-border); color: var(--bnv-faint); font-size: .85rem; }
.bnv-footer a { display: inline-block; padding: .6rem 0; color: var(--bnv-muted); text-decoration: none; }
.bnv-footer a:hover { color: #fff; }

/* ---------- Mobile ---------- */
@media (max-width: 575.98px) {
    .container, .container-fluid { --bs-gutter-x: 2rem; }   /* 16px side gutter on phones */
    .section { padding-top: 2.25rem; padding-bottom: 2.25rem; }
    .offcanvas { --bs-offcanvas-width: 100vw; }
}

/* ==========================================================================
   Storefront: home claim + shop, product page, cart, checkout, gateway, 404.
   ========================================================================== */

/* ---------- Shared bits ---------- */
.page-title { font-size: 1.6rem; font-weight: 700; letter-spacing: -0.01em; }
.section-title { font-size: 1.4rem; font-weight: 700; line-height: 1.2; margin: 0 0 .4rem; }
.min-w-0 { min-width: 0; }
.link-plain { display: inline-flex; align-items: center; min-height: 40px; font-size: .88rem; text-decoration: none; }
.link-plain:hover { text-decoration: underline; }
.empty-state { text-align: center; padding: 2.5rem 1.25rem; max-width: 540px; margin: 0 auto; }
.empty-state.surface { max-width: none; }
.empty-state > i { display: block; margin-bottom: .75rem; font-size: 1.5rem; color: var(--bnv-faint); }

/* ---------- Home: hero (row 1) — the claim card, middle-right. The phone stage on its left lives in static/css/hero-phone.css. ---------- */
.hero-claim {
    position: relative; overflow: clip; border-bottom: 1px solid var(--bnv-border);
    --hero-brand: #a3e635;                 /* lime: the eyebrow square + input focus, same as .claim-btn */
    --hero-ground: rgba(0, 0, 0, .72);     /* the phone's floor shadow */
    --hero-shadow: rgba(0, 0, 0, .55);     /* the key prop's drop shadow */
}
[data-bs-theme="light"] .hero-claim { --hero-brand: #059669; --hero-ground: rgba(21, 24, 31, .42); --hero-shadow: rgba(21, 24, 31, .28); }
.hero-row { min-height: calc(100svh - 64px); align-items: center; padding: 28px 0 32px; }   /* fills the first viewport on desktop */
.claim-col { display: flex; flex-direction: column; align-items: flex-start; }
@media (min-width: 992px) {
    .hero-row { padding: 24px 0; }
    .claim-col { padding-left: 52px; }
}
.claim-card { width: 100%; max-width: 480px; padding: 38px 40px 30px; }
.claim-eyebrow { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--bnv-muted); }
.claim-eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--hero-brand); }
.hero-title { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 46px; line-height: 1.02; letter-spacing: -.012em; margin: 18px 0 12px; color: var(--bnv-text); }
.hero-lead { color: var(--bnv-muted); font-size: 15px; line-height: 1.55; margin: 0 0 26px; text-wrap: pretty; }
.claim-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; margin-bottom: 8px; }
.claim-label-row label { font-size: 13px; font-weight: 600; margin: 0; }
.help-link { background: none; border: 0; padding: 6px 0; margin: -6px 0; font: inherit; font-size: 12.5px; white-space: nowrap; color: var(--bnv-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--bnv-text) 32%, transparent); }
.help-link:hover { color: var(--bnv-text); text-decoration-color: var(--bnv-text); }
.claim-card .claim-input { height: 52px; background: var(--bnv-surface-2); border: 1px solid var(--bnv-border); color: var(--bnv-text); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 15px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; padding: 0 16px; box-shadow: none; }
.claim-card .claim-input::placeholder { color: var(--bnv-muted); opacity: .7; font-weight: 400; text-transform: none; }
.claim-card .claim-input:focus { background: var(--bnv-surface-2); color: var(--bnv-text); border-color: var(--hero-brand); box-shadow: none; }
/* Redeem: 52px, label left + arrow right. Lime in dark, deep emerald in light (dark / white text, >= 4.5:1) */
.claim-btn { position: relative; height: 52px; min-height: 52px; margin-top: 12px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 600; letter-spacing: -.005em; }
.btn-brand.claim-btn {
    --bs-btn-color: #0b1a0e; --bs-btn-bg: #a3e635; --bs-btn-border-color: #a3e635;
    --bs-btn-hover-color: #0b1a0e; --bs-btn-hover-bg: #bef264; --bs-btn-hover-border-color: #bef264;
    --bs-btn-active-color: #0b1a0e; --bs-btn-active-bg: #84cc16; --bs-btn-active-border-color: #84cc16;
    --bs-btn-disabled-color: #0b1a0e; --bs-btn-disabled-bg: #d9f99d; --bs-btn-disabled-border-color: #d9f99d;
}
[data-bs-theme="light"] .btn-brand.claim-btn {
    --bs-btn-color: #fff; --bs-btn-bg: #059669; --bs-btn-border-color: #059669;
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #047857; --bs-btn-hover-border-color: #047857;
    --bs-btn-active-color: #fff; --bs-btn-active-bg: #065f46; --bs-btn-active-border-color: #065f46;
    --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: #6ee7b7; --bs-btn-disabled-border-color: #6ee7b7;
}
.claim-btn .btn-arrow { font-weight: 500; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.claim-btn:hover .btn-arrow { transform: translateX(4px); }
/* Busy (app.js adds .is-loading on submit): "Verifying" + three dots as one centred group; the arrow leaves the layout, no spinner */
.claim-btn .btn-busy { display: none; align-items: center; gap: 5px; }
.claim-btn .btn-busy i { display: inline-block; width: 5px; height: 5px; background: currentColor; opacity: .35; animation: bnv-vdot 1s ease-in-out infinite; }
.claim-btn .btn-busy i:first-child { margin-left: 8px; }
.claim-btn .btn-busy i:nth-child(2) { animation-delay: .16s; }
.claim-btn .btn-busy i:nth-child(3) { animation-delay: .32s; }
@keyframes bnv-vdot { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.claim-btn.is-loading { justify-content: center; opacity: 1; cursor: progress; }
.claim-btn.is-loading .btn-label, .claim-btn.is-loading .btn-arrow { display: none; }
.claim-btn.is-loading .btn-busy { display: inline-flex; }
.claim-btn.is-loading::after { content: none; }
/* #claimLoading is the screen-reader status while verifying (visually-hidden in the markup) */
.claim-loading { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .75rem; color: var(--bnv-muted); font-size: .85rem; font-weight: 500; }
.claim-loading[hidden] { display: none; }
.claim-hint { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--bnv-muted); }
.claim-hint strong { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 600; color: var(--bnv-text); }
.claim-hint a { color: var(--bnv-text); text-underline-offset: 3px; }
.claim-divider { height: 1px; background: var(--bnv-border); margin: 22px 0 18px; }
.claim-tg { height: auto; min-height: 48px; padding-block: 8px; line-height: 1.25; margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 14px; font-weight: 700; }
.claim-tg .bi { font-size: 18px; line-height: 1; }
/* the website voucher line under it (store.claim_help): one short line, the amount in the text colour */
.claim-offer { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--bnv-muted); text-align: center; }
.claim-offer strong { color: var(--bnv-text); font-weight: 700; }
/* Below lg the stage is hidden (see static/css/hero-phone.css): the card comes first, centred on tablets, edge to edge on phones */
@media (max-width: 991.98px) {
    .hero-row { min-height: 0; padding: 22px 0 12px; }
    .claim-col { align-items: center; }
    .claim-card { max-width: 520px; padding: 30px 28px 24px; }
    .hero-title { font-size: 38px; margin-top: 14px; }
    .hero-lead { font-size: 14px; margin-bottom: 20px; }
    .claim-divider { margin: 18px 0 14px; }
}
@media (max-width: 767.98px) {
    .hero-row { padding: 22px 0 8px; }
    .claim-col { align-items: flex-start; }
    .claim-card { max-width: none; padding: 26px 22px 22px; }
    .hero-title { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
    .claim-btn .btn-arrow { transition: none; }
    .claim-btn .btn-busy i { animation: none; opacity: .7; }
}

/* ---------- Home: shop (row 2) ---------- */
.shop-head { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.25rem; }
.shop-head p { max-width: 40rem; }
.shop-search { position: relative; width: 100%; flex-shrink: 0; }
.shop-search > i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--bnv-faint); pointer-events: none; }
.shop-search .form-control { padding-left: 2.5rem; height: 44px; }
.shop-chips { margin-bottom: 1.25rem; }
@media (min-width: 992px) { .shop-head { flex-direction: row; align-items: flex-end; justify-content: space-between; } .shop-search { max-width: 320px; } }

/* ---------- Home: how it works / FAQ ---------- */
.home-block { border-top: 1px solid var(--bnv-border); }
.steps { display: grid; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.steps li { padding-top: .9rem; border-top: 1px solid var(--bnv-border-strong); }
.steps h3 { margin: 0 0 .3rem; font-size: 1rem; font-weight: 700; }
.steps .step-n { margin-right: .35rem; color: var(--bnv-faint); font-variant-numeric: tabular-nums; }
.steps p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--bnv-muted); }
.faq-wrap { max-width: 820px; }
.faq-side p { font-size: .9rem; }
.faq-accordion .accordion-item { background: transparent; border: 0; border-bottom: 1px solid var(--bnv-border); }
.faq-accordion .accordion-item:first-child { border-top: 1px solid var(--bnv-border); }
.faq-accordion .accordion-button { padding: 1rem 0; background: transparent; color: var(--bnv-text); font-size: .98rem; box-shadow: none; }
.faq-accordion .accordion-button:not(.collapsed) { color: #fff; box-shadow: none; }
.faq-accordion .accordion-body { padding: 0 2rem 1.1rem 0; font-size: .92rem; line-height: 1.65; }

/* ---------- Home: claim modals ---------- */
.demo-image-wrap { overflow: hidden; border: 1px solid var(--bnv-border-strong); }
.result-modal .modal-dialog { max-width: 540px; }
.result-modal .modal-header { position: absolute; top: 0; right: 0; z-index: 2; padding: 1.65rem 1rem 0 0; }
.result-modal .modal-body { text-align: left; }
.result-modal #resultModalTitle { margin: 0 2.75rem .75rem 0; line-height: 1.3; }
.tg-banner { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding: .9rem 1rem; text-align: left; background: transparent; border: 1px solid var(--bnv-border-strong); }
.tg-icon { display: none; }
.tg-content { flex: 1; min-width: 0; }
.tg-content h4 { margin: 0 0 .2rem; font-size: .92rem; font-weight: 600; letter-spacing: 0; color: var(--bnv-text); }
.tg-content p { margin: 0; font-size: .82rem; line-height: 1.45; color: var(--bnv-muted); }
.tg-content strong { color: var(--bnv-text); font-weight: 600; }
.tg-btn {
    --bs-btn-color: var(--bnv-text); --bs-btn-bg: transparent; --bs-btn-border-color: var(--bnv-border-strong);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--bnv-surface-2); --bs-btn-hover-border-color: var(--bnv-border-hover);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--bnv-surface-2); --bs-btn-active-border-color: var(--bnv-border-hover);
    flex-shrink: 0; padding: .5rem .8rem; font-size: .8rem; font-weight: 600; letter-spacing: 0; text-transform: none; white-space: nowrap;
}
.tg-btn .bi { color: #2aabee; }
@media (max-width: 575.98px) { .tg-banner { flex-direction: column; align-items: stretch; gap: .75rem; } .tg-btn { width: 100%; } }
.notice-box { margin-top: 1rem; padding: 1rem 1.1rem; font-size: .9rem; line-height: 1.6; color: var(--bnv-text); background: rgba(251, 191, 36, .06); border: 1px solid rgba(251, 191, 36, .3); }
.notice-box p { margin: 0 0 .6rem; }
.code-viewport { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.25rem; text-align: left; }
.tip-box { display: flex; align-items: flex-start; gap: .75rem; margin-top: .75rem; padding: .75rem .9rem; font-size: .84rem; line-height: 1.5; text-align: left; color: var(--bnv-muted); background: rgba(251, 191, 36, .06); border: 1px solid rgba(251, 191, 36, .3); }
.tip-box > i { margin-top: 1px; font-size: 1.05rem; color: var(--bnv-warning); }
.tip-box strong { display: block; margin-bottom: 2px; color: var(--bnv-warning); }
.upsell-line { display: flex; align-items: center; min-height: 40px; margin-top: .75rem; font-size: .86rem; text-align: left; color: var(--bnv-muted); text-decoration: underline; text-decoration-color: var(--bnv-border-hover); text-underline-offset: 3px; transition: color .12s; }
.upsell-line:hover { color: #fff; }
.upsell-line strong { color: var(--bnv-success); font-weight: 600; }

/* ---------- Product page ---------- */
.product-page .breadcrumb { --bs-breadcrumb-divider-color: var(--bnv-faint); --bs-breadcrumb-item-active-color: var(--bnv-muted); flex-wrap: nowrap; }
.product-page .breadcrumb-item { white-space: nowrap; color: var(--bnv-faint); }
.product-page .breadcrumb-item.active { min-width: 0; }
.product-page .breadcrumb a { color: var(--bnv-muted); text-decoration: none; }
.product-page .breadcrumb a:hover { color: #fff; text-decoration: underline; }
.pd-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (min-width: 992px) {
    .pd-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; grid-template-areas: "media panel" "details panel"; column-gap: 3rem; row-gap: 1.25rem; }
    .pd-media-col { grid-area: media; }
    .pd-panel-col { grid-area: panel; }
    .pd-details-col { grid-area: details; }
    .pd-panel { position: sticky; top: 80px; }
    /* no image: buy panel first (left), details beside it */
    .pd-grid.no-media { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto; grid-template-areas: "panel details"; }
}
.pd-media { aspect-ratio: 1 / 1; border: 1px solid var(--bnv-border); }
.pd-media img { object-fit: contain; }
.pd-media .monogram { font-size: clamp(3rem, 7vw, 5rem); }
.pd-media .corner { top: 0; left: 0; }
.pd-media .save-flag { top: 0; right: 0; }
.pd-title { margin: .35rem 0; font-size: 1.75rem; font-weight: 700; line-height: 1.2; }
.pd-sub { margin-bottom: 1rem; font-size: 1rem; color: var(--bnv-muted); }
.pd-price-wrap { margin-bottom: 1.25rem; }
.pd-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .75rem; }
.pd-price .price { font-size: 1.9rem; line-height: 1; }
.pd-price .shopee-was { font-size: 1rem; }
.plan-list { display: grid; gap: .5rem; }
.plan-card { display: flex; align-items: center; gap: .75rem; margin: 0; padding: .8rem 1rem; cursor: pointer; background: var(--bnv-surface); border: 1px solid var(--bnv-border-strong); transition: border-color .12s, background-color .12s; }
.plan-card:hover { background: var(--bnv-surface-2); border-color: var(--bnv-border-hover); }
.plan-name { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; min-width: 0; font-weight: 600; }
.plan-prices { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; margin-left: auto; line-height: 1.25; text-align: right; }
.plan-prices .price { font-size: 1.05rem; }
.plan-prices s { font-size: .84rem; }
.btn-check:checked + .plan-card { background: rgba(138, 180, 255, .06); border-color: var(--bnv-accent); box-shadow: inset 0 0 0 1px var(--bnv-accent); }
.btn-check:focus-visible + .plan-card { outline: 2px solid var(--bnv-accent); outline-offset: 2px; }
.btn-check:disabled + .plan-card { cursor: not-allowed; opacity: .5; }
.pd-actions { display: grid; grid-template-columns: 1fr 1.25fr; gap: .5rem; }
.pd-actions .btn { height: 52px; }
@media (max-width: 359.98px) { .pd-actions { grid-template-columns: 1fr; } }
.pd-login-note { margin: .85rem 0 0; font-size: .82rem; color: var(--bnv-muted); }
.soldout-box { padding: .9rem 1rem; font-size: .9rem; background: var(--bnv-surface-2); border: 1px solid var(--bnv-border-strong); }
.soldout-box > i { color: var(--bnv-warning); }
.trust-list { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: 1px solid var(--bnv-border); }
.trust-list li { padding: .75rem 0; border-bottom: 1px solid var(--bnv-border); }
.trust-list strong { display: block; font-size: .9rem; font-weight: 600; }
.trust-list span { font-size: .84rem; color: var(--bnv-muted); }
.pd-section { margin-bottom: 1rem; padding: 1.25rem 1.4rem; }
.feature-list { display: grid; gap: .5rem; list-style: none; margin: 0; padding: 0; }
@media (min-width: 576px) { .feature-list { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; } }
.feature-list li { position: relative; padding-left: 1.1rem; font-size: .93rem; }
.feature-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; background: var(--bnv-muted); }
.feature-list li > i { display: none; }
.pd-desc { white-space: pre-line; overflow-wrap: anywhere; font-size: .95rem; line-height: 1.7; color: var(--bnv-muted); }
.mini-steps { display: grid; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.mini-steps li { display: flex; align-items: flex-start; gap: .6rem; font-size: .9rem; color: var(--bnv-muted); }
.mini-steps li > span { flex-shrink: 0; min-width: 1.1rem; font-weight: 700; color: var(--bnv-faint); font-variant-numeric: tabular-nums; }
.mini-steps li > span::after { content: "."; }
.mini-steps strong { color: var(--bnv-text); }
.pd-related { margin-top: 3rem; }
.buy-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; padding: .6rem 0 calc(.6rem + env(safe-area-inset-bottom)); background: var(--bnv-surface); border-top: 1px solid var(--bnv-border-strong); transform: translateY(110%); transition: transform .15s ease; }
.buy-bar.show { transform: none; }
.buy-bar .container { display: flex; align-items: center; gap: .5rem; }
.buy-bar-info { display: flex; flex-direction: column; min-width: 0; margin-right: auto; line-height: 1.2; }
.buy-bar-plan { overflow: hidden; font-size: .75rem; color: var(--bnv-muted); white-space: nowrap; text-overflow: ellipsis; }
.buy-bar .price { font-size: 1.15rem; }
.buy-bar .btn { height: 44px; }
.buy-bar .btn-soft { width: 44px; padding: 0; }
@media (max-width: 991.98px) { .page-product .bnv-footer { padding-bottom: 72px; } }

/* ---------- Cart drawer & cart page ---------- */
.drawer-lines { display: flex; flex-direction: column; flex: 1 1 auto; margin: -.5rem 0 1rem; }
.cart-line { display: flex; align-items: center; gap: .85rem; padding: .75rem 0; border-bottom: 1px solid var(--bnv-border); transition: opacity .15s; }
.cart-line:last-child { border-bottom: 0; }
.cart-thumb { position: relative; display: grid; place-items: center; flex-shrink: 0; overflow: hidden; width: 52px; height: 52px; text-decoration: none; background: hsl(var(--h, 240) 8% 17%); border: 1px solid var(--bnv-border); }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-thumb .monogram { font-size: 1rem; font-weight: 700; color: rgba(255, 255, 255, .85); }
.cart-thumb.lg { width: 64px; height: 64px; }
.cart-thumb.lg .monogram { font-size: 1.25rem; }
.cart-line-info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.cart-line-info > .badge, .cart-line-info > .product-cat { align-self: flex-start; }
.cart-line-title { overflow: hidden; font-size: .95rem; font-weight: 600; line-height: 1.3; color: var(--bnv-text); text-decoration: none; white-space: nowrap; text-overflow: ellipsis; }
a.cart-line-title:hover { color: #fff; text-decoration: underline; }
.cart-line-plan { font-size: .8rem; color: var(--bnv-muted); }
.cart-line-price { display: flex; align-items: baseline; gap: .45rem; margin-top: .15rem; }
.cart-line-price .price { font-size: 1rem; }
.cart-line-price s { font-size: .78rem; }
.cart-remove { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; color: var(--bnv-muted); background: transparent; border: 1px solid var(--bnv-border-strong); transition: color .12s, background-color .12s, border-color .12s; }
.cart-remove:hover { color: var(--bnv-danger); background: rgba(248, 113, 113, .08); border-color: rgba(248, 113, 113, .5); }
.drawer-foot { display: flex; flex-direction: column; gap: .55rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--bnv-border); }
.save-callout { margin: 0; font-size: .85rem; color: var(--bnv-success); font-variant-numeric: tabular-nums; }
.save-callout > i { display: none; }
.save-callout strong { font-weight: 700; }
.sum-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: .92rem; color: var(--bnv-muted); font-variant-numeric: tabular-nums; }
.sum-row + .sum-row { margin-top: .35rem; }
.total-row { font-size: 1rem; font-weight: 700; color: var(--bnv-text); }
.total-row .price { font-size: 1.4rem; }
.drawer-note { margin: 0; font-size: .8rem; text-align: center; color: var(--bnv-muted); }
.drawer-link { display: inline-flex; align-items: center; min-height: 40px; font-size: .88rem; font-weight: 600; text-decoration: none; }
.drawer-link:hover { text-decoration: underline; }
.drawer-empty { margin: auto 0; padding: 2rem 1rem; text-align: center; }
.drawer-empty-icon { display: none; }
.cart-list { padding: 0; }
.cart-page-line { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--bnv-border); transition: opacity .15s; }
.cart-page-line:last-child { border-bottom: 0; }
.cart-page-line.is-removing, .cart-line.is-removing { opacity: .35; }
.cart-page-price { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; text-align: right; }
.cart-page-price .btn-link { display: inline-flex; align-items: center; min-height: 40px; }
@media (max-width: 575.98px) {
    .cart-page-line { gap: .75rem; padding: .9rem; }
    .cart-thumb.lg { width: 52px; height: 52px; }
    .cart-page-line .badge-save { display: none; }
}
.summary-card { top: 80px; padding: 1.4rem; }
.pay-note { display: flex; align-items: center; justify-content: center; gap: .5rem; font-size: .8rem; text-align: center; color: var(--bnv-muted); }
.promise-strip { padding: .85rem 1rem; font-size: .88rem; line-height: 1.55; color: var(--bnv-muted); background: transparent; border: 1px solid var(--bnv-border); }
.promise-strip > i { display: none; }
.promise-strip strong { color: var(--bnv-text); }
.callout-renew { padding: .7rem .9rem; font-size: .84rem; line-height: 1.45; color: var(--bnv-muted); background: rgba(138, 180, 255, .06); border: 1px solid rgba(138, 180, 255, .3); }
.callout-renew > i { display: none; }
.callout-renew strong { color: var(--bnv-text); }

/* ---------- Checkout & test gateway ---------- */
.checkout-steps { display: flex; gap: .5rem; list-style: none; margin: 0 0 1.25rem; padding: 0; font-size: .8rem; font-weight: 600; color: var(--bnv-faint); }
.checkout-steps li { display: flex; align-items: center; gap: .5rem; white-space: nowrap; }
.checkout-steps li:not(:last-child)::after { content: ""; width: 24px; height: 1px; margin-left: .25rem; background: var(--bnv-border-strong); }
.checkout-steps li > span { display: grid; place-items: center; width: 22px; height: 22px; font-size: .72rem; border: 1px solid var(--bnv-border-strong); }
.checkout-steps li.done { color: var(--bnv-success); }
.checkout-steps li.done > span { background: rgba(74, 222, 128, .1); border-color: var(--bnv-success); }
.checkout-steps li.active { color: #fff; }
.checkout-steps li.active > span { color: var(--bnv-on-primary); background: var(--bnv-primary); border-color: var(--bnv-primary); }
.checkout-steps .step-label { font-weight: 600; }
@media (max-width: 575.98px) { .checkout-steps li:not(.active) .step-label { display: none; } }
.checkout-card { margin-bottom: 1rem; padding: 1.25rem 1.4rem; }
.account-pill { margin-bottom: 1.1rem; padding: .7rem .9rem; font-size: .88rem; background: var(--bnv-surface-2); border: 1px solid var(--bnv-border); }
.account-pill > i { display: none; }
.account-pill small { display: block; color: var(--bnv-muted); }
.pay-method { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; background: rgba(138, 180, 255, .05); border: 1px solid var(--bnv-accent); }
.pay-method strong { display: block; font-size: .92rem; }
.pay-method small { font-size: .8rem; color: var(--bnv-muted); }
.pay-method-icon { display: none; }
.summary-lines { display: flex; flex-direction: column; gap: .85rem; list-style: none; margin: 0 0 1rem; padding: 0; }
.summary-lines li { display: flex; align-items: flex-start; gap: .75rem; }
.summary-lines .cart-thumb { width: 44px; height: 44px; }
.summary-lines .cart-thumb .monogram { font-size: .9rem; }
.summary-line-info { flex: 1; min-width: 0; }
.summary-line-save { display: flex; flex-wrap: wrap; gap: .1rem .6rem; margin-top: .15rem; font-size: .78rem; }
.summary-lines li > .price { font-size: 1rem; white-space: nowrap; }
.pay-btn { height: 54px; font-size: 1.02rem; }
.gateway-card { max-width: 460px; margin: 1rem auto; padding: 1.5rem; }
.gateway-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.gateway-badge { padding: .3rem .55rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #0b0b0c; background: var(--bnv-warning); }

/* ---------- Phone polish (keeps the shared navbar on one row for guests at 360-399px) ---------- */
@media (max-width: 399.98px) {
    .bnv-nav .navbar-brand { margin-right: .25rem; gap: .45rem; }
    .bnv-nav .navbar-brand > span { font-size: 1.05rem; }
    .bnv-nav .order-lg-3 { gap: .35rem !important; }
    .bnv-nav .navbar-toggler { padding-left: .2rem !important; padding-right: .2rem !important; }
}
@media (max-width: 575.98px) {
    .pd-actions { grid-template-columns: 1fr 1fr; }
    .pd-actions .btn { padding-inline: .5rem; font-size: 1rem; white-space: nowrap; }
    .pd-title { font-size: 1.5rem; }
    .pd-price .price { font-size: 1.7rem; }
    .checkout-card, .summary-card { padding: 1.1rem 1.1rem 1.2rem; }
    .gateway-card { padding: 1.25rem; }
}

/* ==========================================================================
   v2.1b: coloured, flat product tiles (one solid tone per product, no fades)
   ========================================================================== */
.product-thumb { background: hsl(var(--h, 240) 32% 21%); }
.product-thumb .monogram { color: #fff; }
.cart-thumb { background: hsl(var(--h, 240) 32% 21%); }
.cart-thumb .monogram { color: #fff; }

/* ==========================================================================
   LIGHT (white) THEME — html[data-bs-theme="light"], toggled by the navbar button
   (static/js/app.js, BNV.theme). Same layout and components; only the tokens and the
   few literal dark values below change. Contrast: text >= 4.5:1 on every surface.
   Keep this block ABOVE the hero-phone section (edits there replace whole blocks).
   ========================================================================== */
[data-bs-theme="light"] {
    --bnv-bg: #ffffff;
    --bnv-bg-2: #f6f7f9;
    --bnv-surface: #ffffff;
    --bnv-surface-2: #f3f4f6;
    --bnv-border: #e4e6eb;
    --bnv-border-strong: #cfd3da;
    --bnv-border-hover: #aeb4bf;
    --bnv-text: #15181f;
    --bnv-muted: #4b5563;
    --bnv-faint: #666d7b;          /* >= 4.5:1 on bg, surface and surface-2 (#6b7280 was 4.39 on surface-2) */
    --bnv-accent: #1d4ed8;
    --bnv-primary: #15181f;        /* primary button: near-black on white */
    --bnv-primary-hover: #000000;
    --bnv-on-primary: #ffffff;
    --bnv-brand: #1d4ed8;
    --bnv-brand-2: #1d4ed8;
    --bnv-success: #15803d;
    --bnv-warning: #b45309;
    --bnv-danger: #b91c1c;
    --bnv-shopee: #c93c1b;          /* >= 4.5:1 on white and surface-2 (struck Shopee prices are read, not decoration) */
    --bnv-save-tint: rgba(21, 128, 61, .07);
    --bnv-save-line: rgba(21, 128, 61, .35);

    --bs-emphasis-color: #000;
    --bs-primary: #1d4ed8;
    --bs-primary-rgb: 29, 78, 216;
    --bs-link-color: #1d4ed8;
    --bs-link-color-rgb: 29, 78, 216;
    --bs-link-hover-color: #1e3a8a;
    --bs-link-hover-color-rgb: 30, 58, 138;
    --bs-focus-ring-color: rgba(29, 78, 216, .35);
    --bs-code-color: #374151;
    color-scheme: light;
}

/* Literal dark values that the tokens don't cover */
[data-bs-theme="light"] ::selection { background: rgba(29, 78, 216, .18); }
[data-bs-theme="light"] .bnv-nav .nav-link:hover, [data-bs-theme="light"] .bnv-nav .nav-link.active,
[data-bs-theme="light"] .btn-icon:hover, [data-bs-theme="light"] .chip:hover, [data-bs-theme="light"] .help-link:hover,
[data-bs-theme="light"] .bnv-footer a:hover, [data-bs-theme="light"] .copy-action-btn:hover,
[data-bs-theme="light"] .upsell-line:hover, [data-bs-theme="light"] .product-page .breadcrumb a:hover,
[data-bs-theme="light"] a.cart-line-title:hover, [data-bs-theme="light"] .faq-accordion .accordion-button:not(.collapsed),
[data-bs-theme="light"] .checkout-steps li.active { color: #000; }
[data-bs-theme="light"] .btn-soft, [data-bs-theme="light"] .tg-btn {
    --bs-btn-hover-color: #000; --bs-btn-active-color: #000;
}
[data-bs-theme="light"] .btn-brand {
    --bs-btn-active-bg: #2b2f38; --bs-btn-active-border-color: #2b2f38;
    --bs-btn-disabled-bg: #9ca3af; --bs-btn-disabled-border-color: #9ca3af;
}
[data-bs-theme="light"] .btn-telegram {
    --bs-btn-color: #0369a1; --bs-btn-border-color: rgba(3, 105, 161, .55);
    --bs-btn-hover-color: #075985; --bs-btn-hover-bg: rgba(3, 105, 161, .08); --bs-btn-hover-border-color: #0369a1;
    --bs-btn-active-color: #075985; --bs-btn-active-bg: rgba(3, 105, 161, .12); --bs-btn-active-border-color: #0369a1;
}
[data-bs-theme="light"] .btn-outline-danger {
    --bs-btn-border-color: rgba(185, 28, 28, .5); --bs-btn-hover-color: #991b1b; --bs-btn-active-color: #991b1b;
    --bs-btn-hover-bg: rgba(185, 28, 28, .06); --bs-btn-active-bg: rgba(185, 28, 28, .1);
}
[data-bs-theme="light"] .dropdown-menu { --bs-dropdown-link-hover-color: #000; --bs-dropdown-link-active-color: #000; }
[data-bs-theme="light"] .accordion { --bs-accordion-active-color: #000; }
[data-bs-theme="light"] .accordion-button::after {
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='square'%3e%3cpath d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2315181f' stroke-width='1.5' stroke-linecap='square'%3e%3cpath d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}
[data-bs-theme="light"] .form-control:focus, [data-bs-theme="light"] .form-select:focus { color: #000; }
[data-bs-theme="light"] .form-check-input { border-color: #9ca3af; }
[data-bs-theme="light"] .form-check-input:checked[type="checkbox"] { --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='square' stroke-width='3' d='m5.5 10 3 3 6-6'/%3e%3c/svg%3e"); }
[data-bs-theme="light"] .form-switch .form-check-input:checked { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3crect x='-3' y='-3' width='6' height='6' fill='%23ffffff'/%3e%3c/svg%3e"); }
[data-bs-theme="light"] .form-switch .form-check-input:not(:checked):not(:focus) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3crect x='-3' y='-3' width='6' height='6' fill='%239ca3af'/%3e%3c/svg%3e"); }
[data-bs-theme="light"] .bnv-topbar.test { color: #15181f; background: #fcd34d; }
[data-bs-theme="light"] .badge-hot { color: #15181f; background: #fcd34d; }
[data-bs-theme="light"] .gateway-badge { color: #15181f; background: #fcd34d; }
[data-bs-theme="light"] .badge-save { background: rgba(21, 128, 61, .08); border-color: rgba(21, 128, 61, .35); }
[data-bs-theme="light"] .save-flag { color: #fff; background: #15803d; }
[data-bs-theme="light"] .credential-block { color: #15181f; background: #f6f7f9; }
[data-bs-theme="light"] .copy-action-btn.copied { background: rgba(21, 128, 61, .08); }
[data-bs-theme="light"] .modal-backdrop { --bs-backdrop-opacity: .45; }
[data-bs-theme="light"] .notice-box, [data-bs-theme="light"] .tip-box { background: #fffbeb; border-color: #fcd34d; }
[data-bs-theme="light"] .tip-box { color: #4b5563; }
[data-bs-theme="light"] .btn-check:checked + .plan-card { background: rgba(29, 78, 216, .05); }
[data-bs-theme="light"] .callout-renew { background: rgba(29, 78, 216, .05); border-color: rgba(29, 78, 216, .3); }
[data-bs-theme="light"] .pay-method { background: rgba(29, 78, 216, .04); }
[data-bs-theme="light"] .checkout-steps li.done > span { background: rgba(21, 128, 61, .08); }
[data-bs-theme="light"] .cart-remove:hover { background: rgba(185, 28, 28, .06); border-color: rgba(185, 28, 28, .5); }
/* Product tiles: same hue per product, lighter and softer; dark monogram on top */
[data-bs-theme="light"] .product-thumb, [data-bs-theme="light"] .cart-thumb { background: hsl(var(--h, 240) 45% 90%); }
[data-bs-theme="light"] .product-thumb .monogram, [data-bs-theme="light"] .cart-thumb .monogram { color: hsl(var(--h, 240) 40% 28%); }
[data-bs-theme="light"] .product-card.is-soldout .product-thumb { filter: grayscale(1) brightness(1.02); }

/* Theme toggle button (navbar): moon in dark mode, sun in light mode */
.theme-toggle .bi-sun { display: none; }
[data-bs-theme="light"] .theme-toggle .bi-sun { display: inline; }
[data-bs-theme="light"] .theme-toggle .bi-moon { display: none; }

/* Hero phone: see static/css/hero-phone.css (linked from templates/main.html, home page only). */

/* Language switch flag (inline SVG inside .btn-icon) */
.lang-toggle .flag { width: 22px; height: 11px; display: block; border: 1px solid rgba(0, 0, 0, .25); }
[data-bs-theme="light"] .lang-toggle .flag { border-color: rgba(0, 0, 0, .15); }

/* ---------- Telegram checkout (the default and only offered mode; store.telegram_checkout()) ----------
   Product page: one "Buy on Telegram" button + a one-line payment note; cards: "Buy" opens the product page's plan picker. */
.pd-actions.tg-actions { grid-template-columns: 1fr; }
.btn-tg { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; white-space: nowrap; }
.btn-tg .bi-telegram { font-size: 1.15em; line-height: 1; }
.btn-add.btn-tg .bi { display: inline-block; }
.btn-add.btn-tg .add-text { margin-left: .4rem; }
.tg-note { display: flex; gap: .5rem; align-items: flex-start; margin: .75rem 0 0; font-size: .84rem; line-height: 1.45; color: var(--bnv-muted); }
.tg-note .bi { flex-shrink: 0; margin-top: .1rem; color: var(--bnv-accent); }
/* Desktop QR (product page): the same order as Order on Telegram, for a visitor on a computer without Telegram
   Desktop. Only with a mouse on a wide screen; the code stays black on white in both themes (cameras read it). */
.tg-qr { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
    .tg-qr { display: flex; gap: .9rem; align-items: center; margin-top: .9rem; padding: .7rem .8rem;
             border: 1px solid var(--bnv-border); border-radius: var(--bnv-radius); background: var(--bnv-surface); }
}
.tg-qr-code { flex-shrink: 0; line-height: 0; }
.tg-qr-code[hidden] { display: none; }
.tg-qr-svg { width: 132px; height: 132px; border-radius: var(--bnv-radius-sm); background: #fff; }
.tg-qr-text { display: flex; flex-direction: column; gap: .2rem; font-size: .84rem; line-height: 1.45; color: var(--bnv-muted); }
.tg-qr-text strong { color: var(--bnv-text, inherit); font-size: .92rem; }
.tg-qr-text .bi { color: var(--bnv-accent); }
/* No username AND no shop Telegram link (nothing set up): a disabled "opening soon" button, no other channel
   (cards: the disabled icon button lets clicks fall through to the card's stretched link). */
.btn-add.btn-tg.btn-tg-soon { width: 40px; min-width: 40px; padding: 0; }
/* The disabled "opening soon" buy button (buy box + sticky bar) carries the main message, so it stays readable:
   muted text on surface-2, full opacity (about 7:1 in both themes) instead of white on faded grey (1.7:1 light). */
.btn-brand.btn-tg[data-tg-soon]:disabled {
    --bs-btn-disabled-opacity: 1; --bs-btn-disabled-bg: var(--bnv-surface-2);
    --bs-btn-disabled-border-color: var(--bnv-border-strong); --bs-btn-disabled-color: var(--bnv-muted);
}
/* Phones: keep the "Buy" / "Beli" label next to the Telegram icon (the lead text says "Tap Buy"). */
@media (max-width: 575.98px) {
    .btn-add.btn-tg { width: auto; min-width: 40px; padding: 0 .8rem; gap: .35rem; }
    .btn-add.btn-tg .add-text { display: inline; margin-left: .45rem; font-size: .86rem; font-weight: 600; }
}

/* ==========================================================================
   Savings, made visible: the discount bar (base.html -> store/_deal_bar.html), the home callout under the claim
   box and the price check above the shop grid (main.html), the card chips, the product page "You save" line and
   the claim result's "Buying this again?" line. Flat and square; savings in --bnv-success on --bnv-save-tint,
   Shopee prices struck in --bnv-shopee. Every number comes from the catalogue (store.savings / store._decorate).
   ========================================================================== */
/* Discount bar: one line at every width (the example shows from 992px; "every plan" / "untuk semua pelan" from
   375px in EN and from 480px in BM, the longer line) */
.bnv-topbar.deal { padding: .45rem 0; font-size: .82rem; font-weight: 500; text-align: left; color: #0b0b0c; background: var(--bnv-success); }
[data-bs-theme="light"] .bnv-topbar.deal { color: #fff; }
.deal-bar { display: flex; align-items: center; justify-content: center; gap: .9rem; min-width: 0; white-space: nowrap; }
.deal-lead { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.deal-lead b { font-weight: 800; letter-spacing: .02em; }
.deal-eg { display: none; align-items: baseline; gap: .35em; min-width: 0; padding-left: .9rem; border-left: 1px solid color-mix(in srgb, currentColor 45%, transparent); }
.deal-eg-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }   /* a long name is cut here... */
.deal-eg-prices { flex-shrink: 0; }                                         /* ...the two prices never are */
.deal-eg s { text-decoration-thickness: 1.5px; }
.deal-eg b { font-weight: 800; }
.deal-link { flex-shrink: 0; font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.deal-link::after { content: " \2192"; }
.deal-link:hover, .deal-link:focus-visible { color: inherit; text-decoration-thickness: 2px; }
.deal-link:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (min-width: 992px) {
    .deal-eg { display: inline-flex; }
    .deal-lead { flex-shrink: 0; }
    /* the hero still fills the first desktop viewport with the bar above the navbar */
    body:has(.bnv-topbar.deal) .hero-row { min-height: calc(100svh - 64px - 34px); }
}
@media (max-width: 399.98px) { .bnv-topbar.deal { font-size: .78rem; } .deal-bar { gap: .6rem; } }
@media (max-width: 359.98px) { .bnv-topbar.deal { font-size: .74rem; } .deal-bar { gap: .5rem; } }
@media (max-width: 374.98px) { .bar-more { display: none; } }
@media (max-width: 479.98px) { html[lang="ms"] .bar-more { display: none; } }

/* Home: callout under the claim card ("Buying new? Discount 35% ... e.g. save RM14.09 on StealthWriter AI 1 Month").
   A tinted block with a green rule on the left only: the card above ends with an outlined button, and a second
   outlined box right under it would read as the same kind of control. */
.deal-callout { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; max-width: 480px; margin-top: 22px; padding: 12px 16px 10px 15px; font-size: 14px; line-height: 1.5; color: var(--bnv-text); background: var(--bnv-save-tint); border-left: 3px solid var(--bnv-success); }
.deal-callout p { min-width: 0; margin: 0; }
.deal-callout strong { font-weight: 700; color: var(--bnv-success); }
.deal-callout-eg { display: block; color: var(--bnv-muted); }
.deal-callout-eg b { font-weight: 700; color: var(--bnv-success); font-variant-numeric: tabular-nums; }
.deal-callout-item { color: var(--bnv-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--bnv-text) 35%, transparent); }
.deal-callout-item:hover { color: var(--bnv-text); text-decoration-color: currentColor; }
.deal-callout-link { display: inline-flex; align-items: center; min-height: 36px; font-weight: 600; white-space: nowrap; color: var(--bnv-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.deal-callout-link::after { content: " \2192"; white-space: pre; }
.deal-callout-link:hover { color: var(--bnv-text); text-decoration-thickness: 2px; }
/* (these follow the base rule on purpose: the callout keeps the claim card's width at every breakpoint) */
@media (max-width: 991.98px) { .deal-callout { max-width: 520px; margin-top: 18px; } }
@media (max-width: 767.98px) { .deal-callout { max-width: none; padding: 11px 14px 9px 13px; font-size: 13.5px; } }

/* Savings chips: cards ("Save up to RM35.09"), price check rows ("Save RM14.09") */
.save-chip, .pc-chip { display: inline-flex; align-items: center; align-self: flex-start; padding: .2rem .5rem; font-size: .8rem; font-weight: 700; line-height: 1.2; white-space: nowrap; color: var(--bnv-success); background: var(--bnv-save-tint); border: 1px solid var(--bnv-save-line); font-variant-numeric: tabular-nums; }
.save-row { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin-top: .6rem; }
/* Narrow cards: once the card body is under ~222px the struck Shopee price and the Order button no longer fit side
   by side (phones under ~410px, the 2-up grid at 576-767px, the 4-up related deck at 992-1199px), so prices, the
   chip and a full-width Order button stack; the icon-only buttons (opening soon, the dormant web cart) stay at the
   right. Container queries on the card's content box (on phones the card also holds the 112px thumbnail); browsers
   without them get the same stack under 400px. */
.product-card { container-type: inline-size; }
@media (max-width: 575.98px) {
    @container (max-width: 361.98px) {
        .product-foot { grid-template-columns: minmax(0, 1fr); grid-template-areas: "prices" "chip" "act"; }
        .product-foot > .btn-add, .product-foot > .soldout-tag { margin-top: .65rem; }
        .product-foot > .btn-add.btn-tg:not(.btn-tg-soon) { justify-self: stretch; }
        .product-foot > .soldout-tag { justify-self: start; }
    }
}
@media (min-width: 576px) {
    @container (max-width: 253.98px) {
        .product-foot { grid-template-columns: minmax(0, 1fr); grid-template-areas: "prices" "chip" "act"; }
        .product-foot > .btn-add, .product-foot > .soldout-tag { margin-top: .65rem; }
        .product-foot > .btn-add.btn-tg:not(.btn-tg-soon) { justify-self: stretch; }
        .product-foot > .soldout-tag { justify-self: start; }
    }
}
@supports not (container-type: inline-size) {
    @media (max-width: 399.98px) {
        .product-foot { grid-template-columns: minmax(0, 1fr); grid-template-areas: "prices" "chip" "act"; }
        .product-foot > .btn-add, .product-foot > .soldout-tag { margin-top: .65rem; }
        .product-foot > .btn-add.btn-tg:not(.btn-tg-soon) { justify-self: stretch; }
        .product-foot > .soldout-tag { justify-self: start; }
    }
}
@media (max-width: 359.98px) { .save-chip { padding: .2rem .4rem; font-size: .76rem; white-space: normal; } }

/* Home: price check (first thing in #shop, before the grid). Each row is two short lines:
     StealthWriter AI 1 Month             [Save RM14.09]
     Shopee RM39.99                        Here RM25.90
   about 75px a row: one column with the first 3 rows below 768px, two columns of 2 from 768px. The price line
   fits down to 320px in BM; a long product + plan name wraps (the plan never overflows its column). */
.price-check { margin-bottom: 1.75rem; padding-bottom: 1.75rem; border-bottom: 1px solid var(--bnv-border); }
.pc-head { margin-bottom: .9rem; }
.pc-head p { max-width: 40rem; }
.pc-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.pc-list li { display: flex; min-width: 0; }
.pc-row { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name chip" "prices prices"; align-items: center; gap: .35rem .75rem; padding: .65rem .9rem .7rem; color: inherit; text-decoration: none; background: var(--bnv-surface); border: 1px solid var(--bnv-border); transition: border-color .12s; }
.pc-row:hover { color: inherit; border-color: var(--bnv-border-hover); }
.pc-row:focus-visible { outline: 2px solid var(--bnv-accent); outline-offset: 2px; }
.pc-name { grid-area: name; min-width: 0; font-size: .95rem; line-height: 1.35; overflow-wrap: break-word; }
.pc-name b { font-weight: 600; }
.pc-name span { color: var(--bnv-muted); }
.pc-chip { grid-area: chip; align-self: center; font-size: .84rem; }
.pc-prices { grid-area: prices; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2rem 1rem; }
.pc-was, .pc-now { font-size: .86rem; white-space: nowrap; color: var(--bnv-muted); }
.pc-was .lbl, .pc-now .lbl { font-weight: 500; }
.pc-now .price { margin-left: .3rem; font-size: 1.3rem; line-height: 1.1; color: var(--bnv-text); }
.pc-cta { display: inline-flex; align-items: center; min-height: 44px; margin-top: .4rem; font-weight: 600; color: var(--bnv-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.pc-cta::after { content: " \2192"; white-space: pre; }
.pc-cta:hover { color: var(--bnv-text); text-decoration-thickness: 2px; }
@media (max-width: 399.98px) {
    .pc-row { padding: .6rem .8rem .65rem; column-gap: .6rem; }
    .pc-chip { padding: .15rem .4rem; font-size: .8rem; }
    .pc-now .price { font-size: 1.2rem; }
}
@media (max-width: 767.98px) { .pc-list li:nth-child(n + 4) { display: none; } }
@media (min-width: 768px) { .pc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .pc-row { padding: .75rem 1rem .8rem; } .pc-chip { font-size: .9rem; } }

/* Product page: "You save RM14.09 (35%)" under the price, "Save RMx" under each plan's struck Shopee price */
.pd-save { display: inline-block; margin: .7rem 0 0; padding: .4rem .7rem; font-size: 1rem; font-weight: 600; color: var(--bnv-success); background: var(--bnv-save-tint); border: 1px solid var(--bnv-save-line); font-variant-numeric: tabular-nums; }
.pd-save b { font-weight: 800; }
.pd-save[hidden], .shopee-was[hidden], .buy-bar-save[hidden] { display: none; }
.plan-save { font-size: .76rem; font-weight: 700; color: var(--bnv-success); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Sticky buy bar (phones): "RM25.90  Save RM14.09" under the plan name; the saving drops to its own line when the
   Order on Telegram button leaves too little room (320-360px) */
.buy-bar-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .45rem; }
.buy-bar-save { font-size: .78rem; font-weight: 700; line-height: 1.2; white-space: nowrap; color: var(--bnv-success); font-variant-numeric: tabular-nums; }
.buy-bar-save b { font-weight: 800; }
@media (max-width: 359.98px) { .buy-bar .container { gap: .4rem; } .buy-bar .btn-tg { gap: .35rem; font-size: .88rem; } .buy-bar-save { font-size: .74rem; } }

/* Claim result: "Buying this again? RM25.90 here instead of RM39.99 on Shopee (save RM14.09)" */
.rebuy-line { display: block; margin-top: .9rem; padding: .7rem .9rem; font-size: .88rem; line-height: 1.5; text-align: left; color: var(--bnv-text); text-decoration: none; background: var(--bnv-save-tint); border: 1px solid var(--bnv-save-line); transition: border-color .12s; }
.rebuy-line:hover { color: var(--bnv-text); border-color: var(--bnv-success); }
.rebuy-line b { font-weight: 700; color: var(--bnv-success); }
.rebuy-line s { color: var(--bnv-shopee); }
/* After every claim: the Halus humanizer promo (templates/main.html, res.halus) */
.halus-line { display: block; margin-top: .6rem; padding: .65rem .9rem; font-size: .88rem; line-height: 1.5; text-align: left;
              color: var(--bnv-text); text-decoration: none; border: 1px dashed var(--bnv-border-strong); border-radius: var(--bnv-radius); }
.halus-line:hover { color: var(--bnv-text); border-color: var(--bnv-accent); }
.halus-line strong { font-weight: 700; color: var(--bnv-accent); }
.rebuy-line .rebuy-save { font-weight: 800; color: var(--bnv-success); white-space: nowrap; }
.rebuy-line::after { content: " \2192"; }