/** Shopify CDN: Minification failed

Line 391:14 Expected identifier but found whitespace
Line 392: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;
}

/* Cart page checkout button — styled grey to de-emphasise
   and push customers toward preferred payment methods */
.cart__checkout-button,
button[name="checkout"] {
  background-color: #d3d3d3 !important;
  color: #fff !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  --buttons-border-width: 0px !important;
  --buttons-border-opacity: 0 !important;
}


/* ── 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
   ══════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════
   ── CRC STOCK INDICATOR ──

   WHAT THIS DOES:
   Displays a coloured dot + label on product pages to communicate
   stock availability. Controlled per-product via a metafield toggle
   so it only shows on products where inventory is actively tracked.

   THREE STATES:
   - Green glowing dot  = In Stock — Ready to Ship         (qty > 3)
   - Orange dot         = Limited Stock — Order Soon        (qty 1–3)
   - Orange pulsing dot + SMS/email link = Available to Order — contact us (qty 0)

   REQUIREMENTS:
   - Metafield custom.show_stock_indicator must be True on the product
   - Product must have inventory tracking enabled (tracked by Shopify)
   - If either condition is not met, nothing renders — no empty space

   CONTACT LINK (out of stock state):
   - Mobile/touch: opens SMS app with pre-populated number and message
   - Desktop/mouse: opens email client with pre-populated subject and body
   - Number and email address are set in snippets/crc-stock-indicator.liquid

   TO DISABLE ON A PRODUCT:
   - Set the Show Stock Indicator metafield to False or leave it blank

   SIZING GUIDE:
   - To change label text size: edit font-size on .crc-stock-label below
   - To change dot size: edit width/height on .crc-stock-dot below
   - To change SMS link text size: it inherits from .crc-stock-label
   - BNPL lines on the product page are approx 13-14px for reference
   ══════════════════════════════════════════════════════════ */

.crc-stock-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  margin-bottom: 10px;
}

.crc-stock-dot {
  display: inline-block;
  width: 10px;   /* ← change dot size here — try 8px to 14px */
  height: 10px;  /* ← keep width and height equal for a circle */
  border-radius: 50%;
  flex-shrink: 0;
}

.crc-stock-dot--green  { background-color: #22c55e; }  /* In stock */
.crc-stock-dot--orange { background-color: #f97316; }  /* Low stock or out of stock */

/* Green glow pulse — in stock state
   Feels positive and alive, distinct from the urgent orange pulse */
@keyframes crc-glow-green {
  0%, 100% {
    box-shadow: 0 0 4px 1px rgba(34, 197, 94, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 10px 4px rgba(34, 197, 94, 0.7);
    transform: scale(1.15);
  }
}

/* Orange pulse — out of stock state
   Feels urgent, draws attention to the contact link */
@keyframes crc-pulse-orange {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(1.3); }
}

.crc-stock-dot--glow {
  animation: crc-glow-green 2.4s ease-in-out infinite;  /* ← change duration to speed up/slow down glow */
}

.crc-stock-dot--pulse {
  animation: crc-pulse-orange 1.6s ease-in-out infinite;  /* ← change duration to speed up/slow down pulse */
}

.crc-stock-label {
  font-size: 14px;     /* ← change text size here — BNPL lines are ~13-14px for reference */
  font-weight: 600;    /* ← change weight here — 400 normal, 500 medium, 600 semi-bold, 700 bold */
  color: #222;         /* ← change text colour here — #222 near-black, #444 mid-grey */
  line-height: 1;
}

/* SMS/email link styling — out of stock state */
.crc-stock-sms {
  color: #f97316;                      /* ← change link colour here */
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.crc-stock-sms:hover {
  color: #ea580c;                      /* ← change link hover colour here */
}

/* ══════════════════════════════════════════════════════════
   END CRC STOCK INDICATOR
   ══════════════════════════════════════════════════════════ */


/* ── 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;
}
/* ============================================
   CRC PRODUCT MEDIA - STICKY FIX + HOVER ZOOM
   Added: May 2026
   ============================================ */

/* ============================================
   ZOOM SETTINGS - adjust these values
   ============================================
   
   ZOOM LEVEL (background-size):
   150% = subtle (1.5x)
   175% = medium (1.75x)
   200% = strong (2x)
   250% = very strong (2.5x)
   
   ZOOM SMOOTHNESS:
   Position now follows mouse instantly via JS.
   Only the opacity fade is transitioned below.
   opacity transition: 0.15s = default fade in/out speed
   
   ============================================ */

:root {
  --crc-header-height: 78px;
  --crc-gallery-extra-offset: 0px;
  --crc-gallery-sticky-top: calc(var(--crc-header-height) + var(--crc-gallery-extra-offset));
}

@media screen and (min-width: 990px) and (hover: hover) and (pointer: fine) {

  media-gallery {
    position: sticky !important;
    top: var(--crc-gallery-sticky-top, 88px) !important;
    align-self: flex-start !important;

    --crc-thumb-height: 103px;
    --crc-bottom-pill-space: 112px;
    --crc-gallery-gap: 16px;

    --crc-active-media-max-height: calc(
      100vh
      - var(--crc-gallery-sticky-top, 88px)
      - var(--crc-thumb-height)
      - var(--crc-bottom-pill-space)
      - var(--crc-gallery-gap)
    );
  }

  /* Active slide container */
  media-gallery .product__media-item.is-active .product-media-container {
    padding: 0 !important;
    width: 100% !important;
    height: var(--crc-active-media-max-height) !important;
    max-height: var(--crc-active-media-max-height) !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: zoom-in;
  }

  /* Inner .media wrapper */
  media-gallery .product__media-item.is-active .product-media-container .media {
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
  }

  /* Any other direct children */
  media-gallery .product__media-item.is-active .product-media-container > * {
    height: 100% !important;
    max-height: 100% !important;
  }

  /* Image */
  media-gallery .product__media-item.is-active .product-media-container img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Active slide above thumbnails */
  media-gallery .product__media-item.is-active {
    position: relative !important;
    z-index: 1 !important;
  }

  media-gallery .thumbnail-slider {
    position: relative !important;
    z-index: 0 !important;
  }

  /* ============================================
     ZOOM OVERLAY - active slide only
     ============================================ */
  media-gallery .product__media-item.is-active .product-media-container[data-crc-zoom-ready="true"]::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background-image: var(--crc-zoom-image);
    background-repeat: no-repeat;

    /* ZOOM LEVEL - adjust here */
    background-size: 150%;

    background-position: var(--crc-zoom-x, 50%) var(--crc-zoom-y, 50%);
    opacity: 0;
    pointer-events: none;
    z-index: 3;

    /* Opacity fade only - position follows mouse instantly via JS */
    transition: opacity 0.15s ease;
  }

  media-gallery .product__media-item.is-active .product-media-container[data-crc-zoom-ready="true"].crc-zoom-active::after {
    opacity: 1;
  }

  /* Hide lightbox icon on desktop */
  media-gallery .product__media-icon--lightbox {
    display: none !important;
  }
}

/* Mobile reset */
@media not all and (min-width: 990px) and (hover: hover) and (pointer: fine) {
  media-gallery {
    position: static !important;
  }

  media-gallery .product__media-item.is-active .product-media-container {
    padding-bottom: revert !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    cursor: auto;
  }

  media-gallery .product__media-item.is-active .product-media-container .media {
    padding-bottom: revert !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  media-gallery .product__media-item.is-active .product-media-container > * {
    height: auto !important;
    max-height: none !important;
  }

  media-gallery .product__media-item.is-active .product-media-container img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  media-gallery .product__media-item.is-active .product-media-container::after {
    display: none !important;
  }

  media-gallery .product__media-icon--lightbox {
    display: block !important;
  }
}