/* ==============================================================
   simple-2026.css — Mobile-first Modern Thai Home
   --------------------------------------------------------------
   หลักการออกแบบ
   - มือถือมาก่อน (default styles คือสำหรับมือถือ)
   - เล็กกะทัดรัด แต่ไม่อึดอัด อ่านง่าย
   - radius 16px มาตรฐาน, shadow สองชั้นเบา ๆ
   - hairline border (1px) แทน shadow หนา
   - ไล่ระดับ section gap 20→28→32px
   - touch target ≥ 44px
   - รองรับ light/dark ผ่าน :root[data-theme] (token --fp-*)
   - ฟอนต์: IBM Plex Sans Thai (โทนทันสมัย นิยมในเว็บไทยตอนนี้)
   ============================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400;500;600;700&display=swap');

/* ===== Design tokens ===== */
:root{
    --r-xs: 10px;
    --r-sm: 12px;
    --r-md: 16px;
    --r-lg: 20px;
    --r-xl: 24px;

    --gap-xs: 8px;
    --gap-sm: 12px;
    --gap-md: 16px;
    --gap-lg: 20px;
    --gap-xl: 28px;

    --shadow-1: 0 1px 2px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.05);
    --shadow-2: 0 4px 14px rgba(15,23,42,.06), 0 2px 6px rgba(15,23,42,.04);
    --shadow-up: 0 12px 28px rgba(15,23,42,.10), 0 4px 10px rgba(15,23,42,.05);

    --grad: linear-gradient(135deg, var(--main, #7c5cff) 0%, var(--sub, #22d3ee) 100%);
    --grad-soft: linear-gradient(135deg,
        color-mix(in srgb, var(--main,#7c5cff) 12%, transparent),
        color-mix(in srgb, var(--sub,#22d3ee) 12%, transparent));
    --ring: color-mix(in srgb, var(--main,#7c5cff) 22%, transparent);

    --line: var(--fp-border, #e6e8ec);
    --line-strong: color-mix(in srgb, var(--main,#7c5cff) 25%, var(--fp-border,#e6e8ec));
}
:root[data-theme="dark"]{
    --shadow-1: 0 1px 2px rgba(0,0,0,.30), 0 4px 12px rgba(0,0,0,.20);
    --shadow-2: 0 6px 18px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.20);
    --shadow-up: 0 14px 32px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.25);
}

/* ===== Typography ===== */
body,
.landing-shell,
.landing-shell *:not(i):not(.fa):not([class*="fa-"]){
    font-family: 'IBM Plex Sans Thai', 'Inter',
                 -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    letter-spacing: 0;
}
.landing-shell{ font-weight: 400; line-height: 1.6; font-size: 14px; }

/* ===== Page background — sober & clean ===== */
body{
    background:
        radial-gradient(60rem 28rem at 100% -10%, color-mix(in srgb, var(--main,#7c5cff) 8%, transparent), transparent 65%),
        radial-gradient(50rem 28rem at -10% 10%, color-mix(in srgb, var(--sub,#22d3ee) 8%, transparent), transparent 65%),
        var(--fp-bg, #ffffff) !important;
}
:root[data-theme="dark"] body{
    background:
        radial-gradient(60rem 28rem at 100% -10%, color-mix(in srgb, var(--main,#7c5cff) 14%, transparent), transparent 65%),
        radial-gradient(50rem 28rem at -10% 10%, color-mix(in srgb, var(--sub,#22d3ee) 10%, transparent), transparent 65%),
        var(--fp-bg, #0b0d12) !important;
}
body::before, body::after{ display: none !important; }

/* Force hide all gradient orbs */
html::before, html::after,
body::before, body::after,
.landing-shell::before, .landing-shell::after,
.home-wrapper::before, .home-wrapper::after,
main::before, main::after,
[class*="wrapper"]::before, [class*="wrapper"]::after,
[class*="container"]::before, [class*="container"]::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ===== Layout shell — mobile first ===== */
.landing-shell{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 12px;
    position: relative; z-index: 1;
}
.home-wrapper{
    margin-top: 12px;
    margin-bottom: 36px;
}
@media (min-width: 600px){
    .landing-shell{ padding: 0 18px; }
}
@media (min-width: 992px){
    .landing-shell{ padding: 0 24px; }
    .home-wrapper{ margin-top: 18px; margin-bottom: 56px; }
}

/* ===== Section heading — compact pill style ===== */
.mu-section-heading{
    display:flex; align-items:center; justify-content:space-between;
    gap: 10px; flex-wrap: wrap;
    margin: 22px 2px 12px;
    position: relative;
}
.mu-section-heading .mu-title{
    display:inline-flex; align-items:center; gap:10px;
    font-size: 15px; font-weight: 700;
    color: var(--fp-text, #0f172a);
    letter-spacing: -.01em;
    line-height: 1.2;
    position: relative;
    padding-left: 12px;
}
.mu-section-heading .mu-title::before{
    content:""; position:absolute; left:0; top:50%;
    width: 4px; height: 22px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--main, #7c5cff), var(--sub, #22d3ee));
    transform: translateY(-50%);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--main, #7c5cff) 40%, transparent);
}
.mu-section-heading .mu-title i{
    width: 30px; height: 30px; border-radius: 10px;
    display:grid; place-items:center;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--main, #7c5cff) 15%, transparent),
        color-mix(in srgb, var(--sub, #22d3ee) 12%, transparent));
    color: var(--main, #7c5cff);
    font-size: 12px;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, var(--main, #7c5cff) 20%, transparent);
}
.mu-section-heading .mu-pill{
    display:inline-flex; align-items:center; gap:5px;
    font-size: 11.5px; font-weight: 600;
    padding: 5px 11px; border-radius: 999px;
    background: var(--fp-surface, #fff);
    border: 1px solid color-mix(in srgb, var(--main, #7c5cff) 14%, var(--line));
    color: var(--fp-text-muted, #64748b);
    line-height: 1;
    box-shadow: 0 2px 6px color-mix(in srgb, var(--main, #7c5cff) 5%, transparent);
}
.mu-section-heading .mu-pill i{ color: var(--main); font-size: 10px; }
@media (min-width: 768px){
    .mu-section-heading{ margin: 30px 4px 14px; }
    .mu-section-heading .mu-title{ font-size: 17px; }
    .mu-section-heading .mu-title i{ width: 34px; height: 34px; font-size: 13px; }
    .mu-section-heading .mu-title::before{ height: 24px; }
}

/* ===== Welcome strip — compact mobile ===== */
.v6-welcome{
    border-radius: var(--r-lg) !important;
    border: 1px solid var(--line) !important;
    box-shadow: var(--shadow-1) !important;
    padding: 14px 16px !important;
    gap: 12px !important;
    margin: 0 0 14px !important;
}
.v6-welcome::before{ opacity: .5 !important; }
.v6-welcome-ic{
    width: 44px !important; height: 44px !important;
    border-radius: 12px !important;
    font-size: 1.05rem !important;
}
.v6-welcome-greet{ font-size: 10.5px !important; }
.v6-welcome-name{
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: -.01em !important;
    margin: 1px 0 2px !important;
}
.v6-welcome-tag{ font-size: 12.5px !important; line-height: 1.45 !important; }
.v6-welcome-bal{
    padding: 10px 14px !important;
    border-radius: 12px !important;
    gap: 10px !important;
}
.v6-welcome-bal-l{ font-size: 10px !important; }
.v6-welcome-bal-v{ font-size: 17px !important; }
.v6-welcome-cta a{ padding: 8px 14px !important; font-size: 12.5px !important; }
@media (min-width: 768px){
    .v6-welcome{ padding: 18px 22px !important; gap: 16px !important; }
    .v6-welcome-name{ font-size: 19px !important; }
    .v6-welcome-bal-v{ font-size: 20px !important; }
}

/* ===== Hero banner — rounded, compact aspect ===== */
.home-hero{ margin: 0 0 4px !important; }
.hero-banner{ margin-top: 4px !important; }
.banner-card{
    border-radius: var(--r-lg) !important;
    box-shadow: var(--shadow-2) !important;
    border: 1px solid var(--line);
    background: var(--fp-surface, #fff);
    overflow: hidden;
}
.banner-card .carousel-inner img{
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover !important;
    display: block;
}
@media (min-width: 768px){
    .banner-card .carousel-inner img{ aspect-ratio: 21 / 8; }
}

/* carousel control — smaller, on-bg */
.banner-card .carousel-control-prev,
.banner-card .carousel-control-next{
    width: 36px; opacity: .85;
}
.banner-card .carousel-control-prev-icon,
.banner-card .carousel-control-next-icon{
    width: 22px; height: 22px;
    background-size: 60% 60%;
    background-color: rgba(0,0,0,.4);
    border-radius: 50%;
    padding: 6px;
    background-repeat: no-repeat;
    background-position: center;
}

/* ===== Stats — 2x2 mobile, 4x1 desktop, compact ===== */
.stats-section{ margin: 18px 0 4px !important; }
.stats-header{
    display:inline-flex !important; align-items:center; gap: 8px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 0 12px !important;
    color: var(--fp-text, #0f172a) !important;
    font-weight: 600 !important;
    font-size: 15px !important;
}
.stats-header i{
    width: 28px; height: 28px; border-radius: 9px;
    display:grid; place-items:center;
    background: var(--grad-soft); color: var(--main);
    font-size: 12px;
}
.stats-section .row{ --bs-gutter-x: 10px; --bs-gutter-y: 10px; }
@media (min-width: 768px){
    .stats-section .row{ --bs-gutter-x: 14px; --bs-gutter-y: 14px; }
}
.stat-card{
    display:flex; align-items:center; gap: 10px;
    padding: 12px !important;
    background: var(--fp-surface, #fff) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-1) !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
    position: relative; overflow: hidden;
    min-height: 70px;
}
.stat-card::before{
    content:""; position:absolute; right:-30%; bottom:-50%;
    width: 110px; height: 110px; border-radius: 50%;
    background: var(--grad-soft); opacity: .35;
    pointer-events: none;
}
.stat-card:hover{
    transform: translateY(-1px);
    box-shadow: var(--shadow-up) !important;
    border-color: var(--line-strong) !important;
}
.stat-icon{
    width: 38px !important; height: 38px !important;
    border-radius: 11px !important;
    color: #fff !important;
    font-size: 14px !important;
    display:grid !important; place-items:center !important;
    flex-shrink: 0;
    box-shadow: 0 6px 14px -8px rgba(15,23,42,.3);
}
.stat-content{ flex: 1; min-width: 0; position: relative; z-index: 1; }
.stat-label{
    font-size: 10.5px !important;
    color: var(--fp-text-muted, #64748b) !important;
    font-weight: 500 !important;
    letter-spacing: .015em;
    margin: 0 0 1px !important;
    line-height: 1.3 !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stat-value{
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--fp-text, #0f172a) !important;
    letter-spacing: -.015em !important;
    line-height: 1.1 !important;
}
.stat-badge{
    display: inline-block;
    margin-top: 3px !important;
    font-size: 9.5px !important;
    color: var(--fp-text-muted, #64748b) !important;
    background: var(--fp-surface-soft, #f6f7f9) !important;
    border: 1px solid var(--line) !important;
    padding: 1px 7px !important;
    border-radius: 999px !important;
    font-weight: 500 !important;
    line-height: 1.4;
}
@media (min-width: 768px){
    .stat-card{ padding: 16px !important; gap: 14px; min-height: 86px; }
    .stat-icon{ width: 46px !important; height: 46px !important; border-radius: 13px !important; font-size: 16px !important; }
    .stat-label{ font-size: 12px !important; }
    .stat-value{ font-size: 22px !important; }
    .stat-badge{ font-size: 10.5px !important; }
}

/* ===== Quick action bar — app-like grid ===== */
.mu-quick-bar{
    display:grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 8px !important;
    margin: 16px 0 4px !important;
    padding: 12px !important;
    background:
        radial-gradient(80% 100% at 50% 0%, color-mix(in srgb, var(--main, #7c5cff) 8%, transparent), transparent 60%),
        var(--fp-surface, #fff) !important;
    border: 1px solid color-mix(in srgb, var(--main, #7c5cff) 12%, var(--line)) !important;
    border-radius: var(--r-md) !important;
    box-shadow:
        0 8px 24px color-mix(in srgb, var(--main, #7c5cff) 8%, transparent),
        var(--shadow-1) !important;
}
.mu-quick-btn{
    display:flex !important; flex-direction:column; align-items:center; justify-content:center;
    gap: 6px;
    padding: 10px 4px !important;
    border-radius: var(--r-sm) !important;
    text-decoration: none !important;
    color: var(--fp-text, #0f172a) !important;
    transition: background .18s ease, transform .15s cubic-bezier(.2,.7,.2,1);
    min-height: 64px;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.mu-quick-btn:active{ transform: scale(.94); }
.mu-quick-btn:hover{
    background: color-mix(in srgb, var(--main, #7c5cff) 5%, var(--fp-surface-soft, #f6f7f9));
}
.mu-quick-btn:hover .mu-quick-icon{
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--main, #7c5cff) 50%, transparent);
}
.mu-quick-icon{
    width: 38px !important; height: 38px !important;
    border-radius: 12px !important;
    display:grid !important; place-items:center !important;
    color: #fff !important; font-size: 15px !important;
    box-shadow: 0 6px 14px -8px rgba(15,23,42,.3);
    transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease;
}
.mu-quick-label{
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--fp-text, #0f172a) !important;
    line-height: 1.2;
    text-align: center;
}
@media (min-width: 768px){
    .mu-quick-bar{ gap: 10px !important; padding: 14px !important; }
    .mu-quick-btn{ padding: 12px 6px !important; min-height: 72px; }
    .mu-quick-icon{ width: 44px !important; height: 44px !important; font-size: 17px !important; }
    .mu-quick-label{ font-size: 12.5px !important; }
}

/* ===== Announcement card ===== */
.announcement-card{
    display:flex !important; align-items: flex-start; gap: 12px;
    padding: 14px 16px !important;
    margin: 16px 0 !important;
    background: var(--fp-surface, #fff) !important;
    border: 1px solid var(--line) !important;
    border-left: 3px solid var(--main, #7c5cff) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-1) !important;
}
.announcement-icon{
    width: 36px !important; height: 36px !important;
    border-radius: 11px !important;
    display:grid !important; place-items:center !important;
    background: var(--grad-soft) !important;
    color: var(--main, #7c5cff) !important;
    font-size: 14px !important;
    flex-shrink: 0;
}
.announcement-title{
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--fp-text, #0f172a) !important;
    margin: 0 0 3px !important;
    line-height: 1.3;
}
.announcement-text{
    font-size: 12.5px !important;
    color: var(--fp-text-muted, #64748b) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}

/* ===== Live orders — horizontal scroll ===== */
.order-section{ margin: 22px 0 !important; }
.section-heading{
    display:flex; align-items: center; justify-content: space-between;
    gap: 8px; flex-wrap: wrap;
    margin: 0 0 12px !important;
}
.section-heading h5{
    display:inline-flex !important; align-items:center; gap: 8px;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--fp-text, #0f172a) !important;
    margin: 0 !important;
    letter-spacing: -.005em !important;
    line-height: 1.2;
}
.section-heading h5 i{
    width: 28px; height: 28px; border-radius: 9px;
    display:inline-grid; place-items:center;
    background: var(--grad-soft);
    color: var(--main);
    font-size: 12px;
}
.section-heading .small-label{
    font-size: 11px !important;
    color: var(--fp-text-muted, #64748b) !important;
    font-weight: 400 !important;
}
.order-card{
    background: var(--fp-surface, #fff) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-1) !important;
    padding: 10px !important;
    overflow: hidden;
}
.order-track{
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.order-track::-webkit-scrollbar{ height: 4px; }
.order-track::-webkit-scrollbar-thumb{
    background: var(--line); border-radius: 4px;
}
.order-track-inner{ display:flex !important; gap: 8px !important; padding-bottom: 4px; }
.order-item{
    display:flex !important; align-items: center; gap: 10px;
    padding: 10px !important;
    background: var(--fp-surface-soft, #f6f7f9) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-sm) !important;
    min-width: 230px; flex-shrink: 0;
}
.order-item img,
.order-thumb-fallback{
    width: 38px !important; height: 38px !important;
    border-radius: 10px !important;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--fp-surface, #fff);
}
.order-thumb-fallback{
    display:grid; place-items:center;
    color: var(--main); background: var(--grad-soft) !important;
    border: 1px solid var(--line);
    font-size: 14px;
}
.order-name{
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: var(--fp-text, #0f172a) !important;
    max-width: 110px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.3;
}
.order-time{
    font-size: 10.5px !important;
    color: var(--fp-text-muted, #64748b) !important;
    line-height: 1.3;
}
.order-badge{
    margin-left: auto;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 3px 8px !important;
    border-radius: 999px !important;
    display:inline-flex !important; align-items:center; gap: 4px;
    line-height: 1.3;
    flex-shrink: 0;
}
.order-badge i{ font-size: 9px; }
.lo-badge-product{ background: color-mix(in srgb, #10b981 14%, transparent) !important; color: #059669 !important; }
.lo-badge-otp    { background: color-mix(in srgb, #3b82f6 14%, transparent) !important; color: #2563eb !important; }
.lo-badge-smm    { background: color-mix(in srgb, #f59e0b 14%, transparent) !important; color: #d97706 !important; }
:root[data-theme="dark"] .lo-badge-product{ color: #34d399 !important; }
:root[data-theme="dark"] .lo-badge-otp    { color: #60a5fa !important; }
:root[data-theme="dark"] .lo-badge-smm    { color: #fbbf24 !important; }

/* ===== Service cards — 1col mobile, 3col desktop ===== */
.mu-services{
    display:grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 0 0 4px !important;
}
@media (min-width: 560px){
    .mu-services{ grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 12px !important; }
}
@media (min-width: 900px){
    .mu-services{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 14px !important; }
}
.mu-service-card{
    position: relative;
    display: block !important;
    padding: 16px !important;
    background: var(--fp-surface, #fff) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md) !important;
    text-decoration: none !important;
    color: var(--fp-text, #0f172a) !important;
    box-shadow: var(--shadow-1) !important;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
}
.mu-service-card::before{
    content:""; position:absolute; right:-30%; top:-50%;
    width: 180px; height: 180px; border-radius: 50%;
    background: var(--grad-soft);
    opacity: .55;
    pointer-events: none;
    transition: transform .3s ease;
}
.mu-service-card:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-up) !important;
    border-color: var(--line-strong) !important;
}
.mu-service-card:active{ transform: translateY(0) scale(.99); }
.mu-service-card:hover::before{ transform: scale(1.15); }
.mu-service-icon{
    width: 42px !important; height: 42px !important;
    border-radius: 12px !important;
    display:grid !important; place-items:center !important;
    color: #fff !important;
    font-size: 16px !important;
    margin: 0 0 10px !important;
    background: var(--grad) !important;
    box-shadow: 0 8px 18px -10px var(--ring) !important;
    position: relative; z-index: 1;
}
.mu-service-title{
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: var(--fp-text, #0f172a) !important;
    margin: 0 0 3px !important;
    letter-spacing: -.005em;
    position: relative; z-index: 1;
}
.mu-service-desc{
    font-size: 12px !important;
    color: var(--fp-text-muted, #64748b) !important;
    line-height: 1.5 !important;
    margin: 0 0 10px !important;
    position: relative; z-index: 1;
}
.mu-service-arrow{
    display:inline-flex !important; align-items:center; gap: 5px;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--main, #7c5cff) !important;
    position: relative; z-index: 1;
    transition: gap .2s ease;
}
.mu-service-card:hover .mu-service-arrow{ gap: 8px; }
@media (min-width: 768px){
    .mu-service-card{ padding: 20px !important; }
    .mu-service-icon{ width: 48px !important; height: 48px !important; font-size: 18px !important; margin-bottom: 12px !important; }
    .mu-service-title{ font-size: 16px !important; }
    .mu-service-desc{ font-size: 13px !important; }
}

/* ===== Categories & products — 2col mobile, 4-5col desktop ===== */
.v4-cat-grid{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
    margin: 0 0 4px !important;
}
@media (min-width: 600px){
    .v4-cat-grid{ grid-template-columns: repeat(3, minmax(0,1fr)) !important; gap: 12px !important; }
}
@media (min-width: 900px){
    .v4-cat-grid{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 14px !important; }
}
@media (min-width: 1200px){
    .v4-cat-grid{ grid-template-columns: repeat(5, minmax(0,1fr)) !important; }
}
.v4-cat-card{
    background: var(--fp-surface, #fff) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-1) !important;
    overflow: hidden !important;
    transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .25s ease !important;
    text-decoration: none !important;
    color: var(--fp-text, #0f172a) !important;
    display:flex !important; flex-direction:column !important;
    position: relative;
}
.v4-cat-card::after{
    content:""; position:absolute; inset:0;
    border-radius: inherit;
    background: linear-gradient(180deg,
        transparent 60%,
        color-mix(in srgb, var(--main, #7c5cff) 6%, transparent) 100%);
    opacity: 0; transition: opacity .25s ease;
    pointer-events: none;
}
.v4-cat-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 16px 36px color-mix(in srgb, var(--main, #7c5cff) 14%, rgba(15,23,42,.1)) !important;
    border-color: color-mix(in srgb, var(--main, #7c5cff) 30%, var(--line)) !important;
}
.v4-cat-card:hover::after{ opacity: 1; }
.v4-cat-card:active{ transform: translateY(-1px) scale(.99); }
.v4-cat-media{
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--main, #7c5cff) 5%, var(--fp-surface-soft, #f6f7f9)),
        var(--fp-surface-soft, #f6f7f9)) !important;
    overflow: hidden;
    display:flex; align-items:center; justify-content:center;
    border-bottom: 1px solid var(--line) !important;
    position: relative;
}
.v4-cat-media img{
    width: 100% !important; height: 100% !important;
    object-fit: cover !important;
    transition: transform .4s cubic-bezier(.2,.7,.2,1) !important;
}
.v4-cat-card:hover .v4-cat-media img{ transform: scale(1.06); }
.v4-cat-placeholder{
    width: 100% !important; height: 100% !important;
    display:grid !important; place-items:center !important;
    font-size: 1.7rem !important;
    transition: transform .3s ease;
}
.v4-cat-card:hover .v4-cat-placeholder{ transform: scale(1.1); }
.v4-cat-body{
    padding: 10px 12px 12px !important;
    display:flex !important; flex-direction:column !important; gap: 5px;
    flex: 1;
}
.v4-cat-name{
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--fp-text, #0f172a) !important;
    line-height: 1.35 !important;
    letter-spacing: -.005em;
    display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}
.v4-cat-cta{
    margin-top: auto;
    font-size: 11.5px !important;
    color: var(--main, #7c5cff) !important;
    font-weight: 600 !important;
    display:inline-flex !important; align-items:center; gap: 4px;
}
@media (min-width: 768px){
    .v4-cat-body{ padding: 12px 14px 14px !important; }
    .v4-cat-name{ font-size: 14px !important; }
    .v4-cat-cta{ font-size: 12.5px !important; }
}

/* ===== Product card price row ===== */
.v4-cat-card .product-item,
.product-item{ /* card content already in v4-cat-card */ }
.v4-cat-card .badge.bg-success,
.v4-cat-card .badge.bg-secondary{
    font-size: 9.5px !important;
    font-weight: 600 !important;
    padding: 3px 7px !important;
    border-radius: 999px !important;
    line-height: 1.3 !important;
}
.v4-cat-card .badge.bg-success{
    background: color-mix(in srgb, #10b981 16%, transparent) !important;
    color: #059669 !important;
}
.v4-cat-card .badge.bg-secondary{
    background: var(--fp-surface-soft, #f6f7f9) !important;
    color: var(--fp-text-muted, #64748b) !important;
    border: 1px solid var(--line);
}
:root[data-theme="dark"] .v4-cat-card .badge.bg-success{ color: #34d399 !important; }

/* ===== Buy buttons ===== */
.v4-buy-btn{
    display:inline-flex !important; align-items:center; justify-content:center;
    gap: 6px;
    width: 100% !important;
    margin-top: 6px !important;
    padding: 8px 12px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: var(--grad) !important;
    border: 0 !important;
    border-radius: var(--r-xs) !important;
    box-shadow: 0 5px 12px -6px var(--ring) !important;
    cursor: pointer;
    text-decoration: none !important;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
    line-height: 1.2 !important;
    min-height: 36px;
}
.v4-buy-btn:hover{
    transform: translateY(-1px); filter: brightness(1.05);
    box-shadow: 0 8px 16px -8px var(--ring) !important;
    color: #fff !important;
}
.v4-buy-btn:active{ transform: translateY(0) scale(.99); }
.v4-buy-btn-disabled{
    background: var(--fp-surface-soft, #f6f7f9) !important;
    color: var(--fp-text-muted, #94a3b8) !important;
    box-shadow: none !important;
    cursor: not-allowed;
    border: 1px solid var(--line) !important;
}
.v4-buy-btn-disabled:hover{ transform: none; filter: none; }
.v4-buy-btn-ghost{
    background: var(--fp-surface, #fff) !important;
    color: var(--fp-text, #0f172a) !important;
    border: 1px solid var(--line) !important;
    box-shadow: none !important;
}
.v4-buy-btn-ghost:hover{
    border-color: var(--main, #7c5cff) !important;
    color: var(--main, #7c5cff) !important;
}
.v4-buy-btn-ico{
    display:inline-grid !important; place-items:center !important;
    width: 20px; height: 20px;
    border-radius: 6px;
    background: rgba(255,255,255,.18);
    font-size: 10px;
    flex-shrink: 0;
}
.v4-buy-btn-ghost .v4-buy-btn-ico,
.v4-buy-btn-disabled .v4-buy-btn-ico{
    background: var(--fp-surface-soft, #f6f7f9) !important;
    color: var(--fp-text-muted, #64748b) !important;
}
.v4-buy-btn-arrow{
    margin-left: auto;
    transition: transform .2s ease;
    font-size: 10px;
}
.v4-buy-btn:hover .v4-buy-btn-arrow{ transform: translateX(2px); }
@media (min-width: 768px){
    .v4-buy-btn{ font-size: 13px !important; padding: 9px 14px !important; min-height: 40px; }
}

/* ===== Why-choose features — 2col mobile, 4col desktop ===== */
.v4-feature-grid{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 10px !important;
    margin: 0 0 4px !important;
}
@media (min-width: 768px){
    .v4-feature-grid{ grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 14px !important; }
}
.v4-feature-card{
    padding: 14px !important;
    background: var(--fp-surface, #fff) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-md) !important;
    box-shadow: var(--shadow-1) !important;
    transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, border-color .25s ease !important;
    position: relative;
    overflow: hidden;
}
.v4-feature-card::before{
    content:""; position:absolute; inset:0;
    background: radial-gradient(closest-side at 0% 0%, color-mix(in srgb, var(--main,#7c5cff) 10%, transparent), transparent 60%);
    opacity: 0; transition: opacity .25s ease;
    pointer-events: none;
}
.v4-feature-card:hover{
    transform: translateY(-3px);
    box-shadow: var(--shadow-up) !important;
    border-color: color-mix(in srgb, var(--main,#7c5cff) 28%, var(--line)) !important;
}
.v4-feature-card:hover::before{ opacity: 1; }
.v4-feature-card > *{ position: relative; z-index: 1; }
.v4-feature-icon{
    width: 38px !important; height: 38px !important;
    border-radius: 11px !important;
    display:grid !important; place-items:center !important;
    background: linear-gradient(135deg, color-mix(in srgb, var(--main,#7c5cff) 14%, transparent), color-mix(in srgb, var(--sub,#22d3ee) 12%, transparent)) !important;
    color: var(--main, #7c5cff) !important;
    font-size: 14px !important;
    margin: 0 0 10px !important;
    border: 1px solid color-mix(in srgb, var(--main,#7c5cff) 22%, transparent);
    transition: transform .25s cubic-bezier(.2,.7,.2,1), background .25s ease;
}
.v4-feature-card:hover .v4-feature-icon{
    transform: scale(1.08) rotate(-3deg);
    background: linear-gradient(135deg, var(--main,#7c5cff), var(--sub,#22d3ee)) !important;
    color: #fff !important;
}
.v4-feature-title{
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: var(--fp-text, #0f172a) !important;
    margin: 0 0 3px !important;
    letter-spacing: -.005em;
    line-height: 1.3;
}
.v4-feature-desc{
    font-size: 12px !important;
    color: var(--fp-text-muted, #64748b) !important;
    line-height: 1.55 !important;
    margin: 0 !important;
}
@media (min-width: 768px){
    .v4-feature-card{ padding: 18px !important; }
    .v4-feature-icon{ width: 44px !important; height: 44px !important; font-size: 16px !important; }
    .v4-feature-title{ font-size: 15px !important; }
    .v4-feature-desc{ font-size: 12.5px !important; }
}

/* ===== CTA banner ===== */
.v4-cta{
    position: relative; overflow: hidden;
    text-align: center;
    padding: 28px 18px !important;
    margin: 22px 0 !important;
    border-radius: var(--r-lg) !important;
    background:
        radial-gradient(80% 100% at 50% 0%, color-mix(in srgb, var(--main,#7c5cff) 18%, transparent), transparent 70%),
        radial-gradient(60% 80% at 100% 100%, color-mix(in srgb, var(--sub,#22d3ee) 14%, transparent), transparent 70%),
        var(--fp-surface, #fff) !important;
    border: 1px solid color-mix(in srgb, var(--main,#7c5cff) 18%, var(--line)) !important;
    box-shadow:
        0 18px 40px color-mix(in srgb, var(--main,#7c5cff) 12%, transparent),
        var(--shadow-2) !important;
}
.v4-cta::before{
    content:""; position:absolute; right:-15%; bottom:-50%;
    width: 220px; height: 220px; border-radius:50%;
    background: var(--grad-soft);
    opacity: .55; filter: blur(16px);
    pointer-events: none;
    animation: ctaFloat 8s ease-in-out infinite;
}
.v4-cta::after{
    content:""; position:absolute; left:-20%; top:-60%;
    width: 240px; height: 240px; border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--main,#7c5cff) 18%, transparent), transparent 70%);
    pointer-events: none;
    animation: ctaFloat 10s ease-in-out infinite reverse;
}
@keyframes ctaFloat{
    0%,100%{ transform: translate(0,0) scale(1); }
    50%{ transform: translate(-14px, -10px) scale(1.06); }
}
.v4-cta-title{
    font-size: clamp(17px, 3.4vw, 22px) !important;
    font-weight: 700 !important;
    color: var(--fp-text, #0f172a) !important;
    margin: 0 0 4px !important;
    letter-spacing: -.015em;
    position: relative; z-index: 1;
    line-height: 1.3;
}
.v4-cta-text{
    font-size: 13px !important;
    color: var(--fp-text-muted, #64748b) !important;
    margin: 0 0 16px !important;
    position: relative; z-index: 1;
    line-height: 1.55;
}
.v4-cta-actions{
    display:flex !important; gap: 8px; flex-wrap: wrap; justify-content: center;
    position: relative; z-index: 1;
}
.v4-cta-main{
    background: var(--grad) !important;
    color: #fff !important;
    border: 0 !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: var(--r-sm) !important;
    box-shadow: 0 8px 18px -10px var(--ring) !important;
    transition: transform .15s ease, filter .15s ease !important;
    min-height: 40px;
    display:inline-flex !important; align-items:center; gap: 6px;
}
.v4-cta-main:hover{ transform: translateY(-1px); filter: brightness(1.05); color: #fff !important; }
.v4-cta-ghost{
    background: var(--fp-surface, #fff) !important;
    color: var(--fp-text, #0f172a) !important;
    border: 1px solid var(--line) !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: var(--r-sm) !important;
    min-height: 40px;
    display:inline-flex !important; align-items:center; gap: 6px;
}
.v4-cta-ghost:hover{
    border-color: var(--main, #7c5cff) !important;
    color: var(--main, #7c5cff) !important;
}
@media (min-width: 768px){
    .v4-cta{ padding: 32px 28px !important; }
    .v4-cta-main, .v4-cta-ghost{ padding: 12px 22px !important; font-size: 14px !important; }
}

/* ===== FAQ ===== */
.v4-faq{
    display:flex !important; flex-direction:column !important; gap: 8px;
    margin: 0 0 4px;
}
.v4-faq-item{
    background: var(--fp-surface, #fff) !important;
    border: 1px solid var(--line) !important;
    border-radius: var(--r-sm) !important;
    box-shadow: var(--shadow-1) !important;
    overflow: hidden !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.v4-faq-item:hover{
    border-color: color-mix(in srgb, var(--main,#7c5cff) 28%, var(--line)) !important;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--main,#7c5cff) 10%, rgba(15,23,42,.06)) !important;
}
.v4-faq-item[open]{
    border-color: color-mix(in srgb, var(--main,#7c5cff) 35%, var(--line)) !important;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--main,#7c5cff) 12%, rgba(15,23,42,.06)) !important;
}
.v4-faq-item summary{
    list-style: none !important;
    cursor: pointer;
    padding: 14px 16px !important;
    display:flex !important; align-items:center; justify-content:space-between;
    gap: 10px;
    transition: background .15s ease;
}
.v4-faq-item summary:hover{
    background: color-mix(in srgb, var(--main,#7c5cff) 4%, transparent);
}
.v4-faq-item summary::-webkit-details-marker{ display: none; }
.v4-faq-q{
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: var(--fp-text, #0f172a) !important;
    letter-spacing: -.005em;
    line-height: 1.4;
}
.v4-faq-chevron{
    color: var(--main, #7c5cff) !important;
    font-size: 11px !important;
    transition: transform .2s ease;
    flex-shrink: 0;
}
.v4-faq-item[open] .v4-faq-chevron{ transform: rotate(180deg); }
.v4-faq-a{
    padding: 0 14px 12px !important;
    font-size: 12.5px !important;
    color: var(--fp-text-muted, #64748b) !important;
    line-height: 1.65 !important;
}
@media (min-width: 768px){
    .v4-faq-item summary{ padding: 14px 18px !important; }
    .v4-faq-q{ font-size: 14px !important; }
    .v4-faq-a{ padding: 0 18px 14px !important; font-size: 13px !important; }
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce){
    .stat-card, .mu-service-card, .v4-cat-card, .v4-feature-card,
    .v4-buy-btn, .v4-cta-main, .mu-quick-btn{
        transition: none !important;
    }
    .stat-card:hover, .mu-service-card:hover, .v4-cat-card:hover,
    .v4-feature-card:hover, .v4-buy-btn:hover{
        transform: none !important;
    }
}

/* ===== Tap highlight (mobile) ===== */
.mu-service-card, .v4-cat-card, .mu-quick-btn,
.v4-buy-btn, .v4-cta-main, .v4-cta-ghost, .v4-faq-item summary{
    -webkit-tap-highlight-color: transparent;
}