.zqe-selector-mount[hidden] { display: none !important; }
.zqe-selector { margin: 12px 0 14px; direction: rtl; }
.zqe-option-list { display: grid; gap: 12px; }

/*
 * Keep ZQE visually native to the product page: clean white surface,
 * Woodmart primary green, rounded borders, and a deliberate two-row layout.
 */
.zqe-option-card {
    display: grid;
    grid-template-columns: minmax(180px, 1.25fr) minmax(145px, .9fr) minmax(180px, 1fr) 48px;
    grid-template-areas:
        "head unit hint hint"
        "controls controls total action"
        "message message message message";
    align-items: center;
    gap: 10px 14px;
    padding: 14px 16px;
    border: 1px solid rgba(28, 77, 57, .14);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 1px 0 rgba(28, 77, 57, .02);
    transition: border-color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.zqe-option-card:hover {
    border-color: color-mix(in srgb, var(--wd-primary-color, #00a87a) 28%, rgba(28, 77, 57, .14));
}
.zqe-option-card.zqe-deeplink-target {
    border-color: color-mix(in srgb, var(--wd-primary-color, #00a87a) 55%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--wd-primary-color, #00a87a) 9%, transparent);
}
.zqe-option-card.is-quoting { opacity: .82; }

.zqe-option-head {
    grid-area: head;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    min-width: 0;
}
.zqe-option-title-wrap { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.zqe-option-title { font-size: 15px; line-height: 1.55; color: #233d32; }
.zqe-option-subtitle { font-size: 11.5px; line-height: 1.55; color: #7b8882; }
.zqe-extra-badge {
    font-size: 10.5px;
    line-height: 1.45;
    padding: 4px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--wd-primary-color, #00a87a) 10%, #fff);
    color: color-mix(in srgb, var(--wd-primary-color, #00a87a) 82%, #123b2c);
    white-space: nowrap;
}

.zqe-price-cell {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.zqe-unit-price-cell {
    grid-area: unit;
    padding: 7px 10px;
    border-radius: 10px;
    background: #f8fbfa;
    border: 1px solid rgba(28, 77, 57, .08);
}
.zqe-line-total-cell {
    grid-area: total;
    padding: 7px 10px;
    border-radius: 10px;
    background: #fff9e8;
    border: 1px solid #f0d58e;
}
.zqe-price-cell span { font-size: 10.5px; line-height: 1.45; color: #7b8882; }
.zqe-price-cell strong { font-size: 13.5px; line-height: 1.6; white-space: nowrap; color: #263a31; }
.zqe-line-total-cell strong { color: #8a6200; }

.zqe-option-controls {
    grid-area: controls;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.zqe-counter {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid rgba(28, 77, 57, .16);
    border-radius: 10px;
    overflow: hidden;
    flex: 0 0 auto;
    background: #fff;
}
.zqe-counter button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    border: 0;
    background: color-mix(in srgb, var(--wd-primary-color, #00a87a) 8%, #fff);
    color: color-mix(in srgb, var(--wd-primary-color, #00a87a) 88%, #183d2f);
    cursor: pointer;
    font-size: 19px;
    font-weight: 700;
    line-height: 1;
    padding: 0;
    transition: background-color .18s ease, color .18s ease;
}
.zqe-counter button:hover {
    background: color-mix(in srgb, var(--wd-primary-color, #00a87a) 16%, #fff);
}
.zqe-counter input {
    width: 72px;
    min-width: 72px;
    height: 40px;
    border: 0 !important;
    border-inline: 1px solid rgba(28, 77, 57, .08) !important;
    box-shadow: none !important;
    text-align: center;
    margin: 0 !important;
    padding: 5px 4px !important;
    appearance: textfield;
    font-size: 13.5px;
    background: #fff;
}
.zqe-counter input::-webkit-outer-spin-button,
.zqe-counter input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.zqe-real-units { font-size: 11px; line-height: 1.55; color: #718079; white-space: nowrap; }

.zqe-option-hint {
    grid-area: hint;
    min-height: 0;
    margin: 0;
    padding: 7px 10px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.65;
    color: #806000;
    background: #fffaf0;
    border: 1px solid rgba(210, 168, 63, .22);
}
.zqe-option-hint:empty { display: none; }
.zqe-option-message { grid-area: message; min-height: 0; margin: 0; font-size: 11px; line-height: 1.6; }
.zqe-option-message:empty { display: none; }
.zqe-option-message.is-error { color: #b32d2e; }
.zqe-option-message.is-success { color: var(--wd-primary-color, #00a87a); }

.zqe-option-add {
    grid-area: action;
    position: relative;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(28, 77, 57, .08) !important;
    border-radius: 11px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    background: #f3f6f5 !important;
    color: #a6b0ac !important;
    box-shadow: none !important;
    cursor: not-allowed;
    transition: background-color .18s ease, color .18s ease, transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.zqe-option-add:not(:disabled) {
    background: var(--wd-primary-color, #00a87a) !important;
    border-color: var(--wd-primary-color, #00a87a) !important;
    color: #fff !important;
    cursor: pointer;
    box-shadow: 0 5px 14px color-mix(in srgb, var(--wd-primary-color, #00a87a) 20%, transparent) !important;
}
.zqe-option-add:not(:disabled):hover { filter: brightness(.97); transform: translateY(-1px); }
.zqe-option-add:disabled { opacity: .82; }
.zqe-cart-icon { width: 21px; height: 21px; display: inline-flex; align-items: center; justify-content: center; }
.zqe-cart-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.zqe-cart-plus { display: none; }
.zqe-option-add:not(:disabled) .zqe-cart-empty { display: none; }
.zqe-option-add:not(:disabled) .zqe-cart-plus { display: inline-flex; }
.zqe-cart-empty .zqe-cart-plus-mark { display: none; }
.zqe-option-add.loading .zqe-cart-icon { opacity: .25; }
.zqe-option-add.loading::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-left-color: transparent;
    border-radius: 50%;
    animation: zqe-spin .7s linear infinite;
}
@keyframes zqe-spin { to { transform: rotate(360deg); } }
.zqe-option-card .added_to_cart { display: none !important; }
.zqe-cart-quantity-note { display: block; opacity: .7; margin-top: 4px; white-space: nowrap; }

/* ZQE owns the native Woo quantity/button only for the currently active ZQE variation. */
.variations_form.zqe-active .quantity,
.variations_form.zqe-active .single_add_to_cart_button { display: none !important; }
.variations_form.zqe-active .zqe-selector .zqe-option-add { display: inline-flex !important; }
.variations_form.zqe-active .zqe-selector,
.variations_form.zqe-active .zqe-selector * { box-sizing: border-box; }

@media (max-width: 900px) {
    .zqe-option-card {
        grid-template-columns: minmax(150px, 1.15fr) minmax(135px, .9fr) 48px;
        grid-template-areas:
            "head unit action"
            "controls total total"
            "hint hint hint"
            "message message message";
        gap: 9px 11px;
        padding: 13px 14px;
    }
}

@media (max-width: 600px) {
    .zqe-selector { margin: 9px 0 11px; }
    .zqe-option-list { gap: 10px; }
    .zqe-option-card {
        grid-template-columns: minmax(0, 1fr) 44px;
        grid-template-areas:
            "head action"
            "unit unit"
            "controls controls"
            "total total"
            "hint hint"
            "message message";
        gap: 8px 10px;
        padding: 12px;
        border-radius: 13px;
    }
    .zqe-option-controls { justify-content: space-between; gap: 9px; }
    .zqe-counter { flex: 1 1 auto; }
    .zqe-counter input { flex: 1 1 auto; width: 58px; min-width: 58px; }
    .zqe-price-cell strong { font-size: 13px; }
    .zqe-option-hint { padding: 6px 8px; }
}
/* Simple products: ZQE owns quantity/add-to-cart while the simple profile is active. */
form.cart.zqe-simple-active .quantity,
form.cart.zqe-simple-active .single_add_to_cart_button { display: none !important; }
form.cart.zqe-simple-active .zqe-selector .zqe-option-add { display: inline-flex !important; }