/* Panel fix — loaded LAST, overrides everything */
#price-panels-container{display:flex!important;gap:8px!important;flex-wrap:nowrap!important;width:100%!important}
#price-panels-container .parameter-section-wrapper{flex:0 0 calc(50% - 4px)!important;width:calc(50% - 4px)!important;min-width:0!important;box-sizing:border-box!important}
.qt-panel-summary{cursor:pointer;font-weight:600;font-size:.85em;color:#333;background:#fafbfc;border-bottom:1px solid #e4e7ed;padding:8px 14px;list-style:none;user-select:none}
.qt-panel-summary::-webkit-details-marker{display:none}
.qt-panel-body{padding:10px;background:#fff}
.qt-section-label{font-size:.72em;color:#909399;font-weight:600;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.ft-grid{display:grid;grid-template-columns:120px 1fr 1fr;gap:1px;background:#e4e7ed;border:1px solid #e4e7ed;border-radius:4px;overflow:hidden}
.ft-grid>div{background:#fff;padding:5px 8px;display:flex;align-items:center;font-size:.78em}
.ft-hdr{background:#fafbfc!important;font-weight:600;font-size:.72em!important;color:#606266;justify-content:center}
.ft-lbl{font-weight:600;font-size:.76em!important;color:#555}
.ft-input{border:1px solid #dcdfe6;border-radius:3px;padding:4px 6px;text-align:center;font-size:.78em;width:100%;height:28px;box-sizing:border-box;max-width:100px}
.ft-input:focus{outline:none;border-color:#1890ff;box-shadow:0 0 0 2px rgba(24,144,255,.15)}
.qt-sp-section{margin-top:14px}
.sp-tbl{display:block;margin-top:5px}
.sp-tbl .sp-header{display:none!important}
.sp-rule-card{display:flex;flex-direction:column;background:#fff;border:1px solid #dcdfe6;border-radius:5px;margin-bottom:10px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,0.04);transition:all .2s ease}
.sp-rule-card:hover{border-color:#40a9ff;box-shadow:0 2px 6px rgba(0,0,0,0.08)}
.sp-rule-card:nth-child(even){background:#fcfdfe}
.sp-rule-main{display:grid;grid-template-columns:1.2fr 1.1fr 1.1fr 1fr 1fr 32px;padding:10px;gap:8px;align-items:flex-end}
.sp-rule-extra{display:flex;align-items:center;gap:12px;padding:6px 10px;background:#fffdf0;border-top:1px dashed #ffe58f;font-size:.72em;color:#666;flex-wrap:wrap}
.sp-rule-col{display:flex;flex-direction:column;gap:3px}
.sp-rule-col label{font-size:9px;color:#888;font-weight:700;text-transform:uppercase;white-space:nowrap}
.sp-rule-action{display:flex;justify-content:center;align-items:center;height:28px}
.sp-rule-extra-item{display:flex;align-items:center;gap:4px}
.sp-rule-extra-item span{font-weight:600;color:#555}
.sp-rule-extra-item input.sp-cext-inp{width:50px;height:22px;border:1px solid #dcdfe6;border-radius:2px;text-align:center;padding:0 2px;font-size:1.05em}
.sp-rule-extra-item.promo{margin-right:8px}
.sp-rule-extra-item small{color:#999;font-size:.85em}
.sp-del{width:22px;height:22px;border-radius:50%;border:1px solid #ff4d4f;color:#ff4d4f;background:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;line-height:1;padding:0;transition:all .2s}
.sp-del:hover{background:#ff4d4f;color:#fff}
@media(max-width:768px){
.sp-rule-main{grid-template-columns:1fr 1fr;gap:8px;padding:8px}
.sp-rule-col.price{grid-column:span 1}
.sp-rule-col.mode{grid-column:span 2}
.sp-rule-action{grid-column:span 2;justify-content:flex-end;height:auto;padding-top:4px;border-top:1px solid #eee}
.sp-rule-extra{gap:8px;padding:8px}
.sp-rule-extra-item{width:calc(50% - 4px)}
.sp-rule-extra-item.promo{width:100%}
}
.sp-select{border:1px solid #dcdfe6;border-radius:3px;padding:2px 4px;font-size:.78em;width:100%;height:28px;background:#fff}
.sp-input{border:1px solid #dcdfe6;border-radius:3px;padding:2px;text-align:center;font-size:.82em;width:100%;height:28px;box-sizing:border-box}

/* --- Optional Columns Mobile Optimization --- */
@media (max-width: 768px) {
    .optional-columns {
        padding: 8px 10px !important;
        gap: 8px !important;
        background-color: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
    }
    .optional-columns-checkboxes {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px 12px !important;
        width: 100% !important;
    }
    .optional-columns-checkboxes > span:first-child {
        width: 100% !important;
        display: block !important;
        font-size: 0.75em !important;
        color: #64748b !important;
        border-bottom: 1px solid #e2e8f0 !important;
        padding-bottom: 4px !important;
        margin-bottom: 4px !important;
        font-weight: 700 !important;
    }
    .optional-columns .checkbox-group label {
        font-size: 0.78em !important;
        padding-left: 2px !important;
    }
}
.sp-seg{display:flex;border:1px solid #dcdfe6;border-radius:3px;overflow:hidden;flex-shrink:0}
.sp-seg label{padding:2px 6px;font-size:.72em;cursor:pointer;background:#fff;color:#606266;border-right:1px solid #dcdfe6;margin:0;white-space:nowrap}
.sp-seg label:last-child{border-right:none}
.sp-seg input[type=radio]{display:none}
.sp-seg label:has(input:checked){background:#1890ff;color:#fff}
.sp-del{width:22px;height:22px;border:1px solid #f5c6cb;background:#fff5f5;color:#e74c3c;border-radius:3px;cursor:pointer;flex-shrink:0;padding:0;font-size:.9em}
.sp-del:hover{background:#fde2e2}
.sp-cext{grid-column:1/-1;padding:3px 8px;background:#fffdf5;border-top:1px dashed #ffe58f;font-size:.72em;color:#8c8c8c;gap:10px;flex-wrap:wrap;justify-content:flex-start}
.sp-cext span{white-space:nowrap}
.sp-cext input{width:48px;height:20px;padding:1px 3px;border:1px solid #d9d9d9;border-radius:2px;font-size:.82em;text-align:center}
.sp-cext-promo{cursor:pointer;color:#e74c3c;font-weight:600;white-space:nowrap;display:flex;align-items:center;gap:2px}
.sp-cext-promo input[type=checkbox]{width:13px;height:13px;margin:0}
.qt-sp-btns{margin-top:8px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.qt-sp-btn{border:1px dashed #1890ff;background:#f0f7ff;color:#1890ff;border-radius:4px;cursor:pointer;font-size:.78em;padding:5px 12px}
.qt-sp-btn:hover{background:#e6f4ff}
.qt-sp-btn-save{background:#2b7aa2;color:#fff;border:none}
.sp-temp-pat{font-weight:600;color:#0056b3;font-size:.85em}
.sp-temp-md,.sp-temp-sz{font-size:.85em;color:#555}
.fluct{display:flex;align-items:center;gap:8px;background:#f0f7ff;border:1px solid #b3d8ff;border-radius:4px;padding:6px 10px;flex-wrap:wrap;margin-top:14px}
.fluct-title{font-weight:600;color:#0369a1;font-size:.82em;flex-shrink:0}
.fluct-group{display:flex;align-items:center;gap:6px;background:#fff;padding:2px 8px;border-radius:4px;border:1px solid #bbe5fd;flex-shrink:0;flex-wrap:wrap}
.fluct-btns{display:flex;flex-direction:column;gap:1px;flex-shrink:0}
.fluct-btn{width:20px;height:14px;border:1px solid #a1d8fd;background:#f0f9ff;border-radius:2px;cursor:pointer;font-size:8px;color:#0369a1;padding:0;flex-shrink:0}
.fluct-val{width:24px;text-align:center;font-size:.85em;font-weight:700;color:#0284c7;flex-shrink:0}
.fluct-chk{border-left:1px solid #bbe5fd;padding-left:8px;display:flex;align-items:center;gap:4px;flex-shrink:0;min-width:85px}
.fluct-chk input[type=checkbox]{width:13px;height:13px;margin:0}
.fluct-chk label{font-size:.72em;font-weight:600;color:#0369a1;cursor:pointer;white-space:nowrap}
.fluct-save{height:26px;padding:0 8px;border:1px solid #ddd;background:#fafafa;border-radius:3px;cursor:pointer;font-weight:600;color:#555;font-size:.78em;white-space:nowrap;flex-shrink:0}
.fluct-info{width:100%;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:.72em;color:#0c4a6e;margin-top:6px;padding-top:4px;border-top:1px dashed #b3d8ff}
.fluct-v{font-weight:700;color:#0284c7}
.d-only{display:inline}
.m-only{display:none}
@media(max-width:768px){
.d-only{display:none}
.m-only{display:inline}
#price-panels-container{flex-direction:column!important;flex-wrap:wrap!important;gap:6px}
#price-panels-container .parameter-section-wrapper{flex:none!important;width:100%!important}
.ft-grid{grid-template-columns:85px 1fr 1fr}
.ft-grid>div{padding:4px 5px;font-size:.7em}
.ft-lbl{font-size:.7em!important}
.ft-input{height:26px;font-size:.72em;padding:2px 4px;max-width:80px}
.ft-hdr{font-size:.66em!important}
.sp-tbl .sp-hdr{font-size:.65em}
.sp-tbl-row{grid-template-columns:1.2fr .6fr .8fr 1fr 1fr 30px}
.sp-tbl-row>div{padding:3px 4px;font-size:.7em}
.sp-card{grid-template-columns:1.2fr .6fr .8fr 1fr 1fr 30px}
.sp-card>div{padding:3px 4px;font-size:.7em}
.sp-select{height:24px;font-size:.7em}
.sp-input{height:24px;font-size:.7em;max-width:85px}
.sp-seg label{padding:2px 4px;font-size:.65em}
.sp-del{width:18px;height:18px;font-size:.75em}
.sp-cext{gap:4px;padding:2px 5px;font-size:.65em}
.sp-cext input{width:40px;height:18px;font-size:.75em}
.fluct{flex-wrap:wrap;padding:5px 8px;gap:5px}
.fluct-title{font-size:.75em}
.fluct-group{flex-wrap:wrap}
.fluct-save{height:24px;padding:0 6px;font-size:.72em}
.fluct-info{width:100%;text-align:right;margin-top:2px;font-size:.68em}
.qt-panel-summary{font-size:.8em;padding:7px 12px}
.qt-panel-body{padding:8px}

/* --- Shopping Cart UI - Ultra Compact Mobile Optimization --- */
@media (max-width: 768px) {
    .cart-controls-row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 4px !important;
        padding: 8px 4px !important;
        background: transparent !important;
        border: none !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }

    .cart-ctrl-group {
        display: flex !important;
        align-items: center !important;
        gap: 2px !important;
        background: #f1f5f9 !important;
        padding: 2px 5px !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 4px !important;
        white-space: nowrap !important;
        font-size: 10.5px !important;
        margin: 1px 0 !important;
    }

    .cart-ctrl-group input, .cart-ctrl-group select {
        height: 20px !important;
        font-size: 10px !important;
        padding: 0 2px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 2px !important;
    }

    #recipientInfoBox {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px 6px !important;
        padding: 8px !important;
        border: 1.5px solid #3b82f6 !important;
        border-radius: 6px !important;
        background: #f0f7ff !important;
        margin-bottom: 10px !important;
    }

    #recipientInfoBox > div {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 80px !important;
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
    }

    #recipientInfoBox label {
        font-size: 10px !important;
        font-weight: 700 !important;
    }

    #recipientInfoBox input {
        width: 100% !important;
        height: 24px !important;
        font-size: 10px !important;
        padding: 0 5px !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 4px !important;
    }

    #cartExportButtons {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 5px !important;
        margin-top: 10px !important;
        padding: 0 5px !important;
    }

    #cartExportButtons button {
        padding: 0 !important;
        font-size: 11px !important;
        height: 32px !important;
        border-radius: 4px !important;
        white-space: nowrap !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
    }
} /* Close mobile media query */

.cart-item {
    padding: 8px 10px !important;
    border: 1px solid #e2e8f0 !important;
    background: #fff !important;
    position: relative !important;
}

.cart-item-remove {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    height: 32px !important;
    width: 32px !important;
    margin-top: 0 !important;
    border-radius: 4px !important;
    background-color: rgba(254, 226, 226, 0.7) !important;
    font-size: 1.1em !important;
    cursor: pointer !important;
}

.cart-item-details strong {
    font-size: 13px !important;
    padding-right: 40px !important; /* Avoid overlap */
    display: block !important;
}

.cart-item-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: 8px !important;
    padding-top: 6px !important;
    border-top: 1px dashed #eee !important;
    gap: 6px !important;
    padding-right: 0 !important; /* Reset padding for bottom row */
}

/* --- Mobile Optimization Additions --- */
@media (max-width: 768px) {
    .mobile-hide {
        display: none !important;
    }
    
    .packing-fee-input {
        width: 28px !important;
        padding: 0 !important;
        text-align: center !important;
        font-size: 11px !important;
        height: 22px !important;
        border-radius: 3px !important;
    }

    .hq-input {
        width: 32px !important;
        padding: 0 !important;
        text-align: center !important;
        font-size: 11px !important;
        height: 22px !important;
        border-radius: 3px !important;
    }

    .usd-pc-text {
        font-size: 0 !important;
    }
    .usd-pc-text::after {
        content: "$/PC";
        font-size: 10px !important;
    }

    .commission-options {
        align-items: center !important;
        gap: 2px !important;
    }
}

/* Ensure commission options are visible on desktop even without JS if JS fails, 
   but our logic will handle it. On desktop we usually want them visible if checked. */
@media (min-width: 769px) {
    .commission-options {
        display: inline-flex !important;
    }
}


/* Aggressive Desktop Fix */
@media (min-width: 769px) {
    body .cart-item {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        background-color: #f8fafc !important;
        padding: 12px 48px 12px 16px !important; /* Extra right padding for absolute button */
        position: relative !important;
    }
    body .cart-item-actions {
        border-top: none !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
        flex-direction: row !important;
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
    }
    body .cart-item-actions > div:first-child {
        background-color: #f1f5f9 !important;
        padding: 8px 12px !important;
        border-radius: 8px !important;
        border: 1px solid #cbd5e1 !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        margin-bottom: 0 !important;
    }
    body .cart-item-remove {
        position: absolute !important;
        top: 10px !important;
        right: 10px !important;
        height: 32px !important;
        width: 32px !important;
        margin-top: 0 !important;
        transform: none !important;
    }
    body .cart-item-details strong {
        padding-right: 40px !important; /* Prevent text from overlapping button */
    }
}