/* ===========================================================
   快抄 v0.8 Alpha
   Daily / Accessible / Comfortable
   =========================================================== */


:root {

    --ui-scale: 1;
    --order-scale: 1.2;

    /* 背景不是純白 */

    --bg: #EFF1F2;
    --bg-warm: #F2F1ED;

    --surface: #FFFFFF;
    --surface-soft: #F6F7F8;
    --surface-hover: #ECEFF2;

    --paper: #FFFDF7;

    --text: #20252B;
    --text-2: #505B67;
    --muted: #707B86;

    --border: #D7DDE2;
    --border-strong: #B8C2CB;

    /* 穩重主藍 */

    --primary: #3E609B;
    --primary-hover: #325284;
    --primary-soft: #E8EEF7;

    /* 部門 */

    --dept12: #3E6493;
    --dept12-bg: #E7EEF7;

    --dept11: #287061;
    --dept11-bg: #E2F1EC;

    /* 品牌辨識 */

    --orange: #C96E39;
    --orange-soft: #FFF0E5;

    --baby: #347D77;
    --baby-soft: #E5F3F1;

    /* 狀態 */

    --danger: #B7484F;
    --danger-soft: #FBE9EA;

    --success: #287459;

    --shadow:
        0 7px 24px
        rgba(34,47,60,.06);

    --shadow-hover:
        0 12px 30px
        rgba(34,47,60,.11);
}


/* ===========================================================
   深色
   =========================================================== */

html[data-theme="dark"] {

    --bg: #171C23;
    --bg-warm: #171C23;

    --surface: #202833;
    --surface-soft: #293340;
    --surface-hover: #323D4B;

    --paper: #222A34;

    --text: #F5F7FA;
    --text-2: #D0D7DF;
    --muted: #A1ACB8;

    --border: #394553;
    --border-strong: #657383;

    --primary: #7890CF;
    --primary-hover: #899FDC;
    --primary-soft: #2B3852;

    --dept12: #BDC9FF;
    --dept12-bg: #2B3757;

    --dept11: #A9E3D2;
    --dept11-bg: #213F39;

    --orange: #FFC19B;
    --orange-soft: #493229;

    --baby: #A6E1D9;
    --baby-soft: #25413F;

    --danger: #FF9EA3;
    --danger-soft: #4D292D;

    --success: #7AD0AD;

    --shadow:
        0 9px 28px
        rgba(0,0,0,.18);

    --shadow-hover:
        0 14px 35px
        rgba(0,0,0,.27);
}


/* 柔暗＝偏暖米灰，不是科技灰 */

html[data-theme="soft"] {

    --bg: #E8E5DF;
    --bg-warm: #E8E5DF;

    --surface: #FBFAF7;
    --surface-soft: #F2F0EA;
    --surface-hover: #E9E6DF;

    --paper: #FFFDF6;

    --text: #292B2D;
    --text-2: #555A5E;
    --muted: #777C80;

    --border: #D5D0C8;
    --border-strong: #B5AEA4;

    --primary: #526B8C;
    --primary-hover: #435B7A;
    --primary-soft: #E2E7ED;
}


/* ===========================================================
   高對比
   =========================================================== */

html[data-contrast="true"] {

    --text: #000000;
    --text-2: #171717;
    --muted: #3E444A;

    --border: #858F98;
    --border-strong: #535D66;
}


html[data-theme="dark"][data-contrast="true"] {

    --text: #FFFFFF;
    --text-2: #FFFFFF;
    --muted: #D6DCE3;

    --border: #7A8695;
    --border-strong: #AFB8C3;
}


/* ===========================================================
   Base
   =========================================================== */

* {
    box-sizing: border-box;
}


html,
body {

    margin: 0;

    min-height: 100%;
}


html {

    background:
        var(--bg);
}


body {

    margin: 0;

    color:
        var(--text);

    background:
        linear-gradient(
            180deg,
            var(--bg-warm) 0,
            var(--bg) 420px
        );

    font-family:
        "PingFang TC",
        "Noto Sans TC",
        "Microsoft JhengHei",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size:
        calc(
            17px *
            var(--ui-scale)
        );

    line-height: 1.5;

    -webkit-font-smoothing:
        antialiased;
}


button,
input {

    font:
        inherit;
}


button {

    cursor:
        pointer;

    -webkit-tap-highlight-color:
        transparent;

    transition:
        transform .08s ease,
        background .13s ease,
        border-color .13s ease,
        box-shadow .13s ease,
        color .13s ease;
}


button:active {

    transform:
        scale(.955);
}


button:focus-visible,
input:focus-visible {

    outline:
        3px solid
        rgba(62,96,155,.25);

    outline-offset:
        2px;
}


.ambient {

    display:
        none;
}


/* ===========================================================
   Header
   =========================================================== */

.app-header {

    position:
        sticky;

    top: 0;

    z-index: 50;

    background:
        color-mix(
            in srgb,
            var(--surface) 96%,
            transparent
        );

    border-bottom:
        1px solid
        var(--border);

    box-shadow:
        0 2px 9px
        rgba(30,40,50,.045);

    backdrop-filter:
        blur(14px);
}


.header-inner {

    width:
        min(1480px,100%);

    min-height:
        76px;

    margin:
        0 auto;

    padding:
        max(
            11px,
            env(safe-area-inset-top)
        )
        20px
        11px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;
}


.brand {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;
}


.brand-logo {

    width: 48px;
    height: 48px;

    border-radius:
        13px;

    box-shadow:
        0 5px 15px
        rgba(44,60,80,.13);
}


.brand-title {

    color:
        var(--text);

    font-size:
        1.2em;

    font-weight:
        900;
}


.brand-title span {

    margin-left:
        6px;

    color:
        var(--muted);

    font-size:
        .54em;

    font-weight:
        700;
}


.brand-subtitle {

    margin-top:
        1px;

    color:
        var(--muted);

    font-size:
        .67em;
}


/*
 * Header 內按鈕自動排在右側
 */

.header-inner > .toolbar-button {

    margin-left:
        auto;
}


.header-inner > .toolbar-button
+
.toolbar-button {

    margin-left:
        0;
}


.toolbar-button {

    min-height:
        calc(
            46px *
            var(--ui-scale)
        );

    padding:
        0 15px;

    border:
        1px solid
        var(--border);

    border-radius:
        11px;

    color:
        var(--text-2);

    background:
        var(--surface-soft);

    font-size:
        .78em;

    font-weight:
        800;
}


.toolbar-button:hover {

    border-color:
        var(--border-strong);

    background:
        var(--surface-hover);
}


.large-quick-button {

    color:
        var(--primary);

    border-color:
        #C9D4E6;

    background:
        var(--primary-soft);
}


.large-quick-button.active {

    color:
        #FFFFFF;

    border-color:
        var(--primary);

    background:
        var(--primary);
}


/* ===========================================================
   Main Layout
   =========================================================== */

.app-shell {

    width:
        min(1480px,100%);

    margin:
        0 auto;

    padding:
        20px;

    display:
        grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(375px,420px);

    gap:
        20px;
}


.main-column {

    min-width:
        0;
}


.setup-card,
.filter-card,
.order-panel {

    border:
        1px solid
        var(--border);

    background:
        var(--surface);

    box-shadow:
        var(--shadow);
}


/* ===========================================================
   Setup
   =========================================================== */

.setup-card {

    padding:
        18px;

    border-radius:
        17px;
}


.setup-main {

    display:
        grid;

    grid-template-columns:
        minmax(280px,.9fr)
        minmax(205px,.55fr)
        minmax(205px,.55fr);

    align-items:
        start;

    gap:
        16px;
}


.section-label,
.date-field > span {

    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--text-2);

    font-size:
        .76em;

    font-weight:
        850;
}


/* ===========================================================
   Channel
   =========================================================== */

.channel-switch {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        7px;

    padding:
        5px;

    border-radius:
        13px;

    background:
        var(--surface-soft);
}


.channel-button {

    min-height:
        calc(
            52px *
            var(--ui-scale)
        );

    border:
        2px solid
        transparent;

    border-radius:
        10px;

    color:
        var(--text-2);

    background:
        transparent;

    font-size:
        .96em;

    font-weight:
        900;
}


.channel-button:hover {

    background:
        var(--surface-hover);
}


.channel-button.active {

    color:
        #FFFFFF;

    border-color:
        var(--primary);

    background:
        var(--primary);

    box-shadow:
        0 5px 14px
        rgba(62,96,155,.16);
}


.channel-button.active::before {

    content:
        "✓";

    margin-right:
        7px;

    font-weight:
        950;
}


/* ===========================================================
   Date
   =========================================================== */

.date-field {

    min-width:
        0;
}


.date-field input {

    width:
        100%;

    min-height:
        calc(
            47px *
            var(--ui-scale)
        );

    padding:
        0 12px;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    outline:
        0;

    color:
        var(--text-2);

    background:
        var(--surface-soft);

    font-size:
        .78em;
}


.date-field input:focus {

    border-color:
        var(--primary);
}


html[data-theme="dark"]
input[type="date"] {

    color-scheme:
        dark;
}


.date-readable {

    margin-top:
        7px;

    min-height:
        29px;

    display:
        flex;

    align-items:
        center;

    color:
        var(--text);

    font-size:
        1em;

    font-weight:
        900;

    letter-spacing:
        .01em;
}


.date-readable[data-empty="true"] {

    color:
        var(--danger);

    font-size:
        .84em;
}


.arrival-shortcuts {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    margin-top:
        13px;

    overflow-x:
        auto;

    padding-bottom:
        2px;
}


.arrival-shortcuts > span {

    flex:
        0 0 auto;

    margin-right:
        3px;

    color:
        var(--muted);

    font-size:
        .7em;

    font-weight:
        750;
}


.arrival-shortcuts button {

    flex:
        0 0 auto;

    min-width:
        59px;

    min-height:
        calc(
            40px *
            var(--ui-scale)
        );

    padding:
        0 11px;

    border:
        1px solid
        var(--border);

    border-radius:
        9px;

    color:
        var(--text-2);

    background:
        var(--surface-soft);

    font-size:
        .72em;

    font-weight:
        850;
}


.arrival-shortcuts button:hover {

    color:
        var(--primary);

    border-color:
        var(--primary);

    background:
        var(--primary-soft);
}


/* ===========================================================
   Search / Filter
   =========================================================== */

.filter-card {

    margin-top:
        14px;

    padding:
        16px;

    border-radius:
        17px;
}


.search-box {

    min-height:
        calc(
            55px *
            var(--ui-scale)
        );

    padding:
        0 16px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    border:
        2px solid
        var(--border);

    border-radius:
        12px;

    background:
        var(--surface-soft);
}


.search-box:focus-within {

    border-color:
        var(--primary);

    background:
        var(--surface);
}


.search-box > span {

    font-size:
        1.08em;
}


.search-box input {

    flex:
        1;

    min-width:
        0;

    border:
        0;

    outline:
        0;

    color:
        var(--text);

    background:
        transparent;

    font-size:
        .93em;
}


.search-box input::placeholder {

    color:
        var(--muted);
}


.tabs-row,
.brand-tabs {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    overflow-x:
        visible;
}


.tabs-row {

    margin-top:
        13px;
}


.brand-tabs {

    margin-top:
        9px;
}


.smart-tab,
.brand-tab {

    min-height:
        calc(
            44px *
            var(--ui-scale)
        );

    padding:
        0 15px;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    color:
        var(--text-2);

    background:
        var(--surface-soft);

    font-size:
        .77em;

    font-weight:
        850;
}


.smart-tab:hover,
.brand-tab:hover {

    border-color:
        var(--border-strong);

    background:
        var(--surface-hover);
}


.smart-tab.active {

    color:
        #FFFFFF;

    border-color:
        var(--primary);

    background:
        var(--primary);
}


.brand-tab.active {

    color:
        var(--primary);

    border:
        2px solid
        var(--primary);

    background:
        var(--primary-soft);
}


.brand-tab[data-brand="橘子工坊"].active {

    color:
        var(--orange);

    border-color:
        var(--orange);

    background:
        var(--orange-soft);
}


.brand-tab[data-brand="nacnac"].active {

    color:
        var(--baby);

    border-color:
        var(--baby);

    background:
        var(--baby-soft);
}


/* ===========================================================
   Product Section
   =========================================================== */

.section-heading {

    min-height:
        59px;

    padding:
        0 4px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;
}


.section-heading strong {

    font-size:
        1em;

    font-weight:
        900;
}


.section-heading span {

    color:
        var(--muted);

    font-size:
        .7em;
}


.product-grid {

    display:
        grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        );

    gap:
        11px;
}


/* ===========================================================
   Product Card
   =========================================================== */

.product-card {

    position:
        relative;

    min-width:
        0;

    min-height:
        150px;

    padding:
        14px 15px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    border:
        2px solid
        var(--border);

    border-radius:
        15px;

    background:
        var(--surface);

    box-shadow:
        0 4px 13px
        rgba(35,48,60,.035);
}


.product-card::before {

    content:
        "";

    position:
        absolute;

    left: 0;
    top: 13px;
    bottom: 13px;

    width:
        4px;

    border-radius:
        0 4px 4px 0;

    background:
        var(--dept12);

    opacity:
        .8;
}


.product-card.brand-orange::before {

    background:
        var(--orange);
}


.product-card.brand-nac::before {

    background:
        var(--baby);
}


.product-card:hover {

    border-color:
        var(--border-strong);

    box-shadow:
        var(--shadow-hover);
}


.product-card.selected {

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(62,96,155,.07),
        var(--shadow);
}


.product-top {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        9px;
}


.product-emoji {

    flex:
        0 0 auto;

    margin-top:
        1px;

    font-size:
        1.18em;

    line-height:
        1.2;
}


.product-name {

    flex:
        1;

    min-width:
        0;

    color:
        var(--text);

    font-size:
        1.08em;

    font-weight:
        950;

    line-height:
        1.35;

    display:
        -webkit-box;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        2;

    overflow:
        hidden;
}


.favorite {

    flex:
        0 0 auto;

    width:
        calc(
            40px *
            var(--ui-scale)
        );

    height:
        calc(
            40px *
            var(--ui-scale)
        );

    border:
        0;

    border-radius:
        9px;

    color:
        #9B9EA2;

    background:
        transparent;

    font-size:
        1em;
}


.favorite:hover {

    background:
        var(--surface-soft);
}


.favorite.active {

    color:
        #C08A18;

    background:
        #FFF5D9;
}


html[data-theme="dark"]
.favorite.active {

    color:
        #FFD66F;

    background:
        #493D23;
}


.product-meta {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        7px;

    margin-top:
        8px;
}


.code-chip,
.department-chip {

    min-height:
        30px;

    padding:
        0 10px;

    display:
        inline-flex;

    align-items:
        center;

    border-radius:
        8px;

    font-weight:
        900;
}


.department-chip {

    font-size:
        .72em;
}


.code-chip {

    color:
        var(--primary);

    border:
        1px solid
        #C9D5E8;

    background:
        var(--primary-soft);

    font-family:
        Consolas,
        "SFMono-Regular",
        "Roboto Mono",
        monospace;

    font-size:
        .86em;

    font-weight:
        950;

    letter-spacing:
        .035em;
}


html[data-theme="dark"]
.code-chip {

    border-color:
        #445472;
}


.department-chip.paper {

    color:
        var(--dept12);

    background:
        var(--dept12-bg);
}


.department-chip.clean {

    color:
        var(--dept11);

    background:
        var(--dept11-bg);
}


/*
 * v0.8 拿掉沒有幫助的品牌分類小字
 */

.product-brand {

    display:
        none !important;
}


/* ===========================================================
   Quantity
   =========================================================== */

.quantity-row {

    margin-top:
        10px;

    padding-top:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-top:
        1px solid
        var(--border);
}


.quick-buttons {

    display:
        none !important;
}


.qty-main {

    width:
        min(
            280px,
            100%
        );

    display:
        grid;

    grid-template-columns:
        59px
        minmax(74px,1fr)
        59px;

    gap:
        8px;
}


.qty-button {

    min-height:
        calc(
            52px *
            var(--ui-scale)
        );

    border:
        1px solid
        var(--border);

    border-radius:
        11px;

    color:
        var(--text);

    background:
        var(--surface-soft);

    font-size:
        1.3em;

    font-weight:
        950;
}


.qty-button:hover {

    border-color:
        var(--border-strong);

    background:
        var(--surface-hover);
}


.qty-button.plus {

    color:
        #FFFFFF;

    border-color:
        var(--primary);

    background:
        var(--primary);

    box-shadow:
        0 5px 12px
        rgba(62,96,155,.14);
}


.qty-button.plus:hover {

    background:
        var(--primary-hover);
}


.qty-input {

    width:
        100%;

    min-width:
        0;

    min-height:
        calc(
            52px *
            var(--ui-scale)
        );

    padding:
        0 5px;

    border:
        2px solid
        var(--border);

    border-radius:
        11px;

    outline:
        0;

    text-align:
        center;

    color:
        var(--text);

    background:
        var(--surface);

    font-size:
        1.28em;

    font-weight:
        950;
}


.qty-input:focus {

    border-color:
        var(--primary);
}


/* ===========================================================
   Order Paper
   =========================================================== */

.order-panel {

    position:
        sticky;

    top:
        96px;

    align-self:
        start;

    padding:
        19px;

    border-radius:
        17px;

    background:
        var(--paper);

    border-color:
        #D7D4CB;
}


html[data-theme="dark"]
.order-panel {

    border-color:
        var(--border);
}


.order-head {

    padding-bottom:
        14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border-bottom:
        2px solid
        var(--border);
}


.order-head strong {

    display:
        block;

    font-size:
        1.05em;

    font-weight:
        950;
}


.order-head span {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--primary);

    font-size:
        .73em;

    font-weight:
        850;
}


.clear-button {

    min-height:
        43px;

    padding:
        0 13px;

    border:
        1px solid
        #E3C7CA;

    border-radius:
        9px;

    color:
        var(--danger);

    background:
        var(--danger-soft);

    font-size:
        .73em;

    font-weight:
        850;
}


.clear-button:hover {

    border-color:
        var(--danger);
}


.order-preview {

    margin-top:
        16px;

    font-size:
        calc(
            1em *
            var(--order-scale)
        );
}


.empty-state {

    padding:
        48px 10px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;
}


.empty-state > span {

    width:
        48px;

    height:
        48px;

    margin-bottom:
        11px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        var(--primary);

    background:
        var(--primary-soft);

    font-size:
        1.1em;

    font-weight:
        950;
}


.empty-state strong {

    font-size:
        .76em;
}


.empty-state small {

    margin-top:
        5px;

    color:
        var(--muted);

    font-size:
        .59em;
}


.preview-header {

    padding:
        3px 0 14px;

    border-bottom:
        1px solid
        var(--border);

    color:
        var(--text);

    font-size:
        .73em;

    font-weight:
        900;

    line-height:
        1.75;
}


.department-heading {

    margin:
        18px 0 8px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    color:
        var(--text-2);

    font-size:
        .69em;

    font-weight:
        950;
}


.department-heading::after {

    content:
        "";

    flex:
        1;

    height:
        1px;

    background:
        var(--border);
}


/*
 * 扣號是主資訊
 * 商品名稱改成下面的小備註
 */

.order-line {

    min-height:
        56px;

    padding:
        8px 0;

    display:
        block;

    border-bottom:
        1px dashed
        color-mix(
            in srgb,
            var(--border) 70%,
            transparent
        );
}


.order-code {

    color:
        var(--text);

    font-family:
        Consolas,
        "SFMono-Regular",
        "Roboto Mono",
        monospace;

    font-size:
        1em;

    font-weight:
        950;

    letter-spacing:
        .045em;
}


.order-note {

    margin-top:
        3px;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        var(--muted);

    font-size:
        .59em;

    user-select:
        none;
}


/* ===========================================================
   Stats
   =========================================================== */

.stats-grid {

    margin-top:
        18px;

    display:
        grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:
        8px;
}


.stats-grid > div {

    min-height:
        70px;

    padding:
        11px 13px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    background:
        var(--surface-soft);
}


.stats-grid span {

    color:
        var(--muted);

    font-size:
        .62em;

    font-weight:
        700;
}


.stats-grid strong {

    margin-top:
        1px;

    color:
        var(--text);

    font-size:
        1.12em;

    font-weight:
        950;
}


.preview-tip {

    margin-top:
        12px;

    color:
        var(--muted);

    font-size:
        .63em;
}


/* ===========================================================
   Copy
   =========================================================== */

.copy-button {

    width:
        100%;

    min-height:
        calc(
            58px *
            var(--ui-scale)
        );

    margin-top:
        14px;

    border:
        2px solid
        var(--primary);

    border-radius:
        12px;

    color:
        #FFFFFF;

    background:
        var(--primary);

    font-size:
        .95em;

    font-weight:
        950;

    box-shadow:
        0 6px 16px
        rgba(62,96,155,.16);
}


.copy-button:hover:not(:disabled) {

    background:
        var(--primary-hover);

    box-shadow:
        0 9px 21px
        rgba(62,96,155,.23);
}


.copy-button.success {

    border-color:
        var(--success);

    background:
        var(--success);
}


.copy-button:disabled {

    opacity:
        .4;

    cursor:
        default;

    box-shadow:
        none;
}


/* ===========================================================
   History
   =========================================================== */

.history {

    margin-top:
        16px;

    padding-top:
        13px;

    border-top:
        1px solid
        var(--border);

    color:
        var(--text-2);

    font-size:
        .68em;
}


.history-item {

    margin-top:
        8px;

    padding:
        10px;

    border:
        1px solid
        var(--border);

    border-radius:
        9px;

    background:
        var(--surface-soft);
}


.history-item small {

    color:
        var(--muted);
}


.history-item pre {

    margin:
        6px 0 0;

    white-space:
        pre-wrap;

    color:
        var(--text-2);

    font-size:
        .92em;
}


/* ===========================================================
   Settings
   =========================================================== */

.mobile-bar {

    display:
        none;
}


.overlay {

    position:
        fixed;

    z-index:
        100;

    inset:
        0;

    padding:
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(22,28,34,.45);

    backdrop-filter:
        blur(5px);
}


.hidden {

    display:
        none !important;
}


.settings-panel {

    width:
        min(470px,100%);

    max-height:
        88vh;

    overflow-y:
        auto;

    padding:
        20px;

    border:
        1px solid
        var(--border);

    border-radius:
        18px;

    color:
        var(--text);

    background:
        var(--surface);

    box-shadow:
        0 25px 65px
        rgba(20,30,40,.2);
}


.settings-head {

    padding-bottom:
        14px;

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    border-bottom:
        1px solid
        var(--border);
}


.settings-head strong {

    display:
        block;

    font-size:
        1.05em;
}


.settings-head small {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--muted);
}


.settings-head > button {

    width:
        45px;

    height:
        45px;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    color:
        var(--text);

    background:
        var(--surface-soft);

    font-size:
        1.15em;
}


.setting-block {

    margin-top:
        18px;
}


.setting-block > label {

    display:
        block;

    margin-bottom:
        8px;

    color:
        var(--text-2);

    font-size:
        .75em;

    font-weight:
        850;
}


.theme-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        7px;
}


.theme-grid button,
.scale-row button {

    min-height:
        48px;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    color:
        var(--text-2);

    background:
        var(--surface-soft);

    font-weight:
        850;
}


.theme-grid button.active {

    color:
        #FFFFFF;

    border-color:
        var(--primary);

    background:
        var(--primary);
}


.scale-row {

    display:
        grid;

    grid-template-columns:
        63px
        1fr
        63px;

    align-items:
        center;

    gap:
        8px;
}


.scale-row strong {

    text-align:
        center;
}


.contrast-row {

    min-height:
        72px;

    margin-top:
        16px;

    padding:
        12px 14px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    border:
        1px solid
        var(--border);

    border-radius:
        11px;

    background:
        var(--surface-soft);
}


.contrast-row strong,
.contrast-row small {

    display:
        block;
}


.contrast-row small {

    margin-top:
        2px;

    color:
        var(--muted);
}


.contrast-row input {

    width:
        25px;

    height:
        25px;

    flex:
        0 0 auto;

    accent-color:
        var(--primary);
}


.setting-input {

    width:
        100%;

    min-height:
        49px;

    padding:
        0 13px;

    border:
        2px solid
        var(--border);

    border-radius:
        10px;

    outline:
        0;

    color:
        var(--text);

    background:
        var(--surface-soft);
}


.setting-input:focus {

    border-color:
        var(--primary);
}


.reset-button {

    width:
        100%;

    min-height:
        48px;

    margin-top:
        18px;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    color:
        var(--text-2);

    background:
        var(--surface-soft);

    font-weight:
        800;
}


/* ===========================================================
   Toast
   =========================================================== */

.toast {

    position:
        fixed;

    z-index:
        200;

    left:
        50%;

    bottom:
        24px;

    padding:
        11px 18px;

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

    color:
        var(--text);

    background:
        var(--surface);

    box-shadow:
        var(--shadow-hover);

    font-size:
        .75em;

    font-weight:
        800;

    opacity:
        0;

    pointer-events:
        none;

    transform:
        translate(-50%,15px);

    transition:
        .18s ease;
}


.toast.show {

    opacity:
        1;

    transform:
        translate(-50%,0);
}


/* ===========================================================
   Large Mode
   =========================================================== */

html[data-large="true"] body {

    font-size:
        calc(
            19px *
            var(--ui-scale)
        );
}


html[data-large="true"]
.app-shell {

    grid-template-columns:
        minmax(0,1fr)
        minmax(420px,460px);
}


html[data-large="true"]
.product-card {

    min-height:
        170px;
}


html[data-large="true"]
.product-name {

    font-size:
        1.13em;
}


html[data-large="true"]
.code-chip {

    font-size:
        .92em;
}


html[data-large="true"]
.qty-main {

    grid-template-columns:
        67px
        minmax(85px,1fr)
        67px;
}


html[data-large="true"]
.qty-button,
html[data-large="true"]
.qty-input {

    min-height:
        calc(
            61px *
            var(--ui-scale)
        );
}


html[data-large="true"]
.order-code {

    font-size:
        1.08em;
}


/* ===========================================================
   Tablet
   =========================================================== */

@media (max-width: 1100px) {

    .app-shell,
    html[data-large="true"]
    .app-shell {

        grid-template-columns:
            1fr;

        padding-bottom:
            96px;
    }


    .order-panel {

        position:
            static;
    }
}


/* ===========================================================
   Mobile
   =========================================================== */

@media (max-width: 720px) {

    body {

        font-size:
            calc(
                17px *
                var(--ui-scale)
            );
    }


    html[data-large="true"] body {

        font-size:
            calc(
                19px *
                var(--ui-scale)
            );
    }


    .header-inner {

        min-height:
            69px;

        padding-left:
            11px;

        padding-right:
            11px;

        gap:
            6px;
    }


    .brand-logo {

        width:
            43px;

        height:
            43px;
    }


    .brand-title span,
    .brand-subtitle {

        display:
            none;
    }


    .toolbar-button {

        min-height:
            43px;

        padding:
            0 10px;

        font-size:
            .71em;
    }


    .app-shell {

        padding:
            11px;

        padding-bottom:
            96px;

        gap:
            12px;
    }


    .setup-card,
    .filter-card,
    .order-panel {

        border-radius:
            14px;
    }


    .setup-card {

        padding:
            14px;
    }


    .setup-main {

        grid-template-columns:
            1fr 1fr;

        gap:
            11px;
    }


    .setup-main > div:first-child {

        grid-column:
            1 / -1;
    }


    .channel-button {

        min-height:
            54px;
    }


    .date-field input {

        min-height:
            44px;

        font-size:
            .72em;
    }


    .date-readable {

        font-size:
            .9em;
    }


    .filter-card {

        padding:
            13px;
    }


    .search-box {

        min-height:
            57px;
    }


    .tabs-row,
    .brand-tabs {

        flex-wrap:
            nowrap;

        overflow-x:
            auto;

        scrollbar-width:
            none;
    }


    .tabs-row::-webkit-scrollbar,
    .brand-tabs::-webkit-scrollbar {

        display:
            none;
    }


    .smart-tab,
    .brand-tab {

        flex:
            0 0 auto;
    }


    .product-grid,
    html[data-large="true"]
    .product-grid {

        grid-template-columns:
            1fr;
    }


    .product-card,
    html[data-large="true"]
    .product-card {

        min-height:
            150px;
    }


    .product-name {

        font-size:
            1.08em;
    }


    .qty-main,
    html[data-large="true"]
    .qty-main {

        width:
            100%;

        grid-template-columns:
            64px
            1fr
            64px;
    }


    .qty-button,
    .qty-input,
    html[data-large="true"]
    .qty-button,
    html[data-large="true"]
    .qty-input {

        min-height:
            58px;
    }


    .mobile-bar {

        position:
            fixed;

        z-index:
            45;

        left:
            9px;

        right:
            9px;

        bottom:
            max(
                9px,
                env(safe-area-inset-bottom)
            );

        min-height:
            66px;

        padding:
            8px 9px 8px 14px;

        display:
            grid;

        grid-template-columns:
            1fr auto auto;

        align-items:
            center;

        gap:
            7px;

        border:
            1px solid
            var(--border);

        border-radius:
            14px;

        background:
            var(--surface);

        box-shadow:
            0 8px 28px
            rgba(30,45,60,.18);
    }


    .mobile-bar small,
    .mobile-bar strong {

        display:
            block;
    }


    .mobile-bar small {

        color:
            var(--muted);

        font-size:
            .67em;
    }


    .mobile-bar strong {

        font-size:
            .98em;
    }


    .mobile-preview,
    .mobile-copy {

        min-height:
            49px;

        padding:
            0 16px;

        border-radius:
            10px;

        font-size:
            .79em;

        font-weight:
            900;
    }


    .mobile-preview {

        border:
            1px solid
            var(--border);

        color:
            var(--text-2);

        background:
            var(--surface-soft);
    }


    .mobile-copy {

        border:
            1px solid
            var(--primary);

        color:
            #FFFFFF;

        background:
            var(--primary);
    }


    .overlay {

        padding:
            0;

        align-items:
            flex-end;
    }


    .settings-panel {

        width:
            100%;

        max-height:
            92vh;

        border-radius:
            20px 20px 0 0;

        padding-bottom:
            max(
                22px,
                env(safe-area-inset-bottom)
            );
    }
}


@media (max-width: 430px) {

    .brand-title {

        font-size:
            1.05em;
    }


    .toolbar-button span {

        display:
            none;
    }


    .toolbar-button {

        padding:
            0 9px;
    }


    .setup-main {

        grid-template-columns:
            1fr 1fr;
    }


    .date-field input {

        padding:
            0 7px;
    }


    .order-line {

        min-height:
            54px;
    }
}

/* ===========================================================
   v0.10 商品名稱精細化
   =========================================================== */

.product-name {

    -webkit-line-clamp:
        2;

    line-height:
        1.32;

    overflow:
        hidden;
}


/*
 * 橘子 / nacnac 名稱較長，
 * 卡片允許稍微增加高度，
 * 但不回到以前的大空白卡片。
 */

.product-card.brand-orange,
.product-card.brand-nac {

    min-height:
        150px;
}


/*
 * 手機寬度允許完整兩行
 */

@media (max-width: 720px) {

    .product-card.brand-orange,
    .product-card.brand-nac {

        min-height:
            154px;
    }


    .product-name {

        font-size:
            1.04em;
    }

}


/*
 * 大字模式下給長名稱多一點空間
 */

html[data-large="true"]
.product-card.brand-orange,
html[data-large="true"]
.product-card.brand-nac {

    min-height:
        170px;
}

/* ===========================================================
   快抄 v0.11
   現場快速操作版
   =========================================================== */


/* ===========================================================
   已選統計
   =========================================================== */

.field-selection-summary {

    min-height: 38px;

    padding:
        0 12px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    border:
        1px solid
        var(--border);

    border-radius:
        999px;

    color:
        var(--text-2);

    background:
        var(--surface);

    font-size:
        .72em;

    white-space:
        nowrap;
}


.field-selection-summary strong {

    color:
        var(--primary);

    font-size:
        1em;
}


.field-selection-summary
.field-empty {

    color:
        var(--muted);
}


.field-selected-dot {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--success);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--success) 15%,
            transparent
        );
}


/* ===========================================================
   已選商品卡
   =========================================================== */

.product-card {

    overflow:
        hidden;
}


.product-card.field-has-qty {

    border-color:
        var(--primary);

    background:
        color-mix(
            in srgb,
            var(--primary-soft) 26%,
            var(--surface)
        );

    box-shadow:
        0 0 0 3px
        rgba(62,96,155,.06),
        var(--shadow);
}


.field-selected-badge {

    position:
        absolute;

    top:
        8px;

    right:
        50px;

    min-height:
        27px;

    padding:
        0 8px;

    display:
        inline-flex;

    align-items:
        center;

    border-radius:
        7px;

    color:
        var(--success);

    background:
        color-mix(
            in srgb,
            var(--success) 10%,
            var(--surface)
        );

    font-size:
        11px;

    font-weight:
        900;

    pointer-events:
        none;
}


/* ===========================================================
   數量：現場操作重點
   =========================================================== */

.qty-main {

    grid-template-columns:
        62px
        minmax(86px,1fr)
        62px;

    gap:
        9px;
}


.qty-button {

    min-height:
        calc(
            55px *
            var(--ui-scale)
        );

    touch-action:
        manipulation;

    user-select:
        none;
}


.qty-button.plus {

    font-size:
        1.4em;
}


.qty-input {

    min-height:
        calc(
            55px *
            var(--ui-scale)
        );

    font-size:
        1.4em;

    caret-color:
        var(--primary);
}


.qty-input:focus {

    border-color:
        var(--primary);

    background:
        var(--primary-soft);

    box-shadow:
        0 0 0 3px
        rgba(62,96,155,.08);
}


/*
 * 已有箱數時，
 * 數字更加醒目
 */

.field-has-qty
.qty-input {

    color:
        var(--primary);

    border-color:
        var(--primary);

    font-weight:
        950;
}


/* ===========================================================
   搜尋清除
   =========================================================== */

.search-box {

    position:
        relative;
}


.search-box input {

    padding-right:
        45px;
}


.field-search-clear {

    position:
        absolute;

    right:
        8px;

    top:
        50%;

    width:
        38px;

    height:
        38px;

    padding:
        0;

    display:
        none;

    place-items:
        center;

    transform:
        translateY(-50%);

    border:
        0;

    border-radius:
        50%;

    color:
        var(--text-2);

    background:
        var(--surface-hover);

    font-size:
        1.35em;

    font-weight:
        500;

    line-height:
        1;
}


.field-search-clear.show {

    display:
        grid;
}


.field-search-clear:hover {

    color:
        var(--text);

    background:
        var(--border);
}


.field-search-clear:active {

    transform:
        translateY(-50%)
        scale(.94);
}


/* ===========================================================
   商品名稱
   =========================================================== */

.product-name {

    /*
     * v0.10 清潔用品名稱較長，
     * 現場版確保兩行仍能完整掃視。
     */

    min-height:
        2.58em;
}


/* ===========================================================
   手機
   =========================================================== */

@media (max-width: 720px) {

    .section-heading {

        min-height:
            64px;
    }


    .field-selection-summary {

        min-height:
            40px;

        padding:
            0 11px;
    }


    .qty-main {

        grid-template-columns:
            68px
            1fr
            68px;

        gap:
            9px;
    }


    .qty-button,
    .qty-input {

        min-height:
            61px;
    }


    .qty-input {

        font-size:
            1.46em;
    }


    .field-selected-badge {

        right:
            47px;
    }

}


/* ===========================================================
   大字
   =========================================================== */

html[data-large="true"]
.qty-main {

    grid-template-columns:
        72px
        minmax(95px,1fr)
        72px;
}


html[data-large="true"]
.qty-button,
html[data-large="true"]
.qty-input {

    min-height:
        calc(
            64px *
            var(--ui-scale)
        );
}


/* ===========================================================
   快抄 v0.12
   現場缺量換算版
   =========================================================== */


/* ===========================================================
   Top mode
   =========================================================== */

.restock-mode-area {

    margin-top:
        13px;

    padding:
        11px
        12px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    border:
        1px solid
        var(--border);

    border-radius:
        12px;

    background:
        var(--surface-soft);
}


.restock-mode-copy {

    min-width:
        0;
}


.restock-mode-copy strong {

    display:
        block;

    color:
        var(--text);

    font-size:
        .76em;

    font-weight:
        900;
}


.restock-mode-copy small {

    display:
        block;

    margin-top:
        2px;

    color:
        var(--muted);

    font-size:
        .65em;
}


.restock-mode-button {

    flex:
        0 0 auto;

    min-height:
        43px;

    padding:
        0
        14px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    border:
        1px solid
        var(--border-strong);

    border-radius:
        10px;

    color:
        var(--text-2);

    background:
        var(--surface);

    font-size:
        .73em;

    font-weight:
        900;
}


.restock-mode-button:hover {

    border-color:
        var(--primary);

    color:
        var(--primary);

    background:
        var(--primary-soft);
}


.restock-mode-button.active {

    color:
        #FFFFFF;

    border-color:
        var(--success);

    background:
        var(--success);

    box-shadow:
        0 5px 12px
        color-mix(
            in srgb,
            var(--success) 18%,
            transparent
        );
}


.restock-toggle-icon {

    font-size:
        1.02em;
}


/* ===========================================================
   Helper
   =========================================================== */

.restock-helper {

    display:
        none;

    margin-top:
        10px;

    padding:
        10px;

    border:
        1px solid
        var(--border);

    border-radius:
        11px;

    background:
        color-mix(
            in srgb,
            var(--primary-soft) 35%,
            var(--surface)
        );
}


html[data-restock-helper="true"]
.restock-helper {

    display:
        block;
}


/*
 * 開啟換算模式才讓商品卡稍微增高。
 * 關閉時完全維持 v0.11。
 */

html[data-restock-helper="true"]
.product-card {

    min-height:
        205px;
}


.restock-helper-main {

    display:
        grid;

    grid-template-columns:
        minmax(105px,1fr)
        24px
        minmax(120px,1fr)
        auto;

    align-items:
        center;

    gap:
        8px;
}


/* ===========================================================
   Missing input
   =========================================================== */

.restock-missing-field label {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--text-2);

    font-size:
        .63em;

    font-weight:
        850;
}


.restock-input-wrap {

    min-height:
        43px;

    display:
        grid;

    grid-template-columns:
        1fr auto;

    align-items:
        center;

    overflow:
        hidden;

    border:
        2px solid
        var(--border);

    border-radius:
        9px;

    background:
        var(--surface);
}


.restock-input-wrap:focus-within {

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(62,96,155,.07);
}


.restock-missing-input {

    width:
        100%;

    min-width:
        0;

    height:
        40px;

    padding:
        0
        5px
        0
        11px;

    border:
        0;

    outline:
        0;

    color:
        var(--text);

    background:
        transparent;

    font-size:
        1.08em;

    font-weight:
        950;

    text-align:
        center;
}


.restock-case-unit {

    padding:
        0
        10px
        0
        4px;

    color:
        var(--text-2);

    font-size:
        .75em;

    font-weight:
        850;
}


/* ===========================================================
   Arrow
   =========================================================== */

.restock-arrow {

    color:
        var(--muted);

    text-align:
        center;

    font-size:
        1.1em;

    font-weight:
        900;
}


/* ===========================================================
   Result
   =========================================================== */

.restock-result {

    min-width:
        0;
}


.restock-result small {

    display:
        block;

    color:
        var(--muted);

    font-size:
        .6em;

    font-weight:
        750;
}


.restock-result-value {

    display:
        block;

    margin-top:
        1px;

    color:
        var(--primary);

    font-size:
        1.03em;

    font-weight:
        950;
}


.restock-result-detail {

    display:
        block;

    margin-top:
        1px;

    color:
        var(--text-2);

    font-size:
        .58em;

    white-space:
        nowrap;
}


/* ===========================================================
   Apply
   =========================================================== */

.restock-apply {

    min-width:
        85px;

    min-height:
        46px;

    padding:
        0
        11px;

    border:
        1px solid
        var(--primary);

    border-radius:
        9px;

    color:
        #FFFFFF;

    background:
        var(--primary);

    font-size:
        .69em;

    font-weight:
        900;
}


.restock-apply:hover:not(:disabled) {

    background:
        var(--primary-hover);
}


.restock-apply:disabled {

    color:
        var(--muted);

    border-color:
        var(--border);

    background:
        var(--surface);

    opacity:
        .72;

    cursor:
        default;
}


.restock-apply.success {

    color:
        #FFFFFF;

    border-color:
        var(--success);

    background:
        var(--success);
}


/* ===========================================================
   Quantity separation
   =========================================================== */

html[data-restock-helper="true"]
.restock-helper
+
.quantity-row {

    margin-top:
        9px;

    padding-top:
        9px;
}


/* ===========================================================
   Large mode
   =========================================================== */

html[data-large="true"]
.restock-mode-copy strong {

    font-size:
        .8em;
}


html[data-large="true"]
.restock-helper-main {

    grid-template-columns:
        minmax(120px,1fr)
        28px
        minmax(135px,1fr)
        auto;
}


/* ===========================================================
   Mobile
   =========================================================== */

@media (max-width: 720px) {

    .restock-mode-area {

        padding:
            11px;
    }


    .restock-mode-copy small {

        line-height:
            1.35;
    }


    .restock-mode-button {

        min-height:
            46px;

        padding:
            0
            12px;
    }


    html[data-restock-helper="true"]
    .product-card {

        min-height:
            235px;
    }


    .restock-helper {

        padding:
            10px;
    }


    .restock-helper-main,
    html[data-large="true"]
    .restock-helper-main {

        grid-template-columns:
            minmax(105px,1fr)
            22px
            minmax(110px,1fr);

        gap:
            7px;
    }


    .restock-apply {

        grid-column:
            1 / -1;

        width:
            100%;

        min-height:
            48px;

        margin-top:
            2px;

        font-size:
            .75em;
    }


    .restock-missing-input {

        font-size:
            1.12em;
    }


    .restock-result-value {

        font-size:
            1.08em;
    }

}


/* ===========================================================
   Narrow mobile
   =========================================================== */

@media (max-width: 430px) {

    .restock-mode-copy small {

        display:
            none;
    }


    .restock-mode-button {

        font-size:
            .68em;
    }


    .restock-result-detail {

        font-size:
            .54em;
    }

}

/* ===========================================================
   v0.12.2 缺量換算按鈕點擊修正
   =========================================================== */

.restock-mode-button {

    position: relative !important;

    z-index: 5 !important;

    cursor: pointer !important;

    pointer-events: auto !important;

    touch-action: manipulation !important;

    user-select: none !important;

    -webkit-user-select: none !important;
}


/*
 * 關鍵修正：
 *
 * 圖示與文字全部不能成為 pointer target。
 * 不論點文字、Emoji、空白，
 * event.target 永遠會落在 button。
 */

.restock-mode-button *,
.restock-mode-button span,
.restock-toggle-icon,
.restock-toggle-label {

    pointer-events: none !important;

    user-select: none !important;

    -webkit-user-select: none !important;
}


/*
 * 確保沒有其他透明元素蓋住按鈕
 */

.restock-mode-area {

    position: relative !important;

    z-index: 2 !important;
}


/* ===========================================================
   快抄 v0.13
   現場效率精修
   =========================================================== */


/* ===========================================================
   1. 草稿狀態
   =========================================================== */

.draft-status {

    min-height:
        34px;

    margin-top:
        10px;

    padding:
        0
        10px;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    border:
        1px solid
        var(--border);

    border-radius:
        8px;

    color:
        var(--muted);

    background:
        var(--surface-soft);

    font-size:
        .62em;

    font-weight:
        750;
}


.draft-status-dot {

    width:
        7px;

    height:
        7px;

    flex:
        0 0 auto;

    border-radius:
        50%;

    background:
        var(--muted);
}


.draft-status[data-state="saved"]
.draft-status-dot {

    background:
        var(--success);
}


.draft-status[data-state="saving"]
.draft-status-dot {

    background:
        #C18A20;
}


.draft-status[data-state="restored"] {

    color:
        var(--primary);

    border-color:
        color-mix(
            in srgb,
            var(--primary) 28%,
            var(--border)
        );

    background:
        var(--primary-soft);
}


.draft-status[data-state="restored"]
.draft-status-dot {

    background:
        var(--primary);
}


.draft-status[data-state="error"] {

    color:
        var(--danger);

    background:
        var(--danger-soft);
}


.draft-status[data-state="error"]
.draft-status-dot {

    background:
        var(--danger);
}


/* ===========================================================
   2. 只看已選
   =========================================================== */

.selected-only-area {

    margin-top:
        10px;

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


.selected-only-button {

    min-height:
        44px;

    padding:
        0
        14px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    border:
        1px solid
        var(--border-strong);

    border-radius:
        10px;

    color:
        var(--text-2);

    background:
        var(--surface);

    font-size:
        .74em;

    font-weight:
        900;
}


.selected-only-button:hover {

    color:
        var(--primary);

    border-color:
        var(--primary);

    background:
        var(--primary-soft);
}


.selected-only-button.active {

    color:
        #FFFFFF;

    border-color:
        var(--primary);

    background:
        var(--primary);
}


.selected-only-check {

    font-weight:
        950;
}


.selected-only-count {

    min-width:
        24px;

    min-height:
        24px;

    padding:
        0
        6px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        999px;

    color:
        var(--primary);

    background:
        var(--primary-soft);

    font-size:
        .95em;
}


.selected-only-button.active
.selected-only-count {

    color:
        var(--primary);

    background:
        #FFFFFF;
}


.selected-only-info {

    color:
        var(--muted);

    font-size:
        .68em;

    font-weight:
        700;
}


/*
 * 只看已選時，
 * 沒有數量的商品直接隱藏。
 */




/* ===========================================================
   3. 沒有已選商品
   =========================================================== */

.selected-only-empty {

    display:
        none;

    margin-top:
        12px;

    padding:
        46px
        20px;

    align-items:
        center;

    flex-direction:
        column;

    text-align:
        center;

    border:
        1px dashed
        var(--border-strong);

    border-radius:
        15px;

    background:
        var(--surface);
}


.selected-only-empty.show {

    display:
        flex;
}


.selected-empty-icon {

    width:
        46px;

    height:
        46px;

    margin-bottom:
        10px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    color:
        var(--primary);

    background:
        var(--primary-soft);

    font-weight:
        950;
}


.selected-only-empty strong {

    color:
        var(--text);

    font-size:
        .88em;
}


.selected-only-empty span {

    margin-top:
        4px;

    color:
        var(--muted);

    font-size:
        .7em;
}


.selected-only-empty button {

    min-height:
        44px;

    margin-top:
        15px;

    padding:
        0
        16px;

    border:
        1px solid
        var(--primary);

    border-radius:
        9px;

    color:
        #FFFFFF;

    background:
        var(--primary);

    font-size:
        .73em;

    font-weight:
        900;
}


/* ===========================================================
   4. 已選商品再清楚一點
   =========================================================== */

.product-card.v13-selected-card {

    border-color:
        var(--primary);

    background:
        color-mix(
            in srgb,
            var(--primary-soft) 23%,
            var(--surface)
        );
}


/* ===========================================================
   5. 缺量換算瘦身
   =========================================================== */

/*
 * v0.12 開啟後卡片大約 205px，
 * v0.13 壓回約 180px。
 */

html[data-restock-helper="true"]
.product-card {

    min-height:
        180px;
}


.restock-helper {

    margin-top:
        8px;

    padding:
        7px
        8px;

    border-radius:
        9px;
}


.restock-helper-main {

    grid-template-columns:
        minmax(92px,.8fr)
        18px
        minmax(115px,1fr)
        auto;

    gap:
        6px;
}


/*
 * 「現場少」改成小標示，
 * 不再佔一整層。
 */

.restock-missing-field label {

    margin-bottom:
        3px;

    font-size:
        .57em;
}


.restock-input-wrap {

    min-height:
        38px;
}


.restock-missing-input {

    height:
        36px;

    font-size:
        1em;
}


.restock-case-unit {

    padding-right:
        8px;

    font-size:
        .68em;
}


.restock-arrow {

    font-size:
        .9em;
}


.restock-result small {

    font-size:
        .54em;
}


.restock-result-value {

    font-size:
        .95em;
}


.restock-result-detail {

    margin-top:
        0;

    font-size:
        .52em;
}


.restock-apply {

    min-width:
        76px;

    min-height:
        40px;

    padding:
        0
        9px;

    font-size:
        .64em;
}


/*
 * 換算與正常箱數輸入靠近，
 * 不讓卡片像兩套功能。
 */

html[data-restock-helper="true"]
.restock-helper
+
.quantity-row {

    margin-top:
        7px;

    padding-top:
        7px;
}


/* ===========================================================
   6. Desktop
   =========================================================== */

@media (min-width: 721px) {

    html[data-restock-helper="true"]
    .product-card.brand-orange,

    html[data-restock-helper="true"]
    .product-card.brand-nac {

        min-height:
            190px;
    }

}


/* ===========================================================
   7. Mobile
   =========================================================== */

@media (max-width: 720px) {

    .selected-only-area {

        align-items:
            stretch;

        flex-direction:
            column;

        gap:
            6px;
    }


    .selected-only-button {

        width:
            100%;

        min-height:
            48px;

        justify-content:
            center;
    }


    .selected-only-info {

        padding-left:
            2px;
    }


    html[data-restock-helper="true"]
    .product-card {

        min-height:
            215px;
    }


    .restock-helper-main {

        grid-template-columns:
            minmax(92px,1fr)
            18px
            minmax(110px,1fr);

        gap:
            6px;
    }


    .restock-apply {

        grid-column:
            1 / -1;

        width:
            100%;

        min-height:
            43px;

        margin-top:
            1px;
    }


    .draft-status {

        min-height:
            37px;

        font-size:
            .65em;
    }

}


/* ===========================================================
   8. 大字模式
   =========================================================== */

html[data-large="true"]
.selected-only-button {

    min-height:
        50px;
}


html[data-large="true"]
.draft-status {

    font-size:
        .66em;
}


/* ===========================================================
   快抄 v0.14
   貨架順序 / 現場找品效率
   =========================================================== */


/* ===========================================================
   商品區工具列
   =========================================================== */

.kc14-shelf-toolbar {

    margin-left:
        auto;

    display:
        flex;

    align-items:
        center;

    gap:
        7px;
}


.kc14-toolbar-button {

    min-height:
        40px;

    padding:
        0 11px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        6px;

    border:
        1px solid
        var(--border);

    border-radius:
        9px;

    color:
        var(--text-2);

    background:
        var(--surface);

    font-size:
        .68em;

    font-weight:
        850;
}


.kc14-toolbar-button:hover {

    color:
        var(--primary);

    border-color:
        var(--primary);

    background:
        var(--primary-soft);
}


.kc14-toolbar-button.active {

    color:
        var(--primary);

    border-color:
        color-mix(
            in srgb,
            var(--primary) 45%,
            var(--border)
        );

    background:
        var(--primary-soft);
}


/* ===========================================================
   搜尋下一項
   =========================================================== */

.kc14-next-search-row {

    display:
        none;

    margin-top:
        9px;

    justify-content:
        flex-end;
}


.kc14-next-search-row.show {

    display:
        flex;
}


#kc14NextSearchButton {

    min-height:
        42px;

    padding:
        0 14px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--success) 45%,
            var(--border)
        );

    border-radius:
        9px;

    color:
        var(--success);

    background:
        color-mix(
            in srgb,
            var(--success) 7%,
            var(--surface)
        );

    font-size:
        .72em;

    font-weight:
        900;
}


#kc14NextSearchButton:hover {

    color:
        #FFFFFF;

    border-color:
        var(--success);

    background:
        var(--success);
}


/* ===========================================================
   Editor Overlay
   =========================================================== */

.kc14-shelf-overlay {

    position:
        fixed;

    z-index:
        300;

    inset:
        0;

    padding:
        20px;

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(23,30,38,.48);

    backdrop-filter:
        blur(5px);
}


.kc14-shelf-overlay.show {

    display:
        flex;
}


body.kc14-order-editor-open {

    overflow:
        hidden;
}


.kc14-shelf-panel {

    width:
        min(
            720px,
            100%
        );

    max-height:
        88vh;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    border:
        1px solid
        var(--border);

    border-radius:
        18px;

    color:
        var(--text);

    background:
        var(--surface);

    box-shadow:
        0 30px 80px
        rgba(20,30,40,.28);
}


/* ===========================================================
   Editor Header
   =========================================================== */

.kc14-shelf-head {

    min-height:
        74px;

    padding:
        14px 17px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        15px;

    border-bottom:
        1px solid
        var(--border);
}


.kc14-shelf-head strong {

    display:
        block;

    font-size:
        1.05em;

    font-weight:
        950;
}


.kc14-shelf-head small {

    display:
        block;

    margin-top:
        2px;

    color:
        var(--primary);

    font-size:
        .7em;

    font-weight:
        800;
}


.kc14-shelf-close {

    width:
        44px;

    height:
        44px;

    border:
        1px solid
        var(--border);

    border-radius:
        10px;

    color:
        var(--text-2);

    background:
        var(--surface-soft);

    font-size:
        1.35em;
}


/* ===========================================================
   Help
   =========================================================== */

.kc14-shelf-help {

    padding:
        10px 17px;

    color:
        var(--muted);

    background:
        var(--surface-soft);

    border-bottom:
        1px solid
        var(--border);

    font-size:
        .7em;

    line-height:
        1.5;
}


/* ===========================================================
   List
   =========================================================== */

.kc14-shelf-list {

    flex:
        1;

    min-height:
        0;

    overflow-y:
        auto;

    padding:
        9px;
}


.kc14-shelf-row {

    min-height:
        66px;

    padding:
        8px
        9px;

    display:
        grid;

    grid-template-columns:
        42px
        minmax(0,1fr)
        auto;

    align-items:
        center;

    gap:
        9px;

    border-bottom:
        1px solid
        var(--border);
}


.kc14-shelf-row:last-child {

    border-bottom:
        0;
}


.kc14-shelf-number {

    width:
        36px;

    height:
        36px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        9px;

    color:
        var(--primary);

    background:
        var(--primary-soft);

    font-size:
        .73em;

    font-weight:
        950;
}


.kc14-shelf-product {

    min-width:
        0;
}


.kc14-shelf-product strong {

    display:
        block;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        var(--text);

    font-size:
        .82em;

    font-weight:
        900;
}


.kc14-shelf-product small {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--muted);

    font-family:
        Consolas,
        monospace;

    font-size:
        .65em;

    font-weight:
        750;
}


/* ===========================================================
   Move buttons
   =========================================================== */

.kc14-shelf-controls {

    display:
        flex;

    gap:
        5px;
}


.kc14-shelf-controls button {

    width:
        42px;

    height:
        42px;

    padding:
        0;

    border:
        1px solid
        var(--border);

    border-radius:
        9px;

    color:
        var(--text-2);

    background:
        var(--surface-soft);

    font-size:
        .95em;

    font-weight:
        900;
}


.kc14-shelf-controls button:hover {

    color:
        var(--primary);

    border-color:
        var(--primary);

    background:
        var(--primary-soft);
}


/* ===========================================================
   Editor actions
   =========================================================== */

.kc14-shelf-actions {

    padding:
        12px
        14px;

    display:
        grid;

    grid-template-columns:
        auto
        1fr
        auto;

    gap:
        8px;

    border-top:
        1px solid
        var(--border);

    background:
        var(--surface);
}


.kc14-shelf-actions button {

    min-height:
        48px;

    padding:
        0
        15px;

    border-radius:
        10px;

    font-size:
        .75em;

    font-weight:
        900;
}


.kc14-reset-order {

    color:
        var(--text-2);

    border:
        1px solid
        var(--border);

    background:
        var(--surface-soft);
}


.kc14-cancel-order {

    justify-self:
        end;

    color:
        var(--text-2);

    border:
        1px solid
        var(--border);

    background:
        var(--surface);
}


.kc14-save-order {

    color:
        #FFFFFF;

    border:
        1px solid
        var(--primary);

    background:
        var(--primary);
}


.kc14-save-order:hover {

    background:
        var(--primary-hover);
}


/* ===========================================================
   Mobile
   =========================================================== */

@media (max-width: 720px) {

    .section-heading {

        flex-wrap:
            wrap;

        padding-top:
            7px;

        padding-bottom:
            7px;
    }


    .kc14-shelf-toolbar {

        width:
            100%;

        margin-left:
            0;
    }


    .kc14-toolbar-button {

        flex:
            1;

        min-height:
            44px;
    }


    .kc14-next-search-row {

        justify-content:
            stretch;
    }


    #kc14NextSearchButton {

        width:
            100%;

        min-height:
            46px;

        justify-content:
            center;
    }


    .kc14-shelf-overlay {

        padding:
            0;

        align-items:
            flex-end;
    }


    .kc14-shelf-panel {

        width:
            100%;

        max-height:
            92vh;

        border-radius:
            20px
            20px
            0
            0;
    }


    .kc14-shelf-row {

        grid-template-columns:
            39px
            minmax(0,1fr)
            auto;

        padding-left:
            7px;

        padding-right:
            7px;
    }


    .kc14-shelf-controls {

        gap:
            4px;
    }


    .kc14-shelf-controls button {

        width:
            40px;

        height:
            44px;
    }


    .kc14-shelf-actions {

        grid-template-columns:
            1fr
            1fr;

        padding-bottom:
            max(
                13px,
                env(safe-area-inset-bottom)
            );
    }


    .kc14-reset-order {

        grid-column:
            1 / -1;
    }


    .kc14-cancel-order {

        justify-self:
            stretch;
    }


    .kc14-save-order {

        width:
            100%;
    }

}


/* ===========================================================
   Narrow mobile
   =========================================================== */

@media (max-width: 430px) {

    .kc14-shelf-row {

        grid-template-columns:
            34px
            minmax(0,1fr);
    }


    .kc14-shelf-number {

        width:
            32px;

        height:
            32px;
    }


    .kc14-shelf-controls {

        grid-column:
            1 / -1;

        padding-left:
            43px;
    }


    .kc14-shelf-controls button {

        flex:
            1;

        width:
            auto;
    }

}






/* ===========================================================
   v0.14.3
   JS 直接控制只看已選
   =========================================================== */

.product-card {

    /*
     * 不使用 display 動畫，
     * 避免只看已選切換時閃爍。
     */

    animation: none !important;
}

/* ===========================================================
   快抄 v0.16 Alpha
   手機首屏壓縮 / 不改業務邏輯
   =========================================================== */

@media (max-width: 720px) {

    /* -------------------------------------------------------
       1. 固定底欄安全距離
       ------------------------------------------------------- */

    body {
        padding-bottom: calc(104px + env(safe-area-inset-bottom));
    }

    .app-shell {
        padding-top: 9px;
        padding-bottom: calc(118px + env(safe-area-inset-bottom));
        gap: 10px;
    }

    .product-grid {
        padding-bottom: 26px;
    }

    .order-panel {
        margin-bottom: calc(26px + env(safe-area-inset-bottom));
    }


    /* -------------------------------------------------------
       2. Header 壓薄
       ------------------------------------------------------- */

    .header-inner {
        min-height: 62px;
        padding-top: max(7px, env(safe-area-inset-top));
        padding-bottom: 7px;
        gap: 6px;
    }

    .brand-logo {
        width: 40px;
        height: 40px;
    }

    .toolbar-button {
        min-height: 42px;
    }


    /* -------------------------------------------------------
       3. 通路 / 日期：只留一層日期顯示
       原生 date input 仍覆蓋在日期卡上，功能完全保留。
       ------------------------------------------------------- */

    .setup-card {
        padding: 11px 12px;
    }

    .setup-main {
        grid-template-columns: 1fr 1fr;
        gap: 8px 9px;
    }

    .setup-main > div:first-child {
        grid-column: 1 / -1;
    }

    .section-label,
    .date-field > span {
        margin-bottom: 5px;
        font-size: .69em;
    }

    .channel-switch {
        padding: 4px;
        gap: 4px;
    }

    .channel-button {
        min-height: 47px;
        font-size: .88em;
    }

    .kc16-date-field {
        position: relative;
        min-height: 65px;
    }

    .kc16-date-field input[type="date"] {
        position: absolute;
        z-index: 3;
        left: 0;
        right: 0;
        top: 25px;
        width: 100%;
        height: 42px;
        min-height: 42px;
        margin: 0;
        opacity: 0;
        cursor: pointer;
    }

    .kc16-date-field .date-readable {
        min-height: 42px;
        margin: 0;
        padding: 0 9px;
        display: flex;
        align-items: center;
        border: 1px solid var(--border);
        border-radius: 9px;
        color: var(--text);
        background: var(--surface-soft);
        font-size: .88em;
        font-weight: 950;
    }

    .kc16-date-field .date-readable::after {
        content: "▾";
        margin-left: auto;
        padding-left: 6px;
        color: var(--muted);
        font-size: .72em;
    }

    .kc16-date-field .date-readable[data-empty="true"] {
        color: var(--danger);
        font-size: .72em;
    }

    .arrival-shortcuts {
        width: 100%;
        margin-top: 3px;
        padding: 0;
        display: grid;
        grid-template-columns: auto repeat(5, minmax(0,1fr));
        gap: 4px;
        align-items: center;
        overflow: visible;
    }

    .arrival-shortcuts > span {
        margin: 0 2px 0 0;
        font-size: .60em;
        white-space: nowrap;
    }

    .arrival-shortcuts button {
        min-width: 0;
        min-height: 37px;
        padding: 0 3px;
        font-size: .62em;
    }


    /* -------------------------------------------------------
       4. 搜尋 / 常用 / 品牌：全部一次看完，不橫向切半
       ------------------------------------------------------- */

    .filter-card {
        margin-top: 9px;
        padding: 10px 11px;
    }

    .search-box {
        min-height: 49px;
        padding: 0 12px;
    }

    .search-box input {
        font-size: .84em;
    }

    .tabs-row {
        margin-top: 8px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0,1fr));
        gap: 5px;
        overflow: visible;
    }

    .smart-tab {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        padding: 0 3px;
        border-radius: 9px;
        font-size: .65em;
        white-space: nowrap;
    }

    .brand-tabs {
        margin-top: 6px;
        display: grid;
        grid-template-columns: repeat(4, minmax(0,1fr));
        gap: 5px;
        overflow: visible;
    }

    .brand-tab {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        padding: 0 3px;
        border-radius: 9px;
        font-size: .63em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


    /* -------------------------------------------------------
       5. 現場缺量換算：一列完成
       ------------------------------------------------------- */

    .restock-mode-area {
        min-height: 52px;
        margin-top: 7px;
        padding: 6px 8px;
        gap: 7px;
        border-radius: 9px;
    }

    .restock-mode-copy strong {
        font-size: .70em;
        white-space: nowrap;
    }

    .restock-mode-copy small {
        display: none;
    }

    .restock-mode-button {
        min-height: 38px;
        padding: 0 9px;
        gap: 5px;
        border-radius: 8px;
        font-size: .62em;
        white-space: nowrap;
    }


    /* -------------------------------------------------------
       6. 「只看已選」搬到商品標題旁
       field summary 在手機已被底部 bar 重複顯示，因此隱藏。
       ------------------------------------------------------- */

    .section-heading {
        min-height: 0;
        padding: 6px 2px;
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        align-items: center;
        gap: 6px;
    }

    .section-heading > div:first-child {
        min-width: 0;
    }

    .section-heading > #currentChannelHint,
    .section-heading > .field-selection-summary {
        display: none !important;
    }

    .kc16-selected-inline {
        width: auto;
        margin: 0;
        display: block;
    }

    .kc16-selected-inline .selected-only-button {
        width: auto;
        min-height: 39px;
        padding: 0 9px;
        justify-content: center;
        gap: 5px;
        font-size: .64em;
        white-space: nowrap;
    }

    .kc16-selected-inline .selected-only-count {
        min-width: 21px;
        min-height: 21px;
        padding: 0 5px;
    }

    .kc16-selected-inline .selected-only-info {
        display: none !important;
    }

    .kc14-shelf-toolbar {
        grid-column: 1 / -1;
        width: 100%;
        margin: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    .kc14-toolbar-button {
        min-height: 40px;
        padding: 0 8px;
        font-size: .64em;
    }

    #kc14NextSearchRow {
        margin-top: 5px;
    }

    #kc14NextSearchButton {
        min-height: 41px;
        font-size: .67em;
    }


    /* -------------------------------------------------------
       7. 商品卡略壓縮，但不犧牲數量按鈕
       ------------------------------------------------------- */

    .product-grid {
        gap: 8px;
    }

    .product-card,
    html[data-large="true"] .product-card {
        min-height: 146px;
        padding: 12px 13px;
    }

    .product-card.brand-orange,
    .product-card.brand-nac,
    html[data-large="true"] .product-card.brand-orange,
    html[data-large="true"] .product-card.brand-nac {
        min-height: 150px;
    }

    .product-name,
    html[data-large="true"] .product-name {
        font-size: 1.02em;
    }

    .product-meta {
        margin-top: 6px;
    }

    .quantity-row {
        margin-top: 7px;
        padding-top: 7px;
    }

    .qty-main,
    html[data-large="true"] .qty-main {
        grid-template-columns: 60px minmax(0,1fr) 60px;
        gap: 7px;
    }

    .qty-button,
    .qty-input,
    html[data-large="true"] .qty-button,
    html[data-large="true"] .qty-input {
        min-height: 56px;
    }

    .qty-input {
        font-size: 1.36em;
    }


    /* 缺量換算開啟時，原本 v0.13 的 215px 太高。 */
    html[data-restock-helper="true"] .product-card {
        min-height: 198px;
    }


    /* -------------------------------------------------------
       8. 固定底欄：保留，但不遮商品
       ------------------------------------------------------- */

    .mobile-bar {
        left: 8px;
        right: 8px;
        bottom: max(7px, env(safe-area-inset-bottom));
        min-height: 68px;
        padding: 7px 8px 7px 12px;
        border-radius: 14px;
        box-shadow: 0 8px 28px rgba(30,42,54,.20);
    }

    .mobile-bar small {
        font-size: .62em;
    }

    .mobile-bar strong {
        font-size: .98em;
    }

    .mobile-preview,
    .mobile-copy {
        min-height: 50px;
        padding: 0 14px;
    }
}


@media (max-width: 430px) {

    .header-inner {
        padding-left: 9px;
        padding-right: 9px;
    }

    .arrival-shortcuts {
        gap: 3px;
    }

    .arrival-shortcuts > span {
        font-size: .56em;
    }

    .arrival-shortcuts button {
        font-size: .58em;
    }

    .smart-tab,
    .brand-tab {
        font-size: .60em;
    }

    .restock-mode-button {
        padding-left: 7px;
        padding-right: 7px;
        font-size: .59em;
    }
}


/* KC17 MOBILE START */

/* ===========================================================
   快抄 v0.17 Alpha
   商品操作列放大 + 手機置頂鍵
   =========================================================== */


@media (max-width: 720px) {


    /*
     * -------------------------------------------------------
     * 商品標題
     * -------------------------------------------------------
     */

    .kc17-product-heading {

        min-height:
            54px !important;

        padding:
            4px 3px !important;

        align-items:
            center !important;
    }


    .kc17-product-count {

        color:
            var(--text) !important;

        font-size:
            1.05em !important;

        font-weight:
            950 !important;
    }


    /*
     * -------------------------------------------------------
     * 商品操作按鈕
     * -------------------------------------------------------
     *
     * 原本手機版字太小。
     */

    .kc17-product-tool {

        min-height:
            49px !important;

        padding:
            0 15px !important;

        border-radius:
            11px !important;

        font-size:
            .83em !important;

        font-weight:
            900 !important;

        line-height:
            1.2 !important;

        letter-spacing:
            .01em !important;
    }


    .kc17-favorite-first,
    .kc17-product-order {

        font-size:
            .86em !important;
    }


    .kc17-selected-only {

        min-height:
            48px !important;

        font-size:
            .82em !important;
    }


    /*
     * 數字 0 / 1 / 2 ...
     * 如果原版用了 span 小徽章，
     * 一併放大。
     */

    .kc17-selected-only span {

        font-size:
            1em !important;
    }


    /*
     * -------------------------------------------------------
     * 浮動置頂鍵
     * -------------------------------------------------------
     */

    .kc17-back-top {

        position:
            fixed;

        z-index:
            90;

        right:
            15px;

        bottom:
            calc(
                94px +
                env(safe-area-inset-bottom)
            );

        width:
            58px;

        height:
            58px;

        padding:
            4px 0 3px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            center;

        justify-content:
            center;

        gap:
            0;

        border:
            1px solid
            rgba(62,96,155,.32);

        border-radius:
            50%;

        color:
            #FFFFFF;

        background:
            var(--primary);

        box-shadow:
            0 7px 22px
            rgba(38,55,80,.24);

        opacity:
            0;

        visibility:
            hidden;

        pointer-events:
            none;

        transform:
            translateY(
                12px
            )
            scale(.92);

        transition:
            opacity .18s ease,
            transform .18s ease,
            visibility .18s ease,
            background .13s ease;

        -webkit-tap-highlight-color:
            transparent;
    }


    .kc17-back-top.show {

        opacity:
            1;

        visibility:
            visible;

        pointer-events:
            auto;

        transform:
            translateY(0)
            scale(1);
    }


    .kc17-back-top:active {

        transform:
            scale(.91);
    }


    .kc17-top-arrow {

        display:
            block;

        height:
            27px;

        font-size:
            1.42em;

        line-height:
            25px;

        font-weight:
            900;
    }


    .kc17-top-text {

        display:
            block;

        margin-top:
            -1px;

        font-size:
            .56em;

        line-height:
            1;

        font-weight:
            900;

        letter-spacing:
            .03em;
    }


    /*
     * 防止浮動置頂鍵和底部複製按鈕互相重疊
     */

    .mobile-bar {

        z-index:
            80;
    }


}


/*
 * 超窄手機略微調整
 */

@media (max-width: 430px) {

    .kc17-product-tool {

        padding:
            0 11px !important;

        font-size:
            .79em !important;
    }


    .kc17-back-top {

        right:
            13px;

        width:
            56px;

        height:
            56px;
    }

}


/*
 * 桌機不顯示置頂鍵
 */

@media (min-width: 721px) {

    .kc17-back-top {

        display:
            none !important;
    }

}

/* KC17 MOBILE END */


/* KC18 START */

/* ===========================================================
   快抄 v0.18 Alpha
   Mobile Order Bottom Sheet
   =========================================================== */


.kc18-order-sheet {

    display:
        none;
}


/* ===========================================================
   手機
   =========================================================== */

@media (max-width: 720px) {


    /*
     * 原本頁面最下面的 order-panel
     * 手機不用再佔整段長頁面。
     *
     * app.js 還是會正常更新它，
     * v0.18 Bottom Sheet 再複製內容。
     */

    #orderPanel {

        display:
            none !important;
    }


    body.kc18-sheet-open {

        overflow:
            hidden !important;

        touch-action:
            none;
    }


    .kc18-order-sheet {

        position:
            fixed;

        z-index:
            300;

        inset:
            0;

        display:
            flex;

        align-items:
            flex-end;

        justify-content:
            center;

        visibility:
            hidden;

        pointer-events:
            none;
    }


    .kc18-sheet-backdrop {

        position:
            absolute;

        inset:
            0;

        background:
            rgba(
                18,
                24,
                31,
                .46
            );

        opacity:
            0;

        transition:
            opacity .2s ease;

        backdrop-filter:
            blur(3px);
    }


    .kc18-sheet-panel {

        position:
            relative;

        z-index:
            1;

        width:
            100%;

        max-height:
            min(
                82dvh,
                760px
            );

        padding:
            8px
            16px
            calc(
                16px +
                env(
                    safe-area-inset-bottom
                )
            );

        display:
            flex;

        flex-direction:
            column;

        border:
            1px solid
            var(--border);

        border-bottom:
            0;

        border-radius:
            22px
            22px
            0
            0;

        color:
            var(--text);

        background:
            var(--paper);

        box-shadow:
            0
            -16px
            50px
            rgba(
                20,
                28,
                38,
                .24
            );

        transform:
            translateY(
                105%
            );

        transition:
            transform .24s
            cubic-bezier(
                .22,
                .75,
                .22,
                1
            );
    }


    .kc18-order-sheet.show {

        visibility:
            visible;

        pointer-events:
            auto;
    }


    .kc18-order-sheet.show
    .kc18-sheet-backdrop {

        opacity:
            1;
    }


    .kc18-order-sheet.show
    .kc18-sheet-panel {

        transform:
            translateY(0);
    }


    /*
     * 上方拖曳把手
     */

    .kc18-sheet-handle {

        width:
            44px;

        height:
            5px;

        margin:
            0 auto
            8px;

        border-radius:
            999px;

        background:
            var(--border-strong);

        opacity:
            .8;
    }


    /*
     * Header
     */

    .kc18-sheet-head {

        min-height:
            58px;

        padding-bottom:
            10px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        gap:
            12px;

        border-bottom:
            1px solid
            var(--border);
    }


    .kc18-sheet-head strong {

        display:
            block;

        color:
            var(--text);

        font-size:
            1.08em;

        font-weight:
            950;
    }


    .kc18-sheet-head span {

        display:
            block;

        margin-top:
            2px;

        color:
            var(--primary);

        font-size:
            .74em;

        font-weight:
            850;
    }


    #kc18SheetClose {

        flex:
            0 0 auto;

        width:
            46px;

        height:
            46px;

        border:
            1px solid
            var(--border);

        border-radius:
            12px;

        color:
            var(--text-2);

        background:
            var(--surface-soft);

        font-size:
            1.45em;

        font-weight:
            500;
    }


    /*
     * 訂單內容自己捲動
     */

    .kc18-sheet-content {

        flex:
            1;

        min-height:
            110px;

        margin:
            4px -3px
            0;

        padding:
            8px
            3px
            12px;

        overflow-y:
            auto;

        overscroll-behavior:
            contain;

        -webkit-overflow-scrolling:
            touch;
    }


    /*
     * Bottom Sheet 裡扣號再稍微加大。
     */

    .kc18-sheet-content
    .order-code {

        font-size:
            1.05em;

        font-weight:
            950;
    }


    .kc18-sheet-content
    .order-note {

        font-size:
            .63em;
    }


    .kc18-sheet-content
    .empty-state {

        padding:
            30px
            10px;
    }


    /*
     * 統計
     */

    .kc18-sheet-summary {

        flex:
            0 0 auto;

        margin-top:
            3px;

        padding:
            10px 0;

        display:
            grid;

        grid-template-columns:
            1fr
            1fr;

        gap:
            8px;

        border-top:
            1px solid
            var(--border);
    }


    .kc18-sheet-summary > div {

        min-height:
            58px;

        padding:
            8px 12px;

        display:
            flex;

        align-items:
            center;

        justify-content:
            space-between;

        border:
            1px solid
            var(--border);

        border-radius:
            11px;

        background:
            var(--surface-soft);
    }


    .kc18-sheet-summary small {

        color:
            var(--muted);

        font-size:
            .72em;

        font-weight:
            800;
    }


    .kc18-sheet-summary strong {

        color:
            var(--text);

        font-size:
            1.2em;

        font-weight:
            950;
    }


    /*
     * 複製訂單
     */

    .kc18-sheet-copy {

        flex:
            0 0 auto;

        width:
            100%;

        min-height:
            58px;

        border:
            2px solid
            var(--primary);

        border-radius:
            13px;

        color:
            #FFFFFF;

        background:
            var(--primary);

        box-shadow:
            0 6px 17px
            rgba(
                62,
                96,
                155,
                .18
            );

        font-size:
            .94em;

        font-weight:
            950;
    }


    .kc18-sheet-copy:disabled {

        opacity:
            .4;

        box-shadow:
            none;
    }


    .kc18-sheet-copy.success {

        border-color:
            var(--success);

        background:
            var(--success);
    }


    /*
     * 既然手機 orderPanel 已不在頁尾，
     * 商品最後一張只需要避開固定 mobile bar。
     */

    .product-grid {

        padding-bottom:
            calc(
                92px +
                env(
                    safe-area-inset-bottom
                )
            ) !important;
    }

}


/* ===========================================================
   Desktop 不變
   =========================================================== */

@media (min-width: 721px) {

    .kc18-order-sheet {

        display:
            none !important;
    }

}

/* KC18 END */


/* KC19 START */

/* ===========================================================
   快抄 v0.19 Alpha
   Bottom Sheet 視覺精修
   =========================================================== */


@media (max-width: 720px) {


    /* =======================================================
       Sheet 高度
       ======================================================= */

    .kc18-sheet-panel {

        max-height:
            74dvh !important;

        transition:
            transform .24s
            cubic-bezier(
                .22,
                .75,
                .22,
                1
            ),
            max-height .22s ease !important;
    }


    .kc18-sheet-panel.kc19-expanded {

        max-height:
            92dvh !important;
    }


    /*
     * 把手變成真的可操作區
     */

    .kc18-sheet-handle {

        width:
            60px !important;

        height:
            22px !important;

        margin:
            -3px auto
            2px !important;

        display:
            flex;

        align-items:
            center;

        justify-content:
            center;

        background:
            transparent !important;

        cursor:
            pointer;
    }


    .kc18-sheet-handle::before {

        content:
            "";

        width:
            46px;

        height:
            5px;

        border-radius:
            999px;

        background:
            var(--border-strong);
    }


    /* =======================================================
       訂單日期標題
       ======================================================= */

    .kc18-sheet-content
    .preview-header {

        padding:
            13px 0
            15px !important;

        line-height:
            1.45 !important;
    }


    .kc19-order-date-main {

        color:
            var(--text);

        font-size:
            1.02em;

        font-weight:
            950;
    }


    .kc19-order-date-arrival {

        margin-top:
            5px;

        color:
            var(--text-2);

        font-size:
            .78em;

        font-weight:
            800;
    }


    /* =======================================================
       11 / 12 部門
       ======================================================= */

    .kc18-sheet-content
    .department-heading {

        margin:
            18px 0
            7px !important;

        min-height:
            34px;

        gap:
            9px !important;

        color:
            var(--text-2);

        font-size:
            .76em !important;

        font-weight:
            950 !important;
    }


    .kc18-sheet-content
    .department-heading::before {

        padding:
            5px 10px;

        border-radius:
            8px;

        white-space:
            nowrap;
    }


    .kc18-sheet-content
    .kc19-dept-12 {

        color:
            var(--dept12) !important;
    }


    .kc18-sheet-content
    .kc19-dept-12::before {

        content:
            "12部門";

        color:
            var(--dept12);

        background:
            var(--dept12-bg);
    }


    .kc18-sheet-content
    .kc19-dept-11 {

        color:
            var(--dept11) !important;
    }


    .kc18-sheet-content
    .kc19-dept-11::before {

        content:
            "11部門";

        color:
            var(--dept11);

        background:
            var(--dept11-bg);
    }


    /*
     * 原本標題文字隱藏，
     * 改由 ::before 當 badge。
     */

    .kc18-sheet-content
    .kc19-dept-11,
    .kc18-sheet-content
    .kc19-dept-12 {

        font-size:
            0 !important;
    }


    .kc18-sheet-content
    .kc19-dept-11::before,
    .kc18-sheet-content
    .kc19-dept-12::before {

        font-size:
            13px !important;

        font-weight:
            950;
    }


    .kc18-sheet-content
    .department-heading::after {

        opacity:
            .8;
    }


    /* =======================================================
       訂單商品
       ======================================================= */

    .kc18-sheet-content
    .order-line {

        min-height:
            61px !important;

        padding:
            10px 0 !important;
    }


    /*
     * 扣號 / 箱數是第一視覺
     */

    .kc18-sheet-content
    .order-code {

        color:
            var(--text);

        font-size:
            1.09em !important;

        font-weight:
            950 !important;

        letter-spacing:
            .055em !important;
    }


    /*
     * 商品名稱只是核對用
     */

    .kc18-sheet-content
    .order-note {

        display:
            block;

        max-width:
            100%;

        margin-top:
            4px !important;

        overflow:
            hidden;

        text-overflow:
            ellipsis;

        white-space:
            nowrap;

        color:
            var(--muted);

        font-size:
            .59em !important;

        font-weight:
            650;

        opacity:
            .9;
    }


    /* =======================================================
       頂部 Header
       ======================================================= */

    .kc18-sheet-head {

        min-height:
            61px !important;
    }


    .kc18-sheet-head strong {

        font-size:
            1.1em !important;
    }


    .kc18-sheet-head span {

        margin-top:
            1px !important;

        font-size:
            .76em !important;
    }


    /* =======================================================
       統計卡
       ======================================================= */

    .kc18-sheet-summary {

        padding:
            9px 0 !important;
    }


    .kc18-sheet-summary > div {

        min-height:
            61px !important;
    }


    .kc18-sheet-summary small {

        font-size:
            .72em !important;
    }


    .kc18-sheet-summary strong {

        font-size:
            1.28em !important;
    }


    /* =======================================================
       複製
       ======================================================= */

    .kc18-sheet-copy {

        min-height:
            60px !important;

        font-size:
            .96em !important;
    }

}


/* 桌機完全不受影響 */

@media (min-width: 721px) {

    .kc19-order-date-main,
    .kc19-order-date-arrival {

        display:
            initial;
    }

}

/* KC19 END */


/* KC21 VISUAL START */

/* ===========================================================
   快抄 v0.21 Alpha
   高對比視覺重構
   =========================================================== */


/* ===========================================================
   全站新色盤
   =========================================================== */

:root {

    --bg: #E9EEF5;
    --bg-warm: #F7F4EE;

    --surface: #FFFFFF;
    --surface-soft: #F2F5F9;
    --surface-hover: #E8EDF4;

    --paper: #FFFEFA;

    --text: #172033;
    --text-2: #425069;
    --muted: #66738A;

    --border: #C9D2DF;
    --border-strong: #98A7BA;

    /* 皇家藍 */
    --primary: #2858D7;
    --primary-hover: #1E47B5;
    --primary-soft: #E8EEFF;

    /* 部門 */
    --dept12: #2855C7;
    --dept12-bg: #E4ECFF;

    --dept11: #14734F;
    --dept11-bg: #DFF5EB;

    /* 品牌 */
    --kc21-roujiang: #078C8A;
    --kc21-mayflower: #3158C8;
    --kc21-soft: #7857C6;
    --kc21-deyi: #C24773;
    --kc21-orange: #E87822;
    --kc21-nac: #198763;

    /* 功能 */
    --success: #168A59;
    --success-soft: #E1F6EC;

    --danger: #C83F4D;
    --danger-soft: #FCE7E9;

    --warning: #B97800;
    --warning-soft: #FFF2CE;

    --purple: #704FC4;
    --purple-soft: #EEE8FF;

    --shadow:
        0 7px 23px
        rgba(30, 43, 66, .08);

    --shadow-hover:
        0 12px 32px
        rgba(30, 43, 66, .14);
}


/* ===========================================================
   Dark Mode 仍然保留，但顏色也拉開
   =========================================================== */

html[data-theme="dark"] {

    --bg: #111722;
    --bg-warm: #151B27;

    --surface: #1C2532;
    --surface-soft: #263140;
    --surface-hover: #303D4D;

    --paper: #202936;

    --text: #F7F9FC;
    --text-2: #D6DDEA;
    --muted: #A5B0C1;

    --border: #3A485B;
    --border-strong: #68798E;

    --primary: #7898FF;
    --primary-hover: #91AAFF;
    --primary-soft: #28385F;

    --dept12: #B3C4FF;
    --dept12-bg: #29365E;

    --dept11: #9BE2C8;
    --dept11-bg: #203E36;

    --success: #65D2A3;
    --success-soft: #203E34;

    --danger: #FF9EA8;
    --danger-soft: #4B282E;

    --warning: #FFD36E;
    --warning-soft: #44391D;

    --purple: #C2B0FF;
    --purple-soft: #332A50;
}


/* ===========================================================
   網頁背景
   =========================================================== */

body {

    background:
        linear-gradient(
            180deg,
            #F8F4EC 0px,
            #EDF1F7 360px,
            #E9EEF5 100%
        );
}


html[data-theme="dark"] body {

    background:
        linear-gradient(
            180deg,
            #171E2A 0,
            #111722 100%
        );
}


/* ===========================================================
   HEADER
   =========================================================== */

.app-header {

    border-bottom:
        2px solid
        #D3DAE6;

    box-shadow:
        0 3px 13px
        rgba(30, 43, 66, .08);
}


html[data-theme="dark"]
.app-header {

    border-bottom-color:
        #3B4758;
}


/* 大字 */

.large-quick-button {

    color:
        #5F42A9;

    border-color:
        #C8BAEF;

    background:
        #F0EBFF;
}


.large-quick-button.active {

    color:
        #FFFFFF;

    border-color:
        #704FC4;

    background:
        #704FC4;
}


/* ===========================================================
   三大主區塊分色
   =========================================================== */

.setup-card {

    border-top:
        4px solid
        #2858D7 !important;
}


.filter-card {

    border-top:
        4px solid
        #704FC4 !important;
}


.order-panel {

    border-top:
        4px solid
        #168A59 !important;

    background:
        var(--paper);
}


/* ===========================================================
   通路
   =========================================================== */

.channel-switch {

    border:
        1px solid
        var(--border);

    background:
        #EEF2F7;
}


html[data-theme="dark"]
.channel-switch {

    background:
        #242E3B;
}


/* 萬家福 */

.channel-button[data-channel="wan"].active {

    color:
        #FFFFFF !important;

    border-color:
        #2858D7 !important;

    background:
        #2858D7 !important;

    box-shadow:
        0 5px 16px
        rgba(40, 88, 215, .25);
}


/* 大全聯 */

.channel-button[data-channel="px"].active {

    color:
        #FFFFFF !important;

    border-color:
        #704FC4 !important;

    background:
        #704FC4 !important;

    box-shadow:
        0 5px 16px
        rgba(112, 79, 196, .25);
}


/* ===========================================================
   日期
   =========================================================== */

.date-field input,
.kc09-date-field .date-readable {

    border-color:
        #AAB7C8 !important;

    background:
        #FFFFFF !important;
}


html[data-theme="dark"]
.date-field input,
html[data-theme="dark"]
.kc09-date-field .date-readable {

    color:
        var(--text) !important;

    border-color:
        #58697D !important;

    background:
        #25303E !important;
}


.arrival-shortcuts button {

    color:
        #2858D7 !important;

    border-color:
        #B7C5E8 !important;

    background:
        #EDF2FF !important;
}


.arrival-shortcuts button:hover {

    color:
        #FFFFFF !important;

    border-color:
        #2858D7 !important;

    background:
        #2858D7 !important;
}


/* ===========================================================
   搜尋
   =========================================================== */

.search-box {

    border-color:
        #9DABC0 !important;

    background:
        #FFFFFF !important;

    box-shadow:
        inset 0 0 0 1px
        rgba(255,255,255,.7);
}


.search-box:focus-within {

    border-color:
        #2858D7 !important;

    box-shadow:
        0 0 0 4px
        rgba(40,88,215,.10);
}


html[data-theme="dark"]
.search-box {

    border-color:
        #526379 !important;

    background:
        #202B38 !important;
}


/* ===========================================================
   全部 / 常用 / 最近 / 最常用
   每一種模式都有辨識色
   =========================================================== */

.smart-tab {

    color:
        #43516A;

    border-color:
        #C5CEDA;

    background:
        #FFFFFF;
}


.smart-tab[data-mode="all"].active {

    color:
        #FFFFFF !important;

    border-color:
        #2858D7 !important;

    background:
        #2858D7 !important;
}


.smart-tab[data-mode="favorite"].active {

    color:
        #FFFFFF !important;

    border-color:
        #B97800 !important;

    background:
        #B97800 !important;
}


.smart-tab[data-mode="recent"].active {

    color:
        #FFFFFF !important;

    border-color:
        #704FC4 !important;

    background:
        #704FC4 !important;
}


.smart-tab[data-mode="frequent"].active {

    color:
        #FFFFFF !important;

    border-color:
        #078C8A !important;

    background:
        #078C8A !important;
}


/* ===========================================================
   品牌分類
   =========================================================== */

html:not([data-theme="dark"])
.brand-tab[data-brand="柔匠"] {

    color:
        #05706F;

    border-color:
        #8ED2D0;

    background:
        #E7F7F6;
}


html:not([data-theme="dark"])
.brand-tab[data-brand="五月花"] {

    color:
        #294CA6;

    border-color:
        #9DB2ED;

    background:
        #EBF0FF;
}


html:not([data-theme="dark"])
.brand-tab[data-brand="柔情"] {

    color:
        #6646AA;

    border-color:
        #BAAAE6;

    background:
        #F0ECFC;
}


html:not([data-theme="dark"])
.brand-tab[data-brand="得意"] {

    color:
        #A43860;

    border-color:
        #E5A5BC;

    background:
        #FDEBF2;
}


html:not([data-theme="dark"])
.brand-tab[data-brand="橘子工坊"] {

    color:
        #B9530B;

    border-color:
        #EDAF80;

    background:
        #FFF0E4;
}


html:not([data-theme="dark"])
.brand-tab[data-brand="nacnac"] {

    color:
        #116F51;

    border-color:
        #8CCEB6;

    background:
        #E6F6F0;
}


/* 品牌啟用後直接實心 */

.brand-tab[data-brand="柔匠"].active {

    color:
        #FFFFFF !important;

    border-color:
        #078C8A !important;

    background:
        #078C8A !important;
}


.brand-tab[data-brand="五月花"].active {

    color:
        #FFFFFF !important;

    border-color:
        #3158C8 !important;

    background:
        #3158C8 !important;
}


.brand-tab[data-brand="柔情"].active {

    color:
        #FFFFFF !important;

    border-color:
        #7857C6 !important;

    background:
        #7857C6 !important;
}


.brand-tab[data-brand="得意"].active {

    color:
        #FFFFFF !important;

    border-color:
        #C24773 !important;

    background:
        #C24773 !important;
}


.brand-tab[data-brand="橘子工坊"].active {

    color:
        #FFFFFF !important;

    border-color:
        #E87822 !important;

    background:
        #E87822 !important;
}


.brand-tab[data-brand="nacnac"].active {

    color:
        #FFFFFF !important;

    border-color:
        #198763 !important;

    background:
        #198763 !important;
}


/* 深色模式品牌 */

html[data-theme="dark"]
.brand-tab {

    color:
        var(--text-2);

    background:
        #242F3D;
}


/* ===========================================================
   現場缺量換算
   =========================================================== */

.restock-mode-area,
.kc09-shortage-card {

    border-color:
        #E0BE66 !important;

    background:
        #FFF8E5 !important;
}


.restock-mode-copy strong,
.kc09-shortage-title {

    color:
        #6E4A00 !important;
}


.restock-mode-button,
.kc09-shortage-toggle {

    color:
        #875A00 !important;

    border-color:
        #E0B64F !important;

    background:
        #FFF0BF !important;
}


.restock-mode-button.active,
.kc09-shortage-toggle.active {

    color:
        #FFFFFF !important;

    border-color:
        #168A59 !important;

    background:
        #168A59 !important;
}


html[data-theme="dark"]
.restock-mode-area,
html[data-theme="dark"]
.kc09-shortage-card {

    border-color:
        #76602C !important;

    background:
        #332D1D !important;
}


/* ===========================================================
   商品工具
   =========================================================== */

.kc14-toolbar-button {

    border-width:
        1.5px !important;

    font-weight:
        850 !important;
}


/* 常用優先 */

#kc14FavoriteFirst {

    color:
        #805500 !important;

    border-color:
        #DCBD67 !important;

    background:
        #FFF3CE !important;
}


#kc14FavoriteFirst.active {

    color:
        #FFFFFF !important;

    border-color:
        #B97800 !important;

    background:
        #B97800 !important;
}


/* 商品順序 */

#kc14EditShelf {

    color:
        #5E42A4 !important;

    border-color:
        #B7A7E4 !important;

    background:
        #EFEAFF !important;
}


/* 只看已選 */

#selectedOnlyButton,
.kc17-selected-only {

    color:
        #2450B5 !important;

    border-color:
        #A7BAE8 !important;

    background:
        #E9F0FF !important;
}


#selectedOnlyButton.active,
#selectedOnlyButton[aria-pressed="true"],
.kc17-selected-only.active,
.kc17-selected-only[aria-pressed="true"] {

    color:
        #FFFFFF !important;

    border-color:
        #2858D7 !important;

    background:
        #2858D7 !important;
}


/* ===========================================================
   商品卡片
   =========================================================== */

.product-card {

    border-color:
        #C4CEDB !important;

    background:
        #FFFFFF;

    box-shadow:
        0 4px 13px
        rgba(31,44,66,.055);
}


.product-card:hover {

    border-color:
        #8F9FB3 !important;

    box-shadow:
        var(--shadow-hover);
}


/* 品牌左側辨識條 */

.product-card[data-kc21-brand="柔匠"]::before {

    background:
        #078C8A !important;
}


.product-card[data-kc21-brand="五月花"]::before {

    background:
        #3158C8 !important;
}


.product-card[data-kc21-brand="柔情"]::before {

    background:
        #7857C6 !important;
}


.product-card[data-kc21-brand="得意"]::before {

    background:
        #C24773 !important;
}


.product-card[data-kc21-brand="橘子工坊"]::before {

    background:
        #E87822 !important;
}


.product-card[data-kc21-brand="nacnac"]::before {

    background:
        #198763 !important;
}


/* Emoji 做成一個真正的辨識 Icon */

.product-emoji {

    width:
        35px;

    height:
        35px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        #D5DCE6;

    border-radius:
        10px;

    background:
        #F2F5F9;

    font-size:
        1.05em !important;
}


/* 已經選入訂單 */

.product-card.selected {

    border-color:
        #168A59 !important;

    background:
        #F1FFF7 !important;

    box-shadow:
        0 0 0 3px
        rgba(22,138,89,.10),
        0 7px 18px
        rgba(30,60,45,.08) !important;
}


html[data-theme="dark"]
.product-card {

    border-color:
        #3E4C5E !important;

    background:
        #1D2633;
}


html[data-theme="dark"]
.product-card.selected {

    border-color:
        #5FD29F !important;

    background:
        #1C342B !important;
}


/* ===========================================================
   部門 / 扣號
   =========================================================== */

.department-chip.paper {

    color:
        #2349AA !important;

    background:
        #E4ECFF !important;
}


.department-chip.clean {

    color:
        #116B4B !important;

    background:
        #DFF5EB !important;
}


.code-chip {

    color:
        #173C86 !important;

    border-color:
        #A9BCE8 !important;

    background:
        #EAF0FF !important;

    font-weight:
        950 !important;
}


/* ===========================================================
   + / - / 數量
   =========================================================== */

/* 減少 */

.qty-button[data-add="-1"] {

    color:
        #B83242 !important;

    border-color:
        #E3A6AD !important;

    background:
        #FFF0F2 !important;
}


/* 增加 */

.qty-button.plus,
.qty-button[data-add="1"] {

    color:
        #FFFFFF !important;

    border-color:
        #168A59 !important;

    background:
        #168A59 !important;

    box-shadow:
        0 5px 12px
        rgba(22,138,89,.17) !important;
}


.qty-button.plus:hover,
.qty-button[data-add="1"]:hover {

    border-color:
        #107347 !important;

    background:
        #107347 !important;
}


.qty-input {

    border-color:
        #9BAABC !important;

    background:
        #FFFFFF !important;
}


.product-card.selected
.qty-input {

    border-color:
        #63B994 !important;
}


html[data-theme="dark"]
.qty-button[data-add="-1"] {

    color:
        #FFABB3 !important;

    border-color:
        #74404A !important;

    background:
        #40272D !important;
}


html[data-theme="dark"]
.qty-input {

    color:
        #FFFFFF !important;

    border-color:
        #607085 !important;

    background:
        #202B39 !important;
}


/* ===========================================================
   收藏星號
   =========================================================== */

.favorite.active {

    color:
        #A96E00 !important;

    border-color:
        #E4BE5C !important;

    background:
        #FFF0B9 !important;
}


/* ===========================================================
   清空
   =========================================================== */

.clear-button {

    color:
        #B62F3E !important;

    border-color:
        #E2A5AC !important;

    background:
        #FDE9EB !important;
}


.clear-button:hover {

    color:
        #FFFFFF !important;

    border-color:
        #C83F4D !important;

    background:
        #C83F4D !important;
}


/* ===========================================================
   訂單
   =========================================================== */

.order-code {

    color:
        #142A55 !important;
}


html[data-theme="dark"]
.order-code {

    color:
        #FFFFFF !important;
}


/* 複製是最後主要動作 → 綠色 */

.copy-button,
.kc18-sheet-copy {

    color:
        #FFFFFF !important;

    border-color:
        #168A59 !important;

    background:
        #168A59 !important;

    box-shadow:
        0 7px 18px
        rgba(22,138,89,.21) !important;
}


.copy-button:hover:not(:disabled),
.kc18-sheet-copy:hover:not(:disabled) {

    border-color:
        #107347 !important;

    background:
        #107347 !important;
}


/* ===========================================================
   手機固定操作 Bar
   =========================================================== */

@media (max-width: 720px) {

    .mobile-bar {

        border:
            1px solid
            #243B65 !important;

        background:
            #172A4D !important;

        box-shadow:
            0 9px 30px
            rgba(13,28,52,.28) !important;
    }


    .mobile-bar small {

        color:
            #BFCBE0 !important;
    }


    .mobile-bar strong {

        color:
            #FFFFFF !important;
    }


    .mobile-preview {

        color:
            #244AA6 !important;

        border-color:
            #C3D0EA !important;

        background:
            #FFFFFF !important;
    }


    .mobile-copy {

        color:
            #FFFFFF !important;

        border-color:
            #20A86D !important;

        background:
            #20A86D !important;

        box-shadow:
            0 4px 13px
            rgba(32,168,109,.24);
    }


    /*
     * 置頂不跟複製用同色
     */

    .kc17-back-top {

        color:
            #FFFFFF !important;

        border-color:
            #775ED2 !important;

        background:
            #694BC4 !important;

        box-shadow:
            0 7px 22px
            rgba(78,55,151,.30) !important;
    }


    /*
     * Bottom Sheet
     */

    .kc18-sheet-panel {

        background:
            #FFFEFA !important;

        border-top:
            3px solid
            #2858D7 !important;
    }


    html[data-theme="dark"]
    .kc18-sheet-panel {

        background:
            #202936 !important;
    }


    .kc18-sheet-summary > div {

        border-color:
            #C7D0DD !important;

        background:
            #F1F4F8 !important;
    }


    html[data-theme="dark"]
    .kc18-sheet-summary > div {

        border-color:
            #445266 !important;

        background:
            #273241 !important;
    }


    /*
     * 手機商品工具列字更有層次
     */

    .kc17-product-count {

        color:
            #172033 !important;

        font-weight:
            950 !important;
    }


    html[data-theme="dark"]
    .kc17-product-count {

        color:
            #FFFFFF !important;
    }

}


/* ===========================================================
   設定視窗
   =========================================================== */

.settings-panel {

    border-top:
        4px solid
        #704FC4 !important;
}


.reset-button {

    color:
        #B83242 !important;

    border-color:
        #E0A6AD !important;

    background:
        #FCEAEC !important;
}


/* ===========================================================
   Focus
   =========================================================== */

button:focus-visible,
input:focus-visible {

    outline:
        3px solid
        rgba(40,88,215,.30) !important;

    outline-offset:
        2px;
}


/* KC21 VISUAL END */