:root{--red:#e31b23;--dark:#11151a;--line:#e5e7eb;--green:#13a348}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;color:#15171a}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}.site-header{background:var(--dark);color:#fff;position:sticky;top:0;z-index:20}.head,.search,nav,.section,footer>div,footer>small{max-width:1380px;margin:auto}.head{height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 14px}.brand b{display:block;font-size:20px}.brand small{color:#aaa}.phone{font-size:24px}.search{display:flex;padding:0 14px 10px}.search input{flex:1;border:0;padding:13px;border-radius:10px 0 0 10px}.search button{border:0;background:var(--red);color:#fff;padding:0 18px;border-radius:0 10px 10px 0;font-weight:700}nav{display:flex;gap:22px;padding:0 14px 12px;font-size:14px}.hero{background:linear-gradient(135deg,#08090c,#242b34);color:#fff}.hero>div{max-width:1380px;margin:auto;padding:60px 18px}.hero span{color:#ff767a;font-weight:800}.hero h1{font-size:clamp(38px,5vw,72px);max-width:900px;line-height:1.05;margin:12px 0}.hero p{font-size:18px;color:#c8cdd4}.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid #d8dbe0;background:#fff;padding:11px 16px;border-radius:10px;font-weight:700}.btn.primary{background:var(--red);border-color:var(--red);color:#fff}.btn.dark{background:#222;color:#fff;border-color:#222}.btn.line{background:var(--green);color:#fff;border-color:var(--green)}.btn.danger{background:#c51118;color:#fff;border-color:#c51118}.wide{width:100%}.section{padding:30px 10px}.section-head{display:flex;justify-content:space-between}.cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.cat-grid a{border:1px solid var(--line);border-radius:14px;padding:18px 8px;text-align:center}.cat-grid b{display:block;margin-top:8px}.brand-row{display:flex;gap:8px;overflow:auto}.brand-row a{border:1px solid var(--line);border-radius:12px;padding:12px 16px;white-space:nowrap;font-weight:700}.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.card{border:1px solid var(--line);border-radius:14px;overflow:hidden}.pic{aspect-ratio:4/3;background:#f3f4f6;display:grid;place-items:center;position:relative}.pic img,.mainpic img{width:100%;height:100%;object-fit:cover}.status{display:inline-block;font-style:normal;font-size:12px;font-weight:800;padding:5px 8px;border-radius:999px}.pic .status{position:absolute;top:8px;left:8px}.status.available{background:#e5f7eb;color:#097337}.status.reserved{background:#fff2c7;color:#875d00}.status.sold{background:#222;color:#fff}.status.hidden{background:#eee;color:#777}.info{padding:11px}.info small{color:#888}.info h3{font-size:16px;margin:5px 0}.info p{margin:0;color:#777}.info strong,.price{color:var(--red);font-size:20px}.filters{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:8px;margin-bottom:18px}.filters input,.filters select,.form input,.form select,.form textarea,.quick input,.quick select,.login-card input{width:100%;padding:11px;border:1px solid #d7dae0;border-radius:9px}.detail{display:grid;grid-template-columns:1.1fr .9fr;gap:28px}.mainpic{aspect-ratio:4/3;background:#f3f4f6;border-radius:14px;overflow:hidden;display:grid;place-items:center}.thumbs{display:flex;gap:6px;overflow:auto;margin-top:8px}.thumbs button{width:70px;height:60px;padding:0;border:1px solid #ddd}.thumbs img{width:100%;height:100%;object-fit:cover}.detail h1{font-size:34px}.soldbox,.panel{padding:14px;border-radius:12px;background:#f4f4f4;margin:16px 0}.desc{line-height:1.7}.contactbar{display:flex;gap:8px;margin-top:20px}.float-line{position:fixed;right:12px;bottom:75px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--green);color:#fff;font-weight:900;z-index:50}.go-top{position:fixed;right:18px;bottom:142px;width:44px;height:44px;border:0;border-radius:50%;background:#222;color:#fff;display:none;z-index:49}footer{background:#11151a;color:#ddd;margin-top:35px;padding:28px 10px}footer small{display:block;border-top:1px solid #333;padding-top:14px;color:#888}.admin{background:#f5f6f8;padding-bottom:70px}.adminhead{height:58px;background:#11151a;color:#fff;padding:0 14px;display:flex;align-items:center;justify-content:space-between}.adminnav{background:#fff;border-bottom:1px solid #ddd;max-width:none;padding:10px 14px}.adminmain{max-width:1100px;margin:auto;padding:16px 10px}.pagehead{display:flex;justify-content:space-between;align-items:center}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stats>div{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px}.stats b{display:block;font-size:26px}.stats span{color:#777}.adminlist{display:grid;gap:7px}.row{background:#fff;border:1px solid var(--line);border-radius:11px;padding:9px;display:flex;gap:10px;align-items:center}.mini{width:64px;height:56px;background:#eee;display:grid;place-items:center;overflow:hidden;border-radius:8px}.mini img{width:100%;height:100%;object-fit:cover}.grow{flex:1;min-width:0}.grow b,.grow span,.grow small{display:block}.grow span{color:#777;font-size:13px}.form{display:grid;grid-template-columns:1fr 1fr;gap:10px;background:#fff;padding:14px;border-radius:12px;border:1px solid var(--line)}.form label{font-weight:700}.full{grid-column:1/-1}.toolbar{display:flex;gap:5px;margin-top:6px}.toolbar button{padding:7px 9px;border:1px solid #ddd;background:#fff;border-radius:7px}.editor{min-height:160px;border:1px solid #d7dae0;border-radius:9px;padding:10px;font-weight:400}.hidden-editor{display:none}.fullbtn{width:100%;margin-top:10px}.tabs{display:flex;gap:7px;overflow:auto;margin-bottom:10px}.tabs a{padding:8px 11px;background:#fff;border:1px solid #ddd;border-radius:999px;white-space:nowrap}.tabs a.active{background:#222;color:#fff}.quick{display:flex;gap:7px;margin-bottom:10px}.quick input{flex:1}.pill{border:0;border-radius:999px;padding:7px 10px}.pill.on{background:#e5f7eb;color:#087338}.pill.off{background:#eee;color:#777}.bottomnav{display:none}.login-page{min-height:100vh;background:#11151a;display:grid;place-items:center;padding:14px}.login-card{background:#fff;width:min(460px,100%);padding:22px;border-radius:16px}.login-card label{display:block;margin:10px 0;font-weight:700}.notice{padding:11px;border-radius:9px;background:#fff4c8}.notice.ok{background:#e6f7eb;color:#0b6e35}.notice.error{background:#fde8e8;color:#a31616}
@media(max-width:700px){.section{padding:24px 8px}.cat-grid{grid-template-columns:repeat(3,1fr);gap:6px}.cat-grid a{padding:13px 4px;font-size:13px}.product-grid{grid-template-columns:repeat(2,1fr);gap:7px}.filters{grid-template-columns:1fr 1fr}.filters input{grid-column:1/-1}.detail{grid-template-columns:1fr}.detail h1{font-size:27px}.adminnav{display:none}.adminmain{padding:12px 7px}.stats{grid-template-columns:repeat(2,1fr)}.form{grid-template-columns:1fr;padding:10px}.full{grid-column:1}.bottomnav{display:flex;position:fixed;left:0;right:0;bottom:0;height:62px;background:#fff;border-top:1px solid #ddd;align-items:center;justify-content:space-around;z-index:60}.bottomnav .plus{width:48px;height:48px;border-radius:50%;background:var(--red);color:#fff;display:grid;place-items:center;font-size:28px;margin-top:-24px}}


/* v1.0.36 — Admin mobile hamburger menu */
.adminhead-actions{display:flex;align-items:center;gap:8px}
.admin-mobile-menu-btn{
    display:none;
    width:38px;height:38px;
    align-items:center;justify-content:center;
    border:1px solid rgba(255,255,255,.3);
    border-radius:9px;
    background:transparent;color:#fff;
    font-size:22px;line-height:1;
    cursor:pointer;
}
.admin-mobile-menu-backdrop,
.admin-mobile-menu{display:none}

@media(max-width:700px){
    .adminhead{
        height:54px;
        padding:0 10px;
    }

    .adminhead>b{
        font-size:15px;
    }

    .admin-store-link{
        display:none;
    }

    .admin-mobile-menu-btn{
        display:flex;
    }

    .admin-mobile-menu-backdrop{
        display:block;
        position:fixed;
        inset:0;
        z-index:89;
        background:rgba(0,0,0,.48);
        opacity:0;
        visibility:hidden;
        transition:opacity .18s ease,visibility .18s ease;
    }

    .admin-mobile-menu{
        display:flex;
        position:fixed;
        top:0;right:0;bottom:0;
        z-index:90;
        width:min(320px,86vw);
        flex-direction:column;
        background:#fff;
        box-shadow:-8px 0 28px rgba(0,0,0,.2);
        transform:translateX(105%);
        transition:transform .2s ease;
    }

    body.admin-menu-open{
        overflow:hidden;
    }

    body.admin-menu-open .admin-mobile-menu{
        transform:translateX(0);
    }

    body.admin-menu-open .admin-mobile-menu-backdrop{
        opacity:1;
        visibility:visible;
    }

    .admin-mobile-menu-head{
        min-height:62px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding:10px 13px;
        background:#11151a;
        color:#fff;
    }

    .admin-mobile-menu-head strong{
        font-size:18px;
    }

    .admin-mobile-menu-head button{
        width:40px;height:40px;
        border:0;border-radius:50%;
        background:rgba(255,255,255,.12);
        color:#fff;
        font-size:29px;
        line-height:1;
        cursor:pointer;
    }

    .admin-mobile-menu-links{
        display:flex;
        flex-direction:column;
        gap:0;
        max-width:none;
        margin:0;
        padding:8px 0;
        font-size:17px;
    }

    .admin-mobile-menu-links a{
        display:flex;
        align-items:center;
        gap:12px;
        min-height:54px;
        padding:10px 16px;
        border-bottom:1px solid #edf0f3;
        font-weight:700;
    }

    .admin-mobile-menu-links a:hover,
    .admin-mobile-menu-links a:active{
        background:#f4f7fa;
    }

    .admin-mobile-menu-links .mobile-store-link{
        margin-top:8px;
        border-top:1px solid #e3e7eb;
        color:#174f82;
    }
}


/* v1.0.38 — Mobile menu click/touch hardening */
@media(max-width:700px){
    .admin-mobile-menu-backdrop{
        z-index:9998 !important;
        pointer-events:none;
    }

    .admin-mobile-menu{
        z-index:9999 !important;
        pointer-events:none;
    }

    body.admin-menu-open .admin-mobile-menu{
        pointer-events:auto !important;
    }

    body.admin-menu-open .admin-mobile-menu-backdrop{
        pointer-events:auto !important;
    }

    .admin-mobile-menu,
    .admin-mobile-menu *{
        -webkit-tap-highlight-color:transparent;
    }

    .admin-mobile-menu-head,
    .admin-mobile-menu-links,
    .admin-mobile-menu-links a{
        position:relative;
        z-index:10000;
        pointer-events:auto !important;
    }

    .admin-mobile-menu-links a{
        cursor:pointer;
        touch-action:manipulation;
        user-select:none;
        -webkit-user-select:none;
    }

    .admin-mobile-menu-links a:active{
        background:#e9f1f8 !important;
    }
}


/* v1.0.39 — Native mobile menu: no JavaScript required */
.admin-mobile-native-menu{display:none}

@media(max-width:700px){
    .admin-mobile-menu-btn,
    .admin-mobile-menu,
    .admin-mobile-menu-backdrop{
        display:none !important;
    }

    .admin-mobile-native-menu{
        display:block;
        position:relative;
    }

    .admin-mobile-native-menu summary{
        list-style:none;
        width:38px;
        height:38px;
        display:flex;
        align-items:center;
        justify-content:center;
        border:1px solid rgba(255,255,255,.35);
        border-radius:9px;
        background:rgba(255,255,255,.06);
        color:#fff;
        font-size:23px;
        line-height:1;
        cursor:pointer;
        -webkit-tap-highlight-color:transparent;
        user-select:none;
    }

    .admin-mobile-native-menu summary::-webkit-details-marker{
        display:none;
    }

    .admin-mobile-native-menu[open] summary{
        background:rgba(255,255,255,.14);
    }

    .admin-mobile-native-panel{
        position:absolute;
        top:44px;
        right:0;
        z-index:99999;
        width:min(280px,88vw);
        padding:8px;
        border:1px solid #dfe3e8;
        border-radius:12px;
        background:#fff;
        color:#11151a;
        box-shadow:0 14px 35px rgba(0,0,0,.25);
    }

    .admin-mobile-native-title{
        padding:10px 11px 8px;
        font-size:16px;
        font-weight:800;
        color:#174f82;
        border-bottom:1px solid #edf0f3;
        margin-bottom:4px;
    }

    .admin-mobile-native-panel a{
        display:block;
        min-height:46px;
        padding:12px 11px;
        border-radius:8px;
        font-size:16px;
        font-weight:700;
        line-height:1.35;
        color:#11151a;
        background:#fff;
        cursor:pointer;
        -webkit-tap-highlight-color:transparent;
    }

    .admin-mobile-native-panel a + a{
        border-top:1px solid #f0f1f3;
    }

    .admin-mobile-native-panel a:active{
        background:#edf4fb;
    }
}


/* v1.0.41 — TeeraService Brand Theme
   Logo-inspired navy + white. Red remains for danger/destructive actions only. */
:root{
    --ts-brand:#090b78;
    --ts-brand-deep:#05065b;
    --ts-brand-soft:#eef0ff;
    --ts-brand-line:#cfd4ff;
    --ts-brand-text:#090b78;
}

/* ===== Global primary actions ===== */
.btn.primary,
.search button,
.quick .btn.primary,
.bottomnav .plus{
    background:var(--ts-brand) !important;
    border-color:var(--ts-brand) !important;
    color:#fff !important;
}

.btn.primary:hover,
.search button:hover,
.quick .btn.primary:hover,
.bottomnav .plus:hover{
    background:var(--ts-brand-deep) !important;
    border-color:var(--ts-brand-deep) !important;
}

/* Keep danger actions red */
.btn.danger,
.ts-sale-status-button-sold,
.ts-thumb-delete{
    background:#fff !important;
    color:#b42318 !important;
    border-color:#d92d20 !important;
}

.btn.danger:hover,
.ts-sale-status-button-sold:hover{
    background:#fff4f2 !important;
    color:#912018 !important;
    border-color:#b42318 !important;
}

/* ===== Admin ===== */
.adminhead{
    background:var(--ts-brand-deep) !important;
}

.adminnav a:hover,
.adminnav a:focus{
    color:var(--ts-brand) !important;
}

.pagehead h1,
.form label,
.ts-description-label,
.ts-image-titlebar strong,
.settings-model-selected{
    color:var(--ts-brand-text) !important;
}

.tabs a{
    transition:background .15s ease,color .15s ease,border-color .15s ease;
}

.tabs a.active{
    background:var(--ts-brand) !important;
    border-color:var(--ts-brand) !important;
    color:#fff !important;
}

.tabs a:hover:not(.active){
    border-color:var(--ts-brand-line) !important;
    background:var(--ts-brand-soft) !important;
    color:var(--ts-brand) !important;
}

.pill.on{
    background:#e8f7ee !important;
    color:#087338 !important;
}

/* Status/utility badges */
.ts-prodid,
.ts-image-count,
.image-count{
    background:var(--ts-brand-soft) !important;
    color:var(--ts-brand) !important;
    border-color:var(--ts-brand-line) !important;
}

/* Save button / primary form action */
.ts-form-actions-main .btn.primary,
.ts-form-actions-main button.btn.primary,
button.btn.primary{
    background:var(--ts-brand) !important;
    border-color:var(--ts-brand) !important;
    color:#fff !important;
}

.ts-form-actions-main .btn.primary:hover,
.ts-form-actions-main button.btn.primary:hover,
button.btn.primary:hover{
    background:var(--ts-brand-deep) !important;
    border-color:var(--ts-brand-deep) !important;
}

/* Image main-star uses brand navy instead of orange for a more unified identity */
.ts-thumb-primary.is-primary,
.ts-thumb-primary.is-primary:hover{
    background:var(--ts-brand) !important;
    border-color:#fff !important;
    color:#fff !important;
}

/* Non-primary stars remain neutral */
.ts-thumb-primary:not(.is-primary){
    background:#7a8492 !important;
    color:#fff !important;
}

/* Sold/restore distinction */
.ts-sale-status-button-restore{
    background:#fff !important;
    color:#17603a !important;
    border-color:#2e8b57 !important;
}

/* ===== Storefront ===== */
.site-header{
    background:var(--ts-brand-deep) !important;
}

.hero{
    background:linear-gradient(135deg,var(--ts-brand-deep),#15178d) !important;
}

.hero span{
    color:#c8ccff !important;
}

.card:hover,
.cat-grid a:hover,
.brand-row a:hover{
    border-color:var(--ts-brand-line) !important;
}

.price,
.info strong{
    color:var(--ts-brand) !important;
}

/* Keep LINE green */
.btn.line,
.float-line{
    background:var(--green) !important;
    border-color:var(--green) !important;
}

/* ===== Mobile menu ===== */
@media(max-width:700px){
    .admin-mobile-native-menu summary{
        border-color:rgba(255,255,255,.48) !important;
        background:rgba(255,255,255,.08) !important;
    }

    .admin-mobile-native-menu[open] summary{
        background:#fff !important;
        color:var(--ts-brand) !important;
    }

    .admin-mobile-native-title{
        color:var(--ts-brand) !important;
    }

    .admin-mobile-native-panel a:active{
        background:var(--ts-brand-soft) !important;
        color:var(--ts-brand) !important;
    }
}


/* v1.0.42 — Softer TeeraService brand palette
   Same brand family, lower saturation for a calmer professional UI. */
:root{
    --ts-brand:#3f5f93;
    --ts-brand-deep:#2f466e;
    --ts-brand-soft:#f0f4fa;
    --ts-brand-line:#ccd8e7;
    --ts-brand-text:#355584;
}

/* Softer header */
.adminhead{
    background:var(--ts-brand-deep) !important;
}

/* Main buttons */
.btn.primary,
.search button,
.quick .btn.primary,
.bottomnav .plus,
.ts-form-actions-main .btn.primary,
.ts-form-actions-main button.btn.primary,
button.btn.primary{
    background:var(--ts-brand) !important;
    border-color:var(--ts-brand) !important;
    color:#fff !important;
}

.btn.primary:hover,
.search button:hover,
.quick .btn.primary:hover,
.bottomnav .plus:hover,
.ts-form-actions-main .btn.primary:hover,
.ts-form-actions-main button.btn.primary:hover,
button.btn.primary:hover{
    background:var(--ts-brand-deep) !important;
    border-color:var(--ts-brand-deep) !important;
}

/* Headings */
.pagehead h1,
.form label,
.ts-description-label,
.ts-image-titlebar strong,
.settings-model-selected{
    color:var(--ts-brand-text) !important;
}

/* Tabs */
.tabs a.active{
    background:var(--ts-brand-deep) !important;
    border-color:var(--ts-brand-deep) !important;
    color:#fff !important;
}

.tabs a:hover:not(.active){
    background:var(--ts-brand-soft) !important;
    border-color:var(--ts-brand-line) !important;
    color:var(--ts-brand-text) !important;
}

/* Badges / small accents */
.ts-prodid,
.ts-image-count,
.image-count{
    background:var(--ts-brand-soft) !important;
    border-color:var(--ts-brand-line) !important;
    color:var(--ts-brand-text) !important;
}

/* Primary-image star: softer navy */
.ts-thumb-primary.is-primary,
.ts-thumb-primary.is-primary:hover{
    background:var(--ts-brand) !important;
    border-color:#fff !important;
    color:#fff !important;
}

/* Storefront brand treatment */
.site-header{
    background:var(--ts-brand-deep) !important;
}

.hero{
    background:linear-gradient(135deg,#293d60,#496996) !important;
}

.hero span{
    color:#dbe4f2 !important;
}

.price,
.info strong{
    color:var(--ts-brand-text) !important;
}

/* Mobile menu */
@media(max-width:700px){
    .admin-mobile-native-menu[open] summary{
        background:#fff !important;
        color:var(--ts-brand-text) !important;
    }

    .admin-mobile-native-panel a:active{
        background:var(--ts-brand-soft) !important;
        color:var(--ts-brand-text) !important;
    }
}


/* v1.0.43 — Clickable admin dashboard */
.admin-home-brand{
    display:inline-flex;
    align-items:center;
    color:#fff;
    text-decoration:none;
    cursor:pointer;
}
.admin-home-brand:hover{opacity:.9}

.stats.stats-links{
    display:grid;
}
.stats.stats-links .stat-link{
    display:block;
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    padding:15px;
    color:inherit;
    text-decoration:none;
    cursor:pointer;
    transition:transform .12s ease,box-shadow .12s ease,border-color .12s ease;
}
.stats.stats-links .stat-link b{
    display:block;
    font-size:26px;
}
.stats.stats-links .stat-link span{
    color:#777;
}
.stats.stats-links .stat-link:hover{
    transform:translateY(-1px);
    border-color:var(--ts-brand-line,#ccd8e7);
    box-shadow:0 5px 16px rgba(25,45,75,.08);
}
.stats.stats-links .stat-link:active{
    transform:translateY(0);
    background:var(--ts-brand-soft,#f0f4fa);
}
.page-filter-note{
    margin-top:3px;
    color:#65758a;
    font-size:14px;
}
.filter-clear-row{
    margin:0 0 10px;
}
@media(max-width:700px){
    .stats.stats-links .stat-link{
        min-height:86px;
        padding:13px;
        -webkit-tap-highlight-color:transparent;
    }
    .stats.stats-links .stat-link b{
        font-size:26px;
    }
    .stats.stats-links .stat-link span{
        font-size:14px;
    }
}


/* v1.0.44 — TeeraService logo in admin header */
.admin-home-logo{
    display:flex;
    align-items:center;
    flex:0 0 auto;
    line-height:0;
}

.admin-home-logo img{
    display:block;
    width:auto;
    height:38px;
    max-width:360px;
    object-fit:contain;
}

@media(max-width:700px){
    .admin-home-logo img{
        height:30px;
        max-width:220px;
    }
}

@media(max-width:390px){
    .admin-home-logo img{
        height:27px;
        max-width:190px;
    }
}


/* v1.0.45 — Taller mobile admin header + larger logo */
@media(max-width:700px){
    .adminhead{
        height:66px !important;
        min-height:66px !important;
        padding:0 10px !important;
    }

    .admin-home-logo img{
        height:40px !important;
        max-width:245px !important;
    }

    .admin-mobile-native-menu summary{
        width:42px !important;
        height:42px !important;
        font-size:24px !important;
    }
}

@media(max-width:390px){
    .adminhead{
        height:64px !important;
        min-height:64px !important;
    }

    .admin-home-logo img{
        height:37px !important;
        max-width:220px !important;
    }

    .admin-mobile-native-menu summary{
        width:40px !important;
        height:40px !important;
    }
}


/* v1.0.46 — Primary product image star: strong orange distinction */
.ts-thumb-primary.is-primary,
.ts-thumb-primary.is-primary:hover{
    background:#f59e0b !important;
    border-color:#ffffff !important;
    color:#ffffff !important;
    box-shadow:0 0 0 2px rgba(245,158,11,.20),0 2px 6px rgba(0,0,0,.18) !important;
}

.ts-thumb-primary:not(.is-primary){
    background:#8793a1 !important;
    border-color:#ffffff !important;
    color:#ffffff !important;
    box-shadow:0 1px 4px rgba(0,0,0,.16) !important;
}

.ts-thumb-primary:not(.is-primary):hover{
    background:#6f7b89 !important;
}

@media(max-width:700px){
    .ts-thumb-primary.is-primary{
        transform:scale(1.08);
    }
}

/* =========================================================
   v1.0.81 — TEERA SERVICE Storefront B2
   Dark automotive header/hero + clean catalog cards.
   Admin styles above remain unchanged.
   ========================================================= */
.storefront{background:#f4f5f7;color:#111820;font-family:system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;padding-bottom:0}
.store-shell{width:min(100% - 32px,1560px);margin-inline:auto}
.store-topbar{background:#05070a;color:#cbd1d9;font-size:13px}
.topbar-inner{min-height:34px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.topbar-inner a{color:#fff}.topbar-contact{display:flex;align-items:center;gap:12px;min-width:0}
.store-mainhead{background:linear-gradient(180deg,#0b1118,#111923);color:#fff;border-bottom:1px solid rgba(255,255,255,.07)}
.mainhead-inner{min-height:84px;display:grid;grid-template-columns:270px minmax(340px,760px) 170px;align-items:center;gap:28px}
.store-logo{display:flex;align-items:center}.store-logo img{display:block;max-width:255px;width:100%;height:auto;filter:brightness(0) invert(1);object-fit:contain}
.store-search{display:flex;align-items:stretch;background:#fff;border-radius:7px;overflow:hidden;height:46px;box-shadow:0 1px 0 rgba(255,255,255,.08)}
.store-search .search-icon{display:grid;place-items:center;width:44px;color:#727985;font-size:24px}
.store-search input{flex:1;min-width:0;border:0;outline:0;padding:0 8px;color:#111820;background:#fff}
.store-search button{min-width:88px;border:0;background:#e51d28;color:#fff;font-weight:800;cursor:pointer}
.header-contact{justify-self:end;display:flex;align-items:center;gap:9px;color:#fff}.header-contact span{font-size:26px}.header-contact b{font-size:15px}
.mobile-menu-button{display:none}
.store-nav{background:#0c1117;color:#fff;border-bottom:1px solid rgba(255,255,255,.06)}
.nav-inner{min-height:48px;display:flex;align-items:stretch;gap:4px}
.nav-inner>a,.nav-cats>summary{display:flex;align-items:center;padding:0 22px;min-height:48px;font-size:14px;font-weight:700;cursor:pointer;list-style:none}
.nav-inner>a:hover,.nav-inner>a.active,.nav-cats>summary:hover{background:#e51d28;color:#fff}
.nav-cats{position:relative}.nav-cats summary::-webkit-details-marker{display:none}.nav-cats summary:after{content:'⌄';margin-left:8px}
.nav-cats-panel{position:absolute;top:48px;left:0;width:280px;background:#fff;color:#111820;border-radius:0 0 12px 12px;box-shadow:0 14px 35px rgba(0,0,0,.25);padding:8px;z-index:100}
.nav-cats-panel a{display:block;padding:10px 12px;border-radius:7px}.nav-cats-panel a:hover{background:#f1f3f6;color:#e51d28}
.mobile-drawer,.mobile-drawer-backdrop{display:none}
.store-main{min-height:55vh}

.home-hero{position:relative;min-height:480px;background:#070a0d;overflow:hidden;color:#fff}
.hero-picture{position:absolute;inset:0}.hero-picture img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.92) 0%,rgba(0,0,0,.78) 28%,rgba(0,0,0,.2) 58%,rgba(0,0,0,.02) 100%)}
.hero-content{position:relative;z-index:2;min-height:480px;display:flex;align-items:center}
.hero-copy{width:min(600px,48%);padding:36px 10px}
.hero-eyebrow{color:#e51d28;letter-spacing:.16em;font-weight:900;margin:0 0 9px;font-size:13px}
.hero-copy h1{font-size:clamp(40px,4.2vw,68px);line-height:1.07;margin:0;color:#fff;letter-spacing:-.02em}.hero-copy h1 em{font-style:normal;color:#ef2630}
.hero-sub{font-size:20px;color:#d7dbe0;margin:18px 0 26px}
.hero-points{display:flex;gap:30px;flex-wrap:wrap}.hero-points>div{display:grid;grid-template-columns:42px auto;grid-template-rows:auto auto;column-gap:10px;align-items:center}.hero-points>div>span{grid-row:1/3;width:42px;height:42px;border:1px solid rgba(255,255,255,.6);border-radius:50%;display:grid;place-items:center;font-size:20px}.hero-points b{font-size:14px}.hero-points small{font-size:12px;color:#b7bdc5}

.store-section{padding:28px 0;background:#fff}.store-section+ .store-section{border-top:0}
.store-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.store-section-head h2{margin:0;font-size:25px;letter-spacing:-.02em}.store-section-head a{color:#e31c27;font-weight:800;font-size:14px}
.category-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:10px}.category-card{background:#fff;border:1px solid #e0e4e9;border-radius:10px;padding:10px 7px;text-align:center;min-width:0;transition:.16s ease}.category-card:hover{border-color:#b7bec8;box-shadow:0 8px 18px rgba(15,23,42,.07);transform:translateY(-2px)}
.category-image{height:100px;display:grid;place-items:center;overflow:hidden;border-radius:7px;background:#fafafa}.category-image img{width:100%;height:100%;object-fit:contain}.category-image span{font-size:34px;color:#2a313a}.category-card b{display:block;margin-top:9px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.category-more .category-image{background:#f4f6f8}
.brand-grid{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:10px}.brand-card{border:1px solid #e0e4e9;border-radius:10px;min-height:116px;padding:14px 8px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:.16s ease}.brand-card:hover{border-color:#aeb6c1;box-shadow:0 8px 18px rgba(15,23,42,.06);transform:translateY(-2px)}.brand-mark{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#111923;color:#fff;font-weight:900;font-size:13px;margin-bottom:7px}.brand-card b{font-size:14px}.brand-card small{font-size:11px;color:#8a929d;margin-top:3px}
.latest-section{padding-bottom:34px}.home-product-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(190px,1fr);grid-template-rows:1fr;gap:12px;overflow-x:auto;padding-bottom:5px;scroll-snap-type:x proximity}.store-product-card{background:#fff;border:1px solid #e0e4e9;border-radius:10px;overflow:hidden;min-width:0;scroll-snap-align:start;transition:.16s ease}.store-product-card:hover{box-shadow:0 10px 22px rgba(15,23,42,.08);transform:translateY(-2px)}
.product-card-image{position:relative;aspect-ratio:4/3;background:#f5f6f7;display:grid;place-items:center;overflow:hidden}.product-card-image img{width:100%;height:100%;object-fit:contain}.product-card-image>span{color:#949ba5}.product-new{position:absolute;top:8px;left:8px;background:#e31b23;color:#fff;font-size:11px;font-style:normal;font-weight:900;padding:4px 7px;border-radius:5px}.status-chip{position:absolute;top:8px;left:8px;font-style:normal;font-size:11px;font-weight:800;padding:5px 8px;border-radius:999px}.status-chip.available{background:#e4f7ea;color:#08763a}.status-chip.reserved{background:#fff2c7;color:#7f5900}.status-chip.sold{background:#20252b;color:#fff}
.product-card-body{padding:12px}.product-card-body h3{font-size:15px;line-height:1.35;margin:0 0 5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:40px}.product-card-body p{font-size:12px;color:#6d7580;margin:0 0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.product-card-body strong{font-size:17px;color:#e31b23;display:block}.product-card-body>small:first-child{color:#8a929d}.stock{display:block;margin-top:7px;font-size:11px;font-weight:800}.stock.available{color:#0b9a47}.stock.reserved{color:#8b6500}.stock.sold{color:#d51c27}

.store-footer{background:linear-gradient(180deg,#11161c,#090c10);color:#dce1e7;margin-top:0}.footer-benefits{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid rgba(255,255,255,.1)}.footer-benefits>div{min-height:100px;padding:22px 20px;display:grid;grid-template-columns:46px auto;grid-template-rows:auto auto;align-items:center;column-gap:11px}.footer-benefits>div+div{border-left:1px solid rgba(255,255,255,.08)}.footer-benefits span{grid-row:1/3;width:46px;height:46px;border:1px solid rgba(255,255,255,.35);border-radius:50%;display:grid;place-items:center;font-size:22px}.footer-benefits b{color:#fff}.footer-benefits small{color:#9ea7b2}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.4fr;gap:50px;padding:34px 0}.footer-grid h3{color:#fff;margin-top:0}.footer-grid a,.footer-grid p{display:block;color:#b8c0c9;margin:8px 0}.footer-brand img{max-width:300px;filter:brightness(0) invert(1)}.footer-copy{border-top:1px solid rgba(255,255,255,.1);padding:18px 0;color:#7f8994;font-size:13px}
.float-call{position:fixed;right:18px;bottom:82px;width:54px;height:54px;background:#0c8f45;color:#fff;border-radius:50%;display:grid;place-items:center;font-size:22px;z-index:70;box-shadow:0 8px 22px rgba(0,0,0,.2)}
.mobile-bottom-nav{display:none}

.catalog-hero{background:#111923;color:#fff;padding:34px 0}.catalog-hero h1{margin:0 0 4px;font-size:34px}.catalog-hero p{margin:0;color:#b8c1cb}.catalog-section{min-height:500px}.catalog-filters{display:grid;grid-template-columns:2fr 1fr 1fr 1fr auto;gap:9px;padding:14px;background:#f5f6f8;border:1px solid #e0e4e9;border-radius:12px;align-items:end}.catalog-filters label{display:grid;gap:5px}.catalog-filters label span{font-size:12px;font-weight:800;color:#384453}.catalog-filters input,.catalog-filters select{width:100%;height:44px;border:1px solid #d5dae1;border-radius:8px;background:#fff;padding:0 11px;outline:0}.catalog-filters input:focus,.catalog-filters select:focus{border-color:#1a4f91;box-shadow:0 0 0 3px rgba(26,79,145,.08)}.store-btn{height:44px;border:1px solid #d2d7dd;border-radius:8px;background:#fff;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;font-weight:800;cursor:pointer}.store-btn.primary{background:#e31b23;border-color:#e31b23;color:#fff}.catalog-meta{display:flex;justify-content:space-between;align-items:center;padding:18px 2px 10px}.catalog-meta-category{display:inline-block;background:#fff7d6;color:#173f70;font-size:1em;font-weight:900;line-height:1.2;padding:1px 6px;margin:0 4px;border:1px solid #eadca7;border-radius:3px;vertical-align:baseline;box-shadow:none}.catalog-meta a{color:#e31b23;font-weight:700}.catalog-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.empty-state{text-align:center;padding:60px 20px;background:#f6f7f8;border-radius:12px;color:#66707c}.empty-state b{color:#1a232d;font-size:20px}

.product-detail-section{padding:34px 0 50px}.product-detail{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(400px,.88fr);gap:34px;align-items:start}.product-gallery,.product-summary{background:#fff;border:1px solid #e0e4e9;border-radius:14px;padding:16px}.product-main-image{aspect-ratio:4/3;background:#f5f6f7;border-radius:10px;overflow:hidden;display:grid;place-items:center}.product-main-image img{width:100%;height:100%;object-fit:contain}.product-thumbs{display:flex;gap:8px;overflow-x:auto;margin-top:10px;padding-bottom:3px}.product-thumbs button{flex:0 0 78px;width:78px;height:68px;border:1px solid #d7dce2;border-radius:7px;padding:2px;background:#fff;cursor:pointer}.product-thumbs img{width:100%;height:100%;object-fit:cover;border-radius:5px}.product-topline{display:flex;align-items:center;justify-content:space-between;gap:12px}.product-topline .status-chip{position:static}.product-topline small{color:#87909a}.product-summary h1{font-size:30px;line-height:1.28;margin:15px 0}.product-price{font-size:34px;font-weight:900;color:#e31b23;margin-bottom:20px}.product-specs{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #e6e8eb;border-left:1px solid #e6e8eb}.product-specs>div{padding:12px;border-right:1px solid #e6e8eb;border-bottom:1px solid #e6e8eb;min-height:75px}.product-specs span,.product-specs b{display:block}.product-specs span{font-size:12px;color:#7b848e;margin-bottom:4px}.product-specs b{font-size:14px}.sold-notice{margin-top:15px;padding:13px 14px;border:1px solid #efc1c4;background:#fff3f3;border-radius:9px;color:#a81721}.sold-notice b,.sold-notice span{display:block}.product-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}.store-btn.call{background:#111923;color:#fff;border-color:#111923}.store-btn.line{background:#0c9d4e;color:#fff;border-color:#0c9d4e}.product-description{margin-top:24px;border-top:1px solid #e3e6e9;padding-top:18px;line-height:1.7}.product-description h2{font-size:20px;margin:0 0 10px}

@media(max-width:1100px){
  .mainhead-inner{grid-template-columns:220px minmax(280px,1fr) 130px;gap:18px}.store-logo img{max-width:220px}.category-grid{grid-template-columns:repeat(5,1fr)}.brand-grid{grid-template-columns:repeat(5,1fr)}.catalog-grid{grid-template-columns:repeat(4,1fr)}.catalog-filters{grid-template-columns:2fr 1fr 1fr}.catalog-filters label:nth-of-type(4){grid-column:auto}.catalog-filters .store-btn{grid-column:auto}.product-detail{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .storefront{padding-bottom:66px}.store-shell{width:min(100% - 20px,1560px)}.store-topbar,.store-nav,.header-contact{display:none}.store-mainhead{position:sticky;top:0;z-index:90}.mainhead-inner{min-height:112px;display:grid;grid-template-columns:42px 1fr 42px;grid-template-rows:52px 48px;gap:0 9px;padding-top:5px;padding-bottom:7px}.mobile-menu-button{display:block;width:42px;height:42px;border:0;background:transparent;color:#fff;font-size:26px;cursor:pointer}.store-logo{justify-content:center}.store-logo img{max-width:210px;filter:brightness(0) invert(1)}.mainhead-inner:after{content:'☎';grid-column:3;grid-row:1;width:42px;height:42px;display:grid;place-items:center;font-size:23px;color:#fff}.store-search{grid-column:1/-1;grid-row:2;height:44px}.store-search .search-icon{width:36px}.store-search input{font-size:13px}.store-search button{min-width:64px;padding:0 10px;font-size:13px}.mobile-drawer{display:flex;position:fixed;top:0;left:0;bottom:0;width:min(330px,86vw);background:#fff;z-index:121;flex-direction:column;transform:translateX(-105%);transition:.2s ease;box-shadow:10px 0 35px rgba(0,0,0,.25);overflow-y:auto}.mobile-drawer.open{transform:translateX(0)}.mobile-drawer-head{background:#0d131a;min-height:72px;display:flex;align-items:center;justify-content:space-between;padding:10px}.mobile-drawer-head img{max-width:210px;filter:brightness(0) invert(1)}.mobile-drawer-head button{width:40px;height:40px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;font-size:28px}.mobile-drawer>a{padding:14px 16px;border-bottom:1px solid #eef0f2;font-weight:700}.mobile-drawer-backdrop{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:120;opacity:0;visibility:hidden;transition:.2s}.mobile-drawer-backdrop.open{opacity:1;visibility:visible}
  .home-hero{min-height:460px}.hero-picture img{object-position:center bottom}.hero-shade{background:linear-gradient(180deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.65) 35%,rgba(0,0,0,.12) 68%,rgba(0,0,0,.18) 100%)}.hero-content{min-height:460px;align-items:flex-start}.hero-copy{width:100%;padding:28px 4px 0}.hero-eyebrow{font-size:11px}.hero-copy h1{font-size:34px;max-width:350px}.hero-sub{font-size:15px;max-width:320px;margin:10px 0}.hero-points{position:absolute;left:10px;right:10px;bottom:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.hero-points>div{display:flex;flex-direction:column;text-align:center;align-items:center;gap:3px}.hero-points>div>span{width:35px;height:35px;font-size:16px}.hero-points b{font-size:10px}.hero-points small{display:none}
  .store-section{padding:19px 0}.store-section-head{margin-bottom:10px}.store-section-head h2{font-size:20px}.store-section-head a{font-size:12px}.category-grid{grid-template-columns:repeat(4,1fr);gap:6px}.category-card{padding:6px 4px;border-radius:8px}.category-image{height:72px}.category-card b{font-size:11px;margin-top:5px}.brand-grid{grid-template-columns:repeat(4,1fr);gap:6px}.brand-card{min-height:86px;padding:8px 3px}.brand-mark{width:38px;height:38px;margin-bottom:4px;font-size:10px}.brand-card b{font-size:11px}.brand-card small{display:none}.home-product-row{grid-auto-columns:42%;gap:7px}.product-card-body{padding:9px}.product-card-body h3{font-size:12px;min-height:33px}.product-card-body p{font-size:10px;margin-bottom:5px}.product-card-body strong{font-size:14px}.product-new{font-size:9px;top:5px;left:5px}.stock{font-size:9px;margin-top:4px}
  .footer-benefits{grid-template-columns:repeat(2,1fr)}.footer-benefits>div{min-height:84px;padding:14px 8px;grid-template-columns:35px auto;column-gap:7px}.footer-benefits>div+div{border-left:0}.footer-benefits>div:nth-child(even){border-left:1px solid rgba(255,255,255,.08)}.footer-benefits span{width:35px;height:35px;font-size:16px}.footer-benefits b{font-size:12px}.footer-benefits small{font-size:10px}.footer-grid{grid-template-columns:1fr;padding:24px 0;gap:20px}.footer-brand img{max-width:240px}.footer-grid>div:not(:first-child){display:none}.footer-copy{padding:14px 0 20px}.mobile-bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;height:64px;background:#fff;border-top:1px solid #dadfe5;z-index:100;align-items:stretch;justify-content:space-around;padding-bottom:env(safe-area-inset-bottom)}.mobile-bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;color:#343b44;gap:2px}.mobile-bottom-nav a span{font-size:21px}.mobile-bottom-nav a.active{color:#e31b23;font-weight:800}.float-call{right:12px;bottom:78px;width:48px;height:48px}.go-top{display:none!important}
  .catalog-hero{padding:22px 0}.catalog-hero h1{font-size:27px}.catalog-hero p{font-size:13px}.catalog-filters{grid-template-columns:1fr 1fr;padding:9px;gap:7px}.catalog-query{grid-column:1/-1}.catalog-filters label span{font-size:11px}.catalog-filters input,.catalog-filters select{height:40px;font-size:13px}.catalog-filters .store-btn{grid-column:1/-1;height:42px}.catalog-grid{grid-template-columns:repeat(2,1fr);gap:7px}.catalog-meta{font-size:13px}.status-chip{font-size:9px;padding:4px 6px;top:5px;left:5px}
  .product-detail-section{padding:12px 0 25px}.product-detail{grid-template-columns:1fr;gap:10px}.product-gallery,.product-summary{border-radius:10px;padding:9px}.product-summary h1{font-size:23px;margin:12px 0}.product-price{font-size:29px;margin-bottom:15px}.product-specs{grid-template-columns:1fr 1fr}.product-specs>div{padding:9px;min-height:65px}.product-actions{position:sticky;bottom:70px;z-index:20;background:#fff;padding:8px 0;margin-top:14px}.product-description{font-size:14px}
}


/* =========================================================
   v1.0.83 — Storefront B2 visual correction
   - Kanit for headings/navigation/important labels
   - tighter desktop header
   - readable hero proportions
   - preserve TEERA SERVICE original logo colors
   ========================================================= */
.storefront{
    background:#fff;
    color:#121820;
    overflow-x:hidden;
}
.storefront h1,
.storefront h2,
.storefront h3,
.storefront .store-nav,
.storefront .store-section-head,
.storefront .store-search button,
.storefront .header-contact,
.storefront .hero-eyebrow,
.storefront .hero-points b,
.storefront .category-card b,
.storefront .brand-card b,
.storefront .product-card-body h3,
.storefront .product-card-body strong{
    font-family:"Kanit",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
}

/* Full-width black header with a controlled content width */
.store-topbar,
.store-mainhead,
.store-nav{
    width:100%;
}
.store-shell{
    width:min(calc(100% - 40px),1560px);
    margin-inline:auto;
}
.store-topbar{
    min-height:30px;
}
.topbar-inner{
    min-height:30px;
    font-size:12px;
}
.store-mainhead{
    background:#0b1118 !important;
}
.mainhead-inner{
    min-height:76px;
    grid-template-columns:250px minmax(360px,760px) 150px;
    gap:24px;
}

/* Actual TEERA SERVICE logo: keep original blue/white identity.
   Put it on a small white panel instead of turning the whole logo white. */
.store-logo{
    width:240px;
    height:58px;
    padding:5px 9px;
    border-radius:8px;
    background:#fff;
    overflow:hidden;
}
.store-logo img{
    width:100%;
    height:100%;
    max-width:none !important;
    object-fit:contain;
    filter:none !important;
}
.store-search{
    height:44px;
    border-radius:7px;
}
.store-search input{
    font-size:14px;
}
.store-search button{
    min-width:88px;
    font-size:15px;
    background:#ed1c24 !important;
}
.header-contact{
    font-family:"Kanit",sans-serif;
}
.nav-inner{
    min-height:46px;
}
.nav-inner>a,
.nav-cats>summary{
    min-height:46px;
    padding:0 20px;
    font-size:14px;
    font-weight:500;
}

/* Hero: prevent Thai heading from breaking into 4–5 awkward lines */
.home-hero,
.hero-content{
    min-height:500px;
}
.hero-picture img{
    object-position:center center;
}
.hero-shade{
    background:linear-gradient(
        90deg,
        rgba(0,0,0,.95) 0%,
        rgba(0,0,0,.88) 22%,
        rgba(0,0,0,.60) 38%,
        rgba(0,0,0,.16) 58%,
        rgba(0,0,0,.02) 100%
    );
}
.hero-copy{
    width:min(690px,46vw);
    padding:34px 0;
}
.hero-eyebrow{
    margin:0 0 10px;
    font-size:12px;
    font-weight:600;
    letter-spacing:.14em;
}
.hero-copy h1{
    margin:0;
    font-size:clamp(38px,3.35vw,56px);
    line-height:1.13;
    font-weight:700;
    letter-spacing:0;
}
.hero-copy h1 em{
    display:block;
    margin-top:4px;
    color:#ef2530;
    font-style:normal;
}
.hero-sub{
    max-width:630px;
    margin:16px 0 22px;
    font-size:18px;
    line-height:1.5;
    color:#e0e3e7;
}
.hero-points{
    gap:24px;
}
.hero-points>div{
    grid-template-columns:38px auto;
    column-gap:9px;
}
.hero-points>div>span{
    width:38px;
    height:38px;
    font-size:17px;
}
.hero-points b{
    font-size:13px;
    font-weight:500;
}
.hero-points small{
    font-size:11px;
}

/* Sections closer to B2 mockup proportions */
.store-section{
    padding:24px 0;
}
.store-section-head{
    margin-bottom:13px;
}
.store-section-head h2{
    font-size:22px;
    font-weight:600;
}
.category-image{
    height:88px;
}
.category-card{
    padding:9px 6px;
}
.category-card b,
.brand-card b{
    font-size:13px;
    font-weight:500;
}
.brand-card{
    min-height:105px;
}
.home-product-row{
    grid-auto-columns:minmax(180px,1fr);
}

/* Prevent old global footer rules from fighting the B2 footer */
.store-footer{
    padding:0 !important;
}
.store-footer .footer-grid,
.store-footer .footer-benefits,
.store-footer .footer-copy{
    max-width:1560px;
}

/* Mobile B2 */
@media(max-width:700px){
    .store-shell{
        width:calc(100% - 20px);
    }
    .mainhead-inner{
        min-height:105px;
        grid-template-columns:42px 1fr 42px;
        grid-template-rows:49px 44px;
    }
    .store-logo{
        width:190px;
        height:45px;
        padding:3px 7px;
        justify-self:center;
        background:#fff;
    }
    .store-logo img{
        max-width:none !important;
        filter:none !important;
    }
    .mobile-drawer-head img{
        filter:none !important;
        background:#fff;
        border-radius:6px;
        padding:4px;
    }
    .home-hero,
    .hero-content{
        min-height:520px;
    }
    .hero-picture img{
        object-position:center bottom;
    }
    .hero-shade{
        background:linear-gradient(
            180deg,
            rgba(0,0,0,.94) 0%,
            rgba(0,0,0,.80) 29%,
            rgba(0,0,0,.34) 55%,
            rgba(0,0,0,.12) 75%,
            rgba(0,0,0,.18) 100%
        );
    }
    .hero-copy{
        width:100%;
        padding:24px 4px 0;
    }
    .hero-copy h1{
        font-size:clamp(31px,9vw,40px);
        line-height:1.15;
    }
    .hero-sub{
        max-width:95%;
        margin:12px 0 16px;
        font-size:14px;
    }
    .hero-points{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:8px;
    }
    .hero-points>div{
        display:flex;
        flex-direction:column;
        text-align:center;
        gap:4px;
    }
    .hero-points>div>span{
        width:34px;
        height:34px;
        margin:auto;
    }
    .hero-points small{
        display:none;
    }
    .store-section-head h2{
        font-size:19px;
    }
}


/* =========================================================
   v1.0.84 — Storefront navigation full-width background fix
   Fix the white rectangles appearing at both left/right sides
   of the desktop navigation row.
   ========================================================= */

/* Make the navigation background itself span the entire viewport. */
.store-nav{
    width:100% !important;
    background:#0c1117 !important;
    border-bottom:1px solid rgba(255,255,255,.06) !important;
    overflow:visible;
}

/* Keep the menu content centered, but never paint a white background
   around the centered container. */
.store-nav .store-shell,
.store-nav .nav-inner{
    background:transparent !important;
}

/* The nav-inner should only control content width/position. */
.store-nav .nav-inner{
    width:min(calc(100% - 40px),1560px) !important;
    max-width:1560px !important;
    margin-inline:auto !important;
    padding-inline:0 !important;
    min-height:46px;
}

/* Prevent old cumulative generic nav/container rules from injecting
   white side blocks around this storefront nav. */
.storefront .store-nav,
.storefront .store-nav *,
.storefront .nav-inner{
    box-sizing:border-box;
}

/* On desktop, visually connect header and nav into one continuous dark bar. */
@media(min-width:701px){
    .store-mainhead{
        border-bottom:1px solid rgba(255,255,255,.04) !important;
    }
    .store-nav{
        margin:0 !important;
        padding:0 !important;
    }
}

/* Mobile nav remains hidden as before. */
@media(max-width:700px){
    .store-nav{
        display:none !important;
    }
}


/* =========================================================
   v1.0.89 — Final desktop nav full-viewport fix
   Old global rule:
     .head,.search,nav,.section,... { max-width:1380px; margin:auto; }
   was still limiting the <nav> element itself, creating the white block
   at the right side on wide desktop screens.
   ========================================================= */
.storefront nav.store-nav{
    display:block !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 !important;
    background:#0c1117 !important;
}
.storefront nav.store-nav > .nav-inner{
    width:min(calc(100% - 40px),1560px) !important;
    max-width:1560px !important;
    margin:0 auto !important;
    padding:0 !important;
    background:transparent !important;
}
@media(max-width:700px){
    .storefront nav.store-nav{
        display:none !important;
    }
}


/* =========================================================
   v1.0.90 — Transparent TEERA SERVICE header logo
   Use the user's original transparent PNG; no white box/panel.
   ========================================================= */
.storefront .store-logo{
    width:250px !important;
    height:64px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
}
.storefront .store-logo img{
    display:block;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    object-fit:contain !important;
    object-position:left center !important;
    background:transparent !important;
    filter:none !important;
}
@media(max-width:700px){
    .storefront .store-logo{
        width:190px !important;
        height:48px !important;
        padding:0 !important;
        background:transparent !important;
    }
    .storefront .mobile-drawer-head img{
        background:transparent !important;
        padding:0 !important;
        border-radius:0 !important;
        filter:none !important;
    }
}


/* =========================================================
   v1.0.91 — Transparent TEERA SERVICE footer logo + footer refinement
   ========================================================= */
.store-footer{
    width:100% !important;
    background:#0a0f15 !important;
    color:#fff !important;
    margin:0 !important;
}
.footer-benefits-wrap{
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.10);
    background:#0d131b;
}
.footer-benefits{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    padding:0 !important;
}
.footer-benefit{
    display:flex;
    align-items:center;
    gap:14px;
    min-height:104px;
    padding:20px 26px;
    border-right:1px solid rgba(255,255,255,.09);
}
.footer-benefit:last-child{border-right:0}
.footer-benefit>span{
    flex:0 0 46px;
    width:46px;
    height:46px;
    border:1px solid #627083;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:21px;
    font-family:"Kanit",sans-serif;
}
.footer-benefit b{
    display:block;
    margin-bottom:4px;
    font-family:"Kanit",sans-serif;
    font-size:17px;
    font-weight:600;
    color:#fff;
}
.footer-benefit small{
    display:block;
    color:#b9c4d1;
    font-size:13px;
    line-height:1.45;
}

.footer-main{
    display:grid;
    grid-template-columns:minmax(360px,1.5fr) minmax(180px,.7fr) minmax(280px,.9fr);
    gap:70px;
    align-items:start;
    padding-top:46px !important;
    padding-bottom:42px !important;
}
.footer-brand img{
    display:block;
    width:min(470px,100%) !important;
    height:auto !important;
    max-width:none !important;
    padding:0 !important;
    margin:0 0 23px !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    filter:none !important;
    object-fit:contain !important;
    object-position:left center !important;
}
.footer-brand p{
    margin:0;
    color:#d3dbe5;
    font-size:16px;
    line-height:1.65;
}
.footer-menu h3,
.footer-contact h3{
    margin:0 0 18px;
    font-family:"Kanit",sans-serif;
    font-size:21px;
    font-weight:600;
    color:#fff;
}
.footer-menu{
    display:flex;
    flex-direction:column;
    gap:10px;
}
.footer-menu a{
    color:#d5dce5;
    font-size:15px;
    line-height:1.45;
}
.footer-menu a:hover{color:#fff}
.footer-contact{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.footer-contact>a,
.footer-contact-row{
    display:flex;
    align-items:flex-start;
    gap:11px;
    color:#d5dce5;
    font-size:15px;
    line-height:1.45;
}
.footer-contact>a>span,
.footer-contact-row>span{
    flex:0 0 34px;
    width:34px;
    height:34px;
    border:1px solid #677587;
    border-radius:50%;
    display:grid;
    place-items:center;
    color:#fff;
    font-size:13px;
    font-weight:700;
}
.footer-bottom{
    min-height:64px;
    display:flex;
    align-items:center;
    border-top:1px solid rgba(255,255,255,.11);
    color:#9ba8b7;
    padding-top:0 !important;
    padding-bottom:0 !important;
}
.footer-bottom small{
    color:#9ba8b7;
    font-size:13px;
}

@media(max-width:900px){
    .footer-benefits{
        grid-template-columns:repeat(2,1fr);
    }
    .footer-benefit:nth-child(2){border-right:0}
    .footer-benefit:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.09)}
    .footer-main{
        grid-template-columns:1fr 1fr;
        gap:34px;
    }
    .footer-brand{
        grid-column:1/-1;
    }
}

@media(max-width:700px){
    .footer-benefits{
        grid-template-columns:1fr 1fr;
    }
    .footer-benefit{
        min-height:92px;
        padding:16px 10px;
        gap:9px;
    }
    .footer-benefit>span{
        width:38px;
        height:38px;
        flex-basis:38px;
        font-size:18px;
    }
    .footer-benefit b{font-size:14px}
    .footer-benefit small{font-size:11px}
    .footer-main{
        grid-template-columns:1fr;
        gap:30px;
        padding-top:34px !important;
        padding-bottom:30px !important;
    }
    .footer-brand{
        grid-column:auto;
    }
    .footer-brand img{
        width:min(315px,100%) !important;
        margin-bottom:16px !important;
    }
    .footer-brand p{
        font-size:14px;
    }
    .footer-menu h3,
    .footer-contact h3{
        font-size:19px;
        margin-bottom:12px;
    }
    .footer-bottom{
        min-height:58px;
        margin-bottom:64px;
    }
}


/* =========================================================
   v1.0.92 — Footer logo size tuning
   Keep the same transparent logo; only reduce display size.
   ========================================================= */
.storefront .store-footer .footer-brand img{
    width:340px !important;
    max-width:100% !important;
    height:auto !important;
}

@media(max-width:900px){
    .storefront .store-footer .footer-brand img{
        width:300px !important;
    }
}

@media(max-width:700px){
    .storefront .store-footer .footer-brand img{
        width:260px !important;
    }
}


/* =========================================================
   v1.0.93 — Footer spacing / height final tuning
   Keep current visual design, logo size, colors and content.
   Only tighten spacing and rebalance the 3 columns.
   ========================================================= */
.storefront .store-footer .footer-main{
    grid-template-columns:minmax(340px,1.25fr) minmax(180px,.58fr) minmax(300px,.82fr) !important;
    gap:46px !important;
    padding-top:34px !important;
    padding-bottom:28px !important;
}

.storefront .store-footer .footer-brand img{
    margin-bottom:16px !important;
}

.storefront .store-footer .footer-brand p{
    line-height:1.55 !important;
}

.storefront .store-footer .footer-menu{
    gap:8px !important;
}

.storefront .store-footer .footer-menu h3,
.storefront .store-footer .footer-contact h3{
    margin-bottom:13px !important;
}

.storefront .store-footer .footer-contact{
    gap:9px !important;
}

.storefront .store-footer .footer-bottom{
    min-height:50px !important;
}

@media(max-width:900px){
    .storefront .store-footer .footer-main{
        gap:28px !important;
        padding-top:30px !important;
        padding-bottom:24px !important;
    }
}

@media(max-width:700px){
    .storefront .store-footer .footer-main{
        gap:24px !important;
        padding-top:28px !important;
        padding-bottom:22px !important;
    }
    .storefront .store-footer .footer-bottom{
        min-height:52px !important;
    }
}


/* =========================================================
   v1.0.94 — Header + Hero final tuning
   - reduce desktop header height
   - reduce hero headline ~9%
   - keep logo/search/nav structure and hero image unchanged
   ========================================================= */
@media(min-width:701px){
    .storefront .mainhead-inner{
        min-height:66px !important;
        grid-template-columns:250px minmax(360px,760px) 150px !important;
        gap:22px !important;
    }

    .storefront .store-logo{
        height:56px !important;
    }

    .storefront .store-search{
        height:40px !important;
    }

    .storefront .nav-inner{
        min-height:42px !important;
    }

    .storefront .nav-inner>a,
    .storefront .nav-cats>summary{
        min-height:42px !important;
        padding:0 18px !important;
        font-size:13.5px !important;
    }

    .storefront .home-hero,
    .storefront .hero-content{
        min-height:470px !important;
    }

    .storefront .hero-copy{
        width:min(650px,45vw) !important;
        padding:30px 0 !important;
    }

    .storefront .hero-copy h1{
        font-size:clamp(35px,3.05vw,51px) !important;
        line-height:1.12 !important;
    }

    .storefront .hero-sub{
        margin:14px 0 20px !important;
        font-size:17px !important;
    }

    .storefront .hero-points{
        gap:20px !important;
    }
}


/* =========================================================
   v1.0.95 — Hero supporting text readability tuning
   Keep main headline unchanged.
   Enlarge only secondary copy and hero benefit labels.
   ========================================================= */
@media(min-width:701px){
    .storefront .hero-sub{
        font-size:19px !important;
        line-height:1.52 !important;
    }

    .storefront .hero-points b{
        font-size:14px !important;
        line-height:1.35 !important;
    }

    .storefront .hero-points small{
        font-size:12px !important;
        line-height:1.35 !important;
    }

    .storefront .hero-points>div{
        column-gap:10px !important;
    }
}


/* =========================================================
   v1.0.96 — Hero rebuilt to approved B2 composition
   Warehouse hero image remains unchanged.
   ========================================================= */
.storefront .home-hero{
    position:relative;
    overflow:hidden;
    background:#05080b;
}
.storefront .hero-picture,
.storefront .hero-picture img,
.storefront .hero-shade{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}
.storefront .hero-picture img{
    display:block;
    object-fit:cover;
}
.storefront .hero-content{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
}
.storefront .hero-copy{
    position:relative;
    z-index:3;
}
.storefront .hero-eyebrow{
    color:#ef2330 !important;
}
.storefront .hero-dots{
    display:flex;
    align-items:center;
    gap:9px;
}
.storefront .hero-dots i{
    display:block;
    width:9px;
    height:9px;
    border-radius:50%;
    background:rgba(255,255,255,.42);
}
.storefront .hero-dots i.active{
    width:20px;
    border-radius:99px;
    background:#ef2330;
}

@media(min-width:701px){
    .storefront .home-hero,
    .storefront .hero-content{
        min-height:500px !important;
    }

    .storefront .hero-picture img{
        object-position:center center !important;
    }

    .storefront .hero-shade{
        background:
            linear-gradient(90deg,
                rgba(0,0,0,.96) 0%,
                rgba(0,0,0,.91) 22%,
                rgba(0,0,0,.68) 38%,
                rgba(0,0,0,.18) 58%,
                rgba(0,0,0,.02) 100%) !important;
    }

    .storefront .hero-copy{
        width:min(780px,50vw) !important;
        padding:36px 0 28px !important;
        transform:translateY(-8px);
    }

    .storefront .hero-eyebrow{
        margin:0 0 10px !important;
        font-size:12px !important;
        font-weight:700 !important;
        letter-spacing:.16em !important;
    }

    .storefront .hero-copy h1{
        margin:0 !important;
        font-size:clamp(39px,3.25vw,55px) !important;
        line-height:1.08 !important;
        letter-spacing:-.01em !important;
        max-width:720px;
    }

    .storefront .hero-copy h1 em{
        display:block !important;
        margin-top:6px !important;
        color:#ef2330 !important;
        font-style:normal !important;
    }

    .storefront .hero-sub{
        margin:16px 0 22px !important;
        font-size:20px !important;
        line-height:1.45 !important;
        color:#f1f3f5 !important;
    }

    .storefront .hero-points{
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:18px !important;
        width:min(760px,48vw);
        margin:0 !important;
    }

    .storefront .hero-point{
        display:grid !important;
        grid-template-columns:42px minmax(0,1fr) !important;
        align-items:center !important;
        gap:10px !important;
        min-width:0;
    }

    .storefront .hero-point>span{
        width:42px !important;
        height:42px !important;
        display:grid !important;
        place-items:center !important;
        flex:0 0 42px;
        border:1px solid rgba(255,255,255,.70) !important;
        border-radius:50% !important;
        background:rgba(4,8,12,.20) !important;
        color:#fff !important;
        font-size:18px !important;
        line-height:1 !important;
    }

    .storefront .hero-point b{
        display:block !important;
        margin:0 0 3px !important;
        color:#fff !important;
        font-size:13px !important;
        font-weight:600 !important;
        line-height:1.3 !important;
        white-space:normal;
    }

    .storefront .hero-point small{
        display:block !important;
        color:#d9dde2 !important;
        font-size:11px !important;
        line-height:1.3 !important;
    }

    .storefront .hero-dots{
        margin-top:24px !important;
        justify-content:center;
        width:min(760px,48vw);
    }
}

@media(max-width:700px){
    .storefront .home-hero,
    .storefront .hero-content{
        min-height:520px !important;
    }

    .storefront .hero-picture img{
        object-position:center bottom !important;
    }

    .storefront .hero-shade{
        background:
            linear-gradient(180deg,
                rgba(0,0,0,.94) 0%,
                rgba(0,0,0,.82) 30%,
                rgba(0,0,0,.44) 58%,
                rgba(0,0,0,.10) 80%,
                rgba(0,0,0,.18) 100%) !important;
    }

    .storefront .hero-content{
        align-items:flex-start !important;
    }

    .storefront .hero-copy{
        width:100% !important;
        padding:24px 3px 0 !important;
        transform:none !important;
    }

    .storefront .hero-eyebrow{
        font-size:10px !important;
        margin-bottom:7px !important;
    }

    .storefront .hero-copy h1{
        font-size:clamp(30px,8.7vw,39px) !important;
        line-height:1.10 !important;
        max-width:94%;
    }

    .storefront .hero-sub{
        margin:10px 0 15px !important;
        font-size:14px !important;
        line-height:1.42 !important;
    }

    .storefront .hero-points{
        display:grid !important;
        grid-template-columns:repeat(4,1fr) !important;
        gap:6px !important;
        width:100% !important;
    }

    .storefront .hero-point{
        display:flex !important;
        flex-direction:column;
        align-items:center !important;
        gap:5px !important;
        text-align:center;
        min-width:0;
    }

    .storefront .hero-point>span{
        width:32px !important;
        height:32px !important;
        flex-basis:32px !important;
        border:1px solid rgba(255,255,255,.68) !important;
        border-radius:50% !important;
        display:grid !important;
        place-items:center !important;
        font-size:14px !important;
    }

    .storefront .hero-point b{
        font-size:10px !important;
        line-height:1.2 !important;
        display:block !important;
    }

    .storefront .hero-point small{
        font-size:8.5px !important;
        line-height:1.15 !important;
        display:block !important;
    }

    .storefront .hero-dots{
        margin-top:16px !important;
        justify-content:center !important;
        width:100% !important;
        gap:7px !important;
    }

    .storefront .hero-dots i{
        width:7px;
        height:7px;
    }

    .storefront .hero-dots i.active{
        width:18px;
    }
}


/* =========================================================
   v1.0.97 — Hero final compact fix
   - Remove slider dots because Hero has only one image
   - Reduce unused bottom area
   - Keep B2 composition and 4 service points
   ========================================================= */
.storefront .hero-dots{
    display:none !important;
}

@media(min-width:701px){
    .storefront .home-hero,
    .storefront .hero-content{
        min-height:430px !important;
        height:430px !important;
    }

    .storefront .hero-content{
        align-items:center !important;
    }

    .storefront .hero-copy{
        width:min(760px,50vw) !important;
        padding:24px 0 18px !important;
        transform:translateY(-2px) !important;
    }

    .storefront .hero-copy h1{
        font-size:clamp(39px,3.2vw,54px) !important;
        line-height:1.08 !important;
    }

    .storefront .hero-sub{
        margin:13px 0 18px !important;
    }

    .storefront .hero-points{
        margin-bottom:0 !important;
    }

    .storefront .hero-picture img{
        object-position:center 52% !important;
    }
}

@media(max-width:700px){
    .storefront .home-hero,
    .storefront .hero-content{
        min-height:470px !important;
        height:470px !important;
    }

    .storefront .hero-copy{
        padding-top:20px !important;
    }
}


/* =========================================================
   v1.0.98 — Mobile Hero tuning
   Goal: clearer hierarchy, larger readable text, less cramped benefits,
   and less wasted image height while keeping the approved B2 look.
   ========================================================= */
@media(max-width:700px){

    /* Slightly shorter hero so categories appear sooner */
    .storefront .home-hero,
    .storefront .hero-content{
        min-height:430px !important;
        height:430px !important;
    }

    .storefront .hero-content{
        align-items:flex-start !important;
    }

    /* Keep the image lower/right, but reduce empty lower area */
    .storefront .hero-picture img{
        object-position:58% 72% !important;
    }

    /* Darker upper-left overlay for readable text without over-darkening product image */
    .storefront .hero-shade{
        background:
            linear-gradient(180deg,
                rgba(0,0,0,.97) 0%,
                rgba(0,0,0,.90) 28%,
                rgba(0,0,0,.58) 50%,
                rgba(0,0,0,.18) 72%,
                rgba(0,0,0,.08) 100%) !important;
    }

    .storefront .hero-copy{
        width:100% !important;
        max-width:none !important;
        padding:16px 0 0 !important;
        transform:none !important;
    }

    .storefront .hero-eyebrow{
        margin:0 0 6px !important;
        font-size:9.5px !important;
        letter-spacing:.12em !important;
    }

    .storefront .hero-copy h1{
        margin:0 !important;
        max-width:100% !important;
        font-size:clamp(27px,7.7vw,34px) !important;
        line-height:1.08 !important;
        letter-spacing:-.01em !important;
    }

    .storefront .hero-copy h1 em{
        margin-top:5px !important;
    }

    .storefront .hero-sub{
        margin:8px 0 11px !important;
        font-size:12.5px !important;
        line-height:1.35 !important;
        max-width:94% !important;
    }

    /* Benefits: 4 equal columns, larger labels, no tiny second line */
    .storefront .hero-points{
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:5px !important;
        width:100% !important;
        margin:0 !important;
    }

    .storefront .hero-point{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:4px !important;
        text-align:center !important;
        min-width:0 !important;
    }

    .storefront .hero-point>span{
        width:30px !important;
        height:30px !important;
        flex:0 0 30px !important;
        display:grid !important;
        place-items:center !important;
        border:1px solid rgba(255,255,255,.72) !important;
        border-radius:50% !important;
        font-size:13px !important;
        line-height:1 !important;
        background:rgba(0,0,0,.18) !important;
    }

    .storefront .hero-point b{
        display:block !important;
        font-size:9.5px !important;
        line-height:1.15 !important;
        font-weight:600 !important;
        white-space:normal !important;
        overflow-wrap:anywhere;
    }

    .storefront .hero-point small{
        display:none !important;
    }
}

/* Extra-tight phones */
@media(max-width:380px){
    .storefront .home-hero,
    .storefront .hero-content{
        min-height:410px !important;
        height:410px !important;
    }

    .storefront .hero-copy h1{
        font-size:26px !important;
    }

    .storefront .hero-sub{
        font-size:12px !important;
    }

    .storefront .hero-point b{
        font-size:9px !important;
    }
}


/* =========================================================
   v1.0.99 — Storefront switched to B1 visual direction
   Reference: approved B1 PC + Mobile mockup.
   Keep current real TEERA SERVICE logo and existing functionality.
   ========================================================= */

/* Overall B1 canvas */
.storefront{
    background:#fff !important;
}
.storefront .store-shell{
    width:min(calc(100% - 56px),1480px) !important;
}

/* Header: B1 proportions */
@media(min-width:701px){
    .storefront .store-topbar{
        background:#070b0f !important;
    }
    .storefront .topbar-inner{
        min-height:32px !important;
        font-size:12px !important;
    }
    .storefront .store-mainhead{
        background:linear-gradient(180deg,#111821 0%,#0d131a 100%) !important;
    }
    .storefront .mainhead-inner{
        min-height:82px !important;
        grid-template-columns:280px minmax(420px,760px) 170px !important;
        gap:26px !important;
    }
    .storefront .store-logo{
        width:255px !important;
        height:62px !important;
    }
    .storefront .store-search{
        height:44px !important;
        border-radius:4px !important;
    }
    .storefront .store-search button{
        min-width:92px !important;
        border-radius:0 4px 4px 0 !important;
        background:#ed1c24 !important;
    }
    .storefront nav.store-nav{
        background:#11171e !important;
        border-top:1px solid rgba(255,255,255,.05) !important;
        border-bottom:1px solid rgba(255,255,255,.05) !important;
    }
    .storefront .nav-inner{
        min-height:46px !important;
    }
    .storefront .nav-inner>a,
    .storefront .nav-cats>summary{
        min-height:46px !important;
        padding:0 22px !important;
        font-size:14px !important;
    }
    .storefront .nav-inner>a.active,
    .storefront .nav-inner>a:first-child{
        background:#ed1c24 !important;
    }
}

/* HERO — B1 */
.storefront .home-hero{
    background:#050709 !important;
}
@media(min-width:701px){
    .storefront .home-hero,
    .storefront .hero-content{
        height:360px !important;
        min-height:360px !important;
    }
    .storefront .hero-picture img{
        object-position:center 60% !important;
    }
    .storefront .hero-shade{
        background:
            linear-gradient(90deg,
                rgba(0,0,0,.97) 0%,
                rgba(0,0,0,.92) 24%,
                rgba(0,0,0,.70) 39%,
                rgba(0,0,0,.16) 58%,
                rgba(0,0,0,.02) 100%) !important;
    }
    .storefront .hero-copy{
        width:min(650px,46vw) !important;
        padding:26px 0 20px !important;
        transform:none !important;
    }
    .storefront .hero-eyebrow{
        display:none !important;
    }
    .storefront .hero-copy h1{
        max-width:630px !important;
        font-size:clamp(37px,3vw,50px) !important;
        line-height:1.07 !important;
        font-weight:700 !important;
    }
    .storefront .hero-copy h1 em{
        margin-top:5px !important;
    }
    .storefront .hero-sub{
        margin:12px 0 22px !important;
        font-size:18px !important;
        color:#f3f3f3 !important;
    }
    .storefront .hero-points{
        width:min(690px,48vw) !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:16px !important;
    }
    .storefront .hero-point{
        grid-template-columns:46px minmax(0,1fr) !important;
        gap:10px !important;
    }
    .storefront .hero-point>span{
        width:46px !important;
        height:46px !important;
        flex-basis:46px !important;
        font-size:18px !important;
        border:1.4px solid rgba(255,255,255,.82) !important;
    }
    .storefront .hero-point b{
        font-size:12px !important;
        line-height:1.25 !important;
    }
    .storefront .hero-point small{
        font-size:10px !important;
        line-height:1.2 !important;
    }
}

/* White content panel from B1 */
.storefront .store-section{
    padding:18px 0 !important;
    background:#fff !important;
}
.storefront .home-categories{
    padding-top:16px !important;
}
.storefront .store-section-head{
    margin-bottom:10px !important;
}
.storefront .store-section-head h2{
    font-size:19px !important;
    font-weight:600 !important;
}
.storefront .store-section-head a{
    color:#ed1c24 !important;
    font-size:13px !important;
}

/* Category row like B1 */
@media(min-width:701px){
    .storefront .category-grid{
        display:grid !important;
        grid-template-columns:repeat(10,minmax(0,1fr)) !important;
        gap:10px !important;
    }
    .storefront .category-card{
        min-width:0 !important;
        padding:8px 5px 10px !important;
        border:1px solid #e0e4e8 !important;
        border-radius:7px !important;
        background:#fff !important;
        box-shadow:none !important;
    }
    .storefront .category-image{
        height:78px !important;
    }
    .storefront .category-card b{
        font-size:12px !important;
    }
}

/* Brand row B1 */
@media(min-width:701px){
    .storefront .brand-grid{
        display:grid !important;
        grid-template-columns:repeat(10,minmax(0,1fr)) !important;
        gap:10px !important;
    }
    .storefront .brand-card{
        min-height:92px !important;
        padding:12px 8px !important;
        border:1px solid #e0e4e8 !important;
        border-radius:7px !important;
        background:#fff !important;
        box-shadow:none !important;
    .storefront .brand-card:hover{
        transform:translateY(-2px) !important;
    }
    }
    .storefront .brand-mark{
        min-height:38px !important;
        font-size:17px !important;
    }
    .storefront .brand-card b{
        font-size:12px !important;
    }
    .storefront .brand-card small{
        display:none !important;
    }
}


/* v1.0.597 — Volvo now uses the same normalized image asset sizing as other brand logos. */

/* Product cards B1 */
@media(min-width:701px){
    .storefront .home-product-row{
        display:grid !important;
        grid-template-columns:repeat(6,minmax(0,1fr)) !important;
        gap:12px !important;
        overflow:visible !important;
    }
    .storefront .store-product-card{
        min-width:0 !important;
        border:1px solid #e0e4e8 !important;
        border-radius:7px !important;
        box-shadow:none !important;
    }
    .storefront .product-card-image{
        aspect-ratio:1.35/1 !important;
    }
    .storefront .product-card-body{
        padding:10px !important;
    }
    .storefront .product-card-body h3{
        font-size:13px !important;
        line-height:1.25 !important;
    }
    .storefront .product-card-body p{
        font-size:11px !important;
    }
    .storefront .product-card-body strong{
        font-size:15px !important;
    }
}

/* Benefit bar immediately below products, B1 style */
.storefront .footer-benefits-wrap{
    background:linear-gradient(180deg,#111820 0%,#0b1117 100%) !important;
}
.storefront .footer-benefit{
    min-height:76px !important;
    padding:13px 20px !important;
}
.storefront .footer-benefit>span{
    width:39px !important;
    height:39px !important;
    flex-basis:39px !important;
}
.storefront .footer-benefit b{
    font-size:14px !important;
}
.storefront .footer-benefit small{
    font-size:11px !important;
}

/* Mobile B1 */
@media(max-width:700px){
    .storefront .store-shell{
        width:calc(100% - 20px) !important;
    }

    .storefront .mainhead-inner{
        min-height:112px !important;
        grid-template-columns:42px 1fr 42px !important;
        grid-template-rows:54px 46px !important;
        gap:6px 8px !important;
    }
    .storefront .store-logo{
        width:185px !important;
        height:45px !important;
    }
    .storefront .store-search{
        height:44px !important;
        border-radius:5px !important;
    }

    .storefront .home-hero,
    .storefront .hero-content{
        height:305px !important;
        min-height:305px !important;
    }
    .storefront .hero-picture img{
        object-position:55% 74% !important;
    }
    .storefront .hero-shade{
        background:
            linear-gradient(180deg,
                rgba(0,0,0,.95) 0%,
                rgba(0,0,0,.78) 34%,
                rgba(0,0,0,.30) 62%,
                rgba(0,0,0,.06) 100%) !important;
    }
    .storefront .hero-copy{
        padding:18px 2px 0 !important;
    }
    .storefront .hero-eyebrow{
        display:none !important;
    }
    .storefront .hero-copy h1{
        max-width:100% !important;
        font-size:28px !important;
        line-height:1.07 !important;
    }
    .storefront .hero-sub{
        margin:7px 0 10px !important;
        font-size:12px !important;
    }
    .storefront .hero-points{
        grid-template-columns:repeat(4,1fr) !important;
        gap:4px !important;
    }
    .storefront .hero-point{
        gap:3px !important;
    }
    .storefront .hero-point>span{
        width:29px !important;
        height:29px !important;
        flex-basis:29px !important;
        font-size:12px !important;
    }
    .storefront .hero-point b{
        font-size:8.7px !important;
        line-height:1.15 !important;
    }
    .storefront .hero-point small{
        display:block !important;
        font-size:7.5px !important;
        line-height:1.12 !important;
    }

    .storefront .store-section{
        padding:14px 0 !important;
    }
    .storefront .store-section-head h2{
        font-size:16px !important;
    }
    .storefront .store-section-head a{
        font-size:11px !important;
    }

    .storefront .category-grid{
        display:grid !important;
        grid-template-columns:repeat(4,1fr) !important;
        gap:6px !important;
    }
    .storefront .category-card{
        padding:6px 3px 7px !important;
        border-radius:6px !important;
    }
    .storefront .category-image{
        height:54px !important;
    }
    .storefront .category-card b{
        font-size:9px !important;
    }

    .storefront .home-brands{
        display:none !important;
    }

    .storefront .home-product-row{
        display:grid !important;
        grid-template-columns:repeat(3,1fr) !important;
        gap:7px !important;
        overflow:visible !important;
    }
    .storefront .product-card-body{
        padding:7px !important;
    }
    .storefront .product-card-body h3{
        font-size:9.5px !important;
    }
    .storefront .product-card-body p{
        font-size:8.5px !important;
    }
    .storefront .product-card-body strong{
        font-size:12px !important;
    }
    .storefront .stock{
        font-size:8px !important;
    }

    .storefront .footer-benefits-wrap{
        display:none !important;
    }
}


/* =========================================================
   v1.0.100 — Hero service benefits layout to match B1 reference
   Icon on top, centered text below, 4 equal columns.
   ========================================================= */
@media(min-width:701px){
    .storefront .hero-points{
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        width:min(700px,48vw) !important;
        gap:18px !important;
        margin-top:2px !important;
    }

    .storefront .hero-point{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:flex-start !important;
        text-align:center !important;
        gap:7px !important;
        min-width:0 !important;
    }

    .storefront .hero-point>span{
        width:42px !important;
        height:42px !important;
        flex:0 0 42px !important;
        display:grid !important;
        place-items:center !important;
        margin:0 auto !important;
        border:1.4px solid rgba(255,255,255,.82) !important;
        border-radius:50% !important;
        background:rgba(0,0,0,.10) !important;
        color:#fff !important;
        font-size:17px !important;
        line-height:1 !important;
    }

    .storefront .hero-point>div{
        width:100% !important;
        min-width:0 !important;
    }

    .storefront .hero-point b{
        display:block !important;
        margin:0 0 3px !important;
        color:#fff !important;
        font-size:12.5px !important;
        line-height:1.25 !important;
        font-weight:600 !important;
        white-space:normal !important;
    }

    .storefront .hero-point small{
        display:block !important;
        color:#f0f1f2 !important;
        font-size:10.5px !important;
        line-height:1.22 !important;
        white-space:normal !important;
    }
}

@media(max-width:700px){
    .storefront .hero-points{
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:5px !important;
        width:100% !important;
    }

    .storefront .hero-point{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:flex-start !important;
        text-align:center !important;
        gap:4px !important;
    }

    .storefront .hero-point>span{
        width:30px !important;
        height:30px !important;
        flex:0 0 30px !important;
        margin:0 auto !important;
    }

    .storefront .hero-point b{
        font-size:8.7px !important;
        line-height:1.15 !important;
        margin-bottom:2px !important;
    }

    .storefront .hero-point small{
        display:block !important;
        font-size:7.4px !important;
        line-height:1.12 !important;
    }
}


/* =========================================================
   v1.0.101 — Exact B1 upper storefront refinement
   Reference: user-approved B1 screenshot.
   No cart / no member system added.
   Existing TEERA SERVICE logo and real Hero photo are preserved.
   ========================================================= */

.storefront{
    background:#fff !important;
}
.storefront .store-shell{
    width:min(calc(100% - 72px),1440px) !important;
}

/* ---------- DESKTOP HEADER ---------- */
@media(min-width:701px){
    .storefront .store-topbar{
        height:34px !important;
        background:#05080b !important;
        border:0 !important;
    }
    .storefront .topbar-inner{
        min-height:34px !important;
        height:34px !important;
        font-size:12px !important;
    }

    .storefront .store-mainhead{
        background:linear-gradient(180deg,#111820 0%,#0d1319 100%) !important;
        border:0 !important;
    }
    .storefront .mainhead-inner{
        min-height:78px !important;
        height:78px !important;
        grid-template-columns:255px minmax(450px,720px) 160px !important;
        gap:30px !important;
        align-items:center !important;
    }
    .storefront .store-logo{
        width:240px !important;
        height:58px !important;
    }
    .storefront .store-search{
        height:42px !important;
        border-radius:4px !important;
    }
    .storefront .store-search input{
        font-size:13px !important;
    }
    .storefront .store-search button{
        min-width:88px !important;
        font-size:14px !important;
        border-radius:0 4px 4px 0 !important;
    }
    .storefront .header-contact{
        font-size:15px !important;
        justify-self:end !important;
    }

    .storefront nav.store-nav{
        background:#10161c !important;
        border-top:1px solid rgba(255,255,255,.06) !important;
        border-bottom:1px solid rgba(255,255,255,.07) !important;
    }
    .storefront .nav-inner{
        min-height:46px !important;
        height:46px !important;
        gap:0 !important;
    }
    .storefront .nav-inner>a,
    .storefront .nav-cats>summary{
        min-height:46px !important;
        height:46px !important;
        padding:0 24px !important;
        font-size:13.5px !important;
        font-weight:500 !important;
    }
    .storefront .nav-inner>a:first-child,
    .storefront .nav-inner>a.active{
        background:#e51d27 !important;
    }
}

/* ---------- DESKTOP HERO: match B1 ---------- */
@media(min-width:701px){
    .storefront .home-hero,
    .storefront .hero-content{
        height:286px !important;
        min-height:286px !important;
    }
    .storefront .hero-picture img{
        object-fit:cover !important;
        object-position:center 64% !important;
    }
    .storefront .hero-shade{
        background:
            linear-gradient(90deg,
                rgba(0,0,0,.98) 0%,
                rgba(0,0,0,.94) 22%,
                rgba(0,0,0,.78) 37%,
                rgba(0,0,0,.28) 54%,
                rgba(0,0,0,.03) 70%,
                rgba(0,0,0,0) 100%) !important;
    }
    .storefront .hero-content{
        align-items:center !important;
    }
    .storefront .hero-copy{
        width:min(690px,49vw) !important;
        padding:14px 0 10px !important;
        transform:none !important;
    }
    .storefront .hero-copy h1{
        margin:0 !important;
        max-width:620px !important;
        font-size:clamp(35px,2.85vw,46px) !important;
        line-height:1.04 !important;
        font-weight:700 !important;
        letter-spacing:-.015em !important;
    }
    .storefront .hero-copy h1 em{
        display:block !important;
        margin-top:5px !important;
        color:#ef2631 !important;
        font-style:normal !important;
    }
    .storefront .hero-sub{
        margin:11px 0 23px !important;
        font-size:17px !important;
        line-height:1.35 !important;
        color:#f5f5f5 !important;
    }

    /* Icon above text, exactly like approved reference */
    .storefront .hero-points{
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        width:min(640px,46vw) !important;
        gap:0 !important;
        margin:0 !important;
        align-items:start !important;
    }
    .storefront .hero-point{
        position:relative !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:flex-start !important;
        text-align:center !important;
        gap:6px !important;
        padding:0 14px !important;
        min-width:0 !important;
    }
    .storefront .hero-point:not(:last-child)::after{
        content:"";
        position:absolute;
        right:0;
        top:6px;
        width:1px;
        height:65px;
        background:rgba(255,255,255,.15);
    }
    .storefront .hero-point>span{
        width:38px !important;
        height:38px !important;
        flex:0 0 38px !important;
        display:grid !important;
        place-items:center !important;
        margin:0 auto !important;
        border:1.4px solid rgba(255,255,255,.92) !important;
        border-radius:50% !important;
        background:transparent !important;
        color:#fff !important;
        font-size:16px !important;
        line-height:1 !important;
    }
    .storefront .hero-point>div{
        width:100% !important;
    }
    .storefront .hero-point b{
        display:block !important;
        margin:0 0 3px !important;
        font-size:11.5px !important;
        line-height:1.22 !important;
        font-weight:600 !important;
        color:#fff !important;
    }
    .storefront .hero-point small{
        display:block !important;
        font-size:10px !important;
        line-height:1.2 !important;
        color:#f4f4f4 !important;
    }
}

/* ---------- MOBILE HEADER ---------- */
@media(max-width:700px){
    .storefront .store-shell{
        width:calc(100% - 20px) !important;
    }
    .storefront .store-topbar{
        display:none !important;
    }
    .storefront .store-mainhead{
        background:#0b1016 !important;
    }
    .storefront .mainhead-inner{
        min-height:104px !important;
        height:104px !important;
        grid-template-columns:40px 1fr 40px !important;
        grid-template-rows:52px 44px !important;
        gap:4px 8px !important;
    }
    .storefront .store-logo{
        width:185px !important;
        height:44px !important;
        justify-self:center !important;
    }
    .storefront .mobile-menu-button{
        font-size:25px !important;
    }
    .storefront .header-contact{
        width:40px !important;
        height:40px !important;
        padding:0 !important;
        justify-content:center !important;
    }
    .storefront .header-contact b{
        display:none !important;
    }
    .storefront .store-search{
        height:42px !important;
        border-radius:4px !important;
    }
    .storefront .store-search input{
        font-size:11px !important;
        padding-right:4px !important;
    }
    .storefront .store-search button{
        min-width:58px !important;
        padding:0 10px !important;
        font-size:12px !important;
    }
}

/* ---------- MOBILE HERO: same B1 composition ---------- */
@media(max-width:700px){
    .storefront .home-hero,
    .storefront .hero-content{
        height:306px !important;
        min-height:306px !important;
    }
    .storefront .hero-picture img{
        object-fit:cover !important;
        object-position:58% 72% !important;
    }
    .storefront .hero-shade{
        background:
            linear-gradient(180deg,
                rgba(0,0,0,.96) 0%,
                rgba(0,0,0,.86) 29%,
                rgba(0,0,0,.46) 53%,
                rgba(0,0,0,.12) 77%,
                rgba(0,0,0,.04) 100%) !important;
    }
    .storefront .hero-content{
        align-items:flex-start !important;
    }
    .storefront .hero-copy{
        width:100% !important;
        padding:17px 1px 0 !important;
        transform:none !important;
    }
    .storefront .hero-copy h1{
        max-width:100% !important;
        font-size:27px !important;
        line-height:1.06 !important;
    }
    .storefront .hero-copy h1 em{
        margin-top:3px !important;
    }
    .storefront .hero-sub{
        margin:7px 0 12px !important;
        font-size:11.8px !important;
        line-height:1.3 !important;
    }
    .storefront .hero-points{
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        width:100% !important;
        gap:0 !important;
        margin:0 !important;
    }
    .storefront .hero-point{
        position:relative !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:4px !important;
        padding:0 3px !important;
        text-align:center !important;
    }
    .storefront .hero-point:not(:last-child)::after{
        content:"";
        position:absolute;
        right:0;
        top:4px;
        width:1px;
        height:48px;
        background:rgba(255,255,255,.14);
    }
    .storefront .hero-point>span{
        width:28px !important;
        height:28px !important;
        flex:0 0 28px !important;
        border:1.2px solid rgba(255,255,255,.92) !important;
        border-radius:50% !important;
        display:grid !important;
        place-items:center !important;
        font-size:12px !important;
    }
    .storefront .hero-point b{
        display:block !important;
        font-size:8.3px !important;
        line-height:1.12 !important;
        margin-bottom:2px !important;
    }
    .storefront .hero-point small{
        display:block !important;
        font-size:7.2px !important;
        line-height:1.1 !important;
    }
}

/* Very small phones */
@media(max-width:380px){
    .storefront .hero-copy h1{
        font-size:25px !important;
    }
    .storefront .hero-sub{
        font-size:11px !important;
    }
    .storefront .hero-point b{
        font-size:7.9px !important;
    }
    .storefront .hero-point small{
        font-size:6.8px !important;
    }
}


/* =========================================================
   v1.0.102 — Hero service icons to match B1 reference
   ========================================================= */
.storefront .hero-service-icon{
    display:block !important;
    width:48px !important;
    height:48px !important;
    flex:0 0 48px !important;
    margin:0 auto 3px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:#fff !important;
}
.storefront .hero-service-icon svg{
    display:block;
    width:100%;
    height:100%;
    fill:none;
    stroke:currentColor;
    stroke-width:2.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.storefront .hero-point>span.hero-service-icon{
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    font-size:0 !important;
}

@media(min-width:701px){
    .storefront .hero-points{
        width:min(660px,47vw) !important;
    }
    .storefront .hero-point{
        gap:4px !important;
        padding:0 16px !important;
    }
    .storefront .hero-service-icon{
        width:46px !important;
        height:46px !important;
        flex-basis:46px !important;
    }
    .storefront .hero-point:not(:last-child)::after{
        top:3px !important;
        height:76px !important;
        background:rgba(255,255,255,.14) !important;
    }
    .storefront .hero-point b{
        font-size:12px !important;
        margin-bottom:3px !important;
    }
    .storefront .hero-point small{
        font-size:10.5px !important;
    }
}

@media(max-width:700px){
    .storefront .hero-service-icon{
        width:31px !important;
        height:31px !important;
        flex-basis:31px !important;
        margin-bottom:2px !important;
    }
    .storefront .hero-service-icon svg{
        stroke-width:2.8;
    }
    .storefront .hero-point:not(:last-child)::after{
        top:1px !important;
        height:54px !important;
    }
}


/* =========================================================
   v1.0.103 — Desktop Hero height match to B1 reference
   Increase only the desktop Hero canvas height.
   ========================================================= */
@media(min-width:701px){
    .storefront .home-hero,
    .storefront .hero-content{
        height:360px !important;
        min-height:360px !important;
    }

    .storefront .hero-content{
        align-items:center !important;
    }

    .storefront .hero-copy{
        padding:22px 0 18px !important;
        transform:none !important;
    }

    /* Show a little more of the warehouse/parts image vertically */
    .storefront .hero-picture img{
        object-position:center 58% !important;
    }
}


/* =========================================================
   v1.0.106 — Hero image breathing-room tuning
   Keep the exact same Hero image; only change how it is framed.
   ========================================================= */
@media(min-width:701px){
    .storefront .home-hero{
        overflow:hidden !important;
        background:#050708 !important;
    }
    .storefront .hero-picture{
        inset:0 !important;
        overflow:hidden !important;
        background:#050708 !important;
    }
    .storefront .hero-picture img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        object-position:47% 54% !important;
        transform:scale(.94) !important;
        transform-origin:56% 56% !important;
    }
    .storefront .hero-shade{
        background:
            linear-gradient(90deg,
                rgba(0,0,0,.98) 0%,
                rgba(0,0,0,.93) 22%,
                rgba(0,0,0,.72) 37%,
                rgba(0,0,0,.20) 53%,
                rgba(0,0,0,.03) 67%,
                rgba(0,0,0,0) 100%) !important;
    }
}
@media(max-width:700px){
    .storefront .hero-picture img{
        object-fit:cover !important;
        object-position:53% 66% !important;
        transform:scale(.96) !important;
        transform-origin:56% 64% !important;
    }
}


/* =========================================================
   v1.0.107 — Hero image fitted to the actual website frame
   IMPORTANT:
   - Keep the existing Hero image file unchanged.
   - Do not zoom the image.
   - Give the parts their own right-side image area.
   - Left side remains dark for the headline and service icons.
   ========================================================= */

@media(min-width:701px){
    .storefront .home-hero{
        position:relative !important;
        overflow:hidden !important;
        background:#030506 !important;
    }

    .storefront .hero-picture{
        position:absolute !important;
        inset:0 !important;
        overflow:hidden !important;
        background:#030506 !important;
    }

    /* The original PC image is 1983×793 (~2.50:1).
       Instead of forcing it to cover the whole ultra-wide Hero,
       reserve the right ~55% for the image. This keeps the parts
       visually complete and prevents them from pressing the frame. */
    .storefront .hero-picture img{
        position:absolute !important;
        top:0 !important;
        right:0 !important;
        left:auto !important;
        bottom:auto !important;

        width:55% !important;
        height:100% !important;

        object-fit:cover !important;
        object-position:center center !important;

        transform:none !important;
        transform-origin:center center !important;
    }

    /* Blend the left edge of the real photo into the black text area. */
    .storefront .hero-picture::after{
        content:"" !important;
        position:absolute !important;
        inset:0 !important;
        pointer-events:none !important;
        background:
            linear-gradient(90deg,
                #030506 0%,
                #030506 35%,
                rgba(3,5,6,.96) 40%,
                rgba(3,5,6,.72) 45%,
                rgba(3,5,6,.24) 51%,
                rgba(3,5,6,0) 58%) !important;
    }

    /* Keep text readable without darkening the parts too much. */
    .storefront .hero-shade{
        background:
            linear-gradient(90deg,
                rgba(0,0,0,.82) 0%,
                rgba(0,0,0,.62) 34%,
                rgba(0,0,0,.18) 47%,
                rgba(0,0,0,0) 60%) !important;
    }
}

/* Mobile keeps the dedicated portrait Hero image.
   Remove the previous zoom so the mobile image is not artificially enlarged. */
@media(max-width:700px){
    .storefront .hero-picture img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        object-position:52% 64% !important;
        transform:none !important;
        transform-origin:center center !important;
    }
}


/* =========================================================
   v1.0.108 — Hero parts scale / framing refinement
   Goal: larger than v1.0.107, but still with breathing room
   like the approved reference.
   ========================================================= */

@media(min-width:701px){
    .storefront .hero-picture img{
        top:0 !important;
        right:0 !important;
        left:auto !important;

        /* Increase from 55% to 66% so the parts become larger
           and move visually closer to center, without zoom transform. */
        width:66% !important;
        height:100% !important;

        object-fit:cover !important;
        object-position:52% 56% !important;

        transform:none !important;
        transform-origin:center center !important;
    }

    /* Soften the blend between left black copy area and the larger image. */
    .storefront .hero-picture::after{
        content:"" !important;
        position:absolute !important;
        inset:0 !important;
        pointer-events:none !important;
        background:
            linear-gradient(90deg,
                #030506 0%,
                #030506 30%,
                rgba(3,5,6,.97) 35%,
                rgba(3,5,6,.78) 40%,
                rgba(3,5,6,.36) 46%,
                rgba(3,5,6,.08) 52%,
                rgba(3,5,6,0) 58%) !important;
    }

    .storefront .hero-shade{
        background:
            linear-gradient(90deg,
                rgba(0,0,0,.80) 0%,
                rgba(0,0,0,.58) 31%,
                rgba(0,0,0,.20) 43%,
                rgba(0,0,0,0) 55%) !important;
    }
}

/* Mobile: slightly larger than v1.0.107 without artificial zoom */
@media(max-width:700px){
    .storefront .hero-picture img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        object-position:56% 66% !important;
        transform:none !important;
    }
}


/* =========================================================
   v1.0.109 — Hero full-image fade refinement
   Keep the same Hero image and current size.
   The image now spans the Hero area; the left side fades
   gradually darker instead of looking like a separate column.
   ========================================================= */

@media(min-width:701px){
    .storefront .home-hero{
        position:relative !important;
        overflow:hidden !important;
        background:#030506 !important;
    }

    .storefront .hero-picture{
        position:absolute !important;
        inset:0 !important;
        overflow:hidden !important;
        background:#030506 !important;
    }

    /* Use the actual image across the full Hero.
       No separate right-side image column. */
    .storefront .hero-picture img{
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;

        object-fit:cover !important;
        object-position:center 58% !important;

        transform:none !important;
        transform-origin:center center !important;
    }

    /* Remove the previous hard two-column blend. */
    .storefront .hero-picture::after{
        content:"" !important;
        position:absolute !important;
        inset:0 !important;
        pointer-events:none !important;

        /* Smooth fade: image detail remains visible underneath,
           then gradually darkens toward the far left. */
        background:
            linear-gradient(90deg,
                rgba(2,4,5,.96) 0%,
                rgba(2,4,5,.90) 10%,
                rgba(2,4,5,.78) 20%,
                rgba(2,4,5,.60) 30%,
                rgba(2,4,5,.40) 39%,
                rgba(2,4,5,.22) 47%,
                rgba(2,4,5,.10) 54%,
                rgba(2,4,5,.03) 60%,
                rgba(2,4,5,0) 68%) !important;
    }

    /* Very light extra shade only for text readability. */
    .storefront .hero-shade{
        background:
            linear-gradient(90deg,
                rgba(0,0,0,.26) 0%,
                rgba(0,0,0,.18) 26%,
                rgba(0,0,0,.08) 42%,
                rgba(0,0,0,0) 58%) !important;
    }
}

/* Mobile: same principle, image remains continuous behind text. */
@media(max-width:700px){
    .storefront .hero-picture img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        object-position:56% 66% !important;
        transform:none !important;
    }

    .storefront .hero-picture::after{
        content:"" !important;
        position:absolute !important;
        inset:0 !important;
        pointer-events:none !important;
        background:
            linear-gradient(180deg,
                rgba(2,4,5,.82) 0%,
                rgba(2,4,5,.62) 24%,
                rgba(2,4,5,.34) 44%,
                rgba(2,4,5,.12) 60%,
                rgba(2,4,5,0) 76%) !important;
    }
}


/* =========================================================
   v1.0.110 — Hero parts breathing-room fine tuning
   Keep the current full-image fade exactly as-is.
   Pull the Hero photo back only slightly so the parts do not
   feel pressed against the bottom/right edge.
   ========================================================= */

@media(min-width:701px){
    .storefront .hero-picture{
        /* Same photo sits underneath only to fill the very small edge
           revealed by the subtle pull-back; visually this remains one image. */
        background-image:url('../images/hero-pc.jpg') !important;
        background-size:cover !important;
        background-position:center 58% !important;
        background-repeat:no-repeat !important;
    }

    .storefront .hero-picture img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        object-position:center 56% !important;

        /* Very small pull-back from v1.0.109 */
        transform:scale(.965) !important;
        transform-origin:58% 58% !important;
    }

    /* Fade remains continuous across the real image. */
    .storefront .hero-picture::after{
        background:
            linear-gradient(90deg,
                rgba(2,4,5,.96) 0%,
                rgba(2,4,5,.90) 10%,
                rgba(2,4,5,.78) 20%,
                rgba(2,4,5,.60) 30%,
                rgba(2,4,5,.40) 39%,
                rgba(2,4,5,.22) 47%,
                rgba(2,4,5,.10) 54%,
                rgba(2,4,5,.03) 60%,
                rgba(2,4,5,0) 68%) !important;
    }
}

/* Mobile: keep current framing; no extra zoom-out yet. */
@media(max-width:700px){
    .storefront .hero-picture img{
        transform:none !important;
    }
}


/* =========================================================
   v1.0.111 — Hero pull-back one more step
   Only pull the desktop Hero image back a little more.
   Keep all fade / layout / text exactly the same.
   ========================================================= */
@media(min-width:701px){
    .storefront .hero-picture img{
        transform:scale(.945) !important;
        transform-origin:58% 58% !important;
    }
}


/* =========================================================
   v1.0.112 — Hero pull-back that is visibly effective
   Previous scale was visually masked by the duplicated background image.
   This version removes that masking and truly reduces the displayed photo.
   ========================================================= */
@media(min-width:701px){
    .storefront .hero-picture{
        background:#030506 !important;
        background-image:none !important;
    }

    .storefront .hero-picture img{
        position:absolute !important;
        top:50% !important;
        right:0 !important;
        left:auto !important;
        bottom:auto !important;

        /* Show the source photo narrower so the parts are genuinely smaller */
        width:90% !important;
        height:auto !important;
        max-width:none !important;

        object-fit:initial !important;
        object-position:initial !important;

        transform:translateY(-50%) !important;
        transform-origin:center center !important;
    }

    /* Keep the smooth fade from the previous version */
    .storefront .hero-picture::after{
        background:
            linear-gradient(90deg,
                rgba(2,4,5,.96) 0%,
                rgba(2,4,5,.90) 10%,
                rgba(2,4,5,.78) 20%,
                rgba(2,4,5,.60) 30%,
                rgba(2,4,5,.40) 39%,
                rgba(2,4,5,.22) 47%,
                rgba(2,4,5,.10) 54%,
                rgba(2,4,5,.03) 60%,
                rgba(2,4,5,0) 68%) !important;
    }
}

/* Mobile remains unchanged */
@media(max-width:700px){
    .storefront .hero-picture img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        object-position:56% 66% !important;
        transform:none !important;
    }
}


/* =========================================================
   v1.0.113 — Rounded red buttons
   Make all storefront red action buttons feel softer and more premium.
   ========================================================= */

/* Main navigation active/red button */
.storefront .nav-inner>a.active,
.storefront .nav-inner>a:first-child{
    border-radius:8px !important;
    overflow:hidden !important;
}

/* Search red button */
.storefront .store-search button{
    border-radius:0 8px 8px 0 !important;
}

/* Generic red buttons / CTA buttons used on storefront */
.storefront button,
.storefront .btn,
.storefront .button,
.storefront a.btn,
.storefront a.button{
    transition:border-radius .18s ease, transform .18s ease, opacity .18s ease;
}

.storefront .btn-primary,
.storefront .button-primary,
.storefront .red-button,
.storefront .cta-button,
.storefront .product-action,
.storefront .load-more,
.storefront button[type="submit"]{
    border-radius:8px !important;
}

/* Keep compact mobile proportions */
@media(max-width:700px){
    .storefront .nav-inner>a.active,
    .storefront .nav-inner>a:first-child{
        border-radius:7px !important;
    }

    .storefront .store-search button{
        border-radius:0 7px 7px 0 !important;
    }

    .storefront .btn-primary,
    .storefront .button-primary,
    .storefront .red-button,
    .storefront .cta-button,
    .storefront .product-action,
    .storefront .load-more,
    .storefront button[type="submit"]{
        border-radius:7px !important;
    }
}


/* =========================================================
   v1.0.114 — Search button icon-only
   Right corners rounded only; left corners stay square.
   ========================================================= */

.storefront .store-search button{
    position:relative !important;
    min-width:64px !important;
    width:64px !important;
    padding:0 !important;

    border-radius:0 8px 8px 0 !important;
    display:grid !important;
    place-items:center !important;
    font-size:0 !important;
}

.storefront .store-search button .search-icon{
    display:block !important;
    width:21px !important;
    height:21px !important;
    border:3px solid #fff !important;
    border-radius:50% !important;
    position:relative !important;
    box-sizing:border-box !important;
}

.storefront .store-search button .search-icon::after{
    content:"" !important;
    position:absolute !important;
    width:10px !important;
    height:3px !important;
    background:#fff !important;
    right:-8px !important;
    bottom:-4px !important;
    border-radius:2px !important;
    transform:rotate(45deg) !important;
    transform-origin:left center !important;
}

.storefront .sr-only{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0,0,0,0) !important;
    white-space:nowrap !important;
    border:0 !important;
}

@media(max-width:700px){
    .storefront .store-search button{
        min-width:56px !important;
        width:56px !important;
        border-radius:0 7px 7px 0 !important;
    }
    .storefront .store-search button .search-icon{
        width:19px !important;
        height:19px !important;
        border-width:2.5px !important;
    }
}


/* =========================================================
   v1.0.115 — Restore search text + clean rounded right edge
   Left magnifier inside the search field remains.
   ========================================================= */

.storefront .store-search{
    overflow:hidden !important;
    background:transparent !important;
    border-radius:8px !important;
}

.storefront .store-search button{
    min-width:88px !important;
    width:auto !important;
    padding:0 22px !important;

    /* Left side square, only right side rounded */
    border-radius:0 8px 8px 0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    font-size:14px !important;
    font-family:"Kanit",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif !important;
    font-weight:600 !important;
    color:#fff !important;
    background:#ed1c24 !important;
}

/* Remove the duplicate magnifier previously added inside the button. */
.storefront .store-search button .search-icon,
.storefront .store-search button .search-icon::after{
    display:none !important;
    content:none !important;
}

/* Ensure no white parent background leaks through rounded right corners. */
.storefront .store-search input{
    border-radius:0 !important;
}
.storefront .store-search button{
    overflow:hidden !important;
}

@media(max-width:700px){
    .storefront .store-search{
        border-radius:7px !important;
    }
    .storefront .store-search button{
        min-width:62px !important;
        padding:0 14px !important;
        border-radius:0 7px 7px 0 !important;
        font-size:12px !important;
    }
}


/* =========================================================
   v1.0.116 — Search magnifier inside white field
   Move the existing left magnifier into the input area.
   ========================================================= */

.storefront .store-search{
    position:relative !important;
    display:flex !important;
    align-items:stretch !important;
    overflow:hidden !important;
    background:#fff !important;
    border-radius:8px !important;
}

/* Existing magnifier element/icon on the left */
.storefront .store-search > svg,
.storefront .store-search > i,
.storefront .store-search > .search-leading-icon,
.storefront .store-search > .search-icon-left{
    position:absolute !important;
    left:14px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    z-index:3 !important;
    pointer-events:none !important;
    color:#66717d !important;
}

/* If the current icon is generated by ::before on the form/search wrapper */
.storefront .store-search::before{
    position:absolute !important;
    left:14px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    z-index:3 !important;
    pointer-events:none !important;
}

/* White input extends beneath the magnifier; add left padding for it */
.storefront .store-search input{
    flex:1 1 auto !important;
    min-width:0 !important;
    height:100% !important;
    padding-left:48px !important;
    background:#fff !important;
    border-radius:0 !important;
}

/* Keep red search button unchanged: square left, rounded right */
.storefront .store-search button{
    flex:0 0 auto !important;
    border-radius:0 8px 8px 0 !important;
}

/* Hide any legacy magnifier that sits outside the search container */
.storefront .mainhead-inner > .search-icon,
.storefront .mainhead-inner > .search-leading-icon{
    display:none !important;
}

@media(max-width:700px){
    .storefront .store-search{
        border-radius:7px !important;
    }
    .storefront .store-search input{
        padding-left:42px !important;
    }
    .storefront .store-search > svg,
    .storefront .store-search > i,
    .storefront .store-search > .search-leading-icon,
    .storefront .store-search > .search-icon-left,
    .storefront .store-search::before{
        left:12px !important;
    }
    .storefront .store-search button{
        border-radius:0 7px 7px 0 !important;
    }
}


/* =========================================================
   v1.0.117 — Search icon/text spacing refinement
   Reduce the gap between the magnifier and typed text.
   ========================================================= */
@media(min-width:701px){
    .storefront .store-search input{
        padding-left:38px !important;
    }
}

@media(max-width:700px){
    .storefront .store-search input{
        padding-left:36px !important;
    }
}


/* v1.0.118 — Search text spacing: 20px */
.storefront .store-search input{
    padding-left:20px !important;
}


/* =========================================================
   v1.0.119 — Rounded navigation buttons
   Keep user's search input spacing baseline at 5px.
   ========================================================= */

/* User-selected search spacing baseline */
.storefront .store-search input{
    padding-left:5px !important;
}

/* Every desktop navigation item gets rounded corners in all states */
@media(min-width:701px){
    .storefront .nav-inner > a,
    .storefront .nav-cats > summary{
        border-radius:8px !important;
        overflow:hidden !important;
        margin:0 2px !important;
    }

    .storefront .nav-inner > a:hover,
    .storefront .nav-inner > a:focus-visible,
    .storefront .nav-cats > summary:hover,
    .storefront .nav-cats > summary:focus-visible,
    .storefront .nav-inner > a.active,
    .storefront .nav-inner > a:first-child{
        border-radius:8px !important;
    }
}

/* Mobile uses slightly tighter rounding */
@media(max-width:700px){
    .storefront .nav-inner > a,
    .storefront .nav-cats > summary{
        border-radius:7px !important;
        overflow:hidden !important;
    }

    .storefront .nav-inner > a:hover,
    .storefront .nav-inner > a:focus-visible,
    .storefront .nav-cats > summary:hover,
    .storefront .nav-cats > summary:focus-visible,
    .storefront .nav-inner > a.active,
    .storefront .nav-inner > a:first-child{
        border-radius:7px !important;
    }
}


/* =========================================================
   v1.0.120 — Fix sharp corners on "หมวดหมู่สินค้า"
   The red hover background was being painted by the dropdown wrapper,
   so rounding only <summary> was not enough.
   ========================================================= */

/* Keep user-selected search spacing */
.storefront .store-search input{
    padding-left:5px !important;
}

@media(min-width:701px){
    /* Normal nav links */
    .storefront .nav-inner > a{
        border-radius:8px !important;
        overflow:hidden !important;
    }

    /* Category dropdown: round BOTH wrapper and summary */
    .storefront .nav-cats{
        border-radius:8px !important;
        overflow:hidden !important;
    }

    .storefront .nav-cats > summary{
        border-radius:8px !important;
        overflow:hidden !important;
        background-clip:padding-box !important;
    }

    .storefront .nav-cats:hover,
    .storefront .nav-cats:focus-within,
    .storefront .nav-cats[open],
    .storefront .nav-cats:hover > summary,
    .storefront .nav-cats:focus-within > summary,
    .storefront .nav-cats[open] > summary{
        border-radius:8px !important;
        overflow:hidden !important;
    }
}

@media(max-width:700px){
    .storefront .nav-inner > a,
    .storefront .nav-cats,
    .storefront .nav-cats > summary,
    .storefront .nav-cats:hover,
    .storefront .nav-cats:focus-within,
    .storefront .nav-cats[open],
    .storefront .nav-cats:hover > summary,
    .storefront .nav-cats:focus-within > summary,
    .storefront .nav-cats[open] > summary{
        border-radius:7px !important;
        overflow:hidden !important;
    }
}


/* =========================================================
   v1.0.121 — Navigation states
   Normal = dark
   Hover/focus = slate blue-gray
   Current page = red
   All states keep the same rounded corners.
   ========================================================= */

/* Preserve user's search spacing baseline */
.storefront .store-search input{
    padding-left:5px !important;
}

@media(min-width:701px){
    /* NORMAL */
    .storefront .nav-inner > a,
    .storefront .nav-cats,
    .storefront .nav-cats > summary{
        border-radius:8px !important;
    }

    .storefront .nav-inner > a,
    .storefront .nav-cats > summary{
        background:transparent !important;
        color:#fff !important;
        transition:background-color .16s ease, color .16s ease !important;
    }

    /* IMPORTANT: remove the old rule that made first-child red forever */
    .storefront .nav-inner > a:first-child{
        background:transparent !important;
    }

    /* HOVER / KEYBOARD FOCUS — intentionally NOT red */
    .storefront .nav-inner > a:hover,
    .storefront .nav-inner > a:focus-visible,
    .storefront .nav-cats:hover > summary,
    .storefront .nav-cats:focus-within > summary{
        background:#263440 !important;
        color:#fff !important;
        border-radius:8px !important;
    }

    /* ACTIVE / CURRENT PAGE — red always wins over hover */
    .storefront .nav-inner > a.active,
    .storefront .nav-inner > a.active:hover,
    .storefront .nav-inner > a.active:focus-visible,
    .storefront .nav-cats.active > summary,
    .storefront .nav-cats.active:hover > summary,
    .storefront .nav-cats.active:focus-within > summary{
        background:#ed1c24 !important;
        color:#fff !important;
        border-radius:8px !important;
    }

    .storefront .nav-cats{
        overflow:visible !important;
    }
    .storefront .nav-cats > summary{
        overflow:hidden !important;
    }
}

/* Mobile drawer follows the same meaning */
@media(max-width:700px){
    .storefront .mobile-drawer > a{
        border-radius:7px !important;
        transition:background-color .16s ease !important;
    }

    .storefront .mobile-drawer > a:hover,
    .storefront .mobile-drawer > a:focus-visible{
        background:#263440 !important;
        color:#fff !important;
    }

    .storefront .mobile-drawer > a.active,
    .storefront .mobile-drawer > a.active:hover{
        background:#ed1c24 !important;
        color:#fff !important;
    }
}


/* =========================================================
   v1.0.122 — FINAL nav-state override
   Fixes legacy rules that were still painting hover red
   and square corners.
   ========================================================= */

/* Keep user's search spacing baseline */
.storefront .store-search input{
    padding-left:5px !important;
}

@media(min-width:701px){

    /* Base geometry for every nav item */
    .storefront .store-nav .nav-inner > a,
    .storefront .store-nav .nav-inner > .nav-cats,
    .storefront .store-nav .nav-inner > .nav-cats > summary{
        border-radius:9px !important;
        overflow:hidden !important;
        box-sizing:border-box !important;
    }

    /* NORMAL */
    .storefront .store-nav .nav-inner > a,
    .storefront .store-nav .nav-inner > .nav-cats > summary{
        background:#10161c !important;
        color:#fff !important;
    }

    /* HOVER / FOCUS = slate blue-gray, NOT red */
    .storefront .store-nav .nav-inner > a:not(.active):hover,
    .storefront .store-nav .nav-inner > a:not(.active):focus-visible,
    .storefront .store-nav .nav-inner > .nav-cats:not(.active):hover > summary,
    .storefront .store-nav .nav-inner > .nav-cats:not(.active):focus-within > summary{
        background:#263440 !important;
        color:#fff !important;
        border-radius:9px !important;
    }

    /* CURRENT PAGE = red */
    .storefront .store-nav .nav-inner > a.active,
    .storefront .store-nav .nav-inner > a.active:hover,
    .storefront .store-nav .nav-inner > a.active:focus-visible,
    .storefront .store-nav .nav-inner > .nav-cats.active > summary,
    .storefront .store-nav .nav-inner > .nav-cats.active:hover > summary,
    .storefront .store-nav .nav-inner > .nav-cats.active:focus-within > summary{
        background:#ed1c24 !important;
        color:#fff !important;
        border-radius:9px !important;
    }

    /* Explicitly neutralize old hard-coded first-child red rule */
    .storefront .store-nav .nav-inner > a:first-child:not(.active){
        background:#10161c !important;
    }

    /* Dropdown wrapper itself must not paint a square background */
    .storefront .store-nav .nav-inner > .nav-cats{
        background:transparent !important;
        overflow:visible !important;
    }

    .storefront .store-nav .nav-inner > .nav-cats > summary{
        overflow:hidden !important;
    }
}

@media(max-width:700px){
    .storefront .store-nav .nav-inner > a,
    .storefront .store-nav .nav-inner > .nav-cats,
    .storefront .store-nav .nav-inner > .nav-cats > summary{
        border-radius:8px !important;
    }

    .storefront .store-nav .nav-inner > a:not(.active):hover,
    .storefront .store-nav .nav-inner > .nav-cats:not(.active):hover > summary{
        background:#263440 !important;
    }

    .storefront .store-nav .nav-inner > a.active,
    .storefront .store-nav .nav-inner > .nav-cats.active > summary{
        background:#ed1c24 !important;
    }
}


/* =========================================================
   v1.0.123 — Navigation polish
   Equal spacing, smoother hover, clearer keyboard focus.
   ========================================================= */

/* Keep user's search spacing baseline */
.storefront .store-search input{
    padding-left:5px !important;
}

@media(min-width:701px){

    /* Consistent spacing between all nav items */
    .storefront .store-nav .nav-inner{
        display:flex !important;
        align-items:center !important;
        gap:8px !important;
    }

    .storefront .store-nav .nav-inner > a,
    .storefront .store-nav .nav-inner > .nav-cats{
        margin:0 !important;
    }

    /* Smooth visual response */
    .storefront .store-nav .nav-inner > a,
    .storefront .store-nav .nav-inner > .nav-cats > summary{
        transition:
            background-color .18s ease,
            color .18s ease,
            box-shadow .18s ease,
            transform .18s ease !important;
    }

    /* Hover stays slate blue-gray */
    .storefront .store-nav .nav-inner > a:not(.active):hover,
    .storefront .store-nav .nav-inner > .nav-cats:not(.active):hover > summary{
        background:#263440 !important;
    }

    /* Subtle tactile feel without changing layout */
    .storefront .store-nav .nav-inner > a:hover,
    .storefront .store-nav .nav-inner > .nav-cats > summary:hover{
        transform:translateY(-1px) !important;
    }

    /* Keyboard accessibility */
    .storefront .store-nav .nav-inner > a:focus-visible,
    .storefront .store-nav .nav-inner > .nav-cats > summary:focus-visible{
        outline:2px solid rgba(255,255,255,.92) !important;
        outline-offset:2px !important;
        box-shadow:0 0 0 3px rgba(237,28,36,.18) !important;
    }

    /* Active/current page remains red */
    .storefront .store-nav .nav-inner > a.active,
    .storefront .store-nav .nav-inner > .nav-cats.active > summary{
        background:#ed1c24 !important;
    }
}

@media(max-width:700px){
    .storefront .mobile-drawer > a{
        transition:
            background-color .18s ease,
            color .18s ease,
            box-shadow .18s ease !important;
    }

    .storefront .mobile-drawer > a:focus-visible{
        outline:2px solid rgba(255,255,255,.92) !important;
        outline-offset:2px !important;
        box-shadow:0 0 0 3px rgba(237,28,36,.18) !important;
    }
}


/* =========================================================
   v1.0.124 — Desktop submenu hover + real chevron icon
   ========================================================= */

/* Preserve user-selected search spacing */
.storefront .store-search input{
    padding-left:5px !important;
}

@media(min-width:701px){
    /* Remove browser/text markers and use a proper SVG chevron */
    .storefront .store-nav .nav-cats > summary{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:8px !important;
        list-style:none !important;
        cursor:pointer !important;
    }

    .storefront .store-nav .nav-cats > summary::-webkit-details-marker{
        display:none !important;
    }

    .storefront .store-nav .nav-cats > summary::marker{
        content:"" !important;
    }

    .storefront .nav-chevron{
        width:14px !important;
        height:14px !important;
        flex:0 0 14px !important;
        fill:none !important;
        stroke:currentColor !important;
        stroke-width:2 !important;
        stroke-linecap:round !important;
        stroke-linejoin:round !important;
        transition:transform .18s ease !important;
    }

    .storefront .nav-cats[open] .nav-chevron{
        transform:rotate(180deg) !important;
    }

    /* Dropdown appears on hover/focus/open without click */
    .storefront .nav-cats{
        position:relative !important;
    }

    .storefront .nav-cats-panel{
        display:block !important;
        position:absolute !important;
        top:calc(100% + 6px) !important;
        left:0 !important;
        min-width:240px !important;
        padding:8px !important;
        background:#111820 !important;
        border:1px solid rgba(255,255,255,.10) !important;
        border-radius:10px !important;
        box-shadow:0 14px 34px rgba(0,0,0,.32) !important;
        opacity:0 !important;
        visibility:hidden !important;
        transform:translateY(-6px) !important;
        pointer-events:none !important;
        z-index:1000 !important;
        transition:
            opacity .16s ease,
            transform .16s ease,
            visibility .16s ease !important;
    }

    .storefront .nav-cats:hover > .nav-cats-panel,
    .storefront .nav-cats:focus-within > .nav-cats-panel,
    .storefront .nav-cats[open] > .nav-cats-panel{
        opacity:1 !important;
        visibility:visible !important;
        transform:translateY(0) !important;
        pointer-events:auto !important;
    }

    .storefront .nav-cats-panel > a{
        display:block !important;
        padding:10px 12px !important;
        border-radius:7px !important;
        color:#fff !important;
        text-decoration:none !important;
        white-space:nowrap !important;
        transition:background-color .15s ease !important;
    }

    .storefront .nav-cats-panel > a:hover,
    .storefront .nav-cats-panel > a:focus-visible{
        background:#263440 !important;
        color:#fff !important;
    }
}

/* Mobile keeps native tap behavior, but still uses the SVG chevron */
@media(max-width:700px){
    .storefront .nav-chevron{
        width:14px !important;
        height:14px !important;
        fill:none !important;
        stroke:currentColor !important;
        stroke-width:2 !important;
        stroke-linecap:round !important;
        stroke-linejoin:round !important;
    }
}


/* =========================================================
   v1.0.125 — Remove legacy text submenu arrow
   Keep only the SVG chevron icon.
   ========================================================= */

.storefront .nav-cats > summary::after,
.storefront .nav-cats > summary:after,
.storefront .nav-cats summary::after,
.storefront .nav-cats summary:after{
    content:none !important;
    display:none !important;
}


/* =========================================================
   v1.0.126 — Header topbar + phone CTA refinement
   ========================================================= */

/* Preserve user's search spacing baseline */
.storefront .store-search input{
    padding-left:5px !important;
}

/* Top information bar */
.storefront .store-topbar{
    background:#05080b !important;
    border-bottom:1px solid rgba(255,255,255,.06) !important;
}

.storefront .topbar-inner{
    min-height:32px !important;
    height:32px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:20px !important;
}

.storefront .topbar-contact{
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    color:#d9e0e6 !important;
    font-size:12px !important;
    line-height:1 !important;
}

.storefront .topbar-contact-link{
    color:#fff !important;
    font-size:12px !important;
    font-weight:500 !important;
    text-decoration:none !important;
    padding:5px 0 !important;
    transition:color .16s ease !important;
}

.storefront .topbar-contact-link:hover,
.storefront .topbar-contact-link:focus-visible{
    color:#ef2631 !important;
}

/* Main header phone CTA */
.storefront .header-contact{
    justify-self:end !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;
    min-width:168px !important;
    height:42px !important;
    padding:0 14px !important;
    border:1px solid rgba(255,255,255,.14) !important;
    border-radius:9px !important;
    background:rgba(255,255,255,.035) !important;
    color:#fff !important;
    text-decoration:none !important;
    white-space:nowrap !important;
    transition:
        background-color .18s ease,
        border-color .18s ease,
        transform .18s ease !important;
}

.storefront .header-contact:hover,
.storefront .header-contact:focus-visible{
    background:#263440 !important;
    border-color:rgba(255,255,255,.22) !important;
    color:#fff !important;
    transform:translateY(-1px) !important;
}

.storefront .header-phone-icon{
    font-size:20px !important;
    line-height:1 !important;
}

.storefront .header-contact b{
    display:block !important;
    font-size:15px !important;
    font-weight:600 !important;
    letter-spacing:.01em !important;
}

/* Mobile: keep compact call action */
@media(max-width:700px){
    .storefront .header-contact{
        min-width:40px !important;
        width:40px !important;
        height:40px !important;
        padding:0 !important;
        border:0 !important;
        background:transparent !important;
    }

    .storefront .header-contact b{
        display:none !important;
    }

    .storefront .header-phone-icon{
        font-size:20px !important;
    }
}


/* =========================================================
   v1.0.127 — Main header three-zone alignment
   Logo left / Search center / Phone CTA flush right
   ========================================================= */

/* Preserve user's search spacing baseline */
.storefront .store-search input{
    padding-left:5px !important;
}

@media(min-width:701px){
    .storefront .mainhead-inner{
        display:grid !important;
        grid-template-columns:250px minmax(520px, 1fr) 168px !important;
        align-items:center !important;
        column-gap:28px !important;
    }

    .storefront .store-logo{
        justify-self:start !important;
    }

    .storefront .store-search{
        justify-self:stretch !important;
        width:100% !important;
        max-width:none !important;
    }

    .storefront .header-contact{
        justify-self:end !important;
        margin-left:auto !important;
    }
}


/* =========================================================
   v1.0.128 — Align main navigation to the same content shell
   as Logo / Search / Phone.
   ========================================================= */

/* Preserve user's search spacing baseline */
.storefront .store-search input{
    padding-left:5px !important;
}

@media(min-width:701px){
    /* Keep nav background full width, but align nav content
       to the exact same horizontal shell as the main header. */
    .storefront .store-nav{
        width:100% !important;
    }

    .storefront .store-nav .nav-inner{
        width:100% !important;
        max-width:1440px !important;
        margin-left:auto !important;
        margin-right:auto !important;
        padding-left:20px !important;
        padding-right:20px !important;
        box-sizing:border-box !important;
    }

    /* Remove any legacy offset that pushed the first menu too far left */
    .storefront .store-nav .nav-inner > a:first-child,
    .storefront .store-nav .nav-inner > .nav-cats:first-child{
        margin-left:0 !important;
    }
}


/* =========================================================
   v1.0.129 — Force nav content to the exact desktop shell line
   The approved desktop shell is:
     width: min(calc(100% - 72px), 1440px)
   Therefore its side inset is:
     max(36px, calc((100vw - 1440px) / 2))
   Apply that inset directly to the nav row so legacy width rules
   cannot keep the first menu stuck at the viewport edge.
   ========================================================= */

.storefront .store-search input{
    padding-left:5px !important;
}

@media(min-width:701px){
    .storefront nav.store-nav > .nav-inner{
        width:100% !important;
        max-width:none !important;
        margin:0 !important;

        padding-left:max(36px, calc((100vw - 1440px) / 2)) !important;
        padding-right:max(36px, calc((100vw - 1440px) / 2)) !important;

        box-sizing:border-box !important;
    }
}


/* =========================================================
   v1.0.130 — Topbar directions link
   Replace duplicated Contact link with Google Maps directions.
   ========================================================= */

/* Preserve user's search spacing baseline */
.storefront .store-search input{
    padding-left:5px !important;
}

.storefront .topbar-directions{
    display:inline-flex !important;
    align-items:center !important;
    gap:5px !important;
    white-space:nowrap !important;
}

.storefront .topbar-directions:hover,
.storefront .topbar-directions:focus-visible{
    color:#ef2631 !important;
}


/* =========================================================
   v1.0.131 — Topbar directions label + sizing refinement
   ========================================================= */

/* Preserve user's search spacing baseline */
.storefront .store-search input{
    padding-left:5px !important;
}

.storefront .topbar-directions{
    font-size:13px !important;
    font-weight:600 !important;
    line-height:1 !important;
    gap:6px !important;
    padding:6px 2px !important;
    color:#fff !important;
    letter-spacing:.01em !important;
}

.storefront .topbar-directions:hover,
.storefront .topbar-directions:focus-visible{
    color:#ef2631 !important;
}


/* =========================================================
   v1.0.132 — TEERA SERVICE Floating LINE Chat (PC first)
   Adapted from the proven 69ShoppingMall widget behavior.
   Mobile version intentionally deferred until PC is approved.
   ========================================================= */

/* Preserve user's search spacing baseline */
.storefront .store-search input{
    padding-left:5px !important;
}

/* Replace the old floating phone circle on desktop with LINE widget */
@media(min-width:701px){
    .storefront .float-call{
        display:none !important;
    }
}

#teera-line-widget,
#teera-line-widget *{
    box-sizing:border-box;
}

#teera-line-widget{
    position:fixed;
    right:28px;
    bottom:30px;
    z-index:999999;
    font-family:"Kanit",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
}

/* Desktop-only for this version */
@media(max-width:700px){
    #teera-line-widget{
        display:none !important;
    }
}

.teera-line-widget__fab{
    appearance:none;
    border:0;
    min-width:190px;
    height:48px;
    padding:0 22px 0 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border-radius:28px;
    background:#06c755;
    color:#fff;
    cursor:pointer;
    box-shadow:0 8px 22px rgba(0,118,49,.30);
    font-size:15px;
    font-weight:700;
    line-height:1;
    position:relative;
    transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
}

.teera-line-widget__fab:hover,
.teera-line-widget__fab:focus-visible{
    background:#05b94e;
    transform:translateY(-2px);
    box-shadow:0 11px 26px rgba(0,118,49,.38);
}

.teera-line-widget__fab:focus-visible{
    outline:2px solid #fff;
    outline-offset:3px;
}

.teera-line-widget__fab::after{
    content:"";
    position:absolute;
    inset:-5px;
    border:2px solid rgba(6,199,85,.58);
    border-radius:32px;
    opacity:0;
    pointer-events:none;
    transform:scale(.98);
}

.teera-line-widget__fab.is-scroll-attention::after{
    animation:teeraLineFabScrollPulse 1.15s ease-out 1;
}

.teera-line-widget__fab.is-idle-attention::after{
    inset:-7px;
    border-width:3px;
    border-color:rgba(6,199,85,.74);
    animation:teeraLineFabIdlePulse .86s ease-out 1;
}

.teera-line-widget__fab-icon,
.teera-line-widget__chat-btn span{
    width:24px;
    height:24px;
    flex:0 0 24px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#fff;
    color:#06c755;
    font-size:7px;
    font-weight:800;
    letter-spacing:-.5px;
}

.teera-line-widget__fab b{
    position:absolute;
    top:4px;
    right:7px;
    width:10px;
    height:10px;
    border:2px solid #fff;
    border-radius:50%;
    background:#ef2525;
}

.teera-line-widget__panel{
    position:absolute;
    right:0;
    bottom:64px;
    width:360px;
    overflow:hidden;
    border-radius:18px;
    background:#fff;
    box-shadow:0 16px 42px rgba(0,0,0,.25);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(12px) scale(.97);
    transform-origin:bottom right;
    transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
}

.teera-line-widget.is-open .teera-line-widget__panel{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scale(1);
}

.teera-line-widget__head{
    min-height:96px;
    padding:18px 48px 18px 18px;
    display:flex;
    align-items:center;
    gap:12px;
    background:linear-gradient(135deg,#367fd0 0%,#2468ac 100%);
    color:#fff;
    position:relative;
}

.teera-line-widget__avatar{
    width:50px;
    height:50px;
    flex:0 0 50px;
    overflow:hidden;
    border:2px solid rgba(255,255,255,.88);
    border-radius:50%;
    background:#fff;
    box-shadow:0 3px 9px rgba(0,0,0,.16);
}

.teera-line-widget__avatar img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:50% 31%;
}

.teera-line-widget__head-text{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.teera-line-widget__head-text strong{
    font-size:18px;
    line-height:1.2;
    font-weight:700;
}

.teera-line-widget__head-text span{
    font-size:13px;
    opacity:.96;
}

.teera-line-widget__head-text i{
    width:8px;
    height:8px;
    margin-right:4px;
    display:inline-block;
    border-radius:50%;
    background:#caff78;
}

.teera-line-widget__close{
    position:absolute;
    top:12px;
    right:13px;
    width:30px;
    height:30px;
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,.18);
    color:#fff;
    cursor:pointer;
    font-size:24px;
    line-height:28px;
}

.teera-line-widget__close:hover{
    background:rgba(255,255,255,.28);
}

.teera-line-widget__body{
    height:236px;
    min-height:0;
    padding:16px 18px 19px;
    position:relative;
    background:#f5faf7;
}

.teera-line-widget__time{
    margin-bottom:14px;
    color:#95a3a9;
    text-align:center;
    font-size:11px;
}

.teera-line-widget__typing{
    display:inline-flex;
    align-items:center;
    gap:5px;
    min-width:56px;
    height:34px;
    padding:0 13px;
    border-radius:18px;
    background:#e6edf3;
    box-shadow:0 2px 7px rgba(0,0,0,.05);
}

.teera-line-widget__typing span{
    width:7px;
    height:7px;
    border-radius:50%;
    background:#6d7d8c;
    animation:teeraLineTypingBounce .9s infinite ease-in-out;
}

.teera-line-widget__typing span:nth-child(2){animation-delay:.15s}
.teera-line-widget__typing span:nth-child(3){animation-delay:.30s}

.teera-line-widget__typing.is-hidden{
    display:none;
}

.teera-line-widget__message{
    display:none;
    max-width:100%;
    padding:13px 15px;
    border-radius:4px 16px 16px 16px;
    background:#fff;
    color:#344043;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
    font-size:15px;
    line-height:1.65;
}

.teera-line-widget__message.is-visible{
    display:inline-block;
    animation:teeraLineMessageShow .28s ease both;
}

.teera-line-widget__chat-btn{
    position:absolute;
    left:18px;
    right:18px;
    bottom:19px;
    min-height:49px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    border-radius:25px;
    background:#06c755;
    color:#fff !important;
    text-decoration:none !important;
    font-size:16px;
    font-weight:700;
    transition:background .18s ease,transform .18s ease;
}

.teera-line-widget__chat-btn:hover{
    background:#05b94e;
    transform:translateY(-1px);
}

.teera-line-widget__chat-btn::after{
    content:"";
    position:absolute;
    inset:-5px;
    border:2px solid rgba(6,199,85,.56);
    border-radius:30px;
    opacity:0;
    pointer-events:none;
    transform:scale(.98);
}

.teera-line-widget__chat-btn.is-attention::after{
    animation:teeraLineChatPulse 5s ease-out infinite;
}

@keyframes teeraLineTypingBounce{
    0%,60%,100%{transform:translateY(0);opacity:.45}
    30%{transform:translateY(-4px);opacity:1}
}

@keyframes teeraLineMessageShow{
    from{opacity:0;transform:translateY(7px)}
    to{opacity:1;transform:translateY(0)}
}

@keyframes teeraLineChatPulse{
    0%,2%{opacity:0;transform:scale(.98)}
    10%{opacity:.62;transform:scale(1)}
    20%{opacity:0;transform:scale(1.08)}
    24%{opacity:0;transform:scale(.98)}
    32%{opacity:.55;transform:scale(1)}
    42%{opacity:0;transform:scale(1.08)}
    46%{opacity:0;transform:scale(.98)}
    54%{opacity:.48;transform:scale(1)}
    60%,100%{opacity:0;transform:scale(1.08)}
}

@keyframes teeraLineFabScrollPulse{
    0%{opacity:0;transform:scale(.97)}
    18%{opacity:.66;transform:scale(1)}
    72%,100%{opacity:0;transform:scale(1.18)}
}

@keyframes teeraLineFabIdlePulse{
    0%{opacity:0;transform:scale(.98)}
    34%{opacity:.76;transform:scale(1.02)}
    100%{opacity:0;transform:scale(1.22)}
}

@media(prefers-reduced-motion:reduce){
    .teera-line-widget__typing span,
    .teera-line-widget__chat-btn.is-attention::after,
    .teera-line-widget__fab.is-scroll-attention::after,
    .teera-line-widget__fab.is-idle-attention::after{
        animation:none !important;
    }
}


/* =========================================================
   v1.0.136 — LINE popup header color only
   Match the blue tone approved from the TEERA SERVICE logo.
   No other LINE widget styles are changed.
   ========================================================= */

.teera-line-widget__head{
    background:#1757c4 !important;
}


/* =========================================================
   v1.0.359 — LINE popup header color only
   Professional brighter navy selected for TEERA SERVICE: #243B6B
   No transparency. No other LINE widget styles are changed.
   ========================================================= */

.teera-line-widget__head{
    background:#243B6B !important;
}


/* =========================================================
   v1.0.138 — Mobile homepage layout rebuild
   PC is intentionally untouched.
   Target: clean mobile composition like approved reference.
   ========================================================= */

@media(max-width:700px){

    /* ---------- MOBILE HEADER ---------- */
    .storefront .store-shell{
        width:calc(100% - 20px) !important;
    }

    .storefront .store-mainhead{
        background:#0b1016 !important;
    }

    .storefront .mainhead-inner{
        min-height:108px !important;
        height:108px !important;
        grid-template-columns:44px 1fr 44px !important;
        grid-template-rows:54px 46px !important;
        gap:4px 8px !important;
        padding-top:2px !important;
        padding-bottom:2px !important;
        align-items:center !important;
    }

    .storefront .mobile-menu-button{
        width:44px !important;
        height:44px !important;
        font-size:25px !important;
        align-self:center !important;
    }

    .storefront .store-logo{
        width:188px !important;
        height:43px !important;
        justify-self:center !important;
        align-self:center !important;
        padding:0 !important;
        background:transparent !important;
    }

    .storefront .store-logo img{
        width:100% !important;
        height:100% !important;
        object-fit:contain !important;
        filter:none !important;
    }

    .storefront .mainhead-inner::after{
        display:none !important;
        content:none !important;
    }

    .storefront .header-contact{
        display:flex !important;
        grid-column:3 !important;
        grid-row:1 !important;
        width:44px !important;
        height:44px !important;
        min-width:44px !important;
        justify-self:end !important;
        align-self:center !important;
        border:0 !important;
        padding:0 !important;
        background:transparent !important;
        box-shadow:none !important;
    }

    .storefront .header-contact b{
        display:none !important;
    }

    .storefront .header-phone-icon{
        font-size:20px !important;
    }

    .storefront .store-search{
        grid-column:1 / -1 !important;
        grid-row:2 !important;
        width:100% !important;
        height:44px !important;
        border-radius:9px !important;
        overflow:hidden !important;
        margin:0 !important;
    }

    .storefront .store-search .search-icon{
        width:36px !important;
        flex:0 0 36px !important;
        font-size:19px !important;
    }

    /* user's approved spacing baseline */
    .storefront .store-search input{
        padding-left:5px !important;
        font-size:12.5px !important;
        min-width:0 !important;
    }

    .storefront .store-search button{
        min-width:62px !important;
        width:62px !important;
        height:44px !important;
        padding:0 10px !important;
        border-radius:0 9px 9px 0 !important;
        font-size:12px !important;
    }


    /* ---------- MOBILE HERO ---------- */
    .storefront .home-hero,
    .storefront .hero-content{
        height:302px !important;
        min-height:302px !important;
    }

    .storefront .home-hero{
        position:relative !important;
        overflow:hidden !important;
        background:#020405 !important;
    }

    .storefront .hero-picture{
        position:absolute !important;
        inset:0 !important;
    }

    .storefront .hero-picture img{
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        object-position:50% 68% !important;
        transform:none !important;
    }

    /* Strong at top for text, light through middle, slightly dark at bottom
       so the four benefit icons stay readable. */
    .storefront .hero-shade{
        background:
            linear-gradient(180deg,
                rgba(0,0,0,.92) 0%,
                rgba(0,0,0,.75) 25%,
                rgba(0,0,0,.32) 48%,
                rgba(0,0,0,.08) 65%,
                rgba(0,0,0,.40) 100%) !important;
    }

    .storefront .hero-content{
        position:relative !important;
        display:block !important;
        padding-top:0 !important;
    }

    .storefront .hero-copy{
        width:100% !important;
        max-width:none !important;
        height:100% !important;
        padding:13px 4px 0 !important;
        margin:0 !important;
        transform:none !important;
        position:relative !important;
        z-index:2 !important;
    }

    .storefront .hero-copy h1{
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        font-size:22px !important;
        line-height:1.10 !important;
        letter-spacing:-.02em !important;
        white-space:normal !important;
    }

    .storefront .hero-copy h1 em{
        display:block !important;
        margin-top:2px !important;
        font-size:25px !important;
        line-height:1.06 !important;
    }

    .storefront .hero-sub{
        width:auto !important;
        max-width:95% !important;
        margin:7px 0 0 !important;
        font-size:12px !important;
        line-height:1.35 !important;
        color:#f6f6f6 !important;
    }

    /* Benefits live at the bottom of Hero instead of being squeezed
       directly beneath the headline. */
    .storefront .hero-points{
        position:absolute !important;
        left:0 !important;
        right:0 !important;
        bottom:10px !important;
        width:100% !important;
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:0 !important;
        margin:0 !important;
        padding:0 !important;
        z-index:3 !important;
    }

    .storefront .hero-point{
        position:relative !important;
        min-width:0 !important;
        padding:0 5px !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:3px !important;
        text-align:center !important;
    }

    .storefront .hero-point:not(:last-child)::after{
        content:"" !important;
        position:absolute !important;
        right:0 !important;
        top:3px !important;
        width:1px !important;
        height:55px !important;
        background:rgba(255,255,255,.15) !important;
    }

    .storefront .hero-service-icon,
    .storefront .hero-point>span{
        width:34px !important;
        height:34px !important;
        flex:0 0 34px !important;
        margin:0 auto !important;
        border:0 !important;
        border-radius:0 !important;
        background:transparent !important;
    }

    .storefront .hero-service-icon svg{
        width:30px !important;
        height:30px !important;
    }

    .storefront .hero-point b{
        display:block !important;
        margin:0 !important;
        font-size:9.4px !important;
        line-height:1.12 !important;
        font-weight:600 !important;
        white-space:normal !important;
        overflow-wrap:normal !important;
    }

    .storefront .hero-point small{
        display:block !important;
        margin:0 !important;
        font-size:7.8px !important;
        line-height:1.10 !important;
        color:#f0f1f2 !important;
        white-space:normal !important;
    }


    /* ---------- MOBILE CATEGORY SECTION ---------- */
    .storefront .home-categories{
        padding:15px 0 13px !important;
    }

    .storefront .store-section-head{
        margin-bottom:9px !important;
        align-items:center !important;
    }

    .storefront .store-section-head h2{
        font-size:17px !important;
        line-height:1.2 !important;
    }

    .storefront .store-section-head a{
        font-size:11px !important;
    }

    .storefront .category-grid{
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:7px !important;
    }

    .storefront .category-card{
        min-width:0 !important;
        padding:6px 4px 8px !important;
        border-radius:8px !important;
    }

    .storefront .category-image{
        height:68px !important;
        border-radius:6px !important;
    }

    .storefront .category-image img{
        width:100% !important;
        height:100% !important;
        object-fit:contain !important;
    }

    .storefront .category-card b{
        margin-top:5px !important;
        font-size:9.7px !important;
        line-height:1.15 !important;
    }

    /* New products: two cards per visible row, like the mobile reference. */
    .storefront .home-product-row{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:8px !important;
        overflow:visible !important;
    }

    .storefront .product-card-body h3{
        font-size:10.5px !important;
    }
}


/* =========================================================
   v1.0.139 — Mobile Hero height increase only
   Match the approved taller mobile reference more closely.
   PC untouched.
   ========================================================= */

@media(max-width:700px){
    .storefront .home-hero,
    .storefront .hero-content{
        height:365px !important;
        min-height:365px !important;
    }

    .storefront .hero-picture img{
        object-position:50% 66% !important;
    }

    .storefront .hero-points{
        bottom:12px !important;
    }
}


/* =========================================================
   v1.0.140 — Mobile Hero target refinement
   Match the newly approved reference:
   compact header, clear text, full parts image, 4 benefits at bottom.
   PC untouched.
   ========================================================= */

@media(max-width:700px){
    .storefront .home-hero,
    .storefront .hero-content{
        height:350px !important;
        min-height:350px !important;
    }

    .storefront .hero-copy{
        padding:14px 4px 0 !important;
    }

    .storefront .hero-copy h1{
        font-size:22px !important;
        line-height:1.08 !important;
    }

    .storefront .hero-copy h1 em{
        font-size:25px !important;
        margin-top:2px !important;
    }

    .storefront .hero-sub{
        margin:6px 0 0 !important;
        font-size:11.8px !important;
        line-height:1.3 !important;
    }

    .storefront .hero-picture img{
        object-position:50% 63% !important;
    }

    .storefront .hero-points{
        bottom:10px !important;
    }

    .storefront .hero-service-icon,
    .storefront .hero-point>span{
        width:32px !important;
        height:32px !important;
        flex-basis:32px !important;
    }

    .storefront .hero-service-icon svg{
        width:28px !important;
        height:28px !important;
    }

    .storefront .hero-point b{
        font-size:9px !important;
        line-height:1.12 !important;
    }

    .storefront .hero-point small{
        font-size:7.5px !important;
        line-height:1.08 !important;
    }
}


/* =========================================================
   v1.0.141 — Mobile Hero 3-line headline tuning
   Only adjust the 3 text lines:
   - center horizontally
   - make larger
   - move lower
   PC untouched.
   ========================================================= */

@media(max-width:700px){

    .storefront .hero-copy{
        padding-top:28px !important;
        text-align:center !important;
    }

    .storefront .hero-copy h1{
        width:100% !important;
        max-width:100% !important;
        margin:0 auto !important;
        text-align:center !important;
        font-size:25px !important;
        line-height:1.08 !important;
    }

    .storefront .hero-copy h1 em{
        display:block !important;
        margin-top:3px !important;
        text-align:center !important;
        font-size:29px !important;
        line-height:1.06 !important;
    }

    .storefront .hero-sub{
        width:100% !important;
        max-width:100% !important;
        margin:8px auto 0 !important;
        text-align:center !important;
        font-size:13.2px !important;
        line-height:1.32 !important;
    }
}


/* =========================================================
   v1.0.142 — Mobile Hero service benefits 2x2
   Only adjust the four service benefits on mobile:
   - 2 rows x 2 columns
   - larger readable text
   - larger icons
   PC untouched.
   ========================================================= */

@media(max-width:700px){

    .storefront .hero-points{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        grid-template-rows:repeat(2,auto) !important;
        gap:10px 8px !important;
        left:10px !important;
        right:10px !important;
        width:auto !important;
        bottom:12px !important;
        padding:0 !important;
    }

    .storefront .hero-point{
        padding:0 8px !important;
        gap:4px !important;
        min-width:0 !important;
    }

    .storefront .hero-point:not(:last-child)::after{
        display:none !important;
        content:none !important;
    }

    .storefront .hero-service-icon,
    .storefront .hero-point>span{
        width:38px !important;
        height:38px !important;
        flex:0 0 38px !important;
        margin:0 auto 1px !important;
    }

    .storefront .hero-service-icon svg{
        width:34px !important;
        height:34px !important;
    }

    .storefront .hero-point b{
        font-size:11.5px !important;
        line-height:1.18 !important;
        margin:0 !important;
    }

    .storefront .hero-point small{
        font-size:9.8px !important;
        line-height:1.18 !important;
        margin:0 !important;
    }
}


/* =========================================================
   v1.0.143 — Mobile Hero services: 3 columns, larger text
   ========================================================= */

@media(max-width:700px){

    .storefront .hero-points{
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        grid-template-rows:1fr !important;
        gap:6px !important;
        left:8px !important;
        right:8px !important;
        width:auto !important;
        bottom:12px !important;
        padding:0 !important;
        align-items:start !important;
    }

    .storefront .hero-point:nth-child(4){
        display:none !important;
    }

    .storefront .hero-point{
        min-width:0 !important;
        padding:0 6px !important;
        gap:5px !important;
        text-align:center !important;
    }

    .storefront .hero-point:not(:last-child)::after{
        display:none !important;
        content:none !important;
    }

    .storefront .hero-service-icon,
    .storefront .hero-point>span{
        width:44px !important;
        height:44px !important;
        flex:0 0 44px !important;
        margin:0 auto 2px !important;
    }

    .storefront .hero-service-icon svg{
        width:39px !important;
        height:39px !important;
    }

    .storefront .hero-point b{
        display:block !important;
        margin:0 !important;
        font-size:12.8px !important;
        line-height:1.18 !important;
        font-weight:700 !important;
        white-space:normal !important;
    }

    .storefront .hero-point small{
        display:block !important;
        margin:1px 0 0 !important;
        font-size:10.6px !important;
        line-height:1.20 !important;
        color:#f2f3f4 !important;
        white-space:normal !important;
    }
}


/* =========================================================
   v1.0.145 — Mobile Hero 3 services larger/readable
   Only enlarge the existing 3 mobile service benefits.
   ========================================================= */

@media(max-width:700px){

    .storefront .hero-service-icon,
    .storefront .hero-point>span{
        width:50px !important;
        height:50px !important;
        flex:0 0 50px !important;
        margin:0 auto 4px !important;
    }

    .storefront .hero-service-icon svg{
        width:44px !important;
        height:44px !important;
    }

    .storefront .hero-point b{
        font-size:14px !important;
        line-height:1.16 !important;
        font-weight:700 !important;
    }

    .storefront .hero-point small{
        font-size:11.5px !important;
        line-height:1.18 !important;
        margin-top:2px !important;
    }
}


/* =========================================================
   v1.0.150 — Mobile drawer: Directions shortcut
   Put frequently used Google Maps directions near the top.
   ========================================================= */
@media(max-width:700px){
    .storefront .mobile-drawer .mobile-drawer-directions{
        font-weight:700 !important;
        color:#fff !important;
    }

    .storefront .mobile-drawer .mobile-drawer-directions:hover,
    .storefront .mobile-drawer .mobile-drawer-directions:focus-visible{
        color:#fff !important;
        background:#ef2029 !important;
    }
}


/* =========================================================
   v1.0.151 — Mobile drawer directions text + remove red Home active bar
   ========================================================= */
@media(max-width:700px){

    /* Directions item: readable on white drawer */
    .storefront .mobile-drawer .mobile-drawer-directions{
        display:block !important;
        color:#111820 !important;
        background:#fff !important;
        font-weight:700 !important;
    }

    .storefront .mobile-drawer .mobile-drawer-directions:hover,
    .storefront .mobile-drawer .mobile-drawer-directions:focus-visible{
        color:#111820 !important;
        background:#f3f5f7 !important;
    }

    /* Mobile drawer should not use the desktop red active-state bar */
    .storefront .mobile-drawer > a.active{
        color:#111820 !important;
        background:#fff !important;
        border-radius:0 !important;
    }

    .storefront .mobile-drawer > a.active:hover,
    .storefront .mobile-drawer > a.active:focus-visible{
        color:#111820 !important;
        background:#f3f5f7 !important;
    }
}


/* =========================================================
   v1.0.152 — Mobile drawer accordion:
   Product categories + vehicle brands
   ========================================================= */
@media(max-width:700px){
    .storefront .mobile-drawer .mobile-drawer-group{
        display:block !important;
        margin:0 !important;
        padding:0 !important;
        border:0 !important;
        background:#fff !important;
    }

    .storefront .mobile-drawer .mobile-drawer-group > summary{
        min-height:58px !important;
        padding:0 20px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:14px !important;
        list-style:none !important;
        cursor:pointer !important;
        color:#111820 !important;
        background:#fff !important;
        border-bottom:1px solid #e7eaee !important;
        font-weight:700 !important;
        font-size:16px !important;
        -webkit-tap-highlight-color:transparent !important;
    }

    .storefront .mobile-drawer .mobile-drawer-group > summary::-webkit-details-marker{
        display:none !important;
    }

    .storefront .mobile-drawer .mobile-drawer-group > summary::marker{
        content:"" !important;
    }

    .storefront .mobile-drawer .mobile-drawer-chevron{
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:24px !important;
        height:24px !important;
        flex:0 0 24px !important;
        font-size:22px !important;
        line-height:1 !important;
        transition:transform .18s ease !important;
    }

    .storefront .mobile-drawer .mobile-drawer-group[open] .mobile-drawer-chevron{
        transform:rotate(180deg) !important;
    }

    .storefront .mobile-drawer .mobile-drawer-submenu{
        background:#f6f7f9 !important;
    }

    .storefront .mobile-drawer .mobile-drawer-submenu > a{
        min-height:52px !important;
        padding:0 20px 0 34px !important;
        display:flex !important;
        align-items:center !important;
        color:#20262d !important;
        background:#f6f7f9 !important;
        border-bottom:1px solid #e4e7eb !important;
        font-size:15px !important;
        font-weight:500 !important;
    }

    .storefront .mobile-drawer .mobile-drawer-submenu > a:hover,
    .storefront .mobile-drawer .mobile-drawer-submenu > a:focus-visible{
        color:#111820 !important;
        background:#eceff3 !important;
    }
}


/* =========================================================
   v1.0.153 — Mobile drawer accordion + / -
   Replace chevron glyph with clean plus/minus indicator.
   ========================================================= */
@media(max-width:700px){

    .storefront .mobile-drawer .mobile-drawer-toggle-icon{
        width:24px !important;
        height:24px !important;
        flex:0 0 24px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        color:#111820 !important;
        font-size:20px !important;
        font-weight:500 !important;
        line-height:1 !important;
        font-family:Arial,Helvetica,sans-serif !important;
    }

    .storefront .mobile-drawer .mobile-drawer-group[open] .mobile-drawer-toggle-icon{
        font-size:0 !important;
    }

    .storefront .mobile-drawer .mobile-drawer-group[open] .mobile-drawer-toggle-icon::before{
        content:"−" !important;
        display:block !important;
        font-size:20px !important;
        font-weight:500 !important;
        line-height:1 !important;
    }

    /* Disable old chevron animation/rules if cached earlier in cascade */
    .storefront .mobile-drawer .mobile-drawer-chevron{
        display:none !important;
    }
}

/* v1.0.154 — nested mobile category architecture */
@media(max-width:700px){
 .storefront .mobile-drawer .mobile-category-groups{background:#f5f6f8 !important}
 .storefront .mobile-drawer .mobile-category-parent{margin:0 !important;border:0 !important;background:#f5f6f8 !important}
 .storefront .mobile-drawer .mobile-category-parent>summary{
   min-height:50px !important;padding:0 22px 0 30px !important;display:flex !important;
   align-items:center !important;justify-content:space-between !important;list-style:none !important;
   border-bottom:1px solid #e2e5e9 !important;background:#f5f6f8 !important;
   color:#17202a !important;font-size:15px !important;font-weight:700 !important;cursor:pointer !important;
 }
 .storefront .mobile-drawer .mobile-category-parent>summary::-webkit-details-marker{display:none !important}
 .storefront .mobile-drawer .mobile-category-parent-icon{font:500 18px/1 Arial,sans-serif !important}
 .storefront .mobile-drawer .mobile-category-parent[open] .mobile-category-parent-icon{font-size:0 !important}
 .storefront .mobile-drawer .mobile-category-parent[open] .mobile-category-parent-icon:before{content:"−";font-size:18px !important}
 .storefront .mobile-drawer .mobile-category-children>a{
   min-height:46px !important;padding:0 22px 0 46px !important;background:#fff !important;
   border-bottom:1px solid #eceef1 !important;font-size:14px !important;font-weight:500 !important;
 }
}


/* =========================================================
   v1.0.155 — Mobile nested category children layout
   Keep child categories clean and readable.
   ========================================================= */
@media(max-width:700px){

    .storefront .mobile-drawer .mobile-category-children{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:0 !important;
        background:#fff !important;
    }

    .storefront .mobile-drawer .mobile-category-children > a{
        min-width:0 !important;
        min-height:46px !important;
        padding:10px 14px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:flex-start !important;
        background:#fff !important;
        border-bottom:1px solid #eceef1 !important;
        border-right:1px solid #eceef1 !important;
        font-size:13.5px !important;
        line-height:1.25 !important;
        font-weight:500 !important;
        white-space:normal !important;
        word-break:break-word !important;
    }

    .storefront .mobile-drawer .mobile-category-children > a:nth-child(2n){
        border-right:0 !important;
    }
}

/* Very narrow phones: fall back to one column for readability */
@media(max-width:360px){
    .storefront .mobile-drawer .mobile-category-children{
        grid-template-columns:1fr !important;
    }

    .storefront .mobile-drawer .mobile-category-children > a{
        border-right:0 !important;
    }
}


/* =========================================================
   v1.0.156 — Mobile nested subcategory indentation
   Child items should visually sit under the parent category.
   ========================================================= */
@media(max-width:700px){

    .storefront .mobile-drawer .mobile-category-children{
        padding-left:12px !important;
        padding-right:4px !important;
    }

    .storefront .mobile-drawer .mobile-category-children > a{
        padding-left:16px !important;
        font-weight:500 !important;
        color:#2b3138 !important;
    }
}

@media(max-width:360px){
    .storefront .mobile-drawer .mobile-category-children{
        padding-left:14px !important;
        padding-right:0 !important;
    }
}


/* =========================================================
   v1.0.165 — Desktop category menu = same Parent > Child data as mobile
   ========================================================= */
@media(min-width:701px){

  .storefront .desktop-category-groups{
    width:285px !important;
    max-height:none !important;
    overflow:visible !important;
    padding:7px 0 !important;
  }

  .storefront .desktop-category-parent{
    position:relative !important;
  }

  .storefront .desktop-category-parent-link{
    min-height:43px !important;
    padding:9px 13px 9px 17px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    color:#fff !important;
    background:transparent !important;
    text-decoration:none !important;
    font-size:14px !important;
    font-weight:700 !important;
    line-height:1.35 !important;
    white-space:normal !important;
  }

  .storefront .desktop-category-parent:hover > .desktop-category-parent-link,
  .storefront .desktop-category-parent-link:focus-visible{
    background:#1d2b38 !important;
  }

  .storefront .desktop-category-arrow{
    flex:0 0 auto !important;
    font-size:21px !important;
    line-height:1 !important;
    opacity:.82 !important;
  }

  .storefront .desktop-category-children{
    position:absolute !important;
    top:-7px !important;
    left:100% !important;
    width:270px !important;
    max-height:520px !important;
    overflow-y:auto !important;
    padding:7px 0 !important;
    display:none !important;
    background:#101922 !important;
    border:1px solid rgba(255,255,255,.09) !important;
    border-radius:0 10px 10px 0 !important;
    box-shadow:14px 18px 34px rgba(0,0,0,.28) !important;
    z-index:1300 !important;
  }

  .storefront .desktop-category-parent:hover > .desktop-category-children,
  .storefront .desktop-category-parent:focus-within > .desktop-category-children{
    display:block !important;
  }

  .storefront .desktop-category-children > a{
    min-height:40px !important;
    padding:9px 15px !important;
    display:flex !important;
    align-items:center !important;
    color:#fff !important;
    background:transparent !important;
    text-decoration:none !important;
    font-size:14px !important;
    font-weight:500 !important;
    line-height:1.35 !important;
    white-space:normal !important;
  }

  .storefront .desktop-category-children > a:hover,
  .storefront .desktop-category-children > a:focus-visible{
    background:#1d2b38 !important;
  }
}


/* =========================================================
   v1.0.166 — Desktop nav parity with Mobile
   Home > All Products > Categories > Vehicle Brands > Available > New > Contact
   ========================================================= */
@media(min-width:701px){

  .storefront .store-nav .nav-brands{
    position:relative !important;
  }

  .storefront .store-nav .nav-brands > summary{
    height:100% !important;
    padding:0 18px !important;
    display:flex !important;
    align-items:center !important;
    gap:7px !important;
    list-style:none !important;
    cursor:pointer !important;
    color:#fff !important;
    font-weight:700 !important;
    white-space:nowrap !important;
  }

  .storefront .store-nav .nav-brands > summary::-webkit-details-marker{
    display:none !important;
  }

  .storefront .store-nav .nav-brands > summary::marker{
    content:"" !important;
  }

  .storefront .store-nav .nav-brands[open] > summary,
  .storefront .store-nav .nav-brands > summary:hover{
    background:#253543 !important;
    border-radius:10px !important;
  }

  .storefront .nav-brands-panel{
    position:absolute !important;
    top:100% !important;
    left:0 !important;
    width:240px !important;
    max-height:480px !important;
    overflow-y:auto !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
    padding:7px 0 !important;
    background:#101922 !important;
    border:1px solid rgba(255,255,255,.09) !important;
    border-radius:0 0 10px 10px !important;
    box-shadow:0 16px 30px rgba(0,0,0,.25) !important;
    z-index:1300 !important;
  }

  .storefront .nav-brands-panel::-webkit-scrollbar{
    width:0 !important;
    height:0 !important;
    display:none !important;
  }

  .storefront .nav-brands-panel > a{
    min-height:40px !important;
    padding:9px 15px !important;
    display:flex !important;
    align-items:center !important;
    color:#fff !important;
    text-decoration:none !important;
    font-size:14px !important;
    font-weight:500 !important;
  }

  .storefront .nav-brands-panel > a:hover,
  .storefront .nav-brands-panel > a:focus-visible{
    background:#1d2b38 !important;
  }

  .storefront .desktop-category-parent.no-children .desktop-category-parent-link{
    padding-right:17px !important;
  }
}


/* =========================================================
   v1.0.167 — Desktop navigation font-weight consistency
   Main menu + category parents + child items + vehicle brands
   use the same visual weight.
   ========================================================= */
@media(min-width:701px){

    /* Main navigation */
    .storefront .store-nav .nav-inner > a,
    .storefront .store-nav .nav-cats > summary,
    .storefront .store-nav .nav-brands > summary{
        font-weight:500 !important;
    }

    /* Product category parent items */
    .storefront .desktop-category-parent-link{
        font-weight:500 !important;
    }

    /* Product category child items */
    .storefront .desktop-category-children > a{
        font-weight:500 !important;
    }

    /* Vehicle brand dropdown items */
    .storefront .nav-brands-panel > a{
        font-weight:500 !important;
    }
}


/* =========================================================
   v1.0.169 — Home category image fit
   Enlarge fixed category assets to fill the card image area.
   ========================================================= */
.storefront .home-categories .category-image{
    overflow:hidden !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.storefront .home-categories .category-image img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    transform:scale(1.16) !important;
    transform-origin:center center !important;
}

/* The three-dot "ดูทั้งหมด" card must not be affected by image scaling. */
.storefront .home-categories .category-more .category-image{
    overflow:visible !important;
}

/* Mobile needs a slightly stronger fill because cards are smaller. */
@media(max-width:700px){
    .storefront .home-categories .category-image img{
        transform:scale(1.22) !important;
    }
}


/* =========================================================
   v1.0.170 — Reduce oversized Interior / Wheels category art
   ========================================================= */
.storefront .home-categories .category-card.category-interior .category-image img,
.storefront .home-categories .category-card.category-wheels_tires .category-image img{
    transform:scale(1.02) !important;
}

@media(max-width:700px){
    .storefront .home-categories .category-card.category-interior .category-image img,
    .storefront .home-categories .category-card.category-wheels_tires .category-image img{
        transform:scale(1.06) !important;
    }
}

/* =========================================================
   v1.0.171 — Home brand fixed logo assets
   ========================================================= */
.storefront .brand-mark.brand-logo{
    width:52px;
    height:52px;
    margin-bottom:6px;
    border-radius:0;
    background:#fff;
    overflow:hidden;
}
.storefront .brand-mark.brand-logo img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
}
.storefront .brand-more-mark{
    width:52px;
    height:52px;
    margin-bottom:6px;
    border-radius:50%;
    background:#f2f4f6;
    color:#111923;
    font-size:20px;
    letter-spacing:1px;
}
.storefront .brand-card-more b{
    color:#111923;
}
@media(max-width:700px){
    .storefront .brand-mark.brand-logo,
    .storefront .brand-more-mark{
        width:42px;
        height:42px;
        min-height:42px !important;
        margin-bottom:4px;
    }
    .storefront .brand-more-mark{
        font-size:16px;
    }
}

/* =========================================================
   v1.0.185 — Home latest products: show full product titles
   Remove the 2-line clamp only in the Home "สินค้าใหม่ล่าสุด" section.
   ========================================================= */
.storefront .latest-section .product-card-body h3{
    display:block !important;
    -webkit-line-clamp:unset !important;
    -webkit-box-orient:initial !important;
    overflow:visible !important;
    min-height:0 !important;
    white-space:normal !important;
    text-overflow:clip !important;
}

/* =========================================================
   v1.0.186 — Home latest products: status above price, price aligned bottom
   Applies only to the Home "สินค้าใหม่ล่าสุด" cards.
   ========================================================= */
.storefront .latest-section .store-product-card{
    display:flex;
    flex-direction:column;
}
.storefront .latest-section .product-card-image{
    flex:0 0 auto;
}
.storefront .latest-section .product-card-body{
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
}
.storefront .latest-section .product-card-body .stock{
    margin-top:auto;
    margin-bottom:5px;
}
.storefront .latest-section .product-card-body strong{
    margin-top:0;
}

/* =========================================================
   v1.0.190 — Home recommended products
   - Rendered only when at least one recommended product exists.
   - Desktop: fixed card size based on an 8-card full row; 1–7 stay centered.
   - Mobile: fixed-size cards scroll horizontally; cards are never stretched.
   ========================================================= */
.storefront .recommended-section{
    padding-bottom:34px;
}
.storefront .recommended-product-row{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:stretch;
    gap:12px;
}
.storefront .recommended-product-row .store-product-card{
    flex:0 0 clamp(150px,calc((100% - 84px)/8),170px);
    min-width:0 !important;
    display:flex;
    flex-direction:column;
}
.storefront .recommended-section .product-card-image{
    flex:0 0 auto;
    aspect-ratio:1.35/1 !important;
}
.storefront .recommended-section .product-card-body{
    padding:10px !important;
    display:flex;
    flex-direction:column;
    flex:1 1 auto;
}
.storefront .recommended-section .product-card-body h3{
    display:block !important;
    -webkit-line-clamp:unset !important;
    -webkit-box-orient:initial !important;
    overflow:visible !important;
    min-height:0 !important;
    white-space:normal !important;
    text-overflow:clip !important;
    font-size:13px !important;
    line-height:1.25 !important;
}
.storefront .recommended-section .product-card-body p{
    font-size:11px !important;
}
.storefront .recommended-section .product-card-body .stock{
    margin-top:auto;
    margin-bottom:5px;
}
.storefront .recommended-section .product-card-body strong{
    margin-top:0;
    font-size:15px !important;
}
@media(max-width:700px){
    .storefront .recommended-product-row{
        display:flex !important;
        flex-wrap:nowrap !important;
        justify-content:flex-start !important;
        gap:8px !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        padding-bottom:6px;
        scroll-snap-type:x proximity;
        -webkit-overflow-scrolling:touch;
    }
    .storefront .recommended-product-row .store-product-card{
        flex:0 0 42% !important;
        min-width:42% !important;
        max-width:42% !important;
        scroll-snap-align:start;
    }
    .storefront .recommended-section .product-card-body{
        padding:7px !important;
    }
    .storefront .recommended-section .product-card-body h3{
        font-size:10.5px !important;
    }
    .storefront .recommended-section .product-card-body p{
        font-size:8.5px !important;
    }
    .storefront .recommended-section .product-card-body strong{
        font-size:12px !important;
    }
    .storefront .recommended-section .stock{
        font-size:8px !important;
    }
}



/* =========================================================
   v1.0.191 — Home latest products mobile horizontal scroll
   - Make “สินค้าใหม่ล่าสุด” on mobile scroll horizontally
     like “สินค้าแนะนำ”, while keeping desktop unchanged.
   ========================================================= */
@media(max-width:700px){
    .storefront .latest-section .home-product-row{
        display:flex !important;
        flex-wrap:nowrap !important;
        justify-content:flex-start !important;
        gap:8px !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        grid-template-columns:none !important;
        grid-auto-flow:unset !important;
        grid-auto-columns:unset !important;
        padding-bottom:6px;
        scroll-snap-type:x proximity;
        -webkit-overflow-scrolling:touch;
    }
    .storefront .latest-section .store-product-card{
        flex:0 0 42% !important;
        min-width:42% !important;
        max-width:42% !important;
        scroll-snap-align:start;
    }
}


/* =========================================================
   v1.0.193 — Fixed product image frames + full-image contain
   Keep every product image frame the same size. Portrait,
   landscape and square source images are scaled down to fit
   inside the frame without cropping or stretching.
   ========================================================= */
.storefront .catalog-card .product-card-image{
    aspect-ratio:4 / 3 !important;
    width:100% !important;
    height:auto !important;
    padding:8px !important;
    display:grid !important;
    place-items:center !important;
    overflow:hidden !important;
    background:#f5f6f7 !important;
}
.storefront .catalog-card .product-card-image img{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    transform:none !important;
}

.storefront .product-main-image{
    aspect-ratio:4 / 3 !important;
    width:100% !important;
    height:auto !important;
    padding:12px !important;
    display:grid !important;
    place-items:center !important;
    overflow:hidden !important;
    background:#f5f6f7 !important;
}
.storefront .product-main-image img{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    transform:none !important;
}
.storefront .product-thumbs button{
    overflow:hidden !important;
    background:#f5f6f7 !important;
}
.storefront .product-thumbs img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
}

@media(max-width:700px){
    .storefront .catalog-card .product-card-image{
        aspect-ratio:4 / 3 !important;
        padding:5px !important;
    }
    .storefront .product-main-image{
        aspect-ratio:4 / 3 !important;
        padding:8px !important;
    }
}


/* =========================================================
   v1.0.195 — Catalog full-image fit inside fixed 4:3 frames
   Use the full product image (not an old cropped thumbnail).
   Every card keeps the same frame size; portrait images scale
   down inside the frame without cropping, stretching or rotation.
   ========================================================= */
.storefront .catalog-card .product-card-image{
    aspect-ratio:4 / 3 !important;
    width:100% !important;
    height:auto !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    overflow:hidden !important;
    background:#f5f6f7 !important;
}
.storefront .catalog-card .product-card-image img{
    width:100% !important;
    height:100% !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    transform:none !important;
}

.storefront .product-main-image{
    aspect-ratio:4 / 3 !important;
    width:100% !important;
    height:auto !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    overflow:hidden !important;
    background:#f5f6f7 !important;
}
.storefront .product-main-image img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    transform:none !important;
}


/* =========================================================
   v1.0.196 — Fixed frame, true full-image display
   The frame NEVER changes size. The image itself uses natural aspect ratio
   and shrinks inside the frame, so portrait photos remain fully visible.
   ========================================================= */
.storefront .catalog-card .product-card-image,
.storefront .product-main-image{
    aspect-ratio:4 / 3 !important;
    width:100% !important;
    height:auto !important;
    overflow:hidden !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:#f5f6f7 !important;
}
.storefront .catalog-card .product-card-image img,
.storefront .product-main-image img{
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    display:block !important;
    transform:none !important;
}


/* =========================================================
   v1.0.197 — Catalog product titles: show full text
   Applies only to product cards on products.php.
   ========================================================= */
.storefront .catalog-card .product-card-body h3{
    display:block !important;
    -webkit-line-clamp:unset !important;
    -webkit-box-orient:initial !important;
    overflow:visible !important;
    min-height:0 !important;
    max-height:none !important;
    white-space:normal !important;
    text-overflow:clip !important;
}


/* =========================================================
   v1.0.198 — Catalog prices aligned at card bottom
   Keep catalog cards orderly even when product titles have
   different lengths, matching the Home card behavior.
   ========================================================= */
.storefront .catalog-card{
    display:flex !important;
    flex-direction:column !important;
    height:100% !important;
}
.storefront .catalog-card .product-card-image{
    flex:0 0 auto !important;
}
.storefront .catalog-card .product-card-body{
    display:flex !important;
    flex-direction:column !important;
    flex:1 1 auto !important;
}
.storefront .catalog-card .product-card-body strong{
    margin-top:auto !important;
    padding-top:8px;
}


/* =========================================================
   v1.0.199 — Catalog vehicle brand/model visual hierarchy
   - Keep ProdID muted gray.
   - Make vehicle brand/model darker blue and slightly bolder.
   ========================================================= */
.storefront .catalog-card .product-card-body > small:first-child{
    color:#8a929d !important;
    font-weight:400 !important;
}
.storefront .catalog-card .product-card-body > p{
    color:#173f70 !important;
    font-weight:700 !important;
}


/* =========================================================
   v1.0.200 — Catalog product title readability
   - Keep the existing font family.
   - Reduce weight and slightly enlarge text for easier reading.
   ========================================================= */
.storefront .catalog-card .product-card-body h3{
    font-size:14px !important;
    font-weight:600 !important;
    line-height:1.35 !important;
    letter-spacing:0 !important;
}
@media(max-width:700px){
    .storefront .catalog-card .product-card-body h3{
        font-size:12.5px !important;
        font-weight:600 !important;
        line-height:1.38 !important;
    }
}


/* =========================================================
   v1.0.202 — Home thumbnail full-image contain
   Keep using the lightweight 640px thumbnail files on Home.
   The image frame stays fixed; each thumbnail scales down inside it
   until the complete photo is visible, without crop/stretch/rotation.
   ========================================================= */
.storefront .recommended-section .product-card-image,
.storefront .latest-section .product-card-image{
    overflow:hidden !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}
.storefront .recommended-section .product-card-image img,
.storefront .latest-section .product-card-image img{
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    display:block !important;
    transform:none !important;
}

/* =========================================================
   v1.0.204 — Catalog pagination + per-page controls
   - Server-side LIMIT/OFFSET pagination.
   - Default page size comes from Admin > Settings > Display.
   - Customer can choose 30 / 50 / 100 / 200 items per page.
   ========================================================= */
.storefront .catalog-meta{
    gap:16px;
}
.storefront .catalog-meta-summary{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:4px;
}
.storefront .catalog-meta-summary small{
    color:#7a8490;
    font-size:12px;
    font-weight:500;
}
.storefront .catalog-meta-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:14px;
    flex-wrap:wrap;
}
.storefront .catalog-per-page-form{
    margin:0;
}
.storefront .catalog-per-page-form label{
    display:flex;
    align-items:center;
    gap:7px;
    color:#3f4b5a;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}
.storefront .catalog-per-page-form select{
    min-width:68px;
    height:36px;
    padding:0 28px 0 10px;
    border:1px solid #d5dae1;
    border-radius:7px;
    background:#fff;
    color:#111923;
    font-weight:700;
    cursor:pointer;
}
.storefront .catalog-clear{
    color:#e31b23;
    font-weight:700;
    white-space:nowrap;
}
.storefront .catalog-pagination{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-top:24px;
    padding-top:6px;
}
.storefront .catalog-page-numbers{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    flex-wrap:wrap;
}
.storefront .catalog-page-number,
.storefront .catalog-page-nav{
    min-width:38px;
    height:38px;
    padding:0 11px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid #d8dde4;
    border-radius:8px;
    background:#fff;
    color:#26313d;
    font-size:13px;
    font-weight:800;
    transition:.15s ease;
}
.storefront a.catalog-page-number:hover,
.storefront a.catalog-page-nav:hover{
    border-color:#aeb8c4;
    background:#f5f7f9;
    transform:translateY(-1px);
}
.storefront .catalog-page-number.is-current{
    background:#e31b23;
    border-color:#e31b23;
    color:#fff;
}
.storefront .catalog-page-nav.is-disabled{
    color:#a5adb7;
    background:#f5f6f8;
    cursor:default;
}
.storefront .catalog-page-ellipsis{
    min-width:24px;
    text-align:center;
    color:#7e8792;
    font-weight:700;
}

@media(max-width:700px){
    .storefront .catalog-meta{
        align-items:flex-start;
        flex-direction:column;
        gap:10px;
        padding-top:14px;
    }
    .storefront .catalog-meta-actions{
        width:100%;
        justify-content:space-between;
        gap:10px;
    }
    .storefront .catalog-per-page-form label{
        font-size:12px;
    }
    .storefront .catalog-per-page-form select{
        height:34px;
        min-width:62px;
        font-size:12px;
    }
    .storefront .catalog-pagination{
        gap:7px;
        margin-top:18px;
        justify-content:space-between;
    }
    .storefront .catalog-page-numbers{
        gap:4px;
        flex:1 1 auto;
    }
    .storefront .catalog-page-number,
    .storefront .catalog-page-nav{
        min-width:34px;
        height:36px;
        padding:0 8px;
        font-size:12px;
    }
    .storefront .catalog-page-nav{
        white-space:nowrap;
    }
}

/* =========================================================
   v1.0.205 — Mobile catalog meta: per-page control on same row
   - Left: total product count
   - Right: items-per-page selector
   - Range summary stays below the total count
   ========================================================= */
@media(max-width:700px){
    .storefront .catalog-meta{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) auto !important;
        column-gap:10px !important;
        row-gap:3px !important;
        align-items:start !important;
        padding-top:14px !important;
    }
    .storefront .catalog-meta-summary{
        display:contents !important;
    }
    .storefront .catalog-meta-summary > b{
        grid-column:1 !important;
        grid-row:1 !important;
        align-self:center !important;
        min-width:0;
    }
    .storefront .catalog-meta-summary > small{
        grid-column:1 !important;
        grid-row:2 !important;
        margin-top:1px !important;
    }
    .storefront .catalog-meta-actions{
        grid-column:2 !important;
        grid-row:1 / span 2 !important;
        width:auto !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:flex-end !important;
        justify-content:flex-start !important;
        gap:4px !important;
    }
    .storefront .catalog-per-page-form label{
        justify-content:flex-end !important;
    }
    .storefront .catalog-clear{
        font-size:11px !important;
        text-align:right !important;
    }
}


/* =========================================================
   v1.0.208 — Catalog product titles: Sarabun
   Keep Kanit for large headings/navigation, but use a more
   readable text face for compact multi-line product titles.
   ========================================================= */
.storefront .catalog-card .product-card-body h3{
    font-family:"Sarabun",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif !important;
    font-size:15px !important;
    font-weight:600 !important;
    line-height:1.40 !important;
    letter-spacing:0 !important;
}
@media(max-width:700px){
    .storefront .catalog-card .product-card-body h3{
        font-size:13px !important;
        font-weight:600 !important;
        line-height:1.40 !important;
    }
}


/* =========================================================
   v1.0.209 — Home product titles: Sarabun
   Use the same readable product-title typeface approved for
   the catalog, while preserving the existing Home card sizes.
   ========================================================= */
.storefront .recommended-section .product-card-body h3,
.storefront .latest-section .product-card-body h3{
    font-family:"Sarabun",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif !important;
    font-weight:600 !important;
    line-height:1.40 !important;
    letter-spacing:0 !important;
}


/* =========================================================
   v1.0.210 — Product detail: last updated date
   Shown only on the product detail page, next to ProdID.
   ========================================================= */
.storefront .product-detail-meta{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:3px;
    text-align:right;
}
.storefront .product-detail-meta small{
    display:block;
}
.storefront .product-updated-at{
    color:#667085 !important;
    font-family:"Sarabun",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
    font-size:12px !important;
    font-weight:500;
    white-space:nowrap;
}
@media(max-width:700px){
    .storefront .product-updated-at{
        font-size:11px !important;
    }
}


/* =========================================================
   v1.0.211 — Product detail primary contact action
   - Keep the floating LINE contact as the LINE entry point.
   - Use one full-width phone/check-stock CTA in the buy section.
   ========================================================= */
.storefront .product-detail-section .product-actions{
    grid-template-columns:1fr !important;
}
.storefront .product-detail-section .product-actions .store-btn.call{
    width:100% !important;
}


/* =========================================================
   v1.0.212 — Product detail fullscreen image lightbox
   Main image opens a full-screen viewer. Previous/next browse all
   product images without closing. X, black backdrop, and Escape close it.
   ========================================================= */
.storefront .product-main-image img{
    cursor:zoom-in;
}
.product-lightbox{
    position:fixed;
    inset:0;
    z-index:10050;
    display:none;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.94);
    padding:28px 72px;
}
.product-lightbox.is-open{
    display:flex;
}
body.product-lightbox-open{
    overflow:hidden !important;
}
.product-lightbox-stage{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
}
.product-lightbox-stage img{
    display:block;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
    object-position:center center;
    pointer-events:auto;
    user-select:none;
    -webkit-user-drag:none;
}
.product-lightbox-close,
.product-lightbox-nav{
    position:absolute;
    z-index:2;
    border:0;
    color:#fff;
    background:rgba(0,0,0,.35);
    cursor:pointer;
    display:grid;
    place-items:center;
    transition:background .15s ease, transform .15s ease;
}
.product-lightbox-close:hover,
.product-lightbox-nav:hover{
    background:rgba(255,255,255,.16);
}
.product-lightbox-close{
    top:18px;
    right:22px;
    width:48px;
    height:48px;
    border-radius:50%;
    font-size:38px;
    font-weight:300;
    line-height:1;
}
.product-lightbox-nav{
    top:50%;
    width:52px;
    height:70px;
    margin-top:-35px;
    border-radius:8px;
    font-size:56px;
    font-weight:300;
    line-height:1;
}
.product-lightbox-prev{left:14px}
.product-lightbox-next{right:14px}
.product-lightbox-counter{
    position:absolute;
    top:20px;
    left:22px;
    z-index:3;
    min-width:58px;
    height:36px;
    padding:0 13px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,.48);
    color:#fff;
    font-family:system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
    font-size:14px;
    font-weight:700;
    line-height:1;
    letter-spacing:.01em;
    user-select:none;
    pointer-events:none;
}
.product-lightbox-nav:active,
.product-lightbox-close:active{
    transform:scale(.96);
}
@media(max-width:700px){
    .product-lightbox{
        padding:64px 46px 34px;
    }
    .product-lightbox-counter{
        top:14px;
        left:12px;
        min-width:54px;
        height:32px;
        padding:0 11px;
        font-size:13px;
    }
    .product-lightbox-close{
        top:12px;
        right:12px;
        width:44px;
        height:44px;
        font-size:34px;
    }
    .product-lightbox-nav{
        width:40px;
        height:62px;
        margin-top:-31px;
        font-size:46px;
        background:rgba(0,0,0,.48);
    }
    .product-lightbox-prev{left:4px}
    .product-lightbox-next{right:4px}
}


/* =========================================================
   v1.0.214 — Product lightbox thumbnail strip + clean close button
   ========================================================= */
.product-lightbox{
    padding-bottom:112px !important;
}
.product-lightbox-close{
    outline:none !important;
    box-shadow:none !important;
    appearance:none !important;
    -webkit-appearance:none !important;
}
.product-lightbox-close:focus,
.product-lightbox-close:focus-visible{
    outline:none !important;
    box-shadow:none !important;
}
.product-lightbox-thumbs{
    position:absolute;
    left:50%;
    bottom:18px;
    z-index:4;
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    max-width:min(78vw,980px);
    padding:6px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:thin;
    background:rgba(0,0,0,.46);
    border-radius:10px;
}
.product-lightbox-thumb{
    flex:0 0 70px;
    width:70px;
    height:58px;
    padding:2px;
    border:2px solid rgba(255,255,255,.22);
    border-radius:7px;
    background:#111;
    cursor:pointer;
    overflow:hidden;
    opacity:.72;
    transition:border-color .15s ease, opacity .15s ease, transform .15s ease;
}
.product-lightbox-thumb:hover{
    opacity:1;
    transform:translateY(-1px);
}
.product-lightbox-thumb.is-active{
    border-color:#fff;
    opacity:1;
}
.product-lightbox-thumb img{
    width:100%;
    height:100%;
    display:block;
    object-fit:contain;
    object-position:center;
    background:#fff;
    border-radius:4px;
}
@media(max-width:700px){
    .product-lightbox{
        padding-bottom:96px !important;
    }
    .product-lightbox-thumbs{
        bottom:10px;
        gap:6px;
        max-width:calc(100vw - 24px);
        padding:5px;
        border-radius:8px;
    }
    .product-lightbox-thumb{
        flex-basis:58px;
        width:58px;
        height:50px;
    }
}


/* =========================================================
   v1.0.215 — Lightbox maximum-screen image display
   - Let the full-resolution image use almost the entire viewport.
   - Navigation, counter and thumbnails overlay the viewer instead of
     reserving large margins around the image.
   - Keep intrinsic image size: never force a small source image to upscale.
   ========================================================= */
.product-lightbox{
    padding:0 !important;
    z-index:1100000 !important;
    background:rgba(0,0,0,.97) !important;
}
.product-lightbox-stage{
    position:absolute !important;
    inset:6px 8px !important;
    width:auto !important;
    height:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}
.product-lightbox-stage img{
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    transform:none !important;
}
.product-lightbox-thumbs{
    bottom:10px !important;
    background:rgba(0,0,0,.62) !important;
}
@media(max-width:700px){
    .product-lightbox{
        padding:0 !important;
    }
    .product-lightbox-stage{
        inset:4px !important;
    }
    .product-lightbox-thumbs{
        bottom:max(8px, env(safe-area-inset-bottom)) !important;
    }
}


/* =========================================================
   v1.0.216 — Product detail thumbnail gallery navigation
   Replace the browser scrollbar with clean left/right controls.
   Desktop: arrows appear only when thumbnails overflow.
   Mobile/tablet: scrollbar stays hidden and the strip swipes normally.
   ========================================================= */
.storefront .product-thumbs-wrap{
    display:grid;
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:center;
    gap:7px;
    margin-top:10px;
    min-width:0;
}
.storefront .product-thumbs-wrap .product-thumbs{
    min-width:0;
    margin-top:0 !important;
    padding:2px 0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scroll-behavior:smooth;
    scrollbar-width:none;
    -ms-overflow-style:none;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
}
.storefront .product-thumbs-wrap .product-thumbs::-webkit-scrollbar{
    display:none;
    width:0;
    height:0;
}
.storefront .product-thumbs-scroll{
    display:none;
    width:34px;
    height:54px;
    padding:0;
    border:1px solid #d6dce3;
    border-radius:8px;
    background:#fff;
    color:#17202a;
    align-items:center;
    justify-content:center;
    font-size:27px;
    line-height:1;
    cursor:pointer;
    transition:.16s ease;
}
.storefront .product-thumbs-wrap.has-overflow .product-thumbs-scroll{
    display:flex;
}
.storefront .product-thumbs-scroll:hover{
    border-color:#9aa6b2;
    background:#f4f6f8;
}
.storefront .product-thumbs-scroll:disabled{
    opacity:.30;
    cursor:default;
    background:#f7f8f9;
}
.storefront .product-thumbs button.is-active{
    border-color:#111923 !important;
    box-shadow:0 0 0 1px #111923;
}
@media(max-width:700px){
    .storefront .product-thumbs-wrap{
        display:block;
        margin-top:8px;
    }
    .storefront .product-thumbs-scroll,
    .storefront .product-thumbs-wrap.has-overflow .product-thumbs-scroll{
        display:none !important;
    }
    .storefront .product-thumbs-wrap .product-thumbs{
        display:flex !important;
        gap:7px !important;
        overflow-x:auto !important;
        touch-action:pan-x;
    }
}


/* =========================================================
   v1.0.217 — Product detail summary auto height
   Keep the right-side product information card independent from
   the gallery height. It should end naturally after its content.
   ========================================================= */
.storefront .product-detail{
    align-items:start !important;
}
.storefront .product-summary{
    align-self:start !important;
    height:auto !important;
    min-height:0 !important;
}


/* =========================================================
   v1.0.218 — Product summary true content height
   Force the right card to size to its own content, not the gallery row,
   and remove trailing rich-text spacing that can leave a large blank tail.
   ========================================================= */
.storefront .product-detail{
    align-items:start !important;
    grid-auto-rows:max-content !important;
}
.storefront .product-detail > .product-summary{
    display:block !important;
    align-self:start !important;
    height:fit-content !important;
    min-height:0 !important;
    max-height:none !important;
}
.storefront .product-description{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    padding-bottom:0 !important;
}
.storefront .product-description-content{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
}
.storefront .product-description-content > :last-child{
    margin-bottom:0 !important;
}


/* =========================================================
   v1.0.221 — Product detail equal-height columns on desktop
   Desktop: keep the right information card's outer border aligned
   with the bottom of the gallery card, even when the description is short.
   Mobile: keep natural content height.
   ========================================================= */
@media(min-width:701px){
    .storefront .product-detail{
        align-items:stretch !important;
        grid-auto-rows:auto !important;
    }
    .storefront .product-detail > .product-gallery,
    .storefront .product-detail > .product-summary{
        align-self:stretch !important;
        height:auto !important;
    }
    .storefront .product-detail > .product-summary{
        min-height:100% !important;
        max-height:none !important;
        box-sizing:border-box !important;
    }
}
@media(max-width:700px){
    .storefront .product-detail{
        align-items:start !important;
    }
    .storefront .product-detail > .product-summary{
        align-self:start !important;
        height:auto !important;
        min-height:0 !important;
    }
}


/* =========================================================
   v1.0.223 — LOCK product gallery height on desktop
   The left gallery must NEVER stretch vertically because the
   right product-details card is taller.
   - Gallery keeps only its own natural content height.
   - If the right card is shorter, it may still stretch to the
     gallery row height as before.
   - If the right card is taller, only the right side grows;
     the gallery stays locked at its normal height.
   ========================================================= */
@media(min-width:701px){
    .storefront .product-detail{
        align-items:stretch !important;
    }
    .storefront .product-detail > .product-gallery{
        align-self:start !important;
        height:fit-content !important;
        min-height:0 !important;
        max-height:none !important;
        box-sizing:border-box !important;
    }
    .storefront .product-detail > .product-summary{
        align-self:stretch !important;
    }
}


/* =========================================================
   v1.0.226 — Mobile product gallery: fixed clean frame + full image
   Desktop is untouched.
   On mobile the main photo must never be enlarged/cropped by its
   natural dimensions. Keep a compact 4:3 frame and fit the ENTIRE
   image inside it.
   ========================================================= */
@media(max-width:700px){
    .storefront .product-detail{
        grid-template-columns:minmax(0,1fr) !important;
        gap:10px !important;
        align-items:start !important;
    }

    .storefront .product-detail > .product-gallery{
        width:100% !important;
        min-width:0 !important;
        height:fit-content !important;
        min-height:0 !important;
        align-self:start !important;
        padding:8px !important;
        box-sizing:border-box !important;
    }

    .storefront .product-main-image{
        width:100% !important;
        height:auto !important;
        min-height:0 !important;
        max-height:none !important;
        aspect-ratio:4 / 3 !important;
        padding:0 !important;
        display:grid !important;
        place-items:center !important;
        overflow:hidden !important;
        background:#f5f6f7 !important;
    }

    .storefront .product-main-image img{
        width:100% !important;
        height:100% !important;
        min-width:0 !important;
        min-height:0 !important;
        max-width:100% !important;
        max-height:100% !important;
        object-fit:contain !important;
        object-position:center center !important;
        transform:none !important;
        display:block !important;
    }

    .storefront .product-thumbs-wrap{
        width:100% !important;
        min-width:0 !important;
        margin-top:7px !important;
    }

    .storefront .product-thumbs-wrap .product-thumbs{
        width:100% !important;
        min-width:0 !important;
        gap:6px !important;
        padding:2px 0 !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
    }

    .storefront .product-thumbs button{
        flex:0 0 64px !important;
        width:64px !important;
        height:56px !important;
        padding:2px !important;
    }

    .storefront .product-thumbs img{
        width:100% !important;
        height:100% !important;
        object-fit:contain !important;
        object-position:center center !important;
    }

    .storefront .product-detail > .product-summary{
        width:100% !important;
        min-width:0 !important;
        height:auto !important;
        min-height:0 !important;
        align-self:start !important;
        box-sizing:border-box !important;
    }
}


/* =========================================================
   v1.0.227 — Mobile lightbox: true fullscreen + centered image
   Desktop lightbox is untouched.
   Reserve a small top area for counter/close and a bottom area for
   thumbnails, then center the FULL image inside the remaining viewport.
   Wide images fill the available width; portrait images fill the
   available height. Never crop or stretch.
   ========================================================= */
@media(max-width:700px){
    .product-lightbox{
        position:fixed !important;
        inset:0 !important;
        width:100vw !important;
        height:100vh !important;
        height:100dvh !important;
        min-height:100dvh !important;
        padding:0 !important;
        margin:0 !important;
        overflow:hidden !important;
        align-items:stretch !important;
        justify-content:stretch !important;
        background:rgba(0,0,0,.97) !important;
    }

    .product-lightbox.is-open{
        display:block !important;
    }

    .product-lightbox-stage{
        position:absolute !important;
        top:max(54px, env(safe-area-inset-top)) !important;
        right:8px !important;
        bottom:76px !important;
        left:8px !important;
        width:auto !important;
        height:auto !important;
        min-width:0 !important;
        min-height:0 !important;
        margin:0 !important;
        padding:0 !important;
        display:grid !important;
        place-items:center !important;
        overflow:hidden !important;
        pointer-events:none !important;
    }

    .product-lightbox-stage img{
        display:block !important;
        width:auto !important;
        height:auto !important;
        max-width:100% !important;
        max-height:100% !important;
        min-width:0 !important;
        min-height:0 !important;
        object-fit:contain !important;
        object-position:center center !important;
        margin:auto !important;
        transform:none !important;
        pointer-events:auto !important;
    }

    .product-lightbox-counter{
        top:max(12px, env(safe-area-inset-top)) !important;
        left:12px !important;
        z-index:8 !important;
    }

    .product-lightbox-close{
        top:max(10px, env(safe-area-inset-top)) !important;
        right:10px !important;
        z-index:9 !important;
    }

    .product-lightbox-nav{
        top:50% !important;
        z-index:8 !important;
        margin-top:-31px !important;
    }

    .product-lightbox-prev{left:4px !important}
    .product-lightbox-next{right:4px !important}

    .product-lightbox-thumbs{
        left:50% !important;
        right:auto !important;
        bottom:max(8px, env(safe-area-inset-bottom)) !important;
        z-index:9 !important;
        max-width:calc(100vw - 20px) !important;
        transform:translateX(-50%) !important;
    }
}


/* =========================================================
   v1.0.228 — Mobile lightbox viewport containment fix
   Fixes the mobile white strip / constrained overlay issue.
   The lightbox is pinned to every viewport edge instead of relying on
   100vw sizing, and the image is centered inside the usable area.
   Desktop remains unchanged.
   ========================================================= */
@media(max-width:700px){
    /* v1.0.229 — lock scrolling ONLY while the lightbox is actually open.
       Do NOT lock <html> globally; that was preventing normal mobile
       page scrolling and made the footer unreachable. */
    body.product-lightbox-open{
        overflow:hidden !important;
    }

    body.product-lightbox-open > .product-lightbox{
        position:fixed !important;
        top:0 !important;
        right:0 !important;
        bottom:0 !important;
        left:0 !important;
        inset:0 !important;

        width:auto !important;
        height:auto !important;
        min-width:100% !important;
        min-height:100% !important;
        max-width:none !important;
        max-height:none !important;

        margin:0 !important;
        padding:0 !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
        background:#000 !important;
        z-index:1100000 !important;
    }

    body.product-lightbox-open > .product-lightbox.is-open{
        display:block !important;
    }

    body.product-lightbox-open > .product-lightbox .product-lightbox-stage{
        position:absolute !important;
        top:50px !important;
        right:0 !important;
        bottom:72px !important;
        left:0 !important;
        inset:50px 0 72px 0 !important;

        width:auto !important;
        height:auto !important;
        min-width:0 !important;
        min-height:0 !important;
        max-width:none !important;
        max-height:none !important;

        margin:0 !important;
        padding:4px !important;
        box-sizing:border-box !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        overflow:hidden !important;
        pointer-events:none !important;
    }

    body.product-lightbox-open > .product-lightbox .product-lightbox-stage img{
        display:block !important;
        width:auto !important;
        height:auto !important;
        max-width:100% !important;
        max-height:100% !important;
        min-width:0 !important;
        min-height:0 !important;
        object-fit:contain !important;
        object-position:center center !important;
        margin:auto !important;
        padding:0 !important;
        transform:none !important;
        pointer-events:auto !important;
    }

    body.product-lightbox-open > .product-lightbox .product-lightbox-counter{
        top:10px !important;
        left:10px !important;
        z-index:12 !important;
    }

    body.product-lightbox-open > .product-lightbox .product-lightbox-close{
        top:8px !important;
        right:8px !important;
        z-index:13 !important;
    }

    body.product-lightbox-open > .product-lightbox .product-lightbox-nav{
        top:50% !important;
        margin-top:-31px !important;
        z-index:12 !important;
    }

    body.product-lightbox-open > .product-lightbox .product-lightbox-prev{
        left:4px !important;
    }

    body.product-lightbox-open > .product-lightbox .product-lightbox-next{
        right:4px !important;
    }

    body.product-lightbox-open > .product-lightbox .product-lightbox-thumbs{
        left:50% !important;
        right:auto !important;
        bottom:max(8px, env(safe-area-inset-bottom)) !important;
        max-width:calc(100% - 16px) !important;
        transform:translateX(-50%) !important;
        z-index:13 !important;
    }
}


/* =========================================================
   v1.0.230 — Mobile footer width / overflow fix
   The desktop footer grid uses !important multi-column sizing.
   On mobile that rule was winning over the older 1-column rule,
   causing Menu / Contact columns to extend outside the viewport.

   Mobile only:
   - force footer content to one real column
   - keep every footer block inside the viewport
   - allow long text/contact values to wrap
   Desktop is untouched.
   ========================================================= */
@media(max-width:700px){
    .storefront .store-footer{
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        overflow-x:hidden !important;
        box-sizing:border-box !important;
    }

    .storefront .store-footer .store-shell{
        width:calc(100% - 20px) !important;
        max-width:calc(100% - 20px) !important;
        min-width:0 !important;
        margin-left:auto !important;
        margin-right:auto !important;
        box-sizing:border-box !important;
    }

    .storefront .store-footer .footer-main{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) !important;
        grid-auto-columns:minmax(0,1fr) !important;
        gap:20px !important;
        width:calc(100% - 20px) !important;
        max-width:calc(100% - 20px) !important;
        min-width:0 !important;
        padding-top:22px !important;
        padding-bottom:18px !important;
        box-sizing:border-box !important;
    }

    .storefront .store-footer .footer-brand,
    .storefront .store-footer .footer-menu,
    .storefront .store-footer .footer-contact{
        grid-column:1 !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        box-sizing:border-box !important;
    }

    .storefront .store-footer .footer-brand img{
        width:min(260px,100%) !important;
        max-width:100% !important;
        height:auto !important;
    }

    .storefront .store-footer .footer-brand p,
    .storefront .store-footer .footer-menu a,
    .storefront .store-footer .footer-contact a,
    .storefront .store-footer .footer-contact-row,
    .storefront .store-footer .footer-contact-row > div{
        max-width:100% !important;
        min-width:0 !important;
        overflow-wrap:anywhere !important;
        word-break:normal !important;
    }

    .storefront .store-footer .footer-bottom{
        width:calc(100% - 20px) !important;
        max-width:calc(100% - 20px) !important;
        min-width:0 !important;
        margin-left:auto !important;
        margin-right:auto !important;
        margin-bottom:64px !important;
        box-sizing:border-box !important;
    }
}


/* =========================================================
   v1.0.231 — Mobile footer: Menu + Contact in 2 columns
   Row 1: brand/logo spans full width
   Row 2: Menu | Contact
   Footer bottom spans full width
   Desktop remains unchanged.
   ========================================================= */
@media(max-width:700px){
    .storefront .store-footer .footer-main{
        display:grid !important;
        grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) !important;
        grid-template-areas:
            "brand brand"
            "menu contact" !important;
        column-gap:14px !important;
        row-gap:20px !important;
        align-items:start !important;
    }

    .storefront .store-footer .footer-brand{
        grid-area:brand !important;
        grid-column:auto !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
    }

    .storefront .store-footer .footer-menu{
        grid-area:menu !important;
        grid-column:auto !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
    }

    .storefront .store-footer .footer-contact{
        grid-area:contact !important;
        grid-column:auto !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
    }

    .storefront .store-footer .footer-menu h3,
    .storefront .store-footer .footer-contact h3{
        margin-top:0 !important;
    }

    .storefront .store-footer .footer-menu a,
    .storefront .store-footer .footer-contact a,
    .storefront .store-footer .footer-contact-row,
    .storefront .store-footer .footer-contact-row > div{
        max-width:100% !important;
        min-width:0 !important;
        overflow-wrap:anywhere !important;
        word-break:normal !important;
    }

    .storefront .store-footer .footer-bottom{
        grid-column:1 / -1 !important;
    }
}


/* =========================================================
   v1.0.232 — Mobile footer visual balance
   - Brand/logo centered at the top
   - Menu and Contact use equal 50/50 columns
   - Thin divider between the two columns
   - Headings begin on the same baseline
   - Copyright centered
   Desktop remains unchanged.
   ========================================================= */
@media(max-width:700px){
    .storefront .store-footer .footer-main{
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
        grid-template-areas:
            "brand brand"
            "menu contact" !important;
        column-gap:0 !important;
        row-gap:16px !important;
        padding-top:18px !important;
        padding-bottom:16px !important;
    }

    .storefront .store-footer .footer-brand{
        grid-area:brand !important;
        text-align:center !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        padding:0 4px 16px !important;
        margin:0 !important;
        border-bottom:1px solid rgba(255,255,255,.10) !important;
    }

    .storefront .store-footer .footer-brand img{
        display:block !important;
        width:min(220px,78%) !important;
        max-width:220px !important;
        height:auto !important;
        margin:0 auto 8px !important;
    }

    .storefront .store-footer .footer-brand p{
        width:100% !important;
        max-width:285px !important;
        margin:0 auto !important;
        text-align:center !important;
        font-size:11px !important;
        line-height:1.55 !important;
        color:#c8d0d8 !important;
    }

    .storefront .store-footer .footer-menu{
        grid-area:menu !important;
        padding:0 12px 0 2px !important;
        margin:0 !important;
        box-sizing:border-box !important;
    }

    .storefront .store-footer .footer-contact{
        grid-area:contact !important;
        padding:0 2px 0 14px !important;
        margin:0 !important;
        border-left:1px solid rgba(255,255,255,.12) !important;
        box-sizing:border-box !important;
    }

    .storefront .store-footer .footer-menu h3,
    .storefront .store-footer .footer-contact h3{
        margin:0 0 10px !important;
        padding:0 !important;
        font-size:15px !important;
        line-height:1.2 !important;
        min-height:18px !important;
    }

    .storefront .store-footer .footer-menu a{
        margin:0 0 7px !important;
        font-size:11px !important;
        line-height:1.35 !important;
    }

    .storefront .store-footer .footer-contact > a,
    .storefront .store-footer .footer-contact-row{
        margin:0 0 9px !important;
        gap:7px !important;
        align-items:flex-start !important;
        font-size:10.5px !important;
        line-height:1.4 !important;
    }

    .storefront .store-footer .footer-contact > a > span,
    .storefront .store-footer .footer-contact-row > span{
        flex:0 0 26px !important;
        width:26px !important;
        height:26px !important;
        min-width:26px !important;
        font-size:11px !important;
    }

    .storefront .store-footer .footer-contact-row > div{
        padding-top:3px !important;
    }

    .storefront .store-footer .footer-bottom{
        text-align:center !important;
        padding-top:12px !important;
        padding-bottom:12px !important;
    }

    .storefront .store-footer .footer-bottom small{
        display:block !important;
        width:100% !important;
        text-align:center !important;
        font-size:9.5px !important;
    }
}


/* =========================================================
   v1.0.233 — Mobile footer: larger type + centered balance
   Keep the 2-column Menu / Contact concept, but make it easier
   to read and visually centered instead of left-heavy.
   Desktop remains unchanged.
   ========================================================= */
@media(max-width:700px){
    .storefront .store-footer .footer-main{
        width:min(100% - 24px, 360px) !important;
        max-width:360px !important;
        margin-left:auto !important;
        margin-right:auto !important;
        grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
        column-gap:0 !important;
        row-gap:18px !important;
        padding-top:20px !important;
        padding-bottom:18px !important;
    }

    .storefront .store-footer .footer-brand{
        padding:0 6px 17px !important;
        text-align:center !important;
        align-items:center !important;
    }

    .storefront .store-footer .footer-brand img{
        width:min(240px,86%) !important;
        max-width:240px !important;
        margin:0 auto 9px !important;
    }

    .storefront .store-footer .footer-brand p{
        max-width:320px !important;
        font-size:12.5px !important;
        line-height:1.55 !important;
        text-align:center !important;
    }

    .storefront .store-footer .footer-menu{
        padding:0 16px 0 8px !important;
        text-align:left !important;
    }

    .storefront .store-footer .footer-contact{
        padding:0 8px 0 16px !important;
        text-align:left !important;
    }

    .storefront .store-footer .footer-menu h3,
    .storefront .store-footer .footer-contact h3{
        font-size:17px !important;
        line-height:1.25 !important;
        margin-bottom:12px !important;
        min-height:21px !important;
    }

    .storefront .store-footer .footer-menu a{
        display:block !important;
        font-size:13px !important;
        line-height:1.45 !important;
        margin-bottom:8px !important;
    }

    .storefront .store-footer .footer-contact > a,
    .storefront .store-footer .footer-contact-row{
        font-size:12px !important;
        line-height:1.45 !important;
        gap:8px !important;
        margin-bottom:11px !important;
    }

    .storefront .store-footer .footer-contact > a > span,
    .storefront .store-footer .footer-contact-row > span{
        flex:0 0 28px !important;
        width:28px !important;
        height:28px !important;
        min-width:28px !important;
        font-size:12px !important;
    }

    .storefront .store-footer .footer-contact-row > div{
        padding-top:2px !important;
    }

    .storefront .store-footer .footer-bottom{
        width:min(100% - 24px, 360px) !important;
        max-width:360px !important;
        margin-left:auto !important;
        margin-right:auto !important;
        text-align:center !important;
        padding-top:13px !important;
        padding-bottom:13px !important;
    }

    .storefront .store-footer .footer-bottom small{
        font-size:10.5px !important;
        line-height:1.4 !important;
        text-align:center !important;
    }
}


/* =========================================================
   v1.0.234 — Mobile footer +2px typography + single bottom divider
   - Increase footer text by ~2px for easier reading
   - Remove legacy border from <small>, leaving only the footer-bottom
     top border as the single divider above copyright
   Desktop remains unchanged.
   ========================================================= */
@media(max-width:700px){
    .storefront .store-footer .footer-brand p{
        font-size:14.5px !important;
    }

    .storefront .store-footer .footer-menu h3,
    .storefront .store-footer .footer-contact h3{
        font-size:19px !important;
    }

    .storefront .store-footer .footer-menu a{
        font-size:15px !important;
    }

    .storefront .store-footer .footer-contact > a,
    .storefront .store-footer .footer-contact-row{
        font-size:14px !important;
    }

    .storefront .store-footer .footer-contact > a > span,
    .storefront .store-footer .footer-contact-row > span{
        font-size:14px !important;
    }

    .storefront .store-footer .footer-bottom small{
        font-size:12.5px !important;
        border-top:0 !important;
        padding-top:0 !important;
    }
}


/* =========================================================
   v1.0.235 — Mobile LINE chat replaces floating phone button
   Reuse the approved desktop LINE popup/behavior on mobile.
   Only the mobile launcher changes to a compact circular LINE button.
   Desktop remains unchanged.
   ========================================================= */
@media(max-width:700px){
    /* Retire the old floating telephone circle on mobile. */
    .storefront .float-call{
        display:none !important;
    }

    /* Enable the same LINE widget that is already used on desktop. */
    #teera-line-widget{
        display:block !important;
        right:12px !important;
        bottom:78px !important; /* above the fixed mobile bottom navigation */
        z-index:999999 !important;
    }

    /* Same popup content/behavior as PC, fitted safely to mobile width. */
    #teera-line-widget .teera-line-widget__panel{
        right:0 !important;
        bottom:64px !important;
        width:calc(100vw - 24px) !important;
        max-width:360px !important;
        border-radius:18px !important;
        transform-origin:bottom right !important;
    }

    /* Circular green LINE launcher: icon only, no text label. */
    #teera-line-widget .teera-line-widget__fab{
        width:52px !important;
        min-width:52px !important;
        height:52px !important;
        padding:0 !important;
        border-radius:50% !important;
        gap:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        box-shadow:0 7px 20px rgba(0,118,49,.32) !important;
    }

    #teera-line-widget .teera-line-widget__fab-text{
        display:none !important;
    }

    #teera-line-widget .teera-line-widget__fab-icon{
        width:28px !important;
        height:28px !important;
        flex:0 0 28px !important;
        font-size:8px !important;
        background:#fff !important;
        color:#06c755 !important;
        border-radius:50% !important;
    }

    #teera-line-widget .teera-line-widget__fab b{
        top:2px !important;
        right:3px !important;
        width:9px !important;
        height:9px !important;
    }

    #teera-line-widget .teera-line-widget__fab::after{
        inset:-5px !important;
        border-radius:50% !important;
    }

    /* Keep desktop popup design, only make mobile content comfortably readable. */
    #teera-line-widget .teera-line-widget__head{
        min-height:90px !important;
        padding:16px 46px 16px 16px !important;
    }

    #teera-line-widget .teera-line-widget__body{
        height:236px !important;
        padding:16px 18px 19px !important;
    }
}


/* v1.0.236 — Mobile anchor clearance for bottom navigation */
@media(max-width:700px){
    .storefront #categories,
    .storefront #catalog-search{
        scroll-margin-top:88px !important;
    }
}


/* =========================================================
   v1.0.237 — Mobile Category Bottom Sheet
   ========================================================= */
@media(max-width:700px){
    /* Button and anchors share the exact same bottom-nav language. */
    .mobile-bottom-nav a,
    .mobile-bottom-nav button{
        flex:1 !important;
        min-width:0 !important;
        height:100% !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:2px !important;
        padding:0 !important;
        margin:0 !important;
        border:0 !important;
        border-radius:0 !important;
        background:transparent !important;
        color:#343b44 !important;
        font:inherit !important;
        font-size:10px !important;
        line-height:1.15 !important;
        text-decoration:none !important;
        cursor:pointer !important;
        -webkit-tap-highlight-color:transparent !important;
    }

    .mobile-bottom-nav a span,
    .mobile-bottom-nav button span{
        display:block !important;
        font-size:21px !important;
        line-height:1 !important;
    }

    .mobile-bottom-nav a.active,
    .mobile-bottom-nav button.active{
        color:#e31b23 !important;
        font-weight:800 !important;
    }

    body.mobile-category-open{
        overflow:hidden !important;
    }

    .mobile-category-sheet{
        position:fixed !important;
        inset:0 !important;
        z-index:1000200 !important;
        pointer-events:none !important;
        visibility:hidden !important;
    }

    .mobile-category-sheet.is-open{
        pointer-events:auto !important;
        visibility:visible !important;
    }

    .mobile-category-sheet__backdrop{
        position:absolute !important;
        inset:0 !important;
        width:100% !important;
        height:100% !important;
        border:0 !important;
        padding:0 !important;
        background:rgba(3,10,17,.54) !important;
        opacity:0 !important;
        transition:opacity .22s ease !important;
    }

    .mobile-category-sheet.is-open .mobile-category-sheet__backdrop{
        opacity:1 !important;
    }

    .mobile-category-sheet__panel{
        position:absolute !important;
        left:0 !important;
        right:0 !important;
        bottom:0 !important;
        width:100% !important;
        max-height:min(78vh,690px) !important;
        overflow:auto !important;
        overscroll-behavior:contain !important;
        background:#fff !important;
        border-radius:22px 22px 0 0 !important;
        box-shadow:0 -12px 36px rgba(0,0,0,.22) !important;
        padding:7px 16px calc(82px + env(safe-area-inset-bottom)) !important;
        box-sizing:border-box !important;
        transform:translateY(102%) !important;
        transition:transform .26s cubic-bezier(.2,.78,.28,1) !important;
        outline:none !important;
    }

    .mobile-category-sheet.is-open .mobile-category-sheet__panel{
        transform:translateY(0) !important;
    }

    .mobile-category-sheet__handle{
        width:42px !important;
        height:4px !important;
        margin:1px auto 10px !important;
        border-radius:99px !important;
        background:#cbd2da !important;
    }

    .mobile-category-sheet__head{
        display:flex !important;
        align-items:flex-start !important;
        justify-content:space-between !important;
        gap:12px !important;
        padding:2px 0 13px !important;
        border-bottom:1px solid #e5e9ee !important;
    }

    .mobile-category-sheet__head strong{
        display:block !important;
        color:#111827 !important;
        font-size:20px !important;
        line-height:1.25 !important;
        font-weight:800 !important;
    }

    .mobile-category-sheet__head small{
        display:block !important;
        margin-top:3px !important;
        color:#6b7280 !important;
        font-size:12px !important;
        line-height:1.35 !important;
    }

    .mobile-category-sheet__close{
        flex:0 0 40px !important;
        width:40px !important;
        height:40px !important;
        border:0 !important;
        border-radius:50% !important;
        background:#f1f3f5 !important;
        color:#27313c !important;
        font-size:27px !important;
        line-height:1 !important;
        cursor:pointer !important;
    }

    .mobile-category-sheet__grid{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:9px !important;
        padding:14px 0 12px !important;
    }

    .mobile-category-sheet__item{
        min-width:0 !important;
        min-height:58px !important;
        display:grid !important;
        grid-template-columns:34px minmax(0,1fr) 12px !important;
        align-items:center !important;
        gap:8px !important;
        padding:9px 10px !important;
        border:1px solid #dfe4ea !important;
        border-radius:12px !important;
        background:#fff !important;
        color:#101820 !important;
        text-decoration:none !important;
        box-sizing:border-box !important;
    }

    .mobile-category-sheet__icon{
        width:34px !important;
        height:34px !important;
        border-radius:50% !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        background:#f2f4f7 !important;
        color:#1e3347 !important;
        font-size:17px !important;
        font-weight:800 !important;
    }

    .mobile-category-sheet__item b{
        min-width:0 !important;
        font-size:12.5px !important;
        line-height:1.25 !important;
        font-weight:700 !important;
        overflow-wrap:anywhere !important;
    }

    .mobile-category-sheet__item i{
        color:#8a96a3 !important;
        font-size:19px !important;
        line-height:1 !important;
        font-style:normal !important;
    }

    .mobile-category-sheet__all{
        width:100% !important;
        min-height:46px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:8px !important;
        border-radius:11px !important;
        background:#101923 !important;
        color:#fff !important;
        font-size:14px !important;
        font-weight:800 !important;
        text-decoration:none !important;
    }

    .mobile-category-sheet__all span{
        font-size:19px !important;
        line-height:1 !important;
    }
}

@media(max-width:350px){
    .mobile-category-sheet__grid{
        grid-template-columns:minmax(0,1fr) !important;
    }
}


/* =========================================================
   v1.0.238 — Mobile category bottom-sheet SVG icon system
   One consistent line-icon family replaces mixed Unicode symbols.
   ========================================================= */
@media(max-width:700px){
    .mobile-category-sheet__icon{
        width:36px !important;
        height:36px !important;
        flex:0 0 36px !important;
        background:#f3f6f8 !important;
        color:#27445f !important;
        border:1px solid #e5eaf0 !important;
    }

    .mobile-category-sheet__icon svg{
        display:block !important;
        width:21px !important;
        height:21px !important;
        fill:none !important;
        stroke:currentColor !important;
        stroke-width:1.8 !important;
        stroke-linecap:round !important;
        stroke-linejoin:round !important;
        vector-effect:non-scaling-stroke !important;
    }

    .mobile-category-sheet__item{
        grid-template-columns:36px minmax(0,1fr) 12px !important;
    }
}


/* =========================================================
   v1.0.239 — Contact page
   Full shop address + direct Phone and Maps actions.
   LINE remains the global floating chat action.
   ========================================================= */
.storefront .contact-page{
    padding:34px 0 42px;
    background:#fff;
}
.storefront .contact-page__head{
    margin-bottom:18px;
}
.storefront .contact-page__head h1{
    margin:0 0 6px;
    font-size:32px;
    line-height:1.2;
}
.storefront .contact-page__head p{
    margin:0;
    color:#67727e;
    font-size:14px;
}
.storefront .contact-card{
    width:min(100%,760px);
    border:1px solid #e0e5ea;
    border-radius:16px;
    background:#fff;
    padding:22px;
    box-sizing:border-box;
}
.storefront .contact-card h2{
    margin:0 0 18px;
    font-size:22px;
    line-height:1.25;
}
.storefront .contact-info-list{
    display:grid;
    gap:15px;
}
.storefront .contact-info-row{
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    gap:12px;
    align-items:start;
}
.storefront .contact-info-icon{
    width:42px;
    height:42px;
    border:1px solid #d9e0e7;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#f7f9fb;
    color:#14202c;
    font-size:18px;
    font-weight:700;
}

.storefront .contact-info-icon--phone{
    color:#1b2f98 !important;
    background:#f4f7ff !important;
    border-color:#ccd6f2 !important;
    box-shadow:0 1px 0 rgba(27,47,152,.04) inset;
}
.storefront .contact-info-row small{
    display:block;
    margin-bottom:3px;
    color:#7a8590;
    font-size:12px;
}
.storefront .contact-info-row a{
    color:#101820;
    font-size:17px;
    font-weight:700;
    text-decoration:none;
}
.storefront .contact-info-row address{
    margin:0;
    color:#1f2933;
    font-size:15px;
    line-height:1.65;
    font-style:normal;
}
.storefront .contact-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-top:20px;
}
.storefront .contact-action{
    min-height:48px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-weight:800;
    text-decoration:none;
    box-sizing:border-box;
}
.storefront .contact-action--phone{
    background:#101923;
    color:#fff;
}
.storefront .contact-action--map{
    background:#e91d2a;
    color:#fff;
}
.storefront .contact-line-note{
    margin:14px 0 0;
    color:#6b7580;
    font-size:12px;
    line-height:1.5;
}

@media(max-width:700px){
    .storefront .contact-page{
        padding:22px 0 26px;
    }
    .storefront .contact-page .store-shell{
        width:calc(100% - 20px) !important;
        max-width:none !important;
        margin:0 auto !important;
    }
    .storefront .contact-page__head{
        margin-bottom:14px;
    }
    .storefront .contact-page__head h1{
        font-size:26px;
    }
    .storefront .contact-page__head p{
        font-size:13px;
        line-height:1.45;
    }
    .storefront .contact-card{
        width:100%;
        padding:16px;
        border-radius:14px;
    }
    .storefront .contact-card h2{
        font-size:20px;
        margin-bottom:15px;
    }
    .storefront .contact-info-row{
        grid-template-columns:38px minmax(0,1fr);
        gap:10px;
    }
    .storefront .contact-info-icon{
        width:38px;
        height:38px;
        font-size:16px;
    }
    .storefront .contact-info-row a{
        font-size:16px;
    }
    .storefront .contact-info-row address{
        font-size:14px;
        line-height:1.6;
    }
    .storefront .contact-actions{
        grid-template-columns:1fr;
        gap:9px;
        margin-top:17px;
    }
    .storefront .contact-action{
        min-height:46px;
        font-size:14px;
    }
    .storefront .contact-line-note{
        font-size:11.5px;
        margin-top:12px;
    }
}


/* =========================================================
   v1.0.240 — Mobile contact page: larger, easier-to-read text
   Designed for real phone viewing, including large iPhone screens.
   Desktop remains unchanged.
   ========================================================= */
@media(max-width:700px){
    .storefront .contact-page__head h1{
        font-size:28px !important;
        line-height:1.2 !important;
        margin-bottom:7px !important;
    }

    .storefront .contact-page__head p{
        font-size:15px !important;
        line-height:1.55 !important;
    }

    .storefront .contact-card{
        padding:18px !important;
    }

    .storefront .contact-card h2{
        font-size:22px !important;
        line-height:1.3 !important;
        margin-bottom:17px !important;
    }

    .storefront .contact-info-list{
        gap:17px !important;
    }

    .storefront .contact-info-row{
        grid-template-columns:42px minmax(0,1fr) !important;
        gap:12px !important;
    }

    .storefront .contact-info-icon{
        width:42px !important;
        height:42px !important;
        font-size:18px !important;
    }

    .storefront .contact-info-row small{
        font-size:14px !important;
        line-height:1.4 !important;
        margin-bottom:4px !important;
    }

    .storefront .contact-info-row a{
        font-size:18px !important;
        line-height:1.45 !important;
    }

    .storefront .contact-info-row address{
        font-size:16px !important;
        line-height:1.72 !important;
    }

    .storefront .contact-actions{
        gap:10px !important;
        margin-top:20px !important;
    }

    .storefront .contact-action{
        min-height:50px !important;
        font-size:16px !important;
        line-height:1.3 !important;
    }

    .storefront .contact-line-note{
        font-size:13.5px !important;
        line-height:1.55 !important;
        margin-top:14px !important;
    }
}


/* =========================================================
   v1.0.241 — DESKTOP RESTORE
   Mobile Category Bottom Sheet must never render on desktop.
   v1.0.237 added its markup globally, while its hiding/layout rules
   existed only inside the mobile media query, so desktop showed the
   raw sheet below the footer.
   ========================================================= */

/* Desktop/tablet default: completely remove mobile-only sheet. */
.mobile-category-sheet{
    display:none !important;
}

/* Mobile: restore the existing Bottom Sheet behavior. */
@media(max-width:700px){
    .mobile-category-sheet{
        display:block !important;
    }
}


/* =========================================================
   v1.0.242 — Contact address red location-pin icon
   Replaces the generic symbol only for the shop-address row.
   ========================================================= */
.storefront .contact-info-icon--location{
    background:#fff !important;
    border-color:#e3e7eb !important;
    overflow:hidden !important;
}
.storefront .contact-info-icon--location img{
    display:block !important;
    width:27px !important;
    height:27px !important;
    object-fit:contain !important;
}
@media(max-width:700px){
    .storefront .contact-info-icon--location img{
        width:26px !important;
        height:26px !important;
    }
}


/* =========================================================
   v1.0.245 — Mobile product call button: normal-flow only
   The long black "โทรสอบถาม / เช็กสินค้า" bar must stay in the
   product information card and scroll away with the page.
   It is NOT sticky/fixed on mobile because phone/contact actions
   already exist elsewhere in the mobile UI.
   ========================================================= */
@media(max-width:700px){
    .storefront .product-summary .product-call,
    .storefront .product-summary .product-contact,
    .storefront .product-summary .product-contact-button,
    .storefront .product-summary a[href^="tel:"].product-call,
    .storefront .product-summary a[href^="tel:"]{
        position:static !important;
        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;
        inset:auto !important;
        transform:none !important;
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
        z-index:auto !important;
    }
}


/* v1.0.245 exact sticky override */
@media(max-width:700px){
    .storefront .product-detail-section .product-actions{
        position:static !important;
        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;
        inset:auto !important;
        z-index:auto !important;
        margin-top:14px !important;
        padding:8px 0 !important;
        background:#fff !important;
    }

    .storefront .product-detail-section .product-actions .store-btn.call{
        position:static !important;
        width:100% !important;
        transform:none !important;
    }
}


/* =========================================================
   v1.0.246 — Compact mobile bottom navigation
   Goal: keep the always-visible navigation as short as practical
   while retaining an easy touch target.
   - 50px usable bar height
   - iPhone safe-area is INCLUDED in total height, not added twice
   - smaller 18px icons, 10px labels
   - LINE launcher sits 8px above the bar
   - remove redundant footer bottom margin; body padding reserves the bar
   Desktop remains unchanged.
   ========================================================= */
@media(max-width:700px){
    .storefront{
        padding-bottom:calc(52px + env(safe-area-inset-bottom)) !important;
    }

    .mobile-bottom-nav{
        display:flex !important;
        position:fixed !important;
        left:0 !important;
        right:0 !important;
        bottom:0 !important;

        /* 50px control area + only the safe-area actually required by iOS */
        height:calc(50px + env(safe-area-inset-bottom)) !important;
        min-height:calc(50px + env(safe-area-inset-bottom)) !important;
        max-height:calc(50px + env(safe-area-inset-bottom)) !important;
        padding:0 0 env(safe-area-inset-bottom) !important;
        box-sizing:border-box !important;

        background:#fff !important;
        border-top:1px solid #dadfe5 !important;
        align-items:stretch !important;
        justify-content:space-around !important;
        z-index:100 !important;
    }

    .mobile-bottom-nav a,
    .mobile-bottom-nav button{
        height:100% !important;
        min-height:0 !important;
        padding:0 !important;
        gap:1px !important;
        font-size:10px !important;
        line-height:1.05 !important;
    }

    .mobile-bottom-nav a span,
    .mobile-bottom-nav button span{
        font-size:18px !important;
        line-height:1 !important;
    }

    /* The global LINE circle follows the shorter bottom bar. */
    #teera-line-widget{
        bottom:calc(58px + env(safe-area-inset-bottom)) !important;
    }

    /* Body padding now reserves the fixed bar, so don't reserve it again here. */
    .storefront .store-footer .footer-bottom{
        margin-bottom:0 !important;
    }
}


/* =========================================================
   v1.0.247 — Mobile bottom-nav labels +2px
   Keep the compact 50px bar, but increase label readability.
   Icons and bar height remain unchanged.
   ========================================================= */
@media(max-width:700px){
    .mobile-bottom-nav a,
    .mobile-bottom-nav button{
        font-size:12px !important;
    }
}


/* =========================================================
   v1.0.249 — Mobile category icons: TEERA SERVICE blue
   Improve icon/text separation while keeping the sheet visually calm.
   All category icons use the same brand-blue treatment.
   ========================================================= */
@media(max-width:700px){
    .mobile-category-sheet__icon{
        color:#172A96 !important;
        background:#EEF1FF !important;
        border-color:#D9DFFC !important;
    }

    .mobile-category-sheet__item:active .mobile-category-sheet__icon,
    .mobile-category-sheet__item:focus-visible .mobile-category-sheet__icon{
        color:#fff !important;
        background:#172A96 !important;
        border-color:#172A96 !important;
    }

    .mobile-category-sheet__item b{
        color:#111820 !important;
    }

    .mobile-category-sheet__item i{
        color:#8A96A3 !important;
    }
}


/* =========================================================
   v1.0.250 — Mobile category icons: Orange accent
   Owner-preferred orange accent while keeping TEERA SERVICE layout
   and typography unchanged.
   ========================================================= */
@media(max-width:700px){
    .mobile-category-sheet__icon{
        color:#F36A1D !important;
        background:#FFF1E8 !important;
        border-color:#FFD2B8 !important;
    }

    .mobile-category-sheet__item:active .mobile-category-sheet__icon,
    .mobile-category-sheet__item:focus-visible .mobile-category-sheet__icon{
        color:#fff !important;
        background:#F36A1D !important;
        border-color:#F36A1D !important;
    }
}


/* =========================================================
   v1.0.251 — Mobile category sheet CTA: orange
   Make "ดูอะไหล่ทั้งหมด" visually consistent with the orange
   category icon accent and clearly separate it from dark/LINE actions.
   ========================================================= */
@media(max-width:700px){
    .mobile-category-sheet__all{
        background:#F36A1D !important;
        color:#fff !important;
        border:1px solid #F36A1D !important;
        box-shadow:0 5px 14px rgba(243,106,29,.22) !important;
    }

    .mobile-category-sheet__all:active,
    .mobile-category-sheet__all:focus-visible{
        background:#D95712 !important;
        border-color:#D95712 !important;
        color:#fff !important;
    }
}


/* =========================================================
   v1.0.252 — Mobile category CTA font +2px
   Increase "ดูอะไหล่ทั้งหมด" from 14px to 16px.
   Keep button height, color and layout unchanged.
   ========================================================= */
@media(max-width:700px){
    .mobile-category-sheet__all{
        font-size:16px !important;
    }
}


/* =========================================================
   v1.0.253 — Home product sections: 4 columns x 2 rows
   Small desktop / notebook / iPad only.
   Large desktop keeps the existing 8-card layout.
   Mobile <=700px keeps the approved horizontal-scroll layout.
   ========================================================= */
@media (min-width:701px) and (max-width:1200px){

    /* Recommended products */
    .storefront .recommended-product-row{
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        grid-auto-flow:row !important;
        gap:12px !important;
        justify-content:stretch !important;
        align-items:stretch !important;
        overflow:visible !important;
    }

    .storefront .recommended-product-row .store-product-card{
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
        flex:none !important;
    }

    /* Latest products */
    .storefront .latest-section .home-product-row{
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        grid-auto-flow:row !important;
        grid-auto-columns:unset !important;
        grid-template-rows:none !important;
        gap:12px !important;
        overflow:visible !important;
        padding-bottom:5px !important;
        scroll-snap-type:none !important;
    }

    .storefront .latest-section .home-product-row .store-product-card{
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;
    }
}


/* =========================================================
   v1.0.254 — Desktop footer copyright single divider
   - Remove inherited short border line from generic footer small
   - Keep only the main divider on .footer-bottom
   ========================================================= */
.storefront .store-footer .footer-bottom small{
    border-top:0 !important;
    padding-top:0 !important;
}


/* =========================================================
   v1.0.255 — Desktop footer: 4 equal columns
   Logo | Menu | Parts categories | Contact
   Desktop only. Mobile footer remains the approved 2-column layout.
   ========================================================= */
@media(min-width:901px){
    .storefront .store-footer .footer-main{
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:34px !important;
        align-items:start !important;
    }

    .storefront .store-footer .footer-brand,
    .storefront .store-footer .footer-menu,
    .storefront .store-footer .footer-categories,
    .storefront .store-footer .footer-contact{
        min-width:0 !important;
        width:100% !important;
    }

    .storefront .store-footer .footer-brand img{
        width:min(100%,340px) !important;
        max-width:100% !important;
        height:auto !important;
    }

    .storefront .store-footer .footer-menu,
    .storefront .store-footer .footer-categories,
    .storefront .store-footer .footer-contact{
        display:flex !important;
        flex-direction:column !important;
        gap:8px !important;
    }

    .storefront .store-footer .footer-menu h3,
    .storefront .store-footer .footer-categories h3,
    .storefront .store-footer .footer-contact h3{
        margin:0 0 13px !important;
        color:#fff !important;
    }

    .storefront .store-footer .footer-categories a{
        display:block !important;
        margin:0 !important;
        color:#b8c0c9 !important;
        line-height:1.45 !important;
    }

    .storefront .store-footer .footer-categories a:hover,
    .storefront .store-footer .footer-menu a:hover,
    .storefront .store-footer .footer-contact a:hover{
        color:#fff !important;
    }

    .storefront .store-footer .footer-categories-all{
        margin-top:4px !important;
        color:#F36A1D !important;
        font-weight:700 !important;
    }

    .storefront .store-footer .footer-categories-all:hover{
        color:#ff8744 !important;
    }
}

/* iPad / small notebook landscape: keep 4 columns but tighten spacing. */
@media(min-width:701px) and (max-width:900px){
    .storefront .store-footer .footer-main{
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:20px !important;
        align-items:start !important;
    }

    .storefront .store-footer .footer-brand img{
        width:100% !important;
        max-width:260px !important;
        height:auto !important;
    }

    .storefront .store-footer .footer-menu h3,
    .storefront .store-footer .footer-categories h3,
    .storefront .store-footer .footer-contact h3{
        font-size:17px !important;
    }

    .storefront .store-footer .footer-menu a,
    .storefront .store-footer .footer-categories a,
    .storefront .store-footer .footer-contact a,
    .storefront .store-footer .footer-contact-row{
        font-size:12px !important;
    }
}

/* Mobile: categories are already available in the Bottom Sheet,
   so do not duplicate them in the footer. */
@media(max-width:700px){
    .storefront .store-footer .footer-categories{
        display:none !important;
    }
}


/* =========================================================
   v1.0.256 — Desktop footer balance
   - Parts categories use 2 compact subcolumns
   - Short footer-only category labels
   - Add useful map/directions link under Contact
   - Reduce excess vertical height
   Mobile remains unchanged.
   ========================================================= */
@media(min-width:901px){
    .storefront .store-footer .footer-main{
        padding-top:28px !important;
        padding-bottom:22px !important;
    }

    .storefront .store-footer .footer-categories{
        display:block !important;
    }

    .storefront .store-footer .footer-categories-grid{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        column-gap:18px !important;
        row-gap:8px !important;
    }

    .storefront .store-footer .footer-categories-grid a{
        min-width:0 !important;
        margin:0 !important;
        line-height:1.4 !important;
        white-space:normal !important;
    }

    .storefront .store-footer .footer-categories-all{
        display:inline-block !important;
        margin-top:12px !important;
    }

    .storefront .store-footer .footer-map-link{
        color:#F36A1D !important;
        font-weight:700 !important;
        margin-top:4px !important;
    }

    .storefront .store-footer .footer-map-link span{
        border-color:rgba(243,106,29,.55) !important;
        color:#F36A1D !important;
    }

    .storefront .store-footer .footer-map-link:hover{
        color:#ff8744 !important;
    }
}

/* Preserve the approved mobile footer exactly. */
@media(max-width:700px){
    .storefront .store-footer .footer-categories,
    .storefront .store-footer .footer-map-link{
        display:none !important;
    }
}


/* =========================================================
   v1.0.257 — Desktop footer contact icon colors + non-white hover
   - Phone icon: TEERA blue
   - Address icon: orange
   - Directions icon: red location pin
   - Directions text returns to normal footer text color
   - Footer link hover uses warm orange, not white
   Mobile <=700px remains unchanged.
   ========================================================= */
@media(min-width:701px){
    /* Keep all contact text neutral; color belongs to icons only. */
    .storefront .store-footer .footer-map-link{
        color:#b8c0c9 !important;
        font-weight:400 !important;
    }

    .storefront .store-footer .footer-contact-icon{
        width:36px !important;
        height:36px !important;
        min-width:36px !important;
        border-radius:50% !important;
        display:grid !important;
        place-items:center !important;
        background:transparent !important;
        transition:
            color .16s ease,
            border-color .16s ease,
            background-color .16s ease !important;
    }

    /* 1) Phone — logo blue */
    .storefront .store-footer .footer-contact-icon--phone{
        color:#5B78FF !important;
        border-color:rgba(91,120,255,.62) !important;
    }

    /* 2) Shop address — brand red */
    .storefront .store-footer .footer-contact-icon--address{
        color:#E31B23 !important;
        border-color:rgba(227,27,35,.62) !important;
    }

    /* 3) Directions — secondary red / crimson */
    .storefront .store-footer .footer-contact-icon--map{
        color:#FF5A5F !important;
        border-color:rgba(255,90,95,.62) !important;
    }

    .storefront .store-footer .footer-contact-icon--map svg{
        width:18px !important;
        height:18px !important;
        fill:none !important;
        stroke:currentColor !important;
        stroke-width:1.9 !important;
        stroke-linecap:round !important;
        stroke-linejoin:round !important;
    }

    /* Footer hover: brand red instead of white. */
    .storefront .store-footer .footer-menu a:hover,
    .storefront .store-footer .footer-categories a:hover,
    .storefront .store-footer .footer-contact a:hover{
        color:#FF6B70 !important;
    }

    /* Each contact icon also changes on hover, but remains distinct. */
    .storefront .store-footer .footer-contact-phone:hover .footer-contact-icon--phone{
        color:#8FA3FF !important;
        border-color:#8FA3FF !important;
        background:rgba(91,120,255,.10) !important;
    }

    .storefront .store-footer .footer-map-link:hover .footer-contact-icon--map{
        color:#FF7A7A !important;
        border-color:#FF7A7A !important;
        background:rgba(255,90,95,.10) !important;
    }

    /* Address is not clickable, but gets a subtle steady tint for separation. */
    .storefront .store-footer .footer-contact-address .footer-contact-icon--address{
        background:rgba(227,27,35,.06) !important;
    }

    /* "ดูหมวดทั้งหมด" follows the red accent system. */
    .storefront .store-footer .footer-categories-all:hover{
        color:#FF7A80 !important;
    }
}


/* =========================================================
   v1.0.258 — Desktop footer category link cues
   Make category items visibly clickable even before hover:
   - small red chevron before every category
   - slightly more breathing room
   - chevron nudges right on hover
   - text hover stays brand red, never white
   Mobile <=700px remains unchanged.
   ========================================================= */
@media(min-width:701px){
    .storefront .store-footer .footer-categories-grid{
        row-gap:10px !important;
    }

    .storefront .store-footer .footer-categories-grid a{
        position:relative !important;
        display:block !important;
        padding-left:14px !important;
        color:#b8c0c9 !important;
        line-height:1.45 !important;
        transition:color .16s ease !important;
    }

    .storefront .store-footer .footer-categories-grid a::before{
        content:'›' !important;
        position:absolute !important;
        left:0 !important;
        top:0 !important;
        color:#E31B23 !important;
        font-weight:900 !important;
        transition:transform .16s ease,color .16s ease !important;
    }

    .storefront .store-footer .footer-categories-grid a:hover{
        color:#FF6B70 !important;
    }

    .storefront .store-footer .footer-categories-grid a:hover::before{
        color:#FF7A80 !important;
        transform:translateX(3px) !important;
    }

    .storefront .store-footer .footer-categories-all{
        padding-left:0 !important;
        font-weight:800 !important;
    }

    .storefront .store-footer .footer-categories-all::before{
        content:none !important;
    }
}


/* =========================================================
   v1.0.260 — Mobile lightbox navigation viewport fix
   iPhone Safari can use a visual viewport narrower/offset from the
   layout viewport while browser chrome is visible. Keep Previous/Next
   buttons fixed to the visible viewport edges so the right arrow can
   never fall outside the screen.
   Desktop remains unchanged.
   ========================================================= */
@media(max-width:700px){
    body.product-lightbox-open > .product-lightbox .product-lightbox-nav{
        position:fixed !important;
        top:50% !important;
        margin-top:0 !important;
        transform:translateY(-50%) !important;
        width:46px !important;
        height:64px !important;
        z-index:1100020 !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
    }

    body.product-lightbox-open > .product-lightbox .product-lightbox-prev{
        left:max(6px, env(safe-area-inset-left)) !important;
        right:auto !important;
    }

    body.product-lightbox-open > .product-lightbox .product-lightbox-next{
        right:max(6px, env(safe-area-inset-right)) !important;
        left:auto !important;
    }

    body.product-lightbox-open > .product-lightbox .product-lightbox-close{
        right:max(10px, env(safe-area-inset-right)) !important;
    }

    body.product-lightbox-open > .product-lightbox .product-lightbox-counter{
        left:max(10px, env(safe-area-inset-left)) !important;
    }
}


/* =========================================================
   v1.0.261 — Mobile lightbox SVG arrows
   Replace font-glyph ‹ › arrows with explicit SVG chevrons.
   This avoids iPhone/Safari glyph clipping/rendering where the
   Next button box was visible but the arrow itself appeared missing.
   ========================================================= */
.product-lightbox-nav svg{
    width:28px;
    height:28px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:2.6;
    stroke-linecap:round;
    stroke-linejoin:round;
    pointer-events:none;
}

@media(max-width:700px){
    body.product-lightbox-open > .product-lightbox .product-lightbox-nav{
        display:grid !important;
        place-items:center !important;
        width:44px !important;
        height:64px !important;
        padding:0 !important;
        border:1px solid rgba(255,255,255,.28) !important;
        border-radius:9px !important;
        background:rgba(18,18,18,.58) !important;
        color:#fff !important;
        font-size:0 !important;
        line-height:0 !important;
        overflow:visible !important;
    }

    body.product-lightbox-open > .product-lightbox .product-lightbox-nav svg{
        width:30px !important;
        height:30px !important;
        stroke:#fff !important;
        stroke-width:2.8 !important;
        opacity:1 !important;
        visibility:visible !important;
    }

    body.product-lightbox-open > .product-lightbox .product-lightbox-prev{
        left:max(8px, env(safe-area-inset-left)) !important;
    }

    body.product-lightbox-open > .product-lightbox .product-lightbox-next{
        right:max(8px, env(safe-area-inset-right)) !important;
    }

    body.product-lightbox-open > .product-lightbox .product-lightbox-nav:active{
        background:rgba(227,27,35,.86) !important;
    }
}


/* =========================================================
   v1.0.262 — Desktop footer categories redesign
   Design goal:
   - make links look clearly clickable before hover
   - improve visual balance of the 4-column footer
   - use red theme accents instead of orange
   - keep mobile footer unchanged
   ========================================================= */
@media(min-width:701px){
    .storefront .store-footer .footer-categories-grid{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:10px 14px !important;
        align-items:start !important;
    }

    .storefront .store-footer .footer-categories-grid a{
        position:relative !important;
        display:flex !important;
        align-items:center !important;
        min-height:42px !important;
        margin:0 !important;
        padding:9px 12px 9px 38px !important;
        border:1px solid rgba(255,255,255,.08) !important;
        border-radius:10px !important;
        background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)) !important;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.04) !important;
        color:#eef2f6 !important;
        font-weight:700 !important;
        line-height:1.35 !important;
        text-decoration:none !important;
        transition:
            color .16s ease,
            background-color .16s ease,
            border-color .16s ease,
            transform .16s ease,
            box-shadow .16s ease !important;
    }

    .storefront .store-footer .footer-categories-grid a::before{
        content:'›' !important;
        position:absolute !important;
        left:12px !important;
        top:50% !important;
        transform:translateY(-50%) !important;
        width:18px !important;
        height:18px !important;
        display:grid !important;
        place-items:center !important;
        border-radius:999px !important;
        background:rgba(227,27,35,.15) !important;
        border:1px solid rgba(227,27,35,.38) !important;
        color:#ff5c62 !important;
        font-size:14px !important;
        font-weight:900 !important;
        line-height:1 !important;
        transition:
            color .16s ease,
            background-color .16s ease,
            border-color .16s ease,
            transform .16s ease !important;
    }

    .storefront .store-footer .footer-categories-grid a:hover,
    .storefront .store-footer .footer-categories-grid a:focus-visible{
        color:#ffffff !important;
        background:linear-gradient(180deg, rgba(227,27,35,.20), rgba(227,27,35,.10)) !important;
        border-color:rgba(227,27,35,.45) !important;
        box-shadow:0 8px 18px rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.06) !important;
        transform:translateY(-1px) !important;
        outline:none !important;
    }

    .storefront .store-footer .footer-categories-grid a:hover::before,
    .storefront .store-footer .footer-categories-grid a:focus-visible::before{
        color:#fff !important;
        background:#E31B23 !important;
        border-color:#E31B23 !important;
        transform:translateY(-50%) scale(1.03) !important;
    }

    .storefront .store-footer .footer-categories-all{
        display:inline-flex !important;
        align-items:center !important;
        gap:6px !important;
        margin-top:14px !important;
        padding:0 !important;
        background:none !important;
        border:0 !important;
        color:#ff6b70 !important;
        font-weight:800 !important;
        letter-spacing:.01em !important;
    }

    .storefront .store-footer .footer-categories-all::after{
        content:'›' !important;
        font-weight:900 !important;
        transition:transform .16s ease !important;
    }

    .storefront .store-footer .footer-categories-all:hover,
    .storefront .store-footer .footer-categories-all:focus-visible{
        color:#ff858a !important;
        outline:none !important;
    }

    .storefront .store-footer .footer-categories-all:hover::after,
    .storefront .store-footer .footer-categories-all:focus-visible::after{
        transform:translateX(3px) !important;
    }
}


/* =========================================================
   v1.0.263 — Desktop footer typography refinement
   Goal: make Menu + Categories feel lighter, cleaner, and
   more balanced after the chip redesign.
   ========================================================= */
@media(min-width:701px){
    .storefront .store-footer .footer-menu h3,
    .storefront .store-footer .footer-categories h3{
        font-size:16px !important;
        font-weight:800 !important;
        letter-spacing:.01em !important;
        margin-bottom:14px !important;
    }

    .storefront .store-footer .footer-menu a{
        font-size:13px !important;
        font-weight:600 !important;
        line-height:1.55 !important;
        margin:7px 0 !important;
        color:#d9e2ec !important;
    }

    .storefront .store-footer .footer-menu a:hover,
    .storefront .store-footer .footer-menu a:focus-visible{
        color:#ff6f75 !important;
        outline:none !important;
    }

    .storefront .store-footer .footer-categories-grid{
        gap:9px 14px !important;
    }

    .storefront .store-footer .footer-categories-grid a{
        min-height:38px !important;
        padding:8px 12px 8px 36px !important;
        font-size:13px !important;
        font-weight:600 !important;
        line-height:1.3 !important;
        border-radius:9px !important;
    }

    .storefront .store-footer .footer-categories-grid a::before{
        left:11px !important;
        width:17px !important;
        height:17px !important;
        font-size:13px !important;
    }

    .storefront .store-footer .footer-categories-all{
        font-size:13px !important;
        font-weight:700 !important;
        margin-top:12px !important;
    }
}


/* =========================================================
   v1.0.264 — Desktop footer categories simplified
   - Replace tall chip buttons with short text links
   - Use compact 2-column rows for better balance
   - Match the user's preferred short labels
   - Keep mobile footer unchanged
   ========================================================= */
@media(min-width:701px){
    .storefront .store-footer .footer-categories{
        display:flex !important;
        flex-direction:column !important;
        gap:0 !important;
    }

    .storefront .store-footer .footer-categories h3{
        margin-bottom:12px !important;
    }

    .storefront .store-footer .footer-categories-grid{
        display:flex !important;
        flex-direction:column !important;
        gap:7px !important;
        align-items:stretch !important;
    }

    .storefront .store-footer .footer-categories-row{
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        column-gap:18px !important;
        row-gap:7px !important;
        align-items:start !important;
    }

    .storefront .store-footer .footer-categories-row--single{
        grid-template-columns:minmax(0,1fr) !important;
    }

    .storefront .store-footer .footer-categories-row a{
        position:relative !important;
        display:block !important;
        min-width:0 !important;
        min-height:0 !important;
        margin:0 !important;
        padding:0 0 0 14px !important;
        background:none !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
        color:#e4ebf3 !important;
        font-size:14px !important;
        font-weight:600 !important;
        line-height:1.42 !important;
        text-decoration:none !important;
        transform:none !important;
        transition:color .16s ease !important;
    }

    .storefront .store-footer .footer-categories-row a::before{
        content:'›' !important;
        position:absolute !important;
        left:0 !important;
        top:0 !important;
        width:auto !important;
        height:auto !important;
        background:none !important;
        border:0 !important;
        border-radius:0 !important;
        color:#E31B23 !important;
        font-size:14px !important;
        font-weight:900 !important;
        line-height:1.42 !important;
        transform:none !important;
        transition:transform .16s ease,color .16s ease !important;
    }

    .storefront .store-footer .footer-categories-row a:hover,
    .storefront .store-footer .footer-categories-row a:focus-visible{
        color:#ff6b70 !important;
        background:none !important;
        border-color:transparent !important;
        box-shadow:none !important;
        transform:none !important;
        outline:none !important;
    }

    .storefront .store-footer .footer-categories-row a:hover::before,
    .storefront .store-footer .footer-categories-row a:focus-visible::before{
        color:#ff6b70 !important;
        transform:translateX(2px) !important;
    }

    .storefront .store-footer .footer-categories-divider{
        width:64px !important;
        max-width:100% !important;
        height:1px !important;
        margin:12px 0 8px !important;
        background:rgba(255,255,255,.15) !important;
    }

    .storefront .store-footer .footer-categories-all{
        display:inline-flex !important;
        align-items:center !important;
        gap:6px !important;
        margin-top:0 !important;
        padding:0 !important;
        background:none !important;
        border:0 !important;
        color:#ff6b70 !important;
        font-size:13px !important;
        font-weight:800 !important;
        letter-spacing:.01em !important;
        text-decoration:none !important;
    }

    .storefront .store-footer .footer-categories-all::before{
        content:none !important;
    }

    .storefront .store-footer .footer-categories-all::after{
        content:'>>' !important;
        font-weight:900 !important;
        letter-spacing:0 !important;
        transition:transform .16s ease !important;
    }

    .storefront .store-footer .footer-categories-all:hover,
    .storefront .store-footer .footer-categories-all:focus-visible{
        color:#ff858a !important;
        outline:none !important;
    }

    .storefront .store-footer .footer-categories-all:hover::after,
    .storefront .store-footer .footer-categories-all:focus-visible::after{
        transform:translateX(2px) !important;
    }
}


/* =========================================================
   v1.0.265 — Desktop footer menu spacing back to normal
   Undo the extra vertical gap introduced in v1.0.263.
   Categories redesign from v1.0.264 stays unchanged.
   ========================================================= */
@media(min-width:701px){
    .storefront .store-footer .footer-menu h3{
        margin-bottom:12px !important;
    }

    .storefront .store-footer .footer-menu a{
        display:block !important;
        margin:0 0 8px !important;
        font-size:13px !important;
        font-weight:600 !important;
        line-height:1.45 !important;
    }
}


/* =========================================================
   v1.0.266 — Desktop footer menu spacing fix
   Root cause: .footer-menu kept flex gap:8px from v1.0.255,
   then each link also had its own bottom margin, doubling the
   vertical spacing. Remove the inherited flex gap and use one
   compact spacing source only.
   ========================================================= */
@media(min-width:701px){
    .storefront .store-footer .footer-menu{
        gap:0 !important;
    }

    .storefront .store-footer .footer-menu h3{
        margin:0 0 10px !important;
    }

    .storefront .store-footer .footer-menu a{
        margin:0 0 5px !important;
        line-height:1.4 !important;
    }

    .storefront .store-footer .footer-menu a:last-child{
        margin-bottom:0 !important;
    }
}

/* =========================================================
   v1.0.267 — Desktop footer categories match left menu style
   Make category links look like the simple footer menu, remove
   chip/button styling, and separate paired links with a plain |
   character as requested by the user.
   ========================================================= */
@media(min-width:701px){
    .storefront .store-footer .footer-categories{
        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:0 !important;
    }

    .storefront .store-footer .footer-categories h3{
        margin:0 0 10px !important;
        font-size:13px !important;
        font-weight:800 !important;
        line-height:1.25 !important;
        color:#ffffff !important;
    }

    .storefront .store-footer .footer-categories-grid{
        width:100% !important;
        display:flex !important;
        flex-direction:column !important;
        gap:5px !important;
    }

    .storefront .store-footer .footer-categories-row{
        display:flex !important;
        align-items:baseline !important;
        flex-wrap:wrap !important;
        gap:0 !important;
        min-height:auto !important;
    }

    .storefront .store-footer .footer-categories-row a{
        display:inline !important;
        background:none !important;
        border:0 !important;
        box-shadow:none !important;
        border-radius:0 !important;
        padding:0 !important;
        min-height:auto !important;
        color:#ffffff !important;
        font-size:13px !important;
        font-weight:600 !important;
        line-height:1.45 !important;
        text-decoration:none !important;
        transition:color .16s ease !important;
    }

    .storefront .store-footer .footer-categories-row a + a{
        margin-left:10px !important;
    }

    .storefront .store-footer .footer-categories-row a + a::before{
        content:'|' !important;
        color:rgba(255,255,255,.45) !important;
        margin-right:10px !important;
        font-weight:500 !important;
    }

    .storefront .store-footer .footer-categories-row a:hover,
    .storefront .store-footer .footer-categories-row a:focus-visible{
        color:#ff4d57 !important;
        outline:none !important;
    }

    .storefront .store-footer .footer-categories-divider{
        width:64px !important;
        height:1px !important;
        margin:10px 0 8px !important;
        background:rgba(255,255,255,.15) !important;
    }

    .storefront .store-footer .footer-categories-all{
        display:inline-block !important;
        margin-top:0 !important;
        padding:0 !important;
        background:none !important;
        border:0 !important;
        color:#ffffff !important;
        font-size:13px !important;
        font-weight:700 !important;
        line-height:1.45 !important;
        letter-spacing:0 !important;
        text-decoration:none !important;
    }

    .storefront .store-footer .footer-categories-all::before,
    .storefront .store-footer .footer-categories-all::after{
        content:none !important;
    }

    .storefront .store-footer .footer-categories-all:hover,
    .storefront .store-footer .footer-categories-all:focus-visible{
        color:#ff4d57 !important;
        outline:none !important;
    }
}


/* =========================================================
   v1.0.268 — Desktop footer categories: plain menu style
   - Exactly match the left footer menu typography/spacing
   - Remove all arrows, chips, transforms and special hover effects
   - Use only a neutral | separator between paired categories
   - Keep mobile footer unchanged
   ========================================================= */
@media(min-width:701px){
    .storefront .store-footer .footer-categories{
        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;
        gap:0 !important;
    }

    .storefront .store-footer .footer-categories h3{
        margin:0 0 10px !important;
        font-size:16px !important;
        font-weight:800 !important;
        line-height:1.25 !important;
        color:#fff !important;
    }

    .storefront .store-footer .footer-categories-grid{
        display:flex !important;
        flex-direction:column !important;
        gap:0 !important;
        width:100% !important;
    }

    .storefront .store-footer .footer-categories-row{
        display:flex !important;
        align-items:baseline !important;
        flex-wrap:nowrap !important;
        gap:0 !important;
        min-height:auto !important;
        margin:0 0 5px !important;
        line-height:1.4 !important;
    }

    .storefront .store-footer .footer-categories-row:last-child{
        margin-bottom:0 !important;
    }

    .storefront .store-footer .footer-categories-row a{
        display:inline !important;
        position:static !important;
        min-width:0 !important;
        min-height:0 !important;
        margin:0 !important;
        padding:0 !important;
        background:none !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
        color:#d9e2ec !important;
        font-size:13px !important;
        font-weight:600 !important;
        line-height:1.4 !important;
        text-decoration:none !important;
        transform:none !important;
        transition:color .16s ease !important;
    }

    .storefront .store-footer .footer-categories-row a::before,
    .storefront .store-footer .footer-categories-row a::after{
        content:none !important;
        display:none !important;
    }

    .storefront .store-footer .footer-category-separator{
        display:inline !important;
        margin:0 8px !important;
        color:rgba(217,226,236,.52) !important;
        font-size:13px !important;
        font-weight:400 !important;
        line-height:1.4 !important;
    }

    .storefront .store-footer .footer-categories-row a:hover,
    .storefront .store-footer .footer-categories-row a:focus-visible{
        color:#ff6f75 !important;
        background:none !important;
        border:0 !important;
        box-shadow:none !important;
        transform:none !important;
        outline:none !important;
    }

    .storefront .store-footer .footer-categories-divider{
        width:64px !important;
        height:1px !important;
        margin:10px 0 8px !important;
        background:rgba(255,255,255,.15) !important;
    }

    .storefront .store-footer .footer-categories-all{
        display:block !important;
        margin:0 !important;
        padding:0 !important;
        background:none !important;
        border:0 !important;
        box-shadow:none !important;
        color:#d9e2ec !important;
        font-size:13px !important;
        font-weight:600 !important;
        line-height:1.4 !important;
        letter-spacing:0 !important;
        text-decoration:none !important;
        transform:none !important;
        transition:color .16s ease !important;
    }

    .storefront .store-footer .footer-categories-all::before,
    .storefront .store-footer .footer-categories-all::after{
        content:none !important;
        display:none !important;
    }

    .storefront .store-footer .footer-categories-all:hover,
    .storefront .store-footer .footer-categories-all:focus-visible{
        color:#ff6f75 !important;
        background:none !important;
        box-shadow:none !important;
        transform:none !important;
        outline:none !important;
    }
}

/* =========================================================
   v1.0.269 — Desktop footer brand compact tune
   - Reduce footer logo size so it feels lighter/balanced
   - Keep brand copy visually at 2 lines on desktop
   - No mobile changes
   ========================================================= */
@media(min-width:901px){
    .storefront .store-footer .footer-brand img{
        width:min(360px,100%) !important;
        max-width:360px !important;
        margin:0 0 18px !important;
    }

    .storefront .store-footer .footer-brand p{
        max-width:340px !important;
        margin:0 !important;
        font-size:15px !important;
        line-height:1.58 !important;
        color:#d3dbe5 !important;
    }
}

/* =========================================================
   v1.0.270 — Desktop footer logo = header logo size
   - Make footer logo match the desktop header logo width
   - Preserve the previously approved 2-line brand copy
   ========================================================= */
@media(min-width:901px){
    .storefront .store-footer .footer-brand img{
        width:250px !important;
        max-width:250px !important;
        height:auto !important;
        margin:0 0 18px !important;
    }
}

/* =========================================================
   v1.0.271 — Desktop footer service benefits redesign
   Make the 4 service items feel like a polished feature strip:
   subtle cards, consistent red accent, clearer hierarchy,
   compact spacing, gentle hover. Mobile remains unchanged.
   ========================================================= */
@media(min-width:701px){
    .storefront .footer-benefits-wrap{
        background:#0a0f15 !important;
        border-top:1px solid rgba(255,255,255,.08) !important;
        border-bottom:1px solid rgba(255,255,255,.08) !important;
        padding:14px 0 !important;
    }

    .storefront .footer-benefits{
        display:grid !important;
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
        gap:12px !important;
        border:0 !important;
        padding:0 !important;
    }

    .storefront .footer-benefit,
    .storefront .footer-benefits > div{
        position:relative !important;
        display:flex !important;
        align-items:center !important;
        gap:13px !important;
        min-height:82px !important;
        padding:14px 16px !important;
        margin:0 !important;
        border:1px solid rgba(255,255,255,.09) !important;
        border-radius:10px !important;
        background:linear-gradient(180deg,#0f161e 0%,#0c1219 100%) !important;
        box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important;
        transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease !important;
        overflow:hidden !important;
    }

    .storefront .footer-benefit::before{
        content:'' !important;
        position:absolute !important;
        left:0 !important;
        top:0 !important;
        bottom:0 !important;
        width:3px !important;
        background:#E31B23 !important;
        opacity:.8 !important;
    }

    .storefront .footer-benefit > span{
        flex:0 0 42px !important;
        width:42px !important;
        height:42px !important;
        display:grid !important;
        place-items:center !important;
        margin:0 !important;
        border:1px solid rgba(227,27,35,.48) !important;
        border-radius:50% !important;
        background:rgba(227,27,35,.08) !important;
        color:#ffffff !important;
        font-size:20px !important;
        line-height:1 !important;
        box-shadow:inset 0 0 0 1px rgba(255,255,255,.025) !important;
    }

    .storefront .footer-benefit > div{
        min-width:0 !important;
        display:flex !important;
        flex-direction:column !important;
        justify-content:center !important;
        gap:4px !important;
    }

    .storefront .footer-benefit > span svg{
        display:block !important;
        width:22px !important;
        height:22px !important;
    }

    .storefront .footer-benefit > .benefit-icon--package svg{
        width:23px !important;
        height:23px !important;
    }

    .storefront .footer-benefit b{
        display:block !important;
        margin:0 !important;
        padding:0 !important;
        border:0 !important;
        color:#ffffff !important;
        font-size:15px !important;
        font-weight:700 !important;
        line-height:1.3 !important;
    }

    .storefront .footer-benefit small{
        display:block !important;
        margin:0 !important;
        color:#aab6c3 !important;
        font-size:12px !important;
        line-height:1.4 !important;
    }

    .storefront .footer-benefit:hover{
        transform:translateY(-2px) !important;
        border-color:rgba(227,27,35,.34) !important;
        background:linear-gradient(180deg,#121b25 0%,#0e151d 100%) !important;
        box-shadow:0 7px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.04) !important;
    }

    .storefront .footer-benefit:hover > span{
        border-color:#E31B23 !important;
        background:rgba(227,27,35,.14) !important;
    }
}

/* =========================================================
   v1.0.274 — Desktop footer final polish
   - Soften red accent on 4 service cards
   - Refine "ดูหมวดทั้งหมด" spacing + single chevron
   - Consolidate contact icon palette to TEERA blue + red only
   - Desktop/tablet only; mobile remains unchanged
   ========================================================= */
@media(min-width:701px){
    /* 1) Service cards: keep the red cue, but make it quieter. */
    .storefront .footer-benefit::before{
        width:2px !important;
        background:#E31B23 !important;
        opacity:.45 !important;
    }

    .storefront .footer-benefit > span{
        border-color:rgba(227,27,35,.34) !important;
        background:rgba(227,27,35,.045) !important;
    }

    .storefront .footer-benefit:hover{
        border-color:rgba(227,27,35,.24) !important;
        transform:translateY(-1px) !important;
    }

    .storefront .footer-benefit:hover > span{
        border-color:rgba(227,27,35,.62) !important;
        background:rgba(227,27,35,.09) !important;
    }

    /* 2) Categories CTA: calmer, better separated from the links above. */
    .storefront .store-footer .footer-categories-divider{
        width:72px !important;
        margin:13px 0 9px !important;
        background:rgba(255,255,255,.12) !important;
    }

    .storefront .store-footer .footer-categories-all{
        display:inline-flex !important;
        align-items:center !important;
        gap:6px !important;
        margin:0 !important;
        color:#d9e2ec !important;
        font-weight:600 !important;
    }

    .storefront .store-footer .footer-categories-all-arrow{
        display:inline-block !important;
        color:#E31B23 !important;
        font-size:16px !important;
        font-weight:800 !important;
        line-height:1 !important;
        transition:transform .16s ease !important;
    }

    .storefront .store-footer .footer-categories-all:hover,
    .storefront .store-footer .footer-categories-all:focus-visible{
        color:#ff6f75 !important;
    }

    .storefront .store-footer .footer-categories-all:hover .footer-categories-all-arrow,
    .storefront .store-footer .footer-categories-all:focus-visible .footer-categories-all-arrow{
        transform:translateX(2px) !important;
    }

    /* 3) Contact icons: only logo blue + theme red. */
    .storefront .store-footer .footer-contact-icon--phone{
        color:#5B78FF !important;
        border-color:rgba(91,120,255,.62) !important;
        background:rgba(91,120,255,.055) !important;
    }

    .storefront .store-footer .footer-contact-icon--address{
        color:#E31B23 !important;
        border-color:rgba(227,27,35,.62) !important;
        background:rgba(227,27,35,.055) !important;
    }

    .storefront .store-footer .footer-contact-icon--map{
        color:#FF5A5F !important;
        border-color:rgba(255,90,95,.58) !important;
        background:rgba(255,90,95,.045) !important;
    }

    .storefront .store-footer .footer-map-link{
        color:#d5dce5 !important;
        font-weight:400 !important;
    }

    .storefront .store-footer .footer-map-link:hover{
        color:#ff6f75 !important;
    }
}


/* =========================================================
   v1.0.282 — Product detail main image corner hint
   - Default transparency 50%.
   - On hover/focus, raise opacity to 90% and lift slightly.
   - Hint itself is clickable to open the fullscreen viewer.
   ========================================================= */
.storefront .product-main-image{
    position:relative;
}
.storefront .product-main-image img{
    cursor:zoom-in;
}
.storefront .product-main-image-hint{
    position:absolute;
    right:12px;
    bottom:12px;
    z-index:2;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 12px;
    border:0;
    border-radius:999px;
    background:rgba(17,25,35,.50);
    color:#fff;
    font-size:13px;
    font-weight:800;
    line-height:1;
    letter-spacing:.01em;
    box-shadow:0 8px 20px rgba(0,0,0,.18);
    cursor:zoom-in;
    pointer-events:auto;
    user-select:none;
    white-space:nowrap;
    -webkit-appearance:none;
    appearance:none;
    transition:background-color .18s ease, transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.storefront .product-main-image-hint:hover,
.storefront .product-main-image-hint:focus-visible{
    background:rgba(17,25,35,.90);
    transform:translateY(-2px);
    box-shadow:0 12px 24px rgba(0,0,0,.24);
}
.storefront .product-main-image-hint:focus-visible{
    outline:2px solid rgba(255,255,255,.75);
    outline-offset:2px;
}
@media (max-width:700px){
    .storefront .product-main-image-hint{
        right:10px;
        bottom:10px;
        padding:7px 10px;
        font-size:11.5px;
    }
}

/* =========================================================
   v1.0.283 — Storefront typography trial: Tahoma
   - Apply Tahoma-style typography to the public storefront only.
   - Admin area remains unchanged.
   - Keep existing layout, sizes and spacing so this round tests
     the font family itself before any further typography tuning.
   ========================================================= */
body.storefront,
body.storefront button,
body.storefront input,
body.storefront select,
body.storefront textarea{
    font-family:Tahoma, Arial, sans-serif !important;
}

/* =========================================================
   v1.0.284 — Storefront Tahoma force-fix
   The v1.0.283 trial only changed inherited font on <body>, but several
   storefront components had their own Kanit/Sarabun font-family rules.
   This block overrides those component rules explicitly.
   Admin remains unchanged.
   ========================================================= */
body.storefront,
body.storefront .store-header,
body.storefront .store-main,
body.storefront .store-footer,
body.storefront .store-nav,
body.storefront .store-topbar,
body.storefront .store-mainhead,
body.storefront .store-section,
body.storefront .store-section-head,
body.storefront .product-card-body,
body.storefront .product-card-body h3,
body.storefront .product-card-body p,
body.storefront .product-card-body strong,
body.storefront .product-card-body span,
body.storefront .catalog-card .product-card-body h3,
body.storefront .recommended-section .product-card-body h3,
body.storefront .latest-section .product-card-body h3,
body.storefront .product-summary,
body.storefront .product-summary h1,
body.storefront .product-description,
body.storefront .product-description h2,
body.storefront .product-specs,
body.storefront .product-detail-meta,
body.storefront .product-detail-meta small,
body.storefront .category-card,
body.storefront .category-card b,
body.storefront .brand-card,
body.storefront .brand-card b,
body.storefront .brand-card small,
body.storefront .store-search,
body.storefront .store-search input,
body.storefront .store-search button,
body.storefront .header-contact,
body.storefront .hero-eyebrow,
body.storefront .hero-points,
body.storefront .hero-points b,
body.storefront .status-chip,
body.storefront .stock,
body.storefront .price,
body.storefront .store-btn,
body.storefront .catalog-meta,
body.storefront .catalog-filters,
body.storefront .catalog-per-page-form,
body.storefront .footer-benefit,
body.storefront .footer-main,
body.storefront .footer-menu,
body.storefront .footer-categories,
body.storefront .footer-contact,
body.storefront button,
body.storefront input,
body.storefront select,
body.storefront textarea{
    font-family:Tahoma, Arial, sans-serif !important;
}


/* =========================================================
   v1.0.285 — Storefront Open Sans typography trial
   Based on the supplied 69ShoppingMall stylesheet:
   Open Sans is the primary Latin/numeric face, with Tahoma/Arial
   as fallback for Thai glyphs and environments where Open Sans
   does not provide the requested characters.
   Admin remains unchanged.
   ========================================================= */
body.storefront,
body.storefront .store-header,
body.storefront .store-main,
body.storefront .store-footer,
body.storefront .store-nav,
body.storefront .store-topbar,
body.storefront .store-mainhead,
body.storefront .store-section,
body.storefront .store-section-head,
body.storefront .product-card-body,
body.storefront .product-card-body h3,
body.storefront .product-card-body p,
body.storefront .product-card-body strong,
body.storefront .product-card-body span,
body.storefront .catalog-card .product-card-body h3,
body.storefront .recommended-section .product-card-body h3,
body.storefront .latest-section .product-card-body h3,
body.storefront .product-summary,
body.storefront .product-summary h1,
body.storefront .product-description,
body.storefront .product-description h2,
body.storefront .product-specs,
body.storefront .product-detail-meta,
body.storefront .product-detail-meta small,
body.storefront .category-card,
body.storefront .category-card b,
body.storefront .brand-card,
body.storefront .brand-card b,
body.storefront .brand-card small,
body.storefront .store-search,
body.storefront .store-search input,
body.storefront .store-search button,
body.storefront .header-contact,
body.storefront .hero-eyebrow,
body.storefront .hero-points,
body.storefront .hero-points b,
body.storefront .status-chip,
body.storefront .stock,
body.storefront .price,
body.storefront .store-btn,
body.storefront .catalog-meta,
body.storefront .catalog-filters,
body.storefront .catalog-per-page-form,
body.storefront .footer-benefit,
body.storefront .footer-main,
body.storefront .footer-menu,
body.storefront .footer-categories,
body.storefront .footer-contact,
body.storefront button,
body.storefront input,
body.storefront select,
body.storefront textarea{
    font-family:'Open Sans', Tahoma, Arial, sans-serif !important;
    text-rendering:optimizeLegibility;
}


/* =========================================================
   v1.0.286 — Storefront mixed typography
   - Kanit remains the main face for large/important text.
   - Open Sans is used only for small secondary text for readability.
   - Admin remains unchanged.
   ========================================================= */
body.storefront,
body.storefront button,
body.storefront input,
body.storefront select,
body.storefront textarea{
    font-family:'Kanit', Tahoma, Arial, sans-serif !important;
}

/* Large / important storefront text stays Kanit */
body.storefront h1,
body.storefront h2,
body.storefront h3,
body.storefront h4,
body.storefront h5,
body.storefront h6,
body.storefront .store-nav,
body.storefront .store-nav a,
body.storefront .store-section-head,
body.storefront .store-section-head h2,
body.storefront .product-card-body h3,
body.storefront .catalog-card .product-card-body h3,
body.storefront .recommended-section .product-card-body h3,
body.storefront .latest-section .product-card-body h3,
body.storefront .product-summary h1,
body.storefront .product-description h2,
body.storefront .product-price,
body.storefront .price,
body.storefront .product-card-body strong,
body.storefront .store-btn,
body.storefront .store-search button,
body.storefront .category-card b,
body.storefront .brand-card b,
body.storefront .footer-benefit b,
body.storefront .footer-main h3,
body.storefront .footer-menu h3,
body.storefront .footer-categories h3,
body.storefront .footer-contact h3{
    font-family:'Kanit', Tahoma, Arial, sans-serif !important;
}

/* Small / secondary text uses Open Sans */
body.storefront .product-card-body p,
body.storefront .product-card-body span:not(.price),
body.storefront .product-card-body small,
body.storefront .brand-card small,
body.storefront .stock,
body.storefront .status-chip,
body.storefront .product-detail-meta,
body.storefront .product-detail-meta small,
body.storefront .product-specs span,
body.storefront .product-specs b,
body.storefront .catalog-meta,
body.storefront .catalog-per-page-form,
body.storefront .hero-eyebrow,
body.storefront .hero-points,
body.storefront .topbar-contact,
body.storefront .topbar-contact-link,
body.storefront .header-contact,
body.storefront .footer-benefit small,
body.storefront .footer-brand p,
body.storefront .footer-menu a,
body.storefront .footer-categories a,
body.storefront .footer-contact a,
body.storefront .footer-contact span,
body.storefront .store-footer small{
    font-family:'Open Sans', Tahoma, Arial, sans-serif !important;
    text-rendering:optimizeLegibility;
}

/* =========================================================
   v1.0.287 — Product titles use Open Sans for readability
   - Keep major headings/buttons/prices in Kanit
   - Switch storefront product names to Open Sans
   ========================================================= */
body.storefront .product-card-body h3,
body.storefront .catalog-card .product-card-body h3,
body.storefront .recommended-section .product-card-body h3,
body.storefront .latest-section .product-card-body h3,
body.storefront .product-summary h1{
    font-family:'Open Sans', Tahoma, Arial, sans-serif !important;
    font-weight:700 !important;
    letter-spacing:0 !important;
}

/* =========================================================
   v1.0.288 — Readable storefront small-text typography
   Based on 69ShoppingMall product-grid typography:
   - Product card names: Open Sans, 14px, regular weight, 1.6 line-height
   - Large/main headings remain Kanit
   - Product detail main title returns to Kanit
   ========================================================= */

/* Product names inside cards are reading text, not display headings */
body.storefront .product-card-body h3,
body.storefront .catalog-card .product-card-body h3,
body.storefront .recommended-section .product-card-body h3,
body.storefront .latest-section .product-card-body h3{
    font-family:'Open Sans', Tahoma, Arial, sans-serif !important;
    font-size:14px !important;
    font-weight:400 !important;
    line-height:1.6 !important;
    letter-spacing:0 !important;
}

/* Main product-page title is a large display heading: keep Kanit */
body.storefront .product-summary h1{
    font-family:'Kanit', Tahoma, Arial, sans-serif !important;
    font-weight:700 !important;
    letter-spacing:0 !important;
}

/* Small supporting product text stays easy to read */
body.storefront .product-card-body p,
body.storefront .product-card-body small,
body.storefront .product-card-body .stock,
body.storefront .catalog-meta,
body.storefront .product-detail-meta,
body.storefront .product-specs span,
body.storefront .product-specs b,
body.storefront .product-description{
    font-family:'Open Sans', Tahoma, Arial, sans-serif !important;
    text-rendering:optimizeLegibility;
}

/* =========================================================
   v1.0.289 — Mobile product-title readability
   - Keep desktop product-card titles at 14px
   - Increase mobile product-card titles to 16px
   - Preserve Open Sans, regular weight, and relaxed line-height
   ========================================================= */
@media (max-width:700px){
    body.storefront .product-card-body h3,
    body.storefront .catalog-card .product-card-body h3,
    body.storefront .recommended-section .product-card-body h3,
    body.storefront .latest-section .product-card-body h3{
        font-size:16px !important;
        font-weight:400 !important;
        line-height:1.6 !important;
    }
}

/* =========================================================
   v1.0.290 — Mobile readability compact pass
   - Reclaim vertical space from Hero without changing the desktop layout.
   - Make spare-part categories readable: 3 columns, two-line labels.
   - Keep the final two category cards balanced 50/50 on the last row.
   ========================================================= */
@media (max-width:700px){
    /* Compact Hero: keep the same image/content, just crop tighter */
    .storefront .home-hero,
    .storefront .hero-content{
        height:270px !important;
        min-height:270px !important;
    }
    .storefront .hero-picture img{
        object-fit:cover !important;
        object-position:58% 67% !important;
    }
    .storefront .hero-copy{
        padding-top:12px !important;
    }
    .storefront .hero-copy h1{
        font-size:25px !important;
        line-height:1.04 !important;
    }
    .storefront .hero-sub{
        margin:5px 0 9px !important;
        font-size:11.5px !important;
    }
    .storefront .hero-point{
        gap:3px !important;
    }
    .storefront .hero-point>span{
        width:26px !important;
        height:26px !important;
        flex-basis:26px !important;
    }
    .storefront .hero-point b{
        font-size:8.1px !important;
        line-height:1.08 !important;
    }
    .storefront .hero-point small{
        font-size:6.9px !important;
        line-height:1.08 !important;
    }

    /* Spare-part categories: readable 3-column layout */
    .storefront .home-categories .category-grid{
        display:grid !important;
        grid-template-columns:repeat(6,minmax(0,1fr)) !important;
        gap:7px !important;
    }
    .storefront .home-categories .category-card{
        grid-column:span 2 !important;
        min-width:0 !important;
        padding:7px 5px 8px !important;
        border-radius:9px !important;
    }
    .storefront .home-categories .category-card:nth-last-child(-n+2){
        grid-column:span 3 !important;
    }
    .storefront .home-categories .category-image{
        height:68px !important;
    }
    .storefront .home-categories .category-card b{
        display:-webkit-box !important;
        min-height:34px !important;
        margin-top:5px !important;
        overflow:hidden !important;
        -webkit-box-orient:vertical !important;
        -webkit-line-clamp:2 !important;
        white-space:normal !important;
        text-overflow:clip !important;
        font-family:'Open Sans',Tahoma,Arial,sans-serif !important;
        font-size:13px !important;
        font-weight:600 !important;
        line-height:1.3 !important;
        text-align:center !important;
    }
}

@media (max-width:380px){
    .storefront .hero-copy h1{font-size:23px !important;}
    .storefront .home-categories .category-card b{font-size:12.5px !important;}
}

/* =========================================================
   v1.0.291 — Mobile Hero 200px final compact pass
   - Reduce only the mobile hero height to 200px.
   - Tighten headline spacing and keep the 3 trust points readable.
   - Hide the tiny secondary trust-point copy on mobile to avoid clutter.
   ========================================================= */
@media (max-width:700px){
    .storefront .home-hero,
    .storefront .hero-content{
        height:200px !important;
        min-height:200px !important;
    }
    .storefront .hero-copy{
        padding-top:7px !important;
    }
    .storefront .hero-copy h1{
        font-size:22px !important;
        line-height:1.02 !important;
    }
    .storefront .hero-sub{
        margin:3px 0 5px !important;
        font-size:9.8px !important;
        line-height:1.15 !important;
    }
    .storefront .hero-points{
        bottom:5px !important;
        gap:3px !important;
    }
    .storefront .hero-point>span,
    .storefront .hero-service-icon{
        width:24px !important;
        height:24px !important;
        flex-basis:24px !important;
    }
    .storefront .hero-service-icon svg{
        width:17px !important;
        height:17px !important;
    }
    .storefront .hero-point b{
        font-size:7.7px !important;
        line-height:1.08 !important;
    }
    .storefront .hero-point small{
        display:none !important;
    }
    .storefront .hero-picture img{
        object-position:58% 66% !important;
    }
}

/* =========================================================
   v1.0.292 — Mobile hero service icons restored larger
   Keep hero at 200px, but enlarge the 3 service icons/titles
   back to a readable size after the compact-hero reduction.
   ========================================================= */
@media (max-width:700px){
    .storefront .hero-points{
        bottom:6px !important;
        gap:4px !important;
    }

    .storefront .hero-point{
        padding:0 2px !important;
        gap:3px !important;
    }

    .storefront .hero-point>span,
    .storefront .hero-service-icon{
        width:34px !important;
        height:34px !important;
        flex:0 0 34px !important;
        flex-basis:34px !important;
        margin:0 auto 1px !important;
    }

    .storefront .hero-service-icon svg{
        width:24px !important;
        height:24px !important;
    }

    .storefront .hero-point b{
        font-size:9.8px !important;
        line-height:1.08 !important;
        font-weight:700 !important;
        letter-spacing:0 !important;
    }

    .storefront .hero-point small{
        display:none !important;
    }
}

/* =========================================================
   v1.0.293 — Mobile hero service icons much larger
   User requested the 3 service items to be clearly visible.
   ========================================================= */
@media (max-width:700px){
    .storefront .hero-points{
        left:6px !important;
        right:6px !important;
        bottom:6px !important;
        gap:2px !important;
    }

    .storefront .hero-point{
        padding:0 1px !important;
        gap:4px !important;
    }

    .storefront .hero-point>span,
    .storefront .hero-service-icon{
        width:40px !important;
        height:40px !important;
        flex:0 0 40px !important;
        flex-basis:40px !important;
        margin:0 auto 1px !important;
        border-width:1.6px !important;
        background:rgba(0,0,0,.18) !important;
    }

    .storefront .hero-service-icon svg{
        width:28px !important;
        height:28px !important;
    }

    .storefront .hero-point b{
        font-size:11.2px !important;
        line-height:1.1 !important;
        font-weight:800 !important;
        letter-spacing:0 !important;
        text-shadow:0 1px 2px rgba(0,0,0,.45) !important;
    }

    .storefront .hero-point small{
        display:none !important;
    }
}

/* =========================================================
   v1.0.295 — MOBILE ONLY hero service translucent rounded boxes
   IMPORTANT: desktop/PC untouched. Applies only at max-width 700px.
   ========================================================= */
@media (max-width:700px){
    .storefront .hero-points{
        left:6px !important;
        right:6px !important;
        bottom:6px !important;
        gap:6px !important;
    }

    .storefront .hero-point{
        min-width:0 !important;
        min-height:60px !important;
        padding:5px 4px 4px !important;
        border:none !important;
        border-radius:10px !important;
        background:rgba(0,0,0,.28) !important;
        box-shadow:0 2px 8px rgba(0,0,0,.16) !important;
        backdrop-filter:blur(1.5px) !important;
        -webkit-backdrop-filter:blur(1.5px) !important;
    }

    .storefront .hero-point>span,
    .storefront .hero-service-icon{
        width:46px !important;
        height:46px !important;
        flex-basis:46px !important;
        margin:0 auto 2px !important;
    }

    .storefront .hero-service-icon svg{
        width:30px !important;
        height:30px !important;
    }

    .storefront .hero-point b{
        font-size:11.2px !important;
        line-height:1.08 !important;
        font-weight:800 !important;
        text-shadow:0 1px 2px rgba(0,0,0,.42) !important;
        white-space:nowrap !important;
    }

    .storefront .hero-point small{
        display:none !important;
    }
}

/* =========================================================
   v1.0.297 — Mobile hero service labels slightly larger
   Mobile only: enlarge the 3 service labels while keeping
   the 200px hero and translucent rounded boxes unchanged.
   ========================================================= */
@media (max-width:700px){
    .storefront .hero-point b{
        font-size:12.6px !important;
        line-height:1.08 !important;
        font-weight:800 !important;
    }
}

/* =========================================================
   v1.0.298 — Mobile hero subtitle +4px
   Increase only the mobile subtitle: "ตรวจเช็คแล้ว มั่นใจ คุณภาพดี ราคาคุ้มค่า".
   Desktop remains unchanged.
   ========================================================= */
@media (max-width:700px){
    .storefront .hero-sub{
        font-size:13.8px !important;
    }
}

/* =========================================================
   v1.0.299 — Mobile category labels: short, single-line, +2px
   Desktop category wording/layout remains unchanged.
   ========================================================= */
@media (max-width:700px){
    .storefront .home-categories .category-card b[data-mobile-label]{
        display:block !important;
        min-height:20px !important;
        margin-top:5px !important;
        overflow:hidden !important;
        white-space:nowrap !important;
        text-overflow:ellipsis !important;
        -webkit-line-clamp:unset !important;
        font-family:'Open Sans',Tahoma,Arial,sans-serif !important;
        font-size:15px !important;
        font-weight:600 !important;
        line-height:1.2 !important;
        text-align:center !important;
        color:transparent !important;
        position:relative !important;
    }
    .storefront .home-categories .category-card b[data-mobile-label]::after{
        content:attr(data-mobile-label);
        color:#111 !important;
        position:absolute !important;
        inset:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        white-space:nowrap !important;
    }
}
@media (max-width:380px){
    .storefront .home-categories .category-card b[data-mobile-label]{
        font-size:14.5px !important;
    }
}

/* =========================================================
   v1.0.300 — Mobile categories final layout polish
   - Keep 3 cards per row for main categories.
   - Put "ล้อและยาง" in row 3, col 3 naturally.
   - Make "อื่น ๆ" a compact full-width bar across all 3 columns.
   - Mobile only. Desktop untouched.
   ========================================================= */
@media (max-width:700px){
    .storefront .home-categories .category-grid{
        display:grid !important;
        grid-template-columns:repeat(6,minmax(0,1fr)) !important;
        gap:7px !important;
        align-items:stretch !important;
    }

    .storefront .home-categories .category-card{
        grid-column:span 2 !important;
        min-width:0 !important;
        padding:7px 5px 8px !important;
        border-radius:9px !important;
    }

    /* Cancel the old "last two cards span 3 columns" rule */
    .storefront .home-categories .category-card:nth-last-child(-n+2){
        grid-column:span 2 !important;
    }

    .storefront .home-categories .category-card.category-more{
        grid-column:1 / -1 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        min-height:0 !important;
        height:auto !important;
        padding:10px 12px !important;
    }

    .storefront .home-categories .category-card.category-more .category-image{
        display:none !important;
    }

    .storefront .home-categories .category-card.category-more b,
    .storefront .home-categories .category-card.category-more b[data-mobile-label]{
        min-height:0 !important;
        margin-top:0 !important;
        font-size:15px !important;
        line-height:1.15 !important;
        white-space:nowrap !important;
        text-align:center !important;
    }

    .storefront .home-categories .category-card.category-more b[data-mobile-label]::after{
        position:static !important;
        inset:auto !important;
        display:block !important;
    }
}

@media (max-width:380px){
    .storefront .home-categories .category-card.category-more b,
    .storefront .home-categories .category-card.category-more b[data-mobile-label]{
        font-size:14.5px !important;
    }
}


/* =========================================================
   v1.0.301 — Mobile compact Other-category bar
   - Shorter height only as needed.
   - Mobile label: อะไหล่หมวดอื่น ๆ
   - Desktop untouched.
   ========================================================= */
@media (max-width:700px){
    .storefront .home-categories .category-card.category-more{
        min-height:0 !important;
        height:38px !important;
        padding:0 12px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        border-radius:8px !important;
    }
    .storefront .home-categories .category-card.category-more b,
    .storefront .home-categories .category-card.category-more b[data-mobile-label]{
        min-height:0 !important;
        margin:0 !important;
        font-size:15px !important;
        line-height:1 !important;
    }
}

/* =========================================================
   v1.0.302 — Center Other-category label vertically
   Mobile only. Keep compact 38px bar height.
   ========================================================= */
@media (max-width:700px){
    .storefront .home-categories .category-card.category-more b,
    .storefront .home-categories .category-card.category-more b[data-mobile-label]{
        width:100% !important;
        height:100% !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        margin:0 !important;
        padding:0 !important;
        line-height:1 !important;
    }

    .storefront .home-categories .category-card.category-more b[data-mobile-label]::after{
        width:100% !important;
        height:100% !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        position:absolute !important;
        inset:0 !important;
    }
}

/* =========================================================
   v1.0.311 — iPhone admin form anti-auto-zoom
   Safari on iPhone auto-zooms focused form controls below 16px.
   Keep all admin form inputs/selects/textareas at 16px on mobile.
   ========================================================= */
@media (max-width:700px){
    body.admin input,
    body.admin select,
    body.admin textarea{
        font-size:16px !important;
    }
}


/* =========================================================
   v1.0.312 — Optional customer info in sale flow
   ========================================================= */
.sale-form-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  align-items:center;
}
.sale-form-actions .btn{min-width:120px;text-align:center;}
.sale-customer-form{max-width:760px;}
.admin-empty-state{padding:24px;text-align:center;color:#64748b;}
.admin .form label small{font-weight:400;color:#64748b;}

@media (max-width:700px){
  .admin .sale-form-actions{
    display:grid;
    grid-template-columns:1fr 1.5fr;
    gap:8px;
  }
  .admin .sale-form-actions .btn{
    min-width:0;
    width:100%;
  }
  .admin .adminlist .row > .btn.small{
    flex:0 0 auto;
    white-space:nowrap;
    padding-left:10px;
    padding-right:10px;
  }
}


/* v1.0.322 — Admin logout link + account page polish */
.admin-logout-link{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:8px 14px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:10px;
    background:rgba(255,255,255,.06);
    color:#fff;
    font-size:14px;
    font-weight:700;
    transition:background .15s ease,border-color .15s ease,transform .08s ease;
}
.admin-logout-link:hover,
.admin-logout-link:focus{
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.34);
}
.admin-logout-link:active{transform:translateY(1px)}
@media(max-width:700px){
    .admin-logout-link{display:none;}
}


/* v1.0.338 — Settings page mobile footer simplification
   Replace the 3-button mobile bottom nav on settings.php with a single
   low-emphasis text link that goes back to the admin home dashboard. */
@media(max-width:700px){
    .bottomnav.bottomnav-settings{
        justify-content:center !important;
        padding:0 16px !important;
        background:#eef3fb !important;
        border-top:1px solid #d6dfec !important;
        box-shadow:0 -2px 8px rgba(20,40,80,.05) !important;
    }
    .bottomnav.bottomnav-settings .bottomnav-backhome{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:100% !important;
        height:100% !important;
        font-size:14px !important;
        font-weight:700 !important;
        color:var(--ts-brand-text,#355584) !important;
        background:transparent !important;
        border:0 !important;
    }
}


/* =========================================================
   v1.0.345 — Footer Facebook + unified Contact typography
   - Add Facebook TeeraShop directly under the phone row
   - Contact heading/list typography follows the Menu column
   - Keep existing contact icons; Facebook gets its own blue icon
   ========================================================= */
.storefront .store-footer .footer-contact-icon--facebook{
    color:#fff !important;
    border-color:#1877F2 !important;
    background:#1877F2 !important;
}
.storefront .store-footer .footer-contact-icon--facebook svg{
    width:18px !important;
    height:18px !important;
    display:block !important;
    fill:currentColor !important;
}
.storefront .store-footer .footer-contact-facebook:hover .footer-contact-icon--facebook{
    color:#fff !important;
    border-color:#4f96f7 !important;
    background:#2f84f3 !important;
}

/* Desktop / tablet: Menu and Contact use one typography scale. */
@media(min-width:701px){
    .storefront .store-footer .footer-menu h3,
    .storefront .store-footer .footer-contact h3{
        font-size:18px !important;
        line-height:1.25 !important;
        font-weight:600 !important;
    }
    .storefront .store-footer .footer-menu a,
    .storefront .store-footer .footer-contact > a,
    .storefront .store-footer .footer-contact-row,
    .storefront .store-footer .footer-contact-row > div{
        font-size:15px !important;
        line-height:1.45 !important;
        font-weight:400 !important;
    }
}

/* Mobile: Contact now matches the already-approved Menu sizes. */
@media(max-width:700px){
    .storefront .store-footer .footer-menu h3,
    .storefront .store-footer .footer-contact h3{
        font-size:19px !important;
        line-height:1.25 !important;
    }
    .storefront .store-footer .footer-menu a,
    .storefront .store-footer .footer-contact > a,
    .storefront .store-footer .footer-contact-row,
    .storefront .store-footer .footer-contact-row > div{
        font-size:15px !important;
        line-height:1.45 !important;
    }
    .storefront .store-footer .footer-contact-icon--facebook svg{
        width:15px !important;
        height:15px !important;
    }
}

/* =========================================================
   v1.0.346 — Footer contact icons: simple glyphs, no circles
   Keep the existing icon meanings/colors, but remove oversized
   circular containers so icons balance with the contact text.
   Applies to desktop and mobile.
   ========================================================= */
.storefront .store-footer .footer-contact > a,
.storefront .store-footer .footer-contact-row{
    align-items:center !important;
}
.storefront .store-footer .footer-contact-icon,
.storefront .store-footer .footer-contact > a > .footer-contact-icon,
.storefront .store-footer .footer-contact-row > .footer-contact-icon{
    flex:0 0 18px !important;
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:0 !important;
    font-size:16px !important;
    line-height:1 !important;
}
.storefront .store-footer .footer-contact-icon--phone{
    color:#5B78FF !important;
}
.storefront .store-footer .footer-contact-icon--facebook{
    color:#1877F2 !important;
    background:transparent !important;
}
.storefront .store-footer .footer-contact-icon--address{
    color:#E31B23 !important;
    background:transparent !important;
}
.storefront .store-footer .footer-contact-icon--map{
    color:#F59E0B !important;
    background:transparent !important;
}
.storefront .store-footer .footer-contact-icon--facebook svg,
.storefront .store-footer .footer-contact-icon--map svg{
    width:16px !important;
    height:16px !important;
    display:block !important;
}
.storefront .store-footer .footer-contact-icon--facebook svg{
    fill:currentColor !important;
}
.storefront .store-footer .footer-contact-icon--map svg{
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.9 !important;
}
.storefront .store-footer .footer-contact-phone:hover .footer-contact-icon--phone,
.storefront .store-footer .footer-contact-facebook:hover .footer-contact-icon--facebook,
.storefront .store-footer .footer-map-link:hover .footer-contact-icon--map{
    background:transparent !important;
    border-color:transparent !important;
}
.storefront .store-footer .footer-contact-row > div{
    padding-top:0 !important;
}
@media(max-width:700px){
    .storefront .store-footer .footer-contact-icon,
    .storefront .store-footer .footer-contact > a > .footer-contact-icon,
    .storefront .store-footer .footer-contact-row > .footer-contact-icon{
        flex-basis:17px !important;
        width:17px !important;
        height:17px !important;
        min-width:17px !important;
        font-size:15px !important;
    }
    .storefront .store-footer .footer-contact-icon--facebook svg,
    .storefront .store-footer .footer-contact-icon--map svg{
        width:15px !important;
        height:15px !important;
    }
}

/* =========================================================
   v1.0.347 — Footer contact icons: visual size balance
   The phone glyph looked optically larger than the other icons.
   Keep the same icon set/colors, but normalize the perceived size
   so every contact row feels balanced with the text.
   ========================================================= */
.storefront .store-footer .footer-contact-icon,
.storefront .store-footer .footer-contact > a > .footer-contact-icon,
.storefront .store-footer .footer-contact-row > .footer-contact-icon{
    flex:0 0 16px !important;
    width:16px !important;
    height:16px !important;
    min-width:16px !important;
}
.storefront .store-footer .footer-contact-icon--phone{
    font-size:13px !important;
    line-height:1 !important;
}
.storefront .store-footer .footer-contact-icon--facebook{
    font-size:13px !important;
}
.storefront .store-footer .footer-contact-icon--address{
    font-size:13px !important;
}
.storefront .store-footer .footer-contact-icon--facebook svg,
.storefront .store-footer .footer-contact-icon--map svg{
    width:13px !important;
    height:13px !important;
}
.storefront .store-footer .footer-contact-icon--map svg{
    stroke-width:2 !important;
}
@media(max-width:700px){
    .storefront .store-footer .footer-contact-icon,
    .storefront .store-footer .footer-contact > a > .footer-contact-icon,
    .storefront .store-footer .footer-contact-row > .footer-contact-icon{
        flex-basis:15px !important;
        width:15px !important;
        height:15px !important;
        min-width:15px !important;
    }
    .storefront .store-footer .footer-contact-icon--phone,
    .storefront .store-footer .footer-contact-icon--facebook,
    .storefront .store-footer .footer-contact-icon--address{
        font-size:12px !important;
    }
    .storefront .store-footer .footer-contact-icon--facebook svg,
    .storefront .store-footer .footer-contact-icon--map svg{
        width:12px !important;
        height:12px !important;
    }
}

/* =========================================================
   v1.0.348 — Footer contact icons: enlarge smaller glyphs
   Keep phone icon as visual reference; enlarge Facebook,
   address, and map icons until they visually match it.
   ========================================================= */
.storefront .store-footer .footer-contact-icon--facebook{
    font-size:16px !important;
}
.storefront .store-footer .footer-contact-icon--address{
    font-size:16px !important;
}
.storefront .store-footer .footer-contact-icon--facebook svg,
.storefront .store-footer .footer-contact-icon--map svg{
    width:16px !important;
    height:16px !important;
}
@media(max-width:700px){
    .storefront .store-footer .footer-contact-icon--facebook,
    .storefront .store-footer .footer-contact-icon--address{
        font-size:15px !important;
    }
    .storefront .store-footer .footer-contact-icon--facebook svg,
    .storefront .store-footer .footer-contact-icon--map svg{
        width:15px !important;
        height:15px !important;
    }
}


/* =========================================================
   v1.0.349 — Footer contact icons: one unified SVG set
   Replace mixed text glyphs / assorted SVGs with one consistent
   24x24 inline SVG system so all four icons share the same box,
   weight and optical scale on desktop and mobile.
   ========================================================= */
.storefront .store-footer .footer-contact-icon,
.storefront .store-footer .footer-contact > a > .footer-contact-icon,
.storefront .store-footer .footer-contact-row > .footer-contact-icon{
    flex:0 0 18px !important;
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:0 !important;
    line-height:0 !important;
}
.storefront .store-footer .footer-contact-icon svg,
.storefront .store-footer .footer-contact-icon--phone svg,
.storefront .store-footer .footer-contact-icon--facebook svg,
.storefront .store-footer .footer-contact-icon--address svg,
.storefront .store-footer .footer-contact-icon--map svg{
    display:block !important;
    width:18px !important;
    height:18px !important;
    overflow:visible !important;
}
.storefront .store-footer .footer-contact-icon--phone svg,
.storefront .store-footer .footer-contact-icon--facebook svg{
    fill:currentColor !important;
    stroke:none !important;
}
.storefront .store-footer .footer-contact-icon--address svg,
.storefront .store-footer .footer-contact-icon--map svg{
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:2 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}
@media(max-width:700px){
    .storefront .store-footer .footer-contact-icon,
    .storefront .store-footer .footer-contact > a > .footer-contact-icon,
    .storefront .store-footer .footer-contact-row > .footer-contact-icon{
        flex-basis:17px !important;
        width:17px !important;
        height:17px !important;
        min-width:17px !important;
    }
    .storefront .store-footer .footer-contact-icon svg,
    .storefront .store-footer .footer-contact-icon--phone svg,
    .storefront .store-footer .footer-contact-icon--facebook svg,
    .storefront .store-footer .footer-contact-icon--address svg,
    .storefront .store-footer .footer-contact-icon--map svg{
        width:17px !important;
        height:17px !important;
    }
}


/* v1.0.350 - make homepage "view all" links clearer and more tappable */
body.storefront .store-section-head .section-view-all{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    padding:8px 14px !important;
    min-height:36px !important;
    border-radius:999px !important;
    border:1px solid #f3bcc0 !important;
    background:linear-gradient(180deg,#fff5f5 0%, #ffe7e9 100%) !important;
    color:#cf1b28 !important;
    font-size:14px !important;
    font-weight:800 !important;
    line-height:1 !important;
    white-space:nowrap !important;
    text-decoration:none !important;
    box-shadow:0 1px 0 rgba(207,27,40,.08) !important;
    transition:background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease !important;
}
body.storefront .store-section-head .section-view-all:hover,
body.storefront .store-section-head .section-view-all:focus-visible{
    background:linear-gradient(180deg,#ffecef 0%, #ffdfe3 100%) !important;
    border-color:#ea9ea5 !important;
    color:#b91420 !important;
    transform:translateY(-1px) !important;
}
body.storefront .store-section-head .section-view-all:active{
    transform:translateY(0) !important;
}
@media(max-width:700px){
    body.storefront .store-section-head .section-view-all{
        padding:7px 11px !important;
        min-height:32px !important;
        font-size:12px !important;
        border-width:1px !important;
    }
}
@media(max-width:390px){
    body.storefront .store-section-head .section-view-all{
        padding:6px 9px !important;
        min-height:30px !important;
        font-size:11px !important;
    }
}

/* =========================================================
   v1.0.353 — Product section View All CTA: lighter hierarchy
   Keep it clearly clickable without competing with section titles.
   Applies only to the two product sections that use .section-view-all.
   ========================================================= */
body.storefront .store-section-head .section-view-all{
    padding:6px 10px !important;
    min-height:30px !important;
    border:0 !important;
    border-radius:999px !important;
    background:#fff1f2 !important;
    color:#d51f2b !important;
    font-size:13px !important;
    font-weight:600 !important;
    line-height:1.1 !important;
    box-shadow:none !important;
}
body.storefront .store-section-head .section-view-all:hover,
body.storefront .store-section-head .section-view-all:focus-visible{
    background:#ffe6e8 !important;
    color:#b91c27 !important;
    border:0 !important;
    box-shadow:none !important;
    transform:none !important;
}
body.storefront .store-section-head .section-view-all:active{
    background:#ffdde0 !important;
    transform:none !important;
}
@media(max-width:700px){
    body.storefront .store-section-head .section-view-all{
        padding:5px 8px !important;
        min-height:27px !important;
        font-size:11.5px !important;
        font-weight:600 !important;
    }
}
@media(max-width:390px){
    body.storefront .store-section-head .section-view-all{
        padding:5px 7px !important;
        min-height:26px !important;
        font-size:11px !important;
    }
}


/* =========================================================
   v1.0.354 — Admin Mobile App-like Shell
   Mobile-only navigation and touch ergonomics. Storefront untouched.
   ========================================================= */
.admin-app-bottomnav{display:none}
@media(max-width:700px){
    body.admin{
        padding-bottom:calc(82px + env(safe-area-inset-bottom)) !important;
        background:#f3f6fa !important;
    }
    .admin .adminhead{
        position:sticky !important;top:0 !important;z-index:80 !important;
        height:64px !important;padding:0 12px !important;
        box-shadow:0 2px 12px rgba(31,49,77,.14) !important;
    }
    .admin .admin-home-logo img{max-height:42px !important;width:auto !important;display:block !important}
    .admin .admin-store-link{
        min-height:38px !important;padding:8px 10px !important;border-radius:10px !important;
        background:rgba(255,255,255,.10) !important;border:1px solid rgba(255,255,255,.16) !important;
        color:#fff !important;font-size:12px !important;font-weight:700 !important;
    }
    .admin .admin-mobile-native-menu summary{
        width:40px !important;height:40px !important;border-radius:11px !important;
        display:grid !important;place-items:center !important;background:rgba(255,255,255,.10) !important;
    }
    .admin .adminmain{padding:14px 10px 20px !important}
    .admin .pagehead{gap:10px !important;margin-bottom:12px !important}
    .admin .pagehead h1{font-size:24px !important;line-height:1.2 !important;margin:8px 0 !important}
    .admin .pagehead .btn{min-height:44px !important;border-radius:12px !important}
    .admin .stats{gap:10px !important}
    .admin .stats .stat-link,
    .admin .stats>div{
        min-height:102px !important;padding:14px 12px !important;border:0 !important;border-radius:16px !important;
        background:#fff !important;box-shadow:0 2px 10px rgba(35,55,85,.07) !important;
        display:flex !important;flex-direction:column !important;justify-content:center !important;
    }
    .admin .stats b{font-size:27px !important;line-height:1.1 !important}
    .admin .stats span{margin-top:6px !important;font-size:14px !important}
    .admin .row,.admin .form,.admin .panel{
        border-radius:15px !important;border-color:#e1e7ef !important;
        box-shadow:0 1px 5px rgba(35,55,85,.04) !important;
    }
    .admin .form input,.admin .form select,.admin .form textarea,.admin .quick input,.admin .quick select{
        min-height:46px !important;border-radius:11px !important;
    }
    .admin .btn{min-height:42px !important;border-radius:11px !important}
    .bottomnav{display:none !important}
    .admin-app-bottomnav{
        display:grid !important;grid-template-columns:repeat(5,1fr) !important;
        position:fixed !important;left:0 !important;right:0 !important;bottom:0 !important;z-index:100 !important;
        height:calc(68px + env(safe-area-inset-bottom)) !important;padding:5px 4px env(safe-area-inset-bottom) !important;
        background:rgba(255,255,255,.97) !important;border-top:1px solid #dce3ec !important;
        box-shadow:0 -5px 18px rgba(31,49,77,.10) !important;
    }
    .admin-app-navitem{
        position:relative !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;
        gap:2px !important;min-width:0 !important;color:#6c7788 !important;font-size:12.5px !important;font-weight:800 !important;
        -webkit-tap-highlight-color:transparent !important;
    }
    .admin-app-navicon{height:25px !important;display:grid !important;place-items:center !important;font-size:22px !important;line-height:1 !important;font-weight:800 !important}
    .admin-app-navlabel{white-space:nowrap !important;line-height:1.15 !important;font-size:12.5px !important;font-weight:800 !important}
    .admin-app-navitem.is-active{color:var(--ts-brand-deep,#2f466e) !important}
    .admin-app-navitem.is-active:not(.admin-app-navitem-add)::before{
        content:"" !important;position:absolute !important;top:0 !important;width:24px !important;height:3px !important;border-radius:0 0 3px 3px !important;background:var(--ts-brand,#3f5f93) !important;
    }
    .admin-app-navitem-add .admin-app-navicon{
        width:46px !important;height:46px !important;margin-top:-20px !important;margin-bottom:1px !important;border-radius:15px !important;
        background:var(--ts-brand,#3f5f93) !important;color:#fff !important;font-size:30px !important;
        box-shadow:0 5px 12px rgba(47,70,110,.25) !important;
    }
    .admin-app-navitem-add.is-active .admin-app-navicon{background:var(--ts-brand-deep,#2f466e) !important}
}

/* v1.0.357 — Footer shop address itself opens Google Maps */
.storefront .store-footer .footer-address-link{
  color:inherit;
  text-decoration:none;
}
.storefront .store-footer .footer-address-link:hover,
.storefront .store-footer .footer-address-link:focus{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
}


/* v1.0.368 — Admin wanted-parts notification bell */
.admin-notify-bell{position:relative;width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;color:#fff;border-radius:50%;text-decoration:none;flex:0 0 38px}
.admin-notify-bell:hover{background:rgba(255,255,255,.10)}
.admin-notify-bell svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.admin-notify-badge{position:absolute;top:1px;right:0;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:#e31b23;color:#fff;border:2px solid #31527e;font-size:10px;font-weight:800;line-height:13px;text-align:center;white-space:nowrap;box-sizing:border-box}
@media(max-width:700px){.admin-notify-bell{width:36px;height:36px;flex-basis:36px}.admin-notify-bell svg{width:22px;height:22px}.admin-notify-badge{top:0;right:-1px}}





/* =========================================================
   v1.0.394 — Real hamburger span for iPhone Safari
   Avoid pseudo-element rendering issues on <summary>.
   ========================================================= */
.admin-mobile-native-menu > summary{
    font-size:0 !important;
}
.admin-mobile-native-menu .admin-mobile-hamburger{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    font-size:23px !important;
    line-height:1 !important;
    color:#fff !important;
    -webkit-text-fill-color:#fff !important;
    opacity:1 !important;
    visibility:visible !important;
}
.admin-mobile-native-menu[open] .admin-mobile-hamburger{
    display:inline-flex !important;
    opacity:1 !important;
    visibility:visible !important;
}


/* =========================================================
   v1.0.395 — SVG hamburger icon, always visible on iPhone/Safari
   ========================================================= */
.admin-mobile-native-menu .admin-mobile-hamburger svg{
    width:22px !important;
    height:22px !important;
    display:block !important;
    overflow:visible !important;
}
.admin-mobile-native-menu .admin-mobile-hamburger svg path{
    fill:none !important;
    stroke:#fff !important;
    stroke-width:1.8 !important;
    stroke-linecap:round !important;
}
.admin-mobile-native-menu[open] .admin-mobile-hamburger svg,
.admin-mobile-native-menu[open] .admin-mobile-hamburger svg path{
    opacity:1 !important;
    visibility:visible !important;
}


/* =========================================================
   v1.0.398 — Product share button (single-row mobile layout)
   - Add a compact share action next to the main call/check-stock CTA
   - Mobile must stay one row; no extra line added under the CTA area
   - Use native share when available, fallback to LINE share URL
   ========================================================= */
.storefront .product-detail-section .product-actions{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 88px !important;
    gap:8px !important;
    align-items:stretch !important;
}
.storefront .product-detail-section .product-actions .store-btn{
    width:100% !important;
}
.storefront .product-detail-section .product-actions .store-btn.call{
    min-width:0 !important;
}
.storefront .product-detail-section .product-actions .store-btn.share{
    background:#eef3f8 !important;
    border-color:#d5dee8 !important;
    color:#173f70 !important;
    padding:0 8px !important;
    gap:4px !important;
}
.storefront .product-detail-section .product-actions .store-btn.share .share-icon{
    font-size:16px !important;
    line-height:1 !important;
}
.storefront .product-detail-section .product-actions .store-btn.share .share-label{
    font-size:13px !important;
    line-height:1 !important;
}
@media(max-width:700px){
    .storefront .product-detail-section .product-actions{
        grid-template-columns:minmax(0,1fr) 66px !important;
        gap:8px !important;
        margin-top:14px !important;
        padding:0 !important;
        background:transparent !important;
    }
    .storefront .product-detail-section .product-actions .store-btn.call{
        width:100% !important;
        padding:0 10px !important;
        min-width:0 !important;
        white-space:nowrap !important;
        font-size:15px !important;
    }
    .storefront .product-detail-section .product-actions .store-btn.share{
        width:66px !important;
        min-width:66px !important;
        padding:0 !important;
        gap:2px !important;
        flex-direction:column !important;
    }
    .storefront .product-detail-section .product-actions .store-btn.share .share-icon{
        font-size:14px !important;
    }
    .storefront .product-detail-section .product-actions .store-btn.share .share-label{
        font-size:11px !important;
    }
}


/* =========================================================
   v1.0.409 — Modern SVG share icon for iOS + Android
   - Replace platform-dependent text glyph with inline SVG
   - Keep the button compact on mobile but improve clarity and consistency
   - Share icon should render modern and consistent across Safari/Chrome/Android
   ========================================================= */
.storefront .product-detail-section .product-actions .store-btn.share{
    border-radius:10px !important;
    box-shadow:0 1px 0 rgba(255,255,255,.8) inset !important;
}
.storefront .product-detail-section .product-actions .store-btn.share .share-icon{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:22px !important;
    height:22px !important;
    border-radius:7px !important;
    background:rgba(23,63,112,.10) !important;
    flex:0 0 22px !important;
}
.storefront .product-detail-section .product-actions .store-btn.share .share-icon-svg{
    width:15px !important;
    height:15px !important;
    display:block !important;
    overflow:visible !important;
}
.storefront .product-detail-section .product-actions .store-btn.share .share-icon-svg path{
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.85 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
}
.storefront .product-detail-section .product-actions .store-btn.share .share-label{
    font-weight:700 !important;
    letter-spacing:0 !important;
}
@media(max-width:700px){
    .storefront .product-detail-section .product-actions .store-btn.share{
        border-radius:10px !important;
    }
    .storefront .product-detail-section .product-actions .store-btn.share .share-icon{
        width:20px !important;
        height:20px !important;
        border-radius:6px !important;
        flex-basis:20px !important;
    }
    .storefront .product-detail-section .product-actions .store-btn.share .share-icon-svg{
        width:14px !important;
        height:14px !important;
    }
    .storefront .product-detail-section .product-actions .store-btn.share .share-label{
        font-size:10.5px !important;
        line-height:1 !important;
    }
}


/* =========================================================
   v1.0.410 — Contact page brand logo block
   - Add a clear TEERA SERVICE logo area on Contact page for stronger branding
   - Keep desktop and mobile layouts clean and readable
   ========================================================= */
.storefront .contact-brand{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 0 18px;
    padding:12px 16px;
    border:1px solid #dbe4ee;
    border-radius:14px;
    background:linear-gradient(180deg,#fbfdff 0%, #f3f7fb 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
}
.storefront .contact-brand img{
    display:block;
    width:min(100%, 360px);
    height:auto;
}
@media(max-width:700px){
    .storefront .contact-brand{
        margin:0 0 16px !important;
        padding:10px 12px !important;
        border-radius:12px !important;
    }
    .storefront .contact-brand img{
        width:min(100%, 230px) !important;
    }
}


/* =========================================================
   v1.0.411 — Contact page compact top-right logo
   - Replace the full-width logo block with the supplied vertical logo
   - Keep the logo at the top-right of the contact card without opening a new row
   - Preserve clean branding on both desktop and mobile
   ========================================================= */
.storefront .contact-brand{
    display:none !important;
}
.storefront .contact-card-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) 84px;
    gap:14px;
    align-items:start;
    margin-bottom:18px;
}
.storefront .contact-card-head h2{
    margin:0 !important;
}
.storefront .contact-card-logo{
    justify-self:end;
    align-self:start;
    width:84px;
}
.storefront .contact-card-logo img{
    display:block;
    width:100%;
    height:auto;
}
@media(max-width:700px){
    .storefront .contact-card-head{
        grid-template-columns:minmax(0,1fr) 70px !important;
        gap:10px !important;
        margin-bottom:16px !important;
    }
    .storefront .contact-card-logo{
        width:70px !important;
    }
}


/* =========================================================
   v1.0.412 — Contact corner logo without vertical gap
   - Keep the vertical brand logo at the top-right
   - Take the logo out of normal document flow so its height does not push content down
   - Reserve only the small top-left text area that can physically overlap the logo
   ========================================================= */
.storefront .contact-card{
    position:relative !important;
}
.storefront .contact-card-head{
    display:contents !important;
    margin:0 !important;
}
.storefront .contact-card-logo{
    position:absolute !important;
    top:20px !important;
    right:20px !important;
    width:78px !important;
    z-index:2 !important;
    margin:0 !important;
}
.storefront .contact-card-logo img{
    display:block !important;
    width:100% !important;
    height:auto !important;
}
.storefront .contact-card > h2{
    padding-right:96px !important;
    margin-bottom:18px !important;
}
.storefront .contact-info-list .contact-info-row:first-child{
    padding-right:96px !important;
    box-sizing:border-box !important;
}
@media(max-width:700px){
    .storefront .contact-card-logo{
        top:16px !important;
        right:16px !important;
        width:66px !important;
    }
    .storefront .contact-card > h2{
        padding-right:82px !important;
        margin-bottom:17px !important;
    }
    .storefront .contact-info-list .contact-info-row:first-child{
        padding-right:82px !important;
    }
}


/* v1.0.447 — Storefront sold badge larger / centered */
body.storefront .product-card-image .status-chip.sold{
    top:50% !important;
    left:50% !important;
    transform:translate(-50%,-50%) !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:140px;
    padding:12px 22px !important;
    border-radius:999px !important;
    background:rgba(17,25,35,.60) !important;
    color:#fff !important;
    font-size:20px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:.2px;
    text-align:center !important;
    box-shadow:0 6px 18px rgba(0,0,0,.12);
}
@media(max-width:700px){
    body.storefront .product-card-image .status-chip.sold{
        min-width:118px;
        padding:10px 18px !important;
        font-size:17px !important;
    }
}


/* =========================================================
   v1.0.448 — Repair services section + /services profile page
   ========================================================= */
.storefront .home-services{padding:26px 0 !important;background:#f5f7f9 !important}
.storefront .home-services-panel{display:grid;grid-template-columns:minmax(360px,.9fr) minmax(520px,1.1fr);gap:32px;align-items:center;padding:30px 34px;border:1px solid #dfe5eb;border-radius:14px;background:linear-gradient(135deg,#fff 0%,#fbfcfd 62%,#f1f4f7 100%);box-shadow:0 8px 28px rgba(17,24,39,.05)}
.storefront .service-eyebrow,.storefront .service-page-kicker,.storefront .service-intro-heading>span,.storefront .service-section-heading>span{display:block;margin-bottom:8px;color:#d91e28;font-size:12px;line-height:1.2;font-weight:800;letter-spacing:.08em}
.storefront .home-services-copy h2{margin:0;color:#111820;font-size:31px;line-height:1.2;font-weight:700;letter-spacing:-.02em}.storefront .home-services-copy h2 em{display:block;margin-top:3px;color:#d91e28;font-style:normal}
.storefront .home-services-copy>p{max-width:620px;margin:14px 0 19px;color:#53606d;font-size:15px;line-height:1.75}
.storefront .home-services-actions,.storefront .service-page-hero-actions{display:flex;flex-wrap:wrap;gap:9px}
.storefront .service-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 17px;border:1px solid transparent;border-radius:8px;font-size:14px;font-weight:800;line-height:1.2;text-align:center;transition:transform .16s ease,box-shadow .16s ease,background .16s ease}.storefront .service-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(15,23,42,.09)}
.storefront .service-btn-primary{background:#e11e28;border-color:#e11e28;color:#fff}.storefront .service-btn-secondary{background:#fff;border-color:#cfd7df;color:#182430}.storefront .service-btn-line{background:#10ad49;border-color:#10ad49;color:#fff}.storefront .service-btn-map{background:#fff;border-color:#ccd5de;color:#213142}
.storefront .home-services-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.storefront .home-service-card{min-height:104px;display:grid;grid-template-columns:58px minmax(0,1fr);gap:13px;align-items:center;padding:16px;border:1px solid #e0e5ea;border-radius:11px;background:#fff}.storefront .home-service-card-featured{border-color:#e9b9bd;background:#fff8f8}
.storefront .home-service-icon,.storefront .service-page-icon{display:grid;place-items:center;width:54px;height:54px;border-radius:12px;background:#18212b;color:#fff}.storefront .home-service-card-featured .home-service-icon{background:#d91e28}.storefront .home-service-icon svg,.storefront .service-page-icon svg{width:31px;height:31px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.storefront .home-service-card b{display:block;color:#15202b;font-size:15px;line-height:1.3}.storefront .home-service-card small{display:block;margin-top:4px;color:#6a7480;font-size:12px;line-height:1.4}
.storefront .service-page-hero{overflow:hidden;background:linear-gradient(120deg,#0b1016 0%,#111a24 64%,#172331 100%);color:#fff}.storefront .service-page-hero-inner{min-height:410px;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);gap:30px;align-items:center}.storefront .service-page-hero-copy{padding:48px 0;position:relative;z-index:2}.storefront .service-page-kicker{color:#ff4a52}.storefront .service-page-hero h1{margin:0;color:#fff;font-size:clamp(40px,4vw,60px);line-height:1.08;font-weight:700;letter-spacing:-.025em}.storefront .service-page-hero h1 em{color:#f22a34;font-style:normal}.storefront .service-page-hero-copy>p{max-width:700px;margin:18px 0 24px;color:#d0d7df;font-size:17px;line-height:1.75}.storefront .service-page-hero-copy strong{color:#fff}
.storefront .service-page-hero-art{display:grid;place-items:center;opacity:.94}.storefront .service-page-hero-art svg{width:100%;max-width:570px;height:auto}.storefront .service-car-line,.storefront .service-car-wheel{fill:none;stroke:#d8e0e8;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.storefront .service-car-wheel{stroke-width:5}.storefront .service-car-hub{fill:none;stroke:#7f8b98;stroke-width:4}.storefront .service-car-accent{fill:none;stroke:#ef2b35;stroke-width:8;stroke-linecap:round;stroke-linejoin:round}
.storefront .service-intro-section{padding:50px 0;background:#fff}.storefront .service-intro-grid{display:grid;grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);gap:70px;align-items:start}.storefront .service-intro-heading h2{margin:0;color:#111820;font-size:34px;line-height:1.25;letter-spacing:-.02em}.storefront .service-intro-copy{padding-left:28px;border-left:3px solid #e11e28}.storefront .service-intro-copy p{margin:0 0 13px;color:#4e5a67;font-size:16px;line-height:1.85}.storefront .service-intro-copy p:last-child{margin-bottom:0}.storefront .service-intro-copy strong{color:#17212c}
.storefront .service-list-section{padding:46px 0 52px;background:#f5f7f9;border-top:1px solid #e4e8ec}.storefront .service-section-heading{max-width:760px;margin:0 auto 25px;text-align:center}.storefront .service-section-heading h2{margin:0;color:#111820;font-size:33px;line-height:1.25}.storefront .service-section-heading p{margin:9px 0 0;color:#687480;font-size:15px}.storefront .service-page-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.storefront .service-page-card{position:relative;min-height:250px;padding:25px 23px;border:1px solid #dde3e9;border-radius:12px;background:#fff;box-shadow:0 3px 12px rgba(15,23,42,.03)}.storefront .service-page-card-primary{border:2px solid #e11e28;background:linear-gradient(180deg,#fffafa,#fff 48%)}.storefront .service-card-badge{position:absolute;top:17px;right:17px;padding:5px 8px;border-radius:999px;background:#fee8e9;color:#c61c25;font-size:10px;font-weight:800}.storefront .service-page-card-primary .service-page-icon{background:#e11e28}.storefront .service-page-card h3{margin:17px 0 8px;color:#17212b;font-size:20px;line-height:1.3}.storefront .service-page-card p{margin:0;color:#68737f;font-size:14px;line-height:1.7}
.storefront .service-trust-section{padding:0 0 52px;background:#f5f7f9}.storefront .service-trust-grid{display:grid;grid-template-columns:repeat(3,1fr);border-radius:12px;overflow:hidden;background:linear-gradient(90deg,#08111d 0%,#102238 100%);box-shadow:0 10px 28px rgba(8,17,29,.12)}.storefront .service-trust-card{min-height:136px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 20px;text-align:center;border-right:1px solid rgba(255,255,255,.11)}.storefront .service-trust-card:last-child{border-right:0}.storefront .service-trust-card strong{color:#fff;font-size:30px;line-height:1}.storefront .service-trust-card:first-child strong{color:#ff343e}.storefront .service-trust-card span{margin-top:9px;color:#d8e0e9;font-size:13px;line-height:1.45}
.storefront .service-contact-section{padding:42px 0;background:#fff}.storefront .service-contact-box{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr);gap:34px;align-items:center;padding:31px 34px;border:1px solid #dce2e7;border-radius:14px;background:#fbfcfd}.storefront .service-contact-box h2{margin:0;color:#14202c;font-size:28px;line-height:1.35}.storefront .service-contact-box p{margin:10px 0 0;color:#687480;font-size:14px;line-height:1.7}.storefront .service-contact-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px}.storefront .service-contact-actions .service-btn-map{grid-column:1/-1}
@media(max-width:980px) and (min-width:701px){.storefront .home-services-panel{grid-template-columns:1fr}.storefront .service-page-hero-inner{grid-template-columns:1fr .72fr}.storefront .service-page-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.storefront .home-services{padding:18px 0 !important}.storefront .home-services-panel{grid-template-columns:1fr;gap:20px;padding:21px 16px;border-radius:11px}.storefront .home-services-copy h2{font-size:24px;line-height:1.25}.storefront .home-services-copy>p{margin:11px 0 16px;font-size:14px;line-height:1.68}.storefront .home-services-actions{display:grid;grid-template-columns:1fr}.storefront .service-btn{min-height:46px;width:100%;padding:0 13px;font-size:14px}.storefront .home-services-grid{grid-template-columns:1fr;gap:8px}.storefront .home-service-card{min-height:86px;grid-template-columns:48px minmax(0,1fr);gap:11px;padding:13px}.storefront .home-service-icon{width:46px;height:46px;border-radius:10px}.storefront .home-service-icon svg{width:27px;height:27px}.storefront .home-service-card b{font-size:15px}.storefront .home-service-card small{font-size:12px}.storefront .service-page-hero-inner{min-height:0;grid-template-columns:1fr}.storefront .service-page-hero-copy{padding:31px 0 26px}.storefront .service-page-kicker{margin-bottom:7px;font-size:11px}.storefront .service-page-hero h1{font-size:33px;line-height:1.12}.storefront .service-page-hero-copy>p{margin:14px 0 19px;font-size:14px;line-height:1.7}.storefront .service-page-hero-actions{display:grid;grid-template-columns:1fr}.storefront .service-page-hero-art{display:none}.storefront .service-intro-section{padding:28px 0}.storefront .service-intro-grid{grid-template-columns:1fr;gap:17px}.storefront .service-intro-heading h2{font-size:25px}.storefront .service-intro-copy{padding-left:15px}.storefront .service-intro-copy p{font-size:14px;line-height:1.75}.storefront .service-list-section{padding:27px 0 31px}.storefront .service-section-heading{margin-bottom:17px;text-align:left}.storefront .service-section-heading h2{font-size:25px}.storefront .service-section-heading p{font-size:13px;line-height:1.55}.storefront .service-page-grid{grid-template-columns:1fr;gap:9px}.storefront .service-page-card{min-height:0;padding:19px 17px}.storefront .service-page-icon{width:49px;height:49px}.storefront .service-page-card h3{margin:13px 0 6px;font-size:18px}.storefront .service-page-card p{font-size:13px;line-height:1.65}.storefront .service-card-badge{top:14px;right:14px}.storefront .service-trust-section{padding-bottom:29px}.storefront .service-trust-grid{grid-template-columns:1fr}.storefront .service-trust-card{min-height:98px;padding:20px 16px;border-right:0;border-bottom:1px solid rgba(255,255,255,.1)}.storefront .service-trust-card:last-child{border-bottom:0}.storefront .service-trust-card strong{font-size:25px}.storefront .service-contact-section{padding:25px 0}.storefront .service-contact-box{grid-template-columns:1fr;gap:19px;padding:21px 16px}.storefront .service-contact-box h2{font-size:22px}.storefront .service-contact-actions{grid-template-columns:1fr}.storefront .service-contact-actions .service-btn-map{grid-column:auto}}

/* v1.0.450 — Home repair section bumper visual
   Keep repair services below the product sections, but add a real body-part visual
   so the section feels more automotive without competing with the parts catalog. */
@media (min-width:1181px){
  .storefront .home-services-panel{
    grid-template-columns:minmax(330px,.84fr) minmax(250px,.58fr) minmax(500px,1.18fr);
    gap:22px;
    padding:28px 30px;
  }
  .storefront .home-services-visual{
    min-width:0;
    height:230px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:hidden;
  }
  .storefront .home-services-visual img{
    display:block;
    width:min(100%,330px);
    height:auto;
    object-fit:contain;
    mix-blend-mode:multiply;
    filter:drop-shadow(0 14px 16px rgba(15,23,42,.16));
    transform:translateY(7px) scale(1.04);
  }
}
@media (max-width:1180px) and (min-width:701px){
  .storefront .home-services-panel{
    grid-template-columns:minmax(300px,.82fr) minmax(430px,1.18fr);
    gap:20px 26px;
  }
  .storefront .home-services-copy{grid-column:1;grid-row:1}
  .storefront .home-services-visual{
    grid-column:1;
    grid-row:2;
    min-width:0;
    height:155px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    overflow:hidden;
  }
  .storefront .home-services-visual img{
    display:block;
    width:min(100%,270px);
    height:auto;
    object-fit:contain;
    mix-blend-mode:multiply;
    filter:drop-shadow(0 10px 13px rgba(15,23,42,.14));
    transform:translateY(5px);
  }
  .storefront .home-services-grid{grid-column:2;grid-row:1 / span 2}
}
@media (max-width:700px){
  .storefront .home-services-visual{
    width:100%;
    height:138px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    margin:-3px 0 -2px;
  }
  .storefront .home-services-visual img{
    display:block;
    width:min(100%,280px);
    height:auto;
    object-fit:contain;
    mix-blend-mode:multiply;
    filter:drop-shadow(0 9px 12px rgba(15,23,42,.14));
  }
}



/* v1.0.452 — Refine bumper quote text and prevent overlap */
.storefront .home-services-visual{position:relative}
.storefront .home-services-quote{
  position:absolute;
  top:0;
  left:50%;
  z-index:2;
  display:block;
  width:max-content;
  max-width:calc(100% - 14px);
  padding:0 7px;
  white-space:normal;
  text-align:center;
  transform:translateX(-50%) rotate(-2.4deg);
  color:#171b20;
  font-family:'Sriracha','Kanit',cursive;
  font-size:clamp(16px,1.2vw,23px);
  font-weight:400;
  line-height:1.18;
  text-shadow:0 1px 0 rgba(255,255,255,.82);
}
.storefront .home-services-quote::after{
  content:'';
  position:absolute;
  left:34%;
  bottom:-7px;
  width:62%;
  height:4px;
  border-radius:999px;
  background:#e6202a;
  transform:rotate(-5deg);
  transform-origin:left center;
}
@media (min-width:1181px){
  .storefront .home-services-visual{
    height:244px;
    padding-top:46px;
  }
  .storefront .home-services-quote{
    max-width:320px;
    font-size:20px;
  }
  .storefront .home-services-visual img{transform:translateY(10px) scale(1.04)}
}
@media (max-width:1180px) and (min-width:701px){
  .storefront .home-services-visual{
    height:168px;
    padding-top:39px;
  }
  .storefront .home-services-quote{
    max-width:255px;
    font-size:17px;
  }
  .storefront .home-services-visual img{transform:translateY(9px)}
}
@media (max-width:700px){
  .storefront .home-services-visual{
    height:176px;
    padding-top:42px;
    margin:-3px 0 0;
  }
  .storefront .home-services-quote{
    top:0;
    max-width:238px;
    font-size:17px;
    line-height:1.2;
  }
  .storefront .home-services-quote::after{
    bottom:-6px;
    height:3px;
  }
  .storefront .home-services-visual img{
    width:min(100%,290px);
    transform:translateY(7px);
  }
}


/* v1.0.453 — Use the approved composite bumper artwork directly.
   The quote is baked into the image, so no separate text overlay is used. */
.storefront .home-services-visual{
  position:relative;
  padding-top:0 !important;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.storefront .home-services-visual .home-services-bumper-art{
  display:block;
  width:100%;
  max-width:390px;
  height:auto;
  object-fit:contain;
  mix-blend-mode:normal;
  filter:none;
  transform:none !important;
}
@media (min-width:1181px){
  .storefront .home-services-visual{
    height:244px;
  }
}
@media (max-width:1180px) and (min-width:701px){
  .storefront .home-services-visual{
    height:175px;
  }
  .storefront .home-services-visual .home-services-bumper-art{
    max-width:300px;
  }
}
@media (max-width:700px){
  .storefront .home-services-visual{
    height:auto;
    min-height:0;
    margin:-3px 0 0;
  }
  .storefront .home-services-visual .home-services-bumper-art{
    width:min(100%,330px);
    max-width:330px;
  }
}


/* v1.0.454 — Approved bumper artwork optimized as JPG.
   Mobile: show artwork at the full available width of the repair-services panel. */
@media (max-width:700px){
  .storefront .home-services-visual{
    width:100%;
    height:auto;
    min-height:0;
    margin:0;
    padding:0 !important;
    overflow:visible;
  }
  .storefront .home-services-visual .home-services-bumper-art{
    display:block;
    width:100%;
    max-width:none;
    height:auto;
    margin:0;
    object-fit:contain;
    transform:none !important;
  }
}

/* v1.0.455 — Home repair eyebrow uses TEERA SERVICE logo navy */
.storefront .home-services-copy .service-eyebrow{
  color:#6b7280 !important;
}


/* v1.0.456 — remove storefront section divider lines to match original cleaner look */
.storefront .store-section + .store-section{border-top:0 !important;}


/* v1.0.457 — Home repair eyebrow changed from navy to gray for a softer look */
.storefront .home-services-copy .service-eyebrow{
  color:#6b7280 !important;
}


/* v1.0.460 — services trust band uses elegant dark gradient instead of flat black */
.storefront .service-trust-grid{background:linear-gradient(90deg,#08111d 0%,#102238 100%) !important;box-shadow:0 10px 28px rgba(8,17,29,.12) !important;}
.storefront .service-trust-card span{color:#d8e0e9 !important;line-height:1.45 !important;}


/* v1.0.461 — final polish for services trust band: clearer secondary copy and more breathing room */
.storefront .service-trust-card{min-height:136px;padding:24px 20px;}
.storefront .service-trust-card span{color:#d8e0e9 !important;line-height:1.45 !important;margin-top:9px;}
@media(max-width:700px){.storefront .service-trust-card{min-height:98px;padding:20px 16px;}}


/* v1.0.463 — Admin Sales: add breathing room between summary cards and sales list */
.admin .sales-stats{margin-bottom:18px;}
@media(max-width:700px){
  .admin .sales-stats{margin-bottom:16px !important;}
}

/* =========================================================
   v1.0.465 — Mobile storefront readability polish
   - Enlarge product availability status and price.
   - Make repair-service reading text as comfortable as product titles.
   - Mobile only; preserve approved desktop layout and major headings.
   ========================================================= */
@media (max-width:700px){
  /* Product cards: availability + price */
  body.storefront .recommended-section .product-card-body .stock,
  body.storefront .latest-section .product-card-body .stock{
    font-size:12px !important;
    line-height:1.45 !important;
    font-weight:800 !important;
  }
  body.storefront .recommended-section .product-card-body strong,
  body.storefront .latest-section .product-card-body strong{
    font-size:18px !important;
    line-height:1.3 !important;
    font-weight:800 !important;
  }

  /* Home repair section */
  body.storefront .home-services-copy > p{
    font-size:16px !important;
    line-height:1.75 !important;
  }
  body.storefront .home-services-copy .service-eyebrow{
    font-size:13px !important;
    line-height:1.35 !important;
  }

  /* Repair-services inner page: normal reading copy */
  body.storefront .service-page-hero-copy > p,
  body.storefront .service-intro-copy p,
  body.storefront .service-section-heading p,
  body.storefront .service-page-card p,
  body.storefront .service-contact-box p{
    font-size:16px !important;
    line-height:1.75 !important;
  }
  body.storefront .service-page-kicker,
  body.storefront .service-intro-heading > span,
  body.storefront .service-section-heading > span{
    font-size:13px !important;
    line-height:1.35 !important;
  }
}


/* =========================================================
   v1.0.467 — Mobile end-of-row "View all" card polish
   - Keeps the easy-to-tap final CTA after the 8 product cards.
   - Softer neutral styling so the CTA does not compete with products/prices.
   - Mobile only; used in both Recommended and Latest product rows.
   ========================================================= */
body.storefront .home-view-all-card{
  display:none;
}
@media (max-width:700px){
  body.storefront .recommended-product-row .home-view-all-card,
  body.storefront .latest-section .home-product-row .home-view-all-card{
    display:flex !important;
    flex:0 0 42% !important;
    min-width:42% !important;
    max-width:42% !important;
    align-self:stretch !important;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    min-height:100%;
    padding:8px 8px 16px !important;
    text-align:center;
    background:#ffffff;
    border:1px solid #d9dee5;
    color:#172033;
    scroll-snap-align:start;
  }
  body.storefront .home-view-all-card .home-view-all-icon{
    width:100%;
    min-height:92px;
    flex:1 1 auto;
    max-height:132px;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:#f4f6f8;
    color:#172033;
    font-size:27px;
    font-weight:800;
    letter-spacing:3px;
    line-height:1;
  }
  body.storefront .home-view-all-card > strong{
    display:block;
    margin:0 !important;
    color:#111827 !important;
    font-size:18px !important;
    font-weight:800 !important;
    line-height:1.3 !important;
  }
  body.storefront .home-view-all-card > small{
    display:block;
    color:#6b7280 !important;
    font-size:14px !important;
    font-weight:600;
    line-height:1.35;
  }
}



/* v1.0.469 — Mobile: when the page already has the full catalog filter set,
   hide the duplicate header search bar to save vertical space. */
@media(max-width:700px){
  .store-header.hide-mobile-header-search .store-search{display:none!important}
  .store-header.hide-mobile-header-search .store-mainhead{padding-bottom:0}
}


/* v1.0.470 — Mobile catalog pages:
   collapse the header's second grid row after hiding the duplicate search bar. */
@media(max-width:700px){
  .storefront .store-header.hide-mobile-header-search .mainhead-inner{
    min-height:58px !important;
    height:58px !important;
    grid-template-rows:54px !important;
    padding-top:2px !important;
    padding-bottom:2px !important;
  }
  .storefront .store-header.hide-mobile-header-search .store-search{
    display:none !important;
  }
}


/* =========================================================
   v1.0.472 — Mobile catalog readability
   - Enlarge the green "พร้อมขาย" chip without adding a border.
   - Keep its pale green background lightly translucent at 90%.
   - Enlarge catalog price text for easier scanning.
   ========================================================= */
@media(max-width:700px){
  body.storefront .catalog-card .product-card-image .status-chip.available{
    font-size:13px !important;
    line-height:1.25 !important;
    font-weight:800 !important;
    padding:5px 8px !important;
    top:5px !important;
    left:5px !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    background:rgba(228,247,234,.90) !important;
    color:#08763a !important;
  }

  body.storefront .catalog-card .product-card-body > strong{
    font-size:15px !important;
    line-height:1.3 !important;
    font-weight:800 !important;
  }
}


/* =========================================================
   v1.0.473 — Mobile product-detail status readability
   Enlarge the status chip on the product detail page, while
   keeping it clearly smaller than the product title.
   ========================================================= */
@media(max-width:700px){
  body.storefront .product-topline .status-chip{
    font-size:14px !important;
    line-height:1.3 !important;
    font-weight:800 !important;
    padding:6px 10px !important;
    border:0 !important;
    box-shadow:none !important;
  }
}


/* =========================================================
   v1.0.474 — End-of-row CTA cards are mobile-only.
   Desktop/tablet already have the section-level "ดูทั้งหมด" link.
   ========================================================= */
body.storefront .home-view-all-card{
  display:none !important;
}
@media(max-width:700px){
  body.storefront .home-view-all-card{
    display:flex !important;
  }
}


/* =========================================================
   v1.0.475 — Mobile services trust panel readability
   Make the secondary text inside the dark trust cards match
   the normal body-copy size used elsewhere on the services page.
   ========================================================= */
@media(max-width:700px){
  body.storefront .service-trust-card span{
    font-size:16px !important;
    line-height:1.75 !important;
    font-weight:400 !important;
  }
}


/* =========================================================
   v1.0.476 — Home service-card secondary text readability
   Match the 4 cards' supporting copy to the normal repair
   section body-copy size: 15px desktop, 16px mobile.
   ========================================================= */
body.storefront .home-service-card small{
  font-size:15px !important;
  line-height:1.6 !important;
}
@media(max-width:700px){
  body.storefront .home-service-card small{
    font-size:16px !important;
    line-height:1.6 !important;
  }
}


/* =========================================================
   v1.0.477 — Home service-card title hierarchy
   Increase the 4 service-card headings by 1px so they remain
   clearly distinct from the enlarged secondary copy.
   ========================================================= */
body.storefront .home-service-card b{
  font-size:16px !important;
}


/* =========================================================
   v1.0.478 — Home services: random subtle background pattern
   PHP chooses 1 of 3 patterns on every page request/refresh.
   Decorative only; content/cards remain unchanged.
   ========================================================= */
body.storefront .home-services-panel{
  position:relative !important;
  isolation:isolate;
  overflow:hidden !important;
}
body.storefront .home-services-panel > *{
  position:relative;
  z-index:2;
}
body.storefront .home-services-panel::before,
body.storefront .home-services-panel::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:0;
}

/* Pattern 1 — faint automotive line-art */
body.storefront .home-services-panel.home-services-pattern-1::before{
  inset:0;
  background:
    linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.82) 48%,rgba(255,255,255,.34) 100%),
    url("/assets/images/home-services-car-outline.svg") right -70px center / min(62%,900px) auto no-repeat;
  opacity:.34;
}

/* Pattern 2 — technical / blueprint grid */
body.storefront .home-services-panel.home-services-pattern-2::before{
  inset:0;
  background-image:
    linear-gradient(rgba(70,103,136,.065) 1px,transparent 1px),
    linear-gradient(90deg,rgba(70,103,136,.065) 1px,transparent 1px),
    linear-gradient(rgba(70,103,136,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(70,103,136,.025) 1px,transparent 1px);
  background-size:40px 40px,40px 40px,10px 10px,10px 10px;
  mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 18%,#000 100%);
}

/* Pattern 3 — modern diagonal + circles */
body.storefront .home-services-panel.home-services-pattern-3::before{
  width:520px;
  height:520px;
  right:-155px;
  top:-175px;
  border:46px solid rgba(61,99,140,.055);
  border-radius:50%;
}
body.storefront .home-services-panel.home-services-pattern-3::after{
  width:76%;
  height:125%;
  right:-20%;
  top:-38%;
  background:
    linear-gradient(135deg,transparent 0 43%,rgba(61,99,140,.045) 43% 47%,transparent 47% 100%),
    radial-gradient(circle,rgba(61,99,140,.10) 1.2px,transparent 1.5px);
  background-size:auto,18px 18px;
  transform:rotate(-4deg);
  opacity:.62;
  mask-image:linear-gradient(90deg,transparent 0%,#000 48%,#000 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 48%,#000 100%);
}

@media(max-width:700px){
  body.storefront .home-services-panel.home-services-pattern-1::before{
    background:
      linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.76) 55%,rgba(255,255,255,.40) 100%),
      url("/assets/images/home-services-car-outline.svg") right -155px top 28% / 145% auto no-repeat;
    opacity:.30;
  }
  body.storefront .home-services-panel.home-services-pattern-2::before{
    background-size:32px 32px,32px 32px,8px 8px,8px 8px;
    mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 100%);
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 100%);
  }
  body.storefront .home-services-panel.home-services-pattern-3::before{
    width:330px;
    height:330px;
    right:-155px;
    top:-70px;
    border-width:32px;
  }
  body.storefront .home-services-panel.home-services-pattern-3::after{
    width:130%;
    height:100%;
    right:-60%;
    top:12%;
  }
}


/* =========================================================
   v1.0.479 — Mobile: make the automotive line-art pattern visible
   Keep desktop/tablet unchanged. On mobile the line drawing is
   repositioned and made slightly stronger, while staying decorative.
   ========================================================= */
@media(max-width:700px){
  body.storefront .home-services-panel.home-services-pattern-1::before{
    inset:0 !important;
    opacity:.52 !important;
    background:
      linear-gradient(180deg,
        rgba(255,255,255,.96) 0%,
        rgba(255,255,255,.88) 22%,
        rgba(255,255,255,.60) 48%,
        rgba(255,255,255,.42) 100%),
      url("/assets/images/home-services-car-outline.svg") center 57% / 175% auto no-repeat !important;
  }
}


/* =========================================================
   v1.0.480 — Background pattern refinement
   Desktop/tablet:
   - Keep all 3 random patterns.
   - Pattern 1 now uses a larger, more detailed technical sedan line-art.
   Mobile:
   - Show only 2 visual styles: Grid and Modern Accent.
   - If PHP selects pattern 1, mobile renders the Grid style instead.
   ========================================================= */

/* Desktop/tablet premium car-line pattern */
@media(min-width:701px){
  body.storefront .home-services-panel.home-services-pattern-1::before{
    inset:0 !important;
    opacity:1 !important;
    background:
      linear-gradient(90deg,
        rgba(255,255,255,.98) 0%,
        rgba(255,255,255,.91) 37%,
        rgba(255,255,255,.62) 58%,
        rgba(255,255,255,.22) 100%),
      url("/assets/images/home-services-car-outline.svg") right -40px center / min(72%,1120px) auto no-repeat !important;
  }
}

/* Mobile: pattern 1 becomes the same technical grid as pattern 2.
   This removes the car-line artwork from mobile completely. */
@media(max-width:700px){
  body.storefront .home-services-panel.home-services-pattern-1::before{
    inset:0 !important;
    opacity:1 !important;
    background-image:
      linear-gradient(rgba(70,103,136,.065) 1px,transparent 1px),
      linear-gradient(90deg,rgba(70,103,136,.065) 1px,transparent 1px),
      linear-gradient(rgba(70,103,136,.025) 1px,transparent 1px),
      linear-gradient(90deg,rgba(70,103,136,.025) 1px,transparent 1px) !important;
    background-size:32px 32px,32px 32px,8px 8px,8px 8px !important;
    background-position:0 0 !important;
    background-repeat:repeat !important;
    mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 100%) !important;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 100%) !important;
  }
}


/* =========================================================
   v1.0.481 — Home services background patterns
   All devices now randomize between only 2 approved patterns:
   2 = Technical Grid
   3 = Modern Accent
   Automotive line-art pattern is no longer selected anywhere.
   ========================================================= */

/* =========================================================
   v1.0.514 — Mobile form anti-auto-zoom (iPhone/iOS Safari)
   iOS automatically zooms when a focused form control renders below 16px.
   Keep mobile form controls at 16px so Header Search, Product Search,
   customer forms, Admin and Login stay at the normal page scale.
   Android is also safe with this minimum size; desktop/tablet is unchanged.
   ========================================================= */
@media (max-width:700px){
    body.storefront input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    body.storefront select,
    body.storefront textarea,
    body.admin input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    body.admin select,
    body.admin textarea,
    body.login-page input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    body.login-page select,
    body.login-page textarea{
        font-size:16px !important;
    }
}

/* v1.0.515 - Admin products search button: red */
.admin .product-search-btn{
  background:var(--red) !important;
  border-color:var(--red) !important;
  color:#fff !important;
}

/* v1.0.516 — legacy shop-name SEO/identity */
.contact-legacy-name{font-size:.86em;font-weight:600;opacity:.82;white-space:nowrap}

/* ===== Per-device Admin Lock v1.0.526 ===== */
.teera-device-lock-overlay{display:none;position:fixed;inset:0;z-index:99999;background:#f4f6fa;align-items:center;justify-content:center;padding:24px;text-align:center}
html.teera-device-locked,html.teera-device-locked body{overflow:hidden!important}
html.teera-device-locked .teera-device-lock-overlay{display:flex}
.teera-device-lock-card{width:min(100%,390px);background:#fff;border-radius:22px;padding:28px 22px;box-shadow:0 18px 50px rgba(28,45,72,.16)}
.teera-device-lock-icon{width:66px;height:66px;margin:0 auto 14px;border-radius:20px;background:#34517e;color:#fff;display:grid;place-items:center;font-size:34px;font-weight:800;line-height:1}
.teera-device-lock-card h2{margin:0 0 8px;color:#29466d;font-size:24px}
.teera-device-lock-card p{margin:0 0 18px;color:#66758a;font-size:15px;line-height:1.55}
.teera-device-lock-card .btn{width:100%;min-height:48px;font-size:17px}
.teera-device-unlock-status{min-height:22px;margin-top:11px!important;margin-bottom:0!important;font-size:13px!important;color:#62748a!important}
.teera-device-unlock-status.is-error{color:#bd3030!important}
.teera-device-lock-fallback{display:inline-block;margin-top:11px;color:#5d6f86;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.settings-security-card{background:#fff;border-radius:18px;padding:20px;box-shadow:0 5px 18px rgba(32,55,86,.07)}
.settings-security-card h2{margin:0 0 6px;color:#31527d;font-size:21px}
.settings-security-card>p{margin:0 0 18px;color:#68778b;line-height:1.55}
.settings-security-switch-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:16px 0;border-top:1px solid #edf0f4}
.settings-security-switch-copy strong{display:block;color:#263b57;font-size:17px;margin-bottom:4px}
.settings-security-switch-copy small{display:block;color:#718095;font-size:13px;line-height:1.5}
.settings-device-switch{position:relative;width:54px;height:30px;flex:0 0 54px}
.settings-device-switch input{position:absolute;opacity:0;pointer-events:none}
.settings-device-switch span{position:absolute;inset:0;border-radius:999px;background:#c8d0da;transition:.2s;cursor:pointer}
.settings-device-switch span:after{content:'';position:absolute;width:24px;height:24px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:.2s}
.settings-device-switch input:checked+span{background:#34517e}
.settings-device-switch input:checked+span:after{transform:translateX(24px)}
.settings-security-status{margin-top:14px;padding:12px 14px;border-radius:12px;background:#f3f6fa;color:#53657a;font-size:14px;line-height:1.5}
.settings-security-status.is-on{background:#edf5ff;color:#285784}
.settings-security-status.is-error{background:#fff0f0;color:#b62f2f}
@media(max-width:700px){.settings-security-card{padding:18px 16px}.settings-security-switch-row{align-items:flex-start}.teera-device-lock-card{padding:26px 18px}}

/* =========================================================
   v1.0.528 — Mobile hamburger menu polish
   - Add clear line icons to each menu item
   - Remove duplicate "ดูหน้าร้าน" item (bottom app nav already provides it)
   - Make Settings visually distinct and higher-priority
   ========================================================= */
@media(max-width:700px){
    .admin-mobile-native-panel a{
        display:flex !important;
        align-items:center !important;
        gap:11px !important;
    }
    .admin-mobile-native-panel .admin-menu-icon{
        width:22px;
        height:22px;
        flex:0 0 22px;
        display:inline-flex;
        align-items:center;
        justify-content:center;
        color:#4f5f73;
    }
    .admin-mobile-native-panel .admin-menu-icon svg{
        width:21px;
        height:21px;
        display:block;
        fill:none;
        stroke:currentColor;
        stroke-width:1.8;
        stroke-linecap:round;
        stroke-linejoin:round;
    }
    .admin-mobile-native-panel .admin-mobile-settings-link{
        margin-top:6px;
        background:#edf3fb !important;
        color:#234f84 !important;
        font-weight:800 !important;
        border-top:0 !important;
        box-shadow:inset 0 0 0 1px #d8e3f1;
    }
    .admin-mobile-native-panel .admin-mobile-settings-link .admin-menu-icon{
        color:#234f84;
    }
    .admin-mobile-native-panel .admin-mobile-settings-link:active{
        background:#dfeaf7 !important;
    }
    .admin-mobile-native-panel .admin-menu-caret{
        margin-left:auto;
        font-size:24px;
        font-weight:500;
        line-height:1;
        color:#6d86a6;
        transform:translateY(-1px);
    }
}

/* =========================================================
   v1.0.529 — Settings information architecture
   - Replace the flat six-tab settings navigation with a grouped overview.
   - Keep existing settings functions/pages unchanged.
   - Inner pages use a simple breadcrumb back to Settings.
   ========================================================= */
.settings-pagehead-v529{display:block!important;margin-bottom:18px}
.settings-pagehead-v529 h1{margin-bottom:3px}
.settings-pagehead-v529 p{margin:0;color:#6b7b90;font-size:14px;line-height:1.45}
.settings-breadcrumb-v529{display:flex;align-items:center;gap:8px;margin-top:7px;font-size:13px;color:#738196}
.settings-breadcrumb-v529 a{color:#31527d;text-decoration:none;font-weight:700}
.settings-breadcrumb-v529 strong{color:#53657b}
.settings-overview-grid-v529{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:24px}
.settings-group-card-v529{background:#fff;border-radius:20px;padding:20px;box-shadow:0 5px 18px rgba(32,55,86,.07);border:1px solid rgba(49,82,125,.05)}
.settings-group-head-v529{display:flex;align-items:center;gap:13px;margin-bottom:14px}
.settings-group-head-v529 h2{margin:0 0 3px;color:#24466f;font-size:20px;line-height:1.2}
.settings-group-head-v529 p{margin:0;color:#748298;font-size:13px;line-height:1.4}
.settings-group-icon-v529{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;flex:0 0 48px;background:#e9f2ff;color:#2f6db6}
.settings-group-icon-v529 svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.settings-group-display-v529 .settings-group-icon-v529{background:#e8f8f1;color:#249568}
.settings-group-security-v529 .settings-group-icon-v529{background:#fff0f1;color:#c53a49}
.settings-group-links-v529{border:1px solid #e7edf4;border-radius:15px;overflow:hidden;background:#fff}
.settings-group-links-v529 a{display:grid;grid-template-columns:34px minmax(0,1fr) 18px;align-items:center;gap:10px;padding:13px 14px;text-decoration:none;color:#203956;border-top:1px solid #edf1f5;transition:background .15s ease,transform .15s ease}
.settings-group-links-v529 a:first-child{border-top:0}
.settings-group-links-v529 a:hover{background:#f7faff}
.settings-group-links-v529 a:active{transform:scale(.995)}
.settings-group-links-v529 a>span:nth-child(2){min-width:0}
.settings-group-links-v529 b{display:block;font-size:15px;line-height:1.3;color:#223f64}
.settings-group-links-v529 small{display:block;margin-top:2px;color:#7b899b;font-size:12px;line-height:1.35}
.settings-group-links-v529 i{font-style:normal;font-size:25px;line-height:1;color:#6e87a7;text-align:right}
.settings-item-icon-v529{width:30px;height:30px;border-radius:10px;display:grid!important;place-items:center;background:#f1f5fa;color:#315b8d;font-size:17px;font-weight:800;line-height:1}
.settings-group-security-v529 .settings-item-icon-v529{background:#fff3f4;color:#bf3442}
.settings-group-display-v529 .settings-item-icon-v529{background:#eef9f4;color:#258c65}
@media(max-width:700px){
  .settings-pagehead-v529{margin-bottom:12px!important}
  .settings-pagehead-v529 h1{font-size:22px}
  .settings-pagehead-v529 p{font-size:12px;line-height:1.4}
  .settings-breadcrumb-v529{margin-top:5px;font-size:12px}
  .settings-overview-grid-v529{grid-template-columns:1fr;gap:12px;margin-bottom:12px}
  .settings-group-card-v529{padding:13px;border-radius:16px}
  .settings-group-head-v529{gap:10px;margin-bottom:10px}
  .settings-group-icon-v529{width:42px;height:42px;flex-basis:42px;border-radius:14px}
  .settings-group-icon-v529 svg{width:23px;height:23px}
  .settings-group-head-v529 h2{font-size:17px}
  .settings-group-head-v529 p{font-size:11px}
  .settings-group-links-v529{border-radius:13px}
  .settings-group-links-v529 a{grid-template-columns:30px minmax(0,1fr) 15px;gap:9px;padding:10px 11px}
  .settings-group-links-v529 b{font-size:14px}
  .settings-group-links-v529 small{font-size:10.5px}
  .settings-item-icon-v529{width:28px;height:28px;border-radius:9px;font-size:15px}
  .settings-group-links-v529 i{font-size:22px}
}

/* =========================================================
   v1.0.530 — Settings typography scale parity
   - Increase Settings overview typography on desktop and mobile.
   - Match the visual scale of the admin home/dashboard.
   - Navigation structure and settings functions remain unchanged.
   ========================================================= */
.settings-pagehead-v529 h1{
    font-size:32px !important;
    line-height:1.2 !important;
    margin:8px 0 5px !important;
}
.settings-pagehead-v529 p{
    font-size:16px !important;
    line-height:1.5 !important;
}
.settings-group-card-v529{
    padding:22px !important;
}
.settings-group-head-v529{
    gap:14px !important;
    margin-bottom:16px !important;
}
.settings-group-icon-v529{
    width:54px !important;
    height:54px !important;
    flex-basis:54px !important;
    border-radius:17px !important;
}
.settings-group-icon-v529 svg{
    width:30px !important;
    height:30px !important;
}
.settings-group-head-v529 h2{
    font-size:24px !important;
    line-height:1.2 !important;
    margin-bottom:4px !important;
}
.settings-group-head-v529 p{
    font-size:15px !important;
    line-height:1.45 !important;
}
.settings-group-links-v529 a{
    grid-template-columns:38px minmax(0,1fr) 20px !important;
    gap:12px !important;
    padding:15px 16px !important;
}
.settings-group-links-v529 b{
    font-size:17px !important;
    line-height:1.3 !important;
}
.settings-group-links-v529 small{
    margin-top:3px !important;
    font-size:14px !important;
    line-height:1.4 !important;
}
.settings-item-icon-v529{
    width:34px !important;
    height:34px !important;
    border-radius:11px !important;
    font-size:19px !important;
}
.settings-group-links-v529 i{
    font-size:28px !important;
}
.settings-breadcrumb-v529{
    font-size:15px !important;
}

@media(max-width:700px){
    .settings-pagehead-v529{
        margin-bottom:14px !important;
    }
    .settings-pagehead-v529 h1{
        font-size:24px !important;
        line-height:1.2 !important;
        margin:8px 0 5px !important;
    }
    .settings-pagehead-v529 p{
        font-size:14px !important;
        line-height:1.45 !important;
    }
    .settings-breadcrumb-v529{
        font-size:14px !important;
    }
    .settings-overview-grid-v529{
        gap:14px !important;
    }
    .settings-group-card-v529{
        padding:16px !important;
        border-radius:17px !important;
    }
    .settings-group-head-v529{
        gap:12px !important;
        margin-bottom:12px !important;
    }
    .settings-group-icon-v529{
        width:48px !important;
        height:48px !important;
        flex-basis:48px !important;
        border-radius:15px !important;
    }
    .settings-group-icon-v529 svg{
        width:27px !important;
        height:27px !important;
    }
    .settings-group-head-v529 h2{
        font-size:20px !important;
        line-height:1.22 !important;
        margin-bottom:3px !important;
    }
    .settings-group-head-v529 p{
        font-size:13.5px !important;
        line-height:1.4 !important;
    }
    .settings-group-links-v529 a{
        grid-template-columns:36px minmax(0,1fr) 18px !important;
        gap:11px !important;
        padding:13px 13px !important;
        min-height:64px !important;
    }
    .settings-group-links-v529 b{
        font-size:16px !important;
        line-height:1.3 !important;
    }
    .settings-group-links-v529 small{
        margin-top:3px !important;
        font-size:13px !important;
        line-height:1.35 !important;
    }
    .settings-item-icon-v529{
        width:32px !important;
        height:32px !important;
        border-radius:10px !important;
        font-size:18px !important;
    }
    .settings-group-links-v529 i{
        font-size:25px !important;
    }
}

/* =========================================================
   v1.0.531 — Settings hierarchy color bands
   - Give the main Settings heading a very light blue background.
   - Tint each group heading by function while keeping all sub-items white.
   - Color is intentionally subtle to preserve the clean admin style.
   ========================================================= */
.settings-pagehead-v529{
    background:#edf5ff !important;
    border:1px solid #e1ecfa !important;
    border-radius:18px !important;
    padding:18px 20px !important;
}
.settings-group-head-v529{
    padding:14px 16px !important;
    border-radius:15px !important;
    background:#f1f6fd !important;
}
.settings-group-display-v529 .settings-group-head-v529{
    background:#eff9f4 !important;
}
.settings-group-security-v529 .settings-group-head-v529{
    background:#fff2f3 !important;
}
@media(max-width:700px){
    .settings-pagehead-v529{
        padding:14px 15px !important;
        border-radius:15px !important;
    }
    .settings-group-head-v529{
        padding:12px 13px !important;
        border-radius:13px !important;
    }
}
\n\n/* =========================================================\n   v1.0.532 — Settings subpage back navigation\n   - Replace the mixed breadcrumb/back control with an explicit Back action.\n   - On mobile, place Back directly below the header and before the Settings title.\n   - On desktop, keep the Back action inside the Settings heading panel.\n   ========================================================= */\n.settings-mobile-back-v532{display:none}\n.settings-subpage-head-v532{display:flex;align-items:center;gap:14px;margin-top:8px}\n.settings-desktop-back-v532{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:7px 12px;border:1px solid #d6e3f3;border-radius:10px;background:#fff;color:#31527d;text-decoration:none;font-size:14px;font-weight:700;line-height:1.2;transition:background .15s ease,border-color .15s ease}\n.settings-desktop-back-v532:hover{background:#f7faff;border-color:#bfd2ea}\n.settings-desktop-back-v532 span{font-size:24px;line-height:.8;transform:translateY(-1px)}\n.settings-subpage-head-v532>strong{font-size:17px;line-height:1.3;color:#24466f}\n\n@media(max-width:700px){\n    .settings-mobile-back-v532{\n        display:flex;align-items:center;gap:5px;\n        width:max-content;max-width:100%;\n        margin:2px 0 10px;\n        padding:8px 10px;\n        border:1px solid #d9e5f3;border-radius:10px;\n        background:#fff;color:#31527d;text-decoration:none;\n        font-size:14px;font-weight:700;line-height:1.2;\n    }\n    .settings-mobile-back-v532 span{font-size:24px;line-height:.75;transform:translateY(-1px)}\n    .settings-desktop-back-v532{display:none}\n    .settings-subpage-head-v532{margin-top:5px}\n    .settings-subpage-head-v532>strong{font-size:16px;line-height:1.3;color:#53657b}\n}\n

/* =========================================================
   v1.0.533 — Settings back navigation single-control fix
   - Keep exactly one Back control on every settings subpage.
   - Place it above the Settings title panel on desktop and mobile.
   - The title panel now contains only "ตั้งค่า" + current subpage name.
   ========================================================= */
.settings-mobile-back-v532{
    display:inline-flex !important;
    align-items:center;
    gap:5px;
    width:max-content;
    max-width:100%;
    margin:2px 0 10px;
    padding:8px 10px;
    border:1px solid #d9e5f3;
    border-radius:10px;
    background:#fff;
    color:#31527d;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    line-height:1.2;
}
.settings-mobile-back-v532:hover{background:#f7faff;border-color:#bfd2ea}
.settings-mobile-back-v532 span{font-size:24px;line-height:.75;transform:translateY(-1px)}
.settings-desktop-back-v532{display:none !important}
.settings-subpage-head-v532{display:block;margin-top:5px}
.settings-subpage-head-v532>strong{display:block;font-size:17px;line-height:1.3;color:#24466f}
@media(max-width:700px){
    .settings-mobile-back-v532{margin:2px 0 8px;padding:7px 9px;font-size:14px}
    .settings-subpage-head-v532>strong{font-size:16px;color:#53657b}
}

/* =========================================================
   v1.0.534 — Settings mobile Back vertical centering
   - Keep the Back control left-aligned horizontally.
   - Balance vertical spacing above/below it between header and title card.
   ========================================================= */
@media(max-width:700px){
    .settings-mobile-back-v532{
        margin:8px 0 8px !important;
    }
}


/* =========================================================
   v1.0.535 — Settings back button clarity polish
   - Make Back look like a deliberate secondary navigation button.
   - Keep it left-aligned and compact on both desktop and mobile.
   - Use a real SVG chevron instead of a text glyph.
   ========================================================= */
.settings-mobile-back-v532{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:7px !important;
    width:max-content !important;
    max-width:100% !important;
    min-height:38px;
    margin:8px 0 10px !important;
    padding:7px 13px 7px 10px !important;
    border:1px solid #c9d9ec !important;
    border-radius:11px !important;
    background:#f7fbff !important;
    color:#31527d !important;
    text-decoration:none !important;
    font-size:14px !important;
    font-weight:700 !important;
    line-height:1.2 !important;
    box-shadow:0 1px 2px rgba(36,70,111,.04);
    transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,transform .15s ease;
}
.settings-mobile-back-v532:hover{
    background:#edf5ff !important;
    border-color:#afc8e5 !important;
    box-shadow:0 2px 6px rgba(36,70,111,.08);
}
.settings-mobile-back-v532:active{transform:translateY(1px)}
.settings-mobile-back-v532:focus-visible{outline:3px solid rgba(58,105,165,.18);outline-offset:2px}
.settings-back-icon-v535{
    width:20px;
    height:20px;
    display:grid;
    place-items:center;
    flex:0 0 20px;
}
.settings-back-icon-v535 svg{display:block;width:20px;height:20px}
.settings-back-label-v535{display:block;white-space:nowrap}
.settings-mobile-back-v532>span:not(.settings-back-icon-v535):not(.settings-back-label-v535){transform:none}

@media(min-width:701px){
    .settings-mobile-back-v532{
        min-height:40px;
        margin:8px 0 12px !important;
        padding:8px 14px 8px 11px !important;
        font-size:15px !important;
    }
}

@media(max-width:700px){
    .settings-mobile-back-v532{
        min-height:36px;
        margin:8px 0 8px !important;
        padding:7px 11px 7px 8px !important;
        border-radius:10px !important;
        font-size:14px !important;
    }
    .settings-back-icon-v535,.settings-back-icon-v535 svg{width:18px;height:18px}
    .settings-back-icon-v535{flex-basis:18px}
}

/* =========================================================
   v1.0.536 — Settings back button compact sizing
   - Reduce the secondary Back control on desktop and mobile.
   - Keep left alignment, SVG chevron, and existing visual language.
   ========================================================= */
.settings-mobile-back-v532{
    min-height:32px !important;
    gap:5px !important;
    margin:8px 0 10px !important;
    padding:5px 10px 5px 7px !important;
    border-radius:9px !important;
    font-size:13px !important;
    line-height:1.15 !important;
}
.settings-back-icon-v535{
    width:16px !important;
    height:16px !important;
    flex-basis:16px !important;
}
.settings-back-icon-v535 svg{
    width:16px !important;
    height:16px !important;
}

@media(max-width:700px){
    .settings-mobile-back-v532{
        min-height:28px !important;
        gap:4px !important;
        margin:8px 0 8px !important;
        padding:4px 8px 4px 6px !important;
        border-radius:8px !important;
        font-size:12px !important;
    }
    .settings-back-icon-v535{
        width:14px !important;
        height:14px !important;
        flex-basis:14px !important;
    }
    .settings-back-icon-v535 svg{
        width:14px !important;
        height:14px !important;
    }
}

/* =========================================================
   v1.0.537 — Settings back navigation lightweight link
   - Remove button-like background, border, radius and shadow.
   - Keep a small chevron + clear text, left aligned.
   - Use a subtle text-only hover/focus treatment.
   ========================================================= */
.settings-mobile-back-v532{
    min-height:0 !important;
    gap:5px !important;
    margin:8px 0 10px !important;
    padding:2px 0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#31527d !important;
    font-size:6.5px !important;
    font-weight:500 !important;
    line-height:1.25 !important;
    text-decoration:none !important;
    transition:color .15s ease,opacity .15s ease !important;
}
.settings-mobile-back-v532:hover{
    background:transparent !important;
    border-color:transparent !important;
    box-shadow:none !important;
    color:#1f5f9f !important;
    text-decoration:none !important;
}
.settings-mobile-back-v532:active{
    transform:none !important;
    opacity:.72;
}
.settings-mobile-back-v532:focus-visible{
    outline:2px solid rgba(58,105,165,.22) !important;
    outline-offset:3px !important;
    border-radius:3px !important;
}
.settings-back-icon-v535{
    width:14px !important;
    height:14px !important;
    flex-basis:14px !important;
}
.settings-back-icon-v535 svg{
    width:14px !important;
    height:14px !important;
}

@media(max-width:700px){
    .settings-mobile-back-v532{
        gap:4px !important;
        margin:8px 0 8px !important;
        padding:2px 0 !important;
        font-size:6px !important;
        font-weight:500 !important;
    }
    .settings-back-icon-v535{
        width:13px !important;
        height:13px !important;
        flex-basis:13px !important;
    }
    .settings-back-icon-v535 svg{
        width:13px !important;
        height:13px !important;
    }
}


/* =========================================================
   v1.0.538 — Settings back link font -50%
   - Reduce only the back-label font size by 50%.
   - Desktop: 13px -> 6.5px
   - Mobile: 12px -> 6px
   ========================================================= */
.settings-mobile-back-v532{font-size:6.5px !important;}
@media(max-width:700px){.settings-mobile-back-v532{font-size:6px !important;}}

/* =========================================================
   v1.0.539 — Settings back label font-size fix
   - Previous parent font-size was overridden by an older span rule.
   - Target the actual label span directly so the requested 50% size applies.
   ========================================================= */
.settings-mobile-back-v532 .settings-back-label-v535{
    font-size:6.5px !important;
    line-height:1.25 !important;
}
@media(max-width:700px){
    .settings-mobile-back-v532 .settings-back-label-v535{
        font-size:6px !important;
    }
}

/* =========================================================
   v1.0.540 — Settings back link balanced text size
   - Increase from the overly-small v1.0.539 label while keeping the lightweight link style.
   - Desktop 10.5px, Mobile 10px.
   ========================================================= */
.settings-mobile-back-v532,
.settings-mobile-back-v532 .settings-back-label-v535{
    font-size:10.5px !important;
    line-height:1.25 !important;
}
@media(max-width:700px){
    .settings-mobile-back-v532,
    .settings-mobile-back-v532 .settings-back-label-v535{
        font-size:10px !important;
    }
}

/* =========================================================
   v1.0.541 — Settings back link +2px
   - Increase only the back navigation text by 2px from v1.0.540.
   - Desktop 12.5px, Mobile 12px.
   ========================================================= */
.settings-mobile-back-v532,
.settings-mobile-back-v532 .settings-back-label-v535{
    font-size:12.5px !important;
}
@media(max-width:700px){
    .settings-mobile-back-v532,
    .settings-mobile-back-v532 .settings-back-label-v535{
        font-size:12px !important;
    }
}

/* =========================================================
   v1.0.542 — Settings back link +1px
   - Increase only the back navigation text by 1px from v1.0.541.
   - Desktop 13.5px, Mobile 13px.
   ========================================================= */
.settings-mobile-back-v532,
.settings-mobile-back-v532 .settings-back-label-v535{
    font-size:13.5px !important;
}
@media(max-width:700px){
    .settings-mobile-back-v532,
    .settings-mobile-back-v532 .settings-back-label-v535{
        font-size:13px !important;
    }
}

/* =========================================================
   v1.0.543 — Settings back link vertical spacing balance
   - Reduce only the space above the back link on Settings subpages.
   - Keep left alignment, font size, icon, and all other layout unchanged.
   - Visually balance the gap above the link with the gap below it.
   ========================================================= */
.settings-mobile-back-v532{
    margin-top:-6px !important;
    margin-bottom:10px !important;
}
@media(max-width:700px){
    .settings-mobile-back-v532{
        margin-top:-4px !important;
        margin-bottom:8px !important;
    }
}

/* =========================================================
   v1.0.544 — Settings back link tighter top spacing
   - Reduce the remaining space above the back link a little more.
   - Keep the lower gap, typography, icon and horizontal position unchanged.
   ========================================================= */
.settings-mobile-back-v532{
    margin-top:-10px !important;
}
@media(max-width:700px){
    .settings-mobile-back-v532{
        margin-top:-7px !important;
    }
}

/* =========================================================
   v1.0.545 — Settings back row tighter vertical placement
   - Previous negative margin could be visually limited by first-child/parent spacing.
   - Move the back link and following heading upward together for a clearly smaller top gap.
   - Keep horizontal position, font, icon and visual style unchanged.
   ========================================================= */
.settings-mobile-back-v532{
    transform:translateY(-8px) !important;
    margin-bottom:2px !important;
}
@media(max-width:700px){
    .settings-mobile-back-v532{
        transform:translateY(-6px) !important;
        margin-bottom:2px !important;
    }
}


/* =========================================================
   v1.0.546 — Settings back icon unified with label
   - Use one clickable Back action: icon + label inside the same anchor.
   - Replace the old chevron-stroke symbol with a compact solid triangle icon,
     visually matching the requested “◄ กลับไปหน้าตั้งค่า”.
   - Keep the current typography and vertical placement from v1.0.545.
   ========================================================= */
.settings-back-icon-v546{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:10px;
    height:10px;
    flex:0 0 10px;
    color:currentColor;
}
.settings-back-icon-v546 svg{
    display:block;
    width:10px;
    height:10px;
}
.settings-mobile-back-v532{
    gap:5px !important;
}
@media(max-width:700px){
    .settings-back-icon-v546,
    .settings-back-icon-v546 svg{
        width:9px;
        height:9px;
    }
    .settings-back-icon-v546{flex-basis:9px;}
    .settings-mobile-back-v532{gap:4px !important;}
}

/* =========================================================
   v1.0.547 — Settings back action stays fixed while pressed
   - Keep the same vertical translate in :active state so the link no longer jumps down.
   - Preserve the existing pressed opacity feedback and all other styling.
   ========================================================= */
.settings-mobile-back-v532:active{
    transform:translateY(-8px) !important;
}
@media(max-width:700px){
    .settings-mobile-back-v532:active{
        transform:translateY(-6px) !important;
    }
}

/* =========================================================
   v1.0.548 — Mobile hamburger Settings hierarchy refinement
   - Keep icons on every menu item
   - Remove the persistent hover-like fill from Settings
   - Separate Settings as a utility/system item with a subtle divider
   - Keep normal hover/press feedback consistent with other menu items
   ========================================================= */
@media(max-width:700px){
    .admin-mobile-native-panel .admin-mobile-settings-link{
        position:relative;
        margin-top:9px !important;
        padding-top:15px !important;
        background:#fff !important;
        color:#1f4f83 !important;
        font-weight:800 !important;
        border-top:0 !important;
        box-shadow:none !important;
    }
    .admin-mobile-native-panel .admin-mobile-settings-link::before{
        content:"";
        position:absolute;
        left:10px;
        right:10px;
        top:0;
        height:1px;
        background:#dfe5ed;
        pointer-events:none;
    }
    .admin-mobile-native-panel .admin-mobile-settings-link .admin-menu-icon{
        color:#245b96 !important;
    }
    .admin-mobile-native-panel .admin-mobile-settings-link:hover{
        background:#f7faff !important;
    }
    .admin-mobile-native-panel .admin-mobile-settings-link:active{
        background:#edf4fb !important;
    }
}

/* =========================================================
   v1.0.549 — Mobile hamburger menu: Settings as separate utility group
   - Remove separators between normal menu rows.
   - Keep every menu icon.
   - Use a single divider only before Settings.
   - Keep Settings white at rest so it does not look permanently hovered.
   ========================================================= */
@media(max-width:700px){
    .admin-mobile-native-panel a + a{
        border-top:0 !important;
    }
    .admin-mobile-native-panel a{
        box-shadow:none !important;
    }
    .admin-mobile-native-panel .admin-mobile-settings-link{
        position:relative;
        margin-top:10px !important;
        padding-top:15px !important;
        background:#fff !important;
        color:#1f4f83 !important;
        font-weight:800 !important;
        border-top:0 !important;
        border-radius:8px !important;
        box-shadow:none !important;
    }
    .admin-mobile-native-panel .admin-mobile-settings-link::before{
        content:"";
        position:absolute;
        left:9px;
        right:9px;
        top:0;
        height:1px;
        background:#d9e1ea;
        pointer-events:none;
    }
    .admin-mobile-native-panel .admin-mobile-settings-link .admin-menu-icon{
        color:#245b96 !important;
    }
    .admin-mobile-native-panel .admin-mobile-settings-link:hover{
        background:#f7faff !important;
    }
    .admin-mobile-native-panel .admin-mobile-settings-link:active{
        background:#edf4fb !important;
    }
}

/* =========================================================
   v1.0.550 — Desktop admin navigation polish + brand drag sort
   ========================================================= */
@media(min-width:701px){
    .admin .adminhead{
        min-height:72px !important;
        height:72px !important;
        padding:0 22px !important;
        gap:20px !important;
        box-shadow:0 2px 12px rgba(31,49,77,.12) !important;
    }
    .admin .admin-home-logo img{
        height:44px !important;
        max-width:310px !important;
    }
    .admin .adminnav{
        flex:1 1 auto !important;
        align-self:stretch !important;
        display:flex !important;
        align-items:stretch !important;
        justify-content:center !important;
        gap:2px !important;
        max-width:none !important;
        margin:0 !important;
        padding:0 !important;
        background:transparent !important;
        border:0 !important;
        color:#fff !important;
        overflow:visible !important;
    }
    .admin .adminnav a{
        position:relative !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        min-height:72px !important;
        padding:0 17px !important;
        border-radius:0 !important;
        color:rgba(255,255,255,.88) !important;
        font-size:15px !important;
        font-weight:650 !important;
        white-space:nowrap !important;
        transition:background .16s ease,color .16s ease !important;
    }
    .admin .adminnav a:hover,
    .admin .adminnav a:focus-visible{
        background:rgba(255,255,255,.08) !important;
        color:#fff !important;
        outline:none !important;
    }
    .admin .adminnav a.active{
        background:rgba(69,120,200,.24) !important;
        color:#fff !important;
        font-weight:800 !important;
    }
    .admin .adminnav a.active::after{
        content:"";
        position:absolute;
        left:0;right:0;bottom:0;
        height:4px;
        background:#69a4ff;
    }
    .admin .adminhead-actions{flex:0 0 auto !important}
}
@media(min-width:701px) and (max-width:1050px){
    .admin .adminhead{padding:0 12px !important;gap:10px !important}
    .admin .admin-home-logo img{height:36px !important;max-width:210px !important}
    .admin .adminnav a{padding:0 9px !important;font-size:13px !important}
    .admin .admin-store-link{font-size:12px !important;padding:8px !important}
}

/* Brand order: clear handle affordance on desktop + touch-safe mobile sorting. */
.brand-sort-row{
    position:relative;
    transition:box-shadow .12s ease,transform .12s ease,background .12s ease;
}
.brand-drag-handle{
    flex:0 0 30px;
    width:30px;
    height:34px;
    padding:0;
    border:0;
    background:transparent;
    color:#aab6c6;
    display:grid;
    place-items:center;
    cursor:grab;
    touch-action:none;
    -webkit-tap-highlight-color:transparent;
}
.brand-drag-handle:active{cursor:grabbing}
.brand-drag-handle span{
    width:12px;height:18px;
    display:grid;
    grid-template-columns:repeat(2,4px);
    grid-auto-rows:4px;
    gap:3px 4px;
    place-content:center;
}
.brand-drag-handle i{
    display:block;width:4px;height:4px;border-radius:50%;background:currentColor;
}
.brand-sort-row:hover .brand-drag-handle{color:#71839b}
.brand-sort-row.is-dragging{
    z-index:8;
    background:#f7faff !important;
    border-color:#b9cbe3 !important;
    box-shadow:0 8px 20px rgba(47,70,110,.16) !important;
    transform:scale(1.005);
}
body.brand-sorting-active{user-select:none;-webkit-user-select:none}
.brand-sort-save-status{
    min-height:22px;
    margin:6px 2px 0;
    font-size:12px;
    color:#68778a;
}
.brand-sort-save-status.ok{color:#087338}
.brand-sort-save-status.error{color:#b42318}
.brand-sort-save-status.saving{color:#355584}
@media(max-width:700px){
    .brand-sort-row{gap:5px !important}
    .brand-drag-handle{
        flex-basis:28px;width:28px;height:36px;
        margin-left:-2px;
        color:#9caabd;
    }
    .brand-drag-handle span{transform:scale(.92)}
    .brand-sort-save-status{font-size:11px;margin-left:2px}
}


/* =========================================================
   v1.0.551 — Left-aligned desktop nav + reliable brand sort save
   ========================================================= */
@media(min-width:701px){
    .admin .adminnav{
        justify-content:flex-start !important;
    }
}


/* v1.0.559 — Store share action + location SVG icon */
.storefront .topbar-actions{display:flex!important;align-items:center!important;gap:18px!important;margin-left:auto!important}
.storefront .topbar-share{display:inline-flex!important;align-items:center!important;gap:7px!important;background:transparent!important;border:0!important;font-family:inherit!important;cursor:pointer!important;white-space:nowrap!important;color:#fff!important;font-size:13px!important;font-weight:600!important;line-height:1!important;padding:6px 2px!important}
.storefront .topbar-action-icon{width:17px!important;height:17px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important;flex:0 0 auto!important}
.storefront .topbar-location-icon{color:#ef2029!important;fill:none!important}
.storefront .topbar-share:hover,.storefront .topbar-share:focus-visible{color:#ef2631!important}
@media(max-width:700px){
 .storefront .mobile-drawer .mobile-drawer-share{display:flex!important;align-items:center!important;gap:10px!important;width:100%!important;padding:14px 16px!important;border:0!important;border-bottom:1px solid #eef0f2!important;background:#fff!important;color:#111820!important;font-family:inherit!important;font-size:inherit!important;font-weight:700!important;text-align:left!important;cursor:pointer!important}
 .storefront .mobile-drawer .mobile-drawer-share:hover,.storefront .mobile-drawer .mobile-drawer-share:focus-visible{background:#f3f5f7!important}
}

/* v1.0.563 Store share modal — hidden by default, desktop modal only */
/* v1.0.565 — keep the page width stable when the share modal locks scrolling */
@supports (scrollbar-gutter:stable){html{scrollbar-gutter:stable}}
body.storefront.store-share-open{overflow:hidden!important}
.store-share-modal{display:none!important;position:fixed;inset:0;z-index:2147482500}
.store-share-modal[hidden]{display:none!important}
.store-share-modal.open{display:block!important}
.store-share-backdrop{position:absolute;inset:0;background:rgba(4,12,20,.56);backdrop-filter:blur(2px)}
.store-share-panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 40px));background:#fff;border:1px solid #dfe5eb;border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.28);padding:20px;color:#111820}
.store-share-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-bottom:15px;border-bottom:1px solid #e9edf2}
.store-share-head strong{display:block;font-size:20px;line-height:1.25;color:#132a4b}
.store-share-head span{display:block;margin-top:4px;font-size:13px;color:#728095}
.store-share-close{display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;background:#f2f5f8;color:#536174;font-size:25px;line-height:1;cursor:pointer}
.store-share-close:hover,.store-share-close:focus-visible{background:#e8eef5;color:#1d4f91}
.store-share-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:16px 0 8px}
.store-share-option{display:flex;align-items:center;gap:11px;min-height:54px;padding:9px 12px;border:1px solid #e3e8ee;border-radius:12px;background:#fff;color:#172033;font-family:inherit;font-size:14px;font-weight:600;text-align:left;cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .15s ease}
.store-share-option:hover,.store-share-option:focus-visible{background:#f7faff;border-color:#cbd9ea;outline:none}
.store-share-option:active{transform:scale(.99)}
.store-share-social{display:grid;place-items:center;flex:0 0 34px;width:34px;height:34px;border-radius:9px;font-family:Arial,sans-serif;font-weight:800;font-size:16px;color:#fff}
.store-share-facebook{background:#1877f2;font-size:24px}
.store-share-line{background:#06c755;font-size:9px}
.store-share-whatsapp{background:#25d366;font-size:18px}
.store-share-copy{background:#65758b;font-size:20px}
.store-share-system{background:#315f9d;font-size:19px}
.store-share-note{margin:8px 0 0;padding:11px 12px;border-radius:10px;background:#f6f8fb;color:#66758a;font-size:12px;line-height:1.5}
.store-share-toast{display:none;margin-top:10px;padding:10px 12px;border-radius:10px;background:#eaf7ef;color:#176a3c;font-size:12px;font-weight:600}
.store-share-toast.show{display:block}
@media(max-width:700px){.store-share-modal{display:none!important}}

/* v1.0.564 — Store Share priority: Copy first, Thailand-popular social channels */
.store-share-option-primary{grid-column:1/-1;min-height:66px;border-color:#b8cbea;background:#f2f7ff;color:#163b70}
.store-share-option-primary:hover,.store-share-option-primary:focus-visible{background:#eaf2ff;border-color:#8fb0df}
.store-share-option-primary .store-share-copy{background:#315f9d}
.store-share-option-copytext{display:flex;min-width:0;flex-direction:column;gap:2px}
.store-share-option-copytext strong{font-size:15px;line-height:1.25}
.store-share-option-copytext small{font-size:11px;line-height:1.35;font-weight:500;color:#687a92}
.store-share-messenger{background:#168aff;font-size:15px}
.store-share-instagram{background:linear-gradient(135deg,#7b2cff,#e1306c,#f7a33a);font-size:23px}
.store-share-x{background:#111;font-size:14px}
.store-share-option-system{grid-column:1/-1}

/* v1.0.568 Storefront direction/share icon polish */
.storefront .topbar-share-icon{color:#fff!important}
.storefront .mobile-drawer .mobile-drawer-directions,
.storefront .mobile-drawer .mobile-drawer-share{display:flex!important;align-items:center!important;gap:10px!important}
.storefront .mobile-drawer .mobile-drawer-action-icon{width:17px!important;height:17px!important;flex:0 0 17px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.storefront .mobile-drawer .mobile-drawer-location-icon{color:#ef2029!important}
.storefront .mobile-drawer .mobile-drawer-share-icon{color:#1b2735!important}

/* =========================================================
   v1.0.569 — Product share icon unified with Store Share
   ========================================================= */
.storefront .product-detail-section .product-actions .store-btn.share .share-icon-svg circle{
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.85 !important;
}


/* =========================================================
   v1.0.570 — Restore balanced mobile bottom-nav vertical alignment
   Keep the approved compact bar height; only center the icon/label
   stack vertically again so it no longer hugs the top edge.
   ========================================================= */
@media(max-width:700px){
    .storefront .mobile-bottom-nav a,
    .storefront .mobile-bottom-nav button{
        justify-content:center !important;
    }
}

/* =========================================================
   v1.0.571 — Mobile bottom-nav approved vertical balance
   Restore the visual rhythm from the approved mobile reference.
   Keep bar height/safe-area unchanged; move only the icon+label stack
   slightly lower and lock its internal centering so earlier rules cannot
   pull it back toward the top edge.
   ========================================================= */
@media(max-width:700px){
    .storefront .mobile-bottom-nav{
        align-items:stretch !important;
    }

    .storefront .mobile-bottom-nav a,
    .storefront .mobile-bottom-nav button{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        height:100% !important;
        min-height:0 !important;
        padding:3px 0 0 !important;
        box-sizing:border-box !important;
        transform:translateY(2px) !important;
    }

    .storefront .mobile-bottom-nav a span,
    .storefront .mobile-bottom-nav button span{
        margin:0 !important;
        line-height:1 !important;
    }
}

/* =========================================================
   v1.0.574 — Mobile drawer visual grouping + unified menu icons
   Top actions remain distinct; main navigation uses one blue icon system.
   ========================================================= */
@media(max-width:700px){
    /* Top action group: visually distinct, no per-row dividers */
    .storefront .mobile-drawer .mobile-drawer-directions,
    .storefront .mobile-drawer .mobile-drawer-share{
        min-height:48px !important;
        padding:0 14px !important;
        border-bottom:0 !important;
        background:#fff !important;
        font-weight:700 !important;
    }
    .storefront .mobile-drawer .mobile-drawer-location-icon{color:#ef2029 !important}
    .storefront .mobile-drawer .mobile-drawer-share-icon{color:#162434 !important}

    .storefront .mobile-drawer .mobile-drawer-primary-divider{
        height:1px !important;
        margin:6px 14px 4px !important;
        background:#dfe5ec !important;
        flex:0 0 1px !important;
    }

    /* Main navigation: no separator lines between rows */
    .storefront .mobile-drawer > a.mobile-drawer-main-link{
        min-height:52px !important;
        padding:5px 14px !important;
        display:flex !important;
        align-items:center !important;
        gap:11px !important;
        border-bottom:0 !important;
        background:#fff !important;
        color:#111820 !important;
        font-size:16px !important;
        font-weight:700 !important;
    }
    .storefront .mobile-drawer > a.mobile-drawer-main-link:hover,
    .storefront .mobile-drawer > a.mobile-drawer-main-link:focus-visible,
    .storefront .mobile-drawer > a.mobile-drawer-main-link.active{
        background:#f7f9fc !important;
        color:#111820 !important;
    }

    /* Blue icon chip — based on the approved reference */
    .storefront .mobile-drawer .mobile-drawer-main-icon{
        width:31px !important;
        height:31px !important;
        flex:0 0 31px !important;
        display:inline-flex !important;
        align-items:center !important;
        justify-content:center !important;
        border-radius:50% !important;
        background:#f3f6ff !important;
        color:#18479d !important;
        box-shadow:inset 0 0 0 1px #e3eafd !important;
    }
    .storefront .mobile-drawer .mobile-drawer-main-icon svg{
        width:17px !important;
        height:17px !important;
        fill:none !important;
        stroke:currentColor !important;
        stroke-width:1.9 !important;
        stroke-linecap:round !important;
        stroke-linejoin:round !important;
    }

    /* Accordion rows share the same icon language; only these rows show + / − */
    .storefront .mobile-drawer .mobile-drawer-main-group > summary{
        min-height:52px !important;
        padding:5px 14px !important;
        border-bottom:0 !important;
        font-size:16px !important;
        font-weight:700 !important;
        background:#fff !important;
    }
    .storefront .mobile-drawer .mobile-drawer-summary-label{
        display:flex !important;
        align-items:center !important;
        gap:11px !important;
        min-width:0 !important;
    }
    .storefront .mobile-drawer .mobile-drawer-toggle-icon{
        color:#18479d !important;
        font-size:20px !important;
        font-weight:600 !important;
    }

    /* Keep submenu hierarchy readable once expanded */
    .storefront .mobile-drawer .mobile-drawer-submenu{
        border-top:1px solid #eef2f7 !important;
    }
}

/* =========================================================
   v1.0.575 — Desktop Categories / Vehicle Brands nav parity
   Make both dropdown triggers use the same full hover box and
   the same chevron rotation behavior.
   ========================================================= */
@media(min-width:701px){

  /* Both dropdown wrappers follow one geometry model. */
  .storefront .store-nav .nav-inner > .nav-cats,
  .storefront .store-nav .nav-inner > .nav-brands{
    position:relative !important;
    margin:0 !important;
    background:transparent !important;
    overflow:visible !important;
    border-radius:9px !important;
    box-sizing:border-box !important;
  }

  /* Same trigger size, padding and rounded full-width hover surface. */
  .storefront .store-nav .nav-inner > .nav-cats > summary,
  .storefront .store-nav .nav-inner > .nav-brands > summary{
    min-height:46px !important;
    height:46px !important;
    padding:0 20px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    list-style:none !important;
    cursor:pointer !important;
    box-sizing:border-box !important;
    border-radius:9px !important;
    overflow:hidden !important;
    background:#10161c !important;
    color:#fff !important;
    font-size:14px !important;
    font-weight:500 !important;
    white-space:nowrap !important;
    transition:background-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease !important;
  }

  .storefront .store-nav .nav-inner > .nav-cats > summary::-webkit-details-marker,
  .storefront .store-nav .nav-inner > .nav-brands > summary::-webkit-details-marker{
    display:none !important;
  }
  .storefront .store-nav .nav-inner > .nav-cats > summary::marker,
  .storefront .store-nav .nav-inner > .nav-brands > summary::marker{
    content:"" !important;
  }

  /* Identical hover/focus surface for both menus. */
  .storefront .store-nav .nav-inner > .nav-cats:not(.active):hover > summary,
  .storefront .store-nav .nav-inner > .nav-cats:not(.active):focus-within > summary,
  .storefront .store-nav .nav-inner > .nav-brands:hover > summary,
  .storefront .store-nav .nav-inner > .nav-brands:focus-within > summary{
    background:#263440 !important;
    color:#fff !important;
    border-radius:9px !important;
  }

  /* Same subtle lift. */
  .storefront .store-nav .nav-inner > .nav-cats > summary:hover,
  .storefront .store-nav .nav-inner > .nav-brands > summary:hover{
    transform:translateY(-1px) !important;
  }

  /* One shared chevron treatment. Rotate on hover/focus/open. */
  .storefront .store-nav .nav-cats .nav-chevron,
  .storefront .store-nav .nav-brands .nav-chevron{
    width:14px !important;
    height:14px !important;
    flex:0 0 14px !important;
    fill:none !important;
    stroke:currentColor !important;
    stroke-width:2 !important;
    stroke-linecap:round !important;
    stroke-linejoin:round !important;
    transition:transform .18s ease !important;
    transform:rotate(0deg) !important;
  }

  .storefront .store-nav .nav-cats:hover .nav-chevron,
  .storefront .store-nav .nav-cats:focus-within .nav-chevron,
  .storefront .store-nav .nav-cats[open] .nav-chevron,
  .storefront .store-nav .nav-brands:hover .nav-chevron,
  .storefront .store-nav .nav-brands:focus-within .nav-chevron,
  .storefront .store-nav .nav-brands[open] .nav-chevron{
    transform:rotate(180deg) !important;
  }
}


/* =========================================================
   v1.0.584 — Customer catalog filter reset + cleaner mobile meta
   - Reset is an action inside the filter box, beside Status.
   - Result metadata contains result information only.
   ========================================================= */
.storefront .catalog-filter-reset{
    height:44px;
    padding:0 12px;
    border:1px solid #f3c7c3;
    border-radius:8px;
    background:#fff1f1;
    color:#d62828;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    font-size:14px;
    font-weight:800;
    white-space:nowrap;
    text-decoration:none;
    transition:background .15s ease,border-color .15s ease;
}
.storefront .catalog-filter-reset:hover{
    background:#ffe4e2;
    border-color:#e9aaa4;
}
.storefront .catalog-filter-reset-icon{
    font-size:18px;
    line-height:1;
    font-family:Arial,sans-serif;
}
@media(max-width:700px){
    .storefront .catalog-filters .catalog-filter-reset{
        height:40px;
        align-self:end;
        padding:0 10px;
        font-size:13px;
    }
    .storefront .catalog-filters .store-btn.primary{
        grid-column:1/-1 !important;
    }
    .storefront .catalog-meta-summary > small{
        display:none !important;
    }
    .storefront .catalog-meta-actions{
        grid-row:1 !important;
    }
}

/* =========================================================
   v1.0.586 — Mobile catalog result meta: stronger readable hierarchy
   - Result count and page-size control share one clean row.
   - Current category/filter context gets its own row below.
   - Keeps actions (filter/reset) separate from result information.
   ========================================================= */
.storefront .catalog-meta-mobile{display:none}
@media(max-width:700px){
    .storefront .catalog-meta-desktop{display:none !important}
    .storefront .catalog-meta-mobile{
        display:block !important;
        margin:10px 0 7px !important;
        padding:0 1px !important;
        color:#172330 !important;
    }
    .storefront .catalog-meta-mobile-top{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) auto !important;
        align-items:center !important;
        gap:10px !important;
        min-height:35px !important;
    }
    .storefront .catalog-meta-mobile-count{
        min-width:0 !important;
        display:flex !important;
        align-items:baseline !important;
        gap:4px !important;
        white-space:nowrap !important;
        font-size:14px !important;
        font-weight:700 !important;
        line-height:1.3 !important;
        color:#263441 !important;
    }
    .storefront .catalog-meta-mobile-count strong{
        font-size:15px !important;
        font-weight:900 !important;
        color:#102f55 !important;
    }
    .storefront .catalog-per-page-form-mobile{
        margin:0 !important;
    }
    .storefront .catalog-per-page-form-mobile label{
        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;
        gap:5px !important;
        color:#44515f !important;
        font-size:13px !important;
        font-weight:700 !important;
        white-space:nowrap !important;
    }
    .storefront .catalog-per-page-form-mobile select{
        width:58px !important;
        min-width:58px !important;
        height:34px !important;
        padding:0 22px 0 8px !important;
        border:1px solid #d5dae1 !important;
        border-radius:7px !important;
        background:#fff !important;
        color:#111923 !important;
        font-size:13px !important;
        font-weight:800 !important;
    }
    .storefront .catalog-meta-mobile-context{
        margin-top:3px !important;
        display:flex !important;
        align-items:center !important;
        gap:6px !important;
        min-width:0 !important;
        font-size:12px !important;
        line-height:1.3 !important;
    }
    .storefront .catalog-meta-mobile-context-label{
        flex:0 0 auto !important;
        color:#788491 !important;
        font-weight:700 !important;
    }
    .storefront .catalog-meta-mobile-context .catalog-meta-category{
        margin:0 !important;
        max-width:100% !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
        white-space:nowrap !important;
        padding:4px 9px !important;
        border-radius:6px !important;
        font-size:14px !important;
        font-weight:800 !important;
        line-height:1.25 !important;
    }
}

/* =========================================================
   v1.0.587 — Mobile catalog meta: wider page-size + balanced labels
   - Keep 50/100/200 comfortably readable without bold numerals.
   - Make the context label (e.g. "หมวด") equal in prominence to "พบสินค้า".
   ========================================================= */
@media(max-width:700px){
    .storefront .catalog-per-page-form-mobile select{
        width:72px !important;
        min-width:72px !important;
        padding:0 24px 0 10px !important;
        font-weight:400 !important;
    }
    .storefront .catalog-meta-mobile-context{
        font-size:14px !important;
    }
    .storefront .catalog-meta-mobile-context-label{
        color:#263441 !important;
        font-size:14px !important;
        font-weight:700 !important;
        line-height:1.3 !important;
    }
}

/* =========================================================
   v1.0.589 — Storefront tablet responsive layer
   iPad / tablet widths were previously inheriting the full desktop
   minimums, which could create horizontal overflow and awkward wraps.
   Desktop >1180px and mobile <=700px are intentionally unchanged.
   ========================================================= */
@media (min-width:701px) and (max-width:1180px){
  html,body.storefront{max-width:100%;overflow-x:hidden}
  body.storefront .store-shell{width:calc(100% - 28px) !important;max-width:none !important;margin-inline:auto !important}

  /* Header: keep desktop structure, but remove desktop-only minimum pressure. */
  body.storefront .mainhead-inner{
    min-height:72px !important;
    grid-template-columns:minmax(170px,210px) minmax(260px,1fr) 112px !important;
    gap:14px !important;
  }
  body.storefront .store-logo{width:min(100%,205px) !important;height:52px !important;padding:4px 7px !important}
  body.storefront .store-search{height:42px !important}
  body.storefront .store-search .search-icon{width:38px !important}
  body.storefront .store-search input{font-size:13px !important}
  body.storefront .store-search button{min-width:76px !important;padding-inline:12px !important;font-size:13px !important}
  body.storefront .header-contact{gap:5px !important;white-space:nowrap !important}
  body.storefront .header-contact span{font-size:20px !important}
  body.storefront .header-contact b{font-size:12px !important}

  /* Navigation: one clean line on tablet instead of multi-line labels. */
  body.storefront .nav-inner{gap:2px !important;min-width:0 !important}
  body.storefront .nav-inner>a,
  body.storefront .nav-cats>summary,
  body.storefront .nav-brands>summary{
    min-height:46px !important;
    padding:0 11px !important;
    font-size:12px !important;
    white-space:nowrap !important;
    line-height:1.1 !important;
  }
  body.storefront .nav-cats>summary .nav-chevron,
  body.storefront .nav-brands>summary .nav-chevron{width:13px !important;height:13px !important;margin-left:4px !important}

  /* Hero: preserve composition and keep the selling message readable. */
  body.storefront .home-hero,
  body.storefront .hero-content{min-height:410px !important}
  body.storefront .hero-copy{width:min(520px,48%) !important;padding:28px 0 !important}
  body.storefront .hero-copy h1{font-size:clamp(36px,4.2vw,48px) !important;line-height:1.08 !important}
  body.storefront .hero-sub{font-size:16px !important;margin:13px 0 20px !important}
  body.storefront .hero-points{gap:14px !important;flex-wrap:nowrap !important}
  body.storefront .hero-points>div{grid-template-columns:34px auto !important;column-gap:7px !important;min-width:0 !important}
  body.storefront .hero-points>div>span{width:34px !important;height:34px !important;font-size:16px !important}
  body.storefront .hero-points b{font-size:12px !important;line-height:1.2 !important}
  body.storefront .hero-points small{font-size:10px !important;line-height:1.25 !important}

  /* Home grids: fit the viewport instead of leaking left/right. */
  body.storefront .category-grid{grid-template-columns:repeat(10,minmax(0,1fr)) !important;gap:7px !important}
  body.storefront .category-card{padding:8px 5px !important}
  body.storefront .category-image{height:78px !important}
  body.storefront .category-card b{font-size:11px !important}
  body.storefront .brand-grid{grid-template-columns:repeat(10,minmax(0,1fr)) !important;gap:7px !important}
  body.storefront .brand-card{min-height:100px !important;padding:10px 5px !important}
  body.storefront .brand-mark{width:42px !important;height:42px !important}
  body.storefront .brand-card b{font-size:11px !important}

  /* Repair-service panel: remove fixed desktop minimum columns. */
  body.storefront .home-services-panel{
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr) !important;
    gap:20px !important;
    padding:24px !important;
    width:100% !important;
  }
  body.storefront .home-services-copy,
  body.storefront .home-services-grid{min-width:0 !important}
  body.storefront .home-services-copy h2{font-size:27px !important}
  body.storefront .home-services-copy>p{font-size:14px !important;line-height:1.65 !important}
  body.storefront .home-services-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:9px !important}
  body.storefront .home-service-card{min-height:96px !important;grid-template-columns:48px minmax(0,1fr) !important;gap:10px !important;padding:13px !important}
  body.storefront .home-service-icon{width:46px !important;height:46px !important}
  body.storefront .home-service-icon svg{width:27px !important;height:27px !important}
  body.storefront .home-service-card b{font-size:14px !important}
  body.storefront .home-service-card small{font-size:12px !important;line-height:1.45 !important}
  body.storefront .home-services-visual{max-width:100% !important;overflow:visible !important}
  body.storefront .home-services-visual img{max-width:100% !important;height:auto !important}

  /* Footer benefits also need flexible columns on tablet. */
  body.storefront .footer-benefits{grid-template-columns:repeat(4,minmax(0,1fr)) !important}
  body.storefront .footer-benefits>div{min-width:0 !important;padding:18px 12px !important;grid-template-columns:40px minmax(0,1fr) !important;column-gap:8px !important}
  body.storefront .footer-benefits span{width:40px !important;height:40px !important;font-size:18px !important}
  body.storefront .footer-benefits b{font-size:13px !important;line-height:1.25 !important}
  body.storefront .footer-benefits small{font-size:11px !important;line-height:1.35 !important}
}

/* Narrow tablets / iPad portrait: allow the content-heavy repair panel to stack. */
@media (min-width:701px) and (max-width:900px){
  body.storefront .mainhead-inner{grid-template-columns:170px minmax(250px,1fr) 48px !important;gap:10px !important}
  body.storefront .header-contact b{display:none !important}
  body.storefront .header-contact{justify-self:end !important}
  body.storefront .nav-inner>a,
  body.storefront .nav-cats>summary,
  body.storefront .nav-brands>summary{padding:0 7px !important;font-size:11px !important}
  body.storefront .home-services-panel{grid-template-columns:1fr !important;gap:18px !important}
  body.storefront .home-services-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
  body.storefront .home-services-visual{max-width:520px !important;margin-inline:auto !important}
  body.storefront .category-grid{grid-template-columns:repeat(5,minmax(0,1fr)) !important}
  body.storefront .brand-grid{grid-template-columns:repeat(5,minmax(0,1fr)) !important}
}


/* =========================================================
   v1.0.590 — Tablet header + Safari product-image compatibility
   - iPad/tablet header keeps the phone action inside the viewport.
   - Phone text is hidden on tablet; the tap target remains as an icon.
   - Product URL compatibility is handled server-side in bootstrap.php.
   ========================================================= */
@media (min-width:701px) and (max-width:1180px){
  body.storefront .mainhead-inner{
    grid-template-columns:minmax(165px,205px) minmax(0,1fr) 46px !important;
    gap:10px !important;
  }
  body.storefront .header-contact{
    width:46px !important;
    min-width:46px !important;
    max-width:46px !important;
    height:42px !important;
    padding:0 !important;
    justify-self:end !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    white-space:nowrap !important;
  }
  body.storefront .header-contact b{
    display:none !important;
  }
  body.storefront .header-phone-icon{
    margin:0 !important;
    font-size:20px !important;
    line-height:1 !important;
    flex:0 0 auto !important;
  }
  body.storefront .store-search{
    min-width:0 !important;
    width:100% !important;
  }
  body.storefront .store-search input{
    min-width:0 !important;
  }
}

/* =========================================================
   v1.0.591 — Tablet home repair section: purpose-built two-column layout
   - Left column: heading/copy + four service cards.
   - Right column: bumper artwork on top + actions at the bottom.
   - Keeps desktop >=1181px and mobile <=700px unchanged.
   ========================================================= */
@media (min-width:701px) and (max-width:1180px){
  body.storefront .home-services-panel{
    grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr) !important;
    grid-template-rows:auto auto auto 1fr auto !important;
    column-gap:26px !important;
    row-gap:10px !important;
    align-items:start !important;
    padding:26px !important;
  }

  /* Flatten only the copy wrapper so its action row can live in the right column. */
  body.storefront .home-services-copy{
    display:contents !important;
  }
  body.storefront .home-services-copy .service-eyebrow{
    grid-column:1 !important;
    grid-row:1 !important;
    margin:0 0 1px !important;
    align-self:end !important;
  }
  body.storefront .home-services-copy h2{
    grid-column:1 !important;
    grid-row:2 !important;
    margin:0 !important;
    font-size:28px !important;
    line-height:1.18 !important;
  }
  body.storefront .home-services-copy>p{
    grid-column:1 !important;
    grid-row:3 !important;
    max-width:none !important;
    margin:4px 0 8px !important;
    font-size:14px !important;
    line-height:1.68 !important;
  }

  /* Services stay together on the left and use equal-height cards. */
  body.storefront .home-services-grid{
    grid-column:1 !important;
    grid-row:4 / span 2 !important;
    align-self:stretch !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-rows:1fr !important;
    gap:10px !important;
    margin-top:2px !important;
  }
  body.storefront .home-service-card{
    min-height:100px !important;
    height:100% !important;
    grid-template-columns:48px minmax(0,1fr) !important;
    gap:10px !important;
    padding:13px !important;
  }

  /* Bumper becomes the visual anchor at the top-right. */
  body.storefront .home-services-visual{
    grid-column:2 !important;
    grid-row:1 / span 4 !important;
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    height:250px !important;
    padding-top:0 !important;
    margin:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
  }
  body.storefront .home-services-visual .home-services-bumper-art,
  body.storefront .home-services-visual img{
    width:min(100%,430px) !important;
    max-width:100% !important;
    height:auto !important;
    object-fit:contain !important;
    transform:none !important;
  }

  /* Actions finish the right column: primary CTA first, phone clearly secondary. */
  body.storefront .home-services-actions{
    grid-column:2 !important;
    grid-row:5 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    align-self:end !important;
    margin-top:2px !important;
  }
  body.storefront .home-services-actions .service-btn{
    width:100% !important;
  }
  body.storefront .home-services-actions .service-btn-primary{
    min-height:46px !important;
    font-size:14px !important;
  }
  body.storefront .home-services-actions .service-btn-secondary{
    min-height:38px !important;
    font-size:13px !important;
  }
}

/* Keep the same tablet composition in iPad portrait; only tighten proportions. */
@media (min-width:701px) and (max-width:900px){
  body.storefront .home-services-panel{
    grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr) !important;
    column-gap:18px !important;
    row-gap:8px !important;
    padding:20px !important;
  }
  body.storefront .home-services-copy h2{
    font-size:24px !important;
  }
  body.storefront .home-services-copy>p{
    font-size:13px !important;
    line-height:1.62 !important;
  }
  body.storefront .home-services-grid{
    gap:8px !important;
  }
  body.storefront .home-service-card{
    min-height:92px !important;
    grid-template-columns:42px minmax(0,1fr) !important;
    gap:8px !important;
    padding:11px !important;
  }
  body.storefront .home-service-icon{
    width:42px !important;
    height:42px !important;
  }
  body.storefront .home-service-icon svg{
    width:24px !important;
    height:24px !important;
  }
  body.storefront .home-service-card b{
    font-size:13px !important;
  }
  body.storefront .home-service-card small{
    font-size:11px !important;
    line-height:1.38 !important;
  }
  body.storefront .home-services-visual{
    max-width:none !important;
    height:215px !important;
    margin:0 !important;
  }
  body.storefront .home-services-visual .home-services-bumper-art,
  body.storefront .home-services-visual img{
    width:min(100%,355px) !important;
  }
}

/* =========================================================
   v1.0.592 — Tablet services inner-page layout polish
   - Rebalances intro copy, service cards, trust band and contact CTA on iPad.
   - Tablet only; desktop >1180px and mobile <=700px remain unchanged.
   ========================================================= */
@media (min-width:701px) and (max-width:1180px){
  body.storefront .service-intro-section{padding:36px 0 !important}
  body.storefront .service-intro-grid{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) !important;
    gap:30px !important;
    align-items:start !important;
  }
  body.storefront .service-intro-heading h2{
    font-size:30px !important;
    line-height:1.2 !important;
  }
  body.storefront .service-intro-copy{
    padding-left:20px !important;
  }
  body.storefront .service-intro-copy p{
    font-size:15px !important;
    line-height:1.78 !important;
  }

  body.storefront .service-list-section{padding:36px 0 40px !important}
  body.storefront .service-section-heading{margin-bottom:20px !important}
  body.storefront .service-section-heading h2{font-size:29px !important}
  body.storefront .service-page-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px !important;
  }
  body.storefront .service-page-card{
    min-height:220px !important;
    padding:21px 19px !important;
  }
  body.storefront .service-page-card h3{font-size:18px !important}
  body.storefront .service-page-card p{font-size:13px !important;line-height:1.62 !important}

  body.storefront .service-trust-section{padding-bottom:38px !important}
  body.storefront .service-trust-card{
    min-height:118px !important;
    padding:20px 14px !important;
  }
  body.storefront .service-trust-card strong{
    font-size:26px !important;
    line-height:1.08 !important;
  }
  body.storefront .service-trust-card span{
    font-size:12px !important;
    margin-top:7px !important;
  }

  body.storefront .service-contact-section{padding:34px 0 !important}
  body.storefront .service-contact-box{
    grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr) !important;
    gap:22px !important;
    padding:26px 28px !important;
    align-items:center !important;
  }
  body.storefront .service-contact-box h2{
    font-size:25px !important;
    line-height:1.32 !important;
  }
  body.storefront .service-contact-box p{
    font-size:13px !important;
    line-height:1.65 !important;
  }
  body.storefront .service-contact-actions{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    min-width:0 !important;
  }
  body.storefront .service-contact-actions .service-btn{
    width:100% !important;
    min-width:0 !important;
    padding-inline:10px !important;
    font-size:13px !important;
  }
  body.storefront .service-contact-actions .service-btn-map{
    grid-column:1/-1 !important;
  }
}

@media (min-width:701px) and (max-width:900px){
  body.storefront .service-intro-grid{
    grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr) !important;
    gap:22px !important;
  }
  body.storefront .service-intro-heading h2{font-size:27px !important}
  body.storefront .service-intro-copy{padding-left:16px !important}
  body.storefront .service-intro-copy p{font-size:14px !important;line-height:1.72 !important}

  body.storefront .service-page-card{
    min-height:205px !important;
    padding:18px 16px !important;
  }
  body.storefront .service-page-card h3{font-size:17px !important}
  body.storefront .service-page-card p{font-size:12.5px !important}

  body.storefront .service-trust-card{
    min-height:108px !important;
    padding:18px 10px !important;
  }
  body.storefront .service-trust-card strong{font-size:23px !important}

  body.storefront .service-contact-box{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:18px !important;
    padding:22px 20px !important;
  }
  body.storefront .service-contact-box h2{font-size:23px !important}
  body.storefront .service-contact-actions .service-btn{font-size:12px !important;min-height:42px !important}
}

/* =========================================================
   v1.0.593 — Tablet main-nav parity + compact hero benefit labels
   TABLET ONLY: 701–1180px. Desktop and mobile are unchanged.
   - Every primary navigation item uses the same height, box treatment,
     alignment and proportional width across the full row.
   - Hero benefit copy is constrained to exactly two text lines:
     one title line + one supporting line.
   ========================================================= */
@media (min-width:701px) and (max-width:1180px){
  /* Primary navigation: one visually consistent row on iPad/tablet. */
  body.storefront .store-nav{
    padding:5px 0 !important;
  }
  body.storefront .store-nav .nav-inner{
    display:grid !important;
    grid-template-columns:repeat(8,minmax(0,1fr)) !important;
    gap:6px !important;
    align-items:stretch !important;
    min-width:0 !important;
  }
  body.storefront .store-nav .nav-inner > a,
  body.storefront .store-nav .nav-inner > .nav-cats,
  body.storefront .store-nav .nav-inner > .nav-brands{
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }
  body.storefront .store-nav .nav-inner > a,
  body.storefront .store-nav .nav-inner > .nav-cats > summary,
  body.storefront .store-nav .nav-inner > .nav-brands > summary{
    width:100% !important;
    height:44px !important;
    min-height:44px !important;
    padding:0 7px !important;
    border:1px solid rgba(255,255,255,.12) !important;
    border-radius:8px !important;
    background:rgba(255,255,255,.035) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:4px !important;
    box-sizing:border-box !important;
    color:#fff !important;
    font-size:11px !important;
    font-weight:700 !important;
    line-height:1 !important;
    white-space:nowrap !important;
    text-align:center !important;
    text-decoration:none !important;
  }
  body.storefront .store-nav .nav-inner > a:hover,
  body.storefront .store-nav .nav-inner > .nav-cats:hover > summary,
  body.storefront .store-nav .nav-inner > .nav-cats:focus-within > summary,
  body.storefront .store-nav .nav-inner > .nav-brands:hover > summary,
  body.storefront .store-nav .nav-inner > .nav-brands:focus-within > summary{
    background:rgba(255,255,255,.09) !important;
    border-color:rgba(255,255,255,.18) !important;
  }
  body.storefront .store-nav .nav-inner > a.active,
  body.storefront .store-nav .nav-inner > .nav-cats.active > summary{
    background:#f51f2b !important;
    border-color:#f51f2b !important;
    color:#fff !important;
  }
  body.storefront .store-nav .nav-inner > a.active::after{
    display:none !important;
  }
  body.storefront .store-nav .nav-cats > summary .nav-chevron,
  body.storefront .store-nav .nav-brands > summary .nav-chevron{
    width:11px !important;
    height:11px !important;
    margin-left:2px !important;
    flex:0 0 auto !important;
  }

  /* Hero benefits: exactly two lines total per item on tablet. */
  body.storefront .hero-points{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:0 !important;
    width:100% !important;
    align-items:start !important;
  }
  body.storefront .hero-points > .hero-point{
    min-width:0 !important;
    padding:0 9px !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:6px !important;
    text-align:center !important;
  }
  body.storefront .hero-points > .hero-point + .hero-point{
    border-left:1px solid rgba(255,255,255,.18) !important;
  }
  body.storefront .hero-points .hero-service-icon{
    flex:0 0 auto !important;
  }
  body.storefront .hero-points .hero-point > div{
    width:100% !important;
    min-width:0 !important;
    display:block !important;
  }
  body.storefront .hero-points b,
  body.storefront .hero-points small{
    display:block !important;
    width:100% !important;
    overflow:hidden !important;
    text-overflow:clip !important;
    white-space:nowrap !important;
  }
  body.storefront .hero-points b{
    font-size:11px !important;
    line-height:1.15 !important;
    font-weight:800 !important;
  }
  body.storefront .hero-points small{
    margin-top:2px !important;
    font-size:9px !important;
    line-height:1.15 !important;
  }
}

@media (min-width:701px) and (max-width:900px){
  body.storefront .store-nav .nav-inner{
    gap:4px !important;
  }
  body.storefront .store-nav .nav-inner > a,
  body.storefront .store-nav .nav-inner > .nav-cats > summary,
  body.storefront .store-nav .nav-inner > .nav-brands > summary{
    padding-inline:4px !important;
    font-size:10px !important;
  }
  body.storefront .hero-points > .hero-point{
    padding-inline:5px !important;
  }
  body.storefront .hero-points b{font-size:10px !important}
  body.storefront .hero-points small{font-size:8.5px !important}
}

/* =========================================================
   v1.0.594 — Tablet hero title: keep the used-parts phrase on one line
   TABLET ONLY: 701–1180px. Desktop and mobile are unchanged.
   ========================================================= */
@media (min-width:701px) and (max-width:1180px){
  body.storefront .hero-copy h1 .hero-title-main{
    display:block !important;
    color:#fff !important;
    white-space:nowrap !important;
    font-size:.82em !important;
    line-height:1.08 !important;
  }
  body.storefront .hero-copy h1 em{
    display:block !important;
  }
}

/* =========================================================
   v1.0.595 — Tablet hero full-height image fill
   TABLET ONLY: 701–1180px. Desktop and mobile are unchanged.
   - Make hero-pc.jpg fill the entire tablet hero frame vertically.
   - Remove the black bands above/below the photo caused by desktop framing.
   ========================================================= */
@media (min-width:701px) and (max-width:1180px){
  body.storefront .home-hero,
  body.storefront .hero-content{
    height:410px !important;
    min-height:410px !important;
  }
  body.storefront .hero-picture{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    overflow:hidden !important;
  }
  body.storefront .hero-picture img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    object-fit:cover !important;
    object-position:center center !important;
    transform:none !important;
  }
}


/* v1.0.602 — Active catalog filters restored to Teera red; normal weight on every device. */
body.storefront .catalog-filters select.is-active-filter{
  color:#e31b23 !important;
  font-weight:400 !important;
}
body.storefront .catalog-filters select.is-active-filter option{
  color:#111923;
  font-weight:400;
}
body.storefront .catalog-filters select.is-active-filter option:checked{
  color:#e31b23;
  font-weight:400;
}


/* v1.0.602 — Active catalog query uses Teera red; select arrows remain black. */
body.storefront .catalog-filters input.is-active-filter{
  color:#e31b23 !important;
  font-weight:400 !important;
}
body.storefront .catalog-filters input.is-active-filter::placeholder{
  color:#7a8491;
}
body.storefront .catalog-filters select{
  -webkit-appearance:none;
  appearance:none;
  padding-right:34px !important;
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5' fill='none' stroke='%23111923' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 11px center;
  background-size:12px 8px;
}
body.storefront .catalog-filters select.is-active-filter{
  color:#e31b23 !important;
  font-weight:400 !important;
}

/* =========================================================
   v1.0.603 — iOS/iPadOS catalog select color parity
   - Default select values stay black on Safari/Chrome iOS.
   - Active filter values stay Teera red, normal weight.
   - Custom dropdown arrow remains black.
   ========================================================= */
body.storefront .catalog-filters select{
  color:#111923 !important;
  -webkit-text-fill-color:#111923 !important;
  font-weight:400 !important;
  opacity:1 !important;
}
body.storefront .catalog-filters select.is-active-filter{
  color:#e31b23 !important;
  -webkit-text-fill-color:#e31b23 !important;
  font-weight:400 !important;
  opacity:1 !important;
}
body.storefront .catalog-filters select option{
  color:#111923 !important;
  -webkit-text-fill-color:#111923 !important;
  font-weight:400 !important;
}
body.storefront .catalog-filters select.is-active-filter option:checked{
  color:#e31b23 !important;
  -webkit-text-fill-color:#e31b23 !important;
  font-weight:400 !important;
}
\n\n/* =========================================================\n   v1.0.608 — Catalog main-category context\n   - A Home-page group (e.g. ช่วงล่าง) is a main category, not a subcategory.\n   - Show it as a removable context chip above the filters instead of\n     pretending it is selected in the subcategory dropdown.\n   ========================================================= */\n.storefront .catalog-main-group-context{\n    grid-column:1/-1;\n    display:flex;\n    align-items:center;\n    gap:8px;\n    min-height:30px;\n    margin:0 0 2px;\n}\n.storefront .catalog-main-group-label{\n    color:#384453;\n    font-size:13px;\n    font-weight:700;\n}\n.storefront .catalog-main-group-chip{\n    display:inline-flex;\n    align-items:center;\n    gap:7px;\n    min-height:30px;\n    padding:3px 5px 3px 10px;\n    border:1px solid #f1b6b2;\n    border-radius:999px;\n    background:#fff1f1;\n    color:#d62828;\n    line-height:1;\n}\n.storefront .catalog-main-group-chip strong{\n    font-size:13px;\n    font-weight:700;\n    color:#d62828;\n}\n.storefront .catalog-main-group-remove{\n    width:22px;\n    height:22px;\n    border-radius:50%;\n    display:inline-flex;\n    align-items:center;\n    justify-content:center;\n    color:#d62828;\n    background:#fff;\n    border:1px solid #efc2bf;\n    text-decoration:none;\n    font:700 16px/1 Arial,sans-serif;\n}\n.storefront .catalog-main-group-remove:hover{\n    background:#ffe1df;\n    border-color:#e8aaa5;\n}\n@media(max-width:700px){\n    .storefront .catalog-main-group-context{\n        margin:0 0 1px;\n        gap:6px;\n    }\n    .storefront .catalog-main-group-label,\n    .storefront .catalog-main-group-chip strong{\n        font-size:12px;\n    }\n    .storefront .catalog-main-group-chip{\n        min-height:28px;\n        padding-left:9px;\n    }\n    .storefront .catalog-main-group-remove{\n        width:20px;\n        height:20px;\n        font-size:15px;\n    }\n}\n

/* =========================================================
   v1.0.609 — Main category context chip polish
   - Make the Home main-category context explicit: "หมวดหลัก ช่วงล่าง".
   - Keep main category visually separate from the subcategory dropdown.
   - Compact, readable on desktop/tablet/mobile.
   ========================================================= */
.storefront .catalog-main-group-context{
    grid-column:1/-1;
    display:flex;
    align-items:center;
    min-height:32px;
    margin:0 0 3px;
}
.storefront .catalog-main-group-chip{
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:max-content;
    max-width:100%;
    min-height:32px;
    padding:4px 5px 4px 10px;
    border:1px solid #f1b6b2;
    border-radius:999px;
    background:#fff1f1;
    line-height:1;
    box-shadow:0 1px 0 rgba(214,40,40,.03);
}
.storefront .catalog-main-group-label{
    color:#495463;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}
.storefront .catalog-main-group-chip strong{
    color:#d62828;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
}
.storefront .catalog-main-group-remove{
    width:22px;
    height:22px;
    flex:0 0 22px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#d62828;
    background:#fff;
    border:1px solid #efc2bf;
    text-decoration:none;
    font:700 16px/1 Arial,sans-serif;
}
.storefront .catalog-main-group-remove:hover{
    background:#ffe1df;
    border-color:#e8aaa5;
}
@media(max-width:700px){
    .storefront .catalog-main-group-context{
        min-height:29px;
        margin:0 0 2px;
    }
    .storefront .catalog-main-group-chip{
        min-height:29px;
        gap:6px;
        padding:3px 4px 3px 8px;
    }
    .storefront .catalog-main-group-label,
    .storefront .catalog-main-group-chip strong{
        font-size:12px;
    }
    .storefront .catalog-main-group-remove{
        width:20px;
        height:20px;
        flex-basis:20px;
        font-size:15px;
    }
}

/* =========================================================
   v1.0.610 — Desktop catalog main-group layout
   - Keep the main-category context on its own clean row on desktop.
   - Preserve tablet/mobile layout from v1.0.609.
   - Keep the normal filter controls aligned exactly as before.
   ========================================================= */
@media (min-width:1181px){
  .storefront .catalog-filters{
    grid-template-columns:minmax(320px,2fr) minmax(160px,1fr) minmax(160px,1fr) minmax(160px,1fr) auto minmax(120px,150px) !important;
    grid-template-areas:
      "mainctx mainctx mainctx mainctx mainctx mainctx"
      "query brand category status reset submit" !important;
    align-items:end !important;
  }
  .storefront .catalog-main-group-context{
    grid-area:mainctx !important;
    width:100% !important;
    min-height:34px !important;
    margin:0 0 3px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
  }
  .storefront .catalog-main-group-chip{
    min-height:32px !important;
    padding:4px 6px 4px 11px !important;
    gap:8px !important;
  }
  .storefront .catalog-filters .catalog-query{grid-area:query !important;}
  .storefront .catalog-filters > label:nth-of-type(2){grid-area:brand !important;}
  .storefront .catalog-filters > label:nth-of-type(3){grid-area:category !important;}
  .storefront .catalog-filters > label:nth-of-type(4){grid-area:status !important;}
  .storefront .catalog-filters .catalog-filter-reset{grid-area:reset !important;}
  .storefront .catalog-filters .store-btn.primary{
    grid-area:submit !important;
    width:100% !important;
    min-width:120px !important;
    white-space:nowrap !important;
  }
}

/* =========================================================
   v1.0.611 — Desktop catalog primary action at row end
   - Search is the primary action and sits at the far right of the filter row.
   - Reset stays immediately before Search as the secondary action.
   - Tablet/mobile layout remains unchanged.
   ========================================================= */

/* =========================================================
   v1.0.612 — Catalog reset as quiet top-right action
   - Main-category context stays top-left.
   - Clear filters becomes icon + text at top-right, not a button.
   - Same hierarchy on desktop, tablet and mobile.
   ========================================================= */
.storefront .catalog-filter-topbar{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-width:0;
  min-height:30px;
  margin:0 0 2px;
}
.storefront .catalog-filter-topbar .catalog-main-group-context{
  width:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  flex:0 1 auto;
}
.storefront .catalog-filter-topbar-spacer{flex:1 1 auto;min-width:0;}
.storefront .catalog-filter-topbar .catalog-filter-reset{
  height:auto !important;
  min-height:0 !important;
  padding:2px 0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:#66707c !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:5px !important;
  font-size:13px !important;
  font-weight:600 !important;
  line-height:1.25 !important;
  white-space:nowrap !important;
  box-shadow:none !important;
  text-decoration:none !important;
  transition:color .15s ease !important;
}
.storefront .catalog-filter-topbar .catalog-filter-reset:hover,
.storefront .catalog-filter-topbar .catalog-filter-reset:focus-visible{
  color:#d62828 !important;
  background:transparent !important;
  border:0 !important;
}
.storefront .catalog-filter-topbar .catalog-filter-reset-icon{
  font-size:17px !important;
  line-height:1 !important;
  color:currentColor !important;
}

@media (min-width:1181px){
  .storefront .catalog-filters{
    grid-template-columns:minmax(320px,2fr) minmax(160px,1fr) minmax(160px,1fr) minmax(160px,1fr) minmax(120px,150px) !important;
    grid-template-areas:
      "topbar topbar topbar topbar topbar"
      "query brand category status submit" !important;
  }
  .storefront .catalog-filter-topbar{grid-area:topbar !important;}
  .storefront .catalog-filters .catalog-query{grid-area:query !important;}
  .storefront .catalog-filters > label:nth-of-type(2){grid-area:brand !important;}
  .storefront .catalog-filters > label:nth-of-type(3){grid-area:category !important;}
  .storefront .catalog-filters > label:nth-of-type(4){grid-area:status !important;}
  .storefront .catalog-filters .store-btn.primary{
    grid-area:submit !important;
    width:100% !important;
    min-width:120px !important;
    white-space:nowrap !important;
  }
}

@media (max-width:700px){
  .storefront .catalog-filter-topbar{
    gap:8px;
    min-height:26px;
    margin-bottom:0;
  }
  .storefront .catalog-filter-topbar .catalog-filter-reset{
    font-size:11px !important;
    padding:1px 0 !important;
  }
  .storefront .catalog-filter-topbar .catalog-filter-reset-icon{
    font-size:15px !important;
  }
}

/* =========================================================
   v1.0.613 — Catalog filter/result typography parity
   - Match catalog filter text and result-summary text to product-card title size.
   - Desktop/tablet: 14px, mobile: 16px (same as product titles).
   ========================================================= */
body.storefront .catalog-filters,
body.storefront .catalog-filters label,
body.storefront .catalog-filters label > span,
body.storefront .catalog-filters input,
body.storefront .catalog-filters select,
body.storefront .catalog-filters .store-btn,
body.storefront .catalog-filter-topbar .catalog-filter-reset,
body.storefront .catalog-main-group-label,
body.storefront .catalog-main-group-chip strong,
body.storefront .catalog-meta-desktop,
body.storefront .catalog-meta-desktop b,
body.storefront .catalog-meta-desktop .catalog-meta-category,
body.storefront .catalog-per-page-form label,
body.storefront .catalog-per-page-form select{
    font-size:14px !important;
}

@media (max-width:700px){
    body.storefront .catalog-filters,
    body.storefront .catalog-filters label,
    body.storefront .catalog-filters label > span,
    body.storefront .catalog-filters input,
    body.storefront .catalog-filters select,
    body.storefront .catalog-filters .store-btn,
    body.storefront .catalog-filter-topbar .catalog-filter-reset,
    body.storefront .catalog-main-group-label,
    body.storefront .catalog-main-group-chip strong,
    body.storefront .catalog-meta-mobile,
    body.storefront .catalog-meta-mobile-count,
    body.storefront .catalog-meta-mobile-count strong,
    body.storefront .catalog-meta-mobile-context,
    body.storefront .catalog-meta-mobile-context-label,
    body.storefront .catalog-meta-mobile-context .catalog-meta-category,
    body.storefront .catalog-per-page-form-mobile label,
    body.storefront .catalog-per-page-form-mobile select{
        font-size:16px !important;
    }
    body.storefront .catalog-filter-topbar .catalog-filter-reset-icon{
        font-size:18px !important;
    }
}

/* =========================================================
   v1.0.614 — Mobile catalog overflow polish
   - Keep primary filter values large/readable.
   - Allow long main-group chips to wrap instead of pushing reset off-screen.
   - Keep reset / display helper copy secondary and compact.
   - Give per-page select enough width for 50 / 100 / 200.
   ========================================================= */
@media (max-width:700px){
  body.storefront .catalog-filter-topbar{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:start !important;
    column-gap:8px !important;
    row-gap:4px !important;
    width:100% !important;
  }
  body.storefront .catalog-filter-topbar .catalog-main-group-context{
    min-width:0 !important;
    max-width:100% !important;
    overflow:visible !important;
  }
  body.storefront .catalog-main-group-chip{
    max-width:100% !important;
    min-width:0 !important;
    height:auto !important;
    min-height:28px !important;
    white-space:normal !important;
    flex-wrap:wrap !important;
    row-gap:3px !important;
    line-height:1.25 !important;
    padding:5px 6px 5px 9px !important;
    box-sizing:border-box !important;
  }
  body.storefront .catalog-main-group-label,
  body.storefront .catalog-main-group-chip strong{
    font-size:14px !important;
    line-height:1.25 !important;
  }
  body.storefront .catalog-main-group-chip strong{
    min-width:0 !important;
    overflow-wrap:anywhere !important;
  }
  body.storefront .catalog-main-group-remove{
    flex:0 0 20px !important;
    width:20px !important;
    height:20px !important;
    margin-left:1px !important;
  }
  body.storefront .catalog-filter-topbar-spacer{
    min-width:0 !important;
  }
  body.storefront .catalog-filter-topbar .catalog-filter-reset{
    align-self:start !important;
    justify-self:end !important;
    max-width:96px !important;
    font-size:12px !important;
    line-height:1.15 !important;
    gap:4px !important;
    padding:5px 0 !important;
    white-space:nowrap !important;
  }
  body.storefront .catalog-filter-topbar .catalog-filter-reset-icon{
    font-size:15px !important;
  }

  body.storefront .catalog-meta-mobile-top{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:10px !important;
    min-width:0 !important;
  }
  body.storefront .catalog-meta-mobile-count{
    flex:1 1 auto !important;
    min-width:0 !important;
    display:flex !important;
    align-items:baseline !important;
    gap:4px !important;
    white-space:nowrap !important;
  }
  body.storefront .catalog-meta-mobile-count,
  body.storefront .catalog-meta-mobile-count strong{
    font-size:14px !important;
  }
  body.storefront .catalog-per-page-form-mobile{
    flex:0 0 auto !important;
    min-width:0 !important;
  }
  body.storefront .catalog-per-page-form-mobile label{
    display:flex !important;
    align-items:center !important;
    gap:5px !important;
    white-space:nowrap !important;
    font-size:13px !important;
  }
  body.storefront .catalog-per-page-form-mobile label > span{
    font-size:13px !important;
  }
  body.storefront .catalog-per-page-form-mobile select{
    width:68px !important;
    min-width:68px !important;
    max-width:68px !important;
    font-size:15px !important;
    padding-left:8px !important;
    padding-right:24px !important;
    box-sizing:border-box !important;
  }
  body.storefront .catalog-meta-mobile-context,
  body.storefront .catalog-meta-mobile-context-label{
    font-size:13px !important;
  }
  body.storefront .catalog-meta-mobile-context .catalog-meta-category{
    font-size:14px !important;
  }
}

/* =========================================================
   v1.0.615 — Mobile per-page select width
   - Give 3-digit values such as 200 enough room.
   - Mobile only; desktop/tablet unchanged.
   ========================================================= */
@media (max-width:700px){
  body.storefront .catalog-per-page-form-mobile select{
    width:76px !important;
    min-width:76px !important;
    max-width:76px !important;
    padding-left:10px !important;
    padding-right:26px !important;
  }
}

/* =========================================================
   v1.0.616 — Mobile per-page select wider
   - Extra width for 200 so all 3 digits remain clearly visible.
   - Mobile only; desktop/tablet unchanged.
   ========================================================= */
@media (max-width:700px){
  body.storefront .catalog-per-page-form-mobile select{
    width:88px !important;
    min-width:88px !important;
    max-width:88px !important;
    padding-left:12px !important;
    padding-right:28px !important;
  }
}

/* =========================================================
   v1.0.617 — Mobile per-page arrow aligned to far right
   - Replace iOS native centered spinner arrows with a compact
     custom up/down indicator anchored at the right edge.
   - Keep 200 fully visible; mobile only.
   ========================================================= */
@media (max-width:700px){
  body.storefront .catalog-per-page-form-mobile select{
    -webkit-appearance:none !important;
    appearance:none !important;
    width:88px !important;
    min-width:88px !important;
    max-width:88px !important;
    padding-left:12px !important;
    padding-right:24px !important;
    background-color:#fff !important;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath d='M2 5 5 2l3 3' fill='none' stroke='%23111923' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 9 5 12l3-3' fill='none' stroke='%23111923' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat:no-repeat !important;
    background-position:right 8px center !important;
    background-size:10px 14px !important;
  }
}

/* =========================================================
   v1.0.618 — Mobile main-category chip compact label
   - Hide only the "หมวดหลัก" prefix on mobile so long category
     names have more room on iPhone.
   - Desktop/tablet remain unchanged.
   ========================================================= */
@media (max-width:700px){
  body.storefront .catalog-main-group-chip .catalog-main-group-label{
    display:none !important;
  }
}

/* =========================================================
   v1.0.620 — Catalog per-page normal weight
   - Keep 50 / 100 / 200 at normal font weight on all devices.
   ========================================================= */
body.storefront .catalog-per-page-form select,
body.storefront .catalog-per-page-form-mobile select{
  font-weight:400 !important;
}

/* =========================================================
   v1.0.621 — Catalog featured context chip
   - Featured is a filter context, not a sale status.
   - It shares the top filter context row with main-category chips.
   ========================================================= */
.storefront .catalog-context-chips{
  flex-wrap:wrap;
}
.storefront .catalog-featured-chip{
  white-space:nowrap;
}

/* =========================================================
   v1.0.622 — Storefront Featured as a first-class dropdown filter
   - Featured is selectable directly from the catalog on every device.
   - Options: all / featured only / exclude featured.
   - Main-category remains a separate context chip because it has no dropdown.
   - Mobile uses the existing open slot beside Status.
   ========================================================= */
@media (min-width:1181px){
  body.storefront .catalog-filters{
    grid-template-columns:minmax(280px,1.8fr) minmax(145px,1fr) minmax(145px,1fr) minmax(145px,1fr) minmax(165px,1.1fr) minmax(120px,150px) !important;
    grid-template-areas:
      "topbar topbar topbar topbar topbar topbar"
      "query brand category status featured submit" !important;
  }
  body.storefront .catalog-filters .catalog-query{grid-area:query !important;}
  body.storefront .catalog-filters > label:nth-of-type(2){grid-area:brand !important;}
  body.storefront .catalog-filters > label:nth-of-type(3){grid-area:category !important;}
  body.storefront .catalog-filters > label:nth-of-type(4){grid-area:status !important;}
  body.storefront .catalog-filters > label:nth-of-type(5){grid-area:featured !important;}
  body.storefront .catalog-filters .store-btn.primary{grid-area:submit !important;}
}

@media (min-width:701px) and (max-width:1180px){
  body.storefront .catalog-filters{
    grid-template-columns:2fr 1fr 1fr !important;
  }
  body.storefront .catalog-filter-topbar{grid-column:1/-1 !important;}
  body.storefront .catalog-filters .catalog-query{grid-column:auto !important;}
  body.storefront .catalog-filters .store-btn.primary{grid-column:auto !important;}
}

@media (max-width:700px){
  body.storefront .catalog-filters > label:nth-of-type(4),
  body.storefront .catalog-filters > label:nth-of-type(5){
    grid-column:auto !important;
  }
  body.storefront .catalog-featured-filter select{
    min-width:0 !important;
  }
}