/* =====================================================================
   rw-buy.css  -  styles for the buy controls injected into Luigi's search
   =====================================================================
   CHANGELOG
   2026-08-31 - Styles for the popup POA enquiry form, which replaced window.prompt now that POA
                products are confirmed to appear in autocomplete. Tighter than the results-page
                form because it shares a ~200px card column.
   2026-08-26 - Popup gained variant dropdowns (styled like the results-page .rw-variant, same
                site arrow), and Luigi's own displayed price is now overwritten on BOTH
                surfaces - see applyPrice in rw-buy.js. Popup grid product names lifted from
                Luigi's 13px to 15px/19px; the hero keeps 17px.
   2026-08-26 - In Basket note restyled to match DisplayPagedItemListNS (#55565A, Roboto Bold,
                15px/17px, uppercase) on both surfaces - Luigi's markup is not inside a
                .product-listing so the site's h4 rule never reached it. Dropped the
                line-height:0 that was collapsing that note onto the orange button. Killed
                Luigi's .add-button:hover red on the two wrapper divs (only the button itself
                should redden). Gave the variant select the site's select_dropdown.svg arrow -
                appearance:none had removed the native one leaving no arrow at all.
   2026-08-26 - Popup height released so the taller cards fit, and the "n In Basket" note
                recoloured to match the results page / AI Search cards (black Roboto Bold in a
                <strong>, not green). Luigi clips the popup at a fixed .luigi-ac-inner height
                with overflow hidden, so the bottom row lost its ADD TO BASKET. Padding does
                not help - content just overflows further into the clipped region. Making
                their "Show all products" bar position:static cleared the overlap but pushed
                the bar out of the clipped area entirely, losing the CTA - so the height is
                released on the whole ancestor chain instead.
   2026-08-26 - Popup layout reworked: quantity on one line, ADD TO BASKET full width
                underneath (flex-wrap:wrap + flex:0 0 100%), matching the results tiles. Side
                by side does not fit - the card column is ~200px and the qty controls alone
                take ~118px, so the button was clipped at the popup edge. The earlier "way too
                wide" button was a symptom of the block being mis-placed OUTSIDE the card and
                spanning the whole popup; resizing it while mis-placed fixed nothing.
   2026-08-26 - Popup styles finished. Luigi lays each popup row out as a flex row, so our
                block - a sibling appended after the anchor - landed to the RIGHT of the
                product instead of under it. flex:0 0 100% is what actually wraps it onto its
                own line; width:100% alone does not, because the flex container still tries to
                fit it alongside.
   2026-08-26 - New. Pairs with /js/rw-buy.js. Kept as a static file for the same reason:
                it can be replaced without a recompile, so the look can be iterated on
                without dropping sessions - which matters once the pair is referenced from
                RWNS.master.
   ===================================================================== */

/* ---------- surface 1: the full results page (.lb-result__inner) ---------- */

.rw-buy { margin-top: 10px; }
.rw-buy .product-quantity { margin-bottom: 6px; }
/* The "n In Basket" note, styled to match what DisplayPagedItemListNS produces on a real
   category page. That markup is a plain <h4><strong>, picking up
   .product-listing ul li h4 { font-size:15px; line-height:17px; color:#55565A;
   text-transform:uppercase } and h4 strong { font-family:'Roboto Bold' }.
   It has to be restated here because Luigi's tiles and the popup are NOT inside a
   .product-listing, so the site rule never reaches them - the results page was falling
   back to plain black. #55565A is the site body grey, not black. */
.rw-in-basket,
#lbx-ac-element .rwp-msg {
    font-size: 15px; line-height: 17px; color: #55565A;
    text-transform: uppercase; margin: 6px 0 0 0; min-height: 1.2em;
}
.rw-in-basket strong,
#lbx-ac-element .rwp-msg strong { font-family: 'Roboto Bold'; }
.rw-variant-wrap { margin: 0 0 8px 0; }
/* Arrow on the variant dropdown. A bare <select> would show the browser's own arrow,
   which this site never uses - everywhere else (.product-listing .select-type,
   .item-number) the native control is suppressed and images/netshell/select_dropdown.svg
   is drawn instead. Put on the select itself here rather than a wrapper, as our block
   has none. appearance:none is what removes the native arrow, so WITHOUT the
   background-image there is no arrow at all - which is how it ended up bare. */
.rw-variant {
    width: 100%; max-width: 100%; box-sizing: border-box;
    padding: 6px 28px 6px 8px;
    border: #E6E6E8 solid 1px; border-radius: 4px; color: #55565A;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-color: #fff;
    background-image: url("../images/netshell/select_dropdown.svg");
    background-repeat: no-repeat;
    background-position: 94% 50%;
}
.rw-poa-price { font-size: 22px; font-family: 'Roboto Black'; color: #10181F; margin-bottom: 8px; }
.rw-note { font-size: 14px; margin-top: 6px; color: #1a7a1a; }
.rw-note.err { color: #d9000c; }

.rw-poa-form { margin-top: 10px; text-align: left; max-width: 320px; }
.rw-poa-form input[type=text], .rw-poa-form textarea {
    width: 100%; box-sizing: border-box; margin-bottom: 6px; padding: 6px;
    border: #E6E6E8 solid 1px; border-radius: 4px; font-family: inherit; font-size: 14px;
}
.rw-poa-form textarea { min-height: 70px; }
.rw-poa-status { font-size: 14px; margin-top: 6px; }
.rw-poa-status.ok { color: #1a7a1a; }
.rw-poa-status.err { color: #d9000c; }

/* Luigi's tiles are narrower (231px) than the site's own category cards, so the shared
   .quantity-wrap sizes (56px buttons, a 170px input) overflow them - the orange block bled
   past the tile edge and ADD TO BASKET wrapped onto two lines. Scoped to .lb-result__inner
   so nothing else on the site is affected. */
.lb-result__inner .rw-buy,
.lb-result__inner .rw-buy .product-quantity,
.lb-result__inner .rw-buy .quantity-wrap,
.lb-result__inner .rw-buy .q-input { width: 100%; max-width: 100%; box-sizing: border-box; }
.lb-result__inner .rw-buy .quantity-wrap { padding-bottom: 0; }
.lb-result__inner .rw-buy .q-input { display: flex; }
.lb-result__inner .rw-buy .qtyminus,
.lb-result__inner .rw-buy .qtyplus { width: 38px; height: 38px; font-size: 16px; flex: 0 0 38px; }

/* flex-basis 0 + width 0 so the input takes only the space LEFT OVER. With width:auto it
   claimed its intrinsic 217px and pushed the + button outside a 231px tile. */
.lb-result__inner .rw-buy .qty {
    flex: 1 1 0%; width: 0; min-width: 0; height: 38px; text-align: center; box-sizing: border-box;
}

/* NOTE the selector: our block ends up nested INSIDE Luigi's own .add-button div (that is
   where their link lived), and that div is 82px tall with an orange background while our
   button is 38px - leaving an orange strip the In Basket line sat on, which flashed red when
   the button took its :hover colour. Both wrappers need neutralising, so .lb-result__inner
   .add-button, NOT .rw-buy .add-button. Their styling comes from LUIGI's stylesheet - every
   .add-button rule in cssNS/style.css requires a .product-listing ancestor, which Luigi's
   tiles do not have. */
/* NB no line-height:0 here. It was killing the inline gap under the button, but it also
   inherits into .rw-buy and the In Basket note, collapsing that note's line box so it
   sat ON the orange button - and the button's red :hover then showed through behind the
   text, reading as an oversized red area. The gap is already handled by making the
   button display:block on the next line. */
.lb-result__inner .add-button { background: none; height: auto; padding: 0; }

/* ...and the same on :hover. Setting the resting background only was not enough -
   Luigi has its own .add-button:hover rule that repaints it red, and there are TWO
   nested .add-button wrappers (136px and 82px) around our block, so hovering the
   button turned a 136px block red behind the quantity row and the In Basket note.
   Only the button itself should go red - that comes from .tk-narrow-btn:hover. */
.lb-result__inner .add-button:hover { background: none; }
.lb-result__inner .add-button > .tk-narrow-btn { display: block; }
.lb-result__inner .rw-buy .tk-narrow-btn { width: 100%; white-space: nowrap; padding: 0 6px; font-size: 13px; }
.lb-result__inner .rw-buy .tk-small { width: 100%; }

/* ---------- surface 2: the autocomplete popup ---------- */

.rwp-buy { padding: 6px 10px 10px 10px; border-bottom: 1px solid #eee; }
/* wrap:wrap + a full-width button = quantity on one line, ADD TO BASKET on its own line
   underneath. Same shape as the results tiles. Side by side does not fit: the card
   column is only ~200px and the qty controls alone take ~118px of it, so the button
   was being clipped at the popup edge. */
.rwp-buy .rwp-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rwp-qtyminus, .rwp-qtyplus {
    width: 30px; height: 30px; flex: 0 0 30px; border: #E6E6E8 solid 1px;
    background: #fff; cursor: pointer; font-size: 15px; line-height: 1;
}
.rwp-qty {
    flex: 0 0 46px; width: 46px; height: 30px; text-align: center;
    border: #E6E6E8 solid 1px; box-sizing: border-box;
}
.rwp-add, .rwp-poa {
    flex: 0 0 100%; width: 100%; margin-top: 6px; padding: 0 8px;
    height: 30px; border: 0; cursor: pointer; color: #fff;
    background: #FF6B0B; font-size: 12px; font-family: 'Roboto Black';
    text-transform: uppercase; border-radius: 4px; white-space: nowrap;
}
.rwp-add:hover, .rwp-poa:hover { background: #d9000c; }
.rwp-msg { font-size: 13px; margin-top: 4px; color: #1a7a1a; }
.rwp-msg.err { color: #d9000c; }
.rwp-poa-label { font-size: 13px; color: #10181f; margin-bottom: 4px; font-weight: bold; }

/* The block now lives INSIDE .luigi-ac-description (Luigi's own button slot), not as a
   sibling of the anchor, so it no longer needs flex:0 0 100% to wrap onto its own line -
   the description is normal block flow. Just full width of that column. */
#lbx-ac-element .rwp-buy { width: 100%; box-sizing: border-box; margin-top: 6px; }

/* Luigi pins "Show all products" with position:absolute, so it OVERLAYS the end of the
   product list instead of sitting after it. Their own cards ended above it; ours are
   taller by the height of the buy block, so the bottom-right card's ADD TO BASKET
   vanished underneath the bar.
   Padding on the inner containers does NOT fix this - the popup wrapper has a fixed
   height, so the content simply overflows further down and stays under the bar. Taking
   the bar OUT of absolute positioning puts it in normal flow after the cards instead.
   Its parent .luigi-ac-rest-main is display:flex/wrap, so width:100% makes it take its
   own line; absolute positioning was where it got its width from, hence setting it. */
#lbx-ac-element .luigi-ac-button-block--show-all {
    position: static; width: 100%; box-sizing: border-box; margin-top: 8px;
}

#lbx-ac-element .rwp-msg.err { color: #d9000c; font-family: inherit; }

/* Let the popup grow to fit the taller cards.
   Luigi sizes the popup for THEIR card height: .luigi-ac-inner is a fixed height with
   overflow-y:hidden, so once our buy block made each card taller the bottom row was simply
   clipped - which is why the bottom-right ADD TO BASKET vanished. Padding on the inner
   containers does nothing about that; the content just overflows further into the clipped
   region.
   There is room to grow: #lbx-ac-element carries an inline max-height (967px at 1080p) and
   was only using ~786px. These are all stretched flex/block children of that box, so the
   height has to be released on the whole chain - releasing one alone leaves the parent
   holding it at the old size. !important because the heights come from Luigi's stylesheet.
   The two unnamed > div wrappers are theirs and have no class to target. */
/* DESKTOP ONLY. Releasing the height is right on a wide screen, where the popup has room to
   grow into its own max-height and the alternative is a clipped bottom row. On a PHONE it was
   actively harmful: the heromobile layout stacks the cards, so with our buy block the content
   runs to ~3287px inside a ~932px popup. Luigi scrolls that natively; overflow:visible removed
   the scrolling, so everything past the FIRST product spilled outside the box and could not be
   reached - the popup looked like it had one result.
   Below 1180px Luigi's own sizing and scrolling are left completely alone. */
@media only screen and (min-width: 1180px) {
    #lbx-ac-element > div,
    #lbx-ac-element > div > div,
    #lbx-ac-element .luigi-ac-results-content,
    #lbx-ac-element .luigi-ac-inner,
    #lbx-ac-element .luigi-ac-result,
    #lbx-ac-element .luigi-ac-products {
        height: auto !important;
        overflow: visible !important;
    }
}

/* Popup variant dropdown. Same site arrow as the results-page one (.rw-variant), just sized
   for the suggestion row - full width of the card column, above the quantity row. */
#lbx-ac-element .rwp-variant {
    width: 100%; box-sizing: border-box; margin-bottom: 6px;
    padding: 4px 24px 4px 6px; height: 28px;
    border: #E6E6E8 solid 1px; border-radius: 4px; color: #55565A; font-size: 12px;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    background-color: #fff;
    background-image: url("../images/netshell/select_dropdown.svg");
    background-repeat: no-repeat;
    background-position: 94% 50%;
}

/* Popup product names. Luigi sets 13px in the results grid (17px for the hero "Top product"),
   which reads as too small next to the buy controls we put under it - the name is the thing
   the customer is actually scanning. Lifted to 15px/19px, matching the scale the site uses for
   .product-listing h4. Scoped to the grid so the hero keeps its larger size. */
#lbx-ac-element .luigi-ac-rest-main .luigi-ac-name {
    font-size: 15px;
    line-height: 19px;
}

/* Popup POA enquiry form. Replaces the window.prompt shortcut now that POA products are
   confirmed to appear in autocomplete (search a POA code, e.g. a Lincoln Bester package).
   Narrower and tighter than the results-page form because it shares a ~200px card column,
   but the same fields. The popup grows to fit it - see the height-release block above. */
#lbx-ac-element .rwp-poa-form{margin-top:6px}
#lbx-ac-element .rwp-poa-form input[type=text],
#lbx-ac-element .rwp-poa-form textarea{
    width:100%; box-sizing:border-box; margin-bottom:5px; padding:5px;
    border:#E6E6E8 solid 1px; border-radius:4px; font-family:inherit; font-size:12px;
}
#lbx-ac-element .rwp-poa-form textarea{min-height:52px; resize:vertical}
#lbx-ac-element .rwp-poa-send{
    width:100%; height:28px; border:0; cursor:pointer; color:#fff; background:#FF6B0B;
    font-size:12px; font-family:'Roboto Black'; text-transform:uppercase; border-radius:4px;
}
#lbx-ac-element .rwp-poa-send:hover{background:#d9000c}
#lbx-ac-element .rwp-poa-status{font-size:12px; margin-top:4px}
#lbx-ac-element .rwp-poa-status.ok{color:#1a7a1a}
#lbx-ac-element .rwp-poa-status.err{color:#d9000c}

/* "More info" under the variant dropdown, matching the AI Search cards.
   It has to be reset back to a TEXT link: our block lands inside Luigi's .add-button, and
   any <a> in there is styled as a button - display:block, 49px tall, orange background.
   With our orange link colour on top of that it rendered as a blank orange slab. */
/* .lb-result__actions is display:flex with align-items:center, so this block is a flex ITEM
   that shrinks to its content (~60px) and gets centred in the column. text-align:left alone
   did nothing visible - it was aligning text inside a 60px box that was itself centred.
   align-self:stretch makes the box fill the column first; then the text sits left, matching
   the AI Search cards and the popup. */
.lb-result__inner .rw-more-info{
    margin:2px 0 6px 0; text-align:left; align-self:stretch; width:100%;
}
.lb-result__inner .rw-more-info a{
    display:inline; width:auto; height:auto; min-height:0; line-height:normal;
    background:none; border:0; border-radius:0; padding:0; margin:0;
    font-size:14px; font-family:inherit; text-transform:none;
    color:#FF6B0B; text-decoration:underline;
}
.lb-result__inner .rw-more-info a:hover{color:#d9000c; background:none}

/* "More info" in the suggestions popup. A span, not a link, because the whole suggestion is
   already an <a> - so it needs the link look applied by hand. */
#lbx-ac-element .rwp-more-info{margin:2px 0 6px 0}
#lbx-ac-element .rwp-more{
    /* 14px, matching .ai-more-info and .lb-result__inner .rw-more-info. It was 12px for the
       cramped suggestion row, but "More info" should read identically wherever a customer
       meets it - and the text is short enough to fit the card column at 14px. */
    font-size:14px; color:#FF6B0B; text-decoration:underline; cursor:pointer;
}
#lbx-ac-element .rwp-more:hover{color:#d9000c}

/* Same flex-item problem as .rw-more-info: sitting in .lb-result__actions (display:flex,
   align-items:center) the wrapper shrinks to its content and gets centred, so the dropdown
   was narrower than the card and inset, while the AI Search cards have it full width. */
.lb-result__inner .rw-variant-wrap{ align-self:stretch; width:100%; }