/** * Darealmop_AvailabilityOnRequest - skeleton stylesheet. * * Pure skeleton per CONVENTIONS.md section 7: every visible value is a * --dm-onrequest-* custom property declared with NO fallback - the module * paints nothing by itself, the theme sets the tokens on :root. Structure * (display/grid/positioning and the honeypot removal) is fixed. * * Buy-box suppression: when the current selection is on request, the root * carries the dm-onrequest--active modifier (server-rendered for the initial * state, toggled by availability-on-request.js per selected variant, which * also mirrors it onto as dm-onrequest-active for engines without * :has()). Off that flag the stylesheet hides the standard Magento buy box * (price box + add-to-cart). The selectors cover the stock Luma PDP; a theme * with its own buy-box markup extends the list in its own CSS. display:none * with !important is deliberate - the buy box must not win a specificity war * while an item is enquiry-only. */ /* ---- root ---- */ .dm-onrequest { margin: var(--dm-onrequest-margin); color: var(--dm-onrequest-color); font: inherit; } /* ---- availability chip ---- */ .dm-onrequest-chip { display: inline-flex; align-items: center; gap: var(--dm-onrequest-chip-gap); margin: 0; padding: var(--dm-onrequest-chip-padding); border: var(--dm-onrequest-chip-border); border-radius: var(--dm-onrequest-chip-radius); font-size: var(--dm-onrequest-chip-size); font-weight: var(--dm-onrequest-chip-weight); line-height: 1.2; } .dm-onrequest-chip__dot { width: var(--dm-onrequest-chip-dot-size); height: var(--dm-onrequest-chip-dot-size); border-radius: 50%; background: currentColor; flex: 0 0 auto; } .dm-onrequest-chip--available { background: var(--dm-onrequest-available-bg); color: var(--dm-onrequest-available-color); } .dm-onrequest-chip--onrequest { background: var(--dm-onrequest-onrequest-bg); color: var(--dm-onrequest-onrequest-color); } .dm-onrequest-chip--unavailable { background: var(--dm-onrequest-unavailable-bg); color: var(--dm-onrequest-unavailable-color); } /* ---- enquiry surface ---- */ .dm-onrequest-enquiry { margin: var(--dm-onrequest-enquiry-margin); padding: var(--dm-onrequest-enquiry-padding); border: var(--dm-onrequest-enquiry-border); border-radius: var(--dm-onrequest-enquiry-radius); background: var(--dm-onrequest-enquiry-bg); color: var(--dm-onrequest-enquiry-color); } .dm-onrequest-enquiry[hidden] { display: none; } .dm-onrequest-enquiry__prompt { margin: 0 0 var(--dm-onrequest-form-gap); font-weight: var(--dm-onrequest-prompt-weight); color: var(--dm-onrequest-prompt-color); } .dm-onrequest-enquiry__form { margin: 0; display: grid; gap: var(--dm-onrequest-form-gap); } .dm-onrequest-enquiry__product { margin: 0; font-size: var(--dm-onrequest-product-size); color: var(--dm-onrequest-product-color); } .dm-onrequest-enquiry__product-label { font-weight: var(--dm-onrequest-label-weight); } /* Honeypot: removed from the visual page + tab order, still in the POST. */ .dm-onrequest-enquiry__hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .dm-onrequest-enquiry__field { display: block; min-width: 0; } .dm-onrequest-enquiry__label { display: block; margin-bottom: var(--dm-onrequest-label-margin); font-size: var(--dm-onrequest-label-size); font-weight: var(--dm-onrequest-label-weight); color: var(--dm-onrequest-label-color); } .dm-onrequest-enquiry__input { width: 100%; padding: var(--dm-onrequest-input-padding); border: var(--dm-onrequest-input-border); border-radius: var(--dm-onrequest-input-radius); background: var(--dm-onrequest-input-bg); color: var(--dm-onrequest-input-color); font: inherit; line-height: 1.3; } .dm-onrequest-enquiry__textarea { resize: vertical; } .dm-onrequest-enquiry__input:focus { outline: none; border-color: var(--dm-onrequest-accent); box-shadow: var(--dm-onrequest-input-focus-shadow); } .dm-onrequest-enquiry__submit { justify-self: start; display: inline-flex; align-items: center; justify-content: center; padding: var(--dm-onrequest-submit-padding); border: var(--dm-onrequest-submit-border); border-radius: var(--dm-onrequest-submit-radius); background: var(--dm-onrequest-submit-bg); color: var(--dm-onrequest-submit-color); font: inherit; font-weight: var(--dm-onrequest-submit-weight); line-height: 1.2; cursor: pointer; } .dm-onrequest-enquiry__submit:hover { background: var(--dm-onrequest-submit-hover-bg); color: var(--dm-onrequest-submit-hover-color); } .dm-onrequest-enquiry__submit[disabled] { opacity: var(--dm-onrequest-submit-disabled-opacity); cursor: not-allowed; } .dm-onrequest-enquiry__status { margin: 0; font-size: var(--dm-onrequest-status-size); line-height: 1.4; } .dm-onrequest-enquiry__status--ok { color: var(--dm-onrequest-status-ok-color); } .dm-onrequest-enquiry__status--error { color: var(--dm-onrequest-status-error-color); } /* ---- buy-box suppression while on request ---- */ body:has(.dm-onrequest--active) .product-info-main .price-box, body:has(.dm-onrequest--active) .product-info-main .product-info-price, body:has(.dm-onrequest--active) .product-info-main .box-tocart, body:has(.dm-onrequest--active) #product-addtocart-button, body.dm-onrequest-active .product-info-main .price-box, body.dm-onrequest-active .product-info-main .product-info-price, body.dm-onrequest-active .product-info-main .box-tocart, body.dm-onrequest-active #product-addtocart-button { display: none !important; }