/** Shopify CDN: Minification failed Line 17:0 Unexpected "{" Line 17:1 Expected identifier but found "%" Line 18:13 Unexpected "<" Line 18:75 Unterminated string token Line 19:69 Unterminated string token Line 21:79 Unterminated string token Line 24:3 Expected identifier but found "%" **/ /* SHOPIFY_STYLESHEETS_VERSION: 1.0 */ /* CSS from section stylesheet tags */ /* START_SECTION:native-cross-sell (INDEX:39) */ {%- comment -%} A native renders in the browser's top layer, unaffected by any ancestor's position/overflow/transform. Deliberately not a manual position:fixed div here: this modal opens in the same add-to-cart flow as the theme's own cart drawer, which applies position:fixed + overflow:hidden to when it opens. Using .showModal() sidesteps that interaction entirely instead of trying to out-stack it with z-index. {%- endcomment -%} .ncs-modal { position: fixed; margin: auto; inset: 0; z-index: 9999; background: #fff; width: 90%; max-width: 720px; max-height: 85vh; overflow-y: auto; -webkit-overflow-scrolling: touch; border: none; border-radius: 4px; padding: 44px 28px 28px; box-sizing: border-box; } .ncs-modal::backdrop { background: rgba(0, 0, 0, 0.6); } .ncs-modal:not([open]) { display: none; } #native-cross-sell-modal.ncs-modal > .ncs-modal__close { position: absolute !important; top: 14px !important; right: 16px !important; left: auto !important; bottom: auto !important; display: block; width: auto; margin: 0; padding: 0; background: none; border: none; font-size: 28px; line-height: 1; text-align: center; cursor: pointer; color: #333; z-index: 2; } .ncs-modal__header { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #eee; } .ncs-modal__added { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .ncs-modal__added-image { width: 44px; height: 44px; object-fit: cover; border-radius: 4px; flex-shrink: 0; } .ncs-modal__added-text { flex: 1 1 auto; min-width: 0; } .ncs-modal__added-label { margin: 0; font-size: 13px; color: #666; } .ncs-modal__added-title { margin: 2px 0 0; font-weight: 600; color: #141414; } .ncs-modal__cart-total { margin: 0 0 10px; font-size: 13px; color: #666; } #native-cross-sell-modal.ncs-modal a.ncs-modal__cart-link { display: block; width: 100%; padding: 12px; background: #43a047; border: none; border-radius: 4px; font-size: 14px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; text-align: center; color: #fff !important; text-decoration: none; box-sizing: border-box; } .ncs-modal__offers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .ncs-offer { text-align: center; } .ncs-offer__image { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 4px; margin-bottom: 10px; } .ncs-offer__title { font-size: 14px; font-weight: 600; color: #141414; margin: 0 0 4px; } .ncs-offer__price { font-size: 14px; color: #333; margin: 0 0 10px; } #native-cross-sell-modal.ncs-modal .ncs-offer__button { display: block; width: 100%; height: auto; min-height: 0; padding: 10px 8px; background: #EA4F28; color: #fff; border: none; border-radius: 3px; font-size: 13px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.3; cursor: pointer; box-sizing: border-box; } #native-cross-sell-modal.ncs-modal .ncs-offer__button.is-sold-out { background: #ccc; cursor: not-allowed; } @media only screen and (max-width: 767px) { .ncs-modal { width: 94%; padding: 40px 18px 20px; } .ncs-modal__offers { grid-template-columns: repeat(2, 1fr); gap: 14px; } #native-cross-sell-modal.ncs-modal > .ncs-modal__close { top: 10px !important; right: 10px !important; font-size: 24px; } } /* END_SECTION:native-cross-sell */