/* Sales Igniter Request for Quote: Luma storefront. Plain CSS (loaded by default.xml) so a theme can
   override it without recompiling the theme's LESS. */

/* Product page: Add to Quote in Luma's box-tocart, the same size as Add to Cart (Luma's large button:
   18px text, 14px 17px padding, 52px high) and beside it on desktop (Luma gives Add to Cart 49% there),
   stacked under it on phones. It is the secondary action, so it is outlined in Luma's primary blue while
   Add to Cart stays solid. With no Add to Cart before it (a quote-only product, or Update Quote on the
   quote cart's edit page) it keeps the solid primary look, as the only action. */
.box-tocart .actions > .action.sirfq-add-to-quote,
.box-tocart .actions > .action.sirfq-login-to-quote,
.box-tocart .actions > .action.sirfq-replacement {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    margin: 15px 0 0;
    padding: 14px 17px;
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 2.2rem;
    text-align: center;
    vertical-align: top;
    text-decoration: none;
}
/* "Log in to request a quote" is a link; give it the button look the Add to Quote button has */
.box-tocart .actions > .action.sirfq-login-to-quote {
    border: 1px solid #1979c3;
    border-radius: 3px;
    background: #1979c3;
    color: #fff;
    font-weight: 600;
}
.box-tocart .actions > .action.sirfq-login-to-quote:hover,
.box-tocart .actions > .action.sirfq-login-to-quote:focus { background: #006bb4; border-color: #006bb4; color: #fff; text-decoration: none; }
.box-tocart .actions > .action.tocart ~ .action.sirfq-add-to-quote:not(.sirfq-update-quote),
.box-tocart .actions > .action.tocart ~ .action.sirfq-login-to-quote {
    background: #fff;
    border: 1px solid #1979c3;
    color: #1979c3;
}
.box-tocart .actions > .action.tocart ~ .action.sirfq-add-to-quote:not(.sirfq-update-quote):hover,
.box-tocart .actions > .action.tocart ~ .action.sirfq-add-to-quote:not(.sirfq-update-quote):focus,
.box-tocart .actions > .action.tocart ~ .action.sirfq-add-to-quote:not(.sirfq-update-quote):active,
.box-tocart .actions > .action.tocart ~ .action.sirfq-login-to-quote:hover,
.box-tocart .actions > .action.tocart ~ .action.sirfq-login-to-quote:focus {
    background: #eef5fb;
    border-color: #006bb4;
    color: #006bb4;
    text-decoration: none;
}
/* Order the actions so Add to Quote follows Add to Cart directly: the payment buttons Magento puts
   between them (Stripe messaging, Braintree/PayPal express, Instant Purchase) move below. Browsers
   without :has() keep the plain stacked layout above. */
.box-tocart .actions:has(> .sirfq-add-to-quote, > .sirfq-login-to-quote) {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}
.box-tocart .actions:has(> .sirfq-add-to-quote, > .sirfq-login-to-quote) > * { order: 4; flex: 0 0 100%; }
.box-tocart .actions:has(> .sirfq-add-to-quote, > .sirfq-login-to-quote) > .action.tocart { order: 1; }
.box-tocart .actions:has(> .sirfq-add-to-quote, > .sirfq-login-to-quote) > .sirfq-add-to-quote,
.box-tocart .actions:has(> .sirfq-add-to-quote, > .sirfq-login-to-quote) > .sirfq-login-to-quote { order: 2; margin-top: 0; }
.box-tocart .actions:has(> .sirfq-add-to-quote, > .sirfq-login-to-quote) > .sirfq-feedback { order: 3; }
@media (min-width: 768px) {
    .box-tocart .actions > .action.sirfq-add-to-quote,
    .box-tocart .actions > .action.sirfq-login-to-quote,
    .box-tocart .actions > .action.sirfq-replacement { width: 49%; }
    .box-tocart .actions:has(> .sirfq-add-to-quote, > .sirfq-login-to-quote) { column-gap: 2%; }
    .box-tocart .actions:has(> .sirfq-add-to-quote, > .sirfq-login-to-quote) > .action.tocart,
    .box-tocart .actions:has(> .sirfq-add-to-quote, > .sirfq-login-to-quote) > .sirfq-add-to-quote,
    .box-tocart .actions:has(> .sirfq-add-to-quote, > .sirfq-login-to-quote) > .sirfq-login-to-quote {
        /* a 40% basis puts two on a line without rounding pushing the second down; they then grow to 49% */
        flex: 1 1 40%;
        width: auto;
        max-width: 49%;
        margin-right: 0;
        margin-bottom: 0;
    }
    /* two add-to-cart buttons (Rent and Buyout) fill the first row; Add to Quote starts the second */
    .box-tocart .actions > .action.tocart ~ .action.tocart ~ .sirfq-add-to-quote { margin-top: 15px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    /* the product column is narrow here: less side padding keeps "Add to Quote" on one line */
    .box-tocart .actions:has(> .sirfq-add-to-quote, > .sirfq-login-to-quote) > .action.tocart,
    .box-tocart .actions:has(> .sirfq-add-to-quote, > .sirfq-login-to-quote) > .sirfq-add-to-quote,
    .box-tocart .actions:has(> .sirfq-add-to-quote, > .sirfq-login-to-quote) > .sirfq-login-to-quote { padding-left: 8px; padding-right: 8px; }
}
.sirfq-feedback { margin-top: 8px; font-size: 1.3rem; }
.sirfq-feedback:empty { display: none; }
.sirfq-feedback-error { color: #e02b27; }
.sirfq-feedback-success { color: #006400; }
.sirfq-cart-configure #product-addtocart-button { display: none; }

/* Listings (category, search, related / up-sell / cross-sell, widgets): Luma's listing Add to Cart
   (13px, 35px high, square corners) as an outlined secondary button, in the same icon row as wishlist
   and compare (Luma's .actions-secondary, .product-item .product-item-info .product-item-actions).
   undo that row's icon-only styling for our button.

   .product-item-actions becomes one flex-wrap row and .actions-secondary is unwrapped (display:
   contents), so its children -- wishlist, compare, our button -- become flex items directly alongside
   .actions-primary's Rent / Buyout: Rent and Add to Quote share a line when the card is wide enough
   and wrap, flush to the card's own padding, when it is not. (Kevin, 2026-09-28, on
   availability.html: an earlier version relied on .actions-secondary's own inline-block width to
   force a wrap, which only happened to work when Rent+Buyout together were wide enough to overflow
   the card; a single Rent button left enough room for .actions-secondary to stay on Rent's line
   instead, so the button it contained sat beside Rent rather than under it and overflowed the card's
   hover border.) height: 35px is explicit, not left to padding + line-height, so it stays
   pixel-for-pixel level with rental's "Rent" / "Buyout" (.action.tocart.primary, also 35px)
   regardless of a browser's own font metrics. */
.product-item .product-item-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 4px;
    row-gap: 12px;
}
.product-item .product-item-actions .actions-secondary {
    display: contents;
}
/* wishlist and compare always come after our button in flex order (regardless of source order), so
   Add to Quote's own position is never pushed sideways by whichever of them wraps first: it either
   shares the first line right after Rent / Buyout, or is the first thing on line two, flush left. */
.product-item .product-item-actions .actions-secondary > .action:not(.sirfq-list-button) {
    order: 2;
}
.product-item .product-item-info .product-item-actions .actions-secondary > .action.sirfq-list-button {
    order: 1;
}
.product-item .sirfq-list-button,
.block.related .sirfq-list-button,
.block.upsell .sirfq-list-button,
.block.crosssell .sirfq-list-button,
.product-item .product-item-info .product-item-actions .actions-secondary > .action.sirfq-list-button {
    display: inline-block;
    box-sizing: border-box;
    width: auto;
    height: 35px;
    margin: 0;
    padding: 10px 15px;
    border: 1px solid #1979c3;
    border-radius: 0;
    background: #fff;
    color: #1979c3;
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: normal;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    white-space: nowrap;
    vertical-align: middle;
    box-shadow: none;
}
.product-item .sirfq-list-button:hover,
.product-item .sirfq-list-button:focus,
.product-item .product-item-info .product-item-actions .actions-secondary > .action.sirfq-list-button:hover,
.product-item .product-item-info .product-item-actions .actions-secondary > .action.sirfq-list-button:focus {
    background: #eef5fb;
    border-color: #006bb4;
    color: #006bb4;
    text-decoration: none;
}
.product-item .product-item-info .product-item-actions .actions-secondary > .action.sirfq-list-button > span {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    clip: auto;
    overflow: visible;
    border: 0;
}
.product-item .product-item-actions .actions-secondary > .action.sirfq-list-button:before { content: none; display: none; }
.product-item .actions-secondary .sirfq-feedback { display: block; white-space: normal; }
.sirfq-wishlist-action { margin-top: 8px; }

/* Header: the quote icon beside Luma's mini cart, sized and coloured like the cart icon (22px glyph on a
   28px line, #757575, #333 on hover), the text visually hidden and the same orange counter badge. */
.header.content .sirfq-mini-quote {
    float: right;
    position: relative;
    margin: 0 0 0 13px;
    /* keeps the hover alive across the gap down to the dropdown, without moving anything */
    padding-bottom: 12px;
    margin-bottom: -12px;
}
.sirfq-mini-quote-link {
    display: inline-block;
    color: #757575;
    line-height: 28px;
    text-decoration: none;
    white-space: nowrap;
}
.sirfq-mini-quote-link:visited { color: #757575; }
.sirfq-mini-quote-link:hover,
.sirfq-mini-quote-link:focus,
.sirfq-mini-quote:hover .sirfq-mini-quote-link { color: #333; text-decoration: none; }
.sirfq-mini-quote-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin: 2px 0;
    vertical-align: top;
    fill: currentColor;
}
.sirfq-mini-quote-link .text,
.sirfq-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
.sirfq-mini-quote-link .counter.qty {
    display: inline-block;
    min-width: 18px;
    height: 24px;
    margin: 3px 0 0;
    padding: 0 3px;
    overflow: hidden;
    border-radius: 2px;
    background: #ff5501;
    color: #fff;
    font-size: 1.4rem;
    line-height: 24px;
    text-align: center;
    vertical-align: top;
    white-space: normal;
}
.sirfq-mini-quote-link .counter.qty.empty { display: none; }
.sirfq-mini-quote-link .counter-number { text-shadow: 0 0 7px #000; }
/* the dropdown, drawn like Luma's mini cart panel (border, shadow and the pointer at the top right) */
.sirfq-mini-quote-dropdown {
    display: none;
    position: absolute;
    right: -10px;
    top: 100%;
    z-index: 101;
    box-sizing: border-box;
    width: 320px;
    padding: 20px;
    background: #fff;
    border: 1px solid #bbb;
    box-shadow: 0 3px 3px rgba(0, 0, 0, .15);
    color: #333;
    white-space: normal;
}
.sirfq-mini-quote-dropdown:before,
.sirfq-mini-quote-dropdown:after {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-bottom-style: solid;
}
.sirfq-mini-quote-dropdown:before { right: 12px; top: -12px; border: 6px solid transparent; border-bottom-color: #fff; z-index: 99; }
.sirfq-mini-quote-dropdown:after { right: 11px; top: -14px; border: 7px solid transparent; border-bottom-color: #bbb; z-index: 98; }
.sirfq-mini-quote:hover .sirfq-mini-quote-dropdown,
.sirfq-mini-quote:focus-within .sirfq-mini-quote-dropdown { display: block; }
.sirfq-mini-quote-content .subtitle { display: block; font-size: 1.4rem; font-weight: 600; }
.sirfq-mini-quote-items { list-style: none; margin: 12px -20px; padding: 0 20px; max-height: 320px; overflow-y: auto; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; }
.sirfq-mini-quote-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; margin: 0; }
.sirfq-mini-quote-item + .sirfq-mini-quote-item { border-top: 1px solid #ccc; }
.sirfq-mini-quote-image { flex: none; object-fit: contain; }
.sirfq-mini-quote-details { flex: 1; min-width: 0; font-size: 1.4rem; }
.sirfq-mini-quote-name { display: block; color: #006bb4; overflow-wrap: anywhere; }
.sirfq-mini-quote-variant, .sirfq-mini-quote-qty { color: #666; font-size: 1.3rem; }
.sirfq-mini-quote-dropdown .sirfq-mini-quote-remove {
    flex: none;
    padding: 2px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: #757575;
    line-height: 1;
}
.sirfq-mini-quote-dropdown .sirfq-mini-quote-remove:hover,
.sirfq-mini-quote-dropdown .sirfq-mini-quote-remove:focus { background: none; border: 0; color: #333; }
.sirfq-icon { display: inline-block; vertical-align: middle; fill: currentColor; }
.sirfq-mini-quote-more { font-size: 1.3rem; color: #666; margin: 0 0 12px; }
.sirfq-mini-quote-dropdown .sirfq-mini-quote-view {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 14px 17px;
    font-size: 1.8rem;
    line-height: 2.2rem;
    text-align: center;
}
.sirfq-mini-quote-empty { font-size: 1.4rem; color: #333; text-align: center; padding: 10px 0; }
@media (max-width: 767px) {
    /* Luma drops the mini cart 10px on phones and has no hover there: the icon links to the quote cart */
    .header.content .sirfq-mini-quote { margin: 10px 13px 0 0; padding-bottom: 0; }
    .sirfq-mini-quote-dropdown { display: none !important; }
}

/* quote cart */
.sirfq-cart-table .col.item { display: flex; gap: 14px; align-items: flex-start; }
.sirfq-cart-table .sirfq-thumb img { display: block; }
.sirfq-cart-table .item-options { margin: 6px 0; font-size: 1.3rem; }
.sirfq-cart-table .item-options dt { font-weight: 600; float: left; clear: left; margin-right: 6px; }
.sirfq-cart-table .item-options dt:after { content: ':'; }
.sirfq-cart-table .item-options dd { margin: 0 0 4px; }
.sirfq-cart-table .item-options::after { content: ''; display: table; clear: both; }
.sirfq-sku { color: #666; font-size: 1.3rem; margin-bottom: 6px; }
.sirfq-cart-table .field .label { display: block; font-size: 1.2rem; color: #666; font-weight: normal; }
.sirfq-cart-table .col.qty .field.qty .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.sirfq-cart-table input.qty { width: 70px; text-align: center; }
.sirfq-cart-table input.sirfq-your-price { width: 110px; }
.sirfq-cart-table textarea { min-width: 220px; }
.sirfq-cart-table .item-actions td { padding-top: 0; }
.sirfq-cart-table .item-actions .actions-toolbar { text-align: right; }
/* Edit and Remove read as a pair of links, as the line actions do in Luma's shopping cart */
.sirfq-cart-table .item-actions .action {
    display: inline-block;
    margin-left: 20px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: #006bb4;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 2rem;
    text-decoration: none;
    vertical-align: baseline;
}
.sirfq-cart-table .item-actions .action:hover,
.sirfq-cart-table .item-actions .action:focus { background: none; border: 0; color: #006bb4; text-decoration: underline; }
.sirfq-tier-hint { margin-top: 6px; font-size: 1.2rem; color: #006400; max-width: 220px; }
.sirfq-cart-actions { margin: 10px 0 30px; display: flex; gap: 10px; justify-content: flex-end; }
.sirfq-cart-totals { margin: 0 0 30px auto; max-width: 420px; }
.sirfq-cart-totals .totals th { text-align: left; font-weight: normal; }
.sirfq-cart-totals .totals td { text-align: right; }
.sirfq-cart-totals .sirfq-requested-total { font-weight: 600; }
.sirfq-submit .actions-toolbar .sirfq-submit-button { padding: 14px 17px; font-size: 1.8rem; line-height: 2.2rem; }
.sirfq-attachments .control .note { display: block; margin-top: 6px; }
.sirfq-totals-note { font-size: 1.2rem; color: #666; }
.sirfq-submit { max-width: 640px; }
.sirfq-files { list-style: none; margin: 8px 0 0; padding: 0; }
.sirfq-files li { display: flex; gap: 10px; align-items: center; margin: 4px 0; }
.sirfq-files .sirfq-uploading { color: #666; }
.sirfq-file-error { color: #e02b27; margin-top: 6px; }
.sirfq-file-error:empty { display: none; }
.sirfq-account-note { color: #666; }
.sirfq-cart-empty { margin: 20px 0 40px; }
.sirfq-success-number strong { font-size: 1.8rem; }
.sirfq-move-to-quote { margin: 20px 0; text-align: right; }
.sirfq-move-to-quote p { margin-bottom: 8px; color: #666; }

/* status chips */
.sirfq-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 600;
    background: #eee;
    color: #333;
    white-space: nowrap;
}
.sirfq-status-pending { background: #fdf0d5; color: #7a5200; }
.sirfq-status-approved { background: #dff1dc; color: #1e5b17; }
.sirfq-status-changes_requested { background: #e3ecfa; color: #1f4b8f; }
.sirfq-status-canceled { background: #f5dcdc; color: #8a1c1c; }
.sirfq-status-expired { background: #ececec; color: #555; }
.sirfq-status-complete { background: #dcecf3; color: #13506b; }

/* My Quotes */
.sirfq-quotes-filter { margin-bottom: 15px; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.sirfq-quotes-filter a.current { font-weight: 600; text-decoration: underline; }
.sirfq-merge { margin: 10px 0 20px; }
.sirfq-quote-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 30px; margin-bottom: 20px; }
.sirfq-quote-meta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; }
.sirfq-quote-meta dt { font-weight: 600; }
.sirfq-quote-meta dt:after { content: ':'; }
.sirfq-quote-meta dd { margin: 0 0 0 -12px; }
.sirfq-quote-tools { margin-left: auto; display: flex; gap: 16px; }
.sirfq-quote-lines tfoot th { text-align: right; font-weight: normal; }
.sirfq-quote-lines .item-options { font-size: 1.3rem; margin: 4px 0; }
.sirfq-quote-lines .item-options dt { font-weight: 600; display: inline; }
.sirfq-quote-lines .item-options dt:after { content: ': '; }
.sirfq-quote-lines .item-options dd { display: inline; margin: 0 10px 0 0; }
.sirfq-line-note { font-size: 1.3rem; color: #444; margin-top: 4px; }
.sirfq-line-note span { font-weight: 600; }
.sirfq-quote-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; margin: 20px 0 30px; }
.sirfq-inline-form { display: inline-block; margin: 0; }
.sirfq-action-panel { flex-basis: 100%; border: 1px solid #ddd; padding: 10px 14px; }
.sirfq-action-panel summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.sirfq-action-panel summary::-webkit-details-marker { display: none; }
.sirfq-action-panel summary:after {
    content: '';
    width: 7px;
    height: 7px;
    margin: 0 4px 4px 12px;
    border: solid #757575;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.sirfq-action-panel[open] summary:after { margin-bottom: 0; margin-top: 4px; transform: rotate(-135deg); }
.sirfq-action-panel summary:hover:after { border-color: #333; }
.sirfq-action-panel form { margin-top: 12px; }
.sirfq-action-panel input.qty { width: 70px; }
.sirfq-thread .sirfq-notes { list-style: none; margin: 0 0 20px; padding: 0; }
.sirfq-notes > .sirfq-note { margin: 0 0 12px; padding: 10px 14px; background: #f6f6f6; border-radius: 4px; max-width: 720px; }
.sirfq-notes > .sirfq-note-customer,
.sirfq-notes > .sirfq-note-guest { background: #eef4fb; margin-left: auto; }
.sirfq-note-head { display: flex; justify-content: space-between; gap: 12px; font-size: 1.2rem; color: #666; margin-bottom: 4px; }
.sirfq-note-head strong { color: #333; }
.sirfq-details dl dt { font-weight: 600; }
.sirfq-details dl dd { margin: 0 0 8px; }
.sirfq-attachments-list ul { list-style: none; padding: 0; }
.sirfq-file-size { color: #666; font-size: 1.2rem; }