/** * Quick Info Modal * * Ported from the redesign-product-listing prototype's Quick View overlay. * The overlay is injected once into by assets/js/quick-info.js and * shown when a user clicks the "QUICK INFO" button on a product card. * * Navigation arrows on the sides cycle through the cards currently rendered * in the listing; the active card gets the .qv-active class for a gold * outline (defined alongside the grid card styles). * * @package IMS_by_Soul_Country */ .ims-qv-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.42); display: none; align-items: center; justify-content: center; z-index: 10000; padding: 24px; } .ims-qv-overlay.is-open { display: flex; } /* Sizes with the modal; prev/next arrows are positioned from this box. */ .ims-qv-shell { position: relative; width: 100%; max-width: 900px; } .ims-qv-modal { background: #ffffff; border-radius: 12px; width: 100%; max-height: 90vh; overflow-y: auto; position: relative; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3); } /* Close button */ .ims-qv-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: #f3f4f6; border: none; cursor: pointer; font-size: 20px; line-height: 1; color: #111111; display: flex; align-items: center; justify-content: center; z-index: 2; } .ims-qv-close:hover { background: #e5e7eb; } /* Prev / next arrows: siblings of .ims-qv-modal inside .ims-qv-shell, * vertically centered beside the modal (10px gap on wide viewports). */ .ims-qv-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.15); cursor: pointer; font-size: 26px; line-height: 1; color: #111111; display: flex; align-items: center; justify-content: center; z-index: 10001; /* above the modal/backdrop, below browser chrome */ box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32), 0 1px 3px rgba(0, 0, 0, 0.18); transition: background 0.15s, border-color 0.15s, transform 0.15s; } .ims-qv-prev:hover { background: var(--color-gold-light, #FDE17F); border-color: var(--color-cta, #FAB000); transform: translate(-100%, -50%) scale(1.06); } .ims-qv-next:hover { background: var(--color-gold-light, #FDE17F); border-color: var(--color-cta, #FAB000); transform: translateY(-50%) scale(1.06); } .ims-qv-nav:focus-visible { outline: 2px solid var(--color-cta, #FAB000); outline-offset: 3px; } .ims-qv-nav:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); } .ims-qv-prev:disabled:hover { background: #ffffff; border-color: rgba(0, 0, 0, 0.15); transform: translate(-100%, -50%); } .ims-qv-next:disabled:hover { background: #ffffff; border-color: rgba(0, 0, 0, 0.15); transform: translateY(-50%); } /* Wide viewports: 10px between each arrow and the modal's outer edge. */ .ims-qv-prev { left: -10px; transform: translate(-100%, -50%); } .ims-qv-next { left: calc(100% + 10px); right: auto; transform: translateY(-50%); } /* * When the shell is nearly full width, outside offsets can clip past * the overlay padding; keep arrows inside the modal with a 10px inset. */ @media (max-width: 1024px) { .ims-qv-prev { left: 10px; transform: translateY(-50%); } .ims-qv-next { left: auto; right: 10px; transform: translateY(-50%); } .ims-qv-prev:hover { transform: translateY(-50%) scale(1.06); } .ims-qv-next:hover { transform: translateY(-50%) scale(1.06); } .ims-qv-prev:disabled:hover, .ims-qv-next:disabled:hover { transform: translateY(-50%); } } /* * On phones the modal fills the viewport, so there's no backdrop * shoulder for the arrows to live on. Hide them — users can still * step between products with the swipe-equivalent: keyboard arrows on * desktop, or by closing the modal and tapping a different card. */ @media (max-width: 600px) { .ims-qv-nav { display: none; } } /* Body: gallery on the left, info on the right. */ .ims-qv-body { display: grid; grid-template-columns: 340px 1fr; gap: 28px; padding: 28px; } .ims-qv-main { position: relative; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 8px; height: 340px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; /* Reserve horizontal touch motion for the JS swipe handler so the * page underneath still scrolls vertically inside the modal but * left/right swipes always cycle the gallery. */ touch-action: pan-y; -webkit-tap-highlight-color: transparent; } .ims-qv-main img { max-width: 100%; max-height: 100%; object-fit: contain; } /* * Volume-metric corner chip overlaid on the modal's main image area. * Mirrors `.ims-pdp-vm-chip` (PDP gallery) and `.ims-product-card-vm- * badge` (listing thumbnail) so SALE / NEW / BEST reads identically * across the listing card, the Quick Info modal, and the full PDP. */ .ims-qv-vm-chip { position: absolute; top: 10px; right: 10px; z-index: 5; display: inline-flex; align-items: center; padding: 0.32rem 0.6rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; color: #fff; border-radius: 4px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); pointer-events: none; } .ims-qv-vm-chip[hidden] { display: none; } .ims-qv-vm-chip--sale { background: #DC2626; } .ims-qv-vm-chip--new { background: #16A34A; } .ims-qv-vm-chip--bestseller { background: #1F2937; } .ims-qv-image-link { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; } .ims-qv-image-link[aria-disabled="true"] { pointer-events: none; } /* Dot pager overlaid on the main image — visual mirror of the inline * card pager so users see the same indicator on the listing card and * inside the Quick Info modal. Empty when there's only one image. */ .ims-qv-pager { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 6px; z-index: 2; pointer-events: none; } .ims-qv-pager:empty { display: none; } .ims-qv-pager-dot { pointer-events: auto; appearance: none; -webkit-appearance: none; width: 8px; height: 8px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.45); border-radius: 50%; background: rgba(255, 255, 255, 0.85); cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); transition: background 150ms ease, transform 150ms ease, border-color 150ms ease; } .ims-qv-pager-dot:hover { background: #ffffff; transform: scale(1.2); } .ims-qv-pager-dot.is-active { background: var(--color-gold, #f5a623); border-color: var(--color-dark, #1a1a1a); } .ims-qv-pager-dot:focus-visible { outline: 2px solid var(--color-gold, #f5a623); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .ims-qv-pager-dot, .ims-qv-pager-dot:hover { transition: none; transform: none; } } .ims-qv-thumbs { display: flex; gap: 8px; flex-wrap: wrap; } .ims-qv-thumb { width: 60px; height: 60px; border: 1.5px solid #e5e7eb; border-radius: 6px; background: #ffffff; padding: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .ims-qv-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; } .ims-qv-thumb.is-active { border-color: #111111; box-shadow: 0 0 0 2px var(--color-gold-light, #FDE17F); } /* Info block */ .ims-qv-info h3 { font-size: 18px; font-weight: 700; margin: 0 0 4px; color: #111111; } .ims-qv-title-link { color: inherit; text-decoration: none; } .ims-qv-title-link:hover { color: var(--color-cta, #FAB000); } .ims-qv-title-link[aria-disabled="true"] { pointer-events: none; } /* Item # pill + returnable pill row. * * Both pills hug their own content (the SKU pill via * .ims-product-sku in product-listing.css; the returnable pill via * .ims-returnable-badge in blocks/product-returnable/style.css), so we * use a flex row with wrap so the returnable pill drops to a new line * gracefully on narrow widths instead of forcing the SKU pill to grow. * * Bottom margin lives on the row, not the SKU pill, so the two pills * stay vertically aligned regardless of which one is taller. */ .ims-qv-info .ims-qv-id-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 10px; } .ims-qv-info .ims-qv-id-row .ims-qv-sku { margin-bottom: 0; } .ims-qv-info .ims-qv-sku[hidden] { display: none !important; } .ims-qv-info .ims-qv-returnable[hidden] { display: none !important; } .ims-qv-price-row { position: relative; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .ims-qv-info .ims-qv-price { font-size: 22px; font-weight: 800; color: #111111; margin-bottom: 0; } .ims-qv-info .ims-qv-price small { font-size: 12px; font-weight: 400; color: #6b7280; } .ims-qv-volume-note { position: relative; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: #6b7280; cursor: help; } .ims-qv-volume-note[hidden] { display: none !important; } .ims-qv-volume-note__icon { display: inline-flex; width: 14px; height: 14px; align-items: center; justify-content: center; border: 1px solid currentColor; border-radius: 50%; color: var(--color-cta, #FAB000); font-size: 10px; font-weight: 800; line-height: 1; } .ims-qv-volume-note:focus-visible { outline: 2px solid var(--color-cta, #FAB000); outline-offset: 3px; border-radius: 4px; } .ims-qv-volume-popover { position: absolute; top: calc(100% + 8px); right: 0; width: min(300px, 80vw); padding: 12px; border: 1px solid #e5e7eb; border-radius: 8px; background: #ffffff; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2); color: #111111; font-size: 12px; line-height: 1.35; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity 150ms ease, transform 150ms ease; z-index: 5; } .ims-qv-volume-note:hover .ims-qv-volume-popover, .ims-qv-volume-note:focus .ims-qv-volume-popover, .ims-qv-volume-note:focus-within .ims-qv-volume-popover { opacity: 1; pointer-events: auto; transform: translateY(0); } .ims-qv-volume-popover strong { display: block; margin-bottom: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; } .ims-qv-volume-table { width: 100%; border-collapse: collapse; } .ims-qv-volume-table th, .ims-qv-volume-table td { padding: 6px 8px; border: 1px solid #e5e7eb; text-align: left; font-size: 12px; } .ims-qv-volume-table th { background: #f9fafb; font-weight: 700; } .ims-qv-description { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: #374151; } .ims-qv-description[hidden] { display: none !important; } .ims-qv-description p { margin: 0 0 8px; } .ims-qv-description p:last-child { margin-bottom: 0; } .ims-qv-description ul, .ims-qv-description ol { margin: 8px 0 0 18px; padding: 0; } .ims-qv-description li { margin-bottom: 4px; } .ims-qv-info h4 { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; color: #111111; margin: 14px 0 8px; text-transform: uppercase; } .ims-qv-info .ims-qv-features { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; } .ims-qv-info .ims-qv-features li { position: relative; padding-left: 14px; font-size: 13px; color: #374151; line-height: 1.5; } .ims-qv-info .ims-qv-features li::before { content: ''; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-cta, #FAB000); } .ims-qv-documents { margin-top: 14px; } .ims-qv-documents[hidden] { display: none !important; } .ims-qv-documents-heading { margin-top: 0; } .ims-qv-documents-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } .ims-qv-documents-list li { margin: 0; } .ims-qv-documents-list a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid #e5e7eb; border-radius: 6px; color: #111111; font-size: 12px; font-weight: 600; text-decoration: none; background: #ffffff; } .ims-qv-documents-list a:hover { border-color: var(--color-cta, #FAB000); color: #111111; background: var(--color-gold-light, #FDE17F); } .ims-qv-document-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 18px; border-radius: 3px; background: #dc2626; color: #ffffff; font-size: 8px; font-weight: 800; line-height: 1; } .ims-qv-document-page { color: #6b7280; font-size: 11px; font-weight: 500; } .ims-qv-meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: #6b7280; margin-top: 14px; } .ims-qv-meta a { color: #111111; text-decoration: none; font-weight: 600; } .ims-qv-meta a:hover { color: var(--color-cta, #FAB000); } /* CTA row at the bottom of the info column. * * Lays QTY stepper + Add to Cart + Add to Quote on a single line, * matching the listing card list-view layout. Wraps onto a second line * on narrow widths so neither the stepper nor the buttons get squeezed. * * The stepper and the actions div keep their own classes so existing * JS hooks (`syncModalQuantityFromCard`, `is-quote-only`) still work. */ .ims-qv-cta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 18px; } /* Quantity stepper. * * The stepper itself uses the canonical .ims-quantity-* classes from * the listing card, so it inherits the +/- button look, focus styles, * and disabled state from product-listing.css automatically. */ .ims-qv-quantity-row { display: flex; align-items: center; gap: 0.65rem; flex: 0 0 auto; flex-wrap: wrap; } /* Per-product NetSuite Minimum Order Quantity inline note inside the * quick-info modal. Injected by quick-info.js when the originating * card carries a `min` attribute > 1, removed otherwise so navigating * between products keeps the UI honest. */ .ims-qv-quantity-row .ims-quantity-min-note { flex-basis: 100%; margin-top: 4px; font-size: 12px; line-height: 1.3; color: #6b7280; } /* Action buttons sit beside the qty stepper and grow to fill the row. * `min-width` is sized so the qty stepper drops to its own line before * the two buttons inside this container stack on each other (each * button has `min-width: 140px` plus an 8px gap = 288px). */ .ims-qv-actions { display: flex; gap: 8px; flex: 1 1 auto; flex-wrap: wrap; min-width: 288px; } .ims-qv-actions button { flex: 1; min-width: 140px; padding: 10px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; border: 1.5px solid transparent; transition: background 0.15s, color 0.15s, border-color 0.15s; } .ims-qv-actions button[hidden] { display: none !important; } .ims-qv-actions.is-quote-only .ims-qv-add-quote { flex-basis: 100%; } .ims-qv-actions .ims-qv-add-cart { background: #111111; color: #ffffff; border-color: #111111; } .ims-qv-actions .ims-qv-add-cart:hover { background: #333333; border-color: #333333; } .ims-qv-actions .ims-qv-add-quote { background: transparent; color: var(--color-cta, #FAB000); border-color: var(--color-cta, #FAB000); } .ims-qv-actions .ims-qv-add-quote:hover { background: var(--color-gold-light, #FDE17F); } /* Empty-state: hide the features section when no bullets are provided. */ .ims-qv-info .ims-qv-features:empty, .ims-qv-info .ims-qv-features-heading.is-hidden { display: none; } @media (max-width: 768px) { .ims-qv-body { grid-template-columns: 1fr; padding: 20px; gap: 18px; } .ims-qv-main { height: 260px; } .ims-qv-info .ims-qv-features { grid-template-columns: 1fr; } }