/* * WC Buy X Get Y — Modal Styles * * Base styles are included here (overlay, centering, background, grid). * Further visual customisation (typography, card borders, button colours, * selected-state highlight, etc.) can be added in your theme stylesheet. * * Class / ID reference * -------------------- * #wcbxgy-modal Outermost wrapper (hidden by default via inline style) * #wcbxgy-modal-overlay Full-screen 50% black backdrop * #wcbxgy-modal-inner The visible dialog box (#fff, centered, 50% / 95% wide) * #wcbxgy-modal-close × close button (top-right of dialog) * #wcbxgy-modal-title

heading * #wcbxgy-modal-items 3-column wrapping grid of item cards * .wcbxgy-item Individual selectable card (calc 1/3 width) * .wcbxgy-item--selected State class added on selection * .wcbxgy-item img Thumbnail image * .wcbxgy-item-info Title + price wrapper inside each card * .wcbxgy-item-title Product / variation name * .wcbxgy-item-price Price HTML (may contain + ) * .wcbxgy-price--free Span wrapping "Free" label * #wcbxgy-modal-footer Contains the submit button * #wcbxgy-modal-submit "Add to Cart" button; disabled until item chosen * #wcbxgy-modal-status Live-region for loading / error messages * body.wcbxgy-modal-open Applied to while modal is open (locks scroll) / / ---- Prevent body scroll while modal is open ---- / body.wcbxgy-modal-open { overflow: hidden; } / ---- Overlay ---- / #wcbxgy-modal-overlay { position: fixed; inset: 0; z-index: 9998; background-color: rgba(0, 0, 0, 0.5); } / ---- Dialog box ---- / #wcbxgy-modal-inner { position: fixed; z-index: 9999; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 50%; max-height: 90vh; overflow-y: auto; box-sizing: border-box; background-color: #fff; padding: 2rem; / Positioning context for the close button / position: fixed; } / ---- Close button ---- / #wcbxgy-modal-close { position: absolute; top: 0.75rem; right: 0.75rem; cursor: pointer; background: none; border: none; font-size: 1.25rem; line-height: 1; padding: 0.25rem; } / ---- Item grid — max 3 columns, wraps naturally ---- / #wcbxgy-modal-items { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; } / * Each card takes up (100% - 2 gaps) / 3. * With gap: 1rem and 3 items per row that is (100% - 2rem) / 3. / .wcbxgy-item { flex: 0 0 calc((100% - 2rem) / 3); cursor: pointer; box-sizing: border-box; user-select: none; } .wcbxgy-item img { display: block; width: 100%; height: auto; } / ---- Status ---- / #wcbxgy-modal-status:empty { display: none; } / ---- Footer ---- / #wcbxgy-modal-footer { margin-top: 1.5rem; } / ---------------------------------------------------------------- * Mobile — 95% wide, single-column items * -------------------------------------------------------------- / @media (max-width: 768px) { #wcbxgy-modal-inner { width: 95%; padding: 1.25rem; } / * On mobile, drop to a single column so cards are not too narrow. * Override this rule in your theme if you prefer 2 columns on * mid-size screens (e.g. tablets). */ .wcbxgy-item { flex: 0 0 100%; } }