/* ============================================================
   THE HAZE CONNECT — PRE-ROLL LADDER PROMO
   Loaded from sections/haze-preroll-ladder.liquid.
============================================================ */

.haze-prl-section { padding: 0 !important; }

.prl {
  position: relative !important;
  margin: 0 0 34px !important;
  padding: 30px 0 26px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background:
    radial-gradient(120% 150% at 6% 0%, rgba(255,166,55,0.16) 0%, transparent 58%),
    linear-gradient(180deg, #204B57 0%, #0E1F26 100%) !important;
  border: 1px solid rgba(255,166,55,0.28) !important;
}
.prl::before {
  content: "" !important;
  position: absolute !important; inset: 0 0 auto 0 !important; height: 3px !important;
  background: linear-gradient(90deg, #8FB479 0%, #FFA637 55%, #9E5C1B 100%) !important;
}

.prl-head { margin-bottom: 20px !important; }
.prl-kicker {
  display: inline-block !important;
  font-size: 11px !important; font-weight: 700 !important;
  letter-spacing: 3px !important; text-transform: uppercase !important;
  color: #162F38 !important; background: #FFA637 !important;
  padding: 4px 10px !important; border-radius: 3px !important;
  margin-bottom: 12px !important;
}
.prl-title {
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-size: clamp(30px, 5vw, 54px) !important;
  font-weight: 800 !important; line-height: 0.98 !important;
  text-transform: uppercase !important; color: #FFFFFF !important;
  margin: 0 0 10px !important; max-width: 18ch !important;
}
.prl-sub {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 15px !important; line-height: 1.55 !important;
  color: rgba(255,255,255,0.68) !important; max-width: 60ch !important; margin: 0 !important;
}

/* --- the ladder --- */
.prl-tiers {
  list-style: none !important; margin: 0 0 16px !important; padding: 0 !important;
  display: grid !important; grid-template-columns: repeat(5, 1fr) !important; gap: 10px !important;
}
.prl-tier {
  display: flex !important; flex-direction: column !important; align-items: center !important;
  padding: 16px 8px 14px !important; border-radius: 10px !important;
  background: rgba(14,31,38,0.55) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  transition: border-color .2s ease, transform .2s ease !important;
}
.prl-tier:hover { border-color: rgba(255,166,55,0.6) !important; transform: translateY(-2px) !important; }
/* last tier is the hero */
.prl-tier:last-child {
  background: rgba(255,166,55,0.14) !important;
  border-color: #FFA637 !important;
}
.prl-tier-n {
  font-family: 'Big Shoulders Display', sans-serif !important;
  font-size: 40px !important; font-weight: 800 !important; line-height: 1 !important;
  color: #FFFFFF !important;
}
.prl-tier-plus { font-size: 22px !important; color: #8FB479 !important; }
.prl-tier-unit {
  font-size: 9px !important; letter-spacing: 1.6px !important; text-transform: uppercase !important;
  color: rgba(255,255,255,0.4) !important; margin-bottom: 8px !important;
}
.prl-tier-off {
  font-size: 17px !important; font-weight: 800 !important; color: #FFA637 !important; line-height: 1 !important;
}
.prl-tier-offword { font-size: 12px !important; font-weight: 600 !important; }

.prl-fine {
  font-size: 11px !important; line-height: 1.5 !important;
  color: rgba(255,255,255,0.32) !important; margin: 0 0 16px !important; max-width: 80ch !important;
}

/* --- CTA button ---
   haze-dawn-overrides.css (~line 1856) carries a site-wide rule:
     a[href]:not(.coa-direct-btn):not(.coa-list-view-btn):not(.coa-view-all-link)... {
       color:#8FB479 !important; -webkit-text-fill-color:#8FB479 !important; }
   Its specificity is (0,6,1) — the five :not() class arguments count — so it beat
   plain .prl-cta (0,1,0) and painted the label the SAME green as the button
   background. Invisible text.

   a.prl-cta:not(#_hz) is (1,1,1); one id unit outranks (0,6,1) outright. Nothing
   on the site has id="_hz", so :not(#_hz) never excludes anything. This is the
   same phantom-id pattern the theme already uses at haze-dawn-overrides.css
   ~line 1921 and in haze-cart-drawer.css for the Checkout button.

   The :hover variant is required too — without it the hover rule repaints the
   label #A8C896, which is the hover background, so it would vanish on hover. */
.prl-cta,
a.prl-cta:not(#_hz) {
  display: inline-block !important;
  padding: 14px 28px !important; border-radius: 6px !important;
  background: #8FB479 !important; color: #162F38 !important;
  -webkit-text-fill-color: #162F38 !important;
  font-size: 13px !important; font-weight: 700 !important;
  letter-spacing: 1.4px !important; text-transform: uppercase !important;
  text-decoration: none !important;
}
a.prl-cta:not(#_hz):hover {
  background: #A8C896 !important;
  color: #162F38 !important;
  -webkit-text-fill-color: #162F38 !important;
}

/* --- compact variant for product pages --- */
.prl--compact { padding: 16px 0 14px !important; margin-bottom: 20px !important; border-radius: 10px !important; }
.prl--compact .prl-head { margin-bottom: 12px !important; }
.prl--compact .prl-kicker { margin-bottom: 8px !important; font-size: 10px !important; }
.prl-compact-line {
  font-size: 13px !important; font-weight: 600 !important;
  color: rgba(255,255,255,0.8) !important; margin: 0 !important;
}
.prl--compact .prl-tiers { gap: 6px !important; margin-bottom: 10px !important; }
.prl--compact .prl-tier { padding: 10px 4px 9px !important; border-radius: 8px !important; }
.prl--compact .prl-tier-n { font-size: 24px !important; }
.prl--compact .prl-tier-plus { font-size: 14px !important; }
.prl--compact .prl-tier-unit { font-size: 8px !important; margin-bottom: 5px !important; }
.prl--compact .prl-tier-off { font-size: 13px !important; }
.prl--compact .prl-tier-offword { font-size: 10px !important; }
.prl--compact .prl-fine { font-size: 10px !important; margin-bottom: 0 !important; }
.prl--compact .prl-cta,
.prl--compact a.prl-cta:not(#_hz) { display: none !important; }

@media (max-width: 749px) {
  .prl { padding: 22px 0 20px !important; border-radius: 10px !important; }
  .prl-tiers { grid-template-columns: repeat(3, 1fr) !important; gap: 7px !important; }
  .prl-tier:last-child { grid-column: span 3 !important; flex-direction: row !important; gap: 8px !important; align-items: baseline !important; justify-content: center !important; }
  .prl-tier:last-child .prl-tier-unit { margin-bottom: 0 !important; }
  .prl-tier-n { font-size: 30px !important; }
  .prl--compact .prl-tiers { grid-template-columns: repeat(5, 1fr) !important; }
  .prl--compact .prl-tier:last-child { grid-column: auto !important; flex-direction: column !important; }
}

/* ============================================================
   CART DRAWER PRE-ROLL METER
============================================================ */
.prm {
  padding: 14px 24px 15px !important;
  background: rgba(255,166,55,0.08) !important;
  border-bottom: 1px solid rgba(255,166,55,0.2) !important;
}
.prm[hidden] { display: none !important; }
.prm-row { display: flex !important; align-items: center !important; gap: 9px !important; margin-bottom: 10px !important; }
.prm-badge {
  flex: 0 0 auto !important;
  font-size: 10px !important; font-weight: 700 !important; letter-spacing: 0.6px !important;
  padding: 4px 8px !important; border-radius: 4px !important;
  background: rgba(255,255,255,0.12) !important; color: rgba(255,255,255,0.6) !important;
}
.prm-badge.is-on { background: #FFA637 !important; color: #162F38 !important; }
.prm-msg { font-size: 12.5px !important; line-height: 1.35 !important; color: rgba(255,255,255,0.82) !important; }
.prm-msg strong { color: #FFA637 !important; font-weight: 700 !important; }
.prm-track {
  position: relative !important; height: 5px !important; border-radius: 3px !important;
  background: rgba(255,255,255,0.1) !important; margin-bottom: 9px !important;
}
.prm-fill {
  height: 100% !important; width: 0 !important; border-radius: 3px !important;
  background: linear-gradient(90deg, #8FB479, #FFA637) !important;
  transition: width .4s cubic-bezier(.25,.46,.45,.94) !important;
}
.prm-notches { position: absolute !important; inset: 0 !important; pointer-events: none !important; }
.prm-notch {
  position: absolute !important; top: 50% !important;
  width: 7px !important; height: 7px !important; margin: -3.5px 0 0 -3.5px !important;
  border-radius: 50% !important; background: #0E1F26 !important;
  border: 1.5px solid rgba(255,255,255,0.25) !important; transition: all .25s ease !important;
}
.prm-notch.is-hit { background: #FFA637 !important; border-color: #FFA637 !important; }

/* Same site-wide a[href] override applies here. The resting green only looked
   correct by coincidence (it matched the forced colour); hover was already
   broken — it went pale green instead of orange. Pinned with the same pattern. */
.prm-link,
a.prm-link:not(#_hz) {
  font-size: 12px !important; font-weight: 600 !important;
  color: #8FB479 !important; -webkit-text-fill-color: #8FB479 !important;
  text-decoration: none !important; border-bottom: 1px solid rgba(143,180,121,0.4) !important;
}
.prm-link[hidden],
a.prm-link:not(#_hz)[hidden] { display: none !important; }
a.prm-link:not(#_hz):hover {
  color: #FFA637 !important; -webkit-text-fill-color: #FFA637 !important;
}

@media (prefers-reduced-motion: reduce) {
  .prl-tier, .prm-fill, .prm-notch { transition: none !important; }
}