/* CANONICAL-REV: 2026-10-19.131 (HyperShop: .130 + the .131 addtocart-bar-qty-own-height block) .130 (2026-10-16): adopted-cart-panel-ink on the outermost panel only, zero specificity (FlatStore's dark panel went #333 on #363636). .129 (2026-10-16): phone cart panel centring raised to (1,1,2) - Flexo's donor `div.panel2 {left:auto !important}` beat it (panel half off-screen). .128 (2026-10-16): article-pager-ends (article Prev/Next bunched at the left; Next now at the far right). .127 (2026-10-16): adopted-cart-panel-ink (phone cart panel inherited the chip's white ink: an empty-looking cart). .126 (2026-10-16): password-toggle-inline (Joomla's show-password eye wrapped onto its own line under the password field on phones). .125 (2026-10-16): cart-count-badge-desktop (a count badge on the desktop cart icon whenever the cart holds items; Tim: "that number should always show ... a thing for all templates with carts"). .124 (2026-10-15): cart-chip-same-box (the adopted cart chip lost its 1px ring: it made the chip 46px, grey-ringed and out of line with its 44px neighbours; Tim on Serenity: "the basket icon is not centered in its square"). .123 (2026-10-13): phone-search-input-submit (input[type=submit] search button was blank white on phones) + cart-count-badge (number on the phone cart chip) - SparkStore, Tim. .122 (2026-10-10): vmmenu-sublists-phone (VirtueMart Category module subcategories open on phones again; the menu-module hide caught their ul.menu). .121 (2026-09-30): phone-pagination-wraps (Joomla pagination fits phones; 15 ET stages had cut-off buttons). .120 (2026-09-30): phone-vm-cart-page-fits (Tim: Captiva cart didn't fit; one block for all VM cart markups; the icon-only remove button applies at all widths). .119 (2026-09-30): phone-account-content-first rebuilt (component-level markers only; cheaper selectors; .118 slowed slick/Owl init on VMT Infinity). .118 (2026-09-29): + phone-account-content-first (Tim's rule: no modules above account pages on phones except a store category menu; breadcrumbs stay). ET rollout only - VMT stays pinned at .116. .117 (2026-09-28, agU): ET-only rollout - VMT stays pinned at .116 pending a 43-stage VMT A/B of the .117 edits (desktop-header-icons text-link exclusion C1, 980-1199 cap !important C4, megamenu-link-bs2-content-box C6m). The single source for every ET template's bridge. Fixes go HERE, never into a template. A template records the rev it was last checked at; when this rev moves, every template below it is due a re-check. Per-template blocks are debt - see 33-VMT-ET-Template-Modernization-Pipeline.md. */ /* * Serenity template — bs2-bs5-bridge.css * * BS2-to-BS5 visual aliasing for BS2 grid + utility classes that survive in: * (1) custom-HTML module content stored in jos_modules.content * (2) VirtueMart's older view templates that still emit .row-fluid / .span* markup * * The Skill 26 modernize-stack.py helper rewrites BS2 classes in index.php, but * MODULE CONTENT is data not code — those BS2 classes survive intact. Without * this bridge, BS5 doesn't know what .row-fluid / .spanN mean, so module rows * collapse to stacked-vertically block elements. * * This file is loaded LAST in the CSS stack so its rules win the cascade. * * Reference: Avant's avant-fixups.css (early Phase 3b version) — same pattern * applied to module content that contains legacy markup. */ /* ---------- BS2 .row-fluid → BS5 flex row ---------- */ .row-fluid { display: flex; flex-wrap: wrap; margin-right: 0; margin-left: 0; box-sizing: border-box; width: 100%; } /* CS-PATCH: rowfluid-where-completion 2026-07-24 (found on Explore) This block was only PARTIALLY :where()'d in the 2026-07-14 FlatStore refactor (span1/3/6/9/12 + the [class*=span] child block were left at full specificity) — a canonical regression from the parallel-tab nights. The un-:where'd 15px PADDING gutters + BS5 12-col widths beat the BS2-faithful :where() grid below (margins + 14.53/23.08/...%): Explore 768 showed sidebar moduletable 146 vs live 161 and partner logos at HALF size (li.span2 got BS2 width but kept the 15px padding). BS2 used margin-left gutters and NO padding — the :where() standalone .spanN block below owns widths+gutters; this block only keeps the flex-child plumbing. */ .row-fluid > [class*="span"]:where(:not(ul[class*="product"] > *)) { box-sizing: border-box; min-height: 1px; flex: 0 0 auto; /* BS2's real gutter model: margin-left, NOT padding. Must sit at real specificity — reset.css's element-level margin:0 beats a :where() margin (found on Explore browse view: span9 lost its 2.564% gutter and the whole main column sat 29px left of live). */ margin-left: 2.564102564%; } .row-fluid > [class*="span"]:first-child { margin-left: 0; } :where(.row-fluid > .span1) { width: 8.333333%; } :where(.row-fluid > .span2) { width: 16.666667%; } :where(.row-fluid > .span3) { width: 25%; } :where(.row-fluid > .span4) { width: 33.333333%; } :where(.row-fluid > .span5) { width: 41.666667%; } :where(.row-fluid > .span6) { width: 50%; } :where(.row-fluid > .span7) { width: 58.333333%; } :where(.row-fluid > .span8) { width: 66.666667%; } :where(.row-fluid > .span9) { width: 75%; } :where(.row-fluid > .span10) { width: 83.333333%; } :where(.row-fluid > .span11) { width: 91.666667%; } :where(.row-fluid > .span12) { width: 100%; } /* Standalone .spanN (outside .row-fluid) — float-based BS2 behaviour */ /* 2026-07-14 FlatStore: wrapped in :where() so template.css same-specificity overrides (e.g. .sp20 five-across cells) win like they did over load-FIRST BS2. The bridge loads LAST; without :where it hijacked those grids. */ :where(.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12) { box-sizing: border-box; float: left; min-height: 1px; margin-left: 2.564102564%; } :where(.span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12):where(:first-child) { margin-left: 0; } :where(.span1) { width: 5.982905983%; } :where(.span2) { width: 14.52991453%; } :where(.span3) { width: 23.07692308%; } :where(.span4) { width: 31.62393162%; } :where(.span5) { width: 40.17094017%; } :where(.span6) { width: 48.71794872%; } :where(.span7) { width: 57.26495726%; } :where(.span8) { width: 65.81196581%; } :where(.span9) { width: 74.35897436%; } :where(.span10) { width: 82.90598291%; } /* 1170-grid %% (was 970-grid px) — fill container, not bunch-left */ :where(.span11) { width: 91.45299145%; } /* 1170-grid %% (was 970-grid px) — fill container, not bunch-left */ :where(.span12) { width: 100%; } /* 1170-grid %% (was 970-grid px) — fill container, not bunch-left */ /* CS-PATCH: span12-never-gutters (2026-09-14, Quadra) A .span12 is full-width by definition, so it can NEVER carry a grid gutter -- any margin-left pushes its right edge past the container. The group rule above is :where()-wrapped (zero specificity) and only zeroes :first-child, so a donor's own BS2 `[class*="span"] { margin-left: 30px }` (0,1,0, and at >=1200px in responsive.css) wins on every span12 that is NOT first-child. Measured on Quadra: a standalone `.tf-module.span12` stack rendered x=138 right=1308 against a container right edge of 1278 -- a 30px overflow -- while its first-child twin sat correctly at x=108 right=1278. Real specificity is required here; the bridge loads last, so 0,1,0 is enough to win the tie without !important. */ .span12 { margin-left: 0; } /* ...and at 0,2,0 for the in-row case: a `.row`/`.row-fluid` ANCESTOR (not just a parent) brings `.row [class*="span"] { margin-left: 2.5641% }` into play, which at the 1170 grid is exactly the same 30px and outranks a bare `.span12`. Measured on Quadra: the offending block sat in a footer `.row`. Mirrors the width idiom already used below for `.row-fluid .span12, .row .span12`. */ .row-fluid .span12, .row .span12 { margin-left: 0; } /* CS-PATCH: wrapped-span-first-gutter 2026-09-27 (Essential grad prep) Spans inside a PLAIN wrapper that is itself a .row child (`#footer-line.row > #foo-left-right > .span6 + .span6`). BS2 widened the .row by its -30px margin, so both spans could carry the donor's `[class*="span"] { margin-left: 30px }` and still fit: live parent 1200 wide, spans at x115/x715. Under BS5 the wrapper is only the container's 1170, the :where() first-child zero loses to the donor's 0,1,0 gutter, and 30+570+30+570 = 1200 > 1170 - the copyright half WRAPPED below the links (MEASURED Essential @1400: both halves at x145, second at y+31). Zeroing the first child's gutter at real specificity lands them at x115/x715 = live. Fleet A/B on all 37 stage homes: changes ONLY Essential (fixed) and Engage (footer span12 185 -> 155 = live's 155). */ .row > div:not([class*="span"]):not([class*="col-"]) > [class*="span"]:first-child { margin-left: 0; } /* ---------- BS2 .offset* ---------- */ .row-fluid > .offset1 { margin-left: 8.333333%; } .row-fluid > .offset2 { margin-left: 16.666667%; } .row-fluid > .offset3 { margin-left: 25%; } .row-fluid > .offset4 { margin-left: 33.333333%; } .row-fluid > .offset5 { margin-left: 41.666667%; } .row-fluid > .offset6 { margin-left: 50%; } .row-fluid > .offset7 { margin-left: 58.333333%; } .row-fluid > .offset8 { margin-left: 66.666667%; } .row-fluid > .offset9 { margin-left: 75%; } .row-fluid > .offset10 { margin-left: 83.333333%; } .row-fluid > .offset11 { margin-left: 91.666667%; } /* ---------- BS2 .pull-left / .pull-right → BS5 equivalents ---------- */ .pull-left { float: left !important; } .pull-right { float: right !important; } /* ---------- BS2 .hidden-phone / .visible-phone (block context) ---------- */ /* Inline-context (.d-inline d-sm-none / .d-none d-sm-inline) handled in index.php. */ /* These are for div-context usage in module content. */ @media (max-width: 767px) { .hidden-phone { display: none !important; } .visible-phone { display: block !important; } } @media (min-width: 768px) { .visible-phone { display: none !important; } /* .hidden-phone intentionally NOT declared at >=768 — see CS-PATCH: hidden-phone-no-desktop-override (2026-07-24, Explore) */ } /* ---------- BS2 button aliases ---------- */ .btn-inverse { background-color: #212529; border-color: #212529; color: #fff; } .btn-inverse:hover { background-color: #000; border-color: #000; color: #fff; } .btn-default { background-color: #6c757d; border-color: #6c757d; color: #fff; } .btn-default:hover { background-color: #5c636a; border-color: #5c636a; color: #fff; } /* ---------- Mobile responsiveness — collapse multi-col rows on small screens ---------- */ @media (max-width: 767px) { .row-fluid { flex-direction: column; } .row-fluid > [class*="span"] { width: 100% !important; margin-left: 0 !important; } } /* ---------- Sticky header — white background so it stays visible on scroll ---------- */ /* Locked 2026-06-15: The fixed-position #top-handler had no background, so when scrolling over the slideshow / content images the menu blended into the page and got lost. */ /* CS-PATCH: sticky-header-scrolled-only CORRECTED 2026-09-01. The 2026-06-15 note above states the intent exactly -- "when SCROLLING over the slideshow / content images the menu blended into the page" -- but the selector also matched `.fixed`, which describes POSITIONING, not scroll state. Six templates (Armada, Infinity, Nevo, Studio, Theon, XStore) carry `.fixed` from page load, so their header was painted solid white while sitting on top of a dark hero -- with white logo and white menu text on it. Measured on Studio: #top-handler background rgb(255,255,255) on the stage vs rgba(0,0,0,0) on the live donor, and a header that read as completely empty in a screenshot. None of those donors ever sets `.scrolled`; on scroll they add their OWN classes (`dark`, `tiny`) with their own colours -- Armada rgba(15,15,15,.98), Nevo rgb(47,49,51), XStore rgba(255,255,255,.99). So the fix is two-part: 1. drop `.fixed`, so at rest the donor's transparent header is restored; 2. key the background off `cs-scrolled`, which the canonical chrome JS adds on scroll, and wrap it in :where() so it contributes ZERO specificity. Any donor rule -- even a single class -- then wins, and templates that already style their own scrolled header keep doing so. Templates with no scrolled styling at all (Studio, Theon, Infinity) get the readable background the 2026-06-15 note wanted, and only once scrolled. */ :where(#top-handler.cs-scrolled) { background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); } #top-handler.scrolled { background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); } #top-handler.scrolled { background: #ffffff; } /* ---------- Testimonials section — tighten the over-tall gray box ---------- */ /* Locked 2026-06-15: #testimonials .container had min-height: 460px hard-coded. With single-testimonial visible the gray box towers above the content. */ #testimonials .container { min-height: auto; } #testimonials .container .row-fluid { padding: 50px 0px; } #testimonials { margin-bottom: 0; } .customers-box-handler .owl-theme .owl-controls .owl-pagination { margin-top: 10px; } /* ---------- Manufacturers/Partners carousel — reduce gap before pagination dots ---------- */ /* Locked 2026-06-15: Visual gap of ~150px between brand-logo row bottom and the pagination dots. Caused by owl-carousel inheriting auto-height of taller items. */ .man-main-handler { padding-bottom: 0; } .man-main-handler .owl-wrapper-outer { padding: 0; } .man-main-handler .owl-pagination, .moduletable_manufacturers .owl-pagination { margin-top: 10px; } .moduletable_manufacturers .owl-item { padding: 0 10px; } .moduletable_manufacturers .owl-item img { max-height: 80px; width: auto; margin: 0 auto; } /* ---------- Sticky header — white background so it stays visible on scroll ---------- */ /* Locked 2026-06-15: The fixed-position #top-handler had no background, so when scrolling over the slideshow / content images the menu blended into the page and got lost. */ /* CS-PATCH: sticky-header-scrolled-only CORRECTED 2026-09-01. The 2026-06-15 note above states the intent exactly -- "when SCROLLING over the slideshow / content images the menu blended into the page" -- but the selector also matched `.fixed`, which describes POSITIONING, not scroll state. Six templates (Armada, Infinity, Nevo, Studio, Theon, XStore) carry `.fixed` from page load, so their header was painted solid white while sitting on top of a dark hero -- with white logo and white menu text on it. Measured on Studio: #top-handler background rgb(255,255,255) on the stage vs rgba(0,0,0,0) on the live donor, and a header that read as completely empty in a screenshot. None of those donors ever sets `.scrolled`; on scroll they add their OWN classes (`dark`, `tiny`) with their own colours -- Armada rgba(15,15,15,.98), Nevo rgb(47,49,51), XStore rgba(255,255,255,.99). So the fix is two-part: 1. drop `.fixed`, so at rest the donor's transparent header is restored; 2. key the background off `cs-scrolled`, which the canonical chrome JS adds on scroll, and wrap it in :where() so it contributes ZERO specificity. Any donor rule -- even a single class -- then wins, and templates that already style their own scrolled header keep doing so. Templates with no scrolled styling at all (Studio, Theon, Infinity) get the readable background the 2026-06-15 note wanted, and only once scrolled. */ :where(#top-handler.cs-scrolled) { background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); } #top-handler.scrolled { background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); } #top-handler.scrolled { background: #ffffff; } /* ---------- Testimonials section — tighten the over-tall gray box ---------- */ /* Locked 2026-06-15: #testimonials .container had min-height: 460px hard-coded. With single-testimonial visible the gray box towers above the content. */ #testimonials .container { min-height: auto; } #testimonials .container .row-fluid { padding: 50px 0px; } #testimonials { margin-bottom: 0; } .customers-box-handler .owl-theme .owl-controls .owl-pagination { margin-top: 10px; } /* ---------- Manufacturers/Partners carousel — reduce gap before pagination dots ---------- */ /* Locked 2026-06-15: Visual gap of ~150px between brand-logo row bottom and the pagination dots. Caused by owl-carousel inheriting auto-height of taller items. */ .man-main-handler { padding-bottom: 0; } .man-main-handler .owl-wrapper-outer { padding: 0; } .man-main-handler .owl-pagination, .moduletable_manufacturers .owl-pagination { margin-top: 10px; } .moduletable_manufacturers .owl-item { padding: 0 10px; } .moduletable_manufacturers .owl-item img { max-height: 80px; width: auto; margin: 0 auto; } /* ---------- Cart product images — force aspect-ratio preservation ---------- */ /* Locked 2026-06-15: BS5 doesn't auto-apply height:auto to images the way BS4 did. The legacy span.cart-images rule sets width:45px but no height, so under certain parent-height contexts the image stretches vertically into a tall narrow strip. Force aspect ratio + cap height defensively. */ span.cart-images img, .cart-images img, .cart-product-image img, .cartpanel img.featuredProductImage, td .cart-images img { width: 45px !important; height: auto !important; max-height: 60px !important; object-fit: contain; } /* And the mini-cart in header */ .cartpanel .vm_cart_products img, .cartpanel img { width: 45px !important; height: auto !important; max-height: 60px !important; object-fit: contain; } /* ---------- Related-products / "You May Also Be Interested" grid images ---------- */ /* Locked 2026-06-15 (Serenity, Round 5 fix): The VirtueMart cart-bottom related- products block uses `