/* ===================================================================== Golf Cart Battery Source v1.0.4: mobile fixes + CSS audit (see CSS-AUDIT.md) Loaded after main.css and v104.css. Sections: 1 Anchors / focus 2 Compact mobile header 3 Notices 4 Product meta 5 Product tabs 6 Add-to-cart / variations 7 WooCommerce defaults we hadn't covered 8 Tap targets + small text 9 Filters 10 Wide pages ===================================================================== */ /* ---------- 1. Anchors / focus ---------- */ html { scroll-padding-top: 172px; } @media (max-width: 860px) { html { scroll-padding-top: 84px; } } :where(a, button, input, select, textarea, summary, [role="button"]):focus-visible { outline: 3px solid var(--gcbs-green-400); outline-offset: 2px; } .gcbs-header :where(a, button):focus-visible, .gcbs-footer :where(a, button):focus-visible { outline-color: var(--gcbs-green-300); } /* Elements focused by script for screen readers (WooCommerce notices, tabindex=-1) never draw a ring/border. */ [tabindex="-1"]:focus, .woocommerce-message:focus, .woocommerce-info:focus, .woocommerce-error:focus, .woocommerce-notices-wrapper:focus, .wc-block-components-notice-banner:focus { outline: none !important; box-shadow: 0 4px 14px rgba(24,33,42,.06); } /* ---------- 2. Compact mobile header ---------- */ @media (max-width: 860px) { .gcbs-header { position: relative !important; top: auto !important; } body.gcbs-hdr-compact .gcbs-header { height: var(--gcbs-hdr-h, auto); } body.gcbs-hdr-compact .gcbs-header__main { position: fixed; top: 0; left: 0; right: 0; z-index: 210; background: #fff; border-bottom: 1px solid var(--gcbs-border); box-shadow: 0 4px 14px rgba(24,33,42,.12); animation: gcbs-hdr-in .18s ease-out; } body.gcbs-hdr-compact .gcbs-header__main .gcbs-search--header { display: none !important; } body.gcbs-hdr-compact .gcbs-header__main-inner { padding: .4rem 0; } body.gcbs-hdr-compact .gcbs-logo, body.gcbs-hdr-compact .gcbs-brand img { max-height: 34px !important; } .gcbs-cart-link, .gcbs-menu-btn, .gcbs-nav-toggle { min-height: 44px !important; min-width: 44px; justify-content: center; } .gcbs-brand__link--logo { min-height: 44px; display: inline-flex !important; align-items: center; } } @media (min-width: 601px) and (max-width: 782px) { body.admin-bar.gcbs-hdr-compact .gcbs-header__main { top: 46px; } } @media (min-width: 783px) and (max-width: 860px) { body.admin-bar.gcbs-hdr-compact .gcbs-header__main { top: 32px; } } @keyframes gcbs-hdr-in { from { transform: translateY(-100%); } to { transform: none; } } @media (prefers-reduced-motion: reduce) { body.gcbs-hdr-compact .gcbs-header__main { animation: none; } } /* Mini-cart badge: readable, never collapses, pops when fragments update it */ .gcbs-cart-link__count { font-size: .75rem !important; min-width: 1.4rem; line-height: 1.25rem; padding: 0 .35rem !important; background: var(--gcbs-accent) !important; } /* ---------- 3. Notices (message / info / error) ---------- */ .woocommerce-notices-wrapper:empty { display: none; } .woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews, .woocommerce .woocommerce-message, .woocommerce .woocommerce-info, .woocommerce .woocommerce-error { position: relative; display: flex !important; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin: 0 0 1.25rem !important; padding: 1rem 1.1rem 1rem 3.1rem !important; list-style: none !important; background: #fff !important; color: var(--gcbs-body-text) !important; border: 1px solid var(--gcbs-border) !important; border-left: 5px solid var(--gcbs-green) !important; border-radius: 10px !important; outline: none !important; box-shadow: 0 4px 14px rgba(24,33,42,.06); font-size: .95rem; line-height: 1.45; text-align: left; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before, .woocommerce-noreviews::before { content: "✓" !important; font-family: inherit !important; position: absolute !important; left: 1rem !important; top: 1rem !important; display: flex; align-items: center; justify-content: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--gcbs-green-700); color: #fff !important; font-size: .8rem; font-weight: 700; line-height: 1; } .woocommerce-info, .woocommerce-noreviews { border-left-color: var(--gcbs-slate) !important; } .woocommerce-info::before, .woocommerce-noreviews::before { content: "i" !important; background: var(--gcbs-slate); font-style: normal; } .woocommerce-error { border-left-color: var(--gcbs-hot) !important; flex-direction: column; align-items: flex-start; } .woocommerce-error::before { content: "!" !important; background: var(--gcbs-hot); } .woocommerce-error li { margin: 0 !important; padding: 0 !important; list-style: none !important; } .woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button, .woocommerce-message a.wc-forward, .woocommerce-info a.wc-forward { order: 2; float: none !important; margin: 0 0 0 auto !important; display: inline-flex !important; align-items: center; justify-content: center; min-height: 44px; padding: .55rem 1.1rem !important; background: var(--gcbs-green-700) !important; color: #fff !important; border: 0 !important; border-radius: 6px !important; font-size: .8rem !important; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; text-decoration: none !important; white-space: nowrap; line-height: 1.2; box-shadow: none !important; } .woocommerce-message .button:hover, .woocommerce-info .button:hover { background: var(--gcbs-charcoal) !important; } .woocommerce-message a:not(.button), .woocommerce-info a:not(.button), .woocommerce-error a:not(.button) { color: var(--gcbs-green-700); font-weight: 600; } @media (max-width: 640px) { .woocommerce-message, .woocommerce-info, .woocommerce-error { padding: .9rem .9rem .9rem 2.9rem !important; font-size: .9rem; } .woocommerce-message::before, .woocommerce-info::before, .woocommerce-error::before { left: .8rem !important; top: .9rem !important; } .woocommerce-message .button, .woocommerce-info .button, .woocommerce-error .button, .woocommerce-message a.wc-forward, .woocommerce-info a.wc-forward { flex: 1 1 100%; width: 100%; margin: .15rem 0 0 !important; } } /* Block cart/checkout notices: same card, no focus ring */ .wc-block-components-notice-banner { border-radius: 10px !important; } /* ---------- 4. Product meta: one line each, bold labels ---------- */ .woocommerce div.product .product_meta, .product_meta { display: grid; gap: .4rem; margin: 1.25rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--gcbs-border); font-size: .9rem; line-height: 1.45; } .product_meta > span { display: block; font-weight: 700; color: var(--gcbs-title); } .product_meta > span > * { font-weight: 400; color: var(--gcbs-body-text); } .product_meta > span a { color: var(--gcbs-green-700); text-decoration: none; } .product_meta > span a:hover { text-decoration: underline; } /* ---------- 5. Product tabs ---------- */ .woocommerce div.product .woocommerce-tabs ul.tabs, .woocommerce-tabs ul.tabs { display: flex !important; flex-wrap: nowrap !important; gap: .5rem; overflow-x: auto; overflow-y: hidden; margin: 0 0 1.25rem !important; padding: 0 !important; border: 0 !important; border-bottom: 2px solid var(--gcbs-border) !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .woocommerce-tabs ul.tabs::-webkit-scrollbar { display: none; } .woocommerce-tabs ul.tabs::before, .woocommerce-tabs ul.tabs::after, .woocommerce-tabs ul.tabs li::before, .woocommerce-tabs ul.tabs li::after { content: none !important; display: none !important; } .woocommerce-tabs ul.tabs li { flex: 0 0 auto; display: flex !important; margin: 0 0 -2px !important; padding: 0 !important; background: #fff !important; border: 1px solid var(--gcbs-border) !important; border-bottom: 2px solid transparent !important; border-radius: 8px 8px 0 0 !important; } .woocommerce-tabs ul.tabs li a { display: flex !important; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: .55rem 1.1rem !important; color: var(--gcbs-title) !important; font-size: .8rem !important; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; text-decoration: none !important; } .woocommerce-tabs ul.tabs li:hover { border-color: var(--gcbs-green-400) !important; } .woocommerce-tabs ul.tabs li.active { background: var(--gcbs-green-700) !important; border-color: var(--gcbs-green-700) !important; } .woocommerce-tabs ul.tabs li.active a { color: #fff !important; } @media (max-width: 640px) { .woocommerce div.product .woocommerce-tabs ul.tabs, .woocommerce-tabs ul.tabs { display: grid !important; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .4rem; overflow: visible; border-bottom: 0 !important; } .woocommerce-tabs ul.tabs li { margin: 0 !important; border-radius: 8px !important; border-bottom-width: 1px !important; } .woocommerce-tabs ul.tabs li a { white-space: normal; text-align: center; font-size: .75rem !important; line-height: 1.2; padding: .45rem .35rem !important; min-height: 48px; } } .woocommerce-tabs .panel > h2:first-child { font-size: 1.25rem; margin-top: 0; } /* ---------- 6. Add to cart, quantity, variations ---------- */ .woocommerce div.product form.cart:not(.variations_form), .woocommerce div.product .woocommerce-variation-add-to-cart { display: flex !important; flex-wrap: wrap; align-items: stretch; gap: .65rem; width: 100%; } .woocommerce div.product form.cart .gcbs-pay-badges { flex: 1 1 100%; margin-top: .35rem; } .woocommerce div.product form.cart .quantity, .woocommerce div.product form.cart .single_add_to_cart_button { align-self: stretch; } .woocommerce div.product form.cart .quantity { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; } .woocommerce div.product form.cart .quantity .qty { width: 4.75rem !important; min-height: 48px; text-align: center; font-size: 1rem; } .woocommerce div.product form.cart .single_add_to_cart_button { min-height: 48px; } @media (max-width: 640px) { .woocommerce div.product form.cart .single_add_to_cart_button { flex: 1 1 auto !important; width: auto !important; justify-content: center; } } .woocommerce div.product form.cart table.variations { width: 100%; border: 0; margin: 0 0 .75rem; } .woocommerce div.product form.cart table.variations th, .woocommerce div.product form.cart table.variations td { border: 0; padding: 0 0 .5rem; vertical-align: middle; text-align: left; } .woocommerce div.product form.cart table.variations th.label { padding-right: .75rem; white-space: nowrap; font-weight: 600; color: var(--gcbs-title); } .woocommerce div.product form.cart table.variations select { width: 100%; max-width: 100%; min-height: 44px; text-overflow: ellipsis; } .woocommerce div.product form.cart .reset_variations { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; color: var(--gcbs-green-700); font-weight: 600; } @media (max-width: 640px) { .woocommerce div.product form.cart table.variations, .woocommerce div.product form.cart table.variations tbody, .woocommerce div.product form.cart table.variations tr, .woocommerce div.product form.cart table.variations th, .woocommerce div.product form.cart table.variations td { display: block; width: 100%; } .woocommerce div.product form.cart table.variations th.label { padding: 0 0 .3rem; } } .woocommerce-variation-price .price, .woocommerce div.product p.price, .woocommerce div.product span.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .5rem; } .woocommerce .price del, .woocommerce .price del .amount { color: #6b757d !important; font-weight: 500; font-size: .85em; opacity: 1; } .woocommerce .price ins { text-decoration: none; } .woocommerce .price .screen-reader-text + .amount { margin-left: 0; } /* ---------- 7. WooCommerce defaults we hadn't overridden (woocommerce-general is dequeued) ---------- */ /* Star ratings: WooCommerce's "star" icon font lives in the dequeued stylesheet, so draw stars with text. */ .star-rating { position: relative; display: inline-block; overflow: hidden; width: 5.6em; height: 1.15em; font-size: .95rem; line-height: 1.15; font-family: inherit !important; color: #cbd5d0 !important; vertical-align: middle; } .star-rating::before { content: "★★★★★"; position: absolute; inset: 0 auto auto 0; letter-spacing: .12em; } .star-rating span { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; padding-top: 1.5em; } .star-rating span::before { content: "★★★★★"; position: absolute; top: 0; left: 0; letter-spacing: .12em; color: #F59E0B; } p.stars { display: inline-flex; gap: .15rem; margin: .25rem 0 .75rem; } p.stars span { display: inline-flex; gap: .15rem; } p.stars a { position: relative; display: inline-block; width: 44px; height: 44px; overflow: hidden; text-indent: -999em; color: #cbd5d0; text-decoration: none; } p.stars a::before { content: "★"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-indent: 0; font-size: 1.7rem; color: inherit; } p.stars:hover a, p.stars.selected a { color: #F59E0B; } p.stars a:hover ~ a, p.stars.selected a.active ~ a { color: #cbd5d0; } /* Sale badge: in-flow on product pages, never covering the zoom trigger */ .woocommerce span.onsale { min-height: 0; min-width: 0; line-height: 1.2; padding: .3rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 700; z-index: 3; } .woocommerce div.product .woocommerce-product-gallery { position: relative; } .woocommerce-product-gallery__trigger { position: absolute !important; top: .5rem !important; right: .5rem !important; left: auto !important; z-index: 4; display: flex !important; align-items: center; justify-content: center; width: 44px !important; height: 44px !important; background: #fff; border: 1px solid var(--gcbs-border); border-radius: 50%; text-decoration: none !important; font-size: 1.1rem; } /* Quantity inputs in the cart */ .woocommerce-cart-form .quantity .qty { min-height: 44px; width: 4.5rem; text-align: center; } /* Enhanced selects (select2 / selectWoo on account address forms) */ .select2-container .select2-selection--single { height: 44px !important; display: flex !important; align-items: center; border-color: var(--gcbs-border-strong) !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 1.3 !important; padding-left: .75rem !important; color: var(--gcbs-body-text) !important; } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 42px !important; } .select2-dropdown { border-color: var(--gcbs-border-strong) !important; border-radius: 6px !important; } .select2-results__option { padding: .6rem .75rem !important; } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted[data-selected] { background: var(--gcbs-green-700) !important; } /* Classic form rows */ .woocommerce form .form-row { margin: 0 0 1rem; padding: 0; } .woocommerce form .form-row label { display: block; font-weight: 600; font-size: .875rem; margin-bottom: .3rem; color: var(--gcbs-title); } .woocommerce form .form-row .required { color: var(--gcbs-hot); text-decoration: none; } .woocommerce form .form-row input.input-text, .woocommerce form .form-row textarea, .woocommerce form .form-row select, .woocommerce-account input.woocommerce-Input { min-height: 44px; } .woocommerce form .form-row.woocommerce-invalid input.input-text { border-color: var(--gcbs-hot); } .woocommerce form .password-input { position: relative; display: block; } .woocommerce form .show-password-input, .woocommerce-page form .show-password-input { position: absolute; right: 0; top: 0; width: 44px !important; height: 100% !important; min-height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; } .woocommerce form .show-password-input::after { content: "👁"; font-size: 1rem; } .woocommerce-form-login .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; } .woocommerce-account .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .35rem; } .woocommerce-account .woocommerce-MyAccount-navigation a { display: flex; align-items: center; min-height: 44px; padding: .5rem .85rem; border: 1px solid var(--gcbs-border); border-radius: 6px; color: var(--gcbs-title); text-decoration: none; font-weight: 600; } .woocommerce-account .woocommerce-MyAccount-navigation .is-active a { background: var(--gcbs-green-700); border-color: var(--gcbs-green-700); color: #fff; } /* Pagination + sorting + breadcrumbs */ .woocommerce nav.woocommerce-pagination ul li a, .woocommerce nav.woocommerce-pagination ul li span, ul.page-numbers a, ul.page-numbers span { min-width: 44px !important; min-height: 44px !important; } .woocommerce nav.woocommerce-pagination ul li span.current, ul.page-numbers span.current { background: var(--gcbs-green-700) !important; border-color: var(--gcbs-green-700) !important; color: #fff !important; } .woocommerce .woocommerce-ordering select, select.orderby { min-height: 44px; } .woocommerce-result-count { font-size: .875rem; color: var(--gcbs-slate); } .gcbs-breadcrumbs__item a, .woocommerce-breadcrumb a { display: inline-block; padding: .35rem 0; } /* Block cart / checkout touch sizes */ .wc-block-components-button:not(.is-link) { min-height: 48px; } .wc-block-components-panel__button { min-height: 44px; display: flex !important; align-items: center; } .wc-block-components-address-form__address_2-toggle { display: inline-flex !important; align-items: center; min-height: 44px; } .wc-block-components-address-form__address_2-hidden-input { min-height: 44px !important; } .wc-block-components-quantity-selector { min-height: 44px; } .wc-block-components-quantity-selector__button { min-width: 44px !important; } /* ---------- 8. Tap targets + small text ---------- */ .gcbs-link-more { display: inline-flex; align-items: center; min-height: 44px; } .gcbs-footer__sublink a { font-size: .8125rem !important; display: inline-block; padding: .3rem 0; } .gcbs-footer__links a { display: inline-block; padding: .25rem 0; } .gcbs-brand-strip__tag { font-size: .75rem !important; } .gcbs-trust-strip li { display: flex; align-items: center; min-height: 44px; margin: 0 !important; } .gcbs-trust-strip li a { display: inline-flex; align-items: center; min-height: 44px; } .gcbs-wish-btn { width: 44px !important; height: 44px !important; } @media (min-width: 861px) { .gcbs-util-nav__list > li > a { font-size: .75rem !important; display: inline-flex; align-items: center; min-height: 32px; } } @media (min-width: 861px) and (max-width: 1199px) { .gcbs-catbar__list a { padding: .75rem .6rem !important; font-size: .75rem !important; } } @media (max-width: 860px) { .gcbs-catbar__toggle { min-height: 48px !important; } } /* ---------- 9. Filters (collapsible on mobile) ---------- */ .gcbs-filters__details { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.25rem; width: 100%; } .gcbs-filters__details > summary { list-style: none; cursor: default; } .gcbs-filters__details > summary::-webkit-details-marker { display: none; } .gcbs-filters__kicker-mobile { display: none; } .gcbs-filters__select { height: 44px !important; } @media (min-width: 861px) { .gcbs-filters__details > summary { pointer-events: none; } } @media (max-width: 860px) { .gcbs-filters { padding: 0 !important; } .gcbs-filters__details { display: block; } .gcbs-filters__details > summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: .5rem 1rem; cursor: pointer; } .gcbs-filters__details > summary::after { content: ""; width: .55rem; height: .55rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s; margin-top: -.2rem; } .gcbs-filters__details[open] > summary::after { transform: rotate(-135deg); margin-top: .2rem; } .gcbs-filters__kicker-label { display: none; } .gcbs-filters__kicker-mobile { display: inline; } .gcbs-filters__details > .gcbs-filters__fields, .gcbs-filters__details > .gcbs-filters__clear { margin: 0 1rem 1rem; } .gcbs-filters__clear { display: inline-flex !important; min-height: 44px; align-items: center; } } /* ---------- 10. Wide content pages (Fitment Guide, Brands) ---------- */ .gcbs-prose--wide > p, .gcbs-prose--wide > ul:not([class]), .gcbs-prose--wide > ol:not([class]), .gcbs-prose--wide > h2, .gcbs-prose--wide > h3, .gcbs-prose--wide > .gcbs-spec-note { max-width: 48rem; } .gcbs-prose--wide .gcbs-fit-table { max-width: none; } @media (max-width: 860px) { .gcbs-fit__filters { top: 64px; } body:not(.gcbs-hdr-compact) .gcbs-fit__filters { position: static; } } @media (min-width: 861px) { .gcbs-fit__filters { top: 160px; } } /* Home "tabs" scroller: show it scrolls */ @media (max-width: 860px) { .gcbs-tabs__nav { scroll-snap-type: x proximity; mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); } .gcbs-tabs__btn { scroll-snap-align: start; } } /* Chip rows (archive SEO chips, home type chips) */ .gcbs-archive-seo__chips a, .gcbs-type-chips a { min-height: 44px; display: inline-flex !important; align-items: center; } /* Audit pass 2 */ .wc-block-components-checkout-place-order-button, .wc-block-cart__submit-button, .wc-block-components-totals-coupon__button { min-height: 48px !important; } .gcbs-brand-page__cats a { min-height: 44px; display: inline-flex !important; align-items: center; } .gcbs-menu-btn__label { font-size: .75rem !important; } /* Contrast: brand green #1E8C48 is 3.8-4.1:1 on charcoal; use the lighter logo green there (>= 6:1). */ .gcbs-footer__tagline { color: var(--gcbs-green-300) !important; } .gcbs-header__top a[aria-current="page"], .gcbs-util-nav__list .current-menu-item > a, .gcbs-util-nav__list .current_page_item > a { color: var(--gcbs-green-300) !important; } /* main.css turns prose tables into display:block (for overflow); fitment tables have their own scroll wrapper. */ .gcbs-prose .gcbs-fit-table, .gcbs-pdp-fit .gcbs-fit-table, .gcbs-fit-table { display: table !important; width: 100% !important; overflow: visible; } /* Category fitment-help card: child categories as chips, visible links */ .gcbs-cat-seo__children { list-style: none !important; margin: 0 0 .75rem !important; padding: 0 !important; display: flex; flex-wrap: wrap; gap: .5rem; } .gcbs-cat-seo__children li { margin: 0 !important; } .gcbs-cat-seo__children a { display: inline-flex; align-items: center; min-height: 44px; padding: .35rem .9rem; border: 1px solid var(--gcbs-green-100); border-radius: 999px; background: var(--gcbs-green-50); color: var(--gcbs-green-800) !important; font-weight: 600; font-size: .875rem; text-decoration: none !important; } .gcbs-cat-seo__children a:hover { background: var(--gcbs-green-700); color: #fff !important; } .gcbs-cat-seo__help a { color: var(--gcbs-green-700) !important; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }