/** Shopify CDN: Minification failed

Line 122:29 Unexpected "*"

**/
/* ============================================================================
   MOBILE.CSS — Invicta Tools PWA Mobile Styles
   ============================================================================

   This file loads ONLY on mobile devices (≤749px)
   All styles are root-level — no @media queries needed

   Generated: 2024-11-30

   CONTENTS:
   1. Global Mobile Overrides (from invicta-mobile-overrides.css)
   2. Product Page Mobile (from invicta-product-mobile.css)
   3. Collection Page Mobile (from invicta-collection-mobile.css)
   4. Extracted Mobile Blocks:
      - From invicta-overrides.css
      - From invicta-product.css
      - From invicta-collection.css
      - From invicta-account.css
      - From invicta-cart.css

   ============================================================================ */


/* ============================================================================
   SECTION 1: GLOBAL MOBILE OVERRIDES
   Source: invicta-mobile-overrides.css
   ============================================================================ */

/* ============================================================================
   INVICTA TOOLS — MOBILE OVERRIDES v5.2
   ============================================================================

   PURPOSE: App-like mobile experience
   SCOPE: Only affects screens ≤749px
   CONSTRAINT: Desktop layout remains 100% unchanged

   IMPORTANT: This file works WITH updated section/snippet files:
   - snippets/predictive-search-inline.liquid (v7.4) — search bar fix
   - sections/review-carousel.liquid (v2.0) — padding fix
   - sections/image-banner.liquid (v2.0) — whitespace fix
   - sections/invicta-product.liquid (v8.2) — product page
   - sections/invicta-collection.liquid (v8.1) — collection page
   - assets/invicta-product-mobile.css (v3.0) — product mobile styles
   - assets/invicta-collection-mobile.css (v1.0) — collection mobile styles

   CHANGELOG:
   v5.2 — 2025-11-28 — Added collection page exclusions (section 26)
   v5.1 — 2025-11-28 — Added product page exclusions (section 25)
   v5.0 — 2025-11-28 — Requires updated Liquid files for search/whitespace fixes
   v4.9 — 2025-11-28 — More aggressive whitespace removal (CSS only - didn't work)
   ============================================================================ */


/* ============================================================================
   1. MOBILE VARIABLES
   ============================================================================ */

  :root {
    --inv-mobile-gutter: 12px;
    --inv-mobile-section-gap: 24px;
    --inv-mobile-card-gap: 10px;
    --inv-touch-target-min: 44px;
    --inv-mobile-radius: 8px;
  }


/* ============================================================================
   2. PREVENT HORIZONTAL OVERFLOW — GLOBAL
   ============================================================================ */

  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  .page-width,
  .container,
  main,
  #MainContent {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .shopify-section,
  section,
  .section-template {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }


/* ============================================================================
   2B. REMOVE EXCESS WHITESPACE — TIGHT SECTIONS
   ============================================================================ */


  /* All Shopify sections — minimal spacing */
  /* EXCLUDES product page and collection page (handled separately) */
  .shopify-section:not(.section-invicta-product):not(:has(.inv-product)):not(.section-invicta-collection):not(:has(.inv-collection)) {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    margin: 0 !important;
  }

  /* Section padding classes — override them ALL (except product/collection) */
  [class*="-padding"]:not(.inv-product *):not(.inv-collection *),
  [class*="section-"][class*="-padding"]:not(.inv-product *):not(.inv-collection *) {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* ========== HERO BANNER — ZERO WHITESPACE ========== */

  /* The banner section itself */
  #shopify-section-template--*__image_banner,
  [id*="image-banner"],
  [id*="image_banner"],
  .shopify-section--image-banner,
  .shopify-section:has(.banner),
  .shopify-section:has(.image-banner) {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Banner element */
  .banner,
  .image-banner,
  [class*="image-banner"],
  #Banner-template,
  [id^="Banner-"] {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Banner content box */
  .banner__box,
  .banner__content {
    padding: 16px !important;
    margin: 0 !important;
  }

  /* Section AFTER the first section (banner) */
  .shopify-section:first-of-type + .shopify-section {
    padding-top: 4px !important;
    margin-top: 0 !important;
  }

  /* Review carousel — tight */
  [class^="review-carousel-"],
  [class*="review-carousel"] {
    padding: 4px 0 !important;
    margin: 0 !important;
  }

  /* Brand strip — tight */
  .invicta-brand-strip,
  [class*="brand-strip"] {
    padding: 8px 0 !important;
    margin: 0 !important;
  }

  /* Featured collections — tight */
  .featured-collection,
  [class*="featured-collection"] {
    padding: 12px 0 !important;
    margin: 0 !important;
  }

  /* Collection list — tight */
  .collection-list-wrapper {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* Page width containers — tighter gutters (except product) */
  .page-width:not(.inv-product .page-width) {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }


/* ============================================================================
   3. HIDE MEGA MENU ON MOBILE (Desktop Only)
   ============================================================================ */

  /* Hide ALL mega menu elements */
  .mega-menu-bar,
  [class*="mega-menu-bar"],
  [class*="mega-dropdown"],
  [class*="mega-item"],
  nav[class*="mega"],
  .section-mega-menu,
  .shopify-section-mega-menu,
  #shopify-section-mega-menu,
  [id*="mega-menu"],
  [id*="mega_menu"],
  div[id^="shopify-section-sections"][id*="mega"] {
    display: none !important;
    visibility: hidden ;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none ;
    position: absolute !important;
    left: -9999px !important;
  }

  /* Also hide Trade's default header drawer/hamburger */
  .header__icon--menu,
  header-drawer,
  .menu-drawer-container,
  details#Details-menu-drawer-container > summary {
    display: none !important;
  }


/* ============================================================================
   4. ANNOUNCEMENT BAR
   ============================================================================ */

  .utility-bar {
    padding-block: 6px;
  }

  .announcement-bar__message {
    font-size: 11px;
    line-height: 1.3;
  }

  .announcement-bar-slider .slider-button {
    display: none;
  }


/* ============================================================================
   5. HEADER — COMPACT + INVITING SEARCH BAR
   ============================================================================ */

  /* Sticky app-style header */
  .invicta-header {
    position: sticky;
    top: 0;
    z-index: 1000;
  }

  /* Tighter padding */
  .invicta-header__inner {
    padding: 8px 12px !important;
    gap: 10px ;
    align-items: center !important;
  }

  /* Compact logo */
  .invicta-header__logo {
    flex-shrink: 0 !important;
  }

  .invicta-header__logo img,
  .invicta-header__logo .header__heading-logo {
    height: 44px !important;
    max-height: 44px !important;
  }

  /* ========== SEARCH BAR — INVITING DESIGN ========== */

  .invicta-header__search {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .inv-search-wrapper {
    width: 100% !important;
  }

  .inv-search-form {
    width: 100% !important;
  }

  /* Input wrapper — white background, visible */
  .inv-search-input-wrap {
    height: 42px !important;
    border-radius: 21px ;
    border: none !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
  }

  /* Input field — VISIBLE with placeholder */
  .inv-search-input {
    flex: 1 !important;
    height: 100% !important;
    padding: 0 46px 0 16px !important;
    font-size: 14px !important;
    border: none !important;
    background: transparent !important;
    color: #1f2937 !important;
    border-radius: 21px ;
  }

  /* Placeholder — visible and inviting */
  .inv-search-input::placeholder {
    font-size: 14px !important;
    color: #6b7280 !important;
    opacity: 1 ;
  }

  /* Submit button — small icon inside the bar */
  .inv-search-submit {
    position: absolute !important;
    right: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) ;
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% ;
    background: #1f2937 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .inv-search-submit svg {
    width: 16px !important;
    height: 16px !important;
    color: #fff !important;
    stroke: #fff !important;
  }

  /* Clear button */
  .inv-search-clear {
    position: absolute !important;
    right: 42px !important;
    top: 50% !important;
    transform: translateY(-50%) ;
    width: 24px !important;
    height: 24px !important;
    background: transparent !important;
    border: none !important;
  }

  .inv-search-clear svg {
    width: 14px !important;
    height: 14px !important;
    color: #9ca3af !important;
  }

  /* ========== ICONS ========== */

  .invicta-header__icons {
    gap: 6px ;
    flex-shrink: 0 !important;
  }

  .invicta-header__icon {
    width: 38px !important;
    height: 38px !important;
  }

  .invicta-header__icon svg {
    width: 18px !important;
    height: 18px !important;
  }

  /* Cart badge */
  .invicta-header__badge {
    min-width: 18px !important;
    height: 18px !important;
    font-size: 10px !important;
    top: -3px !important;
    right: -3px !important;
  }

  /* Remove section margins */
  .section-header-invicta,
  [class*="header-invicta"] {
    margin: 0 !important;
    padding: 0 !important;
  }


/* ============================================================================
   5B. SECTION HEADINGS — READABLE SIZE + NO OVERFLOW
   ============================================================================ */


  /* Word wrap for all headings - but DON'T change size */
  .title,
  .title-wrapper h2,
  .inline-richtext {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word ;
  }

  /* FEATURED COLLECTION HEADINGS — BIG and readable! */
  .featured-collection .title,
  .title.h1.inline-richtext,
  .title.inline-richtext.h1,
  h2.title.inline-richtext,
  .collection__title .title,
  .title-wrapper .title,
  .title-wrapper h2,
  .collection-list-title {
    font-size: 22px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    padding: 0 12px !important;
  }

  /* Title wrapper padding */
  .title-wrapper,
  .title-wrapper-with-link,
  .title-wrapper--self-padded-mobile,
  .title-wrapper--self-padded-tablet-down {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box !important;
    margin-bottom: 12px !important;
  }


/* ============================================================================
   6. HERO / IMAGE BANNER
   ============================================================================ */

  .banner,
  .image-banner {
    min-height: auto;
  }

  .banner__box,
  .banner__content,
  [class*="banner"] [class*="content-wrapper"],
  [class*="banner"] [class*="box"] {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 16px !important;
  }

  .banner__heading {
    font-size: 24px;
    line-height: 1.2;
  }

  .banner__text {
    font-size: 14px;
  }

  .banner__buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: transparent !important;
  }

  .banner__buttons .button,
  .banner .btn,
  [class*="banner"] a.button {
    width: 100%;
    max-width: 260px;
    margin-inline: auto;
    padding: 12px 20px;
    min-height: 44px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
    background: #e11d26 !important;
    color: #ffffff !important;
    border: none !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }


/* ============================================================================
   7. PRODUCT CARDS — 2×2 GRID LAYOUT (STRICT CONTAINMENT)
   ============================================================================ */


  /* ========== FORCE 2×2 GRID WITH STRICT WIDTH ========== */

  .product-grid,
  .collection-product-list,
  .grid--2-col-tablet-down,
  .featured-collection .grid,
  .collection .grid,
  [class*="product"] .grid,
  .slider.slider--mobile,
  .slider--tablet,
  .product-grid.slider,
  .slider--mobile,
  [class*="collection"] ul.grid,
  ul.contains-card {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px ;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
    box-sizing: border-box !important;
  }

  /* Grid items — STRICT width control */
  .product-grid > *,
  .grid__item,
  .slider__slide,
  li.grid__item {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Hide slider controls on mobile */
  .slider-buttons,
  .slider-counter,
  .slider-button,
  [class*="slider-button"],
  .slideshow__controls {
    display: none !important;
  }


/* ============================================================================
   8. INVICTA PRODUCT CARD STRUCTURE
   ============================================================================ */


  /* ========== CARD WRAPPER ========== */

  .invicta-card-wrapper,
  .card-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  .invicta-card {
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    background: #ffffff !important;
    border-radius: 10px ;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }


  /* ========== CARD IMAGE ========== */

  .invicta-card-image-wrapper {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 1 / 1 ;
    padding: 8px !important;
    background: #f8f8f8 !important;
    border-radius: 10px 10px 0 0 ;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  .invicta-card-image {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    object-fit: contain ;
  }

  /* Sale badge — top left */
  .invicta-card-sale-badge {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    padding: 3px 8px !important;
    background: #e11d26 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    border-radius: 4px ;
    z-index: 3 !important;
  }


  /* ========== BRAND PILL — PULL UP ONTO IMAGE ========== */

  .invicta-card-brand-row {
    position: relative !important;
    margin-top: -38px !important;
    margin-bottom: 6px !important;
    padding: 0 8px !important;
    z-index: 10 !important;
  }

  .invicta-card-brand-row .invicta-brand-pill-wrapper {
    display: inline-flex !important;
  }

  .invicta-card-brand-row .invicta-brand-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 80px !important;
    height: 30px !important;
    padding: 5px 12px !important;
    border-radius: 999px ;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
  }

  .invicta-card-brand-row .invicta-brand-pill__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* BRAND LOGO ON CARDS — using background-image span */
  .invicta-card-brand-row .invicta-brand-pill__logo-bg {
    display: block !important;
    width: 55px !important;
    height: 16px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }

  /* Hide the img tag on cards too */
  .invicta-card-brand-row .invicta-brand-pill__logo {
    position: absolute !important;
    opacity: 0 ;
    pointer-events: none ;
    width: 1px !important;
    height: 1px !important;
  }


  /* ========== CARD CONTENT ========== */

  .invicta-card-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 6px 10px 10px !important;
    gap: 4px ;
    box-sizing: border-box !important;
  }


  /* ========== PRODUCT TITLE — STRICT 2 LINES ========== */

  .invicta-card-title {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 34px !important;
    max-height: 34px !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .invicta-card-title a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis ;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #1f2937 !important;
    text-decoration: none !important;
    max-height: 34px !important;
    word-break: break-word ;
    overflow-wrap: break-word !important;
  }


  /* ========== PRICE ROW ========== */

  .invicta-price-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 6px ;
    margin: 4px 0 !important;
  }

  .invicta-price-main {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1f2937 !important;
  }

  .invicta-price-main--sale {
    color: #e11d26 !important;
  }

  .invicta-price-compare {
    font-size: 11px !important;
    color: #9ca3af !important;
    text-decoration: line-through !important;
  }


  /* ========== BUTTONS — HIDE "SEE MORE", STYLE "ADD" ========== */

  .invicta-card-buttons {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 6px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  /* HIDE See More button */
  .invicta-card-buttons .invicta-btn--outline,
  .invicta-card-buttons a.invicta-btn--outline,
  a.invicta-btn.invicta-btn--outline {
    display: none !important;
    visibility: hidden ;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
  }

  /* STYLE Add button */
  .invicta-card-buttons .invicta-btn--solid,
  button.invicta-quick-add-pill,
  button.invicta-btn.invicta-btn--solid.invicta-quick-add-pill {
    display: inline-flex !important;
    visibility: visible ;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px ;
    width: 100% !important;
    max-width: 100% !important;
    height: 38px !important;
    padding: 0 12px !important;
    background: #e11d26 !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border: none !important;
    border-radius: 6px ;
    cursor: pointer ;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    opacity: 1 ;
    box-sizing: border-box !important;
  }

  .invicta-card-buttons .invicta-btn--solid:active,
  .invicta-quick-add-pill:active {
    background: #c91920 !important;
  }

  .invicta-quick-add-pill svg {
    width: 14px !important;
    height: 14px !important;
    stroke: #ffffff !important;
    fill: none !important;
  }

  .invicta-quick-add-pill span {
    color: #ffffff !important;
    font-size: 13px !important;
  }


/* ============================================================================
   9. TRADE THEME DEFAULT CARD STYLING (Fallback)
   ============================================================================ */


  .card-wrapper,
  .card,
  .product-card {
    border-radius: var(--inv-mobile-radius);
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .card__media,
  .card__inner {
    aspect-ratio: 1 / 1;
    border-radius: var(--inv-mobile-radius) var(--inv-mobile-radius) 0 0;
    overflow: hidden;
  }

  .card__content,
  .card-information {
    padding: 10px;
  }

  .card__heading,
  .card__heading a,
  .card-information__text {
    font-size: 13px !important;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 34px;
    margin-bottom: 4px;
    color: #1f2937;
  }

  /* Price */
  .price-item,
  .price__regular .price-item--regular {
    font-size: 15px !important;
    font-weight: 700;
    color: #1f2937;
  }

  .price__sale .price-item--sale {
    font-size: 15px !important;
    font-weight: 700;
    color: #e11d26;
  }

  .price__sale .price-item--regular,
  .price s,
  .compare-price {
    font-size: 11px !important;
    color: #9ca3af;
    text-decoration: line-through;
  }

  /* Badge */
  .badge,
  .card__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 6px;
    border-radius: 4px;
    z-index: 2;
  }

  /* Hide secondary buttons */
  .quick-add__secondary,
  .card__button--secondary,
  .button--secondary,
  [class*="see-more"],
  [class*="view-product"] {
    display: none !important;
  }

  /* Add to cart button */
  .quick-add__submit,
  button[name="add"],
  .add-to-cart-button {
    width: 100% !important;
    height: 38px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 6px ;
    background: #e11d26 !important;
    color: #ffffff !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
  }


/* ============================================================================
   10. FEATURED COLLECTION SECTIONS
   ============================================================================ */

  .featured-collection,
  [class*="featured-collection"] {
    padding: var(--inv-mobile-section-gap) 0;
  }

  .featured-collection .title,
  .collection-title,
  .section-header__title {
    font-size: 20px;
    padding-inline: var(--inv-mobile-gutter);
    margin-bottom: 16px;
  }

  .featured-collection .view-all,
  .collection__view-all {
    font-size: 13px;
    padding-inline: var(--inv-mobile-gutter);
  }


/* ============================================================================
   11. COLLECTION LIST (Category Grid) — SQUARE IMAGES + VISIBLE TITLES
   ============================================================================ */


  /* Wrapper — ensure visible */
  .collection-list-wrapper {
    display: block !important;
    visibility: visible ;
    padding: 0 12px !important;
  }

  /* Grid layout — 2 columns */
  ul.collection-list,
  .collection-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px ;
    padding: 0 !important;
    list-style: none !important;
    margin: 0 !important;
  }

  /* Each item */
  .collection-list__item,
  .collection-list > li {
    display: block !important;
    visibility: visible ;
    opacity: 1 ;
    width: 100% !important;
    position: static !important;
    left: auto !important;
    padding: 0 !important;
  }

  /* Card wrapper */
  .collection-list__item .card-wrapper,
  .collection-card-wrapper {
    display: block !important;
    width: 100% !important;
  }

  /* Card */
  .collection-list__item .card {
    display: flex !important;
    flex-direction: column !important;
    border-radius: 10px ;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
  }

  /* Card inner */
  .collection-list__item .card__inner {
    aspect-ratio: 1 / 1 ;
    --ratio-percent: 100% !important;
  }

  /* FORCE SQUARE IMAGE */
  .collection-list__item .card__media,
  .collection-list__item .media {
    aspect-ratio: 1 / 1 ;
    height: auto !important;
    overflow: hidden !important;
  }

  .collection-list__item .card__media img,
  .collection-list__item .media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover ;
  }

  /* TITLE — VISIBLE and readable */
  .collection-list__item .card__content,
  .collection-list__item .card__information {
    display: block !important;
    visibility: visible ;
    padding: 10px !important;
    background: #fff !important;
  }

  .collection-list__item .card__heading,
  .collection-list__item .card__heading a {
    display: block !important;
    visibility: visible ;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
  }

  /* Hide slider controls */
  .collection-list-wrapper .slider-buttons,
  .section-collection-list .slider-buttons {
    display: none !important;
  }

  /* Disable slider behaviour */
  .collection-list.slider,
  .collection-list.slider--tablet {
    display: grid !important;
    overflow: visible !important;
    scroll-snap-type: none !important;
  }


/* ============================================================================
   12. BRAND PILL STRIP (Top of page - 3 COLUMN GRID)
   ============================================================================ */


  /* 3-column grid layout */
  .invicta-brand-strip__grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px ;
    padding: 12px !important;
    justify-items: center !important;
  }

  /* Each item centered in cell */
  .invicta-brand-strip__item {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Container */
  .invicta-brand-strip__container {
    padding: 0 8px !important;
    max-width: 100% !important;
  }

  .invicta-brand-strip {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* Pill wrapper in strip */
  .invicta-brand-strip__item .invicta-brand-pill-wrapper {
    margin: 0 !important;
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Individual brand pills in strip — compact for 3-col */
  .invicta-brand-strip__item .invicta-brand-pill,
  .invicta-brand-strip .invicta-brand-pill,
  .invicta-brand-pill--lg {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 110px !important;
    min-width: 80px !important;
    height: 34px !important;
    padding: 6px 10px !important;
    border-radius: 999px ;
    overflow: visible !important;
  }

  .invicta-brand-pill__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
  }

  /* BRAND LOGOS IN STRIP — using background-image span */
  .invicta-brand-strip .invicta-brand-pill__logo-bg,
  .invicta-brand-strip__item .invicta-brand-pill__logo-bg {
    display: block !important;
    width: 55px !important;
    height: 18px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }

  /* Hide the img tag (we're using background now) */
  .invicta-brand-strip .invicta-brand-pill__logo,
  .invicta-brand-strip__item .invicta-brand-pill__logo {
    position: absolute !important;
    opacity: 0 ;
    pointer-events: none ;
    width: 1px !important;
    height: 1px !important;
  }


/* ============================================================================
   13. REVIEW CAROUSEL — COMPACT CARDS
   ============================================================================ */


  /* Section padding reduced */
  [class*="review-carousel-"] {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* Track — tighter gap */
  [class*="review-carousel__track"] {
    gap: 8px ;
  }

  /* Cards — COMPACT size to match smaller content */
  [class*="review-carousel__slide-"] {
    min-width: 180px !important;
    max-width: 220px !important;
    padding: 8px 10px !important;
    gap: 8px ;
    border-radius: 8px ;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important;
  }

  /* Smaller avatar */
  [class*="review-carousel__avatar-"] {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    flex-shrink: 0 !important;
  }

  [class*="review-carousel__avatar-"] img {
    width: 32px !important;
    height: 32px !important;
  }

  /* Content area */
  [class*="review-carousel__content-"] {
    min-width: 0 !important;
    flex: 1 !important;
  }

  /* Smaller text */
  [class*="review-carousel__text-"] {
    font-size: 11px !important;
    line-height: 1.3 !important;
    margin: 0 0 3px 0 !important;
  }

  /* Smaller author name */
  [class*="review-carousel__author-name-"] {
    font-size: 10px !important;
    font-weight: 600 !important;
  }

  /* Generic review/testimonial cards */
  .review-carousel,
  .testimonials,
  .testimonials-slider {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 0 12px;
  }

  .review-card,
  .testimonial-card {
    flex: 0 0 auto !important;
    width: 180px !important;
    min-width: 180px !important;
    max-width: 220px !important;
    scroll-snap-align: start;
    border-radius: 8px;
    padding: 10px;
    background: #ffffff !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
  }

  .review-card__text,
  .testimonial__text {
    font-size: 11px;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .review-card__author {
    font-size: 13px;
    font-weight: 600;
    margin-top: 12px;
  }


/* ============================================================================
   14. MULTICOLUMN
   ============================================================================ */

  .multicolumn .grid,
  .multicolumn-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px ;
  }

  .multicolumn-card__info {
    padding: 12px;
  }

  .multicolumn-card__title {
    font-size: 14px;
  }


/* ============================================================================
   15. NEWSLETTER SIGNUP
   ============================================================================ */

  .newsletter {
    padding: 32px var(--inv-mobile-gutter);
  }

  .newsletter__heading {
    font-size: 20px;
    margin-bottom: 8px;
  }

  .newsletter__subheading {
    font-size: 14px;
    margin-bottom: 16px;
  }

  .newsletter-form {
    flex-direction: column;
    gap: 10px;
  }

  .newsletter-form__field-wrapper {
    width: 100%;
  }

  .newsletter-form__field-wrapper input {
    width: 100%;
    height: 48px;
    font-size: 16px; /* Prevents iOS zoom */
    padding: 0 16px;
    border-radius: 8px;
  }

  .newsletter-form button {
    width: 100%;
    height: 48px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 8px;
  }


/* ============================================================================
   16. FOOTER
   ============================================================================ */

  .footer {
    padding: 32px var(--inv-mobile-gutter);
  }

  .footer__content-top {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .footer-block {
    width: 100% !important;
  }

  .footer-block__heading {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
  }

  .footer-block__details-content a,
  .footer__list-social a {
    font-size: 14px;
    min-height: 36px;
    display: flex;
    align-items: center;
    padding: 6px 0;
  }

  .footer__list-social {
    display: flex;
    gap: 12px;
  }

  .footer__list-social .icon {
    width: 32px;
    height: 32px;
  }

  .footer__copyright {
    font-size: 12px;
    text-align: center;
    padding-top: 24px;
    margin-top: 24px;
    border-top: 1px solid rgba(255,255,255,0.1);
  }


/* ============================================================================
   17. CART DRAWER
   ============================================================================ */

  .cart-drawer {
    width: 100% !important;
    max-width: 100% !important;
  }

  .cart-drawer__header {
    padding: 16px;
  }

  .cart-item {
    padding: 12px;
    gap: 12px;
  }

  .cart-item__image {
    width: 80px;
    height: 80px;
  }

  .cart-item__name {
    font-size: 14px;
  }

  .cart-item__price {
    font-size: 14px;
    font-weight: 700;
  }

  .cart-drawer__footer {
    padding: 16px;
  }

  .cart-drawer__footer .button {
    width: 100%;
    height: 48px;
    font-size: 14px;
    font-weight: 700;
  }


/* ============================================================================
   18. PREDICTIVE SEARCH
   ============================================================================ */

  .predictive-search,
  .predictive-search__results {
    width: 100vw !important;
    left: 50% !important;
    transform: translateX(-50%) ;
    border-radius: 0 0 8px 8px;
    max-height: 70vh;
    overflow-y: auto;
  }

  .predictive-search__result-group {
    padding: 12px;
  }

  .predictive-search__item {
    padding: 10px;
    gap: 12px;
  }

  .predictive-search__item-content {
    font-size: 14px;
  }


/* ============================================================================
   19. SECTION SPACING & PAGE WIDTH
   ============================================================================ */

  /* Page width — except product page */
  .page-width:not(.inv-product .page-width) {
    padding-inline: var(--inv-mobile-gutter);
    max-width: 100%;
  }

  /* Shopify sections — except product page */
  .shopify-section:not(.section-invicta-product):not(:has(.inv-product)),
  .section-template:not(:has(.inv-product)) {
    padding-block: var(--inv-mobile-section-gap);
  }


/* ============================================================================
   20. TOUCH TARGET & ACCESSIBILITY
   ============================================================================ */

  /* Ensure all interactive elements meet 44px minimum */
  /* Exclude product page elements which have their own sizing */
  a:not(.inv-product a):not(.inv-gallery__dot):not(.inv-zoom-modal__dot),
  button:not(.inv-product button):not(.inv-gallery__dot):not(.inv-zoom-modal__dot):not(.inv-sticky-atc__qty-btn),
  input:not(.inv-product input),
  select:not(.inv-product select),
  textarea:not(.inv-product textarea),
  [role="button"]:not(.inv-product [role="button"]),
  [role="link"]:not(.inv-product [role="link"]) {
    min-height: var(--inv-touch-target-min);
  }

  /* Input fields prevent iOS zoom */
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="tel"],
  input[type="number"],
  textarea {
    font-size: 16px !important;
  }


/* ============================================================================
   21. SHOPIFY EDITOR ARTIFACTS — HIDE
   ============================================================================ */

  .shopify-section-editor-preview-mode,
  [data-shopify-editor-block],
  .shopify-section-group-header-group ~ svg:not([class]),
  header ~ svg.icon-plus,
  .section-header__add {
    display: none !important;
  }


/* ============================================================================
   22. QUICK ADD BUTTON LOADING STATE
   ============================================================================ */

  .invicta-quick-add-pill.loading,
  .invicta-quick-add-pill[disabled] {
    opacity: 0.7 ;
    pointer-events: none ;
  }

  .invicta-quick-add-pill.loading span {
    visibility: hidden ;
  }

  .invicta-quick-add-pill.loading::after {
    content: "" !important;
    position: absolute !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-top-color: #ffffff !important;
    border-radius: 50% ;
    animation: invicta-spin 600ms linear infinite !important;
  }

@keyframes invicta-spin {
  to {
    transform: rotate(360deg);
  }
}


/* ============================================================================
   23. HIDE BROKEN IMAGES / ERROR STATES
   ============================================================================ */

  .invicta-card img[src=""],
  .invicta-card img:not([src]),
  .invicta-card img[src*="data:"],
  img.broken {
    display: none !important;
  }

  .quick-add__error,
  .error-icon,
  [class*="error"] svg {
    display: none !important;
  }


/* ============================================================================
   24. BRAND PILL LOGOS — BACKGROUND IMAGE APPROACH
   ============================================================================
   Using CSS background-image instead of <img> for better mobile compatibility.
   The brand-pill.liquid now outputs a <span class="invicta-brand-pill__logo-bg">
   with inline background-image style.
   ============================================================================ */


  /* Ensure the background span is visible and sized correctly */
  .invicta-brand-pill__logo-bg {
    display: block !important;
    visibility: visible ;
    opacity: 1 ;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }

  /* Brand strip logos — larger */
  .invicta-brand-strip .invicta-brand-pill__logo-bg,
  .invicta-brand-strip__item .invicta-brand-pill__logo-bg,
  .invicta-brand-pill--lg .invicta-brand-pill__logo-bg {
    width: 70px !important;
    height: 22px !important;
    min-width: 50px !important;
  }

  /* Product card logos — smaller */
  .invicta-card-brand-row .invicta-brand-pill__logo-bg,
  .invicta-card .invicta-brand-pill__logo-bg {
    width: 55px !important;
    height: 16px !important;
    min-width: 40px !important;
  }

  /* Hide the actual <img> tag since we're using background */
  .invicta-brand-pill__logo,
  img.invicta-brand-pill__logo {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 ;
    pointer-events: none ;
    clip: rect(0, 0, 0, 0) !important;
  }

  /* Ensure inner container shows the background span */
  .invicta-brand-pill__inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 50px !important;
    min-height: 16px !important;
    overflow: visible !important;
  }

  /* Ensure pill has proper size */
  .invicta-brand-pill {
    min-width: 80px !important;
    min-height: 30px !important;
    padding: 6px 12px !important;
    overflow: visible !important;
  }

  .invicta-brand-pill--lg {
    min-width: 100px !important;
    min-height: 38px !important;
    padding: 8px 16px !important;
  }


/* ============================================================================
   25. PRODUCT PAGE — EXCLUDE FROM GLOBAL OVERRIDES
   ============================================================================
   The product page has its own dedicated CSS file (invicta-product-mobile.css)
   which handles all mobile styling. These exclusions prevent conflicts.
   ============================================================================ */


  /* Product section controls its own padding */
  .section-invicta-product,
  .shopify-section:has(.inv-product),
  [class*="section-invicta-product"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
  }

  /* Product page controls its own gutters */
  .inv-product .page-width {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Product gallery dots — smaller than touch target minimum */
  .inv-gallery__dot,
  .inv-zoom-modal__dot {
    min-height: auto !important;
    height: 8px !important;
  }

  /* Sticky bar quantity buttons — custom sizing */
  .inv-sticky-atc__qty-btn {
    min-height: auto !important;
    height: 100% !important;
  }

  /* Product page buttons have their own sizing */
  .inv-product button,
  .inv-product a,
  .inv-product input,
  .inv-product select {
    min-height: auto;
  }

  /* Ensure sticky ATC bar has correct z-index above other elements */
  .inv-sticky-atc {
    z-index: 999 !important;
  }

  /* Zoom modal above everything */
  .inv-zoom-modal {
    z-index: 9999 !important;
  }

  /* Sticky bar safe area — ensure it's not cut off */
  .inv-sticky-atc {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Product section bottom padding for sticky bar clearance */
  .inv-product {
    padding-bottom: calc(120px + env(safe-area-inset-bottom, 0px)) !important;
  }


/* ============================================================================
   26. COLLECTION PAGE — EXCLUDE FROM GLOBAL OVERRIDES
   ============================================================================
   The collection page has its own dedicated CSS file (invicta-collection-mobile.css)
   which handles all mobile styling. These exclusions prevent conflicts.
   ============================================================================ */


  /* Collection section controls its own padding */
  .section-invicta-collection,
  .shopify-section:has(.inv-collection),
  [class*="section-invicta-collection"] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
  }

  /* Collection page controls its own gutters */
  .inv-collection .page-width {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Collection toolbar — sticky position */
  .inv-toolbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
  }

  /* Collection product grid — force 2-column */
  .inv-product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Collection filter drawer z-index */
  .inv-drawer {
    z-index: 1000 !important;
  }

  .inv-drawer-overlay {
    z-index: 999 !important;
  }

/* ============================================================================
   HEADER — REMOVE WHITE GAP BELOW
   ============================================================================ */

  /* Kill white gap between header and content */
  .shopify-section-header,
  .section-header,
  #shopify-section-header,
  header.header,
  .header-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Sticky header container */
  .shopify-section-header-sticky,
  .header-wrapper--border-bottom {
    border-bottom: none !important;
    margin-bottom: 0 !important;
  }

  /* Main content flush to header */
  main#MainContent,
  #MainContent,
  .main-content,
  main {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* First section after header */
  main .shopify-section:first-child,
  #MainContent .shopify-section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

/* ============================================================================
   COLLECTION — FORCE DRAWER HIDDEN
   ============================================================================ */

  /* Drawer — MUST be hidden by default */
  .inv-drawer {
    transform: translateY(100%) ;
    visibility: hidden ;
  }

  .inv-drawer.is-open {
    transform: translateY(0) ;
    visibility: visible ;
  }

  /* Overlay — MUST be hidden by default */
  .inv-drawer-overlay {
    opacity: 0 ;
    visibility: hidden ;
    pointer-events: none ;
  }

  .inv-drawer-overlay.is-visible {
    opacity: 1 ;
    visibility: visible ;
    pointer-events: auto ;
  }

/* ============================================================================
   HEADER — KILL WHITE GAP ON MOBILE
   ============================================================================ */

  /* Announcement bar */
  .announcement-bar-section,
  .shopify-section-announcement-bar,
  #shopify-section-announcement-bar {
    margin-bottom: 0 !important;
  }

  /* Header section */
  .shopify-section-header,
  #shopify-section-header,
  .section-header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    background: #e11d26 !important;
  }

  /* Header wrapper */
  .header-wrapper,
  header.header,
  .header {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
  }

  /* Main content — no top gap */
  #MainContent,
  main#MainContent,
  .main-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* First section flush */
  #MainContent > .shopify-section:first-child,
  main > .shopify-section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Collection section specifically */
  .section-invicta-collection,
  .shopify-section:has(.inv-collection) {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

/* ============================================================================
   ANNOUNCEMENT BAR — HIDE ON MOBILE
   ============================================================================ */

  .announcement-bar-section,
  .shopify-section-announcement-bar,
  #shopify-section-announcement-bar,
  [class*="announcement-bar"],
  .announcement-bar {
    display: none !important;
  }


/* ============================================================================
   HOMEPAGE HERO — HIDE BUTTON, IMAGE CLICKABLE
   ============================================================================ */

  /* Hide Shop Now button */
  .banner__buttons,
  .banner__button,
  .banner .button,
  .slideshow__buttons,
  .hero__buttons,
  .hero .button,
  [class*="banner"] .btn,
  [class*="banner"] .button,
  [class*="hero"] .btn,
  [class*="hero"] .button,
  .image-with-text .button,
  .image-with-text__buttons {
    display: none !important;
  }

  /* Make banner image clickable */
  .banner__media,
  .banner__box,
  .banner,
  .slideshow__slide,
  .hero__media,
  .hero,
  .image-with-text__media {
    cursor: pointer;
  }

  /* Ensure the link wrapper covers the whole image */
  .banner a,
  .hero a,
  .slideshow a {
    display: block;
    width: 100%;
    height: 100%;
  }

/* ============================================================================
   HOMEPAGE HERO — COLLAPSE WHITE SPACE
   ============================================================================ */

  /* Hide button container AND collapse space */
  .banner__buttons,
  .banner__button,
  .banner .button,
  .banner__content,
  .banner__box,
  .banner__text,
  .slideshow__text,
  .slideshow__text-wrapper,
  .hero__buttons,
  .hero__text,
  .hero__content {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Banner — image only, no padding */
  .banner,
  .slideshow,
  .hero,
  .image-banner,
  [class*="banner"],
  [class*="slideshow"],
  [class*="hero"] {
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
  }

  /* Banner inner wrapper */
  .banner__media,
  .slideshow__media,
  .hero__media {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
  }

  /* Image takes natural height */
  .banner img,
  .slideshow img,
  .hero img,
  .banner__media img,
  .slideshow__media img {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain ;
  }

  /* Kill any overlay/content wrapper */
  .banner__content-wrapper,
  .banner__inner,
  .slideshow__content,
  .hero__inner {
    display: none !important;
  }

  /* Section wrapper — no extra padding */
  .shopify-section:has(.banner),
  .shopify-section:has(.slideshow),
  .shopify-section:has(.hero) {
    padding: 0 !important;
    margin: 0 !important;
  }


/* ============================================================================
   SECTION 2: PRODUCT PAGE MOBILE
   Source: invicta-product-mobile.css
   ============================================================================ */

/* ============================================================================
   INVICTA PRODUCT PAGE — MOBILE APP DESIGN v3.0
   ============================================================================

   PURPOSE: Native app-like mobile shopping experience
   SCOPE: Only affects screens ≤749px (mobile)

   DESIGN PRINCIPLES:
   • Edge-to-edge imagery (full bleed)
   • Centered, card-based content
   • Thumb-zone optimised buttons
   • Clear visual hierarchy
   • Generous touch targets

   DEPENDENCIES: invicta-product.css (loads first)

   ============================================================================ */


/* ============================================================================
   1. CSS VARIABLES
   ============================================================================ */

  .inv-product {
    --inv-gutter: 16px;
    --inv-radius: 12px;
    --inv-radius-lg: 20px;
    --inv-shadow: 0 -8px 30px rgba(0, 0, 0, 0.1);
    --inv-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --inv-transition: 0.2s ease;
    --inv-red: #e11d26;
    --inv-red-dark: #c91b22;
    --inv-gray-50: #f9fafb;
    --inv-gray-100: #f3f4f6;
    --inv-gray-200: #e5e7eb;
    --inv-gray-500: #6b7280;
    --inv-gray-700: #374151;
    --inv-gray-900: #111827;
  }


/* ============================================================================
   2. SECTION CONTAINER — FULL WIDTH, NO SIDE PADDING
   ============================================================================ */

  .inv-product {
    padding: 0 0 130px 0 !important;
    margin: 0 !important;
    background: var(--inv-gray-50);
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  /* Remove page-width constraints for product page */
  .inv-product .page-width {
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }


/* ============================================================================
   3. MAIN GRID — VERTICAL STACK
   ============================================================================ */

  .inv-product__grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 ;
    width: 100% !important;
  }


/* ============================================================================
   4. IMAGE GALLERY — FULL BLEED, APP STYLE
   ============================================================================ */


  .inv-product__media {
    position: relative;
    width: 100%;
    background: #ffffff;
  }

  .inv-gallery {
    position: relative;
    width: 100%;
  }

  /* Main image — full width, white background */
  .inv-gallery__main {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: none;
    border-radius: 0;
    margin: 0;
  }

  .inv-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
  }

  /* Image counter — top right pill */
  .inv-gallery__counter {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 20px;
    z-index: 10;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  /* Dot indicators — bottom center */
  .inv-gallery__dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .inv-gallery__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all var(--inv-transition);
  }

  .inv-gallery__dot.is-active {
    background: #ffffff;
    width: 24px;
    border-radius: 4px;
  }

  /* Zoom button — bottom right pill */
  .inv-gallery__zoom {
    position: absolute;
    bottom: 16px;
    right: 12px;
    height: 40px;
    padding: 0 14px;
    background: rgba(255, 255, 255, 0.95);
    border: none;
    border-radius: 10px;
    box-shadow: var(--inv-shadow-sm);
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
  }

  .inv-gallery__zoom:active {
    transform: scale(0.98);
  }

  .inv-gallery__zoom svg {
    width: 18px;
    height: 18px;
    stroke: var(--inv-gray-700);
  }

  .inv-gallery__zoom span {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--inv-gray-700);
  }

  /* Thumbnails — horizontal scroll below image */
  .inv-gallery__thumbs {
    display: flex;
    gap: 8px;
    padding: 12px 16px;
    background: #ffffff;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid var(--inv-gray-100);
  }

  .inv-gallery__thumbs::-webkit-scrollbar {
    display: none;
  }

  .inv-gallery__thumbs {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .inv-gallery__thumb {
    width: 56px;
    height: 56px;
    min-width: 56px;
    flex-shrink: 0;
    scroll-snap-align: start;
    border-radius: 8px;
    border: 2px solid var(--inv-gray-200);
    overflow: hidden;
    cursor: pointer;
    background: #ffffff;
    padding: 4px;
    transition: border-color var(--inv-transition);
  }

  .inv-gallery__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .inv-gallery__thumb.is-active {
    border-color: var(--inv-red);
  }


/* ============================================================================
   5. BUY BOX — CARD THAT OVERLAPS IMAGE
   ============================================================================ */

  .inv-product__info {
    position: relative;
    background: #ffffff;
    border-radius: var(--inv-radius-lg) var(--inv-radius-lg) 0 0;
    padding: 24px var(--inv-gutter) 32px;
    margin-top: -20px;
    width: 100%;
    box-shadow: var(--inv-shadow);
    z-index: 5;
    border: none;
  }


/* ============================================================================
   6. BREADCRUMB — SUBTLE, TOP OF CARD
   ============================================================================ */

  .inv-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    color: var(--inv-gray-500);
    margin-bottom: 12px;
    flex-wrap: wrap;
  }

  .inv-breadcrumb a {
    color: var(--inv-gray-500);
    text-decoration: none;
  }

  .inv-breadcrumb a:hover {
    color: var(--inv-red);
  }

  .inv-breadcrumb span:last-child {
    color: var(--inv-gray-700);
    font-weight: 500;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .inv-breadcrumb__sep {
    color: var(--inv-gray-200);
  }


/* ============================================================================
   6B. FULL CATALOGUE BANNER
   ============================================================================ */

  .inv-full-catalogue-banner {
    margin-bottom: 16px;
  }

  .inv-full-catalogue-banner__inner {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #f8f9fa 0%, #f0f1f2 100%);
    border: 1px solid var(--inv-gray-200, #e5e5e5);
    border-radius: 10px;
  }

  .inv-full-catalogue-banner__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .inv-full-catalogue-banner__label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--inv-gray-600, #666);
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }

  .inv-full-catalogue-banner__count {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--inv-gray-800, #2d2d2d);
  }

  .inv-full-catalogue-banner__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--inv-btn-primary-bg, #2d2d2d);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: background 0.15s ease, transform 0.15s ease;
    align-self: flex-start;
  }

  .inv-full-catalogue-banner__link:hover {
    background: var(--inv-gray-700, #444);
    transform: translateX(2px);
  }

  .inv-full-catalogue-banner__link svg {
    flex-shrink: 0;
    transition: transform 0.15s ease;
  }

  .inv-full-catalogue-banner__link:hover svg {
    transform: translateX(3px);
  }


/* ============================================================================
   6C. HANDLING TIME NOTE (for non-stocked products)
   ============================================================================ */

  .inv-card__handling {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.7rem;
    color: var(--inv-gray-500, #888);
    margin-top: 2px;
  }

  .inv-card__handling svg {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    opacity: 0.7;
  }


/* ============================================================================
   7. BRAND PILL — CENTERED OR LEFT ALIGNED
   ============================================================================ */

  .inv-product__brand-pill {
    margin-bottom: 12px;
  }

  .inv-product__brand-pill .invicta-brand-pill {
    height: 36px;
    padding: 6px 16px;
  }

  .inv-product__brand-pill .invicta-brand-pill__logo,
  .inv-product__brand-pill .invicta-brand-pill__logo-bg {
    height: 20px;
  }


/* ============================================================================
   8. PRODUCT TITLE — BOLD, READABLE
   ============================================================================ */

  .inv-product__title {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--inv-gray-900);
    margin: 0 0 16px 0;
    letter-spacing: -0.02em;
  }


/* ============================================================================
   9. PRICE BLOCK — HIGH IMPACT
   ============================================================================ */

  .inv-price {
    margin-bottom: 16px;
  }

  .inv-price__row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
  }

  .inv-price__current {
    font-size: 2rem;
    font-weight: 900;
    color: var(--inv-gray-900);
    letter-spacing: -0.02em;
  }

  .inv-price__current--sale {
    color: var(--inv-red);
  }

  .inv-price__was {
    font-size: 1.1rem;
    color: var(--inv-gray-500);
    text-decoration: line-through;
  }

  /* Savings badge */
  .inv-price__saving {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    color: #15803d;
  }

  .inv-price__saving svg {
    width: 16px;
    height: 16px;
  }

  /* ============================================================================
   10. STOCK BADGE — CLEAR STATUS
   ============================================================================ */

  .inv-stock {
    margin-bottom: 20px;
  }

  .inv-stock__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 10px;
  }

  .inv-stock__badge svg {
    width: 18px;
    height: 18px;
  }

  .inv-stock__badge--in {
    background: #ecfdf5;
    color: #047857;
  }

  .inv-stock__badge--out {
    background: #fef2f2;
    color: #dc2626;
  }

  .inv-stock__badge--low {
    background: #fffbeb;
    color: #b45309;
  }


/* ============================================================================
   11. VARIANT PICKER — FULL WIDTH SELECT
   ============================================================================ */

  .inv-variants {
    margin-bottom: 20px;
  }

  .inv-variant-group {
    margin-bottom: 16px;
  }

  .inv-variant-group:last-child {
    margin-bottom: 0;
  }

  .inv-variant-group__label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--inv-gray-700);
    margin-bottom: 8px;
    text-transform: lowercase;
  }

  .inv-variant-group__label::first-letter {
    text-transform: uppercase;
  }

  .inv-variant-group__select-wrap {
    position: relative;
  }

  .inv-variant-group__select {
    width: 100%;
    height: 54px;
    padding: 0 48px 0 16px;
    font-size: 16px; /* Prevents iOS zoom */
    font-weight: 600;
    color: var(--inv-gray-900);
    background: var(--inv-gray-50);
    border: 2px solid var(--inv-gray-200);
    border-radius: var(--inv-radius);
    appearance: none;
    cursor: pointer;
    transition: border-color var(--inv-transition);
  }

  .inv-variant-group__select:focus {
    outline: none;
    border-color: var(--inv-red);
    background: #ffffff;
  }

  .inv-variant-group__chevron {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
    stroke: var(--inv-gray-500);
  }


/* ============================================================================
   12. QUANTITY + ADD TO CART — STACKED LAYOUT
   ============================================================================ */

  .inv-buy-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
  }

  /* Quantity selector — full width */
  .inv-qty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    border: 2px solid var(--inv-gray-200);
    border-radius: var(--inv-radius);
    background: #ffffff;
    overflow: hidden;
  }

  .inv-qty__btn {
    width: 64px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--inv-gray-700);
    cursor: pointer;
    transition: background var(--inv-transition);
  }

  .inv-qty__btn:active {
    background: var(--inv-gray-100);
  }

  .inv-qty__input {
    flex: 1;
    height: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--inv-gray-900);
    border: none;
    border-left: 1px solid var(--inv-gray-200);
    border-right: 1px solid var(--inv-gray-200);
    background: transparent;
    max-width: 80px;
    -moz-appearance: textfield;
  }

  .inv-qty__input::-webkit-outer-spin-button,
  .inv-qty__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* Add to Cart button — BIG and prominent */
  .inv-atc-btn {
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--inv-red, #e11d26); /* Solid colour - no gradient */
    color: #ffffff;
    border: none;
    border-radius: var(--inv-radius);
    cursor: pointer;
    font-size: 1.15rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); /* Clean subtle shadow */
    transition: all var(--inv-transition);
    position: relative;
    overflow: hidden;
  }

  .inv-atc-btn:active:not(:disabled) {
    transform: scale(0.98);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }

  .inv-atc-btn:disabled {
    background: var(--inv-gray-200);
    color: var(--inv-gray-500);
    cursor: not-allowed;
    box-shadow: none;
  }

  .inv-atc-btn__icon {
    width: 22px;
    height: 22px;
  }

  .inv-atc-btn__price {
    display: none; /* Hide on mobile for cleaner look */
  }


/* ============================================================================
   13. BUY NOW BUTTON
   ============================================================================ */

  .inv-buy-now {
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    color: var(--inv-gray-900);
    border: 2px solid var(--inv-gray-900);
    border-radius: var(--inv-radius);
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 20px;
    transition: all var(--inv-transition);
  }

  .inv-buy-now:active {
    background: var(--inv-gray-900);
    color: #ffffff;
  }


/* ============================================================================
   14. TRUST BADGES — 2 COLUMN GRID
   ============================================================================ */

  .inv-trust {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
  }

  .inv-trust__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    background: var(--inv-gray-50);
    border-radius: 10px;
  }

  .inv-trust__item svg {
    width: 28px;
    height: 28px;
    stroke: var(--inv-red);
    flex-shrink: 0;
  }

  .inv-trust__item span {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--inv-gray-700);
    line-height: 1.3;
  }


/* ============================================================================
   15. DELIVERY INFO — HIGHLIGHTED BOX
   ============================================================================ */

  .inv-delivery {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: #fffbeb;
    border-radius: var(--inv-radius);
    border: 1px solid #fef08a;
  }

  .inv-delivery__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.85rem;
    color: #92400e;
    line-height: 1.4;
  }

  .inv-delivery__row svg {
    width: 20px;
    height: 20px;
    min-width: 20px;
    stroke: #d97706;
    margin-top: 1px;
  }


/* ============================================================================
   16. SHARE BUTTON
   ============================================================================ */

  .inv-share {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    margin-top: 16px;
    background: transparent;
    border: 1px solid var(--inv-gray-200);
    border-radius: 10px;
    color: var(--inv-gray-500);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--inv-transition);
  }

  .inv-share:active {
    background: var(--inv-gray-50);
  }

  .inv-share svg {
    width: 18px;
    height: 18px;
  }


/* ============================================================================
   17. LOWER SECTION — DESCRIPTION + ACCORDIONS
   ============================================================================ */

  .inv-product__lower {
    margin-top: 0;
    padding: 24px var(--inv-gutter);
    background: var(--inv-gray-50);
  }


/* ============================================================================
   18. DESCRIPTION CARD
   ============================================================================ */

  .inv-description {
    background: #ffffff;
    border-radius: var(--inv-radius);
    border: none;
    box-shadow: var(--inv-shadow-sm);
    padding: 0;
    margin-bottom: 12px;
    overflow: hidden;
  }

  .inv-description__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    margin: 0;
    border-bottom: 1px solid var(--inv-gray-100);
  }

  .inv-description__header svg {
    width: 22px;
    height: 22px;
    stroke: var(--inv-red);
    flex-shrink: 0;
  }

  .inv-description__header h2 {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--inv-gray-900);
    margin: 0;
  }

  .inv-description__body {
    padding: 16px;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--inv-gray-700);
  }

  .inv-description__body p {
    margin-bottom: 1em;
  }

  .inv-description__body p:last-child {
    margin-bottom: 0;
  }


/* ============================================================================
   19. ACCORDION GRID
   ============================================================================ */

  .inv-accordions__grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

@media screen and (min-width: 750px) and (max-width: 999px) {
  .inv-accordions__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}


/* ============================================================================
   20. INDIVIDUAL ACCORDIONS
   ============================================================================ */

  .inv-accordion {
    background: #ffffff;
    border: none;
    border-radius: var(--inv-radius);
    box-shadow: var(--inv-shadow-sm);
    overflow: hidden;
  }

  .inv-accordion__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    min-height: 56px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
  }

  .inv-accordion__header:active {
    background: var(--inv-gray-50);
  }

  .inv-accordion__title {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
  }

  .inv-accordion__icon {
    width: 22px;
    height: 22px;
    stroke: var(--inv-red);
    flex-shrink: 0;
  }

  .inv-accordion__title span {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--inv-gray-900);
  }

  .inv-accordion__chevron {
    width: 20px;
    height: 20px;
    stroke: var(--inv-gray-500);
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }

  .inv-accordion.is-open .inv-accordion__chevron {
    transform: rotate(180deg);
  }

  .inv-accordion__content {
    display: none;
    padding: 0 16px 16px;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--inv-gray-700);
    border-top: 1px solid var(--inv-gray-100);
  }

  .inv-accordion.is-open .inv-accordion__content {
    display: block;
    padding-top: 16px;
  }

  .inv-accordion__content ul,
  .inv-accordion__content ol {
    margin: 0;
    padding-left: 20px;
  }

  .inv-accordion__content li {
    margin-bottom: 8px;
    line-height: 1.5;
  }

  .inv-accordion__content li:last-child {
    margin-bottom: 0;
  }

  /* Spec table */
  .inv-spec-table {
    width: 100%;
    border-collapse: collapse;
  }

  .inv-spec-table tr:not(:last-child) {
    border-bottom: 1px solid var(--inv-gray-100);
  }

  .inv-spec-table td {
    padding: 10px 0;
    font-size: 0.85rem;
    vertical-align: top;
  }

  .inv-spec-table td:first-child {
    font-weight: 600;
    color: var(--inv-gray-900);
    padding-right: 16px;
    width: 40%;
  }

  .inv-spec-table td:last-child {
    color: var(--inv-gray-700);
  }


/* ============================================================================
   21. RECOMMENDATIONS
   ============================================================================ */

  .inv-recs {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--inv-gray-200);
  }

  .inv-recs__title {
    font-size: 1.25rem;
    font-weight: 800;
    margin-bottom: 20px;
    text-align: center;
    color: var(--inv-gray-900);
  }

  .inv-recs__title::after {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background: var(--inv-red);
    margin: 10px auto 0;
    border-radius: 2px;
  }

  /* ============================================================================
   22. STICKY MOBILE ATC BAR
   ============================================================================ */

  .inv-sticky-atc {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 999;
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
    border-top: 1px solid var(--inv-gray-200);
  }

  .inv-sticky-atc.is-visible {
    transform: translateY(0);
  }

  .inv-sticky-atc__inner {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* Price */
  .inv-sticky-atc__price {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--inv-gray-900);
    white-space: nowrap;
    letter-spacing: -0.02em;
  }

  /* Mini quantity */
  .inv-sticky-atc__qty {
    display: flex;
    align-items: center;
    background: var(--inv-gray-100);
    border-radius: 8px;
    overflow: hidden;
    height: 44px;
  }

  .inv-sticky-atc__qty-btn {
    width: 36px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--inv-gray-700);
    cursor: pointer;
  }

  .inv-sticky-atc__qty-btn:active {
    background: var(--inv-gray-200);
  }

  .inv-sticky-atc__qty-value {
    width: 32px;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--inv-gray-900);
  }

  /* Add button */
  .inv-sticky-atc__btn {
    flex: 1;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--inv-red, #e11d26); /* Solid colour - no gradient */
    color: #ffffff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: all 0.15s ease;
  }

  .inv-sticky-atc__btn:active:not(:disabled) {
    transform: scale(0.98);
  }

  .inv-sticky-atc__btn:disabled {
    background: var(--inv-gray-200);
    color: var(--inv-gray-500);
    cursor: not-allowed;
    box-shadow: none;
  }

  .inv-sticky-atc__btn svg {
    width: 20px;
    height: 20px;
  }


/* ============================================================================
   23. LOADING & SUCCESS STATES
   ============================================================================ */

  .inv-atc-btn.is-loading,
  .inv-sticky-atc__btn.is-loading {
    position: relative;
    pointer-events: none;
  }

  .inv-atc-btn.is-loading .inv-atc-btn__text,
  .inv-atc-btn.is-loading .inv-atc-btn__icon,
  .inv-sticky-atc__btn.is-loading span,
  .inv-sticky-atc__btn.is-loading svg {
    opacity: 0;
  }

  .inv-atc-btn.is-loading::after,
  .inv-sticky-atc__btn.is-loading::after {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: inv-spin 0.6s linear infinite;
  }

  .inv-atc-btn.is-success,
  .inv-sticky-atc__btn.is-success {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    box-shadow: 0 2px 10px rgba(5, 150, 105, 0.35) !important;
  }

@keyframes inv-spin {
  to {
    transform: rotate(360deg);
  }
}


/* ============================================================================
   24. ZOOM MODAL
   ============================================================================ */

  .inv-zoom-modal {
    position: fixed !important;
    inset: 0 !important;
    background: #000000 !important;
    z-index: 9999 !important;
    display: none !important;
    flex-direction: column !important;
  }

  .inv-zoom-modal.is-open {
    display: flex !important;
  }

  .inv-zoom-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    background: rgba(0, 0, 0, 0.8);
  }

  .inv-zoom-modal__counter {
    font-size: 0.9rem;
    font-weight: 600;
    color: #ffffff;
  }

  .inv-zoom-modal__close {
    height: 40px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
  }

  .inv-zoom-modal__close svg {
    width: 20px;
    height: 20px;
    stroke: #ffffff;
  }

  .inv-zoom-modal__body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    touch-action: pinch-zoom;
  }

  .inv-zoom-modal__img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .inv-zoom-modal__nav {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    background: rgba(0, 0, 0, 0.8);
  }

  .inv-zoom-modal__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    padding: 0;
    cursor: pointer;
  }

  .inv-zoom-modal__dot.is-active {
    background: #ffffff;
  }


/* ============================================================================
   25. SAFE AREA INSETS
   ============================================================================ */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .inv-sticky-atc {
      padding-bottom: calc(12px + env(safe-area-inset-bottom));
    }

    .inv-product {
      padding-bottom: calc(130px + env(safe-area-inset-bottom)) !important;
    }
}


/* ============================================================================
   26. iOS INPUT ZOOM PREVENTION
   ============================================================================ */

  .inv-qty__input,
  .inv-variant-group__select,
  .inv-product input,
  .inv-product select {
    font-size: 16px !important;
  }


/* ============================================================================
   27. ACCESSIBILITY
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .inv-sticky-atc,
  .inv-accordion__chevron,
  .inv-gallery__dot,
  .inv-atc-btn,
  .inv-sticky-atc__btn {
    transition: none ;
  }

  .inv-atc-btn.is-loading::after,
  .inv-sticky-atc__btn.is-loading::after {
    animation: none !important;
  }
}

  .inv-atc-btn:focus-visible,
  .inv-sticky-atc__btn:focus-visible,
  .inv-buy-now:focus-visible,
  .inv-accordion__header:focus-visible {
    outline: 2px solid var(--inv-red);
    outline-offset: 2px;
  }

  .inv-gallery__dot:focus-visible,
  .inv-gallery__zoom:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
  }


/* ============================================================================
   28. PRINT
   ============================================================================ */

@media print {
  .inv-sticky-atc,
  .inv-gallery__dots,
  .inv-gallery__counter,
  .inv-gallery__zoom,
  .inv-zoom-modal,
  .inv-share {
    display: none !important;
  }
}


/* ============================================================================
   SECTION 3: COLLECTION PAGE MOBILE
   Source: invicta-collection-mobile.css
   ============================================================================ */

@media screen and (max-width: 749px) {

/* ============================================================================
   INVICTA COLLECTION — MOBILE v2.0
   ============================================================================

   App-style mobile experience for collection pages
   Scope: max-width 749px only

   Sections:
   1.  Variables
   2.  Base Container
   3.  Hero
   4.  Breadcrumb
   5.  Toolbar
   6.  Active Filters
   7.  Layout
   8.  Product Grid
   9.  Product Cards
   10. Empty State
   11. Pagination
   12. Drawer
   13. Floating Filter
   14. Back to Top
   15. Facets (inside drawer)
   16. Safe Areas
   17. Animations

   ============================================================================ */


/* ============================================================================
   1. VARIABLES
   ============================================================================ */

  .inv-collection {
    --inv-gutter: 12px;
    --inv-radius: 10px;
    --inv-red: #e11d26;
    --inv-red-dark: #c91b22;
    --inv-gray-50: #f9fafb;
    --inv-gray-100: #f3f4f6;
    --inv-gray-200: #e5e7eb;
    --inv-gray-300: #d1d5db;
    --inv-gray-400: #9ca3af;
    --inv-gray-500: #6b7280;
    --inv-gray-600: #4b5563;
    --inv-gray-700: #374151;
    --inv-gray-800: #1f2937;
    --inv-gray-900: #111827;
    --inv-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --inv-shadow: 0 1px 4px rgba(0,0,0,0.1);
    --inv-shadow-lg: 0 4px 16px rgba(0,0,0,0.15);
  }


/* ============================================================================
   2. BASE CONTAINER
   ============================================================================ */

  .inv-collection {
    background: var(--inv-gray-50);
    padding-bottom: 80px;
  }

  .inv-collection .page-width {
    padding-left: var(--inv-gutter) !important;
    padding-right: var(--inv-gutter) !important;
    max-width: 100% !important;
  }


/* ============================================================================
   3. HERO — COMPACT & CENTERED
   ============================================================================ */

  .inv-hero {
    background: var(--inv-gray-900, #111827); /* Solid colour - no gradient */
    padding: 20px var(--inv-gutter) 24px;
    text-align: center;
  }

  .inv-hero .page-width {
    padding: 0 !important;
  }

  .inv-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .inv-hero__accent {
    width: 40px;
    height: 3px;
    background: var(--inv-red);
    border-radius: 2px;
    margin-bottom: 16px;
  }

  .inv-hero__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
  }

  .inv-hero__title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    margin: 0;
    line-height: 1.2;
  }

  .inv-hero__count {
    display: inline-flex;
    padding: 4px 12px;
    background: var(--inv-red);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 20px;
  }

  .inv-hero__subheading {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 20px 0;
    line-height: 1.4;
    max-width: 300px;
  }

  /* USP Pills */
  .inv-hero__usps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
    width: 100%;
  }

  .inv-usp-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
  }

  .inv-usp-pill:active {
    background: rgba(255, 255, 255, 0.2);
  }

  .inv-usp-pill svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
  }

  /* Brand Pills */
  .inv-hero__brands {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    width: 100%;
  }

  .inv-hero__brands .inv-brand-pill {
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 20px;
    text-decoration: none;
  }

  .inv-hero__brands .inv-brand-pill.is-active {
    box-shadow: 0 0 0 2px #ffffff;
  }


/* ============================================================================
   4. BREADCRUMB
   ============================================================================ */

  .inv-breadcrumb {
    background: #ffffff;
    padding: 12px 0;
  }

  .inv-breadcrumb__list {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
  }

  .inv-breadcrumb__link {
    color: var(--inv-gray-500);
    text-decoration: none;
  }

  .inv-breadcrumb__sep {
    color: var(--inv-gray-300);
  }

  .inv-breadcrumb__current {
    color: var(--inv-gray-900);
    font-weight: 600;
  }


/* ============================================================================
   5. TOOLBAR — STICKY SINGLE ROW
   ============================================================================ */

  .inv-toolbar {
    background: #ffffff;
    border-bottom: 1px solid var(--inv-gray-200);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: box-shadow 0.2s ease;
  }

  .inv-toolbar.is-stuck {
    box-shadow: var(--inv-shadow-lg);
  }

  .inv-toolbar .page-width {
    padding: 0 var(--inv-gutter) !important;
  }

  .inv-toolbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    height: 56px;
  }

  .inv-toolbar__left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
  }

  .inv-toolbar__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  .inv-toolbar__count {
    font-size: 0.85rem;
    color: var(--inv-gray-600);
    white-space: nowrap;
  }

  .inv-toolbar__count strong {
    font-weight: 800;
    color: var(--inv-gray-900);
  }

  /* Filter Toggle Button */
  .inv-filter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    background: var(--inv-gray-900);
    color: #ffffff;
    border: none;
    border-radius: var(--inv-radius);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
  }

  .inv-filter-toggle:active {
    background: var(--inv-gray-700);
  }

  .inv-filter-toggle svg {
    width: 16px;
    height: 16px;
  }

  .inv-filter-toggle__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    background: var(--inv-red);
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 9px;
  }

  /* Sort Dropdown */
  .inv-sort {
    display: flex;
    align-items: center;
  }

  .inv-sort__label {
    display: none;
  }

  .inv-sort__select {
    height: 42px;
    padding: 0 32px 0 12px;
    background: var(--inv-gray-100);
    border: none;
    border-radius: var(--inv-radius);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--inv-gray-700);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    min-width: 120px;
  }

  .inv-sort__select:focus {
    outline: 2px solid var(--inv-red);
    outline-offset: 2px;
  }


/* ============================================================================
   6. ACTIVE FILTER CHIPS
   ============================================================================ */

  .inv-active-filters {
    background: #ffffff;
    border-bottom: 1px solid var(--inv-gray-100);
    overflow: hidden;
  }

  .inv-active-filters__inner {
    display: flex;
    gap: 8px;
    padding: 12px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .inv-active-filters__inner::-webkit-scrollbar {
    display: none;
  }

  .inv-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--inv-red);
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 20px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .inv-filter-chip svg {
    width: 12px;
    height: 12px;
  }

  .inv-clear-all {
    display: inline-flex;
    padding: 6px 12px;
    background: transparent;
    color: var(--inv-gray-500);
    font-size: 0.75rem;
    font-weight: 600;
    border: 1px solid var(--inv-gray-300);
    border-radius: 20px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
  }


/* ============================================================================
   7. LAYOUT
   ============================================================================ */

  .inv-layout {
    padding-top: 0;
  }

  .inv-layout__inner {
    display: block;
  }

  .inv-main {
    width: 100%;
  }

  /* Hide desktop sidebar */
  .inv-sidebar {
    display: none !important;
  }


/* ============================================================================
   8. PRODUCT GRID — 2 COLUMNS
   ============================================================================ */

  .inv-product-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px ;
    padding: var(--inv-gutter) 0 !important;
  }

  .inv-product-grid > * {
    width: 100% !important;
    max-width: 100% !important;
  }


/* ============================================================================
   9. PRODUCT CARDS
   ============================================================================ */

  .inv-product-card {
    background: #ffffff;
    border-radius: var(--inv-radius);
    box-shadow: var(--inv-shadow);
    overflow: hidden;
  }

  .inv-product-card .card-wrapper,
  .inv-product-card .card {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }

  /* Image */
  .inv-product-card .card__media,
  .inv-product-card .card__inner {
    aspect-ratio: 1 / 1;
    background: #ffffff;
  }

  .inv-product-card .card__media img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 8px;
  }

  /* Sale badge */
  .inv-product-card .badge,
  .inv-product-card .card__badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 4px 8px;
    background: var(--inv-red);
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 6px;
    z-index: 2;
  }

  /* Content */
  .inv-product-card .card__content,
  .inv-product-card .card-information {
    padding: 10px;
  }

  /* Title */
  .inv-product-card .card__heading,
  .inv-product-card .card__heading a {
    font-size: 0.8rem !important;
    font-weight: 600;
    line-height: 1.35;
    color: var(--inv-gray-900);
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 6px 0;
  }

  /* Price */
  .inv-product-card .price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
  }

  .inv-product-card .price-item--regular,
  .inv-product-card .price-item--sale {
    font-size: 1rem !important;
    font-weight: 800;
    color: var(--inv-gray-900);
  }

  .inv-product-card .price-item--sale {
    color: var(--inv-red) !important;
  }

  .inv-product-card .price s {
    font-size: 0.75rem !important;
    color: var(--inv-gray-500);
  }

  /* Quick add button */
  .inv-product-card .quick-add {
    margin-top: 10px;
  }

  .inv-product-card .quick-add__submit {
    width: 100%;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--inv-red) !important;
    color: #ffffff !important;
    font-size: 0.8rem !important;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
  }

  .inv-product-card .quick-add__submit:active {
    background: var(--inv-red-dark) !important;
  }

  .inv-product-card .quick-add__submit svg {
    width: 14px;
    height: 14px;
  }


/* ============================================================================
   10. EMPTY STATE
   ============================================================================ */

  .inv-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 48px 24px;
    text-align: center;
  }

  .inv-empty__icon {
    width: 64px;
    height: 64px;
    stroke: var(--inv-gray-300);
    margin-bottom: 20px;
  }

  .inv-empty__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--inv-gray-900);
    margin: 0 0 8px;
  }

  .inv-empty__text {
    font-size: 0.9rem;
    color: var(--inv-gray-500);
    margin: 0 0 24px;
  }

  .inv-empty__btn {
    height: 48px;
    padding: 0 24px;
    background: var(--inv-red);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    border-radius: var(--inv-radius);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
  }


/* ============================================================================
   11. PAGINATION
   ============================================================================ */

  .inv-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 0;
    flex-wrap: wrap;
  }

  .inv-pagination__item {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    background: #ffffff;
    border: 1px solid var(--inv-gray-200);
    border-radius: var(--inv-radius);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--inv-gray-700);
    text-decoration: none;
  }

  .inv-pagination__item--current {
    background: var(--inv-red);
    border-color: var(--inv-red);
    color: #ffffff;
  }

  .inv-pagination__item--ellipsis {
    background: transparent;
    border-color: transparent;
  }

  .inv-pagination__item--arrow svg {
    width: 18px;
    height: 18px;
  }


/* ============================================================================
   12. DRAWER — BOTTOM SHEET
   ============================================================================ */

  /* Overlay */
  .inv-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }

  .inv-drawer-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Drawer */
  .inv-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-height: 85vh;
    background: #ffffff;
    border-radius: 16px 16px 0 0;
    z-index: 999;
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .inv-drawer.is-open {
    transform: translateY(0);
  }

  /* Drag handle */
  .inv-drawer::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background: var(--inv-gray-300);
    border-radius: 2px;
  }

  /* Header */
  .inv-drawer__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 20px 16px;
    border-bottom: 1px solid var(--inv-gray-100);
    flex-shrink: 0;
  }

  .inv-drawer__title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--inv-gray-900);
  }

  .inv-drawer__close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--inv-gray-100);
    border: none;
    border-radius: var(--inv-radius);
    cursor: pointer;
  }

  .inv-drawer__close:active {
    background: var(--inv-gray-200);
  }

  .inv-drawer__close svg {
    width: 20px;
    height: 20px;
    stroke: var(--inv-gray-700);
  }

  /* Body */
  .inv-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 0 20px;
    -webkit-overflow-scrolling: touch;
  }

  /* Footer */
  .inv-drawer__footer {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--inv-gray-100);
    background: #ffffff;
    flex-shrink: 0;
  }

  .inv-drawer__reset {
    flex: 1;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 2px solid var(--inv-gray-300);
    border-radius: var(--inv-radius);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--inv-gray-700);
    text-decoration: none;
  }

  .inv-drawer__reset:active {
    background: var(--inv-gray-100);
  }

  .inv-drawer__apply {
    flex: 2;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--inv-red);
    border: none;
    border-radius: var(--inv-radius);
    font-size: 0.9rem;
    font-weight: 700;
    color: #ffffff;
    cursor: pointer;
  }

  .inv-drawer__apply:active {
    background: var(--inv-red-dark);
  }


/* ============================================================================
   13. FLOATING FILTER BUTTON
   ============================================================================ */

  .inv-floating-filter {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    background: var(--inv-gray-900);
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 700;
    border: none;
    border-radius: var(--inv-radius);
    box-shadow: var(--inv-shadow-lg);
    cursor: pointer;
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

  .inv-floating-filter.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }

  .inv-floating-filter:active {
    transform: translateX(-50%) scale(0.98);
  }

  .inv-floating-filter svg {
    width: 18px;
    height: 18px;
  }

  .inv-floating-filter__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--inv-red);
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 10px;
  }


/* ============================================================================
   14. BACK TO TOP — PILL
   ============================================================================ */

  .inv-scroll-top {
    position: fixed;
    bottom: 24px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 18px;
    background: #ffffff;
    color: var(--inv-gray-700);
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid var(--inv-gray-200);
    border-radius: var(--inv-radius);
    box-shadow: var(--inv-shadow-lg);
    cursor: pointer;
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
  }

  .inv-scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .inv-scroll-top:active {
    background: var(--inv-gray-100);
  }

  .inv-scroll-top svg {
    width: 16px;
    height: 16px;
  }


/* ============================================================================
   15. FACETS (Inside Drawer)
   ============================================================================ */

  .inv-drawer__body .inv-facet {
    border-bottom: 1px solid var(--inv-gray-100);
  }

  .inv-drawer__body .inv-facet__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--inv-gray-900);
    cursor: pointer;
    list-style: none;
  }

  .inv-drawer__body .inv-facet__header::-webkit-details-marker {
    display: none;
  }

  .inv-drawer__body .inv-facet__name {
    flex: 1;
  }

  .inv-drawer__body .inv-facet__chevron {
    width: 18px;
    height: 18px;
    stroke: var(--inv-gray-500);
    transition: transform 0.2s ease;
    flex-shrink: 0;
  }

  .inv-drawer__body .inv-facet[open] .inv-facet__chevron {
    transform: rotate(180deg);
  }

  .inv-drawer__body .inv-facet__body {
    padding-bottom: 16px;
  }

  .inv-drawer__body .inv-facet__list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 250px;
    overflow-y: auto;
  }

  .inv-drawer__body .inv-facet__item {
    margin: 0;
    padding: 0;
  }

  .inv-drawer__body .inv-facet__label-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    cursor: pointer;
  }

  .inv-drawer__body .inv-facet__checkbox {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid var(--inv-gray-300);
    background: #ffffff;
    cursor: pointer;
    flex-shrink: 0;
    appearance: none;
    -webkit-appearance: none;
  }

  .inv-drawer__body .inv-facet__checkbox:checked {
    background: var(--inv-red);
    border-color: var(--inv-red);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
  }

  .inv-drawer__body .inv-facet__checkbox:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .inv-drawer__body .inv-facet__label {
    flex: 1;
    font-size: 0.9rem;
    color: var(--inv-gray-700);
  }

  .inv-drawer__body .inv-facet__count {
    font-size: 0.8rem;
    color: var(--inv-gray-400);
  }

  /* Price Range */
  .inv-drawer__body .inv-facet__price-row {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .inv-drawer__body .inv-facet__price-field {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--inv-gray-100);
    border-radius: var(--inv-radius);
    padding: 0 12px;
    height: 48px;
  }

  .inv-drawer__body .inv-facet__price-symbol {
    color: var(--inv-gray-500);
    font-weight: 600;
    font-size: 0.9rem;
  }

  .inv-drawer__body .inv-facet__price-input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 16px;
    font-weight: 600;
    color: var(--inv-gray-900);
    padding-left: 4px;
    width: 100%;
  }

  .inv-drawer__body .inv-facet__price-input:focus {
    outline: none;
  }

  .inv-drawer__body .inv-facet__price-input::placeholder {
    color: var(--inv-gray-400);
  }

  .inv-drawer__body .inv-facet__price-sep {
    color: var(--inv-gray-400);
    font-weight: 600;
  }


/* ============================================================================
   16. SAFE AREAS
   ============================================================================ */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .inv-floating-filter {
      bottom: calc(24px + env(safe-area-inset-bottom));
    }

    .inv-scroll-top {
      bottom: calc(24px + env(safe-area-inset-bottom));
    }

    .inv-collection {
      padding-bottom: calc(80px + env(safe-area-inset-bottom));
    }
}


/* ============================================================================
   17. ANIMATIONS & ACCESSIBILITY
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
  .inv-drawer,
  .inv-drawer-overlay,
  .inv-floating-filter,
  .inv-scroll-top,
  .inv-toolbar {
    transition: none ;
  }
}

  .inv-filter-toggle:focus-visible,
  .inv-sort__select:focus-visible,
  .inv-drawer__close:focus-visible,
  .inv-drawer__apply:focus-visible,
  .inv-drawer__reset:focus-visible,
  .inv-floating-filter:focus-visible,
  .inv-scroll-top:focus-visible {
    outline: 2px solid var(--inv-red);
    outline-offset: 2px;
  }

} /* End @media (max-width: 749px) for collection mobile */


/* ============================================================================
   SECTION 4: EXTRACTED MOBILE BLOCKS
   ============================================================================ */

/* --- From invicta-overrides.css --- */

  html body .collection-list-wrapper .page-width {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  html body .collection-list-wrapper .title {
    padding-left: 32px !important;
  }

  html body .collection-list .card__heading a {
    font-size: 1.4rem !important;
  }

  html body .collection-list {
    overflow-x: auto !important;
  }

  html body .collection-list__item {
    flex: 0 0 30% !important;
  }
  html body .collection-list-wrapper .page-width {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  html body .collection-list-wrapper .title {
    font-size: 1.6rem !important;
    padding-left: 20px !important;
  }

  html body .collection-list .card__heading a {
    font-size: 1.3rem !important;
  }

  html body .collection-list__item {
    flex: 0 0 45% !important;
  }

  html body .collection-list {
    gap: 20px ;
  }
  html body .template-search .facets-wrapper,
  html body .template-collection .facets-wrapper {
    border-bottom: 1px solid #e5e7eb;
  }
  /* Kill white gap between header and content */
  .shopify-section-header,
  .section-header,
  #shopify-section-header,
  header.header,
  .header-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Sticky header container */
  .shopify-section-header-sticky,
  .header-wrapper--border-bottom {
    border-bottom: none !important;
    margin-bottom: 0 !important;
  }

  /* Main content flush to header */
  main#MainContent,
  #MainContent,
  .main-content,
  main {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* First section after header */
  main .shopify-section:first-child,
  #MainContent .shopify-section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  /* Target the Shopify section wrapper */
  .section-header-invicta,
  .shopify-section:has(.invicta-header),
  #shopify-section-sections--header,
  [id*="shopify-section"][id*="header"] {
    background: #e11d26 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Header group wrapper (if using header group) */
  #shopify-section-group-header-group,
  .shopify-section-group-header-group,
  [class*="header-group"] {
    background: #e11d26 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* The header itself */
  .invicta-header {
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Space between announcement bar and header */
  .shopify-section-announcement-bar + .section-header-invicta,
  .shopify-section-announcement-bar + .shopify-section:has(.invicta-header) {
    margin-top: 0 !important;
  }

  /* Main content flush */
  #MainContent {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }


/* --- From invicta-product.css --- */

  .inv-product__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .inv-product__info {
    padding: 24px 20px;
  }
  .inv-accordions__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .inv-accordions__grid {
    grid-template-columns: 1fr;
  }
  .inv-recs__title {
    font-size: 1.8rem;
  }
  .inv-sticky-atc {
    display: block;
  }
  .inv-product__media {
    position: relative;
    top: 0;
  }

  .inv-gallery__thumbs {
    justify-content: flex-start;
  }

  .inv-gallery__thumb {
    width: 64px;
    height: 64px;
  }

  .inv-buy-row {
    flex-direction: column;
  }

  .inv-qty {
    width: 100%;
    justify-content: center;
  }

  .inv-qty__input {
    width: 80px;
  }

  .inv-atc-btn {
    height: 56px;
    font-size: 1.05rem;
  }

  .inv-trust {
    gap: 12px;
  }

  .inv-trust__item {
    font-size: 0.9rem;
  }

  .inv-description {
    padding: 20px;
  }

  .inv-description__body {
    font-size: 1rem;
  }

  .inv-product__title {
    font-size: 1.5rem;
  }

  .inv-price__current {
    font-size: 1.8rem;
  }

  .inv-accordion__content {
    padding: 16px 20px 24px;
    font-size: 0.95rem;
  }

  .inv-accordion__title span {
    font-size: 0.9rem;
  }

  .inv-product__lower {
    margin-top: 32px;
    padding-top: 32px;
  }

  .inv-recs {
    margin-top: 48px;
    padding-top: 48px;
  }


/* --- From invicta-collection.css --- */
@media screen and (max-width: 749px) {
  .inv-collection .page-width {
    padding-left: 16px;
    padding-right: 16px;
  }
  .inv-layout__inner {
    display: block;
  }
  .inv-filter-toggle {
    display: flex;
  }
  .inv-toolbar {
    padding: 14px 16px;
  }

  .inv-toolbar__right {
    width: 100%;
    justify-content: space-between;
  }

  .inv-product-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .inv-sidebar {
    display: none;
  }
  .inv-hero {
    padding: 40px 16px 48px;
  }

  .inv-hero__title {
    font-size: 2rem;
  }

  .inv-hero__subheading {
    font-size: 1.1rem;
  }

  .inv-usp-pill {
    font-size: 0.95rem;
    padding: 12px 18px;
  }

  .inv-usp-pill svg {
    width: 18px;
    height: 18px;
  }

  .inv-brand-pill {
    padding: 10px 16px;
    font-size: 0.8rem;
  }
} /* End collection mobile overrides */


/* --- From invicta-account.css --- */
@media screen and (max-width: 749px) {
  .inv-account {
    padding: 20px 16px 60px;
  }
  .inv-account__header {
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
  }

  .inv-account__header-right {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .inv-account__stats {
    width: 100%;
    justify-content: center;
  }

  .inv-account__avatar {
    width: 56px;
    height: 56px;
    font-size: 1.3rem;
  }

  .inv-account__name {
    font-size: 1.5rem;
  }
  .inv-account__grid {
    grid-template-columns: 1fr;
  }
  .inv-orders-table thead {
    display: none;
  }

  .inv-orders-table tbody tr {
    display: flex;
    flex-direction: column;
    padding: 20px;
    margin: 12px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
  }

  .inv-orders-table tbody tr:hover {
    background: #ffffff;
  }

  .inv-orders-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border: none;
  }

  .inv-orders-table tbody td::before {
    content: attr(data-label);
    font-weight: 700;
    color: #111827;
    font-size: 0.9rem;
  }

  .inv-orders-table tbody td:first-child {
    justify-content: flex-start;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #f3f4f6;
  }

  .inv-orders-table tbody td:first-child::before {
    display: none;
  }
  .inv-recently-viewed__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .inv-recently-viewed__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .customer.order > div:nth-of-type(2) {
    grid-template-columns: 1fr;
  }


}

/* --- From invicta-cart.css --- */

  .cart__footer,
  .cart__blocks {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .js-contents:has(.totals),
  .inv-cart-totals {
    max-width: 100% !important;
    margin: 0 !important;
  }

  .inv-cart-trust {
    max-width: 100% !important;
    margin: 0 !important;
  }

  .cart__ctas {
    max-width: 100% !important;
  }
  .inv-shipping-bar,
  .inv-delivery-estimate {
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    border-radius: 0 ;
    border-left: none !important;
    border-right: none !important;
  }

  .inv-cart-trust {
    grid-template-columns: 1fr !important;
  }

  cart-items .title--primary {
    font-size: 2.2rem !important;
  }

  .totals__total-value {
    font-size: 2rem !important;
  }

  .cart-item__image-container {
    width: 110px !important;
    min-width: 110px !important;
  }

  .cart-item__name {
    font-size: 1.25rem !important;
  }


/* ============================================================================
   FIXES — Collection Page Bug Fixes (Nov 2024)
   ============================================================================ */

/* === FIX: Sold Out button accessibility ===
   Darker text for small mobile screens to ensure readability.
   #4b5563 on #e5e7eb = 5.74:1 contrast (PASSES WCAG AA & AAA)
*/
.invicta-btn--disabled,
.invicta-card-buttons .invicta-btn--disabled {
  background: #e5e7eb !important;
  color: #4b5563 !important;
  border: 1px solid #d1d5db !important;
  font-weight: 600 !important;
  cursor: not-allowed ;
}

/* === FIX: Position mobile filter FAB correctly ===
   Ensure the Trade mobile filter button sits properly in bottom-left
*/
.mobile-facets__open-wrapper {
  position: fixed !important;
  bottom: 16px !important;
  left: 16px !important;
  z-index: 100 !important;
}

.mobile-facets__open {
  background: var(--color-button, #dc2626) !important;
  color: #fff !important;
  border-radius: 999px ;
  padding: 12px 20px !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}


/* === FIX: Hide broken zoom modal image (empty src) === */
.inv-zoom-modal__img[src=""],
.inv-zoom-modal__img:not([src]) {
  display: none !important;
}


/* ============================================================================
   FIX v2.4: Search Bar, Sticky ATC, and Recommendations Cards
   ============================================================================ */

/* === FIX 1: Search bar text overflow ===
   Prevent placeholder and input text from overflowing on narrow screens
*/
html body .inv-search-input-wrap {
  max-width: 100% !important;
  overflow: hidden !important;
}

html body .inv-search-input {
  text-overflow: ellipsis ;
  white-space: nowrap !important;
  overflow: hidden !important;
  max-width: calc(100% - 46px) !important;
}

html body .inv-search-input::placeholder {
  text-overflow: ellipsis ;
}

/* === FIX 2: Sticky ATC bar quantity controls ===
   Ensure all quantity elements are visible and properly sized
*/
html body .inv-sticky-atc__qty {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  min-width: 104px !important;
  background: #f3f4f6 !important;
  border-radius: 8px ;
  overflow: visible !important;
  height: 44px !important;
}

html body .inv-sticky-atc__qty-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 100% !important;
  background: transparent !important;
  border: none !important;
  font-size: 1.25rem !important;
  font-weight: 500 !important;
  color: #374151 !important;
  cursor: pointer ;
  flex-shrink: 0 !important;
}

html body .inv-sticky-atc__qty-value {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  min-width: 32px !important;
  height: 100% !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  flex-shrink: 0 !important;
}

/* === FIX 3: Recommendations section cards ===
   Ensure product cards in "You May Also Like" render correctly
*/

/* Grid item wrapper */
html body .inv-recs__item {
  width: 100% !important;
  min-width: 0 !important;
}

/* Card image in recs — fill container properly */
html body .inv-recs__item .invicta-card-image-wrapper {
  aspect-ratio: 1 / 1 ;
  width: 100% !important;
  padding: 12px !important;
  background: #ffffff !important;
  border-radius: 12px 12px 0 0 ;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body .inv-recs__item .invicta-card-image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain ;
}

/* Brand pill in recs — ensure logo background renders */
html body .inv-recs__item .invicta-brand-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 80px !important;
  height: 30px !important;
  padding: 4px 12px !important;
  border-radius: 999px ;
  background-color: var(--pill-bg, #dc2626) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

html body .inv-recs__item .invicta-brand-pill__inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

/* Force logo-bg to show with proper dimensions */
html body .inv-recs__item .invicta-brand-pill__logo-bg {
  display: block !important;
  width: 55px !important;
  height: 18px !important;
  min-width: 40px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  visibility: visible ;
  opacity: 1 ;
}

/* Card content spacing in recs */
html body .inv-recs__item .invicta-card-content {
  padding: 12px !important;
}

html body .inv-recs__item .invicta-card-title {
  font-size: 0.85rem !important;
  line-height: 1.3 !important;
  margin-bottom: 8px !important;
}

/* Card buttons in recs */
html body .inv-recs__item .invicta-card-buttons {
  margin-top: auto !important;
  padding-top: 8px !important;
}

html body .inv-recs__item .invicta-btn--outline {
  height: 40px !important;
  font-size: 0.8rem !important;
}


/* ============================================================================
   FIX v2.5: Recommendations Cards — Titles, Prices, Brand Logos, Sticky Bar
   ============================================================================ */

/* === TITLES — Make them larger and readable === */
html body .inv-recs__item .invicta-card-title,
html body .inv-recs .invicta-card-title {
  min-height: 44px !important;
  max-height: 44px !important;
  margin-bottom: 8px !important;
}

html body .inv-recs__item .invicta-card-title a,
html body .inv-recs .invicta-card-title a {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: #1f2937 !important;
  -webkit-line-clamp: 2 !important;
  max-height: 44px !important;
}

/* === SALE PRICE — Force red color === */
html body .inv-recs__item .invicta-price-main--sale,
html body .inv-recs .invicta-price-main--sale,
html body .inv-recs__item .invicta-price-row--sale .invicta-price-main {
  color: #dc2626 !important;
}

html body .inv-recs__item .invicta-price-main,
html body .inv-recs .invicta-price-main {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
}

html body .inv-recs__item .invicta-price-compare,
html body .inv-recs .invicta-price-compare {
  font-size: 0.85rem !important;
  color: #9ca3af !important;
  text-decoration: line-through !important;
}

/* === BRAND PILL LOGO — Nuclear option to force visibility === */
html body .inv-recs__item .invicta-brand-pill__logo-bg,
html body .inv-recs .invicta-brand-pill__logo-bg,
html body .inv-recs__item .invicta-card-brand-row .invicta-brand-pill__logo-bg {
  display: block !important;
  visibility: visible ;
  opacity: 1 ;
  width: 60px !important;
  height: 20px !important;
  min-width: 50px !important;
  min-height: 16px !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  /* Ensure inline style background-image is not blocked */
  filter: none ;
  -webkit-filter: none ;
}

/* Ensure the pill container shows properly */
html body .inv-recs__item .invicta-brand-pill,
html body .inv-recs .invicta-brand-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 85px !important;
  min-height: 32px !important;
  padding: 6px 14px !important;
  border-radius: 999px ;
  overflow: visible !important;
}

html body .inv-recs__item .invicta-brand-pill__inner,
html body .inv-recs .invicta-brand-pill__inner {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 50px !important;
  height: auto !important;
  min-height: 16px !important;
  overflow: visible !important;
}

/* === STICKY BAR ADD BUTTON — Ensure proper fit === */
html body .inv-sticky-atc__inner {
  display: flex !important;
  align-items: center !important;
  gap: 10px ;
  width: 100% !important;
}

html body .inv-sticky-atc__btn {
  flex: 1 !important;
  min-width: 0 !important;
  height: 48px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px ;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

html body .inv-sticky-atc__btn span {
  display: inline !important;
}

html body .inv-sticky-atc__btn svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
}


/* === BRAND PILL LOGO — Show IMG instead of BG for better compatibility === */
html body .inv-recs__item .invicta-brand-pill__logo,
html body .inv-recs .invicta-brand-pill__logo,
html body .inv-recs__item .invicta-card-brand-row .invicta-brand-pill__logo,
html body .inv-recs .invicta-card-brand-row .invicta-brand-pill__logo {
  position: relative !important;
  display: block !important;
  width: 55px !important;
  height: 18px !important;
  opacity: 1 ;
  visibility: visible ;
  pointer-events: auto ;
  clip: auto !important;
  object-fit: contain ;
}

/* Hide the bg span in recs since we're using img */
html body .inv-recs__item .invicta-brand-pill__logo-bg,
html body .inv-recs .invicta-brand-pill__logo-bg {
  display: none !important;
}

/* ==========================================================================
   LOGIN / CUSTOMER FORM FIXES (v2.6)
   Issue: Labels showing twice - as placeholder AND beside input
   Fix: Hide the label when placeholder is visible, show as floating label on focus
   ========================================================================== */

/* Hide labels by default on customer forms - placeholder handles empty state */
.customer .field label:not(.field__label) {
  position: absolute !important;
  top: 50% !important;
  left: 1.5rem !important;
  transform: translateY(-50%) ;
  font-size: 1.4rem !important;
  color: rgba(var(--color-foreground), 0.6) !important;
  pointer-events: none ;
  transition: all 0.2s ease ;
  /* Hide when placeholder is showing */
  opacity: 0 ;
  visibility: hidden ;
}

/* Show label as floating when input has value or focus */
.customer .field input:focus ~ label:not(.field__label),
.customer .field input:not(:placeholder-shown) ~ label:not(.field__label) {
  top: 0.8rem !important;
  transform: translateY(0) ;
  font-size: 1.1rem !important;
  opacity: 1 ;
  visibility: visible ;
  color: rgba(var(--color-foreground), 0.7) !important;
}

/* Ensure field container is positioned for absolute label */
.customer .field {
  position: relative !important;
}

/* Adjust input padding to make room for floating label */
.customer .field input {
  padding: 1.8rem 1.5rem 0.8rem !important;
}

/* Fix placeholder color */
.customer .field input::placeholder {
  color: rgba(var(--color-foreground), 0.5) !important;
}

/* Sign in with Shop button - ensure proper width */
.customer .shopify-cleanslate {
  width: 100% !important;
  max-width: 100% !important;
}

/* Login form button styling */
.customer form button[type="submit"],
.customer form button:not([type]) {
  width: 100% !important;
  max-width: 280px !important;
  margin: 2rem auto !important;
  display: block !important;
}

/* Create account / Cancel links */
.customer a {
  display: inline-block !important;
  margin-top: 1rem !important;
}

/* ==========================================================================
   PART 1: VAT TOGGLE, QUANTITY ENHANCER, CART BREAKDOWN (v2.7)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Quick Quantity Selector
   -------------------------------------------------------------------------- */

.invicta-quick-qty {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.invicta-quick-qty__label {
  font-size: 0.85rem;
  color: #6b7280;
  font-weight: 500;
}

.invicta-quick-qty__buttons {
  display: flex;
  gap: 6px;
}

.invicta-quick-qty__btn {
  min-width: 44px;
  height: 36px;
  padding: 0 12px;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.invicta-quick-qty__btn:hover {
  background: #e5e7eb;
  border-color: #d1d5db;
}

.invicta-quick-qty__btn:active,
.invicta-quick-qty__btn--clicked {
  transform: scale(0.95);
}

.invicta-quick-qty__btn--active {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #fff !important;
}

/* --------------------------------------------------------------------------
   Dynamic Quantity Total
   -------------------------------------------------------------------------- */

.invicta-qty-total {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 14px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
}

.invicta-qty-total__label {
  font-size: 0.9rem;
  color: #6b7280;
  font-weight: 500;
}

.invicta-qty-total__value {
  font-size: 1.2rem;
  font-weight: 700;
  color: #dc2626;
}

/* --------------------------------------------------------------------------
   Cart Subtotal Breakdown
   -------------------------------------------------------------------------- */

.invicta-cart-breakdown {
  padding: 16px 0;
  border-top: 1px solid #e5e7eb;
  margin-top: 16px;
}

.invicta-cart-breakdown__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  font-size: 0.95rem;
}

.invicta-cart-breakdown__row--subtotal {
  color: #6b7280;
}

.invicta-cart-breakdown__row--vat {
  color: #6b7280;
  font-size: 0.9rem;
}

.invicta-cart-breakdown__row--shipping {
  color: #6b7280;
  font-size: 0.9rem;
}

.invicta-cart-breakdown__row--discount {
  color: #059669;
  font-weight: 500;
}

.invicta-cart-breakdown__row--total {
  font-weight: 700;
  font-size: 1.1rem;
  color: #1f2937;
  padding-top: 12px;
  margin-top: 8px;
  border-top: 2px solid #1f2937;
}

.invicta-cart-breakdown__label {
  flex: 1;
}

.invicta-cart-breakdown__value {
  font-weight: 500;
  text-align: right;
}

.invicta-cart-breakdown__value--negative {
  color: #059669;
}

/* VAT mode indicator */
.invicta-vat-indicator {
  font-size: 0.8rem;
  color: #6b7280;
  text-align: center;
  padding: 8px 0;
  background: #f9fafb;
  border-radius: 4px;
  margin-bottom: 12px;
}

/* --------------------------------------------------------------------------
   Body VAT Mode Classes
   -------------------------------------------------------------------------- */

body.vat-mode-ex .invicta-vat-indicator::after {
  content: ' (showing ex VAT)';
}

body.vat-mode-inc .invicta-vat-indicator::after {
  content: ' (showing inc VAT)';
}

/* ==========================================================================
   PART 4: ACCOUNT PAGE - COMPANY SETTINGS & INVOICES (v2.7)
   ========================================================================== */

/* Company Settings Form */
.inv-account__company,
.inv-account__invoices {
  margin-top: 20px;
}

.inv-detail-group--editable {
  margin-bottom: 16px;
}

.inv-detail-group--editable .inv-detail-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  font-weight: 500;
}

.inv-detail-group--editable .inv-detail-label small {
  font-weight: 400;
  color: #9ca3af;
}

.inv-detail-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.inv-detail-input:focus {
  outline: none;
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.inv-company-form__note {
  margin: 16px 0 0;
  padding: 10px 12px;
  background: #f9fafb;
  border-radius: 6px;
  font-size: 0.85rem;
  color: #6b7280;
}

/* Invoice Downloads */
.inv-invoices__intro {
  margin: 0 0 16px;
  font-size: 0.95rem;
  color: #4b5563;
}

.inv-invoices__intro a {
  color: #dc2626;
  text-decoration: underline;
}

.inv-invoices__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.inv-invoice-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #e5e7eb;
}

.inv-invoice-row:last-child {
  border-bottom: none;
}

.inv-invoice-row__info {
  flex: 1;
  min-width: 120px;
}

.inv-invoice-row__order {
  display: block;
  font-weight: 600;
  color: #1f2937;
}

.inv-invoice-row__date {
  font-size: 0.85rem;
  color: #6b7280;
}

.inv-invoice-row__total {
  font-weight: 600;
  color: #059669;
}

.inv-invoice-row__actions {
  display: flex;
  gap: 8px;
}

.inv-btn--sm {
  padding: 6px 12px !important;
  font-size: 0.85rem !important;
}

.inv-invoices__note {
  margin: 16px 0 0;
  font-size: 0.85rem;
  color: #6b7280;
  text-align: center;
}
/* ==========================================================================
   INVICTA TRADE FEATURES v2.8 - CSS FIXES
   ==========================================================================

   This file patches the following issues:
   1. VAT toggle - compact button pair style
   2. Cart breakdown - horizontal grid layout with bold typography
   3. Cart quantity buttons - matching Trade's native sizing
   4. Cart footer - proper 3-column grid layout

   ADD THIS TO THE END OF mobile.css AND desktop.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VAT TOGGLE - Compact Button Pair
   -------------------------------------------------------------------------- */

.inv-vat-toggle {
  display: inline-flex;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.75rem;
}

.inv-vat-toggle__btn {
  padding: 6px 12px;
  border: none;
  background: #f9fafb;
  color: #6b7280;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}

.inv-vat-toggle__btn:first-child {
  border-right: 1px solid #d1d5db;
}

.inv-vat-toggle__btn[aria-pressed="true"],
.inv-vat-toggle__btn--active {
  background: #dc2626;
  color: #ffffff;
}

.inv-vat-toggle__btn:hover:not([aria-pressed="true"]) {
  background: #f3f4f6;
}

/* Placement on product page - inline with price */
.product .inv-vat-toggle {
  margin-left: 12px;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   3. CART QUANTITY BUTTONS - Match Trade's Native Sizing
   -------------------------------------------------------------------------- */

/* Fix cart quantity wrapper - ensure proper flex display */
.cart-item .quantity,
.cart-item .cart-quantity,
.cart-item quantity-input {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  overflow: hidden;
  height: 44px;
}

/* Fix cart quantity buttons - proper sizing */
.cart-item .quantity__button,
.cart-item .inv-qty-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border: none;
  background: transparent;
  color: #374151;
  cursor: pointer;
  transition: background 0.15s ease;
}

.cart-item .quantity__button:hover,
.cart-item .inv-qty-btn:hover {
  background: #f3f4f6;
}

.cart-item .quantity__button svg,
.cart-item .inv-qty-btn svg {
  width: 14px;
  height: 14px;
}

/* Fix cart quantity input */
.cart-item .quantity__input,
.cart-item .inv-qty-input {
  width: 50px;
  min-width: 50px;
  height: 100%;
  padding: 0;
  border: none;
  border-left: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  background: transparent;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  -moz-appearance: textfield;
}

.cart-item .quantity__input::-webkit-outer-spin-button,
.cart-item .quantity__input::-webkit-inner-spin-button,
.cart-item .inv-qty-input::-webkit-outer-spin-button,
.cart-item .inv-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --------------------------------------------------------------------------
   4. CART FOOTER - 3-Column Grid Layout
   -------------------------------------------------------------------------- */

/* Main cart blocks container - horizontal layout */
.cart__blocks,
.inv-cart-blocks {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 24px;
  align-items: start;
}

/* Totals column - left side with breakdown */
.inv-cart-totals,
.cart__blocks .js-contents {
  grid-column: 1;
}

/* Trust badges - center */
.inv-cart-trust {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 24px;
  border-left: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
}

.inv-cart-trust__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #4b5563;
}

.inv-cart-trust__item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: #059669;
}

/* Checkout buttons - right side */
.cart__ctas,
.inv-cart-ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 280px;
}

/* Checkout button - prominent */
.inv-checkout-btn,
.cart__checkout-button {
  width: 100%;
  height: 56px;
  font-size: 1.1rem;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   5. MOBILE RESPONSIVE - Stack on small screens
   -------------------------------------------------------------------------- */

@media screen and (max-width: 989px) {
  .cart__blocks,
  .inv-cart-blocks {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .inv-cart-trust {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding: 16px 0;
    border-left: none;
    border-right: none;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
  }

  .inv-cart-trust__item {
    flex: 0 0 auto;
  }

  .cart__ctas,
  .inv-cart-ctas {
    min-width: unset;
  }

  }


/* --------------------------------------------------------------------------
   6. QUICK QTY BUTTONS - Product Page
   -------------------------------------------------------------------------- */

.invicta-quick-qty {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.invicta-quick-qty__label {
  font-size: 0.85rem;
  color: #6b7280;
}

.invicta-quick-qty__buttons {
  display: flex;
  gap: 6px;
}

.invicta-quick-qty__btn {
  padding: 8px 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #f9fafb;
  font-size: 0.85rem;
  font-weight: 600;
  color: #374151;
  cursor: pointer;
  transition: all 0.15s ease;
}

.invicta-quick-qty__btn:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.invicta-quick-qty__btn--active {
  background: #dc2626;
  border-color: #dc2626;
  color: #ffffff;
}

/* Dynamic total display */
.invicta-dynamic-total {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 12px;
  padding: 6px 12px;
  background: #fef2f2;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #dc2626;
}