/**
 * Qing Product Actions widget styles.
 *
 * Two-button row (inquiry + add to cart) plus the inquiry modal.
 * Mobile-first: the modal stacks the product panel above the form and
 * switches to a two-column layout from 768px up.
 */

.qing-pa-wrap {
    font-family: "ProximaNova", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

/* ---------- Button row ---------- */
/* Cart and inquiry share this row. DOM order is cart first; the "Inquiry
   Button First" control flips it visually with `order` only. */
.qing-pa {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
    flex-wrap: wrap;
}



.qing-pa__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* Lets long labels shrink instead of pushing the sibling out of the row. */
    min-width: 0;
    padding: 14px 22px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    /* role="button" spans are not focusable-styled by default */
    -webkit-user-select: none;
    user-select: none;
    position: relative;
}

.qing-pa__btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.qing-pa__btn svg {
    /* 关键：inline 的 svg 会坐在文字基线上，视觉上偏低。
       改成 block 交给 flex 的 align-items:center 处理。 */
    display: block;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

/* 图标 + 文字作为一组居中，图标不再拉扯文字位置。 */
.qing-pa__btnIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    flex: 0 0 auto;
}

.qing-pa__btn--inquiry {
    color: #b3946f;
    background-color: #fff;
    border-color: #b3946f;
}

.qing-pa__btn--inquiry:hover,
.qing-pa__btn--inquiry:focus-visible {
    color: #fff;
    background-color: #b3946f;
    border-color: #b3946f;
}

.qing-pa__btn--cart {
    color: #fff;
    background-color: #2f2b28;
    border-color: #2f2b28;
}

.qing-pa__btn--cart:hover,
.qing-pa__btn--cart:focus-visible {
    color: #fff;
    background-color: #b3946f;
    border-color: #b3946f;
}

/* WooCommerce auto-appends a ".added_to_cart wc-forward" link after the
   button when the add succeeds. Our button already becomes "View Cart", so
   suppress that duplicate link. */
.qing-pa .added_to_cart,
.qing-pa a.added_to_cart.wc-forward {
    display: none !important;
}

/* Post-add "View Cart" state: reads as a link to the cart page. */
.qing-pa__btn--cart.is-added {
    color: #fff;
    background-color: #b3946f;
    border-color: #b3946f;
}

.qing-pa__btn--cart.is-added:hover,
.qing-pa__btn--cart.is-added:focus-visible {
    background-color: #a2835d;
    border-color: #a2835d;
}

/* Busy state while the AJAX request runs. */
.qing-pa__btn.is-loading {
    pointer-events: none;
    opacity: 0.75;
}

.qing-pa__btn[aria-disabled="true"] {
    pointer-events: none;
    opacity: 0.55;
}

/* ---------- Spinner ---------- */
.qing-pa__spinner {
    display: none;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: qingPaSpin 0.7s linear infinite;
    flex: 0 0 auto;
    /* 绝对定位居中：加载时不占位，图标和文字就不会被挤着跳动。 */
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -7.5px 0 0 -7.5px;
}

.is-loading > .qing-pa__spinner {
    display: block;
}

/* 用 visibility 而不是 display，按钮宽度保持不变。 */
.qing-pa__btn.is-loading .qing-pa__btnIcon,
.qing-pa__btn.is-loading .qing-pa__btnText,
.qing-pa-modal__submit.is-loading .qing-pa-modal__submitText {
    visibility: hidden;
}

/* 提交按钮原本没有定位上下文，spinner 会跑到页面角落。 */
.qing-pa-modal__submit {
    position: relative;
}

@keyframes qingPaSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .qing-pa__spinner {
        animation-duration: 2s;
    }
}

/* ---------- Quantity ---------- */
/* Own row above the buttons, so the stepper is never squeezed between them
   and never has to match their height to look right. */
.qing-pa__qtyRow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.qing-pa__qtyLabel {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: #2f2b28;
    flex: 0 0 auto;
}

.qing-pa__qty {
    display: inline-flex;
    align-items: stretch;
    width: 140px;
    flex: 0 0 140px;
    height: 48px;
    border: 1px solid #e0dad2;
    border-radius: 4px;
    background-color: #fff;
    color: #2f2b28;
    box-sizing: border-box;
    overflow: hidden;
}

.qing-pa__qtyBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Fixed side widths let the number field take the middle. */
    flex: 0 0 42px;
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    color: #2f2b28;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    /* Dividers. Declared per-side so only the inner edges show a rule. */
    border: 0 solid #e0dad2;
}

/* 分隔线默认不画。只有把小部件的“隐藏分隔线”关掉时，
   render() 才会输出 .qing-pa__qty--dividers 这个类。 */
.qing-pa__qty--dividers .qing-pa__qtyBtn:first-child {
    border-right-width: 1px;
}

.qing-pa__qty--dividers .qing-pa__qtyBtn:last-child {
    border-left-width: 1px;
}

.qing-pa__qtyBtn:hover {
    background-color: rgba(179, 148, 111, 0.1);
    color: #b3946f;
}

.qing-pa__qtyBtn:active {
    background-color: rgba(179, 148, 111, 0.18);
}

.qing-pa__qtyBtn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: -2px;
}

.qing-pa__qtyInput {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    padding: 0;
    /* 撑满整个高度并自己做垂直居中，
       不再依赖父级的 stretch，数字才真正居中。 */
    height: 100%;
    line-height: 1;
    align-self: stretch;
    -moz-appearance: textfield;
    appearance: textfield;
}

.qing-pa__qtyInput::-webkit-outer-spin-button,
.qing-pa__qtyInput::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.qing-pa__qtyInput:focus {
    outline: none;
}

/* style.css 里的 input[type="number"] 全局规则带了
   padding:10px 12px 和 margin-bottom:12px，
   属性选择器的优先级高于单个类名，会把数字顶偏。
   这里用「类 + 属性选择器」把优先级提上来清掉。 */
.qing-pa__qty .qing-pa__qtyInput[type="number"] {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    height: 100%;
    line-height: 1;
}

/* ---------- Inline feedback under the buttons ---------- */
.qing-pa__feedback {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.5;
    min-height: 0;
}

.qing-pa__feedback:empty {
    display: none;
}

.qing-pa__feedback.is-success {
    color: #2e7d46;
}

.qing-pa__feedback.is-error {
    color: #c0392b;
}

.qing-pa__notice {
    padding: 12px 16px;
    background: #fdf6e6;
    border: 1px solid #e8d9b0;
    border-radius: 4px;
    color: #6b5a2b;
    font-size: 14px;
}

/* =========================================================
 * Inquiry modal
 * ========================================================= */
.qing-pa-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background-color: rgba(0, 0, 0, 0.55);
    box-sizing: border-box;
    overflow-y: auto;
}

/* `hidden` alone loses to `display:flex`, so restate it. */
.qing-pa-modal[hidden] {
    display: none;
}

.qing-pa-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 880px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    background-color: #fff;
    /* 8px 显得太圆，跟按钮的 4px 统一。 */
    border-radius: 4px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
    overflow: hidden;
    box-sizing: border-box;
    animation: qingPaModalIn 0.22s ease;
}

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

@media (prefers-reduced-motion: reduce) {
    .qing-pa-modal__dialog {
        animation: none;
    }
}

.qing-pa-modal__close {
    position: absolute;
    top: 8px;
    right: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    font-size: 26px;
    line-height: 1;
    color: #2f2b28;
    background: transparent;
    border-radius: 50%;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: background-color 0.2s ease;
}

.qing-pa-modal__close:hover {
    background-color: rgba(0, 0, 0, 0.07);
}

.qing-pa-modal__close:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Mobile-first: single column. */
.qing-pa-modal__body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

/* ---------- Left: product summary ---------- */
.qing-pa-modal__product {
    /* 图片和文字整块居中，两列布局下不再顶在上边。 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 24px 24px;
    background-color: #faf8f5;
    text-align: center;
    box-sizing: border-box;
    border-right: 1px solid #efe9e1;
}

.qing-pa-modal__product img,
.qing-pa-modal__img {
    display: block;
    width: 100%;
    max-width: 220px;
    height: auto;
    margin: 0 auto 14px;
    border-radius: 3px;
    /* 竖图不会把整个弹窗拉得很长。 */
    max-height: 240px;
    object-fit: cover;
}

.qing-pa-modal__productName {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: #2f2b28;
}

.qing-pa-modal__price {
    font-size: 16px;
    color: #b3946f;
    margin-bottom: 6px;
}

.qing-pa-modal__price del {
    color: #9a938c;
    margin-right: 6px;
}

.qing-pa-modal__sku {
    font-size: 13px;
    color: #7d746c;
}

/* ---------- Right: form ---------- */
/* 两栏等高，表单区自己滚动，弹窗整体不会被内容顶变形。 */
.qing-pa-modal__body {
    align-items: stretch;
}

.qing-pa-modal__formWrap {
    padding: 28px 24px 24px;
    box-sizing: border-box;
}

.qing-pa-modal__title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: #2f2b28;
}

.qing-pa-modal__intro {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.6;
    color: #7d746c;
}

.qing-pa-modal__form {
    display: flex;
    flex-direction: column;
    /* 14px 偏散，12px 让整张表单更紧凑。 */
    gap: 12px;
}

.qing-pa-modal__label {
    display: block;
}

.qing-pa-modal__labelText {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #2f2b28;
}

.qing-pa-modal__req {
    color: #c0392b;
    margin-left: 2px;
}

/* style.css 里 input[...] 全局设了 border:0，
   属性选择器优先级高于单个类名，弹窗输入框就没框了、看不见。
   这里用「类 + 属性选择器」把边框抢回来。 */
.qing-pa-modal__form .qing-pa-modal__input[type="text"],
.qing-pa-modal__form .qing-pa-modal__input[type="tel"],
.qing-pa-modal__form .qing-pa-modal__input[type="email"],
.qing-pa-modal__form textarea.qing-pa-modal__textarea {
    border: 1px solid #ddd5cb;
    border-radius: 4px;
    background: #fff;
    margin: 0;
    padding: 11px 13px;
    box-sizing: border-box;
    width: 100%;
}

.qing-pa-modal__form .qing-pa-modal__input[type="text"]:focus,
.qing-pa-modal__form .qing-pa-modal__input[type="text"]:focus-visible,
.qing-pa-modal__form .qing-pa-modal__input[type="tel"]:focus,
.qing-pa-modal__form .qing-pa-modal__input[type="tel"]:focus-visible,
.qing-pa-modal__form .qing-pa-modal__input[type="email"]:focus,
.qing-pa-modal__form .qing-pa-modal__input[type="email"]:focus-visible,
.qing-pa-modal__form textarea.qing-pa-modal__textarea:focus {
    border-color: #b89b6f;
    outline: 0;
    box-shadow: none !important;
}

.qing-pa-modal__form textarea.qing-pa-modal__textarea:focus-visible {
    border-color: #b89b6f;
    outline: 0;
    box-shadow: none !important;
}

.qing-pa-modal__input {
    display: block;
    width: 100%;
    padding: 11px 13px;
    border: 1px solid #e0dad2;
    border-radius: 4px;
    background: #fff;
    color: #2f2b28;
    font: inherit;
    font-size: 15px;
    line-height: 1.4;
    box-sizing: border-box;
    transition: border-color 0.2s ease;
}

.qing-pa-modal__input:focus,
.qing-pa-modal__input:focus-visible {
    outline: 0;
    border-color: #b3946f;
    box-shadow: none !important;
}

.qing-pa-modal__input.is-invalid {
    border-color: #c0392b;
}

.qing-pa-modal__textarea {
    resize: vertical;
    min-height: 88px;
}

.qing-pa-modal__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 2px;
    padding: 13px 22px;
    border: 0;
    border-radius: 4px;
    /* 原来的 #b3946f 大色块偏土，改用跟“加入购物车”一致的深色，
       主次关系更清楚。 */
    background-color: #2f2b28;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.qing-pa-modal__submit:hover {
    opacity: 0.9;
}

.qing-pa-modal__submit:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.qing-pa-modal__submit.is-loading {
    pointer-events: none;
    opacity: 0.75;
}

.qing-pa-modal__feedback {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.5;
}

.qing-pa-modal__feedback:empty {
    display: none;
}

.qing-pa-modal__feedback.is-success {
    color: #2e7d46;
}

.qing-pa-modal__feedback.is-error {
    color: #c0392b;
}

/* Locks background scrolling while the modal is open. */
.qing-pa-modal-open {
    overflow: hidden;
}

/* ---------- Two columns from 768px ---------- */
@media (min-width: 768px) {
    .qing-pa-modal__body {
        grid-template-columns: 300px 1fr;
    }

    .qing-pa-modal__body--noPanel {
        grid-template-columns: 1fr;
    }

    .qing-pa-modal__product {
        padding: 32px 24px;
        /* 保持居中：基础规则里是 center，这里原本改成了 left，
           导致桌面端商品标题贴左，和居中的图片对不齐。 */
        text-align: center;
    }

    .qing-pa-modal__img {
        margin-left: 0;
        margin-right: 0;
        max-width: 100%;
    }

    /* 两栏等高，表单区自己滚动，弹窗整体不会被内容顶变形。 */
    .qing-pa-modal__formWrap {
        padding: 32px 32px 32px 28px;
    }
}
/* This catalogue uses simple products. Hide legacy runtime-generated option
   groups immediately; the companion script removes them from the DOM. */
.variant-group,
.meta-list {
    display: none !important;
}

/* The quantity already has dedicated minus/plus controls. Remove the native
   number-input steppers so a second pair is not shown inside the field. */
#sl-qty-input,
.action-row .qty-input {
    appearance: textfield;
    -moz-appearance: textfield;
}

#sl-qty-input::-webkit-inner-spin-button,
#sl-qty-input::-webkit-outer-spin-button,
.action-row .qty-input::-webkit-inner-spin-button,
.action-row .qty-input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
    -webkit-appearance: none;
}

/* This catalogue no longer requires variation selection. */
#sl-add-btn,
.action-row .btn-add {
    pointer-events: auto !important;
    cursor: pointer !important;
    opacity: 1 !important;
}