/** * Homepage benefits strip - true vertical item layout (owner-requested * change to the frozen Homepage, scoped to this one section). * * Live DOM (page 56542, read before writing): * .elementor-element-8c3f1a2 (e-con-boxed section, white bg) * > widget .elementor-element-b6e4d09 (bwp-info-box) * > .bwp-info-box.elementor-grid * > .info-box.elementor-grid-item (x4) * > .box-wrapper * > .info-box-wrapper > .content-icon > svg * > .info-box-content > h4.info-box-title + .info-box-description > p * * Root cause of the icon sitting LEFT of the heading: Elementor's * per-element rule in uploads/elementor/css/post-56542.css * .elementor-56542 .elementor-element.elementor-element-b6e4d09 * .bwp-info-box .info-box .box-wrapper{display:flex;align-items:center;text-align:left} * makes .box-wrapper a ROW flex container (flex-direction defaults to row), * so .info-box-wrapper (icon) and .info-box-content (text) sit side by side. * No floats/absolute positioning/inline styles are involved (the section * has no style= attributes; the theme only sets .info-box-wrapper * position:relative and .content-icon svg 1em, template.css ~10021). * * Every selector below is prefixed with "body" plus the same widget * classes, so it out-specifies Elementor's own generated rule (which is * not edited) without !important and without depending on load order. * Icon size uses explicit svg width/height, so Elementor's breakpoint * font-size values (26/22/20px) no longer affect it. Icon colour * (#0AD0D7 via Elementor's svg path fill rule) and title/description * font sizes, weights and colours are not touched. */ body .elementor-56542 .elementor-element.elementor-element-b6e4d09 { --grid-column-gap: 20px; --grid-row-gap: 20px; } body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box, body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box .box-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; min-width: 0; width: 100%; } body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box .info-box-wrapper { display: flex; justify-content: center; position: static; float: none; margin: 0 0 14px; padding: 0; width: auto; } body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box .info-box-wrapper .content-icon { display: block; position: static; float: none; margin: 0; padding: 0; width: 42px; height: 42px; line-height: 1; } body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box .info-box-wrapper .content-icon svg { display: block; position: static; float: none; margin: 0; width: 42px; height: 42px; } body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box .info-box-content { display: block; width: 100%; margin: 0; padding: 0; text-align: center; } body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box .info-box-title { margin: 0 0 4px; text-align: center; } body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box .info-box-description { margin: 0 auto; max-width: 190px; text-align: center; } body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box .info-box-description p { margin: 0; } /* Section spacing: 32px top/bottom (24px on mobile), ~40px to the Best Sellers section below (that section has 0 top margin/padding of its own and the hidden block between them is display:none). */ body .elementor-56542 .elementor-element.elementor-element-8c3f1a2 { --padding-top: 32px; --padding-bottom: 32px; --margin-bottom: 40px; } /* Mobile compaction v2 (2x2 layout, order and wording unchanged): 24px icon, tight icon/heading/description/row spacing, reduced section padding and reduced gap before Best Sellers. Natural content height, no fixed heights. Text stays centered (base rules above). */ @media (max-width: 767px) { body .elementor-56542 .elementor-element.elementor-element-8c3f1a2 { --padding-top: 10px; --padding-bottom: 10px; --margin-bottom: 12px; } body .elementor-56542 .elementor-element.elementor-element-b6e4d09 { --grid-column-gap: 10px; --grid-row-gap: 8px; } body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box .info-box-wrapper { margin: 0 0 4px; } body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box .info-box-wrapper .content-icon, body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box .info-box-wrapper .content-icon svg { width: 24px; height: 24px; } body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box .info-box-title { margin: 0 0 1px; font-size: 14px; line-height: 1.2; } body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box .info-box-description { font-size: 12px; line-height: 1.25; } } /* Mobile icon-left layout (owner-approved preview, 2x2 grid): icon left / text right, left-aligned, thin 24px gray outline icons (original Elementor SVGs hidden by CSS, widget data untouched; masks drawn per :nth-child). Mobile (<=767px) and this benefits widget only - desktop keeps the original centered layout. The outline icon rules below apply at every width. Placed after the compaction block above so it overrides it (same specificity). */ @media (max-width: 767px) { body .elementor-56542 .elementor-element.elementor-element-b6e4d09 { --grid-column-gap: 10px; --grid-row-gap: 10px; } body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box, body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box .box-wrapper { flex-direction: row; align-items: flex-start; justify-content: flex-start; text-align: left; width: 100%; min-width: 0; } body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box .info-box-wrapper { flex: 0 0 24px; width: 24px; margin: 0 8px 0 0; } body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box .info-box-content { flex: 1 1 0; width: auto; min-width: 0; text-align: left; } body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box .info-box-title { text-align: left; margin: 0 0 2px; overflow-wrap: break-word; text-wrap: balance; } body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box .info-box-description { text-align: left; max-width: none; margin: 0; overflow-wrap: break-word; text-wrap: balance; } body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box .info-box-description p { text-align: left; } } body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box .info-box-wrapper .content-icon { width: 24px; height: 24px; } /* Owner-approved icons at all widths: 24px thin gray outlines. Ordered content: shipping, authentic shield-check, dispatch, tax receipt. Desktop stays centered; mobile retains its icon-left layout above. */ body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box .info-box-wrapper .content-icon svg { display: none; } body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box .info-box-wrapper .content-icon::before { content: ""; display: block; width: 24px; height: 24px; background-color: #8a8f98; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: 24px 24px; mask-size: 24px 24px; } body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box:nth-child(1) .info-box-wrapper .content-icon::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2%22/%3E%3Cpath d=%22M15 18H9%22/%3E%3Cpath d=%22M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.62l-3.48-4.35A1 1 0 0 0 17.52 8H14%22/%3E%3Ccircle cx=%227%22 cy=%2218%22 r=%222%22/%3E%3Ccircle cx=%2217%22 cy=%2218%22 r=%222%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 18V6a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v11a1 1 0 0 0 1 1h2%22/%3E%3Cpath d=%22M15 18H9%22/%3E%3Cpath d=%22M19 18h2a1 1 0 0 0 1-1v-3.65a1 1 0 0 0-.22-.62l-3.48-4.35A1 1 0 0 0 17.52 8H14%22/%3E%3Ccircle cx=%227%22 cy=%2218%22 r=%222%22/%3E%3Ccircle cx=%2217%22 cy=%2218%22 r=%222%22/%3E%3C/svg%3E"); } body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box:nth-child(2) .info-box-wrapper .content-icon::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 22s8-4 8-11V5l-8-3-8 3v6c0 7 8 11 8 11z%22/%3E%3Cpath d=%22m9 12 2 2 4-4%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 22s8-4 8-11V5l-8-3-8 3v6c0 7 8 11 8 11z%22/%3E%3Cpath d=%22m9 12 2 2 4-4%22/%3E%3C/svg%3E"); } body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box:nth-child(3) .info-box-wrapper .content-icon::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 6v6l4 2%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22/%3E%3Cpath d=%22M12 6v6l4 2%22/%3E%3C/svg%3E"); } body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box:nth-child(4) .info-box-wrapper .content-icon::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1z%22/%3E%3Cpath d=%22M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8%22/%3E%3Cpath d=%22M12 17.5v-11%22/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 2v20l2-1 2 1 2-1 2 1 2-1 2 1 2-1 2 1V2l-2 1-2-1-2 1-2-1-2 1-2-1-2 1z%22/%3E%3Cpath d=%22M16 8h-6a2 2 0 1 0 0 4h4a2 2 0 1 1 0 4H8%22/%3E%3Cpath d=%22M12 17.5v-11%22/%3E%3C/svg%3E"); } /* Mobile benefits typography (owner-approved): heading 12px / 600, description 11px, slightly airier description line-height. Mobile (<=767px), this benefits widget only; placed after the icon-left block so it overrides the earlier 14px/12px sizes (same specificity). Desktop untouched. */ @media (max-width: 767px) { body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box .info-box-title { font-size: 12px; font-weight: 600; line-height: 1.25; margin: 0 0 2px; } body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box .info-box .info-box-description { font-size: 11px; line-height: 1.35; } } /* Mobile: centre the whole 2x2 benefits grid. Columns are sized to their content (never wider than the available space - minmax(0,max-content) lets them shrink and wrap on very narrow screens) and the resulting block is centred, so left and right whitespace stay balanced at any width. Text inside each item remains left-aligned with the icon on the left. Mobile (<=767px), this widget only. */ @media (max-width: 767px) { body .elementor-56542 .elementor-element.elementor-element-b6e4d09 { --grid-column-gap: clamp(18px, 6vw, 32px); } body .elementor-56542 .elementor-element.elementor-element-b6e4d09 .bwp-info-box.elementor-grid { grid-template-columns: repeat(2, minmax(0, max-content)); justify-content: center; } } /* Mobile: let the benefits widget fill its flex-row parent (.e-con-inner). Without this the widget is a shrink-to-fit flex item that collapses to its content width at the left edge, so the centred grid above has no free space to centre in. Mobile (<=767px), this widget only. */ @media (max-width: 767px) { body .elementor-56542 .elementor-element.elementor-element-b6e4d09 { width: 100%; } } /* ========================================================================== Homepage hero slider (Slider Revolution "slider-2"), slide 1 (id=4) ONLY - mobile background image override. Root cause investigated and confirmed: this theme's RevSlider render path (output.sr7.class.php's main slide loop) calls add_slide_background_image() unconditionally for every slide (this is the ONLY reliable image-rendering path - confirmed working, it is what renders the slide's own background right now) but add_creative_layer() filters OUT every layer whose type isn't "text"/"button" before it ever reaches the DOM - so a second "image" layer, added via RevSlider's own supported save API, is never rendered. There is also no supported per-breakpoint override field on a legacy-table slide's own background (checked the slide editor's admin form definitions - no such field exists). Given a single background image cannot avoid clipping text at both the very wide desktop box and the near-square mobile box (881:1920 vs 550:480), the desktop-optimised image (attachment 75218) is now the slide's real background (renders via the proven path above), and this CSS overlay swaps in the mobile-safe composite (attachment 75219) only below 767px, matching this file's own existing mobile breakpoint. #SR7_2_1-4-slidebg is this exact slide's own unique, stable element ID (derived from the slider instance + slide id, confirmed directly from the live DOM) - nothing here can match slide 2 or 3's own background elements, which have their own different IDs, so slides 5/6 are completely unaffected regardless of implementation detail. Implemented as a ::after overlay (not a background-image override on the element itself) deliberately: RevSlider's real background is built entirely by client-side JS (confirmed - the raw HTML only ever contains a