/* ==========================================================================
   typography.css — one consistent, fully-responsive type system (frontend).
   Loaded AFTER app.css so it is the single source of truth for text sizing.
   Uses fluid clamp() sizes: text scales smoothly mobile → desktop, no jumps.
   Replaces the 20+ scattered px/em/rem font-sizes that were in app.scss.
   (Folds into the SCSS during the Vite migration.)
   ========================================================================== */
:root {
    /* fluid scale: clamp(MIN at ~360px, preferred vw-based, MAX at ~1440px) */
    /* scale จูนสำหรับ Noto Sans Thai (กว้าง/x-height สูงกว่า DB Heavent เดิม
       จึงลดลง ~8-12% ทุกขั้น; line-height เพิ่มเผื่อสระบน-ล่างภาษาไทย) */
    /* ความหนาแน่นแบบ zoom 80% (mm 2026-07-18): หัวข้อ/เมนู -20%, เนื้อความ -10%
       (เนื้อความไม่ลดเต็มเพื่อไม่ให้เล็กเกินอ่านบนมือถือ) */
    --fs-tiny:   clamp(10px, 9.5px + 0.15vw, 10.5px);
    --fs-small:  clamp(11px, 10.5px + 0.2vw, 12px);
    --fs-body:   clamp(13px, 12.5px + 0.25vw, 14px);
    --fs-lead:   clamp(13px, 12.5px + 0.3vw, 14.5px);   /* subheadings, intros */
    --fs-h6:     clamp(12px, 11.5px + 0.25vw, 13px);
    --fs-h5:     clamp(12.5px, 12px + 0.3vw, 13.5px);
    --fs-h4:     clamp(13px, 12.5px + 0.45vw, 15px);
    --fs-h3:     clamp(14px, 13px + 0.7vw, 16px);
    --fs-h2:     clamp(17px, 13px + 1.7vw, 24px);   /* section headings */
    --fs-h1:     clamp(18px, 14px + 2.2vw, 28px);   /* page titles */
    --fs-hero:   clamp(19px, 14px + 3vw, 32px);     /* slideshow hero */

    --lh-body: 1.65;
    --lh-heading: 1.2;
    --ls-heading: 0.02em;
}

/* ---- base ---------------------------------------------------------------- */
html body {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}
p, li, dd, dt, td, th, label, blockquote, address, figcaption {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}
p { margin-bottom: 1em; }
ul, ol { padding-left: 1.25em; }
li { margin-bottom: .3em; }
small, .text-small { font-size: var(--fs-small); }

/* ---- semantic heading hierarchy (consistent, ordered) ------------------- */
h1, h2, h3, h4, h5, h6 { line-height: var(--lh-heading); margin-top: 0; margin-bottom: .5em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

/* ---- site components mapped onto the same scale ------------------------- */
/* page + section titles */
.page-title            { font-size: var(--fs-h1); line-height: var(--lh-heading); }
.panel-heading         { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.panel-heading.inline  { font-size: var(--fs-h2); }
.panel-subheading      { font-size: var(--fs-lead); }

/* home sections */
.home-brand-title      { font-size: var(--fs-h3); }
.home-blog-title       { font-size: var(--fs-h4); }
.home-blog-date        { font-size: var(--fs-small); }
.homesection-item-button-wrapper,
.homesection-item-button { font-size: var(--fs-lead); }

/* product cards / grids / prices — all equal */
.home-product-item,
.home-product-panel-price,
.home-product-pabel-color-label,
.shop-product,
.product-grid-name,
.product-grid-price,
.mega-product-grid     { font-size: var(--fs-body) !important; }

/* shop sidebar / filters / sorting */
.shop-sidebar          { font-size: var(--fs-h4); }
.sidebar-category      { font-size: var(--fs-body); }
.sidebar-widget-toggler{ font-size: var(--fs-small); }
.btn-filter,
.price-selector,
#sort_select,
.shop-products-commands{ font-size: var(--fs-body); }
.color-select-row,
.size-selector         { font-size: var(--fs-body); }

/* header / nav / topbar */
#header a,
#topbar,
#mobile-menu           { font-size: var(--fs-body); }
.help-dropdown-item .help-dropdown-label { font-size: var(--fs-small); }

/* slideshow hero text */
.slideshow .slideshow-title,
.slideshow h1, .slideshow h2 { font-size: var(--fs-hero); line-height: 1.05; }
.slideshow .slideshow-subtitle,
.slideshow h3          { font-size: var(--fs-h3); }

/* buttons + forms: one consistent readable size (padding untouched) */
.btn                   { font-size: var(--fs-body); }
.btn.btn-lg            { font-size: var(--fs-h5); }
.btn.btn-sm, .btn.btn-xs { font-size: var(--fs-small); }
.form-control, input, select, textarea { font-size: var(--fs-body); }

/* footer */
#footer, .footer-absolute { font-size: var(--fs-body); }
#footer h1, #footer h2, #footer h3, #footer .footer-heading { font-size: var(--fs-h5); }

/* pagination */
ul.pagination          { font-size: var(--fs-body); }

/* rich-text / editor content (blog body, CMS pages, help, about, privacy) — uniform.
   Covers CKEditor output inside these wrappers so pasted content matches the site scale. */
.blog-body, .cms-content, .page-content, .static-content, .help-content, .blog-content,
.editor-content, .ck-content {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}
.blog-body p, .cms-content p, .page-content p, .static-content p, .blog-content p, .editor-content p,
.blog-body li, .cms-content li, .page-content li, .static-content li, .blog-content li, .editor-content li,
.blog-body span, .cms-content span, .page-content span, .blog-content span,
.blog-body td, .cms-content td, .page-content td {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}
/* headings inside editor content follow the scale (CKEditor h2/h3/…) */
.blog-body h1, .cms-content h1, .page-content h1, .editor-content h1 { font-size: var(--fs-h2); line-height: var(--lh-heading); }
.blog-body h2, .cms-content h2, .page-content h2, .editor-content h2 { font-size: var(--fs-h3); line-height: var(--lh-heading); }
.blog-body h3, .cms-content h3, .page-content h3, .editor-content h3 { font-size: var(--fs-h4); line-height: var(--lh-heading); }
.blog-body h4, .cms-content h4, .page-content h4, .editor-content h4 { font-size: var(--fs-h5); line-height: var(--lh-heading); }
.blog-body ul, .blog-body ol, .cms-content ul, .cms-content ol, .page-content ul, .page-content ol { margin-bottom: 1em; padding-left: 1.4em; }
.blog-body img, .cms-content img, .page-content img, .blog-content img { max-width: 100%; height: auto; }

/* ==========================================================================
   casing & consistency layer (2026-07-17, mm: "capital letter เอาสักอย่าง")
   กติกาเดียวทั้งเว็บ:
   - หัวข้อ (h1-h6, section headings)  = ตัวพิมพ์ใหญ่ + letter-spacing เท่ากัน
   - ปุ่มทุกปุ่ม                        = ตัวพิมพ์ใหญ่ ขนาด/น้ำหนักเดียวกัน
   - เนื้อความ, ฟอร์ม, ลิงก์ในเนื้อหา   = ตัวปกติ (ไม่บังคับพิมพ์ใหญ่)
   - เนื้อหาจาก editor (บทความ/CMS)     = ไม่แตะ casing (คงตามที่เขียน)
   ========================================================================== */

/* หัวข้อทั้งไซต์ — ยกเว้นเนื้อหา editor */
h1, h2, h3, h4, h5, h6 {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: var(--lh-heading);
    font-weight: 700;
}
.blog-body h1, .blog-body h2, .blog-body h3, .blog-body h4, .blog-body h5, .blog-body h6,
.cms-content h1, .cms-content h2, .cms-content h3, .cms-content h4,
.page-content h1, .page-content h2, .page-content h3, .page-content h4,
.editor-content h1, .editor-content h2, .editor-content h3, .editor-content h4 {
    text-transform: none;
    letter-spacing: normal;
}

/* ปุ่ม: มาตรฐานเดียว */
.btn, button[type="submit"], .button-cart, .btn-google-full {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    font-size: var(--fs-body);
}

/* ฟอร์ม: label น้ำหนัก/ขนาดเดียวกันทุกหน้า ตัวปกติ */
label {
    text-transform: uppercase;
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: 0.05em;
}

/* เมนูหลัก + dropdown + footer nav = พิมพ์ใหญ่เท่ากัน */
.navbar .nav-link, .account-dropdown-menu li a, .footer-nav a, .help-dropdown-label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ชื่อสินค้าในกริด/หน้าเดี่ยว = พิมพ์ใหญ่ ขนาดตาม scale */
.home-product-panel-name, .product-single-name {
    text-transform: uppercase;
}

/* กันของหลุด: ข้อความ topbar, badge, breadcrumb ให้ขนาดคุมโดย scale */
.clock-wrapper { font-size: var(--fs-small); }
.badges > div { font-size: var(--fs-tiny); font-weight: 700; }

/* #9 member notifications */
.notif-dot {
    display: inline-block;
    background: #ff0000;
    color: #fff;
    border-radius: 0;
    font-size: 11px;
    line-height: 1;
    padding: 3px 6px;
    margin-left: 4px;
    vertical-align: top;
}
.member-notifications .member-notification {
    border: solid thin #e8e8e6;
    border-radius: 0;
    padding: 14px 18px;
    margin-bottom: 10px;
    background: #fff;
}
.member-notifications .member-notification.is-unread {
    border-left: 4px solid #a3c517;
    background: #fbfdf4;
}
.member-notifications .member-notification-title {
    font-weight: 700;
    margin-bottom: 4px;
}
.member-notifications .member-notification-body { color: #444; }
.member-notifications .member-notification-body p:last-child { margin-bottom: 0; }

/* instant search dropdown (Meilisearch) */
.instant-search-results {
    position: absolute;
    top: 100%;
    right: 0;
    width: 360px;
    max-width: 90vw;
    background: #fff;
    border: solid thin #e5e5e3;
    box-shadow: 0 10px 30px rgba(29, 29, 27, 0.12);
    border-radius: 0;
    z-index: 1000;
    overflow: hidden;
}
.instant-search-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: #1d1d1b;
    border-bottom: solid thin #f2f2f0;
    text-transform: none;
}
.instant-search-item:hover { background: #fbfdf4; text-decoration: none; color: #1d1d1b; }
.instant-search-thumb {
    flex: 0 0 44px;
    height: 44px;
    background-size: cover;
    background-position: center;
    background-color: #f4f4f2;
    border-radius: 0;
}
.instant-search-name {
    flex: 1;
    font-size: var(--fs-small);
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.instant-search-price { font-weight: 700; font-size: var(--fs-small); white-space: nowrap; }
.instant-search-price.is-sale { color: #ff0000; }
.instant-search-all {
    display: block;
    text-align: center;
    padding: 10px;
    font-weight: 700;
    background: #f7f7f5;
    color: #1d1d1b;
    font-size: var(--fs-small);
}

/* ==========================================================================
   toast notifications (แทน alert เต็มความกว้างเดิม)
   ========================================================================== */
.seek-toasts {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(400px, calc(100vw - 36px));
}
.seek-toast {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border: solid thin #e8e8e6;
    border-left: 4px solid #a3c517;
    border-radius: 0;
    box-shadow: 0 10px 30px rgba(29, 29, 27, 0.16);
    padding: 14px 16px;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity .35s ease, transform .35s ease;
}
.seek-toast.show { opacity: 1; transform: translateX(0); }
.seek-toast-icon { font-size: 20px; margin-top: 1px; }
.seek-toast-success .seek-toast-icon { color: #7ea20e; }
.seek-toast-success { border-left-color: #a3c517; }
.seek-toast-info .seek-toast-icon { color: #3c8dbc; }
.seek-toast-info { border-left-color: #3c8dbc; }
.seek-toast-warning .seek-toast-icon { color: #e6a700; }
.seek-toast-warning { border-left-color: #e6a700; }
.seek-toast-error .seek-toast-icon { color: #dd4b39; }
.seek-toast-error { border-left-color: #dd4b39; }
.seek-toast-text {
    flex: 1;
    font-size: var(--fs-body);
    line-height: 1.45;
    color: #1d1d1b;
    text-transform: none;
}
.seek-toast-close {
    border: 0;
    background: none;
    font-size: 20px;
    line-height: 1;
    color: #9a9a98;
    cursor: pointer;
    padding: 0;
}
.seek-toast-close:hover { color: #1d1d1b; }

/* ==========================================================================
   header scale pass (mm 2026-07-18: "HELP เล็ก, MY ACCOUNT dropdown ใหญ่")
   กติกา: แถบบนสุด (HELP/TH/EN/LOGOUT/MY ACCOUNT) + เมนู dropdown ทุกตัว
   = --fs-small เท่ากันหมด · เมนูหลัก (BLOG/CALENDAR/…) = --fs-h6
   ========================================================================== */
.commands-bar,
.commands-bar a,
.command-1, .command-1 a,
.command-2, .command-2 a,
.help-dropdown-toggle,
.command-1 .langs a {
    font-size: var(--fs-small) !important;
    letter-spacing: 0.04em;
}
.account-dropdown .dropdown-menu,
.account-dropdown-menu li,
.account-dropdown-menu li a {
    font-size: var(--fs-small) !important;
}
.help-dropdown-item .help-dropdown-label,
.help-dropdown-label {
    font-size: var(--fs-small) !important;
}
.cart-dropdown-menu { font-size: var(--fs-body) !important; }
.mainnav a, .mainnav-flex a { font-size: var(--fs-h6); }

/* blog listing cards: ขนาดที่ควรเป็น (เดิมไม่ได้กำหนด เลยบวม) */
.blog-post .blog-post-title { font-size: var(--fs-h5) !important; line-height: 1.3; display: inline-block; }
.blog-post .blog-post-date { font-size: var(--fs-small) !important; }
.blog-post .blog-post-tag { font-size: var(--fs-tiny); letter-spacing: 0.08em; }

/* section headings บนหน้าสินค้า/หมวด ให้อยู่ใน scale เดียวกัน */
.product-single-related-heading,
.product-single-top h4,
.product-single-bottom h4 { font-size: var(--fs-h3) !important; }

/* ==========================================================================
   font: Noto Sans Thai (mm สรุป 2026-07-18 หลัง DB Heavent มีปัญหาการแสดงผล
   ข้ามเครื่อง) — db เป็น fallback; ไอคอน FontAwesome ไม่ถูกแตะ
   ========================================================================== */
:root {
    --font-main: 'Noto Sans Thai', 'db', -apple-system, sans-serif;
}
html body,
html body button, html body input, html body select, html body textarea,
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6,
html body p, html body a, html body li, html body span:not([class*="fa"]),
html body div:not([class*="fa"]), html body label, html body td, html body th {
    font-family: var(--font-main);
}
html body i.fa, html body i.fas, html body i.far, html body i.fab, html body [class^="fa-"], html body [class*=" fa-"] {
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Brands', FontAwesome !important;
}
/* DB Heavent (ฟอนต์แบรนด์ที่ซื้อไว้) — ขนาดฐานตาม scale เดิมที่จูนมากับฟอนต์นี้ */

/* MY ACCOUNT dropdown: กล่องสมส่วนกับตัวหนังสือ (mm 2026-07-18) */
.account-dropdown .dropdown-menu {
    width: auto !important;
    min-width: 200px;
    padding: 10px 6px !important;
}
.account-dropdown-menu {
    padding-left: 24px !important;
}
.account-dropdown-menu li {
    padding: 7px 0 !important;
}

/* product grid: ชื่อ/ราคา เข้า scale (เดิม 22px fixed จาก 2019) */
.home-product-panel-name {
    font-size: var(--fs-body) !important;
    line-height: 1.5 !important;
    min-height: 3em !important;
    max-height: 3em !important;
}
.home-product-panel-price, .home-product-panel-price .price,
.home-product-panel-price .sale-price, .home-product-panel-price .old-price { font-size: var(--fs-body) !important; }
.home-product-pabel-color-label { font-size: var(--fs-small) !important; }

/* tablet: ช่องค้นหา desktop เคยดันจอเกิน (บั๊กเดิมปี 2019) */
@media (max-width: 991px) {
    .search-wrapper { max-width: 130px; }
    .search-wrapper .mainnav-search-input, #instant-search-input { width: 100% !important; max-width: 130px; }
    .instant-search-results { right: 0; width: 300px; }
}

/* cart timer: pill ลอยกลาง + เตือนแดงช่วง 2 นาทีสุดท้าย (mm 2026-07-18) */
.clock-wrapper {
    background: transparent !important;
    padding: 14px 0 0 !important;
    text-align: center;
}
.clock-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fbfdf4;
    border: solid thin #d9e8a8;
    border-radius: 0;
    padding: 7px 18px;
    font-size: var(--fs-small);
    color: #1d1d1b;
    box-shadow: 0 2px 10px rgba(163, 197, 23, 0.15);
}
.clock-pill .fa-clock { color: #7ea20e; }
.clock-pill #clock {
    font-weight: 700;
    color: #7ea20e;
    font-variant-numeric: tabular-nums;
    min-width: 3.2em;
    text-align: center;
}
.clock-pill.clock-low {
    background: #fff5f5;
    border-color: #f3b6b0;
    box-shadow: 0 2px 10px rgba(221, 75, 57, 0.18);
    animation: clockPulse 1s ease-in-out infinite;
}
.clock-pill.clock-low .fa-clock,
.clock-pill.clock-low #clock { color: #dd4b39; }
@keyframes clockPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.03); }
}


/* nav + mega menu เข้า scale (เดิม fix 22px จาก 2019) — mm ขอความหนาแน่นแบบ zoom 80% */
.mainnav a, .mainnav-flex a { font-size: clamp(15px, 13px + 0.4vw, 18px) !important; }
.mega-product-grid a, .mega-product-item a { font-size: var(--fs-lead) !important; }
.mega-menu a, .mega-categories a, .sidebar-category a { font-size: var(--fs-body) !important; }


/* ==========================================================================
   balance pass (mm 2026-07-18): บทบาทฟอนต์ + ขนาดเดียวกันทุกที่
   - เนื้อความ (p, li, td, label, input, คำอธิบายสินค้า) = Sarabun มีหัว
   - หัวข้อ/เมนู/ปุ่ม/ราคา = Noto Sans Thai
   ========================================================================== */
html body p, html body li, html body td, html body dd, html body dt,
html body label, html body input, html body select, html body textarea,
html body .blog-body, html body .cms-content, html body .page-content,
html body .member-notification-body, html body small {
    font-family: var(--font-body);
}

/* sidebar filter: หัวข้อ = h5 เดียวกันหมด, รายการ = body เดียวกันหมด */
.shop-sidebar { font-size: var(--fs-body) !important; }
.shop-sidebar .sidebar-widget-toggler {
    font-size: var(--fs-h5) !important;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
    padding: 10px 0;
    margin: 0;
    border-bottom: solid thin #ececea;
}
.price-selector, .sidebar-category a, .sidebar-brand a, .color-select-row {
    font-size: var(--fs-body) !important;
    line-height: 1.9;
}

/* 7. กล่องไซส์ = ขนาด small กะทัดรัด (มีกรอบอยู่แล้วเลยดูใหญ่) */
.size-selector { font-size: var(--fs-small) !important; min-height: 28px !important; }
.product-single-top .variations {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
}
.product-single-top .variation-button {
    font-size: var(--fs-small) !important;
    min-height: 32px !important;
    min-width: 64px;
    padding: 4px 14px !important;
    flex: 0 0 auto !important;
    width: auto !important;
}

/* จำนวนผลลัพธ์/ตัวเลือก perpage ให้เท่า body */
.shop-products-commands, .shop-products-commands * { font-size: var(--fs-body) !important; }

/* 3+4. single product: atome card + buy row + option label */
.atome-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: solid thin #ececea;
    border-radius: 0;
    padding: 10px 16px;
    margin: 14px 0;
    background: #fffef2;
}
.atome-card-title { font-weight: 700; font-size: var(--fs-small); }
.atome-card-detail { font-size: var(--fs-small); color: #555; }
.atome-logo {
    font-family: var(--font-main);
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -0.02em;
    color: #1d1d1b;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-transform: none;
}
.atome-logo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #EFFF4F;
    border-radius: 0;
    font-size: 14px;
    font-weight: 800;
}
.product-single-option-label {
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 6px;
    color: #6f6f6d;
}
.product-single-buy-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    margin-top: 16px;
}
.product-single-buy-row .product-single-qty-wrapper { margin-top: 0; }
.product-single-buy-row .quantity-title {
    font-size: var(--fs-tiny);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6f6f6d;
    margin-bottom: 4px;
}
.product-single-buy-row .product-single-buttons { flex: 1; }
.product-single-buy-row .button-cart { width: 100%; margin-bottom: 0 !important; min-height: 42px !important; }

/* 8. color filter = วง swatch ล้วน */
.color-swatch-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    padding: 10px 2px;
}
.color-swatch {
    display: block;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: solid thin #d5d5d3;
    box-sizing: border-box;
    transition: transform .12s ease;
}
.color-swatch:hover { transform: scale(1.15); }
.color-swatch.active {
    outline: 2px solid #a3c517;
    outline-offset: 2px;
}

/* 9. เปิด-ขยาย: ลูกศรหมุนตามสถานะ */
.sidebar-widget-toggler .opened { display: none; }
.sidebar-widget-toggler.opened .opened { display: inline-block; }
.sidebar-widget-toggler.opened .closed { display: none; }
.sidebar-widget-content { padding: 8px 0 14px; }

/* 6. footer: เว้นช่วงสมัครข่าวสาร กับเมนู footer */
.footer-newsletter > .row:first-child { margin-bottom: 52px; }

/* 10. blog cards + copy link */
.blog-post .blog-image {
    border-radius: 0;
    transition: transform .2s ease, box-shadow .2s ease;
}
.blog-post a:hover .blog-image {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(29, 29, 27, 0.12);
}
.blog-post .blog-post-tag { border-radius: 0; }
.copy-link-btn {
    border: solid thin #d5d5d3;
    background: #fff;
    border-radius: 0;
    padding: 6px 16px;
    font-size: var(--fs-small);
    font-weight: 700;
    letter-spacing: 0.05em;
    cursor: pointer;
}
.copy-link-btn:hover { background: #1d1d1b; color: #fff; border-color: #1d1d1b; }

/* ชนะ display:block !important เดิมของ desktop (ไฟล์นี้โหลดทีหลัง) */
.sidebar-widget-content.collapsed { display: none !important; }

/* 3. filter affordance: หัวข้อดูกดได้ + slider ราคา */
.shop-sidebar .sidebar-widget-toggler {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 11px 10px !important;
    background: #f7f7f5;
    border-radius: 0;
    border-bottom: none !important;
    margin-bottom: 6px !important;
    transition: background .15s ease;
}
.shop-sidebar .sidebar-widget-toggler:hover { background: #eef3da; }
.sidebar-widget-toggle-button { color: #1d1d1b; font-size: 12px; }

.price-slider { padding: 6px 4px 2px; }
.price-slider-values {
    font-size: var(--fs-small);
    font-weight: 700;
    margin-bottom: 10px;
    color: #1d1d1b;
}
.dual-range { position: relative; height: 26px; }
.dual-range input[type="range"] {
    position: absolute;
    left: 0; top: 0;
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    pointer-events: none;
    height: 26px;
    margin: 0;
}
.dual-range::before {
    content: "";
    position: absolute;
    top: 12px;
    left: 0; right: 0;
    height: 3px;
    background: #e2e2e0;
    border-radius: 0;
}
.dual-range input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #a3c517;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(29,29,27,.25);
    cursor: pointer;
    margin-top: 4px;
}
.dual-range input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: #a3c517;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(29,29,27,.25);
    cursor: pointer;
}

/* 4. share row: ทุกอย่างแถวเดียว ชิดกัน */
.social-share {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    margin: 0 !important;
}
.social-share span { font-weight: 700; font-size: var(--fs-small); letter-spacing: .06em; }
.social-share a img { height: 22px; width: auto; }

/* 9. my-orders: การ์ดโมเดิร์น + status pill */
.order-card {
    display: block;
    border: solid thin #ececea;
    border-radius: 0;
    padding: 16px 20px;
    margin-bottom: 12px;
    background: #fff;
    color: #1d1d1b;
    transition: box-shadow .15s ease, transform .15s ease;
}
.order-card:hover {
    text-decoration: none;
    color: #1d1d1b;
    box-shadow: 0 8px 24px rgba(29, 29, 27, 0.10);
    transform: translateY(-2px);
}
.order-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.order-card-id { font-weight: 700; font-size: var(--fs-h5); }
.order-card-date { color: #8a8a88; font-size: var(--fs-small); margin-left: 10px; }
.order-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.order-card-items { color: #6f6f6d; font-size: var(--fs-small); }
.order-card-total { font-weight: 700; }
.order-status-pill {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 0;
    font-size: var(--fs-tiny);
    font-weight: 700;
    letter-spacing: .06em;
}
.order-status-pill.is-success { background: #eef6db; color: #55700a; }
.order-status-pill.is-info { background: #e5f2fa; color: #23617f; }
.order-status-pill.is-warning { background: #fdf3d7; color: #8a6d09; }
.order-status-pill.is-danger { background: #fdeae7; color: #a33224; }
.order-status-pill.is-secondary { background: #efefec; color: #6f6f6d; }

/* order status timeline */
.order-steps {
    display: flex;
    justify-content: space-between;
    max-width: 640px;
    margin: 18px auto 26px;
    position: relative;
}
.order-steps::before {
    content: "";
    position: absolute;
    top: 11px; left: 10%; right: 10%;
    height: 2px;
    background: #e5e5e3;
}
.order-step { position: relative; text-align: center; flex: 1; }
.order-step-dot {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #d5d5d3;
    margin: 0 auto 6px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: #fff;
}
.order-step.done .order-step-dot { background: #a3c517; border-color: #a3c517; }
.order-step.current .order-step-dot { box-shadow: 0 0 0 4px rgba(163, 197, 23, .25); }
.order-step-label { font-size: var(--fs-tiny); color: #8a8a88; }
.order-step.done .order-step-label { color: #1d1d1b; font-weight: 700; }
.order-steps-aborted { text-align: center; margin: 18px 0 26px; }

/* ==========================================================================
   FINAL STANDARD (mm 2026-07-18): flat + !important ชนะ scss เดิมทุกจุด
   heading ตาม scale เดียว · เนื้อความ/ช่องกรอก = body เดียวกันทั้งเว็บ
   ========================================================================== */
.mainnav a, .mainnav-flex a { font-size: var(--fs-h6) !important; }
.product-single-top .product-single-name,
.product-single-name { font-size: var(--fs-h2) !important; line-height: 1.25 !important; }
.product-single-top .product-single-price .price,
.product-single-top .product-single-price .sale-price,
.product-single-price .price.sale,
.product-single-price .old-price { font-size: var(--fs-h3) !important; }
.product-single-top .product-single-qty-wrapper .product-single-qty,
.product-single-qty {
    font-size: var(--fs-body) !important;
    width: 56px !important;
    min-height: 36px !important;
    padding: 2px 8px !important;
}
.accordion .card .card-header { font-size: var(--fs-h5) !important; padding: 12px 16px; }
#related-product-tab li.nav-item a { font-size: var(--fs-h5) !important; }
.panel-heading, .product-single-related-heading { font-size: var(--fs-h2) !important; }

/* 2. variation boxes: กลับเป็น grid เท่ากันทุกช่อง */
.product-single-top .variations {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.product-single-top .variation-button {
    width: 100% !important;
    min-width: 0 !important;
    padding: 4px 6px !important;
    white-space: nowrap;
}

/* 5. my-order detail: การ์ดใหม่ทั้งหน้า */
.order-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0 6px;
}
.order-detail-title { margin: 0; }
.order-detail-card {
    border: solid thin #ececea;
    border-radius: 0;
    background: #fff;
    padding: 18px 22px;
    margin-bottom: 16px;
}
.order-detail-card-heading {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: var(--fs-small);
    color: #6f6f6d;
    margin-bottom: 12px;
}
.order-detail-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    border-bottom: solid thin #f2f2f0;
}
.order-detail-item:last-child { border-bottom: none; }
.order-detail-item-image {
    flex: 0 0 56px;
    height: 56px;
    border-radius: 0;
    background-color: #f4f4f2;
    background-size: cover;
    background-position: center;
}
.order-detail-item-info { flex: 1; min-width: 0; }
.order-detail-item-name { font-weight: 600; font-size: var(--fs-body); }
.order-detail-item-meta { color: #8a8a88; font-size: var(--fs-small); }
.order-detail-item-price { font-weight: 700; white-space: nowrap; }
.order-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: var(--fs-body);
}
.order-summary-row.is-total {
    border-top: solid thin #ececea;
    margin-top: 8px;
    padding-top: 12px;
    font-weight: 700;
    font-size: var(--fs-h5);
}
.order-detail-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ==========================================================================
   round 6 (mm 2026-07-18)
   ========================================================================== */

/* 1. check icon อยู่กลางวงกลมเป๊ะ */
.order-step-dot { width: 24px !important; height: 24px !important; }
.order-step-dot i, .order-step-dot .fa-check {
    font-size: 10px !important;
    line-height: 1 !important;
    margin: 0 !important;
    position: static !important;
    display: inline-block !important;
}

/* 2. cart dropdown popup ให้เข้าธีม */
.cart-dropdown-menu {
    width: 320px !important;
    padding: 22px !important;
    border: none !important;
    border-radius: 0!important;
    box-shadow: 0 14px 40px rgba(29, 29, 27, 0.16) !important;
    text-align: center;
    font-size: var(--fs-body) !important;
}
.cart-dropdown-menu .btn, .cart-dropdown-menu a.btn {
    display: block;
    width: 100%;
    margin-top: 12px;
    border-radius: 0;
    background: #1d1d1b !important;
    color: #fff !important;
    border: none;
    padding: 10px;
}

/* 3. เมนูหลัก = มาตรฐาน ecommerce (14-16px หนา) */
.mainnav a, .mainnav-flex a {
    font-size: clamp(14px, 13px + 0.3vw, 16px) !important;
    font-weight: 700;
}

/* 4. topbar = utility ขนาดเล็กมาตรฐาน 12px */
.commands-bar, .commands-bar a,
.command-1, .command-1 a, .command-1 .langs a,
.command-2, .command-2 a,
.help-dropdown-toggle { font-size: 12px !important; }

/* 5b. mobile filter = bottom sheet (ไม่เอา side panel) */
@media (max-width: 767px) {
    #shop-filter-mobile > .shop-filter-inner {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 82vh;
        overflow-y: auto;
        background: #fff !important;
        border-radius: 0;
        box-shadow: 0 -12px 40px rgba(29, 29, 27, 0.25);
        padding: 18px 18px 28px !important;
        transform: translateY(100%);
        transition: transform .28s ease;
        z-index: 9999;
    }
    #shop-filter-mobile > .shop-filter-inner.is-expanded {
        transform: translateY(0);
    }
    #shop-filter-mobile > .shop-filter-inner::before {
        content: "";
        display: block;
        width: 44px;
        height: 4px;
        border-radius: 0;
        background: #d5d5d3;
        margin: 0 auto 14px;
    }
}
.shop-filter-overlay { z-index: 8888; }

/* 6. cart: item + qty stepper + summary */
.cart-qty-stepper {
    display: inline-flex;
    align-items: center;
    border: solid thin #d5d5d3;
    border-radius: 0;
    overflow: hidden;
}
.cart-qty-stepper button {
    border: 0;
    background: #f7f7f5;
    width: 34px;
    height: 36px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}
.cart-qty-stepper button:hover { background: #eef3da; }
.cart-qty-stepper input {
    border: 0 !important;
    width: 44px !important;
    text-align: center;
    min-height: 36px;
    font-size: var(--fs-body) !important;
    -moz-appearance: textfield;
}
.cart-qty-stepper input::-webkit-outer-spin-button,
.cart-qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cart-wrapper .table-cart td { vertical-align: middle; border-color: #f2f2f0; }
.cart-product-name { font-weight: 600; }

/* 6c. checkout: ฟอร์มซ้าย + สรุปขวาเป็นการ์ด อ่านง่าย */
form[action*="checkout_post"] label {
    font-size: 11px !important;
    color: #6f6f6d;
}
form[action*="checkout_post"] .form-control {
    border-radius: 0;
    min-height: 40px;
    border-color: #dddddb;
}
form[action*="checkout_post"] .col-12.col-sm-6:last-child .table-cart {
    background: #fbfbf9;
    border: solid thin #ececea;
    border-radius: 0;
    overflow: hidden;
}
form[action*="checkout_post"] .table-cart td {
    border-color: #f0f0ee !important;
    vertical-align: middle;
    font-size: var(--fs-body);
}
form[action*="checkout_post"] .btn-dark,
form[action*="checkout_post"] button[type="submit"] {
    min-height: 46px;
    border-radius: 0;
    font-weight: 700;
    letter-spacing: .05em;
}
form[action*="checkout_post"] h4 {
    font-size: var(--fs-h5) !important;
    border-bottom: solid thin #ececea;
    padding-bottom: 8px;
    margin: 18px 0 12px;
}

/* ==========================================================================
   round 7 (mm 2026-07-18)
   ========================================================================== */

/* 1. topbar แถบเขียว: ขนาดมาตรฐาน */
#topbar, .topbar-text, .topbar-text * { font-size: 12.5px !important; line-height: 1.5 !important; }
#topbar { padding: 7px 0 !important; }

/* 2. mobile filter = dropdown ในหน้าเดียวกัน */
@media (max-width: 767px) {
    #shop-filter-mobile > .shop-filter-inner {
        position: static !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 0;
        overflow: hidden;
        padding: 0 !important;
        border-radius: 0;
        box-shadow: none !important;
        background: #fafaf8 !important;
        transition: max-height .3s ease;
        z-index: auto;
    }
    #shop-filter-mobile > .shop-filter-inner::before { display: none; }
    #shop-filter-mobile > .shop-filter-inner.is-expanded {
        max-height: 2200px;
        padding: 14px !important;
        border: solid thin #e8e8e6;
        margin-bottom: 14px;
    }
    /* scss เดิมซ่อน content บนมือถือแบบถาวร — คลิกแล้วต้องเปิดได้ */
    #shop-filter-mobile .sidebar-widget-content { display: block !important; }
    #shop-filter-mobile .sidebar-widget-content.collapsed { display: none !important; }
}
.shop-filter-overlay { display: none !important; }

/* 3. qty = ปุ่มหยิบใส่ตะกร้า สูงเท่ากัน 46px */
.product-single-buy-row .product-single-qty { min-height: 46px !important; }
.product-single-buy-row .button-cart { min-height: 46px !important; }

/* 6-7. payment channels ใต้ชื่อช่องทาง */
.payment-channels { font-size: var(--fs-small); color: #6f6f6d; font-weight: 400; margin-top: 2px; }

/* 8. brand chip กดได้ ทุกหน้า */
.brand-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #f4f4f2;
    border: solid thin #e5e5e3;
    border-radius: 0;
    padding: 4px 14px;
    font-size: var(--fs-small) !important;
    font-weight: 700;
    letter-spacing: .05em;
    color: #1d1d1b !important;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.brand-chip:hover { background: #1d1d1b; color: #fff !important; text-decoration: none; }
.brand-chip-logo { height: 18px; width: auto; }
.brand-chip-arrow { font-size: 9px; opacity: .5; }
.brand-chip-sm { padding: 2px 10px; font-size: var(--fs-tiny) !important; margin-bottom: 4px; }
.home-product-brand-tag {
    display: inline-block;
    font-size: var(--fs-tiny);
    font-weight: 700;
    letter-spacing: .06em;
    color: #8a8a88;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 6px;
}
.home-product-brand-tag:hover { color: #7ea20e; }

/* 9. bigblog เข้า scale */
.bigblog .bigblog-title { font-size: var(--fs-h3) !important; line-height: 1.3 !important; }
.bigblog .bigblog-tags a { font-size: var(--fs-small) !important; }

/* ==========================================================================
   systematic sweep (mm 2026-07-18): ทุก class ที่ scan เจอว่าหลุด scale
   (เว้น slideshow hero/ลูกศร = display ตั้งใจใหญ่)
   ========================================================================== */
.home-blog-date, .home-blog-date.related { font-size: var(--fs-small) !important; }
.home-blog-title, .home-blog-title.related { font-size: var(--fs-h5) !important; line-height: 1.35 !important; }
#header .mainnav .mega-menu-wrapper .mega-brand-banner-text { font-size: var(--fs-h5) !important; }
#footer .footer-newsletter-wrapper .footer-newsletter-title { font-size: var(--fs-h5) !important; }
#footer .footer-newsletter-input, #footer .footer-newsletter-submit,
#footer .footer-newsletter-wrapper input, #footer .footer-newsletter-wrapper button { font-size: var(--fs-body) !important; }
#footer .footer-nav-title { font-size: var(--fs-h6) !important; }
.shop-pagination-detail { font-size: var(--fs-body) !important; }
.select_perpage a { font-size: var(--fs-body) !important; }
#sort_select { font-size: var(--fs-body) !important; }
.raffle-title { font-size: var(--fs-h3) !important; }
.raffle-price { font-size: var(--fs-h3) !important; }
.raffle-total-price { font-size: var(--fs-body) !important; }
.member-card { font-size: var(--fs-lead) !important; }
.order-tracking-wrapper .order-tracking-title { font-size: var(--fs-h5) !important; }
.order-tracking-wrapper .order-tracking-date { font-size: var(--fs-small) !important; }
.order-tracking-wrapper .order-tracking-city { font-size: var(--fs-body) !important; }
.btn-checkout { font-size: var(--fs-body) !important; font-weight: 700; }
.form-group label { font-size: var(--fs-small) !important; }
.brand-letter { font-size: var(--fs-h2) !important; }

/* ==========================================================================
   round 9 (mm 2026-07-18)
   ========================================================================== */

/* 1. slideshow bullets -> ขีดเทาเล็ก minimal */
.owl-dots { margin-top: 8px !important; }
.owl-dots .owl-dot span {
    width: 20px !important;
    height: 3px !important;
    border-radius: 0!important;
    background: #d9d9d7 !important;
    margin: 0 4px !important;
    transition: all .2s ease;
}
.owl-dots .owl-dot.active span {
    background: #1d1d1b !important;
    width: 30px !important;
}
.owl-dots .owl-dot:hover span { background: #a3c517 !important; }

/* 2. quick gender menu */
.quick-gender-menu {
    display: flex;
    justify-content: center;
    gap: 0;
    margin: 4px 0 22px;
}
.quick-gender-menu a {
    padding: 8px 34px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: var(--fs-h6);
    color: #8a8a88;
    border-bottom: 2px solid #e8e8e6;
}
.quick-gender-menu a:hover { color: #1d1d1b; text-decoration: none; }
.quick-gender-menu a.active { color: #1d1d1b; border-bottom-color: #a3c517; }

/* 3. favorite + share icon pair */
.product-icon-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin: 8px 0 2px;
}
.product-icon-btn {
    width: 42px;
    height: 42px;
    border-radius: 0;
    border: solid thin #d5d5d3;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: #1d1d1b;
    cursor: pointer;
    transition: all .15s ease;
}
.product-icon-btn:hover { border-color: #1d1d1b; transform: translateY(-1px); }
.product-icon-btn .fa-heart.fas { color: #dd4b39; }


/* ==========================================================================
   round 10 (mm 2026-07-18)
   ========================================================================== */

/* 1. เนื้อหาจาก editor: ฆ่า font/size ที่ฝังมากับ content เก่า */
.blog-body *, .cms-content *, .page-content *, .editor-content * {
    font-family: var(--font-main) !important;
}
.blog-body span, .blog-body font, .blog-body small, .blog-body strong, .blog-body b, .blog-body em,
.cms-content span, .cms-content font, .cms-content small,
.page-content span, .page-content font {
    font-size: inherit !important;
    line-height: inherit !important;
}

/* 2. tag หมวดหมู่ใน blog single ให้มนเหมือนหน้า list */
.bigblog-tags a, .blog-post-tag {
    border-radius: 0!important;
    padding: 3px 12px !important;
}

/* 3. qty = ปุ่ม สูงเท่ากันเป๊ะทุกจอ */
.product-single-buy-row { align-items: stretch !important; }
.product-single-buy-row .product-single-qty,
.product-single-buy-row .button-cart {
    height: 48px !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.product-single-buy-row .product-single-qty-wrapper { display: flex; flex-direction: column; justify-content: flex-end; }

/* ============================================================
   รอบ minimal ดำ-นำ เขียว-แทรก (mm 2026-07-17)
   1) ลดเขียวในโครง UI ร้าน — เขียวเหลือไว้เป็นจุดเน้นเล็กๆ (topbar/badge/active)
   ============================================================ */

/* slider ราคา: หัวจับดำ */
.dual-range input[type="range"]::-webkit-slider-thumb {
    background: #1d1d1b;
}
.dual-range input[type="range"]::-moz-range-thumb {
    background: #1d1d1b;
}
/* swatch สีที่เลือก: ขอบดำ */
.color-swatch.active {
    outline: 2px solid #1d1d1b;
}

/* 2) mega menu: ลิสต์แบรนด์/หมวด ไม่หนา โปร่งขึ้น */
.mega-brand-item,
.mega-category-item {
    font-weight: 400 !important;
    letter-spacing: .02em;
    padding: 2px 0 !important;
    color: #333331;
}
.mega-brand-item:hover,
.mega-category-item:hover { color: #1d1d1b; text-decoration: underline; }

/* 3) หัวข้อ filter: minimal — ไม่มีกล่องเทา เหลือเส้นคั่นบางๆ ตัวเบา */
.shop-sidebar .sidebar-widget-toggler,
#shop-filter-mobile .sidebar-widget-toggler {
    background: transparent !important;
    border-bottom: solid thin #e5e5e3 !important;
    padding: 12px 2px !important;
    margin-bottom: 0 !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    letter-spacing: .1em;
    cursor: pointer;
}
.shop-sidebar .sidebar-widget-toggler:hover,
#shop-filter-mobile .sidebar-widget-toggler:hover { background: #fafaf8 !important; }
.shop-sidebar .sidebar-widget-toggler i.fas:first-child { font-size: 11px; }
.sidebar-widget-toggler .sidebar-widget-toggle-button,
.sidebar-widget-toggle-button { color: #1d1d1b !important; font-size: 10px; }
.shop-sidebar .sidebar-widget-content { padding: 12px 2px 18px; }
/* ปุ่ม clear filter ให้บางลง เข้าชุด */
.shop-sidebar .btn-filter {
    font-size: 11px;
    letter-spacing: .08em;
    padding: 9px 10px;
    width: 100%;
    border: none;
}

/* 5) แถวบนมือถือ: FILTER กับ SORT กล่องสูงเท่ากัน ไปด้วยกัน */
#open-shop-filter {
    height: 42px;
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: .12em;
    border-radius: 0 !important;
    border: solid thin #1d1d1b !important;
}
.select_sort select {
    height: 42px !important;
    width: 100%;
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: .06em;
    border: solid thin #1d1d1b !important;
    border-radius: 0 !important;
    background-color: #fff;
    color: #1d1d1b;
    padding: 0 10px !important;
    margin: 0 !important;
}
/* ตัวเลือกจำนวนต่อหน้า 24/48/72/96: เล็กลง เบาลง */
.select_perpage a {
    font-size: 11px !important;
    padding: 3px 7px !important;
    color: #8a8a88;
    text-decoration: none;
}
.select_perpage a.current {
    background: #1d1d1b;
    color: #fff;
}
.shop-pagination-detail { font-size: 11px; color: #8a8a88; }

/* 6) ช่องค้นหา: minimal เส้นใต้ + ไอคอนแว่น ขยายตอนโฟกัส */
.mainnav-search-input {
    border: none !important;
    border-bottom: solid thin #c9c9c7 !important;
    border-radius: 0 !important;
    background: transparent url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%231d1d1b' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E") no-repeat 2px center / 13px !important;
    padding: 7px 6px 7px 24px !important;
    font-size: 13px;
    letter-spacing: .05em;
    outline: none !important;
    transition: border-color .2s ease, width .25s ease;
}
.mainnav-search-input:focus { border-bottom-color: #1d1d1b !important; }
.mainnav-search-input::placeholder { color: #a5a5a3; letter-spacing: .1em; }
.mainnav-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
@media (min-width: 992px) {
    .mainnav-search-input { width: 150px; }
    .mainnav-search-input:focus { width: 230px; }
}

/* ============================================================
   my-account membership (mm 2026-07-17) — ดำพรีเมียม เขียวแทรก
   ============================================================ */
.account-welcome { color: #8a8a88; font-size: 14px; margin-top: -6px; }
.account-section-title {
    font-size: 13px !important;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    border-bottom: solid thin #e5e5e3;
    padding-bottom: 8px;
    margin-bottom: 14px;
}

/* บัตรสมาชิก CSS ล้วน */
.member-card-v2 {
    position: relative;
    aspect-ratio: 1.586;
    padding: 22px 24px;
    color: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.member-card-v2.is-general { background: linear-gradient(135deg, #3a3a38, #6f6f6d); }
.member-card-v2.is-green { background: linear-gradient(135deg, #7fa010, #a3c517 70%, #b5d334); }
.member-card-v2.is-black { background: linear-gradient(135deg, #050505, #2c2c2a 65%, #3d3d3b); }
.member-card-v2::after { /* แสงเฉียงบางๆ ให้ดูเป็นวัสดุ */
    content: "";
    position: absolute;
    top: -60%; left: -20%;
    width: 70%; height: 220%;
    background: rgba(255, 255, 255, 0.07);
    transform: rotate(24deg);
    pointer-events: none;
}
.member-card-v2-top { display: flex; justify-content: space-between; align-items: baseline; }
.member-card-v2-brand { font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.member-card-v2-brand em { font-style: normal; font-weight: 400; opacity: .75; }
.member-card-v2-level {
    font-size: 10px;
    letter-spacing: .22em;
    border: solid thin rgba(255, 255, 255, 0.55);
    padding: 4px 8px;
    white-space: nowrap;
}
.member-card-v2-chip {
    width: 34px; height: 26px;
    margin-top: auto;
    background: linear-gradient(135deg, #e8e8e6, #b9b9b7);
    border-radius: 4px; /* ชิปการ์ดจริงมน — ยกเว้นจากกฎเหลี่ยม */
    margin-bottom: 10px;
}
.member-card-v2-name { font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; }
.member-card-v2-points { font-size: 12px; opacity: .92; margin-top: 2px; }
.member-card-v2-points b { font-size: 16px; }

/* track GENERAL → GREEN → BLACK */
.tier-track {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
    position: relative;
}
.tier-track::before {
    content: "";
    position: absolute;
    top: 5px; left: 8%; right: 8%;
    height: 1px;
    background: #d5d5d3;
}
.tier-step {
    position: relative;
    font-size: 10px;
    letter-spacing: .12em;
    color: #b0b0ae;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.tier-dot {
    width: 11px; height: 11px;
    background: #fff;
    border: solid 2px #d5d5d3;
    border-radius: 50%;
}
.tier-step.is-passed { color: #6f6f6d; }
.tier-step.is-passed .tier-dot { background: #6f6f6d; border-color: #6f6f6d; }
.tier-step.is-current { color: #1d1d1b; font-weight: 700; }
.tier-step.is-current .tier-dot { background: #a3c517; border-color: #1d1d1b; }

/* การ์ดระดับถัดไป */
.tier-next-card {
    border: solid thin #e5e5e3;
    background: #fff;
    padding: 18px 20px;
    margin-bottom: 14px;
}
.tier-next-card.is-top { border-color: #1d1d1b; background: #1d1d1b; color: #fff; }
.tier-next-heading { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.tier-next-rule { font-size: 13.5px; color: #5a5a58; margin: 6px 0 10px; }
.tier-benefits { padding-left: 18px; margin: 0; font-size: 13px; color: #5a5a58; }
.tier-benefits li { margin-bottom: 2px; }
.tier-progress-bar {
    height: 8px;
    background: #eeeeec;
    overflow: hidden;
}
.tier-progress-bar span {
    display: block;
    height: 100%;
    background: #1d1d1b;
    transition: width .4s ease;
}
.tier-progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11.5px;
    color: #8a8a88;
    margin-top: 6px;
}

/* ประวัติแต้ม */
.points-log { margin-top: 20px; }
.points-log-table { width: 100%; font-size: 12.5px; }
.points-log-table td { padding: 6px 4px; border-bottom: solid thin #f0f0ee; }
.points-log-table .pl-date { color: #8a8a88; white-space: nowrap; width: 18%; }
.points-log-table .pl-source { color: #5a5a58; }
.points-log-table .pl-change { text-align: right; font-weight: 700; white-space: nowrap; }
.points-log-table .pl-change.is-plus { color: #6d8b0a; }
.points-log-table .pl-change.is-minus { color: #c0392b; }
.points-log-table .pl-balance { text-align: right; color: #8a8a88; width: 20%; }
.points-log-note { font-size: 11px; color: #a5a5a3; margin-top: 8px; }

/* ปุ่มบนประกาศ */
.member-notification-actions { margin-top: 8px; display: flex; gap: 14px; }
.notif-action {
    background: none;
    border: none;
    padding: 0;
    font-size: 11.5px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #5a5a58;
    text-decoration: underline;
    cursor: pointer;
}
.notif-action:hover { color: #1d1d1b; }
.notif-action.is-dismiss { color: #b0b0ae; }
.notif-action.is-dismiss:hover { color: #c0392b; }

/* mobile search (mm 2026-07-17) — สไตล์เดียวกับ desktop + กัน iOS ซูม */
.mobile-search-input {
    height: 44px;
    font-size: 16px !important;
    background-position: 4px center !important;
    background-size: 15px !important;
    padding-left: 28px !important;
}
#mobile-search-form { padding: 0 4px 6px; }

/* สิทธิพิเศษทุก tier (mm 2026-07-17) */
.tier-benefit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 40px;
}
@media (max-width: 767px) { .tier-benefit-grid { grid-template-columns: 1fr; } }
.tier-benefit-col { border: solid thin #e5e5e3; background: #fff; }
.tier-benefit-col.is-current { border-color: #1d1d1b; box-shadow: 0 0 0 1px #1d1d1b; }
.tier-benefit-head {
    padding: 10px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    color: #fff;
}
.tier-benefit-head.is-general { background: #6f6f6d; }
.tier-benefit-head.is-green { background: #8fae12; }
.tier-benefit-head.is-black { background: #1d1d1b; }
.tier-benefit-col ul {
    list-style: none;
    margin: 0;
    padding: 12px 14px;
}
.tier-benefit-col li {
    font-size: 12.5px;
    color: #5a5a58;
    padding: 4px 0 4px 16px;
    position: relative;
}
.tier-benefit-col li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #1d1d1b;
    font-weight: 700;
}
.points-log-table .pl-note { color: #a5a5a3; font-size: 11px; }

/* ============================================================
   คูปองเก็บโค้ด + แถบส่งฟรี (mm 2026-07-17)
   ============================================================ */
.coupon-block { margin: 22px 0; }
.coupon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 10px;
}
.coupon-card {
    display: flex;
    border: solid thin #1d1d1b;
    background: #fff;
    overflow: hidden;
}
.coupon-card-main {
    flex: 1;
    padding: 12px 14px;
    min-width: 0;
}
.coupon-card-discount { font-weight: 700; font-size: 15px; color: #1d1d1b; }
.coupon-card-name {
    font-size: 12px;
    color: #5a5a58;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.coupon-card-cond { font-size: 10.5px; color: #a5a5a3; margin-top: 3px; }
.coupon-card-side {
    width: 108px;
    flex-shrink: 0;
    border-left: dashed 1px #b0b0ae; /* รอยปรุแบบตั๋ว */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 8px;
    background: #fafaf8;
}
.coupon-card-code {
    font-size: 10.5px;
    letter-spacing: .1em;
    color: #5a5a58;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.coupon-use-btn, .coupon-collect-btn {
    border: none;
    background: #1d1d1b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 7px 14px;
    cursor: pointer;
    text-transform: uppercase;
}
.coupon-collect-btn { background: #8fae12; }
.coupon-use-btn:hover { background: #000; }
.coupon-collect-btn:hover { background: #7fa010; }
.coupon-collected { font-size: 11px; font-weight: 700; color: #6d8b0a; letter-spacing: .05em; }

.freeship-bar { margin: 6px 0 18px; max-width: 520px; }
.freeship-bar-text { font-size: 13px; margin-bottom: 6px; color: #1d1d1b; }
.freeship-bar-track {
    height: 8px;
    background: #eeeeec;
    overflow: hidden;
}
.freeship-bar-track span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #1d1d1b 70%, #8fae12);
    transition: width .4s ease;
}

/* ============================================================
   ใช้แต้มตอน checkout + ปรับกล่องคูปอง (mm 2026-07-17)
   ============================================================ */
.points-redeem-box {
    border: solid thin #1d1d1b;
    padding: 14px 16px;
    margin-top: 14px;
    background: #fff;
}
.points-redeem-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}
.points-redeem-title {
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.points-redeem-balance { font-size: 12px; color: #8a8a88; }
.points-redeem-form { display: flex; gap: 6px; }
.points-redeem-form input {
    flex: 1;
    border: solid thin #c9c9c7;
    border-radius: 0;
    padding: 8px 10px;
    font-size: 13px;
    min-width: 0;
}
.points-redeem-maxbtn {
    border: solid thin #1d1d1b;
    background: #fff;
    color: #1d1d1b;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 8px 12px;
    cursor: pointer;
    text-transform: uppercase;
}
.points-redeem-apply {
    border: none;
    background: #1d1d1b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 8px 16px;
    cursor: pointer;
    text-transform: uppercase;
}
.points-redeem-apply:hover { background: #000; }
.points-redeem-applied {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    color: #6d8b0a;
}
.points-redeem-remove {
    border: none;
    background: none;
    font-size: 11px;
    color: #8a8a88;
    text-decoration: underline;
    cursor: pointer;
}
.points-redeem-remove:hover { color: #c0392b; }

/* 9) กล่อง "คุณกำลังใช้คูปอง" — การ์ดชัดเจน อ่านออก ไม่มี emoji */
.cart-coupon-used {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    border: none !important;
    background: #1d1d1b !important;
    color: #fff !important;
    padding: 12px 18px !important;
    font-size: 13px !important;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.4;
    text-decoration: none !important;
}
.cart-coupon-used::before {
    content: "";
    width: 8px;
    height: 8px;
    background: #a3c517;
    border-radius: 50%;
    flex-shrink: 0;
}
.cart-coupon-used + a {
    color: #8a8a88 !important;
    text-decoration: underline;
}
.cart-coupon-used + a:hover { color: #c0392b !important; }

/* 10) การ์ดคูปอง compact ลง */
.coupon-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.coupon-card-main { padding: 8px 12px; }
.coupon-card-discount { font-size: 13px; }
.coupon-card-name { font-size: 11px; }
.coupon-card-cond { font-size: 10px; margin-top: 1px; }
.coupon-card-side { width: 88px; padding: 8px 6px; gap: 4px; }
.coupon-card-code { font-size: 9.5px; }
.coupon-use-btn, .coupon-collect-btn { font-size: 10px; padding: 5px 10px; }
.coupon-block { margin: 14px 0; }
.coupon-collect-deadline { font-size: 9px; color: #a5a5a3; letter-spacing: .04em; }

/* #6 โปรที่ใช้ได้บนหน้าสินค้า (mm 2026-07-17) */
.product-promo-block { margin: 12px 0; }
.product-promo-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    border: solid thin #e5e5e3;
    border-left: solid 3px #a3c517;
    padding: 9px 12px;
    margin-bottom: 6px;
    background: #fdfdfb;
}
.product-promo-tag {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .14em;
    background: #1d1d1b;
    color: #fff;
    padding: 3px 7px;
    flex-shrink: 0;
    margin-top: 2px;
}
.product-promo-name { font-size: 12.5px; color: #1d1d1b; }
.product-promo-cond { font-size: 11px; color: #8a8a88; margin-top: 1px; }

/* #5 early access (mm 2026-07-17) */
.early-access-box {
    border: solid thin #1d1d1b;
    border-left: solid 4px #1d1d1b;
    background: #fafaf8;
    padding: 14px 16px;
    margin: 12px 0;
}
.early-access-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .18em;
    margin-bottom: 4px;
}
.early-access-text { font-size: 13px; color: #5a5a58; margin: 0 0 8px; }

/* filter header: ตัวหนังสือชิดซ้ายติด icon, ลูกศรอยู่ขวา (mm 2026-07-17) */
.shop-sidebar .sidebar-widget-toggler,
#shop-filter-mobile .sidebar-widget-toggler {
    justify-content: flex-start !important;
    gap: 8px;
    text-align: left !important;
}
.sidebar-widget-toggler .sidebar-widget-toggle-button { margin-left: auto; }

/* คูปองที่ใช้อยู่ในตะกร้า = การ์ดตั๋วขอบเขียว (mm 2026-07-17) */
.coupon-card.is-active-coupon { border-color: #8fae12; box-shadow: 0 0 0 1px #8fae12; }
.coupon-card.is-active-coupon .coupon-card-side { background: #fbfdf4; }
.coupon-remove-link {
    font-size: 10px;
    letter-spacing: .05em;
    color: #8a8a88 !important;
    text-decoration: underline;
    text-transform: uppercase;
}
.coupon-remove-link:hover { color: #c0392b !important; }

/* ============================================================
   รอบ pre-launch UI (mm 2026-07-20)
   ============================================================ */

/* checkout login/register modal — สะอาด กระชับ ในหน้าเดียว */
.checkout-auth { border-radius: 0; border: none; }
.checkout-auth-body { padding: 28px 26px 26px; position: relative; }
.checkout-auth-close { position: absolute; top: 12px; right: 16px; font-size: 24px; opacity: .5; background: none; border: none; }
.checkout-auth-perk { text-align: center; margin-bottom: 18px; }
.checkout-auth-perk-title { font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.checkout-auth-perk-text { font-size: 12.5px; color: #8a8a88; margin-top: 4px; line-height: 1.5; }
.checkout-auth-tabs { display: flex; border-bottom: 1px solid #e5e5e3; margin-bottom: 18px; }
.checkout-auth-tab {
    flex: 1; background: none; border: none; padding: 10px 0; cursor: pointer;
    font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #a5a5a3; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.checkout-auth-tab.is-active { color: #1d1d1b; border-bottom-color: #1d1d1b; }
.checkout-auth-pane .form-group { margin-bottom: 12px; }
.checkout-auth-pane label { font-size: 12px; font-weight: 600; margin-bottom: 3px; }
.checkout-auth-link { font-size: 12.5px; color: #8a8a88; text-decoration: underline; }
.checkout-auth-note { font-size: 11px; color: #a5a5a3; text-align: center; margin: 8px 0 0; }
.checkout-auth-google { margin: 16px 0 10px; }
.checkout-auth-guest { font-size: 12px; color: #a5a5a3; text-decoration: underline; letter-spacing: .04em; }

/* birthday dropdowns */
.birthday-select-row { display: flex; gap: 8px; }
.birthday-select-row select { flex: 1; min-width: 0; }

/* password show/hide */
.password-wrap { position: relative; }
.password-toggle {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: #a5a5a3; cursor: pointer; padding: 4px 6px;
}
.password-toggle:hover { color: #1d1d1b; }

/* #4 cart — ชื่อสินค้าบางลง/เล็กลง จัดวางให้อยู่ */
.cart-item-name, .cart-product-name, td .cart-item-name {
    font-weight: 400 !important;
    font-size: 13px !important;
    line-height: 1.45;
    letter-spacing: .01em;
}
.popup-cart-item .popup-cart-name,
.menu-cart-product-name { font-weight: 400 !important; font-size: 12.5px !important; line-height: 1.4; }

/* #5 about seek — ตัวบาง อ่านสบายแบบบทความ */
.about-content, .page-content-body, .static-page-content, .about-us-content {
    font-weight: 300;
    font-size: 15px;
    line-height: 1.85;
    color: #3a3a38;
    max-width: 760px;
    margin: 0 auto;
}
.about-content h1, .about-content h2, .about-content h3,
.about-us-content h1, .about-us-content h2, .about-us-content h3, .about-us-content h4,
.page-content-body h2, .page-content-body h3 {
    font-weight: 500;
    letter-spacing: .01em;
    margin: 1.6em 0 .5em;
    line-height: 1.3;
}
.about-content p, .about-us-content p, .about-us-content div, .page-content-body p { margin-bottom: 1.15em; font-weight: 300; }
.about-content img, .about-us-content img, .page-content-body img { max-width: 100%; height: auto; margin: 1.2em auto; display: block; border-radius: 0; }

/* about page (Page model template) — ตัวบาง อ่านแบบบทความ (mm 2026-07-20) */
.about-us-content { font-weight: 300 !important; font-size: 15px; line-height: 1.9; color: #3a3a38; max-width: 780px; margin: 0 auto; }
.about-us-content, .about-us-content * { text-transform: none !important; }
.about-us-content b, .about-us-content strong { font-weight: 500; }

/* ============================================================
   mega menu (desktop) + mobile side panel — modernize (mm 2026-07-20)
   ============================================================ */

/* desktop mega menu: โปร่ง สะอาด hover ชัด */
.mega-menu-wrapper { border-top: 2px solid #1d1d1b !important; box-shadow: 0 16px 30px rgba(29,29,27,.10) !important; }
.mega-menu-padding { padding: 28px 34px !important; }
.mega-menu-padding > div > a[style*="underline"],
.mega-brand-grid .container-fluid + *,
.mega-menu-padding a[href$="brand"],
.mega-menu-padding a[href$="category"] { }
.mega-brand-item, .mega-category-item {
    font-weight: 400 !important;
    letter-spacing: .04em !important;
    padding: 5px 0 !important;
    color: #444 !important;
    font-size: 13px !important;
    transition: color .12s ease, padding-left .12s ease;
    text-transform: uppercase;
}
.mega-brand-item:hover, .mega-category-item:hover {
    color: #1d1d1b !important;
    padding-left: 6px !important;
    text-decoration: none !important;
}
.mega-brand-banner, .mega-brand-banner-wrapper img { border-radius: 0; }
.mega-brand-banner-text { font-weight: 500 !important; letter-spacing: .06em; }
/* หัวข้อ "VIEW ALL ..." */
.mega-menu-padding a[style*="underline"] {
    font-size: 12px !important; letter-spacing: .12em; color: #1d1d1b !important;
    text-decoration: none !important; border-bottom: 2px solid #a3c517; padding-bottom: 3px;
}

/* mobile side panel: แคบลง = เห็น overlay = ฟีลพาเนลข้าง */
#mobile-menu { max-width: 320px !important; }
#mobile-menu-overlay { background: rgba(29,29,27,.55) !important; }
.mobile-menu-wrapper { padding: 20px 22px !important; }
.mobile-menu-wrapper > a,
.mobile-menu-wrapper > .mobile-menu-dropdown {
    font-weight: 500 !important;
    font-size: 14px !important;
    letter-spacing: .06em;
    padding: 11px 0 !important;
    margin: 0 !important;
    border-bottom: 1px solid #f0f0ee;
}
.mobile-menu-wrapper > a:hover,
.mobile-menu-dropdown-toggler:hover { color: #1d1d1b; }
.mobile-menu-wrapper hr { border-color: #ececea; margin: 10px 0; }
.mobile-dropdown-menu-wrapper a {
    font-weight: 400 !important;
    font-size: 13px !important;
    text-transform: none !important;
    color: #6f6f6d !important;
    padding: 7px 0 7px 12px !important;
    display: block;
    letter-spacing: .01em;
}
.mobile-dropdown-menu-wrapper a:hover { color: #1d1d1b !important; }
.mobile-menu-top { border-bottom: 1px solid #ececea; padding-bottom: 12px; margin-bottom: 8px; }