/** Shopify CDN: Minification failed

Line 274:14 Expected identifier but found whitespace
Line 275:179 Unexpected "/"

**/
/* ============================================================
   CRC CUSTOM STYLES
   All custom overrides for Common Rail Cowboys theme.
   Load via: {{ 'crc-styles.css' | asset_url | stylesheet_tag }}
   ============================================================ */


/* ── GLOBAL VARIABLES ── */
:root {
  --crc-nav-hover: #e60000;           /* CRC red — used for nav hover colour */
}


/* ── BUTTONS ── */

/* Removes border-radius from all button types sitewide,
   while keeping overflow hidden so content doesn't spill */
.button,
.button--primary,
.button--secondary,
.btn,
button,
.shopify-payment-button__button,
.shopify-payment-button__button--unbranded {
  overflow: hidden;
}


/* ── NAVIGATION HOVER ── */

/* Smooth colour transition on all nav links (desktop + mobile drawer) */
.header__inline-menu a,
summary.header__menu-item,
.list-menu__item > a,
.menu-drawer__menu a {
  transition: color 0.3s ease;
}

/* Turns nav links CRC red on hover or keyboard focus */
.header__inline-menu a:hover,
summary.header__menu-item:hover,
.list-menu__item > a:hover,
.menu-drawer__menu a:hover,
.header__inline-menu a:focus-visible,
summary.header__menu-item:focus-visible,
.menu-drawer__menu a:focus-visible {
  color: var(--crc-nav-hover) !important;
}


/* ── CRC INFO CARD ── */

/* Styled container on product pages grouping payment icons,
   shipping info, and other trust elements */
.crc-info-card {
  border: 1px solid #f4c542;          /* Yellow border matching CRC brand colour */
  border-radius: 5px;                  /* Slightly rounded corners */
  padding: 5px;                        /* Inner breathing room */
  margin-bottom: 14px;                 /* Space below the card before next element */
  background: #f9f9f9;                /* Light grey background to lift it off the page */
}

/* Adds vertical spacing between any direct children inside the card */
.crc-info-card > * + * {
  margin-top: 10px;
}

/* ── Mobile only (screens 749px and below) ── */
@media (max-width: 749px) {

  /* Makes payment icons and BNPL terms scroll horizontally
     on small screens instead of wrapping onto multiple lines */
  .crc-info-card .product__payment-icons,
  .crc-info-card .shopify-payment-terms__container {
    display: flex;
    flex-wrap: nowrap;          /* Prevents icons from wrapping */
    overflow-x: auto;           /* Enables horizontal scroll if they overflow */
    gap: 6px;                   /* Space between each icon */
    white-space: nowrap;        /* Stops text/inline elements from breaking */
  }

  /* Constrains payment icon image height on mobile */
  .crc-info-card .product__payment-icons img {
    height: 20px;
  }
}


/* ── KLARNA WIDGET ── */

/* Removes the white background, border box, and outline
   that Klarna renders around its payment widget */
.klarna-badge-wrapper,
.klarna-placement,
klarna-placement,
klarna-placement[data-theme="light"] {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
  padding: 0 !important;
}

/* Forces shadow DOM host to inherit transparent background */
klarna-placement::part(osm-container),
klarna-placement::part(badge) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}


/* ── HUMM WIDGET ── */

/* Hides the (total payable $x.xx) span — the Humm logo lives inside
   this span so it gets hidden too, and is added back via pseudo-element */
.humm-description .humm-main.wrap .flexi-nowrap:last-child {
  display: none !important;
}

/* Adds Humm logo back inline after the fortnightly payments text */
.humm-description .humm-main.wrap .flexi-nowrap:first-child::after {
  content: '';
  display: inline-block;
  background-image: url('https://bpi.humm-au.com/au/content/images/logo-orange.svg');
  background-repeat: no-repeat;
  background-size: contain;
  width: 70px;             /* increase width */
  height: 24px;            /* increase height */
  vertical-align: middle;
  margin-left: 6px;
  position: relative;
  top: 4px;                /* nudge down — increase this value to move further down */
}


/* ══════════════════════════════════════════════════════════
   ── MOBILE TEXT US SIDE TAB ──
   
   WHAT THIS DOES:
   On mobile (≤749px), hides the Coax floating chat bubble and
   replaces it with a custom black "Text Us" tab pinned to the
   right edge of the screen. Tapping it calls window.openCoaxWidget()
   to open the Coax chat — same as tapping the original bubble.
   
   Desktop is completely unaffected — Coax bubble shows as normal.
   
   HOW TO REVERT TO STANDARD (remove this tab):
   1. Delete the entire section between the ==== markers
   2. The Coax bubble will reappear on mobile automatically
   
   CLASSES TARGETED (confirmed via console on 21 Mar 2026):
   - .coax-widget-bubble     — Coax bubble button div (hidden visually)
   - ._coax_chat_widget_bubble_button — Coax actual button (hidden visually)
   - .coax-iframe-container is NOT hidden — keeps the widget functional
   ══════════════════════════════════════════════════════════ */

@media (max-width: 749px) {

  /* Hide only the bubble button visually — NOT the iframe container
     so the widget still loads and openCoaxWidget() still works */
  .coax-widget-bubble,
  ._coax_chat_widget_bubble_button {
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* ── Hit area and old elements — remove any leftovers ── */
  .crc-sms-hit,
  .crc-sms-tab,
  .crc-textus-visual,
  .crc-textus-rail {
    display: none !important;
  }

  .crc-textus-shell {
    position: fixed;
    right: 0;
    top: 0; /* overridden by JS */
    z-index: 2147483000;
    width: 42px;
    height: 144px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0;
    margin: 0;
    border: 0;
    border-radius: 10px 0 0 10px;
    background: #111;
    color: #fff;
    box-shadow: -2px 0 12px rgba(0,0,0,.3);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: pan-y;
    transform: translateX(0);
    transition: transform 220ms ease, opacity 220ms ease;
    will-change: transform;
    white-space: nowrap;
    overflow: visible;
    visibility: hidden; /* hidden until JS sets correct top position */
  }

  /* Extend hit area 60px to the left invisibly */
  .crc-textus-shell::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 100%;
    width: 60px;
  }

  /* Text rotated so it reads bottom-to-top */
  .crc-textus-shell span {
    transform: rotate(180deg);
  }

  .crc-textus-shell.is-collapsed {
    transform: translateX(calc(100% - 8px));
  }

  /* Icon pinned to top (visually), counter-rotated */
  .crc-textus-shell svg {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%) rotate(-90deg);
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
  }
}

/* Hide on desktop — mobile only */
@media (min-width: 750px) {
  .crc-sms-tab,
  .crc-textus-shell,
  .crc-textus-visual,
  .crc-textus-rail {
    display: none !important;
  }
}

/* ══════════════════════════════════════════════════════════
   END MOBILE TEXT US SIDE TAB
   ══════════════════════════════════════════════════════════ */


/* ── HIDE CART CHECKOUT BUTTON (uncomment to activate) ──
   Targets .cart__checkout-button only — the shipping protection
   app button. Leaves Dawn's native checkout button untouched.
   TO ENABLE:  remove the /* and */ surrounding the rule below
   TO DISABLE: wrap the rule back in /* and */
─────────────────────────────────────────────────────────── */
/*
.cart__checkout-button {
  display: none !important;
}
*/