/* 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: 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: echo-std-20261103  (released-template standard, 2026-11-03; Tim's Flexi
   full review = the recipe: modern icons, login fields, form field heights)
   ===================================================================== */
/* icons: Font Awesome 6 (the set the newest releases use) in place of the old bitmap icons, same glyph on desktop and phones */
#vmCartModule div > #cartpanel:not(#cs-std1):not(#cs-std2) { background-image: none !important; } #vmCartModule div > #cartpanel:not(#cs-std1):not(#cs-std2)::before { content: "\f07a" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; font-style: normal; font-size: 16px !important; line-height: 1 !important; background: none !important; position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; display: flex !important; align-items: center; justify-content: center; text-indent: 0 !important; color: #ffffff !important; pointer-events: none; }
#search-position form > div.search > input.button:not(#cs-std1):not(#cs-std2) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23ffffff' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: 50% 50% !important; background-size: auto 14px !important; }   /* Font Awesome in place of search-icon.png (#ffffff) */
@media (max-width: 767px) { #vmCartModule div > #cartpanel:not(#cs-std1):not(#cs-std2) { background-image: none !important; position: relative; } #vmCartModule div > #cartpanel:not(#cs-std1):not(#cs-std2)::before { content: "\f07a" !important; font-family: "Font Awesome 6 Free" !important; font-weight: 900 !important; font-style: normal; font-size: 20px !important; line-height: 1 !important; background: none !important; position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; display: flex !important; align-items: center; justify-content: center; text-indent: 0 !important; color: rgb(227, 96, 96) !important; pointer-events: none; } }
@media (max-width: 767px) { div.module-content > div.mod-custom.custom > p > a > img { display: none !important; } div.module-content > div.mod-custom.custom > p > a::before { content: "\f3c5"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-style: normal; font-size: 13px; margin-right: 6px; display: inline-block; text-indent: 0; } }   /* menu item image icon-1.png (alt "Free Shipping") */
/* 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: 3px !important; border-bottom-right-radius: 3px !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(227, 96, 96) !important; }
.input-group > .input-password-toggle:hover, .input-group > .input-password-toggle:focus-visible { background: transparent !important; color: rgb(227, 96, 96) !important; opacity: .75; }
@media (min-width: 768px) { .com-users-login__form .password-group .input-group:not(#cs-std1):not(#cs-std2) { width: 576px !important; max-width: 100% !important; } }   /* the username field is 576px, the password group was 960px */
@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: 24px !important; min-height: 24px !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: 27px !important; } }   /* the username field is 27px 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.mod-custom.custom > div.row-fluid > div.span6 > p > a { color: rgb(191, 81, 81) !important; }   /* was rgb(227, 96, 96) on rgb(255, 255, 255) ("mollit anim id est") */
div.moduletable_empty > div.module-content > div.mod-custom.custom > p > a { color: rgb(117, 117, 117) !important; }   /* was rgb(127, 127, 127) on rgb(255, 255, 255) ("shop@contactus.com") */
div.module-content > ul.menu > li > a > span.link-no-image { color: rgb(117, 117, 117) !important; }   /* was rgb(127, 127, 127) on rgb(255, 255, 255) ("Contact Us") */
/* page width: 1170px at 1200px and up, like our other current templates (Tim 2026-10-23: 1170 is the desktop frame for every
   template). Bootstrap 5's own container grows to 1320px at 1400px. */
@media (min-width: 1200px) { .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl { max-width: 1170px !important; } }
/* /CS-PATCH: echo-std-20261103 */