/** Shopify CDN: Minification failed

Line 1912:44 Unexpected "{"
Line 1912:45 Unexpected ","
Line 1913:44 Unexpected "{"
Line 1914:44 Unexpected "{"
Line 1934:44 Unexpected "{"
Line 1935:44 Unexpected "{"
Line 1936:44 Unexpected "{"
Line 2180:1 Expected "}" to go with "{"

**/
/* ============================================
   FILE:    custom-winstore.css
   THEME:   Shopify Empire by Pixel Union
   STORE:   Win Store Co., Ltd. (winstores.com)
   VERSION: 3.0
   UPDATED: April 2026

   PURPOSE:
   This file overrides the default Empire theme styles
   to match Win Store's Walmart-style design system.
   Colors, fonts, badges, and layout are all controlled here.

   BRAND COLORS:
   - Primary Blue:   #007AFF  (Walmart blue — main buttons, links, header)
   - Dark Navy:      #0052CC  (headings, footer background, sidebar)
   - Deep Navy:      #003D99  (footer bottom bar)
   - Orange:         #EE7F22  (Add to Cart button, sale badges, pre-order)
   - Yellow:         #FFB81C  (announcement bar text, cart count, sidebar border)
   - Red:            #DC2626  (sale price text)
   - Sold Out Red:   #DC2626  (sold out badge)
   - Green:          #16A34A  (in stock badge, free shipping bar)
   - Grey Text:      #6B7280  (compare price, vendor, meta info)
   - Body Text:      #111827  (main text color)
   - Description:    #4B5563  (product descriptions, secondary text)
   - White:          #ffffff  (page background, button text)

   FONT:
   - System font stack: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Arial

   HOW TO UPLOAD:
   Shopify Admin → Themes → Empire → Edit Code → Assets
   → Add asset → Upload this file
   Then in layout/theme.liquid before </head>:
   {{ 'custom-winstore.css' | asset_url | stylesheet_tag }}

   UPDATE LOG:
   v3.0 - April 2026: Win Store brand colors (system fonts, #007AFF, 1440px)
   v2.4 - March 2026: PRE-ORDER badge fix, badge color system added
   v2.3 - March 2026: Homepage ws-home-* color sync
   v2.2 - March 2026: Homepage ws-home-* font fix (Part 21)
   v2.1 - March 2026: Page header height fix, placeholder SVG fix
   v2.0 - March 2026: Full design system — all 23 parts
============================================ */



/* ══════════════════════════════════════════
   PART 1: GLOBAL BASE
   WHY: Sets the foundation for all pages.
   Ensures white background, Inter font, and
   consistent text color across the entire site.
   Without this, Empire theme may show grey/off-white
   backgrounds and use its own default fonts.
══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
/* ── Page Container Max Width (Win Store Brand v2.1: 1440px) ── */
.page-width,.container,[class*='container'],.site-wrapper,.wrapper{max-width:1440px!important;margin-left:auto!important;margin-right:auto!important}

body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important;font-size:16px!important;line-height:1.5!important;color:#111827!important;-webkit-font-smoothing:antialiased;background-color:#ffffff!important}
html{background-color:#ffffff!important}
#site-main,.site-main,main,[role="main"],.main-content,.page-width{background-color:#ffffff!important}
.shopify-section:not(.shopify-section-header):not(.shopify-section-footer){background-color:#ffffff!important}
h1,.h1{font-size:28px!important;font-weight:700!important;color:#111827!important;line-height:1.3!important}
h2,.h2{font-size:22px!important;font-weight:700!important;color:#111827!important;line-height:1.3!important}
h3,.h3{font-size:18px!important;font-weight:600!important;color:#111827!important}
h4,.h4{font-size:16px!important;font-weight:600!important;color:#111827!important}
h5,.h5{font-size:14px!important;font-weight:600!important;color:#111827!important}
h6,.h6{font-size:13px!important;font-weight:600!important;color:#111827!important}
p{font-size:16px!important;color:#111827!important;line-height:1.5!important}
main a,.rte a,.product a,article a,.collection-area a,.page-content a{color:#007AFF!important;text-decoration:none!important;transition:color .15s ease!important}
main a:hover,.rte a:hover,article a:hover{color:#0052CC!important;text-decoration:underline!important}


/* ══════════════════════════════════════════
   PART 2: ANNOUNCEMENT BAR
   WHY: The top announcement bar is used for promotions,
   free delivery notices, and important messages.
   Dark navy background with yellow text matches
   Walmart's announcement bar style.
══════════════════════════════════════════ */
.announcement-bar,[class*="announcement"],.site-header-banner,[class*="marquee"],[data-section-type="announcement-bar"]{background:#0052CC!important;color:#FFB81C!important;font-size:13px!important;font-weight:600!important;text-align:center!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}
.announcement-bar a,[class*="announcement"] a{color:#FFB81C!important;text-decoration:underline!important}


/* ══════════════════════════════════════════
   PART 3: HEADER
   WHY: The header background, nav links, cart count,
   and support text are all forced to Win Store brand colors.
   Empire theme uses its own colors by default —
   we override to Walmart blue (#007AFF) header
   with white text and yellow hover.
   NOTE: Header liquid code is in layout/theme.liquid
══════════════════════════════════════════ */
.site-header,.header,header[role="banner"],[data-section-type="header"]{background:#007AFF!important}
.site-nav a,.nav-link,.header__menu a,[data-section-type="header"] nav a,.site-nav--has-dropdown>a,.main-menu a,.primary-menu a{font-size:14px!important;font-weight:600!important;color:#fff!important;text-transform:uppercase!important;letter-spacing:.5px!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}
.site-nav a:hover,.header__menu a:hover,.main-menu a:hover,.primary-menu a:hover{color:#FFB81C!important;text-decoration:none!important}
.header__support,[class*="header-support"],.header__icon-label{color:#fff!important;font-size:12px!important}
.header__cart-count,.cart-count,[class*="cart-count"],.cart-link__count{background:#FFB81C!important;color:#0052CC!important;font-weight:700!important;font-size:11px!important}


/* ══════════════════════════════════════════
   PART 4: PRODUCT CARDS
   WHY: Product card titles, prices, badges, and vendor
   names appear on collection pages and homepage.
   This section ensures consistent brand colors,
   correct price display (sale vs regular vs compare),
   and readable typography across all product cards.

   PRICE LOGIC:
   - Regular price   → Dark navy #0052CC, bold, 18px
   - Sale price      → Red #DC2626, no strikethrough
   - Compare price   → Grey #6B7280, strikethrough
     (Empire uses <s> HTML tag — browser handles strikethrough,
      we only need to set the grey color)
   - "Contact us for price" → Navy, NO strikethrough
     (uses :not(s):not(del) selector to avoid affecting <s> tags)
══════════════════════════════════════════ */
.product-card__title,.card__title,.product-item__title,.grid-product__title,.card__heading,.card__heading a,.productitem--title,.productitem--title a,.product-block .product-block__title,.product-block .product-block__title a{font-size:14px!important;color:#0052CC!important;font-weight:600!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important;line-height:1.4!important}
.productitem--title a:hover,.card__heading a:hover,.product-block__title a:hover{color:#007AFF!important}
.price__current,.price-item--regular,.price-item--sale,.product-card__price,.price .price-item,.productitem--price,.price--main .money,.price .money,.product-block .product-block__price{font-size:18px!important;font-weight:700!important;color:#0052CC!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important;text-decoration:none!important}
.price-item--sale,[class*="on-sale"] .price__current,.price--on-sale .price-item--sale{color:#DC2626!important;text-decoration:none!important}
.price__compare,.price-item--regular.price-item--last,.price--compare-at .money{font-size:14px!important;font-weight:400!important;color:#6B7280!important;text-decoration:line-through!important}
.price s,.price del{color:#6B7280!important;font-size:14px!important;font-weight:400!important;text-decoration:line-through!important}
.price .price-item--regular:not(s):not(del),
.price--no-compare .price-item--regular,
.price .price-item--regular:only-child,
.price--on-sale .price__container .price-item--regular:only-child{color:#0052CC!important;text-decoration:none!important;font-weight:700!important;font-size:16px!important}
.product-card__vendor,.card__vendor,[class*="product-vendor"],.productitem--vendor,.product-block .product-block__vendor{font-size:12px!important;font-weight:500!important;color:#6B7280!important;text-transform:uppercase!important;letter-spacing:.5px!important}
.product-badge--sold-out,.badge--sold-out,.productitem--badge,.product-block__badge--sold-out{background:#DC2626!important;color:#fff!important;font-size:11px!important;font-weight:700!important;border-radius:3px!important;padding:2px 6px!important}
.productitem--badge--sale,.product-block__badge--sale{background:#EE7F22!important;color:#fff!important}
.inventory--low,[class*="inventory-low"]{color:#EE7F22!important;font-size:12px!important;font-weight:600!important}


/* ══════════════════════════════════════════
   PART 5: BUTTONS
   WHY: Buttons are the most important conversion element.
   - Add to Cart / Checkout → Orange (#EE7F22) — urgent, action color
   - Secondary buttons → White with blue border
   - Quick Add buttons → Blue (#007AFF)
   Empire theme uses its own button colors by default,
   so we force Win Store brand colors here.
══════════════════════════════════════════ */
.btn,.button,button[type="submit"],.product-form__submit,.cart__checkout-button{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important;font-size:14px!important;font-weight:700!important;letter-spacing:.5px!important;border-radius:4px!important;transition:all .2s ease!important}
.product-form__submit,.cart__checkout-button,.btn--primary,.button--primary,.product-form__cart-submit{background:#EE7F22!important;color:#fff!important;border:none!important}
.product-form__submit:hover,.cart__checkout-button:hover,.btn--primary:hover{background:#C96A15!important}
.btn--secondary,.button--secondary{background:#fff!important;color:#007AFF!important;border:2px solid #007AFF!important}
.btn--secondary:hover{background:#007AFF!important;color:#fff!important}
.quick-add__submit,[class*="quick-shop"] button,.product-block__quick-shop button{font-size:12px!important;font-weight:600!important;background:#007AFF!important;color:#fff!important;border-radius:4px!important}
.quick-add__submit:hover,.product-block__quick-shop button:hover{background:#0052CC!important}


/* ══════════════════════════════════════════
   PART 6: COLLECTION PAGE
   WHY: Collection (category) pages need consistent
   title styling, breadcrumb navigation, sort dropdowns,
   and pagination that match the brand.
   The blue underline on collection titles mimics
   Walmart's category page section headers.
══════════════════════════════════════════ */
.collection__title,.collection-hero__title,[class*="collection-title"],.collection-area__title{font-size:24px!important;font-weight:700!important;color:#0052CC!important;border-bottom:3px solid #007AFF!important;padding-bottom:10px!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}
.breadcrumb,.breadcrumbs,[class*="breadcrumb"]{font-size:12px!important;color:#6B7280!important}
.breadcrumb a,.breadcrumbs a{color:#007AFF!important;font-size:12px!important}
.breadcrumb .separator,.breadcrumbs span{color:#9CA3AF!important}
.collection-utilities,[class*="sort-by"],.collection-area__sort select,.toolbar select{font-size:13px!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important;color:#4B5563!important;border:1px solid #D1D5DB!important;border-radius:4px!important;padding:6px 10px!important}
.toolbar__view-buttons button,[class*="layout-toggle"] button{color:#6B7280!important;border:1px solid #E5E7EB!important;border-radius:4px!important}
.toolbar__view-buttons button.active,.toolbar__view-buttons button:hover{color:#007AFF!important;border-color:#007AFF!important}
.collection-area__product-count,[class*="product-count"]{font-size:13px!important;color:#6B7280!important}
.pagination a,.pagination span,.paginate a,.paginate span{font-size:14px!important;font-weight:600!important;color:#007AFF!important;padding:8px 14px!important;border-radius:4px!important}
.pagination .current,.pagination .active,.paginate .current{background:#007AFF!important;color:#fff!important}
.pagination a:hover,.paginate a:hover{background:#EFF6FF!important}


/* ══════════════════════════════════════════
   PART 7: SIDEBAR FILTERS
   WHY: The filter sidebar on collection pages helps
   customers narrow down products by brand, price, etc.
   Yellow underline on filter headings adds Win Store
   brand identity. Light grey background keeps it
   visually separate from product grid.
══════════════════════════════════════════ */
.sidebar,.collection-sidebar,[class*="facets"],.collection-filter,.faceted-filter,.collection-area__sidebar{font-size:13px!important;background:#F8FAFC!important;border-right:1px solid #E5E7EB!important;padding:16px!important;border-radius:6px!important}
.sidebar__title,.facets__heading,[class*="filter-heading"],.faceted-filter__heading,.collection-filter__heading{font-size:12px!important;font-weight:800!important;color:#0052CC!important;text-transform:uppercase!important;letter-spacing:.8px!important;border-bottom:2px solid #FFB81C!important;padding-bottom:6px!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}
.facets__item label,.filter-item label,.faceted-filter__item label{font-size:13px!important;color:#4B5563!important;font-weight:500!important}
.facets__item input:checked+label,.filter-item input:checked+label{color:#007AFF!important;font-weight:700!important}
.facets__price input,.price-filter input[type="number"],input[name="filter.v.price.gte"],input[name="filter.v.price.lte"]{font-size:13px!important;border:1px solid #D1D5DB!important;border-radius:4px!important;padding:6px 8px!important;color:#111827!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}


/* ══════════════════════════════════════════
   PART 8: PRODUCT PAGE
   WHY: The individual product page needs larger,
   bolder prices and clearer titles for conversion.
   Product price shown in Walmart blue (#007AFF).
   Description text is slightly lighter (#4B5563)
   for better readability on long text.
══════════════════════════════════════════ */
.product__title,.product-single__title,.product-area__title{font-size:22px!important;font-weight:700!important;color:#111827!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}
.product__price .price-item,.product-single__price,.product-area__price{font-size:24px!important;font-weight:700!important;color:#007AFF!important}
.product__description,.product-single__description,.product-area__description,.rte{font-size:14px!important;line-height:1.7!important;color:#4B5563!important}
.tabs__title,.product-tab__title{font-size:13px!important;font-weight:600!important;color:#4B5563!important}
.tabs__title.active,.product-tab__title.active{color:#007AFF!important;border-bottom:2px solid #007AFF!important}
.variant-input,.single-option-selector,.product-form__option select,.swatch-element label{font-size:13px!important;border:1px solid #D1D5DB!important;border-radius:4px!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}
.quantity-input,.cart-item__quantity input,.product-form__quantity input{font-size:14px!important;font-weight:600!important;text-align:center!important;border:1px solid #D1D5DB!important;border-radius:4px!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}


/* ══════════════════════════════════════════
   PART 9: HOMEPAGE SECTIONS
   WHY: Homepage section headings (Featured Products,
   New Arrivals, etc.) need brand-consistent styling.
   Shopify section h2 tags are forced to Walmart blue.
   Hero/slideshow titles use heavy 800 weight for impact.
══════════════════════════════════════════ */
.section-header__title,.section__title,[class*="section-title"],.home-section__title{font-size:22px!important;font-weight:700!important;color:#0052CC!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}
.shopify-section h2{color:#007AFF!important;font-weight:700!important}
.slideshow__title,[class*="hero__title"]{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important;font-weight:800!important}
.slideshow__subtitle,[class*="hero__subtitle"]{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}


/* ══════════════════════════════════════════
   PART 10: CART PAGE
   WHY: Cart page needs clear totals, item names,
   and a free shipping progress bar to encourage
   customers to add more items (conversion tactic
   used by Walmart and Amazon).
══════════════════════════════════════════ */
.cart__title,[class*="cart-title"],.cart-header__title{font-size:24px!important;font-weight:700!important;color:#0052CC!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}
.cart-item__name,.cart__product-title,.cart-item__title{font-size:14px!important;font-weight:600!important;color:#111827!important}
.cart__subtotal,.totals__subtotal,.cart-total__price{font-size:18px!important;font-weight:700!important;color:#0052CC!important}
.cart-goal__message,.free-shipping-message{font-size:14px!important;font-weight:600!important;color:#16A34A!important}
.cart-goal__bar,.shipping-progress-bar{background:#E5E7EB!important;border-radius:10px!important;height:8px!important;overflow:hidden!important}
.cart-goal__bar-fill,.shipping-progress-bar__fill{background:linear-gradient(90deg,#16A34A,#22C55E)!important;border-radius:10px!important;height:100%!important}


/* ══════════════════════════════════════════
   PART 11: SEARCH RESULTS
   WHY: Search results page title and product count
   need brand styling to look consistent with the
   rest of the store.
══════════════════════════════════════════ */
.search-results__title,.search-page__title{font-size:22px!important;font-weight:700!important;color:#0052CC!important}
.search-results__count,[class*="results-count"]{font-size:13px!important;color:#6B7280!important}


/* ══════════════════════════════════════════
   PART 12: ACCOUNT PAGES
   WHY: Login, register, and account pages need
   consistent heading and input field styles.
══════════════════════════════════════════ */
.customer-login h1,.account-page h1,#customer_login h1,#create_customer h1{font-size:24px!important;color:#0052CC!important;font-weight:700!important}
.customer-login input,.account-page input,#customer_login input,#create_customer input{font-size:14px!important;border:1px solid #D1D5DB!important;border-radius:4px!important;padding:10px 14px!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}


/* ══════════════════════════════════════════
   PART 13: FOOTER
   WHY: Footer uses dark navy background (#0052CC)
   matching Walmart's footer style.
   Headings are yellow (#FFB81C) for contrast.
   Links are light blue (#93C5FD) for readability.
   Phone/email links are yellow to stand out.
   Footer bottom bar is deeper navy (#003D99).
══════════════════════════════════════════ */
.site-footer,footer,[data-section-type="footer"]{background-color:#0052CC!important}
.site-footer,.site-footer p,.site-footer span,.site-footer li,footer p,footer span,footer li{color:#E2E8F0!important;font-size:13px!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}
.site-footer h1,.site-footer h2,.site-footer h3,.site-footer h4,.site-footer h5,.site-footer h6,footer h1,footer h2,footer h3,footer h4{color:#FFB81C!important;font-size:13px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.8px!important}
.site-footer a,footer a{color:#93C5FD!important;font-size:13px!important}
.site-footer a:hover,footer a:hover{color:#FFFFFF!important;text-decoration:none!important}
.site-footer [href^="tel:"],.site-footer [href^="mailto:"],footer [href^="tel:"],footer [href^="mailto:"]{color:#FFB81C!important;font-weight:600!important}
.footer__bottom,.site-footer__bottom,.footer-bottom{background-color:#003D99!important;border-top:1px solid rgba(255,255,255,.1)!important}
.footer__bottom p,.footer__bottom span,.footer__bottom a,.footer-bottom a{color:#94A3B8!important;font-size:12px!important}


/* ══════════════════════════════════════════
   PART 14: JUDGE.ME REVIEWS
   WHY: Judge.me is the review app used by Win Store.
   "Write a Review" button uses orange (primary action).
   "Ask a Question" button uses white/navy (secondary).
   Stars use amber/gold color for standard review look.
══════════════════════════════════════════ */
.jdgm-rev-widg__title,.jdgm-rev-widg h2{color:#007AFF!important;font-weight:700!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}
.jdgm-write-rev-link{background:#EE7F22!important;color:#fff!important;border:none!important;border-radius:6px!important;font-weight:700!important;padding:12px 24px!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}
.jdgm-write-rev-link:hover{background:#C96A15!important}
.jdgm-ask-link{background:#fff!important;color:#0052CC!important;border:2px solid #0052CC!important;border-radius:6px!important;font-weight:700!important;padding:12px 24px!important}
.jdgm-ask-link:hover{background:#0052CC!important;color:#fff!important}
.jdgm-star{color:#F59E0B!important}
.jdgm-rev__author{font-weight:600!important;color:#0052CC!important}
.jdgm-rev__body{font-size:14px!important;line-height:1.6!important;color:#4B5563!important}


/* ══════════════════════════════════════════
   PART 15: SEARCHANISE
   WHY: Searchanise is the search/autocomplete app.
   Search pill tags use light blue background.
   Product results in search dropdown use brand colors.
   "Add to cart" button in search results uses blue.
══════════════════════════════════════════ */
.snize-search-pills-tag{background-color:#E0F2FE!important;color:#0052CC!important;border-radius:20px!important;font-size:12px!important;font-weight:600!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}
.snize-search-pills-tag:hover{background-color:#007AFF!important;color:#fff!important}
[class*="snize"] [class*="title"],[class*="snize"] [class*="name"]{font-size:13px!important;font-weight:600!important;color:#0052CC!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}
[class*="snize"] [class*="price"]:not([class*="old"]){font-size:16px!important;font-weight:700!important;color:#0052CC!important}
[class*="snize"] [class*="old"],[class*="snize"] [class*="compare"]{font-size:13px!important;color:#6B7280!important;text-decoration:line-through!important}
[class*="snize"] button[class*="add"],[class*="snize"] [class*="add-to-cart"]{background:#007AFF!important;color:#fff!important;font-size:12px!important;font-weight:600!important;border:none!important;border-radius:4px!important}


/* ══════════════════════════════════════════
   PART 16: COMPARE WIDGET
   WHY: Product compare feature buttons use brand blue.
══════════════════════════════════════════ */
[class*="compare"] button,.compare-button{font-size:12px!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}
[class*="compare"] a.btn,.compare__link{background:#007AFF!important;color:#fff!important;border-radius:4px!important}


/* ══════════════════════════════════════════
   PART 17: MOBILE MENU
   WHY: Mobile drawer menu uses dark navy background
   with white text links. Yellow hover color on links
   gives branded feel on mobile devices.
══════════════════════════════════════════ */
.mobile-menu,.site-nav--mobile,[class*="mobile-nav"],.drawer__inner,.mobile-nav-drawer{background:#0052CC!important}
.mobile-menu a,.site-nav--mobile a,.drawer__inner a,.mobile-nav-drawer a{color:#fff!important;font-size:15px!important;font-weight:600!important;padding:12px 16px!important;border-bottom:1px solid rgba(255,255,255,.1)!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}
.mobile-menu a:hover,.drawer__inner a:hover{background:rgba(255,255,255,.08)!important;color:#FFB81C!important}


/* ══════════════════════════════════════════
   PART 18: TOAST / ALERT MESSAGES
   WHY: Success messages (added to cart, order placed)
   show green. Error messages show red. Consistent
   with standard UI patterns customers expect.
══════════════════════════════════════════ */
.alert,.flash-message,[class*="notification"]{font-size:14px!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important;border-radius:6px!important;padding:12px 16px!important}
.alert--success{background:#DCFCE7!important;color:#166534!important;border:1px solid #BBF7D0!important}
.alert--error{background:#FEE2E2!important;color:#991B1B!important;border:1px solid #FECACA!important}


/* ══════════════════════════════════════════
   PART 19: RESPONSIVE (MOBILE/TABLET)
   WHY: Font sizes scale down on smaller screens
   so the layout doesn't break on mobile.
   Breakpoints: 768px (tablet), 480px (small phone).
══════════════════════════════════════════ */
@media(max-width:768px){h1,.h1{font-size:22px!important}h2,.h2{font-size:18px!important}h3,.h3{font-size:16px!important}body{font-size:14px!important}.product__price .price-item{font-size:20px!important}.product__title{font-size:18px!important}.collection__title{font-size:20px!important}.cart__title{font-size:20px!important}}
@media(max-width:480px){h1,.h1{font-size:20px!important}h2,.h2{font-size:16px!important}.productitem--title,.product-block__title{font-size:12px!important}.productitem--price,.product-block__price{font-size:15px!important}}


/* ══════════════════════════════════════════
   PART 20: PAGE & SEARCH RESULTS FIX
   WHY: Some Empire theme pages show large unwanted
   page hero headers and placeholder SVG images that
   look broken. This section:
   - Collapses oversized page headers to 80px max
   - Hides duplicate page title text (already shown elsewhere)
   - Limits placeholder SVG size so they don't stretch
   - Limits product image container heights
   - Styles the free shipping announcement bar as gradient
══════════════════════════════════════════ */
[class*="free-shipping"],[class*="shipping-bar"],.announcement-bar--shipping{background:linear-gradient(90deg,#007AFF,#0052CC)!important;color:#fff!important;font-size:14px!important;font-weight:600!important;padding:10px 20px!important;text-align:center!important;border-radius:6px!important}
.page-header,.page-banner,.page-hero,article>header,article>[role="banner"],.page-header--with-background,[class*="page-header"],[class*="page-banner"]{min-height:0!important;max-height:80px!important;height:auto!important;padding:15px 0!important;margin:0!important;background-image:none!important}
.page-header__title,.page-banner__title,article>header h1,article>[role="banner"] h1,[class*="page-header"] h1{font-size:0!important;line-height:0!important;min-height:0!important;padding:0!important;margin:0!important;height:0!important;overflow:hidden!important}
.placeholder-svg,svg.placeholder-svg,[class*="placeholder"] svg{max-height:150px!important;max-width:150px!important;width:auto!important;margin:0 auto!important;display:block!important;padding:15px!important;background:#F8FAFC!important;border-radius:8px!important}
[class*="image-wrapper"],[class*="thumbnail"],[class*="product-image"],[class*="product-photo"]{max-height:250px!important;overflow:hidden!important}


/* ══════════════════════════════════════════
   PART 21: HOMEPAGE SECTION FONT FIX (ws-home-*)
   WHY: Win Store homepage uses custom Liquid sections
   with class names starting with "ws-home-".
   This part ensures all ws-home-* classes use the
   correct font sizes from our design system.
   These classes are used in:
   - Category grid section
   - How It Works steps section
   - Why Choose Us cards
   - Store locations
   - Payment methods
   - Stats counter bar
   - CTA (Call to Action) banner
   - Bottom strip
   Added: March 2026
══════════════════════════════════════════ */
.ws-home-h2{font-size:22px!important;font-weight:700!important;color:#0052CC!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important;text-align:center;margin-bottom:8px}
.ws-home-sub{font-size:16px!important;color:#6B7280!important;text-align:center;margin-bottom:32px}
.ws-home-cat-name{font-size:14px!important;font-weight:600!important;color:#0052CC!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}
.ws-home-cat-desc{font-size:13px!important;color:#6B7280!important;line-height:1.5!important}
.ws-home-step-num{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important;font-weight:800!important}
.ws-home-step-title{font-size:16px!important;font-weight:600!important;color:#0052CC!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}
.ws-home-step-desc{font-size:14px!important;color:#4B5563!important;line-height:1.6!important}
.ws-home-why-title{font-size:14px!important;font-weight:600!important;color:#0052CC!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}
.ws-home-why-desc{font-size:14px!important;color:#4B5563!important;line-height:1.6!important}
.ws-home-loc-name{font-size:14px!important;font-weight:700!important;color:#0052CC!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}
.ws-home-loc-type{font-size:12px!important;color:#6B7280!important}
.ws-home-loc-note{font-size:12px!important;font-weight:600!important}
.ws-home-pay-head-title{font-size:14px!important;font-weight:700!important;color:#0052CC!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}
.ws-home-pay-body{font-size:14px!important;color:#4B5563!important;line-height:1.6!important}
.ws-home-stat-num{font-size:26px!important;font-weight:800!important;color:#fff!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}
.ws-home-stat-label{font-size:13px!important;color:#BFDBFE!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}
.ws-home-cta-title{font-size:28px!important;font-weight:800!important;color:#fff!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important;margin-bottom:10px}
.ws-home-cta-sub{font-size:16px!important;color:#BFDBFE!important;margin-bottom:28px}
.ws-home-cta-btn-a,.ws-home-cta-btn-b{font-size:14px!important;font-weight:700!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}
.ws-home-strip-item{font-size:13px!important;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif!important}

@media(max-width:768px){
  .ws-home-h2{font-size:18px!important}
  .ws-home-sub{font-size:14px!important}
  .ws-home-cta-title{font-size:22px!important}
  .ws-home-section{padding:32px 0}
  .ws-home-cat-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .ws-home-steps-grid{grid-template-columns:1fr}
  .ws-home-why-grid{grid-template-columns:1fr}
  .ws-home-pay-grid{grid-template-columns:1fr}
  .ws-home-loc-grid{grid-template-columns:repeat(2,1fr)}
  .ws-home-stats-grid{grid-template-columns:repeat(3,1fr)}
  .ws-home-strip-inner{flex-direction:column;align-items:flex-start;padding:0 14px;gap:5px}
  .ws-home-cta-btns{flex-direction:column;align-items:center}
  .ws-home-cta-btn-a,.ws-home-cta-btn-b{width:100%;max-width:300px;text-align:center}
}
@media(max-width:480px){
  .ws-home-h2{font-size:16px!important}
  .ws-home-cta-title{font-size:20px!important}
  .ws-home-cat-name{font-size:12px!important}
  .ws-home-loc-grid{grid-template-columns:1fr}
  .ws-home-stats-grid{grid-template-columns:repeat(2,1fr)}
}


/* ══════════════════════════════════════════
   PART 22: HOMEPAGE SECTION COLOR FIX
   WHY: Some ws-home-* background and text colors
   were using slightly wrong navy shades in earlier
   versions. This part ensures all ws-home sections
   use the exact Design System navy #0052CC.
   Strip, stats, and CTA backgrounds all enforced here.
   Added: March 2026
══════════════════════════════════════════ */
.ws-home-strip{background:#0052CC!important}
.ws-home-stats{background:#0052CC!important}
.ws-home-cta{background:linear-gradient(135deg,#0052CC 0%,#007AFF 100%)!important}
.ws-home-cat-name{color:#0052CC!important}
.ws-home-h2{color:#0052CC!important}
.ws-home-why-title{color:#0052CC!important}
.ws-home-loc-name{color:#0052CC!important}
.ws-home-pay-head-title{color:#0052CC!important}
.ws-home-step-title{color:#0052CC!important}


/* ══════════════════════════════════════════
   PART 23: PRICE DISPLAY & BADGE FIXES
   WHY: Three specific problems fixed in this section:

   1. "Contact us for price" bug (v2.4 fix):
      Some products use "Contact us for price" instead
      of showing a number. Empire theme gives them the
      class .price-item--regular on a <span> (not <s>).
      Previous code accidentally added strikethrough to
      this text. Fixed by targeting only :not(s):not(del).

   2. PRE-ORDER badge (Timesact app):
      Timesact shows a pre-order badge that was purple
      by default. Overridden to orange (#EE7F22) to match
      Win Store's badge color system.
      Uses both CSS variables (:root) and class selectors
      to cover all Timesact badge rendering methods.

   3. IN STOCK / OUT OF STOCK badges:
      Standardized: Green = In Stock, Red = Out of Stock/Sold Out.

   Updated: March 2026
══════════════════════════════════════════ */

/* Timesact CSS variables */
:root{
  --ta-pre-order-badge-bg-color:#EE7F22!important;
  --ta-label-bg:#EE7F22!important;
  --ta-label-color:#fff!important;
  --ta-badge-background:#EE7F22!important;
  --ta-badge-color:#fff!important;
  --pre-order-badge-bg:#EE7F22!important;
  --timesact-badge-bg:#EE7F22!important;
}

/* PRE-ORDER badge — orange */
[class*="timesact"]{background-color:#EE7F22!important;color:#fff!important;border-color:#EE7F22!important}
.ta-label,.ta-pre-order-label,.ta-badge,.timesact-label,.timesact-badge,
.timesact-pre-order-badge,[class*="ta-label"],[class*="ta-badge"]{
  background:#EE7F22!important;color:#fff!important;
  font-size:11px!important;font-weight:700!important;
  border-radius:3px!important;padding:2px 8px!important;
  text-decoration:none!important;border:none!important;
}
[class*="preorder"],[class*="pre-order"],[class*="pre_order"]{background-color:#EE7F22!important;color:#fff!important;}
[class*="timesact"] *,[class*="ta-label"] *,[class*="ta-badge"] *{color:#fff!important;}

/* IN STOCK badge — green */
[class*="in-stock"],[class*="instock"],.badge--in-stock,[class*="ta-label"][class*="stock"]{
  background:#16A34A!important;color:#fff!important;
  font-size:11px!important;font-weight:700!important;
  border-radius:3px!important;padding:2px 6px!important;
}

/* OUT OF STOCK / SOLD OUT badge — red */
[class*="out-of-stock"],[class*="sold-out"],.badge--out-of-stock,.badge--sold-out{
  background:#DC2626!important;color:#fff!important;
  font-size:11px!important;font-weight:700!important;
  border-radius:3px!important;padding:2px 6px!important;
}

/* Contact us for price — no strikethrough (final override) */
.price:not(.price--on-sale) .price-item--regular{text-decoration:none!important;color:#0052CC!important;}
.price--on-sale .price__container .price-item--regular:only-child{text-decoration:none!important;color:#0052CC!important;font-weight:700!important;}

/* ─── HIDE OLD + Empire vehicle search widgets (ALL pages) ──────────────
   .ws-vehicle-search = OUR OLD inline widget (v1/v2, wrong position)
   Other selectors = Empire built-in vehicle search section
   Replaced by: ws-vehicle-search.liquid v4.0 popup modal
   ─────────────────────────────────────────────────────────────────────── */
.ws-vehicle-search,
.vehicle-search-section,
.vehicle-search-bar,
.vehicle-finder-section,
.vehicle-search-form,
#vehicle-search,
#vehicle-finder,
[data-section-type="vehicle-search"],
[data-section-type="vehicle-finder"],
.shopify-section--vehicle-search,
.shopify-section--vehicle-finder,
.vehicle-compatibility-search,
.vehicle-ymm-search,
.find-parts-vehicle {
  display: none !important;
}

/* Also hide any shopify-section wrapping Empire's vehicle search */
section[id*="vehicle-search"],
section[id*="vehicle-finder"],
div[id*="shopify-section"][id*="vehicle"] {
  display: none !important;
}

/* ─── FORCE Technical Data accordion BELOW product section ──────────────
   Empire uses CSS grid/flex on main — this causes .ws-technical-data to
   appear beside the gallery image instead of below the product section.
   Fix: force it to span full width and break out of the grid layout.
   ─────────────────────────────────────────────────────────────────────── */
.ws-technical-data,
#ws-td-below {
  display: block !important;
  width: 100% !important;
  max-width: 1260px !important;
  margin: 0 auto !important;
  padding: 24px 20px 40px !important;
  box-sizing: border-box !important;
  float: none !important;
  clear: both !important;
  position: relative !important;
  /* Span all columns in CSS grid layouts */
  grid-column: 1 / -1 !important;
  /* Push to end in flexbox layouts */
  align-self: flex-start !important;
  order: 999 !important;
}

/* Hide ws-technical-data when inside Empire's product section columns
   (LEFT column area beside gallery) — only show when properly relocated */
.static-product__block-container .ws-technical-data,
.product__block-container .ws-technical-data,
[data-section-type="static-product"] .ws-technical-data,
.product-area__col--left .ws-technical-data,
.product__col--left .ws-technical-data {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   PART 24-A: UNIVERSAL BODY-LEVEL RESET FOR ALL COLLECTION + PRODUCT PAGES
   WHY: Shopify adds body classes like "template-collection" and
   "template-product" to EVERY collection and product page regardless
   of which section template is assigned. This ensures that NO
   collection or product page can escape our font/color overrides.
   This is the ULTIMATE catch-all — even if a page uses a custom
   template, alternate layout, or third-party section, these rules
   will still apply because they target the <body> class.
   Updated: April 2026 — Brand System v2.1
══════════════════════════════════════════════════════════════════════ */

/* Body-level font reset for ALL collection pages */
body.template-collection,
body.template-collection *,
body[class*="template-collection"],
body[class*="template-collection"] * {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Body-level font reset for ALL product pages */
body.template-product,
body.template-product *,
body[class*="template-product"],
body[class*="template-product"] * {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Body-level text color for collection pages */
body.template-collection,
body[class*="template-collection"] {
  color: #111827 !important;
  background: #ffffff !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* Body-level text color for product pages */
body.template-product,
body[class*="template-product"] {
  color: #111827 !important;
  background: #ffffff !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* Max-width on ALL collection + product page content wrappers */
body.template-collection .page-width,
body.template-collection .container,
body.template-collection .wrapper,
body.template-collection main,
body.template-collection [role="main"],
body.template-product .page-width,
body.template-product .container,
body.template-product .wrapper,
body.template-product main,
body.template-product [role="main"] {
  max-width: 1440px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Universal heading colors for ALL collection pages */
body.template-collection h1,
body.template-collection h2,
body.template-collection h3,
body[class*="template-collection"] h1,
body[class*="template-collection"] h2,
body[class*="template-collection"] h3 {
  color: #0052CC !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Universal heading colors for ALL product pages */
body.template-product h1,
body.template-product h2,
body.template-product h3,
body[class*="template-product"] h1,
body[class*="template-product"] h2,
body[class*="template-product"] h3 {
  color: #111827 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Universal link colors on collection + product pages */
body.template-collection a,
body.template-product a {
  color: #007AFF !important;
}
body.template-collection a:hover,
body.template-product a:hover {
  color: #0052CC !important;
}

/* Universal paragraph text on collection + product */
body.template-collection p,
body.template-product p {
  color: #111827 !important;
  font-size: 16px !important;
  line-height: 1.5 !important;
}

/* Empire data-section-type selectors — catch ALL Empire sections
   on collection/product pages regardless of class names */
body.template-collection [data-section-type],
body.template-product [data-section-type] {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Shopify sections within collection/product templates */
body.template-collection .shopify-section,
body.template-product .shopify-section {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  color: #111827 !important;
}

/* Empire specific alternate collection selectors */
[data-section-type="collection-template"],
[data-section-type="static-collection"],
[data-section-type="collection-list"],
[data-section-type="featured-collection"],
[data-section-type="collection-grid"],
[data-section-type="collection-pages"],
[data-section-type="subcollection"],
[data-section-type="collection"] {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  color: #111827 !important;
}

/* Empire specific alternate product selectors */
[data-section-type="product-template"],
[data-section-type="static-product"],
[data-section-type="featured-product"],
[data-section-type="product"],
[data-section-type="product-page"] {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  color: #111827 !important;
}


/* ══════════════════════════════════════════════════════════════════════
   PART 24-B: EMPIRE THEME — CSS VARIABLE OVERRIDES (v2.1 Brand System)
   WHY: Empire theme uses CSS custom properties (--color-primary, etc.)
   for its default styling. Overriding at :root ensures ALL pages
   (every collection, every product, every custom template) inherit
   v2.1 brand colors through the theme's own variable system.
   Updated: April 2026 — Brand System v2.1
══════════════════════════════════════════════════════════════════════ */
:root {
  /* Empire primary/accent */
  --color-primary: #007AFF !important;
  --color-primary-hover: #0052CC !important;
  --color-secondary: #0052CC !important;
  --color-accent: #EE7F22 !important;

  /* Empire text */
  --color-body-text: #111827 !important;
  --color-heading: #111827 !important;
  --color-text: #111827 !important;
  --color-text-light: #6B7280 !important;

  /* Empire background */
  --color-bg: #ffffff !important;
  --color-bg-alt: #F8FAFC !important;
  --color-body: #ffffff !important;

  /* Empire links */
  --color-link: #007AFF !important;
  --color-link-hover: #0052CC !important;

  /* Empire buttons */
  --color-btn-primary: #EE7F22 !important;
  --color-btn-primary-text: #ffffff !important;
  --color-btn-secondary: #007AFF !important;
  --color-btn-secondary-text: #ffffff !important;

  /* Empire borders */
  --color-border: #E5E7EB !important;
  --color-border-dark: #D1D5DB !important;

  /* Empire header/footer */
  --color-header-bg: #007AFF !important;
  --color-header-text: #ffffff !important;
  --color-footer-bg: #0052CC !important;
  --color-footer-text: #E2E8F0 !important;

  /* Empire sale/badge */
  --color-sale: #DC2626 !important;
  --color-sale-badge: #EE7F22 !important;
  --color-sold-out: #DC2626 !important;

  /* Win Store custom vars */
  --wsc-blue: #007AFF !important;
  --wsc-navy: #0052CC !important;
  --wsc-mid-blue: #0066E6 !important;
  --wsc-hover-blue: #005CE6 !important;
  --wsc-orange: #EE7F22 !important;
  --wsc-gold: #FFB81C !important;
  --wsc-green: #16A34A !important;
  --wsc-bg: #F8FAFC !important;
  --wsc-light-tint: #F0F6FF !important;
  --wsc-ice-blue: #E8F0FB !important;
  --wsc-text: #111827 !important;
  --wsc-text-dark: #111827 !important;
  --wsc-text-mid: #4B5563 !important;
  --wsc-muted: #6B7280 !important;
  --wsc-max-width: 1440px !important;
  --wsc-fs-xs: 12px !important;
  --wsc-fs-sm: 14px !important;
  --wsc-fs-base: 16px !important;
  --wsc-fs-lg: 18px !important;
  --wsc-fs-xl: 22px !important;
  --wsc-fs-2xl: 28px !important;
}


/* ══════════════════════════════════════════════════════════════════════
   PART 25: EMPIRE COLLECTION PAGE — DEEP OVERRIDES
   WHY: Empire's collection template has specific class names for the
   product grid, filter sidebar, sort controls, and product cards.
   This ensures they all use v2.1 brand colors and system fonts.
   Updated: April 2026
══════════════════════════════════════════════════════════════════════ */

/* Collection page container */
.collection-area,
.template-collection main,
.template-collection .page-width {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  max-width: 1440px !important;
  color: #111827 !important;
}

/* Collection title & description */
.collection-area__title,
.collection-area__title-wrapper h1,
.template-collection h1,
.collection-hero__title,
.collection__title {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #0052CC !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  border-bottom: 3px solid #007AFF !important;
  padding-bottom: 10px !important;
}

.collection-area__description,
.collection-hero__description,
.collection__description,
.rte--collection {
  font-size: 14px !important;
  color: #4B5563 !important;
  line-height: 1.6 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Empire sort/filter bar */
.collection-area__filter-bar,
.collection-area__sort,
.collection-utilities,
.faceted-filter-form,
.collection-toolbar {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  font-size: 13px !important;
  color: #4B5563 !important;
}

.collection-area__filter-bar select,
.collection-area__sort select,
.collection-utilities select,
.toolbar select {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  font-size: 13px !important;
  color: #4B5563 !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  padding: 8px 12px !important;
  background: #fff !important;
}

/* Empire sidebar filter headings */
.collection-area__sidebar h3,
.collection-area__sidebar h4,
.filter-group__title,
.faceted-filter__heading,
.faceted-filter-group__title {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #0052CC !important;
  text-transform: uppercase !important;
  letter-spacing: .8px !important;
  border-bottom: 2px solid #FFB81C !important;
  padding-bottom: 6px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Empire sidebar filter labels */
.faceted-filter__item label,
.filter-group__item label,
.tag-filter label,
.collection-area__sidebar label {
  font-size: 13px !important;
  color: #4B5563 !important;
  font-weight: 500 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

.faceted-filter__item input:checked + label,
.filter-group__item input:checked + label {
  color: #007AFF !important;
  font-weight: 700 !important;
}

/* Empire product grid items */
.product-block,
.product-item,
.grid-product,
.card-wrapper,
.productitem {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Product card title in grid */
.product-block__title,
.product-block__title a,
.productitem--title,
.productitem--title a,
.product-item__title,
.product-item__title a,
.grid-product__title,
.grid-product__title a,
.card__title,
.card__heading,
.card__heading a {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #0052CC !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  line-height: 1.4 !important;
}

.product-block__title a:hover,
.productitem--title a:hover,
.card__heading a:hover {
  color: #007AFF !important;
}

/* Product card price in grid */
.product-block__price,
.product-block__price .money,
.productitem--price,
.productitem--price .money,
.product-item__price,
.grid-product__price,
.price .money,
.price__current .money,
.price-item--regular .money {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0052CC !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Sale price in grid */
.price--on-sale .price-item--sale .money,
.product-block__price--on-sale .money,
.price-item--sale .money {
  color: #DC2626 !important;
  font-weight: 700 !important;
}

/* Compare/was price */
.price--compare-at .money,
.price__compare .money,
.product-block__price--compare .money {
  color: #6B7280 !important;
  font-size: 13px !important;
  text-decoration: line-through !important;
}

/* Product card vendor */
.product-block__vendor,
.productitem--vendor,
.product-item__vendor,
.grid-product__vendor,
.card__vendor {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #6B7280 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Quick add / ATC button on cards */
.product-block__quick-shop button,
.quick-add__submit,
.productitem--action-atc,
.product-item__add-to-cart {
  background: #007AFF !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  border-radius: 4px !important;
  border: none !important;
}

.product-block__quick-shop button:hover,
.quick-add__submit:hover {
  background: #0052CC !important;
}

/* Subcollection links */
.subcollections-list a,
.collection-area__subcollections a {
  font-size: 13px !important;
  color: #007AFF !important;
  font-weight: 600 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

.subcollections-list a:hover {
  color: #0052CC !important;
}

/* Pagination */
.pagination a,
.pagination span,
.paginate a,
.paginate span {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #007AFF !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

.pagination .current,
.pagination .active,
.paginate .current {
  background: #007AFF !important;
  color: #fff !important;
  border-radius: 4px !important;
}

/* No products message */
.collection-area__empty,
.collection-empty {
  font-size: 16px !important;
  color: #6B7280 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* ── UNIVERSAL COLLECTION CARD OVERRIDES ──
   These target product cards within ANY collection page
   using body.template-collection as the root selector,
   ensuring coverage regardless of grid/card class names */

body.template-collection .product-block,
body.template-collection .product-item,
body.template-collection .grid-product,
body.template-collection .card-wrapper,
body.template-collection .productitem,
body.template-collection [class*="product-card"],
body.template-collection [class*="grid-item"],
body.template-collection [class*="product-grid"] > * {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Product titles within ANY collection page */
body.template-collection [class*="title"] a,
body.template-collection [class*="product-title"],
body.template-collection [class*="product-name"],
body.template-collection .card__heading a,
body.template-collection .card__title a {
  color: #0052CC !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  line-height: 1.4 !important;
}

body.template-collection [class*="title"] a:hover,
body.template-collection .card__heading a:hover {
  color: #007AFF !important;
}

/* Prices within ANY collection page */
body.template-collection .money,
body.template-collection [class*="price"] .money,
body.template-collection [class*="price-item"] {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #0052CC !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Sale prices within ANY collection page */
body.template-collection .price--on-sale .money,
body.template-collection [class*="sale"] .money {
  color: #DC2626 !important;
}

/* Vendor within ANY collection page */
body.template-collection [class*="vendor"] {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #6B7280 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Badges within ANY collection page */
body.template-collection [class*="badge"] {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 11px !important;
}

/* Quick shop / Quick Add within ANY collection page */
body.template-collection [class*="quick"] button,
body.template-collection [class*="quick-add"] button,
body.template-collection [class*="quick-shop"] button {
  background: #007AFF !important;
  color: #fff !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  border: none !important;
  border-radius: 4px !important;
}

body.template-collection [class*="quick"] button:hover {
  background: #0052CC !important;
}


/* ══════════════════════════════════════════════════════════════════════
   PART 26: EMPIRE PRODUCT PAGE — DEEP OVERRIDES
   WHY: Empire's product template has specific class names for the
   product title, price, description, variant selector, tabs, and
   related products. This ensures they all use v2.1 brand colors.
   Updated: April 2026
══════════════════════════════════════════════════════════════════════ */

/* Product page container */
.template-product main,
.template-product .page-width,
.product-area {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  max-width: 1440px !important;
}

/* Product title */
.product-area__title,
.product__title,
.product-single__title,
.product_name,
h1.product_name,
[data-section-type="static-product"] h1 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  line-height: 1.3 !important;
}

/* Product price */
.product-area__price,
.product-area__price .money,
.product__price,
.product__price .money,
.product__price .price-item,
.product-single__price,
.product-single__price .money,
[data-section-type="static-product"] .price .money,
[data-section-type="static-product"] .price-item--regular {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #007AFF !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Product sale price */
[data-section-type="static-product"] .price-item--sale,
.product-area__price--sale,
.product__price .price-item--sale {
  color: #DC2626 !important;
  font-size: 24px !important;
  font-weight: 700 !important;
}

/* Product compare price */
[data-section-type="static-product"] .price-item--regular s,
[data-section-type="static-product"] .price del,
.product-area__price--compare {
  color: #6B7280 !important;
  font-size: 16px !important;
  text-decoration: line-through !important;
}

/* Product vendor */
.product-area__vendor,
.product__vendor,
.product-single__vendor,
[data-section-type="static-product"] .product-block__vendor {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #6B7280 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Product description */
.product-area__description,
.product__description,
.product-single__description,
.product-block--description .rte,
[data-section-type="static-product"] .rte {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #4B5563 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Product tabs (Description / Reviews / Specs) */
.product-area__tab-title,
.tabs__title,
.product-tab__title,
.tab-link,
[data-section-type="static-product"] .tabs a {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #4B5563 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  border-bottom: 2px solid transparent !important;
  padding-bottom: 8px !important;
}

.tabs__title.active,
.product-tab__title.active,
.tab-link.active,
.product-area__tab-title--active {
  color: #007AFF !important;
  border-bottom-color: #007AFF !important;
  font-weight: 700 !important;
}

/* Variant selectors */
.product-area__option select,
.product-form__option select,
.single-option-selector,
.variant-input select,
.swatch-element label {
  font-size: 14px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  padding: 10px 14px !important;
  color: #111827 !important;
}

.product-form__option-label,
.variant-wrapper__label,
.product-area__option-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Add to Cart button on product page */
.product-form__submit,
.product-area__atc-btn,
[data-section-type="static-product"] button[name="add"],
.product-form__cart-submit {
  background: #EE7F22 !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 14px 28px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
}

.product-form__submit:hover,
[data-section-type="static-product"] button[name="add"]:hover {
  background: #C96A15 !important;
}

/* Buy Now button */
.shopify-payment-button .shopify-payment-button__button,
.shopify-payment-button__button--unbranded {
  background: #0052CC !important;
  color: #fff !important;
  border-radius: 6px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  font-weight: 700 !important;
}

/* Quantity input */
.product-form__quantity,
.quantity-input,
.product-area__quantity input {
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* SKU / Meta info */
.product-area__sku,
.product__sku,
.product-single__sku,
.product-meta__sku {
  font-size: 12px !important;
  color: #6B7280 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Related products / You may also like */
.product-recommendations h2,
.related-products h2,
[data-section-type="product-recommendations"] h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #0052CC !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Collapsible tab content */
.product-block--collapsible .product-block__title,
.accordion__title,
.collapsible-tab__heading {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #0052CC !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

.product-block--collapsible .rte,
.accordion__content,
.collapsible-tab__content {
  font-size: 14px !important;
  color: #4B5563 !important;
  line-height: 1.6 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* ── UNIVERSAL PRODUCT PAGE OVERRIDES ──
   These target elements within ANY product page using
   body.template-product as root, covering all template variations */

/* Product title on ANY product page */
body.template-product h1,
body.template-product [class*="product-title"],
body.template-product [class*="product_name"],
body.template-product [class*="product-name"] {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  line-height: 1.3 !important;
}

/* Product price on ANY product page */
body.template-product .money,
body.template-product [class*="price"] .money,
body.template-product [class*="price-item"] {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #007AFF !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Sale price on ANY product page */
body.template-product .price--on-sale .money,
body.template-product [class*="sale"] .money,
body.template-product .price-item--sale {
  color: #DC2626 !important;
}

/* Compare/was price on ANY product page */
body.template-product .price s,
body.template-product .price del,
body.template-product [class*="compare"] .money {
  color: #6B7280 !important;
  font-size: 16px !important;
  text-decoration: line-through !important;
}

/* ATC button on ANY product page */
body.template-product [class*="submit"] button,
body.template-product button[type="submit"],
body.template-product button[name="add"],
body.template-product [class*="add-to-cart"],
body.template-product .product-form__submit {
  background: #EE7F22 !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  text-transform: uppercase !important;
  letter-spacing: .5px !important;
}

body.template-product button[name="add"]:hover,
body.template-product .product-form__submit:hover {
  background: #C96A15 !important;
}

/* Description/RTE on ANY product page */
body.template-product .rte,
body.template-product [class*="description"] {
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: #4B5563 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Variant selectors on ANY product page */
body.template-product select,
body.template-product [class*="variant"] select,
body.template-product [class*="option"] select {
  font-size: 14px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  color: #111827 !important;
}

/* Related products heading on ANY product page */
body.template-product [class*="recommendation"] h2,
body.template-product [class*="related"] h2,
body.template-product [class*="also-like"] h2 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #0052CC !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}


/* ══════════════════════════════════════════════════════════════════════
   PART 27: OVERRIDE INLINE OLD COLORS ON CUSTOM PAGES
   WHY: Some Shopify pages (Promotions, Track My Order) have inline
   HTML/CSS with old colors (#003A75, #0071CE, #F97316, #FFC220,
   Quicksand font). These CSS rules use very specific selectors with
   !important to override those inline styles.
   Updated: April 2026
══════════════════════════════════════════════════════════════════════ */

/* Override old Quicksand font anywhere on the site */
[style*="Quicksand"],
[class*="ws-"] {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Override old #003A75 navy → #0052CC */
[style*="#003A75"] { color: #0052CC !important; }
[style*="background"][style*="#003A75"] { background-color: #0052CC !important; color: #fff !important; }

/* Override old #0071CE blue → #007AFF */
[style*="#0071CE"] { color: #007AFF !important; }
[style*="background"][style*="#0071CE"] { background-color: #007AFF !important; color: #fff !important; }

/* Override old #F97316 orange → #EE7F22 */
[style*="#F97316"] { color: #EE7F22 !important; }
[style*="background"][style*="#F97316"] { background-color: #EE7F22 !important; }

/* Override old #FFC220 gold → #FFB81C */
[style*="#FFC220"] { color: #FFB81C !important; }
[style*="background"][style*="#FFC220"] { background-color: #FFB81C !important; }

/* Override old max-width: 1200px / 1280px → 1440px */
[style*="max-width: 1200px"],
[style*="max-width:1200px"],
[style*="max-width: 1280px"],
[style*="max-width:1280px"] {
  max-width: 1440px !important;
}

/* Override old colors in lowercase format (some inline styles use lowercase hex) */
[style*="#003a75"] { color: #0052CC !important; }
[style*="background"][style*="#003a75"] { background-color: #0052CC !important; color: #fff !important; }
[style*="#0071ce"] { color: #007AFF !important; }
[style*="background"][style*="#0071ce"] { background-color: #007AFF !important; color: #fff !important; }
[style*="#f97316"] { color: #EE7F22 !important; }
[style*="background"][style*="#f97316"] { background-color: #EE7F22 !important; }
[style*="#ffc220"] { color: #FFB81C !important; }
[style*="background"][style*="#ffc220"] { background-color: #FFB81C !important; }

/* Override old text colors */
[style*="#1D1D1D"] { color: #111827 !important; }
[style*="#1d1d1d"] { color: #111827 !important; }
[style*="#2E2F32"] { color: #111827 !important; }
[style*="#2e2f32"] { color: #111827 !important; }

/* Promotions page specific */
.ws-related-pages__title { color: #0052CC !important; border-left-color: #FFB81C !important; }
.ws-related-pages__card { background: #E8F0FB !important; border-color: #BFDBFE !important; color: #0052CC !important; }
.ws-related-pages__card:hover { background: #007AFF !important; color: #fff !important; border-color: #007AFF !important; }
#ws-sale-banner { background: linear-gradient(135deg, #FFB81C 0%, #EE7F22 60%, #C96A15 100%) !important; }
.ws-sale-banner__badge { background: #0052CC !important; color: #FFB81C !important; }
.ws-load-more-btn { background: #007AFF !important; }
.ws-load-more-btn:hover { background: #0052CC !important; }
.ws-show-more-tags { color: #007AFF !important; }
.ws-show-more-tags:hover { color: #0052CC !important; }

/* Track My Order page specific */
.wsto-hero { background: linear-gradient(135deg, #0052CC 0%, #007AFF 100%) !important; }
.wsto-badge { background: rgba(255, 184, 28, 0.15) !important; border-color: #FFB81C !important; color: #FFB81C !important; }
.wsto-track-card { border-color: #007AFF !important; }
.wsto-track-card h2 { color: #0052CC !important; }
.wsto-btn-primary { background: #007AFF !important; }
.wsto-btn-primary:hover { background: #0052CC !important; }
.wsto-btn-ghost { color: #007AFF !important; border-color: #007AFF !important; }
.wsto-btn-ghost:hover { background: #007AFF !important; color: #fff !important; }
.wsto-status-section h2,
.wsto-timeframes h2,
.wsto-issues h2,
.wsto-faq h2 { color: #0052CC !important; }
.wsto-timeline-step h3,
.wsto-issue-card h3 { color: #0052CC !important; }
.wsto-timeline-step.active { border-color: #EE7F22 !important; background: rgba(238, 127, 34, 0.05) !important; }
.wsto-faq-question { color: #0052CC !important; }
.wsto-cta-strip { background: #0052CC !important; }
.wsto-cta-buttons .wsto-btn-primary { background: #EE7F22 !important; }
.wsto-cta-buttons .wsto-btn-primary:hover { background: #C96A15 !important; }


/* ══════════════════════════════════════════════════════════════════════
   PART 28: MOBILE RESPONSIVE — COLLECTION + PRODUCT (v2.1)
   Universal body-level selectors ensure ALL collection/product pages
   are responsive regardless of template
══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Collection titles — all templates */
  .collection-area__title,
  .collection__title,
  .collection-hero__title,
  body.template-collection h1 { font-size: 20px !important; }

  /* Product titles — all templates */
  .product-area__title,
  .product__title,
  .product-single__title,
  body.template-product h1 { font-size: 18px !important; }

  /* Product price — all templates */
  .product__price .price-item,
  .product-area__price,
  body.template-product .money { font-size: 20px !important; }

  /* ATC button — all templates */
  .product-form__submit,
  body.template-product button[name="add"] { font-size: 15px !important; padding: 12px 20px !important; }

  /* Collection page max-width on tablet */
  body.template-collection .page-width,
  body.template-product .page-width { padding-left: 16px !important; padding-right: 16px !important; }
}

@media (max-width: 480px) {
  /* Collection title — all templates */
  .collection-area__title,
  body.template-collection h1 { font-size: 18px !important; }

  /* Product title — all templates */
  .product-area__title,
  body.template-product h1 { font-size: 16px !important; }

  /* Product price — all templates */
  .product__price .price-item,
  body.template-product .money { font-size: 18px !important; }

  /* Product card title in grid — all templates */
  .product-block__title,
  .productitem--title,
  body.template-collection [class*="title"] a { font-size: 12px !important; }

  /* Product card price in grid — all templates */
  .product-block__price,
  .productitem--price,
  body.template-collection .money { font-size: 15px !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   PART 29: SECONDARY NAV BAR + COLLECTION PAGE FIXES
   WHY: The secondary navigation bar (New Arrivals, Flash Sale, etc.)
   below the main header has wrong font size, color, and spacing.
   Also fixes collection page product card styling issues.
   Updated: April 7, 2026
══════════════════════════════════════════════════════════════════════ */

/* ── Secondary Navigation Bar (below main header) ── */
/* Empire theme uses .site-nav__bar, .main-menu, or linklist for secondary nav */
.site-header + nav,
.site-header ~ nav,
[class*="secondary-nav"],
[class*="sub-nav"],
.site-nav__bar,
.navigation-bar,
.nav-bar,
.header + .shopify-section nav,
.header__inline-menu + nav {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Secondary nav links — smaller, lighter than main nav */
.site-nav__bar a,
.navigation-bar a,
.nav-bar a,
[class*="secondary-nav"] a,
[class*="sub-nav"] a,
.header__inline-menu a,
.header + .shopify-section a,
.linklist a,
.linklist__link {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #4B5563 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

.site-nav__bar a:hover,
.navigation-bar a:hover,
.nav-bar a:hover,
[class*="secondary-nav"] a:hover,
.linklist a:hover,
.linklist__link:hover {
  color: #007AFF !important;
}

/* Fix the secondary nav container spacing */
.site-nav__bar,
.navigation-bar,
.nav-bar,
[class*="secondary-nav"],
[class*="sub-nav"] {
  padding: 8px 24px !important;
  border-bottom: 1px solid #E5E7EB !important;
  background: #fff !important;
}

/* ── Fix mega menu dropdown fonts ── */
[class*="mega-menu"] a,
[class*="megamenu"] a,
.site-nav__dropdown a,
.site-nav__childlist a,
.dropdown-menu a,
.sub-menu a,
.tiered-menu a,
.navmenu a,
[class*="submenu"] a {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #4B5563 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

[class*="mega-menu"] a:hover,
[class*="megamenu"] a:hover,
.site-nav__dropdown a:hover,
.dropdown-menu a:hover {
  color: #007AFF !important;
}

/* Mega menu headings (category names like "Construction Materials") */
[class*="mega-menu"] h3,
[class*="mega-menu"] h4,
[class*="megamenu"] h3,
[class*="megamenu"] h4,
.site-nav__dropdown-heading,
[class*="mega-menu__heading"] {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #0052CC !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Active/highlighted department in mega menu sidebar */
[class*="mega-menu"] .active,
[class*="mega-menu"] .is-active,
[class*="megamenu"] .active {
  color: #007AFF !important;
  font-weight: 700 !important;
}

/* ── Fix top announcement bar ── */
.announcement-bar *,
[class*="announcement"] *,
[data-section-type="announcement-bar"] * {
  color: #FFB81C !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* ── Fix collection page product card title link color ── */
body.template-collection .productitem--title a,
body.template-collection .product-block__title a,
body.template-collection .card__heading a {
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

body.template-collection .productitem--title a:hover,
body.template-collection .product-block__title a:hover {
  color: #007AFF !important;
}

/* ── Fix product card vendor text ── */
body.template-collection .productitem--vendor,
body.template-collection .product-block__vendor {
  font-size: 11px !important;
  color: #6B7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* ── Fix product card price on collection page ── */
body.template-collection .productitem--price .money,
body.template-collection .product-block__price .money {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #0052CC !important;
}

/* ── Fix "Out of stock" and "Notify Me" button ── */
[class*="sold-out"],
[class*="out-of-stock"],
.product-card__availability--out {
  color: #DC2626 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}

.product-form__submit--notify,
[class*="notify-me"],
button[class*="notify"],
a[class*="notify"] {
  background: #EE7F22 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 6px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* ── Fix "New" badge color ── */
.productitem--badge,
[class*="product-badge--new"],
.product-block__badge--new {
  background: #16A34A !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 3px !important;
  padding: 2px 8px !important;
}

/* ── Fix product image containers (was max-height:250px breaking images) ── */
body.template-collection [class*="product-image"],
body.template-collection [class*="product-photo"],
body.template-collection .productitem--image-container,
body.template-collection .product-block__image {
  max-height: none !important;
  overflow: visible !important;
}

/* ── Fix collection sub-category tabs (All Parts, Engine Oil Filter, etc.) ── */
.collection-area__tags a,
.collection-area__tags .tag,
.collection__sub-nav a,
[class*="subcollection"] a,
.tag-list a {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #4B5563 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

.collection-area__tags a:hover,
.collection-area__tags .tag:hover,
.collection__sub-nav a:hover {
  color: #007AFF !important;
}

.collection-area__tags .active,
.collection-area__tags .tag--active,
.collection__sub-nav .active {
  color: #007AFF !important;
  border-bottom: 2px solid #007AFF !important;
  font-weight: 700 !important;
}

/* ── Fix filter dropdowns on collection page ── */
body.template-collection .faceted-filter select,
body.template-collection .faceted-filtering select,
body.template-collection [class*="filter"] select {
  font-size: 13px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 6px !important;
  color: #4B5563 !important;
  padding: 8px 12px !important;
  background: #fff !important;
}

/* ── "All Auto Parts — 7 products" count text ── */
body.template-collection .collection-area__product-count,
body.template-collection [class*="product-count"],
body.template-collection [class*="results-count"] {
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* ── Sort dropdown ── */
body.template-collection .collection-area__sort select,
body.template-collection [class*="sort"] select {
  font-size: 13px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
  color: #4B5563 !important;
}


/* ══════════════════════════════════════════════════════════════════════
   PART 30: AUTO-DETECTED EMPIRE THEME OVERRIDES — Collection Page
   Generated by fix-collection-css.py on 2026-04-07
   Based on actual class names found in theme templates.
══════════════════════════════════════════════════════════════════════ */

/* ── 30A: Product Title Links — dark text, NOT blue ── */
body.template-collection .productgrid--no-results-title a,
body.template-collection .productgrid--sidebar-title a,
body.template-collection .productgrid--sidebar-title--small a,
body.template-collection .productgrid--sidebar-title-as-tags a,
body.template-collection .productitem--title a,
body.template-collection .product-card__title a,
body.template-collection h2.productitem--title a,
body.template-collection .productgrid--no-results-title a:link,
body.template-collection .productgrid--sidebar-title a:link,
body.template-collection .productgrid--sidebar-title--small a:link,
body.template-collection .productgrid--sidebar-title-as-tags a:link,
body.template-collection .productitem--title a:link,
body.template-collection .product-card__title a:link,
body.template-collection h2.productitem--title a:link,
body.template-collection .productgrid--no-results-title a:visited,
body.template-collection .productgrid--sidebar-title a:visited,
body.template-collection .productgrid--sidebar-title--small a:visited,
body.template-collection .productgrid--sidebar-title-as-tags a:visited,
body.template-collection .productitem--title a:visited,
body.template-collection .product-card__title a:visited,
body.template-collection h2.productitem--title a:visited {
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

body.template-collection .productgrid--no-results-title a:hover,
body.template-collection .productgrid--sidebar-title a:hover,
body.template-collection .productgrid--sidebar-title--small a:hover,
body.template-collection .productgrid--sidebar-title-as-tags a:hover,
body.template-collection .productitem--title a:hover,
body.template-collection .product-card__title a:hover,
body.template-collection h2.productitem--title a:hover {
  color: #007AFF !important;
}

/* ── 30B: Product Price — dark blue ── */
body.template-collection .productitem--listview-price,
body.template-collection .productitem--listview-price .money,
body.template-collection .ws-hub__pprice,
body.template-collection .ws-hub__pprice .money,
body.template-collection .productitem--price .money,
body.template-collection .product-card__price .money {
  color: #0052CC !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* Compare-at / was-price (strikethrough) */
body.template-collection [class*="price"] s .money,
body.template-collection [class*="price"] del .money,
body.template-collection [class*="compare"] .money {
  color: #9CA3AF !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

/* ── 30C: Vendor / Brand text ── */
body.template-collection .productitem--vendor,
body.template-collection .ws-hub__brand-chip,
body.template-collection .ws-hub__brand-shelf,
body.template-collection .ws-hub__brands-row,
body.template-collection .ws-hub__pvendor {
  font-size: 11px !important;
  color: #6B7280 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-weight: 600 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* ── 30D: Notify Me / Out of Stock Button — orange ── */
body.template-collection .settings.sold_out_options,
body.template-collection .settings.sold_out_options a,
body.template-collection .settings.sold_out_options button,
body.template-collection .sold_out_option--{{,
body.template-collection .sold_out_option--{{ a,
body.template-collection .sold_out_option--{{ button,
body.template-collection .productitem--action-oos,
body.template-collection .productitem--action-oos a,
body.template-collection .productitem--action-oos button,
body.template-collection .productitem--action-oos .atc-button {
  background: #EE7F22 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 8px 16px !important;
  text-transform: none !important;
  cursor: pointer !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

body.template-collection .settings.sold_out_options:hover,
body.template-collection .settings.sold_out_options a:hover,
body.template-collection .settings.sold_out_options button:hover,
body.template-collection .sold_out_option--{{:hover,
body.template-collection .sold_out_option--{{ a:hover,
body.template-collection .sold_out_option--{{ button:hover,
body.template-collection .productitem--action-oos:hover,
body.template-collection .productitem--action-oos a:hover,
body.template-collection .productitem--action-oos button:hover,
body.template-collection .productitem--action-oos .atc-button:hover {
  background: #D9691A !important;
  color: #fff !important;
}

/* ── 30E: Out of Stock text ── */
body.template-collection [class*="sold-out"],
body.template-collection [class*="out-of-stock"],
body.template-collection .productitem--sold-out {
  color: #DC2626 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* ── 30F: "New" badge — green ── */
body.template-collection .productitem--listview-badge,
body.template-collection .productitem--listview-badge span,
body.template-collection .ws-hub__badge--live,
body.template-collection .ws-hub__badge--live span,
body.template-collection .ws-hub__dept-badge,
body.template-collection .ws-hub__dept-badge span,
body.template-collection .ws-hub__pbadge,
body.template-collection .ws-hub__pbadge span,
body.template-collection .ws-hub__pbadge--new,
body.template-collection .ws-hub__pbadge--new span,
body.template-collection .ws-hub__pbadge--sale,
body.template-collection .ws-hub__pbadge--sale span,
body.template-collection .productitem--badge {
  background: #16A34A !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 3px !important;
  padding: 2px 8px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* ── 30G: Product Image — no height clipping ── */
body.template-collection .productitem--image,
body.template-collection .productitem--image-link,
body.template-collection .productitem__image-container,
body.template-collection .productitem--image-container {
  max-height: none !important;
  overflow: visible !important;
}

body.template-collection .productitem--image img,
body.template-collection .productitem--image-link img,
body.template-collection .productitem__image-container img,
body.template-collection .productitem--image-container img {
  max-height: none !important;
  object-fit: contain !important;
}

/* ── 30H: Collection page heading ── */
body.template-collection .collection-area__heading,
body.template-collection .collection-area__title,
body.template-collection [class*="collection"] h1 {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important;
}

/* ── 30I: Wishlist heart icon ── */
body.template-collection [class*="wishlist"] {
  color: #9CA3AF !important;
}
body.template-collection [class*="wishlist"]:hover {
  color: #EE7F22 !important;
}
/* ══════════════════════════════════════════
   PART 31: HIGH-VARIANT PRODUCT PAGE DESIGN
   WHY: Empire uses .product-form--atc-button class
   for the Add to Cart button — not targeted before.
   This is the ACTUAL Empire ATC button class name.
   Date: 2026-04-15 | Change #011
══════════════════════════════════════════ */

/* ── ATC Button — Orange filled pill ── */
.product-form--atc-button,
[data-product-atc] {
  background: #EE7F22 !important;
  background-color: #EE7F22 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 999px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 13px 28px !important;
  width: 100% !important;
  letter-spacing: 0.2px !important;
}
.product-form--atc-button:hover,
[data-product-atc]:hover {
  background: #D46D15 !important;
  background-color: #D46D15 !important;
  color: #fff !important;
}
.product-form--atc-button.disabled,
.product-form--atc-button[disabled] {
  background: #F5A56A !important;
  background-color: #F5A56A !important;
  color: #fff !important;
  opacity: 0.75 !important;
}

/* ── Product Title — League Spartan 22px ── */
.product-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: #1d1d1d !important;
  line-height: 1.2 !important;
}

/* ── Price Box — Cream background ── */
.product-pricing {
  background: #f5f3ed !important;
  border: 1px solid #dddddd !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  margin: 10px 0 !important;
}
.price__current {
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #1d1d1d !important;
  letter-spacing: -0.5px !important;
}

/* ── Mobile ── */
@media (max-width: 767px) {
  .product-form--atc-button,
  [data-product-atc] {
    font-size: 14px !important;
    padding: 12px 20px !important;
  }
  .price__current { font-size: 24px !important; }
  .product-title { font-size: 19px !important; }
}
/* ============================================================
   PART 32 — WIN STORE — Searchanise Underline Fix v10.0
   Updated: 2026-04-26 | Change #012
   Scope: ALL pages — instant search popup + full-page search results
   ============================================================ */
div.snize li.snize-product a,
div.snize li.snize-product a:hover,
div.snize li.snize-product a:visited,
li.snize-product .snize-title a,
li.snize-product a.snize-title,
div.snize li.snize-product span.snize-title a,
li.snize-product .snize-attribute a {
  text-decoration: none !important;
}
/* ============================================================
   PART 33 — WIN STORE — Homepage v4 Full-Width Fix
   Updated: 2026-05-02 | Change #013
   Scope: ws-homepage-2026-v4 section — hero & all sections
   WHY:  All previous fixes were written to custom.css which is
         NOT linked in the theme. This is the correct file.
         The hero banner must be 100% viewport width (Walmart-style).
   ============================================================ */

/* 1 — Remove forced white background on our homepage section */
#shopify-section-template--17872364830818__ws_homepage_v4_2026,
.shopify-section.ws4-homepage {
  background-color: transparent !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 2 — ws4 root div: ensure no width cap */
.ws4-homepage .ws4 {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
}

/* 3 — Hero slider: full width, no side gaps */
.ws4-homepage .ws4-hero,
.ws4-homepage .ws4-hero__slides,
.ws4-homepage .ws4-hero__slide {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.ws4-homepage .ws4-hero__slide img {
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

/* 4 — Delivery bar: full width */
.ws4-homepage .ws4-delivery {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* 5 — Override [class*=container] rule for any element inside our section */
.ws4-homepage [class*='container'],
.ws4-homepage .page-width,
.ws4-homepage .site-wrapper,
.ws4-homepage .wrapper {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 6 — Prevent h2 blue override from bleeding into our section */
.ws4-homepage h2,
.ws4-homepage h3 {
  color: inherit !important;
  font-size: inherit !important;
}

/* 7 — Section backgrounds: our design uses #F2F4F7 base, white for alt */
.ws4-homepage .ws4-section {
  background: #F2F4F7 !important;
}
.ws4-homepage .ws4-section--alt {
  background: #ffffff !important;
}

/* ============================================================
   PART 34 — WIN STORE — Hide Compare Bar
   Updated: 2026-05-08 | Change #014
   WHY: ws-cust-compare-bar shows "0 products selected" at
        bottom of every page. Feature not needed. Hide it.
   ============================================================ */
#ws-compare-bar,
.ws-cust-compare-bar {
  display: none !important;
}