/* cs-fixes.css - fleet fix pack cut from canonical bs2-bs5-bridge.css 2026-10-16.130 (mkfixes.py, 2026-10-16).
   Released templates that are not on the canonical bridge get these blocks verbatim; template-specific blocks follow. */

/* =====================================================================
   CS-PATCH: cart-count-badge-desktop  2026-10-16 (rev .125, Tim on GliseStore/Furniture: the desktop basket showed a
   number only on mouse-over; "that number should always show ... make that a thing for all templates with carts")
   cs-mobile-generic.js puts span.cs-cart-badge-d inside the cart's icon link (a.cs-badge-host) whenever the cart holds
   1 or more. Shown from 768 up on the icon's top-right corner; the donor's own hover-only count bubble inside the same
   link is hidden while the badge shows (no double count). Phones keep the chip badge (cart-count-badge).
   ===================================================================== */
.cs-cart-badge-d { display: none; }
@media (min-width: 768px) {
    .vmCartModule a.cs-badge-host { position: relative !important; overflow: visible !important; }
    .vmCartModule a.cs-badge-host > .cs-cart-badge-d {
        display: flex; position: absolute; top: -8px; right: -10px; z-index: 5;
        min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box;
        align-items: center; justify-content: center;
        border-radius: 10px; background: #d32f2f; color: #fff;
        font: 700 12px/1 Arial, Helvetica, sans-serif; text-indent: 0; letter-spacing: 0; text-transform: none;
        box-shadow: 0 0 0 2px #fff; pointer-events: none;
    }
    .vmCartModule a.cs-badge-host.cs-has-n .products-number { display: none !important; }
}
/* /CS-PATCH: cart-count-badge-desktop */

/* =====================================================================
   CS-PATCH: password-toggle-inline  2026-10-16 (rev .126; found on GliseStore at Tim's grad test, then measured on
   Furniture, HyperShop, FlatStore, Flexo, Serenity, SparkStore: all wrapped)
   Joomla's login/registration password field is a BS5 .input-group (input + .input-password-toggle eye). Donor input
   rules (width:100%) made the group wrap, so the eye dropped onto its own line under the field. Keep them on one line.
   ===================================================================== */
.input-group:has(> .input-password-toggle) { flex-wrap: nowrap !important; }
.input-group:has(> .input-password-toggle) > input.form-control,
.input-group:has(> .input-password-toggle) > input { flex: 1 1 auto !important; width: 1% !important; min-width: 0 !important; max-width: none !important; }
.input-group:has(> .input-password-toggle) > .input-password-toggle { flex: 0 0 auto !important; width: auto !important; }
/* /CS-PATCH: password-toggle-inline */

/* =====================================================================
   CS-PATCH: article-pager-ends  2026-10-16 (rev .128; Tim's FlatStore grad test: "the previous and next buttons on
   articles are squished together ... next should be to the far right")
   Joomla 5's core pager is `nav.pagenavigation > span.pagination > a.previous + a.next`. Cassiopeia spreads it; the
   donors never had that CSS, so both buttons sat at the left edge 4px apart. MEASURED with pager.py @1400: FlatStore
   live + stage Next 59-73px from the left of an 848-870px column; Serenity the same. Same on the phone.
   Next takes margin-left:auto so it also goes right when it is the only button (first article).
   ===================================================================== */
.pagenavigation .pagination { display: flex !important; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; gap: 8px; }
.pagenavigation .pagination > .next { margin-left: auto !important; }
/* /CS-PATCH: article-pager-ends */

/* =====================================================================
   CS-PATCH: adopted-cart-panel-ink  2026-10-16 (rev .127; Tim's HyperShop grad test: "clicking on the cart button brings
   up an empty box ... when something is in the cart it just has the name of the product")
   The phone utility row paints every chip `color: var(--cs-accent-ink)` (white), the adopted cart included, and the
   cart module's own drop-down panel lives INSIDE that chip. A donor panel with no colour of its own inherited the white:
   quantity, price, "1 product", "Total" and "0 products" at 1.00:1 on the white panel - only the product-name link
   (its own colour) showed. The 2026-09-12 Flexi fix stopped the glyph rule reaching in, but not plain inheritance.
   MEASURED with cartink.py @375: HyperShop stage, Furniture, Avant - invisible; 25 other VMT demos clean.
   :where() keeps this at (0,1,0) and it carries no !important, so any donor rule that colours its panel still wins;
   it only replaces the inherited chip ink.
   ===================================================================== */
@media (max-width: 767px) {
    /* .130: OUTERMOST panel only, at zero specificity. .127 also matched the .cartpanel INSIDE FlatStore's dark .panel2,
       whose donor colour (rgb 147 on rgb 54) it then overrode with #333 - "Cart empty" at 1.05:1. Any donor rule now wins,
       and an inner panel inherits from its outer one as the donor intended. */
    :where(#cs-utility-row > .cs-adopted-cart) :where(.panel1, .panel2, .cartpanel:not(:is(.panel1, .panel2) *)) { color: var(--cs-panel-ink, #333); }
}
/* /CS-PATCH: adopted-cart-panel-ink */

/* CS-PATCH: active-phone-addtocart-row-2026-10-16 */
/* 2026-10-16 (Tim, Furniture grad test: on phones the quantity number, Add-to-cart "+" and up/down controls sat on top of
   the "Ask a question about this product" button). The add-to-cart bar is a zero-height box whose three round controls
   are absolutely positioned, so the next button flowed underneath them. Phones: the bar takes its own 50px row. */
@media (max-width: 767px) {
  .productdetails-view .addtocart-bar { height: 50px !important; min-height: 50px !important; margin: 0 0 18px !important; }
}
/* /CS-PATCH: active-phone-addtocart-row-2026-10-16 */

/* =====================================================================
   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: activeshopping-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: 2px !important; border-bottom-right-radius: 2px !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(207, 43, 57) !important; }
.input-group > .input-password-toggle:hover, .input-group > .input-password-toggle:focus-visible { background: transparent !important; color: rgb(207, 43, 57) !important; opacity: .75; }
@media (min-width: 768px) { .com-users-login__form .password-group .input-group:not(#cs-std1):not(#cs-std2) { width: 521px !important; max-width: 100% !important; } }   /* the username field is 521px, the password group was 868px */
@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; }
@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: 40px !important; min-height: 40px !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: 40px !important; } }   /* the username field is 40px 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.module-content-handler > div.module-content > div.custom > p > a { color: rgb(151, 154, 157) !important; }   /* was rgb(147, 150, 153) on rgb(47, 49, 51) ("sales@example.com") */
div.moduletable.span6 > div.module-content-handler > div.module-content > div.custom > p { color: rgb(151, 154, 157) !important; }   /* was rgb(147, 150, 153) on rgb(47, 49, 51) ("Nice Ave. 78/1 6M 78A Lo") */
div.module-content-handler > div.module-content > div.custom > h4 > em { color: rgb(151, 154, 157) !important; }   /* was rgb(147, 150, 153) on rgb(47, 49, 51) ("www.ActiveShoppingTempla") */
div.moduletable.span3 > div.module-content-handler > div.module-content > div.custom > p { color: rgb(151, 154, 157) !important; }   /* was rgb(147, 150, 153) on rgb(47, 49, 51) ("Call Free 1 800 234 567 ") */
#footer-line > div.row-fluid > div.span12.tf-module > div.custom > p { color: rgb(151, 154, 157) !important; }   /* was rgb(147, 150, 153) on rgb(47, 49, 51) ("Copyright  2026 your cop") */
#remember { margin-right: 8px !important; }   /* was 1px from its label text */
/* login: Joomla's show-password eye was drawn from the old Bootstrap 2 glyph sprite (css/img/glyphicons-halflings.png, a wrong glyph at 14px 14px); Font Awesome eye / eye-slash instead */
.input-password-toggle .icon-eye, .input-password-toggle .icon-eye-slash, .input-password-toggle [class*="icon-eye"] { background-image: none !important; width: auto !important; height: auto !important; display: inline-block !important; }
.input-password-toggle .icon-eye::before { content: "\f06e" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; font-style: normal; }
.input-password-toggle .icon-eye-slash::before { content: "\f070" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; font-style: normal; }
/* /CS-PATCH: activeshopping-std-20261103 */