/** Shopify CDN: Minification failed

Line 222:58 Unexpected "@app"

**/
/* ============================================================================
   newpdp-rtx.css — PDP buy box
   RETOKENISED 2026-09-08. Was 0 var() uses, 37 hex literals, 6 hardcoded
   'Poppins' declarations and its own navy (#0b103d, not the brand #0F0A30).

   FIX 2026-09-08 (second pass): the selected state had been set to
   --color-bg-subtle while the surrounding panel was ALSO --color-bg-subtle, so
   the selected card disappeared into its own container. Panel is now white and
   selection is carried by Light Blue, which the brand guidelines define as a
   secondary background. Navy on Light Blue measures 10.97:1 (AAA).

   Colour semantics:
     navy + yellow = ACTION (the add-to-cart, and nothing else)
     light blue    = SELECTED
     red           = DISCOUNT, exclusively
   ============================================================================ */

.product-single__primary-blocks sticky-scroll {
  background: var(--color-bg);
  border-radius: var(--radius-image);
  border: 1px solid var(--color-border);
}

/* ── Purchase type (Subscribe & Save / One-time) ──────────────────────────── */

.purchase-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.purchase-item {
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: var(--radius-button);
  padding: var(--space-3);
  cursor: pointer;
  position: relative;
  /* NO transition here, deliberately - do not add one back.
     A transition on these properties was created at currentTime 0 with
     fill: backwards and then never ticked, which pins the FROM value forever:
     background-color and border-*-color stayed at their UNSELECTED values, so
     the selected card painted white with the pale grey border - it looked
     unselected until a click finally ticked the transition.
     A running transition outranks !important, so no override can win - removing
     the transition is the only fix. box-shadow was the one property NOT in that
     list, which is why the inset selection ring was the only thing that showed.
     Third time this theme has hit this failure (grid ATC on visibility, sticky
     offer bar on transform, and this). Nothing here needs to animate. */
}

.purchase-item:hover { border-color: var(--color-border-strong); }

/* SELECTED - Light Blue ground, 1px navy border plus a 1px inset ring, which
   reads as a 2px stroke while keeping the box geometry identical to the
   unselected card. 10.97:1 for navy text. */
.purchase-item.active {
  background-color: var(--os-blue);
  border-color: var(--color-border-strong);
  box-shadow: inset 0 0 0 1px var(--color-border-strong);
}

.purchase-wrapper .subscriptionDescContent li:before { width: 15px; height: 15px; }
.purchase-wrapper .subscriptionDescContent li:after  { width: 14px; height: 9px; }

/* Was 12px Poppins, dropping to 10px on mobile. 10px microcopy on a 72%-mobile
   site is unreadable; the brand floor for body text is 16px. 14px is the
   compromise for dense UI - worth revisiting at 16px. */
.purchase-wrapper .subscriptionDescContent li {
  padding-left: 22px;
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-small);
  line-height: var(--leading-snug);
  font-family: var(--font-body);
}

/* On the selected (Light Blue) card, muted grey drops to 6.6:1 - still AA, but
   full navy reads better and costs nothing. */
.purchase-item.active .subscriptionDescContent li { color: var(--color-text); }

.purchase-item input[type="radio"] { appearance: none; display: none; }
.purchase-item label { height: 100%; display: block; cursor: pointer; }

.purchase-item strong {
  color: var(--color-text);
  font-size: var(--text-body);
  line-height: var(--leading-snug);
  font-weight: var(--weight-bold);
  font-family: var(--font-body);
}

.purchase-item span.custom-subscribe-price,
.purchase-item span.custom-onetime-price,
.purchase-item span.discount-price-25 {
  display: block;
  margin-bottom: var(--space-3);
  font-size: var(--text-body) !important;
  line-height: var(--leading-tight);
  font-weight: var(--weight-medium) !important;
  color: var(--color-text);
  font-family: var(--font-body);
}

.purchase-item span.custom-subscribe-price s,
.purchase-item span.discount-price-25 s { opacity: .65; }

/* Discount price. Red now means discount and only discount, and every savings
   cue in this buy box resolves to the one --color-sale token.

   THE !important IS LOAD-BEARING - DO NOT REMOVE IT.
   The Patrol app writes style="color: var(--patrol-red-3)" directly onto this
   span as an INLINE style. No author declaration beats an inline style on
   specificity, at any selector weight - but an author !important declaration
   outranks a NORMAL inline style in the cascade, which is the one lever that
   wins here. Drop the !important and the price silently reverts to the app's
   #C12541, which fails AA as text on the Light Blue selected card. */
.purchase-item span.custom-subscribe-price span,
.purchase-item span.discount-price-25 span { color: var(--color-sale) !important; }

/* "Save $49" / "Save 8%" badge grounds. White text sits on these: 7.90:1.
   The !important beats base.css (Venue vendor file - do not edit there), which
   hardcodes #CE0003 as the badge ground. */
.custom-subscription-ui .save-percent,
.custom-subscription-ui .save-amount,
.newpdpVariants .save-amount,
.newpdpVariants .save-percent { background-color: var(--color-sale) !important; }

/* ── Size / variant swatches ──────────────────────────────────────────────── */

.product-single__primary-blocks .product-form__swatch__item--button .product-form__swatch__label {
  margin-top: 0;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  border-radius: var(--radius-button);
  padding: var(--space-3);
  cursor: pointer;
  position: relative;
  font-weight: var(--weight-bold);
  font-size: var(--text-body);
  text-align: center;
  line-height: var(--leading-snug);
  color: var(--color-text);
  font-family: var(--font-body);
  /* NO transition here, deliberately - do not add one back.
     A transition on these properties was created at currentTime 0 with
     fill: backwards and then never ticked, which pins the FROM value forever:
     background-color and border-*-color stayed at their UNSELECTED values, so
     the selected pack-size card painted white with the pale grey border - it
     looked unselected until a click finally ticked the transition.
     A running transition outranks !important, so no override can win - removing
     the transition is the only fix. box-shadow was the one property NOT in that
     list, which is why the inset selection ring was the only thing that showed.
     Third time this theme has hit this failure (grid ATC on visibility, sticky
     offer bar on transform, and this). Nothing here needs to animate. */
}

/* SELECTED / hover - same Light Blue language as the purchase cards. */
.product-single__primary-blocks .product-form__swatch__item--button input[type=radio]:checked+label,
.product-single__primary-blocks .product-form__swatch__item--button input[type=radio]:hover+label {
  background-color: var(--os-blue) !important;
  border-color: var(--color-border-strong) !important;
  /* Defends against global.css (Venue vendor file - do not edit there), which
     forces `border: 3px solid #ffbf00 !important` on the checked AND hover
     swatch. Without this line the selected card's stroke is 3x the unselected
     card's: exactly the geometry mismatch this file exists to remove. Our
     selector carries more classes than the vendor's, so with both marked
     !important, specificity decides and ours wins. */
  border-width: 1px !important;
  box-shadow: inset 0 0 0 1px var(--color-border-strong) !important;
  color: var(--color-text) !important;
}

.product-single__primary-blocks .variantDescription {
  color: var(--color-text-muted);
  font-size: var(--text-small);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
}

/* ── Legends / eyebrows ───────────────────────────────────────────────────── */

.product-form__swatch__title legend,
.custom-subscription-ui legend strong,
.frequency-select-wrapper label strong {
  color: var(--color-text);
  font-size: var(--text-small) !important;
  line-height: var(--leading-snug) !important;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  opacity: .75;
  font-weight: var(--weight-bold) !important;
  margin-bottom: 0;
  font-family: var(--font-body) !important;
}

.product-form__swatch__title legend.f-family--heading.f-caps--false.f-space--0 {
  font-size: var(--text-small) !important;
}

.frequency-select-wrapper select#custom-frequency-select {
  border: 2px solid var(--color-border-strong);
  border-radius: var(--radius-input);
  margin-bottom: var(--space-3);
  color: var(--color-text);
  font-size: var(--text-small);
  line-height: var(--leading-snug);
  font-weight: var(--weight-medium);
  font-family: var(--font-body);
  background-image: url(/cdn/shop/files/select-label-dropdown-icon.svg?v=1750661270);
  background-repeat: no-repeat;
  background-position: 99% center;
}

.product-single__box__block.product-single__box__block--\\@app.js-animation-done {
  margin-top: var(--space-3);
}

.product-single__box__block h1.product-single__title {
  font-size: var(--text-headline);
  line-height: var(--leading-snug);
  font-weight: var(--weight-light);
  color: var(--color-heading);
  font-family: var(--font-display);
}

/* ── ADD TO CART ──────────────────────────────────────────────────────────────
   The selector that actually renders the ATC. Previously hardcoded #dc2a4a
   with !important, which is why it beat everything else on the page.
     yellow label on navy fill   16.97:1  AAA
     navy fill vs white panel    18.98:1  (button edge)
   ───────────────────────────────────────────────────────────────────────────── */

.product-form__add button.c-btn.c-btn--full.c-btn--primary {
  display: block;
  background: var(--color-action) !important;
  border-color: var(--color-action) !important;
  color: var(--color-action-text) !important;
  font-family: var(--font-body) !important;
  font-size: var(--text-body-lg) !important;
  line-height: 1.5 !important;
  padding: var(--space-4) var(--space-6) !important;
  border-radius: var(--radius-button) !important;
  font-weight: var(--weight-bold) !important;
  text-transform: uppercase !important;
  letter-spacing: var(--tracking-wide) !important;
  text-align: center !important;
  min-height: 48px;
}

.product-form__add button.c-btn.c-btn--full.c-btn--primary:hover {
  background: var(--color-action-hover) !important;
  border-color: var(--color-action-hover) !important;
  opacity: 1;
}

.product-form__add button.c-btn.c-btn--full.c-btn--primary span.price s {
  color: var(--color-action-text);
  opacity: .75;
}

product-single fieldset .product-form__swatch__item--button label.product-form__swatch__label {
  height: 100%;
  justify-content: flex-start;
}

.limited-inventory-warning {
  font-family: var(--font-body) !important;
  color: var(--color-low-stock);
}

.subDescText span { color: var(--color-text); }

.limited-inventory-warning p.desc { line-height: var(--leading-normal); margin-bottom: -2px; }
.limited-inventory-warning .title { line-height: var(--leading-snug); }

@media (max-width: 767px) {
  product-single variant-radios fieldset.product-form__swatch { flex-direction: row !important; }

  .product-form__add button.c-btn.c-btn--full.c-btn--primary {
    font-size: var(--text-body) !important;
    padding: var(--space-3) var(--space-5) !important;
  }

  .purchase-item { padding: var(--space-2); }

  .purchase-item span.custom-subscribe-price {
    margin-bottom: var(--space-2);
    font-size: var(--text-small) !important;
  }

  /* The 10px override that used to live here is gone. Microcopy stays at 14px. */
  .purchase-wrapper .subscriptionDescContent li { margin-bottom: var(--space-1); }

  .newpdp-about-pack .freeShip span { font-size: var(--text-small) !important; }
}

.off20per { font-size: var(--text-small); font-weight: var(--weight-bold); }

p.discount_text {
  text-align: center;
  font-size: var(--text-body);
  font-style: normal;
  font-weight: var(--weight-medium);
  font-family: var(--font-body);
  margin: var(--space-3) 0 0 0;
}

.purchase-item__one-time-note {
  font-size: var(--text-small);
  color: var(--color-text-muted);
  font-family: var(--font-body);
  line-height: var(--leading-snug);
  margin: 2px 0 var(--space-2);
}

/* ── Quick view modal - match the PDP ──────────────────────────────────────── */

quick-shop .product-form__swatch__item--button .product-form__swatch__label {
  margin-top: 0;
  border: 1px solid var(--color-border) !important;
  background: var(--color-bg) !important;
  border-radius: var(--radius-button) !important;
  padding: var(--space-3);
  cursor: pointer;
  position: relative;
  font-weight: var(--weight-bold);
  font-size: var(--text-body);
  text-align: center;
  line-height: var(--leading-snug);
  color: var(--color-text);
  font-family: var(--font-body);
  height: 100%;
  justify-content: flex-start;
}

quick-shop .product-form__swatch__item--button input[type=radio]:checked + label,
quick-shop .product-form__swatch__item--button input[type=radio]:hover + label {
  background-color: var(--os-blue) !important;
  border-color: var(--color-border-strong) !important;
  /* Defends against global.css (Venue vendor file - do not edit there), which
     forces `border: 3px solid #ffbf00 !important` on the checked AND hover
     swatch. Without this line the selected card's stroke is 3x the unselected
     card's: exactly the geometry mismatch this file exists to remove. Our
     selector carries more classes than the vendor's, so with both marked
     !important, specificity decides and ours wins. */
  border-width: 1px !important;
  box-shadow: inset 0 0 0 1px var(--color-border-strong) !important;
  color: var(--color-text) !important;
}

quick-shop .variantDescription {
  color: var(--color-text-muted);
  font-size: var(--text-small);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-2);
  font-family: var(--font-body);
}