/* =====================================================================
   รูปแบบหน้าร้านที่เจ้าของร้านเลือกได้ (systems/style_layout.php -> class บน <body>)
   ใช้ "html body.ls..." นำหน้าเพื่อให้ชนะสไตล์เดิมในแต่ละหน้า (ซึ่งใช้ !important)
   ค่าเริ่มต้นทุกข้อ = หน้าตาเดิม จึงไม่มีกฎสำหรับค่าเริ่มต้น
   ===================================================================== */

/* ---------------------------------------------------------------------
   NAVBAR
   --------------------------------------------------------------------- */
html body.ls.ls-nav-static .floating-navbar-container { position: relative !important; }
html body.ls.ls-nav-outline .custom-navbar {
    border-bottom: 2px solid var(--app-primary, #38bdf8) !important;
    box-shadow: none;
}
html body.ls.ls-nav-soft .floating-navbar-container .custom-navbar {
    background: color-mix(in srgb, var(--app-primary, #38bdf8) 12%, var(--surface, #0f172a)) !important;
    --navbar-text: var(--text-main, #f8fafc);
    border-bottom: 1px solid color-mix(in srgb, var(--app-primary, #38bdf8) 22%, transparent) !important;
    box-shadow: none;
}
html body.ls.ls-nav-density-compact .custom-navbar { padding-top: .35rem !important; padding-bottom: .35rem !important; }
html body.ls.ls-nav-density-spacious .custom-navbar { padding-top: 1rem !important; padding-bottom: 1rem !important; }
html body.ls.ls-nav-no-icons .nav-link-item > i { display: none; }
@media (min-width: 1200px) {
    html body.ls.ls-nav-align-left #mainNavbarContent > .navbar-nav { margin-left: 1rem !important; margin-right: auto !important; }
    html body.ls.ls-nav-align-right #mainNavbarContent > .navbar-nav { margin-left: auto !important; margin-right: 1rem !important; }
}

/* ลอยเป็นแคปซูล */
html body.ls.ls-nav-floating .floating-navbar-container {
    padding: 10px 12px 0;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
html body.ls.ls-nav-floating .custom-navbar {
    max-width: 1320px;
    margin: 0 auto;
    border-radius: 18px;
    border: 1px solid color-mix(in srgb, var(--navbar-text, #fff) 12%, transparent) !important;
    box-shadow: 0 12px 34px rgba(2, 6, 23, 0.28);
}
html body.ls.ls-nav-floating.theme-light .custom-navbar { box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12); }

/* กระจกโปร่งแสง */
html body.ls.ls-nav-glass .floating-navbar-container { background: transparent; }
html body.ls.ls-nav-glass .custom-navbar {
    background: color-mix(in srgb, var(--navbar-bg, #1e293b) 58%, transparent) !important;
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    border-bottom: 1px solid color-mix(in srgb, var(--navbar-text, #fff) 14%, transparent) !important;
    box-shadow: 0 8px 30px rgba(2, 6, 23, 0.18);
}

/* เรียบ บาง */
html body.ls.ls-nav-minimal .custom-navbar {
    padding-top: 0.4rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid color-mix(in srgb, var(--navbar-text, #fff) 8%, transparent) !important;
    box-shadow: none;
}
html body.ls.ls-nav-minimal .custom-navbar .btn-theme-cta { box-shadow: none; }

/* ไล่สีหลัก -> สีรอง (ตัวอักษร/ไอคอนบนสีแบรนด์เป็นสีขาว) */
html body.ls.ls-nav-gradient .custom-navbar {
    --navbar-text: #ffffff;
    background: linear-gradient(100deg, var(--app-primary, #38bdf8), var(--app-secondary, #2563eb)) !important;
    border-bottom: 0 !important;
    box-shadow: 0 8px 26px color-mix(in srgb, var(--app-secondary, #2563eb) 30%, transparent);
}
html body.ls.ls-nav-gradient .custom-navbar .nav-link-item.active-link,
html body.ls.ls-nav-gradient .custom-navbar .nav-link-item:hover { background: rgba(255, 255, 255, 0.2) !important; color: #fff !important; }
html body.ls.ls-nav-gradient .custom-navbar .nav-search-trigger { border-color: rgba(255, 255, 255, 0.55); background: rgba(255, 255, 255, 0.12); }
html body.ls.ls-nav-gradient .custom-navbar .btn-theme-cta { background: rgba(255, 255, 255, 0.18) !important; border-color: rgba(255, 255, 255, 0.45); box-shadow: none; }

/* ลิงก์เมนู: เส้นใต้ */
html body.ls.ls-navl-underline .custom-navbar .nav-link-item {
    position: relative;
    border-radius: 0;
    background: none !important;
}
html body.ls.ls-navl-underline .custom-navbar .nav-link-item::after {
    content: "";
    position: absolute;
    left: 0.55rem;
    right: 0.55rem;
    bottom: 0.1rem;
    height: 2px;
    border-radius: 2px;
    background: var(--navbar-accent, var(--app-primary, #38bdf8));
    transform: scaleX(0);
    transition: transform 0.2s ease;
}
html body.ls.ls-nav-gradient.ls-navl-underline .custom-navbar .nav-link-item::after { background: #fff; }
html body.ls.ls-navl-underline .custom-navbar .nav-link-item:hover::after,
html body.ls.ls-navl-underline .custom-navbar .nav-link-item.active-link::after { transform: scaleX(1); }
html body.ls.ls-navl-underline .custom-navbar .nav-link-item.active-link { color: var(--navbar-text, #fff) !important; opacity: 1; }
html body.ls.ls-navl-underline .custom-navbar .nav-link-item.active-link i { color: inherit !important; }

/* ลิงก์เมนู: ตัวอักษรเปลี่ยนสีอย่างเดียว */
html body.ls.ls-navl-text .custom-navbar .nav-link-item { background: none !important; }
html body.ls.ls-navl-text .custom-navbar .nav-link-item.active-link,
html body.ls.ls-navl-text .custom-navbar .nav-link-item:hover { color: var(--navbar-accent, var(--app-primary, #38bdf8)) !important; opacity: 1; }
html body.ls.ls-navl-text .custom-navbar .nav-link-item.active-link i { color: inherit !important; }
html body.ls.ls-nav-gradient.ls-navl-text .custom-navbar .nav-link-item.active-link { color: #fff !important; text-decoration: underline; text-underline-offset: 6px; }

/* ---------------------------------------------------------------------
   หมวดหมู่ (.wide-category-card)
   --------------------------------------------------------------------- */
/* โหมดตามธีม: พื้นหลังดำในธีมมืดและขาวในธีมสว่าง */
html body.ls.ls-nav-color-theme.theme-dark {
    --navbar-bg: #0b0f19;
    --navbar-text: #fff;
    --navbar-accent: var(--app-primary-text, #c4b5fd);
}
html body.ls.ls-nav-color-theme.theme-light {
    --navbar-bg: #fff;
    --navbar-text: #0f172a;
    --navbar-accent: var(--app-primary-text, #6d28d9);
}
html body.ls.ls-nav-color-theme .custom-navbar { background: var(--navbar-bg) !important; }
html body.ls.ls-footer-color-theme.theme-dark {
    --footer-bg: #0b0f19;
    --footer-text: #fff;
    --footer-accent: var(--app-primary-text, #c4b5fd);
}
html body.ls.ls-footer-color-theme.theme-light {
    --footer-bg: #fff;
    --footer-text: #0f172a;
    --footer-accent: var(--app-primary-text, #6d28d9);
}
html body.ls.ls-logo-circle .store-logo-image { border-radius: 50% !important; }
html body.ls.ls-logo-square .store-logo-image { border-radius: 10px !important; }
html body.ls.ls-hide-nav-logo .nav-show-logo,
html body.ls.ls-hide-nav-shop-name .nav-show-shop-name { display: none !important; }
html body.ls.ls-hide-nav-brand .nav-show-brand,
html body.ls.ls-hide-nav-home .nav-show-home,
html body.ls.ls-hide-nav-categories .nav-show-categories,
html body.ls.ls-hide-nav-premium .nav-show-premium,
html body.ls.ls-hide-nav-topup .nav-show-topup,
html body.ls.ls-hide-nav-orders .nav-show-orders,
html body.ls.ls-hide-nav-search .nav-show-search,
html body.ls.ls-hide-nav-cart .nav-show-cart,
html body.ls.ls-hide-nav-preferences .nav-show-preferences,
html body.ls.ls-hide-nav-account .nav-show-account { display: none !important; }

/* แบนเนอร์หน้าแรก: โหมดรูปภาพล้วนซ่อนข้อความและ scrim แต่เก็บตัวควบคุมสไลด์ไว้ */
html body.ls.ls-banner-image #shopBannerCarousel .hero-content-anchor,
html body.ls.ls-banner-image #shopBannerCarousel .hero-overlay-scrim { display: none !important; }

/* การ์ดแนวตั้ง (รูปเต็ม ชื่ออยู่ล่าง) */
html body.ls.ls-cat-tile .row > [class*="col-"]:has(> .wide-category-card) { flex: 0 0 auto; width: 50%; }
@media (min-width: 768px) { html body.ls.ls-cat-tile .row > [class*="col-"]:has(> .wide-category-card) { width: 33.3333%; } }
@media (min-width: 992px) { html body.ls.ls-cat-tile .row > [class*="col-"]:has(> .wide-category-card) { width: 25%; } }
html body.ls.ls-cat-tile .wide-category-card { height: auto !important; aspect-ratio: 4 / 3 !important; }
html body.ls.ls-cat-tile .wide-category-overlay { background: linear-gradient(180deg, transparent 38%, rgba(2, 6, 23, 0.9) 100%) !important; }
html body.ls.ls-cat-tile .wide-category-body { justify-content: flex-end !important; color: #fff !important; padding: 0.85rem !important; }
html body.ls.ls-cat-tile .wide-category-body p,
html body.ls.ls-cat-tile .wide-category-body .border-top { display: none !important; }
html body.ls.ls-cat-tile .wide-category-body h4 {
    font-size: 1.02rem;
    white-space: normal !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: #fff !important;
}

/* ไอคอนวงกลมแบบแอป */
html body.ls.ls-cat-circle .row > [class*="col-"]:has(> .wide-category-card) { flex: 0 0 auto; width: 25%; }
@media (min-width: 768px) { html body.ls.ls-cat-circle .row > [class*="col-"]:has(> .wide-category-card) { width: 16.6667%; } }
@media (min-width: 1200px) { html body.ls.ls-cat-circle .row > [class*="col-"]:has(> .wide-category-card) { width: 12.5%; } }
html body.ls.ls-cat-circle .wide-category-card {
    aspect-ratio: auto !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    padding: 4px 0;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
}
html body.ls.ls-cat-circle .wide-category-card:hover { box-shadow: none !important; }
html body.ls.ls-cat-circle .wide-category-img {
    position: relative !important;
    width: 74px !important;
    height: 74px !important;
    border-radius: 50% !important;
    border: 2px solid var(--app-primary, #38bdf8);
    box-shadow: 0 8px 18px rgba(2, 6, 23, 0.25);
    transition: border-color 0.2s ease, transform 0.2s ease;
}
html body.ls.ls-cat-circle .wide-category-card:hover .wide-category-img { border-color: var(--app-secondary, #2563eb); transform: scale(1.05); }
html body.ls.ls-cat-circle .wide-category-overlay { display: none !important; }
html body.ls.ls-cat-circle .wide-category-body {
    position: static !important;
    padding: 8px 2px 0 !important;
    text-align: center;
    color: var(--text-main, #fff) !important;
}
html body.ls.ls-cat-circle .wide-category-body .badge,
html body.ls.ls-cat-circle .wide-category-body p,
html body.ls.ls-cat-circle .wide-category-body .border-top { display: none !important; }
html body.ls.ls-cat-circle .wide-category-body h4 {
    font-size: 0.82rem;
    line-height: 1.35;
    margin: 0 !important;
    white-space: normal !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: var(--text-main, #fff) !important;
}
@media (max-width: 575.98px) {
    html body.ls.ls-cat-circle .wide-category-img { width: 62px !important; height: 62px !important; }
    html body.ls.ls-cat-circle .wide-category-body h4 { font-size: 0.74rem; }
}

/* รายการแนวนอน (รูปเล็ก + ชื่อ) */
html body.ls.ls-cat-list .row > [class*="col-"]:has(> .wide-category-card) { flex: 0 0 auto; width: 100%; }
@media (min-width: 768px) { html body.ls.ls-cat-list .row > [class*="col-"]:has(> .wide-category-card) { width: 50%; } }
@media (min-width: 1200px) { html body.ls.ls-cat-list .row > [class*="col-"]:has(> .wide-category-card) { width: 33.3333%; } }
html body.ls.ls-cat-list .wide-category-card {
    aspect-ratio: auto !important;
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 10px 12px !important;
    background: var(--surface, #111827) !important;
    border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.1)) !important;
}
html body.ls.ls-cat-list .wide-category-img {
    position: static !important;
    flex: 0 0 60px;
    width: 60px !important;
    height: 60px !important;
    border-radius: 12px !important;
}
html body.ls.ls-cat-list .wide-category-overlay { display: none !important; }
html body.ls.ls-cat-list .wide-category-body {
    position: static !important;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px;
    color: var(--text-main, #fff) !important;
}
html body.ls.ls-cat-list .wide-category-body > div:first-child { min-width: 0; flex: 1 1 auto; }
html body.ls.ls-cat-list .wide-category-body p { display: none !important; }
html body.ls.ls-cat-list .wide-category-body h4 { font-size: 0.98rem; margin: 0 !important; color: var(--text-main, #fff) !important; }
html body.ls.ls-cat-list .wide-category-body .badge { margin-bottom: 4px !important; font-size: 0.68rem; }
html body.ls.ls-cat-list .wide-category-body .border-top { border: 0 !important; padding: 0 !important; flex: 0 0 auto; }
html body.ls.ls-cat-list .wide-category-body .border-top > span:first-child { display: none !important; }
html body.ls.ls-cat-list .wide-category-body .border-top { justify-content: flex-end !important; gap: 8px; }
html body.ls.ls-cat-list .wide-category-body .border-top > span:nth-child(2) { white-space: nowrap; }
html body.ls.ls-cat-list .wide-category-body .border-top > span:nth-child(2) .fa-arrow-right { display: none !important; }
@media (max-width: 575.98px) {
    /* Keep the compact horizontal category card inside narrow screens. */
    html body.ls.ls-cat-list .wide-category-card { gap: 8px; padding: 8px !important; }
    html body.ls.ls-cat-list .wide-category-img { flex-basis: 42px; width: 42px !important; height: 42px !important; }
    html body.ls.ls-cat-list .wide-category-body { gap: 6px; }
    html body.ls.ls-cat-list .wide-category-body .border-top > span:nth-child(2) { display: none !important; }
    html body.ls.ls-cat-list .wide-category-body .border-top > span:last-child { width: 24px !important; height: 24px !important; margin: 0 !important; flex: 0 0 24px; }
}

/* ---------------------------------------------------------------------
   การ์ดสินค้า (.gaming-product-card) : จำนวนต่อแถว
   --------------------------------------------------------------------- */
html body.ls .row > [class*="col-"]:has(> .gaming-product-card:not(.partner-product-card)) { flex: 0 0 auto; }
html body.ls.ls-cm-1 .row > [class*="col-"]:has(> .gaming-product-card:not(.partner-product-card)) { width: 100%; }
html body.ls.ls-cm-2 .row > [class*="col-"]:has(> .gaming-product-card:not(.partner-product-card)) { width: 50%; }
html body.ls.ls-cm-3 .row > [class*="col-"]:has(> .gaming-product-card:not(.partner-product-card)) { width: 33.3333%; }
@media (min-width: 768px) {
    html body.ls .row > [class*="col-"]:has(> .gaming-product-card:not(.partner-product-card)) { width: 33.3333%; }
    html body.ls.ls-cd-5 .row > [class*="col-"]:has(> .gaming-product-card:not(.partner-product-card)),
    html body.ls.ls-cd-6 .row > [class*="col-"]:has(> .gaming-product-card:not(.partner-product-card)) { width: 25%; }
}
@media (min-width: 992px) {
    html body.ls.ls-cd-3 .row > [class*="col-"]:has(> .gaming-product-card:not(.partner-product-card)) { width: 33.3333%; }
    html body.ls.ls-cd-4 .row > [class*="col-"]:has(> .gaming-product-card:not(.partner-product-card)) { width: 25%; }
    html body.ls.ls-cd-5 .row > [class*="col-"]:has(> .gaming-product-card:not(.partner-product-card)),
    html body.ls.ls-cd-6 .row > [class*="col-"]:has(> .gaming-product-card:not(.partner-product-card)) { width: 20%; }
}
@media (min-width: 1200px) {
    html body.ls.ls-cd-6 .row > [class*="col-"]:has(> .gaming-product-card:not(.partner-product-card)) { width: 16.6667%; }
}

/* อัตราส่วนรูป */
html body.ls.ls-img-portrait .gaming-img-wrapper { aspect-ratio: 3 / 4 !important; }
html body.ls.ls-img-landscape .gaming-img-wrapper { aspect-ratio: 4 / 3 !important; }
html body.ls.ls-img-wide .gaming-img-wrapper { aspect-ratio: 16 / 9 !important; }

/* ซ่อนข้อมูลบางส่วน */
html body.ls.ls-hide-desc .gaming-product-card .gaming-desc { display: none !important; }
html body.ls.ls-hide-stock .gaming-product-card .gaming-stock-label:not(.text-danger),
html body.ls.ls-hide-stock .gaming-product-card .gaming-stock-val { display: none !important; }
html body.ls.ls-hide-sold .gaming-product-card .gaming-stock-label.text-danger { display: none !important; }

/* รูปแบบการ์ด: กะทัดรัด */
html body.ls.ls-card-compact .gaming-product-card { padding: 10px !important; }
html body.ls.ls-card-compact .gaming-img-wrapper { margin-bottom: 8px; }
html body.ls.ls-card-compact .gaming-title { font-size: 0.9rem !important; margin-bottom: 2px !important; }
html body.ls.ls-card-compact .gaming-desc { display: none !important; }
html body.ls.ls-card-compact .gaming-divider { margin: 8px 0 6px !important; }
html body.ls.ls-card-compact .gaming-price-val { font-size: 1.12rem !important; }
html body.ls.ls-card-compact .btn-gaming-buy { padding: 6px 10px !important; font-size: 0.8rem !important; margin-top: 6px !important; }

/* รูปแบบการ์ด: มินิมอล (ไม่มีกรอบ เน้นรูป) */
html body.ls.ls-card-minimal .gaming-product-card {
    background: transparent !important;
    border-color: transparent !important;
    padding: 0 0 6px !important;
    box-shadow: none !important;
}
html body.ls.ls-card-minimal .gaming-product-card:hover { box-shadow: none !important; border-color: transparent !important; transform: translateY(-3px); }
html body.ls.ls-card-minimal .gaming-img-wrapper { box-shadow: 0 6px 18px rgba(2, 6, 23, 0.22); }
html body.ls.ls-card-minimal.theme-light .gaming-img-wrapper { box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1); }
html body.ls.ls-card-minimal .gaming-divider { border-top-style: dashed; margin: 8px 0 6px !important; }

/* รูปแบบการ์ด: ลอยเด่น */
html body.ls.ls-card-elevated .gaming-product-card {
    border: 1px solid var(--surface-border, rgba(255, 255, 255, 0.1)) !important;
    box-shadow: 0 12px 30px rgba(2, 6, 23, 0.3);
}
html body.ls.ls-card-elevated .gaming-product-card:hover {
    transform: translateY(-6px);
    border-color: var(--app-primary, #38bdf8) !important;
    box-shadow: 0 20px 44px rgba(2, 6, 23, 0.38), 0 0 0 1px var(--app-primary, #38bdf8);
}
html body.ls.ls-card-elevated.theme-light .gaming-product-card { box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1); }
html body.ls.ls-card-elevated.theme-light .gaming-product-card:hover { box-shadow: 0 20px 44px rgba(15, 23, 42, 0.16), 0 0 0 1px var(--app-primary, #38bdf8); }

/* ---------------------------------------------------------------------
   สไตล์รวม: ความโค้งมุม / เงา / ปุ่ม
   --------------------------------------------------------------------- */
html body.ls.ls-radius-sharp .gaming-product-card,
html body.ls.ls-radius-sharp .wide-category-card { border-radius: 6px !important; }
html body.ls.ls-radius-sharp .gaming-img-wrapper,
html body.ls.ls-radius-sharp.ls-cat-list .wide-category-img { border-radius: 4px !important; }
html body.ls.ls-radius-sharp .btn-gaming-buy { border-radius: 6px !important; }
html body.ls.ls-radius-sharp.ls-nav-floating .custom-navbar { border-radius: 8px; }

html body.ls.ls-radius-round .gaming-product-card,
html body.ls.ls-radius-round .wide-category-card { border-radius: 26px !important; }
html body.ls.ls-radius-round.ls-cat-circle .wide-category-card { border-radius: 0 !important; }
html body.ls.ls-radius-round .gaming-img-wrapper { border-radius: 20px !important; }
html body.ls.ls-radius-round.ls-cat-list .wide-category-img { border-radius: 16px !important; }
html body.ls.ls-radius-round .btn-gaming-buy { border-radius: 999px !important; }
html body.ls.ls-radius-round.ls-nav-floating .custom-navbar { border-radius: 999px; }

html body.ls.ls-shadow-none .gaming-product-card,
html body.ls.ls-shadow-none .gaming-product-card:hover,
html body.ls.ls-shadow-none .wide-category-card,
html body.ls.ls-shadow-none .wide-category-card:hover,
html body.ls.ls-shadow-none .gaming-img-wrapper { box-shadow: none !important; }
html body.ls.ls-shadow-none.ls-cat-circle .wide-category-img { box-shadow: none; }

html body.ls.ls-shadow-strong .gaming-product-card,
html body.ls.ls-shadow-strong .wide-category-card:not(:hover) { box-shadow: 0 16px 40px rgba(2, 6, 23, 0.35); }
html body.ls.ls-shadow-strong.theme-light .gaming-product-card,
html body.ls.ls-shadow-strong.theme-light .wide-category-card:not(:hover) { box-shadow: 0 16px 40px rgba(15, 23, 42, 0.14); }
html body.ls.ls-shadow-strong.ls-cat-circle .wide-category-card:not(:hover) { box-shadow: none !important; }

/* ปุ่มซื้อ (ตัวอักษร/ไอคอนบนสีแบรนด์เป็นสีขาว) */
html body.ls.ls-btn-gradient .btn-gaming-buy:not(.disabled-card) {
    background: linear-gradient(135deg, var(--app-primary, #38bdf8), var(--app-secondary, #2563eb)) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--app-primary, #38bdf8) 35%, transparent);
}
html body.ls.ls-btn-gradient .btn-gaming-buy:not(.disabled-card) i { color: #fff !important; }

html body.ls.ls-btn-outline .btn-gaming-buy:not(.disabled-card) {
    background: transparent !important;
    color: var(--app-primary-text, var(--app-primary, #38bdf8)) !important;
    border: 1.5px solid var(--app-primary, #38bdf8) !important;
    box-shadow: none;
}
html body.ls.ls-btn-outline .btn-gaming-buy:not(.disabled-card) i { color: inherit !important; }
html body.ls.ls-btn-outline .btn-gaming-buy:not(.disabled-card):hover { background: var(--app-primary, #38bdf8) !important; color: #fff !important; }

html body.ls.ls-btn-square .btn-gaming-buy { border-radius: 8px !important; letter-spacing: 0.3px; }

@media (prefers-reduced-motion: reduce) {
    html body.ls .gaming-product-card,
    html body.ls .wide-category-card,
    html body.ls .wide-category-img { transition: none !important; }
}

/* แก้ความสูงตายตัว (185px) และกรอบไล่สีของการ์ดหมวดหมู่เดิม สำหรับรูปแบบวงกลม/รายการ */
html body.ls.ls-cat-circle .wide-category-card,
html body.ls.ls-cat-list .wide-category-card { height: auto !important; }
html body.ls.ls-cat-circle .wide-category-card { border: 0 !important; }
html body.ls.ls-cat-circle .wide-category-card::before { display: none !important; }
html body.ls.ls-cat-circle .wide-category-img,
html body.ls.ls-cat-list .wide-category-img { flex-shrink: 0; inset: auto !important; }
html body.ls.ls-cat-circle .wide-category-card:hover .wide-category-img { transform: scale(1.06) !important; }
html body.ls.ls-cat-list .wide-category-card:hover .wide-category-img { transform: none !important; }
html body.ls.ls-cat-list .wide-category-card::before { border-radius: inherit; }

/* มือถือ 3 ชิ้นต่อแถว: ย่อเนื้อหาการ์ดอัตโนมัติให้ปุ่มไม่ตกบรรทัด */
@media (max-width: 767.98px) {
    html body.ls.ls-cm-3 .row:has(> [class*="col-"] > .gaming-product-card:not(.partner-product-card)) { --bs-gutter-x: 0.5rem; }
    html body.ls.ls-cm-3 .gaming-product-card:not(.partner-product-card) { padding: 7px !important; }
    html body.ls.ls-cm-3 .gaming-product-card .gaming-img-wrapper { margin-bottom: 6px; border-radius: 10px; }
    html body.ls.ls-cm-3 .gaming-product-card .gaming-title { font-size: 0.78rem !important; }
    html body.ls.ls-cm-3 .gaming-product-card .gaming-desc,
    html body.ls.ls-cm-3 .gaming-product-card .gaming-stock-label,
    html body.ls.ls-cm-3 .gaming-product-card .gaming-stock-val { display: none !important; }
    html body.ls.ls-cm-3 .gaming-product-card .gaming-divider { margin: 6px 0 4px !important; }
    html body.ls.ls-cm-3 .gaming-product-card .gaming-price-label { display: none; }
    html body.ls.ls-cm-3 .gaming-product-card .gaming-price-val { font-size: 0.92rem !important; }
    html body.ls.ls-cm-3 .gaming-product-card .btn-gaming-buy { padding: 5px 4px !important; font-size: 0.72rem !important; gap: 3px; white-space: nowrap; }
    html body.ls.ls-cm-3 .gaming-product-card .btn-gaming-buy .fa-chevron-right { display: none; }
    html body.ls.ls-cm-3 .gaming-badge-floating { font-size: 0.6rem !important; padding: 2px 6px !important; }
}

/* ---------------------------------------------------------------------
   หมวดหมู่: การ์ดรูป + ข้อมูลด้านล่าง (รูปเต็มใบ ไม่มีตัวอักษรทับ)
   ชื่อหมวด (สีหลัก) · จำนวนสินค้า (เทา) ซ้าย · ราคาเริ่มต้น (สีหลัก) ขวา
   --------------------------------------------------------------------- */
.wide-category-card .cat-card-price { display: none; }
html body.ls.ls-cat-card .wide-category-card {
    height: auto !important;
    aspect-ratio: auto !important;
    display: flex !important;
    flex-direction: column;
    padding: 8px !important;
    background: var(--surface, #111827) !important;
    /* กรอบสีหลักเหมือนการ์ดสินค้าแบบมาตรฐาน; ชี้แล้วเป็นสีรอง + เรืองแสง */
    border: 1px solid var(--app-primary, #38bdf8) !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 18px rgba(2, 6, 23, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
html body.ls.ls-cat-card.theme-light .wide-category-card { box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08); }
html body.ls.ls-cat-card .wide-category-card::before { display: none !important; }
html body.ls.ls-cat-card .wide-category-card:hover {
    transform: translateY(-4px);
    border-color: var(--app-secondary, #2563eb) !important;
    box-shadow: 0 0 24px var(--app-secondary-ring, color-mix(in srgb, var(--app-secondary, #2563eb) 35%, transparent));
}
html body.ls.ls-cat-card .wide-category-img {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1640 / 500;
    border-radius: 12px !important;
    flex-shrink: 0;
}
html body.ls.ls-cat-card .wide-category-card:hover .wide-category-img { transform: none !important; }
html body.ls.ls-cat-card .wide-category-overlay { display: none !important; }
html body.ls.ls-cat-card .wide-category-body {
    position: static !important;
    padding: 10px 6px 2px !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    gap: 12px;
    color: var(--text-main, #fff) !important;
}
html body.ls.ls-cat-card .wide-category-body > div:first-child { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
html body.ls.ls-cat-card .wide-category-body h4 {
    order: -1;
    font-size: 1.12rem;
    margin: 0 0 2px !important;
    color: var(--app-primary-text, var(--app-primary, #38bdf8)) !important;
}
html body.ls.ls-cat-card .wide-category-body .badge {
    align-self: flex-start;
    background: none !important;
    color: var(--text-muted, #94a3b8) !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.82rem !important;
    font-weight: 500;
    border-radius: 0;
}
html body.ls.ls-cat-card .wide-category-body p { display: none !important; }
html body.ls.ls-cat-card .wide-category-body .border-top { border: 0 !important; padding: 0 !important; flex: 0 0 auto; display: flex !important; }
html body.ls.ls-cat-card .wide-category-body .border-top > :not(.cat-card-price) { display: none !important; }
html body.ls.ls-cat-card .wide-category-card .cat-card-price {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    white-space: nowrap;
    font-size: 0.85rem;
    color: var(--app-primary-text, var(--app-primary, #38bdf8));
}
html body.ls.ls-cat-card .wide-category-card .cat-card-price span { font-weight: 500; opacity: 0.85; }
html body.ls.ls-cat-card .wide-category-card .cat-card-price b { font-weight: 700; font-size: 0.95rem; }
html body.ls.ls-radius-sharp.ls-cat-card .wide-category-card { border-radius: 6px !important; }
html body.ls.ls-radius-sharp.ls-cat-card .wide-category-img { border-radius: 4px !important; }
html body.ls.ls-radius-round.ls-cat-card .wide-category-card { border-radius: 24px !important; }
html body.ls.ls-radius-round.ls-cat-card .wide-category-img { border-radius: 18px !important; }

/* สีแบรนด์โทนอ่อน (เช่น เหลือง/เขียวอ่อน): ตัวอักษรบนพื้นไล่สียังเป็นสีขาวตามกติกา
   แต่หรี่พื้นลงเล็กน้อยและเพิ่มเงาตัวอักษร ให้อ่านออกทุกสี */
html body.ls.ls-nav-gradient .custom-navbar {
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--app-primary, #38bdf8) 80%, #000),
        color-mix(in srgb, var(--app-secondary, #2563eb) 80%, #000)) !important;
}
html body.ls.ls-nav-gradient .custom-navbar .nav-link-item,
html body.ls.ls-nav-gradient .custom-navbar .navbar-brand,
html body.ls.ls-nav-gradient .custom-navbar .nav-search-trigger,
html body.ls.ls-nav-gradient .custom-navbar .btn-theme-cta,
html body.ls.ls-nav-gradient .custom-navbar .user-pref-trigger { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
html body.ls.ls-nav-gradient .custom-navbar .nav-search-trigger { background: rgba(0, 0, 0, 0.18); }
html body.ls.ls-btn-gradient .btn-gaming-buy:not(.disabled-card) {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--app-primary, #38bdf8) 82%, #000),
        color-mix(in srgb, var(--app-secondary, #2563eb) 82%, #000)) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
html body.ls.ls-nav-gradient .custom-navbar i:not(.notification-bell-dot):not(.profile-notification-dot) { color: #fff !important; }

/* ---------------------------------------------------------------------
   จำนวนสินค้าคงเหลือในการ์ดหมวดหมู่ (ใช้กับทุกรูปแบบหมวดหมู่)
   --------------------------------------------------------------------- */
.wide-category-body .cat-card-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.wide-category-body .cat-card-meta .badge { margin: 0 !important; }
.cat-card-stock {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    color: #bbf7d0;
    background: rgba(22, 163, 74, 0.28);
    border: 1px solid rgba(74, 222, 128, 0.35);
    backdrop-filter: blur(4px);
}
.cat-card-stock i { font-size: 0.68rem; color: #4ade80; }
.cat-card-stock.is-empty { color: #fecaca; background: rgba(220, 38, 38, 0.28); border-color: rgba(248, 113, 113, 0.4); }
.cat-card-stock.is-empty i { color: #f87171; }

html body.ls.ls-cat-circle .wide-category-body .cat-card-meta { display: none !important; }
html body.ls.ls-cat-list .wide-category-body .cat-card-meta { margin-bottom: 4px !important; }
html body.ls.ls-cat-list .cat-card-stock { font-size: 0.66rem; padding: 1px 7px; }

/* การ์ดรูป + ข้อมูลด้านล่าง: ข้อความเรียบ ไม่มีกรอบ */
html body.ls.ls-cat-card .wide-category-body .cat-card-meta { margin: 0 !important; gap: 4px 10px; }
html body.ls.ls-cat-card .cat-card-stock {
    padding: 0;
    border: 0;
    background: none;
    backdrop-filter: none;
    font-size: 0.82rem;
    font-weight: 600;
    color: #22c55e;
}
html body.ls.ls-cat-card .cat-card-stock.is-empty { color: #ef4444; background: none; }
html body.ls.ls-cat-card .cat-card-stock i { color: inherit; }
html body.ls.ls-cat-card .cat-card-meta .badge + .cat-card-stock::before { content: "·"; margin-right: 4px; color: var(--text-muted, #94a3b8); font-weight: 400; }
html body.ls .wide-category-body .cat-card-meta .badge { margin: 0 !important; align-self: center !important; }
/* ปิด "แสดงจำนวนสต็อก" ในปรับแต่งหน้าตาร้าน = ซ่อนจำนวนคงเหลือ (ยังแสดง "สินค้าหมด") */
html body.ls.ls-hide-stock .cat-card-stock:not(.is-empty) { display: none !important; }

/* =====================================================================
   พื้นผิวแบบ "Clean" (ตัวเลือก look = clean / ธีมสำเร็จรูป Clean)
   ขาว-เทาเรียบ: การ์ดขอบเทาบาง ไม่มีเงา ใช้สีหลักเฉพาะจุดสำคัญ เนื้อหากว้างไม่เกิน ~1180px
   ===================================================================== */
html body.ls.ls-look-clean {
    --content-max: 1180px;
    --home-card-shadow: none;
}
html body.ls.ls-look-clean.theme-light {
    --clean-line: #e8e8e8;
    --clean-soft: #f6f6f8;
    --home-card-bg: #ffffff;
    --home-card-border: var(--clean-line);
    --surface: #ffffff;
    --surface-alt: var(--clean-soft);
    --surface-border: var(--clean-line);
    --text-muted: #6c6c6c;
    --site-bg: #f7f7f9;
}
html body.ls.ls-look-clean.theme-dark,
html body.ls.ls-look-clean:not(.theme-light) {
    --clean-line: rgba(255, 255, 255, 0.08);
    --clean-soft: rgba(255, 255, 255, 0.04);
    --home-card-border: var(--clean-line);
    --surface-border: var(--clean-line);
}

/* ความกว้างเนื้อหา */
html body.ls.ls-look-clean .main-container-wrapper { max-width: var(--content-max); }
/* แถบเมนูกว้างกว่าเนื้อหานิดหน่อย ให้เมนู ช่องค้นหา และปุ่มไม่เบียดกัน */
html body.ls.ls-look-clean .floating-navbar-container { max-width: calc(var(--content-max) + 120px); }

/* แถบเมนู: พื้นเรียบ ขอบเทาบาง ปุ่มไม่มีขอบสี */
html body.ls.ls-look-clean .custom-navbar {
    border: 1px solid var(--clean-line) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
html body.ls.ls-look-clean.theme-light .custom-navbar { background-color: rgba(255, 255, 255, 0.92) !important; }
html body.ls.ls-look-clean .custom-navbar .nav-link-item { border: 0 !important; box-shadow: none !important; }
html body.ls.ls-look-clean .custom-navbar .nav-search-trigger {
    border: 1px solid var(--clean-line) !important;
    background: var(--clean-soft) !important;
    box-shadow: none !important;
}
html body.ls.ls-look-clean .custom-navbar .btn-theme-cta {
    background: var(--app-primary, #38bdf8) !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* การ์ดและกล่องทุกแบบ: ขอบเทาบาง ไม่มีเงา ชี้แล้วขอบเป็นสีหลักจาง ๆ */
html body.ls.ls-look-clean :is(.gaming-product-card, .wide-category-card, .clean-stat-card, .home-shortcut-card, .announcement-box-adaptive, .detail-card-dark) {
    border: 1px solid var(--clean-line) !important;
    box-shadow: none !important;
}
html body.ls.ls-look-clean.theme-light :is(.gaming-product-card, .clean-stat-card, .detail-card-dark) { background: #ffffff !important; }
html body.ls.ls-look-clean :is(.gaming-product-card, .wide-category-card, .clean-stat-card, .home-shortcut-card):hover {
    border-color: color-mix(in srgb, var(--app-primary, #38bdf8) 45%, var(--clean-line)) !important;
    box-shadow: 0 10px 28px -14px color-mix(in srgb, var(--app-primary, #38bdf8) 45%, transparent) !important;
}
html body.ls.ls-look-clean .page-home .clean-stat-card::before { display: none !important; }

/* การ์ดสถิติ: ไอคอนในชิปสีจาง อยู่กลางแนวตั้งด้านขวา (ไม่ถูกตัดขอบ) */
html body.ls.ls-look-clean .clean-stat-card { gap: 12px; }
html body.ls.ls-look-clean .clean-stat-icon-outline {
    position: static !important;
    flex: 0 0 48px;
    width: 48px !important;
    height: 48px !important;
    display: grid !important;
    place-items: center;
    border: 0 !important;
    border-radius: 14px !important;
    background: color-mix(in srgb, var(--app-primary, #38bdf8) 11%, transparent) !important;
    box-shadow: none !important;
    font-size: 1.25rem !important;
    color: var(--app-primary-text, var(--app-primary, #38bdf8)) !important;
    transition: background 0.25s ease, color 0.25s ease, scale 0.25s ease;
}
html body.ls.ls-look-clean .clean-stat-icon-outline i { color: inherit !important; }
html body.ls.ls-look-clean .clean-stat-card:hover .clean-stat-icon-outline {
    background: var(--app-primary, #38bdf8) !important;
    color: #ffffff !important;
    scale: 1.05;
}
html body.ls.ls-look-clean .clean-stat-card > div:first-child { min-width: 0; }
@media (max-width: 575.98px) {
    html body.ls.ls-look-clean .clean-stat-icon-outline { flex-basis: 38px; width: 38px !important; height: 38px !important; border-radius: 11px !important; font-size: 1rem !important; }
}
html body.ls.ls-look-clean.theme-light .clean-stat-title { color: var(--text-muted) !important; }
html body.ls.ls-look-clean.theme-light .clean-stat-num { color: var(--app-primary-text, var(--app-primary, #0284c7)) !important; }
html body.ls.ls-look-clean.theme-light .clean-stat-unit { color: var(--text-muted) !important; }

/* หัวข้อแต่ละส่วน: ไอคอนพื้นสีจาง แทนกล่องไล่สี */
html body.ls.ls-look-clean .home-title-icon-box {
    background: color-mix(in srgb, var(--app-primary, #38bdf8) 13%, transparent) !important;
    color: var(--app-primary-text, var(--app-primary, #38bdf8)) !important;
    box-shadow: none !important;
}
html body.ls.ls-look-clean .home-title-icon-box i { color: inherit !important; }

/* ปุ่มซื้อ: สีหลักเรียบ ไม่มีแสงเรือง */
html body.ls.ls-look-clean .btn-gaming-buy { box-shadow: none !important; }

/* =====================================================================
   ขัดเกลาการ์ดสินค้า/หมวดหมู่ (พื้นผิวสีสันตามธีม = ค่าเริ่มต้น)
   ขอบสีหลักเต็ม ๆ ทุกใบทำให้หน้าดูรก: ใช้ขอบสีหลักจาง ๆ แล้วค่อยชัดตอนชี้
   ===================================================================== */
html body.ls:not(.ls-look-clean):is(.ls-card-standard, .ls-card-compact) .gaming-product-card,
html body.ls:not(.ls-look-clean).ls-cat-card .wide-category-card {
    border: 1px solid color-mix(in srgb, var(--app-primary, #38bdf8) 30%, var(--surface-border, rgba(255, 255, 255, 0.1))) !important;
}
html body.ls:not(.ls-look-clean):is(.ls-card-standard, .ls-card-compact) .gaming-product-card:hover,
html body.ls:not(.ls-look-clean).ls-cat-card .wide-category-card:hover {
    border-color: var(--app-primary, #38bdf8) !important;
    box-shadow: 0 14px 32px -16px color-mix(in srgb, var(--app-primary, #38bdf8) 75%, transparent) !important;
}

/* ไม่ต้องมีป้าย "ราคา / สต็อก" ซ้ำทุกใบ: ราคาตัวใหญ่ สต็อกเป็นป้ายเล็ก */
html body.ls .gaming-product-card .gaming-price-label,
html body.ls .gaming-product-card .gaming-stock-label:not(.text-danger) { display: none; }
html body.ls .gaming-product-card .gaming-stock-val {
    padding: 2px 9px;
    border-radius: 50rem;
    font-size: 0.74rem;
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}
html body.ls.theme-light .gaming-product-card .gaming-stock-val { color: #047857; }
html body.ls .gaming-product-card .gaming-stock-val:has(.dot-out-stock) { background: rgba(239, 68, 68, 0.12); }
html body.ls .gaming-product-card .gaming-stock-val:has(.dot-out-stock) .text-secondary { color: #ef4444 !important; }
html body.ls .gaming-product-card .stock-indicator-dot { width: 6px; height: 6px; box-shadow: none; }

/* "ขายแล้ว" ไม่ต้องเป็นสีแดงเตือน: ใช้สีรองจาง ๆ ไอคอนไฟสีส้ม */
html body.ls .gaming-product-card .gaming-stock-label.text-danger { color: var(--text-muted, #94a3b8) !important; font-weight: 600 !important; }
html body.ls .gaming-product-card .gaming-stock-label.text-danger i { color: #f97316 !important; }

/* สินค้าหมด: รูปจางลง ปุ่มเป็นเส้นขอบเรียบ ไม่ใช่กล่องทึบสีเข้ม */
/* ปิดได้ที่ ปรับแต่งหน้าตาร้าน > การ์ดสินค้า > "สินค้าหมด: ทำรูปและราคาเป็นสีจาง" (ls-oos-plain) */
html body.ls:not(.ls-oos-plain) .gaming-product-card:has(.btn-gaming-buy.disabled-card:not([hidden])) .gaming-img-wrapper img { filter: grayscale(0.65) brightness(0.8); }
html body.ls:not(.ls-oos-plain) .gaming-product-card:has(.btn-gaming-buy.disabled-card:not([hidden])) .gaming-price-val { opacity: 0.6; }
html body.ls .btn-gaming-buy.disabled-card {
    background: transparent !important;
    border: 1px dashed var(--surface-border, rgba(148, 163, 184, 0.35)) !important;
    color: var(--text-muted, #94a3b8) !important;
}

/* ป้ายลดราคาบนการ์ดสินค้าทั่วไป (assets/js/flash-sale.js) */
.flash-card-badge {
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 50rem;
    background: linear-gradient(110deg, #e11d48, #f97316);
    color: #fff !important;
    font-size: 0.74rem;
    font-weight: 800;
    box-shadow: 0 6px 14px -4px rgba(225, 29, 72, 0.6);
}
.flash-card-badge i { color: #fde047 !important; }
.gaming-price-val .flash-card-price { color: #f43f5e !important; }
.gaming-price-val .flash-card-was { margin-left: 6px; font-size: 0.72rem; font-weight: 600; color: var(--text-muted, #94a3b8) !important; }