/** Shopify CDN: Minification failed

Line 210:15 Expected identifier but found whitespace
Line 210:21 Unexpected "!"

**/
/* ==========================================================================
   Forge Creek Hunting - custom-overrides.css
   Organized CSS document

   Notes:
   - Keep new custom code in clearly labeled sections.
   - If a future change stops working, check for duplicate selectors later in this file.
   - Many rules use !important because they override Concept theme defaults.
   ========================================================================== */


/* ==========================================================================
   Bullet Point List Spacing
   ========================================================================== */

        ul li, ol li {
          line-height: 1.6 !important;
          margin-bottom: 10px !important
        }


    /* Mobile override */
      @media (max-width: 767px) {
        ul li, ol li {
          line-height: 1.4 !important;     /* tighten spacing inside bullets */
          margin-bottom: 5px !important;   /* reduce space between bullets */
        }
      }


/* ==========================================================================
   PDP Collapsible Row Colors and Bullet Styling
   ========================================================================== */

      .product__accordion .details__summary,
      .product__accordion .details__summary .text-sm-base,
      .product__accordion .details__summary .font-medium {
        color:rgb(0, 0, 0) !important;          /* ← change heading color */
      }

    /* The + icon uses currentColor for stroke, so inherit the same color */
      .product__accordion .details__summary svg {
        stroke: currentColor !important;
      }

    /* Body/content color */
      .product__accordion .details__content {
        color: #333333 !important;           /* ← change body text color */
      }

    /* Optional: link color inside body */
      .product__accordion .details__content a {
        color:rgb(0, 0, 0) !important;
      }

    /* Optional: border color if your theme shows a divider */
      .product__accordion.with-border {
        border-color:rgb(0, 0, 0) !important;
      }

  /* Bulleted list styling inside the accordion body */
      .product__accordion .details__content ul,
      .product__accordion .details__content ol {
        list-style-position: outside;
        list-style-type: disc; /* for <ul> */
        margin: 0 0 0.75rem 0;
        padding-left: 0; /* since we use 'inside' */
        color: #333333 !important; /* body text color you already set */
      }

      /* Make the actual bullet/number the brand color */
      .product__accordion .details__content ul li::marker,
      .product__accordion .details__content ol li::marker {
        color: rgb(51, 51, 51) !important; /* bullet/number color */
      }

      /* If your theme uses pseudo bullets via ::before, override them too */
      .product__accordion .details__content ul li::before,
      .product__accordion .details__content ol li::before {
        color: rgb(51, 51, 51) !important;
      }

      /* If the theme nukes markers and injects its own, force a visible bullet */
      .product__accordion .details__content ul[style*="list-style:none"] li::before,
      .product__accordion .details__content ul.no-bullets li::before {
        content: "•";
        margin-right: 6px;
        color: rgb(51, 51, 51) !important;
      }

      /* Optional: tighten gap between label & value style rows, if you use them here too */
      .product__accordion .details__content .guide__item-key {
        gap: 8px;
        margin-bottom: 10px;
      }


/* ==========================================================================
   Reusable Orange Line Divider
   ========================================================================== */

      .orange-line {
        display: block !important;
        width: 100% !important;          /* full width by default */
        max-width: 1600px !important;    /* cap it on large screens */
        height: 5px !important;          /* thickness */
        background-color: #DF6B2F !important;
        margin: 20px auto !important;    /* center + spacing */
        border: 0 !important;
        border-radius: 2px !important;
      }

    /* Mobile adjustments */
        @media (max-width: 767px) {
          .orange-line {
            width: 80% !important;        /* narrower line on mobile */
            height: 3px !important;       /* slightly thinner */
            margin: 15px auto !important; /* less spacing */
          }
        }

/* ==========================================================================
   Reusable Gray Line Divider
   ========================================================================== */

      .gray-line {
        display: block !important;
        width: 80% !important;          /* full width by default */
        max-width: 1600px !important;    /* cap it on large screens */
        height: 5px !important;          /* thickness */
        background-color:rgb(222, 222, 222) !important;
        margin: 20px auto !important;    /* center + spacing */
        border: 0 !important;
        border-radius: 2px !important;
      }

    /* Mobile adjustments */
        @media (max-width: 767px) {
          .gray-line {
            width: 80% !important;        /* narrower line on mobile */
            height: 3px !important;       /* slightly thinner */
            margin: 15px auto !important; /* less spacing */
          }
        }


/* ==========================================================================
   View All Button Icon Removal
   ========================================================================== */

      .button.icon-with-text .btn-text svg {
        display: none !important;
      }

    /* 1) Optional: fix spacing so text aligns naturally */
      .button.icon-with-text .btn-text {
        display: inline-block;
        gap: 0 !important;  /* remove any space reserved for icon */
      }


/* ==========================================================================
   Header Navigation Hover: Remove Pill and Add Orange Underline
   ========================================================================== */

    /* Stop text animations so only the underline animates */
      .header__navigation .list-menu.with-block .btn-text,
      .header__navigation .list-menu.with-block .btn-duplicate,
      .header__navigation .list-menu.with-block a.menu__item,
      .header__navigation .list-menu.with-block summary,
      .header__navigation .list-menu.with-block magnet-element {
        transition: none !important;
        transform: none !important;
        animation: none !important;
        mix-blend-mode: normal !important;
      }

    /* Base: keep items clean */
      .header__navigation .list-menu.with-block a.menu__item,
      .header__navigation .list-menu.with-block summary,
      .header__navigation .list-menu.with-block magnet-element {
        position: relative;
        color: rgb(var(--color-foreground)) !important;
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible; /* ensure underline shows */
      }

    /* Kill pill overlays (use ::before only; DO NOT touch ::after we need) */
      .header__navigation .list-menu.with-block a.menu__item::before,
      .header__navigation .list-menu.with-block summary::before,
      .header__navigation .list-menu.with-block magnet-element::before,
      .header__navigation .list-menu.with-block .btn-text::before,
      .header__navigation .list-menu.with-block .btn-duplicate::before,
      .header__navigation .list-menu.with-block .btn-duplicate::after {
        content: "" !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        opacity: 0 !important;
      }
        filter: none !important;
        -webkit-mask: none !important;
        mask: none !important;
      }

    /* Ensure spans themselves aren’t drawing a pill */
      .header__navigation .list-menu.with-block .btn-text,
      .header__navigation .list-menu.with-block .btn-duplicate {
        background: transparent !important;
        border-radius: 0 !important;
      }

    /* Animated underline (::after) — this is the only visible effect */
        .header__navigation .list-menu.with-block a.menu__item::after,
        .header__navigation .list-menu.with-block summary::after,
        .header__navigation .list-menu.with-block magnet-element::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;              /* use -2px if you want a small gap under text */
          height: 2px;
          width: 0;
          background-color: #df6b2f;   /* hover underline color */
          transition: width 0.28s ease;
          z-index: 1;
        }

    /* Hover expands underline */
      .header__navigation .list-menu.with-block a.menu__item:hover::after,
      .header__navigation .list-menu.with-block summary:hover::after,
      .header__navigation .list-menu.with-block magnet-element:hover::after {
        width: 100%;
      }

    /* Active/current keeps underline visible (optional different color) */
      .header__navigation .list-menu.with-block a.menu__item[aria-current="page"]::after,
      .header__navigation .list-menu.with-block a.menu__item.active::after,
      .header__navigation .list-menu.with-block summary[open]::after {
        width: 100%;
        background-color: #000000; /* active underline color */
      }

    /* Some builds round the summary itself */
      .header__navigation .list-menu.with-block summary {
        border-radius: 0 !important;
        background: transparent !important;
      }


/* ==========================================================================
   Header Navigation Text Visibility Fix
   ========================================================================== */

    /* Keep link text readable in all states */
      .header__navigation .list-menu.with-block a.menu__item,
      .header__navigation .list-menu.with-block a.menu__item:hover,
      .header__navigation .list-menu.with-block a.menu__item:focus,
      .header__navigation .list-menu.with-block summary,
      .header__navigation .list-menu.with-block summary:hover,
      .header__navigation .list-menu.with-block summary:focus {
        color: rgb(var(--color-foreground)) !important;
        opacity: 1 !important;
        text-shadow: none !important;
        mix-blend-mode: normal !important;
        z-index: 2; /* above underline */
      }

    /* Kill the animated duplicate layer so nothing “flips” or fades */
      .header__navigation .list-menu.with-block .btn-duplicate {
        display: none !important;
      }

    /* Ensure the primary text layer stays visible and unanimated */
      .header__navigation .list-menu.with-block .btn-text {
        position: relative;
        color: rgb(var(--color-foreground)) !important;
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        mix-blend-mode: normal !important;
        z-index: 2;
      }


/* ==========================================================================
   Header Menu Trigger Underline
   ========================================================================== */

    /* Make the magnet element behave like a link container */
      .header__navigation .list-menu.with-block summary > magnet-element {
        position: relative;
        display: inline-flex;           /* ensure width + :after render reliably */
        align-items: center;
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border-bottom: 2px solid transparent; /* reserve space for underline */
        color: rgb(var(--color-foreground)) !important;
        z-index: 2;                     /* text above underline */
      }

    /* Nuke any pill overlays that theme applies to magnet-element */
      .header__navigation .list-menu.with-block summary > magnet-element::before,
      .header__navigation .list-menu.with-block summary > magnet-element::after {
        content: "";
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        opacity: 1;                     /* keep ::after visible for our underline */
      }

    /* Our underline lives on ::after of magnet-element */
      .header__navigation .list-menu.with-block summary > magnet-element::after {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;                      /* tweak to -2px if you want tiny gap */
        height: 2px;
        width: 0;
        background-color: #df6b2f;      /* hover underline color */
        transition: width 0.28s ease;
        z-index: 1;                     /* under the text */
      }

    /* Show underline on hover/open */
      .header__navigation .list-menu.with-block summary:hover > magnet-element::after {
        width: 100%;
      }
      .header__navigation .list-menu.with-block summary[open] > magnet-element::after {
        width: 100%;
        background-color: #000000;      /* active/open underline color */
      }

    /* Keep the duplicate text layer from causing fade/flip on mega items too */
      .header__navigation .list-menu.with-block summary > magnet-element .btn-duplicate {
        display: none !important;
      }
      .header__navigation .list-menu.with-block summary > magnet-element .btn-text {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        mix-blend-mode: normal !important;
      }


/* ==========================================================================
   Header Menu Trigger Underline Override
   ========================================================================== */

    /* Ensure the containers can show the underline */
      .header__navigation .list-menu.with-block summary,
      .header__navigation .list-menu.with-block summary > magnet-element {
        position: relative !important;
        overflow: visible !important;
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
      }

    /* Rebuild the underline on magnet-element::after (override earlier "nuke" rules) */
      .header__navigation .list-menu.with-block summary > magnet-element::after {
        content: "" !important;                  /* force create after we previously nuked it */
        position: absolute !important;
        left: 0; right: 0; bottom: -2px;         /* tweak -2px/-3px if you want a small gap */
        height: 2px !important;
        background-color: #df6b2f !important;    /* hover underline color */
        transform: scaleX(0) !important;         /* animate from 0 to full */
        transform-origin: left center !important;
        transition: transform 0.28s ease !important;
        opacity: 1 !important;                   /* override any prior opacity:0 */
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
      }

    /* Show underline on hover or when the mega menu is open */
      .header__navigation .list-menu.with-block summary:hover > magnet-element::after,
      .header__navigation .list-menu.with-block summary[open] > magnet-element::after {
        transform: scaleX(1) !important;
      }

    /* Keep the duplicated text layer from animating/fading on mega triggers */
      .header__navigation .list-menu.with-block summary > magnet-element .btn-duplicate {
        display: none !important;
      }
      .header__navigation .list-menu.with-block summary > magnet-element .btn-text {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
        mix-blend-mode: normal !important;
      }


      
/* ==========================================================================
   PDP Shop Pay / Installments Hide
   ========================================================================== */
      shopify-payment-terms { display: none !important; } 


/* ==========================================================================
   Multicolumn With Icons Height Control
   ========================================================================== */

    /* Set a minimum height so all columns match */
      .multicolumn-card {
        min-height: 400px; /* adjust as needed */
      }

    /* If you want a fixed height instead of min-height */
      .multicolumn-card {
        height: 320px; /* force same height */
        overflow: hidden; /* prevent spillover */
      }

    /* Optional: make mobile columns auto-adjust */
      @media (max-width: 767px) {
        .multicolumn-card {
          min-height: auto; /* let them shrink naturally */
          height: auto;
        }
      }


/* ==========================================================================
   Policy and Contact Page Font Override
   ========================================================================== */

      .shopify-policy__title,
      .shopify-policy__body h1,
      .shopify-policy__body h2,
      .shopify-policy__body h3,
      .shopify-policy__body h4 {
        font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif) !important;
        font-weight: inherit !important;
      }

    /* Extra safety for headings that may sit outside .shopify-policy__body */
      .template-policy h1,
      .template-policy h2,
      .template-policy h3,
      .template-policy h4 {
        font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif) !important;
      }

    /* Contact page (common patterns in Concept/Dawn-style themes) */
      .template-page .contact h1,
      .template-page .contact h2,
      .template-page .contact h3,
      .template-page .contact h4 {
        font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif) !important;
      }


/* ==========================================================================
   Cart Drawer Title Font Size
   ========================================================================== */
      .drawer__title.heading {
        font-size: 28px !important;   /* desktop size */
        line-height: 1.2 !important;
      }

    /* Optional: make it smaller on mobile */
      @media (max-width: 767px) {
        .drawer__title.heading {
          font-size: 20px !important;
          line-height: 1.3 !important;
        }
      }


/* ==========================================================================
   Video With Text Background Image Override
   ========================================================================== */

[id$="__video_with_text_XRkhit"] {
  --color-background: transparent;
  --gradient-background: none;
  background: none !important;
}

[id$="__video_with_text_XRkhit"] > .section {
  background: url("/cdn/shop/files/forge-creek-background-texture-02-1920x750px.jpg?v=1760370047")
              center / cover no-repeat !important;
}

[id$="__video_with_text_XRkhit"] > .section::before,
[id$="__video_with_text_XRkhit"] > .section::after {
  background: transparent !important;
  opacity: 0 !important;
  content: "" !important;
}

[id$="__video_with_text_XRkhit"] .page-width,
[id$="__video_with_text_XRkhit"] .image-with-text {
  background: transparent !important;
}

[id$="__video_with_text_XRkhit"] > .section {
  min-height: 520px;
}

/* ==========================================================================
   Full-Width Header Bottom Stroke
   ========================================================================== */
        :root {
          --header-stroke-size: 4px;            /* thickness */
          --header-stroke-color: rgb(219,107,48);/* color */
        }

        header[is="sticky-header"].header {
          position: relative;
          overflow: visible; /* ensure ::after isn't clipped */
        }

        header[is="sticky-header"].header::after {
          content: "";
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          width: 100vw; /* spans entire viewport width */
          height: var(--header-stroke-size);
          background: var(--header-stroke-color);
          pointer-events: none;
          z-index: 25; /* sits above background */
        }


/* ==========================================================================
   Hunting Packs Comparison Chart
   ========================================================================== */

        /* spacing utilities */
        .gutters--l { padding-left: 24px; padding-right: 24px; }
        .padding-top--30--mbl { padding-top: 30px; }
        .padding-top--60--tblt { padding-top: 30px; }
        @media (min-width: 768px) {
          .padding-top--60--tblt { padding-top: 60px; }
          .gutters--l { padding-left: 40px; padding-right: 40px; }
        }

        /* grid */
        .guide__grid {
          display: grid;
          gap: 24px;
          grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        }


        /* buttons and specs line up across cards */

        /* Make content a vertical stack */
        .guide__item { display: flex; flex-direction: column; }
        .guide__item .aspect-ratio { flex: 0 0 auto; }     /* image block never stretches */
        .guide__item-container { display: flex; flex-direction: column; flex: 1; min-height: 420px; }
        .guide__item-content { display: flex; flex-direction: column; flex: 1; gap: 10px; }

        /* 1) Buttons always sit on the bottom edge */
        .guide__item-content .clickable--contained { margin-top: auto; }

        /* 2) Keep specs tight and consistent */
        .guide__item-content .guide__item-key { margin-bottom: 8px; }
        .guide__item-content .guide__item-key:last-of-type { margin-bottom: 0; }

        /* 3) Equalize card heights in each row */
        .guide__grid { align-items: stretch; }

        /* 4) On desktop, reserve space for title + description so specs align.
                Tweak the 220px number until the *top of the specs* lines up perfectly. */
        @media (min-width: 1024px) {
          .guide__item-content {
            /* create a fixed header zone before specs */
            /* we target the area before the button becomes 'auto' */
              min-height: 420px;  /* adjust this until all three specs start at the same height */
              padding: 10px 20px 0 20px; /* top, right, bottom, left */}
        }

        /* Neutralize legacy bottom margins that can throw things off */
          .guide__item-content .padding-bottom--15 { margin-bottom: 0 !important; }

            /* To change how many columns there are change the (@media (min-width: 1024px) ... repeat(1,2,3,4, etc... */
              @media (min-width: 640px) { .guide__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
              @media (min-width: 1024px) { .guide__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } }

            /* cards */
              .guide__item {
                background: #fff;
                border: 1px solid rgba(0,0,0,.08);
                border-radius: 0px;
                overflow: hidden;
                transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
                will-change: transform, box-shadow;
                height: auto; /* strict height */
              }

              .guide__item:hover {
                transform: translateY(-4px);
                box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
                border-color: rgba(0, 0, 0, 0.12);
              }

              /* square media wrapper */
              .aspect-ratio { position: relative; width: 100%; }
              .aspect-ratio--1-1 { padding-top: 100%; }

        /* Position any <img> inside the square, not just img.content */
        .aspect-ratio > img {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          object-fit: contain;
          object-position: center;
          display: block;
          background: #fff; /* white behind transparent PNGs */
        }

        /* inner layout */
        .guide__item-container { padding: 16px; }
        @media (min-width: 768px) { .guide__item-container { padding: 18px; } }
        .guide__item-content { text-align: left; }

        /* Headings & text (match Forge Creek vibe) */
        .guide__item-content .Category-Product-Header-Feature-Callout {
          font-size: 30px !important;
          line-height: 1.25;
          font-weight: 700;
          color: rgb(219, 107, 48);
          margin: 6px 0px 8px;
          letter-spacing: 0.2px;
          text-transform: none;
        }

        /* Headings & text Medium screens (tablets) */
        @media (min-width: 768px) {
        .Category-Product-Header-Feature-Callout {
          font-size: 18px;
          }
        }

        @media (min-width: 1024px) {
          .Category-Product-Header-Feature-Callout {
            font-size: 20px;
            }
          }

        .Product-Tile-Name { font-size: 14px; line-height: 1.45; color: #444; }
        .Product-Tile-Name.details { color: #5a5a5a; }
        .CTA-Small { font-size: 14px; font-weight: 700; color:rgb(21, 21, 21); }


        /* Changes the background color of the card */
        .gutters--l {
          background: #000;
          padding: 60px 40px;
        }

        .guide__item {
          background: #111;
          border: 0px solid rgba(255,255,255,0.1);
        }

        .guide__item-content,
        .guide__item h5,
        .guide__item p,
        .guide__item span,
        .guide__item strong {
          color: #fff !important;
        }

        /* key rows */
        .guide__item-key {
          display: grid;
          grid-template-columns: 1fr auto; /* label left, value right */
          align-items: baseline;
          gap: 10px;
        }

        /* Labels (Weight, Volume, Dimensions) */
        .guide__item-specs .Product-Tile-Name {
          color: rgb(255, 255, 255) !important; /* orange */
          font-weight: 600;
        }

        /* Values (1.5 lbs, etc.) */
        .guide__item-specs .CTA-Small {
          color: #fff !important;
          font-weight: 700;
        }

        /* Divider lines for Weight, Volume, Dimensions */
        .guide__item-specs .guide__item-key:not(:last-child) {
          border-bottom: 2px solid rgba(255, 255, 255, 0.1);
          padding-bottom: 10px;
          padding-top: 10px;
          margin-bottom: 10px;
        }

        /* Top padding for Dimensions */
        .guide__item-key:last-of-type {
          padding-top: 10px;
        }


        /* CTA button */
        .padding-bottom--15 { margin-bottom: 15px; }
        .flex.flex--no-padding.col--12 { padding: 0; margin: 0; }
        .col--4, .col--8 { /* keep legacy classes working */
          display: contents; /* let grid control layout */
        }

        /* button styles */
        .clickable--contained {
          display: inline-block;
          width: 100%;
          margin: 20px auto; /* center it */
          text-align: center;
          text-decoration: none;
          padding: 15px 14px;
          border-radius: 0px;
          font-weight: 800;
          letter-spacing: .2px;
          transition: background .18s ease, color .18s ease, transform .06s ease;
        }

        .clickable--contained--primary { background: rgb(102, 130, 74); color: #fff; }
        .clickable--contained--primary--dark { background: rgb(219,107,48); color: #fff; }

        .clickable--contained:hover {
          background: rgb(255, 255, 255); /* white */
          color: #000 !important;          /* black text */
          transform: translateY(-1px);
        }

        .clickable--contained:active {
          transform: translateY(0);
        }

        /* lazyloaded compatibility (if used) */
        img.lazyloaded { opacity: 1; transition: opacity .25s ease; }
        img:not(.lazyloaded)[data-src] { opacity: 0; }

        /* small polish */
        .guide__item strong { font-weight: 800; }

.page-our-story .rich-text {
  max-width: 1100px;
  margin: 0 auto;
}

/* ==========================================================================
   Judge.me Review Badge Hide on PDP
   ========================================================================== */
.template-product .jdgm-prev-badge,
.template-product .jdgm-widget.jdgm-preview-badge {
  display: none !important;
}

/* ==========================================================================
   Judge.me Stars Hide in PDP Title Area
   ========================================================================== */
.product__title .jdgm-widget,
.product__title .jdgm-preview-badge,
.product__title .jdgm-prev-badge {
  display: none !important;
}

/* ==========================================================================
   PDP Title / Price / Rating Left Alignment
   ========================================================================== */
.product__title.with-price {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
}

/* Remove grid column placement from title/price/rating */
.product__title.with-price h1,
.product__title.with-price .product__price,
.product__title.with-price .product__rating {
  grid-column: 1 / -1 !important;
  justify-self: start !important;
  align-self: start !important;
  width: 100% !important;
  text-align: left !important;
}

/* Force the price itself left */
.product__title.with-price .product__price {
  order: 2 !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Override the theme's xl:items-end class inside the price */
.product__title.with-price .product__price .price,
.product__title.with-price .product__price .price.flex {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
  width: auto !important;
}

/* Price text */
.product__title.with-price .price__regular,
.product__title.with-price .price__sale,
.product__title.with-price .price-item {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* ==========================================================================
   Video Hero YouTube Controls Fix
   ========================================================================== */
.video-hero video-media[loaded] .deferred-poster,
.video-hero video-media[playing] .deferred-poster {
  display: none !important;
  pointer-events: none !important;
}

/* Make sure YouTube iframe can receive clicks/taps */
.video-hero video-media iframe {
  pointer-events: auto !important;
  z-index: 2 !important;
}

/* Keep the poster clickable only before video loads */
.video-hero .deferred-poster {
  z-index: 3 !important;
}

/* ==========================================================================
   Featured Collection Product Card Full Star Rating
   ========================================================================== */
.product-card__rating--full .rating-star {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  font-size: 13px;
  line-height: 1;
}

.product-card__rating--full .rating-star::before {
  content: "★★★★★";
}

/* ==========================================================================
   Navigation Menu Dropdown
   ========================================================================== */

/* ===== Standard Product Dropdown Background ===== */
.header .dropdown__container {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #111111 !important;
}

/* The curved corner SVGs use currentColor, so this controls their color */
.header .dropdown__corner {
  color: #ffffff !important;
}

/* Dropdown links */
.header .dropdown__container .reversed-link {
  color: #111111 !important;
}

/* Dropdown link hover */
.header .dropdown__container .reversed-link:hover {
  color: #db6b30 !important;
}

/* ==========================================================================
   Navigation Dropdown Arrow
   ========================================================================== */

/* Add arrow after dropdown menu text */
.header__navigation summary > magnet-element .btn-text::after {
  content: "⌄" !important;
  display: inline-block !important;
  margin-left: -3px !important;
  font-size: 20px !important;
  line-height: 1 !important;
  color: currentColor !important;
  opacity: 1 !important;
  position: relative !important;
  top: -5px !important;
  transform: none !important;
}

/* ==========================================================================
   SEO Hidden  Image with text overlay banner
   ========================================================================== */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ===== PDP main image gallery arrows ===== */

/* Arrow button container */
.product__media .slider-buttons button,
.product__media-gallery .slider-buttons button,
.product__media-list .slider-buttons button {
  background-color: rgba(0, 0, 0, 0.55) !important; /* button circle */
  color: #ffffff !important; /* arrow color */
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 25% !important;
  opacity: 1 !important;
}

/* Arrow icon itself */
.product__media .slider-buttons button svg,
.product__media-gallery .slider-buttons button svg,
.product__media-list .slider-buttons button svg {
  stroke: #ffffff !important;
  width: 18px !important;
  height: 18px !important;
}

/* Hover state */
.product__media .slider-buttons button:hover,
.product__media-gallery .slider-buttons button:hover,
.product__media-list .slider-buttons button:hover {
  background-color: #df6b2f !important;
  color: #ffffff !important;
  border-color: #df6b2f !important;
}

/* Mobile size */
@media (max-width: 767px) {
  .product__media .slider-buttons button,
  .product__media-gallery .slider-buttons button,
  .product__media-list .slider-buttons button {
    width: 38px !important;
    height: 38px !important;
  }
}

/* ===== PDP Gallery Arrows - Visible on Image Hover ===== */

/* Default arrow state */
.product button[is="previous-button"],
.product button[is="next-button"] {
  opacity: 0.75 !important;
  background-color: rgba(0, 0, 0, 0.45) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.8) !important;
}

/* Make arrows pop when hovering the product image/gallery area */
.product__media:hover button[is="previous-button"],
.product__media:hover button[is="next-button"],
.product__media-gallery:hover button[is="previous-button"],
.product__media-gallery:hover button[is="next-button"],
.product__media-list:hover button[is="previous-button"],
.product__media-list:hover button[is="next-button"],
slider-element:hover button[is="previous-button"],
slider-element:hover button[is="next-button"] {
  opacity: 1 !important;
  background-color: rgba(0, 0, 0, 0.75) !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* Make the arrow icons brighter too */
.product__media:hover button[is="previous-button"] svg,
.product__media:hover button[is="next-button"] svg,
.product__media-gallery:hover button[is="previous-button"] svg,
.product__media-gallery:hover button[is="next-button"] svg,
.product__media-list:hover button[is="previous-button"] svg,
.product__media-list:hover button[is="next-button"] svg,
slider-element:hover button[is="previous-button"] svg,
slider-element:hover button[is="next-button"] svg {
  stroke: #ffffff !important;
  opacity: 1 !important;
}

/* Separate arrow hover state */
.product button[is="previous-button"]:hover,
.product button[is="next-button"]:hover {
  background-color: #df6b2f !important;
  border-color: #df6b2f !important;
  color: #ffffff !important;
}

/* ===== PDP Gallery Arrows - Smaller Circle ===== */

.product button[is="previous-button"].button,
.product button[is="next-button"].button {
  width: 32px !important;
  min-width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 !important;
  border-radius: 50% !important;
}

/* Keep the fill circle matching the smaller button */
.product button[is="previous-button"].button .btn-fill,
.product button[is="next-button"].button .btn-fill {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
}

/* Make the arrow icon smaller too */
.product button[is="previous-button"].button svg,
.product button[is="next-button"].button svg {
  width: 14px !important;
  height: 14px !important;
}

/* Hunting Packs video banner - restore background graphic */
#shopify-section-template--23014233145572__video_with_text_XRkhit .section {
  background-color: transparent !important;
}