/*!
 * promo.css — Customer-facing "Promotions" banner styling (Lumen theme)
 * All classes prefixed .pmx-. Theme-aware (light + html.nv-dark), responsive,
 * respects prefers-reduced-motion. Dynamic per-promo colors arrive as inline
 * CSS custom props: --pmx-bg / --pmx-fg / --pmx-btn.
 */

/* ================================================================== *
 * Base banner
 * ================================================================== */
.pmx-banner {
  /* theme-friendly defaults (used when a promo does not carry its own color) */
  --pmx-def-bg: var(--nv-surface, #ffffff);
  --pmx-def-fg: var(--nv-text, #0f172a);
  --pmx-def-muted: var(--nv-muted, #64748b);
  --pmx-def-btn: var(--nv-accent, #ff6b00);
  --pmx-def-border: var(--nv-border, #e6e8ec);

  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  background: var(--pmx-bg, var(--pmx-def-bg));
  color: var(--pmx-fg, var(--pmx-def-fg));
  border: 1px solid var(--pmx-def-border);
  border-radius: 16px;
  font-family: inherit;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;

  /* entrance/exit */
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  transition: opacity 0.32s ease, transform 0.32s ease;
}
.pmx-banner * { box-sizing: border-box; }
.pmx-banner.is-in { opacity: 1; transform: none; }
.pmx-banner.pmx-out {
  opacity: 0 !important;
  transform: scale(0.96) !important;
  pointer-events: none;
}

html.nv-dark .pmx-banner {
  --pmx-def-bg: var(--nv-surface, #111827);
  --pmx-def-fg: var(--nv-text, #e5e7eb);
  --pmx-def-muted: var(--nv-muted, #9ca3af);
  --pmx-def-border: var(--nv-border, #1f2937);
}

/* ================================================================== *
 * Layout: content / media / body
 * ================================================================== */
.pmx-content { display: flex; flex-direction: column; }

.pmx-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 6;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.05);
}
html.nv-dark .pmx-media { background: rgba(255, 255, 255, 0.06); }
.pmx-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pmx-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px 18px;
}

/* ================================================================== *
 * Text
 * ================================================================== */
.pmx-head { display: flex; align-items: center; gap: 10px; }
.pmx-icon {
  font-size: 18px;
  line-height: 1;
  color: var(--pmx-btn, var(--pmx-def-btn));
}
.pmx-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
}
.pmx-subtitle {
  font-size: 14px;
  font-weight: 600;
  opacity: 0.92;
}
.pmx-desc {
  font-size: 13.5px;
  line-height: 1.5;
  opacity: 0.82;
}

/* ================================================================== *
 * Badge pill
 * ================================================================== */
.pmx-badge {
  display: inline-block;
  align-self: flex-start;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.4;
}
.pmx-badge--NEW { background: #2563eb; }
.pmx-badge--SALE { background: #16a34a; }
.pmx-badge--HOT { background: #ef4444; }
.pmx-badge--LIMITED { background: #7c3aed; }

/* ================================================================== *
 * CTA button
 * ================================================================== */
.pmx-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: 4px;
  padding: 10px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--pmx-btn, var(--pmx-def-btn));
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.pmx-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }
.pmx-cta:active { transform: translateY(0); }
.pmx-cta:focus-visible {
  outline: 2px solid var(--pmx-btn, var(--pmx-def-btn));
  outline-offset: 2px;
}

/* ================================================================== *
 * Coupon code chip
 * ================================================================== */
.pmx-coupon {
  display: inline-flex;
  align-items: stretch;
  align-self: flex-start;
  margin-top: 4px;
  border: 1px dashed var(--pmx-btn, var(--pmx-def-btn));
  border-radius: 10px;
  overflow: hidden;
}
.pmx-coupon-code {
  padding: 8px 12px;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.pmx-coupon-copy {
  border: 0;
  border-left: 1px dashed var(--pmx-btn, var(--pmx-def-btn));
  background: transparent;
  color: var(--pmx-btn, var(--pmx-def-btn));
  padding: 8px 12px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s ease;
}
.pmx-coupon-copy:hover { text-decoration: underline; }
.pmx-coupon-copy.pmx-copied { color: #16a34a; }

/* ================================================================== *
 * Countdown timer
 * ================================================================== */
.pmx-cd {
  display: inline-flex;
  gap: 8px;
  margin-top: 4px;
}
.pmx-cd-seg {
  min-width: 48px;
  padding: 6px 4px;
  text-align: center;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.06);
}
html.nv-dark .pmx-cd-seg { background: rgba(255, 255, 255, 0.08); }
.pmx-cd-num {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.pmx-cd-lab {
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.7;
}
.pmx-cd-expired {
  font-weight: 700;
  color: #ef4444;
  font-size: 15px;
}

/* ================================================================== *
 * Close button
 * ================================================================== */
.pmx-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.06);
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}
.pmx-close:hover { background: rgba(0, 0, 0, 0.12); }
html.nv-dark .pmx-close { background: rgba(255, 255, 255, 0.1); }
html.nv-dark .pmx-close:hover { background: rgba(255, 255, 255, 0.18); }

/* ================================================================== *
 * Inline banner
 * ================================================================== */
.pmx-inline {
  width: 100%;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
}
html.nv-dark .pmx-inline { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); }

/* ================================================================== *
 * Alert bar (full-width, top of viewport / content)
 * ================================================================== */
.pmx-bar {
  width: 100%;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  transform: translateY(-100%);
}
.pmx-bar.is-in { transform: none; }
.pmx-bar .pmx-content {
  flex-direction: row;
  align-items: center;
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 48px 12px 18px;
}
.pmx-bar .pmx-media { display: none; }
.pmx-bar .pmx-body {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding: 0;
  width: 100%;
}
.pmx-bar .pmx-title { font-size: 15px; }
.pmx-bar .pmx-desc { font-size: 13px; }
.pmx-bar .pmx-cta {
  margin-top: 0;
  margin-left: auto;
  white-space: nowrap;
}
.pmx-bar .pmx-close { top: 50%; transform: translateY(-50%); }
.pmx-bar.pmx-out { transform: translateY(-100%) !important; }
.pmx-bar--sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
}

/* ================================================================== *
 * Popup (centered modal with backdrop blur)
 * ================================================================== */
.pmx-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pmx-popup-overlay.is-in { opacity: 1; }
.pmx-popup {
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  transform: scale(0.92);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.35);
}
.pmx-popup.is-in { transform: scale(1); }
.pmx-popup.pmx-out { transform: scale(0.9) !important; }

/* ================================================================== *
 * Floating (bottom-right compact card)
 * ================================================================== */
.pmx-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 99998;
  width: 320px;
  max-width: calc(100vw - 32px);
  transform: translateY(16px);
  box-shadow: 0 14px 44px rgba(15, 23, 42, 0.22);
}
.pmx-float.is-in { transform: none; }
.pmx-float.pmx-out { transform: translateY(16px) !important; }
.pmx-float .pmx-media { aspect-ratio: 16 / 8; }

/* ================================================================== *
 * Carousel
 * ================================================================== */
.pmx-carousel { position: relative; width: 100%; }
.pmx-carousel-view { width: 100%; overflow: hidden; }
.pmx-carousel-track {
  display: flex;
  transition: transform 0.45s ease;
  will-change: transform;
}
.pmx-slide { flex: 0 0 100%; min-width: 100%; }

.pmx-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #111827;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  transition: background 0.15s ease, transform 0.15s ease;
}
.pmx-arrow:hover { background: #fff; }
.pmx-arrow--prev { left: 8px; }
.pmx-arrow--next { right: 8px; }
html.nv-dark .pmx-arrow { background: rgba(30, 41, 59, 0.92); color: #e5e7eb; }
html.nv-dark .pmx-arrow:hover { background: rgba(30, 41, 59, 1); }

.pmx-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 10px 0 2px;
}
.pmx-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease;
}
.pmx-dot.is-active {
  width: 20px;
  background: var(--nv-accent, #ff6b00);
}
html.nv-dark .pmx-dot { background: rgba(255, 255, 255, 0.25); }

.pmx-carousel--single .pmx-arrow,
.pmx-carousel--single .pmx-dots { display: none; }

/* ================================================================== *
 * Responsive
 * ================================================================== */
@media (max-width: 640px) {
  .pmx-body { padding: 14px 16px; }
  .pmx-title { font-size: 16px; }
  .pmx-media { aspect-ratio: 16 / 9; }

  .pmx-bar .pmx-content { padding: 10px 42px 10px 14px; gap: 10px; }
  .pmx-bar .pmx-cta { margin-left: 0; width: 100%; }

  .pmx-float {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }

  .pmx-arrow { width: 30px; height: 30px; font-size: 18px; }
  .pmx-cd-seg { min-width: 42px; }
}

/* ================================================================== *
 * Reduced motion
 * ================================================================== */
@media (prefers-reduced-motion: reduce) {
  .pmx-banner,
  .pmx-popup-overlay,
  .pmx-carousel-track,
  .pmx-cta,
  .pmx-dot,
  .pmx-arrow,
  .pmx-close {
    transition: none !important;
  }
  .pmx-banner { transform: none !important; }
  .pmx-banner.pmx-out { transform: none !important; }
}

/* PMX-UNIFORM-CAROUSEL: all carousel banners share the tallest slide’s height so rotating
   never jumps, and every banner looks the same size — incl. any created via the
   admin Promotions form. Single (non-carousel) banners are untouched. */
.pmx-carousel .pmx-slide { display: flex; }
.pmx-carousel .pmx-slide > .pmx-banner {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pmx-carousel .pmx-slide > .pmx-banner > .pmx-content { width: 100%; }

/* PMX-IMAGE-BANNER: image-type inline banners render full-bleed (the image carries the
   message). Desktop uses the wide art (120/34), mobile swaps to img_mobile (72/38). */
.pmx-inline.pmx-t-image .pmx-content { padding: 0; gap: 0; max-width: none; margin: 0; }
.pmx-inline.pmx-t-image .pmx-body { display: none; }
.pmx-inline.pmx-t-image .pmx-media { aspect-ratio: 120 / 34; }
.pmx-inline.pmx-t-image .pmx-close { background: rgba(0,0,0,.28); color:#fff; }
@media (max-width: 640px){ .pmx-inline.pmx-t-image .pmx-media { aspect-ratio: 72 / 38; } }

/* PMX-COMPACT: dashboard promo banners were ~400px tall — image slides at 120/34
   aspect (full dashboard width) dragged the whole uniform carousel up. Cap the
   image media to a compact height so text + image slides stay short. */
.pmx-inline.pmx-t-image .pmx-media { aspect-ratio: 10 / 1; height: auto; }
.pmx-inline .pmx-media img,
.pmx-inline .pmx-media .pmx-img { width: 100%; height: 100%; object-fit: cover; }
.pmx-inline .pmx-body { padding: 13px 16px; }
@media (max-width: 640px){
  .pmx-inline.pmx-t-image .pmx-media { aspect-ratio: 40 / 11; }
}

/* PMX-COMPACT-MOBILE: text (announcement) banners stack tall on phones, and the uniform
   carousel forces the short image slides to match that height. Tighten the text elements
   on mobile so the whole carousel stays compact. */
@media (max-width: 640px){
  .pmx-inline .pmx-body { padding: 11px 14px; gap: 5px; }
  .pmx-inline .pmx-head { gap: 8px; }
  .pmx-inline .pmx-icon { font-size: 15px; }
  .pmx-inline .pmx-title { font-size: 14.5px; line-height: 1.2; }
  .pmx-inline .pmx-subtitle { font-size: 12px; }
  .pmx-inline .pmx-coupon { margin-top: 2px; }
  .pmx-inline .pmx-coupon-code { padding: 6px 10px; font-size: 12.5px; }
  .pmx-inline .pmx-coupon-copy { padding: 6px 10px; }
  .pmx-inline .pmx-cta { padding: 9px 15px; font-size: 13px; margin-top: 2px; }
  .pmx-inline .pmx-badge { font-size: 10px; padding: 2px 7px; }
}

/* asset-rev fac7b6c034fe27a10f868bdb11d1322a */
:root{--asset-rev:"fac7b6c034fe27a10f868bdb11d1322a"}