/* * 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%; } .row-fluid > [class*="span"] { box-sizing: border-box; min-height: 1px; padding-right: 15px; padding-left: 15px; flex: 0 0 auto; } .row-fluid > .span1 { width: 8.333333%; } .row-fluid > .span2 { width: 16.666667%; } .row-fluid > .span3 { width: 25%; } .row-fluid > .span4 { width: 33.333333%; } .row-fluid > .span5 { width: 41.666667%; } .row-fluid > .span6 { width: 50%; } .row-fluid > .span7 { width: 58.333333%; } .row-fluid > .span8 { width: 66.666667%; } .row-fluid > .span9 { width: 75%; } .row-fluid > .span10 { width: 83.333333%; } .row-fluid > .span11 { width: 91.666667%; } .row-fluid > .span12 { width: 100%; } /* Standalone .spanN (outside .row-fluid) — float-based BS2 behaviour */ .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%; } .span1:first-child, .span2:first-child, .span3:first-child, .span4:first-child, .span5:first-child, .span6:first-child, .span7:first-child, .span8:first-child, .span9:first-child, .span10:first-child, .span11:first-child, .span12:first-child { margin-left: 0; } .span1 { width: 5.982905983%; } .span2 { width: 14.52991453%; } .span3 { width: 23.07692308%; } .span4 { width: 31.62393162%; } .span5 { width: 40.17094017%; } .span6 { width: 48.71794872%; } .span7 { width: 57.26495726%; } .span8 { width: 65.81196581%; } .span9 { width: 74.35897436%; } .span10 { width: 82.90598291%; } .span11 { width: 91.45299145%; } .span12 { width: 100%; } /* ---------- 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 { display: block !important; } } /* ---------- 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. */ #top-handler { background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); } #top-handler.scrolled, #top { 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. */ #top-handler { background: #ffffff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); } #top-handler.scrolled, #top { 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 `

` markup with `` inside. Same BS5 image-stretch issue as the cart row: the legacy span6 column flexes to fill the row's tallest content; without `height: auto !important` the image stretches vertically and the products look tall + narrow. Cap defensively. */ .moduletable_products img.featuredProductImage, .moduletable_products .pr-img-handler img, .vmgroup_products img.featuredProductImage, .vmgroup_products .pr-img-handler img, .vmproduct .pr-img-handler img, .pr-img-handler img.featuredProductImage, .pr-img-handler img, .show-pop-up-image img.featuredProductImage, .featured-view img.featuredProductImage, .latest-view img.featuredProductImage, .topten-view img.featuredProductImage, .recent-view img.featuredProductImage { max-width: 100% !important; width: 100% !important; height: auto !important; object-fit: contain; aspect-ratio: 1 / 1; } /* Belt-and-suspenders: any image inside any .vmproduct li directly */ .vmproduct li img, .vmgroup_products li img, .moduletable_products li img { max-width: 100% !important; height: auto !important; object-fit: contain; } /* Cap the spacer container's flex stretch so the row doesn't blow up vertically */ .vmproduct .spacer .pr-img-handler { overflow: hidden; } /* ---------- Category-view images (Round 9 — Tim caught the /online-store page) ---------- */ /* Locked 2026-06-16: VirtueMart's category-view markup uses
The image has NO class — only the wrapper hierarchy. The earlier related- products fix that targeted .featuredProductImage doesn't reach these. */ .category-view .category img, .category-view .row-fluid .category img, .category .spacer img, .row-fluid .spacer img, .category-view .spacer img, .category-view .category .spacer h2 a img { max-width: 100% !important; width: 100% !important; height: auto !important; object-fit: contain; aspect-ratio: 1 / 1; } /* Cap the spacer container so flex parent doesn't stretch the row vertically */ .category-view .category .spacer, .category .spacer { overflow: hidden; } /* ---------- Breadcrumbs — strip list bullets, inline display (Round 11) ---------- */ /* Locked 2026-06-16: Joomla 5's mod_breadcrumbs ships a
... markup. Without `list-style: none` + `display: inline`, each crumb shows a bullet. */ .breadcrumb, ul.breadcrumb, #breadcrumb-line .breadcrumb, [role="navigation"] .breadcrumb { list-style: none !important; padding-left: 0 !important; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4em; } .breadcrumb > li, ul.breadcrumb > li { list-style: none !important; display: inline-flex; align-items: center; } .breadcrumb > li::before, .breadcrumb > li::marker { content: none !important; } /* ---------- Breadcrumbs tighten (Round 12) ---------- */ /* Locked 2026-06-16: round 11 set gap:0.4em which left visible whitespace between "/" and the next crumb. Tim wants tighter — natural single-space look like "Home / Using Joomla!" rather than "Home / [gap] Using Joomla!". Drop the flex gap and let the inline content's natural whitespace handle it. */ .breadcrumb, ul.breadcrumb, #breadcrumb-line .breadcrumb, [role="navigation"] .breadcrumb { gap: 0; } .breadcrumb > li, ul.breadcrumb > li { margin: 0; padding: 0; } /* Normalize the divider span so the "/" sits with consistent single-space padding either side, regardless of whether the source HTML has tabs/newlines inside the . */ .breadcrumb .divider { display: inline-block; padding: 0 0.35em; white-space: normal; } /* ---------- UNIVERSAL image aspect-ratio defense (Round 13) ---------- */ /* Tim 2026-06-16: instead of catching the stretched-image pattern page-by-page, apply max-width:100% + height:auto to EVERY image with HTML width/height attributes (the VirtueMart marketplace pattern). Modern browsers + the HTML attrs give the natural aspect-ratio; CSS just keeps it from overflowing. This subsumes the round 5 (related products), round 9 (category view) and round 10 (single contact) per-page rules and catches everything else. Exclusions: explicit icon/emoji classes, social icons, payment icons — those need pixel-precise sizing from the template's own rules. */ img[width][height]:not([class*="icon"]):not([class*="socicon"]):not([class*="emoji"]):not([alt*="separator"]) { max-width: 100% !important; height: auto !important; } /* Safety net — any img inside known VM / Joomla content containers (covers cases where the img has no width/height attrs but still needs sizing) */ .main-image img, .vm-additional-images img, .vm-additional-images a img, .vm-product-media-container img, .vm-product-media-container a img, .product-fields-list img, .product-related-products img, .product-field-display img, .product-field-type-R img, .virtuemart_view_productdetails img, .productdetails-view img, .product-container img, .vmproduct img, .vmgroup_products img, .category-view img, .featured-view img, .latest-view img, .topten-view img, .recent-view img, .related-products-view img, .browse-view img, .search-result-products img, .com-content-article img, .article-content img { max-width: 100% !important; height: auto !important; } /* =========================================================================== * Megamenu hover-gap fix (locked 2026-06-16, Round 19 final) * * Architecture: vendor's `top: 90px` is the CORRECT position — header is 90px * tall (`topheight` param), logo+menu share the row, dropdown lands right below. * The 40-50px visible gap from menu items to dropdown is intentional design. * * Real bug: superfish's hover-delay JS only wires to the `usedropdown` code * path, NOT `usemegamenu`. Megamenu is pure CSS, so mouse crossing the gap * instantly drops `:hover` and the dropdown vanishes mid-traversal. * * Fix: CSS transition-delay on `top` — dropdown stays at top:90 for 500ms * after hover-out before reverting to top:-999em (the hidden state). * * ⛔ Three traps to avoid (don't repeat the Round 17-18 mistakes): * - `top: 100%` — `.main-li-container` is `position:static!important`, * so 100% measures against next positioned ancestor; dropdown escapes. * - `top:` — logo is centered in the 90px row, overlaps any * value below ~90px. * - Pseudo-element bridge with pointer-events:auto — `.ul-container` spans * full container width, so bridge above it covers sibling menu items * and blocks lateral mouse movement. * =========================================================================== */ /* Hide state — declare transition with 500ms delay (applies when hovering OUT) */ #megamenu-handler #mega-menu.menu-nav > li > ul.ul-container { transition: top 0s linear 500ms; } /* Hover state — no delay (applies when hovering IN), use vendor's correct top:90 */ #megamenu-handler #mega-menu.menu-nav > li:hover > ul.ul-container, #megamenu-handler #mega-menu.menu-nav > li.sfHover > ul.ul-container { top: 90px !important; transition-delay: 0s; } /* ========================================================================= * CS-PATCH: QStore grid override (2026-07-14 rev4) * ========================================================================= */ .container { max-width: 1170px; } /* .row-fluid -> BS2 block+float (module content, ul.vmproduct tf-module blocks) */ .row-fluid { display: block; } .row-fluid::before, .row-fluid::after { content: ""; display: table; line-height: 0; } .row-fluid::after { clear: both; } .row-fluid > [class*="span"] { float: left; box-sizing: border-box; min-height: 1px; margin-left: 0; } .row-fluid > [class*="span"]:first-child { margin-left: 0; } /* legacy .spanN inside a flex .row -> flex-basis widths (keeps BS5 .col-* rows flex) */ .row > [class*="span"] { box-sizing: border-box; min-height: 1px; flex: 0 0 auto; margin-left: 0; float: none; } .row > .span1{width:8.333333%}.row > .span2{width:16.666667%}.row > .span3{width:25%} .row > .span4{width:33.333333%}.row > .span5{width:41.666667%}.row > .span6{width:50%} .row > .span7{width:58.333333%}.row > .span8{width:66.666667%}.row > .span9{width:75%} .row > .span10{width:83.333333%}.row > .span11{width:91.666667%}.row > .span12{width:100%} /* FIX (Tim 2026-07-14 #1): span12 sections must be full parent width, not the BS2 970-grid standalone 940px. Skill 33 line 449. */ .span12, .tf-module.span12, .moduletable.span12 { width: 100% !important; float: none !important; } /* FIX (Tim 2026-07-14 #2): the slideshow row (inside .slideshow-col) has a full-width slideshow wrapper + a featured-products .span3. Live shows the featured column to the RIGHT of the slideshow. Use flex with the slideshow wrapper filling (order 1, left) and the .span3 fixed at 25% (order 2, right). Scoped to .slideshow-col so footer/promo/tab rows are untouched. */ .slideshow-col .row:has(> [class*="span"]) { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: flex-start !important; } .slideshow-col .row:has(> [class*="span"]) > *:not([class*="span"]) { flex: 0 0 66% !important; max-width: 66% !important; min-width: 0 !important; order: 1; } /* the slideshow's inner col-md-* must fill its wrapper (was 50% -> half-empty) */ .slideshow-col .row:has(> [class*="span"]) > *:not([class*="span"]) [class*="col-md-"] { flex-basis: 100% !important; max-width: 100% !important; width: 100% !important; } /* featured column GROWS to fill the rest -> reaches the right edge (no gutter gap) + wider ads */ .slideshow-col .row:has(> [class*="span"]) > [class*="span"] { flex: 1 1 auto !important; max-width: none !important; float: none !important; margin-left: 0 !important; order: 2; } /* kill the nested-container right padding so the featured ads reach the container edge (live has 0 gap; stage had a 12px BS5-container-padding gap on the right) */ .slideshow-col .container { padding-right: 0 !important; } /* VirtueMart product module: block wrapper, full-width .tf-module children */ ul.vmproduct, ul.vmproduct.row-fluid, ul.vmproduct.row { display: block; list-style: none; margin-left: 0; } ul.vmproduct > .tf-module, ul.vmproduct > li { float: none; } /* Tabbed-products nav (Hot Offer/New Items/Great Sale): the module's outer .row is a BS5 flex row, so BS5 pads its non-col children 12px (BS2 .row-fluid never did) — that offset reads as a stray blue column at mobile. Strip the gutter from the tab children so the tabs sit flush-left like the live donor. */ .nav-tabs-handler.row > .tabs-nav-handler, .nav-tabs-handler.row > .tabs-handler, .tabs-nav-handler { padding-left: 0 !important; padding-right: 0 !important; } /* keep tab labels ("Hot Offer" etc.) on one line so the active tab doesn't grow a second row and overflow the nav bar (live keeps them single-line) */ .tabs-nav-handler ul.nav-tabs > li, .tabs-nav-handler ul.nav-tabs > li .tab_heading, .tabs-nav-handler ul.nav-tabs > li a { white-space: nowrap; } /* tab labels: 15px side padding (like live) so they read as buttons; and force display:block — on stage the .tab_heading was display:inline, which (with the block icon inside) rendered an 87px-tall box overflowing the 72px nav bar top + bottom (the stray blue sliver). block normalizes it to the live height. */ .tabs-nav-handler ul.nav-tabs > li .tab_heading, .tabs-nav-handler ul.nav-tabs > li > a { display: block !important; text-align: center; padding-left: 15px !important; padding-right: 15px !important; } @media (max-width: 767px) { .row-fluid > [class*="span"] { float: none; width: 100%; margin-left: 0; } .slideshow-col .row:has(> [class*="span"]) { flex-direction: column !important; } /* match the desktop selector specificity (:not) so the mobile full-width wins the cascade — otherwise the slideshow wrapper keeps its 66% flex-basis and the camera renders at ~2/3 width with white space on the right */ .slideshow-col .row:has(> [class*="span"]) > *:not([class*="span"]) { flex: 1 1 100% !important; max-width: 100% !important; width: 100% !important; } .slideshow-col .row:has(> [class*="span"]) > [class*="span"] { max-width: 100% !important; } /* tabs: distribute the 3 across the row (wider + centered) instead of jammed left */ .tabs-nav-handler ul.nav-tabs { display: flex !important; justify-content: space-around !important; } .tabs-nav-handler ul.nav-tabs > li { flex: 0 1 auto; } /* standalone .spanN blocks (footer columns, payment/social bar, any .moduletable/.tf-module.spanN) must STACK full-width on mobile — the % widths above are desktop-grid only */ .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 { width: 100% !important; margin-left: 0 !important; float: none !important; } /* owl product carousels must not exceed viewport (6px overflow -> brown gutter) */ .owl-wrapper-outer, .owl-item, .sl-products, .vmgroup_products, .moduletable_products { max-width: 100% !important; } } /* BS2 responsive visibility utilities (base only had phone) */ .visible-phone, .visible-tablet, .visible-desktop { display: none !important; } @media (max-width: 767px) { .hidden-phone { display: none !important; } .visible-phone { display: block !important; } } @media (min-width: 768px) and (max-width: 979px) { .hidden-tablet { display: none !important; } .visible-tablet { display: block !important; } } @media (min-width: 980px) { .hidden-desktop { display: none !important; } .visible-desktop { display: block !important; } } /* ---------- Tim-requested mobile spacing tweaks (QStore, 2026-07-14) ---------- */ @media (max-width: 767px) { #top-long .vmgroup_products.product-sl-handler { margin: 0px 0px; } #top-long .moduletable_style8, #top-long .moduletable_products { margin-bottom: 0px !important; } #bottom-bg { padding: 0px 0px; margin-top: 0px; font-size: 90%; } #bottom-bg h3, .moduletable_menu h3 { font-weight: 700; padding-bottom: 10px; font-size: 130%; position: relative; padding-top: 10px; } /* Tim-requested: light-grey top-bar band on mobile */ #top-long { background-color: #f2f2f2; } /* padding under the Hot Offer/New Items/Great Sale tabs so the first product title isn't flush against the top of the content box */ .tabs-handler .tab-content, .tabs-handler { padding-top: 15px !important; } /* "ALL CATEGORIES" label: centre it in its bar, bigger text + bigger hamburger with breathing room between the icon and the word */ .megamenu-background .megamenu-title { display: flex; align-items: center; justify-content: flex-end; min-height: 48px; padding-top: 0; padding-bottom: 0; } /* Tim-requested (mobile) */ #megamenu-handler .megamenu-title { text-transform: uppercase; font-size: 110%; margin-bottom: 0px; /* padding-bottom: 9px; */ } .megamenu-background .megamenu-title i, .megamenu-background .megamenu-title .pe-7s-menu { font-size: 24px !important; margin-right: 10px !important; line-height: 1; } /* the bordered ALL CATEGORIES box (#megamenu-handler) had padding:17px 0 + a fixed 38px height, so the 48px label overflowed out the bottom (sat "on the line"). Remove the padding, let it grow, and flex-centre the label vertically. */ #megamenu-handler { padding-top: 0 !important; padding-bottom: 0 !important; height: auto !important; min-height: 50px !important; display: flex !important; align-items: center !important; } #megamenu-handler > .megamenu-background { width: 100%; } /* full-bleed slideshow on mobile: Tim wants it edge-to-edge with nothing on the sides. The camera sat inset 24px each side (container 12px pad + inner-DIV 12px pad); break it out to the full viewport width. camera.js is nudged with a resize event (index.php) so it recomputes the slide dimensions to the new width. This also puts the camera.js timing bar within the full-width slideshow instead of poking past it. */ .slideshow-col .container { padding-left: 0 !important; padding-right: 0 !important; } .slideshow-col .row:has(> [class*="span"]) > *:not([class*="span"]) [class*="col-md-"] { padding-left: 0 !important; padding-right: 0 !important; } .camera_wrap { width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; } /* ALL CATEGORIES popup menu: give it a solid background so it doesn't render transparent over the slideshow and get lost. It's position:absolute z-index:9999 already — just needs a fill + a little lift. */ .mega-menu-responsive-handler ul.menu-nav, .mega-menu-responsive-handler > ul { background: #ffffff !important; border: 1px solid #e4e4e4; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); z-index: 10000 !important; } .mega-menu-responsive-handler ul.menu-nav li, .mega-menu-responsive-handler ul.menu-nav li a { background: transparent; } .mega-menu-responsive-handler ul.menu-nav > li { background: #ffffff; } /* camera.js slideshow: the caption row / .camera_caption_bg / timing bar poke ~12px past the camera's right edge — clip them to the slideshow bounds so the progress bar is flush with the image edge (overflow-x only, so the pagination below isn't clipped). */ .camera_wrap { overflow-x: hidden; } .camera_wrap .camera_bar { max-width: 100% !important; } } /* ---------- BS5 modal must be viewport-fixed + visible when shown ---------- */ /* QStore's #LoginForm (register/login) is `class="modal ahide afade" style="display:none"`. modernize-stack converted the trigger to data-bs-toggle, so BS5 adds `.show` + a backdrop, but the legacy `.ahide` + inline display:none kept the modal display:none, and the modal computed position:absolute (not fixed) — so it opened invisible / off-screen (worst on mobile). Force BS5 semantics: fixed to the viewport, block + centered when `.show`. */ #LoginForm.modal, .modal { position: fixed !important; } #LoginForm.modal.show, .modal.show { display: block !important; inset: 0 !important; /* full viewport (was right:1050/width:350 -> off-screen) */ width: auto !important; height: auto !important; margin: 0 !important; overflow-x: hidden; overflow-y: auto; } /* ID-scoped so it beats the template's #LoginForm .modal-dialog margin:100px */ #LoginForm.modal .modal-dialog, .modal.show .modal-dialog { margin: 1.75rem auto !important; max-width: 500px !important; left: auto !important; right: auto !important; transform: none !important; } /* ---------- Happy Customers / testimonials: centre the quote ---------- */ /* The .tes-content is wider than its slick slide, so the quote (left-aligned) overflowed and the slider clipped the first/last words ("quis" -> "uis"). Centre it + keep it off the slide edges so it always reads fully. */ .customers-box-handler .tes-content, .tes-content { text-align: center !important; padding-left: 40px !important; padding-right: 40px !important; box-sizing: border-box; } .tes-content p, .customers-box-handler .tes-content p { text-align: center !important; } /* FIX (Kess 2026-08-24): the generic .row-fluid > .span2 (16.667%) rule above has the same specificity as qstore's own 5-per-row .span2.sp20 (19.2%) class, and since this bridge file loads last it was winning by source order, breaking the 5-products-per-row grid (products render at 1/6 width instead of 1/5, with the leftover 6th slot collapsing the row). Restore the correct width. */ .row-fluid > .span2.sp20 { width: 19.2%; margin-left: 1%; } .row-fluid > .span2.sp20:first-child { margin-left: 0; } /* FIX (Kess 2026-08-24): with "usemegamenu" off, .megamenu-col only contains an empty #megamenu-position div, but the col-md-3 class still reserves 25% width, squeezing the real nav (in the sibling .slideshow-col, col-md-9) down to 75% — not enough room for all menu items on one line, so it wraps. Collapse the empty column and let the nav take the full row width. */ .row.stretch-handler > .megamenu-col:not(:has(#megamenu-handler)) { display: none; } .row.stretch-handler > .megamenu-col:not(:has(#megamenu-handler)) ~ .slideshow-col { flex: 0 0 100%; max-width: 100%; } /* FIX (Kess 2026-08-24): template.css's original BS2-era CSS assumed content-box sizing (height + padding + border all add up). BS5's global reset forces box-sizing:border-box everywhere, so elements with an explicit height PLUS padding/border now render squashed into that height instead of growing — the search box and the top menu bar (with its intended 2px top/bottom #e4e4e4 divider borders) end up visibly shorter and the borders barely show. Restore content-box on just these two so they render at their intended size. */ #search-position-handler .inputbox, .main-menu-handler { box-sizing: content-box !important; } /* FIX (Kess 2026-08-24): BS5's .container always carries its own 12px left/right padding. The header row is a real BS5 .row, whose default negative gutter margin (-12px each side) cancels that padding, so header content sits flush with the container edge. Content elsewhere sits inside plain divs (.inner-sep) that don't get that cancellation -> 12px misaligned vs the header. Some of those same wrappers ALSO contain a genuine nested .row (e.g. the product-tabs nav), which cancels the padding on its own — adding a second cancelling margin on .inner-sep there double-shifts it. Simplest fix that works uniformly in both cases: remove the container's padding entirely, so there's nothing to cancel anywhere. BS2-original .container never had this padding either — gutters came only from the .row's own children, matching this template's actual grid model. */ .container { padding-left: 0 !important; padding-right: 0 !important; } /* With the container padding gone there's nothing left for BS5's default .row negative gutter margin to cancel -- without this it would push every .row 12px past the container's true edge instead. */ .row { margin-left: 0 !important; margin-right: 0 !important; } /* FIX (Kess 2026-08-24, rev2 per feedback): each .row-fluid > [class*="span"] child carries 15px of left/right padding. On product-card grids specifically this both misaligned the first/last card against the section header above (e.g. "In Evidenza per Voi") AND made the cards visibly narrower with too much gap between them. Requested fix: drop the padding entirely on card rows only (cards touch edge-to-edge, separated just by their own border) — NOT site-wide, since other .row-fluid > span usages (e.g. the product-detail images/buy-area row) still rely on that 15px gutter and are unaffected. */ .vmproduct.product-details.row-fluid { margin-left: 0; margin-right: 0; } .vmproduct.product-details.row-fluid > [class*="span"] { padding-left: 0 !important; padding-right: 0 !important; } /* FIX (Kess 2026-08-24, per screenshot): BS5's .row still applies its own default 12px left/right gutter padding to every DIRECT CHILD (".row > *"), independent of the .row's own margin (which we already zeroed above). This template never designed around that gutter — it always used its own spacing (the .spanN system, explicit CSS) — so inside the header this extra 12px was nudging the logo/search column content inward relative to the menu row below it, which doesn't go through "col-*" at all. Confirmed via devtools: unchecking this exact padding fixes the alignment. */ .row > * { padding-left: 0 !important; padding-right: 0 !important; } /* FIX (Kess 2026-08-24): logo requested at a fixed 270x50 (was rendering at the source file's native 290x54). */ .h1 img { width: 270px; height: 50px; } /* FIX (Kess 2026-08-24): with the BS5 .row/.col gutter padding removed above, the cart/login/hamburger cluster (#cl-handler) now sits flush against the header's true right edge with zero breathing room. Give it back a small inset so the cart icon isn't touching the edge. */ #cl-handler { padding-right: 15px !important; } /* FIX (Kess 2026-08-24): the header (logo/search/cart row) is explicitly white; the menu row sits inside the same
, so it inherited that white too. Requested: the body's light gray (#fafafa) should show behind the menu row instead, full width edge-to-edge (id added in index.php). */ #menu-row-wrapper { background-color: #fafafa; } /* FIX (Kess 2026-08-24): the vendor's "sticky header" box-shadow (added above, "Locked 2026-06-15") is applied to #top-handler unconditionally, not just while actually scrolled/fixed — so it shows as a permanent full-width gray line under the header on every page, at every scroll position. Not wanted; remove it. */ #top-handler { box-shadow: none; } /* FIX (Kess 2026-08-24): the off-canvas mobile menu panel (#offcanvas) was not sliding into view when opened -- computed left stayed at -300px and visibility stayed hidden even with .off-canvas-visible applied, so the whole panel (Whatsapp box, search, menu list) rendered blank/off-screen. Force it open when the toggle class is present. */ .off-canvas.off-canvas-visible { left: 0 !important; visibility: visible !important; } /* FIX (Kess 2026-08-24): .moduletable_menu has a sitewide white background (set in index.php's inline