/* ============================================================ SAFQA — grid_override.css NOTE: UniTheme2 sets --gl-cols via inline style which cannot be overridden by CSS (inline styles beat any CSS selector). The grid-template-columns is calculated from --gl-cols. Columns are controlled via DB block settings (number_of_columns). ============================================================ */ /* ── PRODUCT CARD HOVER: Amazon shadow lift, no popup expansion ────────── */ /* UniTheme2 sets position:absolute on hover expanding the card outside its */ /* column, causing clipping. Override to keep card in-flow like Amazon. */ .ut2-gl__item:hover .ut2-gl__body, [class*="grid-list"] > [class*="column"] > .ut2-gl__item:hover .ut2-gl__body, .grid-list > [id] > [class*="column"] > .ut2-gl__item:hover .ut2-gl__body, .ut2-gl__wrap > [class*="column"] > .ut2-gl__item:hover .ut2-gl__body { position: static !important; width: 100% !important; min-height: unset !important; height: auto !important; margin: 0 !important; padding: inherit !important; box-shadow: none !important; z-index: auto !important; } /* Single shadow on the item wrapper only */ .ut2-gl__item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.14) !important; position: relative !important; z-index: 1 !important; } /* ── ADD-TO-CART BUTTON FIX: icon inline with text ────────────────────── */ /* This file loads via in , after compiled CSS, so it */ /* wins over UniTheme2's .ty-btn bdi{display:flex;-webkit-box-orient:vert} */ button.ty-btn__add-to-cart > span, a.ty-btn__add-to-cart > span { display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 6px !important; } button.ty-btn__add-to-cart i, a.ty-btn__add-to-cart i, button.ty-btn__add-to-cart .ty-icon, a.ty-btn__add-to-cart .ty-icon { display: inline-flex !important; height: auto !important; line-height: 1 !important; font-size: 20px !important; flex-shrink: 0 !important; } button.ty-btn__add-to-cart bdi, a.ty-btn__add-to-cart bdi { display: inline !important; -webkit-box-orient: horizontal !important; -webkit-line-clamp: unset !important; overflow: visible !important; } /* ── WRITE A REVIEW button: reset from ty-btn giant size ─────────────── */ /* The base .ty-btn sets height:var(--height-button)=40px, min-width:40px, */ /* display:inline-flex. We must reset ALL of those + font-size. */ a.ty-btn.ty-product-review-write-product-review-button, .ty-btn.ty-product-review-write-product-review-button, a.ty-product-review-write-product-review-button.ty-btn__text, a.ty-product-review-write-product-review-button.ty-btn__secondary, .sqz-pb__rating .ty-product-review-write-product-review-button, .ty-product-review-write-product-review .ty-btn { height: auto !important; min-height: 0 !important; min-width: 0 !important; width: auto !important; padding: 0 4px !important; margin: 0 !important; font-size: 13px !important; font-weight: 400 !important; display: inline !important; line-height: 1.4 !important; background: transparent !important; border: none !important; box-shadow: none !important; color: #007185 !important; text-decoration: none !important; border-radius: 0 !important; vertical-align: middle !important; } a.ty-btn.ty-product-review-write-product-review-button:hover, .ty-product-review-write-product-review .ty-btn:hover { text-decoration: underline !important; color: #c7511f !important; background: transparent !important; } /* ── IMAGE COLUMN: constrain all content to column width ───── */ /* UniTheme2 sets inline width:570px on thumbnails gallery; */ /* this can overflow the grid column. Force max-width:100%. */ .sqz-pb__col-images { overflow: hidden !important; max-width: 100% !important; } .sqz-pb__col-images .ty-product-img, .sqz-pb__col-images .ty-previewer, .sqz-pb__col-images .ty-product-thumbnails, .sqz-pb__col-images .cm-image-gallery { max-width: 100% !important; width: 100% !important; } .sqz-pb__col-images img { max-width: 100% !important; height: auto !important; } /* ── LIGHTBOX: ensure it covers sticky bar and header ────── */ html #jquery-lightbox, html #jquery-overlay, .ty-previewer-wrap, .fancybox-overlay, .fancybox-wrap { z-index: 9999 !important; } /* ── STICKY BAR: hide when lightbox is open ──────────────── */ body.lightbox-active .ut2-pb__sticky-add-to-cart, body.cm-previewer-active .ut2-pb__sticky-add-to-cart { z-index: 1 !important; visibility: hidden !important; }