/* Quick-add (product loop) — see inc/quick-add.php + assets/js/quick-add.js */

/* Sits above the card's .stretched-link overlay so the buttons stay clickable. */
.pw-loop-actions {
    position: relative;
    z-index: 2;
    /* Pinned to the bottom of the card, so the buttons line up across a row
       however long each product's description is. */
    margin-top: auto;
}

/* ...which needs every card in a row to be the same height. Bootstrap's .h-100 on
   the article (a percentage of an auto-height row) stops the flex row stretching
   them, so let them stretch; the content wrapper then grows (flex-grow-1 in
   content-product.php) and pushes the buttons down. */
ul.products.row > article.card.h-100 {
    height: auto !important;
}

/* Raised while open so the panel overlaps the next row, not the other way round. */
.pw-loop-actions.is-open {
    z-index: 20;
}

/* Quick add + View / View Product, side by side */
.pw-loop-actions.has-quick-add {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.pw-loop-actions.has-quick-add > .pw-quick-add,
.pw-loop-actions.has-quick-add > a.add_to_cart_button {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    margin: 0 !important;
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
    white-space: normal;
}

/* Backdrop behind an open variant panel (element added by quick-add.js). Sits above
   page content but below Bootstrap's offcanvas (the sidecart, 1045), so the sidecart
   still opens on top of it. The open card's button row + panel
   (.pw-loop-actions.pw-qa-open, 1001) are lifted above it; the rest of the card is not.

   The sticky site header (Bootstrap .z-3, so z-index 3) is lifted to 1030 while a
   panel is open (body.pw-qa-active, set by quick-add.js) so it stays above both the
   backdrop and the lifted buttons/panel when a card scrolls up underneath it. Only
   while open — its normal stacking is unchanged. */
.pw-qa-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(18, 38, 39, .55);
    animation: pw-qa-fade-in .15s ease-out;
}

.pw-qa-backdrop[hidden] {
    display: none;
}

.pw-loop-actions.pw-qa-open {
    z-index: 1001;
}

/* !important: Bootstrap's .z-3 utility on the header is itself !important. */
body.pw-qa-active .site-header {
    z-index: 1030 !important;
}

@keyframes pw-qa-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* 576px–1600px: the cards are too narrow for two buttons across, so stack them. */
@media (min-width: 576px) and (max-width: 1600px) {
    .pw-loop-actions.has-quick-add {
        flex-direction: column;
    }

    .pw-loop-actions.has-quick-add > .pw-quick-add,
    .pw-loop-actions.has-quick-add > a.add_to_cart_button {
        flex: 0 0 auto;
        width: 100%;
    }
}

.pw-loop-actions .pw-quick-add {
    display: block;
    background: #255153 !important;
    color: #fff !important;
    border: 2px solid #255153 !important;
    border-radius: 20px !important;
    cursor: pointer;
}

.pw-loop-actions .pw-quick-add:hover,
.pw-loop-actions .pw-quick-add:focus-visible,
.pw-loop-actions .pw-quick-add[aria-expanded="true"] {
    background: #1b3d3f !important;
    border-color: #1b3d3f !important;
}

.pw-loop-actions .pw-quick-add.is-busy {
    opacity: .7;
    cursor: progress;
}

/* Panel */
.pw-quick-add-panel {
    position: absolute;
    top: 100%;
    left: 8px;
    right: 8px;
    margin-top: 8px;
    padding: 6px;
    background: #fff;
    border: 2px solid #255153;
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, .15);
    text-align: left;
}

.pw-quick-add-panel[hidden] {
    display: none;
}

.pw-qa-list {
    list-style: none;
    margin: 0!important;
    padding: 0;
}

.pw-qa-option {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    width: 100%;
    padding: 9px 12px;
    background: transparent;
    border: 0;
    border-radius: 10px;
    color: #255153;
    font-size: 14px;
    line-height: 1.25;
    text-align: left;
    cursor: pointer;
}

.pw-qa-option:hover,
.pw-qa-option:focus-visible {
    background: #eef3f3;
}

.pw-qa-option.is-busy {
    opacity: .6;
    cursor: progress;
}

.pw-qa-label {
    font-weight: 500;
}

.pw-qa-price {
    flex: none;
    font-weight: 700;
    white-space: nowrap;
}

.pw-qa-price .price {
    font: inherit;
    color: inherit;
}

.pw-qa-price del {
    opacity: .55;
    font-weight: 400;
    margin-right: 4px;
}

.pw-qa-price ins {
    text-decoration: none;
}

/* Loading / error text */
.pw-qa-msg {
    margin: 0;
    padding: 6px 12px;
    font-size: 13px;
    color: #255153;
}

.pw-qa-msg:empty {
    display: none;
}

.pw-qa-msg.is-error {
    color: #b3261e;
}