/*
 * 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 <head> 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: 20px;
}

.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: 8.333333%;  }
.span2  { width: 16.666667%; }
.span3  { width: 25%;        }
.span4  { width: 33.333333%; }
.span5  { width: 41.666667%; }
.span6  { width: 50%;        }
.span7  { width: 58.333333%; }
.span8  { width: 66.666667%; }
.span9  { width: 75%;        }
.span10 { width: 83.333333%; }
.span11 { width: 91.666667%; }
.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; }
}

/* ---------- 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;
    }
}

/* (Removed 2026-07-14: Serenity-era sticky-header block painted #top white +
   added a box-shadow. VenoShop's donor keeps #top transparent so the red
   header#top-handler:before border-top line shows through the container area;
   the white bg was covering the line inside the 1170px container.) */

/* ---------- 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;
}

/* ---------- 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 `<ul class="vmproduct product-details row-fluid"><li class="span6 floatleft">`
   markup with `<img class="featuredProductImage" width="585" height="585">` 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
   <div class="category floatleft span3"><div class="spacer"><h2><a>
       <img width="585" height="585" src="..."/>
   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 <ul class="breadcrumb"><li>...
   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 <span class="divider">. */
.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:<smaller value>` — 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). 2026-10-29: the hard-coded `top: 90px !important` that stood here
   (removed from the canonical block 2026-07-14, GliseStore) put the panel 45px below this header; the hover `top` now
   comes from the template's own topheight rule again, landing the panel on the header's bottom edge. */
#megamenu-handler #mega-menu.menu-nav > li:hover > ul.ul-container,
#megamenu-handler #mega-menu.menu-nav > li.sfHover > ul.ul-container {
    transition-delay: 0s;
}

/* ============================================================
 * BS5-native BS2-behavior extension (2026-07-11 VenoShop grad-test iteration)
 * ============================================================
 * modernize-stack.py Phase 3a rewrites .row-fluid → .row in markup, but
 * template.css still emits rules keyed on .row-fluid, .spanN, etc.
 * These rules mirror the .row-fluid > .spanN rules for the new .row > .spanN
 * DOM structure so BS5-native rendering matches BS2 visual output.
 * ============================================================ */

/* ---------- .row → BS2 .row-fluid behavior (mirror) ---------- */
.row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    --bs-gutter-x: 0 !important;
    --bs-gutter-y: 0 !important;
}

.row > [class*="span"] {
    box-sizing: border-box !important;
    min-height: 1px !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
    flex: 0 0 auto !important;
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.row > .span1   { width: 8.333333%  !important; flex-basis: 8.333333%  !important; max-width: 8.333333%  !important; }
.row > .span2   { width: 16.666667% !important; flex-basis: 16.666667% !important; max-width: 16.666667% !important; }
.row > .span3   { width: 25%        !important; flex-basis: 25%        !important; max-width: 25%        !important; }
.row > .span4   { width: 33.333333% !important; flex-basis: 33.333333% !important; max-width: 33.333333% !important; }
.row > .span5   { width: 41.666667% !important; flex-basis: 41.666667% !important; max-width: 41.666667% !important; }
.row > .span6   { width: 50%        !important; flex-basis: 50%        !important; max-width: 50%        !important; }
.row > .span7   { width: 58.333333% !important; flex-basis: 58.333333% !important; max-width: 58.333333% !important; }
.row > .span8   { width: 66.666667% !important; flex-basis: 66.666667% !important; max-width: 66.666667% !important; }
.row > .span9   { width: 75%        !important; flex-basis: 75%        !important; max-width: 75%        !important; }
.row > .span10  { width: 83.333333% !important; flex-basis: 83.333333% !important; max-width: 83.333333% !important; }
.row > .span11  { width: 91.666667% !important; flex-basis: 91.666667% !important; max-width: 91.666667% !important; }
.row > .span12  { width: 100%       !important; flex-basis: 100%       !important; max-width: 100%       !important; }

/* ---------- Ensure .row-fluid also gets same treatment (module content data may still have it) ---------- */
.row-fluid {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.row-fluid > [class*="span"] {
    float: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.row-fluid > .span1   { width: 8.333333%  !important; flex: 0 0 auto !important; max-width: 8.333333%  !important; }
.row-fluid > .span2   { width: 16.666667% !important; flex: 0 0 auto !important; max-width: 16.666667% !important; }
.row-fluid > .span3   { width: 25%        !important; flex: 0 0 auto !important; max-width: 25%        !important; }
.row-fluid > .span4   { width: 33.333333% !important; flex: 0 0 auto !important; max-width: 33.333333% !important; }
.row-fluid > .span5   { width: 41.666667% !important; flex: 0 0 auto !important; max-width: 41.666667% !important; }
.row-fluid > .span6   { width: 50%        !important; flex: 0 0 auto !important; max-width: 50%        !important; }
.row-fluid > .span7   { width: 58.333333% !important; flex: 0 0 auto !important; max-width: 58.333333% !important; }
.row-fluid > .span8   { width: 66.666667% !important; flex: 0 0 auto !important; max-width: 66.666667% !important; }
.row-fluid > .span9   { width: 75%        !important; flex: 0 0 auto !important; max-width: 75%        !important; }
.row-fluid > .span10  { width: 83.333333% !important; flex: 0 0 auto !important; max-width: 83.333333% !important; }
.row-fluid > .span11  { width: 91.666667% !important; flex: 0 0 auto !important; max-width: 91.666667% !important; }
.row-fluid > .span12  { width: 100%       !important; flex: 0 0 auto !important; max-width: 100%       !important; }

/* ---------- Container width lock (BS2 = 1170px at large; BS5 default = 1140px)
 * Match live BS2 layout width so template's absolute-positioned children align correctly. */
@media (min-width: 1200px) {
    .container { max-width: 1170px !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    .container { max-width: 940px !important; }
}
.container-fluid {
    width: 100% !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

/* ---------- BS2 responsive visibility (media-scoped so .hidden-phone doesn't hide at ALL viewports) ---------- */
@media (max-width: 767px) {
    .visible-phone   { display: block !important; }
    .hidden-phone    { display: none !important; }
    .visible-tablet  { display: none !important; }
    .visible-desktop { display: none !important; }
    /* Mobile stacking — mirror BS2 bootstrap-responsive: rows drop to block flow,
     * every span/col/bare wrapper goes full-width. Rows MUST NOT stay flex here:
     * bare flex children (.tf-module has no span class) auto-size from float
     * content whose % widths resolve against the auto-sized parent — Chrome
     * resolves the cycle by growing the box unbounded (seen 2026-07-14: #top-long
     * .moduletable_style8 images at 1.3M px, page height 4.1M px). */
    .row, .row-fluid { display: block !important; }
    .row [class*="span"],
    .row-fluid [class*="span"],
    .row [class*="col-"],
    .row-fluid [class*="col-"],
    .row .tf-module,
    .row-fluid .tf-module,
    #foo-left-right {
        display: block;
        float: none !important;
        width: 100% !important;
        flex-basis: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
    }
    .container { max-width: 100% !important; }
}
@media (min-width: 768px) and (max-width: 979px) {
    .hidden-tablet   { display: none !important; }
    .visible-tablet  { display: block !important; }
    .visible-phone   { display: none !important; }
    .visible-desktop { display: none !important; }
}
@media (min-width: 980px) {
    .hidden-desktop  { display: none !important; }
    .visible-desktop { display: block !important; }
    .visible-phone   { display: none !important; }
    .visible-tablet  { display: none !important; }
}

/* ---------- BS2 float utilities ---------- */
.pull-right { float: right !important; }
.pull-left  { float: left  !important; }
.clearfix::after { content: ""; display: table; clear: both; }

/* ---------- List-style resets for lists carrying .row / .row-fluid ---------- */
ul.row, ul.row-fluid, ul.vmproduct, ul.sl-products, .menu-nav, #log-panel, #quick-menu ul, #social-links {
    list-style: none !important;
    padding-left: 0 !important;
}

/* ---------- .row > .spanN offset support ---------- */
.row > .offset1  { margin-left: 8.333333%  !important; }
.row > .offset2  { margin-left: 16.666667% !important; }
.row > .offset3  { margin-left: 25%        !important; }
.row > .offset4  { margin-left: 33.333333% !important; }
.row > .offset6  { margin-left: 50%        !important; }

/* ---------- Header horizontal layout fix (2026-07-11 VenoShop, v2) ---------- */
/* template.css lines 576-578 set inline #site-name-handler { width: <topwidth>px }
 * and #st-navigation { margin-left: <topwidth>px }. Must NOT override those widths.
 * We only add flex-wrap: nowrap so BS5 flex doesnt stack the two. */
@media (min-width: 768px) {
    #top > .container-lr > .row {
        flex-wrap: nowrap !important;
        align-items: stretch;
    }
    #top > .container-lr > .row > #site-name-handler {
        flex: 0 0 auto !important;
    }
    #top > .container-lr > .row > #st-navigation {
        flex: 1 1 auto !important;
        min-width: 0 !important;
        /* template.css sets margin-left:<topwidth>px to clear the FLOATED logo.
         * In this flex row the logo already occupies that width as a flex item,
         * so the margin double-offsets #st-navigation 292px right (2026-07-14). */
        margin-left: 0 !important;
    }
    /* Inner nav row: live donor runs this as BS2 block flow — #cl-handler
     * (currency/lang) floats right, #menu fills underneath-left. Flex stacked
     * them wrong (menu pushed off-right, +15px row height). Match live (2026-07-14). */
    #st-navigation > .row {
        display: block !important;
    }
    /* BS5 core's `.row > * { width: 100% }` breaks the float shrink-wrap on the
     * header's floated clusters (cart was 854px wide, pushing #tpr-nav and #menu
     * down a line). The donor had no BS5 css, so floats shrink-wrapped (2026-07-14). */
    #st-navigation .row > #cl-handler,
    #st-navigation .row > #tpr-nav,
    #st-navigation .row > #search-position,
    #st-navigation .row > .quick-menu {
        width: auto !important;
    }
}

/* ---------- SURGICAL FIX #2: slideshow beside SAVE 35% red ad (2026-07-11) ----------
 * .row.tft-modules contains 2 .tf-module wrappers, each with a .col-md-N (or .spanN) grandchild.
 * BS5 flex on .row treats .tf-module wrappers as flex items (100% wide each) => stacked.
 * Making .tf-module display:contents lets the grandchildren become effective flex children,
 * so col-md-3 + col-md-9 sit side by side taking their percentage widths. Scoped to .tft-modules
 * only so it does not affect other .tf-module usages elsewhere in the template. */
@media (min-width: 768px) {
    .row.tft-modules > .tf-module,
    .row-fluid.tft-modules > .tf-module {
        display: contents;
    }
}

/* ---------- SURGICAL FIX #1: chevrons on menu items with submenus (2026-07-11) ---------- */
#megamenu-handler ul.menu-nav > li.parent > a::after,
#megamenu-handler ul.menu-nav > li.deeper > a::after,
ul#mega-menu > li.parent > a::after,
ul#mega-menu > li.deeper > a::after {
    content: " \25BE";
    font-size: 0.85em;
    margin-left: 4px;
    opacity: 0.7;
    display: inline-block;
}

/* ---------- SURGICAL FIX #4/5/6: footer columns equal-width + text contrast ---------- */
/* CONTACT US uses span4 while others use span2 (2+2+3+3+4 = 14/12 cols → the 5th
 * column wrapped to a second line). The moduletables are DIRECT children of
 * .tf-module.span12 (no intermediate .row) — the original `> .row-fluid >`
 * selectors never matched, which is why Contact Us still wrapped (fixed 2026-07-14).
 * Force all 5 to 20% floats so they sit on one line like the live donor. */
@media (min-width: 768px) {
    #bottom-bg .tf-module.span12 > [class*="moduletable"],
    #bottom-bg .tf-module.col-md-12 > [class*="moduletable"] {
        float: left;
        width: 20% !important;
        max-width: 20% !important;
        flex: 0 0 20% !important;
        margin-left: 0 !important;
    }
    #bottom-bg .tf-module.span12::after,
    #bottom-bg .tf-module.col-md-12::after {
        content: "";
        display: table;
        clear: both;
    }
}

/* ---------- Anonymous wrappers inside emulated flex rows (2026-07-14) ----------
 * VenoShop's index.php nests columns inside classless divs (`<div class="">` in
 * #feedback-box-handler) and id-only divs (#foo-left-right in #footer). Under the
 * donor's BS2 block/float grid those wrappers were natural 100%-wide blocks; as
 * flex children of the bridge's .row/.row-fluid they auto-size from content and
 * the grid collapses (blog+testimonials stacked, payment icons under copyright).
 * Give them their BS2 full-width block behaviour back. SCOPED to the two known
 * sections — a global div[class=""] version broke the header (#cl-handler in
 * #st-navigation's row also has class="" and got forced to 100% width). */
#feedback-box-handler > .row > div[class=""],
#feedback-box-handler > .row-fluid > div[class=""],
#footer-line #foo-left-right {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
}

/* The col-md-* columns inside those wrappers sit in BLOCK context (BS5 col widths
 * apply, but BS5 cols don't float) — float them so pairs sit side-by-side like
 * the donor's span8/span4 and span6/span6 did. */
@media (min-width: 768px) {
    #feedback-box-handler div[class=""] > [class*="col-md-"],
    #foo-left-right > .tf-module[class*="col-md-"] {
        float: left;
    }
    #feedback-box-handler div[class=""]::after,
    #foo-left-right::after {
        content: "";
        display: table;
        clear: both;
    }
}

/* ---------- Header rows margin guard (2026-07-14, red-line fix) ----------
 * The mod_articles_latest override shipped a GLOBAL `.row { margin-top:10px !important }`
 * (scoped in the override same day, but belt-and-suspenders here): any margin-top on the
 * header rows pushes #top-handler from 105px to 125px, and since template.css anchors
 * header#top-handler:before at bottom:0/height:45px, the red border-top line ends up
 * buried mid-header instead of running under the top menu like the live donor. */
#top-handler .row,
#top-handler .row-fluid {
    margin-top: 0 !important;
}

/* ---------- Social-links bar spacing (Tim 2026-07-14) ---------- */
#socialModal {
    margin: 0px;
    padding: 10px 0px 10px 0px;
    text-align: center;
}

/* ---------- Mobile: main-menu toggle = BIG hamburger top-right (Tim 2026-07-14) ----------
 * Skill default mobile pattern: the primary hamburger (opens MAIN menu) sits big at the
 * top right of the header; the off-canvas/side-menu hamburger (.open-off-canvas) stays in
 * the utility icons row below. VenoShop's legacy mobile layout rendered #menupanel2 as a
 * full-width centered bar on its own row instead. Same element + same JS handler — only
 * repositioned/resized, anchored to the fixed #top-handler so it overlays the orange
 * logo banner (white icon for contrast; a#id.class outranks the inline #menupanel2 color). */
@media (max-width: 767px) {
    a#menupanel2.menupanel {
        position: absolute !important;
        top: 10px;
        right: 12px;
        width: 48px !important;
        height: 48px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: transparent !important;
        color: #ffffff !important;
        z-index: 1020;
    }
    a#menupanel2.menupanel i {
        font-size: 28px;
        line-height: 1;
    }
    /* Utility icons row centered as ONE row (Tim 2026-07-14): side-menu hamburger,
     * user, register, search AND the cart circle all middle-aligned together.
     * DOM: .row > #cl-handler (cart) + #menu (holds .open-off-canvas/#tpr-nav/
     * #search-position as floats). Flex-center the row; cart ordered last. */
    #st-navigation > .row {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px;
    }
    #st-navigation > .row > #cl-handler {
        width: auto !important;
        float: none !important;
        order: 2;
        margin: 0 !important;
        position: static !important;
    }
    #st-navigation > .row > #menu {
        width: auto !important;
        flex: 0 0 auto !important;
    }
    /* Slideshow height follows the image (Tim 2026-07-14): camera.js pins the
     * container at its 250px minHeight inline; the slide (878×415 demo assets)
     * scales to fit the 351px width at ~166px tall, leaving ~84px dead space
     * below (live donor instead center-crops — also not showing the full image).
     * aspect-ratio + height:auto !important overrides the inline height so the
     * container hugs the image exactly; overflow clamps the pre-init flash. */
    #ph-camera-slideshow,
    #ph-camera-slideshow .camera_wrap {
        height: auto !important;
        aspect-ratio: 878 / 415;
        overflow: hidden;
    }
    /* camera.js positions each slide img with margins computed for its assumed
     * 250px-tall cover crop (margin-left:-89px etc.), which shifts the image
     * left leaving a gap on the right once the container follows the true
     * aspect. Pin the img to the container box; cover = exact fit since the
     * container aspect matches the asset aspect. */
    #ph-camera-slideshow img {
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        top: 0 !important;
        left: 0 !important;
        object-fit: cover;
    }
    /* Slideshow section wrapper: template.css min-height:250px leaves ~84px of
     * dead space under the (now aspect-correct, 166px) slideshow (Tim 2026-07-14). */
    #slideshow-handler {
        min-height: 0 !important;
    }
    /* Promo tiles (#top-modules / #top-long style8 rows): the bridge's 15px span
     * padding applies at BOTH nesting levels (.tf-module.span12 wrapper AND the
     * .moduletable_style8.spanN tiles), rendering tiles 291px wide vs 351px for
     * neighbouring sections (Tim 2026-07-14: "looks skinnier than the content
     * below and above it"). Zero the horizontal padding on phones. */
    #top-modules .tft-modules .tf-module,
    #top-modules .tft-modules [class*="span"],
    #top-long .tft-modules .tf-module,
    #top-long .tft-modules [class*="span"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* The ext-section container lock pads .container-fluid 15px at ALL viewports,
     * but the live donor zeroes container-fluid side padding on phones (its inner
     * .container runs full-bleed with just its own 12px gutter). The extra 15px
     * made container-fluid-wrapped sections (#top-modules, #top-long) 30px
     * narrower than direct-container sections like #tabs (Tim 2026-07-14). */
    .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Product-carousel controls (Tim 2026-07-14): the owl prev/next arrows sat
     * ABOVE the cards eating vertical space — overlay them mid-left/mid-right of
     * the carousel instead (.owl-controls already overlays the carousel box). */
    .moduletable_products .owl-controls .owl-buttons div.owl-prev,
    .vmgroup_products .owl-controls .owl-buttons div.owl-prev {
        position: absolute !important;
        left: 0 !important;
        right: auto !important;
        top: 50% !important;
        transform: translateY(-50%);
        margin: 0 !important;
        z-index: 6;
    }
    .moduletable_products .owl-controls .owl-buttons div.owl-next,
    .vmgroup_products .owl-controls .owl-buttons div.owl-next {
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
        top: 50% !important;
        transform: translateY(-50%);
        margin: 0 !important;
        z-index: 6;
    }
    /* Tabs strip shows bare index digits ("0 1") on phones (the template swaps
     * tab titles for numbers via visible-phone spans) — meaningless UX; hide
     * them (Tim 2026-07-14). Note: leaves tab 1 content only on phones. */
    .tab_heading .visible-phone {
        display: none !important;
    }
}

/* Ensure bottom-bg h3 titles are readable (dark on light gray) */
#bottom-bg h3, #bottom-bg h4 {
    color: rgb(33, 33, 33) !important;
    background: transparent !important;
}
#bottom-bg a {
    color: rgb(33, 33, 33) !important;
}
#bottom-bg a:hover {
    text-decoration: underline;
}

/* ---------- CS-PATCH: jump-to-top-circle (Skill 33 canonical, 2026-07-16) ---------- */
.jump-to-top {
    position: fixed !important;
    right: 30px !important;
    bottom: 30px !important;
    z-index: 9998 !important;
    width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
}
.jump-to-top a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-direction: column !important;
    width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    text-align: center !important;
    text-decoration: none !important;
    font-size: 11px !important;
    line-height: 1 !important;
}
.jump-to-top a i {
    font-size: 16px !important;
    margin-bottom: 2px !important;
    line-height: 1 !important;
}
.jump-to-top a br { display: none !important; }

/* ---------- Mobile header fixes (2026-07-16 VenoShop per Tim feedback) ---------- */
@media (max-width: 767px) {
    /* Full-width orange banner (was 336/360, need 360/360) */
    #site-name-handler {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #top .inner-handler,
    #top .container-lr {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* Center the icons row (open-off-canvas + avatar + pencil + search + cart) */
    #st-navigation #cl-handler {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 20px !important;
        float: none !important;
    }
    #cl-handler > *,
    #cl-handler .cl-handler {
        margin: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
    }
    /* Cart icon vertical center inside orange circle */
    #cartpanel {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #cartpanel i,
    #cartpanel .fa,
    #cartpanel .fas,
    #cartpanel .fab {
        line-height: 1 !important;
        vertical-align: middle !important;
    }
}

/* ---------- Fancybox popup fit at mobile (Tim feedback 2026-07-16) ----------
 * Add-to-cart confirmation + any other fancybox popup on mobile inlines left:16px
 * from the fancybox JS, which overflows the right edge on 375px viewports.
 * Snap to left:0 + cap width so popups fit entirely on-screen. Applies to ALL
 * fancybox uses on mobile (add-to-cart, product image lightbox, etc.) since
 * mobile popups should all fit within viewport. */
@media (max-width: 767px) {
    #fancybox-wrap {
        left: 0 !important;
        right: 0 !important;
        max-width: 100vw !important;
    }
    #fancybox-outer,
    #fancybox-inner {
        max-width: 100% !important;
    }
}

/* ---------- Fix owl carousel collapse in classless flex row (Parallax page, 2026-07-16) ----------
 * .row-fluid { display: flex } + single child .moduletable / .moduletable_products / .moduletable_menu
 * without a .spanN class → child sizes to content (~15px), then owl carousel init reads that width
 * and generates 1px item widths. Force any non-span/non-col direct child of .row-fluid to fill full row. */
.row-fluid > .moduletable,
.row-fluid > .moduletable_products,
.row-fluid > .moduletable_menu,
.row-fluid > .moduletable_style1,
.row-fluid > .moduletable_style2,
.row-fluid > .moduletable_style3,
.row-fluid > .moduletable_style4,
.row-fluid > .moduletable_style5,
.row-fluid > .moduletable_style6,
.row-fluid > .moduletable_style7,
.row-fluid > .moduletable_style8 {
    flex: 1 1 100% !important;
    min-width: 0 !important;
}

/* ============================================================
   LOCAL PIN (VenoShop) — standards gap-fillers 2026-07-16
   (mobile-header pattern itself was already implemented + Tim-approved
   2026-07-14 in this pin: menupanel2 big top-right, centered icon row,
   tab index-numbers hidden. Adding ONLY what that session lacked.)
   ============================================================ */

/* cart: glyph dead-center in a true 44px circle (both breakpoints) */
a#cartpanel {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 50%;
    box-sizing: border-box;
}
a#cartpanel i { display: block; font-size: 20px; line-height: 1; }

@media (max-width: 767px) {
    /* search: full-width panel beneath the header */
    #search-position-handler { position: static !important; }
    #search-position #searchpanel {
        position: absolute !important;
        top: 100%;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: auto !important;
        float: none;
        padding: 10px 14px;
        box-sizing: border-box;
        background: #353535;
        z-index: 9999;
        overflow: visible;
    }
    #search-position #searchpanel .search,
    #search-position #searchpanel .finder {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        text-align: left;
    }
    #search-position #searchpanel input.inputbox {
        flex: 1 1 auto;
        width: auto !important;
        height: 30px;
        box-sizing: border-box;
    }
}

/* slideshow arrows: persistent, donor artwork (camera css never shipped arrow art) */
.camera_prev, .camera_next {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: 42px !important;
    height: 46px !important;
    background-color: rgba(0, 0, 0, 0.30) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    border-radius: 4px;
    cursor: pointer;
}
.camera_prev { background-image: url(../images/arrow-prev.png) !important; }
.camera_next { background-image: url(../images/arrow-next.png) !important; }
.camera_prev > span, .camera_next > span { display: none !important; }

/* gap-filler tune: BOTH search wrappers static so the panel anchors to #top */
@media (max-width: 767px) {
    #search-position { position: static !important; float: none !important; }
}

/* gap-filler tune 2: .main-menu-handler was position:relative (209px box) — it became
   the search panel containing block. Static at mobile; #top anchors the panel. */
@media (max-width: 767px) {
    #top .main-menu-handler { position: static !important; }
    #top { position: relative; }
}

/* ============================================================
   LOCAL PIN (VenoShop) — mobile feedback round (Tim 2026-07-16)
   ============================================================ */

/* drawer expand-toggles: glyph dead-center in the white circle */
ul.menucanvas li .btn-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    line-height: 1 !important;
    padding: 0 !important;
}
ul.menucanvas li .btn-toggle i { display: block; line-height: 1; }

/* modal centering safety (QStore pattern) — pairs with the completed Phase 6 wrappers */
#LoginForm.modal { position: fixed !important; }
#LoginForm.modal.show {
    display: block !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    overflow-y: auto;
}
#LoginForm.modal .modal-dialog {
    margin: 1.75rem auto !important;
    max-width: 500px !important;
    width: calc(100% - 24px);
    left: auto !important;
    right: auto !important;
    transform: none !important;
}

@media (max-width: 767px) {
    /* kill the dead space above the tabbed product slider (mobile only) */
    .vmgroup_products.product-sl-handler { margin-top: 0 !important; }
    #tabs-1 .nav-tabs { padding: 0 !important; margin: 0 !important; }

    /* product-slider arrows: visible left/right of the slider so swipe is
       discoverable (desktop keeps its top-right pair) */
    .moduletable_products .owl-carousel { position: relative; }
    .owl-theme .owl-controls .owl-buttons div.owl-prev,
    .owl-theme .owl-controls .owl-buttons div.owl-next {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: absolute !important;
        top: 40%;
        margin-top: 0 !important;
        width: 34px !important;
        height: 34px !important;
        background: #ffffff !important;
        border: 1px solid #eaeaea !important;
        border-radius: 50%;
        overflow: hidden;
        font-size: 0;
        z-index: 10;
    }
    .owl-theme .owl-controls .owl-buttons div.owl-prev { left: 2px !important; right: auto !important; }
    .owl-theme .owl-controls .owl-buttons div.owl-next { right: 2px !important; left: auto !important; }
    .owl-theme .owl-controls .owl-buttons div.owl-prev:before,
    .owl-theme .owl-controls .owl-buttons div.owl-next:before { font-size: 16px; line-height: 1; }
}

/* owl arrows: donor :before carries a fixed 30x30 box w/ 16px line-height ->
   glyph rides top-left. Shrink pseudo to glyph size so flex centering lands. */
@media (max-width: 767px) {
    .owl-theme .owl-controls .owl-buttons div.owl-prev:before,
    .owl-theme .owl-controls .owl-buttons div.owl-next:before {
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        font-size: 16px;
        line-height: 1 !important;
        display: block;
        position: static !important;
    }
}

/* gradfix-desc 2026-10-14 */
/* Category description: no side padding (template-managed space; top/bottom kept). */
.category_description { padding-left: 0 !important; padding-right: 0 !important; }

/* =====================================================================
   CS-PATCH: login-fields-reach-the-ios-threshold  2026-10-19 (canonical rev .132)
   iOS Safari zooms any text field under 16px when it gets focus and does not zoom back. The 2026-09-27 block covers the
   cart's own login/coupon/quantity fields only; the Joomla login page, the login module and the registration, profile
   and reset forms kept the donor's 11-15px. MEASURED @375 on the 68 released demos: 45 rendered #username/#password
   at 11-15px. Phones only; buttons are left alone (iOS does not zoom them).
   ===================================================================== */
@media (max-width: 767px) {
    html body :is(#username, #password, #modlgn-username, #modlgn-passwd),
    html body :is(form.mod-login, form[id^="login-form"], form[class*="com-users-"], #member-registration, #member-profile, #user-registration)
        :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input:not([type]), select, textarea) {
        font-size: 16px !important;
    }
}
/* /CS-PATCH: login-fields-reach-the-ios-threshold */

/* =====================================================================
   CS-PATCH: venoshop-std-20261103  (released-template standard, 2026-11-03; Tim's Flexi
   full review = the recipe: modern icons, login fields, form field heights)
   ===================================================================== */
/* login: Joomla's show-password eye sits INSIDE the password field (login page, registration, account edit); the field takes the
   whole group width, the same as the username field, and the eye is a plain accent glyph over its right end (Flexi recipe) */
.input-group:has(> .input-password-toggle) { position: relative !important; flex-wrap: nowrap !important; }
.input-group:has(> .input-password-toggle) > input:not(#cs-std1):not(#cs-std2) { flex: 1 1 100% !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important; padding-right: 34px !important; border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; }
.input-group > .input-password-toggle:not(#cs-std1):not(#cs-std2) { position: absolute !important; top: 1px !important; right: 1px !important; bottom: 1px !important; z-index: 5; display: flex !important; align-items: center; justify-content: center; min-width: 0 !important; width: 32px !important; height: auto !important; padding: 0 !important; margin: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: rgb(237, 77, 41) !important; }
.input-group > .input-password-toggle:hover, .input-group > .input-password-toggle:focus-visible { background: transparent !important; color: rgb(237, 77, 41) !important; opacity: .75; }
@media (min-width: 768px) { .com-users-login__form .password-group .input-group:not(#cs-std1):not(#cs-std2) { width: 498px !important; max-width: 100% !important; } }   /* the username field is 498px, the password group was 830px */
@media (max-width: 767px) { .com-users-login__form #username:not(#cs-std1):not(#cs-std2), .com-users-login__form .password-group .input-group:not(#cs-std1):not(#cs-std2), .mod-login input[name=username]:not(#cs-std1):not(#cs-std2), .mod-login .input-group:not(#cs-std1):not(#cs-std2), #login-form input[name=username]:not(#cs-std1):not(#cs-std2), #login-form input[type=password]:not(#cs-std1):not(#cs-std2) { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } #login-form .cs-eye-wrap:not(#cs-std1):not(#cs-std2) { display: block !important; width: 100% !important; } }
@media (max-width: 767px) { :is(.userdata, .com-form-login, #com-form-login, .com-form-registration, #LoginForm) .cs-eye-wrap:not(#cs-std1):not(#cs-std2) { display: block !important; width: 100% !important; max-width: 100% !important; } :is(.userdata, .com-form-login, #com-form-login, .com-form-registration, #LoginForm) input[type=checkbox]:not(#cs-std1):not(#cs-std2) { width: auto !important; flex: 0 0 auto !important; } }
#com-form-login-remember:has(> input[type=submit], > button[type=submit], > input.default) { display: flex !important; flex-wrap: wrap !important; align-items: center !important; column-gap: 8px; row-gap: 10px; } #com-form-login-remember:has(> input[type=submit], > button[type=submit], > input.default) > input[type=checkbox] { order: 1; margin: 0 !important; } #com-form-login-remember:has(> input[type=submit], > button[type=submit], > input.default) > label { order: 2; margin: 0 !important; } #com-form-login-remember:has(> input[type=submit], > button[type=submit], > input.default)::before { content: ""; order: 3; flex: 0 0 100%; height: 0; } #com-form-login-remember:has(> input[type=submit], > button[type=submit], > input.default) > input[type=submit], #com-form-login-remember:has(> input[type=submit], > button[type=submit], > input.default) > button[type=submit], #com-form-login-remember:has(> input[type=submit], > button[type=submit], > input.default) > input.default { order: 4; float: none !important; }
.input-group:has(> .input-password-toggle) > input:not(#cs-std1):not(#cs-std2) { margin-top: 0 !important; margin-bottom: 0 !important; }
@media (min-width: 768px) { #com-form-login:not(:has(#com-form-login-remember > input[type=submit], #com-form-login-remember > input.default)) input[type=checkbox]:not(#cs-std1):not(#cs-std2) { margin-left: 12px !important; } }
.cs-pw-wrap { position: relative !important; }
.cs-pw-wrap > input:not(#cs-std1):not(#cs-std2) { flex: 1 1 auto !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important; padding-right: 32px !important; }
.cs-pw-wrap > .cs-pw-toggle:not(#cs-std1):not(#cs-std2) { position: absolute !important; right: 6px !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; z-index: 5; background: transparent !important; border: 0 !important; }
/* form fields: every field of a form the same height, drop-downs included (registration, billing details, login) */
:is(form#com-form-login:has(input[name*=email i], input[type=password]), form.com-form-login:has(input[name*=email i], input[type=password]), form#adminForm:has(input[name*=email i], input[type=password]), form.adminForm:has(input[name*=email i], input[type=password])) input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=hidden]):not([type=image]):not([type=file]):not([type=reset]):not([name*=quantity]), :is(form#com-form-login:has(input[name*=email i], input[type=password]), form.com-form-login:has(input[name*=email i], input[type=password]), form#adminForm:has(input[name*=email i], input[type=password]), form.adminForm:has(input[name*=email i], input[type=password])) select { height: 37px !important; min-height: 37px !important; box-sizing: border-box !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: normal !important; }
@media (min-width: 768px) { .com-users-login__form .password-group .input-group > input:not(#cs-std1):not(#cs-std2) { height: 37px !important; } }   /* the username field is 37px high */
/* gate fixes (rendered gate, Susan's Rapid + Ultimo grad-test checks 2026-11-02): footer contrast, checkbox gaps, VM login row, owl dots, phone menu bars */
div.span6 > div.row > div.col-md-9 > p.mod-articles-category-readmore > a.mod-articles-category-title.button { color: rgb(25, 25, 25) !important; }   /* was rgb(255, 255, 255) on rgb(237, 77, 41) ("Read More") */
#remember { margin-right: 8px !important; }   /* was 3px from its label text */
/* /CS-PATCH: venoshop-std-20261103 */

/* CS-PATCH: venoshop-rel-20261106  (rendered-check fixes, rules copied from canonical .140 .141 .146 .156 and the article-info patch, not a resync) */
/* The Sign in with a passkey icon has no size of its own and filled the column */
.plg_system_webauthn_login_button svg { width: 1.25em !important; height: 1.25em !important; }
.breadcrumb > li.breadcrumb-item:not(:has(.divider)) + li.breadcrumb-item:not(:has(.divider))::before { content: var(--bs-breadcrumb-divider, "/") !important; display: inline-block; float: none; padding: 0 .4em; }
.breadcrumb > li.breadcrumb-item:not(:has(.divider)) + li.breadcrumb-item:not(:has(.divider)) { padding-left: 0; }
ul.view-as:not(:has(li)) { display: none !important; }
.input-group > .input-password-toggle, .password-group .input-group > button { margin: 0 !important; }
[class^="icon-"], [class*=" icon-"] { background-image: none !important; }

/* base: give every Joomla icon-* the FA6 face + metrics */
[class^="icon-"]::before,
[class*=" icon-"]::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-style: normal;
  font-variant: normal;
  line-height: 1;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
}

/* brands need the 400 weight face */
.icon-facebook::before, .icon-twitter::before, .icon-youtube::before,
.icon-linkedin::before, .icon-instagram::before {
  font-family: "Font Awesome 6 Brands";
  font-weight: 400;
}

/* fixed-width helper, same contract as fa-fw */
.icon-fw { display: inline-block; width: 1.25em; text-align: center; }

/* --- the glyphs Joomla core emits in FRONT-END views --------------------- */
/* CS 2026-08-06 (promoted from Energize, Tim-approved, FINAL/3rd pass):
   FontAwesome's eye has NO dead-centre pupil (SOLID glances up-left; REGULAR has
   an off-centre crescent), and the white-eye/green-hole SVG read as too subtle.
   Replaced with an explicit two-colour background-image SVG: a WHITE almond eye
   with a SOLID DARK pupil circle at the EXACT centre (cx=cy=12 of a 0 0 24 24
   box). Unmistakably centred; eye-slash adds a diagonal bar. Colours are fixed
   (works on the toggle's coloured button); other icon-* stay on the FA6 map. */
.icon-eye::before, .icon-eye-open::before,
.icon-eye-slash::before, .icon-eye-close::before {
  content: "" !important; display: inline-block;
  width: 1.15em; height: 1.15em; vertical-align: -0.2em;
  background-color: transparent;
  -webkit-mask: none; mask: none;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.icon-eye::before, .icon-eye-open::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%3E%3Cpath%20fill=%27%23fff%27%20d=%27M12%204.5C5.5%204.5%201.3%209.8%200%2012c1.3%202.2%205.5%207.5%2012%207.5S22.7%2014.2%2024%2012C22.7%209.8%2018.5%204.5%2012%204.5Z%27/%3E%3Ccircle%20cx=%2712%27%20cy=%2712%27%20r=%273.3%27%20fill=%27%23324%27/%3E%3C/svg%3E");
}
.icon-eye-slash::before, .icon-eye-close::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2024%2024%27%3E%3Cpath%20fill=%27%23fff%27%20d=%27M12%204.5C5.5%204.5%201.3%209.8%200%2012c1.3%202.2%205.5%207.5%2012%207.5S22.7%2014.2%2024%2012C22.7%209.8%2018.5%204.5%2012%204.5Z%27/%3E%3Ccircle%20cx=%2712%27%20cy=%2712%27%20r=%273.3%27%20fill=%27%23324%27/%3E%3Crect%20x=%271%27%20y=%2711%27%20width=%2722%27%20height=%272.2%27%20rx=%271.1%27%20fill=%27%23324%27%20transform=%27rotate(45%2012%2012)%27/%3E%3C/svg%3E");
}
.icon-user::before              { content: "\f007"; }
.icon-lock::before              { content: "\f023"; }
.icon-unlock::before            { content: "\f09c"; }
.icon-envelope::before,
.icon-mail::before              { content: "\f0e0"; }
.icon-search::before            { content: "\f002"; }
.icon-calendar::before          { content: "\f133"; }
.icon-checkmark::before,
.icon-check::before             { content: "\f00c"; }
.icon-cancel::before,
.icon-remove::before,
.icon-delete::before            { content: "\f00d"; }
.icon-warning::before,
.icon-exclamation::before       { content: "\f071"; }
.icon-info::before,
.icon-info-circle::before       { content: "\f05a"; }
.icon-question::before          { content: "\f059"; }
.icon-star::before              { content: "\f005"; }
.icon-print::before             { content: "\f02f"; }
.icon-pencil::before,
.icon-edit::before              { content: "\f303"; }
.icon-plus::before              { content: "\f067"; }
.icon-minus::before             { content: "\f068"; }
.icon-chevron-left::before,
.icon-arrow-left::before        { content: "\f053"; }
.icon-chevron-right::before,
.icon-arrow-right::before       { content: "\f054"; }
.icon-chevron-up::before,
.icon-arrow-up::before          { content: "\f077"; }
.icon-chevron-down::before,
.icon-arrow-down::before        { content: "\f078"; }
.icon-list::before              { content: "\f03a"; }
.icon-home::before              { content: "\f015"; }
/* .141 (2026-10-20, grad sprint Lucid/HighLevel/Inspire): J5 article info + contact views. The donors' dead IcoMoon
   maps gave .icon-address the letter "p" and the others nothing; content is !important so those maps cannot win. */
.icon-folder-open::before       { content: "\f07c" !important; }
.icon-folder::before,
.icon-folder-close::before      { content: "\f07b" !important; }
.icon-address::before           { content: "\f3c5" !important; }
.icon-phone::before             { content: "\f095" !important; }
.icon-fax::before               { content: "\f1ac" !important; }
.icon-mobile::before            { content: "\f3cd" !important; }
.icon-tag::before               { content: "\f02b" !important; }
.icon-tags::before              { content: "\f02c" !important; }
.icon-search-plus::before        { content: "\f00e" !important; }
/* .141: the donor BS2 select{height:30px} beat BS5 .form-select padding and cut the value off (Ignite/Lucid "Display #") */
select.form-select:not([multiple]):not([size]) { height: auto; }
.icon-cog::before,
.icon-options::before           { content: "\f013"; }
/* Article details wrap on phones instead of running off the screen */
dl.article-info { flex-wrap: wrap; row-gap: 2px; column-gap: 10px; }
dl.article-info > dd, dl.article-info > dt { min-width: 0; }
/* Phones: the product page's own buy bar is in flow, full width; carousels keep their cards */
@media (max-width: 767px) {
  .productdetails-view .addtocart-area:not(.owl-item .addtocart-area):not(.vmgroup_products .addtocart-area) .addtocart-bar { float: none !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
}
/* Phones: one side inset only. The content column's padding stacked on the page wrapper's 20px */
@media (max-width: 767px) { #main-content-handler > .row > .span9.rs-cc { padding-left: 0 !important; padding-right: 0 !important; } }
/* Cart prices stay on one line (canonical .157 .158) */
@media (min-width: 768px) {
  #cart-view table.cart-summary > tbody > tr > th, #cart-view table.cart-summary > tbody > tr > td,
  #cart-view table.cart-summary > thead > tr > th, #cart-view table.cart-summary > tr > th, #cart-view table.cart-summary > tr > td { box-sizing: content-box; }
}
span[class^="Price"], span[class*=" Price"] { white-space: nowrap; }
/* Added-to-cart pop-up: real buttons in a box that fits them (cs-popup-fit, corrected form from Rapid). Pop-ups with a frame keep their own size */
#fancybox-wrap:not(:has(#fancybox-frame)), #fancybox-outer:not(:has(#fancybox-frame)), #fancybox-content:not(:has(#fancybox-frame)) { width: auto !important; height: auto !important; }
#fancybox-content:not(:has(#fancybox-frame)) { min-width: 300px; max-width: min(420px, calc(100vw - 40px)); overflow: visible !important; box-sizing: border-box; }
@media (max-width: 767px) { #fancybox-content:not(:has(#fancybox-frame)) { min-width: 0 !important; width: min(300px, calc(100vw - 60px)) !important; max-width: none !important; } }
#fancybox-content > div { display: flex !important; flex-direction: column; align-items: stretch; width: auto !important; height: auto !important; box-sizing: border-box; padding: 4px 6px 8px; overflow: visible !important; }
#fancybox-content > div > h4 { order: -1; clear: both; margin: 2px 0 12px; font-size: 15px; line-height: 1.45; }
#fancybox-content .vm-btn { float: none !important; display: block; margin: 0 0 8px; padding: 10px 14px; border-radius: 0; font-size: 13px; font-weight: 700; text-align: center; text-decoration: none; box-sizing: border-box; }
#fancybox-content .vm-btn:last-of-type { margin-bottom: 0; }
#fancybox-content .vm-btn-secondary { background: #fff; color: var(--cs-accent, #ed4d29) !important; border: 2px solid var(--cs-accent, #ed4d29); }
#fancybox-content .vm-btn-secondary:hover { background: var(--cs-accent, #ed4d29); color: #ffffff !important; }
#fancybox-content .vm-btn-primary { background: var(--cs-accent, #ed4d29); color: #ffffff !important; border: 2px solid var(--cs-accent, #ed4d29); }
/* Cart page shipping option lines up with its label */
input#shipment_id_1 { vertical-align: middle; margin-top: 3px; margin-right: 6px; }
/* The parallax chrome's hidden image must not take taps meant for the links under it */
img.nd-image { pointer-events: none; }
/* Checkout button in the open cart panel (Uniqua port) */
#vmCartModule div#cart-panel2 { height: auto !important; max-height: min(560px, calc(100vh - 110px)) !important; overflow-y: auto; }
.vmCartModule .cs-cart-checkout-wrap { clear: both; padding: 12px 0 4px; }
.vmCartModule a.cs-cart-checkout { display: block; box-sizing: border-box; width: 100%; min-height: 44px; padding: 12px 16px; background: var(--cs-accent, #4274dc); color: #ffffff !important; text-align: center; font-weight: 700; text-transform: uppercase; text-decoration: none; }
.vmCartModule a.cs-cart-checkout:hover, .vmCartModule a.cs-cart-checkout:focus { filter: brightness(.9); }
/* /CS-PATCH: venoshop-rel-20261106 */