/* ============================================================
 * sp-mobile.css — v284 Shopee-style mobile redesign
 * ============================================================
 * Used by: home_mobile.php (v284), detail_mobile.php (v284)
 * Source: home_mockup.html, detail_mockup.html
 * ============================================================ */

/* ====== THEME TOKENS (May 8 2026 — switchable themes) ====== */
:root,
body.theme-orange {
    --sp-primary:       #ee4d2d;
    --sp-primary-light: #fb8c1f;
    --sp-primary-dark:  #c84411;
    --sp-primary-bg:    #fff5f0;
}
body.theme-red {
    --sp-primary:       #dc2626;
    --sp-primary-light: #ef4444;
    --sp-primary-dark:  #991b1b;
    --sp-primary-bg:    #fef2f2;
}
body.theme-yellow {
    --sp-primary:       #f59e0b;
    --sp-primary-light: #fbbf24;
    --sp-primary-dark:  #d97706;
    --sp-primary-bg:    #fffbeb;
}
body.theme-green {
    --sp-primary:       #16a34a;
    --sp-primary-light: #22c55e;
    --sp-primary-dark:  #15803d;
    --sp-primary-bg:    #f0fdf4;
}
body.theme-blue {
    --sp-primary:       #3b82f6;
    --sp-primary-light: #60a5fa;
    --sp-primary-dark:  #1d4ed8;
    --sp-primary-bg:    #eff6ff;
}
body.theme-purple {
    --sp-primary:       #a855f7;
    --sp-primary-light: #c084fc;
    --sp-primary-dark:  #7e22ce;
    --sp-primary-bg:    #faf5ff;
}
body.theme-pink {
    --sp-primary:       #ec4899;
    --sp-primary-light: #f472b6;
    --sp-primary-dark:  #be185d;
    --sp-primary-bg:    #fdf2f8;
}
body.theme-gray {
    /* Yut: ดำไปเลย ไม่ต้องเทา — primary uses near-black so buttons are clearly
       distinct from any bg (white/dark) and white text reads cleanly */
    --sp-primary:       #111827;  /* near-black (button bg) */
    --sp-primary-light: #1f2937;  /* slightly lighter for gradient start */
    --sp-primary-dark:  #000000;  /* pure black */
    --sp-primary-bg:    #f3f4f6;  /* light surface tint (used in light mode) */
}
/* black + dark: invert primary tokens to whites so all "color: var(--sp-primary)"
   text becomes legible. Button bg uses are re-forced via specific overrides
   below so they keep dark surface. */
body.theme-gray.mode-dark,
body.theme-gray.mode-auto.is-os-dark {
    --sp-primary:       #f3f4f6;  /* near-white for text */
    --sp-primary-light: #ffffff;
    --sp-primary-dark:  #d1d5db;
    --sp-primary-bg:    #1f2937;  /* dark surface tint */
}
/* Re-force button surfaces (which use primary as gradient bg) to stay DARK
   so text-on-button still reads. Apply in BOTH light + dark mode for theme-black
   (Yut: ปุ่มสั่งโดยใช้โค้ด ให้เป็นพื้นดำ). */
body.theme-gray .sp-vfeed-cta,
body.theme-gray .sp-vfeed-cta-btn,
body.theme-gray .sp-cart-checkout-btn,
body.theme-gray .sp-buy-sheet-buy-btn,
body.theme-gray .sp-auth-btn,
body.theme-gray .sp-empty-cta,
body.theme-gray .sp-bottom-promo,
body.theme-gray .sp-card-bestseller,
body.theme-gray .sp-trust-row.is-highlight,
body.theme-gray .sp-vfeed-info-chip.is-bestseller,
body.theme-gray .sp-coupon-pick-btn,
body.theme-gray .sp-coupon-apply,
body.theme-gray .sp-cart-buy,
body.theme-gray .sp-card-badge:not(.is-fresh):not(.is-rating):not(.is-award),
body.theme-gray .sp-vfeed-pick-btn,
body.theme-gray .sp-freebox-pick,
body.theme-gray .sp-cart-checkout,
body.theme-gray .sp-addr-submit,
body.theme-gray .sp-confirm-ok,
body.theme-gray .sp-coupon-use-btn,
body.theme-gray .sp-cart-pick-btn,
body.theme-gray .sp-upc-btn-cart,
body.theme-gray .sp-upc-btn-more,
body.theme-gray .sp-vfeed-buysheet-buy-btn,
body.theme-gray .sp-vfeed-buysheet-cart-btn,
body.theme-gray .sp-sticky-v2 .sp-bb-cta,
body.theme-gray .sp-bb-cta {
    background: #000 !important;
    background-image: none !important;
    color: #fff !important;
    border-color: #1f2937 !important;
}
body.theme-gray .sp-vfeed-cta *,
body.theme-gray .sp-cart-checkout-btn *,
body.theme-gray .sp-buy-sheet-buy-btn *,
body.theme-gray .sp-auth-btn *,
body.theme-gray .sp-card-bestseller *,
body.theme-gray .sp-coupon-pick-btn *,
body.theme-gray .sp-coupon-apply *,
body.theme-gray .sp-empty-cta * {
    color: #fff !important;
}

/* A+/A- font toggle buttons — dark gray bg + white text in black theme */
body.theme-gray .sp-font-toggle button {
    background: #1f2937 !important;
    border: 1px solid #4b5563 !important;
    color: #e5e7eb !important;
}
body.theme-gray .sp-font-toggle button:active {
    background: #111827 !important;
}

/* Headers in black theme — solid black bg (Yut: header สีเดียวกับปุ่ม ซื้อโดยใช้โค้ด) */
body.theme-gray .sp-header,
body.theme-gray .sp-detail-header,
body.theme-gray .sp-subpage-header,
body.theme-gray .sp-drawer-header,
body.theme-gray .sp-bsl-header {
    background: #000 !important;
    background-image: none !important;
}

/* Format filter tabs (.sp-fmt-tab "ทั้งหมด/DVD/Bluray/...") — bg #f6f7f9
   stays light in dark mode → white text on white. Force dark bg in dark. */
body.mode-dark .sp-fmt-tabs-wrap,
body.theme-gray .sp-fmt-tabs-wrap {
    background: var(--sp-surface) !important;
    border-bottom-color: var(--sp-border) !important;
}
body.mode-dark .sp-fmt-tab:not(.active),
body.theme-gray.mode-dark .sp-fmt-tab:not(.active) {
    background: var(--sp-surface-2) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-fmt-tab:not(.active):active,
body.theme-gray.mode-dark .sp-fmt-tab:not(.active):active {
    background: #2a2a2a !important;
}
/* Active "ทั้งหมด" tab in theme=black — primary used as bg can render too
   light. Force black bg + white text in BOTH modes (light + dark + auto)
   for any "ทั้งหมด"-style active button site-wide.
   Yut: บ้าเอ้ย — "ทั้งหมด" พื้นเทาอ่อน text เทาอ่อน อ่านไม่ออก */
body.theme-gray .sp-fmt-tab.fmt-all.active,
body.theme-gray .sp-fmt-tab.active.fmt-all,
body.theme-gray .sp-wl-pill.is-active,
body.theme-gray .sp-award-type-tab.active,
body.theme-gray .sp-bsl-pill.active,
body.theme-gray a.sp-bsl-pill.active,
body.theme-gray .sp-tab-row a.sp-tab.active,
body.theme-gray .sp-list-tab.active,
body.theme-gray a.sp-tab.active,
html body.theme-gray a.sp-bsl-pill.active,
html body.theme-gray .sp-bsl-filter-row a.sp-bsl-pill.active,
body.theme-gray.mode-dark .sp-fmt-tab.fmt-all.active,
body.theme-gray.mode-dark .sp-wl-pill.is-active,
body.theme-gray.mode-dark a.sp-bsl-pill.active,
body.theme-gray.mode-auto.is-os-dark .sp-fmt-tab.fmt-all.active,
body.theme-gray.mode-auto.is-os-dark .sp-wl-pill.is-active,
body.theme-gray.mode-auto.is-os-dark a.sp-bsl-pill.active {
    background: #000 !important;
    background-image: none !important;
    color: #fff !important;
    border-color: #1f2937 !important;
}
/* Inactive sp-bsl-pill in theme=black — readable contrast */
body.theme-gray .sp-bsl-pill:not(.active),
body.theme-gray a.sp-bsl-pill:not(.active) {
    background: var(--sp-surface-2) !important;
    color: var(--sp-text) !important;
    border: 1px solid var(--sp-border) !important;
}

/* Address picker button selected text — match input fields color (Yut: text
   มันเป็นสีดำ ปรับให้เหมือนช่องอื่น) */
body.mode-dark .sp-addr-picker-btn .lbl.is-selected,
body.theme-gray .sp-addr-picker-btn .lbl.is-selected {
    color: var(--sp-text) !important;
}
body.mode-dark .sp-addr-picker-btn .lbl,
body.theme-gray .sp-addr-picker-btn .lbl {
    color: var(--sp-text-dim) !important;
}
body.mode-dark .sp-addr-picker-btn .lbl.is-selected,
body.theme-gray .sp-addr-picker-btn .lbl.is-selected {
    color: var(--sp-text) !important;
}
body.mode-dark .sp-addr-picker-btn,
body.theme-gray .sp-addr-picker-btn {
    background: var(--sp-surface-2) !important;
    border-color: var(--sp-border) !important;
    color: var(--sp-text) !important;
}
body.mode-dark .sp-addr-picker-btn:disabled,
body.theme-gray .sp-addr-picker-btn:disabled {
    background: var(--sp-bg) !important;
}

/* Detail page rev-badges (IMDb / RT / Metacritic) — name/mark text was using
   var(--sp-text) which goes white in dark mode → invisible on yellow IMDb /
   amber Meta-mid bg. Force dark text on light-bg badges. */
body.mode-dark .sp-rev-imdb .sp-rev-logo,
body.mode-dark .sp-rev-imdb .sp-rev-imdb-mark,
body.theme-gray .sp-rev-imdb .sp-rev-logo,
body.theme-gray .sp-rev-imdb .sp-rev-imdb-mark {
    color: #1a1a1a !important;
}
body.mode-dark .sp-rev-meta-mid .sp-rev-logo,
body.mode-dark .sp-rev-meta-mid .sp-rev-meta-name,
body.mode-dark .sp-rev-meta-mid .sp-rev-meta-mark,
body.theme-gray .sp-rev-meta-mid .sp-rev-logo,
body.theme-gray .sp-rev-meta-mid .sp-rev-meta-name,
body.theme-gray .sp-rev-meta-mid .sp-rev-meta-mark {
    color: #1a1a1a !important;
}
/* RT/Meta-high/Meta-low — colored bg + white text already, force white */
body.mode-dark .sp-rev-rt .sp-rev-logo,
body.mode-dark .sp-rev-rt .sp-rev-rt-name,
body.mode-dark .sp-rev-meta-high .sp-rev-logo,
body.mode-dark .sp-rev-meta-low .sp-rev-logo,
body.mode-dark .sp-rev-meta-high .sp-rev-meta-name,
body.mode-dark .sp-rev-meta-low .sp-rev-meta-name,
body.theme-gray .sp-rev-rt .sp-rev-logo,
body.theme-gray .sp-rev-rt .sp-rev-rt-name,
body.theme-gray .sp-rev-meta-high .sp-rev-logo,
body.theme-gray .sp-rev-meta-low .sp-rev-logo,
body.theme-gray .sp-rev-meta-high .sp-rev-meta-name,
body.theme-gray .sp-rev-meta-low .sp-rev-meta-name {
    color: #fff !important;
}
/* Score number container (.sp-rev-score) bg = surface, text = text */
body.mode-dark .sp-rev-badge .sp-rev-score,
body.theme-gray .sp-rev-badge .sp-rev-score {
    background: var(--sp-surface) !important;
    color: var(--sp-text) !important;
}

/* "ลด 50%" menu flag — bg uses primary which inverts to white in theme-black
   dark mode → white text invisible. Force red bg + white text always. */
body.theme-gray .sp-menu-flag,
body.mode-dark .sp-menu-flag {
    background: #ef4444 !important;
    color: #fff !important;
}

/* Search overlay header gradient — in theme=black (and dark mode) primary
   tokens become white → gradient white→light gray, no contrast.
   Yut: ใช้เทาเข้มไล่ไปดำแทน */
body.theme-gray .sp-search-overlay-bar,
body.theme-gray.mode-dark .sp-search-overlay-bar,
body.mode-dark .sp-search-overlay-bar {
    background: linear-gradient(135deg, #1f2937, #000) !important;
    background-image: linear-gradient(135deg, #1f2937, #000) !important;
}
/* Search input bar in dark — white surface looks too bright */
body.mode-dark .sp-search-overlay-input-wrap,
body.theme-gray .sp-search-overlay-input-wrap {
    background: var(--sp-surface-2) !important;
    color: var(--sp-text) !important;
}
body.mode-dark .sp-search-overlay-input-wrap input,
body.theme-gray .sp-search-overlay-input-wrap input {
    color: var(--sp-text) !important;
    background: transparent !important;
}

/* Order finish — bank copy button (Yut: พื้นสว่างตัวเทาอ่อน อ่านไม่ออก, สลับโทน) */
body.mode-dark .sp-suc-bank {
    background: var(--sp-surface-2) !important;
    background-image: none !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-suc-bank-name { color: #fbbf24 !important; }
body.mode-dark .sp-suc-bank-no { color: var(--sp-primary-light) !important; }
body.mode-dark .sp-suc-bank-holder { color: var(--sp-text-dim) !important; }
body.mode-dark .sp-bank-copy-btn {
    background: var(--sp-primary) !important;
    color: #fff !important;
    border-color: var(--sp-primary) !important;
}
body.mode-dark .sp-bank-copy-btn:active {
    background: var(--sp-primary-dark) !important;
}
body.mode-dark .sp-bank-copy-btn.copied {
    background: #16a34a !important;
    border-color: #16a34a !important;
}
body.theme-gray .sp-bank-copy-btn,
body.theme-gray.mode-dark .sp-bank-copy-btn {
    background: #000 !important;
    color: #fff !important;
    border-color: #1f2937 !important;
}
body.theme-gray.mode-dark .sp-buy-sheet-cart-btn {
    background: var(--sp-surface) !important;
    border: 1.5px solid #fff !important;
    color: #fff !important;
}
/* Side icons (chat/cart/bb) — soft off-white (Yut: ขาวล้วนแสบตา) */
body.theme-gray.mode-dark .sp-vfeed-side-btn,
body.theme-gray.mode-dark .sp-vfeed-side-btn *,
body.theme-gray.mode-dark .sp-bb-side-icon,
body.theme-gray.mode-dark .sp-bb-side-icon *,
body.theme-gray.mode-dark .sp-vfeed-actions .sp-vfeed-side-btn,
body.theme-gray.mode-dark .sp-vfeed-actions .sp-vfeed-side-btn .lbl,
body.theme-gray.mode-dark .sp-sticky-v2 .sp-bb-side-icon,
body.theme-gray.mode-dark .sp-sticky-v2 .sp-bb-side-icon .lbl {
    color: #d1d5db !important;
}
body.theme-gray.mode-dark .sp-vfeed-side-btn svg,
body.theme-gray.mode-dark .sp-bb-side-icon svg {
    stroke: #d1d5db !important;
}
/* Anything with theme-gray + dark that has color: var(--sp-text) which is
   already light grey #eaeaea — those are fine. But hard-coded #111/#222/#333
   text colors in some elements need force white. Cover commonly-used: */
body.theme-gray.mode-dark .sp-card-name,
body.theme-gray.mode-dark .sp-vfeed-title-text,
body.theme-gray.mode-dark .sp-detail-title,
body.theme-gray.mode-dark .sp-cart-item-name,
body.theme-gray.mode-dark .sp-myorder-prod-name,
body.theme-gray.mode-dark .sp-trust-row,
body.theme-gray.mode-dark .sp-trust-cell,
body.theme-gray.mode-dark .sp-info-tabs .sp-tab-btn,
body.theme-gray.mode-dark .sp-bsl-tab,
body.theme-gray.mode-dark .sp-search-tag,
body.theme-gray.mode-dark .sp-genre-card,
body.theme-gray.mode-dark .sp-genre-card * {
    color: #d1d5db !important;
}
/* Body text in black + dark — soft off-white (Yut: ขาวล้วน แสบตา ใช้เทาอ่อน) */
body.theme-gray.mode-dark {
    color: #d1d5db;
}
body.theme-gray.mode-dark .sp-text,
body.theme-gray.mode-dark p,
body.theme-gray.mode-dark span:not(.sp-card-price-currency):not(.cur):not(.amt) {
    color: inherit;
}
/* black theme + dark mode: anchors/links use white-ish text for contrast */
body.theme-gray.mode-dark a:not(.sp-tag):not(.sp-search-tag):not(.sp-coupon-login-btn):not(.sp-card-bestseller):not(.sp-vfeed-side-btn):not(.sp-bb-side-icon),
body.theme-gray.mode-auto.is-os-dark a:not(.sp-tag):not(.sp-search-tag) {
    color: #e5e7eb !important;
}

/* black theme + dark mode: ALL primary-colored TEXT (prices, accents, chips,
   badges, headings) → white. Yut: "สีดำ text ต้องเป็นขาว"
   Primary token is near-black so text using it is invisible on dark bg. */
body.theme-gray.mode-dark .sp-card-price,
body.theme-gray.mode-dark .sp-vfeed-price,
body.theme-gray.mode-dark .sp-vfeed-price *,
body.theme-gray.mode-dark .sp-detail-price,
body.theme-gray.mode-dark .sp-detail-price *,
body.theme-gray.mode-dark [class*="price"]:not([class*="-bg"]):not([class*="badge"]),
body.theme-gray.mode-dark [class*="price"]:not([class*="-bg"]):not([class*="badge"]) *,
body.theme-gray.mode-dark .sp-bsl-tab.active,
body.theme-gray.mode-dark .sp-info-tabs .sp-tab-btn.is-active,
body.theme-gray.mode-dark .sp-info-tabs .sp-tab-btn.is-active .sp-tab-count,
body.theme-gray.mode-dark .sp-best-card .crown,
body.theme-gray.mode-dark .sp-best-card .label,
body.theme-gray.mode-dark .sp-vfeed-coupon-ribbon,
body.theme-gray.mode-dark .sp-vfeed-coupon-ribbon *,
body.theme-gray.mode-dark .sp-coupon-row,
body.theme-gray.mode-dark .sp-coupon-row *:not(.sp-coupon-login-btn),
body.theme-gray.mode-dark .sp-coupon-input,
body.theme-gray.mode-dark .sp-list-hero-title,
body.theme-gray.mode-dark .sp-cart-item-price,
body.theme-gray.mode-dark .sp-cart-item-price *,
body.theme-gray.mode-dark .sp-cart-coupon-link,
body.theme-gray.mode-dark .sp-card-name-poster ~ * .sp-card-name,
body.theme-gray.mode-dark .sp-promo-text .t1,
body.theme-gray.mode-dark .sp-section-title,
body.theme-gray.mode-dark .sp-cat-h,
body.theme-gray.mode-dark .sp-genre-name {
    color: #e5e7eb !important;
}
/* Currency / unit chars + small dim text within prices */
body.theme-gray.mode-dark .sp-card-price-currency,
body.theme-gray.mode-dark .sp-cart-item-price.free {
    color: #fbbf24 !important;
}

/* ===== DARK MODE (May 8 2026) ===== */
/* Surface tokens that flip with mode (theme-X primary stays the same in both modes) */
:root, body.mode-light {
    --sp-bg:        #f5f5f5;
    --sp-surface:   #ffffff;
    --sp-surface-2: #fafafa;
    --sp-text:      #222222;
    --sp-text-dim:  #666666;
    --sp-border:    #e5e5e5;
    --sp-shadow:    0 2px 8px rgba(0,0,0,.05);
}
body.mode-dark,
body.mode-auto.is-os-dark {
    --sp-bg:        #0f0f0f;
    --sp-surface:   #1c1c1c;
    --sp-surface-2: #262626;
    --sp-text:      #eaeaea;
    --sp-text-dim:  #999999;
    --sp-border:    #333333;
    --sp-shadow:    0 2px 8px rgba(0,0,0,.4);
}
/* Dark mode body + card overrides — !important to win over hardcoded styles */
body.mode-dark, body.mode-auto.is-os-dark {
    background: var(--sp-bg) !important;
    color: var(--sp-text);
}
body.mode-dark.sp-body,
body.mode-dark .sp-body,
body.mode-auto.is-os-dark .sp-body {
    background: var(--sp-bg) !important;
}
body.mode-dark .sp-checkout-section,
body.mode-dark .sp-detail-section,
body.mode-dark .sp-cart-section,
body.mode-dark .sp-cart-list,
body.mode-dark .sp-cart-item,
body.mode-dark .sp-checkout-summary,
body.mode-dark .sp-checkout-address,
body.mode-dark .sp-cart-stepper,
body.mode-dark .sp-detail-section-h,
body.mode-dark .sp-rv-card,
body.mode-dark .sp-drawer,
body.mode-dark .sp-detail-tabs,
body.mode-dark .sp-bs-card,
body.mode-dark .sp-coupon-row,
body.mode-dark .sp-coupon-input-row,
body.mode-dark .sp-flash-slot,
body.mode-dark .sp-bs-empty,
body.mode-dark .sp-track-wrap,
body.mode-dark .sp-track-event,
body.mode-dark .sp-track-num-row,
body.mode-auto.is-os-dark .sp-checkout-section,
body.mode-auto.is-os-dark .sp-cart-section,
body.mode-auto.is-os-dark .sp-cart-item,
body.mode-auto.is-os-dark .sp-rv-card,
body.mode-auto.is-os-dark .sp-drawer {
    background: var(--sp-surface) !important;
    color: var(--sp-text) !important;
}
body.mode-dark .sp-cart-item-name,
body.mode-dark .sp-cart-item-info,
body.mode-dark .sp-detail-section-h .title,
body.mode-dark .sp-checkout-row .lbl,
body.mode-dark .sp-drawer-section-h,
body.mode-dark .sp-drawer-section-title,
body.mode-dark .sp-track-num,
body.mode-dark .sp-rv-stars .lbl,
body.mode-dark .sp-rv-field label {
    color: var(--sp-text) !important;
}
body.mode-dark a { color: var(--sp-primary-light); }
body.mode-dark .sp-empty,
body.mode-dark .sp-cart-empty-text,
body.mode-dark .sp-text-dim,
body.mode-dark .r-meta { color: var(--sp-text-dim) !important; }
body.mode-dark .sp-track-num-row,
body.mode-dark .sp-cart-stepper { background: var(--sp-surface-2) !important; }
body.mode-dark input,
body.mode-dark textarea,
body.mode-dark select { background: var(--sp-surface-2); color: var(--sp-text); border-color: var(--sp-border); }
body.mode-dark hr,
body.mode-dark .sp-cart-item-bottom,
body.mode-dark .sp-checkout-row { border-color: var(--sp-border) !important; }

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { font-family: 'Sarabun', Arial, sans-serif; font-size: 16px; line-height: 1.5; color: var(--sp-text); background: var(--sp-bg); overflow-x: clip; max-width: 100%; }
body.sp-body { max-width: 480px; margin: 0 auto; background: var(--sp-surface); min-height: 100vh; position: relative; padding-bottom: 80px; overflow-x: clip; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ====== STICKY HEADER ====== */
.sp-header { position: sticky; top: 0; z-index: 100; background: linear-gradient(180deg, var(--sp-primary-light) 0%, var(--sp-primary) 100%); padding: 10px 12px; display: flex; align-items: center; gap: 8px; }
/* Home header uses .sp-header + .sp-detail-header — unified styling, stays visible always */
.sp-header.sp-detail-header {
    position: sticky;
    transform: none;
    padding: 8px 10px;
    gap: 6px;
    min-height: 52px;
}
.sp-header.sp-detail-header .sp-icon-btn { background: rgba(255,255,255,0.18); }
.sp-header.sp-detail-header .sp-detail-search-bar { background: var(--sp-surface); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.sp-search { flex: 1; background: var(--sp-surface); border-radius: 4px; height: 38px; display: flex; align-items: center; padding: 0 10px; gap: 8px; }
button.sp-search { border: 0; font-family: inherit; cursor: pointer; text-align: left; width: auto; }
.sp-search-icon { font-size: 18px; color: var(--sp-text-dim); }
.sp-search-input { flex: 1; border: 0; outline: 0; font-size: 14px; font-family: inherit; color: var(--sp-text); background: transparent; }
.sp-search-input::placeholder { color: var(--sp-text-dim); }
.sp-home-search-placeholder { color: var(--sp-text-dim); font-size: 14px; line-height: 38px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-icon-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; position: relative; text-decoration: none; background: transparent; border: 0; padding: 0; }
.sp-icon-btn .sp-badge-count { position: absolute; top: -2px; right: -2px; background: var(--sp-surface); color: var(--sp-primary); font-size: 10px; font-weight: 700; border-radius: 10px; padding: 1px 5px; line-height: 1; min-width: 16px; text-align: center; }

/* ====== ICON MENU ROW ====== */
/* Quick menu — horizontal scroll with pagination (v286.76) */
.sp-menu-row {
    background: var(--sp-surface);
    padding: 14px 0 8px;
    border-bottom: 1px solid #eee;
    position: relative;
}
.sp-menu-track {
    display: flex;
    overflow-x: auto;
    gap: 0;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
}
.sp-menu-track::-webkit-scrollbar { display: none; }
.sp-menu-row::-webkit-scrollbar { display: none; }
.sp-menu-item {
    flex: 0 0 22%;
    text-align: center;
    text-decoration: none;
    color: var(--sp-text);
    padding: 0 4px;
    position: relative;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    scroll-snap-align: start;
}
.sp-menu-icon { width: 48px; height: 48px; margin: 0 auto 6px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; background: #fff8e1; }
.sp-menu-icon.coupon { background: #ffe8d6; }
.sp-menu-icon.new-cust { background: #fee2e2; }
.sp-menu-icon.collection { background: #e0f2fe; }
.sp-menu-icon.actor { background: #ede9fe; }
.sp-menu-icon.director { background: #fce7f3; }
.sp-menu-icon.genre { background: #d1fae5; }
.sp-menu-icon.more { background: var(--sp-primary-bg); }
.sp-menu-pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 6px;
    height: 4px;
}
.sp-menu-dot {
    width: 16px;
    height: 4px;
    border-radius: 2px;
    background: #e5e5e5;
    cursor: pointer;
    transition: background 0.2s;
}
.sp-menu-dot.active { background: var(--sp-primary); width: 20px; }
.sp-menu-icon.award { background: #fef3c7; }
.sp-menu-icon.imdb { background: #fee2e2; }
.sp-menu-label { font-size: 12px; line-height: 1.3; color: var(--sp-text); }
.sp-menu-flag { position: absolute; top: -4px; left: 50%; transform: translateX(-12px); background: var(--sp-primary); color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 8px; font-weight: 600; }

/* ====== HERO BANNER ====== */
/* ====== HERO BANNER (legacy 2-up) ====== */
.sp-hero-banner { padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sp-hero-card { aspect-ratio: 1.5/1; border-radius: 8px; overflow: hidden; position: relative; cursor: pointer; }
.sp-hero-card.new-cust { background: linear-gradient(135deg, var(--sp-primary-light) 0%, var(--sp-primary) 50%, var(--sp-primary-dark) 100%); color: #fff; padding: 12px; display: flex; flex-direction: column; justify-content: space-between; }
.sp-hero-card.new-cust .label1 { font-size: 14px; font-weight: 600; line-height: 1.2; }
.sp-hero-card.new-cust .label2 { font-size: 32px; font-weight: 700; line-height: 1; margin: 6px 0; }
.sp-hero-card.new-cust .label3 { font-size: 11px; opacity: 0.9; line-height: 1.3; }
.sp-hero-card.new-cust .btn { align-self: flex-start; background: var(--sp-surface); color: var(--sp-primary); font-size: 12px; font-weight: 600; padding: 5px 14px; border-radius: 16px; margin-top: 6px; }

/* ====== VDO FEED PAGE (Reels-style) ====== */
.sp-vfeed-body { background: #000; max-width: 480px; margin: 0 auto; min-height: 100vh; position: relative; overflow: hidden; }
.sp-vfeed-header { position: fixed; top: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto; z-index: 100; display: flex; align-items: center; padding: 12px 14px; gap: 10px; background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 100%); color: #fff; }
.sp-vfeed-back { width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.4); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; text-decoration: none; }
.sp-vfeed-title { flex: 1; text-align: center; font-size: 15px; font-weight: 600; }
.sp-vfeed-home { width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.4); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; text-decoration: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.sp-vfeed-scroller { width: 100%; height: 100vh; height: 100dvh; height: var(--vfeed-vh, 100dvh); overflow-y: auto; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.sp-vfeed-slide { width: 100%; height: 100vh; height: 100dvh; height: var(--vfeed-vh, 100dvh); min-height: var(--vfeed-vh, 100dvh); max-height: var(--vfeed-vh, 100dvh); scroll-snap-align: start; position: relative; background: #000; overflow: hidden; flex-shrink: 0; }

/* When FP banner is present in vdo feed:
   1. Push vdo-header DOWN by banner height (56px) so they don't overlap
   2. Reduce slide height by banner height so action buttons stay visible
   3. Banner stays fixed at top, z-index 101 above header */
body.sp-vfeed-has-fp .sp-vfeed-header { top: 56px; }
body.sp-vfeed-has-fp .sp-vfeed-scroller { height: calc(100vh - 56px); height: calc(100dvh - 56px); }
body.sp-vfeed-has-fp .sp-vfeed-slide { height: calc(var(--vfeed-vh, 100dvh) - 56px); min-height: calc(var(--vfeed-vh, 100dvh) - 56px); max-height: calc(var(--vfeed-vh, 100dvh) - 56px); }
body.sp-vfeed-has-fp .sp-fp-banner {
    position: fixed;
    top: 0; left: 0; right: 0;
    max-width: 480px;
    margin: 0 auto;
    z-index: 101;
}
.sp-vfeed-video-area { position: absolute; inset: 0; background: #000; overflow: hidden; }
.sp-vfeed-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 2; }

/* v286.99k rev16 — Title band bottom-RIGHT (toast left). Removed dark gradient bg
   (was making transparent PNG logo areas look like black box). Logo floats with
   triple drop-shadow for legibility on bright + dark frames. */
.sp-vfeed-tband {
    position: absolute;
    right: 14px; bottom: 14px;
    z-index: 6;
    pointer-events: none;
    max-width: 60%;
    /* No bg — transparent positioning container */
    display: flex; justify-content: flex-end;
}
.sp-vfeed-tband-logo {
    max-height: 54px; max-width: 100%;
    display: block;
    object-fit: contain; object-position: right bottom;
    /* Triple drop-shadow: tight outline + soft halo. Reads on bright + dark frames */
    filter:
        drop-shadow(0 0 2px rgba(0,0,0,0.95))
        drop-shadow(0 1px 3px rgba(0,0,0,0.85))
        drop-shadow(0 0 10px rgba(0,0,0,0.4));
}
.sp-vfeed-tband-text {
    font-family: 'Sarabun', sans-serif;
    font-size: 18px; font-weight: 800; line-height: 1.15;
    color: #fff;
    text-shadow:
        0 0 2px rgba(0,0,0,0.95),
        0 1px 3px rgba(0,0,0,0.9),
        0 0 8px rgba(0,0,0,0.6);
    letter-spacing: 0.2px;
    text-align: right;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.sp-vfeed-thumb.sp-vfeed-poster-only { object-fit: cover; background: transparent; }
/* v286.80 — blur poster bg on ALL slides (handles letterboxed video AND
   provides peek background for slides 1-4 above) */
.sp-vfeed-slide .sp-vfeed-video-area::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--poster-bg-url);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--sp-text);
    filter: blur(20px) brightness(1.0);
    transform: scale(1.15);
    z-index: 1;
}
/* v286.82: iframe — natural sizing (letterbox WILL appear but we cover with blur strips) */
.sp-vfeed-iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    background: transparent;
    z-index: 3;
}
/* Blur poster strips covering top + bottom letterbox bars (16:9 in 9:16 viewport).
 * Math: in a 9:16 portrait viewport, a 16:9 video centered will leave
 * (1 - 9/16 * 16/9 * (9/16)) ≈ 50% blank top + bottom = 25% top, 25% bottom.
 * We apply blur poster strips at exactly those positions ON TOP of iframe (z-index 4)
 * to mask the black bars. iframe pointer-events:none so clicks pass through to overlay btns. */
/* v286.99c (rev2) — Yut: เน้นกว้างของจอ ไม่ stretch ทั้งจอจน scale เพี้ยน
 *   Width-fit: poster fills viewport width, height = auto natural ratio.
 *   Strips show poster cropped at correct vertical position via background-position
 *   measured in pixels (top: 0 / bottom: 100% of poster's natural rendered height).
 */
.sp-vfeed-slide .sp-vfeed-video-area::before {
    background-size: 100vw auto;
    background-position: center;
    background-repeat: no-repeat;
    transform: none;
}
.sp-vfeed-slide:not(.poster-mode) .sp-vfeed-video-area::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(50% - 28.125vw);
    background-image: var(--poster-bg-url);
    background-size: 100vw auto;
    background-position: center top;
    background-repeat: no-repeat;
    filter: blur(20px) brightness(1.05);
    z-index: 4;
    pointer-events: none;
}
.sp-vfeed-slide:not(.poster-mode) .sp-vfeed-video-area > .sp-vfeed-bottom-letterbox {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(50% - 28.125vw);
    background-image: var(--poster-bg-url);
    background-size: 100vw auto;
    background-position: center bottom;
    background-repeat: no-repeat;
    filter: blur(20px) brightness(1.05);
    z-index: 4;
    pointer-events: none;
}
.sp-vfeed-cover { position: absolute; inset: 0; background: #000 center/cover no-repeat; pointer-events: none; opacity: 1; transition: opacity 0.8s ease; z-index: 2; }
.sp-vfeed-cover.faded { opacity: 0; }

/* ============================================================
 * Feed v2 — Light theme + Shopee uniform CTA (v286.75)
 * Yut: หน้า feed เปลี่ยนให้เป็นโทนสว่าง ตรงก้อน ข้อมูลสินค้าให้พื้นขาว
 *      ปุ่ม สั่งเหมือนหน้า detail
 * ============================================================ */
.sp-vfeed-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 56px; /* sit above bottom CTA (56px tall) */
    padding: 12px 14px;
    background: var(--sp-surface);
    color: var(--sp-text);
    display: flex;
    gap: 10px;
    z-index: 10;
    pointer-events: auto;
    border-top: 1px solid #f0f0f0;
}
.sp-vfeed-poster-thumb {
    display: block;
    flex: 0 0 60px;
    width: 60px;
    aspect-ratio: 2/3;
    border-radius: 4px;
    overflow: hidden;
    background: var(--sp-bg);
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
    position: relative;
    z-index: 11;
}
.sp-vfeed-poster-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-vfeed-details { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sp-vfeed-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 2px; }
.sp-vfeed-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    line-height: 1.4;
}
.sp-vfeed-badge.is-award { background: linear-gradient(135deg, #ffd700, #d97706); color: var(--sp-text); }
.sp-vfeed-badge.is-fresh { background: var(--sp-surface); color: #d63a1f; border: 1.5px solid #d63a1f; padding: 1px 5px; }
.sp-vfeed-badge.is-rating { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: var(--sp-text); }
.sp-vfeed-badge.is-hit { background: #ec4899; color: #fff; }
.sp-vfeed-badge.is-hot { background: linear-gradient(135deg, var(--sp-primary-light), var(--sp-primary)); color: #fff; }
.sp-vfeed-name {
    font-size: 13.5px;
    color: var(--sp-text);
    text-decoration: none;
    cursor: pointer;
    font-weight: 500;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    position: relative;
    z-index: 12;
    pointer-events: auto;
    padding: 2px 0;
}
.sp-vfeed-name:active { opacity: 0.7; }
.sp-vfeed-price {
    color: var(--sp-primary);
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    margin-top: 2px;
}
.sp-vfeed-price .cur { font-size: 13px; }
.sp-vfeed-price .suffix { font-size: 11px; color: var(--sp-text-dim); font-weight: 400; }

/* Bottom CTA — Shopee uniform (matches detail page sp-sticky-v2) */
.sp-vfeed-actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0);
    display: flex;
    align-items: stretch;
    background: var(--sp-surface);
    border-top: 1px solid #f0f0f0;
    z-index: 12;
    pointer-events: auto;
    height: 56px;
    box-sizing: border-box;
}
.sp-vfeed-actions .sp-vfeed-side-btn {
    flex: 0 0 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: var(--sp-primary);
    font-size: 10.5px;
    background: var(--sp-surface);
    border: 0;
    border-right: 1px solid #f5f5f5;
    cursor: pointer;
    font-family: inherit;
    padding: 4px 0;
}
.sp-vfeed-actions .sp-vfeed-side-btn:active { background: var(--sp-primary-bg); }
.sp-vfeed-actions .sp-vfeed-side-btn .lbl { font-size: 10.5px; color: var(--sp-text-dim); }
.sp-vfeed-actions .sp-vfeed-cta {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, var(--sp-primary-light) 0%, var(--sp-primary) 100%);
    color: #fff;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
    padding: 6px;
    text-decoration: none;
}
.sp-vfeed-actions .sp-vfeed-cta:active { filter: brightness(0.92); }
.sp-vfeed-actions .sp-vfeed-cta .line1 { font-size: 12.5px; font-weight: 500; opacity: 0.95; }
.sp-vfeed-actions .sp-vfeed-cta .line2 { font-size: 17px; font-weight: 700; margin-top: 1px; }

/* 4-first peek — fake preview of next poster (Yut: ของ sp ไม่ได้เลื่อนของจริงมา)
 * v286.82: revert to full 100vh slides + use ::after image with --next-poster-url
 * to show ONLY the next poster as 90px preview at bottom (no controls leaking)
 */
.sp-vfeed-slide[data-idx="0"],
.sp-vfeed-slide[data-idx="1"],
.sp-vfeed-slide[data-idx="2"],
.sp-vfeed-slide[data-idx="3"] {
    /* keep full height — peek is overlay only */
    padding-bottom: 90px;
}
.sp-vfeed-slide[data-idx="0"]::after,
.sp-vfeed-slide[data-idx="1"]::after,
.sp-vfeed-slide[data-idx="2"]::after,
.sp-vfeed-slide[data-idx="3"]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 90px;
    background-image: var(--next-poster-url);
    background-size: cover;
    background-position: center 60%; /* v286.83 (Yut): show middle-lower of poster (top 1/3 usually empty) */
    background-repeat: no-repeat;
    background-color: #111;
    border-top: 1px solid rgba(255,255,255,0.12);
    pointer-events: none;
    z-index: 3; /* v286.83: below info card (10) + actions bar (12) — peek shows only in the small strip between info card top and where peek extends */
}
/* Up-chevron indicator on peek strip */
.sp-vfeed-slide[data-idx="0"] > .sp-vfeed-peek-arrow,
.sp-vfeed-slide[data-idx="1"] > .sp-vfeed-peek-arrow,
.sp-vfeed-slide[data-idx="2"] > .sp-vfeed-peek-arrow,
.sp-vfeed-slide[data-idx="3"] > .sp-vfeed-peek-arrow {
    position: absolute;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.95);
    font-size: 22px;
    pointer-events: none;
    z-index: 21;
    animation: sp-vfeed-peek-bounce 1.5s ease-in-out infinite;
    text-shadow: 0 1px 6px rgba(0,0,0,0.7);
    line-height: 1;
}
@keyframes sp-vfeed-peek-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.85; }
    50% { transform: translateX(-50%) translateY(-6px); opacity: 1; }
}
.sp-bsl-header { position: sticky; top: 0; z-index: 100; background: linear-gradient(180deg, var(--sp-primary-light) 0%, var(--sp-primary) 100%); padding: 10px 12px; display: flex; align-items: center; gap: 8px; color: #fff; }
.sp-bsl-back { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; text-decoration: none; flex-shrink: 0; }
.sp-bsl-title { flex: 1; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.sp-bsl-icon { font-size: 20px; }
.sp-bsl-cart { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; position: relative; text-decoration: none; flex-shrink: 0; }
.sp-bsl-cart .sp-badge-count { position: absolute; top: -2px; right: -2px; background: var(--sp-surface); color: var(--sp-primary); font-size: 10px; font-weight: 700; border-radius: 10px; padding: 1px 5px; line-height: 1; min-width: 16px; text-align: center; }
.sp-bsl-tabs { background: var(--sp-surface); display: flex; border-bottom: 1px solid #eee; }
.sp-bsl-quicklinks { display: flex; gap: 6px; padding: 10px 8px; background: var(--sp-surface); overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sp-bsl-quicklinks::-webkit-scrollbar { display: none; }
.sp-bsl-quicklink { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; padding: 8px 12px; background: var(--sp-primary-bg); color: var(--sp-primary); border-radius: 18px; text-decoration: none; font-size: 12px; font-weight: 600; border: 1px solid #ffccab; -webkit-tap-highlight-color: transparent; }
.sp-bsl-quicklink:active { background: #ffe2d0; }
.sp-bsl-quicklink span { font-size: 14px; }
.sp-bsl-tab { flex: 1; text-align: center; padding: 12px 0; color: var(--sp-text-dim); font-size: 14px; font-weight: 600; text-decoration: none; border-bottom: 2px solid transparent; }
.sp-bsl-tab.active { color: var(--sp-primary); border-bottom-color: var(--sp-primary); }
.sp-bsl-filter-row { background: var(--sp-surface); padding: 8px 10px; display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-bottom: 1px solid #eee; align-items: center; }
.sp-bsl-filter-row::-webkit-scrollbar { display: none; }
.sp-bsl-filter-label { flex-shrink: 0; font-size: 11px; color: var(--sp-text-dim); font-weight: 600; padding-right: 4px; }
.sp-bsl-pill { flex-shrink: 0; padding: 6px 12px; border-radius: 14px; background: var(--sp-bg); color: var(--sp-text-dim); font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.sp-bsl-pill.active { background: var(--sp-primary); color: #fff; }
.sp-bsl-list { padding: 8px; background: var(--sp-bg); }
.sp-bsl-item { display: flex; gap: 10px; padding: 10px; background: var(--sp-surface); border-radius: 8px; margin-bottom: 8px; text-decoration: none; color: inherit; align-items: stretch; }
.sp-bsl-rank { flex: 0 0 36px; display: flex; align-items: flex-start; justify-content: center; padding-top: 4px; font-size: 18px; font-weight: 800; color: var(--sp-text-dim); }
.sp-bsl-rank.top1, .sp-bsl-rank.top2, .sp-bsl-rank.top3 { font-size: 26px; }
.sp-bsl-img { flex: 0 0 80px; width: 80px; aspect-ratio: 2/3; border-radius: 6px; overflow: hidden; background: #eee; }
.sp-bsl-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-bsl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding-top: 2px; }
.sp-bsl-name { font-size: 13px; line-height: 1.3; color: var(--sp-text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sp-bsl-price { color: var(--sp-primary); font-size: 16px; font-weight: 700; line-height: 1; margin-top: auto; }
.sp-bsl-sold { color: var(--sp-text-dim); font-size: 11px; }

/* ====== HERO POSTER CAROUSEL (first grid card, NOT a banner) ====== */
.sp-hero-card-grid { position: relative; aspect-ratio: 2/3; background: #000; overflow: hidden; border-radius: 8px; break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; margin-bottom: 8px; }
.sp-hero-card-grid .sp-hero-track { position: relative; width: 100%; height: 100%; }
.sp-hero-card-grid .sp-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; display: block; text-decoration: none; color: #fff; }
.sp-hero-card-grid .sp-hero-slide.active { opacity: 1; pointer-events: auto; }
.sp-hero-card-grid .sp-hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-hero-card-grid .sp-hero-grid-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 8px 18px; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 100%); color: #fff; }
.sp-hero-card-grid .sp-hero-grid-flag { display: inline-block; background: #ffd700; color: #c41e3a; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 8px; margin-bottom: 4px; }
.sp-hero-card-grid .sp-hero-grid-title { font-size: 11px; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sp-hero-card-grid .sp-hero-dots { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); display: flex; gap: 3px; z-index: 4; }
.sp-hero-card-grid .sp-hero-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; transition: all 0.2s; }
.sp-hero-card-grid .sp-hero-dot.active { background: var(--sp-surface); width: 14px; border-radius: 3px; }

/* ====== PROMO ROW ====== */
.sp-promo-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; padding: 0 8px 8px; }

/* Quick navigation row (home) */
.sp-quicknav-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 0 8px 8px;
}
.sp-quicknav-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 4px;
    background: var(--sp-surface);
    border-radius: 8px;
    text-decoration: none;
    color: var(--sp-text-dim);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    -webkit-tap-highlight-color: transparent;
}
.sp-quicknav-tile:active { background: var(--sp-surface-2); transform: scale(0.97); }
.sp-quicknav-ico { font-size: 22px; line-height: 1; }
.sp-quicknav-lbl { font-size: 10.5px; font-weight: 500; text-align: center; line-height: 1.2; }
.sp-promo-card { background: var(--sp-surface); border: 1px solid #ffe8d6; border-radius: 8px; padding: 8px 6px; display: flex; align-items: center; gap: 6px; -webkit-tap-highlight-color: transparent; text-decoration: none; }
.sp-promo-icon { width: 30px; height: 30px; background: #ffeede; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.sp-promo-text { flex: 1; min-width: 0; }
.sp-promo-text .t1 { font-size: 12px; font-weight: 600; color: var(--sp-primary); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-promo-text .t2 { font-size: 10.5px; color: var(--sp-text-dim); line-height: 1.3; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ====== SECTION HEADER ====== */
.sp-sect-h { background: var(--sp-surface); padding: 10px 12px 6px; display: flex; align-items: center; justify-content: space-between; }
.sp-sect-h .title { font-size: 15px; font-weight: 600; color: var(--sp-primary); }
.sp-sect-h .more { font-size: 12px; color: var(--sp-primary); text-decoration: none; }

/* ====== VIDEO ROW ====== */
.sp-video-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0 8px 12px; }
.sp-video-card { aspect-ratio: 9/13; border-radius: 8px; background: #1a1a1a; position: relative; overflow: hidden; cursor: pointer; }
.sp-video-card .thumb { position: absolute; inset: 0; background-size: cover; background-position: center; }
.sp-video-card .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; border-left: 14px solid #fff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; margin-left: -7px; }
.sp-video-card .views { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,0.5); color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 4px; }
.sp-video-card .info-bar { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.8) 100%); padding: 16px 8px 8px; color: #fff; }
.sp-video-card .info-bar .name { font-size: 11px; font-weight: 600; line-height: 1.2; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.sp-video-card .info-bar .price { font-size: 13px; font-weight: 700; color: #ffd84d; }

/* ====== PRODUCT GRID ====== */
.sp-grid-h { background: var(--sp-surface); text-align: center; padding: 10px 0; border-top: 4px solid #f5f5f5; color: var(--sp-primary); font-size: 14px; font-weight: 600; letter-spacing: 1px; }
.sp-grid { column-count: 2; column-gap: 8px; padding: 8px; background: var(--sp-bg); }
.sp-grid > * { display: block; break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid; margin-bottom: 8px; width: 100%; }
.sp-card { background: var(--sp-surface); border-radius: 8px; overflow: hidden; cursor: pointer; position: relative; display: block; }
.sp-card.has-vdo { /* VDO card has video + poster strip */ }
.sp-card-img { width: 100%; background: #eee; position: relative; overflow: hidden; }
.sp-card-img.has-vdo { aspect-ratio: 9/13; }
.sp-card-img-actual { width: 100%; height: auto; display: block; transition: opacity 0.2s; }
.sp-card-img.has-vdo .sp-card-img-actual { width: 100%; height: 100%; object-fit: cover; }

/* Excitement badge — top-left of card image */
/* v286.87/89: bestseller dim badge — bottom-left, clickable */
.sp-card-bestseller,
a.sp-card-bestseller,
a.sp-card-bestseller:hover,
a.sp-card-bestseller:visited,
a.sp-card-bestseller:focus,
a.sp-card-bestseller:active {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: linear-gradient(135deg, var(--sp-primary-light), var(--sp-primary));
    color: #fff !important;
    padding: 2px 7px;
    border-radius: 3px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.4;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18);
    text-decoration: none;
    max-width: calc(100% - 12px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 2;
}
.sp-card-bestseller * { color: #fff !important; }
.sp-card-bestseller:active { transform: scale(0.96); }

.sp-card-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 700;
    z-index: 4;
    line-height: 1.2;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    background: var(--sp-primary);
    color: #fff;
    white-space: nowrap;
}
.sp-card-badge.is-award { background: linear-gradient(135deg, #f5a623, #d97706); }
.sp-card-badge.is-fresh {
    background: var(--sp-surface);
    color: #d63a1f;
    border: 1.5px solid #d63a1f;
    padding: 2px 6px 2px 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 9px;
    letter-spacing: 0.4px;
    font-weight: 800;
    text-transform: uppercase;
}
.sp-card-badge.is-fresh::before {
    content: '';
    display: inline-block;
    width: 13px;
    height: 13px;
    background: radial-gradient(circle at 35% 30%, #ff7a4a 5%, #d63a1f 75%);
    border-radius: 50%;
    box-shadow: inset -1px -2px 2px rgba(0,0,0,0.3), inset 1px 1px 1px rgba(255,255,255,0.4);
    position: relative;
}
.sp-card-badge.is-rating { background: linear-gradient(135deg, #f5a623, #c89b3c); color: var(--sp-text); }
.sp-card-badge.is-hit { background: #be185d; }
.sp-card-badge.is-hot { background: linear-gradient(135deg, var(--sp-primary-light), var(--sp-primary)); }

/* Card name row — small poster next to title for vdo cards */
.sp-card-name-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 4px;
}
.sp-card-name-poster {
    width: 28px;
    height: 40px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.sp-card-name-row .sp-card-name {
    flex: 1;
    min-width: 0;
}
/* VDO card mini strip — small image + name + price below the video (slide pdf p.8) */
.sp-card .sp-card-vdo-strip { display: flex !important; gap: 6px; padding: 6px; background: var(--sp-surface); align-items: center; width: 100%; box-sizing: border-box; }
.sp-card .sp-card-vdo-strip-img { flex: 0 0 36px !important; width: 36px !important; height: 36px !important; max-width: 36px !important; border-radius: 4px; overflow: hidden; background: #eee; }
.sp-card .sp-card-vdo-strip-img img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; max-width: none; }
.sp-card .sp-card-vdo-strip-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sp-card .sp-card-vdo-strip-name { font-size: 10px; line-height: 1.2; color: var(--sp-text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sp-card .sp-card-vdo-strip-price { color: var(--sp-primary); font-size: 13px; font-weight: 700; line-height: 1; }
.sp-card .sp-card-vdo-strip-play { color: var(--sp-primary); font-size: 11px; font-weight: 600; line-height: 1.2; margin-top: 2px; }
.sp-vdo-iframe-wrap { position: absolute; inset: 0; overflow: hidden; background: #000; pointer-events: none; }
/* Scale 16:9 iframe to cover 9:13 portrait card (cover crop) */
/* Math: card aspect = 9:13. Video aspect = 16:9. */
/* For video to fully cover, iframe must be 16:9 ratio AND tall enough to cover card height */
/* Set iframe height = card height (100%), iframe width = (16/9) ÷ (9/13) × card_width = ~257% */
.sp-vdo-iframe {
    position: absolute;
    top: 50%; left: 50%;
    width: 257%;
    height: 100%;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
    -webkit-user-select: none; user-select: none;
}
.sp-vdo-cover { position: absolute; inset: 0; background: #000 center/cover no-repeat; pointer-events: none; opacity: 1; transition: opacity 0.8s ease; z-index: 2; }
.sp-vdo-cover.faded { opacity: 0; }
a.sp-vdo-click-guard { position: absolute; inset: 0; z-index: 3; cursor: pointer; background: transparent; display: block; text-decoration: none; }
/* Click-shield overlay — sits above iframe so YouTube controls can't be clicked, all taps go to parent <a> */
.sp-vdo-clickshield { position: absolute; inset: 0; z-index: 3; background: transparent; cursor: pointer; }
.sp-card-img .live-badge { position: absolute; top: 6px; left: 6px; background: rgba(0,0,0,0.65); color: #fff; font-size: 10px; padding: 2px 5px; border-radius: 3px; display: flex; align-items: center; gap: 3px; z-index: 4; }
.sp-card-img .views-badge { position: absolute; bottom: 50px; right: 6px; background: rgba(0,0,0,0.65); color: #fff; font-size: 10px; padding: 2px 5px; border-radius: 3px; z-index: 4; }

/* ====== SCORE BADGES (RT/IMDB/TMDB/Metacritic) ====== */
.score-badge { position: absolute; top: 6px; left: 6px; font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 3px; line-height: 1.3; display: inline-flex; align-items: center; gap: 3px; box-shadow: 0 1px 2px rgba(0,0,0,0.15); z-index: 2; }
.score-badge.on-vdo { top: auto; bottom: 50px; left: 6px; }
.score-badge.rt { background: var(--sp-surface); color: #c1272d; }
.score-badge.rt::before { content: "🍅"; font-size: 10px; }
.score-badge.imdb { background: #f5c518; color: #1a1a1a; }
.score-badge.imdb::before { content: "IMDb"; font-size: 9px; font-weight: 800; margin-right: 2px; color: #1a1a1a; }
.score-badge.tmdb { background: #032541; color: #01b4e4; }
.score-badge.tmdb::before { content: "TMDB"; font-size: 9px; font-weight: 800; margin-right: 2px; }
.score-badge.metacritic { background: #66cc33; color: #fff; }
.score-badge.metacritic::before { content: "M"; font-size: 11px; font-weight: 800; background: var(--sp-surface); color: #66cc33; padding: 0 3px; border-radius: 2px; margin-right: 2px; }

/* ====== DISC TYPE — full card border ====== */
.sp-card.is-bd { border: 2px solid #02D8E9; }
.sp-card.is-bd50 { border: 2px solid #1e3a8a; }
.sp-card.is-uhd { border: 2px solid #111827; }

/* ====== DISC TYPE BADGE (text label, used in list/feed pages) ====== */
.sp-disc-badge { display: inline-block; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 3px; letter-spacing: 0.5px; line-height: 1.3; margin-bottom: 4px; }
.sp-disc-badge.dvd { background: #6b7280; color: #fff; }
.sp-disc-badge.bd { background: #02D8E9; color: #fff; }
.sp-disc-badge.uhd { background: #111827; color: #ffd700; }

/* ====== FAVORITE BUTTON (heart) ====== */
.sp-fav { position: absolute; top: 6px; right: 6px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.95); border: 0; padding: 0; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,0.3); z-index: 5; display: flex; align-items: center; justify-content: center; }
.sp-fav .sp-fav-icon { font-size: 22px; line-height: 1; color: #fff; -webkit-text-stroke: 1.5px #999; text-stroke: 1.5px #999; font-family: Arial, sans-serif; transition: all 0.15s; }
.sp-fav.is-fav .sp-fav-icon { color: #ef4444 !important; -webkit-text-stroke: 0; text-stroke: 0; }

/* ====== CARD INFO ====== */
.sp-card-info { padding: 8px; }
.sp-card-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 5px; }
.sp-badge { font-size: 10px; padding: 2px 5px; border-radius: 3px; font-weight: 600; line-height: 1.2; display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.sp-badge.new { background: var(--sp-primary); color: #fff; }
.sp-badge.oscar, .sp-badge.bafta, .sp-badge.emmy { background: #fff3cd; color: #856404; border: 1px solid #ffc107; }
.sp-badge.box-office { background: #d4edda; color: #155724; }
.sp-badge.hit { background: #fce7f3; color: #be185d; }
.sp-badge.actor, .sp-badge.genre { background: #e9ecef; color: #495057; }
.sp-card-name { font-size: 13px; line-height: 1.3; color: var(--sp-text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 4px; min-height: 2.6em; }
.sp-card-price { color: var(--sp-primary); font-size: 16px; font-weight: 600; line-height: 1; display: inline-flex; align-items: baseline; gap: 4px; }
.sp-card-price-currency { font-size: 11px; margin-right: 1px; }
.sp-card-price-suffix { font-size: 10px; color: var(--sp-text-dim); font-weight: 400; }
.sp-card-meta { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 11px; color: var(--sp-text-dim); }
.sp-card-rating { color: #ffb800; }

/* ====== KW HISTORY CARD ====== */
.sp-kw-card { background: linear-gradient(180deg, #1a1a2e 0%, #0f3460 100%); color: #fff; border-radius: 8px; cursor: pointer; aspect-ratio: 1/1.4; display: flex; flex-direction: column; padding: 8px; overflow: hidden; }
.sp-kw-poster-grid { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; margin-bottom: 8px; }
.sp-kw-poster { background: #2a2a3e; background-size: cover; background-position: center; border-radius: 2px; }
.sp-kw-label { color: var(--sp-primary); font-size: 11px; font-weight: 600; }
.sp-kw-name { color: #fff; font-size: 14px; font-weight: 600; line-height: 1.2; margin: 2px 0; }
.sp-kw-cta { align-self: flex-start; background: var(--sp-primary); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 12px; margin-top: 4px; }
.sp-kw-results { color: #ddd; font-size: 10px; margin-top: 4px; }

/* ====== BESTSELLER CARD ====== */
.sp-best-card { background: linear-gradient(180deg, #fff 0%, #fff8e1 100%); border: 2px solid #ffe082; border-radius: 8px; overflow: hidden; padding: 8px; text-align: center; cursor: pointer; }
.sp-best-card .crown { font-size: 22px; color: #f59e0b; }
.sp-best-card .label { color: #ea580c; font-size: 11px; font-weight: 600; margin: 4px 0; }
.sp-best-card .img { aspect-ratio: 2/3; background: var(--sp-surface-2); border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.sp-best-card .img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-best-card .name { font-size: 13px; font-weight: 500; color: var(--sp-text); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sp-best-card .sold { color: var(--sp-text-dim); font-size: 11px; margin-top: 4px; }

/* Disc-format color variants for bestseller cards */
/* DVD (default) — gold/amber */
.sp-best-card.is-dvd { background: linear-gradient(180deg, #fff 0%, #fff8e1 100%); border-color: #ffd54f; }
.sp-best-card.is-dvd .crown { color: #f59e0b; }
.sp-best-card.is-dvd .label { color: #ea580c; }

/* Blu-ray (BD25) — blue */
.sp-best-card.is-bd { background: linear-gradient(180deg, #fff 0%, #d8f7fb 100%); border-color: #02D8E9; }
.sp-best-card.is-bd .crown { color: #02D8E9; }
.sp-best-card.is-bd .label { color: #02b0bf; }

/* Blu-ray 50GB — deep blue */
.sp-best-card.is-bd50 { background: linear-gradient(180deg, #fff 0%, #dbeafe 100%); border-color: #1e3a8a; }
.sp-best-card.is-bd50 .crown { color: #1e3a8a; }
.sp-best-card.is-bd50 .label { color: #1e3a8a; }

/* 4K UHD — black */
.sp-best-card.is-uhd { background: linear-gradient(180deg, #fff 0%, #e5e7eb 100%); border-color: #111827; }
.sp-best-card.is-uhd .crown { color: #111827; }
.sp-best-card.is-uhd .label { color: var(--sp-text); }

/* ====== STICKY BOTTOM NAV ====== */
.sp-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto; background: var(--sp-surface); border-top: 1px solid #eee; display: flex; z-index: 100; }
.sp-bnav-item { flex: 1; text-align: center; padding: 8px 0 6px; color: var(--sp-text-dim); text-decoration: none; font-size: 11px; position: relative; }
.sp-bnav-item.active { color: var(--sp-primary); }
.sp-bnav-icon { font-size: 22px; height: 26px; line-height: 26px; display: block; }
.sp-bnav-badge { position: absolute; top: 4px; right: 30%; background: var(--sp-primary); color: #fff; font-size: 9px; padding: 0 4px; border-radius: 8px; font-weight: 600; }

/* ====== STICKY BOTTOM PROMO (guest) ====== */
.sp-bottom-promo { position: fixed; bottom: 60px; left: 0; right: 0; max-width: 480px; margin: 0 auto; background: linear-gradient(90deg, var(--sp-primary-light), var(--sp-primary)); color: #fff; padding: 8px 12px; display: flex; align-items: center; gap: 8px; font-size: 13px; z-index: 99; }
.sp-bottom-promo .icon { width: 28px; height: 28px; background: rgba(255,255,255,0.25); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.sp-bottom-promo .text { flex: 1; line-height: 1.2; min-width: 0; }
.sp-bottom-promo .text .t1 { font-weight: 600; font-size: 12px; }
.sp-bottom-promo .text .t2 { font-size: 11px; opacity: 0.9; }
.sp-bottom-promo .btn { background: var(--sp-surface); color: var(--sp-primary); font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 14px; border: 0; flex-shrink: 0; }
.sp-bottom-promo .close { color: #fff; font-size: 18px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; opacity: 0.7; cursor: pointer; flex-shrink: 0; background: transparent; border: 0; }

/* ====== FLOATING TOP BUTTON ====== */
/* v286.93: scroll-to-top button removed (Yut: ทับ A+ font toggle) */
.sp-top-btn { display: none !important; }
.sp-top-btn.show { display: flex; }

/* ============================================================
 * DETAIL PAGE
 * ============================================================ */
.sp-back-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(0,0,0,0.4); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; text-decoration: none; margin-right: auto; }

.sp-hero { position: relative; margin-top: -52px; aspect-ratio: 1/1; background: #000; overflow: hidden; }
.sp-hero-img { width: 100%; height: 100%; background-size: cover; background-position: center; }
.sp-hero-counter { position: absolute; bottom: 12px; right: 12px; background: rgba(0,0,0,0.5); color: #fff; padding: 3px 8px; border-radius: 12px; font-size: 12px; }
.sp-hero-tabs { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.sp-hero-tab { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.5); }
.sp-hero-tab.active { background: var(--sp-surface); width: 16px; border-radius: 3px; }
.sp-hero-badges { position: absolute; top: 60px; right: 12px; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.sp-hero-badge { font-size: 11px; font-weight: 700; padding: 3px 7px; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.sp-hero-badge.rt { background: var(--sp-surface); color: #c1272d; }
.sp-hero-badge.rt::before { content: "🍅 "; }
.sp-hero-badge.imdb { background: #f5c518; color: var(--sp-text); }
.sp-hero-badge.imdb::before { content: "IMDb "; font-weight: 800; font-size: 9px; }
.sp-hero-badge.tmdb { background: #032541; color: #01b4e4; }
.sp-hero-badge.tmdb::before { content: "TMDB "; font-weight: 800; font-size: 9px; }

.sp-price-block { background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-dark)); color: #fff; padding: 14px 16px; }
.sp-price-main { font-size: 26px; font-weight: 700; line-height: 1; }
.sp-price-currency { font-size: 16px; margin-right: 1px; }
.sp-price-old { font-size: 14px; text-decoration: line-through; opacity: 0.7; margin-left: 8px; }
.sp-price-range { font-size: 14px; opacity: 0.9; margin-top: 4px; }

.sp-title-block { background: var(--sp-surface); padding: 12px 16px; border-bottom: 8px solid #f5f5f5; }
.sp-title { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--sp-text); margin-bottom: 8px; }
.sp-meta-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
/* v286.99d — language chips (audio + sub, all languages with Thai highlighted) */
.sp-lang-badges { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.sp-lang-row {
    display: flex; flex-wrap: wrap; align-items: center; gap: 5px;
    line-height: 1.4;
}
.sp-lang-row-icon { font-size: 14px; flex-shrink: 0; opacity: 0.85; }
.sp-lang-chip {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 11.5px; font-weight: 600;
    line-height: 1.3;
    /* v286.99d — non-Thai chips colored (Yut: ไม่เอาสีเทา ใส่ธง) */
    background: linear-gradient(135deg, #e0f2fe, #bae6fd);
    color: #075985;
    border: 1px solid #7dd3fc;
    box-shadow: 0 1px 2px rgba(2, 132, 199, 0.15);
}
.sp-lang-chip.sp-lang-sub:not(.is-thai) {
    background: linear-gradient(135deg, #f3e8ff, #ddd6fe);
    color: #5b21b6; border-color: #c4b5fd;
    box-shadow: 0 1px 2px rgba(124, 58, 237, 0.15);
}
.sp-lang-chip.is-thai {
    background: linear-gradient(135deg, #fff8e1, #ffd180);
    color: #b35900; border-color: #ffb366; font-weight: 700;
    box-shadow: 0 1px 3px rgba(255, 167, 38, 0.3);
}
.sp-lang-chip.sp-lang-sub.is-thai {
    background: linear-gradient(135deg, #e8f5e9, #a5d6a7);
    color: #1f6a23; border-color: #66bb6a;
    box-shadow: 0 1px 3px rgba(76, 175, 80, 0.3);
}
.sp-lang-tech {
    display: inline-block; margin-left: 4px;
    padding: 1px 5px; border-radius: 3px;
    background: rgba(0,0,0,0.08);
    font-size: 10px; font-weight: 700;
    color: inherit; opacity: 0.85;
    letter-spacing: 0.2px;
}
.sp-lang-chip.is-thai .sp-lang-tech { background: rgba(179,89,0,0.15); }
.sp-lang-chip.sp-lang-sub.is-thai .sp-lang-tech { background: rgba(31,106,35,0.15); }
/* v286.99d — revenue + award badges (inline with lang chips, Yut: 🏆 อันเดียวโล่ง) */
.sp-lang-chip.sp-lang-hit {
    background: linear-gradient(135deg, #fce7f3, #fbcfe8);
    color: #9d174d; border-color: #f9a8d4;
    box-shadow: 0 1px 3px rgba(190, 24, 93, 0.15);
}
.sp-lang-chip.sp-lang-award {
    background: linear-gradient(135deg, #fef3c7, #fcd34d);
    color: #78350f; border-color: #fbbf24;
    box-shadow: 0 1px 3px rgba(217, 119, 6, 0.2);
    font-weight: 700;
}

/* v286.99d — Signal strip wrap (combines rotator + rolling activity in 1 row, Yut: รวมกัน) */
.sp-signal-strip { display: flex; flex-direction: column; gap: 8px; padding: 0 14px; margin-top: 8px; }
.sp-signal-strip.is-2col { flex-direction: row; align-items: stretch; }
.sp-signal-strip.is-2col > * { flex: 1; min-width: 0; margin: 0 !important; }

/* v286.99d — Rolling activity (Yut: 🔥 N คน เพิ่งซื้อใน 1 ชม., strong red) */
.sp-rolling-activity {
    display: flex; align-items: center; gap: 6px;
    padding: 9px 11px;
    background: linear-gradient(90deg, #fef2f2 0%, #fee2e2 100%);
    border: 1px solid #fca5a5;
    border-left: 4px solid #dc2626;
    border-radius: 8px;
    font-size: 12.5px; font-weight: 600;
    color: #991b1b;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(220, 38, 38, 0.12);
    line-height: 1.4;
}
.sp-rolling-activity .sp-ra-icon { font-size: 17px; flex-shrink: 0; }
.sp-rolling-activity .sp-ra-text { flex: 1; min-width: 0; line-height: 1.4; }
.sp-rolling-activity strong { font-weight: 800; color: #b91c1c; font-size: 13.5px; }

/* v286.99d — Customer reviews prominent (moved up to where ข้อมูลแผ่น was) */
.sp-cust-reviews-prominent {
    background: linear-gradient(180deg, #fffaf2 0%, #fff 100%);
    border-top: 2px solid var(--sp-primary);
    margin-bottom: 16px; /* spacing before scores chips */
}
.sp-cust-reviews-prominent .sp-detail-section-h .title { font-size: 18px; font-weight: 700; color: var(--sp-primary); }
.sp-cust-reviews-head { flex-wrap: wrap; gap: 4px; }
.sp-cust-reviews-head-left { display: flex; flex-direction: column; gap: 4px; }
.sp-cust-reviews-avg { display: inline-flex; align-items: center; gap: 6px; }
.sp-cra-num { font-size: 22px; font-weight: 800; color: #f59e0b; line-height: 1; }
.sp-cra-stars { display: inline-flex; gap: 1px; font-size: 16px; line-height: 1; }
.sp-cra-stars .s-full  { color: #f59e0b; }
.sp-cra-stars .s-half  { color: #f59e0b; opacity: 0.5; }
.sp-cra-stars .s-empty { color: #e0e0e0; }
.sp-cra-count { font-size: 12px; color: var(--sp-text-dim); }

/* v286.99d — Code row 1-line (Yut: รูปแบบ + จำนวนแผ่น + รหัสสินค้า บรรทัดเดียว) */
.sp-detail-code-row {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 4px;
    margin-top: 4px;
    line-height: 1.5;
}
.sp-detail-code-row .sp-detail-code { display: inline; }
.sp-detail-code-sep { color: #ccc; font-weight: 700; }

/* v286.99d — Cast preview row near hero (Yut: รูปดารา ดึงดูด) */
.sp-detail-cast-preview {
    display: flex; gap: 10px;
    padding: 14px 12px 12px;
    background: var(--sp-surface);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--sp-border);
}
.sp-detail-cast-preview:has(.sp-cp-card:nth-child(-n+4):last-child) {
    justify-content: center;
}
.sp-detail-cast-preview::-webkit-scrollbar { display: none; }
.sp-cp-card {
    flex-shrink: 0;
    width: 60px;
    text-decoration: none;
    color: inherit;
    text-align: center;
}
.sp-cp-photo {
    width: 60px; height: 60px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--sp-bg);
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    margin-bottom: 4px;
}
.sp-cp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-cp-no-photo {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 22px;
}
.sp-cp-name {
    font-size: 11px; line-height: 1.2;
    color: var(--sp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sp-cp-more-photo {
    background: var(--sp-surface-2);
    color: var(--sp-primary);
    font-weight: 800; font-size: 18px;
    display: flex; align-items: center; justify-content: center;
}
.sp-cp-more .sp-cp-name { color: var(--sp-primary); font-weight: 600; }

/* v286.99d — Tabs system "ข้อมูลภาพยนตร์" + sticky nav */
.sp-info-tabs { padding: 0 0 16px; position: relative; }
.sp-info-tabs .sp-tabs-nav {
    display: flex;
    gap: 0;
    overflow-x: auto;
    border-bottom: 1px solid var(--sp-border);
    background: var(--sp-surface);
    margin: 0;
    padding: 0 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Sticky positioning when scrolled past */
    position: sticky;
    top: 0;
    z-index: 50;
    transition: box-shadow 0.2s;
}
.sp-info-tabs .sp-tabs-nav.is-stuck {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border-bottom-color: #e0e0e0;
}
.sp-info-tabs .sp-tabs-nav::-webkit-scrollbar { display: none; }
.sp-info-tabs .sp-tab-btn {
    flex-shrink: 0;
    padding: 13px 14px;
    background: transparent;
    border: 0;
    border-bottom: 2.5px solid transparent;
    color: var(--sp-text-dim);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.sp-info-tabs .sp-tab-btn:active { background: var(--sp-primary-bg); }
.sp-info-tabs .sp-tab-btn.is-active {
    color: var(--sp-primary);
    border-bottom-color: var(--sp-primary);
    background: linear-gradient(180deg, #fff 60%, var(--sp-primary-bg) 100%);
}
.sp-info-tabs .sp-tab-count { font-size: 11px; color: #aaa; font-weight: 500; margin-left: 2px; }
.sp-info-tabs .sp-tab-btn.is-active .sp-tab-count { color: var(--sp-primary); }
.sp-info-tabs .sp-tab-pane { display: none; padding: 14px 14px 4px; }
.sp-info-tabs .sp-tab-pane.is-active { display: block; }
/* Cast row scroll indicator — gradient fade right edge */
.sp-info-tabs #spTabCast .sp-cast-row { position: relative; }
.sp-info-tabs #spTabCast .sp-cast-row::after {
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0; width: 30px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.95));
    pointer-events: none;
}
.sp-meta-tag { font-size: 11px; padding: 2px 7px; border-radius: 3px; font-weight: 600; }
.sp-meta-tag.new { background: var(--sp-primary); color: #fff; }
.sp-meta-tag.oscar, .sp-meta-tag.bafta { background: #fff3cd; color: #856404; border: 1px solid #ffc107; }
.sp-meta-tag.box-office { background: #d4edda; color: #155724; }
.sp-meta-tag.hit { background: #fce7f3; color: #be185d; }
.sp-meta-tag.year, .sp-meta-tag.runtime { background: #e9ecef; color: #495057; }
.sp-stats-row { display: flex; gap: 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #f0f0f0; font-size: 12px; color: var(--sp-text-dim); }
.sp-stat { display: flex; align-items: center; gap: 4px; }
.sp-stat strong { color: var(--sp-text); font-weight: 600; }

.sp-disc-warn { padding: 10px 14px; display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.sp-disc-warn.bd { background: #fff8e1; border-left: 4px solid #f9a825; color: #6d4c00; }
.sp-disc-warn.uhd { background: #ffe5e5; border-left: 4px solid #d32f2f; color: #6d0000; }
.sp-disc-warn-ico { font-size: 18px; flex-shrink: 0; }
.sp-disc-warn-txt { font-size: 13px; line-height: 1.4; }
.sp-disc-warn-txt b { font-weight: 700; }

.sp-coupon-row { background: var(--sp-surface); border-bottom: 8px solid #f5f5f5; padding: 12px 16px; }
.sp-coupon-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.sp-coupon-h .label { font-size: 14px; font-weight: 600; color: var(--sp-primary); }
.sp-coupon-h .more { font-size: 12px; color: var(--sp-primary); text-decoration: none; }
.sp-coupon-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.sp-coupon-list::-webkit-scrollbar { display: none; }
.sp-coupon { flex: 0 0 auto; background: linear-gradient(90deg, var(--sp-primary) 0%, var(--sp-primary-dark) 100%); color: #fff; border-radius: 6px; padding: 8px 10px; display: flex; align-items: center; gap: 8px; min-width: 200px; position: relative; }
.sp-coupon::before, .sp-coupon::after { content: ""; position: absolute; width: 10px; height: 10px; background: var(--sp-surface); border-radius: 50%; top: 50%; transform: translateY(-50%); }
.sp-coupon::before { left: -5px; }
.sp-coupon::after { right: -5px; }
.sp-coupon-disc { font-size: 18px; font-weight: 700; line-height: 1; }
.sp-coupon-text { flex: 1; font-size: 11px; line-height: 1.3; }
.sp-coupon-btn { background: rgba(255,255,255,0.2); color: #fff; border: 0; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; cursor: pointer; }
.sp-coupon-btn.claimed { background: rgba(255,255,255,0.5); color: var(--sp-primary); }

/* ============================================================ */
/*  COUPONS PAGE (full Shopee-style)                             */
/* ============================================================ */
.sp-coupon-info-bar {
    background: var(--sp-primary-bg);
    color: var(--sp-primary-dark);
    font-size: 13px;
    padding: 12px 14px;
    border-bottom: 1px solid #ffd5bb;
    line-height: 1.5;
}
.sp-coupon-info-bar strong { color: var(--sp-primary); }
.sp-coupon-list {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sp-coupon-card {
    display: flex;
    background: var(--sp-surface);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    position: relative;
    min-height: 120px;
}
.sp-coupon-card.active {
    box-shadow: 0 0 0 2px var(--sp-primary);
}
.sp-coupon-left {
    flex: 0 0 110px;
    background: linear-gradient(135deg, var(--sp-primary-light) 0%, var(--sp-primary) 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px 8px;
    position: relative;
}
/* Perforated edge between left + right */
.sp-coupon-left::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: -6px;
    width: 12px;
    background-image: radial-gradient(circle, #fff 4px, transparent 4px);
    background-size: 12px 14px;
    background-repeat: repeat-y;
    background-position: center;
    z-index: 2;
}
.sp-coupon-card .sp-coupon-disc {
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    word-break: break-word;
}
.sp-coupon-disc-label {
    font-size: 11px;
    color: rgba(255,255,255,0.85);
    margin-top: 4px;
    letter-spacing: 0.5px;
}
.sp-coupon-right {
    flex: 1;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.sp-coupon-code {
    font-size: 13px;
    color: var(--sp-text-dim);
    margin-bottom: 4px;
}
.sp-coupon-code strong {
    color: var(--sp-primary);
    font-weight: 700;
    font-family: ui-monospace, monospace;
    font-size: 14px;
}
.sp-coupon-scope, .sp-coupon-cond, .sp-coupon-exp {
    font-size: 11.5px;
    color: var(--sp-text-dim);
    line-height: 1.4;
}
.sp-coupon-use-btn {
    margin-top: auto;
    align-self: flex-end;
    background: var(--sp-primary);
    color: #fff;
    border: 0;
    padding: 7px 18px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}
.sp-coupon-use-btn:active { background: #d63a1f; transform: scale(0.97); }
.sp-coupon-use-btn.selected {
    background: var(--sp-bg);
    color: var(--sp-text-dim);
    cursor: default;
}
/* v286.88: dual button row — เก็บ + ใช้เลย */
.sp-coupon-btn-row { display: flex; gap: 6px; margin-top: auto; align-self: stretch; justify-content: flex-end; }
.sp-coupon-btn-row .sp-coupon-use-btn { margin-top: 0; align-self: stretch; flex: 1; max-width: 100px; }
.sp-coupon-collect-btn {
    background: var(--sp-surface); color: var(--sp-primary); border: 1px solid var(--sp-primary);
    padding: 7px 12px; border-radius: 4px;
    font-size: 12.5px; font-weight: 600; font-family: inherit;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    flex: 0 0 auto;
}
.sp-coupon-collect-btn:active { background: var(--sp-primary-bg); transform: scale(0.97); }
.sp-coupon-collect-btn.done { background: #f0fdf4; color: #2c8a40; border-color: #2c8a40; }
.sp-coupon-collect-btn:disabled { opacity: 0.6; }

.sp-variant-block { background: var(--sp-surface); padding: 14px 16px; border-bottom: 8px solid #f5f5f5; }
.sp-variant-row { margin-bottom: 14px; }
.sp-variant-row:last-child { margin-bottom: 0; }
.sp-variant-label { font-size: 14px; font-weight: 600; margin-bottom: 8px; color: var(--sp-text); }
.sp-variant-label .selected { color: var(--sp-text-dim); font-weight: 400; font-size: 13px; margin-left: 4px; }
.sp-variant-options { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-variant-opt { background: var(--sp-bg); border: 1px solid transparent; padding: 8px 12px; border-radius: 4px; cursor: pointer; text-align: left; font-size: 13px; font-family: inherit; color: var(--sp-text); line-height: 1.3; min-width: 80px; }
.sp-variant-opt.active { border-color: var(--sp-primary); background: var(--sp-primary-bg); color: var(--sp-primary); }
.sp-variant-opt.disabled { opacity: 0.4; text-decoration: line-through; cursor: not-allowed; }
.sp-variant-opt .price { display: block; font-size: 11px; color: var(--sp-primary); font-weight: 600; margin-top: 2px; }
.sp-variant-opt .stock { display: block; font-size: 10px; color: var(--sp-text-dim); margin-top: 1px; }

.sp-info-bar { background: var(--sp-surface); padding: 10px 16px; display: flex; justify-content: space-around; border-bottom: 8px solid #f5f5f5; }
.sp-info-item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 11px; color: var(--sp-text-dim); text-align: center; line-height: 1.3; }
.sp-info-ico { font-size: 22px; }
.sp-info-item strong { color: var(--sp-text); font-weight: 600; }

.sp-tmdb-block { background: var(--sp-surface); border-bottom: 8px solid #f5f5f5; }
.sp-tmdb-sect { padding: 14px 16px; border-bottom: 1px solid #f5f5f5; }
.sp-tmdb-sect:last-child { border-bottom: 0; }
.sp-tmdb-sect-title { font-size: 14px; font-weight: 600; color: var(--sp-text); margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; }
.sp-tmdb-sect-title .more { font-size: 12px; color: var(--sp-primary); font-weight: 400; text-decoration: none; }
.sp-tmdb-overview { font-size: 14px; color: var(--sp-text); line-height: 1.6; }

.sp-tmdb-coll { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sp-tmdb-coll-item { cursor: pointer; }
.sp-tmdb-coll-poster { width: 100%; aspect-ratio: 2/3; background: #eee; border-radius: 4px; background-size: cover; background-position: center; margin-bottom: 4px; }
.sp-tmdb-coll-name { font-size: 12px; line-height: 1.3; color: var(--sp-text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sp-tmdb-coll-yr { font-size: 11px; color: var(--sp-text-dim); }

.sp-tmdb-ratings { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sp-tmdb-rating { display: flex; align-items: center; gap: 8px; background: var(--sp-surface-2); padding: 8px 10px; border-radius: 6px; }
.sp-tmdb-rating-logo { flex-shrink: 0; font-size: 11px; font-weight: 800; padding: 3px 6px; border-radius: 3px; }
.sp-tmdb-rating-logo.rt { background: var(--sp-surface); color: #c1272d; border: 1px solid #c1272d; }
.sp-tmdb-rating-logo.imdb { background: #f5c518; color: var(--sp-text); }
.sp-tmdb-rating-logo.tmdb { background: #032541; color: #01b4e4; }
.sp-tmdb-rating-logo.metacritic { background: #66cc33; color: #fff; }
.sp-tmdb-rating-score { font-size: 16px; font-weight: 700; color: var(--sp-text); }
.sp-tmdb-rating-count { font-size: 11px; color: var(--sp-text-dim); }

.sp-tmdb-cast { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.sp-tmdb-cast::-webkit-scrollbar { display: none; }
.sp-tmdb-cast-item { flex: 0 0 70px; text-align: center; }
.sp-tmdb-cast-photo { width: 70px; height: 70px; border-radius: 50%; background: #ddd; background-size: cover; background-position: center; margin-bottom: 6px; }
.sp-tmdb-cast-name { font-size: 12px; font-weight: 500; line-height: 1.2; color: var(--sp-text); margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sp-tmdb-cast-char { font-size: 10px; color: var(--sp-text-dim); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }

.sp-tmdb-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-tmdb-tag { background: var(--sp-bg); color: #495057; font-size: 12px; padding: 4px 10px; border-radius: 14px; }

.sp-tmdb-awards-text { font-size: 13px; color: var(--sp-text); line-height: 1.5; background: #fff8e1; padding: 10px 12px; border-radius: 6px; border-left: 3px solid #ffc107; }

.sp-tmdb-fin { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sp-tmdb-fin-item { background: var(--sp-surface-2); padding: 10px; border-radius: 6px; }
.sp-tmdb-fin-label { font-size: 11px; color: var(--sp-text-dim); margin-bottom: 4px; }
.sp-tmdb-fin-value { font-size: 15px; font-weight: 600; color: var(--sp-text); }

.sp-tmdb-video { aspect-ratio: 16/9; background: #000; border-radius: 8px; position: relative; overflow: hidden; cursor: pointer; }
.sp-tmdb-video-thumb { width: 100%; height: 100%; background-size: cover; background-position: center; }
.sp-tmdb-video-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; }
.sp-tmdb-video-play::after { content: ""; border-left: 18px solid var(--sp-primary); border-top: 12px solid transparent; border-bottom: 12px solid transparent; margin-left: 4px; }
.sp-tmdb-video-label { position: absolute; bottom: 8px; left: 8px; background: rgba(0,0,0,0.6); color: #fff; font-size: 11px; padding: 2px 6px; border-radius: 3px; }

.sp-recommend { padding: 14px 12px; background: var(--sp-surface); border-bottom: 8px solid #f5f5f5; }
.sp-recommend-title { font-size: 14px; font-weight: 600; color: var(--sp-primary); margin-bottom: 10px; text-align: center; }
.sp-recommend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sp-mini-card { background: var(--sp-surface); border-radius: 6px; border: 1px solid #f0f0f0; overflow: hidden; }
.sp-mini-card .img { aspect-ratio: 1/1; background: #eee; background-size: cover; background-position: center; }
.sp-mini-card .info { padding: 6px 8px; }
.sp-mini-card .name { font-size: 12px; line-height: 1.3; color: var(--sp-text); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 2px; min-height: 2.6em; }
.sp-mini-card .price { color: var(--sp-primary); font-size: 14px; font-weight: 600; }

.sp-sticky-bottom { position: fixed; bottom: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto; background: var(--sp-surface); border-top: 1px solid #eee; display: flex; align-items: stretch; z-index: 100; height: 56px; }
.sp-bb-side { flex: 0 0 60px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: var(--sp-text-dim); font-size: 10px; border: 0; background: transparent; cursor: pointer; position: relative; }
.sp-bb-side .ico { font-size: 22px; line-height: 1; margin-bottom: 2px; }
.sp-bb-side .badge { position: absolute; top: 4px; right: 8px; background: var(--sp-primary); color: #fff; font-size: 9px; padding: 1px 4px; border-radius: 8px; font-weight: 600; line-height: 1.2; min-width: 14px; text-align: center; }
.sp-bb-add-cart, .sp-bb-buy-now { flex: 1; border: 0; color: #fff; font-size: 15px; font-weight: 600; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.sp-bb-add-cart .ico { font-size: 18px; }
.sp-bb-add-cart .lbl { font-size: 14px; }
.sp-bb-add-cart { background: var(--sp-primary-light); }
.sp-bb-buy-now { background: var(--sp-primary); }

/* ============================================================ */
/*  DETAIL PAGE (v284)                                          */
/* ============================================================ */

/* Bug#156 (2026-05-14 — Yut tablet audit): centered to 480px to mirror sp-body
   so iPad/tablet show same width as phones (was stretching to 100% before). */
.sp-detail-body { max-width: 480px; margin: 0 auto; padding-bottom: 80px; background: var(--sp-surface); min-height: 100vh; position: relative; overflow-x: clip; }

/* Header — transparent over hero (only round dark icon buttons floating)
   On scroll > 100px → solid orange gradient + show search bar */
.sp-detail-header { position: fixed; top: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto; z-index: 100; display: flex; align-items: center; padding: 8px 10px; gap: 6px; background: linear-gradient(180deg, var(--sp-primary-light) 0%, var(--sp-primary) 100%); box-shadow: 0 2px 6px rgba(0,0,0,0.1); transition: transform 0.25s ease-out; transform: translateY(-100%); min-height: 52px; }
.sp-detail-header.scrolled { transform: translateY(0); }

.sp-detail-header .sp-back-btn,
.sp-detail-header .sp-icon-btn {
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(0,0,0,0.45); color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; text-decoration: none; border: 0; cursor: pointer; padding: 0;
    transition: background 0.2s;
}
.sp-detail-header.scrolled .sp-back-btn,
.sp-detail-header.scrolled .sp-icon-btn { background: rgba(255,255,255,0.18); }

/* Search bar inside header — translucent at top, solid when scrolled */
.sp-detail-search-bar {
    flex: 1; height: 34px; border-radius: 17px;
    background: rgba(255,255,255,0.85); display: flex; align-items: center;
    padding: 0 12px; gap: 8px;
    transition: all 0.25s; min-width: 0;
    border: 0;
}
.sp-detail-header.scrolled .sp-detail-search-bar { background: var(--sp-surface); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.sp-detail-search-bar .sp-search-icon { color: var(--sp-text-dim); flex-shrink: 0; }
.sp-detail-search-bar .sp-detail-search-text {
    flex: 1; color: var(--sp-text); font-size: 13px;
    border: 0; outline: 0; background: transparent;
    font-family: inherit;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 0; margin: 0;
    min-width: 0;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
.sp-detail-search-bar input.sp-detail-search-text.sp-search-empty {
    color: #aaa;
}
.sp-detail-search-bar .sp-detail-search-text::placeholder { color: #aaa; }

/* (Removed obsolete `.sp-detail-title { display: none; }` — was hiding the title) */

/* Hero gallery */
.sp-detail-hero { position: relative; width: 100%; aspect-ratio: 1/1; background: #000; overflow: hidden; }
.sp-detail-hero .sp-hero-track { position: relative; width: 100%; height: 100%; }
.sp-detail-hero .sp-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.3s; }
.sp-detail-hero .sp-hero-slide.active { opacity: 1; }
.sp-detail-hero .sp-hero-slide-img { width: 100%; height: 100%; object-fit: contain; background: #111; display: block; }
.sp-detail-hero .sp-hero-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; z-index: 4; }
.sp-detail-hero .sp-hero-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; transition: all 0.2s; }
.sp-detail-hero .sp-hero-dot.active { background: var(--sp-surface); width: 18px; border-radius: 3px; }
.sp-detail-hero .sp-hero-counter { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,0.55); color: #fff; font-size: 11px; padding: 3px 8px; border-radius: 10px; }

/* v286.99k rev16 — Title logo overlay (Netflix style). Yut: "เงาที่โลโก้แปลกๆ" —
   removed dark gradient bg (was making transparent areas of PNG logo look like a
   black box). Now logo floats on the image with multi-layer drop-shadow for legibility. */
.sp-detail-tband {
    position: absolute;
    left: 14px; bottom: 14px;
    z-index: 3;
    pointer-events: none;
    /* No bg — just position container, transparent */
    max-width: 60%;
}
.sp-detail-tband-logo {
    max-height: 72px; max-width: 100%;
    display: block;
    object-fit: contain; object-position: left bottom;
    /* Triple drop-shadow: tight black outline + soft halo for both bright + dark backdrops */
    filter:
        drop-shadow(0 0 2px rgba(0,0,0,0.95))
        drop-shadow(0 1px 3px rgba(0,0,0,0.85))
        drop-shadow(0 0 12px rgba(0,0,0,0.4));
}
@media (max-width: 380px) {
    .sp-detail-tband-logo { max-height: 56px; }
    .sp-detail-tband { left: 12px; bottom: 12px; }
}
/* v286.99c — review badges with brand-style logos (Yut: เด่นหน่อยว่าจากค่ายไหน) */
.sp-detail-hero .sp-hero-scores { position: absolute; top: 56px; right: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 4; align-items: flex-end; }
.sp-rev-badge {
    display: inline-flex; align-items: stretch;
    background: rgba(255,255,255,0.97);
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
    overflow: hidden;
    text-decoration: none;
    line-height: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.sp-rev-badge .sp-rev-logo {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 5px 8px;
    font-size: 11px; font-weight: 900;
    letter-spacing: -0.3px;
    gap: 4px;
}
.sp-rev-badge .sp-rev-score {
    display: inline-flex; align-items: baseline;
    padding: 5px 9px;
    background: var(--sp-surface); color: var(--sp-text);
    font-weight: 700;
}
.sp-rev-badge .sp-rev-score .num { font-size: 15px; }
.sp-rev-badge .sp-rev-score .den { font-size: 10px; color: var(--sp-text-dim); margin-left: 1px; }

/* IMDb — yellow box with bold black text */
.sp-rev-imdb .sp-rev-logo { background: #f5c518; color: var(--sp-text); }
.sp-rev-imdb .sp-rev-imdb-mark { font-family: 'Arial Black', Helvetica, sans-serif; font-size: 12px; }

/* Rotten Tomatoes — fresh (red tomato) / rotten (green splat).
   Yut: tomato red SVG was on red bg → invisible. Use white bg + colored
   icon so tomato stands out. */
.sp-rev-rt .sp-rev-logo { padding: 3px 8px; gap: 5px; color: #fa320a; font-weight: 800; background: #fff; }
.sp-rev-rt-fresh .sp-rev-logo { background: #fff; color: #fa320a; }
.sp-rev-rt-rotten .sp-rev-logo { background: #fff; color: #2d8a4f; }
.sp-rev-rt .sp-rev-rt-name { font-size: 11px; }

/* Metacritic — color tier */
.sp-rev-meta .sp-rev-logo { color: #fff; gap: 5px; }
.sp-rev-meta-high .sp-rev-logo { background: #66cc33; }
.sp-rev-meta-mid  .sp-rev-logo { background: #ffcc33; color: var(--sp-text); }
.sp-rev-meta-low  .sp-rev-logo { background: #ff0000; }
.sp-rev-meta .sp-rev-meta-mark { background: rgba(0,0,0,0.18); padding: 2px 5px; border-radius: 3px; font-size: 11px; font-family: 'Times New Roman', serif; font-style: italic; }
.sp-rev-meta .sp-rev-meta-name { font-size: 10px; font-weight: 700; }
.sp-rev-meta .sp-rev-score { background: var(--sp-surface); }

/* Price block */
.sp-detail-price { background: linear-gradient(180deg, var(--sp-primary-bg) 0%, #fff 100%); padding: 12px 14px 10px; border-bottom: 1px solid var(--sp-border); }
.sp-detail-price-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.sp-detail-price-left { flex: 1 1 auto; min-width: 0; }
.sp-detail-price-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding-top: 2px;
}
.sp-detail-sales {
    font-size: 12px;
    color: var(--sp-text-dim);
}
.sp-detail-sales .num {
    font-weight: 600;
    color: var(--sp-text-dim);
}
.sp-detail-heart {
    background: transparent;
    border: 0;
    padding: 4px;
    cursor: pointer;
    color: var(--sp-text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s, color 0.15s;
}
.sp-detail-heart.active { color: var(--sp-primary); }
.sp-detail-heart:active { transform: scale(0.85); }

/* Bestseller badge — Shopee red bar, clickable */
.sp-bestseller-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(90deg, #fff0e8 0%, #ffe2d0 100%);
    border-top: 1px solid #ffd5bb;
    border-bottom: 1px solid #ffd5bb;
    text-decoration: none;
    color: var(--sp-primary-dark);
    font-size: 13px;
    font-weight: 600;
    -webkit-tap-highlight-color: transparent;
}
.sp-bestseller-badge:active { background: #ffe2d0; }
.sp-bs-icon { font-size: 18px; line-height: 1; }
.sp-bs-text { flex: 1; line-height: 1.3; }
.sp-bs-arrow { font-size: 18px; color: var(--sp-primary-dark); opacity: 0.7; }
.sp-price-main { color: var(--sp-primary); line-height: 1; }
.sp-price-main .sym { font-size: 18px; font-weight: 600; vertical-align: top; margin-right: 2px; }
.sp-price-main .amt { font-size: 28px; font-weight: 700; }
.sp-price-main .range { font-size: 16px; font-weight: 500; color: var(--sp-text-dim); margin-left: 4px; }
.sp-price-hint { font-size: 11px; color: var(--sp-text-dim); margin-top: 4px; }

/* Title block */
.sp-detail-title-block { padding: 12px 14px; background: var(--sp-surface); border-bottom: 8px solid #f5f5f5; }
.sp-detail-title { font-size: 17px; font-weight: 600; color: var(--sp-text); line-height: 1.35; margin: 0 0 6px; }
.sp-detail-code { font-size: 12px; color: var(--sp-text-dim); margin-bottom: 8px; }
.sp-meta-row { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.sp-meta-tag { font-size: 11px; color: var(--sp-text-dim); background: var(--sp-bg); padding: 3px 8px; border-radius: 3px; }
.sp-meta-tag.is-imdb { background: #fff8e1; color: #b8860b; border: 1px solid #ffd700; font-weight: 600; }
.sp-meta-tag.is-hit { background: #fce7f3; color: #be185d; font-weight: 600; }
.sp-meta-tag.is-award { background: linear-gradient(135deg, #fff8e1, #ffe9a8); color: #856404; border: 1px solid #ffc107; font-weight: 600; }

/* Trust signals row — always shown for conversion boost */
.sp-trust-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    background: var(--sp-surface-2);
    border-bottom: 8px solid #f5f5f5;
}
.sp-trust-item {
    background: var(--sp-surface);
    padding: 10px 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.sp-trust-ico { font-size: 18px; flex-shrink: 0; line-height: 1; }
.sp-trust-text { min-width: 0; line-height: 1.2; }
.sp-trust-text .t1 { font-size: 11.5px; font-weight: 600; color: var(--sp-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-trust-text .t2 { font-size: 10px; color: var(--sp-text-dim); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-trust-item.is-urgent { background: linear-gradient(135deg, var(--sp-primary-bg) 0%, #ffe2d0 100%); }
.sp-trust-item.is-urgent .sp-trust-text .t1 { color: var(--sp-primary); }
.sp-trust-item.is-urgent .sp-trust-text .t2 { color: var(--sp-primary-dark); font-weight: 600; }
.sp-stats-row { display: flex; gap: 14px; padding-top: 8px; border-top: 1px solid #f5f5f5; }
.sp-stat { font-size: 12px; color: var(--sp-text-dim); }
.sp-stat-num { font-weight: 700; color: var(--sp-primary); }

/* Disc warning */
.sp-disc-warn { padding: 10px 14px; font-size: 13px; font-weight: 600; line-height: 1.3; }
.sp-disc-warn.sp-warn-bd { background: #fff8e1; color: #b08400; border-bottom: 1px solid #f0e0a0; }
.sp-disc-warn.sp-warn-uhd { background: #ffeded; color: #c1272d; border-bottom: 1px solid #f0a0a0; }

/* Section wrapper */
.sp-detail-section { background: var(--sp-surface); padding: 12px 14px; border-bottom: 8px solid #f5f5f5; }
.sp-detail-section:last-child { border-bottom: 0; }
.sp-detail-section-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; padding-left: 4px; }
/* Bug#165 (2026-05-14 — Yut: หัวข้อชิดขอบเกินไป): +4px padding-left so titles
   align visually below product cards (cards have 8px grid padding + ~12px card padding inset). */
.sp-detail-section-h .title { font-size: 17px; font-weight: 600; color: var(--sp-text); padding-left: 4px; }
.sp-detail-section-h .more { color: var(--sp-primary); font-size: 13px; text-decoration: none; }

/* v286.99j (2026-05-11) — Sticky section header on home (Yut: ลากแล้วงงไม่รู้อยู่หัวข้อไหน).
   Personalized + bestseller section headers stay pinned just below sp-header on scroll
   so user always knows which section they're in. */
.sp-section-h-sticky {
    /* Bug#165 (2026-05-14 — Yut): bump horizontal padding 14→18px so title text
       has breathing room from container edge (matches visual indent of cards below). */
    position: sticky;
    top: 56px;        /* below sp-header */
    z-index: 8;
    background: var(--sp-surface);
    padding: 10px 18px;
    margin: 0 -14px 10px;   /* extend to viewport edges */
    border-bottom: 1px solid var(--sp-border);
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
    font-size: 17px;
    font-weight: 700;
    color: var(--sp-text);
    display: flex; align-items: center; justify-content: space-between;
}
.sp-section-h-sticky .skip-to {
    font-size: 12px; font-weight: 500;
    color: var(--sp-primary);
    text-decoration: none;
    padding: 4px 10px; border: 1px solid var(--sp-primary); border-radius: 14px;
}
.sp-section-h-sticky .skip-to:active { background: var(--sp-primary); color: #fff; }

/* Variant selector */
.sp-variant-block .sp-variant-current { font-size: 12px; color: var(--sp-text-dim); }
.sp-variant-options { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-variant-opt { background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 6px; padding: 8px 10px; cursor: pointer; min-width: 80px; transition: all 0.15s; font-family: inherit; }
.sp-variant-opt.active { border-color: var(--sp-primary); background: var(--sp-primary-bg); box-shadow: inset 0 0 0 1px var(--sp-primary); }
.sp-variant-opt:disabled { opacity: 0.5; cursor: not-allowed; text-decoration: line-through; }
.sp-variant-name { font-size: 13px; color: var(--sp-text); font-weight: 500; }
.sp-variant-price { font-size: 13px; color: var(--sp-primary); font-weight: 700; margin-top: 2px; }

/* Info bar (trust signals) */
.sp-info-bar { display: flex; padding: 12px 14px; background: var(--sp-surface); border-bottom: 8px solid #f5f5f5; gap: 10px; }
.sp-info-item { flex: 1; display: flex; align-items: center; gap: 6px; }
.sp-info-icon { font-size: 24px; flex-shrink: 0; }
.sp-info-text .t1 { font-size: 12px; font-weight: 600; color: var(--sp-text); line-height: 1.2; }
.sp-info-text .t2 { font-size: 11px; color: var(--sp-text-dim); line-height: 1.2; }

/* Overview text */
.sp-overview-text { font-size: 16px; color: var(--sp-text-dim); line-height: 1.65; max-height: 100px; overflow: hidden; transition: max-height 0.3s; position: relative; }
.sp-overview-text.expanded { max-height: 2000px; }
.sp-overview-text:not(.expanded)::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 30px; background: linear-gradient(180deg, transparent 0%, #fff 100%); pointer-events: none; }
.sp-overview-text.expanded::after { display: none; }
.sp-overview-toggle { display: inline-block; background: none; border: 0; color: var(--sp-primary); font-size: 12px; font-weight: 600; padding: 6px 0; cursor: pointer; font-family: inherit; }

/* Product description (admin HTML) */
.sp-product-desc { font-size: 14px; color: var(--sp-text); line-height: 1.6; }
.sp-product-desc img { max-width: 100%; height: auto; border-radius: 4px; margin: 8px 0; }
.sp-product-desc a { color: var(--sp-primary); }

/* Trailer */
.sp-trailer-wrap { aspect-ratio: 16/9; background: #000; border-radius: 6px; overflow: hidden; position: relative; }
.sp-trailer-poster { position: relative; width: 100%; height: 100%; cursor: pointer; }
.sp-trailer-poster.playing { cursor: default; }
.sp-trailer-poster.playing .sp-trailer-iframe {
    pointer-events: auto;
    touch-action: auto;
    -webkit-user-select: auto;
    user-select: auto;
}
.sp-trailer-thumb { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-trailer-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: rgba(238,77,45,0.9); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; pointer-events: none; }
.sp-trailer-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    pointer-events: auto;
    z-index: 1;
}

/* Scores grid */
.sp-rev-section { background: linear-gradient(180deg, #fffbf5 0%, #fff 80%); }
.sp-rev-section-sub { font-size: 11px; color: var(--sp-text-dim); font-weight: 500; }

/* v286.99c — Compact chip strip (Yut: เรียงแถวเดียว) */
.sp-rev-chips {
    display: flex;
    gap: 8px;
    padding: 10px 14px 14px;
    align-items: stretch;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.sp-rev-chips::-webkit-scrollbar { display: none; }
.sp-rev-chip {
    flex: 1 1 0;
    min-width: 75px;
    max-width: 110px;
    background: var(--sp-surface);
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    padding: 10px 6px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    scroll-snap-align: start;
    transition: transform 0.15s, box-shadow 0.15s;
    text-align: center;
}
.sp-rev-chip:active { transform: translateY(1px); box-shadow: 0 0 2px rgba(0,0,0,0.05); }
.sp-rev-chip-logo {
    width: 100%;
    max-width: 70px;
    height: 28px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.12));
    user-select: none;
    -webkit-user-drag: none;
}
.sp-rev-chip-score {
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.4px;
    color: var(--sp-text);
}
.sp-rev-chip-max {
    font-size: 11px;
    font-weight: 700;
    color: var(--sp-text-dim);
    margin-left: 1px;
}

/* IMDb chip — yellow tint */
.sp-rev-chip-imdb {
    background: linear-gradient(180deg, #fffbe1 0%, #fff5b8 100%);
    border-color: #f5c518;
}
.sp-rev-chip-imdb.tier-top { box-shadow: 0 1px 6px rgba(245,197,24,0.35); }
.sp-rev-chip-imdb.tier-low .sp-rev-chip-score { color: #c00; }

/* RT chip — Certified Fresh special (badge fills more) */
.sp-rev-chip-rt.tier-fresh {
    background: linear-gradient(180deg, #fffdf2 0%, #fff5d4 100%);
    border-color: #fcc818;
    box-shadow: 0 1px 6px rgba(252,200,24,0.3);
}
.sp-rev-chip-rt.tier-fresh .sp-rev-chip-cf {
    height: 50px;
    max-width: 80px;
}
.sp-rev-chip-rt.tier-fresh .sp-rev-chip-score { color: #c1272d; }
.sp-rev-chip-rt.tier-okay {
    background: linear-gradient(180deg, #fff 0%, #fff3ee 100%);
    border-color: #fa320a;
}
.sp-rev-chip-rt.tier-okay .sp-rev-chip-score { color: #fa320a; }
.sp-rev-chip-rt.tier-rotten {
    background: linear-gradient(180deg, #fff 0%, #ecf5e3 100%);
    border-color: #2d8a4f;
}
.sp-rev-chip-rt.tier-rotten .sp-rev-chip-score { color: #2d8a4f; }
.sp-rev-chip-rt-mark { height: 28px; max-width: 30px; }

/* Metacritic chip — M-only mark (Yut: เอาแบบ m ตัวเดียว ยาวเกินโล่ง) */
.sp-rev-chip-meta-img { height: 32px; width: 32px; max-width: 32px; }
.sp-rev-chip-meta.tier-must {
    background: linear-gradient(180deg, #fff 0%, #ddf5e2 100%);
    border-color: #66cc33;
}
.sp-rev-chip-meta.tier-must .sp-rev-chip-score { color: #2d8a4f; }
.sp-rev-chip-meta.tier-good {
    background: linear-gradient(180deg, #fff 0%, #f0f9e8 100%);
    border-color: #b3d44d;
}
.sp-rev-chip-meta.tier-good .sp-rev-chip-score { color: #6c8c00; }
.sp-rev-chip-meta.tier-mixed {
    background: linear-gradient(180deg, #fff 0%, #fff7e0 100%);
    border-color: #ffcc33;
}
.sp-rev-chip-meta.tier-mixed .sp-rev-chip-score { color: #cc8800; }
.sp-rev-chip-meta.tier-bad {
    background: linear-gradient(180deg, #fff 0%, #ffe5e5 100%);
    border-color: #ff5e5e;
}
.sp-rev-chip-meta.tier-bad .sp-rev-chip-score { color: #c00; }

/* TMDB chip — teal/green */
.sp-rev-chip-tmdb {
    background: linear-gradient(180deg, #f0fbff 0%, #d4f4ff 100%);
    border-color: #01b4e4;
}
.sp-rev-chip-tmdb-img { height: 20px; max-width: 80px; }
.sp-rev-chip-tmdb .sp-rev-chip-score { color: #0d253f; }
.sp-rev-chip-tmdb.tier-top { box-shadow: 0 1px 6px rgba(1,180,228,0.3); }

/* Legacy grid (keeps old non-chip blocks if any other page uses) */
.sp-scores-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    justify-items: center;
    gap: 10px;
    padding: 12px 14px 14px;
}
.sp-score-card {
    width: 100%;
    max-width: 180px;
    padding: 14px 10px 12px;
    border-radius: 10px;
    text-align: center;
    background: var(--sp-surface);
    border: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    position: relative;
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
}
.sp-score-card:active { transform: translateY(1px); box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.sp-rev-awards {
    margin: 0 14px 12px;
    padding: 9px 12px;
    background: linear-gradient(90deg, #fff8e1, #fff5d6);
    border: 1px solid #f5e0a8;
    border-radius: 8px;
    display: flex; align-items: flex-start; gap: 8px;
    font-size: 12px; line-height: 1.4; color: #7a5800;
}
.sp-rev-awards-icon { font-size: 14px; flex-shrink: 0; }
.sp-score-brand { font-size: 11px; font-weight: 700; display: flex; align-items: center; gap: 4px; line-height: 1; }
.sp-score-val { font-size: 24px; font-weight: 800; line-height: 1; color: var(--sp-text); }
.sp-score-max { font-size: 11px; font-weight: 500; color: var(--sp-text-dim); margin-left: 2px; }
.sp-score-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px;
    background: var(--sp-bg);
    color: var(--sp-text-dim);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.sp-score-tag.is-certified {
    background: linear-gradient(135deg, #ff6b1a, #c1272d);
    color: #fff;
}
.sp-score-tag.is-must {
    background: #00b16a;
    color: #fff;
}

/* IMDb — real logo from Wikipedia, big like Certified Fresh */
.sp-score-imdb {
    background: linear-gradient(180deg, #fffbe1 0%, #fff5b8 100%);
    border-color: #f5c518;
    box-shadow: 0 2px 10px rgba(245, 197, 24, 0.25);
    padding: 14px 10px 12px;
    gap: 8px;
}
.sp-score-imdb-img {
    width: 100%;
    max-width: 100px;
    height: 44px;
    display: block;
    margin: 4px auto 0;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
    user-select: none;
    -webkit-user-drag: none;
}
.sp-score-imdb .sp-score-val {
    color: var(--sp-text);
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.5px;
    margin-top: 2px;
}
.sp-score-imdb .sp-score-max { color: var(--sp-text-dim); font-size: 14px; }
.sp-score-imdb.tier-low .sp-score-val { color: #c00; }
.sp-score-imdb.tier-top { border-color: #d9ad13; }
.sp-score-imdb.tier-top .sp-score-val { color: #b8860b; }

/* Rotten Tomatoes — Certified Fresh real badge ≥75 (Yut: เอารูปจริงมาเลย) */
.sp-score-rt.tier-fresh.sp-cert-fresh {
    padding: 10px 8px 12px;
    background: linear-gradient(180deg, #fffdf2 0%, #fff5d4 100%);
    border-color: #fcc818;
    box-shadow: 0 2px 10px rgba(252,200,24,0.3);
    gap: 6px;
}
.sp-cert-fresh-badge {
    width: 100%;
    height: auto;
    max-width: 110px;
    aspect-ratio: 100 / 116;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
    user-select: none;
    -webkit-user-drag: none;
}
.sp-cert-fresh-score {
    font-size: 28px;
    font-weight: 900;
    color: #c1272d;
    line-height: 1;
    letter-spacing: -0.8px;
    margin-top: 2px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.sp-cert-fresh-score .sp-cert-fresh-pct {
    font-size: 17px;
    font-weight: 800;
    color: #fa320a;
    margin-left: 1px;
}

/* Tomato/splat icons for okay (60-74) and rotten (<60) */
.sp-score-rt-icon-img {
    width: 22px; height: 22px;
    display: inline-block;
    vertical-align: middle;
    user-select: none;
    -webkit-user-drag: none;
}

/* Standard fresh (60-74) — light red card */
.sp-score-rt.tier-okay {
    background: linear-gradient(180deg, #fff 0%, #fff3ee 100%);
    border-color: #fa320a;
}
.sp-score-rt.tier-okay .sp-score-rt-name { color: #fa320a; }
.sp-score-rt.tier-okay .sp-score-val { color: #fa320a; }

/* Rotten (<60) — green splat */
.sp-score-rt.tier-rotten {
    background: linear-gradient(180deg, #fff 0%, #ecf5e3 100%);
    border-color: #2d8a4f;
}
.sp-score-rt.tier-rotten .sp-score-rt-name { color: #2d8a4f; }
.sp-score-rt.tier-rotten .sp-score-val { color: #2d8a4f; }

.sp-score-rt .sp-score-rt-logo {
    display: inline-flex; align-items: center; line-height: 0;
}
.sp-score-rt .sp-score-rt-name { font-size: 10px; font-weight: 800; letter-spacing: 0.2px; }

/* Metacritic — real logo from Wikipedia, big like Certified Fresh */
.sp-score-meta {
    padding: 14px 10px 12px;
    gap: 8px;
}
.sp-score-meta-img {
    width: 100%;
    max-width: 130px;
    height: 32px;
    display: block;
    margin: 6px auto 0;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.12));
    user-select: none;
    -webkit-user-drag: none;
}
.sp-score-meta .sp-score-val {
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.5px;
    margin-top: 2px;
}
.sp-score-meta .sp-score-max { font-size: 14px; }

/* Tier-colored backgrounds */
.sp-score-meta.tier-must {
    background: linear-gradient(180deg, #fff 0%, #ddf5e2 100%);
    border-color: #66cc33;
    box-shadow: 0 2px 10px rgba(102, 204, 51, 0.2);
}
.sp-score-meta.tier-good {
    background: linear-gradient(180deg, #fff 0%, #f0f9e8 100%);
    border-color: #b3d44d;
}
.sp-score-meta.tier-mixed {
    background: linear-gradient(180deg, #fff 0%, #fff7e0 100%);
    border-color: #ffcc33;
}
.sp-score-meta.tier-bad {
    background: linear-gradient(180deg, #fff 0%, #ffe5e5 100%);
    border-color: #ff5e5e;
}
.sp-score-meta.tier-must .sp-score-val { color: #2d8a4f; }
.sp-score-meta.tier-good .sp-score-val { color: #6c8c00; }
.sp-score-meta.tier-mixed .sp-score-val { color: #cc8800; }
.sp-score-meta.tier-bad .sp-score-val { color: #c00; }

/* Score tag tier overrides */
.sp-score-tag.is-top { background: linear-gradient(135deg, #f5c518, #d9a418); color: var(--sp-text); }
.sp-score-tag.is-fresh { background: #fa320a; color: #fff; }
.sp-score-tag.is-rotten { background: #2d8a4f; color: #fff; }
.sp-score-tag.is-good { background: #b3d44d; color: #2a3d00; }
.sp-score-tag.is-bad { background: #ff5e5e; color: #fff; }

/* Genres */
.sp-genre-row { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-genre-tag { font-size: 12px; color: var(--sp-primary); background: var(--sp-primary-bg); border: 1px solid #ffd0c0; padding: 5px 10px; border-radius: 14px; text-decoration: none; }
.sp-genre-tag:active { background: #ffe0d0; }

/* Cast scroller */
.sp-cast-row { display: flex; gap: 10px; overflow-x: auto; padding: 4px 0 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sp-cast-row::-webkit-scrollbar { display: none; }
.sp-cast-card { flex: 0 0 90px; text-decoration: none; color: inherit; }
.sp-cast-photo { width: 90px; height: 90px; border-radius: 50%; overflow: hidden; background: var(--sp-surface-2); margin-bottom: 4px; }
.sp-cast-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-cast-no-photo { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 36px; color: #ccc; background: var(--sp-bg); }
.sp-cast-name { font-size: 13.5px; color: var(--sp-text); font-weight: 600; line-height: 1.3; text-align: center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sp-cast-char { font-size: 11px; color: var(--sp-text-dim); line-height: 1.2; text-align: center; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }

/* Director */
.sp-director-row { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; padding: 4px 0; }
.sp-director-photo { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--sp-surface-2); flex-shrink: 0; }
.sp-director-photo img { width: 100%; height: 100%; object-fit: cover; }
.sp-director-info { flex: 1; min-width: 0; }
.sp-director-name { font-size: 14px; font-weight: 600; color: var(--sp-text); }
.sp-director-role { font-size: 12px; color: var(--sp-text-dim); }

/* Collection / Buy together row */
.sp-collection-row { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sp-collection-row::-webkit-scrollbar { display: none; }
.sp-collection-card { flex: 0 0 110px; text-decoration: none; color: inherit; }
.sp-collection-img { width: 110px; aspect-ratio: 2/3; border-radius: 6px; overflow: hidden; background: var(--sp-surface-2); margin-bottom: 4px; }
.sp-collection-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-collection-name { font-size: 12px; color: var(--sp-text); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Awards */
.sp-awards { font-size: 13px; color: var(--sp-text-dim); line-height: 1.5; padding: 8px 12px; background: #fff8e1; border-radius: 6px; border-left: 3px solid #f5c518; }

/* Reviews */
.sp-reviews { padding: 0; }
.sp-review {
    padding: 12px 14px;
    border-bottom: 1px solid var(--sp-border);
}
.sp-review:last-child { border-bottom: 0; }
.sp-review-head {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-bottom: 8px;
}
.sp-review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sp-primary-light), var(--sp-primary));
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}
.sp-review-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sp-review-meta { flex: 1; min-width: 0; }
.sp-review-author { font-size: 14px; font-weight: 600; color: var(--sp-text); }
.sp-review-stars { font-size: 13px; color: #f5c518; letter-spacing: 1px; margin-top: 2px; }
.sp-review-rating { color: var(--sp-text-dim); font-size: 11px; margin-left: 4px; letter-spacing: 0; }
.sp-review-body {
    font-size: 13px;
    line-height: 1.6;
    color: var(--sp-text);
    word-break: break-word;
}
.sp-review-toggle {
    background: transparent;
    border: 0;
    color: var(--sp-primary);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    padding: 4px 0;
    margin-top: 4px;
}

/* Sticky bottom */
.sp-sticky-bottom { position: fixed; bottom: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto; height: 56px; display: flex; background: var(--sp-surface); border-top: 1px solid #eee; box-shadow: 0 -2px 8px rgba(0,0,0,0.06); z-index: 50; }
.sp-bb-side { flex: 0 0 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; background: none; border: 0; text-decoration: none; color: var(--sp-text-dim); padding: 0; font-family: inherit; }
.sp-bb-side .ico { font-size: 18px; line-height: 1; }
.sp-bb-side .ico svg { fill: none; stroke: #555; stroke-width: 1.8; }
.sp-bb-side .lbl { font-size: 10px; }
.sp-bb-side.active { color: var(--sp-primary); }
.sp-bb-side.active .ico svg { fill: var(--sp-primary); stroke: var(--sp-primary); }
.sp-bb-add-cart, .sp-bb-buy-now { flex: 1; border: 0; color: #fff; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 4px; }
.sp-bb-add-cart { background: var(--sp-primary-light); }
.sp-bb-buy-now { background: var(--sp-primary); }
.sp-bb-add-cart:active, .sp-bb-buy-now:active { opacity: 0.85; }

/* ============================================================ */
/*  SUB-PAGE LAYOUT (auth, profile, mycart, orders, etc.)       */
/* ============================================================ */

/* Bug#156 (2026-05-14 — Yut tablet audit): centered to 480px to mirror sp-body
   so iPad/tablet show same width as phones (was stretching to 100% before). */
.sp-page-body { max-width: 480px; margin: 0 auto; background: var(--sp-bg); min-height: 100vh; position: relative; overflow-x: clip; }

/* Sub-page header — sticky orange */
.sp-subpage-header { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; padding: 8px 12px; gap: 8px; background: linear-gradient(180deg, var(--sp-primary-light) 0%, var(--sp-primary) 100%); min-height: 52px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.sp-subpage-header .sp-back-btn, .sp-subpage-header .sp-icon-btn { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.2); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; text-decoration: none; position: relative; border: 0; }
.sp-subpage-title { flex: 1; color: #fff; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* v286.85: in-header search bar (subpage variant — fits between back btn and icons) */
.sp-subpage-header .sp-detail-search-bar { flex: 1; background: var(--sp-surface); border-radius: 4px; height: 34px; display: flex; align-items: center; padding: 0 10px; gap: 8px; min-width: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.sp-subpage-header .sp-detail-search-bar .sp-search-icon { color: var(--sp-text-dim); flex-shrink: 0; display: flex; align-items: center; }
.sp-subpage-header .sp-detail-search-text { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 13.5px; font-family: inherit; color: var(--sp-text); text-align: left; padding: 0; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-subpage-header .sp-detail-search-text.sp-search-empty { color: var(--sp-text-dim); }

/* Light back button (used over orange header e.g. on products listing) */
.sp-back-btn-light { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.2); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; text-decoration: none; }

/* Empty state */
.sp-empty-state { padding: 60px 30px; text-align: center; }
.sp-empty-rewards {
    margin: 0 12px 12px;
    padding: 14px;
    background: linear-gradient(135deg, #fff5e6, #ffe0a0);
    border-radius: 10px;
}
.sp-empty-rewards-head {
    font-size: 14px;
    font-weight: 700;
    color: #7c4d00;
    margin-bottom: 10px;
    text-align: center;
}
.sp-empty-rewards-grid {
    display: flex;
    gap: 10px;
}
.sp-empty-reward-item {
    flex: 1;
    background: var(--sp-surface);
    border-radius: 8px;
    padding: 12px 8px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.sp-empty-reward-item .ico { font-size: 26px; margin-bottom: 4px; }
.sp-empty-reward-item .t1 { font-size: 13px; font-weight: 700; color: #d97706; line-height: 1.3; }
.sp-empty-reward-item .t2 { font-size: 11px; color: var(--sp-text-dim); margin-top: 2px; }
.sp-empty-icon { font-size: 60px; margin-bottom: 16px; opacity: 0.6; }
.sp-empty-title { font-size: 17px; font-weight: 600; color: var(--sp-text-dim); margin-bottom: 6px; }
.sp-empty-msg { font-size: 14px; color: var(--sp-text-dim); margin-bottom: 20px; line-height: 1.5; }
.sp-empty-cta { display: inline-block; background: linear-gradient(180deg, var(--sp-primary-light) 0%, var(--sp-primary) 100%); color: #fff; padding: 10px 24px; border-radius: 22px; font-size: 14px; font-weight: 600; text-decoration: none; }

/* ============================================================ */
/*  CART PAGE                                                   */
/* ============================================================ */

.sp-cart-list { background: var(--sp-surface); }
.sp-cart-item { display: flex; gap: 10px; padding: 12px; border-bottom: 1px solid #f5f5f5; position: relative; }
.sp-cart-item.is-free { background: #fffaf0; }
.sp-cart-item-img { width: 80px; height: 80px; flex-shrink: 0; border-radius: 6px; overflow: hidden; background: var(--sp-surface-2); }
.sp-cart-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* v286.99l-perf-r2 2026-05-14 — order detail product thumbs: posters are 2:3, square 80x80
   crop made them look scaled wrong (Yut report). Use poster-aspect 60x90 + object-fit:contain
   so the entire poster is visible without cropping. */
.sp-order-detail-page .sp-cart-item-img { width: 60px; height: 90px; border-radius: 4px; background: var(--sp-bg); }
.sp-order-detail-page .sp-cart-item-img img { object-fit: contain; }
.sp-cart-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sp-cart-item-name { font-size: 14px; color: var(--sp-text); line-height: 1.3; text-decoration: none; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sp-cart-item-meta { display: flex; gap: 6px; flex-wrap: wrap; font-size: 11px; color: var(--sp-text-dim); }
.sp-cart-variant { background: var(--sp-bg); padding: 1px 6px; border-radius: 3px; }
.sp-cart-disc { color: var(--sp-text-dim); }
.sp-cart-item-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.sp-cart-item-price { font-size: 14px; font-weight: 700; color: var(--sp-primary); }
.sp-cart-item-price.free { color: #f59e0b; font-size: 13px; }
.sp-cart-item-price .qty-mult { font-size: 11px; color: var(--sp-text-dim); font-weight: 400; margin-left: 4px; }

.sp-cart-qty-ctrl { display: inline-flex; align-items: center; border: 1px solid var(--sp-border); border-radius: 4px; }
.sp-qty-btn { width: 28px; height: 28px; background: var(--sp-surface); border: 0; cursor: pointer; font-size: 16px; color: var(--sp-text-dim); display: flex; align-items: center; justify-content: center; padding: 0; }
.sp-qty-btn:active { background: var(--sp-bg); }
.sp-qty-input { width: 36px; height: 28px; border: 0; border-left: 1px solid #ddd; border-right: 1px solid #ddd; text-align: center; font-size: 13px; font-family: inherit; -moz-appearance: textfield; }
.sp-qty-input::-webkit-outer-spin-button, .sp-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sp-cart-remove { position: absolute; top: 8px; right: 8px; background: none; border: 0; color: var(--sp-text-dim); cursor: pointer; padding: 4px; }
.sp-cart-remove:active { color: var(--sp-primary); }

.sp-cart-promo-block { padding: 10px 14px; }
.sp-cart-promo { padding: 8px 0; }
.sp-cart-promo-bar { width: 100%; height: 6px; background: var(--sp-surface-2); border-radius: 3px; overflow: hidden; margin-bottom: 4px; }
.sp-cart-promo-fill { height: 100%; background: linear-gradient(90deg, var(--sp-primary-light), var(--sp-primary)); transition: width 0.3s; }
.sp-cart-promo-text { font-size: 13px; color: var(--sp-text-dim); }
.sp-cart-promo-text strong { color: var(--sp-primary); }

.sp-cart-coupon-row { display: flex; align-items: center; justify-content: space-between; }
.sp-cart-coupon-label { font-size: 14px; color: var(--sp-text); }
.sp-cart-coupon-link { color: var(--sp-primary); font-size: 13px; text-decoration: none; }

.sp-cart-total { background: var(--sp-surface); padding: 12px 14px; margin-bottom: 80px; }
.sp-cart-total-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; }
.sp-cart-total-row .lbl { color: var(--sp-text-dim); font-size: 14px; }
.sp-cart-total-row .val { color: var(--sp-text); font-size: 16px; font-weight: 600; }
.sp-cart-total-row .val .sym { color: var(--sp-primary); }
.sp-cart-total-hint { font-size: 12px; color: var(--sp-text-dim); padding: 6px 0; border-top: 1px dashed #eee; margin-top: 4px; }
.sp-free-shipping-hit { color: #00b974; font-weight: 600; }

.sp-cart-sticky { position: fixed; bottom: 0; left: 0; right: 0; max-width: 480px; margin: 0 auto; height: 64px; display: flex; align-items: center; background: var(--sp-surface); border-top: 1px solid #eee; box-shadow: 0 -4px 12px rgba(0,0,0,0.08); z-index: 50; padding: 0 12px; gap: 10px; }
.sp-cart-sticky-info { flex: 1; min-width: 0; }
.sp-cart-sticky-info .t1 { font-size: 11px; color: var(--sp-text-dim); line-height: 1.2; }
.sp-cart-sticky-info .t2 { font-size: 19px; font-weight: 800; color: var(--sp-primary); line-height: 1.2; }
.sp-cart-checkout-btn { background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-dark)); color: #fff; border: 0; padding: 12px 28px; border-radius: 24px; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; min-width: 130px; box-shadow: 0 2px 6px rgba(238,77,45,0.3); transition: all 0.15s; }
.sp-cart-checkout-btn:active { opacity: 0.85; transform: scale(0.97); }
.sp-cart-checkout-btn:disabled { background: #ccc; box-shadow: none; cursor: not-allowed; opacity: 0.7; }
.sp-cart-checkout-btn .ico { display: inline-block; margin-left: 4px; }

/* ============================================================ */
/*  AUTH / PROFILE / FORM PAGES                                 */
/* ============================================================ */

.sp-auth-page { padding: 16px; max-width: 480px; margin: 0 auto; }
.sp-auth-hero { text-align: center; margin-bottom: 20px; padding: 14px; }
.sp-auth-logo { font-size: 50px; margin-bottom: 10px; }
.sp-auth-title { font-size: 22px; font-weight: 700; color: var(--sp-primary); margin-bottom: 6px; }
.sp-auth-sub { font-size: 13px; color: var(--sp-text-dim); line-height: 1.5; }
.sp-auth-err { background: var(--sp-primary-bg); border: 1px solid #ffcdc0; color: #c1272d; padding: 10px 14px; border-radius: 6px; margin-bottom: 14px; font-size: 13px; }
.sp-auth-form { display: flex; flex-direction: column; gap: 12px; }
.sp-auth-field { display: flex; flex-direction: column; gap: 5px; }
.sp-auth-field label { font-size: 13px; color: var(--sp-text-dim); font-weight: 500; }
.sp-auth-field input[type=text], .sp-auth-field input[type=email], .sp-auth-field input[type=password],
.sp-auth-field input[type=tel], .sp-auth-field input[type=number], .sp-auth-field input[type=date],
.sp-auth-field input[type=time], .sp-auth-field input[type=file],
.sp-auth-field select, .sp-auth-field textarea {
    width: 100%; padding: 11px 12px; border: 1px solid var(--sp-border); border-radius: 6px; font-size: 14px; font-family: inherit; background: var(--sp-surface);
}
.sp-auth-field input:focus, .sp-auth-field select:focus, .sp-auth-field textarea:focus { border-color: var(--sp-primary); outline: none; }
.sp-auth-btn { display: block; background: linear-gradient(180deg, var(--sp-primary-light) 0%, var(--sp-primary) 100%); color: #fff; border: 0; padding: 14px; border-radius: 6px; font-size: 16px; font-weight: 600; font-family: inherit; cursor: pointer; text-align: center; text-decoration: none; margin-top: 8px; }
.sp-auth-btn:active { opacity: 0.85; }
.sp-auth-btn-secondary { display: block; background: var(--sp-surface); color: var(--sp-primary); border: 1px solid var(--sp-primary); padding: 12px; border-radius: 6px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; text-align: center; text-decoration: none; margin-top: 10px; }
.sp-auth-helper { text-align: right; margin-top: 10px; }
.sp-auth-helper a { color: var(--sp-primary); font-size: 13px; text-decoration: none; }
.sp-auth-divider { display: flex; align-items: center; margin: 24px 0; color: #aaa; font-size: 12px; }
.sp-auth-divider::before, .sp-auth-divider::after { content: ''; flex: 1; height: 1px; background: #e0e0e0; }
.sp-auth-divider span { padding: 0 12px; }
.sp-auth-line-btn { display: block; background: #06c755; color: #fff; padding: 12px; border-radius: 6px; font-size: 14px; font-weight: 600; text-align: center; text-decoration: none; }
.sp-auth-bottom { text-align: center; margin-top: 24px; font-size: 13px; color: var(--sp-text-dim); }
.sp-auth-bottom a { color: var(--sp-primary); font-weight: 600; text-decoration: none; margin-left: 4px; }

.sp-form-section { background: var(--sp-surface); border-radius: 8px; padding: 14px; margin-bottom: 12px; }
.sp-form-section-title { font-size: 14px; font-weight: 600; color: var(--sp-text); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--sp-border); }
.req { color: var(--sp-primary); }
.sp-anti-spam-hint { font-size: 12px; color: var(--sp-text-dim); margin-bottom: 4px; }

.sp-success-box { text-align: center; padding: 30px 20px; background: var(--sp-surface); border-radius: 8px; }
.sp-success-icon { font-size: 70px; margin-bottom: 16px; }
.sp-success-title { font-size: 22px; font-weight: 700; color: #00b974; margin-bottom: 10px; }
.sp-success-msg { font-size: 15px; color: var(--sp-text); margin-bottom: 8px; }
.sp-success-hint { font-size: 13px; color: var(--sp-text-dim); line-height: 1.5; margin-bottom: 24px; }

.sp-confirm-rows { display: flex; flex-direction: column; gap: 8px; }
.sp-confirm-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed #f0f0f0; font-size: 14px; }
.sp-confirm-row .lbl { color: var(--sp-text-dim); }
.sp-confirm-row .val { color: var(--sp-text); font-weight: 500; text-align: right; max-width: 65%; }

/* ============================================================ */
/*  ORDERS / CHECKOUT / DELIVERY                                */
/* ============================================================ */

.sp-checkout-page { padding: 16px; padding-bottom: 100px; max-width: 480px; margin: 0 auto; }
.sp-checkout-steps { display: flex; gap: 4px; padding: 12px 0; margin-bottom: 12px; }
.sp-checkout-step { flex: 1; text-align: center; font-size: 12px; color: #aaa; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.sp-checkout-step .num { width: 26px; height: 26px; border-radius: 50%; background: #e0e0e0; color: var(--sp-text-dim); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.sp-checkout-step.active { color: var(--sp-primary); font-weight: 600; }
.sp-checkout-step.active .num { background: var(--sp-primary); color: #fff; }
.sp-checkout-step.done .num { background: #00b974; color: #fff; }

.sp-checkout-section { background: var(--sp-surface); padding: 12px 14px; border-radius: 8px; margin-bottom: 10px; }
.sp-checkout-address .addr-name { font-size: 15px; font-weight: 600; color: var(--sp-text); }
.sp-checkout-address .addr-tel { font-size: 13px; color: var(--sp-text-dim); margin-top: 2px; }
.sp-checkout-address .addr-text { font-size: 13px; color: var(--sp-text-dim); margin-top: 6px; line-height: 1.4; }

.sp-payment-options { display: flex; flex-direction: column; gap: 8px; }
.sp-payment-opt { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--sp-border); border-radius: 6px; cursor: pointer; transition: all 0.15s; }
.sp-payment-opt:has(input:checked) { border-color: var(--sp-primary); background: var(--sp-primary-bg); }
.sp-payment-opt input { margin: 0; accent-color: var(--sp-primary); }
.sp-payment-info { flex: 1; }
.sp-payment-name { font-size: 14px; font-weight: 600; color: var(--sp-text); }
.sp-payment-desc { font-size: 12px; color: var(--sp-text-dim); }

.sp-checkout-summary { padding: 8px 0; }
.sp-checkout-row { display: flex; justify-content: space-between; padding: 4px 0; font-size: 14px; }
.sp-checkout-row .lbl { color: var(--sp-text-dim); }
.sp-checkout-row .val { color: var(--sp-text); font-weight: 500; }
.sp-checkout-row.total { font-size: 17px; font-weight: 700; padding-top: 10px; border-top: 1px dashed #eee; margin-top: 6px; }
.sp-checkout-row.total .val { color: var(--sp-primary); }
.sp-free-text { color: #00b974; font-weight: 600; }

.sp-bank-info { padding: 6px 0; }
.sp-bank-info p { font-size: 13px; color: var(--sp-text-dim); line-height: 1.5; margin-bottom: 14px; }
.sp-bank-account { background: linear-gradient(135deg, var(--sp-primary-bg) 0%, #ffe8dc 100%); border: 1px solid #ffd0c0; border-radius: 8px; padding: 14px; text-align: center; margin-bottom: 14px; }
.sp-bank-account .bank-name { font-size: 14px; color: var(--sp-text-dim); }
.sp-bank-account .bank-no { font-size: 22px; font-weight: 700; color: var(--sp-primary); letter-spacing: 1px; margin: 4px 0; }
.sp-bank-account .bank-holder { font-size: 13px; color: var(--sp-text-dim); }

.sp-order-info { padding: 8px 0; }
.sp-order-id-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 14px; }
.sp-order-id-row .lbl { color: var(--sp-text-dim); }
.sp-order-id-row .val { color: var(--sp-text); font-weight: 500; }
.sp-order-id-row .val.price { color: var(--sp-primary); font-size: 18px; font-weight: 700; }

.sp-orders-list { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.sp-order-card { background: var(--sp-surface); border-radius: 8px; padding: 12px; display: block; text-decoration: none; color: inherit; box-shadow: 0 1px 3px rgba(0,0,0,0.04); }
.sp-order-card-h { display: flex; justify-content: space-between; align-items: center; padding-bottom: 8px; border-bottom: 1px dashed #f0f0f0; margin-bottom: 8px; }
.sp-order-id { font-size: 14px; font-weight: 600; color: var(--sp-text); }
.sp-order-status { font-size: 11px; padding: 3px 8px; border-radius: 3px; font-weight: 500; }
.sp-order-status.status-done { background: #d1fae5; color: #065f46; }
.sp-order-status.status-shipping { background: #dbeafe; color: #1e40af; }
.sp-order-status.status-paid { background: #fef3c7; color: #92400e; }
.sp-order-status.status-pending { background: var(--sp-primary-bg); color: var(--sp-primary); }
.sp-order-status.status-cancelled { background: #fee; color: var(--sp-text-dim); text-decoration: line-through; }
.sp-order-card-body { display: flex; flex-direction: column; gap: 4px; padding: 4px 0; }
.sp-order-row { display: flex; justify-content: space-between; font-size: 13px; }
.sp-order-row .lbl { color: var(--sp-text-dim); }
.sp-order-row .val { color: var(--sp-text); font-weight: 500; }
.sp-order-row.total { font-size: 15px; font-weight: 700; padding-top: 6px; border-top: 1px dashed #f0f0f0; margin-top: 4px; }
.sp-order-row.total .val { color: var(--sp-primary); }
.sp-order-card-cta { text-align: right; padding-top: 8px; color: var(--sp-primary); font-size: 12px; font-weight: 500; text-decoration: none; display: block; }

/* ============================================================ */
/*  CONTACT, CLAIM, STATIC                                      */
/* ============================================================ */

.sp-contact-list { display: flex; flex-direction: column; gap: 8px; }
.sp-contact-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--sp-surface); border: 1px solid #f0f0f0; border-radius: 8px; text-decoration: none; color: inherit; }
.sp-contact-icon { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.sp-contact-icon.line { background: #06c755; color: #fff; }
.sp-contact-icon.tel { background: #0ea5e9; color: #fff; }
.sp-contact-icon.mail { background: #f59e0b; color: #fff; }
.sp-contact-info { flex: 1; }
.sp-contact-info .t1 { font-size: 14px; font-weight: 600; color: var(--sp-text); }
.sp-contact-info .t2 { font-size: 12px; color: var(--sp-text-dim); }
.sp-contact-arrow { color: #ccc; font-size: 18px; }

.sp-business-hours { display: flex; flex-direction: column; gap: 4px; }
.sp-bh-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 13px; color: var(--sp-text-dim); border-bottom: 1px dashed #f0f0f0; }

.sp-claim-options { display: flex; flex-direction: column; gap: 10px; }
.sp-claim-option { display: flex; flex-direction: column; padding: 16px; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 8px; text-decoration: none; color: inherit; gap: 4px; transition: all 0.15s; }
.sp-claim-option:active { border-color: var(--sp-primary); background: var(--sp-primary-bg); }
.sp-claim-option .ico { font-size: 32px; }
.sp-claim-option .t1 { font-size: 15px; font-weight: 600; color: var(--sp-text); }
.sp-claim-option .t2 { font-size: 12px; color: var(--sp-text-dim); }

.sp-policy-list { padding-left: 20px; font-size: 13px; color: var(--sp-text-dim); line-height: 1.7; }

.sp-claim-product { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #f5f5f5; cursor: pointer; }
.sp-claim-product input { margin: 0; accent-color: var(--sp-primary); flex-shrink: 0; }
.sp-claim-product-img { width: 50px; height: 50px; border-radius: 4px; overflow: hidden; background: var(--sp-surface-2); flex-shrink: 0; }
.sp-claim-product-img img { width: 100%; height: 100%; object-fit: cover; }
.sp-claim-product-info { flex: 1; min-width: 0; }
.sp-claim-product-name { font-size: 13px; color: var(--sp-text); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sp-claim-product-code { font-size: 11px; color: var(--sp-text-dim); }

/* ============================================================
 * Static pages (terms, about, policies) — v286.44
 * ============================================================ */
.sp-static-page {
    max-width: 480px; margin: 0 auto;
    padding: 0 0 40px;
    background: var(--sp-bg);
    min-height: calc(100vh - 100px);
}

/* Hero */
.sp-static-hero {
    background: linear-gradient(135deg, var(--sp-primary-bg) 0%, #ffe7dc 100%);
    padding: 28px 16px 24px;
    text-align: center;
    margin-bottom: 12px;
}
.sp-static-hero-icon {
    width: 64px; height: 64px;
    margin: 0 auto 10px;
    background: var(--sp-surface);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px;
    box-shadow: 0 4px 14px rgba(238,77,45,0.18);
}
.sp-static-hero-title {
    font-size: 19px; font-weight: 800;
    color: var(--sp-text); margin: 0;
    letter-spacing: -0.2px;
}

/* Content */
.sp-static-content {
    background: var(--sp-surface);
    margin: 0 12px;
    padding: 20px 18px;
    border-radius: 14px;
    font-size: 14.5px; color: var(--sp-text); line-height: 1.7;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.sp-static-content h1, .sp-static-content h2, .sp-static-content h3 {
    color: var(--sp-primary);
    margin: 18px 0 10px;
    font-weight: 700;
}
.sp-static-content h1:first-child,
.sp-static-content h2:first-child,
.sp-static-content h3:first-child { margin-top: 0; }
.sp-static-content h1 { font-size: 19px; }
.sp-static-content h2 { font-size: 16.5px; }
.sp-static-content h3 { font-size: 14.5px; }
.sp-static-content p { margin: 0 0 12px; }
.sp-static-content ul, .sp-static-content ol {
    padding-left: 22px; margin: 0 0 12px;
}
.sp-static-content li { margin-bottom: 6px; }
.sp-static-content img {
    max-width: 100%; height: auto;
    border-radius: 8px; margin: 12px 0;
}
.sp-static-content a {
    color: var(--sp-primary); text-decoration: underline;
}
.sp-static-content strong { color: var(--sp-text); }
.sp-static-content table {
    width: 100%; border-collapse: collapse;
    margin: 12px 0; font-size: 13.5px;
}
.sp-static-content th, .sp-static-content td {
    padding: 8px 10px;
    border: 1px solid var(--sp-border);
    text-align: left;
}
.sp-static-content th {
    background: var(--sp-surface-2); font-weight: 700;
}

/* Empty state */
.sp-static-empty {
    text-align: center; padding: 32px 16px;
}
.sp-static-empty .ico { font-size: 48px; margin-bottom: 12px; opacity: 0.6; }
.sp-static-empty p { color: var(--sp-text-dim); margin: 0 0 16px; }
.sp-static-empty-cta {
    display: inline-block;
    padding: 10px 24px;
    background: var(--sp-primary); color: #fff;
    border-radius: 20px; font-weight: 600;
    text-decoration: none; font-size: 13.5px;
}

/* Help footer */
.sp-static-help {
    margin: 20px 12px 0;
    padding: 18px;
    background: var(--sp-surface);
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.sp-static-help p {
    margin: 0 0 12px;
    font-size: 13.5px; color: var(--sp-text-dim); font-weight: 500;
}
.sp-static-help-btns {
    display: flex; gap: 10px; justify-content: center;
}
.sp-static-help-btn {
    flex: 1; max-width: 160px;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 22px;
    font-size: 13.5px; font-weight: 700;
    text-decoration: none;
    transition: opacity 0.15s;
}
.sp-static-help-btn:active { opacity: 0.8; }
.sp-static-help-btn.line {
    background: #06C755; color: #fff;
    box-shadow: 0 2px 6px rgba(6,199,85,0.25);
}
.sp-static-help-btn.home {
    background: var(--sp-surface); color: var(--sp-primary);
    border: 1.5px solid var(--sp-primary);
}
.sp-static-content a { color: var(--sp-primary); }
.sp-static-content table { width: 100%; border-collapse: collapse; margin: 10px 0; }
.sp-static-content table td, .sp-static-content table th { border: 1px solid var(--sp-border); padding: 6px 8px; font-size: 13px; }

/* Promo landings */
.sp-promo-hero { position: relative; padding: 14px; background: linear-gradient(180deg, var(--sp-primary-bg) 0%, #fff 100%); }
.sp-promo-hero-img { width: 100%; border-radius: 6px; margin-bottom: 10px; }
.sp-promo-hero-title { font-size: 18px; font-weight: 700; color: var(--sp-primary); margin-bottom: 6px; }
.sp-promo-hero-desc { font-size: 13px; color: var(--sp-text-dim); line-height: 1.5; }

/* Search result bar */
.sp-search-result-bar, .sp-cate-bar { padding: 10px 14px; background: var(--sp-surface); border-bottom: 1px solid var(--sp-border); font-size: 13px; color: var(--sp-text-dim); display: flex; justify-content: space-between; align-items: center; }
.sp-search-result-bar strong, .sp-cate-bar .sp-cate-name { color: var(--sp-primary); font-weight: 600; }
.sp-search-result-count, .sp-cate-count { color: var(--sp-text-dim); font-size: 12px; }

/* ============================================================ */
/*  HAMBURGER DRAWER                                            */
/* ============================================================ */

.sp-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.sp-drawer-backdrop.open { opacity: 1; pointer-events: auto; }

/* Bug#168 (2026-05-14 — Yut: ham drawer ออกจาก viewport right แทน 480 container).
   Anchor right edge to 480px container so drawer slides in/out from inside the
   centered mobile column on wide viewports. Clamped via max() — phone (vw≤480) preserves original. */
.sp-drawer { position: fixed; top: 0; right: max(-320px, calc(50vw - 240px - 320px)); width: 300px; max-width: 85%; height: 100vh; background: var(--sp-surface); z-index: 201; display: flex; flex-direction: column; transition: right 0.3s ease; box-shadow: -2px 0 12px rgba(0,0,0,0.15); overflow: hidden; }
.sp-drawer.open { right: max(0px, calc(50vw - 240px)); } /* Bug#168: anchor to 480 container */

.sp-drawer-header { padding: 18px 16px 14px; background: linear-gradient(180deg, var(--sp-primary-light) 0%, var(--sp-primary) 100%); color: #fff; display: flex; align-items: center; gap: 12px; flex-shrink: 0; position: relative; }
.sp-drawer-user { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.sp-drawer-avatar { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.sp-drawer-avatar-img { object-fit: cover; background: var(--sp-surface); border: 2px solid rgba(255,255,255,0.6); }

/* Theme + mode picker — single row, scrollable, minimal (Yut: minimal + 1 row) */
.sp-theme-picker { padding: 12px 14px; border-bottom: 1px solid var(--sp-border); flex-shrink: 0; }
.sp-theme-picker-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Vertical padding so .is-on scaled chip + ring don't get clipped */
    padding: 6px 0;
}
.sp-theme-picker-row::-webkit-scrollbar { display: none; }
.sp-theme-picker-row > * { flex-shrink: 0; }
.sp-theme-picker-sep {
    width: 1px;
    align-self: stretch;
    background: var(--sp-border);
    margin: 4px 2px;
}
.sp-theme-chip {
    width: 26px; height: 26px; border-radius: 50%;
    border: 2px solid var(--sp-surface);
    box-shadow: 0 0 0 1px var(--sp-border);
    cursor: pointer; padding: 0;
    transition: transform .15s, box-shadow .15s;
}
.sp-theme-chip:active { transform: scale(0.9); }
.sp-theme-chip.is-on {
    box-shadow: 0 0 0 2px var(--sp-text);
    transform: scale(1.08);
}
/* Black chip in dark mode — add gray inner dot so it's visible against
   dark drawer surface (Yut: มองไม่ออกว่ามีสีดำอยู่ตรงไหน) */
.sp-theme-chip[data-theme="gray"] {
    position: relative;
}
body.mode-dark .sp-theme-chip[data-theme="gray"]::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 10px; height: 10px;
    border-radius: 50%;
    background: #9ca3af;
}
/* Compact mode buttons (icons only — minimal) */
.sp-mode-btn-mini {
    width: 30px; height: 30px;
    background: var(--sp-bg);
    border: 1px solid var(--sp-border);
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all .15s;
    font-family: inherit;
}
.sp-mode-btn-mini:active { transform: scale(0.9); }
.sp-mode-btn-mini.is-on {
    background: var(--sp-primary);
    border-color: var(--sp-primary);
}
body.mode-dark .sp-mode-btn-mini {
    background: var(--sp-surface-2);
    border-color: var(--sp-border);
}
body.mode-dark .sp-mode-btn-mini.is-on {
    background: var(--sp-primary);
    border-color: var(--sp-primary);
}
/* Hide old labels if any pages still render them (defensive) */
.sp-theme-picker-label,
.sp-mode-picker-label { display: none; }
.sp-drawer-user-info { flex: 1; min-width: 0; }
.sp-drawer-user-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-drawer-user-link, .sp-drawer-auth-row a { color: rgba(255,255,255,0.95); font-size: 12px; text-decoration: none; }
.sp-drawer-auth-row { display: flex; gap: 6px; align-items: center; font-size: 12px; }
.sp-drawer-auth-row span { opacity: 0.6; }
.sp-drawer-close { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 50%; background: rgba(0,0,0,0.2); color: #fff; border: 0; cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center; }

.sp-drawer-nav { flex: 1; overflow-y: auto; padding: 6px 0 24px; -webkit-overflow-scrolling: touch; }
.sp-drawer-section-title { font-size: 11px; font-weight: 600; color: var(--sp-text-dim); text-transform: uppercase; letter-spacing: 0.5px; padding: 14px 16px 6px; }
.sp-drawer-item { display: flex; align-items: center; gap: 12px; padding: 11px 16px; text-decoration: none; color: var(--sp-text); font-size: 14px; transition: background 0.1s; }
.sp-drawer-item:active { background: var(--sp-primary-bg); }
.sp-drawer-item .ico { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }
.sp-drawer-item .lbl { flex: 1; }
.sp-drawer-item.sp-drawer-logout { color: #c1272d; margin-top: 14px; border-top: 1px solid #f5f5f5; padding-top: 14px; }

/* Home menu button styling — fits inside orange header */
.sp-home-menu-btn { background: rgba(255,255,255,0.2) !important; color: #fff !important; }

/* ============================================================ */
/*  CATALOG / BROWSE PAGES                                      */
/* ============================================================ */

.sp-list-meta { padding: 8px 14px; font-size: 12px; color: var(--sp-text-dim); }
.sp-list-meta strong { color: var(--sp-primary); font-weight: 600; }

.sp-list-hero { padding: 24px 16px 18px; background: linear-gradient(135deg, var(--sp-primary-light) 0%, var(--sp-primary) 100%); color: #fff; background-size: cover; background-position: center; position: relative; }
.sp-list-hero.awards-hero { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.sp-list-hero-content { position: relative; z-index: 2; }
.sp-list-hero-icon { font-size: 36px; margin-bottom: 6px; }
.sp-list-hero-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; line-height: 1.2; }
.sp-list-hero-meta { font-size: 13px; opacity: 0.9; line-height: 1.4; }

/* Filter / Search bar */
.sp-filter-bar { background: var(--sp-surface); padding: 10px 12px; position: sticky; top: 52px; z-index: 50; box-shadow: 0 2px 4px rgba(0,0,0,0.04); }
.sp-filter-search { display: flex; align-items: center; background: var(--sp-bg); border-radius: 20px; padding: 8px 12px; gap: 8px; }
.sp-filter-search .sp-search-icon { color: var(--sp-text-dim); flex-shrink: 0; }
.sp-filter-input { flex: 1; border: 0; background: transparent; font-size: 14px; font-family: inherit; outline: none; min-width: 0; }
.sp-filter-clear { color: var(--sp-text-dim); flex-shrink: 0; padding: 2px; }
.sp-filter-sort { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; }
.sp-filter-sort::-webkit-scrollbar { display: none; }
.sp-filter-sort-opt { flex-shrink: 0; padding: 5px 12px; font-size: 12px; color: var(--sp-text-dim); background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 14px; text-decoration: none; white-space: nowrap; }
.sp-filter-sort-opt.active { color: var(--sp-primary); border-color: var(--sp-primary); background: var(--sp-primary-bg); font-weight: 600; }

/* Tab row (used by top-rated) */
.sp-tab-row { display: flex; gap: 0; background: var(--sp-surface); border-bottom: 1px solid var(--sp-border); padding: 0 14px; position: sticky; top: 52px; z-index: 50; }
.sp-tab { flex: 1; text-align: center; padding: 12px 0; font-size: 14px; color: var(--sp-text-dim); text-decoration: none; border-bottom: 2px solid transparent; }
.sp-tab.active { color: var(--sp-primary); font-weight: 600; border-bottom-color: var(--sp-primary); }

/* Collections grid */
.sp-collection-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 8px; }
.sp-coll-card { background: var(--sp-surface); border-radius: 8px; overflow: hidden; text-decoration: none; color: inherit; }
.sp-coll-card-img { position: relative; aspect-ratio: 2/3; background: linear-gradient(135deg, #1a1a2e, #16213e); overflow: hidden; }
.sp-coll-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-coll-card-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 60px; color: rgba(255,255,255,0.3); }
.sp-coll-card-count { position: absolute; bottom: 6px; left: 6px; background: rgba(0,0,0,0.65); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 3px; font-weight: 600; }
.sp-coll-card-name { padding: 8px 10px; font-size: 13px; color: var(--sp-text); line-height: 1.3; min-height: 44px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* People grid (3 columns) */
.sp-people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px; }
.sp-person-card { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; gap: 4px; }
.sp-person-photo { width: 100%; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; background: var(--sp-surface-2); margin-bottom: 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.sp-person-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-person-no-photo { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 36px; color: #ccc; }
.sp-person-no-photo.big { font-size: 60px; }
.sp-person-name { font-size: 12px; color: var(--sp-text); font-weight: 600; text-align: center; line-height: 1.25; max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sp-person-count { font-size: 11px; color: var(--sp-text-dim); }

/* Person detail hero */
.sp-person-hero { display: flex; gap: 14px; align-items: center; padding: 18px 14px; background: linear-gradient(135deg, var(--sp-primary-bg), #fff); }
.sp-person-hero-photo { width: 100px; height: 100px; border-radius: 50%; overflow: hidden; background: var(--sp-surface-2); flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.sp-person-hero-photo img { width: 100%; height: 100%; object-fit: cover; }
.sp-person-hero-info { flex: 1; min-width: 0; }
.sp-person-hero-name { font-size: 19px; font-weight: 700; color: var(--sp-text); margin: 0 0 4px; }
.sp-person-hero-role { font-size: 12px; color: var(--sp-primary); font-weight: 600; margin-bottom: 6px; }
.sp-person-hero-stat { font-size: 13px; color: var(--sp-text-dim); }

/* Genres grid */
.sp-genre-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 12px; box-sizing: border-box; max-width: 100%; overflow: hidden; }
.sp-genre-card { background: linear-gradient(135deg, var(--sp-primary-bg) 0%, #fff 100%); border: 1px solid #ffe0d0; border-radius: 10px; padding: 14px 10px; text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 110px; justify-content: center; box-sizing: border-box; min-width: 0; overflow: hidden; }
.sp-genre-card:active { background: #ffe5d4; }
.sp-genre-icon { font-size: 30px; line-height: 1; flex-shrink: 0; }
.sp-genre-name { font-size: 13.5px; color: var(--sp-text); font-weight: 600; text-align: center; line-height: 1.3; word-break: break-word; max-width: 100%; }
.sp-genre-count { font-size: 11px; color: var(--sp-text-dim); }
.sp-genre-hero { padding: 18px 16px; background: linear-gradient(135deg, var(--sp-primary-bg) 0%, #fff 100%); }
.sp-genre-hero-title { font-size: 22px; font-weight: 700; color: var(--sp-primary); margin: 0; }
.sp-genre-hero-count { font-size: 13px; color: var(--sp-text-dim); margin-top: 4px; }

/* Awards / rated list (horizontal cards) */
.sp-awards-list, .sp-rated-list { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }

/* Award type tabs (Oscar/BAFTA/Emmy/Globe) */
.sp-award-type-tabs {
    display: flex;
    gap: 6px;
    padding: 10px 8px;
    background: var(--sp-surface);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--sp-border);
}
.sp-award-type-tabs::-webkit-scrollbar { display: none; }
.sp-award-type-tab {
    flex: 0 0 auto;
    padding: 6px 14px;
    border-radius: 16px;
    background: var(--sp-bg);
    color: var(--sp-text-dim);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    -webkit-tap-highlight-color: transparent;
}
.sp-award-type-tab.active {
    background: linear-gradient(135deg, #f5a623, #d97706);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(217,119,6,0.3);
}

/* Year section header */
.sp-award-year-h {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 14px 14px 6px;
    background: var(--sp-surface-2);
    border-top: 1px solid #f0f0f0;
}
.sp-award-year-h .year-label {
    font-size: 18px;
    font-weight: 700;
    color: var(--sp-primary-dark);
}
.sp-award-year-h .year-count { font-size: 11px; color: var(--sp-text-dim); }

/* Award pills (replace generic awards string) */
.sp-award-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
}
.sp-award-pill {
    font-size: 10.5px;
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 600;
    line-height: 1.4;
}
/* Won pills — solid color */
.sp-award-pill.is-oscar-w { background: linear-gradient(135deg, #ffd700, #d97706); color: var(--sp-text); }
.sp-award-pill.is-bafta-w { background: linear-gradient(135deg, #c0c0c0, #6b7280); color: #fff; }
.sp-award-pill.is-globe-w { background: linear-gradient(135deg, #fbbf24, #b45309); color: #fff; }
.sp-award-pill.is-emmy-w  { background: linear-gradient(135deg, #cd7f32, #92400e); color: #fff; }
/* Nominated pills — outlined */
.sp-award-pill.is-oscar-n { background: #fff8e1; color: #856404; border: 1px solid #ffc107; }
.sp-award-pill.is-bafta-n { background: #f3f4f6; color: #6b7280; border: 1px solid var(--sp-border); }
.sp-award-pill.is-globe-n { background: #fef3c7; color: #b45309; border: 1px solid #fbbf24; }
.sp-award-pill.is-emmy-n  { background: #fef3c7; color: #92400e; border: 1px solid #cd7f32; }

/* Bestseller list — rank badges + Shopee-style cards */
.sp-bestseller-list { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; }
.sp-bestseller-card {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: var(--sp-surface);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    align-items: flex-start;
    position: relative;
    border-left: 4px solid #f5f5f5;
}
.sp-bestseller-card.is-dvd  { border-left-color: #c89b3c; }
.sp-bestseller-card.is-bd   { border-left-color: #02D8E9; }
.sp-bestseller-card.is-bd50 { border-left-color: #1e3a8a; }
.sp-bestseller-card.is-uhd  { border-left-color: #111827; }

.sp-bestseller-rank {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sp-bg);
    color: var(--sp-text-dim);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
}
.sp-bestseller-rank.is-top1 { background: linear-gradient(135deg, #ffd700, #f5a623); color: #fff; box-shadow: 0 2px 6px rgba(245,166,35,0.4); }
.sp-bestseller-rank.is-top2 { background: linear-gradient(135deg, #c0c0c0, #999); color: #fff; }
.sp-bestseller-rank.is-top3 { background: linear-gradient(135deg, #cd7f32, #a0522d); color: #fff; }

.sp-bestseller-card-img { width: 70px; aspect-ratio: 2/3; border-radius: 5px; overflow: hidden; background: var(--sp-surface-2); flex-shrink: 0; }
.sp-bestseller-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-bestseller-card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sp-bestseller-card-name { font-size: 14px; font-weight: 600; color: var(--sp-text); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sp-bestseller-card-rating { font-size: 12px; color: var(--sp-text-dim); }
.sp-bestseller-card-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; gap: 8px; }
.sp-bestseller-card-price { font-size: 16px; font-weight: 700; color: var(--sp-primary); }
.sp-bestseller-card-sold { font-size: 11px; color: var(--sp-text-dim); }

.bestseller-hero {
    background: linear-gradient(135deg, #fff5e6 0%, #ffe2bf 100%);
    color: #6b3410;
}
.bestseller-hero .sp-list-hero-title { color: var(--sp-primary-dark); }
.bestseller-hero .sp-list-hero-meta { color: #8b5a2b; opacity: 1; }

/* Categories list (browse/categories) */
.sp-cat-list { padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.sp-cat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--sp-surface);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s;
}
.sp-cat-card:active { background: var(--sp-surface-2); }
.sp-cat-rank {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sp-bg);
    color: var(--sp-text-dim);
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sp-cat-rank.is-top1 { background: linear-gradient(135deg, #ffd700, #f5a623); color: #fff; box-shadow: 0 2px 6px rgba(245,166,35,0.4); }
.sp-cat-rank.is-top2 { background: linear-gradient(135deg, #c0c0c0, #999); color: #fff; }
.sp-cat-rank.is-top3 { background: linear-gradient(135deg, #cd7f32, #a0522d); color: #fff; }
.sp-cat-info { flex: 1; min-width: 0; }
.sp-cat-name { font-size: 15px; font-weight: 600; color: var(--sp-text); line-height: 1.3; }
.sp-cat-meta { font-size: 12px; color: var(--sp-text-dim); margin-top: 2px; display: flex; gap: 4px; }
.sp-cat-sold { color: var(--sp-primary); font-weight: 500; }
.sp-cat-arrow { color: #ccc; font-size: 22px; flex-shrink: 0; }
.sp-award-card, .sp-rated-card { display: flex; gap: 10px; padding: 10px; background: var(--sp-surface); border-radius: 8px; text-decoration: none; color: inherit; box-shadow: 0 1px 3px rgba(0,0,0,0.04); align-items: flex-start; }
.sp-award-card-img, .sp-rated-img { width: 70px; aspect-ratio: 2/3; border-radius: 5px; overflow: hidden; background: var(--sp-surface-2); flex-shrink: 0; }
.sp-award-card-img img, .sp-rated-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-award-card-info, .sp-rated-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sp-award-card-name, .sp-rated-name { font-size: 14px; font-weight: 600; color: var(--sp-text); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sp-award-card-rating, .sp-rated-scores { display: flex; gap: 8px; font-size: 12px; color: var(--sp-text-dim); }
.sp-rated-scores .sc-imdb { color: #b8860b; font-weight: 600; }
.sp-rated-scores .sc-rt { color: #c1272d; font-weight: 600; }
.sp-award-card-awards { font-size: 11px; color: var(--sp-text-dim); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sp-award-card-price, .sp-rated-price { font-size: 14px; font-weight: 700; color: var(--sp-primary); }

.sp-rated-card { position: relative; padding-left: 40px; }
.sp-rated-rank { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background: linear-gradient(180deg, var(--sp-primary-light), var(--sp-primary)); color: #fff; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.sp-rated-card:nth-child(1) .sp-rated-rank, .sp-rated-card:nth-child(2) .sp-rated-rank, .sp-rated-card:nth-child(3) .sp-rated-rank { font-size: 14px; }

/* ============================================================ */
/*  MYCART — Free disc selector (new)                           */
/* ============================================================ */

.sp-cart-promo-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.sp-cart-promo-type { font-size: 13px; color: var(--sp-text); font-weight: 600; }
.sp-cart-promo-count { font-size: 12px; color: var(--sp-text-dim); font-weight: 600; }
.sp-cart-promo-fill.eligible { background: linear-gradient(90deg, #00b974, #06c755); }

.sp-cart-free-selector { background: linear-gradient(135deg, var(--sp-primary-bg) 0%, #ffe8dc 100%); border-radius: 8px; padding: 12px; margin-top: 12px; border: 1px dashed var(--sp-primary); }
.sp-free-selector-h { font-size: 13px; font-weight: 600; color: var(--sp-primary); margin-bottom: 8px; }
.sp-free-selector-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.sp-free-opt { display: flex; padding: 8px; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 6px; cursor: pointer; align-items: flex-start; gap: 6px; transition: all 0.15s; }
.sp-free-opt input { margin: 2px 0 0; accent-color: var(--sp-primary); flex-shrink: 0; }
.sp-free-opt.selected, .sp-free-opt:has(input:checked) { border-color: var(--sp-primary); background: var(--sp-primary-bg); }
.sp-free-opt-info { flex: 1; min-width: 0; }
.sp-free-opt-name { font-size: 12px; font-weight: 600; color: var(--sp-text); line-height: 1.2; }
.sp-free-opt-desc { font-size: 10px; color: var(--sp-text-dim); line-height: 1.2; margin-top: 2px; }
.sp-free-selector-hint { font-size: 11px; color: var(--sp-text-dim); margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(0,0,0,0.08); }

/* ============================================================ */
/*  DRAWER — collapsible category groups                        */
/* ============================================================ */

.sp-drawer-group { border-bottom: 1px solid #f5f5f5; }
.sp-drawer-group-h {
    width: 100%; display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; background: transparent; border: 0; cursor: pointer;
    font-size: 14px; color: var(--sp-text); font-weight: 500; font-family: inherit; text-align: left;
}
.sp-drawer-group-h:active { background: var(--sp-bg); }
.sp-drawer-group-h .lbl { flex: 1; }
.sp-drawer-group-h .caret { color: #aaa; font-size: 12px; transition: transform 0.2s; }
.sp-drawer-group.collapsed .sp-drawer-group-h .caret { transform: rotate(-90deg); }
.sp-drawer-group-body {
    background: var(--sp-surface-2); max-height: 1000px; overflow: hidden; transition: max-height 0.25s ease;
}
.sp-drawer-group.collapsed .sp-drawer-group-body { max-height: 0; }
.sp-drawer-subitem {
    display: block; padding: 10px 16px 10px 38px; font-size: 13px; color: var(--sp-text-dim);
    text-decoration: none; line-height: 1.3;
}
.sp-drawer-subitem:active { background: var(--sp-primary-bg); color: var(--sp-primary); }

/* ============================================================ */
/*  FLOATING VDO PLAYER (detail page)                           */
/* ============================================================ */

.sp-trailer-floating-hint { position: absolute; bottom: 12px; left: 12px; background: rgba(0,200,80,0.9); color: #fff; padding: 4px 10px; font-size: 12px; border-radius: 12px; }

.sp-vdo-floater {
    position: fixed; z-index: 9999;
    width: 220px; aspect-ratio: 16/9;
    border-radius: 10px; overflow: hidden;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 2px rgba(255,255,255,0.2);
    background: #000;
    cursor: grab;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.sp-vdo-floater.dragging { cursor: grabbing; transform: scale(1.04); box-shadow: 0 12px 32px rgba(0,0,0,0.5); transition: none; }
.sp-vdo-floater-handle { position: absolute; top: 4px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 11px; opacity: 0.6; pointer-events: none; z-index: 2; line-height: 1; }
.sp-vdo-floater-iframe-wrap { position: absolute; inset: 0; }
.sp-vdo-floater-iframe-wrap iframe { width: 100%; height: 100%; display: block; pointer-events: auto; }
.sp-vdo-floater-close {
    position: absolute; top: 4px; right: 4px; z-index: 3;
    width: 24px; height: 24px;
    background: rgba(0,0,0,0.6); color: #fff;
    border: 0; border-radius: 50%; font-size: 12px; line-height: 1;
    cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
}
.sp-vdo-floater-buy {
    position: absolute; bottom: 6px; right: 6px; z-index: 3;
    background: linear-gradient(180deg, var(--sp-primary-light), var(--sp-primary)); color: #fff;
    border: 0; border-radius: 14px; padding: 5px 10px;
    font-size: 11px; font-weight: 600; cursor: pointer;
    box-shadow: 0 2px 6px rgba(238,77,45,0.4);
    font-family: inherit;
}
.sp-vdo-floater-buy:active { transform: scale(0.95); }

/* ============================================================ */
/*  VDO FEED — Buy Bottom Sheet                                 */
/* ============================================================ */

.sp-vfeed-buysheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9990; opacity: 0; transition: opacity 0.3s; backdrop-filter: blur(2px); }
.sp-vfeed-buysheet-backdrop.open { opacity: 1; }

.sp-vfeed-buysheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9991;
    background: var(--sp-surface);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.2);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    max-height: 80vh; display: flex; flex-direction: column;
    font-family: 'Sarabun', sans-serif;
}
.sp-vfeed-buysheet.open { transform: translateY(0); }
.sp-vfeed-buysheet-handle { width: 40px; height: 4px; background: #ddd; border-radius: 2px; margin: 8px auto 4px; }

.sp-vfeed-buysheet-h { display: flex; gap: 12px; padding: 12px 14px 10px; border-bottom: 1px solid var(--sp-border); align-items: flex-start; }
.sp-vfeed-buysheet-img { width: 60px; height: 90px; border-radius: 6px; background-size: cover; background-position: center; background-color: #f0f0f0; flex-shrink: 0; }
.sp-vfeed-buysheet-info { flex: 1; min-width: 0; padding-top: 4px; }
.sp-vfeed-buysheet-name { font-size: 14px; font-weight: 600; color: var(--sp-text); line-height: 1.3; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-vfeed-buysheet-price { font-size: 18px; font-weight: 700; color: var(--sp-primary); }
.sp-vfeed-buysheet-close { width: 28px; height: 28px; background: var(--sp-bg); border: 0; border-radius: 50%; color: var(--sp-text-dim); font-size: 14px; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: inherit; }

.sp-vfeed-buysheet-body { flex: 1; overflow-y: auto; padding: 14px; }
.sp-vfeed-buysheet-info-box {
    background: var(--sp-primary-bg);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sp-vfeed-buysheet-info-box:empty { display: none; }
.sp-vfeed-info-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.4;
}
.sp-vfeed-info-item .lbl { color: var(--sp-text-dim); flex: 0 0 70px; }
.sp-vfeed-info-item .val { color: var(--sp-text); font-weight: 500; flex: 1; }
.sp-vfeed-buysheet-section-h { font-size: 13px; color: var(--sp-text-dim); margin-bottom: 8px; font-weight: 600; }
.sp-vfeed-buysheet-loading { text-align: center; padding: 30px 0; color: var(--sp-text-dim); font-size: 13px; }
.sp-vfeed-buysheet-variants { display: flex; flex-direction: column; gap: 8px; }
.sp-vfeed-variant-opt { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--sp-surface); border: 1.5px solid #e0e0e0; border-radius: 8px; cursor: pointer; font-family: inherit; }
.sp-vfeed-variant-opt:active { background: #f9f9f9; }
.sp-vfeed-variant-opt.selected { border-color: var(--sp-primary); background: var(--sp-primary-bg); }
.sp-vfeed-variant-opt .lbl { font-size: 13px; color: var(--sp-text); }
.sp-vfeed-variant-opt .prc { font-size: 14px; font-weight: 700; color: var(--sp-primary); }

.sp-vfeed-buysheet-footer { display: flex; gap: 8px; padding: 10px 14px 16px; border-top: 1px solid #f0f0f0; background: var(--sp-surface); }
.sp-vfeed-buysheet-cart-btn, .sp-vfeed-buysheet-buy-btn { flex: 1; padding: 12px; border-radius: 24px; font-size: 14px; font-weight: 600; border: 0; cursor: pointer; font-family: inherit; }
.sp-vfeed-buysheet-cart-btn { background: var(--sp-surface); border: 1.5px solid var(--sp-primary); color: var(--sp-primary); }
.sp-vfeed-buysheet-buy-btn { background: linear-gradient(180deg, var(--sp-primary-light), var(--sp-primary)); color: #fff; }
.sp-vfeed-buysheet-cart-btn:disabled, .sp-vfeed-buysheet-buy-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================================ */
/*  DETAIL — Bottom sheet variant picker (Shopee-style)         */
/* ============================================================ */
.sp-detail-buysheet-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 200;
    opacity: 0;
    transition: opacity 0.25s;
}
.sp-detail-buysheet-backdrop.open { opacity: 1; }

.sp-detail-buysheet {
    position: fixed; left: 0; right: 0; bottom: 0;
    max-width: 480px; margin: 0 auto;
    background: var(--sp-surface);
    border-top-left-radius: 12px; border-top-right-radius: 12px;
    z-index: 201;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
    max-height: 85vh;
    display: flex; flex-direction: column;
}
.sp-detail-buysheet.open { transform: translateY(0); }

/* ── Top: large image + price ─────────────────────────────── */
.sp-detail-buysheet-top {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 16px 14px 14px;
    border-bottom: 1px solid var(--sp-border);
    align-items: flex-start;
    flex-shrink: 0;
}
.sp-detail-buysheet-img-wrap {
    position: relative;
    flex-shrink: 0;
}
.sp-detail-buysheet-img {
    width: 100px;
    aspect-ratio: 2/3;
    background: #f0f0f0 center/cover no-repeat;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.sp-detail-buysheet-img-zoom {
    position: absolute;
    bottom: 4px; right: 4px;
    width: 22px; height: 22px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; padding: 0;
}
.sp-detail-buysheet-top-info {
    flex: 1;
    min-width: 0;
    padding-top: 4px;  /* small space below sheet handle */
    padding-right: 36px; /* room for close btn */
}
.sp-detail-buysheet-price {
    color: var(--sp-primary);
    font-weight: 600;
    line-height: 1;
    margin-bottom: 8px;
}
.sp-detail-buysheet-price .cur { font-size: 16px; }
.sp-detail-buysheet-price .amt { font-size: 24px; }
.sp-detail-buysheet-coupon-row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff8eb;
    color: var(--sp-primary);
    padding: 3px 8px;
    border-radius: 3px;
    font-size: 11px;
    margin-bottom: 8px;
}
.sp-detail-buysheet-stock {
    font-size: 13px;
    color: var(--sp-text-dim);
}
.sp-detail-buysheet-close {
    position: absolute; top: 8px; right: 8px;
    width: 32px; height: 32px;
    background: transparent;
    border: 0;
    color: var(--sp-text-dim);
    cursor: pointer;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
}

/* ── Body: rows of label + control ──────────────────────── */
.sp-detail-buysheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 14px;
}
.sp-detail-buysheet-row {
    padding: 16px 0;
    border-bottom: 1px solid #f5f5f5;
}
.sp-detail-buysheet-row:last-child { border-bottom: 0; }
.sp-detail-buysheet-label {
    font-size: 14px;
    color: var(--sp-text);
    margin-bottom: 12px;
}
.sp-detail-buysheet-loading {
    text-align: center;
    color: var(--sp-text-dim);
    padding: 12px 0;
    font-size: 13px;
}

/* ── Variant pills (รูปแบบ buttons) ──────────────────────── */
.sp-detail-buysheet-variants {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sp-variant-pill {
    background: var(--sp-bg);
    border: 1px solid transparent;
    color: var(--sp-text);
    font-size: 13px;
    font-family: inherit;
    padding: 8px 14px;
    border-radius: 2px;
    cursor: pointer;
    line-height: 1.3;
    min-width: 60px;
    text-align: center;
    transition: all 0.15s;
}
.sp-variant-pill .lbl { display: block; }
.sp-variant-pill.selected {
    background: var(--sp-primary-bg);
    border-color: var(--sp-primary);
    color: var(--sp-primary);
}
.sp-variant-pill:not(.selected):active {
    background: #ebebeb;
}

/* ── Quantity row ────────────────────────────────────────── */
.sp-detail-buysheet-qty-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sp-detail-buysheet-qty-row .sp-detail-buysheet-label {
    margin-bottom: 0;
}
.sp-detail-buysheet-qty {
    display: flex;
    align-items: center;
    gap: 0;
}
.sp-qty-btn {
    width: 32px; height: 32px;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    color: var(--sp-text-dim);
    font-size: 18px; font-weight: 400;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: inherit;
}
.sp-qty-btn:active { background: var(--sp-bg); }
.sp-qty-input {
    width: 48px; height: 32px;
    border: 1px solid var(--sp-border);
    border-left: 0; border-right: 0;
    background: var(--sp-surface);
    text-align: center;
    font-size: 14px;
    font-family: inherit;
    color: var(--sp-text);
    padding: 0;
    -moz-appearance: textfield;
}
.sp-qty-input::-webkit-outer-spin-button,
.sp-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.sp-qty-input:focus { outline: 0; border-color: var(--sp-primary); }

/* ── Actions: full-width primary button ─────────────────── */
.sp-detail-buysheet-actions {
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 8px));
    border-top: 1px solid #f0f0f0;
    background: var(--sp-surface);
}
.sp-detail-buysheet-primary {
    display: block;
    width: 100%;
    padding: 12px;
    border: 0;
    border-radius: 2px;
    background: var(--sp-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s;
}
.sp-detail-buysheet-primary:active { opacity: 0.85; }
.sp-detail-buysheet-primary:disabled {
    background: #ffb6a4;
    cursor: not-allowed;
}
.sp-detail-buysheet-primary.is-buy {
    background: #d0021b;
}

/* ============================================================ */
/*  FORMAT FILTER TABS (DVD / Blu-ray / 4K)                     */
/* ============================================================ */
.sp-fmt-tabs-wrap {
    background: var(--sp-surface);
    border-bottom: 1px solid var(--sp-border);
    padding: 10px 0 12px;
    box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.sp-fmt-tabs {
    display: flex;
    gap: 8px;
    padding: 0 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.sp-fmt-tabs::-webkit-scrollbar { display: none; }

.sp-fmt-tab {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 18px;
    background: #f6f7f9;
    color: var(--sp-text);
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    border: 1px solid transparent;
    transition: all 0.18s ease;
    line-height: 1;
}
.sp-fmt-tab-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ccc;
    flex-shrink: 0;
    box-shadow: 0 0 0 1.5px rgba(255,255,255,0.7) inset;
}
.sp-fmt-tab-label { line-height: 1; }

/* Per-format dot color when not active */
.sp-fmt-tab.fmt-all   .sp-fmt-tab-dot { background: #999; }
.sp-fmt-tab.fmt-dvd   .sp-fmt-tab-dot { background: #b8860b; }      /* gold-DVD */
.sp-fmt-tab.fmt-bd    .sp-fmt-tab-dot { background: #02D8E9; }      /* blue */
.sp-fmt-tab.fmt-bd50  .sp-fmt-tab-dot { background: #1e3a8a; }      /* deep blue */
.sp-fmt-tab.fmt-uhd   .sp-fmt-tab-dot { background: #111827; }      /* black (matches 4K border) */

/* Active state — solid color pill matching the format */
.sp-fmt-tab.active {
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
    transform: translateY(-1px);
}
.sp-fmt-tab.active .sp-fmt-tab-dot {
    background: rgba(255,255,255,0.9);
}
.sp-fmt-tab.fmt-all.active   { background: linear-gradient(135deg, var(--sp-primary-light), var(--sp-primary)); }
.sp-fmt-tab.fmt-dvd.active   { background: linear-gradient(135deg, #d4a017, #b8860b); }
.sp-fmt-tab.fmt-bd.active    { background: linear-gradient(135deg, #02E5F2, #02D8E9); }
.sp-fmt-tab.fmt-bd50.active  { background: linear-gradient(135deg, #2563eb, #1e3a8a); }
.sp-fmt-tab.fmt-uhd.active   { background: linear-gradient(135deg, #374151, #111827); }

.sp-fmt-tab:not(.active):active {
    background: #e9eaee;
}

/* ============================================================ */
/*  CART TOAST (after AJAX add to cart)                          */
/* ============================================================ */
.sp-cart-toast {
    position: fixed;
    bottom: 80px; left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 10px 22px;
    border-radius: 22px;
    font-size: 14px; font-weight: 500;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    pointer-events: none;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.sp-cart-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ============================================================ */
/*  DETAIL — Disc spec table (รหัสสินค้า, จำนวน, เสียง, ซับ)   */
/* ============================================================ */
.sp-spec-table {
    background: var(--sp-surface-2);
    border-radius: 6px;
    padding: 4px 0;
    margin: 4px 0;
}

/* Visible variant picker (above bottom sheet, in body) */
.sp-variant-count-meta { font-size: 13px; color: var(--sp-text-dim); font-weight: 400; margin-left: 6px; }
.sp-variant-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0;
}
.sp-variant-preview-pill {
    background: var(--sp-bg);
    border: 1px solid #f5f5f5;
    border-radius: 4px;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--sp-text);
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 80px;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}
.sp-variant-preview-pill:active {
    border-color: var(--sp-primary);
    background: var(--sp-primary-bg);
    color: var(--sp-primary);
    transform: scale(0.97);
}
.sp-variant-preview-pill.selected {
    border-color: var(--sp-primary);
    background: var(--sp-primary-bg);
    color: var(--sp-primary);
}
.sp-spec-row {
    display: flex;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--sp-border);
    align-items: flex-start;
}
.sp-spec-row:last-child { border-bottom: 0; }
/* v286.83: bigger fonts in spec table — Yut: กลุ่มลูกค้าเป็นคนแก่ */
.sp-spec-label {
    font-size: 15px;
    color: var(--sp-text-dim);
    flex-shrink: 0;
    width: 88px;
    line-height: 1.5;
    padding-top: 2px;
}
.sp-spec-value {
    flex: 1;
    font-size: 15px;
    color: var(--sp-text);
    line-height: 1.6;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
    align-items: center;
}
.sp-spec-code {
    font-weight: 600;
    color: var(--sp-primary);
    font-family: 'Sarabun', sans-serif;
    letter-spacing: 0.3px;
}
.sp-spec-chip {
    display: inline-block;
    padding: 4px 10px;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 12px;
    font-size: 14px;
    color: var(--sp-text-dim);
}

/* ── Related products loading state ────────────────────── */
.sp-detail-related-loading {
    text-align: center;
    color: var(--sp-text-dim);
    padding: 30px 0;
    font-size: 13px;
    width: 100%;
}

/* ============================================================ */
/*  Sort row (เรียงโดย: ขายดี / ใหม่ / ราคา)                    */
/* ============================================================ */
.sp-sort-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--sp-surface);
    border-bottom: 1px solid var(--sp-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.sp-sort-row::-webkit-scrollbar { display: none; }
.sp-sort-label {
    font-size: 12px;
    color: var(--sp-text-dim);
    flex-shrink: 0;
}
.sp-sort-tabs {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.sp-sort-tab {
    flex-shrink: 0;
    padding: 5px 10px;
    border-radius: 4px;
    background: var(--sp-bg);
    color: var(--sp-text-dim);
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
}
.sp-sort-tab.active {
    background: var(--sp-primary);
    color: #fff;
    font-weight: 500;
}

/* ============================================================ */
/*  DETAIL — Floating back button (always visible)              */
/* ============================================================ */
.sp-detail-floating-back {
    /* Bug#162 (2026-05-14): anchor to 480px container edge on wide viewports,
       fall back to 12px viewport-edge on phones. max() handles both cases. */
    position: fixed;
    top: 12px;
    left: max(12px, calc(50vw - 240px + 12px));
    z-index: 99;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.5);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: opacity 0.2s;
}
.sp-detail-header.scrolled ~ .sp-detail-floating-back,
.sp-detail-floating-back.hidden { opacity: 0; pointer-events: none; }

/* ============================================================ */
/*  v286.86: floating LINE chat removed (Yut: บังปุ่ม font; promoted to top of hamburger menu) */
/* Hamburger LINE CTA (replaces floating button) */
.sp-drawer-line-cta {
    display: flex; align-items: center; gap: 12px;
    margin: 8px 12px 14px; padding: 12px 14px;
    background: linear-gradient(180deg, #06c755 0%, #04a849 100%);
    color: #fff; text-decoration: none;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(6,199,85,0.25);
}
.sp-drawer-line-cta:active { transform: scale(0.98); }
.sp-drawer-line-icon { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sp-drawer-line-text { flex: 1; min-width: 0; }
.sp-drawer-line-title { font-size: 14px; font-weight: 700; line-height: 1.2; }
.sp-drawer-line-id { font-size: 12px; opacity: 0.92; margin-top: 2px; }
.sp-drawer-line-chev { font-size: 20px; opacity: 0.85; flex-shrink: 0; }

/* ============================================================ */
/*  Cross-links suggestion bar (browse detail pages)             */
/* ============================================================ */
.sp-cross-links {
    margin: 16px 12px 20px;
    padding: 16px;
    background: linear-gradient(135deg, #fff8eb 0%, var(--sp-primary-bg) 100%);
    border: 1px solid #ffe4d4;
    border-radius: 8px;
}
.sp-cross-links-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--sp-primary);
    margin-bottom: 12px;
}
.sp-cross-links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.sp-cross-link {
    background: var(--sp-surface);
    border: 1px solid #ffd8c2;
    color: var(--sp-text-dim);
    padding: 8px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    text-align: center;
    transition: all 0.15s;
}
.sp-cross-link:active {
    background: var(--sp-primary);
    color: #fff;
    border-color: var(--sp-primary);
}

/* Drawer section headers */
.sp-drawer-section-h {
    padding: 16px 16px 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--sp-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-top: 1px solid #f5f5f5;
    margin-top: 6px;
}
.sp-drawer-section-h:first-of-type { border-top: 0; margin-top: 0; }

/* ============================================================ */
/*  VDO Feed — Play/Pause + Sound controls                       */
/* ============================================================ */
.sp-vfeed-play-overlay {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80px; height: 80px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    border: 0;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 8;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
    backdrop-filter: blur(2px);
}
.sp-vfeed-play-overlay.show { opacity: 1; pointer-events: auto; }
.sp-vfeed-play-overlay svg { width: 44px; height: 44px; pointer-events: none; }

.sp-vfeed-sound-btn {
    position: absolute;
    top: 60px; right: 12px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    border: 0;
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    z-index: 7;
    backdrop-filter: blur(2px);
    transition: background 0.2s;
}
.sp-vfeed-sound-btn:active { background: rgba(0,0,0,0.75); }
.sp-vfeed-sound-btn svg { width: 20px; height: 20px; pointer-events: none; }

/* Seek indicator (shown during horizontal drag) */
.sp-vfeed-seek-ind {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.8);
    color: #fff;
    padding: 10px 22px;
    border-radius: 28px;
    font-size: 22px;
    font-weight: 600;
    z-index: 9;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    backdrop-filter: blur(4px);
}
.sp-vfeed-seek-ind.show { opacity: 1; }

/* Disable scroll-snap during horizontal seek-drag — handled in JS by stopping touchmove */

/* ============================================================ */
/*  Universal recommendation section + grid                     */
/* ============================================================ */
.sp-reco-section {
    margin-top: 8px;
    padding: 0;
}
/* v286.99l-perf-r2 2026-05-14 — skeleton placeholder cards reserve space until reco fetch
   returns, eliminating CLS from the grid expanding mid-load. Removed by JS before real
   cards are inserted. Posters are 2:3 (aspect-ratio 0.667). */
.sp-reco-skel {
    background: var(--sp-surface);
    border-radius: 6px;
    overflow: hidden;
}
.sp-reco-skel-img {
    width: 100%;
    aspect-ratio: 2 / 3;
    background: linear-gradient(90deg, var(--sp-bg) 0%, var(--sp-surface-2, #f0f0f0) 50%, var(--sp-bg) 100%);
    background-size: 200% 100%;
    animation: spRecoSkelPulse 1.2s ease-in-out infinite;
}
.sp-reco-skel-line {
    height: 30px;
    margin: 6px 8px 10px;
    background: linear-gradient(90deg, var(--sp-bg) 0%, var(--sp-surface-2, #f0f0f0) 50%, var(--sp-bg) 100%);
    background-size: 200% 100%;
    animation: spRecoSkelPulse 1.2s ease-in-out infinite;
    border-radius: 4px;
}
@keyframes spRecoSkelPulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.sp-reco-section .sp-detail-section-h {
    padding: 12px 14px 6px;
    margin-bottom: 0;
}
.sp-reco-grid {
    /* CSS columns layout — same as home, free-flow heights, no equal-row constraint
       Bug#157 (2026-05-14 — Yut): always 2-col. Was 3-col on viewport ≥480px which
       triggered on iPad (vw=1024) even though body is centered at 480px wide → cards
       became weird narrow strips. Tablet/desktop wide viewport users still see 2-col
       inside the 480px mobile container. */
    column-count: 2;
    column-gap: 8px;
    padding: 8px;
    background: var(--sp-bg);
}
.sp-reco-grid > * {
    /* Prevent cards from breaking across columns */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 8px;
    display: block;
}
.sp-reco-sentinel,
.sp-reco-end {
    column-span: all;
    -webkit-column-span: all;
}

/* ============================================================ */
/*  v286.99k rev3 — Home special cards (fits in grid, 1 column)  */
/*  Yut rev3: "1 สินค้าวางเรียงต่อๆไป ไม่กิน row, แต่เด่นพิเศษ"  */
/*  Strategy: same size as sp-card (2:3 poster) + visual treatment*/
/*    - gold/orange glow border to stand out                     */
/*    - eyebrow ribbon top-left ("🔎 ค้นหา" etc)                  */
/*    - bottom overlay with bigger title + CTA chip              */
/*  Hero block: still horizontal carousel but smaller            */
/* ============================================================ */
.sp-hb {
    display: block;
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    background: #1a1a1a;
    text-decoration: none;
    color: #fff;
    box-shadow: 0 0 0 2px #ee4d2d, 0 2px 10px rgba(238,77,45,0.35);
    aspect-ratio: 2 / 3;
    margin-bottom: 8px;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}
.sp-hb-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: brightness(0.65) saturate(1.1);
    transition: transform 0.3s ease;
}
.sp-hb:active .sp-hb-img { transform: scale(1.04); }
.sp-hb-overlay {
    position: absolute;
    inset: 0;
    padding: 8px 10px 10px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.25) 45%, transparent 70%);
    color: #fff;
    pointer-events: none;
}
.sp-hb-eyebrow {
    position: absolute;
    top: 0; left: 0;
    background: #ee4d2d;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px 4px 8px;
    border-bottom-right-radius: 10px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    letter-spacing: 0.02em;
}
.sp-hb-title {
    font-size: 15px;
    font-weight: 800;
    line-height: 1.15;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9);
    margin: 0 0 2px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sp-hb-sub {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.85;
    text-shadow: 0 1px 2px rgba(0,0,0,0.7);
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sp-hb-cta {
    position: absolute;
    right: 6px; bottom: 6px;
    background: #ffce4d;
    color: #7c2d12;
    font-size: 10.5px;
    font-weight: 800;
    padding: 4px 9px;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.4);
    pointer-events: none;
    letter-spacing: 0.02em;
}

/* Hero block — still horizontal carousel, but at single-card width (2:3) */
.sp-hb.is-hero { aspect-ratio: 2 / 3; background: #000; box-shadow: 0 0 0 2px #ffce4d, 0 2px 12px rgba(255,206,77,0.45); }
.sp-hb.is-hero .sp-hb-eyebrow { background: #ffce4d; color: #7c2d12; }
.sp-hb-hero-track {
    position: absolute;
    inset: 0;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.sp-hb-hero-track::-webkit-scrollbar { display: none; }
.sp-hb-hero-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
    position: relative;
    text-decoration: none;
    color: #fff;
}
.sp-hb-hero-slide .sp-hb-img { filter: brightness(0.7); }
.sp-hb-hero-slide .sp-hb-overlay {
    padding: 8px 10px 10px;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 55%);
}
.sp-hb-hero-slide .sp-hb-title { font-size: 14px; }

body.mode-dark .sp-hb { background: #111; }

/* ============================================================ */
/*  DETAIL — Floating VDO ball (Shopee-style)                   */
/* ============================================================ */
.sp-vdo-ball {
    /* Bug#162 (2026-05-14): anchor to 480px container edge on wide viewports */
    position: fixed;
    top: 30%; /* 1.5/5 from top — Yut v286.83 (เลื่อนลงจาก 20%) */
    right: max(10px, calc(50vw - 240px + 10px));
    transform: translateY(-50%);
    width: 84px;
    height: 124px;
    border-radius: 12px;
    overflow: hidden;
    z-index: 95;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    background: #000;
    border: 1px solid rgba(255,255,255,0.9);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    text-decoration: none;
    color: #fff;
    transition: transform 0.2s, box-shadow 0.2s;
}
.sp-vdo-ball::before {
    /* Inner highlight ring */
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
    pointer-events: none;
    z-index: 2;
}
.sp-vdo-ball.dragging {
    transition: none;
    box-shadow: 0 12px 28px rgba(0,0,0,0.55);
    transform: translateY(-50%) scale(1.05);
}
/* (old .sp-vdo-ball img rule removed — was overriding .sp-vdo-ball-thumb positioning) */
.sp-vdo-ball-close {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0,0,0,0.9);
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.8);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 999;
    box-shadow: 0 2px 6px rgba(0,0,0,0.6);
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}
.sp-vdo-ball-close svg { width: 12px; height: 12px; pointer-events: none; }
.sp-vdo-ball-close:active { transform: scale(0.85); background: #000; }
.sp-vdo-ball-iframe, .sp-vdo-ball-thumb { border-radius: 10px; }
.sp-vdo-ball-clickshield {
    position: absolute;
    inset: 0;
    background: transparent;
    z-index: 5;
    pointer-events: auto;
    cursor: pointer;
}
.sp-vdo-ball-iframe-wrap {
    position: absolute; inset: 0;
    overflow: hidden;
    border-radius: 10px;
}
.sp-vdo-ball-iframe {
    position: absolute;
    top: 50%; left: 50%;
    width: 262%; height: 100%;
    transform: translate(-50%, -50%);
    border: 0;
    pointer-events: none;
    border-radius: 10px;
    z-index: 1;
}
.sp-vdo-ball-thumb {
    z-index: 2;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sp-vdo-ball-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,0.6);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 14px;
    pointer-events: none;
    z-index: 3;
}
.sp-vdo-ball-label {
    position: absolute;
    bottom: 5px; left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.75);
    color: #fff;
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 0.5px;
    pointer-events: none;
}

/* ============================================================ */
/*  UPSELL BAR — Cart progress + Detail inline + Confirm popup  */
/* ============================================================ */

/* ── Cart: full progress bar ── */
.sp-upsell-bar {
    background: var(--sp-surface);
    padding: 14px 14px 10px;
    border-bottom: 6px solid #f5f5f5;
}
.sp-upsell-celebrate {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #fff5e6, #ffe0a0);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 14px;
    font-weight: 600;
    color: #7c4d00;
}
.sp-upsell-celebrate-ico { font-size: 28px; flex-shrink: 0; }
.sp-upsell-track {
    margin-bottom: 12px;
}
.sp-upsell-track:last-child { margin-bottom: 0; }
.sp-upsell-track-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.sp-upsell-track-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-text);
}
.sp-upsell-track-label.done { color: #16a34a; }
.sp-upsell-track-label.hot  { color: var(--sp-primary); }
.sp-upsell-track-status {
    font-size: 12px;
    font-weight: 700;
    color: var(--sp-text-dim);
}
.sp-upsell-track-status.done { color: #16a34a; }
.sp-upsell-track-status.hot  { color: var(--sp-primary); }

.sp-upsell-progress-wrap {
    height: 8px;
    border-radius: 4px;
    background: var(--sp-surface-2);
    overflow: hidden;
    margin-bottom: 4px;
}
.sp-upsell-progress-bar {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--sp-primary-light), var(--sp-primary));
    transition: width 0.4s ease;
    min-width: 4px;
}
.sp-upsell-progress-bar.gift {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}
.sp-upsell-progress-bar.done {
    background: linear-gradient(90deg, #34d399, #16a34a);
}
.sp-upsell-track-hint {
    font-size: 11px;
    color: #aaa;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sp-upsell-reward-tag {
    background: var(--sp-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
}
.sp-upsell-add-more {
    display: block;
    text-align: center;
    margin-top: 12px;
    padding: 9px;
    border: 1.5px dashed var(--sp-primary);
    border-radius: 6px;
    color: var(--sp-primary);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

/* ── Detail: inline single-line message above sticky ── */
.sp-upsell-sticky {
    position: relative;
    z-index: 1;
}
.sp-upsell-inline {
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.sp-upsell-inline--normal  { background: #fff5e6; color: #b45309; }
.sp-upsell-inline--hot     { background: #fff0eb; color: var(--sp-primary-dark); }
.sp-upsell-inline--success { background: #f0fdf4; color: #16a34a; }

/* ── After-add confirm popup ── */
.sp-upsell-confirm {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    width: calc(100% - 24px);
    max-width: 420px;
    background: var(--sp-surface);
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.2);
    padding: 16px;
    z-index: 500;
    opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
}
.sp-upsell-confirm.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.sp-upc-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.sp-upc-check { font-size: 24px; flex-shrink: 0; }
.sp-upc-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--sp-text);
}
.sp-upc-rewards {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
}
.sp-upc-reward {
    font-size: 13px;
    color: var(--sp-text-dim);
    padding: 6px 10px;
    background: #f9f9f9;
    border-radius: 6px;
}
.sp-upc-reward.is-gift {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    color: #92400e;
    font-weight: 600;
}
.sp-upc-reward.is-hot {
    background: linear-gradient(135deg, var(--sp-primary-bg), #ffe4d6);
    color: var(--sp-primary-dark);
    font-weight: 700;
}
.sp-upc-reward.is-success {
    background: linear-gradient(135deg, #d4f5dc, #b3ebbf);
    color: #16803a;
    font-weight: 700;
}
/* Progress bars in confirmation popup */
.sp-upc-progress-wrap {
    margin: 4px 0 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sp-upc-progress-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
}
.sp-upc-progress-label {
    flex-shrink: 0;
    width: 56px;
    color: var(--sp-text-dim);
    font-weight: 600;
}
.sp-upc-progress-track {
    flex: 1;
    height: 6px;
    background: var(--sp-surface-2);
    border-radius: 3px;
    overflow: hidden;
}
.sp-upc-progress-fill {
    height: 100%;
    transition: width 0.5s ease-out;
}
.sp-upc-progress-fill.gift { background: linear-gradient(90deg, #f5a623, var(--sp-primary)); }
.sp-upc-progress-fill.ship { background: linear-gradient(90deg, #16a34a, #0891b2); }
.sp-upc-progress-pct {
    flex-shrink: 0;
    width: 36px;
    text-align: right;
    color: var(--sp-text-dim);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.sp-upc-actions {
    display: flex;
    gap: 8px;
}
/* Quick-add (+) button on reco card */
.sp-card-quickadd {
    position: absolute;
    bottom: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--sp-primary);
    color: #fff;
    border: 2px solid var(--sp-surface);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 5;
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.15s, background 0.2s;
}
.sp-card-quickadd:active { transform: scale(0.85); }
.sp-card-quickadd.is-loading { opacity: 0.6; pointer-events: none; }
.sp-card-quickadd.is-added {
    background: #16a34a;
    transform: scale(1.15);
}
.sp-card-quickadd.is-added::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
}
.sp-card-quickadd.is-added svg { display: none; }
/* Detail page: bundle filler hint section (when 1-2 items from reward) */
.sp-detail-bundle-hint {
    background: linear-gradient(135deg, #fff5e6, #ffead0);
    border-top: 6px solid #f5f5f5;
    padding-bottom: 8px;
}
.sp-detail-bundle-hint-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 8px;
    font-size: 14px;
    font-weight: 600;
    color: #92400e;
}
.sp-detail-bundle-hint-head .ico {
    font-size: 22px;
}
.sp-detail-bundle-hint-head strong {
    color: var(--sp-primary-dark);
    font-weight: 800;
}
.sp-detail-bundle-hint .sp-reco-section { background: transparent; }
.sp-detail-bundle-hint .sp-reco-grid { background: transparent; }
.sp-detail-bundle-hint .sp-detail-section-h { display: none; }

/* Quick toast (mini bottom toast for reco quick-add) */
.sp-quick-toast {
    position: fixed;
    bottom: 88px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 10px 18px;
    border-radius: 22px;
    font-size: 13px;
    z-index: 1100;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.25s;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.sp-quick-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.sp-upc-btn-more {
    flex: 1;
    padding: 10px;
    border: 1.5px solid var(--sp-primary);
    border-radius: 6px;
    background: var(--sp-surface);
    color: var(--sp-primary);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sp-upc-btn-cart {
    flex: 1;
    padding: 10px;
    background: linear-gradient(135deg, var(--sp-primary-light), var(--sp-primary));
    border-radius: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════ */
/* v286.24 — Cart Redesign (Shopee-style)                          */
/* ═══════════════════════════════════════════════════════════════ */

.sp-cart-v2 {
    background: var(--sp-bg);
    min-height: 100vh;
    padding-bottom: 88px; /* sticky bottom space */
}

/* Loading skeleton */
.sp-cart-loading { padding: 14px; }
.sp-cart-loading .sk { background: #e8e8e8; border-radius: 8px; margin-bottom: 12px; animation: skPulse 1.4s ease infinite; }
.sp-cart-loading .sk-bar { height: 80px; }
.sp-cart-loading .sk-item { height: 110px; }
@keyframes skPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.sp-cart-error {
    background: var(--sp-surface); padding: 24px 16px; text-align: center; color: var(--sp-text-dim);
}
.sp-cart-error button {
    margin-top: 8px; padding: 8px 16px; border: 1px solid var(--sp-primary);
    background: var(--sp-surface); color: var(--sp-primary); border-radius: 4px; font-family: inherit;
}

/* Progress */
.sp-cart-progress { margin: 0; padding: 12px 14px; background: var(--sp-bg); }
.sp-progress-card { background: var(--sp-surface); border-radius: 8px; padding: 14px; }
.sp-progress-celebrate {
    display: flex; align-items: center; gap: 10px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 8px; padding: 12px; margin-bottom: 12px;
    color: #7c4d00; font-size: 13.5px;
}
.sp-progress-celebrate .ico { font-size: 24px; }
.sp-progress-celebrate strong { font-weight: 800; }
.sp-progress-track { margin-bottom: 12px; }
.sp-progress-track:last-child { margin-bottom: 0; }
.sp-progress-track.is-done .lbl { color: #16a34a; }
.sp-progress-track.is-done .status { color: #16a34a; }
.sp-progress-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 6px; font-size: 13px;
}
.sp-progress-head .lbl { font-weight: 600; color: var(--sp-text); }
.sp-progress-head .status { font-weight: 700; color: var(--sp-primary); font-size: 12px; }
.sp-progress-bar {
    height: 8px; background: var(--sp-surface-2); border-radius: 4px; overflow: hidden;
}
.sp-progress-bar .fill {
    height: 100%; background: linear-gradient(90deg, var(--sp-primary-light), var(--sp-primary));
    border-radius: 4px; transition: width 0.4s ease; min-width: 4px;
}
.sp-progress-bar .fill.is-gift {
    background: linear-gradient(90deg, #f59e0b, #d97706);
}
.sp-progress-track.is-done .sp-progress-bar .fill {
    background: linear-gradient(90deg, #34d399, #16a34a);
}

/* Issues / alerts */
.sp-cart-issues { margin: 0; padding: 0 14px 12px; }
.sp-issues-card {
    background: linear-gradient(135deg, var(--sp-primary-bg), #ffe4d6);
    border-radius: 8px; padding: 14px;
    border-left: 4px solid var(--sp-primary);
}
.sp-issues-head { font-weight: 700; color: var(--sp-primary-dark); margin-bottom: 8px; font-size: 14px; }
.sp-issue-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid rgba(238,77,45,0.1);
}
.sp-issue-row:last-child { border-bottom: none; }
.sp-issue-row .t1 { flex: 1; font-size: 13px; font-weight: 600; color: var(--sp-text); }
.sp-issue-row .t2 { font-size: 11.5px; color: var(--sp-primary-dark); flex-shrink: 0; }
.sp-issue-remove {
    flex-shrink: 0; padding: 5px 12px; background: var(--sp-primary); color: #fff;
    border: none; border-radius: 4px; font-size: 12px; font-weight: 600;
    font-family: inherit; cursor: pointer;
}

/* Items */
.sp-cart-items { background: var(--sp-surface); }
.sp-items-head {
    padding: 12px 14px 6px; font-size: 13px; color: var(--sp-text-dim); font-weight: 600;
}
.sp-item-card {
    display: flex; gap: 10px; padding: 12px 14px;
    border-bottom: 1px solid var(--sp-border); position: relative;
}
.sp-item-img {
    flex-shrink: 0; width: 80px; height: 80px; border-radius: 6px;
    overflow: hidden; background: var(--sp-bg);
}
.sp-item-img img { width: 100%; height: 100%; object-fit: cover; }
.sp-item-body { flex: 1; min-width: 0; position: relative; padding-right: 22px; }
.sp-item-name {
    display: block; font-size: 13px; font-weight: 600; color: var(--sp-text);
    line-height: 1.3; max-height: 34px; overflow: hidden;
    text-decoration: none; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    display: -webkit-box;
}
.sp-item-variant {
    margin-top: 4px; font-size: 11.5px; color: var(--sp-text-dim);
    display: inline-block; padding: 2px 8px; background: var(--sp-bg); border-radius: 3px;
}
.sp-item-row {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 8px;
}
.sp-item-price { font-size: 15px; font-weight: 700; color: var(--sp-primary); }
.sp-item-qty {
    display: flex; align-items: center; border: 1px solid var(--sp-border);
    border-radius: 4px; overflow: hidden; background: var(--sp-surface);
}
.sp-item-qty .qty-btn {
    width: 28px; height: 28px; background: var(--sp-surface-2); border: none;
    color: var(--sp-text); font-size: 16px; font-weight: 600; cursor: pointer;
    font-family: inherit; padding: 0;
    display: flex; align-items: center; justify-content: center;
}
.sp-item-qty .qty-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.sp-item-qty .qty-btn:active:not(:disabled) { background: var(--sp-surface-2); }
.sp-item-qty .qty-val {
    width: 36px; text-align: center; font-size: 13px; font-weight: 600;
    border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0;
    padding: 4px 0;
}
.sp-item-remove {
    position: absolute; top: 0; right: 0; width: 22px; height: 22px;
    border: none; background: transparent; color: var(--sp-text-dim); font-size: 14px;
    cursor: pointer; padding: 0; line-height: 1;
}
.sp-item-remove:active { color: var(--sp-primary); }

/* Free items section */
.sp-cart-free {
    background: linear-gradient(135deg, #fff5e6, #ffead0);
    margin-top: 8px; padding: 14px;
}
.sp-free-head {
    font-size: 14px; font-weight: 700; color: #92400e; margin-bottom: 10px;
}
.sp-free-items { background: var(--sp-surface); border-radius: 8px; }
.sp-free-item {
    display: flex; gap: 10px; padding: 10px 12px;
    border-bottom: 1px solid var(--sp-border); align-items: center;
}
.sp-free-item:last-child { border-bottom: none; }
.sp-free-img {
    width: 50px; height: 50px; border-radius: 4px; object-fit: cover; flex-shrink: 0;
}
.sp-free-body { flex: 1; min-width: 0; }
.sp-free-name {
    font-size: 12.5px; font-weight: 600; color: var(--sp-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-free-variant {
    margin-top: 3px; font-size: 11px; color: var(--sp-primary-dark); font-weight: 600;
}
.sp-free-remove {
    width: 26px; height: 26px; border: 1px solid var(--sp-border); background: var(--sp-surface);
    color: var(--sp-text-dim); border-radius: 50%; font-size: 12px; cursor: pointer;
    flex-shrink: 0; padding: 0;
}
.sp-free-pending {
    margin-top: 8px;
}
.sp-free-pending-row {
    display: flex; align-items: center; gap: 10px; padding: 12px;
    background: var(--sp-surface); border: 1px dashed var(--sp-primary); border-radius: 8px;
    margin-bottom: 8px;
}
.sp-free-pending-row:last-child { margin-bottom: 0; }
.sp-free-pending-info { flex: 1; min-width: 0; }
.sp-free-pending-info .t1 { font-size: 12px; font-weight: 700; color: var(--sp-primary-dark); }
.sp-free-pending-info .t2 { font-size: 11.5px; color: var(--sp-text-dim); margin-top: 2px; }
.sp-free-pick-btn {
    flex-shrink: 0; padding: 8px 14px; background: var(--sp-primary); color: #fff;
    border: none; border-radius: 6px; font-size: 13px; font-weight: 700;
    font-family: inherit; cursor: pointer;
}

/* Coupon */
.sp-cart-coupon { background: var(--sp-surface); margin-top: 8px; }
.sp-coupon-row {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 14px; background: var(--sp-surface); border: none; cursor: pointer;
    font-family: inherit; text-align: left;
}
.sp-coupon-icon { font-size: 18px; flex-shrink: 0; }
.sp-coupon-label {
    font-size: 13.5px; font-weight: 600; color: var(--sp-text); flex-shrink: 0;
}
.sp-coupon-status {
    flex: 1; text-align: right; font-size: 13px; color: var(--sp-text-dim);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-coupon-status .active { color: #16a34a; font-weight: 700; }
.sp-coupon-arrow { color: #ccc; font-size: 18px; flex-shrink: 0; }

/* Summary */
.sp-cart-summary { background: var(--sp-surface); margin-top: 8px; padding: 14px; }
.sp-summary-card { font-size: 13.5px; }
.sp-sum-row {
    display: flex; justify-content: space-between; padding: 6px 0;
    color: var(--sp-text-dim);
}
.sp-sum-row .free { color: #16a34a; font-weight: 700; }
.sp-sum-row .pending { color: var(--sp-text-dim); font-style: italic; }
.sp-sum-discount span:last-child { color: #16a34a; font-weight: 700; }
.sp-sum-divider { height: 1px; background: var(--sp-surface-2); margin: 8px 0; }
.sp-sum-total {
    display: flex; justify-content: space-between; align-items: baseline;
    padding-top: 4px;
}
.sp-sum-total span:first-child { font-size: 14px; font-weight: 600; color: var(--sp-text); }
.sp-sum-total .big {
    font-size: 22px; font-weight: 800; color: var(--sp-primary);
}

/* Sticky bottom CTA */
.sp-cart-sticky-v2 {
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--sp-surface); border-top: 1px solid #e8e8e8;
    padding: 10px 14px; display: flex; align-items: center; gap: 12px;
    z-index: 100;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.05);
}
.sp-cart-sticky-v2 .sp-sticky-info { flex: 1; }
.sp-cart-sticky-v2 .sp-sticky-info .t1 {
    font-size: 11px; color: var(--sp-text-dim);
}
.sp-cart-sticky-v2 .sp-sticky-info .t2 {
    font-size: 18px; font-weight: 800; color: var(--sp-primary); line-height: 1.1;
}
.sp-cart-sticky-v2 .sp-sticky-btn {
    padding: 12px 24px; background: linear-gradient(135deg, var(--sp-primary-light), var(--sp-primary));
    color: #fff; border: none; border-radius: 6px;
    font-size: 14px; font-weight: 700; font-family: inherit;
    cursor: pointer; min-width: 130px;
}
.sp-cart-sticky-v2 .sp-sticky-btn:active { opacity: 0.85; }
.sp-cart-sticky-v2 .sp-sticky-btn.has-warning {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

/* Bottom sheet */
.sp-sheet {
    position: fixed; inset: 0; z-index: 1000;
    pointer-events: none;
}
.sp-sheet[hidden] { display: none !important; }
.sp-sheet-backdrop {
    position: absolute; inset: 0; background: rgba(0,0,0,0);
    transition: background 0.25s; pointer-events: auto;
}
.sp-sheet.show .sp-sheet-backdrop { background: rgba(0,0,0,0.5); }
.sp-sheet-panel {
    position: absolute; bottom: 0; left: 0; right: 0;
    background: var(--sp-surface); border-radius: 14px 14px 0 0;
    transform: translateY(100%); transition: transform 0.28s ease;
    pointer-events: auto;
    max-height: 80vh; display: flex; flex-direction: column;
}
.sp-sheet-panel-tall { max-height: 90vh; }
.sp-sheet.show .sp-sheet-panel { transform: translateY(0); }
.sp-sheet-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 16px; border-bottom: 1px solid var(--sp-border);
}
.sp-sheet-title { font-size: 15px; font-weight: 700; color: var(--sp-text); }
.sp-sheet-close {
    width: 28px; height: 28px; border: none; background: var(--sp-bg);
    border-radius: 50%; font-size: 14px; cursor: pointer;
    color: var(--sp-text-dim); padding: 0; font-family: inherit;
}
.sp-sheet-body { flex: 1; overflow-y: auto; padding: 16px; }

/* Coupon sheet */
.sp-coupon-input-row {
    display: flex; gap: 8px; align-items: stretch;
}
.sp-coupon-input {
    flex: 1; padding: 12px 14px; border: 1px solid #d0d0d0;
    border-radius: 6px; font-size: 14px; font-family: inherit;
    outline: none; -webkit-appearance: none; appearance: none;
    text-transform: uppercase;
}
.sp-coupon-input:focus { border-color: var(--sp-primary); }
.sp-coupon-apply {
    padding: 0 22px; background: linear-gradient(135deg, var(--sp-primary-light), var(--sp-primary));
    color: #fff; border: none; border-radius: 6px;
    font-size: 14px; font-weight: 700; font-family: inherit;
    cursor: pointer; min-width: 70px;
}
.sp-coupon-apply:disabled { opacity: 0.6; }
.sp-coupon-msg {
    margin-top: 10px; font-size: 13px; min-height: 18px;
    padding: 0 4px;
}
.sp-coupon-msg.ok { color: #16a34a; }
.sp-coupon-msg.err { color: var(--sp-primary); }
.sp-coupon-active { margin-top: 14px; }
.sp-coupon-active-card {
    padding: 12px 14px; background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 1px solid #bbf7d0; border-radius: 8px;
}
.sp-coupon-active-card .t1 { font-size: 14px; font-weight: 700; color: #15803d; }
.sp-coupon-active-card .t2 { font-size: 12.5px; color: #16a34a; margin-top: 4px; }
.sp-coupon-remove-btn {
    margin-top: 10px; padding: 6px 14px; background: var(--sp-surface);
    border: 1px solid #ef4444; color: #ef4444; border-radius: 6px;
    font-size: 12px; font-weight: 600; font-family: inherit; cursor: pointer;
}

/* ──────────────────────────────────────────────────────────────
   v286.24+ Cart redesign — NEW unified styles
   ────────────────────────────────────────────────────────────── */

/* Skeleton loading */
.sp-cart-skeleton { padding: 12px 14px; }
.sp-skel-block {
    background: linear-gradient(90deg, #eee 0%, #f5f5f5 50%, #eee 100%);
    background-size: 200% 100%;
    border-radius: 8px;
    animation: sp-skel 1.4s ease-in-out infinite;
}
@keyframes sp-skel {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Empty state */
.sp-cart-empty {
    padding: 50px 20px 20px;
    text-align: center;
    background: var(--sp-surface);
}
.sp-empty-icon { font-size: 64px; margin-bottom: 12px; }
.sp-empty-title { font-size: 18px; font-weight: 600; color: var(--sp-text); margin-bottom: 6px; }
.sp-empty-msg { font-size: 14px; color: var(--sp-text-dim); margin-bottom: 20px; }
.sp-empty-cta {
    display: inline-block; padding: 12px 32px;
    background: linear-gradient(135deg, var(--sp-primary-light), var(--sp-primary));
    color: #fff; border-radius: 6px; font-weight: 700; text-decoration: none;
    font-size: 15px;
}
.sp-empty-rewards {
    margin-top: 32px; padding: 16px;
    background: linear-gradient(135deg, #fff5e6, #ffead0);
    border-radius: 8px;
}
.sp-empty-rewards-head {
    font-size: 14px; font-weight: 700; color: #92400e; margin-bottom: 12px;
}
.sp-empty-rewards-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.sp-empty-reward-item {
    background: var(--sp-surface); padding: 12px; border-radius: 8px; text-align: center;
}
.sp-empty-reward-item .ico { font-size: 28px; margin-bottom: 4px; }
.sp-empty-reward-item .t1 { font-size: 13px; font-weight: 700; color: var(--sp-primary-dark); }
.sp-empty-reward-item .t2 { font-size: 12px; color: var(--sp-text-dim); margin-top: 2px; }

/* Issues alert */
.sp-cart-issues-v2 {
    background: var(--sp-primary-bg);
    border-left: 3px solid var(--sp-primary);
    margin: 8px 0 0;
    padding: 10px 14px;
}
.sp-cart-root .sp-cart-issues {
    display: block;
    background: var(--sp-primary-bg);
    border-left: 3px solid var(--sp-primary);
    margin: 8px 0 0;
    padding: 10px 14px;
}
.sp-issues-head {
    font-size: 13px; font-weight: 700; color: var(--sp-primary-dark); margin-bottom: 8px;
}
.sp-issue-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 0; font-size: 13px;
}
.sp-issue-name { flex: 1; color: var(--sp-text-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-issue-tag {
    background: #fee; color: var(--sp-primary-dark); padding: 2px 8px;
    border-radius: 10px; font-size: 11px; font-weight: 600;
}
.sp-issue-remove {
    background: var(--sp-surface); border: 1px solid #ef4444; color: #ef4444;
    padding: 4px 10px; border-radius: 4px; font-size: 12px; font-weight: 600;
    font-family: inherit; cursor: pointer;
}

/* Cart items list */
.sp-cart-root .sp-cart-list { margin: 8px 0 0; }
.sp-cart-root .sp-cart-item {
    display: flex; gap: 10px;
    background: var(--sp-surface); padding: 12px 14px;
    border-bottom: 1px solid var(--sp-border);
    position: relative;
}
.sp-cart-root .sp-cart-item.has-issue { background: #fffaf5; }
.sp-cart-root .sp-cart-item.is-free {
    background: linear-gradient(90deg, #fffbeb 0%, #fff 60%);
}
.sp-cart-root .sp-cart-item-img {
    flex-shrink: 0; width: 70px; height: 100px;
    border-radius: 4px; overflow: hidden;
    position: relative; background: var(--sp-bg);
}
.sp-cart-root .sp-cart-item-img img {
    width: 100%; height: 100%; object-fit: cover;
}
.sp-cart-root .sp-free-badge {
    position: absolute; top: 4px; left: 4px;
    background: #16a34a; color: #fff;
    font-size: 10px; font-weight: 700;
    padding: 2px 6px; border-radius: 3px;
}
.sp-cart-root .sp-cart-item-body {
    flex: 1; display: flex; flex-direction: column;
    min-width: 0;
}
.sp-cart-root .sp-cart-item-name {
    font-size: 13px; color: var(--sp-text);
    line-height: 1.3; text-decoration: none;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.sp-cart-root .sp-cart-item-variant {
    font-size: 11.5px; color: var(--sp-text-dim);
    margin-top: 4px;
}
.sp-cart-root .sp-cart-item-bottom {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: auto;
    padding-top: 8px;
}
.sp-cart-root .sp-cart-item-price {
    font-size: 15px; font-weight: 700; color: var(--sp-primary);
}
.sp-cart-root .sp-cart-item-price-free { color: #16a34a; }
.sp-cart-root .sp-cart-item-remove {
    position: absolute; top: 8px; right: 8px;
    width: 28px; height: 28px;
    background: var(--sp-surface); border: 1px solid var(--sp-border);
    border-radius: 50%;
    color: var(--sp-text-dim); font-size: 14px;
    cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
}
.sp-cart-root .sp-cart-item-remove:active { background: var(--sp-bg); }

/* Quantity stepper */
.sp-cart-stepper {
    display: inline-flex; align-items: center;
    border: 1px solid var(--sp-border); border-radius: 4px;
    overflow: hidden; background: var(--sp-surface);
}
.sp-cart-stepper.is-loading { opacity: 0.5; pointer-events: none; }
.sp-step {
    width: 30px; height: 30px;
    background: #f9f9f9; border: none;
    font-size: 18px; font-weight: 600; color: var(--sp-text-dim);
    cursor: pointer; padding: 0;
    font-family: inherit;
}
.sp-step:active { background: #eee; }
.sp-step-qty {
    min-width: 36px; text-align: center;
    font-size: 14px; font-weight: 600;
    border-left: 1px solid #ddd; border-right: 1px solid #ddd;
    height: 30px; line-height: 30px;
}

/* Free box */
.sp-cart-root .sp-cart-freebox {
    background: linear-gradient(180deg, #fffbeb 0%, #fff 100%);
    margin-top: 8px;
    border-top: 6px solid #f5f5f5;
    border-bottom: 1px solid #f5e9c4;
}
.sp-freebox-head {
    padding: 12px 14px 4px;
    font-size: 14px; font-weight: 700; color: #92400e;
}
.sp-freebox-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid #f5e9c4;
}
.sp-freebox-info { flex: 1; min-width: 0; }
.sp-freebox-variant { font-size: 13.5px; font-weight: 600; color: var(--sp-text); }
.sp-freebox-status { font-size: 12px; color: var(--sp-text-dim); margin-top: 2px; }
.sp-freebox-entitled { color: #16a34a; font-weight: 600; }
.sp-freebox-remain { color: #ef4444; font-weight: 600; }
.sp-freebox-done { color: #16a34a; }
.sp-freebox-pick {
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--sp-primary-light), var(--sp-primary));
    color: #fff; border: none;
    padding: 8px 14px; border-radius: 6px;
    font-size: 13px; font-weight: 600; font-family: inherit;
    cursor: pointer;
}
.sp-freebox-pick:active { opacity: 0.85; }

/* Coupon */
.sp-cart-root .sp-cart-coupon {
    background: var(--sp-surface); padding: 12px 14px;
    border-top: 6px solid #f5f5f5;
}
.sp-cart-root .sp-coupon-row {
    display: flex; align-items: center; gap: 8px;
    background: transparent; padding: 0; border: none;
}
.sp-coupon-icon { font-size: 18px; flex-shrink: 0; }
.sp-cart-root .sp-coupon-input {
    flex: 1; padding: 9px 10px;
    border: 1px solid var(--sp-border); border-radius: 4px;
    font-size: 13.5px; font-family: inherit;
    background: var(--sp-surface);
}
.sp-cart-root .sp-coupon-input:disabled { background: var(--sp-bg); color: var(--sp-text-dim); }
.sp-cart-root .sp-coupon-apply {
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--sp-primary-light), var(--sp-primary));
    color: #fff; border: none;
    padding: 9px 18px; border-radius: 4px;
    font-size: 13px; font-weight: 600; font-family: inherit;
    cursor: pointer;
}
.sp-cart-root .sp-coupon-apply:disabled { opacity: 0.6; }
.sp-cart-root .sp-coupon-active {
    margin-top: 10px; padding: 8px 12px;
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 1px solid #bbf7d0;
    border-radius: 6px;
    font-size: 13px; color: #15803d; font-weight: 600;
}
.sp-cart-root .sp-coupon-active .ico { color: #16a34a; margin-right: 4px; }
.sp-cart-root .sp-coupon-error {
    margin-top: 8px; padding: 6px 10px;
    background: #fef2f2; color: #dc2626;
    border-radius: 4px; font-size: 12.5px;
}

/* Summary */
.sp-cart-root .sp-cart-summary {
    background: var(--sp-surface); margin-top: 8px;
    padding: 14px; padding-bottom: 80px;
}
.sp-cart-root .sp-sum-row {
    display: flex; justify-content: space-between;
    padding: 5px 0; font-size: 13.5px; color: var(--sp-text-dim);
}
.sp-cart-root .sp-sum-discount span:last-child { color: #16a34a; font-weight: 700; }
.sp-cart-root .sp-sum-hint span:last-child { color: var(--sp-primary); font-weight: 600; font-size: 12px; }
.sp-cart-root .sp-sum-success span:last-child { color: #16a34a; font-weight: 700; }
.sp-cart-root .sp-sum-pending span:last-child { color: var(--sp-text-dim); font-weight: 500; font-size: 12px; }
.sp-cart-root .sp-sum-total {
    border-top: 1px dashed #e0e0e0; margin-top: 6px; padding-top: 10px;
    font-size: 15px;
}
.sp-cart-root .sp-sum-total span:first-child { color: var(--sp-text); font-weight: 700; }
.sp-cart-root .sp-sum-total span:last-child {
    font-size: 19px; font-weight: 800; color: var(--sp-primary);
}

/* Sticky CTA — override the !important kill from before */
.sp-cart-root + .sp-cart-sticky,
.sp-cart-root ~ .sp-cart-sticky,
#spCartSticky.sp-cart-sticky {
    display: flex !important;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--sp-surface); border-top: 1px solid #e8e8e8;
    padding: 8px 14px; align-items: center; gap: 10px;
    z-index: 100; box-shadow: 0 -2px 8px rgba(0,0,0,0.06);
}
#spCartSticky[style*="display:none"], #spCartSticky[style*="display: none"] {
    display: none !important;
}
#spCartSticky .sp-cart-sticky-info { flex: 1; }
#spCartSticky .sp-cart-sticky-info .t1 { font-size: 11px; color: var(--sp-text-dim); }
#spCartSticky .sp-cart-sticky-info .t2 {
    font-size: 18px; font-weight: 800; color: var(--sp-primary); line-height: 1.1;
}
#spCartSticky .sp-cart-checkout-btn {
    padding: 11px 24px;
    background: linear-gradient(135deg, var(--sp-primary-light), var(--sp-primary));
    color: #fff; border: none; border-radius: 6px;
    font-size: 14px; font-weight: 700; font-family: inherit;
    cursor: pointer; min-width: 130px;
}
#spCartSticky .sp-cart-checkout-btn:active { opacity: 0.85; }

/* Bottom sheet for free picker */
.sp-bs-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 999;
}
.sp-bs {
    position: fixed; bottom: 0; left: 0; right: 0;
    max-height: 85vh;
    background: var(--sp-surface);
    border-radius: 16px 16px 0 0;
    z-index: 1000;
    display: flex; flex-direction: column;
    animation: sp-bs-up 0.25s ease-out;
}
@keyframes sp-bs-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
.sp-bs-handle {
    width: 36px; height: 4px;
    background: #ddd; border-radius: 2px;
    margin: 8px auto;
}
.sp-bs-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 4px 16px 12px;
    border-bottom: 1px solid var(--sp-border);
}
.sp-bs-title { font-size: 16px; font-weight: 700; color: var(--sp-text); }
.sp-bs-close {
    width: 32px; height: 32px;
    background: var(--sp-bg); border: none;
    border-radius: 50%; font-size: 14px; color: var(--sp-text-dim);
    cursor: pointer; padding: 0;
}
.sp-bs-body {
    flex: 1; overflow-y: auto;
    padding: 12px 16px 24px;
}
.sp-bs-search {
    padding: 8px 14px;
    border-bottom: 1px solid var(--sp-border);
}
.sp-bs-search input {
    width: 100%; padding: 9px 12px;
    border: 1px solid var(--sp-border); border-radius: 20px;
    font-size: 13.5px; font-family: inherit;
    background: #f9f9f9;
    box-sizing: border-box;
}
.sp-bs-search input:focus {
    outline: none; border-color: var(--sp-primary);
    background: var(--sp-surface);
}
.sp-bs-info {
    background: #fff5e6; padding: 10px 12px;
    border-radius: 6px; font-size: 13px;
    color: #92400e; margin-bottom: 12px;
}
.sp-bs-info strong { color: var(--sp-primary-dark); }
.sp-bs-loading, .sp-bs-empty {
    text-align: center; padding: 40px 0;
    color: var(--sp-text-dim); font-size: 14px;
}
.sp-bs-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.sp-bs-card {
    background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 8px;
    overflow: hidden; text-decoration: none; color: inherit;
    -webkit-tap-highlight-color: transparent;
}
.sp-bs-card:active { background: #f9f9f9; }
.sp-bs-card-img {
    width: 100%; aspect-ratio: 2/3; object-fit: cover;
    display: block; background: var(--sp-bg);
}
.sp-bs-card-name {
    padding: 8px 8px 4px; font-size: 12px; line-height: 1.3;
    color: var(--sp-text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.sp-bs-card-tag {
    padding: 0 8px 8px; font-size: 11px; color: var(--sp-primary); font-weight: 600;
}

/* VDO feed: inactive product warning notice */
.sp-vfeed-inactive-notice {
    background: rgba(255,107,53,0.95);
    color: #fff;
    padding: 8px 14px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    position: fixed;
    top: 56px; left: 0; right: 0;
    z-index: 90;
}

/* Continue shopping link in cart */
.sp-cart-continue {
    display: flex; align-items: center; justify-content: center;
    gap: 8px;
    background: var(--sp-surface);
    border: 1.5px dashed var(--sp-primary);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 8px 12px;
    color: var(--sp-primary);
    font-size: 14px; font-weight: 600;
    text-decoration: none;
}
.sp-cart-continue .ico {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sp-primary); color: #fff;
    border-radius: 50%;
    font-size: 18px; font-weight: 700;
    line-height: 1;
}
.sp-cart-continue:active { opacity: 0.8; }

/* Auto-suggest row */
.sp-freebox-auto-suggest {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    border-top: 1px solid #f5e9c4;
    border-bottom: 1px solid #f5e9c4;
}
.sp-auto-img {
    width: 50px; height: 70px; object-fit: cover;
    border-radius: 4px; flex-shrink: 0;
    background: var(--sp-bg);
}
.sp-auto-text { flex: 1; min-width: 0; }
.sp-auto-label {
    font-size: 11px; font-weight: 700; color: var(--sp-primary-dark);
    text-transform: uppercase;
}
.sp-auto-name {
    font-size: 13px; font-weight: 600; color: var(--sp-text);
    margin-top: 2px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.sp-auto-savings {
    font-size: 11.5px; color: #16a34a; font-weight: 600; margin-top: 2px;
}
.sp-auto-apply-btn {
    flex-shrink: 0;
    padding: 9px 14px;
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff; border: none;
    border-radius: 6px;
    font-size: 13px; font-weight: 700;
    font-family: inherit; cursor: pointer;
}
.sp-auto-apply-btn:active { opacity: 0.85; }
.sp-auto-apply-btn:disabled { opacity: 0.6; cursor: wait; }

/* Detail page: free pick mode banner */
.sp-detail-free-mode-banner {
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border: 1px solid #fed7aa;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 10px 12px;
}
.sp-free-mode-icon { font-size: 28px; flex-shrink: 0; }
.sp-free-mode-text { flex: 1; min-width: 0; }
.sp-free-mode-text strong {
    display: block; font-size: 14px; font-weight: 700; color: var(--sp-primary-dark);
}
.sp-free-mode-text small {
    display: block; font-size: 12px; color: #92400e; margin-top: 2px;
}
.sp-free-mode-cancel {
    flex-shrink: 0;
    padding: 6px 12px;
    background: var(--sp-surface); border: 1px solid #ef4444;
    color: #ef4444; border-radius: 4px;
    font-size: 12px; font-weight: 600;
    text-decoration: none;
}
.sp-bb-pick-free {
    flex: 1;
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
}

/* Free overflow pricing notice */
.sp-detail-free-overflow-notice {
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    padding: 10px 14px;
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 8px;
    font-size: 13px; color: #92400e;
    line-height: 1.4;
}
.sp-free-overflow-icon { font-size: 20px; flex-shrink: 0; }
.sp-free-overflow-text strong { color: var(--sp-primary-dark); }

/* Picker tabs */
.sp-bs-tabs {
    display: flex; gap: 6px;
    padding: 4px 0 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 8px;
}
.sp-bs-tab {
    flex-shrink: 0;
    padding: 7px 14px;
    border: 1px solid var(--sp-border);
    border-radius: 16px;
    background: var(--sp-surface);
    font-size: 12.5px; font-weight: 600;
    color: var(--sp-text-dim); cursor: pointer; font-family: inherit;
    white-space: nowrap;
}
.sp-bs-tab.is-active {
    background: var(--sp-primary); color: #fff; border-color: var(--sp-primary);
}
.sp-bs-tab.is-entitled:not(.is-active) {
    border-color: #16a34a; color: #16a34a;
}
.sp-bs-info.is-cross-family {
    background: #fffbeb; color: #92400e;
}

/* Cart freebox: enhanced "ยังไม่ได้เลือกแถม" row */
.sp-freebox-row .sp-freebox-variant strong {
    color: var(--sp-primary-dark); font-weight: 800;
}
.sp-freebox-done-row {
    background: #f0fdf4;
    border-left: 3px solid #16a34a;
}
.sp-freebox-done-row .sp-freebox-variant {
    color: #15803d; font-weight: 600;
}

/* Detail page: inactive product banner */
.sp-detail-inactive-banner {
    background: linear-gradient(135deg, var(--sp-primary-bg), #ffe4d6);
    border-left: 4px solid var(--sp-primary);
    padding: 12px 14px;
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 8px;
}
.sp-detail-inactive-icon { font-size: 24px; flex-shrink: 0; }
.sp-detail-inactive-text { flex: 1; }
.sp-detail-inactive-text strong {
    display: block; font-size: 14px; font-weight: 700; color: var(--sp-primary-dark);
}
.sp-detail-inactive-text small {
    display: block; font-size: 12px; color: var(--sp-text-dim); margin-top: 2px;
}
.sp-sticky-bottom.is-inactive .sp-bb-add-cart {
    background: #ccc; cursor: not-allowed; flex: 1;
}
.sp-sticky-bottom.is-inactive .sp-bb-add-cart .lbl { color: #fff; }

/* Toast */
.sp-toast {
    position: fixed; bottom: 80px; left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.85);
    color: #fff;
    padding: 10px 18px;
    border-radius: 20px;
    font-size: 13.5px; font-weight: 600;
    z-index: 2000;
    max-width: calc(100% - 32px);
    text-align: center;
}
.sp-toast.is-error { background: #dc2626; }


/* ============================================================
 * Address form (orders_mobile.php) — Shopee-style
 * ============================================================ */
/* ============================================================
 * Address form (orders_mobile.php) — Shopee-style v286.43
 * ============================================================ */
.sp-addr-page {
    max-width: 480px; margin: 0 auto;
    padding: 0 0 96px;
    background: var(--sp-bg);
    min-height: 100vh;
}

/* Progress steps */
.sp-addr-steps {
    display: flex; align-items: center;
    padding: 18px 32px;
    background: var(--sp-surface);
    margin-bottom: 8px;
}
.sp-pstep {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    flex-shrink: 0;
    width: 56px;
}
.sp-pstep-num {
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #e5e5e5; color: var(--sp-text-dim);
    font-size: 13px; font-weight: 700;
}
.sp-pstep.is-active .sp-pstep-num {
    background: var(--sp-primary); color: #fff;
    box-shadow: 0 2px 8px rgba(238,77,45,0.35);
}
.sp-pstep.is-done .sp-pstep-num { background: #16a34a; color: #fff; }
.sp-pstep-lbl { font-size: 11.5px; color: var(--sp-text-dim); }
.sp-pstep.is-active .sp-pstep-lbl { color: var(--sp-primary); font-weight: 700; }
.sp-pstep.is-done .sp-pstep-lbl { color: #16a34a; font-weight: 600; }
.sp-pstep-line {
    flex: 1; height: 2px; background: #e5e5e5;
    margin: -22px 0 0;  /* align with center of step-num */
    border-radius: 1px;
}
.sp-pstep-line.is-done { background: #16a34a; }

/* Form */
/* v286.99c — coupon picker applicability hints */
.sp-cpick-section-head {
    font-size: 13px; font-weight: 700; color: #16a34a;
    padding: 10px 4px 6px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 6px;
}
.sp-cpick-section-head-bad { color: #dc2626; }
.sp-cpick-item.is-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    background: var(--sp-surface-2);
}
.sp-cpick-reason {
    font-size: 11.5px; color: #dc2626;
    margin-top: 4px; font-weight: 500;
}
.sp-cpick-ready {
    font-size: 11.5px; color: #16a34a;
    margin-top: 4px; font-weight: 500;
}
.sp-cpick-empty {
    text-align: center; color: var(--sp-text-dim);
    padding: 30px 12px; font-size: 13.5px;
}
.sp-addr-form { padding: 0 12px; }
/* v286.99c — saved-address prompt card (Shopee-style) */
.sp-addr-saved-card {
    background: var(--sp-surface);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 10px;
    border: 1px solid var(--sp-primary);
    box-shadow: 0 1px 4px rgba(238,77,45,0.08);
}
.sp-addr-saved-head {
    font-size: 13.5px; font-weight: 700; color: var(--sp-primary);
    margin-bottom: 10px;
}
.sp-addr-saved-body { font-size: 13.5px; color: var(--sp-text); line-height: 1.55; margin-bottom: 12px; }
.sp-addr-saved-name { font-weight: 700; }
.sp-addr-saved-tel { color: var(--sp-text-dim); font-size: 12.5px; margin-top: 1px; }
.sp-addr-saved-addr { color: var(--sp-text); font-size: 12.5px; margin-top: 4px; }
.sp-addr-saved-actions { display: flex; gap: 8px; }
.sp-addr-saved-use {
    flex: 1; padding: 10px;
    background: var(--sp-primary); color: #fff;
    border: 0; border-radius: 8px;
    font-size: 13.5px; font-weight: 600;
    font-family: inherit; cursor: pointer;
}
.sp-addr-saved-use:active { background: #d8431f; }
.sp-addr-saved-new {
    flex: 1; padding: 10px;
    background: var(--sp-surface); color: var(--sp-text-dim);
    border: 1px solid var(--sp-border); border-radius: 8px;
    font-size: 13.5px; font-weight: 500;
    font-family: inherit; cursor: pointer;
}
.sp-addr-saved-new:active { background: var(--sp-bg); }
.sp-addr-section {
    background: var(--sp-surface);
    border-radius: 12px;
    padding: 18px 16px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.sp-addr-section-title {
    font-size: 14.5px; font-weight: 700; color: var(--sp-text);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f3f3f3;
    display: flex; align-items: center;
}
.sp-addr-section-title::before {
    content: '';
    display: inline-block;
    width: 4px; height: 16px;
    background: var(--sp-primary);
    border-radius: 2px;
    margin-right: 10px;
}

.sp-addr-field { margin-bottom: 14px; }
.sp-addr-field:last-child { margin-bottom: 0; }
.sp-addr-field label {
    display: block; font-size: 13px; color: var(--sp-text-dim);
    margin-bottom: 6px; font-weight: 500;
    line-height: 1.4;
}
.sp-addr-field label .req { color: #dc2626; margin-left: 2px; }
.sp-addr-field label .req-opt { color: var(--sp-text-dim); font-size: 11.5px; font-weight: 400; margin-left: 4px; }

.sp-addr-field input[type="text"],
.sp-addr-field input[type="tel"],
.sp-addr-field input[type="email"],
.sp-addr-field textarea {
    width: 100%; box-sizing: border-box;
    padding: 12px 14px; font-size: 14.5px;
    border: 1px solid var(--sp-border); border-radius: 8px;
    font-family: inherit; color: var(--sp-text);
    background: var(--sp-surface-2);
    transition: border-color 0.15s, background 0.15s;
}
.sp-addr-field input::placeholder,
.sp-addr-field textarea::placeholder {
    color: #aaa;
}
.sp-addr-field input:focus,
.sp-addr-field textarea:focus {
    outline: none; border-color: var(--sp-primary); background: var(--sp-surface);
}
.sp-addr-field input[readonly] {
    background: #f3f3f3; color: var(--sp-text-dim); cursor: default;
    border-style: dashed;
}
.sp-addr-field textarea {
    resize: vertical; min-height: 70px; line-height: 1.5;
}

/* Picker button — looks like input but tappable */
.sp-addr-picker-btn {
    width: 100%; box-sizing: border-box;
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px;
    border: 1px solid var(--sp-border); border-radius: 8px;
    background: var(--sp-surface-2);
    cursor: pointer;
    font-family: inherit; font-size: 14.5px;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}
.sp-addr-picker-btn:hover:not(:disabled) { border-color: var(--sp-primary); background: var(--sp-surface); }
.sp-addr-picker-btn:active { background: var(--sp-surface-2); }
.sp-addr-picker-btn:disabled {
    opacity: 0.55; cursor: not-allowed;
    background: #f3f3f3;
}
.sp-addr-picker-btn .lbl {
    color: #aaa;
    flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sp-addr-picker-btn .lbl.is-selected {
    color: var(--sp-text); font-weight: 500;
}
.sp-addr-picker-btn .arr {
    color: var(--sp-primary); font-size: 20px; line-height: 1;
    margin-left: 8px; flex-shrink: 0;
    font-weight: 700;
}
.sp-addr-picker-btn:disabled .arr { color: #ccc; }

/* Error */
.sp-addr-error {
    background: #fef2f2; color: #b91c1c;
    padding: 12px 14px;
    border: 1px solid #fecaca; border-radius: 10px;
    margin: 12px 12px 0; font-size: 13.5px;
    font-weight: 500;
    display: flex; align-items: center; gap: 6px;
}

/* Sticky CTA — bottom action button */
.sp-addr-sticky {
    position: fixed; bottom: 0; left: 0; right: 0;
    max-width: 480px; margin: 0 auto;
    padding: 12px 16px 18px;
    background: var(--sp-surface);
    border-top: 1px solid #eee;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
    z-index: 50;
    box-sizing: border-box;
}
.sp-addr-submit {
    width: 100%; padding: 14px 24px;
    background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-dark));
    color: #fff; border: 0; border-radius: 24px;
    font-size: 15.5px; font-weight: 700;
    font-family: inherit; cursor: pointer;
    box-shadow: 0 4px 12px rgba(238,77,45,0.35);
    display: flex; align-items: center; justify-content: center; gap: 6px;
    transition: transform 0.1s, box-shadow 0.15s;
}
.sp-addr-submit:active {
    transform: translateY(1px);
    box-shadow: 0 2px 8px rgba(238,77,45,0.3);
}
.sp-addr-submit:disabled {
    background: #ccc; box-shadow: none; cursor: not-allowed;
}
.sp-addr-submit span { font-size: 18px; line-height: 1; }

/* Bottom sheet picker */
.sp-addr-sheet-backdrop {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0); z-index: 1000;
    transition: background 0.2s;
}
.sp-addr-sheet-backdrop.open { background: rgba(0,0,0,0.5); }
.sp-addr-sheet {
    position: fixed; bottom: 0; left: 0; right: 0;
    max-width: 480px; margin: 0 auto;
    background: var(--sp-surface); border-radius: 16px 16px 0 0;
    transform: translateY(100%);
    transition: transform 0.25s ease-out;
    z-index: 1001;
    height: 75vh;
    display: flex; flex-direction: column;
    box-shadow: 0 -8px 24px rgba(0,0,0,0.18);
}
.sp-addr-sheet.open { transform: translateY(0); }
.sp-addr-sheet-head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--sp-border);
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
}
.sp-addr-sheet-head h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--sp-text); }
.sp-addr-sheet-close {
    width: 32px; height: 32px;
    border: 0; background: var(--sp-bg);
    border-radius: 50%; cursor: pointer;
    font-size: 14px; color: var(--sp-text-dim);
    display: flex; align-items: center; justify-content: center;
}
.sp-addr-sheet-close:active { background: #e8e8e8; }
.sp-addr-sheet-search {
    padding: 10px 16px;
    border-bottom: 1px solid var(--sp-border);
    flex-shrink: 0;
}
.sp-addr-sheet-search input {
    width: 100%; box-sizing: border-box;
    padding: 10px 14px;
    border: 1px solid var(--sp-border); border-radius: 20px;
    font-family: inherit; font-size: 14px;
    background: #f8f8f8;
}
.sp-addr-sheet-search input:focus {
    outline: none; border-color: var(--sp-primary); background: var(--sp-surface);
}
.sp-addr-sheet-list {
    overflow-y: auto;
    flex: 1;
    padding: 4px 0;
    -webkit-overflow-scrolling: touch;
}
.sp-addr-sheet-item {
    display: block; width: 100%;
    padding: 14px 16px;
    background: transparent; border: 0;
    text-align: left; cursor: pointer;
    font-family: inherit; font-size: 14.5px; color: var(--sp-text);
    border-bottom: 1px solid #f5f5f5;
}
.sp-addr-sheet-item:last-child { border-bottom: 0; }
.sp-addr-sheet-item:active { background: var(--sp-primary-bg); }
.sp-addr-sheet-item .t1 { display: block; }
.sp-addr-sheet-loading,
.sp-addr-sheet-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--sp-text-dim); font-size: 14px;
}

/* ============================================================
 * Search overlay (Shopee-style fullscreen search)
 * ============================================================ */
.sp-search-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: var(--sp-surface); z-index: 2000;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.sp-search-overlay[hidden] {
    display: none !important;
}
.sp-search-overlay-bar {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-dark));
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.sp-search-overlay-back {
    width: 36px; height: 36px;
    border: 0; background: transparent; color: #fff;
    cursor: pointer; padding: 0;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sp-search-overlay-form {
    flex: 1; display: flex; align-items: center; gap: 8px;
}
.sp-search-overlay-input-wrap {
    flex: 1; position: relative;
    display: flex; align-items: center;
    background: var(--sp-surface); border-radius: 20px;
    padding: 8px 12px;
    min-width: 0;
}
.sp-search-overlay-input-wrap .sp-search-icon {
    color: var(--sp-text-dim); flex-shrink: 0; margin-right: 6px;
}
.sp-search-overlay-input-wrap input {
    flex: 1; min-width: 0;
    border: 0; outline: none; background: transparent;
    font-size: 14.5px; color: var(--sp-text);
    font-family: inherit;
}
.sp-search-clear {
    border: 0; background: transparent;
    color: var(--sp-text-dim); cursor: pointer; padding: 0 4px;
    font-size: 14px; flex-shrink: 0;
}
.sp-search-overlay-submit {
    border: 0; background: transparent;
    color: #fff; cursor: pointer;
    font-size: 14px; font-weight: 600;
    padding: 0 4px;
    font-family: inherit;
    flex-shrink: 0;
}

.sp-search-overlay-body {
    flex: 1; overflow-y: auto;
    padding: 16px 12px;
}
.sp-search-section { margin-bottom: 24px; }
.sp-search-section-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px;
}
.sp-search-section-head h3 {
    margin: 0; font-size: 14px; font-weight: 700; color: var(--sp-text);
}
.sp-search-clear-all {
    border: 0; background: transparent;
    color: var(--sp-text-dim); font-size: 12px; cursor: pointer;
    font-family: inherit;
}
.sp-search-tags {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.sp-search-tag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 8px 14px;
    background: var(--sp-bg); border-radius: 18px;
    font-size: 13px; color: var(--sp-text);
    text-decoration: none;
}
.sp-search-tag:active { background: #e8e8e8; }

/* Search bar in detail header — reused for products page */
.sp-detail-search-text-display {
    flex: 1; min-width: 0;
    color: var(--sp-text-dim); font-size: 13.5px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ============================================================
 * Products page (search results) — fixed header offset
 * ============================================================ */
/* v286.95: header is sticky now (was fixed), padding-top no longer needed */
body.sp-products-page { padding-top: 0; }

/* ============================================================
 * /products page — header always visible (no scroll trigger needed)
 * ============================================================ */
body.sp-products-page .sp-detail-header {
    transform: translateY(0) !important;
}
body.sp-products-page .sp-detail-header .sp-back-btn,
body.sp-products-page .sp-detail-header .sp-icon-btn {
    background: rgba(255,255,255,0.18);
}
body.sp-products-page .sp-detail-header .sp-detail-search-bar {
    background: var(--sp-surface);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
/* v286.95: removed padding-top — _sp_subpage_header is sticky, takes own space */

/* ============================================================
 * Sign in page (signin_mobile.php) — plain, looks human-made
 * ============================================================ */
.sp-signin {
    max-width: 420px;
    margin: 0 auto;
    padding: 24px 20px 60px;
    background: var(--sp-surface);
    min-height: calc(100vh - 60px);
}
.sp-signin-greet {
    font-size: 18px;
    font-weight: 700;
    color: var(--sp-text);
    margin: 0 0 6px;
}
.sp-signin-text {
    font-size: 14px;
    color: var(--sp-text-dim);
    line-height: 1.6;
    margin: 0 0 24px;
}
.sp-signin-err {
    background: #fff5f5;
    border: 1px solid #fecaca;
    color: #b91c1c;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13.5px;
    margin: 0 0 16px;
}
.sp-signin-line-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 16px;
    background: #06C755;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    box-sizing: border-box;
}
.sp-signin-line-btn:hover { background: #05B048; color: #fff; text-decoration: none; }
.sp-signin-line-btn:active { background: #048038; }
.sp-signin-line-btn .ico {
    display: inline-flex;
    align-items: center;
}
.sp-signin-line-btn .lbl { font-size: 15px; }
.sp-signin-note {
    font-size: 12.5px;
    color: var(--sp-text-dim);
    text-align: center;
    line-height: 1.6;
    margin: 12px 0 24px;
}
.sp-signin-sep {
    border: 0;
    border-top: 1px solid #eee;
    margin: 24px 0 16px;
}
.sp-signin-help {
    font-size: 13px;
    color: var(--sp-text-dim);
    text-align: center;
    line-height: 1.7;
    margin: 0;
}
.sp-signin-help a {
    color: #06C755;
    text-decoration: none;
    font-weight: 600;
}
.sp-signin-help a:hover { text-decoration: underline; }

/* Address: country fixed display (Thailand only) */
.sp-addr-country-fixed {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    background: var(--sp-bg);
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    font-size: 14.5px;
    color: var(--sp-text);
    font-weight: 500;
}

/* VDO ball close — subtle transparent X, sits ABOVE ball without overlapping video.
 * Yut: วงกลม X ไม่ทับ vdo เลย — โปร่งแสง, ไม่ใส่ขอบ, เน้นให้กดดู vdo ไม่ใช่กดปิด
 * Ball: top:50%, transform translateY(-50%), h:124 → ball-top = 50% - 62px
 * Close above ball: top = 50% - 62px - 18px(close-h) - 4px(gap) = 50% - 84px */
.sp-vdo-ball-close-fixed {
    position: fixed;
    /* v286.83: ball is at top:30% (was 20%) — close button matches vertically */
    /* Bug#162 (2026-05-14): anchor to 480px container edge */
    top: calc(30% - 84px);
    right: max(10px, calc(50vw - 240px + 10px));  /* align with ball */
    width: 18px; height: 18px;
    border-radius: 50%;
    background: rgba(0,0,0,0.35);
    color: rgba(255,255,255,0.7);
    border: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 96;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
    pointer-events: auto;
    transition: opacity 0.15s, background 0.15s;
    opacity: 0.6;
}
.sp-vdo-ball-close-fixed svg { width: 10px; height: 10px; pointer-events: none; }
.sp-vdo-ball-close-fixed:hover { opacity: 0.95; background: rgba(0,0,0,0.6); }
.sp-vdo-ball-close-fixed:active { opacity: 1; transform: scale(0.85); }

/* International shipping hint (orders_mobile.php) — small link below country pill */
.sp-addr-intl-hint {
    margin-top: 6px;
    font-size: 12px;
    color: var(--sp-text-dim);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 2px;
}
.sp-addr-intl-link {
    color: #06C755;
    font-weight: 600;
    text-decoration: none;
    font-size: 12.5px;
}
.sp-addr-intl-link:hover { text-decoration: underline; color: #06C755; }
.sp-addr-intl-link:active { opacity: 0.7; }

/* Free pick mode persistent banner — sits below header in DOM, sticks below it */
.sp-fp-banner {
    position: sticky;
    top: 0;  /* If page has its own sticky header (subpage), banner stacks BELOW it via z-index */
    z-index: 89;  /* Below sticky headers (100) — banner appears AFTER scrolling past header */
    max-width: 480px;
    margin: 0 auto;
    background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    animation: sp-fp-pulse 3s ease-in-out infinite;
}
/* On pages WITH a sticky header (subpage_header has min-height: 52px),
   banner sticky-tops at 52px so it stays visible below header */
.sp-subpage-header + .sp-fp-banner,
.sp-detail-header + .sp-fp-banner,
.sp-header + .sp-fp-banner { top: 52px; }
/* DETAIL page only: detail-header is fixed top:0 + slides in on scroll.
   Banner sits in normal flow but when header slides over it, the banner left
   edge gets covered by the < button. Add padding-left so the 🎁 icon doesn't
   sit under the back arrow position when header animates in. */
body.sp-detail-body .sp-fp-banner-inner,
.sp-detail-body .sp-fp-banner-inner,
.sp-detail-mobile .sp-fp-banner-inner { padding-left: 100px; }
@keyframes sp-fp-pulse {
    0%, 100% { box-shadow: 0 2px 6px rgba(249,115,22,0.3); }
    50% { box-shadow: 0 2px 14px rgba(249,115,22,0.55); }
}
.sp-fp-banner-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    min-height: 56px;
    box-sizing: border-box;
}
.sp-fp-icon { font-size: 22px; flex-shrink: 0; }
.sp-fp-text { flex: 1; min-width: 0; line-height: 1.2; padding-right: 4px; }
.sp-fp-title { font-size: 12.5px; font-weight: 700; }
.sp-fp-otid { font-weight: 600; opacity: 0.95; }
.sp-fp-sub { font-size: 11.5px; margin-top: 1px; opacity: 0.95; }
.sp-fp-sub strong { font-weight: 700; }
.sp-fp-multi { font-size: 10.5px; opacity: 0.85; }
.sp-fp-cancel {
    flex-shrink: 0;
    padding: 6px 10px;
    background: rgba(255,255,255,0.25);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0.1);
    white-space: nowrap;
}
.sp-fp-cancel:hover { background: rgba(255,255,255,0.35); color: #fff; text-decoration: none; }
.sp-fp-cancel:active { background: rgba(255,255,255,0.5); }

/* VDO feed: free pick state buttons */
.sp-vfeed-pick-form { display: contents; }
.sp-vfeed-pick-btn {
    background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%) !important;
    color: #fff !important;
    font-weight: 700;
}
.sp-vfeed-disabled {
    background: rgba(255,255,255,0.15) !important;
    color: rgba(255,255,255,0.5) !important;
    cursor: not-allowed;
    border: 1px dashed rgba(255,255,255,0.25);
}

/* FP banner flash messages */
.sp-fp-flash {
    max-width: 480px;
    margin: 0 auto;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    position: sticky;
    top: 52px;
    z-index: 91;
    animation: sp-fp-flash-in 0.3s ease;
}
.sp-fp-flash-error {
    background: #fee2e2;
    color: #991b1b;
    border-left: 4px solid #ef4444;
}
.sp-fp-flash-success {
    background: #dcfce7;
    color: #166534;
    border-left: 4px solid #16a34a;
}
@keyframes sp-fp-flash-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ============================================================
 * Search autocomplete UI (v286.66 redesign)
 * ============================================================ */
/* v286.84: recently-viewed cards (horizontal scroll) */
.sp-search-recent-viewed {
    display: flex; flex-direction: row;
    gap: 10px; padding: 4px 0 8px;
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.sp-search-recent-viewed::-webkit-scrollbar { display: none; }
.sp-search-recent-card {
    flex: 0 0 80px; width: 80px;
    text-decoration: none; color: inherit;
    display: flex; flex-direction: column; gap: 4px;
}
.sp-search-recent-thumb {
    width: 80px; height: 110px;
    background: var(--sp-surface-2); border-radius: 6px;
    overflow: hidden;
}
.sp-search-recent-thumb img {
    width: 100%; height: 100%; object-fit: cover;
    display: block;
}
.sp-search-recent-name {
    font-size: 11.5px; line-height: 1.25;
    color: var(--sp-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sp-search-tag-trending { background: var(--sp-primary-bg); color: var(--sp-primary); }

/* v286.84: spinner shrunk + moved into input bar (was huge full-row block when keyboard open) */
.sp-search-loading {
    position: absolute;
    top: 8px;
    right: 38px;
    z-index: 5;
    padding: 0;
    pointer-events: none;
}
.sp-search-spinner {
    width: 16px; height: 16px;
    border: 2px solid #f0f0f0;
    border-top-color: var(--sp-primary);
    border-radius: 50%;
    animation: sp-search-spin 0.8s linear infinite;
}
@keyframes sp-search-spin {
    to { transform: rotate(360deg); }
}

.sp-search-results {
    display: flex;
    flex-direction: column;
    background: var(--sp-surface);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* Generic suggestion row (product / title) */
.sp-sug-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.1s;
}
.sp-sug-item:last-child { border-bottom: 0; }
.sp-sug-item:active { background: var(--sp-primary-bg); }
.sp-sug-thumb {
    width: 44px; height: 60px;
    background: var(--sp-surface-2);
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}
.sp-sug-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.sp-sug-info { flex: 1; min-width: 0; line-height: 1.3; }
.sp-sug-name {
    font-size: 13.5px;
    color: var(--sp-text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.sp-sug-meta {
    font-size: 11.5px;
    color: var(--sp-text-dim);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.sp-sug-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    background: var(--sp-primary-bg);
    color: var(--sp-primary);
    border-radius: 3px;
    line-height: 1.4;
}
.sp-sug-hl {
    background: #fff3cd;
    color: var(--sp-primary);
    font-weight: 700;
    padding: 0 1px;
    border-radius: 2px;
}

/* People (avatar) */
.sp-search-results-people {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.sp-sug-person-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #f5f5f5;
    background: var(--sp-surface);
}
.sp-sug-person-item:last-child { border-bottom: 0; }
.sp-sug-person-item:active { background: var(--sp-primary-bg); }
.sp-sug-person-thumb {
    width: 42px; height: 42px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--sp-surface-2);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sp-sug-person-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.sp-sug-person-avatar {
    font-size: 22px;
    color: var(--sp-text-dim);
}
.sp-sug-person-info { flex: 1; min-width: 0; line-height: 1.3; }

/* "Search all" link footer */
.sp-search-all-link {
    text-align: center;
    padding: 14px 12px;
    margin-top: 6px;
}
.sp-search-all-link a {
    color: var(--sp-primary);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
}
.sp-search-all-link a:active { opacity: 0.7; }

/* Empty state */
.sp-search-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--sp-text-dim);
}
.sp-search-empty-icon { font-size: 40px; margin-bottom: 10px; }
.sp-search-empty-text { font-size: 14px; color: var(--sp-text-dim); font-weight: 600; }
.sp-search-empty-sub { font-size: 12.5px; color: var(--sp-text-dim); margin-top: 4px; }

/* Section spacing */
.sp-search-section + .sp-search-section { margin-top: 14px; }

/* ============================================================
 * Rotating placeholder strip in search input (v286.67)
 * Sits absolutely over the input — vertically scrolls cycling
 * through user's recent searches (or trending if no history).
 * Hides when user types.
 * ============================================================ */
.sp-search-overlay-input-wrap {
    position: relative;
}
.sp-search-rotate {
    position: absolute;
    left: 38px;
    right: 30px;
    top: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
    display: none;
    align-items: center;
}
.sp-search-rotate[data-active="1"] {
    display: flex;
}
.sp-search-rotate::before {
    /* "ค้นหา" prefix label that stays visible */
    content: 'ค้นหา ';
    color: var(--sp-text-dim);
    font-size: 14px;
    flex-shrink: 0;
    margin-right: 4px;
    align-self: center;
}
.sp-search-rotate-list {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 34px;
    overflow: hidden;
    flex: 1;
    will-change: transform;
}
.sp-search-rotate-item {
    height: 34px;
    line-height: 34px;
    color: var(--sp-text-dim);
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* When rotate is active, hide native placeholder */
.sp-search-overlay-input-wrap input::placeholder {
    color: var(--sp-text-dim);
    transition: opacity 0.2s;
}
.sp-search-overlay-input-wrap:has(.sp-search-rotate[data-active="1"]) input::placeholder {
    opacity: 0;
}

/* ============================================================
 * Multi-video poster overlays (v286.67)
 * Extra trailers/teasers as small play buttons over hero
 * ============================================================ */
.sp-hero-extra-videos {
    position: absolute;
    left: 8px;
    bottom: 8px;
    display: flex;
    gap: 6px;
    z-index: 5;
    flex-wrap: wrap;
    max-width: calc(100% - 80px);
}
.sp-hero-extra-vdo-btn {
    position: relative;
    width: 60px;
    height: 40px;
    border: 2px solid rgba(255,255,255,0.85);
    border-radius: 6px;
    overflow: hidden;
    background: #000;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 6px rgba(0,0,0,0.4);
    transition: transform 0.12s;
}
.sp-hero-extra-vdo-btn:active { transform: scale(0.94); }
.sp-hero-extra-vdo-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0.85;
}
.sp-hero-extra-vdo-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.25);
}

/* YouTube modal for extra videos */
.sp-vdo-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.sp-vdo-modal[hidden] { display: none; }
.sp-vdo-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    color: #fff;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}
.sp-vdo-modal-close:active { background: rgba(255,255,255,0.3); }
.sp-vdo-modal-frame {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 9 / 16;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}
.sp-vdo-modal-frame iframe {
    width: 100%;
    height: 100%;
    display: block;
}

/* ============================================================
 * Customer reviews (v286.68)
 * ============================================================ */
.sp-cust-reviews-section .sp-detail-section-h {
    display: flex; align-items: center; justify-content: space-between;
}
.sp-cust-review-cta {
    background: var(--sp-primary); color: #fff;
    border: 0; border-radius: 16px;
    padding: 6px 14px; font-size: 12.5px; font-weight: 600;
    cursor: pointer; font-family: inherit;
}
.sp-cust-reviews-summary {
    background: var(--sp-primary-bg); border-radius: 8px;
    padding: 14px; margin: 8px 0;
}
.sp-cust-reviews-empty {
    text-align: center; color: var(--sp-text-dim); padding: 20px;
}
.sp-cust-reviews-avg {
    display: flex; align-items: center; gap: 12px;
}
.sp-cust-reviews-num { font-size: 26px; font-weight: 700; color: var(--sp-primary); }
.sp-cust-reviews-stars { color: #f59e0b; font-size: 16px; }
.sp-cust-reviews-count { color: var(--sp-text-dim); font-size: 13px; margin-left: auto; }
.sp-cust-reviews-loading { text-align: center; color: var(--sp-text-dim); padding: 20px; }

.sp-cr-row {
    background: var(--sp-surface); border-radius: 8px;
    padding: 12px; margin-bottom: 8px;
    border: 1px solid #f0f0f0;
}
.sp-cr-row-h {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px; flex-wrap: wrap;
}
.sp-cr-row-name { font-weight: 600; font-size: 13.5px; color: var(--sp-text); }
.sp-cr-verified {
    background: #dcfce7; color: #166534;
    padding: 1px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 600;
}
.sp-cr-row-stars { color: #f59e0b; font-size: 14px; margin-left: auto; }
.sp-cr-row-text { color: var(--sp-text); font-size: 14px; line-height: 1.5; margin: 4px 0 6px; }
.sp-cr-row-photos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.sp-cr-row-photos img {
    width: 72px; height: 72px; object-fit: cover; border-radius: 4px;
    border: 1px solid var(--sp-border);
}
.sp-cr-row-actions {
    display: flex; gap: 8px; margin-top: 8px;
    padding-top: 8px; border-top: 1px solid #f5f5f5;
}
.sp-cr-helpful-btn, .sp-cr-report-btn {
    background: transparent; border: 1px solid var(--sp-border);
    border-radius: 14px; padding: 4px 12px;
    font-size: 12px; cursor: pointer; color: var(--sp-text-dim);
    font-family: inherit;
}
.sp-cr-helpful-btn:active { background: var(--sp-bg); }
.sp-cr-report-btn { color: var(--sp-text-dim); }

.sp-cust-reviews-more {
    width: 100%; padding: 10px;
    border: 1px solid var(--sp-border); background: var(--sp-surface);
    border-radius: 8px; cursor: pointer;
    font-size: 13.5px; color: var(--sp-text-dim); font-family: inherit;
}

/* Write review modal */
.sp-cr-modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    display: flex; align-items: flex-end;
    justify-content: center;
}
.sp-cr-modal[hidden] { display: none; }
.sp-cr-modal-card {
    background: var(--sp-surface);
    width: 100%; max-width: 480px;
    border-radius: 14px 14px 0 0;
    padding: 18px 16px 24px;
    max-height: 90vh; overflow-y: auto;
}
.sp-cr-modal-h {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
}
.sp-cr-modal-h h3 { margin: 0; font-size: 17px; }
.sp-cr-modal-close {
    width: 30px; height: 30px;
    background: var(--sp-bg); border: 0; border-radius: 50%;
    cursor: pointer; font-size: 16px;
}
.sp-cr-stars {
    display: flex; gap: 4px;
    font-size: 32px; color: #ddd;
    margin-bottom: 12px;
    user-select: none;
}
.sp-cr-star { cursor: pointer; transition: color 0.1s; }
.sp-cr-star.active { color: #f59e0b; }
.sp-cr-modal textarea {
    width: 100%; padding: 10px;
    border: 1px solid var(--sp-border); border-radius: 8px;
    font-size: 14px; font-family: inherit;
    box-sizing: border-box;
    resize: vertical; min-height: 100px;
}
.sp-cr-photos {
    margin: 12px 0;
}
.sp-cr-photo-add {
    display: inline-block;
    padding: 8px 14px;
    background: var(--sp-bg);
    border-radius: 6px; cursor: pointer;
    font-size: 13px; color: var(--sp-text-dim);
}
.sp-cr-photo-preview {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-top: 8px;
}
.sp-cr-photo-preview img {
    width: 60px; height: 60px;
    object-fit: cover; border-radius: 4px;
    border: 1px solid var(--sp-border);
}
.sp-cr-msg {
    font-size: 13px; padding: 8px 0; min-height: 18px;
}
.sp-cr-msg.ok { color: #16a34a; }
.sp-cr-msg.err { color: #dc2626; }
.sp-cr-submit {
    width: 100%; padding: 12px;
    background: var(--sp-primary); color: #fff;
    border: 0; border-radius: 8px;
    font-size: 15px; font-weight: 600;
    cursor: pointer; font-family: inherit;
}
.sp-cr-submit:active { opacity: 0.85; }

/* Customer review note (when not eligible) */
.sp-cust-review-note {
    font-size: 12px; color: var(--sp-text-dim); font-style: italic;
}

/* Inline FP duplicate alert — appears next to "เลือกแถม" button */
.sp-fp-inline-alert {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 8px;
    right: 8px;
    background: #fee2e2;
    color: #991b1b;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 100;
    animation: sp-fp-alert-in 0.25s ease;
}
.sp-fp-inline-alert::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #fee2e2;
    border-bottom: 0;
}
.sp-fp-inline-alert-duplicate { background: #fef3c7; color: #92400e; }
.sp-fp-inline-alert-duplicate::after { border-top-color: #fef3c7; }
@keyframes sp-fp-alert-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Search results page header — clickable search bar to reopen overlay */
.sp-search-results-bar {
    background: var(--sp-surface);
    padding: 8px 12px;
    border-bottom: 1px solid var(--sp-border);
}
.sp-search-results-bar .sp-detail-search-bar {
    background: var(--sp-bg);
    border-radius: 18px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ============================================================
 * Rotating promo pills under price (v286.72)
 * Slides every 3s to nudge customer toward "ใกล้ส่งฟรี / มีคูปอง / ฟรี 3 แถม 1"
 * ============================================================ */
.sp-promo-pills {
    margin: 8px 12px 0;
    height: 32px;
    overflow: hidden;
    position: relative;
}
.sp-promo-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 14px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    background: var(--sp-primary-bg);
    color: #c2410c;
    border: 1px solid #fed7aa;
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease, transform 0.4s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-promo-pill.active {
    opacity: 1;
    transform: translateY(0);
}
.sp-promo-pill-ico {
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1;
}
.sp-promo-pill-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Variant colors */
.sp-promo-pill.pill-shipping { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.sp-promo-pill.pill-fp { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.sp-promo-pill.pill-coupon { background: #fef3c7; color: #92400e; border-color: #fde68a; }
.sp-promo-pill.pill-bundle { background: #f0f9ff; color: #1e40af; border-color: #bfdbfe; }
.sp-promo-pill.pill-hot { background: #fef2f2; color: #b91c1c; border-color: #fecaca; }

/* TMDB reviews "ดูทั้งหมด" button (v286.72) */
.sp-tmdb-reviews-more {
    width: 100%;
    margin-top: 8px;
    padding: 10px;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border);
    border-radius: 8px;
    color: var(--sp-text-dim);
    font-size: 13.5px;
    font-family: inherit;
    cursor: pointer;
}
.sp-tmdb-reviews-more:active { background: var(--sp-bg); }

/* ============================================================
 * Coupon collect section on detail page (v286.72)
 * Shopee-style horizontal coupon cards with "เก็บโค้ด" button
 * ============================================================ */
.sp-coupon-section .sp-detail-section-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sp-coupon-section-sub {
    font-size: 12px;
    color: var(--sp-text-dim);
    font-weight: 400;
}
.sp-coupon-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0 8px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}
.sp-coupon-row::-webkit-scrollbar { display: none; }
.sp-coupon-card {
    flex: 0 0 270px;
    background: linear-gradient(135deg, var(--sp-primary-bg) 0%, #ffe8de 100%);
    border-radius: 8px;
    padding: 0;
    display: flex;
    align-items: stretch;
    border: 1px solid #fed7aa;
    overflow: hidden;
    scroll-snap-align: start;
    position: relative;
}
/* Decorative perforated divider */
.sp-coupon-card::before {
    content: '';
    position: absolute;
    left: 175px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    border-left: 2px dashed rgba(238,77,45,0.3);
}
.sp-coupon-card-left {
    flex: 1;
    padding: 12px 14px;
    min-width: 0;
}
.sp-coupon-disc {
    font-size: 16px;
    font-weight: 700;
    color: var(--sp-primary);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-coupon-cond {
    font-size: 12px;
    color: var(--sp-text-dim);
    margin-top: 3px;
    line-height: 1.3;
}
.sp-coupon-meta {
    font-size: 11px;
    color: var(--sp-text-dim);
    margin-top: 6px;
}
.sp-coupon-meta.urgent {
    color: #dc2626;
    font-weight: 600;
}
.sp-coupon-card-right {
    flex-shrink: 0;
    width: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
}
.sp-coupon-collect-btn {
    background: var(--sp-primary);
    color: #fff;
    border: 0;
    border-radius: 16px;
    padding: 6px 12px;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.15s;
    white-space: nowrap;
}
.sp-coupon-collect-btn:active { background: #c93b1f; }
.sp-coupon-collect-btn.is-collected {
    background: #16a34a;
}

/* ============================================================
 * Other product reviews recommendation (v286.72)
 * Horizontal scrollable cards
 * ============================================================ */
.sp-other-reviews-row {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 4px 0 8px;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}
.sp-other-reviews-row::-webkit-scrollbar { display: none; }
.sp-other-review-card {
    flex: 0 0 240px;
    background: var(--sp-surface);
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    padding: 10px;
    text-decoration: none;
    color: var(--sp-text);
    scroll-snap-align: start;
    display: block;
}
.sp-other-review-card:active { background: var(--sp-surface-2); }
.sp-other-review-photo {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 8px;
    background: var(--sp-bg);
}
.sp-other-review-prod {
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sp-other-review-stars {
    color: #f59e0b;
    font-size: 13px;
    margin: 2px 0;
}
.sp-other-review-text {
    font-size: 12.5px;
    color: var(--sp-text-dim);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
}
.sp-other-review-name {
    font-size: 11px;
    color: var(--sp-text-dim);
}

/* ============================================================
 * 3 trust rows under title (Shopee-style) (v286.73)
 * ============================================================ */
.sp-trust-rows {
    background: var(--sp-surface);
    margin: 0 0 8px;
    border-top: 1px solid #f5f5f5;
}
.sp-trust-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid #f5f5f5;
    text-decoration: none;
    color: var(--sp-text);
    font-size: 13.5px;
    line-height: 1.5;
}
.sp-trust-row:last-child { border-bottom: 0; }
.sp-trust-row.is-highlight {
    background: linear-gradient(90deg, var(--sp-primary-bg) 0%, #ffe8de 100%);
    color: #c2410c;
    font-weight: 600;
}
.sp-trust-row-ico {
    flex-shrink: 0;
    width: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.sp-trust-row-text {
    flex: 1;
    min-width: 0;
}
.sp-trust-row-sub {
    display: block;
    font-size: 12px;
    color: var(--sp-text-dim);
    margin-top: 2px;
    font-weight: 400;
}
.sp-trust-row.is-highlight .sp-trust-row-sub { color: #c2410c; }
.sp-trust-row-arrow {
    flex-shrink: 0;
    color: var(--sp-text-dim);
    font-size: 18px;
    line-height: 1;
    align-self: center;
}
.sp-trust-row.is-highlight .sp-trust-row-arrow { color: #c2410c; }
/* v286.99c — shipping + warranty 2-col side-by-side (Yut: ประหยัดพื้นที่) */
.sp-trust-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #f5f5f5;
}
.sp-trust-cell {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 10px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--sp-text);
    min-width: 0;
}
.sp-trust-cell + .sp-trust-cell { border-left: 1px solid #f5f5f5; }
.sp-trust-cell .sp-trust-row-ico { flex-shrink: 0; width: 18px; margin-top: 1px; }
.sp-trust-cell .sp-trust-row-text { flex: 1; min-width: 0; }
.sp-trust-cell .sp-trust-row-sub { font-size: 12px; line-height: 1.4; }

/* ============================================================
 * Discount tier pills under price (Shopee-style) (v286.73)
 * Small inline outlined pills — orange border + text
 * ============================================================ */
.sp-tier-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 12px 0;
}
.sp-tier-pill {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 0 8px;
    border: 1px solid var(--sp-primary);
    color: var(--sp-primary);
    background: var(--sp-surface);
    border-radius: 3px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

/* ============================================================
 * Coupon list — vertical row style (Shopee detail page) (v286.73)
 * Replaces horizontal carousel from v286.72
 * ============================================================ */
.sp-coupon-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}
.sp-coupon-list-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--sp-surface);
    border: 1px solid #fee2e2;
    border-radius: 6px;
    overflow: hidden;
    padding: 0;
}
.sp-coupon-list-item[hidden] { display: none !important; }
.sp-coupon-list-icon {
    flex-shrink: 0;
    width: 56px;
    align-self: stretch;
    background: linear-gradient(135deg, var(--sp-primary) 0%, #dc2626 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
/* Perforated edge effect */
.sp-coupon-list-icon::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-image: radial-gradient(circle, #fee2e2 1px, transparent 1px);
    background-size: 2px 6px;
    background-repeat: repeat-y;
}
.sp-coupon-list-body {
    flex: 1;
    padding: 8px 10px 8px 4px;
    min-width: 0;
}
.sp-coupon-list-disc {
    font-size: 14px;
    font-weight: 700;
    color: var(--sp-primary);
    line-height: 1.3;
}
.sp-coupon-list-cond {
    font-size: 11.5px;
    color: var(--sp-text-dim);
    line-height: 1.4;
    margin-top: 1px;
}
.sp-coupon-list-exp {
    font-size: 11px;
    color: var(--sp-text-dim);
    margin-top: 3px;
}
.sp-coupon-list-exp.urgent {
    color: #dc2626;
    font-weight: 600;
}
.sp-coupon-list-btn {
    flex-shrink: 0;
    margin-right: 10px;
    padding: 6px 14px;
    border: 1px solid var(--sp-primary);
    background: var(--sp-surface);
    color: var(--sp-primary);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    min-width: 50px;
}
.sp-coupon-list-btn:active { background: var(--sp-primary-bg); }
.sp-coupon-list-btn.is-collected {
    background: #16a34a;
    color: #fff;
    border-color: #16a34a;
}

/* ============================================================
 * Sticky bottom v2 — Shopee uniform CTA (v286.73)
 * Layout: [chat icon] [cart icon] [WIDE ORANGE CTA "ซื้อโดยใช้โค้ด ฿XXX"]
 * Total height 56px on mobile, 60px on tablet
 * ============================================================ */
.sp-sticky-v2 {
    display: flex;
    align-items: stretch;
    background: var(--sp-surface);
    border-top: 1px solid #f0f0f0;
    padding: 0;
    height: 56px;
    box-sizing: border-box;
}
.sp-sticky-v2 .sp-bb-side-icon {
    flex: 0 0 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: var(--sp-primary);
    font-size: 10.5px;
    background: var(--sp-surface);
    border: 0;
    border-right: 1px solid #f5f5f5;
    cursor: pointer;
    font-family: inherit;
    padding: 4px 0;
}
.sp-sticky-v2 .sp-bb-side-icon:active { background: var(--sp-primary-bg); }
.sp-sticky-v2 .sp-bb-side-icon .lbl {
    font-size: 10.5px;
    color: var(--sp-text-dim);
}
.sp-sticky-v2 .sp-bb-cta {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, var(--sp-primary-light) 0%, var(--sp-primary) 100%);
    color: #fff;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.2;
    padding: 6px;
}
.sp-sticky-v2 .sp-bb-cta:active { filter: brightness(0.92); }
.sp-sticky-v2 .sp-bb-cta-line1 {
    font-size: 12.5px;
    font-weight: 500;
    opacity: 0.95;
}
.sp-sticky-v2 .sp-bb-cta-line2 {
    font-size: 17px;
    font-weight: 700;
    margin-top: 1px;
}
.sp-sticky-v2 .sp-bb-cta-disabled {
    background: #ccc !important;
    cursor: not-allowed;
}
.sp-sticky-v2 .sp-bb-cta-disabled .lbl {
    font-size: 14px;
    font-weight: 600;
}

/* ============================================================
 * Header v2 — Shopee-style (v286.73)
 * - Removed home/menu/share buttons from home header
 * - Removed menu from detail header (search → share → cart)
 * - Larger search bar takes most width
 * ============================================================ */
.sp-home-header-v2 {
    gap: 8px;
    padding: 8px 10px;
}
.sp-home-header-v2 .sp-detail-search-bar {
    flex: 1;
    min-width: 0;
}
.sp-home-header-v2 .sp-icon-btn {
    flex-shrink: 0;
    color: #fff;
}
.sp-home-header-v2 .sp-line-chat-btn { color: #fff; }

.sp-detail-header-v2 {
    gap: 6px;
    padding: 8px 8px;
}
.sp-detail-header-v2 .sp-back-btn {
    flex-shrink: 0;
}
.sp-detail-header-v2 .sp-detail-search-bar {
    flex: 1;
    min-width: 0;
}
.sp-detail-header-v2 .sp-icon-btn {
    flex-shrink: 0;
}

/* ============================================================
 * My-coupons page (v286.74)
 * Yut: คูปองส่วนลดของฉัน — ระบบเก็บคูปอง + tabs + modal ใส่โค้ด
 * ============================================================ */
.sp-mycoupons-page {
    background: var(--sp-bg);
    min-height: 100vh;
    padding-bottom: 40px;
}

/* Top action row: ใส่โค้ดส่วนลด | เก็บโค้ดเพิ่ม */
.sp-mycoupons-actions {
    display: flex;
    background: var(--sp-surface);
    border-bottom: 1px solid var(--sp-border);
}
.sp-mycoupons-action-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 8px;
    background: var(--sp-surface);
    border: 0;
    color: var(--sp-primary);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
}
.sp-mycoupons-action-btn:active { background: var(--sp-primary-bg); }
.sp-mycoupons-action-divider {
    width: 1px;
    background: var(--sp-surface-2);
    flex-shrink: 0;
}

/* Tabs */
.sp-mycoupons-tabs {
    display: flex;
    background: var(--sp-surface);
    border-bottom: 1px solid var(--sp-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.sp-mycoupons-tabs::-webkit-scrollbar { display: none; }
.sp-mycoupons-tab {
    flex: 1;
    min-width: 90px;
    padding: 10px 12px;
    background: var(--sp-surface);
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--sp-text-dim);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.sp-mycoupons-tab.active {
    color: var(--sp-primary);
    border-bottom-color: var(--sp-primary);
    font-weight: 600;
}

/* Empty state */
.sp-mycoupons-empty {
    text-align: center;
    padding: 40px 20px;
    background: var(--sp-surface);
    margin: 8px;
    border-radius: 8px;
}
.sp-mycoupons-empty-ico { font-size: 56px; line-height: 1; }
.sp-mycoupons-empty-title { font-size: 16px; color: var(--sp-text-dim); margin-top: 12px; font-weight: 600; }
.sp-mycoupons-empty-sub { font-size: 13px; color: var(--sp-text-dim); margin-top: 4px; }
.sp-mycoupons-empty-btn {
    display: inline-block;
    margin-top: 18px;
    padding: 10px 24px;
    background: var(--sp-primary);
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

/* Coupon list */
.sp-mycoupons-list {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sp-mycoupon-card {
    display: flex;
    align-items: stretch;
    background: var(--sp-surface);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #f5f5f5;
}
.sp-mycoupon-card.status-used,
.sp-mycoupon-card.status-expired {
    opacity: 0.6;
}
.sp-mycoupon-icon {
    flex-shrink: 0;
    width: 80px;
    background: linear-gradient(135deg, var(--sp-primary) 0%, #dc2626 100%);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
}
.sp-mycoupon-icon::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background-image: radial-gradient(circle, #f5f5f5 1px, transparent 1px);
    background-size: 2px 6px;
    background-repeat: repeat-y;
}
.sp-mycoupon-card.status-used .sp-mycoupon-icon,
.sp-mycoupon-card.status-expired .sp-mycoupon-icon {
    background: linear-gradient(135deg, #888 0%, #555 100%);
}
.sp-mycoupon-icon-label {
    font-size: 10px;
    text-align: center;
    line-height: 1.2;
    padding: 0 4px;
}
.sp-mycoupon-body {
    flex: 1;
    padding: 10px 12px;
    min-width: 0;
}
.sp-mycoupon-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--sp-primary);
    line-height: 1.3;
}
.sp-mycoupon-card.status-used .sp-mycoupon-title,
.sp-mycoupon-card.status-expired .sp-mycoupon-title { color: var(--sp-text-dim); }
.sp-mycoupon-cond { font-size: 12px; color: var(--sp-text-dim); margin-top: 2px; line-height: 1.4; }
.sp-mycoupon-code {
    font-size: 11.5px;
    color: var(--sp-text-dim);
    margin-top: 4px;
    font-family: 'Courier New', monospace;
}
.sp-mycoupon-code strong { color: var(--sp-primary); font-weight: 600; }
.sp-mycoupon-exp { font-size: 11px; color: var(--sp-text-dim); margin-top: 4px; }
.sp-mycoupon-use-btn {
    flex-shrink: 0;
    align-self: center;
    margin-right: 10px;
    padding: 6px 14px;
    border: 1px solid var(--sp-primary);
    background: var(--sp-surface);
    color: var(--sp-primary);
    border-radius: 4px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.sp-mycoupon-use-btn:active { background: var(--sp-primary-bg); }
.sp-mycoupon-status-tag {
    flex-shrink: 0;
    align-self: center;
    margin-right: 12px;
    padding: 4px 10px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
}
.sp-mycoupon-status-tag.used { background: #e0e0e0; color: var(--sp-text-dim); }
.sp-mycoupon-status-tag.expired { background: #fee2e2; color: #991b1b; }

/* Generic modal (re-used by ใส่โค้ด) */
.sp-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.sp-modal-overlay[hidden] { display: none !important; }
.sp-modal-card {
    background: var(--sp-surface);
    border-radius: 12px;
    width: 100%;
    max-width: 380px;
    overflow: hidden;
}
.sp-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--sp-border);
}
.sp-modal-head .title { font-size: 16px; font-weight: 700; color: var(--sp-text); }
.sp-modal-close {
    background: transparent;
    border: 0;
    font-size: 24px;
    color: var(--sp-text-dim);
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.sp-modal-body {
    padding: 16px;
}
.sp-modal-input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--sp-border);
    border-radius: 6px;
    font-size: 16px;
    font-family: inherit;
    box-sizing: border-box;
    text-transform: uppercase;
}
.sp-modal-input:focus { border-color: var(--sp-primary); outline: 0; }
.sp-modal-error {
    margin-top: 10px;
    padding: 8px 12px;
    background: #fee2e2;
    color: #991b1b;
    border-radius: 6px;
    font-size: 13px;
}
.sp-modal-btn-primary {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    background: var(--sp-primary);
    color: #fff;
    border: 0;
    border-radius: 6px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.sp-modal-btn-primary:active { background: #c93b1f; }
.sp-modal-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

/* ============================================================
 * Customer review summary header — Shopee style (v286.75)
 * Yut: 4.9 ⭐ คะแนนสินค้า (363)   ดูทั้งหมด ›
 * ============================================================ */
.sp-cr-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f5;
}
.sp-cr-summary-left {
    display: flex;
    align-items: baseline;
    gap: 6px;
}
.sp-cr-summary-num {
    font-size: 22px;
    font-weight: 700;
    color: var(--sp-primary);
    line-height: 1;
}
.sp-cr-summary-star {
    font-size: 18px;
    color: #f59e0b;
    line-height: 1;
}
.sp-cr-summary-label {
    font-size: 14px;
    color: var(--sp-text-dim);
    font-weight: 500;
    margin-left: 4px;
}
.sp-cr-summary-count {
    font-size: 13px;
    color: var(--sp-text-dim);
}
.sp-cr-summary-all {
    color: var(--sp-primary);
    font-size: 13px;
    text-decoration: none;
    font-weight: 500;
}

/* ============================================================
 * Cart "สรุปสิ่งที่จะเอา" — explicit confirmation list (v286.75)
 * Shown above price totals, lists items with qty + format + free tag
 * ============================================================ */
.sp-sum-confirm-h {
    font-size: 14px;
    font-weight: 700;
    color: var(--sp-text);
    padding: 4px 0 8px;
    border-bottom: 1px solid var(--sp-border);
    margin-bottom: 8px;
}
.sp-sum-confirm-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
}
.sp-sum-confirm-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 12.5px;
    color: var(--sp-text);
    border-bottom: 1px dashed #f5f5f5;
}
.sp-sum-confirm-item:last-child { border-bottom: 0; }
.sp-sum-confirm-qty {
    flex-shrink: 0;
    color: var(--sp-primary);
    font-weight: 700;
    min-width: 28px;
}
.sp-sum-confirm-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--sp-text);
}
.sp-sum-confirm-fmt {
    flex-shrink: 0;
    font-size: 11px;
    color: var(--sp-text-dim);
    background: var(--sp-bg);
    padding: 1px 6px;
    border-radius: 3px;
}
.sp-sum-free-tag {
    background: #ecfdf5;
    color: #059669;
    font-weight: 600;
}
.sp-sum-confirm-item.is-free .sp-sum-confirm-name { color: #059669; }

/* Search suggestion hints (year, award) (v286.77) */
.sp-sug-hint {
    display: block;
    padding: 12px 16px;
    background: linear-gradient(90deg, var(--sp-primary-bg) 0%, #ffe8de 100%);
    color: #c2410c;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border-radius: 6px;
    margin: 4px 0;
    border: 1px solid #fed7aa;
}
.sp-sug-hint:active { background: #ffe8de; }

/* Search results — "matched dimensions" tags (v286.77) */
.sp-search-matched-dims {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    align-items: center;
}
.sp-search-matched-dims .lbl {
    font-size: 12px;
    color: rgba(255,255,255,0.85);
    margin-right: 4px;
}
.sp-search-dim-tag {
    background: rgba(255,255,255,0.2);
    color: #fff;
    font-size: 11.5px;
    padding: 3px 8px;
    border-radius: 11px;
    border: 1px solid rgba(255,255,255,0.3);
}

/* Coupon best badge + more toggle (v286.78) */
.sp-coupon-list-item.is-best {
    border: 2px solid var(--sp-primary);
    background: linear-gradient(180deg, #fff 0%, var(--sp-primary-bg) 100%);
    position: relative;
    padding-top: 18px;
}
.sp-coupon-best-badge {
    position: absolute;
    top: -1px;
    left: 8px;
    background: var(--sp-primary);
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 0 0 6px 6px;
    z-index: 2;
}
.sp-coupon-more-toggle {
    width: 100%;
    margin-top: 6px;
    padding: 8px;
    background: transparent;
    border: 0;
    color: var(--sp-primary);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
}
.sp-coupon-more-toggle:active { color: #c2410c; }

/* My-orders review CTA (v286.78) */
.sp-order-review-hint {
    margin-top: 8px;
    padding: 6px 10px;
    background: #ecfdf5;
    color: #059669;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
}
.sp-myorders-review-btn {
    display: inline-block;
    padding: 6px 12px;
    background: var(--sp-primary);
    color: #fff;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    margin-left: 8px;
}
.sp-myorders-review-btn:active { background: #c2410c; }

/* Feed header v2 — Shopee category pill (v286.78) */
.sp-vfeed-header-v2 {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 8px;
}
.sp-vfeed-shop-pill {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 18px;
    padding: 5px 10px;
    color: #fff;
    min-width: 0;
    text-decoration: none;
}
.sp-vfeed-shop-name {
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.sp-vfeed-shop-arrow {
    font-size: 16px;
    line-height: 1;
    opacity: 0.9;
}

/* Feed add-to-cart button with + icon (v286.78) */
.sp-vfeed-add-cart-icon {
    position: relative;
    display: inline-block;
    width: 22px;
    height: 22px;
}
.sp-vfeed-add-plus {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -10%);
    color: var(--sp-primary);
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
}

/* Feed info — stats row (sold + heart) (v286.78) */
.sp-vfeed-price-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}
.sp-vfeed-price-row .sp-vfeed-price {
    flex-shrink: 0;
    margin-top: 0;
}
.sp-vfeed-stat {
    flex: 1;
    font-size: 11.5px;
    color: var(--sp-text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sp-vfeed-heart-btn {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sp-vfeed-heart-btn:active { background: rgba(239,68,68,0.1); }
.sp-vfeed-heart-btn.is-liked svg { fill: #ef4444 !important; stroke: #ef4444 !important; }

/* Poster center PLAY OVERLAY — vdo #2 (v286.78) */
.sp-hero-poster-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
    z-index: 8;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    pointer-events: auto;
}
.sp-hero-poster-play-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
    transition: transform 0.15s ease;
}
.sp-hero-poster-play:active .sp-hero-poster-play-circle {
    transform: scale(0.95);
}
.sp-hero-poster-play-label {
    font-size: 12px;
    color: #fff;
    background: rgba(0, 0, 0, 0.65);
    padding: 3px 10px;
    border-radius: 12px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* Coupon — compact mode (v286.79) — smaller when only "best" shown */
.sp-coupon-section .sp-coupon-list-item {
    padding: 6px 0;
}
.sp-coupon-section .sp-coupon-list-icon {
    width: 44px;
}
.sp-coupon-section .sp-coupon-list-disc {
    font-size: 13.5px;
}
.sp-coupon-section .sp-coupon-list-cond {
    font-size: 11px;
}
.sp-coupon-section .sp-coupon-list-exp {
    font-size: 10.5px;
}
.sp-coupon-section .sp-coupon-list-btn {
    padding: 5px 12px;
    font-size: 12px;
    margin-right: 8px;
}
.sp-coupon-list-item.is-best {
    padding-top: 22px !important;
}
.sp-coupon-best-badge {
    font-size: 10px !important;
    padding: 2px 7px !important;
}

/* Feed info — corner stats (top-right of white card) (v286.79) */
.sp-vfeed-info {
    position: absolute;
}
.sp-vfeed-corner-stats {
    position: absolute;
    top: 6px;
    right: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    z-index: 13;
}
.sp-vfeed-corner-sold {
    font-size: 11px;
    color: var(--sp-text-dim);
    background: rgba(255,255,255,0.92);
    padding: 2px 6px;
    border-radius: 10px;
}
/* Heart unified style (Yut: detail + feed เหมือนกัน ทั้ง light/dark)
   - Not liked: gray outline (เทาเข้ม)
   - Liked: red filled */
.sp-vfeed-heart-btn svg {
    fill: transparent;
    stroke: var(--sp-text-dim);
}
.sp-vfeed-heart-btn.is-liked svg {
    fill: #ef4444 !important;
    stroke: #ef4444 !important;
}

/* Feed header v2 — spacer (replaces removed category pill) */
.sp-vfeed-header-spacer { flex: 1; }

/* Detail more-vdo grid (v286.81) — vertical (9:16) tiles */
/* v286.99c: padding-top เพิ่ม (Yut: title ติดขอบบนเกินไป) */
.sp-more-vdo-section { padding: 14px 12px 0; }
.sp-more-vdo-section .sp-detail-section-h { margin-bottom: 12px; }
/* v286.83: horizontal scroll 1 row (Yut: ลากเลื่อนเอา) */
.sp-more-vdo-grid {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.sp-more-vdo-grid::-webkit-scrollbar { display: none; }
.sp-more-vdo-item {
    position: relative;
    flex: 0 0 calc((100% - 18px) / 4); /* 4 cols visible (3 gaps × 6px = 18px subtracted) */
    min-width: calc((100% - 18px) / 4);
    aspect-ratio: 9 / 16;
    border-radius: 8px;
    overflow: hidden;
    background: #000;
    border: 0;
    padding: 0;
    cursor: pointer;
    scroll-snap-align: start;
}
.sp-more-vdo-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.4); /* zoom YouTube hqdefault to fill 9:16 */
}
/* v286.83 (Yut: ใส่กลับ — ขอเล็ก ๆ ไม่ลายตา): smaller play circle */
.sp-more-vdo-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.sp-more-vdo-play svg { width: 12px; height: 12px; opacity: 0.85; }
.sp-more-vdo-item.is-playing .sp-more-vdo-play { display: none; }
.sp-more-vdo-num {
    position: absolute;
    top: 4px;
    left: 4px;
    background: rgba(0,0,0,0.7);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 8px;
}
.sp-more-vdo-item:active { transform: scale(0.97); }
/* v286.83 — inline play (auto-play #1 when scrolled to + tap to swap) */
/* v286.83: iframe scaled to fill 9:16 container — eliminates letterbox bars on landscape video */
.sp-more-vdo-iframe { position: absolute; top: 0; left: 50%; width: 316%; height: 100%; transform: translateX(-50%); border: 0; pointer-events: none; z-index: 2; }
/* Tap-overlay above iframe — captures clicks reliably (iOS Safari ignores pointer-events:none on cross-origin iframes sometimes) */
.sp-more-vdo-tap-overlay { position: absolute; inset: 0; z-index: 4; cursor: pointer; background: transparent; }
.sp-more-vdo-item.is-playing .sp-more-vdo-thumb,
.sp-more-vdo-item.is-playing .sp-more-vdo-play { display: none; }
.sp-more-vdo-item.is-playing { outline: 2px solid var(--sp-primary); outline-offset: -2px; }
.sp-more-vdo-item.is-playing .sp-more-vdo-num { z-index: 5; background: var(--sp-primary); }

/* Signal rotator under price (v286.81) */
.sp-signal-rotator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    margin-top: 8px;
    background: linear-gradient(90deg, var(--sp-primary-bg) 0%, #fef3c7 100%);
    border-radius: 6px;
    border-left: 3px solid var(--sp-primary);
    transition: opacity 0.2s ease;
}
.sp-signal-ico { font-size: 18px; line-height: 1; flex-shrink: 0; }
.sp-signal-text {
    font-size: 13px;
    font-weight: 600;
    flex: 1;
    line-height: 1.3;
}
.sp-signal-text.sp-signal-success { color: #059669; }
.sp-signal-text.sp-signal-urgent { color: #dc2626; }
.sp-signal-text.sp-signal-normal { color: #92400e; }

/* ============================================================ */
/*  v286.83 — Unified Buy Bottom-Sheet                          */
/*  Used by both vdo_feed_mobile.php and detail_mobile.php so   */
/*  Feed CTA = Detail CTA stays 100% identical.                 */
/* ============================================================ */
.sp-buy-sheet-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9990; opacity: 0; transition: opacity 0.3s; backdrop-filter: blur(2px); }
.sp-buy-sheet-backdrop.open { opacity: 1; }

.sp-buy-sheet { position: fixed; left: 0; right: 0; bottom: 0; max-width: 480px; margin: 0 auto; z-index: 9991; background: var(--sp-surface); border-top-left-radius: 20px; border-top-right-radius: 20px; box-shadow: 0 -4px 20px rgba(0,0,0,0.2); transform: translateY(100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); max-height: 85vh; display: flex; flex-direction: column; font-family: 'Sarabun', sans-serif; }
.sp-buy-sheet.open { transform: translateY(0); }
.sp-buy-sheet-handle { width: 40px; height: 4px; background: #ddd; border-radius: 2px; margin: 8px auto 4px; flex-shrink: 0; position: relative; }
.sp-buy-sheet-handle::before { content: ''; position: absolute; left: -100px; right: -100px; top: -12px; bottom: -12px; }

/* Top: image + name + price + close */
.sp-buy-sheet-top { position: relative; display: flex; gap: 12px; padding: 14px 14px 12px; border-bottom: 1px solid var(--sp-border); align-items: flex-start; flex-shrink: 0; }
.sp-buy-sheet-img-wrap { position: relative; flex-shrink: 0; }
.sp-buy-sheet-img { width: 80px; aspect-ratio: 2/3; background: #f0f0f0 center/cover no-repeat; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.sp-buy-sheet-top-info { flex: 1; min-width: 0; padding-top: 4px; padding-right: 36px; }
.sp-buy-sheet-name { font-size: 15px; font-weight: 600; color: var(--sp-text); line-height: 1.3; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* v286.99c — product code: plain subtle text, click-to-copy (Yut: ไม่ต้องเด่น มีแต่แอดมิน/ลค copy) */
.sp-buy-sheet-code {
    font-size: 11.5px; font-weight: 400; color: var(--sp-text-dim);
    padding: 2px 0; margin-bottom: 6px;
    cursor: pointer; user-select: all;
    display: inline-flex; align-items: center; gap: 4px;
    transition: color 0.15s;
}
.sp-buy-sheet-code::before { content: '🔖'; font-size: 11px; opacity: 0.7; }
.sp-buy-sheet-code:active { color: var(--sp-primary); }
.sp-buy-sheet-code.copied { color: #16a34a; font-weight: 600; }
.sp-buy-sheet-name:empty { display: none; }
/* v286.99c — price prominent (Yut: ราคาให้เด่นหน่อย) */
.sp-buy-sheet-price { font-size: 24px; font-weight: 800; color: var(--sp-primary); line-height: 1.1; min-height: 26px; letter-spacing: -0.3px; }
.sp-buy-sheet-price .cur { font-size: 18px; font-weight: 700; margin-right: 1px; vertical-align: 1px; }
.sp-buy-sheet-price .amt { font-size: 24px; }
.sp-buy-sheet-coupon-row { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--sp-primary); margin-top: 4px; }
.sp-buy-sheet-stock { font-size: 11px; color: var(--sp-text-dim); margin-top: 4px; }
.sp-buy-sheet-stock:empty { display: none; }
.sp-buy-sheet-close { position: absolute; top: 14px; right: 14px; width: 28px; height: 28px; background: var(--sp-bg); border: 0; border-radius: 50%; color: var(--sp-text-dim); font-size: 14px; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; font-family: inherit; }

/* Body: rows */
.sp-buy-sheet-body { flex: 1; overflow-y: auto; padding: 12px 14px; }
.sp-buy-sheet-info-box { background: var(--sp-primary-bg); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 7px; }
.sp-buy-sheet-info-box:empty { display: none; }
/* v286.99c — wider lbl + better wrap (was lines breaking on รูปแบบแผ่น/เสียง/ซับ) */
.sp-buy-info-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.5; }
.sp-buy-info-item .lbl { color: var(--sp-text-dim); flex: 0 0 90px; font-weight: 500; }
.sp-buy-info-item .val { color: var(--sp-text); font-weight: 600; flex: 1; min-width: 0; word-wrap: break-word; }

.sp-buy-sheet-row { margin-bottom: 14px; }
.sp-buy-sheet-row:last-child { margin-bottom: 0; }
.sp-buy-sheet-label { font-size: 13px; color: var(--sp-text-dim); margin-bottom: 8px; font-weight: 600; }
.sp-buy-sheet-loading { text-align: center; padding: 30px 0; color: var(--sp-text-dim); font-size: 13px; }

/* Variants picker — compact pills (Yut: ไม่กินพื้นที่) */
.sp-buy-sheet-variants { display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }
.sp-buy-variant-opt { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--sp-surface); border: 1px solid var(--sp-border); border-radius: 16px; cursor: pointer; font-family: inherit; font-size: 13px; color: var(--sp-text); line-height: 1.2; }
.sp-buy-variant-opt:active { background: #f9f9f9; }
.sp-buy-variant-opt.selected { border-color: var(--sp-primary); background: var(--sp-primary-bg); color: var(--sp-primary); font-weight: 600; }
.sp-buy-variant-opt .lbl { }
.sp-buy-variant-opt .prc { display: none; }
/* v286.99k rev7 — Flash variant button: clear high-contrast states. Yut: "สีแย่มาก"
   Idle  = white bg + orange border + dark text + visible red flash badge
   Selected = solid orange bg + WHITE text + brighter flash badge */
.sp-buy-variant-opt.is-flash {
    background: #fff !important;
    border: 1.5px solid #ee4d2d !important;
    color: #222 !important;
    font-weight: 600;
}
.sp-buy-variant-opt.is-flash .lbl,
.sp-buy-variant-opt.is-flash { color: #222 !important; }
.sp-buy-variant-opt.is-flash.selected {
    background: #ee4d2d !important;
    border-color: #ee4d2d !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(238,77,45,0.35);
}
.sp-buy-variant-opt.is-flash.selected .lbl,
.sp-buy-variant-opt.is-flash.selected { color: #fff !important; -webkit-text-fill-color: #fff !important; }
.sp-buy-variant-opt.is-flash.selected .sp-buy-variant-flash {
    background: #fff !important;
    color: #ee4d2d !important;
    -webkit-text-fill-color: #ee4d2d !important;
}
.sp-buy-variant-flash {
    display: inline-flex; align-items: center; padding: 2px 8px;
    background: linear-gradient(90deg, #ff3a3a, #ee4d2d);
    color: #fff; border-radius: 4px; font-size: 11px; font-weight: 700;
    line-height: 1.3; white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

/* Qty picker */
.sp-buy-sheet-qty-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sp-buy-sheet-qty-row .sp-buy-sheet-label { margin-bottom: 0; }
.sp-buy-sheet-qty { display: flex; align-items: center; gap: 0; border: 1px solid var(--sp-border); border-radius: 6px; overflow: hidden; }
.sp-buy-sheet-qty .sp-qty-btn { width: 32px; height: 32px; background: var(--sp-bg); border: 0; color: var(--sp-text); font-size: 16px; cursor: pointer; padding: 0; font-family: inherit; }
.sp-buy-sheet-qty .sp-qty-btn:active { background: #e0e0e0; }
.sp-buy-sheet-qty .sp-qty-input { width: 40px; height: 32px; border: 0; border-left: 1px solid #e0e0e0; border-right: 1px solid #e0e0e0; text-align: center; font-size: 14px; font-weight: 500; color: var(--sp-text); font-family: inherit; background: var(--sp-surface); }
.sp-buy-sheet-qty .sp-qty-input:focus { outline: none; }

/* Footer: 2 buttons (cart + buy now) */
/* v286.99c — share-to-admin row above actions */
.sp-buy-sheet-share-row { padding: 8px 14px 0; flex-shrink: 0; background: var(--sp-surface); }
.sp-buy-sheet-share-btn {
    width: 100%; padding: 9px 14px; border-radius: 18px;
    background: var(--sp-primary-bg); border: 1px dashed var(--sp-primary); color: var(--sp-primary);
    font-size: 13px; font-weight: 600; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: 6px;
    cursor: pointer; transition: background 0.15s;
}
.sp-buy-sheet-share-btn:active { background: #ffe4d4; }
.sp-buy-sheet-share-btn.is-loading { opacity: 0.7; cursor: wait; }
.sp-buy-sheet-share-btn .ico { font-size: 14px; }

.sp-buy-sheet-actions { display: flex; gap: 8px; padding: 10px 14px 16px; border-top: 1px solid #f0f0f0; background: var(--sp-surface); flex-shrink: 0; }
.sp-buy-sheet-cart-btn, .sp-buy-sheet-buy-btn { flex: 1; padding: 12px; border-radius: 24px; font-size: 14px; font-weight: 600; border: 0; cursor: pointer; font-family: inherit; }
.sp-buy-sheet-cart-btn { background: var(--sp-surface); border: 1.5px solid var(--sp-primary); color: var(--sp-primary); }
.sp-buy-sheet-buy-btn { background: linear-gradient(180deg, var(--sp-primary-light), var(--sp-primary)); color: #fff; }
.sp-buy-sheet-cart-btn:disabled, .sp-buy-sheet-buy-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ============================================================ */
/*  v286.83 FINAL — Shopee-style feed slide layout                */
/*  Applies to ALL slides. Slides 0-3 also show 90px peek strip.  */
/*  Yut: รื้อทำ feed ใหม่ — เลิกท่า poster-bg-blur ที่เละ           */
/* ============================================================ */
.sp-vfeed-slide {
    display: flex;
    flex-direction: column;
    background: var(--sp-surface);
    padding-bottom: 0;
    overflow: hidden;
}
.sp-vfeed-slide .sp-vfeed-video-area {
    position: relative;
    inset: auto;
    width: 100%;
    height: 50vh; /* v286.83: revert 60→50vh — Yut: peek + buttons หาย, กลับไปเท่าเดิม */
    flex-shrink: 0;
    background: var(--sp-surface); /* clean white surround (Shopee-style — no more blur strips) */
    overflow: hidden;
}
/* v286.83: poster strips RE-ENABLED — show sharp poster (no blur) in the
   black letterbox area above + below 16:9 video inside iframe. */
.sp-vfeed-slide .sp-vfeed-video-area::before { display: none; }
.sp-vfeed-slide:not(.poster-mode) .sp-vfeed-video-area::after {
    display: block;
    filter: none;
    transform: none;
    z-index: 5;
    background-position: center top; /* top strip shows TOP of poster */
}
.sp-vfeed-slide:not(.poster-mode) .sp-vfeed-video-area > .sp-vfeed-bottom-letterbox {
    display: block;
    filter: none;
    transform: none;
    z-index: 5;
    background-position: center bottom; /* bottom strip shows BOTTOM of poster */
}
/* Iframe — sized MUCH taller than container so YouTube native UI bars (title overlay,
   "Watch on YouTube", play bar, progress bar) sit beyond the visible area and get
   clipped by container's overflow:hidden. The actual 16:9 video stays centered.
   Yut v286.83: youtube control ยังขึ้นอยู่เลย ไม่เอาเลยนะ → push UI bars off-screen. */
.sp-vfeed-slide .sp-vfeed-video-area .sp-vfeed-iframe {
    top: 50%;
    left: 0;
    width: 100%;
    height: 150vw; /* iframe ~1.5x viewport-width tall; YouTube renders 16:9 video centered → letterbox bars (where YT UI lives) are offscreen */
    transform: translateY(-50%);
}
/* Poster-mode (no video) — image fills the 50vh container */
.sp-vfeed-slide .sp-vfeed-video-area .sp-vfeed-thumb.sp-vfeed-poster-only {
    object-fit: cover;
    height: 100%;
    background: transparent;
}
/* Compact info rows so video stays the dominant block */
.sp-vfeed-info > * { padding: 6px 14px; }
.sp-vfeed-coupon-ribbon { padding: 4px 14px; font-size: 11.5px; }
.sp-vfeed-price-block .amt { font-size: 20px; }
.sp-vfeed-title-row .sp-vfeed-title-text { -webkit-line-clamp: 1; }
.sp-vfeed-slide .sp-vfeed-info {
    position: relative;
    bottom: auto; left: auto; right: auto;
    flex-shrink: 0;
    background: var(--sp-surface);
    padding: 0;
    display: block; /* override the previous flex-row */
    gap: 0;
    border: 0;
}
.sp-vfeed-slide .sp-vfeed-actions {
    position: relative;
    bottom: auto; left: auto; right: auto;
    flex-shrink: 0;
    margin-top: auto; /* push to bottom of slide, fill free space */
}
/* Peek (only first 4 slides — customer cue: "ลากลงได้อีก") */
.sp-vfeed-slide[data-idx="0"]::after,
.sp-vfeed-slide[data-idx="1"]::after,
.sp-vfeed-slide[data-idx="2"]::after,
.sp-vfeed-slide[data-idx="3"]::after {
    position: relative;
    bottom: auto; left: auto; right: auto;
    flex: 1 0 90px; /* v286.83: min 90px, grows to fill remaining viewport (no white space at bottom on bigger phones) */
}
.sp-vfeed-slide:not([style*="--next-poster-url"])::after {
    display: none; /* hide on last slide where there's no next */
}

/* ─────── Shopee-style info rows (below video) — v286.83 tighter spacing ─────── */
.sp-vfeed-info > * {
    padding: 5px 14px; /* tighter line-spacing (Yut: shopee ไม่เว้นบรรทัดเยอะ) */
    border-bottom: 1px solid #f5f5f5;
}
.sp-vfeed-info > *:last-child { border-bottom: 0; }

/* Row: coupon ribbon */
.sp-vfeed-coupon-ribbon {
    display: flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(90deg, var(--sp-primary-bg), #ffe8de);
    color: var(--sp-primary);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
}
.sp-vfeed-coupon-ribbon .sp-vfeed-coupon-icon { font-size: 14px; }
.sp-vfeed-coupon-ribbon:active { background: #ffe0d0; }

/* Row: price + sold + heart */
.sp-vfeed-price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sp-vfeed-price-block { display: flex; align-items: baseline; gap: 6px; }
.sp-vfeed-price-block .cur { font-size: 14px; color: var(--sp-primary); font-weight: 500; }
.sp-vfeed-price-block .amt { font-size: 22px; color: var(--sp-primary); font-weight: 700; line-height: 1; }
.sp-vfeed-price-block .sp-vfeed-disc-pct {
    background: #ffe8de; color: var(--sp-primary); padding: 2px 6px; border-radius: 3px;
    font-size: 11px; font-weight: 600; margin-left: 4px;
}
.sp-vfeed-stats-block { display: flex; align-items: center; gap: 12px; }
.sp-vfeed-stats-block .sp-vfeed-sold { font-size: 12px; color: var(--sp-text-dim); }
.sp-vfeed-stats-block .sp-vfeed-heart-btn { background: none; border: 0; padding: 2px; cursor: pointer; line-height: 0; }

/* Row: title with chev → detail */
.sp-vfeed-title-row {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    text-decoration: none;
    color: inherit;
}
.sp-vfeed-title-row .sp-vfeed-rec-badge {
    background: var(--sp-primary); color: #fff; padding: 1px 6px; border-radius: 2px;
    font-size: 10px; font-weight: 500; flex-shrink: 0; line-height: 1.5;
    white-space: nowrap;
}
.sp-vfeed-title-row .sp-vfeed-title-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
    color: var(--sp-text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sp-vfeed-title-row .sp-vfeed-chev { color: #ccc; font-size: 18px; flex-shrink: 0; line-height: 1.2; }

/* Row: badges (DVD, COD, award) — v286.86: chips share same height/baseline so they don't overlap */
.sp-vfeed-badges-row {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    row-gap: 6px;
    min-height: 24px;
    margin: 4px 0;
}
.sp-vfeed-badges-row > * {
    display: inline-flex; align-items: center;
    height: 20px;
    padding: 0 7px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    margin: 0; /* override .sp-disc-badge margin-bottom */
    box-sizing: border-box;
}
.sp-vfeed-cod-badge {
    background: var(--sp-surface); border: 1px solid var(--sp-primary); color: var(--sp-primary);
}
.sp-vfeed-badges-row .sp-vfeed-rec-badge {
    background: var(--sp-primary); color: #fff; font-weight: 600;
}
.sp-vfeed-badges-row .sp-vfeed-rec-badge.is-award { background: #b58300; }
.sp-vfeed-badges-row .sp-vfeed-rec-badge.is-fresh { background: #2c8a40; }
.sp-vfeed-badges-row .sp-vfeed-rec-badge.is-hit { background: #d4af37; color: #fff; }
.sp-vfeed-info-chip.is-rating { background: #fff5e6; color: #c97f00; border: 1px solid #f0c060; }
.sp-vfeed-info-chip.is-awards { background: #fef2cc; color: #8a6300; border: 1px solid #d4af37; }
/* v286.88: bestseller dim chip */
.sp-vfeed-info-chip.is-bestseller { background: linear-gradient(135deg, var(--sp-primary-light), var(--sp-primary)); color: #fff; border: 0; font-weight: 700; }

/* Row: delivery */
.sp-vfeed-delivery-row {
    display: flex; align-items: center; gap: 6px;
    color: var(--sp-text-dim); font-size: 12px;
}
.sp-vfeed-delivery-row svg { flex-shrink: 0; }

/* Row: rating (hidden until backend gives data) */
.sp-vfeed-rating-row {
    display: flex; align-items: center; gap: 8px; font-size: 12px;
}
.sp-vfeed-rating-row .sp-vfeed-rating-num { color: var(--sp-primary); font-weight: 600; }
.sp-vfeed-rating-row .sp-vfeed-rating-count { color: var(--sp-text-dim); }
.sp-vfeed-rating-row .sp-vfeed-chev { color: #ccc; font-size: 16px; margin-left: auto; }
.sp-vfeed-rating-row[hidden] { display: none; }

/* ============================================================ */
/*  v286.83 — Compact coupon banner (Yut: เอาแค่แบบในรูป — Shopee) */
/* ============================================================ */
.sp-coupon-section--compact { padding: 6px 12px; background: var(--sp-surface); }
.sp-coupon-compact { display: flex; align-items: stretch; border: 1px solid #f0f0f0; border-radius: 8px; overflow: hidden; background: var(--sp-surface); }
.sp-coupon-compact-icon { flex: 0 0 56px; background: var(--sp-primary); display: flex; align-items: center; justify-content: center; color: #fff; padding: 8px; position: relative; }
.sp-coupon-compact-icon::before, .sp-coupon-compact-icon::after { content: ''; position: absolute; left: 100%; width: 6px; height: 6px; background: var(--sp-surface); border-radius: 50%; }
.sp-coupon-compact-icon::before { top: 4px; transform: translateX(-50%); }
.sp-coupon-compact-icon::after { bottom: 4px; transform: translateX(-50%); }
.sp-coupon-compact-body { flex: 1; padding: 8px 12px; min-width: 0; }
.sp-coupon-compact-disc { font-size: 16px; font-weight: 700; color: var(--sp-text); line-height: 1.3; }
.sp-coupon-compact-cond { font-size: 13px; color: var(--sp-text-dim); line-height: 1.4; margin-top: 3px; }
.sp-coupon-compact-cond-link { color: #2196f3; text-decoration: none; margin-left: 4px; }
.sp-coupon-compact-btn { flex: 0 0 72px; background: transparent; border: 0; color: var(--sp-primary); font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; padding: 0 8px; }
.sp-coupon-compact-btn.is-collected { color: var(--sp-primary); opacity: 0.8; }
.sp-coupon-compact-note { font-size: 11px; color: var(--sp-text-dim); margin-top: 6px; padding: 0 4px; }

/* v286.83 — Cast no-photo: first-letter avatar (colored bg) */
.sp-cast-letter, .sp-cast-no-photo.is-letter { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff; font-size: 28px; font-weight: 700; font-family: 'Sarabun', sans-serif; line-height: 1; }
.sp-director-photo .sp-cast-letter, .sp-director-photo .sp-cast-no-photo.is-letter { font-size: 22px; }

/* v286.83 — Coupon condition modal (replaces ugly alert) */
.sp-coupon-cond-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; pointer-events: none; }
.sp-coupon-cond-modal[hidden] { display: none; }
.sp-coupon-cond-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.45); pointer-events: auto; opacity: 0; transition: opacity 0.2s; }
.sp-coupon-cond-modal.open .sp-coupon-cond-modal-overlay { opacity: 1; }
.sp-coupon-cond-modal-card { position: relative; width: 100%; max-width: 480px; margin: 0 auto; background: var(--sp-surface); border-radius: 16px 16px 0 0; padding: 16px 18px 24px; pointer-events: auto; transform: translateY(100%); transition: transform 0.25s cubic-bezier(0.2, 0, 0.2, 1); }
.sp-coupon-cond-modal.open .sp-coupon-cond-modal-card { transform: translateY(0); }
.sp-coupon-cond-modal-h { display: flex; justify-content: space-between; align-items: center; font-size: 15px; font-weight: 600; color: var(--sp-text); margin-bottom: 12px; }
.sp-coupon-cond-modal-close { background: var(--sp-bg); border: 0; width: 28px; height: 28px; border-radius: 50%; font-size: 12px; color: var(--sp-text-dim); cursor: pointer; padding: 0; font-family: inherit; }
.sp-coupon-cond-modal-body { font-size: 13.5px; color: var(--sp-text-dim); line-height: 1.7; white-space: pre-line; }
.sp-coupon-cond-modal-body .row { display: flex; gap: 8px; padding: 4px 0; border-bottom: 1px dashed #f0f0f0; }
.sp-coupon-cond-modal-body .row:last-child { border-bottom: 0; }
.sp-coupon-cond-modal-body .lbl { color: var(--sp-text-dim); flex: 0 0 80px; font-size: 12px; }
.sp-coupon-cond-modal-body .val { color: var(--sp-text); flex: 1; }

/* v286.83 — Fake activity notifications in feed (Yut: ขึ้นข้อความหลอกแบบ Shopee) */
.sp-fake-activity {
    position: absolute;
    left: 12px;
    bottom: 240px;
    background: rgba(0,0,0,0.78);
    color: #fff;
    padding: 6px 12px 6px 6px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    z-index: 50;
    pointer-events: none;
    max-width: calc(100% - 100px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    animation: sp-fake-act-in 0.35s cubic-bezier(0.2, 0, 0.2, 1);
    transition: opacity 0.5s, transform 0.5s;
}
.sp-fake-activity.fading { opacity: 0; transform: translateY(20px); }
.sp-fake-activity .avatar {
    width: 24px; height: 24px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}
.sp-fake-activity .text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes sp-fake-act-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* v286.83 — Slide ::before poster bg DISABLED (Yut: เอาออก — โผล่ผิดที่). Poster shows ONLY in video letterbox area (above/below 16:9 video) via the re-enabled .sp-vfeed-bottom-letterbox + ::after strips below. */
.sp-vfeed-slide::before { display: none; }

/* Fake activity — position bottom-left of video area (Yut: มุมซ้ายล่างของ VDO) */
.sp-vfeed-video-area .sp-fake-activity { left: 12px; bottom: 12px; }

/* v286.83 — Standalone rating section (Shopee-style: "4.9 ⭐ คะแนนสินค้า (489) ดูทั้งหมด ›") */
.sp-rating-section { padding: 10px 14px; background: var(--sp-surface); border-bottom: 1px solid #f5f5f5; }
.sp-rating-row { display: flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; padding: 4px 0; }
.sp-rating-num { font-size: 18px; font-weight: 700; color: var(--sp-primary); }
.sp-rating-star { color: var(--sp-primary); font-size: 16px; line-height: 1; }
.sp-rating-label { font-size: 14px; color: var(--sp-text); margin-left: 6px; font-weight: 500; }
.sp-rating-count { font-size: 13px; color: var(--sp-text-dim); }
.sp-rating-more { margin-left: auto; font-size: 13px; color: var(--sp-text-dim); }
.sp-rating-chev { color: #ccc; font-size: 18px; line-height: 1; }

/* ============================================================ */
/*  v286.83 — Font size toggle (Yut: กลุ่มลูกค้าผู้สูงอายุ)         */
/*  3 levels: '' (default) / sp-font-lg / sp-font-xl              */
/* ============================================================ */
.sp-font-toggle {
    position: fixed;
    right: 8px;
    bottom: 70px; /* above the bottom CTA bar (56px) */
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 90;
}
.sp-font-toggle button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--sp-primary);
    color: var(--sp-primary);
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    padding: 0;
}
.sp-font-toggle button:active { transform: scale(0.92); background: var(--sp-primary-bg); }
.sp-font-toggle button[disabled] { opacity: 0.4; }

/* LARGE level — bumps key user-visible text */
body.sp-font-lg .sp-detail-section-h .title { font-size: 19px; }
body.sp-font-lg .sp-spec-label,
body.sp-font-lg .sp-spec-value { font-size: 17px; }
body.sp-font-lg .sp-spec-chip { font-size: 16px; padding: 5px 11px; }
body.sp-font-lg .sp-overview-text { font-size: 18px; line-height: 1.7; }
body.sp-font-lg .sp-cast-name { font-size: 15px; }
body.sp-font-lg .sp-coupon-compact-disc { font-size: 18px; }
body.sp-font-lg .sp-coupon-compact-cond { font-size: 15px; }
body.sp-font-lg .sp-rating-num { font-size: 21px; }
body.sp-font-lg .sp-rating-label { font-size: 16px; }
body.sp-font-lg .sp-rating-count,
body.sp-font-lg .sp-rating-more { font-size: 15px; }
body.sp-font-lg .sp-detail-buy-pname,
body.sp-font-lg .sp-bb-name { font-size: 18px; }

/* EXTRA-LARGE level */
body.sp-font-xl .sp-detail-section-h .title { font-size: 22px; }
body.sp-font-xl .sp-spec-label,
body.sp-font-xl .sp-spec-value { font-size: 19px; }
body.sp-font-xl .sp-spec-chip { font-size: 18px; padding: 6px 12px; }
body.sp-font-xl .sp-overview-text { font-size: 20px; line-height: 1.75; }
body.sp-font-xl .sp-cast-name { font-size: 17px; }
body.sp-font-xl .sp-coupon-compact-disc { font-size: 20px; }
body.sp-font-xl .sp-coupon-compact-cond { font-size: 17px; }
body.sp-font-xl .sp-rating-num { font-size: 23px; }
body.sp-font-xl .sp-rating-label { font-size: 18px; }
body.sp-font-xl .sp-rating-count,
body.sp-font-xl .sp-rating-more { font-size: 17px; }
body.sp-font-xl .sp-detail-buy-pname,
body.sp-font-xl .sp-bb-name { font-size: 20px; }

/* ============================================================
 * v286.85: site-wide font scaling — cover shared UI across all pages
 * ============================================================ */

/* Product cards (home grid, search results, wishlist, browse, recos) */
body.sp-font-lg .sp-card-name,
body.sp-font-lg .sp-card-title { font-size: 14.5px; line-height: 1.35; }
body.sp-font-xl .sp-card-name,
body.sp-font-xl .sp-card-title { font-size: 16px; line-height: 1.4; }

body.sp-font-lg .sp-card-price,
body.sp-font-lg .sp-card-min-price,
body.sp-font-lg .sp-price { font-size: 16px; }
body.sp-font-xl .sp-card-price,
body.sp-font-xl .sp-card-min-price,
body.sp-font-xl .sp-price { font-size: 18px; }

body.sp-font-lg .sp-card-meta,
body.sp-font-lg .sp-card-sold,
body.sp-font-lg .sp-card-rating { font-size: 12.5px; }
body.sp-font-xl .sp-card-meta,
body.sp-font-xl .sp-card-sold,
body.sp-font-xl .sp-card-rating { font-size: 13.5px; }

/* Header search bar value */
body.sp-font-lg .sp-detail-search-text,
body.sp-font-lg .sp-search-overlay-input-wrap input,
body.sp-font-lg .sp-home-search-placeholder { font-size: 15.5px; }
body.sp-font-xl .sp-detail-search-text,
body.sp-font-xl .sp-search-overlay-input-wrap input,
body.sp-font-xl .sp-home-search-placeholder { font-size: 17px; }

/* v286.99h — A+/− coverage extension for visible body text Yut flagged as missing */
/* Genre hero / category list hero / catalog list page hero */
body.sp-font-lg .sp-genre-hero-title,
body.sp-font-lg .sp-list-hero-title { font-size: 22px; }
body.sp-font-xl .sp-genre-hero-title,
body.sp-font-xl .sp-list-hero-title { font-size: 25px; }
body.sp-font-lg .sp-genre-hero-count,
body.sp-font-lg .sp-list-hero-meta { font-size: 14px; }
body.sp-font-xl .sp-genre-hero-count,
body.sp-font-xl .sp-list-hero-meta { font-size: 15.5px; }

/* Category page name + count bar (/product-bluray-categories-X) */
body.sp-font-lg .sp-cate-name { font-size: 16px; }
body.sp-font-xl .sp-cate-name { font-size: 18px; }
body.sp-font-lg .sp-cate-count { font-size: 13px; }
body.sp-font-xl .sp-cate-count { font-size: 14.5px; }

/* Browse menu (/browse/menu) — section headers, tile labels, list cells */
body.sp-font-lg .sp-bm-section-h { font-size: 16px; }
body.sp-font-xl .sp-bm-section-h { font-size: 17.5px; }
body.sp-font-lg .sp-bm-tile-lbl { font-size: 12.5px; }
body.sp-font-xl .sp-bm-tile-lbl { font-size: 13.5px; }
body.sp-font-lg .sp-cat-cell { font-size: 13.5px; }
body.sp-font-xl .sp-cat-cell { font-size: 14.5px; }

/* Flash sale banner title */
body.sp-font-lg .sp-fs-title { font-size: 16px; }
body.sp-font-xl .sp-fs-title { font-size: 18px; }

/* Coupon info row */
body.sp-font-lg .sp-coupon-info { font-size: 13px; }
body.sp-font-xl .sp-coupon-info { font-size: 14.5px; }

/* Personalized search keyword chip (search overlay) */
body.sp-font-lg .sp-personal-kw-text { font-size: 14px; }
body.sp-font-xl .sp-personal-kw-text { font-size: 15.5px; }

/* /me hub: tier badge */
body.sp-font-lg .sp-me-tier { font-size: 12.5px; }
body.sp-font-xl .sp-me-tier { font-size: 13.5px; }

/* Search empty placeholder text */
body.sp-font-lg .sp-search-empty { font-size: 14.5px; }
body.sp-font-xl .sp-search-empty { font-size: 16px; }
/* end A+/- coverage extension */

/* Quick menu (home + drawer) */
body.sp-font-lg .sp-menu-label,
body.sp-font-lg .sp-menu-item-label { font-size: 12px; }
body.sp-font-xl .sp-menu-label,
body.sp-font-xl .sp-menu-item-label { font-size: 13.5px; }

/* Section titles + headings */
body.sp-font-lg .sp-section-title,
body.sp-font-lg .sp-h-title,
body.sp-font-lg .sp-subpage-title,
body.sp-font-lg h1,
body.sp-font-lg h2,
body.sp-font-lg h3 { font-size: 18px; }
body.sp-font-xl .sp-section-title,
body.sp-font-xl .sp-h-title,
body.sp-font-xl .sp-subpage-title,
body.sp-font-xl h1,
body.sp-font-xl h2,
body.sp-font-xl h3 { font-size: 20px; }

/* Format tabs (DVD/BD/4K filter) */
body.sp-font-lg .sp-fmt-tab-label,
body.sp-font-lg .sp-fmt-tab { font-size: 14px; }
body.sp-font-xl .sp-fmt-tab-label,
body.sp-font-xl .sp-fmt-tab { font-size: 15.5px; }

/* Bottom 5-tab nav labels */
body.sp-font-lg .sp-bottom-tab-label,
body.sp-font-lg .sp-tab-label { font-size: 11.5px; }
body.sp-font-xl .sp-bottom-tab-label,
body.sp-font-xl .sp-tab-label { font-size: 12.5px; }

/* Generic body text — paragraphs, list items, links inside sections */
body.sp-font-lg .sp-text,
body.sp-font-lg .sp-section-body p,
body.sp-font-lg .sp-empty-msg,
body.sp-font-lg .sp-empty-title { font-size: 15px; }
body.sp-font-xl .sp-text,
body.sp-font-xl .sp-section-body p,
body.sp-font-xl .sp-empty-msg,
body.sp-font-xl .sp-empty-title { font-size: 17px; }

/* Cart / order item rows */
body.sp-font-lg .sp-cart-item-name,
body.sp-font-lg .sp-order-item-name,
body.sp-font-lg .sp-order-line { font-size: 15px; }
body.sp-font-xl .sp-cart-item-name,
body.sp-font-xl .sp-order-item-name,
body.sp-font-xl .sp-order-line { font-size: 17px; }

/* Coupon cards (coupons page) */
body.sp-font-lg .sp-coupon-name,
body.sp-font-lg .sp-coupon-disc { font-size: 15px; }
body.sp-font-xl .sp-coupon-name,
body.sp-font-xl .sp-coupon-disc { font-size: 17px; }

/* Feed slide info */
body.sp-font-lg .sp-vfeed-pname,
body.sp-font-lg .sp-vfeed-title { font-size: 15px; }
body.sp-font-xl .sp-vfeed-pname,
body.sp-font-xl .sp-vfeed-title { font-size: 17px; }

/* Search overlay results */
body.sp-font-lg .sp-sug-name { font-size: 15px; }
body.sp-font-xl .sp-sug-name { font-size: 17px; }
body.sp-font-lg .sp-search-tag,
body.sp-font-lg .sp-search-recent-name { font-size: 15px; padding: 9px 16px; }
body.sp-font-xl .sp-search-tag,
body.sp-font-xl .sp-search-recent-name { font-size: 17px; padding: 10px 18px; }
body.sp-font-lg .sp-search-tag-trash { font-size: 18px !important; }
body.sp-font-xl .sp-search-tag-trash { font-size: 20px !important; }

/* Form inputs (login / contact / claim etc) */
body.sp-font-lg input[type="text"],
body.sp-font-lg input[type="email"],
body.sp-font-lg input[type="tel"],
body.sp-font-lg input[type="password"],
body.sp-font-lg textarea,
body.sp-font-lg select,
body.sp-font-lg label,
body.sp-font-lg button { font-size: 15px; }
body.sp-font-xl input[type="text"],
body.sp-font-xl input[type="email"],
body.sp-font-xl input[type="tel"],
body.sp-font-xl input[type="password"],
body.sp-font-xl textarea,
body.sp-font-xl select,
body.sp-font-xl label,
body.sp-font-xl button { font-size: 17px; }

/* v286.86: feed slide info — base CSS uses very specific selectors so we must override at same specificity */
body.sp-font-lg .sp-vfeed-title-row .sp-vfeed-title-text { font-size: 15.5px; }
body.sp-font-xl .sp-vfeed-title-row .sp-vfeed-title-text { font-size: 17px; }

body.sp-font-lg .sp-vfeed-coupon-ribbon { font-size: 13px; padding: 6px 14px; }
body.sp-font-xl .sp-vfeed-coupon-ribbon { font-size: 14.5px; padding: 7px 14px; }

body.sp-font-lg .sp-vfeed-price-block .amt { font-size: 24px; }
body.sp-font-xl .sp-vfeed-price-block .amt { font-size: 26px; }
body.sp-font-lg .sp-vfeed-price-block .cur { font-size: 15px; }
body.sp-font-xl .sp-vfeed-price-block .cur { font-size: 16px; }

body.sp-font-lg .sp-vfeed-stats-block .sp-vfeed-sold { font-size: 13px; }
body.sp-font-xl .sp-vfeed-stats-block .sp-vfeed-sold { font-size: 14.5px; }

body.sp-font-lg .sp-vfeed-delivery-row { font-size: 13px; }
body.sp-font-xl .sp-vfeed-delivery-row { font-size: 14.5px; }

body.sp-font-lg .sp-vfeed-rating-row { font-size: 13px; }
body.sp-font-xl .sp-vfeed-rating-row { font-size: 14.5px; }

body.sp-font-lg .sp-vfeed-rec-badge,
body.sp-font-lg .sp-disc-badge,
body.sp-font-lg .sp-vfeed-cod-badge { font-size: 11.5px; padding: 2px 7px; }
body.sp-font-xl .sp-vfeed-rec-badge,
body.sp-font-xl .sp-disc-badge,
body.sp-font-xl .sp-vfeed-cod-badge { font-size: 12.5px; padding: 2px 8px; }

body.sp-font-lg .sp-vfeed-side-btn .lbl { font-size: 11px; }
body.sp-font-xl .sp-vfeed-side-btn .lbl { font-size: 12px; }

body.sp-font-lg .sp-vfeed-buy-btn,
body.sp-font-lg .sp-vfeed-add-cart-btn { font-size: 15px; }
body.sp-font-xl .sp-vfeed-buy-btn,
body.sp-font-xl .sp-vfeed-add-cart-btn { font-size: 17px; }

/* v286.94: bestseller page (.sp-bsl-*) — Yut: A+ ไม่ขยับ ชื่อ ราคา ยอดขาย */
body.sp-font-lg .sp-bsl-name { font-size: 15px; line-height: 1.4; }
body.sp-font-xl .sp-bsl-name { font-size: 17px; line-height: 1.4; }
body.sp-font-lg .sp-bsl-price { font-size: 17px; }
body.sp-font-xl .sp-bsl-price { font-size: 19px; }
body.sp-font-lg .sp-bsl-sold { font-size: 12.5px; }
body.sp-font-xl .sp-bsl-sold { font-size: 14px; }
body.sp-font-lg .sp-bsl-tab,
body.sp-font-lg .sp-bsl-pill,
body.sp-font-lg .sp-bsl-quicklink { font-size: 13.5px; }
body.sp-font-xl .sp-bsl-tab,
body.sp-font-xl .sp-bsl-pill,
body.sp-font-xl .sp-bsl-quicklink { font-size: 15px; }

/* v286.88/90: Flash Sale section (home) — multi-slot tabbed (Shopee-style) */
.sp-flash-section {
    background: linear-gradient(180deg, #ff3a3a 0%, #cc0000 100%);
    color: #fff; padding: 12px 0 14px; margin: 8px 0;
}
.sp-flash-head { display: flex; flex-direction: column; gap: 4px; padding: 0 14px 10px; }
.sp-flash-title-wrap { display: flex; align-items: center; gap: 10px; }
.sp-flash-title { font-size: 18px; font-weight: 800; letter-spacing: 0.3px; }
.sp-flash-countdown { background: #1a1a1a; color: #fff; padding: 3px 10px; border-radius: 4px; font-family: monospace; font-size: 14px; font-weight: 700; letter-spacing: 0.5px; }
.sp-flash-countdown.is-ended { background: #555; opacity: 0.6; }
/* v286.90: slot tabs */
.sp-flash-tabs { display: flex; overflow-x: auto; gap: 0; padding: 0 14px; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-bottom: 6px; }
.sp-flash-tabs::-webkit-scrollbar { display: none; }
.sp-flash-tab { flex: 0 0 auto; min-width: 80px; padding: 8px 12px; background: transparent; color: rgba(255,255,255,0.75); border: 0; cursor: pointer; font-family: inherit; text-align: center; border-bottom: 2px solid transparent; }
.sp-flash-tab .sp-flash-tab-time { display: block; font-size: 22px; font-weight: 700; line-height: 1; font-family: monospace; }
.sp-flash-tab .sp-flash-tab-state { display: block; font-size: 11px; margin-top: 2px; opacity: 0.85; }
.sp-flash-tab.is-current { color: #fff; border-bottom-color: #fff; }
.sp-flash-tab.is-active .sp-flash-tab-state { color: #fff8c8; font-weight: 600; }
.sp-flash-cd-wrap { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 0 14px 10px; font-size: 12px; }
.sp-flash-cd-lbl { color: rgba(255,255,255,0.85); }
.sp-flash-cd { background: #1a1a1a; color: #fff; padding: 4px 12px; border-radius: 4px; font-family: monospace; font-size: 15px; font-weight: 700; letter-spacing: 1px; }
.sp-flash-cd.is-ended { background: #555; opacity: 0.6; }
.sp-flash-panel { display: none; }
.sp-flash-panel.is-current { display: block; }
.sp-flash-empty { padding: 24px 14px; text-align: center; color: rgba(255,255,255,0.85); font-size: 13px; }
.sp-flash-card.is-upcoming { opacity: 0.7; }
.sp-flash-upcoming-lbl { font-size: 11px; color: var(--sp-text-dim); margin-top: 4px; }
.sp-flash-sub { font-size: 12px; opacity: 0.92; }
.sp-flash-scroll { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 8px; padding: 0 14px; scrollbar-width: none; }
.sp-flash-scroll::-webkit-scrollbar { display: none; }
.sp-flash-card { flex: 0 0 130px; background: var(--sp-surface); border-radius: 6px; overflow: hidden; text-decoration: none; color: var(--sp-text); box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.sp-flash-img { width: 130px; height: 175px; background: var(--sp-surface-2); }
.sp-flash-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-flash-info { padding: 6px 8px 8px; }
.sp-flash-name { font-size: 12px; line-height: 1.3; height: 32px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; }
.sp-flash-price { color: var(--sp-primary); font-weight: 800; }
.sp-flash-price .cur { font-size: 12px; }
.sp-flash-price .amt { font-size: 16px; }
.sp-flash-progress { position: relative; height: 14px; background: var(--sp-primary-bg); border-radius: 7px; margin-top: 5px; overflow: hidden; }
.sp-flash-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, var(--sp-primary-light), var(--sp-primary)); border-radius: 7px; transition: width 0.3s; }
.sp-flash-progress-lbl { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.4); }

/* v286.89: Bestseller dimensions hub */
.sp-bd-wrap { background: var(--sp-bg); min-height: 60vh; padding: 0 0 24px; }
.sp-bd-intro { padding: 12px 14px; font-size: 13px; color: var(--sp-text-dim); line-height: 1.5; background: var(--sp-surface); border-bottom: 1px solid #eee; }
.sp-bd-section { background: var(--sp-surface); margin: 8px 0; padding: 12px 14px; }
.sp-bd-section-h { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15.5px; font-weight: 700; color: var(--sp-text); }
.sp-bd-section-h .ico { font-size: 20px; }
.sp-bd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-bd-chip { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; background: var(--sp-primary-bg); color: var(--sp-primary); border: 1px solid #ffd6c5; border-radius: 16px; font-size: 13px; text-decoration: none; }
.sp-bd-chip:active { background: #ffe0d0; }
.sp-bd-chip .cnt { background: var(--sp-primary); color: #fff; padding: 1px 7px; border-radius: 9px; font-size: 10.5px; font-weight: 700; }
.sp-bd-filter-h { background: var(--sp-surface); padding: 14px 14px 12px; border-bottom: 1px solid #eee; }
.sp-bd-filter-title { font-size: 18px; font-weight: 700; margin: 0 0 4px; }
.sp-bd-filter-sub { font-size: 13px; color: var(--sp-text-dim); margin-bottom: 6px; }
.sp-bd-back-link { font-size: 13px; color: var(--sp-primary); text-decoration: none; }

/* v286.88: Order timeline (4-step) on /myorders cards */
.sp-order-timeline { display: flex; align-items: center; padding: 8px 12px; background: var(--sp-surface-2); border-top: 1px solid #f0f0f0; border-bottom: 1px solid var(--sp-border); }
.sp-ot-step { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sp-ot-step .dot { width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #888; border: 1.5px solid #bbb; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.sp-ot-step .lbl { font-size: 10px; color: #555; font-weight: 500; }
.sp-ot-step.is-done .dot { background: #2c8a40; color: #fff; border-color: #2c8a40; }
.sp-ot-step.is-done .lbl { color: #2c8a40; font-weight: 700; }
body.mode-dark .sp-ot-step .dot { background: #1a1a1a; color: #aaa; border-color: #555; }
body.mode-dark .sp-ot-step .lbl { color: #ccc; }
body.mode-dark .sp-ot-step.is-done .dot { background: #4ade80; color: #062a13; border-color: #4ade80; }
body.mode-dark .sp-ot-step.is-done .lbl { color: #4ade80; }
.sp-ot-line { background: #ddd; }
.sp-ot-line.is-done { background: #2c8a40; }
body.mode-dark .sp-ot-line { background: #444; }
body.mode-dark .sp-ot-line.is-done { background: #4ade80; }
.sp-ot-line { flex: 1; height: 2px; background: #ddd; margin: 0 4px; align-self: flex-start; margin-top: 11px; }
.sp-ot-line.is-done { background: #2c8a40; }
.sp-order-overdue-banner { background: #fff5e0; color: #c97f00; padding: 8px 12px; font-size: 12px; font-weight: 600; border-top: 1px solid #ffd6a8; }
.sp-order-card.is-overdue { border-left: 4px solid var(--sp-primary); }

/* v286.88: review polish — expand toggle, photo lightbox */
.sp-cr-expand-btn { background: transparent; border: 0; color: var(--sp-primary); font-size: 13px; font-weight: 600; padding: 0; cursor: pointer; font-family: inherit; }
.sp-cr-expand-btn:active { opacity: 0.6; }
.sp-cr-photo-thumb { cursor: pointer; transition: transform 0.15s; }
.sp-cr-photo-thumb:active { transform: scale(0.96); }
.sp-cr-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.92);
    display: none; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.25s;
    padding: 20px;
}
.sp-cr-lightbox.is-open { opacity: 1; }
.sp-cr-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sp-cr-lb-close {
    position: absolute; top: 14px; right: 14px;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,0.15); color: #fff;
    border: 0; font-size: 22px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}

/* v286.95: horizontal reco row (one-shot fetch, scrollable) */
.sp-h-reco-section { background: var(--sp-surface); padding: 12px 0; margin-top: 8px; }
.sp-h-reco-head { display: flex; align-items: center; justify-content: space-between; padding: 0 14px 8px; }
.sp-h-reco-title { font-size: 16px; font-weight: 700; color: var(--sp-text); }
.sp-h-reco-more { font-size: 12.5px; color: var(--sp-primary); text-decoration: none; }
.sp-h-reco-scroll { display: flex; gap: 8px; padding: 0 14px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.sp-h-reco-scroll::-webkit-scrollbar { display: none; }
.sp-h-reco-card { flex: 0 0 120px; width: 120px; text-decoration: none; color: inherit; }
.sp-h-reco-img { width: 120px; height: 165px; background: var(--sp-surface-2); border-radius: 6px; overflow: hidden; position: relative; }
.sp-h-reco-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-h-reco-name { font-size: 12px; line-height: 1.3; color: var(--sp-text); margin-top: 6px; height: 32px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

body.sp-font-lg .sp-h-reco-title { font-size: 17.5px; }
body.sp-font-xl .sp-h-reco-title { font-size: 19px; }
body.sp-font-lg .sp-h-reco-name { font-size: 13px; height: 36px; }
body.sp-font-xl .sp-h-reco-name { font-size: 14.5px; height: 40px; }

/* v286.93: category switcher dropdown */
.sp-cat-switcher-wrap { padding: 8px 14px; background: var(--sp-surface); border-bottom: 1px solid var(--sp-border); }
.sp-cat-switcher {
    width: 100%; padding: 10px 14px;
    border: 1px solid var(--sp-border); border-radius: 6px;
    background: #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ee4d2d' stroke-width='3'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e") no-repeat right 12px center;
    background-size: 12px;
    font: inherit; font-size: 14px;
    color: var(--sp-text); appearance: none; -webkit-appearance: none;
    cursor: pointer;
    padding-right: 36px;
}
.sp-cat-switcher:focus { outline: 0; border-color: var(--sp-primary); }
.sp-cat-switcher-show-all { display: inline-block; margin-top: 6px; font-size: 12px; color: var(--sp-primary); text-decoration: none; }
.sp-cat-switcher-show-all:active { opacity: 0.6; }
/* v286.99g #154 — full categories hub link (always visible on category pages) */
.sp-cat-switcher-hub {
    display: inline-block; margin-top: 6px; margin-left: 12px;
    font-size: 12px; font-weight: 600;
    color: var(--sp-primary); text-decoration: none;
}
.sp-cat-switcher-hub:active { opacity: 0.6; }

/* v286.97: pretty Shopee-style confirm dialog (replaces native alert/confirm) */
.sp-confirm-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 9999; display: flex; align-items: center; justify-content: center;
    padding: 20px; opacity: 0; transition: opacity 0.2s;
}
.sp-confirm-backdrop.is-open { opacity: 1; }
.sp-confirm-card {
    background: var(--sp-surface); border-radius: 16px;
    width: 100%; max-width: 320px;
    padding: 22px 20px 16px; text-align: center;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    transform: scale(0.94); transition: transform 0.2s;
}
.sp-confirm-backdrop.is-open .sp-confirm-card { transform: scale(1); }
.sp-confirm-icon { font-size: 40px; margin-bottom: 8px; }
.sp-confirm-title { font-size: 17px; font-weight: 700; color: var(--sp-text); margin-bottom: 4px; }
.sp-confirm-msg { font-size: 13.5px; color: var(--sp-text-dim); line-height: 1.45; margin-bottom: 16px; word-break: break-word; }
.sp-confirm-btns { display: flex; gap: 8px; }
.sp-confirm-btns button {
    flex: 1; padding: 12px; border-radius: 8px;
    font: inherit; font-size: 14.5px; font-weight: 700;
    cursor: pointer; border: 0;
}
.sp-confirm-cancel { background: var(--sp-bg); color: var(--sp-text-dim); }
.sp-confirm-cancel:active { background: #e8e8e8; }
.sp-confirm-ok { background: var(--sp-primary); color: #fff; }
.sp-confirm-ok:active { background: #d63a1f; }
.sp-confirm-ok.is-danger { background: #c00; }
.sp-confirm-ok.is-danger:active { background: #900; }

/* v286.97: hide A+ font toggle on mycart (covers totals sticky bar) */
body.sp-mycart-page .sp-font-toggle { display: none !important; }

/* v286.97: coupon picker modal */
.sp-cpick-card { max-width: 360px; }
.sp-cpick-list { max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.sp-cpick-item { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--sp-primary-bg); border: 1px solid #ffd6c5; border-radius: 8px; cursor: pointer; text-align: left; font: inherit; }
.sp-cpick-item:not(:disabled):active { background: #ffe0d0; }
.sp-cpick-item.is-disabled { opacity: 0.5; cursor: not-allowed; }
.sp-cpick-disc { background: var(--sp-primary); color: #fff; padding: 8px 12px; border-radius: 6px; font-size: 16px; font-weight: 800; flex-shrink: 0; }
.sp-cpick-info { flex: 1; min-width: 0; }
.sp-cpick-code { font-size: 13px; font-weight: 700; color: var(--sp-text); }
.sp-cpick-cond { font-size: 11.5px; color: var(--sp-text-dim); margin-top: 2px; }

/* v286.97: coupon row variants */
.sp-coupon-pick-btn { flex: 1; padding: 10px 14px; background: var(--sp-primary); color: #fff; border: 0; border-radius: 6px; font: inherit; font-weight: 600; cursor: pointer; }
.sp-coupon-pick-btn:active { background: #d63a1f; }
.sp-coupon-input-toggle { width: 38px; padding: 10px 0; background: var(--sp-surface); color: var(--sp-text-dim); border: 1px solid var(--sp-border); border-radius: 6px; cursor: pointer; font-size: 16px; }
.sp-coupon-login-prompt { display: flex; align-items: center; gap: 10px; padding: 4px 0; }
.sp-coupon-login-msg { flex: 1; font-size: 13px; color: var(--sp-text-dim); }
.sp-coupon-login-btn { padding: 8px 14px; background: #06c755; color: #fff; border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 13px; }

/* v286.89: cart per-item info — set count + flash badge + expired note */
.sp-cart-item-disc-info { font-size: 11.5px; color: var(--sp-text-dim); margin-top: 2px; line-height: 1.4; }
.sp-cart-item-disc-info strong { color: var(--sp-primary); font-weight: 700; }
.sp-cart-item-flash-row { margin-top: 4px; }
.sp-cart-flash-badge { display: inline-block; background: linear-gradient(90deg, #ff3a3a, var(--sp-primary)); color: #fff; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 700; }
.sp-cart-flash-expired { display: inline-block; background: #fff5e0; color: #c97f00; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 600; border: 1px solid #ffd6a8; }
.sp-cart-item.is-flash { border-left: 3px solid var(--sp-primary); }
.sp-cart-item-price.has-flash .strike { font-size: 11.5px; color: var(--sp-text-dim); text-decoration: line-through; font-weight: 400; margin-left: 4px; }

/* v286.90: feed load hint — bottom toast while fetching more slides */
.sp-vfeed-load-hint {
    position: fixed; left: 50%; bottom: 78px;
    transform: translateX(-50%) translateY(20px);
    background: rgba(0,0,0,0.85); color: #fff;
    padding: 10px 18px; border-radius: 22px;
    font-size: 13px; font-weight: 600;
    opacity: 0; pointer-events: none;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 999;
    backdrop-filter: blur(8px);
}
.sp-vfeed-load-hint.is-visible {
    opacity: 1; transform: translateX(-50%) translateY(0);
}

/* v286.89: YT retry button — when sitewide block kicks in, poster shows + this button on top */
.sp-vfeed-yt-retry {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.7); color: #fff;
    padding: 12px 20px; border-radius: 24px;
    font-size: 14px; font-weight: 600;
    border: 0; cursor: pointer; z-index: 5;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.sp-vfeed-yt-retry:active { transform: translate(-50%, -50%) scale(0.94); }

/* v286.89: Flash banner on detail page (above price) */
.sp-detail-flash-banner { background: linear-gradient(180deg, #ff3a3a 0%, #cc0000 100%); color: #fff; padding: 10px 14px; }
.sp-dfb-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sp-dfb-tag { font-size: 16px; font-weight: 800; letter-spacing: 0.5px; }
.sp-dfb-countdown { background: #1a1a1a; padding: 4px 10px; border-radius: 4px; font-family: monospace; font-size: 14px; font-weight: 700; }
.sp-dfb-progress { position: relative; height: 14px; background: rgba(255,255,255,0.2); border-radius: 7px; margin-top: 8px; overflow: hidden; }
.sp-dfb-progress-fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,0.95); border-radius: 7px; transition: width 0.3s; }
.sp-dfb-progress-lbl { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; color: #cc0000; mix-blend-mode: difference; }

.sp-price-main.is-flash .amt { color: var(--sp-primary); font-size: 28px; }
.sp-price-main.is-flash .strike { display: inline-block; margin-left: 8px; color: var(--sp-text-dim); font-size: 14px; text-decoration: line-through; font-weight: 400; }

/* v286.88: Flash banner inside buy sheet */
.sp-buy-flash-banner { background: linear-gradient(90deg, #ff3a3a, var(--sp-primary)); color: #fff; padding: 8px 12px; border-radius: 6px; font-size: 13px; line-height: 1.4; margin: 0 0 10px; }
.sp-buy-flash-banner strong { font-weight: 800; }

/* v286.87: full-page browse menu (/browse/menu) */
.sp-bm-wrap { padding: 0 0 24px; background: var(--sp-bg); min-height: 60vh; }
.sp-bm-section { background: var(--sp-surface); margin: 8px 0; padding: 12px 14px; }
.sp-bm-section-h { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--sp-text); }
.sp-bm-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 6px; }
.sp-bm-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: var(--sp-text); padding: 6px 2px; border-radius: 8px; }
.sp-bm-tile:active { background: var(--sp-primary-bg); }
.sp-bm-tile-ico { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.sp-bm-tile-ico.is-hot { background: var(--sp-primary-bg); color: var(--sp-primary); }
.sp-bm-tile-ico.is-imdb { background: #fff8e0; color: #d4af37; }
.sp-bm-tile-ico.is-award { background: #fef2cc; color: #b58300; }
.sp-bm-tile-ico.is-coll { background: #e8f4fd; color: #1976d2; }
.sp-bm-tile-ico.is-actor { background: #fce4f0; color: #c0269e; }
.sp-bm-tile-ico.is-dir { background: #e8f5e9; color: #2c8a40; }
.sp-bm-tile-ico.is-genre { background: #fff3e0; color: #e65100; }
.sp-bm-tile-ico.is-coupon { background: #f3e5f5; color: #6a1b9a; }
.sp-bm-tile-lbl { font-size: 11.5px; color: var(--sp-text); text-align: center; line-height: 1.2; }

.sp-bm-fmt-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sp-bm-fmt-card { display: flex; align-items: center; justify-content: center; height: 56px; border-radius: 6px; text-decoration: none; font-weight: 700; font-size: 13px; }
.sp-bm-fmt-card.fmt-dvd { background: #6b7280; color: #fff; }
.sp-bm-fmt-card.fmt-bd { background: #02D8E9; color: #fff; }
.sp-bm-fmt-card.fmt-bd50 { background: #0277bd; color: #fff; }
.sp-bm-fmt-card.fmt-uhd { background: #111827; color: #ffd700; }

.sp-bm-list { display: flex; flex-direction: column; }
.sp-bm-list-item { display: flex; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid #f5f5f5; text-decoration: none; color: var(--sp-text); }
.sp-bm-list-item:last-child { border-bottom: 0; }
.sp-bm-list-item .lbl { flex: 1; font-size: 14.5px; }
.sp-bm-list-item .cnt { font-size: 12px; color: var(--sp-text-dim); background: var(--sp-bg); padding: 2px 8px; border-radius: 10px; }
.sp-bm-list-item .chev { font-size: 18px; color: #ccc; }

.sp-bm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-bm-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; background: var(--sp-primary-bg); color: var(--sp-primary); border: 1px solid #ffd6c5; border-radius: 16px; font-size: 12.5px; text-decoration: none; }
.sp-bm-chip .cnt { background: var(--sp-primary); color: #fff; padding: 1px 7px; border-radius: 9px; font-size: 11px; font-weight: 600; }
.sp-bm-chip:active { background: #ffe0d0; }

/* ============================================================
 * v286.99c — SITE-WIDE A+ font scaling (root-level rules).
 * Previously only specific detail-page selectors scaled → most pages
 * (terms, privacy, mycart, myorders, contact, etc.) had no effect.
 * These rules cascade everything via root font-size + container scale.
 * ============================================================ */
body.sp-font-lg { font-size: 17px; }
body.sp-font-xl { font-size: 19px; }

/* Generic scale-up for core readability — paragraphs, lists, links, table cells */
body.sp-font-lg p,
body.sp-font-lg li,
body.sp-font-lg a,
body.sp-font-lg span,
body.sp-font-lg div:not(.sp-bnav-icon):not(.sp-icon-btn):not(.sp-static-hero-icon) { font-size: inherit; }
body.sp-font-xl p,
body.sp-font-xl li,
body.sp-font-xl a,
body.sp-font-xl span,
body.sp-font-xl div:not(.sp-bnav-icon):not(.sp-icon-btn):not(.sp-static-hero-icon) { font-size: inherit; }

/* Static info pages */
body.sp-font-lg .sp-static-content,
body.sp-font-lg .sp-static-content p,
body.sp-font-lg .sp-static-content li,
body.sp-font-lg .sp-static-content td { font-size: 16.5px; line-height: 1.7; }
body.sp-font-xl .sp-static-content,
body.sp-font-xl .sp-static-content p,
body.sp-font-xl .sp-static-content li,
body.sp-font-xl .sp-static-content td { font-size: 18.5px; line-height: 1.75; }
body.sp-font-lg .sp-static-hero-title { font-size: 22px; }
body.sp-font-xl .sp-static-hero-title { font-size: 25px; }

/* myorders / myprofile / coupons / cart / wishlist — generic SP cards */
body.sp-font-lg .sp-order-id,
body.sp-font-lg .sp-order-row .lbl,
body.sp-font-lg .sp-order-row .val,
body.sp-font-lg .sp-cart-item-name,
body.sp-font-lg .sp-cart-item-variant,
body.sp-font-lg .sp-cart-item-price,
body.sp-font-lg .sp-coupon-card .sp-coupon-disc,
body.sp-font-lg .sp-sum-row,
body.sp-font-lg .sp-sum-row span { font-size: 15px; }
body.sp-font-xl .sp-order-id,
body.sp-font-xl .sp-order-row .lbl,
body.sp-font-xl .sp-order-row .val,
body.sp-font-xl .sp-cart-item-name,
body.sp-font-xl .sp-cart-item-variant,
body.sp-font-xl .sp-cart-item-price,
body.sp-font-xl .sp-coupon-card .sp-coupon-disc,
body.sp-font-xl .sp-sum-row,
body.sp-font-xl .sp-sum-row span { font-size: 16.5px; }
body.sp-font-lg .sp-sum-row.sp-sum-total span { font-size: 18px; font-weight: 700; }
body.sp-font-xl .sp-sum-row.sp-sum-total span { font-size: 20px; font-weight: 700; }

/* Forms (login, register, profile, address) */
body.sp-font-lg .sp-auth-field label,
body.sp-font-lg .sp-form-section-title,
body.sp-font-lg .sp-addr-field label { font-size: 15px; }
body.sp-font-xl .sp-auth-field label,
body.sp-font-xl .sp-form-section-title,
body.sp-font-xl .sp-addr-field label { font-size: 17px; }
body.sp-font-lg .sp-auth-field input,
body.sp-font-lg .sp-auth-field select,
body.sp-font-lg .sp-auth-field textarea,
body.sp-font-lg .sp-addr-field input,
body.sp-font-lg .sp-addr-field textarea { font-size: 16px; }
body.sp-font-xl .sp-auth-field input,
body.sp-font-xl .sp-auth-field select,
body.sp-font-xl .sp-auth-field textarea,
body.sp-font-xl .sp-addr-field input,
body.sp-font-xl .sp-addr-field textarea { font-size: 17.5px; }

/* Sub-page header titles */
body.sp-font-lg .sp-subpage-title { font-size: 17px; }
body.sp-font-xl .sp-subpage-title { font-size: 19px; }

/* Bottom nav labels — keep readable but not too big (icons own space) */
body.sp-font-lg .sp-bnav-item { font-size: 11.5px; }
body.sp-font-xl .sp-bnav-item { font-size: 12.5px; }

/* ============================================================
 * DARK MODE — comprehensive safety net (May 9 2026, post-audit)
 * ============================================================ */
body.mode-dark, body.mode-auto.is-os-dark {
    color: var(--sp-text);
    background: var(--sp-bg) !important;
}
body.mode-auto.is-os-dark { /* same as dark */
    --sp-bg: #0f0f0f;
    --sp-surface: #1c1c1c;
    --sp-surface-2: #262626;
    --sp-text: #eaeaea;
    --sp-text-dim: #999999;
    --sp-border: #333333;
}

/* Genre/category cards — flip white bg to surface */
body.mode-dark .sp-genre-card,
body.mode-dark .sp-cat-card,
body.mode-dark .sp-genres-grid > *,
body.mode-dark .sp-categories-grid > *,
body.mode-dark .sp-cat-item,
body.mode-dark [class*="genre-card"],
body.mode-dark [class*="cat-card"] {
    background: var(--sp-surface) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-genre-card *,
body.mode-dark .sp-cat-card *,
body.mode-dark .sp-cat-item * {
    color: var(--sp-text) !important;
}

/* Coupon page + my-coupons: paper card right side (cream bg) */
body.mode-dark .sp-coupon-card,
body.mode-dark .sp-coupon-paper,
body.mode-dark .sp-mycoupon-card,
body.mode-dark [class*="coupon-card"],
body.mode-dark [class*="coupon-paper"] {
    background: var(--sp-surface) !important;
    color: var(--sp-text) !important;
}
body.mode-dark .sp-coupon-card *,
body.mode-dark .sp-coupon-paper *,
body.mode-dark [class*="coupon-card"] *:not(.sp-coupon-disc):not([class*="primary"]) {
    color: var(--sp-text) !important;
}
body.mode-dark .sp-coupon-disc {
    color: #fff !important; /* keep readable on theme-color left side */
}

/* Mycart free-pick selector cream gradient → dark */
body.mode-dark .sp-cart-free-selector,
body.mode-dark .sp-cart-free,
body.mode-dark .sp-cart-freebox,
body.mode-dark .sp-bs-card,
body.mode-dark .sp-bs-empty,
body.mode-dark [class*="cart-free"],
body.mode-dark [class*="-bs-"] {
    background: var(--sp-surface-2) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-cart-free *,
body.mode-dark .sp-cart-freebox *,
body.mode-dark [class*="cart-free"] * {
    color: var(--sp-text) !important;
}

/* Light yellow/cream banners */
body.mode-dark .sp-disc-warn,
body.mode-dark .sp-tmdb-awards-text,
body.mode-dark .sp-awards,
body.mode-dark .sp-bs-banner,
body.mode-dark [style*="background: #fff8e1"],
body.mode-dark [style*="background:#fff8e1"],
body.mode-dark [style*="background: #fef3c7"],
body.mode-dark [style*="background:#fef3c7"],
body.mode-dark [style*="background: #fff5e6"],
body.mode-dark [style*="background:#fff5e6"] {
    background: var(--sp-surface-2) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}

/* Award/IMDb pills — make text brighter in dark mode */
body.mode-dark .sp-meta-tag.is-imdb,
body.mode-dark .sp-award-pill {
    background: var(--sp-surface-2) !important;
    color: #ffd700 !important;
    border-color: #ffc107 !important;
}

/* Outlined buttons — make border/text bright in dark mode */
body.mode-dark .sp-rv-actions .btn-cancel,
body.mode-dark button[class*="-cancel"],
body.mode-dark button[class*="-secondary"],
body.mode-dark .sp-bn-cancel,
body.mode-dark a.sp-auth-btn-secondary {
    background: var(--sp-surface-2) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}
/* Variant chips on detail buy-sheet */
body.mode-dark .sp-variant-chip,
body.mode-dark .sp-buy-otid-chip,
body.mode-dark [class*="variant-chip"]:not(.is-selected):not(.is-on),
body.mode-dark [class*="otid-chip"]:not(.is-selected):not(.is-on) {
    background: var(--sp-surface-2) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}

/* Spec table values brighter */
body.mode-dark .sp-detail-spec td,
body.mode-dark .sp-buy-spec-row,
body.mode-dark .sp-spec-value,
body.mode-dark .sp-spec-label {
    color: var(--sp-text) !important;
}

/* Audio/sub badges */
body.mode-dark .sp-audio-badge,
body.mode-dark .sp-sub-badge,
body.mode-dark [class*="audio-badge"],
body.mode-dark [class*="sub-badge"] {
    color: var(--sp-text) !important;
}

/* LINE drawer button — keep text white (it sits on green bg) */
body.mode-dark .sp-drawer-line-cta,
body.mode-dark .sp-drawer-line-cta * {
    color: #fff !important;
}

/* Wishlist tabs / chips — make readable */
body.mode-dark .sp-wishlist-filter-chip:not(.is-on),
body.mode-dark .sp-wishlist-tab:not(.is-on),
body.mode-dark [class*="wishlist-filter"]:not(.is-on),
body.mode-dark [class*="wishlist-tab"]:not(.is-on) {
    background: var(--sp-surface-2) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}

/* Coupons hero banner (gold) — dim down in dark */
body.mode-dark .sp-coupons-header,
body.mode-dark .sp-coupons-hero,
body.mode-dark .my-coupons-hero,
body.mode-dark [class*="coupons-hero"],
body.mode-dark [class*="coupons-header"] {
    background: var(--sp-surface) !important;
    color: var(--sp-text) !important;
}

/* Status pills (paid yellow, etc) text contrast */
body.mode-dark .sp-order-status.status-paid,
body.mode-dark .sp-order-status[class*="paid"] {
    background: rgba(245,158,11,0.15) !important;
    color: #fcd34d !important;
}

/* Inputs general */
body.mode-dark input[type="text"],
body.mode-dark input[type="search"],
body.mode-dark input[type="email"],
body.mode-dark input[type="number"],
body.mode-dark input[type="tel"],
body.mode-dark textarea,
body.mode-dark select {
    background: var(--sp-surface-2) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark input::placeholder,
body.mode-dark textarea::placeholder {
    color: var(--sp-text-dim) !important;
}

/* Order status banner / form section */
body.mode-dark .sp-order-detail-page section,
body.mode-dark .sp-form-section,
body.mode-dark .sp-checkout-form input,
body.mode-dark .sp-checkout-form select,
body.mode-dark .sp-checkout-form textarea {
    background: var(--sp-surface) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}

/* Address/country/zip dropdown areas */
body.mode-dark .sp-address-row,
body.mode-dark .sp-country-row {
    background: var(--sp-surface) !important;
    color: var(--sp-text) !important;
}

/* ============================================================
 * DARK MODE — Round 3 fixes (post-screenshot audit)
 * ============================================================ */

/* Make --sp-primary-bg dark-friendly (single var, fixes many spots) */
body.mode-dark, body.mode-auto.is-os-dark {
    --sp-primary-bg: var(--sp-surface-2);
}

/* Hero banners with gradient ending in #fff */
body.mode-dark .sp-promo-hero,
body.mode-dark [class*="sp-promo-hero"],
body.mode-dark .sp-bestseller-hero,
body.mode-dark .sp-cat-hero,
body.mode-dark .sp-genre-hero,
body.mode-dark .sp-coupons-hero,
body.mode-dark [class*="-hero"]:not(.sp-detail-hero):not(.sp-hero-card-grid):not(.sp-list-hero) {
    background: var(--sp-surface) !important;
    background-image: none !important;
    color: var(--sp-text) !important;
}
body.mode-dark .sp-promo-hero-title,
body.mode-dark [class*="-hero-title"] { color: var(--sp-primary) !important; }
body.mode-dark .sp-promo-hero-desc,
body.mode-dark [class*="-hero-desc"] { color: var(--sp-text-dim) !important; }

/* sp-list-hero: in dark mode, drop the theme gradient frame
   (Yut: กรอบนอกเป็นสีฟ้า แปลกๆ) — use dark surface instead, keep
   primary accent only on title */
body.mode-dark .sp-list-hero {
    background: var(--sp-surface) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--sp-border) !important;
}
body.mode-dark .sp-list-hero * { color: var(--sp-text) !important; }
body.mode-dark .sp-list-hero-title { color: var(--sp-primary-light) !important; }
body.mode-dark .sp-list-hero-meta { color: var(--sp-text-dim) !important; }
body.mode-dark .sp-list-hero.awards-hero {
    background: var(--sp-surface) !important;
    background-image: none !important;
}

/* Featured cards on home (cream + orange title) */
body.mode-dark .sp-featured-card,
body.mode-dark [class*="featured-card"],
body.mode-dark [class*="weekly-card"],
body.mode-dark [class*="-featured"]:not(.sp-detail-featured) {
    background: var(--sp-surface) !important;
    background-image: none !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark [class*="featured-card"] *,
body.mode-dark [class*="weekly-card"] * { color: var(--sp-text) !important; }

/* Cart upsell banner (top yellow strip) */
body.mode-dark .sp-cart-upsell,
body.mode-dark .sp-cart-banner,
body.mode-dark .sp-cart-progress,
body.mode-dark [class*="-upsell"],
body.mode-dark [class*="cart-banner"],
body.mode-dark [class*="cart-progress"],
body.mode-dark [class*="cart-promo"] {
    background: var(--sp-surface-2) !important;
    background-image: none !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}

/* Free pick auto-card (mycart "ระบบเลือกให้ฟรี") */
body.mode-dark .sp-bs-auto-card,
body.mode-dark .sp-bs-suggestion,
body.mode-dark .sp-cart-auto-pick,
body.mode-dark [class*="auto-pick"],
body.mode-dark [class*="auto-card"],
body.mode-dark [class*="bs-suggest"] {
    background: var(--sp-surface-2) !important;
    background-image: none !important;
    color: var(--sp-text) !important;
}
body.mode-dark .sp-bs-auto-card *,
body.mode-dark [class*="auto-pick"] *,
body.mode-dark [class*="auto-card"] * { color: var(--sp-text) !important; }

/* Bestseller dimension chips (sp-bsl-quicklink) */
body.mode-dark .sp-bsl-quicklink,
body.mode-dark .sp-bsl-quicklinks {
    background: var(--sp-surface-2) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-bsl-tabs { background: var(--sp-surface) !important; }

/* Search overlay trending pills */
body.mode-dark .sp-search-tag,
body.mode-dark .sp-search-tag-trending,
body.mode-dark [class*="search-tag"],
body.mode-dark [class*="trending-pill"] {
    background: var(--sp-surface-2) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}

/* Awards hero — currently hardcoded orange. Force theme color */
body.mode-dark .sp-awards-hero,
body.mode-dark .sp-awards-header,
body.mode-dark [class*="awards-hero"] {
    background: linear-gradient(135deg, var(--sp-primary-light) 0%, var(--sp-primary) 100%) !important;
    color: #fff !important;
}
body.mode-dark [class*="awards-hero"] * { color: #fff !important; }

/* Heart icon in wishlist reco cards — keep visible */
body.mode-dark .sp-wishlist-heart,
body.mode-dark .sp-card-heart,
/* Heart unified detail+feed in dark mode:
   - Not liked: gray outline
   - Liked: red filled (Yut: กรอบเทาเข้ม / กดแล้วหัวใจแดง) */
body.mode-dark [class*="-heart"]:not(.is-liked):not(.active) svg {
    stroke: var(--sp-text-dim) !important;
    fill: transparent !important;
}
body.mode-dark [class*="-heart"].is-liked svg,
body.mode-dark [class*="-heart"].active svg {
    stroke: #ef4444 !important;
    fill: #ef4444 !important;
}
/* Light mode detail heart .active filled red */
.sp-detail-heart svg { stroke: var(--sp-text-dim); }
.sp-detail-heart.active svg { fill: #ef4444 !important; stroke: #ef4444 !important; }

/* ============================================================
 * Round 27 — /browse/awards + browse pages year-section dividers
 *   Yut: เส้นขาว คั่นทุกๆ ปี เปลี่ยนเทาเข้ม. Also #f0f0f0 borders
 *   site-wide become bright in dark mode — sweep them.
 * ============================================================ */
body.mode-dark .sp-award-year-h,
body.mode-dark [class*="-year-h"],
body.mode-dark [class*="year-section"],
body.mode-dark [class*="decade-h"] {
    background: var(--sp-surface) !important;
    border-top-color: var(--sp-border) !important;
    border-bottom-color: var(--sp-border) !important;
}
body.mode-dark .sp-award-year-h .year-label {
    color: var(--sp-primary-light) !important;
}
body.mode-dark .sp-award-year-h .year-count {
    color: var(--sp-text-dim) !important;
}

/* ============================================================
 * Search overlay — 1-row collapsible tag sections
 * Yut: ค้นหาล่าสุด/กระแสตอนนี้/ค้นหายอดนิยม แสดง 1 บรรทัด มี ดูเพิ่ม
 * ============================================================ */
.sp-search-tags.is-1row {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
}
.sp-search-tags.is-1row::-webkit-scrollbar { display: none; }
.sp-search-tags.is-1row .sp-search-tag { flex-shrink: 0; }
.sp-search-tags.is-1row.is-expanded {
    flex-wrap: wrap;
    overflow-x: visible;
}
.sp-search-expand {
    display: block;
    background: transparent;
    border: 0;
    color: var(--sp-primary);
    font-size: 12.5px;
    font-weight: 500;
    font-family: inherit;
    padding: 6px 0 2px;
    cursor: pointer;
}
.sp-search-expand:active { opacity: 0.7; }

/* Compact section margin only — keep h3 + tags at normal size
   (Yut: font ปกติหน่อย) */
.sp-search-section.is-collapsible {
    margin-bottom: 14px !important;
}
/* Recent searches: wrap multi-line + trash icon at end (Shopee-style) */
.sp-search-tags-recent {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
/* Match A+/A- scaling on section h3 too */
body.sp-font-lg .sp-search-section-head h3 { font-size: 16px; }
body.sp-font-xl .sp-search-section-head h3 { font-size: 18px; }

/* Mycart empty-state "ยิ่งซื้อ ยิ่งคุ้ม" promo box — was yellow gradient
   stays yellow in dark mode → unreadable. Force dark surface + amber accent. */
body.mode-dark .sp-empty-rewards {
    background: var(--sp-surface-2) !important;
    background-image: none !important;
    border: 1px solid var(--sp-border) !important;
}
body.mode-dark .sp-empty-rewards-head {
    color: #fbbf24 !important;
}
body.mode-dark .sp-empty-reward-item {
    background: var(--sp-surface) !important;
    border: 1px solid var(--sp-border) !important;
    box-shadow: none !important;
}
body.mode-dark .sp-empty-reward-item .t1 {
    color: #fbbf24 !important;
}
body.mode-dark .sp-empty-reward-item .t2 {
    color: var(--sp-text-dim) !important;
}
.sp-search-tag-trash {
    background: transparent !important;
    border: 0 !important;
    padding: 6px 4px !important;
    cursor: pointer;
    font-size: 16px !important;
    line-height: 1;
    margin-left: auto;
    color: var(--sp-text-dim);
}
.sp-search-tag-trash:active { opacity: 0.6; }
/* Personal suggest section gets more visual weight */
#spSearchPersonalSection {
    margin-top: 20px !important;
    margin-bottom: 32px !important;
}
#spSearchPersonalSection .sp-search-section-head {
    margin-bottom: 12px;
}
#spSearchPersonalSection .sp-search-section-head h3 {
    font-size: 16px !important;
    font-weight: 700;
    color: var(--sp-text);
}
body.sp-font-lg #spSearchPersonalSection .sp-search-section-head h3 {
    font-size: 18px !important;
}
body.sp-font-xl #spSearchPersonalSection .sp-search-section-head h3 {
    font-size: 20px !important;
}

/* ============================================================
 * Search overlay — Personal suggest (home-grid masonry style)
 * Yut: ดู home ว่าจัดวางยังไง 2-col ไม่ต้องเสมอกันแนวนอน, ภาพไม่ 1:1
 * ============================================================ */
.sp-personal-suggest {
    column-count: 2;
    column-gap: 8px;
    padding: 8px 0;
}
.sp-personal-suggest > * {
    display: block;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 8px;
    width: 100%;
}
.sp-personal-product {
    display: flex; flex-direction: column;
    background: var(--sp-surface);
    border-radius: 8px;
    border: 1px solid var(--sp-border);
    overflow: hidden;
    text-decoration: none;
    color: var(--sp-text);
}
.sp-personal-product:active { opacity: 0.9; }
.sp-personal-product-img {
    width: 100%;
    aspect-ratio: 2/3;  /* movie poster ratio */
    background: var(--sp-surface-2);
    overflow: hidden;
}
.sp-personal-product-img img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.sp-personal-product-name {
    padding: 8px 10px 10px;
    font-size: 13px;
    line-height: 1.35;
    color: var(--sp-text);
    /* Hard 2-line clamp + ellipsis (Yut: ชื่อยาวล้น 3 บรรทัด) */
    display: -webkit-box;
    display: -moz-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Fallback fixed height for browsers without line-clamp support */
    max-height: calc(1.35em * 2);
    word-break: break-word;
}
.sp-personal-sentinel { display: block; height: 1px; }
.sp-personal-loading { display: flex; justify-content: center; padding: 16px; }
body.mode-dark .sp-personal-product {
    background: var(--sp-surface) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-personal-product-img {
    background: #1a1a1a !important;
}
body.mode-dark .sp-personal-product-name { color: var(--sp-text) !important; }
.sp-personal-product-img { position: relative; }
.sp-personal-product-badge {
    position: absolute;
    top: 6px; left: 6px;
    z-index: 2;
    padding: 2px 7px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.4;
    border-radius: 999px;
    color: #fff;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    box-shadow: 0 1px 2px rgba(0,0,0,0.25);
    pointer-events: none;
    white-space: nowrap;
}
.sp-personal-product-badge.is-wishlist { background: #e63946; }
.sp-personal-product-badge.is-viewed { background: #2563eb; }
.sp-personal-product-badge.is-new { background: #16a34a; }
.sp-personal-product-badge.is-extra { background: #f97316; }
.sp-personal-product-vdo {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border: 0;
    z-index: 1;
    background: #000;
}

/* Generic #f0f0f0 border sweep (existing rules use this hex which
   appears bright on dark surface). Catches mini-cards, stats rows,
   confirm rows, order rows, contact items, buysheet footer, etc. */
body.mode-dark .sp-stats-row,
body.mode-dark .sp-mini-card,
body.mode-dark .sp-confirm-row,
body.mode-dark .sp-order-card-h,
body.mode-dark .sp-order-row.total,
body.mode-dark .sp-contact-item,
body.mode-dark .sp-bh-row,
body.mode-dark .sp-vfeed-buysheet-footer {
    border-color: var(--sp-border) !important;
    border-top-color: var(--sp-border) !important;
    border-bottom-color: var(--sp-border) !important;
}

/* ============================================================
 * vdo_feed white lines (Yut: บนราคา + บนปุ่มแชท เป็นเส้นขาว)
 * - .sp-vfeed-info border-top #f0f0f0 → เส้นเหนือ price block
 * - .sp-vfeed-actions border-top #f0f0f0 → เส้นเหนือ chat/cart/buy bar
 * - .sp-vfeed-side-btn border-right #f5f5f5 → เส้นแบ่งปุ่ม
 * - .sp-vfeed-buysheet-footer + buysheet-img + buysheet-top
 * ============================================================ */
/* Add-to-cart confirm popup (.sp-upsell-confirm) reward badges
   Yut: ตอน "เพิ่มลงตะกร้าแล้ว" popup — สีสว่าง (cream/green pastel) */
body.mode-dark .sp-upsell-confirm {
    background: var(--sp-surface) !important;
    color: var(--sp-text) !important;
}
body.mode-dark .sp-upc-title { color: var(--sp-text) !important; }
body.mode-dark .sp-upc-reward {
    background: var(--sp-surface-2) !important;
    background-image: none !important;
    color: var(--sp-text) !important;
}
body.mode-dark .sp-upc-reward.is-gift {
    background: rgba(251, 191, 36, 0.12) !important;
    background-image: none !important;
    color: #fbbf24 !important;
}
body.mode-dark .sp-upc-reward.is-hot {
    background: rgba(239, 68, 68, 0.12) !important;
    background-image: none !important;
    color: #f87171 !important;
}
body.mode-dark .sp-upc-reward.is-success {
    background: rgba(52, 211, 153, 0.12) !important;
    background-image: none !important;
    color: #34d399 !important;
}
body.mode-dark .sp-upc-progress-track {
    background: var(--sp-surface-2) !important;
}
body.mode-dark .sp-upsell-inline--normal {
    background: rgba(251, 191, 36, 0.12) !important;
    color: #fbbf24 !important;
}
body.mode-dark .sp-upsell-inline--hot {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #f87171 !important;
}
body.mode-dark .sp-upsell-inline--success {
    background: rgba(52, 211, 153, 0.12) !important;
    color: #34d399 !important;
}

/* Order success page (orders3_new_mobile.php) — has inline <style> with
   hardcoded #f5f5f5/#fff/#ee4d2d. Override key surfaces in dark. */
body.mode-dark .sp-suc {
    background: var(--sp-bg) !important;
}
body.mode-dark .sp-suc-hero {
    background: linear-gradient(180deg, var(--sp-primary) 0%, var(--sp-primary-dark) 100%) !important;
    color: #fff !important;
}
body.mode-dark .sp-suc-card,
body.mode-dark .sp-suc-orderid,
body.mode-dark .sp-suc-bank,
body.mode-dark .sp-suc-item,
body.mode-dark .sp-suc-cta {
    background: var(--sp-surface) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-suc-card *,
body.mode-dark .sp-suc-orderid *,
body.mode-dark .sp-suc-bank *,
body.mode-dark .sp-suc-item *,
body.mode-dark .sp-suc-row .k {
    color: var(--sp-text) !important;
}
body.mode-dark .sp-suc-card-h,
body.mode-dark .sp-suc-row.total .v,
body.mode-dark .sp-suc-row.discount .v {
    color: var(--sp-primary-light) !important;
}
body.mode-dark .sp-suc-row {
    border-color: var(--sp-border) !important;
}

body.mode-dark .sp-vfeed-info,
body.mode-dark .sp-vfeed-info > *,
body.mode-dark .sp-vfeed-actions,
body.mode-dark .sp-vfeed-actions .sp-vfeed-side-btn,
body.mode-dark .sp-vfeed-buysheet-footer,
body.mode-dark .sp-vfeed-buysheet-h,
body.mode-dark .sp-vfeed-buysheet-top,
body.mode-dark .sp-vfeed-buysheet-info,
body.mode-dark .sp-vfeed-buysheet-row,
body.mode-dark .sp-buy-sheet-top,
body.mode-dark .sp-buy-sheet-actions,
body.mode-dark .sp-buy-sheet-qty,
body.mode-dark .sp-buy-sheet-qty .sp-qty-input,
body.mode-dark .sp-buy-sheet-info-box,
body.mode-dark .sp-buy-sheet-row,
body.mode-dark .sp-buy-sheet-disc-section,
body.mode-dark .sp-buy-sheet-flash,
body.mode-dark .sp-addr-sticky,
body.mode-dark .sp-addr-section,
body.mode-dark .sp-addr-sheet-head,
body.mode-dark .sp-addr-sheet-item,
body.mode-dark .sp-addr-card,
body.mode-dark .sp-addr-row,
body.mode-dark .sp-addr-input {
    border-color: var(--sp-border) !important;
    border-top-color: var(--sp-border) !important;
    border-right-color: var(--sp-border) !important;
    border-bottom-color: var(--sp-border) !important;
    border-left-color: var(--sp-border) !important;
}

/* Cart-page upsell text */
body.mode-dark .sp-cart-upsell-text,
body.mode-dark [class*="upsell"] * { color: var(--sp-text) !important; }

/* Disc-warn for BD (yellow strip) */
body.mode-dark .sp-disc-warn.bd,
body.mode-dark .sp-disc-warn.sp-warn-bd { color: #fcd34d !important; }

/* ============================================================
 * DARK MODE — Round 4 (deep audit findings)
 * ============================================================ */

/* Best cards (home — 4 disc-type variants with #fff→colored gradient) */
body.mode-dark .sp-best-card,
body.mode-dark .sp-best-card.is-dvd,
body.mode-dark .sp-best-card.is-bd,
body.mode-dark .sp-best-card.is-bd50,
body.mode-dark .sp-best-card.is-uhd {
    background: var(--sp-surface) !important;
    background-image: none !important;
    border-color: var(--sp-border) !important;
    color: var(--sp-text) !important;
}
body.mode-dark .sp-best-card * { color: var(--sp-text) !important; }

/* Reviews section "ความเห็นนักวิจารณ์" gradient */
body.mode-dark .sp-rev-section,
body.mode-dark [class*="rev-section"] {
    background: var(--sp-surface) !important;
    background-image: none !important;
}

/* Review chip cards (imdb/rt/meta tier variants — all #fff→color gradients) */
body.mode-dark .sp-rev-chip,
body.mode-dark .sp-rev-chip-imdb,
body.mode-dark .sp-rev-chip-rt,
body.mode-dark .sp-rev-chip-meta,
body.mode-dark [class*="rev-chip"] {
    background: var(--sp-surface-2) !important;
    background-image: none !important;
    border-color: var(--sp-border) !important;
    color: var(--sp-text) !important;
}
body.mode-dark [class*="rev-chip"] * { color: var(--sp-text) !important; }
/* Keep score color visible */
body.mode-dark .sp-rev-chip-score { color: var(--sp-primary-light) !important; font-weight: 700; }
body.mode-dark .sp-rev-chip-imdb .sp-rev-chip-score { color: #fbbf24 !important; }
body.mode-dark .sp-rev-chip-rt .sp-rev-chip-score { color: #fb7185 !important; }
body.mode-dark .sp-rev-chip-meta .sp-rev-chip-score { color: #93c5fd !important; }

/* "อ่านเพิ่ม" story fade — change gradient end from #fff to surface */
body.mode-dark .sp-overview-text:not(.expanded)::after {
    background: linear-gradient(180deg, transparent 0%, var(--sp-surface) 100%) !important;
}

/* Disc-warn (yellow/red banners) — make text brighter */
body.mode-dark .sp-disc-warn,
body.mode-dark .sp-disc-warn.bd,
body.mode-dark .sp-disc-warn.uhd,
body.mode-dark .sp-disc-warn.sp-warn-bd,
body.mode-dark .sp-disc-warn.sp-warn-uhd {
    background: var(--sp-surface-2) !important;
    color: #fcd34d !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-disc-warn.uhd,
body.mode-dark .sp-disc-warn.sp-warn-uhd { color: #fca5a5 !important; }

/* Meta tags (imdb/hit) — readable in dark */
body.mode-dark .sp-meta-tag.is-imdb,
body.mode-dark .sp-badge.imdb {
    background: rgba(255,215,0,0.15) !important;
    color: #fbbf24 !important;
    border-color: #fbbf24 !important;
}
body.mode-dark .sp-meta-tag.is-hit,
body.mode-dark .sp-meta-tag.hit,
body.mode-dark .sp-badge.hit {
    background: rgba(236,72,153,0.15) !important;
    color: #f9a8d4 !important;
    border-color: #f9a8d4 !important;
}
/* Award context badges (Oscar/BAFTA/Emmy) above product name —
   was cream bg #fff3cd + dark text #856404, gets washed out in dark mode.
   Yut: เหลืองอ่อน + เทาอ่อน อ่านไม่ออก. Use translucent gold + bright amber text. */
body.mode-dark .sp-badge.oscar,
body.mode-dark .sp-badge.bafta,
body.mode-dark .sp-badge.emmy {
    background: rgba(251, 191, 36, 0.15) !important;
    color: #fbbf24 !important;
    border-color: #fbbf24 !important;
}
body.mode-dark .sp-badge.box-office {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #4ade80 !important;
    border-color: #4ade80 !important;
}
body.mode-dark .sp-badge.actor,
body.mode-dark .sp-badge.genre {
    background: var(--sp-surface-2) !important;
    color: var(--sp-text-dim) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-badge.new {
    background: var(--sp-primary) !important;
    color: #fff !important;
}
body.mode-dark .sp-tmdb-awards-text,
body.mode-dark .sp-awards {
    background: var(--sp-surface-2) !important;
    color: #fcd34d !important;
}

/* Hero card grid flag (small ribbon ribbon) */
body.mode-dark .sp-hero-grid-flag {
    background: var(--sp-primary) !important;
    color: #fff !important;
}

/* Promo icon circle on home */
body.mode-dark .sp-promo-icon { background: var(--sp-surface-2) !important; }

/* Menu icon circles (top quick menu) — keep colored backgrounds for visual variety, just slightly darken */
body.mode-dark .sp-menu-icon { background: var(--sp-surface-2) !important; }
body.mode-dark .sp-menu-icon.coupon { background: rgba(238,77,45,0.2) !important; }
body.mode-dark .sp-menu-icon.award { background: rgba(245,158,11,0.2) !important; }

/* Genre tag :active state */
body.mode-dark .sp-genre-tag:active,
body.mode-dark .sp-bsl-quicklink:active,
body.mode-dark .sp-bestseller-badge:active {
    background: var(--sp-surface) !important;
}

/* Inline style overrides — catch hardcoded #fff bg */
body.mode-dark [style*="background:#fff"]:not([style*="#fff5f0"]):not([style*="#fff8e1"]),
body.mode-dark [style*="background: #fff"]:not([style*="#fff5"]):not([style*="#fff8"]) {
    background: var(--sp-surface) !important;
}
/* Inline cream bg variants */
body.mode-dark [style*="background:#fff7ed"],
body.mode-dark [style*="background: #fff7ed"],
body.mode-dark [style*="background:#fffbeb"],
body.mode-dark [style*="background: #fffbeb"],
body.mode-dark [style*="background:#fef3c7"],
body.mode-dark [style*="background: #fef3c7"],
body.mode-dark [style*="background:#fff3cd"],
body.mode-dark [style*="background: #fff3cd"] {
    background: var(--sp-surface-2) !important;
    color: var(--sp-text) !important;
}

/* Code separator */
body.mode-dark .sp-detail-code-sep { color: var(--sp-text-dim) !important; }

/* Rolling activity (red highlight) */
body.mode-dark .sp-rolling-activity strong { color: #fca5a5 !important; }

/* Cart progress bar (top yellow strip) — covered earlier but extra fallback */
body.mode-dark .sp-cart-progress-bar,
body.mode-dark [class*="progress-bar"] {
    background: var(--sp-surface-2) !important;
}
body.mode-dark .sp-cart-progress-fill,
body.mode-dark [class*="progress-fill"] {
    background: var(--sp-primary) !important;
}

/* Free pick selector tile borders + dashed border */
body.mode-dark .sp-cart-free-selector {
    border-color: var(--sp-primary) !important;
}

/* ============================================================
 * DARK MODE — Round 5 (more edge cases)
 * ============================================================ */

/* Skeleton loader (used in mycart + others) — flip light grays to dark */
body.mode-dark .sp-skel-block {
    background: linear-gradient(90deg, var(--sp-surface) 0%, var(--sp-surface-2) 50%, var(--sp-surface) 100%) !important;
    background-size: 200% 100% !important;
}

/* Detail price strip — has linear-gradient ending in #fff */
body.mode-dark .sp-detail-price {
    background: var(--sp-surface) !important;
    background-image: none !important;
    border-color: var(--sp-border) !important;
}

/* Footer nav border */
body.mode-dark .sp-bottom-nav {
    background: var(--sp-surface) !important;
    border-top-color: var(--sp-border) !important;
}

/* Footer nav active item — keep theme color */
body.mode-dark .sp-bottom-nav-item.active,
body.mode-dark .sp-bottom-nav-item.is-active,
body.mode-dark [class*="bottom-nav-item"].active {
    color: var(--sp-primary-light) !important;
}

/* Detail search bar placeholder */
body.mode-dark .sp-detail-search-bar .sp-detail-search-text::placeholder {
    color: var(--sp-text-dim) !important;
}

/* Other linear-gradients with #fff at start (catch all common patterns) */
body.mode-dark [class^="sp-"][class*="-card"] { /* cards — go to surface */
    /* careful — only flat */
}
/* Force gradient cards we may have missed: */
body.mode-dark .sp-promo-banner,
body.mode-dark .sp-promo-strip,
body.mode-dark .sp-buy-promo,
body.mode-dark [class*="promo-banner"],
body.mode-dark [class*="promo-strip"] {
    background: var(--sp-surface) !important;
    background-image: none !important;
    color: var(--sp-text) !important;
}

/* Cart freeship banner */
body.mode-dark .sp-cart-freeship,
body.mode-dark .sp-cart-banner-freeship,
body.mode-dark [class*="freeship"] {
    background: var(--sp-surface-2) !important;
    color: var(--sp-text) !important;
}

/* Reviews list scrollable card */
body.mode-dark .sp-rev-list,
body.mode-dark .sp-rev-card,
body.mode-dark [class*="-rev-list"],
body.mode-dark [class*="-rev-card"] {
    background: var(--sp-surface) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-rev-card * { color: var(--sp-text) !important; }
body.mode-dark .sp-rev-card .sp-rev-stars { color: #fbbf24 !important; }

/* Cast/credits cards (cast list) */
body.mode-dark .sp-cast-card,
body.mode-dark .sp-credits-card,
body.mode-dark [class*="cast-card"],
body.mode-dark [class*="credits-card"] {
    background: var(--sp-surface) !important;
    color: var(--sp-text) !important;
}

/* Detail tab content */
body.mode-dark .sp-detail-tab-content,
body.mode-dark .sp-detail-tab-pane,
body.mode-dark [class*="tab-content"],
body.mode-dark [class*="tab-pane"] {
    background: var(--sp-surface) !important;
    color: var(--sp-text) !important;
}

/* Genre tag :hover/active states */
body.mode-dark .sp-genre-tag {
    background: var(--sp-surface-2) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}

/* Sticky filter bar */
body.mode-dark .sp-filter-bar { background: var(--sp-surface) !important; }

/* Tab row */
body.mode-dark .sp-tab-row { background: var(--sp-surface) !important; }
body.mode-dark .sp-tab-item:not(.active) { color: var(--sp-text-dim) !important; }
body.mode-dark .sp-tab-item.active { color: var(--sp-primary-light) !important; }

/* My orders tracking section is already themed — verify */
body.mode-dark .sp-track-step .lbl,
body.mode-dark .sp-track-step .dt {
    color: var(--sp-text) !important;
}

/* Order list items */
body.mode-dark .sp-order-row,
body.mode-dark .sp-order-card,
body.mode-dark [class*="order-row"],
body.mode-dark [class*="order-card"] {
    background: var(--sp-surface) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}

/* Reset background-image only when truly hardcoded #fff origin */
body.mode-dark *[style*="linear-gradient"][style*="#fff,"],
body.mode-dark *[style*="linear-gradient"][style*=", #fff"],
body.mode-dark *[style*="linear-gradient"][style*=",#fff"] {
    background-image: none !important;
    background-color: var(--sp-surface) !important;
}

/* ============================================================
 * Round 6 — disc-type accent borders + LINE button + gold strips
 * ============================================================ */

/* LINE login button text MUST stay white in dark mode (was getting flattened
   by the global "body.mode-dark a" anchor color rule at top) */
body.mode-dark .sp-signin-line-btn,
body.mode-dark .sp-signin-line-btn:hover,
body.mode-dark .sp-signin-line-btn:active,
body.mode-dark .sp-signin-line-btn:visited,
body.mode-dark a.line-login-btn,
body.mode-dark a.line-login-btn:hover,
body.mode-dark a.line-login-btn:active,
body.mode-dark a.line-login-btn:visited {
    color: #fff !important;
}
body.mode-dark .sp-signin-line-btn .lbl,
body.mode-dark .sp-signin-line-btn .ico,
body.mode-dark a.line-login-btn * {
    color: #fff !important;
}

/* BD / 4K / DVD card accent borders — Round 4 flattened these to neutral
   gray which lost the disc-type identity. Re-introduce bright dark-mode
   variants that pop on dark surface. */
body.mode-dark .sp-best-card.is-dvd { border-color: #fbbf24 !important; }      /* yellow */
body.mode-dark .sp-best-card.is-bd { border-color: #06b6d4 !important; }       /* cyan */
body.mode-dark .sp-best-card.is-bd50 { border-color: #60a5fa !important; }     /* light blue */
body.mode-dark .sp-best-card.is-uhd { border-color: #d1d5db !important; }      /* light gray (4K = neutral premium) */

/* Free-EMS banner / "ส่งฟรี" gold strip — was bright cream in dark mode
   making text disappear. Use deep amber that still reads "gold" but at
   dark luminance. */
body.mode-dark .sp-detail-promo-bar,
body.mode-dark .sp-detail-banner-free,
body.mode-dark [class*="free-ems-bar"],
body.mode-dark [class*="banner-free"],
body.mode-dark [class*="promo-strip"] {
    background: linear-gradient(90deg, #3a2a05 0%, #4d3a0a 100%) !important;
    color: #fde68a !important;
    border-color: #78580f !important;
}
body.mode-dark .sp-detail-promo-bar *,
body.mode-dark .sp-detail-banner-free *,
body.mode-dark [class*="free-ems-bar"] *,
body.mode-dark [class*="banner-free"] *,
body.mode-dark [class*="promo-strip"] * {
    color: #fde68a !important;
}

/* Bottom guarantee row (สั่งวันนี้ จัดส่ง / รับประกัน) — was light cream */
body.mode-dark .sp-detail-guarantee-row,
body.mode-dark .sp-detail-guarantee-row * {
    background: var(--sp-surface) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}

/* The 3 promo cards on home (แผ่นแถมฟรี / ส่งฟรี EMS / ขายดีตามหมวด)
   — orange tint in dark mode looks empty; give them tinted dark surface */
body.mode-dark .sp-home-promo-card,
body.mode-dark [class*="home-promo"],
body.mode-dark .sp-promo-card {
    background: var(--sp-surface) !important;
    border-color: var(--sp-border) !important;
    color: var(--sp-text) !important;
}
body.mode-dark .sp-home-promo-card *,
body.mode-dark [class*="home-promo"] *,
body.mode-dark .sp-promo-card * {
    color: var(--sp-text) !important;
}

/* ============================================================
 * Round 7 — Mycart specific: dividers + freebox suggest +
 *           preserve LINE login button green
 * ============================================================ */

/* Many cart/detail sections use HARDCODED #f5f5f5 borders that look
   white-ish on dark surface. Force them to use dark-mode token. */
body.mode-dark .sp-cart-item,
body.mode-dark .sp-coupon-row,
body.mode-dark .sp-title-block,
body.mode-dark .sp-variant-block,
body.mode-dark .sp-info-bar,
body.mode-dark .sp-tmdb-block,
body.mode-dark .sp-tmdb-sect,
body.mode-dark .sp-recommend,
body.mode-dark .sp-detail-title-block,
body.mode-dark .sp-detail-section,
body.mode-dark .sp-stats-row,
body.mode-dark .sp-claim-product,
body.mode-dark .sp-drawer-group,
body.mode-dark .sp-grid-h,
body.mode-dark .sp-freebox-auto-suggest,
body.mode-dark [class*="cart-row"],
body.mode-dark [class*="cart-block"],
body.mode-dark [class*="cart-section"] {
    border-color: var(--sp-border) !important;
}

/* "ระบบเลือกให้ฟรี" suggestion card: cream gradient → dark surface,
   text was gray-on-cream — now light on dark */
body.mode-dark .sp-freebox-auto-suggest {
    background: var(--sp-surface-2) !important;
    background-image: none !important;
    color: var(--sp-text) !important;
}
body.mode-dark .sp-freebox-auto-suggest *,
body.mode-dark .sp-auto-text,
body.mode-dark .sp-auto-name,
body.mode-dark .sp-auto-savings {
    color: var(--sp-text) !important;
}
body.mode-dark .sp-auto-label {
    color: var(--sp-primary-light) !important;
}

/* "เข้าสู่ระบบ" cart coupon button — must STAY LINE green + white text
   (Yut: ปุ่มเขียว text ขาว ไม่ต้องให้เปลี่ยนสี). Otherwise the global
   "body.mode-dark a" rule turns text orange. */
body.mode-dark .sp-coupon-login-btn,
body.mode-dark a.sp-coupon-login-btn,
body.mode-dark a.sp-coupon-login-btn:hover,
body.mode-dark a.sp-coupon-login-btn:visited {
    background: #06c755 !important;
    color: #fff !important;
    border-color: #06c755 !important;
}

/* Free-item cart row had #fffaf0 cream background — flatten in dark */
body.mode-dark .sp-cart-item.is-free {
    background: var(--sp-surface-2) !important;
    background-image: none !important;
}

/* Bottom-fixed nav + sticky bars use hardcoded #eee border-top that
   appears as bright white strip on dark surface. Force dark border. */
body.mode-dark .sp-bottom-nav,
body.mode-dark .sp-sticky-bottom,
body.mode-dark .sp-cart-sticky,
body.mode-dark .sp-cart-total-hint,
body.mode-dark .sp-checkout-row.total,
body.mode-dark [class*="sticky-bottom"],
body.mode-dark [class*="bottom-nav"] {
    border-color: var(--sp-border) !important;
    border-top-color: var(--sp-border) !important;
}

/* Round 7b — broad sweep: any #eee/#f5f5f5/#efefef border-color
   pattern in common section/card classes. Targets borders not
   covered elsewhere. */
body.mode-dark .sp-card,
body.mode-dark .sp-section,
body.mode-dark .sp-block,
body.mode-dark [class*="-divider"],
body.mode-dark [class*="-separator"],
body.mode-dark .sp-tmdb-tabs-row,
body.mode-dark .sp-tmdb-tab,
body.mode-dark .sp-detail-info-row,
body.mode-dark .sp-detail-stat-row,
body.mode-dark .sp-detail-meta-row,
body.mode-dark .sp-rev-row,
body.mode-dark .sp-rev-item,
body.mode-dark .sp-myorder-row,
body.mode-dark .sp-myorder-card,
body.mode-dark .sp-form-section-title {
    border-color: var(--sp-border) !important;
}

/* ============================================================
 * Round 8 — Detail page: gold strips → dark gradient,
 *           trust-rows dividers, info-tabs active button
 * ============================================================ */

/* Gold "สั่งแผ่นนี้ใช้คูปองได้" / "ซื้อ ฿259 ได้ฟรี EMS" rotator strip
   — Yut: ดำไปเหลือง → ดำไปเทาเข้ม */
body.mode-dark .sp-signal-rotator {
    background: linear-gradient(90deg, #0a0a0a 0%, #2a2a2a 100%) !important;
    background-image: linear-gradient(90deg, #0a0a0a 0%, #2a2a2a 100%) !important;
    border-left-color: var(--sp-text-dim) !important;
}
/* Signal text colors stay readable on dark gradient */
body.mode-dark .sp-signal-text.sp-signal-success { color: #34d399 !important; }
body.mode-dark .sp-signal-text.sp-signal-urgent { color: #f87171 !important; }
body.mode-dark .sp-signal-text.sp-signal-normal { color: #fbbf24 !important; }

/* Trust rows (สั่งวันนี้ + รับประกัน + ขายดีอันดับ) — borders + highlight */
body.mode-dark .sp-trust-rows,
body.mode-dark .sp-trust-row,
body.mode-dark .sp-trust-pair,
body.mode-dark .sp-trust-cell + .sp-trust-cell {
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-trust-rows {
    background: var(--sp-surface) !important;
}
body.mode-dark .sp-trust-row,
body.mode-dark .sp-trust-cell {
    color: var(--sp-text) !important;
}
/* "ขายดีอันดับ" gold-orange highlight → dark gradient (ดำไปเทาเข้ม)
   keep gold accent text so badge identity stays */
body.mode-dark .sp-trust-row.is-highlight {
    background: linear-gradient(90deg, #0a0a0a 0%, #2a2a2a 100%) !important;
    color: #fbbf24 !important;
}
body.mode-dark .sp-trust-row.is-highlight .sp-trust-row-sub,
body.mode-dark .sp-trust-row.is-highlight .sp-trust-row-arrow {
    color: #fbbf24 !important;
}

/* Tabs "ข้อมูลภาพยนตร์" — active tab had white gradient background
   that didn't change in dark mode. Force dark gradient. */
body.mode-dark .sp-info-tabs .sp-tabs-nav,
body.mode-dark .sp-info-tabs .sp-tabs-nav.is-stuck {
    background: var(--sp-surface) !important;
    border-bottom-color: var(--sp-border) !important;
}
body.mode-dark .sp-info-tabs .sp-tab-btn {
    color: var(--sp-text-dim) !important;
}
body.mode-dark .sp-info-tabs .sp-tab-btn.is-active {
    color: var(--sp-primary) !important;
    background: linear-gradient(180deg, var(--sp-surface) 60%, var(--sp-surface-2) 100%) !important;
    background-image: linear-gradient(180deg, var(--sp-surface) 60%, var(--sp-surface-2) 100%) !important;
}
body.mode-dark .sp-info-tabs .sp-tab-count { color: var(--sp-text-dim) !important; }
body.mode-dark .sp-info-tabs .sp-tab-btn.is-active .sp-tab-count {
    color: var(--sp-primary) !important;
}
body.mode-dark .sp-info-tabs .sp-tab-pane { background: var(--sp-surface) !important; }

/* Bestseller subnav tabs (sp-bsl-tabs) border was #eee */
body.mode-dark .sp-bsl-tabs {
    border-bottom-color: var(--sp-border) !important;
}

/* ============================================================
 * Round 9 — Mycart freebox + section gaps
 *  Yut: ช่องว่างบน "เข้าสู่ระบบเพื่อใช้คูปอง" ยังสว่าง — ใช้เทาเข้ม
 * ============================================================ */

/* Freebox panel "ของแถมฟรี" — was cream gradient with 6px f5f5f5
   border-top (= the bright "gap" visible above coupon-login row) */
body.mode-dark .sp-cart-root .sp-cart-freebox,
body.mode-dark .sp-cart-freebox {
    background: var(--sp-surface) !important;
    background-image: none !important;
    border-top: 6px solid var(--sp-bg) !important;
    border-bottom: 1px solid var(--sp-border) !important;
    color: var(--sp-text) !important;
}
body.mode-dark .sp-freebox-head {
    color: var(--sp-text) !important;
}
body.mode-dark .sp-freebox-row {
    border-top-color: var(--sp-border) !important;
}
body.mode-dark .sp-freebox-variant,
body.mode-dark .sp-freebox-status,
body.mode-dark .sp-freebox-info * {
    color: var(--sp-text) !important;
}
body.mode-dark .sp-freebox-status { color: var(--sp-text-dim) !important; }
body.mode-dark .sp-freebox-entitled,
body.mode-dark .sp-freebox-done { color: #34d399 !important; }
body.mode-dark .sp-freebox-remain { color: #f87171 !important; }

/* Generic 6px / 8px section gap thick borders that look bright */
body.mode-dark *[style*="border-top: 6px"],
body.mode-dark *[style*="border-top: 8px"] {
    /* Inline styles can't be overridden by class — leave for case-by-case */
}
/* Class-based: the 8px section divider used across detail page */
body.mode-dark .sp-title-block,
body.mode-dark .sp-detail-title-block,
body.mode-dark .sp-detail-section,
body.mode-dark .sp-variant-block,
body.mode-dark .sp-info-bar,
body.mode-dark .sp-tmdb-block,
body.mode-dark .sp-recommend {
    /* Already in Round 7 but ensure border replaces 8px solid #f5f5f5 with var(--sp-bg)
       so the gap reads as page background not bright divider */
    border-bottom-color: var(--sp-bg) !important;
}

/* ============================================================
 * Round 10 — Site-wide light-border sweep (Yut: ไล่ทุกหน้าเลย)
 * Converts hardcoded #fff/#eee/#f5f5f5/#e5e5e5 borders on layout
 * elements to dark var(--sp-border). Specific colored borders
 * (BD/4K accent, primary tabs, login green) preserved via
 * higher-specificity rules above (they have more class compounds).
 * ============================================================ */
body.mode-dark [class^="sp-"][class*="-row"],
body.mode-dark [class^="sp-"][class*="-card"],
body.mode-dark [class^="sp-"][class*="-block"],
body.mode-dark [class^="sp-"][class*="-section"],
body.mode-dark [class^="sp-"][class*="-bar"],
body.mode-dark [class^="sp-"][class*="-list"],
body.mode-dark [class^="sp-"][class*="-item"],
body.mode-dark [class^="sp-"][class*="-tile"],
body.mode-dark [class^="sp-"][class*="-cell"],
body.mode-dark [class^="sp-"][class*="-group"],
body.mode-dark [class^="sp-"][class*="-panel"],
body.mode-dark [class^="sp-"][class*="-tabs"],
body.mode-dark [class^="sp-"][class*="-pair"],
body.mode-dark [class^="sp-"][class*="-strip"],
body.mode-dark [class^="sp-"][class*="-frame"],
body.mode-dark [class^="sp-"][class*="-wrap"],
body.mode-dark [class^="sp-"][class*="-box"]:not([class*="freebox"]),
body.mode-dark [class^="sp-"][class*="-link"],
body.mode-dark [class^="sp-"][class*="-grid"],
body.mode-dark [class^="sp-"][class*="-menu"],
body.mode-dark [class^="sp-"][class*="-page"] {
    border-color: var(--sp-border) !important;
}

/* Re-assert active state primary borders (specificity > blanket) */
body.mode-dark .sp-info-tabs .sp-tab-btn.is-active,
body.mode-dark .sp-bsl-tab.active,
body.mode-dark .sp-tab-btn.is-active {
    border-bottom-color: var(--sp-primary) !important;
}

/* Re-assert disc-type accent borders (Round 6 — specificity 0,3,1) */
body.mode-dark .sp-best-card.is-dvd { border-color: #fbbf24 !important; }
body.mode-dark .sp-best-card.is-bd { border-color: #06b6d4 !important; }
body.mode-dark .sp-best-card.is-bd50 { border-color: #60a5fa !important; }
body.mode-dark .sp-best-card.is-uhd { border-color: #d1d5db !important; }

/* HR / table / fieldset elements */
body.mode-dark hr,
body.mode-dark fieldset,
body.mode-dark table,
body.mode-dark th, body.mode-dark td {
    border-color: var(--sp-border) !important;
}

/* ============================================================
 * Round 11 — Poster/image fallback backgrounds
 * Yut: "ภาพโปสเตอร์มันสั้น (Bluray sleeve) แล้วมีพื้นสีเทาอ่อนโผล่ออกมาโดด"
 * Posters that are shorter than 2:3 aspect-ratio show #eee/#f0f0f0
 * placeholder bg below the actual image — bright on dark surface.
 * Replace with dark surface so empty area blends in.
 * ============================================================ */
body.mode-dark .sp-card-img,
body.mode-dark .sp-card-vdo-strip-img,
body.mode-dark .sp-bsl-img,
body.mode-dark .sp-tmdb-coll-poster,
body.mode-dark .sp-mini-card .img,
body.mode-dark .sp-vfeed-buysheet-img,
body.mode-dark .sp-buy-sheet-img,
body.mode-dark [class*="poster"],
body.mode-dark [class*="-img"][class*="card"],
body.mode-dark [class*="thumb"]:not(button):not(a) {
    background-color: var(--sp-surface-2) !important;
}
/* Skeleton-loader gradient (#eee → #f5f5f5 shimmer) — needs dark version */
body.mode-dark [class*="skeleton"],
body.mode-dark [class*="-loader"] {
    background: linear-gradient(90deg, var(--sp-surface) 0%, var(--sp-surface-2) 50%, var(--sp-surface) 100%) !important;
}

/* ============================================================
 * Round 12 — Bestseller-card disc-variant white→cream gradients
 * Yut: "ภาพสินค้ามีมุมโค้ง ทำให้เห็นพื้นหลังที่ยังเป็นสีสว่าง"
 * Each is-dvd/is-bd/is-bd50/is-uhd variant has gradient starting
 * from #fff which shows through rounded image corners. Flatten
 * to dark surface in dark mode. (Borders preserved bright via
 * Round 6 specific overrides above.)
 * ============================================================ */
body.mode-dark .sp-best-card,
body.mode-dark .sp-best-card.is-dvd,
body.mode-dark .sp-best-card.is-bd,
body.mode-dark .sp-best-card.is-bd50,
body.mode-dark .sp-best-card.is-uhd {
    background: var(--sp-surface) !important;
    background-image: none !important;
}
/* Inner image area also dark so empty corners blend */
body.mode-dark .sp-best-card .img {
    background: var(--sp-surface-2) !important;
}
/* Crown + label colors stay bright variant tones for disc-type identity */
body.mode-dark .sp-best-card.is-dvd .crown,
body.mode-dark .sp-best-card.is-dvd .label { color: #fbbf24 !important; }
body.mode-dark .sp-best-card.is-bd .crown,
body.mode-dark .sp-best-card.is-bd .label { color: #06b6d4 !important; }
body.mode-dark .sp-best-card.is-bd50 .crown,
body.mode-dark .sp-best-card.is-bd50 .label { color: #60a5fa !important; }
body.mode-dark .sp-best-card.is-uhd .crown { color: #d1d5db !important; }
body.mode-dark .sp-best-card.is-uhd .label { color: var(--sp-text) !important; }

/* ============================================================
 * Round 13 — Bestseller pill badge text white, card-img bg blend
 * Yut: "badge font ฟ้า อ่านไม่ออก เอา font ขาว"
 *      "bg หลังภาพ ปรับสีได้มั้ย มันไม่ dark"
 * .sp-card-bestseller is <a> so global "body.mode-dark a" rule
 * was forcing primary-light color on its #fff text. Force white.
 * Also blend .sp-card-img bg with card surface (no lighter gap).
 * ============================================================ */
body.mode-dark a.sp-card-bestseller,
body.mode-dark .sp-card-bestseller,
body.mode-dark a.sp-card-bestseller:hover,
body.mode-dark a.sp-card-bestseller:visited,
body.mode-dark a.sp-card-bestseller:active {
    color: #fff !important;
}

/* ============================================================
 * Round 16 — Site-wide sweep: ALL pill/badge/CTA anchors with
 *   colored gradient backgrounds must keep white text in dark mode
 *   (Yut: "ไล่ในทุกๆ ก้อน ทุกๆหน้า น่าจะถูกใจ ลูกค้าที่สั่ง ขายดี")
 *   Otherwise the global "body.mode-dark a" rule paints them as
 *   primary-light = wrong-colored text on colored bg.
 * ============================================================ */
body.mode-dark a.sp-vfeed-cta,
body.mode-dark a.sp-vfeed-cta-btn,
body.mode-dark a.sp-cart-checkout-btn,
body.mode-dark a.sp-auth-btn,
body.mode-dark a.sp-auth-btn-secondary,
body.mode-dark a.sp-empty-cta,
body.mode-dark a.sp-bottom-promo,
body.mode-dark a.sp-coupon,
body.mode-dark a.sp-coupon-pick-btn,
body.mode-dark a.sp-coupon-apply,
body.mode-dark a.sp-buy-sheet-cta,
body.mode-dark a.sp-bnav-item.active,
body.mode-dark a.sp-fav-cta,
body.mode-dark a.sp-bsl-pill.active,
body.mode-dark a.sp-list-hero-tag,
body.mode-dark a.sp-bs-pill,
body.mode-dark a.sp-bs-action,
body.mode-dark a.sp-bs-cta,
body.mode-dark a.sp-cart-buy,
body.mode-dark a.sp-cart-checkout,
body.mode-dark a.sp-buy-cta,
body.mode-dark a.sp-rev-cta,
body.mode-dark a.sp-rev-helpful,
body.mode-dark a.sp-orders-action,
body.mode-dark a.sp-myorder-action,
body.mode-dark a.sp-trust-row.is-highlight,
body.mode-dark a.sp-vfeed-side-btn-cta,
body.mode-dark a.sp-best-card .label,
body.mode-dark a[class*="-cta"]:not(.sp-list-hero):not([class*="link"]),
body.mode-dark a[class*="-btn"]:not(.sp-coupon-input-toggle):not(.sp-vfeed-side-btn):not(.sp-bb-side-icon):not(.sp-vfeed-back):not(.sp-vfeed-home),
body.mode-dark a[class*="-pill"].active,
body.mode-dark a.sp-card-badge,
body.mode-dark a[class*="card-badge"],
body.mode-dark a[class*="card-bestseller"],
body.mode-dark a[class*="card-best-strip"],
body.mode-dark a[class*="card-rank"],
body.mode-dark a[class*="card-trending"],
body.mode-dark a[class*="card-buyers"],
body.mode-dark a[class*="card-recently"] {
    color: #fff !important;
}
/* Same for nested children (icon spans, label spans) inside these anchors */
body.mode-dark a.sp-vfeed-cta *,
body.mode-dark a.sp-cart-checkout-btn *,
body.mode-dark a.sp-auth-btn *,
body.mode-dark a.sp-empty-cta *,
body.mode-dark a.sp-bottom-promo *:not(.btn):not(.close),
body.mode-dark a.sp-coupon *,
body.mode-dark a.sp-buy-sheet-cta * {
    color: #fff !important;
}

/* ============================================================
 * Round 17 — "✓ เลือกแถมครบแล้ว" success row
 *   bg #f0fdf4 (pale green) → translucent dark green
 *   text #15803d (dark green) → bright #34d399
 * ============================================================ */
body.mode-dark .sp-freebox-done-row {
    background: rgba(52, 211, 153, 0.12) !important;
    border-left-color: #34d399 !important;
}
body.mode-dark .sp-freebox-done-row .sp-freebox-variant,
body.mode-dark .sp-freebox-done-row .sp-freebox-variant strong {
    color: #34d399 !important;
}
body.mode-dark .sp-freebox-done-row * {
    color: #34d399 !important;
}

/* ============================================================
 * Round 18 — Feed/detail side icons (แชท/ตะกร้า) follow theme
 *   Round 16 blanket "a[class*='-btn']" was forcing #fff on these.
 *   Now explicitly enforce var(--sp-primary) so chat/cart icons
 *   color-shift with theme (orange → cyan → purple → etc.)
 *   SVGs use stroke="currentColor" already — so this color cascades.
 * ============================================================ */
body.mode-dark a.sp-vfeed-side-btn,
body.mode-dark a.sp-bb-side-icon,
body.mode-dark .sp-vfeed-actions .sp-vfeed-side-btn,
body.mode-dark .sp-sticky-v2 .sp-bb-side-icon {
    color: var(--sp-primary) !important;
    background: var(--sp-surface) !important;
}
body.mode-dark a.sp-vfeed-side-btn .lbl,
body.mode-dark a.sp-bb-side-icon .lbl,
body.mode-dark .sp-vfeed-actions .sp-vfeed-side-btn .lbl,
body.mode-dark .sp-sticky-v2 .sp-bb-side-icon .lbl {
    color: var(--sp-text-dim) !important;
}
/* Side btn dividers (border-right #f5f5f5) → dark */
body.mode-dark .sp-vfeed-actions .sp-vfeed-side-btn,
body.mode-dark .sp-sticky-v2 .sp-bb-side-icon {
    border-right-color: var(--sp-border) !important;
}

/* IMDb yellow badge always uses black text (IMDb brand standard).
   Lock !important so dark-mode body.mode-dark text rules can't flip it. */
body.mode-dark .score-badge.imdb,
body.mode-dark .score-badge.imdb::before {
    color: #1a1a1a !important;
}

/* Card badges with light/yellow/amber bg → force dark text always
   (Yut: feed badge ดาว 7.4 IMDB พื้นสว่าง ตัวขาว อ่านไม่ได้)
   Also covers all rating num/count text in vfeed/detail. */
.sp-card-badge.is-rating,
.sp-card-badge.is-award,
.sp-vfeed-badge.is-rating,
.sp-vfeed-info-chip.is-rating,
body.mode-dark .sp-card-badge.is-rating,
body.mode-dark .sp-card-badge.is-award,
body.mode-dark .sp-vfeed-badge.is-rating,
body.mode-dark .sp-vfeed-info-chip.is-rating,
body.theme-gray .sp-card-badge.is-rating,
body.theme-gray .sp-card-badge.is-award,
body.theme-gray .sp-vfeed-badge.is-rating,
body.theme-gray .sp-vfeed-info-chip.is-rating {
    color: #1a1a1a !important;
    background: linear-gradient(135deg, #fbbf24, #f59e0b) !important;
}
/* Vfeed rating row "⭐ 7.4 (X รีวิว)" — primary token uses might invert in
   theme=black dark; use bright amber for star + text-dim for count */
body.theme-gray .sp-vfeed-rating-row .sp-vfeed-rating-num,
body.theme-gray .sp-vfeed-rating-num {
    color: #fbbf24 !important;
    font-weight: 700 !important;
}
body.theme-gray .sp-vfeed-rating-row .sp-vfeed-rating-count,
body.theme-gray .sp-vfeed-rating-count {
    color: var(--sp-text-dim) !important;
}
/* v286.99j (2026-05-11) Yut: "CERTIFIED FRESH มุมซ้ายบน ขาวล้วน อ่านไม่ได้".
   Fresh badge has WHITE background (var(--sp-surface)) so text MUST stay red, not white.
   Old rule (color:#fff !important) was wrong — comment said "fresh is green" but actual badge is white-bg/red-text. */
.sp-card-badge.is-fresh,
body.mode-dark .sp-card-badge.is-fresh,
body.theme-gray .sp-card-badge.is-fresh {
    color: #d63a1f !important;
    background: #ffffff !important;
    border: 1.5px solid #d63a1f !important;
}

/* Detail page audio/sub/award lang chips — protect their original dark text
   (Yut: พื้นสว่างตัวเทาอ่อน อ่านไม่ออก) */
body.mode-dark .sp-lang-chip,
body.theme-gray .sp-lang-chip { color: #075985 !important; }
body.mode-dark .sp-lang-chip.is-thai,
body.theme-gray .sp-lang-chip.is-thai { color: #b35900 !important; }
body.mode-dark .sp-lang-chip.sp-lang-sub:not(.is-thai),
body.theme-gray .sp-lang-chip.sp-lang-sub:not(.is-thai) { color: #5b21b6 !important; }
body.mode-dark .sp-lang-chip.sp-lang-sub.is-thai,
body.theme-gray .sp-lang-chip.sp-lang-sub.is-thai { color: #1f6a23 !important; }
body.mode-dark .sp-lang-chip.sp-lang-hit,
body.theme-gray .sp-lang-chip.sp-lang-hit { color: #9d174d !important; }
body.mode-dark .sp-lang-chip.sp-lang-award,
body.theme-gray .sp-lang-chip.sp-lang-award { color: #78350f !important; }
body.mode-dark .sp-lang-chip *,
body.theme-gray .sp-lang-chip * { color: inherit !important; }

/* Award pills (sp-award-pill — detail page) — protect their original colors */
body.mode-dark .sp-award-pill.is-oscar-w,
body.theme-gray .sp-award-pill.is-oscar-w { color: #1a1a1a !important; }
body.mode-dark .sp-award-pill.is-oscar-n,
body.theme-gray .sp-award-pill.is-oscar-n { color: #856404 !important; }
body.mode-dark .sp-award-pill.is-globe-n,
body.theme-gray .sp-award-pill.is-globe-n { color: #b45309 !important; }
body.mode-dark .sp-award-pill.is-emmy-n,
body.theme-gray .sp-award-pill.is-emmy-n { color: #92400e !important; }

/* Wishlist filter pills (.sp-wl-pill — "ทั้งหมด/ยังไม่ซื้อ/ซื้อแล้ว") had NO CSS
   so they inherited anchor color → white on white in dark mode. Style them. */
.sp-wl-purchased-tabs {
    display: flex; gap: 6px;
    padding: 8px 12px;
    overflow-x: auto;
    scrollbar-width: none;
}
.sp-wl-purchased-tabs::-webkit-scrollbar { display: none; }
.sp-wl-pill {
    flex-shrink: 0;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 6px 12px;
    border-radius: 16px;
    background: var(--sp-surface-2);
    border: 1px solid var(--sp-border);
    color: var(--sp-text);
    font-size: 12.5px;
    text-decoration: none;
    line-height: 1.3;
    white-space: nowrap;
}
.sp-wl-pill:active { opacity: 0.85; }
.sp-wl-pill.is-active {
    background: var(--sp-primary);
    border-color: var(--sp-primary);
    color: #fff;
}
.sp-wl-pill-count {
    background: rgba(0,0,0,0.08);
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10.5px;
}
.sp-wl-pill.is-active .sp-wl-pill-count {
    background: rgba(255,255,255,0.25);
    color: #fff;
}
body.mode-dark .sp-wl-pill {
    background: var(--sp-surface-2) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-wl-pill.is-active {
    background: var(--sp-primary) !important;
    color: #fff !important;
}
body.theme-gray .sp-wl-pill.is-active {
    background: #000 !important;
    color: #fff !important;
    border-color: #1f2937 !important;
}

/* vdo_feed coupon ribbon "ช้อปปิ้งคุ้มชัวร์" — orange cream gradient
   → dark gradient (ดำไปเทาเข้ม) in dark mode */
body.mode-dark .sp-vfeed-coupon-ribbon {
    background: linear-gradient(90deg, #0a0a0a 0%, #2a2a2a 100%) !important;
    background-image: linear-gradient(90deg, #0a0a0a 0%, #2a2a2a 100%) !important;
    color: var(--sp-primary-light) !important;
}
body.mode-dark .sp-vfeed-coupon-ribbon * {
    color: var(--sp-primary-light) !important;
}
body.mode-dark .sp-vfeed-coupon-ribbon:active {
    background: linear-gradient(90deg, #0a0a0a 0%, #1a1a1a 100%) !important;
}

/* Card image area bg: was --sp-surface-2 (#262626) which appears lighter
   on dark page. Use clear dark gray (#1a1a1a) so empty area reads as
   เทาเข้ม not bright. */
body.mode-dark .sp-card-img,
body.mode-dark .sp-card .sp-card-img,
body.mode-dark .sp-card-name-poster {
    background-color: #1a1a1a !important;
}
body.mode-dark .sp-best-card .img,
body.mode-dark .sp-bsl-img,
body.mode-dark .sp-tmdb-coll-poster,
body.mode-dark .sp-mini-card .img {
    background-color: #1a1a1a !important;
}
/* Card body itself surface (in case anchor color was leaking) */
body.mode-dark a.sp-card,
body.mode-dark a.sp-card:visited {
    background-color: var(--sp-surface) !important;
    color: var(--sp-text) !important;
}

/* ============================================================
 * Round 14 — Mycart remaining light bg sweep
 * Yut: "mycart bg ที่ยังเป็นสีขาวๆ เทาอ่อน ปรับเป็นเทาเข้ม"
 * ============================================================ */

/* "ยอดเยี่ยม! ส่งฟรี + ได้แถม X ชิ้น" celebrate strip */
body.mode-dark .sp-upsell-celebrate {
    background: var(--sp-surface-2) !important;
    background-image: none !important;
    color: #fbbf24 !important;
}
body.mode-dark .sp-upsell-celebrate-ico,
body.mode-dark .sp-upsell-celebrate-text,
body.mode-dark .sp-upsell-celebrate * {
    color: #fbbf24 !important;
}
body.mode-dark .sp-upsell-celebrate-text strong { color: #fde68a !important; }

/* Upsell bar 6px f5f5f5 divider — page bg gap */
body.mode-dark .sp-upsell-bar {
    border-bottom-color: var(--sp-bg) !important;
}

/* Cart issues alert (light red bg) — keep as warning but darker */
body.mode-dark .sp-cart-root .sp-cart-issues {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #fca5a5 !important;
}
body.mode-dark .sp-cart-root .sp-cart-item.has-issue {
    background: rgba(251, 191, 36, 0.08) !important;
    background-image: none !important;
}

/* Free-pick selector cream gradient → dark surface */
body.mode-dark .sp-cart-free-selector {
    background: var(--sp-surface-2) !important;
    background-image: none !important;
    border-color: var(--sp-primary) !important;
}

/* Sum total dashed border */
body.mode-dark .sp-cart-root .sp-sum-total,
body.mode-dark .sp-cart-total-hint,
body.mode-dark .sp-checkout-row.total {
    border-top-color: var(--sp-border) !important;
}

/* Cart sticky CTA bottom border */
body.mode-dark .sp-cart-root + .sp-cart-sticky,
body.mode-dark .sp-cart-root ~ .sp-cart-sticky,
body.mode-dark #spCartSticky.sp-cart-sticky {
    background: var(--sp-surface) !important;
    border-top-color: var(--sp-border) !important;
}

/* Flash expired cream badge → darker amber */
body.mode-dark .sp-cart-flash-expired {
    background: rgba(251, 191, 36, 0.15) !important;
    color: #fbbf24 !important;
    border-color: rgba(251, 191, 36, 0.4) !important;
}

/* ============================================================
 * Round 15 — Cart coupon section 6px divider (Yut: arrow points
 *   to white line/gap between "+ เลือกของเพิ่ม" and "เข้าสู่ระบบ")
 *   .sp-cart-coupon has border-top: 6px solid #f5f5f5
 * ============================================================ */
body.mode-dark .sp-cart-root .sp-cart-coupon,
body.mode-dark .sp-cart-coupon {
    border-top-color: var(--sp-bg) !important;
    background: var(--sp-surface) !important;
}

/* ===== Phase 1+2+3 additions (re-applied on top of pre-phase1 baseline) ===== */
   SORT + FILTER BAR (v286.99f Phase 1.4 — compact, flat-style)
   =========================== */
.sp-sort-filter-bar {
    position: sticky;
    top: 56px;
    z-index: 50;
    background: var(--sp-surface);
    border-bottom: 1px solid var(--sp-border, #eee);
    padding: 4px 12px;
}
.sp-sort-row {
    display: flex;
    align-items: center;
    gap: 0;
    overflow: hidden;
}
.sp-sort-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 6px 8px 0;
    background: transparent;
    border: none;
    color: var(--sp-text-dim, #6b7280);
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1.2;
}
.sp-sort-trigger strong {
    font-weight: 600;
    color: var(--sp-text, #1f2937);
    margin-left: 2px;
}
.sp-sort-trigger:hover strong,
.sp-sort-trigger[aria-expanded="true"] strong { color: var(--sp-primary); }
.sp-sort-trigger[aria-expanded="true"] { color: var(--sp-primary); }
.sp-sort-trigger svg { transition: transform 0.15s ease; opacity: 0.55; }
.sp-sort-trigger[aria-expanded="true"] svg { transform: rotate(180deg); opacity: 1; color: var(--sp-primary); }

.sp-filter-chips-scroll {
    flex: 1;
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    min-width: 0;
}
.sp-filter-chips-scroll::-webkit-scrollbar { display: none; }
.sp-sort-spacer { flex: 1; }
.sp-filter-chip {
    flex-shrink: 0;
    padding: 7px 12px;
    background: var(--sp-bg);
    border: 1px solid var(--sp-border, #e5e7eb);
    border-radius: 18px;
    color: var(--sp-text, #1f2937);
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.3;
    transition: all 0.15s;
}
.sp-filter-chip.is-active {
    background: var(--sp-primary);
    border-color: var(--sp-primary);
    color: #fff;
    font-weight: 600;
}
.sp-filter-chip:active { transform: scale(0.96); }

.sp-filter-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 0 8px 6px;
    background: transparent;
    border: none;
    color: var(--sp-text-dim, #6b7280);
    font-size: 13px;
    cursor: pointer;
    flex-shrink: 0;
    position: relative;
    border-left: 1px solid var(--sp-border, #f3f4f6);
}
.sp-filter-trigger:hover { color: var(--sp-primary); }
.sp-filter-trigger.has-active { color: var(--sp-primary); }
.sp-filter-trigger.has-active::after {
    content: '';
    position: absolute;
    top: 5px; right: -2px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--sp-primary);
    border: 1.5px solid var(--sp-surface);
}
.sp-filter-trigger-label { font-size: 13px; font-weight: 600; }
.sp-filter-trigger svg { opacity: 0.6; }
.sp-filter-trigger.has-active svg { opacity: 1; }

.sp-sort-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    left: 12px;
    min-width: 220px;
    background: var(--sp-surface);
    border: 1px solid var(--sp-border, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    z-index: 100;
    display: none;
    overflow: hidden;
}
.sp-sort-dropdown.show { display: block; animation: sp-sort-dd-in 0.12s ease-out; }
@keyframes sp-sort-dd-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.sp-sort-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    color: var(--sp-text, #1f2937);
    font-size: 14px;
    text-decoration: none;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.1s;
}
.sp-sort-item:last-child { border-bottom: none; }
.sp-sort-item:hover { background: var(--sp-bg); }
.sp-sort-item.is-active {
    color: var(--sp-primary);
    font-weight: 600;
    background: rgba(238, 77, 45, 0.04);
}

/* Dark mode */
body.mode-dark .sp-sort-filter-bar {
    background: var(--sp-surface);
    border-bottom-color: var(--sp-border);
}
body.mode-dark .sp-sort-trigger,
body.mode-dark .sp-filter-trigger,
body.mode-dark .sp-filter-chip {
    background: var(--sp-surface-2, #2a2a2a);
    border-color: var(--sp-border, #3a3a3a);
    color: var(--sp-text, #e5e7eb);
}
body.mode-dark .sp-filter-chip.is-active {
    background: var(--sp-primary);
    border-color: var(--sp-primary);
    color: #fff;
}
body.mode-dark .sp-sort-dropdown {
    background: var(--sp-surface);
    border-color: var(--sp-border);
}
body.mode-dark .sp-sort-item {
    color: var(--sp-text);
    border-bottom-color: var(--sp-border);
}
body.mode-dark .sp-sort-item:hover { background: var(--sp-surface-2); }

/* ===========================
   FILTER SHEET MODAL (v286.99f Phase 1.5)
   =========================== */
.sp-filter-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.sp-filter-sheet-backdrop.show { opacity: 1; }
.sp-filter-sheet-backdrop[hidden] { display: none !important; }

.sp-filter-sheet {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(92vw, 420px);
    background: var(--sp-surface);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
.sp-filter-sheet.show { transform: translateX(0); }
.sp-filter-sheet[hidden] { display: none !important; }

.sp-fs-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--sp-border, #e5e7eb);
    flex-shrink: 0;
}
.sp-fs-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--sp-text, #1f2937);
}
.sp-fs-close {
    background: transparent;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--sp-text-dim, #6b7280);
    line-height: 0;
    border-radius: 50%;
}
.sp-fs-close:hover { background: var(--sp-bg); color: var(--sp-text); }

.sp-fs-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px 80px;
    -webkit-overflow-scrolling: touch;
}

.sp-fs-sect {
    margin-bottom: 20px;
}
.sp-fs-sect:last-child { margin-bottom: 0; }
.sp-fs-h {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
    color: var(--sp-text, #1f2937);
}
.sp-fs-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.sp-fs-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    background: var(--sp-bg, #f3f4f6);
    border: 1px solid transparent;
    border-radius: 18px;
    font-size: 13px;
    color: var(--sp-text, #1f2937);
    cursor: pointer;
    transition: all 0.12s;
    user-select: none;
}
.sp-fs-chip input { display: none; }
.sp-fs-chip:hover { background: #e5e7eb; }
.sp-fs-chip.is-active {
    background: rgba(238, 77, 45, 0.08);
    border-color: var(--sp-primary);
    color: var(--sp-primary);
    font-weight: 600;
}
.sp-fs-chip-btn {
    background: var(--sp-bg, #f3f4f6);
    border: 1px solid transparent;
    font-family: inherit;
}

.sp-fs-price-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
}
.sp-fs-price-inputs input {
    flex: 1;
    padding: 9px 12px;
    border: 1px solid var(--sp-border, #e5e7eb);
    border-radius: 6px;
    font-size: 13px;
    color: var(--sp-text, #1f2937);
    background: var(--sp-surface);
    outline: none;
    transition: border-color 0.15s;
}
.sp-fs-price-inputs input:focus { border-color: var(--sp-primary); }
.sp-fs-price-inputs span { color: var(--sp-text-dim, #9ca3af); flex-shrink: 0; }

.sp-fs-foot {
    display: flex;
    gap: 10px;
    padding: 12px 14px;
    border-top: 1px solid var(--sp-border, #e5e7eb);
    background: var(--sp-surface);
    flex-shrink: 0;
}
.sp-fs-clear, .sp-fs-apply {
    flex: 1;
    padding: 12px 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    line-height: 1;
}
.sp-fs-clear {
    background: transparent;
    color: var(--sp-primary);
    border: 1px solid var(--sp-primary);
}
.sp-fs-apply {
    background: var(--sp-primary);
    color: #fff;
}
.sp-fs-clear:hover { background: rgba(238, 77, 45, 0.06); }
.sp-fs-apply:active { transform: scale(0.98); }

body.mode-dark .sp-filter-sheet {
    background: var(--sp-surface);
    color: var(--sp-text);
}
body.mode-dark .sp-fs-chip {
    background: var(--sp-surface-2, #2a2a2a);
    color: var(--sp-text);
}
body.mode-dark .sp-fs-chip.is-active {
    background: rgba(238, 77, 45, 0.18);
    color: var(--sp-primary);
}
body.mode-dark .sp-fs-price-inputs input {
    background: var(--sp-surface-2, #2a2a2a);
    border-color: var(--sp-border);
    color: var(--sp-text);
}

/* ===========================
   VS SHOPEE WIDGET (v286.99f Phase 1.6)
   =========================== */
.sp-vs-shopee {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin: 8px 0;
    background: linear-gradient(135deg, #fff8f0 0%, #fff4e8 100%);
    border: 1px solid #ffd9a8;
    border-radius: 10px;
    color: #92400e;
}
.sp-vs-shopee .vs-icon {
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1;
}
.sp-vs-shopee .vs-text {
    flex: 1;
    min-width: 0;
}
.sp-vs-shopee .vs-text strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #c2410c;
    line-height: 1.3;
}
.sp-vs-shopee .vs-sub {
    font-size: 11.5px;
    color: #92400e;
    margin-top: 2px;
    line-height: 1.3;
}
body.mode-dark .sp-vs-shopee {
    background: linear-gradient(135deg, rgba(194, 65, 12, 0.12) 0%, rgba(146, 64, 14, 0.10) 100%);
    border-color: rgba(255, 215, 168, 0.25);
    color: #fde68a;
}
body.mode-dark .sp-vs-shopee .vs-text strong { color: #fdba74; }
body.mode-dark .sp-vs-shopee .vs-sub { color: #fde68a; opacity: 0.85; }

/* ===========================
   ฉัน HUB (v286.99f Phase 1.7)
   =========================== */
.sp-me-hub {
    padding-bottom: 80px;
    background: var(--sp-bg, #f5f5f5);
}

/* === Profile header === */
.sp-me-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px;
    background: linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-primary-light, #ff6b1a) 100%);
    color: #fff;
    flex-wrap: wrap;
}
.sp-me-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    border: 2px solid rgba(255,255,255,0.4);
}
.sp-me-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sp-me-avatar-fallback { font-size: 30px; line-height: 1; }
.sp-me-info {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}
.sp-me-name {
    font-size: 17px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sp-me-sub {
    font-size: 12px;
    opacity: 0.85;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sp-me-tier {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(255,255,255,0.22);
    color: #fff;
    letter-spacing: 0.3px;
}
.sp-me-tier-bronze   { background: linear-gradient(90deg, #d97706, #b45309); }
.sp-me-tier-silver   { background: linear-gradient(90deg, #94a3b8, #64748b); }
.sp-me-tier-gold     { background: linear-gradient(90deg, #fbbf24, #f59e0b); color: #422006; }
.sp-me-tier-platinum { background: linear-gradient(90deg, #e0e7ff, #c7d2fe); color: #312e81; }

.sp-me-edit {
    color: #fff;
    background: rgba(255,255,255,0.18);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sp-me-edit:hover { background: rgba(255,255,255,0.28); }

.sp-me-cta-wrap {
    width: 100%;
    display: flex;
    gap: 10px;
    margin-top: 12px;
}
.sp-me-cta {
    flex: 1;
    padding: 10px 0;
    text-align: center;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.15s;
}
.sp-me-cta-primary {
    background: #fff;
    color: var(--sp-primary);
}
.sp-me-cta-outline {
    background: transparent;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,0.7);
}
.sp-me-cta-primary:active { transform: scale(0.97); }

/* === Sections === */
.sp-me-section {
    margin-top: 10px;
    padding: 14px 16px;
    background: var(--sp-surface);
}
.sp-me-section-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.sp-me-section-h h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--sp-text, #1f2937);
}
.sp-me-h-link {
    font-size: 12px;
    color: var(--sp-text-dim, #6b7280);
    text-decoration: none;
}

/* === การซื้อของฉัน — 5-status grid === */
.sp-me-status-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
}
.sp-me-status-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    text-decoration: none;
    color: var(--sp-text, #1f2937);
    font-size: 11px;
    text-align: center;
    border-radius: 8px;
    transition: background 0.1s;
}
.sp-me-status-cell:active { background: var(--sp-bg); }
.sp-me-status-cell .ico {
    font-size: 24px;
    line-height: 1;
    position: relative;
}
.sp-me-status-cell .ico .badge {
    position: absolute;
    top: -4px;
    right: -10px;
    background: #ff424f;
    color: #fff;
    font-size: 9px;
    line-height: 14px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 9px;
    font-weight: 700;
    box-sizing: border-box;
}
.sp-me-status-cell .lbl {
    color: var(--sp-text-dim, #6b7280);
    line-height: 1.3;
}

/* === กิจกรรม — 4-link grid === */
.sp-me-link-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
}
.sp-me-link-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    text-decoration: none;
    color: var(--sp-text, #1f2937);
    font-size: 11px;
    text-align: center;
    border-radius: 8px;
    position: relative;
}
.sp-me-link-cell:active { background: var(--sp-bg); }
.sp-me-link-cell .ico { font-size: 22px; line-height: 1; }
.sp-me-link-cell .lbl { color: var(--sp-text-dim, #6b7280); }
.sp-me-link-cell .cnt {
    position: absolute;
    top: 6px; right: calc(50% - 22px);
    background: var(--sp-primary);
    color: #fff;
    font-size: 10px;
    line-height: 14px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    font-weight: 700;
    box-sizing: border-box;
}

/* === ช่วยเหลือ — list === */
.sp-me-link-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sp-me-link-list li { border-bottom: 1px solid var(--sp-border, #f3f4f6); }
.sp-me-link-list li:last-child { border-bottom: none; }
.sp-me-link-list li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    color: var(--sp-text, #1f2937);
    font-size: 14px;
    text-decoration: none;
}
.sp-me-link-list li a span:first-child { font-size: 18px; line-height: 1; }
.sp-me-link-list li a i {
    margin-left: auto;
    color: var(--sp-text-dim, #9ca3af);
    font-style: normal;
    font-size: 14px;
}

/* === Logout button === */
.sp-me-section-logout { background: transparent; padding: 8px 16px 16px; }
.sp-me-logout-btn {
    display: block;
    text-align: center;
    padding: 12px 0;
    background: var(--sp-surface);
    color: var(--sp-text-dim, #6b7280);
    border: 1px solid var(--sp-border, #e5e7eb);
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
.sp-me-logout-btn:hover { color: var(--sp-primary); border-color: var(--sp-primary); }

/* Dark mode */
body.mode-dark .sp-me-hub { background: var(--sp-bg); }
body.mode-dark .sp-me-section { background: var(--sp-surface); }
body.mode-dark .sp-me-status-cell,
body.mode-dark .sp-me-link-cell,
body.mode-dark .sp-me-link-list li a { color: var(--sp-text); }
body.mode-dark .sp-me-status-cell .lbl,
body.mode-dark .sp-me-link-cell .lbl,
body.mode-dark .sp-me-link-list li a i,
body.mode-dark .sp-me-section-h h2 { color: var(--sp-text-dim); }
body.mode-dark .sp-me-link-list li { border-bottom-color: var(--sp-border); }
body.mode-dark .sp-me-logout-btn {
    background: var(--sp-surface);
    color: var(--sp-text-dim);
    border-color: var(--sp-border);
}

/* ===========================
   หมวด HUB (categories_hub_mobile.php) — v286.99f Phase 1.2
   =========================== */
.sp-cathub {
    padding: 8px 0 80px;
    background: var(--sp-bg, #f5f5f5);
}
.sp-cathub-sect {
    background: var(--sp-surface);
    margin-bottom: 8px;
    padding: 14px 14px 10px;
}
.sp-cathub-h {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--sp-text, #1f2937);
    display: flex;
    align-items: center;
    gap: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--sp-border, #f3f4f6);
}
.sp-cathub-h-ico { font-size: 16px; line-height: 1; }
.sp-cathub-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px 4px;
}
.sp-cathub-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 2px;
    text-decoration: none;
    color: var(--sp-text, #1f2937);
    text-align: center;
    border-radius: 8px;
    transition: background 0.1s;
}
.sp-cathub-cell:active { background: var(--sp-bg, #f3f4f6); transform: scale(0.96); }
.sp-cathub-cell-ico {
    font-size: 26px;
    line-height: 1.1;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sp-bg, #f5f5f5);
    border-radius: 10px;
}
.sp-cathub-cell-lbl {
    font-size: 11px;
    line-height: 1.3;
    color: var(--sp-text-dim, #4b5563);
    word-break: break-word;
    max-width: 100%;
}
.sp-cathub-foot {
    padding: 14px 16px 8px;
    text-align: center;
}
.sp-cathub-foot-link {
    color: var(--sp-primary);
    font-size: 13px;
    text-decoration: none;
    font-weight: 600;
}
body.mode-dark .sp-cathub { background: var(--sp-bg); }
body.mode-dark .sp-cathub-sect { background: var(--sp-surface); }
body.mode-dark .sp-cathub-cell { color: var(--sp-text); }
body.mode-dark .sp-cathub-cell-lbl { color: var(--sp-text-dim); }
body.mode-dark .sp-cathub-cell-ico { background: var(--sp-surface-2, #2a2a2a); }
body.mode-dark .sp-cathub-h { color: var(--sp-text); border-bottom-color: var(--sp-border); }

/* ===========================
   ORDERS PAGE TABS (v286.99g Phase 2.1)
   =========================== */
.sp-orders-tabs {
    position: sticky;
    top: 56px;
    z-index: 50;
    background: var(--sp-surface);
    border-bottom: 1px solid var(--sp-border, #eee);
    display: flex;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 4px;
}
.sp-orders-tabs::-webkit-scrollbar { display: none; }
.sp-orders-tab {
    flex-shrink: 0;
    padding: 12px 14px 10px;
    color: var(--sp-text-dim, #6b7280);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}
.sp-orders-tab.is-active {
    color: var(--sp-primary);
    border-bottom-color: var(--sp-primary);
    font-weight: 700;
}
.sp-orders-tab:hover { color: var(--sp-primary); }

/* Action hint inside order card body */
.sp-order-action-hint {
    margin-top: 6px;
    padding: 6px 10px;
    background: rgba(238, 77, 45, 0.05);
    border-radius: 6px;
    font-size: 12px;
    color: var(--sp-primary);
    line-height: 1.4;
}

body.mode-dark .sp-orders-tabs {
    background: var(--sp-surface);
    border-bottom-color: var(--sp-border);
}
body.mode-dark .sp-orders-tab { color: var(--sp-text-dim); }
body.mode-dark .sp-orders-tab.is-active { color: var(--sp-primary); }
body.mode-dark .sp-order-action-hint {
    background: rgba(238, 77, 45, 0.10);
    color: var(--sp-primary);
}

/* ===========================
   PASTE-TO-PARSE ADDRESS HELPER (v286.99g Phase 2.2)
   =========================== */
.sp-paste-helper {
    background: linear-gradient(135deg, rgba(238, 77, 45, 0.05), rgba(238, 77, 45, 0.02));
    border: 1px dashed rgba(238, 77, 45, 0.3);
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 14px;
}
.sp-paste-helper-h {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--sp-primary);
}
.sp-paste-helper-h .ico { font-size: 14px; }
.sp-paste-helper-sub {
    font-size: 11.5px;
    color: var(--sp-text-dim, #6b7280);
    margin: 4px 0 8px;
    line-height: 1.4;
}
.sp-paste-helper textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1px solid var(--sp-border, #e5e7eb);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color: var(--sp-text);
    background: var(--sp-surface);
    resize: vertical;
    min-height: 60px;
    outline: none;
    line-height: 1.4;
}
.sp-paste-helper textarea:focus { border-color: var(--sp-primary); }
.sp-paste-btn {
    margin-top: 8px;
    background: var(--sp-primary);
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    transition: opacity 0.15s;
}
.sp-paste-btn:active { opacity: 0.85; transform: scale(0.99); }

/* Auto-fill highlight pulse */
@keyframes sp-autofill-pulse {
    0%   { background: rgba(238, 77, 45, 0.15); }
    100% { background: transparent; }
}
.sp-auth-field input.is-autofilled {
    animation: sp-autofill-pulse 1.4s ease-out;
}

body.mode-dark .sp-paste-helper {
    background: linear-gradient(135deg, rgba(238, 77, 45, 0.08), rgba(238, 77, 45, 0.03));
    border-color: rgba(238, 77, 45, 0.4);
}
body.mode-dark .sp-paste-helper textarea {
    background: var(--sp-surface-2, #2a2a2a);
    border-color: var(--sp-border);
    color: var(--sp-text);
}

/* ===========================
   SETTINGS PAGE (v286.99g Phase 2.5)
   =========================== */
.sp-settings {
    padding: 8px 0 80px;
    background: var(--sp-bg, #f5f5f5);
}
.sp-settings-sect {
    background: var(--sp-surface);
    margin-bottom: 8px;
    padding: 12px 16px;
}
.sp-settings-h {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sp-text-dim, #6b7280);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sp-settings-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sp-settings-list li { border-bottom: 1px solid var(--sp-border, #f3f4f6); }
.sp-settings-list li:last-child { border-bottom: none; }
.sp-settings-list li a,
.sp-settings-list li .sp-settings-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    color: var(--sp-text, #1f2937);
    font-size: 14px;
    text-decoration: none;
}
.sp-settings-list li a .ico,
.sp-settings-list li .sp-settings-row .ico {
    font-size: 18px;
    line-height: 1;
    width: 24px;
    text-align: center;
}
.sp-settings-list li a .lbl,
.sp-settings-list li .sp-settings-row .lbl { flex: 1; }
.sp-settings-list li a i {
    color: var(--sp-text-dim, #9ca3af);
    font-style: normal;
    font-size: 14px;
}

.sp-settings-pick {
    display: inline-flex;
    gap: 4px;
}
.sp-settings-pick-btn {
    padding: 5px 10px;
    border: 1px solid var(--sp-border, #e5e7eb);
    background: var(--sp-surface);
    color: var(--sp-text-dim, #6b7280);
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.12s;
}
.sp-settings-pick-btn.is-on {
    background: var(--sp-primary);
    border-color: var(--sp-primary);
    color: #fff;
    font-weight: 600;
}

.sp-settings-sect-logout {
    background: transparent;
    padding: 8px 16px 16px;
}
.sp-settings-logout-btn {
    display: block;
    text-align: center;
    padding: 12px 0;
    background: var(--sp-surface);
    color: var(--sp-text-dim, #6b7280);
    border: 1px solid var(--sp-border, #e5e7eb);
    border-radius: 8px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
.sp-settings-logout-btn:hover { color: var(--sp-primary); border-color: var(--sp-primary); }

/* === ABOUT (settings/about) === */
.sp-about {
    padding: 0 0 80px;
    background: var(--sp-bg, #f5f5f5);
    min-height: 60vh;
}
.sp-about-hero {
    background: var(--sp-surface);
    padding: 50px 16px 30px;
    text-align: center;
    margin-bottom: 8px;
}
.sp-about-logo {
    font-size: 50px;
    line-height: 1;
    margin-bottom: 12px;
}
.sp-about-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--sp-primary);
    letter-spacing: 1.5px;
    margin-bottom: 4px;
}
.sp-about-version {
    font-size: 12px;
    color: var(--sp-text-dim, #9ca3af);
}
.sp-about-list {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--sp-surface);
}
.sp-about-list li { border-bottom: 1px solid var(--sp-border, #f3f4f6); }
.sp-about-list li:last-child { border-bottom: none; }
.sp-about-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    color: var(--sp-text, #1f2937);
    font-size: 14px;
    text-decoration: none;
    background: none;
    border: none;
    width: 100%;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}
.sp-about-row .val { color: var(--sp-text-dim, #9ca3af); font-size: 13px; }

body.mode-dark .sp-settings,
body.mode-dark .sp-about { background: var(--sp-bg); }
body.mode-dark .sp-settings-sect,
body.mode-dark .sp-about-hero,
body.mode-dark .sp-about-list { background: var(--sp-surface); }
body.mode-dark .sp-settings-list li,
body.mode-dark .sp-about-list li { border-bottom-color: var(--sp-border); }
body.mode-dark .sp-settings-list li a,
body.mode-dark .sp-settings-list li .sp-settings-row,
body.mode-dark .sp-about-row { color: var(--sp-text); }
body.mode-dark .sp-settings-pick-btn {
    background: var(--sp-surface-2, #2a2a2a);
    border-color: var(--sp-border);
    color: var(--sp-text-dim);
}
body.mode-dark .sp-settings-pick-btn.is-on {
    background: var(--sp-primary);
    color: #fff;
}
body.mode-dark .sp-settings-logout-btn {
    background: var(--sp-surface);
    color: var(--sp-text-dim);
    border-color: var(--sp-border);
}

/* ===========================
   HELP CENTER (v286.99g Phase 2.6)
   =========================== */
.sp-help-hero {
    background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-light, #ff6b1a));
    color: #fff;
    padding: 24px 16px 30px;
    text-align: center;
}
.sp-help-hero-title {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
}
.sp-help-search {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 22px;
    padding: 8px 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.sp-help-search-icon {
    color: var(--sp-primary);
    margin-right: 8px;
    line-height: 0;
}
.sp-help-search input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    color: #1f2937;
}

.sp-help-sect {
    background: var(--sp-surface);
    margin-top: 8px;
    padding: 14px 16px;
}
.sp-help-sect-h {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--sp-text, #1f2937);
}

/* Self-service icons grid */
.sp-help-icon-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.sp-help-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 4px;
    text-decoration: none;
    color: var(--sp-text, #1f2937);
    text-align: center;
    border-radius: 8px;
    transition: background 0.1s;
}
.sp-help-icon:active { background: var(--sp-bg, #f5f5f5); }
.sp-help-icon .ico {
    font-size: 28px;
    line-height: 1.1;
    color: var(--sp-primary);
}
.sp-help-icon .lbl {
    font-size: 12px;
    color: var(--sp-text-dim, #6b7280);
    line-height: 1.3;
}

/* FAQ tabs */
.sp-help-tabs {
    display: flex;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-bottom: 1px solid var(--sp-border, #f3f4f6);
    margin-bottom: 12px;
}
.sp-help-tabs::-webkit-scrollbar { display: none; }
.sp-help-tab {
    flex-shrink: 0;
    padding: 10px 14px;
    background: transparent;
    border: none;
    color: var(--sp-text-dim, #6b7280);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}
.sp-help-tab.is-active {
    color: var(--sp-primary);
    border-bottom-color: var(--sp-primary);
    font-weight: 700;
}

.sp-help-tab-content { display: none; }
.sp-help-tab-content.is-active { display: block; }

.sp-help-faq-list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: faq;
}
.sp-help-faq-list li { border-bottom: 1px solid var(--sp-border, #f3f4f6); }
.sp-help-faq-list li:last-child { border-bottom: none; }
.sp-help-faq-list li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    color: var(--sp-text, #1f2937);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
}
.sp-help-faq-list li a .num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(238, 77, 45, 0.1);
    color: var(--sp-primary);
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sp-help-faq-list li a .q { flex: 1; }
.sp-help-faq-list li a i {
    color: var(--sp-text-dim, #9ca3af);
    font-style: normal;
}

/* Contact section */
.sp-help-contact {
    text-align: center;
    padding-bottom: 24px;
}
.sp-help-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    background: var(--sp-primary);
    color: #fff;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}
.sp-help-contact-btn:active { transform: scale(0.98); }
.sp-help-contact-note {
    margin: 10px 0 0;
    font-size: 12px;
    color: var(--sp-text-dim, #9ca3af);
}

body.mode-dark .sp-help-sect { background: var(--sp-surface); }
body.mode-dark .sp-help-search input { color: #1f2937; }
body.mode-dark .sp-help-icon { color: var(--sp-text); }
body.mode-dark .sp-help-icon .lbl { color: var(--sp-text-dim); }
body.mode-dark .sp-help-faq-list li { border-bottom-color: var(--sp-border); }
body.mode-dark .sp-help-faq-list li a { color: var(--sp-text); }
body.mode-dark .sp-help-tabs { border-bottom-color: var(--sp-border); }
body.mode-dark .sp-help-faq-list li a .num {
    background: rgba(238, 77, 45, 0.18);
}

/* Order ซื้ออีกครั้ง CTA (v286.99g Phase 2.7) */
.sp-order-card-cta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--sp-border, #f3f4f6);
    margin-top: 6px;
}
.sp-order-card-cta-row .sp-order-card-cta {
    border-top: none;
    padding-top: 0;
    margin: 0;
    flex: 1;
}
.sp-order-card-reorder {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--sp-primary);
    color: #fff;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1.2;
}
.sp-order-card-reorder:active { transform: scale(0.96); opacity: 0.9; }
body.mode-dark .sp-order-card-cta-row { border-top-color: var(--sp-border); }

/* ===========================
   DETAIL HERO VIDEO IN-PLACE (v286.99g Phase 3.1, #157)
   Yut: "ปุ่ม youtube เอาออก" — scale + crop iframe to hide YT branding
   =========================== */
.sp-hero-slide { overflow: hidden; }
.sp-hero-inplace-iframe {
    position: absolute;
    top: -3%;
    left: -3%;
    width: 106%;
    height: 106%;
    border: 0;
    background: #000;
    z-index: 5;
    /* v286.99g — block ALL taps on iframe so YT logo/share/title links can't bounce
       user out to youtube.com. Our custom controls (play/pause/speed/mute/seek) are
       DOM siblings, so they still work; YT API controls playback programmatically. */
    pointer-events: none;
}
/* Mask bottom: bigger to fully hide YT logo + share + thumbnail (CC removed → no caption clip) */
.sp-hero-inplace-mask-br {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 64px;
    background: #000;
    z-index: 6;
    pointer-events: none;
}
/* Mask top: cover YT title/channel info */
.sp-hero-inplace-mask-bl {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 56px;
    background: #000;
    z-index: 6;
    pointer-events: none;
}
.sp-hero-inplace-ctrls {
    position: absolute;
    top: 8px; right: 8px;
    display: flex;
    gap: 6px;
    z-index: 7;
}
/* Custom progress/seek bar — sits above bottom mask. v286.99k rev7 — more visible + time labels */
.sp-hero-inplace-prog {
    position: absolute;
    bottom: 22px; left: 14px; right: 96px; /* room for time text on right */
    height: 4px;
    background: rgba(255,255,255,0.45);
    border-radius: 4px;
    z-index: 8;
    cursor: pointer;
    touch-action: none;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.sp-hero-inplace-prog::after {
    content: '';
    position: absolute;
    top: -14px; bottom: -14px; left: 0; right: 0; /* expand tap target */
}
.sp-hero-inplace-prog-fill {
    position: relative;
    height: 100%;
    width: 0%;
    background: #ee4d2d;
    border-radius: 4px;
    transition: width 0.1s linear;
    pointer-events: none;
    box-shadow: 0 0 6px rgba(238,77,45,0.6);
}
/* Thumb indicator at end of fill */
.sp-hero-inplace-prog-fill::after {
    content: '';
    position: absolute;
    right: -6px; top: 50%;
    width: 12px; height: 12px;
    background: #fff;
    border: 2px solid #ee4d2d;
    border-radius: 50%;
    transform: translateY(-50%);
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
/* Time display "0:23 / 3:45" */
.sp-hero-inplace-time {
    position: absolute;
    bottom: 16px;
    right: 14px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    z-index: 8;
    text-shadow: 0 1px 3px rgba(0,0,0,0.7);
    pointer-events: none;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.2px;
}
/* Speed + CC dropdown menus */
.sp-hero-inplace-speed-menu,
.sp-hero-inplace-cc-menu {
    position: absolute;
    top: 50px; right: 8px;
    background: rgba(0,0,0,0.85);
    border-radius: 10px;
    padding: 6px;
    z-index: 8;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    min-width: 90px;
    max-height: 240px;
    overflow-y: auto;
}
.sp-hero-inplace-speed-menu button,
.sp-hero-inplace-cc-menu button {
    display: block;
    width: 100%;
    padding: 8px 14px;
    background: transparent;
    border: 0;
    color: #fff;
    text-align: left;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
}
.sp-hero-inplace-speed-menu button.is-on,
.sp-hero-inplace-cc-menu button.is-on {
    background: rgba(238,77,45,0.85);
    font-weight: 600;
}
.sp-hero-inplace-cc-menu .sp-cc-none {
    color: rgba(255,255,255,0.7);
    padding: 10px 14px;
    font-size: 12px;
    text-align: center;
}
.sp-hero-inplace-speed .sp-speed-label {
    font-size: 11px;
    font-weight: 600;
}
.sp-hero-inplace-speed[data-rate="1"] .sp-speed-label { font-size: 12px; }
.sp-hero-inplace-cc[data-cc="1"] {
    background: rgba(238,77,45,0.85) !important;
}

.sp-hero-inplace-close,
.sp-hero-inplace-mute,
.sp-hero-inplace-pp,
.sp-hero-inplace-cc,
.sp-hero-inplace-speed,
.sp-hero-inplace-full {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    line-height: 0;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 0.15s;
}
.sp-hero-inplace-close:hover,
.sp-hero-inplace-full:hover { background: rgba(0,0,0,0.75); }
.sp-hero-slide { position: relative; }

/* ===========================
   WELCOME UTM BANNER (v286.99g Phase 3.2)
   =========================== */
.sp-welcome-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #fff8e6 0%, #ffe9b3 100%);
    border: 1px solid #ffc107;
    border-radius: 10px;
    margin: 8px 12px;
    padding: 10px 12px;
    position: relative;
}
.sp-welcome-icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}
.sp-welcome-text { flex: 1; min-width: 0; line-height: 1.3; }
.sp-welcome-text .t1 {
    font-size: 13px;
    font-weight: 700;
    color: #92400e;
}
.sp-welcome-text .t2 {
    font-size: 11.5px;
    color: #92400e;
    margin-top: 2px;
}
.sp-welcome-text .t2 strong {
    background: #ffeb3b;
    padding: 1px 6px;
    border-radius: 3px;
    font-family: monospace;
    color: #78350f;
}
.sp-welcome-btn {
    background: var(--sp-primary);
    color: #fff;
    text-decoration: none;
    padding: 7px 14px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.sp-welcome-close {
    background: transparent;
    border: none;
    color: #92400e;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    flex-shrink: 0;
    line-height: 1;
}
body.mode-dark .sp-welcome-banner {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.18) 0%, rgba(146, 64, 14, 0.10) 100%);
    border-color: rgba(255, 193, 7, 0.5);
}
body.mode-dark .sp-welcome-text .t1,
body.mode-dark .sp-welcome-text .t2,
body.mode-dark .sp-welcome-close { color: #fde68a; }

/* ===========================
   ฉัน HUB VIP banner (v286.99g Phase 3.3)
   =========================== */
.sp-me-vip {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: -2px 0 8px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    color: #422006;
    box-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);
}
.sp-me-vip-icon { font-size: 28px; line-height: 1; flex-shrink: 0; }
.sp-me-vip-text { flex: 1; min-width: 0; line-height: 1.3; }
.sp-me-vip-text .t1 {
    font-size: 16px;
    font-weight: 800;
    color: #422006;
}
.sp-me-vip-text .t2 {
    font-size: 12px;
    color: #78350f;
    margin-top: 2px;
}
.sp-me-vip-text .t2 strong { color: #422006; font-weight: 800; }
.sp-me-vip-link {
    color: #422006;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    background: rgba(255,255,255,0.4);
    padding: 5px 10px;
    border-radius: 14px;
}
body.mode-dark .sp-me-vip {
    background: linear-gradient(135deg, rgba(251,191,36,0.2) 0%, rgba(245,158,11,0.15) 100%);
    color: #fde68a;
    box-shadow: none;
    border: 1px solid rgba(251,191,36,0.4);
}
body.mode-dark .sp-me-vip-text .t1 { color: #fde68a; }
body.mode-dark .sp-me-vip-text .t2 { color: #fcd34d; }
body.mode-dark .sp-me-vip-link {
    background: rgba(251,191,36,0.25);
    color: #fde68a;
}

/* ===========================
   NOTIFICATIONS PAGE (v286.99g Phase 3.4)
   =========================== */
.sp-notif-wrap {
    padding: 0 0 80px;
    background: var(--sp-bg, #f5f5f5);
}
.sp-notif-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 8px;
}
.sp-notif-h h2 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--sp-text, #1f2937);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.sp-notif-h h2 .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    background: #ff424f;
    color: #fff;
    border-radius: 11px;
    font-size: 11px;
    font-weight: 700;
}
.sp-notif-h .lnk {
    color: var(--sp-text-dim, #6b7280);
    font-size: 12px;
    text-decoration: none;
}

/* Order updates section — peach background */
.sp-notif-orders {
    background: #fff8f3;
    padding-bottom: 8px;
    margin-bottom: 8px;
}
body.mode-dark .sp-notif-orders {
    background: rgba(238, 77, 45, 0.08);
}
.sp-notif-order-card {
    display: block;
    margin: 0 12px 8px;
    padding: 12px 14px;
    background: var(--sp-surface);
    border-radius: 8px;
    border-left: 3px solid var(--sp-text-dim, #9ca3af);
    text-decoration: none;
    color: var(--sp-text, #1f2937);
}
.sp-notif-order-card.is-success { border-left-color: #16a34a; }
.sp-notif-order-card.is-shipping { border-left-color: #2563eb; }
.sp-notif-order-card.is-paid { border-left-color: #ea580c; }
.sp-notif-order-card.is-pending { border-left-color: #ee4d2d; }

.sp-notif-order-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.sp-notif-order-headline {
    font-size: 14px;
    font-weight: 700;
    color: var(--sp-text, #1f2937);
}
.sp-notif-order-time {
    font-size: 12px;
    color: var(--sp-text-dim, #9ca3af);
    flex-shrink: 0;
    margin-left: 8px;
}
.sp-notif-order-body {
    font-size: 12px;
    color: var(--sp-text-dim, #6b7280);
    margin-bottom: 6px;
    line-height: 1.4;
}
.sp-notif-order-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--sp-text-dim, #9ca3af);
}
.sp-notif-order-meta .amt {
    color: var(--sp-primary);
    font-weight: 700;
}

/* Promo cards section */
.sp-notif-promo {
    background: var(--sp-surface);
    margin-top: 8px;
}
.sp-notif-promo-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--sp-border, #f3f4f6);
    text-decoration: none;
    color: var(--sp-text, #1f2937);
}
.sp-notif-promo-card:last-child { border-bottom: none; }
.sp-notif-promo-icon {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--sp-bg, #f3f4f6);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sp-notif-promo-text { flex: 1; min-width: 0; }
.sp-notif-promo-text .t1 {
    font-size: 14px;
    font-weight: 600;
    color: var(--sp-text, #1f2937);
    line-height: 1.3;
}
.sp-notif-promo-text .t2 {
    font-size: 12px;
    color: var(--sp-text-dim, #6b7280);
    margin-top: 2px;
    line-height: 1.4;
}

body.mode-dark .sp-notif-wrap { background: var(--sp-bg); }
body.mode-dark .sp-notif-order-card,
body.mode-dark .sp-notif-promo { background: var(--sp-surface); }
body.mode-dark .sp-notif-promo-card { color: var(--sp-text); border-bottom-color: var(--sp-border); }
body.mode-dark .sp-notif-promo-icon { background: var(--sp-surface-2, #2a2a2a); }

/* ============================================================
 * Search overlay — Personal suggest section (Yut: Shopee-style)
 * ============================================================ */
.sp-personal-suggest { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
.sp-personal-card { background: var(--sp-surface); border-radius: 8px; border: 1px solid var(--sp-border); overflow: hidden; }
.sp-personal-kw {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    text-decoration: none;
    color: var(--sp-text);
    background: var(--sp-surface-2);
    border-bottom: 1px solid var(--sp-border);
}
.sp-personal-kw:active { opacity: 0.85; }
.sp-personal-kw-icon { font-size: 16px; }
.sp-personal-kw-text { flex: 1; font-size: 14px; font-weight: 600; }
.sp-personal-kw-chev { color: var(--sp-text-dim); font-size: 18px; }
.sp-personal-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    padding: 8px;
}
.sp-personal-thumb {
    display: flex; flex-direction: column;
    text-decoration: none; color: var(--sp-text);
    background: var(--sp-bg);
    border-radius: 4px;
    overflow: hidden;
}
.sp-personal-thumb img {
    width: 100%; aspect-ratio: 2/3; object-fit: cover;
    background: var(--sp-surface-2);
    display: block;
}
.sp-personal-thumb-title {
    font-size: 11px; line-height: 1.3; padding: 4px 6px 6px;
    color: var(--sp-text);
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.sp-personal-sentinel { height: 1px; }
.sp-personal-loading { display: flex; justify-content: center; padding: 16px; }
body.mode-dark .sp-personal-card { background: var(--sp-surface) !important; border-color: var(--sp-border) !important; }
body.mode-dark .sp-personal-kw { background: var(--sp-surface-2) !important; border-bottom-color: var(--sp-border) !important; }
body.mode-dark .sp-personal-thumb { background: #1a1a1a !important; }
body.mode-dark .sp-personal-thumb img { background: #1a1a1a !important; }
/* end personal restore */

/* ============================================================
 * v286.99g — Dark mode + theme-gray overrides for Phase 1+2+3 additions
 * (hardcoded colors that don't auto-adapt via CSS vars)
 * ============================================================ */

/* Welcome UTM banner */
body.mode-dark .sp-welcome-banner,
body.theme-gray .sp-welcome-banner {
    background: linear-gradient(135deg, #2a1a0a, #1a0d05) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}

/* ฉัน hub VIP gold banner */
body.mode-dark .sp-me-vip,
body.theme-gray .sp-me-vip {
    background: linear-gradient(135deg, #2a1f08, #1a1306) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-me-vip .t1,
body.theme-gray .sp-me-vip .t1 { color: #f5c518 !important; }
body.mode-dark .sp-me-vip .t2,
body.theme-gray .sp-me-vip .t2 { color: var(--sp-text-dim) !important; }
body.mode-dark .sp-me-vip-link,
body.theme-gray .sp-me-vip-link { color: #f5c518 !important; }
body.mode-dark .sp-me-vip-icon,
body.theme-gray .sp-me-vip-icon { background: rgba(245,197,24,0.15) !important; }

/* vs-Shopee cart widget */
body.mode-dark .sp-vs-shopee,
body.theme-gray .sp-vs-shopee {
    background: var(--sp-surface) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .vs-sub,
body.theme-gray .vs-sub { color: var(--sp-text-dim) !important; }
body.mode-dark .sp-vs-shopee strong,
body.theme-gray .sp-vs-shopee strong { color: var(--sp-primary) !important; }

/* Notifications page */
body.mode-dark .sp-notif-wrap,
body.theme-gray .sp-notif-wrap { background: var(--sp-bg) !important; }
body.mode-dark .sp-notif-orders,
body.theme-gray .sp-notif-orders {
    background: var(--sp-surface) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-notif-order-card,
body.theme-gray .sp-notif-order-card {
    background: var(--sp-surface-2) !important;
    border-color: var(--sp-border) !important;
    color: var(--sp-text) !important;
}
body.mode-dark .sp-notif-order-card .oid,
body.mode-dark .sp-notif-order-time,
body.mode-dark .sp-notif-order-body,
body.theme-gray .sp-notif-order-card .oid,
body.theme-gray .sp-notif-order-time,
body.theme-gray .sp-notif-order-body { color: var(--sp-text-dim) !important; }
body.mode-dark .sp-notif-order-headline,
body.theme-gray .sp-notif-order-headline { color: var(--sp-text) !important; }
body.mode-dark .sp-notif-promo-card,
body.theme-gray .sp-notif-promo-card {
    background: var(--sp-surface) !important;
    border-color: var(--sp-border) !important;
    color: var(--sp-text) !important;
}
body.mode-dark .sp-notif-promo-card .t1,
body.theme-gray .sp-notif-promo-card .t1 { color: var(--sp-text) !important; }
body.mode-dark .sp-notif-promo-card .t2,
body.theme-gray .sp-notif-promo-card .t2 { color: var(--sp-text-dim) !important; }
body.mode-dark .sp-notif-h h2,
body.theme-gray .sp-notif-h h2 { color: var(--sp-text) !important; }
body.mode-dark .sp-notif-h .lnk,
body.theme-gray .sp-notif-h .lnk { color: var(--sp-primary) !important; }

/* Address paste helper (myprofile) */
body.mode-dark .sp-paste-helper,
body.theme-gray .sp-paste-helper {
    background: var(--sp-surface-2) !important;
    border-color: var(--sp-border) !important;
    color: var(--sp-text) !important;
}
body.mode-dark .sp-paste-helper .sp-paste-hint,
body.theme-gray .sp-paste-helper .sp-paste-hint { color: var(--sp-text-dim) !important; }

/* Filter sheet modal */
body.mode-dark .sp-filter-sheet,
body.theme-gray .sp-filter-sheet {
    background: var(--sp-surface) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}

/* Theme picker section in ฉัน hub */
body.mode-dark .sp-me-section-theme,
body.theme-gray .sp-me-section-theme {
    background: var(--sp-surface) !important;
    border-color: var(--sp-border) !important;
}
/* end Phase 1+2+3 dark overrides */

/* ============================================================
 * BATCH 2 — Comprehensive dark + theme-gray overrides for ALL Phase 1+2+3 classes
 * Goal: every hardcoded background/color/border in Phase block adapts
 * ============================================================ */

/* Sort + filter bar */
body.mode-dark .sp-sort-filter-bar,
body.theme-gray .sp-sort-filter-bar {
    background: var(--sp-surface) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-sort-trigger,
body.mode-dark .sp-filter-trigger,
body.theme-gray .sp-sort-trigger,
body.theme-gray .sp-filter-trigger {
    background: var(--sp-surface-2) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-sort-dropdown,
body.theme-gray .sp-sort-dropdown {
    background: var(--sp-surface) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-sort-item,
body.theme-gray .sp-sort-item {
    color: var(--sp-text) !important;
    border-bottom-color: var(--sp-border) !important;
}
body.mode-dark .sp-sort-item.is-active,
body.theme-gray .sp-sort-item.is-active { color: var(--sp-primary) !important; }

/* Filter sheet chips + sections */
body.mode-dark .sp-fs-section,
body.theme-gray .sp-fs-section { border-bottom-color: var(--sp-border) !important; }
body.mode-dark .sp-fs-chip,
body.theme-gray .sp-fs-chip {
    background: var(--sp-surface-2) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-fs-chip:hover,
body.theme-gray .sp-fs-chip:hover { background: var(--sp-bg) !important; }
body.mode-dark .sp-fs-chip.is-on,
body.theme-gray .sp-fs-chip.is-on {
    background: var(--sp-primary) !important;
    color: #fff !important;
    border-color: var(--sp-primary) !important;
}

/* ฉัน hub status grid + link cells */
body.mode-dark .sp-me-hub,
body.theme-gray .sp-me-hub { background: var(--sp-bg) !important; }
body.mode-dark .sp-me-header,
body.mode-dark .sp-me-section,
body.theme-gray .sp-me-header,
body.theme-gray .sp-me-section {
    background: var(--sp-surface) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-me-name,
body.mode-dark .sp-me-section h2,
body.theme-gray .sp-me-name,
body.theme-gray .sp-me-section h2 { color: var(--sp-text) !important; }
body.mode-dark .sp-me-sub,
body.mode-dark .sp-me-h-link,
body.theme-gray .sp-me-sub,
body.theme-gray .sp-me-h-link { color: var(--sp-text-dim) !important; }
body.mode-dark .sp-me-status-cell,
body.mode-dark .sp-me-link-cell,
body.theme-gray .sp-me-status-cell,
body.theme-gray .sp-me-link-cell { color: var(--sp-text) !important; }
body.mode-dark .sp-me-link-list a,
body.theme-gray .sp-me-link-list a {
    color: var(--sp-text) !important;
    border-bottom-color: var(--sp-border) !important;
}
body.mode-dark .sp-me-edit,
body.theme-gray .sp-me-edit { color: var(--sp-text-dim) !important; }
body.mode-dark .sp-me-cta-outline,
body.theme-gray .sp-me-cta-outline {
    background: transparent !important;
    color: var(--sp-primary) !important;
    border-color: var(--sp-primary) !important;
}

/* Categories hub */
body.mode-dark .sp-cat-hub,
body.theme-gray .sp-cat-hub { background: var(--sp-bg) !important; }
body.mode-dark .sp-cat-section,
body.theme-gray .sp-cat-section {
    background: var(--sp-surface) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-cat-section h2,
body.theme-gray .sp-cat-section h2 { color: var(--sp-text) !important; }
body.mode-dark .sp-cat-cell,
body.theme-gray .sp-cat-cell {
    background: var(--sp-surface-2) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}

/* Orders tabs */
body.mode-dark .sp-orders-tabs,
body.theme-gray .sp-orders-tabs {
    background: var(--sp-surface) !important;
    border-bottom-color: var(--sp-border) !important;
}
body.mode-dark .sp-order-tab,
body.theme-gray .sp-order-tab { color: var(--sp-text-dim) !important; }
body.mode-dark .sp-order-tab.is-active,
body.theme-gray .sp-order-tab.is-active {
    color: var(--sp-primary) !important;
    border-bottom-color: var(--sp-primary) !important;
}
body.mode-dark .sp-order-card,
body.theme-gray .sp-order-card {
    background: var(--sp-surface) !important;
    border-color: var(--sp-border) !important;
    color: var(--sp-text) !important;
}

/* Settings page */
body.mode-dark .sp-set-wrap,
body.theme-gray .sp-set-wrap { background: var(--sp-bg) !important; }
body.mode-dark .sp-set-section,
body.theme-gray .sp-set-section {
    background: var(--sp-surface) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-set-row,
body.theme-gray .sp-set-row {
    color: var(--sp-text) !important;
    border-bottom-color: var(--sp-border) !important;
}

/* Help center */
body.mode-dark .sp-help-wrap,
body.theme-gray .sp-help-wrap { background: var(--sp-bg) !important; }
body.mode-dark .sp-help-search input,
body.theme-gray .sp-help-search input {
    background: var(--sp-surface) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-help-section,
body.theme-gray .sp-help-section {
    background: var(--sp-surface) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-help-q,
body.theme-gray .sp-help-q { color: var(--sp-text) !important; }
body.mode-dark .sp-help-a,
body.theme-gray .sp-help-a { color: var(--sp-text-dim) !important; }

/* ซื้ออีกครั้ง CTA */
body.mode-dark .sp-reorder-btn,
body.theme-gray .sp-reorder-btn {
    background: var(--sp-surface-2) !important;
    color: var(--sp-primary) !important;
    border-color: var(--sp-primary) !important;
}

/* Bottom nav 5-slot */
body.mode-dark .sp-bn,
body.theme-gray .sp-bn {
    background: var(--sp-surface) !important;
    border-top-color: var(--sp-border) !important;
}
body.mode-dark .sp-bn-tab,
body.theme-gray .sp-bn-tab { color: var(--sp-text-dim) !important; }
body.mode-dark .sp-bn-tab.is-active,
body.theme-gray .sp-bn-tab.is-active { color: var(--sp-primary) !important; }

/* Theme picker chips visibility in dark */
body.mode-dark .sp-theme-chip,
body.theme-gray .sp-theme-chip { box-shadow: 0 0 0 1px var(--sp-border); }
body.mode-dark .sp-theme-chip[data-theme="gray"]::after,
body.theme-gray .sp-theme-chip[data-theme="gray"]::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(45deg, transparent 49%, var(--sp-text-dim) 49%, var(--sp-text-dim) 51%, transparent 51%);
    border-radius: 50%;
}
body.mode-dark .sp-mode-btn,
body.theme-gray .sp-mode-btn {
    background: var(--sp-surface-2) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-mode-btn.is-on,
body.theme-gray .sp-mode-btn.is-on {
    background: var(--sp-primary) !important;
    color: #fff !important;
}
/* end batch 2 */

/* ============================================================
 * VDO FEED — Progress bar + CC button (v286.99g, Yut request)
 * ============================================================ */
.sp-vfeed-prog {
    position: absolute;
    bottom: 12px; left: 14px; right: 14px;
    height: 4px;
    background: rgba(255,255,255,0.28);
    border-radius: 2px;
    z-index: 8;
    cursor: pointer;
    touch-action: none;
}
.sp-vfeed-prog::after {
    content: '';
    position: absolute;
    top: -10px; bottom: -10px; left: 0; right: 0;
}
.sp-vfeed-prog-fill {
    height: 100%;
    width: 0%;
    background: var(--sp-primary);
    border-radius: 2px;
    transition: width 0.2s linear;
    pointer-events: none;
}
.sp-vfeed-cc-btn {
    position: absolute;
    top: 100px; right: 12px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 6;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.sp-vfeed-cc-btn.is-on {
    background: var(--sp-primary);
}
.sp-vfeed-cc-btn[data-cc="1"] {
    background: var(--sp-primary);
}
.sp-vfeed-cc-menu {
    position: absolute;
    top: 144px; right: 12px;
    background: rgba(0,0,0,0.85);
    border-radius: 10px;
    padding: 6px;
    z-index: 9;
    min-width: 100px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
/* end vdo feed prog/cc */

/* ============================================================
 * BATCH 3 — Comprehensive cart/checkout dark + theme-gray
 * Force every cart wrapper to follow theme variables
 * ============================================================ */
body.mode-dark .sp-cart-root,
body.theme-gray .sp-cart-root {
    background: var(--sp-bg) !important;
    color: var(--sp-text) !important;
}
body.mode-dark .sp-cart-list,
body.theme-gray .sp-cart-list {
    background: var(--sp-surface) !important;
}
body.mode-dark .sp-cart-item,
body.theme-gray .sp-cart-item {
    background: var(--sp-surface) !important;
    border-bottom-color: var(--sp-border) !important;
    color: var(--sp-text) !important;
}
body.mode-dark .sp-cart-item-name,
body.theme-gray .sp-cart-item-name { color: var(--sp-text) !important; }
body.mode-dark .sp-cart-item-meta,
body.theme-gray .sp-cart-item-meta { color: var(--sp-text-dim) !important; }
body.mode-dark .sp-cart-variant,
body.theme-gray .sp-cart-variant {
    background: var(--sp-bg) !important;
    color: var(--sp-text-dim) !important;
}
body.mode-dark .sp-cart-empty,
body.mode-dark .sp-cart-skeleton,
body.mode-dark .sp-cart-full,
body.theme-gray .sp-cart-empty,
body.theme-gray .sp-cart-skeleton,
body.theme-gray .sp-cart-full { background: var(--sp-bg) !important; }
body.mode-dark .sp-cart-sticky,
body.theme-gray .sp-cart-sticky {
    background: var(--sp-surface) !important;
    border-top-color: var(--sp-border) !important;
}
body.mode-dark .sp-cart-stepper,
body.theme-gray .sp-cart-stepper {
    background: var(--sp-surface-2) !important;
    border-color: var(--sp-border) !important;
    color: var(--sp-text) !important;
}
body.mode-dark .sp-cart-issues,
body.theme-gray .sp-cart-issues {
    background: var(--sp-surface-2) !important;
    border-color: var(--sp-border) !important;
    color: var(--sp-text) !important;
}
body.mode-dark .sp-cart-coupon,
body.theme-gray .sp-cart-coupon {
    background: var(--sp-surface) !important;
    border-top-color: var(--sp-bg) !important;
}
body.mode-dark .sp-cart-loading .sk,
body.theme-gray .sp-cart-loading .sk { background: var(--sp-surface-2) !important; }
body.mode-dark .sp-cart-item.is-free,
body.theme-gray .sp-cart-item.is-free {
    background: var(--sp-surface-2) !important;
}
body.mode-dark .sp-cart-item.has-issue,
body.theme-gray .sp-cart-item.has-issue {
    background: var(--sp-surface-2) !important;
    border-left: 3px solid #ff6b35 !important;
}
body.mode-dark .sp-cart-item-img,
body.theme-gray .sp-cart-item-img { background: var(--sp-bg) !important; }
body.mode-dark .sp-cart-item-bottom,
body.theme-gray .sp-cart-item-bottom { color: var(--sp-text) !important; }
body.mode-dark .sp-cart-item-price,
body.theme-gray .sp-cart-item-price { color: var(--sp-primary) !important; }
body.mode-dark .sp-cart-item-remove,
body.theme-gray .sp-cart-item-remove { color: var(--sp-text-dim) !important; }
body.mode-dark .sp-cart-item-remove:active,
body.theme-gray .sp-cart-item-remove:active { background: var(--sp-bg) !important; }

/* Coupon row */
body.mode-dark .sp-coupon-row,
body.theme-gray .sp-coupon-row {
    background: var(--sp-surface) !important;
    border-bottom-color: var(--sp-bg) !important;
}
body.mode-dark .sp-coupon-input,
body.theme-gray .sp-coupon-input {
    background: var(--sp-surface) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-coupon-input:disabled,
body.theme-gray .sp-coupon-input:disabled {
    background: var(--sp-bg) !important;
    color: var(--sp-text-dim) !important;
}

/* Checkout steps */
body.mode-dark .sp-checkout-step,
body.theme-gray .sp-checkout-step { color: var(--sp-text-dim) !important; }
body.mode-dark .sp-checkout-step .num,
body.theme-gray .sp-checkout-step .num {
    background: var(--sp-surface-2) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}

/* Empty reward item card */
body.mode-dark .sp-empty-reward-item,
body.theme-gray .sp-empty-reward-item {
    background: var(--sp-surface) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-empty-reward-item .t1,
body.theme-gray .sp-empty-reward-item .t1 { color: #fbbf24 !important; }

/* Cart-flash badges */
body.mode-dark .sp-cart-flash-expired,
body.theme-gray .sp-cart-flash-expired {
    background: var(--sp-surface-2) !important;
    color: #fbbf24 !important;
    border-color: #fbbf24 !important;
}

/* Free disc selector */
body.mode-dark .sp-cart-free-selector,
body.theme-gray .sp-cart-free-selector {
    background: var(--sp-surface-2) !important;
    border-color: var(--sp-primary) !important;
    color: var(--sp-text) !important;
}

/* Free pick promo bar */
body.mode-dark .sp-cart-promo-bar,
body.theme-gray .sp-cart-promo-bar {
    background: var(--sp-surface-2) !important;
    border-color: var(--sp-border) !important;
    color: var(--sp-text) !important;
}

/* Subpage header */
body.mode-dark .sp-subpage-header,
body.theme-gray .sp-subpage-header {
    background: var(--sp-surface) !important;
    border-bottom-color: var(--sp-border) !important;
    color: var(--sp-text) !important;
}
body.mode-dark .sp-detail-search-bar,
body.theme-gray .sp-detail-search-bar {
    background: var(--sp-bg) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-detail-search-text,
body.theme-gray .sp-detail-search-text {
    background: transparent !important;
    color: var(--sp-text) !important;
}
body.mode-dark .sp-icon-btn,
body.theme-gray .sp-icon-btn { color: var(--sp-text) !important; }
body.mode-dark .sp-back-btn,
body.theme-gray .sp-back-btn { color: var(--sp-text) !important; }
/* end batch 3 cart */

/* /browse/dimensions chips — dark + theme-gray fix (Yut: bg+text กลืน) */
body.mode-dark .sp-bd-chip,
body.theme-gray .sp-bd-chip {
    background: var(--sp-surface-2) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-bd-chip:active,
body.theme-gray .sp-bd-chip:active { background: var(--sp-bg) !important; }
/* count badge — theme-gray dark inverts primary to white, would be white-on-white */
body.theme-gray .sp-bd-chip .cnt,
body.theme-gray.mode-dark .sp-bd-chip .cnt {
    background: var(--sp-text) !important;
    color: var(--sp-surface) !important;
}
body.mode-dark .sp-bd-chip .cnt {
    /* keep primary orange/etc, just ensure white text reads */
    color: #fff !important;
}
body.mode-dark .sp-bd-section,
body.theme-gray .sp-bd-section {
    background: var(--sp-surface) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-bd-section-h,
body.theme-gray .sp-bd-section-h { color: var(--sp-text) !important; }
body.mode-dark .sp-bd-wrap,
body.theme-gray .sp-bd-wrap { background: var(--sp-bg) !important; }
body.mode-dark .sp-bd-intro,
body.theme-gray .sp-bd-intro { color: var(--sp-text-dim) !important; }
/* end dimensions chip dark fix */

/* v286.99h — Yut: white-bg/orange-text ปุ่มเข้าสู่ระบบ ใน dark mode มันใกล้ขาว อ่านไม่ออก.
   Pattern fix: dark mode = solid orange bg + white text (Shopee style).
   theme-gray.mode-dark uses hardcoded #ee4d2d because that theme's --sp-primary is near-white. */
body.mode-dark:not(.theme-gray) .sp-me-cta-primary,
body.mode-auto.is-os-dark:not(.theme-gray) .sp-me-cta-primary {
    background: var(--sp-primary) !important;
    color: #fff !important;
    border: 0 !important;
}
body.theme-gray.mode-dark .sp-me-cta-primary,
body.theme-gray.mode-auto.is-os-dark .sp-me-cta-primary {
    background: #ee4d2d !important;
    color: #fff !important;
    border: 0 !important;
}
/* Outline CTA in any dark/gray: keep transparent bg + visible border + readable text */
body.theme-gray .sp-me-cta-outline,
body.theme-gray.mode-dark .sp-me-cta-outline,
body.theme-gray.mode-auto.is-os-dark .sp-me-cta-outline {
    color: #fff !important;
    border-color: rgba(255,255,255,0.85) !important;
}
/* end /me login button fix */

/* ============================================================
 * BATCH 4 — System-wide fix: badges with bg=primary + text=white
 * In theme-gray.mode-dark, --sp-primary becomes white → white-on-white invisible.
 * Force ALL small badges/counts to keep dark bg + white text in this case.
 * Also force when --sp-primary is light (theme-gray light is dark, so safe).
 * ============================================================ */
body.theme-gray.mode-dark .cnt,
body.theme-gray.mode-auto.is-os-dark .cnt {
    background: #111827 !important;
    color: #f3f4f6 !important;
}
/* All badges/buttons that use primary as bg → force dark bg in theme-gray dark */
body.theme-gray.mode-dark .sp-bd-chip .cnt,
body.theme-gray.mode-dark .sp-bm-chip .cnt,
body.theme-gray.mode-dark .sp-bnav-badge,
body.theme-gray.mode-dark .sp-menu-flag,
body.theme-gray.mode-dark .sp-bsl-pill.active,
body.theme-gray.mode-dark .sp-badge.new,
body.theme-gray.mode-dark .sp-kw-cta,
body.theme-gray.mode-dark .sp-meta-tag.new,
body.theme-gray.mode-dark .sp-bb-side .badge,
body.theme-gray.mode-dark .sp-checkout-step.active .num,
body.theme-gray.mode-dark .sp-coupon-compact-icon,
body.theme-gray.mode-dark .sp-coupon-pick-btn,
body.theme-gray.mode-dark .sp-personal-kw,
body.theme-gray.mode-dark .sp-fs-chip.is-on,
body.theme-gray.mode-dark .sp-sort-item.is-active,
body.theme-gray.mode-dark .sp-order-tab.is-active,
body.theme-gray.mode-dark .sp-bn-tab.is-active,
/* v286.99h batch 5: extra primary-bg buttons that needed coverage */
body.theme-gray.mode-dark .sp-bsl-quicklink,
body.theme-gray.mode-dark .sp-coupon-collect-btn,
body.theme-gray.mode-dark .sp-modal-btn-primary,
body.theme-gray.mode-dark .sp-bb-buy-now,
body.theme-gray.mode-dark .sp-bb-add-cart,
body.theme-gray.mode-dark .sp-genre-tag,
body.theme-gray.mode-dark .sp-coupon-login-btn,
body.theme-gray.mode-dark .sp-auth-btn,
body.theme-gray.mode-dark .sp-empty-cta,
body.theme-gray.mode-auto.is-os-dark .sp-bd-chip .cnt,
body.theme-gray.mode-auto.is-os-dark .sp-bm-chip .cnt,
body.theme-gray.mode-auto.is-os-dark .sp-bnav-badge,
body.theme-gray.mode-auto.is-os-dark .sp-menu-flag,
body.theme-gray.mode-auto.is-os-dark .sp-bsl-pill.active,
body.theme-gray.mode-auto.is-os-dark .sp-badge.new,
body.theme-gray.mode-auto.is-os-dark .sp-kw-cta,
body.theme-gray.mode-auto.is-os-dark .sp-meta-tag.new,
body.theme-gray.mode-auto.is-os-dark .sp-bb-side .badge,
body.theme-gray.mode-auto.is-os-dark .sp-checkout-step.active .num,
body.theme-gray.mode-auto.is-os-dark .sp-coupon-compact-icon,
body.theme-gray.mode-auto.is-os-dark .sp-coupon-pick-btn,
body.theme-gray.mode-auto.is-os-dark .sp-bsl-quicklink,
body.theme-gray.mode-auto.is-os-dark .sp-coupon-collect-btn,
body.theme-gray.mode-auto.is-os-dark .sp-modal-btn-primary,
body.theme-gray.mode-auto.is-os-dark .sp-bb-buy-now,
body.theme-gray.mode-auto.is-os-dark .sp-bb-add-cart,
body.theme-gray.mode-auto.is-os-dark .sp-genre-tag,
body.theme-gray.mode-auto.is-os-dark .sp-coupon-login-btn,
body.theme-gray.mode-auto.is-os-dark .sp-auth-btn,
body.theme-gray.mode-auto.is-os-dark .sp-empty-cta,
/* v286.99h fix #7 — sort-tab.active "อ่านไม่ออกสีเดียวกัน" in theme-gray dark */
body.theme-gray.mode-dark .sp-sort-tab.active,
body.theme-gray.mode-auto.is-os-dark .sp-sort-tab.active,
body.theme-gray.mode-dark .sp-fmt-tab.is-active,
body.theme-gray.mode-auto.is-os-dark .sp-fmt-tab.is-active {
    background: #ee4d2d !important;
    color: #fff !important;
    border-color: #ee4d2d !important;
}
/* v286.99h fix #4 — hide scrollbars on Chrome desktop mobile-emulator (Yut: ก่อนนี้ไม่มี).
   iOS Safari hides natively; this matches behavior on desktop testing. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
body::-webkit-scrollbar { display: none; }
/* v286.99h — form selects (sp-cat-switcher etc.) in dark mode: dark surface + light text */
body.mode-dark .sp-cat-switcher,
body.theme-gray .sp-cat-switcher {
    background-color: var(--sp-surface) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-cat-switcher option,
body.theme-gray .sp-cat-switcher option {
    background: var(--sp-surface) !important;
    color: var(--sp-text) !important;
}

/* v286.99h — Coin redeem section in cart (Shopee pattern) */
.sp-coin-section {
    margin: 8px 12px; padding: 10px 12px;
    background: linear-gradient(135deg, #fef9c3 0%, #fde68a 100%);
    border-radius: 8px;
}
body.mode-dark .sp-coin-section,
body.theme-gray .sp-coin-section {
    background: linear-gradient(135deg, #2a2310 0%, #3a2f15 100%) !important;
}
.sp-coin-row { display: flex; align-items: center; gap: 8px; }
.sp-coin-row .sp-coin-icon { font-size: 22px; flex-shrink: 0; }
.sp-coin-row .sp-coin-label { flex: 1; font-size: 14px; color: #92400e; }
body.mode-dark .sp-coin-row .sp-coin-label,
body.theme-gray .sp-coin-row .sp-coin-label { color: #fde68a !important; }
.sp-coin-row .sp-coin-label strong { font-size: 16px; color: #b45309; }
body.mode-dark .sp-coin-row .sp-coin-label strong,
body.theme-gray .sp-coin-row .sp-coin-label strong { color: #fbbf24 !important; }
.sp-coin-row .sp-coin-baht { font-size: 12px; color: #78350f; }
body.mode-dark .sp-coin-row .sp-coin-baht,
body.theme-gray .sp-coin-row .sp-coin-baht { color: #fbbf24 !important; }
.sp-coin-toggle { position: relative; width: 40px; height: 22px; flex-shrink: 0; }
.sp-coin-toggle input { display: none; }
.sp-coin-toggle-slider {
    position: absolute; inset: 0; background: #d1d5db; border-radius: 22px;
    cursor: pointer; transition: background .2s;
}
.sp-coin-toggle-slider::before {
    content: ''; position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; background: #fff; border-radius: 50%;
    transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.sp-coin-toggle input:checked + .sp-coin-toggle-slider { background: #ee4d2d; }
.sp-coin-toggle input:checked + .sp-coin-toggle-slider::before { left: 20px; }
.sp-coin-toggle input:disabled + .sp-coin-toggle-slider { opacity: 0.4; cursor: not-allowed; }
.sp-coin-blocked, .sp-coin-applied {
    margin-top: 8px; padding: 6px 10px; border-radius: 6px;
    font-size: 12px; font-weight: 600;
}
.sp-coin-blocked { background: rgba(239,68,68,0.1); color: #b91c1c; }
.sp-coin-applied { background: rgba(16,185,129,0.1); color: #047857; display: flex; align-items: center; gap: 6px; }
.sp-coin-applied strong { color: #065f46; }
body.mode-dark .sp-coin-blocked,
body.theme-gray .sp-coin-blocked { background: rgba(248,113,113,0.18) !important; color: #fca5a5 !important; }
body.mode-dark .sp-coin-applied,
body.theme-gray .sp-coin-applied { background: rgba(34,197,94,0.18) !important; color: #86efac !important; }
body.mode-dark .sp-coin-applied strong,
body.theme-gray .sp-coin-applied strong { color: #d1fae5 !important; }

/* Bug#110: coin number input row */
.sp-coin-input-row { display: flex; gap: 6px; margin-top: 8px; align-items: stretch; }
.sp-coin-input-row input[type="number"]::-webkit-outer-spin-button,
.sp-coin-input-row input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sp-coin-max-btn, .sp-coin-apply-btn, .sp-coin-clear-btn {
    padding: 0 14px; border-radius: 8px; border: 0;
    font-size: 14px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.sp-coin-max-btn { background: #fff; color: #b45309; border: 1px solid #d97706; }
.sp-coin-apply-btn { background: #ee4d2d; color: #fff; }
.sp-coin-apply-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.sp-coin-clear-btn { background: transparent; color: #047857; border: 1px solid #047857; padding: 4px 10px; font-size: 12px; margin-left: auto; }
body.mode-dark .sp-coin-max-btn,
body.theme-gray .sp-coin-max-btn { background: #1f1f1f !important; color: #fbbf24 !important; border-color: #fbbf24 !important; }
body.mode-dark .sp-coin-input-row input[type="number"],
body.theme-gray .sp-coin-input-row input[type="number"] { background: #1f1f1f !important; color: #fde68a !important; border-color: #555 !important; }

/* v286.99h — Recently Viewed strip on home (Shopee pattern) */
.sp-recent-strip {
    background: var(--sp-surface);
    margin: 8px 0 0;
    padding: 0 0 8px;
}
.sp-recent-h {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 14px 6px;
}
.sp-recent-h .t { font-size: 15px; font-weight: 600; color: var(--sp-text); }
.sp-recent-h .more { font-size: 12px; color: var(--sp-primary); text-decoration: none; }
.sp-recent-track {
    display: flex; gap: 8px;
    overflow-x: auto; padding: 0 14px 4px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.sp-recent-track::-webkit-scrollbar { display: none; }
.sp-recent-card {
    flex: 0 0 92px;
    text-decoration: none; color: var(--sp-text);
    background: var(--sp-bg);
    border-radius: 8px; overflow: hidden;
    border: 1px solid var(--sp-border);
}
.sp-recent-img { width: 100%; height: 92px; object-fit: cover; display: block; background: var(--sp-bg); }
.sp-recent-name {
    font-size: 11.5px; padding: 6px 6px 2px; line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    min-height: 28px;
}
.sp-recent-price { font-size: 12px; font-weight: 700; color: var(--sp-primary); padding: 0 6px 6px; }
body.sp-font-lg .sp-recent-h .t { font-size: 16.5px; }
body.sp-font-xl .sp-recent-h .t { font-size: 18px; }
body.sp-font-lg .sp-recent-name { font-size: 12.5px; }
body.sp-font-xl .sp-recent-name { font-size: 14px; }

/* v286.99h — Coin balance card on /me hub (Shopee pattern) */
.sp-me-coin-card {
    margin: 10px 12px;
    background: linear-gradient(135deg, #fef9c3 0%, #fde68a 100%);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
}
body.mode-dark .sp-me-coin-card,
body.theme-gray .sp-me-coin-card {
    background: linear-gradient(135deg, #2a2310 0%, #3a2f15 100%) !important;
}
.sp-me-coin-row { display: flex; align-items: center; gap: 12px; }
.sp-me-coin-icon { font-size: 36px; flex-shrink: 0; }
.sp-me-coin-info { flex: 1; min-width: 0; }
.sp-me-coin-bal {
    font-size: 22px; font-weight: 700; color: #92400e; line-height: 1.1;
}
.sp-me-coin-bal span { font-size: 13px; font-weight: 500; color: #b45309; }
body.mode-dark .sp-me-coin-bal,
body.theme-gray .sp-me-coin-bal { color: #fde68a !important; }
body.mode-dark .sp-me-coin-bal span,
body.theme-gray .sp-me-coin-bal span { color: #fbbf24 !important; }
.sp-me-coin-baht {
    font-size: 12px; color: #78350f; margin-top: 2px;
}
body.mode-dark .sp-me-coin-baht,
body.theme-gray .sp-me-coin-baht { color: #fbbf24 !important; }
.sp-me-coin-link {
    font-size: 12px; color: #b45309; text-decoration: none; flex-shrink: 0;
    padding: 6px 10px; border: 1px solid #fbbf24; border-radius: 16px;
}
body.mode-dark .sp-me-coin-link,
body.theme-gray .sp-me-coin-link { color: #fbbf24 !important; border-color: #fbbf24 !important; }
.sp-me-coin-expiry {
    margin-top: 10px; padding: 6px 10px; background: rgba(220,38,38,0.08);
    border-radius: 6px; font-size: 12px; color: #b91c1c;
}
body.mode-dark .sp-me-coin-expiry,
body.theme-gray .sp-me-coin-expiry { background: rgba(248,113,113,0.15) !important; color: #fca5a5 !important; }
.sp-me-coin-ref {
    margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(180,83,9,0.3);
}
.sp-me-coin-ref-label { font-size: 12px; color: #78350f; margin-bottom: 6px; }
body.mode-dark .sp-me-coin-ref-label,
body.theme-gray .sp-me-coin-ref-label { color: #fde68a !important; }
.sp-me-coin-ref-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sp-me-coin-ref-code {
    font-family: 'SF Mono', monospace; font-size: 16px; font-weight: 700;
    letter-spacing: 1.5px; padding: 6px 12px; background: #fff; border-radius: 6px;
    color: #ee4d2d; flex: 1; text-align: center; min-width: 100px;
}
body.mode-dark .sp-me-coin-ref-code,
body.theme-gray .sp-me-coin-ref-code { background: rgba(255,255,255,0.1) !important; color: #fbbf24 !important; }
.sp-me-coin-ref-copy, .sp-me-coin-ref-share {
    background: #ee4d2d; color: #fff; border: 0; border-radius: 6px;
    padding: 6px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.sp-me-coin-ref-copy:active, .sp-me-coin-ref-share:active { transform: scale(0.95); }
body.sp-font-lg .sp-me-coin-bal { font-size: 24px; }
body.sp-font-xl .sp-me-coin-bal { font-size: 27px; }
body.sp-font-lg .sp-me-coin-baht { font-size: 13px; }
body.sp-font-xl .sp-me-coin-baht { font-size: 14.5px; }

/* v286.99h — Yut: รีวิว/รูปนักแสดงไม่มีรูป → bg เทาอ่อน text ขาว อ่านไม่ออก.
   Root cause: `.sp-review-avatar` uses linear-gradient(--sp-primary-light, --sp-primary)
   which in theme-gray.mode-dark becomes near-white; white-on-white invisible.
   Fix: force solid Shopee-orange + white text in any near-white-primary theme.
   Also make `.sp-cast-no-photo` emoji visible in light mode (was #ccc on light gray bg). */
body.theme-gray.mode-dark .sp-review-avatar,
body.theme-gray.mode-auto.is-os-dark .sp-review-avatar {
    background: #ee4d2d !important;
    color: #fff !important;
}
body.theme-gray.mode-dark .sp-review-avatar img,
body.theme-gray.mode-auto.is-os-dark .sp-review-avatar img {
    background: transparent !important;  /* let real avatar photo show */
}
/* Cast/director "no photo" emoji fallback — bump contrast site-wide */
.sp-cast-no-photo,
.sp-person-no-photo {
    color: var(--sp-text-dim) !important;
}
/* Review/order/notification author avatars w/o photo: ensure contrast in light mode too */
body:not(.mode-dark):not(.theme-gray) .sp-review-avatar {
    /* primary gradient already vivid in light themes — keep gradient + white text */
    color: #fff !important;
}

/* sp-bm-chip itself — main category chip on /browse/menu */
body.mode-dark .sp-bm-chip,
body.theme-gray .sp-bm-chip {
    background: var(--sp-surface-2) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-bm-chip:active,
body.theme-gray .sp-bm-chip:active { background: var(--sp-bg) !important; }
body.mode-dark .sp-bm-chip .cnt {
    /* in non-gray dark, primary is colored (orange/etc), white text reads fine */
    color: #fff !important;
}

/* /browse/menu wrappers + lists */
body.mode-dark .sp-bm-section,
body.theme-gray .sp-bm-section {
    background: var(--sp-surface) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-bm-section-h,
body.theme-gray .sp-bm-section-h { color: var(--sp-text) !important; }
body.mode-dark .sp-bm-list-item,
body.theme-gray .sp-bm-list-item {
    color: var(--sp-text) !important;
    border-bottom-color: var(--sp-border) !important;
}
body.mode-dark .sp-bm-list-item .lbl,
body.theme-gray .sp-bm-list-item .lbl { color: var(--sp-text) !important; }
body.mode-dark .sp-bm-list-item .cnt,
body.theme-gray .sp-bm-list-item .cnt {
    background: var(--sp-bg) !important;
    color: var(--sp-text-dim) !important;
}
body.mode-dark .sp-bm-list-item .chev,
body.theme-gray .sp-bm-list-item .chev { color: var(--sp-text-dim) !important; }
body.mode-dark .sp-bm-tile,
body.theme-gray .sp-bm-tile {
    background: var(--sp-surface-2) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-bm-fmt-card,
body.theme-gray .sp-bm-fmt-card {
    background: var(--sp-surface-2) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-bm-fmt-name,
body.theme-gray .sp-bm-fmt-name { color: var(--sp-text) !important; }
/* end batch 4 system-wide badge fix */

/* Volume slider — pops out from mute button */
.sp-hero-inplace-volume {
    position: absolute;
    top: 50px; right: 8px;
    background: rgba(0,0,0,0.85);
    border-radius: 14px;
    padding: 8px 14px;
    z-index: 8;
    display: flex;
    align-items: center;
    gap: 10px;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    min-width: 160px;
}
.sp-hero-vol-input {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background: rgba(255,255,255,0.3);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.sp-hero-vol-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--sp-primary);
}
.sp-hero-vol-input::-moz-range-thumb {
    width: 16px; height: 16px;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--sp-primary);
}
.sp-hero-vol-label {
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    min-width: 24px;
    text-align: right;
}

/* ============================================================
 * Bug#76 — Dark mode comprehensive fix (Playwright audit 2026-05-13)
 * Priorities: (P1) อ่านไม่ออก (text contrast) (P2) dark mode purity (P3) theme buttons preserve theme
 * ============================================================ */

/* ── P1: TMDB elements — gray text on white needs lift in dark mode ── */
body.mode-dark .tmdb-cast-name,
body.mode-dark .tmdb-sect-title,
body.mode-dark .tmdb-genre,
body.mode-dark .tmdb-cast-char {
    color: #e0e0e0;
}
body.mode-dark .tmdb-cast-meta,
body.mode-dark .tmdb-genre-list {
    color: #b0b0b0;
}

/* ── P1: Card badges (rating, award, disc) — contrast lift ── */
body.mode-dark .sp-card-badge.is-rating,
body.mode-dark .sp-card-badge.is-award {
    background: rgba(255,200,0,0.95) !important;
    color: #000 !important;
    font-weight: 700;
}
body.mode-dark .sp-disc-badge.bd {
    background: #0066cc !important;
    color: #fff !important;
}
body.mode-dark .score-badge.rt.on-vdo {
    background: rgba(0,0,0,0.85) !important;
    color: #fff !important;
}

/* ── P2: Icon buttons on non-image bg (mycart, checkout, orders, me, etc.) ── */
/* Keep transparent on detail-header + subpage-header (have dark hero/orange bg) */
body.mode-dark .sp-icon-btn:not(.sp-detail-header .sp-icon-btn):not(.sp-subpage-header .sp-icon-btn) {
    background: rgba(255,255,255,0.08);
    color: #e0e0e0;
}
body.mode-dark .sp-back-btn:not(.sp-detail-header .sp-back-btn):not(.sp-subpage-header .sp-back-btn) {
    background: rgba(255,255,255,0.12);
    color: #e0e0e0;
}

/* ── P2: Generic dark mode body root (html + body bg) ── */
body.mode-dark {
    background: #0f0f0f;
    color: #e0e0e0;
}
html:has(body.mode-dark) {
    background: #0f0f0f;
}

/* ── P3: Theme primary buttons preserve theme color in dark mode ── */
/* (handled by --sp-primary var — verify no override needed) */

/* ── Misc cards in dark mode ── */
body.mode-dark .sp-card {
    background: #1a1a1a !important;
    color: #e0e0e0;
}
body.mode-dark .sp-card .sp-card-title,
body.mode-dark .sp-card .sp-card-name {
    color: #f5f5f5 !important;
}
body.mode-dark .sp-card .sp-card-price-old {
    color: #888 !important;
}

/* Bug#76b: fresh tomato badge — white bg in dark mode */
body.mode-dark .sp-card-badge.is-fresh {
    background: rgba(255,255,255,0.92) !important;
    color: #000 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Bug#83: Site-wide contrast sweep — Playwright dark+light scan 2026-05-13
   Yut: "vdo_feed/55589 dark badge คะแนน 7.8 สีกลืน ... สแกนทั้งเวป
   เอาให้มันขาด — ขอ dark + 1 light tone"
   Issues: 195 light / 61 dark from automated WCAG scan
   ═══════════════════════════════════════════════════════════════════ */

/* ── Rating num "⭐ 7.8" in vdo_feed dark mode — primary orange ratio low ── */
body.mode-dark .sp-vfeed-rating-row .sp-vfeed-rating-num,
body.mode-dark .sp-vfeed-rating-num {
    color: #fbbf24 !important;
    font-weight: 700 !important;
}
body.mode-dark .sp-vfeed-rating-row .sp-vfeed-rating-count,
body.mode-dark .sp-vfeed-rating-count {
    color: #c8c8c8 !important;
}

/* ── Status badges in dark mode — pending/paid/etc on dark card bg ── */
/* Scanner: "💳 ที่ต้องชำระ" fg=ee4d2d on bg=#262626 ratio=4.13 (under AA 4.5) */
body.mode-dark .sp-order-status.status-pending {
    background: rgba(238,77,45,0.15) !important;
    color: #ff8a6e !important;
}
body.mode-dark .sp-order-status.status-paid {
    background: rgba(245,158,11,0.15) !important;
    color: #fcd34d !important;
}
body.mode-dark .sp-order-status.status-shipping {
    background: rgba(59,130,246,0.15) !important;
    color: #93c5fd !important;
}
body.mode-dark .sp-order-status.status-done {
    background: rgba(34,197,94,0.15) !important;
    color: #86efac !important;
}

/* ── Order detail amounts ฿XXX in notification cards — dark bg ── */
body.mode-dark .sp-notif-card .amt,
body.mode-dark .sp-notif-item .amt,
body.mode-dark span.amt {
    color: #ff8a6e !important;
    font-weight: 700 !important;
}

/* ── Coin balance / ref badge / cnt — small text on orange bg ── */
/* Scanner: "514" badge fg=white bg=#ff424f ratio=3.42; "28" cnt 3.66 */
body.mode-dark .sp-me-coin-card .badge,
.sp-me-coin-card .badge,
.sp-me-coin-card .cnt,
body.mode-dark .sp-me-coin-card .cnt {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    font-weight: 800 !important;
}

/* ── Banner v4 (bnrv4) dark mode — preserve bright gradient bg ── */
/* Scanner false-positive on gradients; user reports OK but ensure visibility */
body.mode-dark #bnrv4-wrap .bnrv4-promo-right {
    background: linear-gradient(135deg, #f97316 0%, #fbbf24 100%) !important;
}
body.mode-dark #bnrv4-wrap .bnrv4-promo-big,
body.mode-dark #bnrv4-wrap .bnrv4-promo-unit {
    color: #1a1a1a !important;
    opacity: 1 !important;
    text-shadow: 0 1px 2px rgba(255,255,255,0.4);
}

/* ── A+/A− font-size toggle — orange on white, sub-4.5 AA but is UI button ── */
/* Increase contrast to 4.6+ by darkening the orange in mode-dark */
body.mode-dark .sp-font-toggle button,
.sp-font-toggle button {
    color: #d63916 !important;
    border-color: #d63916 !important;
}

/* ── Coupon flyout "ส่วนลด" sheet-label — desktop legacy hidden flyout ── */
body.sp-body .sheet-label {
    color: #fff !important;
}
body.sp-body .sheet-overlay,
body.sp-body .coupon-sheet-overlay {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Bug#84 — Remove ซื้อเลย site-wide, flash sale only (2026-05-13)
   Yut: niche shop economics; cart-growth > impulse single-buy
   ═══════════════════════════════════════════════════════════════════ */
.sp-sticky-v2 .sp-bb-cta-cart-wide {
    flex: 1;
    flex-direction: row !important;
    gap: 8px;
    background: linear-gradient(90deg, var(--sp-primary-light) 0%, var(--sp-primary) 100%);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}
.sp-sticky-v2 .sp-bb-cta-cart-wide .sp-bb-cta-cart-icon {
    display: inline-flex;
    align-items: center;
}
.sp-sticky-v2 .sp-bb-cta-cart-wide .sp-bb-cta-line1 {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}
/* Buy-sheet: hide ซื้อเลย by default, show only when product is flash */
.sp-buy-sheet .sp-buy-sheet-buy-btn { display: none; }
.sp-buy-sheet[data-flash="1"] .sp-buy-sheet-buy-btn { display: inline-flex; align-items: center; justify-content: center; }
/* Cart button becomes filled (dominant) when alone */
.sp-buy-sheet:not([data-flash="1"]) .sp-buy-sheet-cart-btn {
    background: linear-gradient(180deg, var(--sp-primary-light), var(--sp-primary)) !important;
    color: #fff !important;
    border: 0 !important;
    font-weight: 700;
}

/* =====================================================================
   Bug#112 (2026-05-13): WCAG AA contrast batch fix.
   Agent audit found 215 instances / 85 distinct contrast bugs.
   Strategy: darken text on pastel/light bg OR darken bg to meet 4.5:1.
   Brand `--sp-primary` (#ee4d2d) kept; only wrong combos adjusted.
   ===================================================================== */

/* 1. Search dimension tags — white text on white-gradient (1.03:1). */
.sp-search-dim-tag {
    color: #1f1f1f !important;
    background: #fff7ed !important;
    border: 1px solid #fed7aa !important;
}
.sp-search-dim-tag.is-active,
.sp-search-dim-tag[aria-selected="true"] {
    color: #fff !important;
    background: var(--sp-primary) !important;
}

/* 2. Flash progress label "ขายไปแล้ว N%" — white on pink (1.07:1). */
.sp-flash-progress-lbl {
    color: #fff !important;
    text-shadow: 0 0 4px rgba(0,0,0,0.6), 0 1px 2px rgba(0,0,0,0.4) !important;
    font-weight: 800 !important;
}

/* 3. Category rank circles (top1 gold, top2 silver, top3 bronze) — white on light gradient. */
.sp-cat-rank.is-top1 { color: #3a2400 !important; }
.sp-cat-rank.is-top2 { color: #1f1f1f !important; background: linear-gradient(135deg, #c0c0c0, #616161) !important; }
.sp-cat-rank.is-top3 { color: #ffffff !important; background: linear-gradient(135deg, #a0522d, #6b3010) !important; }

/* 3b. Top-rated rank circles (used on /browse/top_rated) — same medal pattern.
   Bug: in theme-gray+mode-dark, --sp-primary-light resolves to #ffffff so the default
   .sp-rated-rank rule paints a white circle with white text = invisible. Force hex. */
.sp-rated-rank {
    background: linear-gradient(135deg, #ffd700, #f5a623) !important;
    color: #3a2400 !important;
    box-shadow: 0 2px 6px rgba(245,166,35,0.4) !important;
}
.sp-rated-card:nth-child(2) .sp-rated-rank {
    background: linear-gradient(135deg, #c0c0c0, #616161) !important;
    color: #1f1f1f !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25) !important;
}
.sp-rated-card:nth-child(3) .sp-rated-rank {
    background: linear-gradient(135deg, #cd7f32, #6b3010) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(107,48,16,0.4) !important;
}

/* 4. Disc-format badge .bd (BLU-RAY) — white on cyan (1.75:1). */
.sp-disc-badge.bd { color: #0b3f46 !important; }
.sp-disc-badge.bd50 { color: #fff !important; background: #006770 !important; }

/* 5. Bestseller cards — white on light orange (#f56d26). 24 instances. */
.sp-card-bestseller {
    background: #c2410c !important;
    color: #fff !important;
}
body.theme-gray .sp-card-bestseller,
body.mode-dark .sp-card-bestseller { background: #7c2d12 !important; color: #fde68a !important; }

/* 6. Drawer header & avatar — pervasive salmon orange bg, white text fails on lighter shades. */
.sp-drawer-header { background: linear-gradient(135deg, #c2410c, #9a3412) !important; }
.sp-drawer-avatar { background: rgba(0,0,0,0.35) !important; color: #fff !important; }
.sp-drawer-close  { background: rgba(0,0,0,0.45) !important; color: #fff !important; }
.sp-drawer-user-info, .sp-drawer-user-info * { color: #fff !important; }
.sp-drawer-line-cta { background: #06c755 !important; color: #fff !important; }

/* 7. Hero grid flag — yellow on gold OK but ensure contrast on red text. */
.sp-hero-card-grid .sp-hero-grid-flag { background: #ffd700 !important; color: #7c1212 !important; font-weight: 900 !important; }

/* 8. Coupon family — white text on light-orange backgrounds (~2.9-3.0:1). */
.sp-coupon-left { background: #c2410c !important; color: #fff !important; }
.sp-coupon-disc, .sp-coupon-disc-label { color: #fff !important; }
/* Coupon CTAs — darken brand bg from #ee4d2d (3.66:1) to #c2410c (5.4:1 with white). */
.sp-coupon-collect-btn { background: #c2410c !important; color: #fff !important; border: 0 !important; font-weight: 700 !important; }
.sp-coupon-collect-btn.done, .sp-coupon-collect-btn.is-collected { background: #166534 !important; color: #fff !important; border-color: #166534 !important; }
.sp-coupon-use-btn { background: #c2410c !important; color: #fff !important; border: 0 !important; font-weight: 700 !important; }

/* 9. Score badges (metacritic green, IMDb yellow) — white text on light bg. */
.score-badge.metacritic { background: #2e7d32 !important; color: #fff !important; }
.score-badge.imdb { background: #b45309 !important; color: #fff !important; }
.score-badge.rotten { background: #b91c1c !important; color: #fff !important; }

/* 10. Bestseller quicklinks — orange text on light orange bg may fail. */
.sp-bsl-quicklink { color: #9a3412 !important; border-color: #c2410c !important; }
.sp-bsl-pill.active { background: #c2410c !important; color: #fff !important; }

/* 11. Empty state CTA — white text on light orange. */
.sp-empty-cta { background: #c2410c !important; color: #fff !important; }

/* 12. Card "is-hot" + "ใหม่" + "ลด N%" small badges. */
.sp-card-badge.is-hot { background: #b91c1c !important; color: #fff !important; }
.sp-badge.new { background: #c2410c !important; color: #fff !important; }
.sp-menu-flag { background: #c2410c !important; color: #fff !important; }

/* 13. Sign-in LINE button (green) — guarantee white on official green. */
.sp-signin-line-btn { background: #06c755 !important; color: #fff !important; font-weight: 700 !important; }

/* 14. Me avatar — ensure contrast. */
.sp-me-avatar { background: rgba(0,0,0,0.35) !important; color: #fff !important; }

/* 15. Keyword pills. */
.sp-kw-label { color: #9a3412 !important; }
.sp-kw-cta { background: #c2410c !important; color: #fff !important; }

/* 16. Flash tab state + countdown label — already use white shadow but ensure. */
.sp-flash-tab .sp-flash-tab-state { color: rgba(255,255,255,0.92) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }
.sp-flash-cd-lbl { color: rgba(255,255,255,0.92) !important; text-shadow: 0 1px 2px rgba(0,0,0,0.3); }

/* 17. Eyebrow labels "ขายดี Blu-ray" — teal on light pastel teal. */
.sp-hb-eyebrow, .sp-hb-eyebrow .label, .label.eyebrow { color: #006770 !important; font-weight: 700 !important; }

/* 18. Sheet-code (coupon code chip in coupon header) — amber on purple (2.23:1). */
.sheet-code { color: #fff !important; background: rgba(0,0,0,0.25) !important; border-color: rgba(255,255,255,0.6) !important; }

/* 19. Generic .icon & .btn from drawer scope — ensure visible. */
.sp-drawer-content .icon { color: #fff !important; }
.sp-drawer-content .btn { color: #fff !important; }

/* =====================================================================
   Bug#113 (2026-05-13): vdo_feed page chips/ribbons/pills contrast fix.
   Yut's screenshot 2026-05-13 — /home/vdo_feed/253 still had cream chips
   with light orange text (4.07:1) under price row. Agent missed deep-scan
   of vfeed because it sampled outer DOM only.
   ===================================================================== */

/* Coupon ribbon — was cream gradient + orange text (4.07:1). Switch to dark orange + white. */
.sp-vfeed-coupon-ribbon {
    background: linear-gradient(90deg, #c2410c, #9a3412) !important;
    color: #fff !important;
    font-weight: 700 !important;
}
.sp-vfeed-coupon-ribbon * { color: #fff !important; }
.sp-vfeed-coupon-ribbon:active { background: linear-gradient(90deg, #9a3412, #7c2d12) !important; }

/* Discount pct pill (e.g., -50%) — was cream + orange (3.6:1). */
.sp-vfeed-price-block .sp-vfeed-disc-pct {
    background: #c2410c !important;
    color: #fff !important;
    font-weight: 700 !important;
}

/* Rec-badge "ฮิต" — gold #d4af37 + white (2.46:1). Darken bg. */
.sp-vfeed-badges-row .sp-vfeed-rec-badge.is-hit {
    background: #8a6b00 !important;
    color: #fff !important;
}

/* Info-chip is-rating + is-awards — cream/butter bg, light gold text gets eaten
   by Yut's display (2026-05-13 screenshot: ⭐ 8.3 + 🏆 รางวัล 2 invisible).
   Force text to very-dark brown so they read on cream regardless of theme. */
.sp-vfeed-info-chip.is-rating,
.sp-vfeed-info-chip.is-awards {
    color: #3a1700 !important;
    font-weight: 700 !important;
}
.sp-vfeed-info-chip.is-rating {
    background: #fff5e6 !important;
    border-color: #c2410c !important;
}
.sp-vfeed-info-chip.is-awards {
    background: #fef2cc !important;
    border-color: #8a6b00 !important;
}
.sp-vfeed-info-chip.is-rating *,
.sp-vfeed-info-chip.is-awards * { color: #3a1700 !important; }

/* =====================================================================
   Bug#116 (2026-05-13): Rating chip ⭐ N.N — emoji ⭐ is YELLOW natively
   so it blended into amber/gold backgrounds (line 10510). Yut: "อันกลาง
   ดาวแล้วก็คะแนน มันไม่เปลี่ยน". Switch to dark pill + gold text — emoji
   yellow + gold text both pop on near-black bg, regardless of theme.
   ===================================================================== */
.sp-card-badge.is-rating,
.sp-vfeed-badge.is-rating,
.sp-vfeed-info-chip.is-rating,
.sp-vfeed-rec-badge.is-rating,
body.mode-dark .sp-card-badge.is-rating,
body.mode-dark .sp-vfeed-info-chip.is-rating,
body.theme-gray .sp-card-badge.is-rating,
body.theme-gray .sp-vfeed-info-chip.is-rating {
    background: rgba(0, 0, 0, 0.78) !important;
    color: #ffd700 !important;
    border: 1px solid rgba(255, 215, 0, 0.5) !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
}
.sp-card-badge.is-rating *,
.sp-vfeed-info-chip.is-rating *,
.sp-vfeed-rec-badge.is-rating * { color: #ffd700 !important; }

/* Bug#129 (2026-05-13): Award chip ⭐ + 🏆 ดูกลืนกัน (ดำ-ทอง ติดๆ).
   Yut directive: invert awards → gold bg + dark text (= โล่รางวัล) so it
   contrasts the rating chip (dark+gold = ดาวคะแนน). */
.sp-card-badge.is-award,
.sp-vfeed-info-chip.is-awards,
.sp-vfeed-rec-badge.is-award,
body.mode-dark .sp-card-badge.is-award,
body.theme-gray .sp-card-badge.is-award {
    background: linear-gradient(135deg, #ffd700 0%, #d4af37 100%) !important;
    color: #1a1a1a !important;
    border: 1px solid rgba(0, 0, 0, 0.4) !important;
    font-weight: 700 !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    text-shadow: 0 1px 1px rgba(255,255,255,0.3);
}
.sp-card-badge.is-award *,
.sp-vfeed-info-chip.is-awards *,
.sp-vfeed-rec-badge.is-award * { color: #1a1a1a !important; }
/* OLD pre-Bug#129 (kept for rollback):
.sp-card-badge.is-award,
.sp-vfeed-info-chip.is-awards,
.sp-vfeed-rec-badge.is-award { background: rgba(0,0,0,0.78); color: #ffd700;
    border: 1px solid rgba(255,215,0,0.5); }
*/

/* Bug#117 (2026-05-13): vfeed CTA button "ซื้อโดยใช้โค้ด ฿N" —
   gradient var(--sp-primary-light)→primary = #fb8c1f→#ee4d2d, white text
   on light-orange end = 2.99:1 (fail AA). Darken gradient. */
.sp-vfeed-actions .sp-vfeed-cta {
    background: linear-gradient(90deg, #c2410c 0%, #9a3412 100%) !important;
    color: #fff !important;
}
.sp-vfeed-actions .sp-vfeed-cta .line1,
.sp-vfeed-actions .sp-vfeed-cta .line2 {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
}

/* Drawer section headers — brand orange on white 3.66:1 borderline.
   "เลือกหนังตามแบบ", "บริการ" etc. Darken text for normal text AA. */
.sp-drawer-section-h { color: #9a3412 !important; font-weight: 800 !important; }

/* Bug#130 (2026-05-13): is-hot/is-fresh/is-new chips were all dark-bg with
   different accent text → looked identical from afar when sitting next to
   each other (Yut: "Popular imdb สีเดียวกัน certified fresh ด้วย ดำๆหมด").
   Give each a distinct gradient bg matching semantic color:
   - 🔥 Hot/Popular = RED (fire)
   - ✓ Fresh / Certified Fresh = GREEN (ripe)
   - 🆕 New = BLUE (cool)
   Rating ⭐ stays dark+gold (anchor); Awards 🏆 stays gold-bg (Bug#129). */
.sp-card-badge.is-hot,
.sp-vfeed-rec-badge.is-hot,
.sp-vfeed-info-chip.is-hot,
.sp-vfeed-badges-row .sp-vfeed-rec-badge.is-hot,
body.mode-dark .sp-card-badge.is-hot,
body.theme-gray .sp-card-badge.is-hot {
    background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.3) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
.sp-card-badge.is-hot *,
.sp-vfeed-rec-badge.is-hot *,
.sp-vfeed-info-chip.is-hot * { color: #ffffff !important; }

.sp-card-badge.is-fresh,
.sp-vfeed-rec-badge.is-fresh,
.sp-vfeed-info-chip.is-fresh {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.3) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
.sp-card-badge.is-fresh *,
.sp-vfeed-rec-badge.is-fresh *,
.sp-vfeed-info-chip.is-fresh * { color: #ffffff !important; }

.sp-card-badge.is-new,
.sp-vfeed-rec-badge.is-new,
.sp-vfeed-info-chip.is-new {
    background: linear-gradient(135deg, #0284c7 0%, #075985 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(0,0,0,0.3) !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
.sp-card-badge.is-new *,
.sp-vfeed-rec-badge.is-new *,
.sp-vfeed-info-chip.is-new * { color: #ffffff !important; }

/* OLD pre-Bug#130 (kept for rollback):
.sp-card-badge.is-hot { background: rgba(0,0,0,0.82); color: #fbbf24; border: 1px solid rgba(251,191,36,0.5); }
.sp-card-badge.is-fresh { background: rgba(0,0,0,0.82); color: #fff; border: 1px solid #d63a1f; }
.sp-card-badge.is-new { background: rgba(0,0,0,0.82); color: #fff; border: 1px solid #06b6d4; }
*/

/* =====================================================================
   Bug#120 (2026-05-13, from theme×mode agent):
   1. theme-red/blue/purple + mode-dark — saturated primary text dims on dark bg.
      Mirror theme-gray+dark fix (--sp-primary-light: #fff so prices/links pop).
   ===================================================================== */
body.theme-red.mode-dark,
body.theme-red.mode-auto.is-os-dark,
body.theme-blue.mode-dark,
body.theme-blue.mode-auto.is-os-dark,
body.theme-purple.mode-dark,
body.theme-purple.mode-auto.is-os-dark,
body.theme-green.mode-dark,
body.theme-green.mode-auto.is-os-dark,
body.theme-pink.mode-dark,
body.theme-pink.mode-auto.is-os-dark {
    --sp-primary-light: #fde68a;   /* warm amber visible on any dark bg */
    --sp-text:          #f1f5f9;
    --sp-text-dim:      #cbd5e1;
}
/* Force visible prices/strong-text on these themes' dark mode */
body.theme-red.mode-dark .sp-card-price,
body.theme-blue.mode-dark .sp-card-price,
body.theme-purple.mode-dark .sp-card-price,
body.theme-green.mode-dark .sp-card-price,
body.theme-pink.mode-dark .sp-card-price,
body.theme-red.mode-dark .sp-rated-price,
body.theme-blue.mode-dark .sp-rated-price,
body.theme-purple.mode-dark .sp-rated-price,
body.theme-green.mode-dark .sp-rated-price,
body.theme-pink.mode-dark .sp-rated-price {
    color: #fbbf24 !important;
    font-weight: 700 !important;
}

/* 2. theme-gray + mode-light /me page — login/signup buttons white-on-white.
   Force visible bg + border. */
body.theme-gray.mode-light .sp-me-login-btn,
body.theme-gray .sp-me-login-btn:not(.sp-me-signup-btn) {
    background: #111827 !important;
    color: #fff !important;
    border: 1px solid #111827 !important;
}
body.theme-gray.mode-light .sp-me-signup-btn,
body.theme-gray .sp-me-signup-btn {
    background: #fff !important;
    color: #111827 !important;
    border: 1.5px solid #111827 !important;
}

/* 3. theme-pink + mode-light filter chips same-hue cream-pink-pink blender. */
body.theme-pink.mode-light .sp-filter-chip,
body.theme-pink.mode-light .sp-filter-pill,
body.theme-pink.mode-light .sp-search-dim-tag {
    background: #fff !important;
    color: #831843 !important;        /* dark plum text on white — 12:1 */
    border: 1px solid #be185d !important;
}
body.theme-pink.mode-light .sp-filter-chip.is-active,
body.theme-pink.mode-light .sp-filter-pill.is-active {
    background: #be185d !important;
    color: #fff !important;
    border-color: #be185d !important;
}

/* Bug#122 (2026-05-13): filter-sheet "ค้นหา" apply button used var(--sp-primary)
   bg + white text. In theme-gray+mode-dark, --sp-primary resolves to near-white
   (#f3f4f6) — same pattern as Bug#115. White-on-white = invisible button.
   Force explicit brand orange bg regardless of theme. */
.sp-fs-apply,
body.theme-gray .sp-fs-apply,
body.theme-gray.mode-dark .sp-fs-apply,
body.theme-gray.mode-light .sp-fs-apply,
body.mode-dark .sp-fs-apply {
    background: #ee4d2d !important;
    color: #fff !important;
    font-weight: 800 !important;
}
.sp-fs-clear,
body.theme-gray .sp-fs-clear,
body.theme-gray.mode-dark .sp-fs-clear,
body.mode-dark .sp-fs-clear {
    background: transparent !important;
    color: #ee4d2d !important;
    border: 1.5px solid #ee4d2d !important;
    font-weight: 700 !important;
}
body.theme-gray.mode-dark .sp-fs-clear,
body.mode-dark .sp-fs-clear {
    color: #fde68a !important;
    border-color: #fde68a !important;
}

/* Pick button + form — was yellow→orange gradient with white text (~2.5:1). */
.sp-vfeed-pick-btn {
    background: linear-gradient(135deg, #b45309 0%, #7c2d12 100%) !important;
    color: #fff !important;
    font-weight: 700 !important;
}
.sp-vfeed-pick-form {
    background: linear-gradient(135deg, #b45309 0%, #7c2d12 100%) !important;
    color: #fff !important;
}

/* Inactive notice — orange-on-white tint readability boost. */
.sp-vfeed-inactive-notice {
    background: rgba(154,52,18,0.95) !important;
    color: #fff !important;
    font-weight: 600 !important;
}

/* Rating num + chev — ensure visible regardless of theme. */
.sp-vfeed-rating-row .sp-vfeed-rating-num { color: #ffd700 !important; font-weight: 700 !important; }
.sp-vfeed-title-row .sp-vfeed-chev { color: #999 !important; }

/* ═══════════════════════════════════════════════════════════════════
   Bug#137 — Dark-mode "เส้นกรอบขาว / feed ยังมีขาว" sweep (2026-05-14)
   Yut complaint: white circles/pills/badges overlay dark cards & video
   frames in dark mode. Found via Playwright theme×mode×page audit
   (orange/gray/red/blue/purple/green/pink × light/dark × 5 priority
   pages = 70 screenshots). Confirmed visible whites:
     1. .sp-fav (wishlist heart) — 34×34 white-95% circle on product
        cards. Hardcoded rgba(255,255,255,0.95) at line 1145, no dark
        override. Appears on home, search, browse, detail pages.
     2. .sp-font-toggle button (A+/A−) — 32×32 white-92% circle floats
        bottom-right on EVERY page including vdo_feed. Line 13554
        already darkens TEXT but leaves bg white. This is the primary
        "feed ยังมีขาว" complaint.
     3. .sp-search-dim-tag chips on search results — cream #fff7ed bg
        looks bright on dark page bg (contrast-fine but optically odd).
   Excluded (intentional):
     - .sp-card-badge.is-fresh — Yut directive (CERTIFIED FRESH styled
       like Rotten Tomatoes sticker, must stay white-bg/red-text).
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Wishlist heart button — translucent dark surface in dark mode.
      Keep white-95% in light mode (no change). */
body.mode-dark .sp-fav,
body.mode-auto.is-os-dark .sp-fav {
    background: rgba(28, 28, 28, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}
body.mode-dark .sp-fav .sp-fav-icon,
body.mode-auto.is-os-dark .sp-fav .sp-fav-icon {
    color: rgba(255, 255, 255, 0.15) !important;
    -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.7) !important;
            text-stroke: 1.5px rgba(255, 255, 255, 0.7) !important;
}
/* is-fav (already favorited) stays red — heart fills correctly */
body.mode-dark .sp-fav.is-fav .sp-fav-icon,
body.mode-auto.is-os-dark .sp-fav.is-fav .sp-fav-icon {
    color: #ef4444 !important;
    -webkit-text-stroke: 0 !important;
            text-stroke: 0 !important;
}

/* 2. A+/A− floating font-size toggle — primary "feed ยังมีขาว".
      OLD (kept context, see line 13554): bg stayed white, only text darkened
      to #d63916. Now: dark mode → dark bg + bright orange text. */
body.mode-dark .sp-font-toggle button,
body.mode-auto.is-os-dark .sp-font-toggle button {
    background: rgba(28, 28, 28, 0.9) !important;
    color: #fb923c !important;
    border: 1px solid rgba(251, 146, 60, 0.5) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}
body.mode-dark .sp-font-toggle button:active,
body.mode-auto.is-os-dark .sp-font-toggle button:active {
    background: rgba(60, 30, 10, 0.95) !important;
    transform: scale(0.92);
}

/* 3. Search dim-tag (filter chip "ชื่อสินค้า/ผู้กำกับ/นักแสดง" etc.)
      OLD light mode #fff7ed/cream looks like white box on dark page.
      Dark mode → dark surface + lighter orange border + bright text. */
body.mode-dark .sp-search-dim-tag,
body.mode-auto.is-os-dark .sp-search-dim-tag {
    background: rgba(38, 38, 38, 0.85) !important;
    color: #fde68a !important;
    border: 1px solid rgba(253, 230, 138, 0.4) !important;
}
body.mode-dark .sp-search-dim-tag.is-active,
body.mode-dark .sp-search-dim-tag[aria-selected="true"],
body.mode-auto.is-os-dark .sp-search-dim-tag.is-active,
body.mode-auto.is-os-dark .sp-search-dim-tag[aria-selected="true"] {
    background: var(--sp-primary) !important;
    color: #fff !important;
    border-color: var(--sp-primary) !important;
}

/* ============================================================
   Bug#146 (2026-05-14) — myorders/detail Shopee-style redesign
   Prefix: .sp-orddetail- (avoid collision with existing sp- classes)
   ============================================================ */

/* --- Container scope --- */
.sp-order-detail-page.sp-orddetail-v2 {
    background: var(--sp-bg);
    padding: 0;
    padding-bottom: 96px; /* room for sticky CTA bar */
}

/* --- Status banner (full-bleed colored bar at top) --- */
.sp-orddetail-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 16px;
    color: #fff;
    margin: 0 0 10px;
    position: relative;
    overflow: hidden;
}
.sp-orddetail-banner::before {
    content: '';
    position: absolute;
    right: -30px;
    top: -30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    pointer-events: none;
}
.sp-orddetail-banner.is-received   { background: linear-gradient(135deg, #16a34a 0%, #15803d 100%); }
.sp-orddetail-banner.is-delivered  { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); }
.sp-orddetail-banner.is-processing { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.sp-orddetail-banner.is-pending    { background: linear-gradient(135deg, #ee4d2d 0%, #c84411 100%); }
.sp-orddetail-banner.is-cancelled  { background: linear-gradient(135deg, #6b7280 0%, #374151 100%); }
.sp-orddetail-banner-icon {
    font-size: 28px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}
.sp-orddetail-banner-body { flex: 1; min-width: 0; z-index: 1; }
.sp-orddetail-banner-title { font-size: 18px; font-weight: 700; line-height: 1.2; }
.sp-orddetail-banner-sub { font-size: 13px; opacity: 0.95; margin-top: 4px; line-height: 1.35; }

/* --- Card wrapper (replaces sp-checkout-section in this page) --- */
.sp-orddetail-card {
    background: var(--sp-surface);
    border-radius: 10px;
    padding: 14px;
    margin: 0 10px 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.sp-orddetail-card-h {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--sp-border, #eee);
}
.sp-orddetail-card-h-icon { font-size: 18px; line-height: 1; }
.sp-orddetail-card-h-title { font-size: 15px; font-weight: 600; color: var(--sp-text); flex: 1; }
.sp-orddetail-card-h-action {
    background: var(--sp-primary);
    color: #fff;
    border: 0;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    font-size: 14px;
    cursor: pointer;
    line-height: 1;
}

/* --- Stepper (4-step horizontal) --- */
.sp-orddetail-stepper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 10px;
    gap: 0;
}
.sp-orddetail-stepper .sp-ot-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.sp-orddetail-stepper .sp-ot-step .dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--sp-bg);
    color: var(--sp-text-dim);
    border: 2px solid var(--sp-border, #ddd);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}
.sp-orddetail-stepper .sp-ot-step.is-done .dot {
    background: var(--sp-primary);
    color: #fff;
    border-color: var(--sp-primary);
}
.sp-orddetail-stepper .sp-ot-step .lbl {
    font-size: 11px;
    color: var(--sp-text-dim);
    white-space: nowrap;
}
.sp-orddetail-stepper .sp-ot-step.is-done .lbl { color: var(--sp-text); font-weight: 500; }
.sp-orddetail-stepper .sp-ot-line {
    flex: 1;
    height: 2px;
    background: var(--sp-border, #ddd);
    margin: 0 4px;
    margin-bottom: 18px; /* align with dot center */
}
.sp-orddetail-stepper .sp-ot-line.is-done { background: var(--sp-primary); }

/* --- Tracking timeline (moved from inline <style> + restyled) --- */
.sp-track-wrap { padding: 0; }
.sp-track-num-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--sp-bg);
    border-radius: 8px;
    margin-bottom: 14px;
}
.sp-track-num-label { font-size: 13px; color: var(--sp-text-dim); }
.sp-track-num {
    font-family: ui-monospace, SFMono-Regular, monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--sp-text);
    flex: 1;
    word-break: break-all;
}
.sp-track-copy {
    background: var(--sp-surface);
    color: var(--sp-text);
    border: 1px solid var(--sp-border, #ddd);
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 14px;
}
.sp-track-timeline { list-style: none; padding: 0; margin: 0; }
.sp-track-step { display: flex; gap: 12px; padding: 8px 0; position: relative; }
.sp-track-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 11px;
    top: 32px;
    bottom: -8px;
    width: 2px;
    background: var(--sp-border, #ddd);
}
.sp-track-step.is-done:not(:last-child)::after { background: #06C755; }
.sp-track-step .dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--sp-bg);
    color: var(--sp-text);
    border: 2px solid var(--sp-border, #ddd);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
    z-index: 1;
}
.sp-track-step.is-done .dot { background: #06C755; color: #fff; border-color: #06C755; }
.sp-track-step.is-active .dot {
    background: var(--sp-primary);
    color: #fff;
    border-color: var(--sp-primary);
    animation: spTrackPulse 1.6s infinite;
}
@keyframes spTrackPulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(238,77,45,.5); }
    50%     { box-shadow: 0 0 0 8px rgba(238,77,45,0); }
}
.sp-track-step .info { flex: 1; }
.sp-track-step .lbl { font-size: 14px; font-weight: 600; color: var(--sp-text); }
.sp-track-step .dt { font-size: 12px; color: var(--sp-text-dim); margin-top: 2px; }
.sp-track-events { margin-top: 14px; border-top: 1px dashed var(--sp-border, #eee); padding-top: 12px; }
.sp-track-events-h { font-size: 13px; font-weight: 600; color: var(--sp-text-dim); margin-bottom: 8px; }
.sp-track-event {
    padding: 8px 10px;
    background: var(--sp-bg);
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 13px;
}
.sp-track-event .ev-dt { color: #06C755; font-weight: 600; font-size: 12px; }
.sp-track-event .ev-loc { color: var(--sp-text-dim); font-size: 12px; }
.sp-track-event .ev-desc { color: var(--sp-text); }
.sp-track-meta { font-size: 11px; color: var(--sp-text-dim); margin-top: 8px; text-align: center; }

/* --- Address card --- */
.sp-orddetail-address { padding: 4px 0; }
.sp-orddetail-addr-name { font-size: 15px; font-weight: 600; color: var(--sp-text); }
.sp-orddetail-addr-tel { font-size: 13px; color: var(--sp-text-dim); font-weight: 400; margin-left: 4px; }
.sp-orddetail-addr-text {
    font-size: 13px;
    color: var(--sp-text-dim);
    margin-top: 6px;
    line-height: 1.5;
}

/* --- Shop row (Shopee shop section header) --- */
.sp-orddetail-items-card { padding-top: 12px; }
.sp-orddetail-shop-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--sp-border, #eee);
}
.sp-orddetail-shop-logo {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-dark, #c84411));
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sp-orddetail-shop-name { font-size: 14px; font-weight: 600; color: var(--sp-text); }
.sp-orddetail-shop-badge {
    font-size: 10px;
    color: var(--sp-primary);
    background: var(--sp-primary-bg, #fff5f0);
    border: 1px solid var(--sp-primary);
    border-radius: 4px;
    padding: 2px 6px;
    font-weight: 500;
}
.sp-orddetail-shop-chat {
    margin-left: auto;
    font-size: 12px;
    color: #06C755;
    background: rgba(6,199,85,.08);
    border: 1px solid rgba(6,199,85,.3);
    border-radius: 14px;
    padding: 4px 10px;
    text-decoration: none;
    flex-shrink: 0;
}
.sp-orddetail-items-card .sp-cart-list { background: transparent; }
.sp-orddetail-items-card .sp-cart-item { padding: 10px 0; border-bottom: 1px dashed var(--sp-border, #eee); }
.sp-orddetail-items-card .sp-cart-item:last-child { border-bottom: 0; }

/* --- Order metadata card --- */
.sp-orddetail-meta { padding: 2px 0; }
.sp-orddetail-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 13px;
    gap: 12px;
    border-bottom: 1px dashed var(--sp-border, #f3f4f6);
}
.sp-orddetail-meta-row:last-child { border-bottom: 0; }
.sp-orddetail-meta-row .lbl { color: var(--sp-text-dim); flex-shrink: 0; }
.sp-orddetail-meta-row .val {
    color: var(--sp-text);
    font-weight: 500;
    text-align: right;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.sp-orddetail-copy-btn {
    background: var(--sp-primary-bg, #fff5f0);
    color: var(--sp-primary);
    border: 1px solid var(--sp-primary);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 11px;
    cursor: pointer;
    line-height: 1.4;
}
.sp-orddetail-copy-btn.is-ok {
    background: #06C755;
    color: #fff;
    border-color: #06C755;
}

/* --- After-sales actions row (3 buttons) --- */
.sp-orddetail-actions-row {
    display: flex;
    gap: 8px;
    margin: 0 10px 10px;
    padding: 12px;
    background: var(--sp-surface);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.sp-orddetail-action {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 4px;
    background: var(--sp-bg);
    border: 1px solid var(--sp-border, #eee);
    border-radius: 8px;
    color: var(--sp-text);
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    text-align: center;
}
.sp-orddetail-action .ico { font-size: 20px; line-height: 1; }
.sp-orddetail-action .lbl { font-size: 11px; color: var(--sp-text-dim); }
.sp-orddetail-action:active { background: var(--sp-primary-bg, #fff5f0); }

/* --- Back link --- */
.sp-orddetail-back-link {
    display: block;
    text-align: center;
    margin: 6px 10px 0;
    padding: 12px;
    color: var(--sp-text-dim);
    text-decoration: none;
    font-size: 13px;
    background: var(--sp-surface);
    border-radius: 8px;
    border: 1px solid var(--sp-border, #eee);
}

/* --- Sticky bottom CTA bar --- */
.sp-orddetail-bottom-spacer { height: 14px; }
.sp-orddetail-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: flex;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: var(--sp-surface);
    border-top: 1px solid var(--sp-border, #eee);
    box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
}
.sp-orddetail-cta-sec,
.sp-orddetail-cta-pri {
    flex: 1;
    padding: 12px;
    border-radius: 22px;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}
.sp-orddetail-cta-sec {
    background: var(--sp-surface);
    color: var(--sp-primary);
    border: 1px solid var(--sp-primary);
}
.sp-orddetail-cta-pri {
    background: linear-gradient(180deg, var(--sp-primary-light, #fb8c1f) 0%, var(--sp-primary) 100%);
    color: #fff;
    border: 1px solid var(--sp-primary);
}
.sp-orddetail-cta-pri:disabled { opacity: 0.6; }
.sp-orddetail-cta-pri-full { flex: 1 1 100%; }

/* --- Dark mode adjustments --- */
body.mode-dark .sp-orddetail-card,
body.mode-auto.is-os-dark .sp-orddetail-card {
    background: var(--sp-surface) !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.3) !important;
}
body.mode-dark .sp-orddetail-card-h,
body.mode-auto.is-os-dark .sp-orddetail-card-h {
    border-bottom-color: var(--sp-border) !important;
}
body.mode-dark .sp-orddetail-action,
body.mode-auto.is-os-dark .sp-orddetail-action {
    background: var(--sp-bg);
    border-color: var(--sp-border);
    color: var(--sp-text);
}
body.mode-dark .sp-orddetail-back-link,
body.mode-auto.is-os-dark .sp-orddetail-back-link {
    background: var(--sp-surface);
    border-color: var(--sp-border);
    color: var(--sp-text-dim);
}
body.mode-dark .sp-orddetail-sticky-cta,
body.mode-auto.is-os-dark .sp-orddetail-sticky-cta {
    background: var(--sp-surface) !important;
    border-top-color: var(--sp-border) !important;
}
body.mode-dark .sp-orddetail-cta-sec,
body.mode-auto.is-os-dark .sp-orddetail-cta-sec {
    background: var(--sp-bg) !important;
}
body.mode-dark .sp-orddetail-meta-row,
body.mode-auto.is-os-dark .sp-orddetail-meta-row {
    border-bottom-color: var(--sp-border) !important;
}
body.mode-dark .sp-orddetail-shop-row,
body.mode-auto.is-os-dark .sp-orddetail-shop-row {
    border-bottom-color: var(--sp-border) !important;
}
body.mode-dark .sp-orddetail-stepper .sp-ot-step .dot,
body.mode-auto.is-os-dark .sp-orddetail-stepper .sp-ot-step .dot {
    background: var(--sp-bg);
    border-color: var(--sp-border);
}
body.mode-dark .sp-orddetail-stepper .sp-ot-line,
body.mode-auto.is-os-dark .sp-orddetail-stepper .sp-ot-line {
    background: var(--sp-border);
}
body.mode-dark .sp-track-num-row,
body.mode-auto.is-os-dark .sp-track-num-row {
    background: var(--sp-bg);
}
body.mode-dark .sp-track-event,
body.mode-auto.is-os-dark .sp-track-event {
    background: var(--sp-bg);
}
/* --- end Bug#146 --- */

/* ============================================================
   Bug#149 (2026-05-14) — myorders LIST page Shopee-style redesign
   Prefix: .sp-orderlist- (avoid collision with legacy .sp-orders-/.sp-order-)
   ============================================================ */

/* --- Sticky horizontal tab bar (replaces legacy .sp-orders-tabs) --- */
.sp-orderlist-tabs {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    background: var(--sp-surface);
    border-bottom: 1px solid var(--sp-border, #eee);
    position: sticky;
    top: 56px; /* below sp-subpage-header */
    z-index: 30;
    padding: 0 4px;
}
.sp-orderlist-tabs::-webkit-scrollbar { display: none; }
.sp-orderlist-tab {
    flex: 0 0 auto;
    padding: 12px 14px 10px;
    font-size: 13px;
    font-weight: 500;
    color: var(--sp-text-dim);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    line-height: 1.2;
    transition: color .15s ease, border-color .15s ease;
}
.sp-orderlist-tab.is-active {
    color: var(--sp-primary);
    border-bottom-color: var(--sp-primary);
    font-weight: 600;
}
.sp-orderlist-tab:hover,
.sp-orderlist-tab:active {
    color: var(--sp-primary);
}

/* --- List wrapper --- */
.sp-orderlist-wrap {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* --- Card --- */
.sp-orderlist-card {
    background: var(--sp-surface);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.sp-orderlist-card.is-overdue {
    border-left: 4px solid var(--sp-primary);
}

/* --- Card head: shop pill + status --- */
.sp-orderlist-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--sp-border, #f3f4f6);
}
.sp-orderlist-shop {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
}
.sp-orderlist-shop-pill {
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    background: var(--sp-primary);
    border-radius: 3px;
    padding: 2px 5px;
    line-height: 1.25;
    flex-shrink: 0;
}
.sp-orderlist-shop-logo {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--sp-primary), var(--sp-primary-dark, #c84411));
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sp-orderlist-shop-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--sp-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-orderlist-shop-chev {
    color: var(--sp-text-dim);
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

/* --- Status pill (right side of head) --- */
.sp-orderlist-status {
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}
.sp-orderlist-status.is-pending    { background: #fff5f0; color: #ee4d2d; }
.sp-orderlist-status.is-processing { background: #fef3c7; color: #92400e; }
.sp-orderlist-status.is-delivered  { background: #dbeafe; color: #1e40af; }
.sp-orderlist-status.is-received   { background: #d1fae5; color: #065f46; }
.sp-orderlist-status.is-cancelled  { background: #f3f4f6; color: #6b7280; }

/* --- Overdue banner --- */
.sp-orderlist-overdue {
    background: #fff5e0;
    color: #c97f00;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    border-bottom: 1px solid #ffd6a8;
}

/* --- Product rows --- */
.sp-orderlist-items {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 4px 0;
}
.sp-orderlist-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
}
.sp-orderlist-item + .sp-orderlist-item {
    border-top: 1px dashed var(--sp-border, #f3f4f6);
}
.sp-orderlist-thumb {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    background: var(--sp-bg);
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sp-orderlist-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.sp-orderlist-thumb-ph {
    font-size: 32px;
    opacity: 0.4;
}
.sp-orderlist-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sp-orderlist-item-name {
    font-size: 13px;
    color: var(--sp-text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-orderlist-item-meta {
    display: flex;
    gap: 6px;
    font-size: 11px;
    color: var(--sp-text-dim);
}
.sp-orderlist-item-qty {
    background: var(--sp-bg);
    padding: 1px 6px;
    border-radius: 3px;
}
.sp-orderlist-item-price {
    font-size: 14px;
    font-weight: 600;
    color: var(--sp-text);
    flex-shrink: 0;
    align-self: flex-end;
    padding-top: 4px;
}
.sp-orderlist-item-empty {
    padding: 14px 12px;
    text-align: center;
    color: var(--sp-text-dim);
    font-size: 13px;
}
.sp-orderlist-more {
    padding: 8px 12px;
    text-align: center;
    color: var(--sp-text-dim);
    font-size: 12px;
    border-top: 1px dashed var(--sp-border, #f3f4f6);
}

/* --- Total summary row --- */
.sp-orderlist-total {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    gap: 8px;
    padding: 8px 12px;
    border-top: 1px solid var(--sp-border, #f3f4f6);
    font-size: 13px;
}
.sp-orderlist-total-lbl { color: var(--sp-text-dim); }
.sp-orderlist-total-val {
    font-size: 16px;
    font-weight: 700;
    color: var(--sp-primary);
}

/* --- Meta strip (date · ship · tracking) --- */
.sp-orderlist-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 6px 12px 10px;
    font-size: 11px;
    color: var(--sp-text-dim);
}
.sp-orderlist-meta-item { white-space: nowrap; }
.sp-orderlist-meta-track {
    font-family: ui-monospace, SFMono-Regular, monospace;
    background: var(--sp-bg);
    padding: 2px 6px;
    border-radius: 4px;
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--sp-text);
}

/* --- Action row (status-aware CTAs) --- */
.sp-orderlist-actions {
    display: flex;
    gap: 8px;
    padding: 10px 12px 12px;
    justify-content: flex-end;
    border-top: 1px solid var(--sp-border, #f3f4f6);
    flex-wrap: wrap;
}
.sp-orderlist-cta {
    padding: 8px 14px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.2;
    text-align: center;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: opacity .15s ease, transform .1s ease;
}
.sp-orderlist-cta:active { transform: scale(0.96); }
.sp-orderlist-cta-sec {
    color: var(--sp-text);
    background: var(--sp-surface);
    border-color: var(--sp-border, #d1d5db);
}
.sp-orderlist-cta-pri {
    color: #fff;
    background: linear-gradient(180deg, var(--sp-primary-light, #fb8c1f) 0%, var(--sp-primary) 100%);
    border-color: var(--sp-primary);
}
.sp-orderlist-cta-rate {
    color: #f59e0b;
    background: #fffbeb;
    border-color: #f59e0b;
}
.sp-orderlist-cta-info {
    color: #92400e;
    background: #fef3c7;
    border-color: #fcd34d;
    cursor: default;
}
.sp-orderlist-cta-muted {
    color: var(--sp-text-dim);
    background: var(--sp-bg);
    border-color: var(--sp-border, #e5e7eb);
    cursor: default;
}

/* --- Large-font support (Yut's elderly customer base) --- */
body.sp-font-lg .sp-orderlist-item-name,
body.sp-font-lg .sp-orderlist-total-val,
body.sp-font-lg .sp-orderlist-cta { font-size: 15px; }
body.sp-font-xl .sp-orderlist-item-name,
body.sp-font-xl .sp-orderlist-total-val,
body.sp-font-xl .sp-orderlist-cta { font-size: 17px; }

/* --- Dark mode --- */
body.mode-dark .sp-orderlist-tabs,
body.mode-auto.is-os-dark .sp-orderlist-tabs {
    background: var(--sp-surface);
    border-bottom-color: var(--sp-border);
}
body.mode-dark .sp-orderlist-tab,
body.mode-auto.is-os-dark .sp-orderlist-tab {
    color: var(--sp-text-dim);
}
body.mode-dark .sp-orderlist-tab.is-active,
body.mode-auto.is-os-dark .sp-orderlist-tab.is-active {
    color: var(--sp-primary);
}
body.mode-dark .sp-orderlist-card,
body.mode-auto.is-os-dark .sp-orderlist-card {
    background: var(--sp-surface) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
body.mode-dark .sp-orderlist-card-head,
body.mode-auto.is-os-dark .sp-orderlist-card-head,
body.mode-dark .sp-orderlist-total,
body.mode-auto.is-os-dark .sp-orderlist-total,
body.mode-dark .sp-orderlist-actions,
body.mode-auto.is-os-dark .sp-orderlist-actions {
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-orderlist-item + .sp-orderlist-item,
body.mode-auto.is-os-dark .sp-orderlist-item + .sp-orderlist-item,
body.mode-dark .sp-orderlist-more,
body.mode-auto.is-os-dark .sp-orderlist-more {
    border-color: var(--sp-border);
}
body.mode-dark .sp-orderlist-thumb,
body.mode-auto.is-os-dark .sp-orderlist-thumb,
body.mode-dark .sp-orderlist-item-qty,
body.mode-auto.is-os-dark .sp-orderlist-item-qty,
body.mode-dark .sp-orderlist-meta-track,
body.mode-auto.is-os-dark .sp-orderlist-meta-track {
    background: var(--sp-bg);
}
body.mode-dark .sp-orderlist-shop-name,
body.mode-auto.is-os-dark .sp-orderlist-shop-name,
body.mode-dark .sp-orderlist-item-name,
body.mode-auto.is-os-dark .sp-orderlist-item-name,
body.mode-dark .sp-orderlist-item-price,
body.mode-auto.is-os-dark .sp-orderlist-item-price {
    color: var(--sp-text);
}
body.mode-dark .sp-orderlist-status.is-pending,
body.mode-auto.is-os-dark .sp-orderlist-status.is-pending {
    background: rgba(238, 77, 45, 0.18);
    color: #ff7a55;
}
body.mode-dark .sp-orderlist-status.is-processing,
body.mode-auto.is-os-dark .sp-orderlist-status.is-processing {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
}
body.mode-dark .sp-orderlist-status.is-delivered,
body.mode-auto.is-os-dark .sp-orderlist-status.is-delivered {
    background: rgba(59, 130, 246, 0.18);
    color: #60a5fa;
}
body.mode-dark .sp-orderlist-status.is-received,
body.mode-auto.is-os-dark .sp-orderlist-status.is-received {
    background: rgba(22, 163, 74, 0.18);
    color: #4ade80;
}
body.mode-dark .sp-orderlist-status.is-cancelled,
body.mode-auto.is-os-dark .sp-orderlist-status.is-cancelled {
    background: rgba(107, 114, 128, 0.25);
    color: #9ca3af;
}
body.mode-dark .sp-orderlist-cta-sec,
body.mode-auto.is-os-dark .sp-orderlist-cta-sec {
    background: var(--sp-bg) !important;
    color: var(--sp-text) !important;
    border-color: var(--sp-border) !important;
}
body.mode-dark .sp-orderlist-cta-rate,
body.mode-auto.is-os-dark .sp-orderlist-cta-rate {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border-color: #d97706;
}
body.mode-dark .sp-orderlist-cta-info,
body.mode-auto.is-os-dark .sp-orderlist-cta-info {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border-color: #d97706;
}
body.mode-dark .sp-orderlist-cta-muted,
body.mode-auto.is-os-dark .sp-orderlist-cta-muted {
    background: var(--sp-bg);
    color: var(--sp-text-dim);
}

/* Bug#154 (2026-05-14 — Yut): -cta-pri shows white-bg in dark mode (Yut "ปุ่มสีกลืน ชำระเงิน/ซื้ออีก").
   Original gradient uses var(--sp-primary-light) which some theme×mode combos override to #fde68a/#fff.
   Force solid orange gradient using hard-coded values + white text + dark border. */
body.mode-dark .sp-orderlist-cta-pri,
body.mode-auto.is-os-dark .sp-orderlist-cta-pri {
    background: linear-gradient(180deg, #fb8c1f 0%, #ee4d2d 100%) !important;
    color: #ffffff !important;
    border-color: #c2410c !important;
}
body.mode-dark .sp-orddetail-cta-pri,
body.mode-auto.is-os-dark .sp-orddetail-cta-pri,
body.mode-dark .sp-orddetail-sticky-cta a[class*="sp-orddetail-cta-pri"],
body.mode-auto.is-os-dark .sp-orddetail-sticky-cta a[class*="sp-orddetail-cta-pri"] {
    background: linear-gradient(180deg, #fb8c1f 0%, #ee4d2d 100%) !important;
    color: #ffffff !important;
    border-color: #c2410c !important;
}
/* --- end Bug#149/154 --- */