/* Custom CSS styles for TinyMCE editor */

/* 2026-06-24 (Nova) bugfix: main.css has a generic `header { position:fixed; z-index:2000; top:0 }`
   rule that ALSO catches the page-title <header class="entry-header"> on content pages
   (policy/about/faq/article/category...). That made the title bar overlay the real navbar
   and block ALL menu clicks ("หน้าค้าง คลิกไม่ได้"). Scope it back to normal flow for the
   page-title header only — the navbar <header> stays fixed. */
header.entry-header {
    position: static !important;
    z-index: auto !important;
    top: auto !important;
    /* main.css also sets generic `header { width: 100vw }`; once static that becomes a
       1514px box that overflows the 1140px content-box, pushing the centered title to the
       right. Reset to normal flow width so `text-center` centers inside the content-box. */
    width: auto !important;
    min-width: 0 !important;
}
header.entry-header .entry-title {
    width: auto !important;
    min-width: 0 !important;
}

/* 2026-06-25 (Nova, พี่นัด): ปุ่ม +/- จำนวน (qty stepper) hover แล้วเข้มขึ้นให้เห็นชัด (เดิมไม่มี hover) */
.input-amount .btn-plus,
.input-amount .btn-minus {
    transition: background-color .15s ease, color .15s ease;
}
.input-amount .btn-plus:hover,
.input-amount .btn-minus:hover {
    background-color: #d9d9d9 !important;
    color: #000 !important;
}
.input-amount .btn-plus:active,
.input-amount .btn-minus:active {
    background-color: #c7c7c7 !important;
}

/* ============================================================================
   Baner Popup — Nova 2026-06-26 (พี่นัด)
   Center-screen notification popup. Config: /assets/banner_popup.json
   Injected + controlled by assets/js/custom-script.js. Hidden until JS shows it.
   ============================================================================ */
#vbthBanerPopup {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(12, 12, 15, 0.72);
    opacity: 0;
    transition: opacity .25s ease;
}
#vbthBanerPopup.is-open {
    display: flex;
    opacity: 1;
}
#vbthBanerPopup .bp-card {
    width: 360px;
    max-width: 100%;
    background: #1a1a1d;
    border: 1px solid #b8862f;
    border-radius: 16px;
    overflow: hidden;
    /* nv1376: a tall picture scrolls inside .bp-body, so the buttons stay on screen */
    display: flex;
    flex-direction: column;
    max-height: 100%;
    font-family: inherit;
    transform: translateY(14px) scale(.97);
    transition: transform .28s cubic-bezier(.2,.8,.25,1);
    box-shadow: 0 18px 50px rgba(0,0,0,.5);
}
#vbthBanerPopup.is-open .bp-card { transform: translateY(0) scale(1); }
#vbthBanerPopup .bp-head {
    position: relative;
    flex-shrink: 0;
    background: #111113;
    padding: 24px 20px 18px;
    text-align: center;
    border-bottom: 1px solid #2a2a2e;
}
#vbthBanerPopup .bp-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    border: none;
    color: #c9a25a;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
#vbthBanerPopup .bp-close:hover { background: rgba(255,255,255,.14); color: #f4d488; }
#vbthBanerPopup .bp-iconwrap {
    width: 56px;
    height: 56px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #2a210f;
    border: 1px solid #c9952f;
    display: flex;
    align-items: center;
    justify-content: center;
}
#vbthBanerPopup .bp-iconwrap i { font-size: 28px; color: #e8a93a; }
#vbthBanerPopup .bp-badge {
    display: inline-block;
    font-size: 11px;
    letter-spacing: .5px;
    color: #1a1a1d;
    background: #e8a93a;
    padding: 3px 12px;
    border-radius: 20px;
    margin-bottom: 10px;
    font-weight: 600;
}
#vbthBanerPopup .bp-badge:empty { display: none; }
#vbthBanerPopup .bp-title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: #f4d488;
    word-break: break-word;
}
#vbthBanerPopup .bp-body { padding: 18px 22px 6px; text-align: center; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#vbthBanerPopup .bp-msg {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #d4d4d8;
    white-space: pre-line;
    word-break: break-word;
}
#vbthBanerPopup .bp-msg:empty { display: none; }
#vbthBanerPopup .bp-msg-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 45vh;
    margin: 8px auto;
    border-radius: 10px;
}
#vbthBanerPopup .bp-foot {
    flex-shrink: 0;
    padding: 16px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
#vbthBanerPopup .bp-cta {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: none;
    background: #e8a93a;
    color: #1a1a1d;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    display: block;
    transition: background-color .15s ease;
}
#vbthBanerPopup .bp-cta:hover { background: #f2bd55; color: #1a1a1d; }
#vbthBanerPopup .bp-cta i { margin-left: 5px; }
#vbthBanerPopup .bp-dismiss {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid #c9952f;
    background: rgba(232, 169, 58, 0.10);
    color: #f0cd7a;
    font-size: 14px;
    font-weight: 600;
    /* nv533 (พี่นัด): ประกาศให้ชัด ไม่พึ่งค่า default ของ <button> เผื่อธีมรีเซ็ตทีหลัง */
    text-align: center;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
#vbthBanerPopup .bp-dismiss i { margin-right: 6px; }
#vbthBanerPopup .bp-dismiss:hover {
    background: rgba(232, 169, 58, 0.20);
    color: #f7dd9a;
    border-color: #e8a93a;
}
@media (max-width: 420px) {
    #vbthBanerPopup .bp-card { width: 100%; }
}
/* 2026-06-30 (Nova, พี่นัด): กดชื่อขวาบนเปิดเมนู user แล้ว "ไอคอนแว่นขยาย" (ช่องค้นหา) ลอยทับเมนู (Profile โดนบัง).
   ต้นเหตุจริง: ใน stacking context ของ .navbar-other (z:10) → .navbar-top เป็น position:fixed z:auto(=0)
   แต่ .navbar-search .m-icon = position:absolute z:10 → search icon (10) ชนะ navbar-top (0) เลยทับเมนู user.
   แก้: ยก .navbar-top ให้ z:50 (เหนือ search icon 10 แต่ต่ำกว่า autocomplete-results 1060 ที่ต้องลอยเหนือปุ่ม). */
.navbar-other .navbar-top { z-index: 50; }
.navbar-top .navbar-member { position: relative; z-index: 1200; }
.navbar-top .navbar-member .dropdown,
.navbar-top .navbar-member .dropdown-menu { z-index: 1200; }

/* ═══════════════════════════════════════════════════════════════════════════
   nv401 (พี่นัด) — กระดิ่งแจ้งเตือนลูกค้า (แสดงเฉพาะคนล็อกอินแล้ว)
   markup ถูกฉีดด้วย JS จาก assets/js/custom-script.js เพราะ layout.tpl แก้ไม่ได้
   ═══════════════════════════════════════════════════════════════════════════ */

/* 🪤 main.css:659 ซ่อน li ทุกตัวใน navbar-action ที่ไม่ใช่ตะกร้า/หัวใจ — ต้องปลดให้กระดิ่ง */
.navbar-other .navbar-action li.vb-bell,
.navbar-other .navbar-search li.vb-bell { display: inline-block !important; }

/* 🪤 ธีมมีกฎ .navbar-other ul li{float:left} ที่ specificity สูงกว่า .vb-bell เฉย ๆ
   ต้องเขียนเจาะให้ชนะ ไม่งั้นกระดิ่งไปโผล่ซ้ายช่องค้นหาบนเดสก์ท็อป */
.vb-bell { position: relative; }
.navbar-other .navbar-search > li.vb-bell { float: right; }
/* ไอคอนกระดิ่ง = ชุดเดียวกับธีม (SVG สีฟ้า #0281FB เหมือน icon-heart/icon-cart)
   ธีมมีกฎ `.navbar-other .navbar-search .m-icon{width:22px;height:22px;filter:...}` (main.css:644)
   ที่ย้อมเป็นสีทองให้เอง → กระดิ่งจึงสี/ขนาดเท่าหัวใจกับตะกร้าอัตโนมัติ ไม่ต้องฮาร์ดโค้ดสี */
.m-icon-bell { background-image: url('../images/icon/icon-bell.svg'); }

.vb-bell > a {
    display: inline-block; position: relative; padding: 0 10px;
    line-height: 1; text-decoration: none;
}
.vb-bell > a:hover .m-icon-bell { opacity: .75; }

/* ตัวเลข — ลอกค่าจาก badge ตะกร้าของธีมเป๊ะ (main.css:669) ให้เป็นชุดเดียวกัน */
.vb-bell .vb-bell-badge {
    position: absolute; top: -7px; right: -4px;
    background: #FF0000; color: #fff;
    border: 2px solid #FFFFFF; box-sizing: border-box;
    box-shadow: 0 2px 3px rgba(0,0,0,.25);
    border-radius: 13px;
    font-size: 10px; line-height: 10px; font-weight: 700;
    margin: 0; padding: 2px 5px; text-align: center;
}
.vb-bell .vb-bell-badge:empty { display: none; }

/* ── กล่องรายการ ─────────────────────────────────────────────────────────── */
/* กล่องรายการ — ห้อยใต้กระดิ่ง (absolute) ไม่ใช่ตรึงกับจอ ไม่งั้นไปบังแถบเมนูด้านบน
   กันล้นขอบขวาด้วย right:0 (ชิดขวาของกระดิ่งซึ่งอยู่ใกล้ขอบจออยู่แล้ว) + max-width ตามจอ
   และมี JS ดันกลับเข้าจอให้อีกชั้นถ้าจอแคบผิดคาด */
.vb-bell-panel {
    display: none; position: absolute; top: calc(100% + 6px); right: 0; left: auto; z-index: 1300;
    width: 360px; max-width: calc(100vw - 24px);
    background: #fff; color: #222;
    border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.28);
    overflow: hidden; text-align: left; cursor: default;
}
.vb-bell.open .vb-bell-panel { display: block; }
.vb-bell-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 11px 14px; border-bottom: 1px solid #eee;
    font-weight: 700; font-size: 14px; color: #222;
}
.vb-bell-readall {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: #d88f21; font-size: 12px; font-weight: 600;
}
.vb-bell-readall[disabled] { color: #bbb; cursor: default; }
.vb-bell-list { max-height: min(430px, 60vh); overflow-y: auto; }
.vb-bell-empty { padding: 30px 16px; text-align: center; color: #999; font-size: 13px; }

.vb-bell-item { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px 11px 14px; border-bottom: 1px solid #f2f2f2; }
.vb-bell-item:last-child { border-bottom: 0; }
.vb-bell-item.is-unread { background: #fff8ec; }
.vb-bell-item:hover { background: #f6f6f6; }
.vb-bell-ico {
    flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px; color: #fff;
}
.vb-bell-ico.t-order  { background: #2563eb; }
.vb-bell-ico.t-credit { background: #16a34a; }
.vb-bell-ico.t-job    { background: #d97706; }
.vb-bell-ico.t-stock  { background: #7c3aed; }
.vb-bell-body { flex: 1 1 auto; min-width: 0; }
.vb-bell-link { display: block; color: inherit; text-decoration: none; }
.vb-bell-t { font-size: 13px; font-weight: 700; color: #222; line-height: 1.5; }
.vb-bell-s { font-size: 12px; color: #666; line-height: 1.5; word-break: break-word; }
.vb-bell-time { font-size: 11px; color: #999; margin-top: 2px; }
.vb-bell-x {
    flex: 0 0 auto; background: none; border: 0; cursor: pointer;
    color: #bbb; font-size: 15px; line-height: 1; padding: 2px 4px;
}
.vb-bell-x:hover { color: #e11d48; }

/* ── มือถือ (≤920px ตรงกับ breakpoint ของธีม) ───────────────────────────── */
@media (max-width: 920px) {
    /* กระดิ่งอยู่ "ซ้าย" ของแว่นขยาย
       🪤 ธีมตั้ง display ของ li ไว้ไม่เท่ากัน (inline-block กับ block ปนกัน) ทำให้ float/DOM order
          เอาไม่อยู่ — กระดิ่งไปกองคนละบรรทัดกับแว่นขยาย (พี่นัดเห็นแล้วว่าไม่ตรงไม่สวย)
          ใช้ flex + order คุมแทน ได้ทั้งลำดับซ้าย-ขวาและกึ่งกลางแนวตั้งแน่นอน */
    .navbar-other .navbar-search {
        display: flex !important;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
    }
    .navbar-other .navbar-search > li.vb-bell {
        order: -1;
        flex: 0 0 auto;
        float: none !important;
        display: flex !important;
        align-items: center;
        padding: 10px 2px 10px 12px !important;   /* ชิดแว่นขยายพอดี ไม่เบียดขอบจอ */
    }
    .navbar-other .navbar-search > li:not(.vb-bell) { order: 0; flex: 0 1 auto; }
    /* มือถือธีมย่อแว่นขยายเหลือ 18px — กระดิ่งต้องเท่ากันเป๊ะ ไม่งั้นดูตัวโตกว่าเพื่อน */
    .vb-bell > a {
        display: inline-flex; align-items: center; justify-content: center;
        padding: 0 2px; vertical-align: middle;
    }
    /* +1px ดันลงให้กึ่งกลางตรงกับแว่นขยายเป๊ะ (แว่นเป็น absolute ในฟอร์ม เลยเหลื่อมกัน 1px) */
    .navbar-other .navbar-search .vb-bell .m-icon-bell { width: 18px; height: 18px; position: relative; top: 1px; }
    .vb-bell .vb-bell-badge { top: -6px; right: -7px; font-size: 9.5px; line-height: 9.5px; padding: 2px 4px; }
    /* 🪤 ตอนกดแว่นขยาย ธีมสั่ง .navbar-search.open li{width:100%} ช่องค้นหาจะตกบรรทัด
       → ล็อกความกว้างกระดิ่งไว้ และซ่อนตอนกำลังค้นหาเพื่อให้ช่องค้นหาเต็มจอ */
    .navbar-other .navbar-search.open li.vb-bell { width: auto !important; display: none !important; }
    /* มือถือ: ตรึงกับจอ กางเต็มความกว้างโดยเว้นขอบ 8px ทั้งสองข้าง — ไม่มีทางล้นออกนอกจอ */
    .vb-bell-panel { position: fixed !important; top: 54px; right: 8px !important; left: 8px !important; width: auto; max-width: none; }
}

/* ── nv719 (Nova 2026-10-02, พี่นัด) สินค้าที่ใช้ร่วมกัน — การ์ดใต้คำอธิบายสั้น + ป๊อปอัปหยิบใส่ตะกร้า (โทนเดียวกับ Baner Popup) ── */
.nv-comp { margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); }
.nv-comp-title { font-size: 16px; color: #e8a93a; margin: 0 0 8px; font-weight: 700; line-height: 1.5; }
.nv-comp-title .fa { margin-right: 6px; }
/* nv719b: การ์ดแนวนอน รูปซ้าย (กด=รูปเต็ม) ขวา ชื่อ+รายละเอียดสั้น+ปุ่ม */
.nv-comp-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
/* nv719c: รูป 160px คงที่ (!important กันธีมย่อปุ่ม) · ปุ่มหยิบใส่ตะกร้าชิดขวาสุด กลางแนวตั้ง */
/* nv719k (พี่นัด "ลดขนาดลงอีก มันใหญ่ไปมาก"): การ์ดกะทัดรัด รูป 100px ตัวหนังสือ/ปุ่มเล็กลง */
.nv-comp-grid { gap: 5px; }
.nv-comp-card { background: #1a1a1d; border: 1px solid #2c2c31; border-radius: 9px; padding: 5px 7px; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 7px; align-items: center; text-align: left; }   /* nv719o: เล็กลงอีกนิด */   /* nowrap = ปุ่มอยู่ขวาสุดบรรทัดเดียวกันเสมอบนจอใหญ่ */
.nv-comp-img { display: block !important; flex: 0 0 64px !important; width: 64px !important; height: 64px !important; min-width: 64px; max-width: 64px; border: 0 !important; padding: 0 !important; margin: 0 !important; border-radius: 8px; overflow: hidden; background: #111113; cursor: zoom-in; line-height: 0; box-sizing: border-box; }
.nv-comp-img img { width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover; display: block; }
/* nv719d: หมดทุกกลิ่น — แถบคาดเทาแบบหน้าสินค้า (คลาส .sold-out-overlay จาก styles.css) ย่อให้พอดีรูป 160px */
.nv-comp-img { position: relative; }
.nv-comp-img .sold-out-overlay { display: block; font-size: 10px; line-height: 1.3; padding: 4px 2px; text-align: center; z-index: 2; }
/* nv719e: พี่นัด "สินค้าหมดก็ไม่ต้องทำรูปเทา" — รูปปกติ มีแค่แถบคาด */
.nv-comp-actions .nv-comp-btn:disabled { background: #3a3a40; color: #999; cursor: default; }
.nv-comp-info { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 3px; align-self: center; }
.nv-comp-actions { flex: 0 0 auto; margin-left: auto; align-self: center; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }   /* nv719e: คอลัมน์ปุ่มขวา */
.nv-comp-actions { gap: 6px; }
.nv-comp-actions .nv-comp-btn { padding: 5px 8px; font-size: 11.5px; white-space: nowrap; }
.nv-comp-detail { display: block; text-align: center; padding: 5px 10px; border-radius: 8px; border: 1px solid #b8862f; color: #e8a93a; font-weight: 700; font-size: 13px; text-decoration: none; line-height: 1.5; white-space: nowrap; }
.nv-comp-detail:hover { background: #2a210f; color: #f2bd55; text-decoration: none; }
.nv-comp-short { font-size: 10.5px; line-height: 1.4; color: #bbb; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nv-comp-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nv-comp-noimg { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 120px; color: #555; font-size: 28px; }
.nv-comp-name { font-size: 12px; font-weight: 700; line-height: 1.35; color: #fff; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nv-comp-btn { border: 0; border-radius: 8px; background: #d88f21; color: #fff; font-weight: 700; padding: 9px 10px; font-size: 13.5px; cursor: pointer; line-height: 1.5; }
.nv-comp-btn:hover { background: #e8a93a; color: #1a1a1d; }
/* nv719h: ปุ่มดูทั้งหมด + ลิสต์ในป๊อปอัป */
.nv-comp-all { display: block; width: 100%; margin-top: 5px; padding: 6px 10px; font-size: 12.5px !important; border-radius: 10px; border: 1px solid #b8862f; background: transparent; color: #e8a93a; font-weight: 700; font-size: 14px; cursor: pointer; line-height: 1.5; }
.nv-comp-all:hover { background: #2a210f; color: #f2bd55; }
.nv-comp-allrow { cursor: pointer; flex-wrap: nowrap; }
.nv-comp-allrow:hover { background: rgba(255,255,255,.04); }
.nv-comp-allrow.is-out { opacity: .7; }
.nv-comp-allthumb { flex-basis: 64px; width: 64px; height: 64px; cursor: pointer; }
.nv-comp-rshort { font-size: 12px; color: #aaa; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.nv-comp-chev { color: #777; margin-left: auto; flex: 0 0 auto; }
.nv-comp-back { border: 0; background: transparent; color: #e8a93a; font-size: 13px; font-weight: 700; cursor: pointer; padding: 0 0 8px; }
.nv-comp-back:hover { color: #f2bd55; }
/* nv719p: แถบปุ่มใต้รายละเอียดสินค้า — เปิดหน้ารวม + Copy Link */
.nv-comp-linkbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 12px; }
.nv-comp-linkbtn, .nv-comp-copy { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 700; line-height: 1.5; cursor: pointer; text-decoration: none; }
.nv-comp-linkbtn { background: #d88f21; color: #fff; border: 1px solid #d88f21; }
.nv-comp-linkbtn:hover { background: #e8a93a; color: #1a1a1d; text-decoration: none; }
.nv-comp-copy { background: transparent; color: #e8a93a; border: 1px solid #b8862f; }
.nv-comp-copy:hover { background: #2a210f; color: #f2bd55; }
.nv-comp-copy.is-done { color: #8bd38b; border-color: #3c7a3c; }
/* nv719q: หน้ารวมสินค้าที่ใช้ร่วมกัน (/product/<slug>/c) — ใช้การ์ดของธีม (.product .item) เพิ่มแค่หัวเรื่อง */
.nv-compat-page { padding-top: 10px; }
.nv-compat-title { font-size: 24px; margin: 4px 0 6px; line-height: 1.5; }
.nv-compat-title small { font-size: 14px; color: #aaa; font-weight: 400; }
.nv-compat-sub { color: #aaa; font-size: 13px; margin: 0 0 16px; line-height: 1.6; }
.nv-compat-sub a { color: #e8a93a; }
.nv-compat-item { cursor: pointer; }
.nv-comp-ov { position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,.72); z-index: 9990; display: flex; align-items: center; justify-content: center; padding: 16px; }
body.nv-comp-lock { overflow: hidden; }
.nv-comp-dlg { position: relative; width: 100%; max-width: 640px; max-height: calc(100vh - 32px); background: #141416; border: 1px solid #b8862f; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.6); display: flex; flex-direction: column; overflow: hidden; color: #eee; }
.nv-comp-x { position: absolute; top: 6px; right: 8px; width: 38px; height: 38px; border: 0; background: transparent; color: #bbb; font-size: 28px; line-height: 1; cursor: pointer; z-index: 2; }
.nv-comp-x:hover { color: #fff; }
.nv-comp-body { overflow: auto; padding: 16px; -webkit-overflow-scrolling: touch; }
.nv-comp-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; padding-right: 30px; }
.nv-comp-mainimg { flex: 0 0 120px; width: 120px; height: 120px; border: 0; padding: 0; border-radius: 10px; overflow: hidden; background: #111113; cursor: zoom-in; }
.nv-comp-mainimg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nv-comp-hinfo h4 { margin: 0 0 6px; font-size: 17px; color: #fff; line-height: 1.6; }
.nv-comp-hinfo p { margin: 0; font-size: 13px; line-height: 1.7; color: #bbb; }
/* nv719f: ตารางโปรไล่ระดับในป๊อปอัป — หน้าตาเดียวกับการ์ด .qty-discount-card บนหน้าสินค้า */
.nv-comp-tiers { margin: 4px 0 12px; padding: 12px; border-radius: 14px; background: linear-gradient(180deg, #2a210f 0%, #1a1a1d 100%); border: 1px solid #b8862f; }
.nv-tiers-head { font-weight: 700; font-size: 15px; color: #f3a72e; text-align: center; margin: 0 0 10px; line-height: 1.5; }
.nv-tiers-table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden; background: rgba(0,0,0,.18); margin: 0; }
.nv-tiers-table th, .nv-tiers-table td { padding: 9px 6px; text-align: center; font-size: 12.5px; line-height: 1.5; border-bottom: 1px solid rgba(255,255,255,.08); vertical-align: middle; }
.nv-tiers-table thead th { background: rgba(243,167,46,.2); color: #fff; font-weight: 600; font-size: 12px; border-bottom: 1px solid rgba(243,167,46,.38); }
.nv-tiers-table tbody tr:last-child td { border-bottom: 0; }
.nv-tiers-table .qdc-qty { font-weight: 600; color: #fff; }
.nv-tiers-table .qdc-full { color: #bdbdbd; }
.nv-tiers-table .qdc-save { color: #34d399; font-weight: 600; }
.nv-tiers-table .qdc-final { color: #f3a72e; font-weight: 700; font-size: 13.5px; }
@media (max-width: 600px) { .nv-tiers-table th, .nv-tiers-table td { padding: 8px 4px; font-size: 11.5px; } .nv-tiers-table .qdc-final { font-size: 12.5px; } }
.nv-comp-list { border-top: 1px solid #2c2c31; }
.nv-comp-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #2c2c31; flex-wrap: wrap; }
.nv-comp-row.is-out { opacity: .55; }
.nv-comp-thumb { flex: 0 0 52px; width: 52px; height: 52px; border: 0; padding: 0; border-radius: 8px; overflow: hidden; background: #111113; cursor: zoom-in; color: #666; }
.nv-comp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nv-comp-rinfo { flex: 1 1 140px; min-width: 0; }
.nv-comp-rname { font-size: 14px; line-height: 1.6; color: #f3f3f3; }
.nv-comp-rstock { font-size: 11.5px; line-height: 1.6; color: #8bd38b; }
.is-out .nv-comp-rstock { color: #d66; }
.nv-comp-rprice { font-size: 14px; color: #e8a93a; white-space: nowrap; line-height: 1.6; }
.nv-comp-rprice s { color: #777; font-size: 12px; margin-right: 4px; }
.nv-comp-qty { display: inline-flex; align-items: center; border: 1px solid #3a3a40; border-radius: 8px; overflow: hidden; }
.nv-comp-qbtn { width: 32px; height: 34px; border: 0; background: #1f1f23; color: #eee; font-size: 18px; cursor: pointer; line-height: 1; }
.nv-comp-qbtn:hover { background: #2a2a30; }
.nv-comp-qin { width: 42px; height: 34px; border: 0; background: #0f0f11; color: #fff; text-align: center; font-size: 14px; }
.nv-comp-add { border: 0; border-radius: 8px; background: #d88f21; color: #fff; font-weight: 700; padding: 8px 10px; font-size: 13px; cursor: pointer; white-space: nowrap; line-height: 1.5; }
.nv-comp-add:hover { background: #e8a93a; color: #1a1a1d; }
.nv-comp-add:disabled { opacity: .6; cursor: default; }
.nv-comp-out { font-size: 12.5px; color: #d66; font-weight: 700; padding: 6px 10px; border: 1px solid #5a2a2a; border-radius: 8px; line-height: 1.5; }
.nv-comp-flash { flex-basis: 100%; font-size: 12.5px; line-height: 1.6; color: #8bd38b; display: none; }
.nv-comp-flash.show { display: block; }
.nv-comp-flash.is-bad { color: #f08080; }
.nv-comp-foot { padding-top: 12px; text-align: center; }
.nv-comp-go { display: inline-block; padding: 9px 18px; border-radius: 8px; border: 1px solid #b8862f; color: #e8a93a; font-weight: 700; text-decoration: none; line-height: 1.5; }
.nv-comp-go:hover { background: #2a210f; color: #f2bd55; text-decoration: none; }
.nv-comp-lb { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 9995; background: rgba(0,0,0,.9); display: flex; align-items: center; justify-content: center; cursor: zoom-out; padding: 20px; }
.nv-comp-lb img { max-width: 100%; max-height: 100%; border-radius: 10px; }
.nv-comp-loading, .nv-comp-err { padding: 24px; text-align: center; color: #bbb; line-height: 1.6; }
@media (max-width: 600px) {
    /* nv719n (พี่นัด "เล็กลงอีกนิดนึง" — มือถือ): ปุ่มอยู่ขวาแถวเดียวกัน ไม่กินทั้งแถว รูป 60px */
    .nv-comp-img { flex-basis: 52px !important; width: 52px !important; height: 52px !important; min-width: 52px; max-width: 52px; }
    .nv-comp-card { flex-wrap: nowrap; padding: 5px; gap: 6px; }
    .nv-comp-name { font-size: 11.5px; }
    .nv-comp-short { -webkit-line-clamp: 2; font-size: 10px; }
    .nv-comp-actions { flex-basis: auto; margin-left: auto; flex-direction: column; gap: 4px; }
    .nv-comp-actions .nv-comp-btn { padding: 5px 7px; font-size: 11px; }
    .nv-comp-actions .nv-comp-btn .fa { display: none; }
    .nv-comp-detail { padding: 4px 8px; font-size: 11.5px; }
    .nv-comp-ov { padding: 8px; align-items: flex-end; }
    .nv-comp-dlg { max-height: 92vh; }
    .nv-comp-head { flex-direction: column; }
    .nv-comp-mainimg { width: 140px; height: 140px; flex-basis: auto; }
    .nv-comp-add { flex: 1 1 100%; }
}

/* ── nv721 (Nova 2026-10-02, พี่นัด): live search dropdown — ของหมดอยู่ล่าง + ป้าย "สินค้าหมด" · เกิน 6 → ปุ่ม "ดูเพิ่มเติม" (custom-script.js) ── */
.autocomplete-results-list ul.nv-ac-list { max-height: none !important; }                 /* 6 แถวโชว์ครบ ไม่ต้องเลื่อน */
.autocomplete-results-list .nv-ac-row.is-out .ac-name { color: #8a8a8a; }
.autocomplete-results-list .nv-ac-row.is-out .ac-price { color: #9a9a9a; font-weight: 600; }
.autocomplete-results-list .nv-ac-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.autocomplete-results-list .nv-ac-out { font-size: 11px; font-weight: 700; line-height: 1; color: #fff; background: #8e8e8e; border-radius: 999px; padding: 4px 8px; white-space: nowrap; }
.autocomplete-results-list .nv-ac-out .fa { margin-right: 2px; }
/* ปุ่มดูเพิ่มเติม — ใส่ !important เพราะกฎ a ของ navbar ในธีมทับปุ่ม .ac-viewall เดิมจนพื้นใส+ตัวขาว (มองไม่เห็น) */
.autocomplete-results-list a.nv-ac-more { display: block !important; text-align: center !important; padding: 11px 12px !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.4 !important; color: #fff !important; background: #f7941e !important; text-decoration: none !important; border-top: 1px solid #e5e5e5; }
.autocomplete-results-list a.nv-ac-more:hover { background: #e07f0a !important; color: #fff !important; }

/* ── nv926 (Nova 2026-10-26, พี่นัด "ข้อมูลสินค้ามันบัค ไม่ยอมแสดงเต็มพื้นที่ · เช็คในโมบาย · จัดวางตามที่เลือก บน กลาง ซ้าย ขวา") ──
   หน้ารายละเอียดสินค้า: ธีมวาง "รายละเอียดสินค้า" ไว้คอลัมน์ครึ่งจอ (col-sm-6) คู่ช่องวิดีโอ (ส่วนใหญ่ว่าง) → ให้เต็มความกว้าง วิดีโอ (ถ้ามี) ลงไปอยู่ใต้ */
.section-product-detail > .container > .row > .col-sm-6 { width: 100%; float: none; }
/* รูปจาก editor ติด height ตายตัว (เช่น height:1000px) → จอแคบ/มือถือรูปยืดเพี้ยน: คงสัดส่วนเสมอ
   ไม่แตะ float / margin / text-align / vertical-align ที่เลือกใน editor (ซ้าย-กลาง-ขวา-บน-ล่าง ใช้ตามนั้น) */
.product-desc img { max-width: 100%; height: auto !important; }
.product-desc iframe, .product-desc video { max-width: 100%; }
.product-desc table { max-width: 100%; }
.product-desc { overflow-wrap: anywhere; }
.product-desc::after { content: ""; display: table; clear: both; }   /* รูปจัดซ้าย/ขวา (float) ไม่ล้นไปทับตารางสเปคด้านล่าง */
/* ธีมตั้ง h2 ของ section นี้ line-height 20px (ไว้ให้หัว "รายละเอียดสินค้า") → หัวข้อในเนื้อหาที่ยาว 2 บรรทัดเพี้ยน · ไทยต้อง ≥1.6 */
.product-desc h1, .product-desc h2, .product-desc h3, .product-desc h4 { line-height: 1.6; margin: 18px 0 10px; }
.product-desc h1 *, .product-desc h2 *, .product-desc h3 *, .product-desc h4 * { line-height: inherit; }
.product-desc p, .product-desc li { line-height: 1.7; }
@media (max-width: 767px) {
    .product-desc h1, .product-desc h2 { font-size: 18px; }
    .product-desc h3, .product-desc h4 { font-size: 16px; }
}
/* nv926b (พี่นัด "ด้านซ้ายเว้นไว้นิดนึง มันเบียดจอ โอกาสมองไม่เห็นสูง") — มือถือ: ข้อความชิดขอบ + เลขลำดับ 2 หลัก (10.–15.) ตกขอบซ้าย */
.product-desc ol, .product-desc ul { padding-left: 2.2em; }
.product-desc ol li, .product-desc ul li { padding-left: 2px; }
@media (max-width: 767px) {
    .section-product-detail > .container { padding-left: 20px; padding-right: 20px; }
    .product-desc { padding: 0 2px; }
    .product-desc ol, .product-desc ul { padding-left: 2.4em; }
}

/* nv930:logo-size:start — เขียนอัตโนมัติจากหลังบ้าน Settings → Appearance ห้ามแก้มือในบล็อกนี้ */
@media (min-width: 921px) {
    .navbar-brand { width: 80px; height: 80px; top: 39px; }
    .navbar .navbar-collapse { padding-left: 115px; }
    .navbar { padding-top: 56.5px; padding-bottom: 15.5px; }
    #wrapper { padding-top: 123px; }
}
@media (max-width: 920px) {
    .navbar-brand { width: 70px; height: 70px; top: 8px; margin-left: -35px; }
    .navbar { padding-top: 23px; padding-bottom: 23px; }
    #wrapper { padding-top: 89px; }
    .vb-bell-panel { top: 85px !important; }
}
/* nv930:logo-size:end */

/* cx1141 — expanded search gets its own row below the logo on mobile/tablet. */
@media (max-width: 1199px) {
    header.cx-mobile-search-open .navbar-other .navbar-search.open {
        position: fixed !important;
        top: var(--cx-search-top, 89px) !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: none;
        margin: 0;
        padding: 0;
        display: flex !important;
        align-items: center;
        background: #1c1c1c;
        border-top: 1px solid rgba(255,255,255,.08);
        border-bottom: 1px solid rgba(255,255,255,.12);
        z-index: 1061;
    }
    header.cx-mobile-search-open .navbar-search.open > li.vb-bell { display: none !important; }
    header.cx-mobile-search-open .navbar-search.open > li:not(.vb-bell) {
        display: block;
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
        padding: 12px 16px;
    }
    header.cx-mobile-search-open .navbar-search.open form {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        margin: 0;
    }
    header.cx-mobile-search-open .navbar-search.open form .form-control {
        display: block;
        flex: 1 1 auto;
        min-width: 0;
        width: 0;
        float: none;
        background: #f5f5f5 !important;
        padding: 8px 16px 8px 40px;
        font-size: 16px;
    }
    header.cx-mobile-search-open .navbar-search.open form .btn-cancel {
        display: block;
        flex: 0 0 56px;
        float: none;
        width: 56px;
        min-height: 36px;
        padding: 8px 0;
        color: #d88f21 !important;
        text-align: center;
    }
    header.cx-mobile-search-open .navbar-search.open .autocomplete-results-list {
        top: 100% !important;
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        max-height: calc(100vh - var(--cx-search-top, 89px) - 76px);
        max-height: calc(100dvh - var(--cx-search-top, 89px) - 76px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

/* cx1150 — keep intrinsic image dimensions proportional when a viewport narrows.
   Head images are shared by article and promotion details; delivery is the
   wide home banner. Card crops, product galleries and gift thumbnails keep
   their existing presentation rules. */
.article-detail .head img.img,
.ex-delivery img {
    height: auto;
}

/* cx1306 — keep the product list and LINE buttons together above the description. */
.product-short-desc .cx-product-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.product-short-desc .cx-product-actions .btn.btn-copylist,
.product-short-desc .cx-product-actions .stock-notify-wrap {
    margin: 0;
}

.product-short-desc .cx-product-actions .stock-notify-wrap {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
}

.product-short-desc .cx-product-actions .btn.btn-stock-notify {
    width: auto;
    max-width: 100%;
    min-height: 32px;
    gap: 6px;
    padding: 6px 10px !important;
    font-size: 12px;
    line-height: 18px;
    white-space: normal;
}

.product-short-desc .cx-product-actions .btn.btn-stock-notify .bis-bell {
    position: static;
    flex: none;
    margin-right: 0;
    font-size: 13px;
}

/* cx1331 — separate the points amount and the points-only status from the instructions. */
.product-form .product-name .cx-points-only-price {
    padding: 12px 16px;
    border: 1px solid rgba(243, 167, 46, .62);
    border-radius: 12px;
    background: linear-gradient(125deg, #3c2f1d, #2b251c);
    line-height: 1.55;
}

.product-form .product-name .cx-points-only-price > .-price {
    display: block;
    font-size: clamp(22px, 6vw, 28px);
    color: #ffd382 !important;
}

.product-form .cx-points-only-price .fa-gift {
    margin-inline-end: 2px;
    font-size: .85em;
}

.product-form .cx-points-only-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 6px;
    background: #f3a72e;
    color: #241807;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.6;
}

/* cx1313 — keep the same button appearance on both pages from the first paint. */
.cx-cart-admin {
    clear: both;
    width: 100%;
    max-width: 413px;
    container-type: inline-size;
    margin-top: 10px;
}

.cx-cart-admin-button,
.section-cart #btnCopyCartList {
    --cx-cart-ready-bg: linear-gradient(90deg, #f7aa24 0%, #ee9c12 50%, #05ce56 50%, #04bc48 100%);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    box-sizing: border-box;
    width: 100%;
    min-height: 46px;
    padding: 6px 54px 6px 10px;
    border: 0;
    border-radius: 30px;
    color: #fff;
    background: linear-gradient(90deg, #ab751f 50%, #00853b 50%);
    box-shadow: inset 0 1px 2px rgba(255,255,255,.22), 0 3px 8px rgba(0,0,0,.22);
    font: inherit;
    font-size: 17px;
    font-size: clamp(17px, 5.7cqi, 20px);
    font-weight: 700;
    line-height: 1.6;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0,0,0,.65);
    white-space: normal;
    overflow-wrap: anywhere;
}

.cx-cart-admin-button.has-items { background: var(--cx-cart-ready-bg); }
.cx-cart-admin-button:hover,
.section-cart #btnCopyCartList:hover {
    box-shadow: inset 0 1px 2px rgba(255,255,255,.38), 0 3px 8px rgba(0,0,0,.22);
}
.cx-cart-admin-button:focus-visible,
.section-cart #btnCopyCartList:focus-visible { outline: 2px solid #ffd180; outline-offset: 3px; }
.cx-cart-admin-button:disabled { opacity: .7; cursor: wait; }

.section-cart .cart-copy-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 413px;
    container-type: inline-size;
    margin-inline: auto;
    row-gap: 8px;
    justify-items: center;
}
.section-cart #btnCopyCartList {
    grid-area: 1 / 1;
    /* The template switches to a green !important background when LINE config resolves. */
    background: var(--cx-cart-ready-bg) !important;
    filter: none;
    transition: none;
}
.section-cart #btnCopyCartList > * { display: none; }
.section-cart #btnCopyCartList::before {
    content: "ส่งรายการในตะกร้าให้ Admin";
    min-width: 0;
}
.section-cart #btnCopyCartList::after { content: "LINE"; }

.cx-cart-admin-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}
.cx-cart-admin-logo,
.section-cart #btnCopyCartList::after {
    display: grid;
    place-items: center;
    width: 36px;
    height: 22px;
    flex: none;
    border-radius: 50% 50% 50% 22%;
    color: #00843b;
    background: #fff;
    font-size: 11px;
    font-weight: 900;
    text-shadow: none;
    line-height: 1;
}
.cx-cart-admin-count {
    min-width: 20px;
    box-sizing: border-box;
    padding: 2px 5px;
    border: 2px solid #fff;
    border-radius: 13px;
    background: #f00;
    color: #fff;
    box-shadow: 0 2px 3px rgba(0,0,0,.25);
    font-size: 10px;
    font-weight: 700;
    line-height: 10px;
    text-align: center;
    text-shadow: none;
    white-space: nowrap;
    pointer-events: none;
}
.cx-cart-admin-button > .cx-cart-admin-count {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
}
.section-cart .cart-copy-actions > .cx-cart-admin-count {
    grid-area: 1 / 1;
    justify-self: end;
    align-self: center;
    z-index: 1;
    margin-right: 14px;
}
.cx-cart-admin-count[hidden] { display: none !important; }
.cx-cart-admin-status { margin: 7px 0 0; color: #dedede; font-size: 12px; line-height: 1.6; }

@container (max-width: 350px) {
    .cx-cart-admin-button,
    .section-cart #btnCopyCartList { padding-inline: 5px 44px; gap: 4px; letter-spacing: -.15px; }
    .cx-cart-admin-label { gap: 4px; }
    .cx-cart-admin-logo,
    .section-cart #btnCopyCartList::after { width: 26px; height: 20px; }
    .cx-cart-admin-count { padding-inline: 3px; }
    .cx-cart-admin-button > .cx-cart-admin-count { right: 7px; }
    .section-cart .cart-copy-actions > .cx-cart-admin-count { margin-right: 7px; }
}

/* cx1317 — keep the cart label on one line in mobile browsers. */
@media (max-width: 767px) {
    .section-cart .cart-copy-actions { max-width: 288px; }
    /* nv1378: on the product page, match the width of the buy buttons above it. */
    .cx-cart-admin { width: auto; max-width: none; margin-inline: 5px; }

    /* cx1321 — remove the checkout wrapper's button margin from the LINE action. */
    .section-cart .btn-box .cart-copy-box #btnCopyCartList { margin: 0; }

    .cx-cart-admin-button,
    .section-cart #btnCopyCartList {
        min-height: 44px;
        font-size: 13px;
        font-size: clamp(12px, 4.8cqi, 14px);
        line-height: 1.35;
        white-space: nowrap;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
}

.cx-cart-admin-modal.in {
    display: flex !important;
    padding: 14px !important;
}
.cx-cart-admin-modal .modal-dialog {
    width: 100%;
    max-width: 384px;
    margin: auto;
}
.cx-cart-admin-modal .modal-content {
    overflow: hidden;
    color: #ece9e5;
    background: #1a1a1d;
    border: 1px solid #9c752f;
    border-radius: 16px;
    box-shadow: 0 16px 45px rgba(0,0,0,.5);
}
.cx-cart-admin-modal .modal-header {
    position: relative;
    padding: 16px 16px 12px;
    text-align: center;
    background: #111113;
    border-bottom: 1px solid #313034;
}
.cx-cart-admin-modal .cx-cart-admin-x {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #ebc775;
    background: #262426;
    font-size: 22px;
    line-height: 1;
}
.cx-cart-admin-emblem {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    margin: 0 auto 7px;
    border: 1px solid #b58531;
    border-radius: 50%;
    color: #efb84f;
    background: #2a2112;
    font-size: 19px;
}
.cx-cart-admin-badge {
    display: inline-block;
    margin-bottom: 5px;
    padding: 2px 10px;
    border-radius: 20px;
    color: #242019;
    background: #e8a93a;
    font-size: 11px;
    font-weight: 700;
}
.cx-cart-admin-modal .modal-title { margin: 0; color: #f4d488; font-size: 19px; font-weight: 700; }
.cx-cart-admin-modal .modal-body { padding: 12px 15px 0; }
.cx-cart-admin-modal .modal-body p { margin: 0; color: #e2ded9; line-height: 1.6; text-align: center; }
.cx-cart-admin-modal .modal-footer { display: flex; gap: 8px; padding: 12px 15px 15px; border: 0; }
.cx-cart-admin-modal .modal-footer .btn {
    flex: 1 1 0;
    min-height: 40px;
    margin: 0;
    padding: 6px 9px !important;
    border: 1px solid #b98632 !important;
    border-radius: 9px;
    color: #221a0b !important;
    background: #e8a93a !important;
    font-weight: 700;
}
.cx-cart-admin-modal .modal-footer .btn-default:not(:only-child):has(+ .btn:not([hidden])) {
    color: #f2ca76 !important;
    background: #29241d !important;
}
.cx-cart-admin-example {
    margin-top: 10px;
    padding: 6px 8px 2px;
    border: 1px solid #403627;
    border-radius: 10px;
    background: #222124;
    text-align: left;
}
.cx-cart-admin-example-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    color: #f1c470;
    font-size: 12px;
}
.cx-cart-admin-example-head span { color: #d4c2a1; white-space: nowrap; }
.cx-cart-admin-example ul { margin: 3px 0 0; padding: 0; list-style: none; }
.cx-cart-admin-example li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 4px 0;
    overflow: hidden;
}
.cx-cart-admin-example li + li { border-top: 1px solid #363338; }
.cx-cart-admin-example li img { width: 28px; height: 28px; border-radius: 6px; object-fit: cover; filter: blur(3px); opacity: .7; }
.cx-cart-admin-example li > div { filter: blur(3px); opacity: .7; user-select: none; }
.cx-cart-admin-example li strong, .cx-cart-admin-example li small { display: block; overflow-wrap: anywhere; }
.cx-cart-admin-example li strong { font-size: 12px; line-height: 1.35; }
.cx-cart-admin-example li small { color: #c4bdba; font-size: 11px; line-height: 1.4; }
.cx-cart-admin-example-qty {
    padding: 2px 6px;
    border-radius: 9px;
    color: #f4d488;
    background: #3d3220;
    font-size: 11px;
    white-space: nowrap;
}
.cx-cart-admin-modal textarea {
    width: 100%;
    margin-top: 12px;
    padding: 8px;
    border: 1px solid #777;
    border-radius: 6px;
    color: #222;
    background: #fff;
    font-size: 13px;
}
.cx-cart-admin-status[hidden],
.cx-cart-admin-modal [hidden] { display: none !important; }
.cx-cart-admin-clipboard { position: fixed; top: 0; left: -9999px; }

/* cx1310 — prioritize the empty-cart message and mute the decorative examples. */
.cx-cart-admin-modal.is-cart-empty .modal-dialog { max-width: 414px; }
.cx-cart-admin-modal.is-cart-empty .cx-cart-admin-badge { font-size: 13px; line-height: 1.6; }
.cx-cart-admin-modal.is-cart-empty .modal-title {
    font-size: clamp(22px, 5.6vw, 25px);
    font-weight: 800;
    line-height: 1.65;
}
.cx-cart-admin-modal.is-cart-empty .modal-body p {
    color: #f7f3eb;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.65;
}
.cx-cart-admin-modal.is-cart-empty .modal-footer .btn {
    font-size: 16px;
    line-height: 1.6;
}