/* Static-site overrides: elements that the React app conditionally rendered
   are always in the DOM here, so they start hidden and JS toggles them. */

/* Cart drawer: hidden until opened */
.ul-drawer {
  display: none;
}
.ul-drawer.ul-drawer--open {
  display: flex;
}

/* Researcher gate, email capture: controlled by JS */
.ul-gate,
.ul-capture {
  display: none;
}

/* Mobile menu: hidden until hamburger is tapped */
.ul-nav__menu {
  display: none;
}

/* FAQ answers: closed by default, JS expands */
.ul-faq__answer {
  display: none;
}

/* Promo feedback line */
#drawer-promo-ok {
  display: none;
}

/* Hero copy typography (used inside .ul-rise below) */
.ul-hero__kicker {
  margin: 0 0 1rem;
  color: var(--ul-red, #e4002b);
  font-family: var(--ul-mono, "JetBrains Mono", monospace);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ul-hero__title {
  margin: 0;
  color: var(--ul-ink, #0c0c0e);
  font-size: clamp(2.75rem, 6vw, 6.75rem);
  font-weight: 700;
  line-height: 0.94;
  letter-spacing: -0.045em;
  text-wrap: balance;
}
.ul-hero__body {
  max-width: 42ch;
  margin: 1.5rem 0 0;
  color: var(--ul-muted, #52545c);
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.55;
}
.ul-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
}
.ul-hero__tags li {
  padding: 0.45rem 0.7rem;
  border: 1px solid rgba(12, 12, 14, 0.2);
  color: var(--ul-ink, #0c0c0e);
  font-size: 0.82rem;
}
.ul-hero__actions {
  margin-top: 2rem;
  pointer-events: auto;
}

/* Checkout summary always visible on desktop, collapsible on mobile */
.ul-co__summary-body {
  display: block;
}
@media (max-width: 900px) {
  .ul-co__summary-body:not([data-open="true"]) {
    display: none;
  }
}

/* Keep form fields looking like the design system */
select,
textarea {
  font-family: var(--ul-display, "Space Grotesk", sans-serif);
}
/* Views toggled with the hidden attribute (account page) */
[hidden] {
  display: none !important;
}

/* Account icon next to the cart (same outline + hover as the cart button) */
.ul-account-button {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  color: #fff;
  transition: border-color 180ms ease, background 180ms ease;
}
.ul-account-button:hover,
.ul-account-button:focus-visible {
  border-color: var(--ul-red);
  background: var(--ul-red);
}
.ul-account-button svg {
  display: block;
}

/* Checkout: "add Recon Solution" suggestion under the totals */
.ul-upsell {
  display: grid;
  grid-template-columns: 4.25rem 1fr;
  gap: 0.9rem;
  align-items: center;
  margin: 1rem 0 0;
  padding: 0.9rem;
  border: 1px solid var(--ul-line);
  border-left: 3px solid var(--ul-red);
  background: #fff;
  animation: ul-upsell-in 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ul-upsell__img {
  width: 4.25rem;
  height: 4.25rem;
  object-fit: contain;
  background: var(--ul-paper);
}
.ul-upsell__kicker {
  margin: 0;
  color: var(--ul-red);
  font-family: var(--ul-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ul-upsell__name {
  margin: 0.2rem 0 0;
  font-weight: 700;
}
.ul-upsell__desc {
  margin: 0.2rem 0 0;
  color: var(--ul-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}
.ul-upsell__foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.ul-upsell__foot .ul-add {
  flex-shrink: 0;
}
@keyframes ul-upsell-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ul-upsell { animation: none; }
}
/* Store admin (admin.html) */
.ul-admin { display: block; max-width: 56rem; }
.ul-admin__cta { max-width: 22rem; margin-top: 1rem; }
.ul-admin__filters { margin: 1.5rem 0 0.5rem; }
.ul-admin__order { margin-top: 1rem; }
.ul-admin__order p { margin: 0.35rem 0 0; }
.ul-admin__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.ul-admin__head select { padding: 0.35rem 0.5rem; border: 1px solid var(--ul-line); background: #fff; font-family: var(--ul-mono); font-size: 0.8rem; }
.ul-admin__muted { color: var(--ul-muted); font-family: var(--ul-mono); font-size: 0.78rem; }
/* ============================================================
   Hero: UPRISE vial artwork with light effects
   Desktop/tablet (>800px): landscape art, cursor parallax + red glow,
   per-vial hover lift. Phones: portrait art, gentle vial float.
   The art box always keeps the artwork's exact proportions, so the
   vials are never cropped and the per-vial hover zones stay aligned.
   Without JavaScript the artwork shows as a static image.
   ============================================================ */
.ul-rise {
  --rise-bg: #111215; /* matches the artwork's top edge */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: max(56.28vw, 36rem); /* 941 / 1672 */
  background: var(--rise-bg);
  color: #fff;
}
.ul-rise__art {
  --mx: 68%;
  --my: 50%;
  --rx: 0deg;
  --ry: 0deg;
  --tx: 0px;
  --ty: 0px;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  aspect-ratio: 1672 / 941;
  overflow: hidden;
  perspective: 1200px;
}
/* Blends the art's top edge into the hero background when the hero is taller than the art */
.ul-rise__art::before {
  content: "";
  position: absolute;
  z-index: 7;
  top: 0;
  right: 0;
  left: 0;
  height: 16%;
  pointer-events: none;
  background: linear-gradient(180deg, var(--rise-bg), rgba(17, 18, 21, 0));
}
.ul-rise__stage {
  position: absolute;
  inset: -1%; /* just enough margin for the parallax; no extra zoom keeps the art sharp */
  transform: translate3d(var(--tx), var(--ty), 0) rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 90ms linear;
  will-change: transform;
}
.ul-rise__stage picture {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
  transition: filter 0.38s ease;
}
.ul-rise__layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
  /* same grade on the base and the vial copies so the copies are invisible at rest */
  filter: saturate(1.04) contrast(1.03);
}
.ul-rise__vial {
  z-index: 2;
  pointer-events: auto; /* hit area = the clip-path shape, i.e. just the vial */
  transition: transform 0.38s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.38s ease;
}
/* Desktop vial zones: traced bottle outlines (cap, neck, shoulders, rounded base).
   Generated from the artwork; hover lift and red glow follow the bottle shape. */
.ul-rise__vial--left {
  clip-path: polygon(46.35% 27.52%, 46.38% 27.14%, 46.46% 26.78%, 46.60% 26.47%, 46.77% 26.24%, 46.97% 26.09%, 47.19% 26.04%, 57.89% 26.04%, 58.11% 26.09%, 58.31% 26.24%, 58.49% 26.47%, 58.62% 26.78%, 58.70% 27.14%, 58.73% 27.52%, 58.73% 34.01%, 58.49% 34.43%, 57.42% 34.64%, 57.42% 37.83%, 57.78% 37.91%, 58.13% 38.14%, 58.45% 38.51%, 58.73% 39.01%, 58.96% 39.63%, 59.13% 40.32%, 59.23% 41.08%, 59.27% 41.87%, 59.27% 78.53%, 59.21% 79.30%, 59.05% 80.02%, 58.78% 80.64%, 58.43% 81.11%, 58.03% 81.41%, 57.60% 81.51%, 47.37% 81.51%, 46.93% 81.41%, 46.53% 81.11%, 46.18% 80.64%, 45.92% 80.02%, 45.75% 79.30%, 45.69% 78.53%, 45.69% 41.87%, 45.73% 41.08%, 45.84% 40.32%, 46.02% 39.63%, 46.25% 39.01%, 46.54% 38.51%, 46.88% 38.14%, 47.23% 37.91%, 47.61% 37.83%, 47.61% 34.64%, 46.59% 34.43%, 46.35% 34.01%);
  transform-origin: 52.48% 81.51%;
}
.ul-rise__vial--center {
  clip-path: polygon(60.11% 21.79%, 60.14% 21.35%, 60.24% 20.94%, 60.39% 20.58%, 60.59% 20.31%, 60.82% 20.14%, 61.06% 20.09%, 74.22% 20.09%, 74.47% 20.14%, 74.70% 20.31%, 74.90% 20.58%, 75.05% 20.94%, 75.15% 21.35%, 75.18% 21.79%, 75.18% 29.86%, 74.94% 30.29%, 73.44% 30.50%, 73.44% 35.28%, 73.92% 35.37%, 74.38% 35.62%, 74.81% 36.03%, 75.18% 36.59%, 75.48% 37.27%, 75.71% 38.04%, 75.85% 38.87%, 75.90% 39.74%, 75.90% 79.17%, 75.84% 80.00%, 75.66% 80.77%, 75.37% 81.43%, 75.00% 81.93%, 74.57% 82.25%, 74.10% 82.36%, 61.42% 82.36%, 60.96% 82.25%, 60.53% 81.93%, 60.15% 81.43%, 59.87% 80.77%, 59.69% 80.00%, 59.63% 79.17%, 59.63% 39.74%, 59.67% 38.87%, 59.80% 38.04%, 60.00% 37.27%, 60.28% 36.59%, 60.61% 36.03%, 61.00% 35.62%, 61.41% 35.37%, 61.84% 35.28%, 61.84% 30.50%, 60.35% 30.29%, 60.11% 29.86%);
  transform-origin: 67.76% 82.36%;
}
.ul-rise__vial--right {
  clip-path: polygon(76.20% 28.37%, 76.22% 27.99%, 76.31% 27.63%, 76.44% 27.32%, 76.61% 27.09%, 76.82% 26.94%, 77.03% 26.89%, 87.62% 26.89%, 87.84% 26.94%, 88.04% 27.09%, 88.21% 27.32%, 88.34% 27.63%, 88.43% 27.99%, 88.46% 28.37%, 88.46% 34.64%, 88.22% 35.07%, 87.14% 35.28%, 87.14% 38.89%, 87.50% 38.96%, 87.85% 39.17%, 88.17% 39.50%, 88.45% 39.95%, 88.68% 40.50%, 88.85% 41.13%, 88.96% 41.80%, 89.00% 42.51%, 89.00% 78.43%, 88.94% 79.20%, 88.77% 79.91%, 88.50% 80.53%, 88.16% 81.00%, 87.75% 81.30%, 87.32% 81.40%, 77.39% 81.40%, 76.96% 81.30%, 76.56% 81.00%, 76.21% 80.53%, 75.94% 79.91%, 75.77% 79.20%, 75.72% 78.43%, 75.72% 42.51%, 75.75% 41.80%, 75.86% 41.13%, 76.03% 40.50%, 76.26% 39.95%, 76.54% 39.50%, 76.86% 39.17%, 77.21% 38.96%, 77.57% 38.89%, 77.57% 35.28%, 76.44% 35.07%, 76.20% 34.64%);
  transform-origin: 82.36% 81.40%;
}
.ul-rise__vial:hover {
  /* grows up from its own base so the original bottle stays covered */
  transform: translateY(-3px) scale(1.035);
  filter: saturate(1.04) contrast(1.03) brightness(1.05);
}
/* The red glow sits on the wrapper so it isn't cut off by the vial's clip-path */
.ul-rise__stage picture:has(.ul-rise__vial:hover) {
  filter: drop-shadow(0 0 12px rgba(255, 40, 40, 0.28)) drop-shadow(0 0 30px rgba(255, 0, 0, 0.16));
}
.ul-rise__particles {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.45;
}
.ul-rise__glow {
  position: absolute;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle 250px at var(--mx) var(--my), rgba(255, 30, 30, 0.16) 0%, rgba(255, 0, 0, 0.08) 28%, rgba(255, 0, 0, 0) 72%);
  mix-blend-mode: screen;
}
.ul-rise__bloom {
  position: absolute;
  z-index: 3;
  right: -8%;
  bottom: 11%;
  left: 46%;
  height: 27%;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(255, 22, 22, 0.22), rgba(255, 0, 0, 0.06) 48%, transparent 77%);
  filter: blur(20px);
  mix-blend-mode: screen;
  animation: ul-rise-breathe 5.8s ease-in-out infinite;
}
@keyframes ul-rise-breathe {
  0%, 100% { opacity: 0.38; transform: scale(0.98); }
  50% { opacity: 0.82; transform: scale(1.04); }
}
.ul-rise__sweep {
  position: absolute;
  z-index: 5;
  top: 8%;
  bottom: 7%;
  left: 55%;
  width: 12%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.08), rgba(255, 70, 70, 0.04), transparent);
  filter: blur(8px);
  opacity: 0;
  transform: skewX(-8deg);
  animation: ul-rise-sweep 8.5s ease-in-out infinite;
}
@keyframes ul-rise-sweep {
  0%, 16% { transform: translateX(-18vw) skewX(-8deg); opacity: 0; }
  28% { opacity: 0.4; }
  48% { opacity: 0.22; }
  64%, 100% { transform: translateX(35vw) skewX(-8deg); opacity: 0; }
}
.ul-rise__vignette {
  position: absolute;
  z-index: 6;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.08) 39%, transparent 59%),
    radial-gradient(ellipse at center, transparent 54%, rgba(0, 0, 0, 0.22) 100%);
}

/* Existing hero copy, placed over the dark left side of the art */
.ul-rise__copy {
  box-sizing: border-box;
  position: relative;
  z-index: 8;
  display: flex;
  align-items: center;
  width: min(47%, 54rem);
  min-height: inherit;
  padding: calc(4.5rem + clamp(1.5rem, 4vh, 3rem)) clamp(1.25rem, 5vw, 6rem) clamp(2rem, 5vh, 4rem);
  pointer-events: none;
}
.ul-rise__copy-inner {
  max-width: 46rem;
  pointer-events: auto;
}
.ul-rise .ul-hero__title {
  color: #fff;
  font-size: clamp(2.5rem, 4.4vw, 5.25rem);
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
.ul-rise .ul-hero__body {
  color: rgba(255, 255, 255, 0.74);
}
.ul-rise .ul-hero__tags li {
  border-color: rgba(255, 255, 255, 0.26);
  background: rgba(10, 10, 12, 0.35);
  color: #fff;
}
.ul-rise .ul-draw-link {
  color: #fff;
}
.ul-rise .ul-draw-link:hover {
  color: #ff4d64;
}

/* Phones and small tablets: portrait art under the copy */
@media (max-width: 800px) {
  .ul-rise {
    --art-w: min(100vw, 34rem);
    display: flex;
    flex-direction: column;
    min-height: 0;
  }
  .ul-rise__copy {
    width: 100%;
    min-height: 0;
    padding: calc(4.5rem + 1.75rem) 1.25rem 0;
  }
  /* The art's empty smoky top half sits under the text; the vials start below it */
  .ul-rise__art {
    order: 2; /* the art comes first in the HTML (desktop backdrop); on phones it goes under the copy */
    position: relative;
    z-index: 1;
    width: var(--art-w);
    margin: calc(var(--art-w) * -0.5) auto 0;
    aspect-ratio: 941 / 1672;
  }
  .ul-rise__art::before {
    height: 34%;
  }
  .ul-rise__vial--left {
    clip-path: polygon(11.8% 40.2%, 35.8% 40.2%, 35.8% 73.8%, 11.8% 73.8%);
    transform-origin: 23.8% 70%;
  }
  .ul-rise__vial--center {
    clip-path: polygon(35.8% 36%, 64.4% 36%, 64.4% 74.8%, 35.8% 74.8%);
    transform-origin: 50% 71%;
  }
  .ul-rise__vial--right {
    clip-path: polygon(64.4% 40.2%, 88.2% 40.2%, 88.2% 73.7%, 64.4% 73.7%);
    transform-origin: 76.3% 70%;
  }
  .ul-rise__vial:hover {
    transform: none;
    filter: saturate(1.04) contrast(1.03);
  }
  .ul-rise__stage picture:has(.ul-rise__vial:hover) {
    filter: none;
  }
  .ul-rise__stage {
    inset: -1%;
    transform: scale(1.018);
  }
  .ul-rise__glow {
    background: radial-gradient(circle 150px at 50% 56%, rgba(255, 30, 30, 0.11) 0%, rgba(255, 0, 0, 0.05) 35%, transparent 74%);
    opacity: 0.55;
  }
  .ul-rise__bloom {
    right: 0;
    bottom: 24%;
    left: 0;
    height: 22%;
    opacity: 0.52;
    filter: blur(18px);
  }
  .ul-rise__sweep {
    top: 30%;
    bottom: 19%;
    left: 40%;
    width: 16%;
  }
  .ul-rise__vignette {
    background:
      linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, transparent 40%, rgba(0, 0, 0, 0.12) 100%),
      radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, 0.2) 100%);
  }
  .ul-rise .ul-hero__title {
    font-size: clamp(2.4rem, 11vw, 3.6rem);
  }
}
/* Wider than the capped art (small tablets): soften the art's side edges */
@media (min-width: 545px) and (max-width: 800px) {
  .ul-rise__art {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  }
}
/* Touch screens (and phones): gentle automatic float instead of hover */
@media (max-width: 800px), (pointer: coarse) {
  .ul-rise__vial {
    animation: ul-rise-float 6.5s ease-in-out infinite;
  }
  .ul-rise__vial--center { animation-delay: 0.7s; }
  .ul-rise__vial--right { animation-delay: 1.4s; }
}
@keyframes ul-rise-float {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.004); }
}
@media (prefers-reduced-motion: reduce) {
  .ul-rise__stage,
  .ul-rise__vial,
  .ul-rise__stage picture {
    transition: none;
  }
  .ul-rise__bloom,
  .ul-rise__sweep,
  .ul-rise__vial {
    animation: none !important;
  }
  .ul-rise__vial:hover {
    transform: none;
  }
}
/* ============================================================
   Product page: bundle & save, COA + add to cart, subscribe & save
   ============================================================ */
.ul-bundle { margin: 1.4rem 0 0; }
.ul-bundle__kicker,
.ul-subbox__kicker,
.ul-subbox__label {
  margin: 0;
  color: var(--ul-muted);
  font-family: var(--ul-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ul-bundle__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 0.85rem;
}
.ul-bundle__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 4.6rem;
  padding: 0.85rem 0.75rem 0.7rem;
  border: 1px solid var(--ul-line);
  background: #fff;
  color: var(--ul-ink);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.ul-bundle__card:hover { border-color: rgba(228, 0, 43, 0.5); }
.ul-bundle__card[aria-checked="true"] {
  border-color: var(--ul-red);
  box-shadow: 0 0 0 1px var(--ul-red), 0 10px 28px -14px rgba(228, 0, 43, 0.55);
}
.ul-bundle__card:active { transform: scale(0.98); }
.ul-bundle__badge {
  position: absolute;
  top: -0.62rem;
  left: 0.6rem;
  padding: 0.18rem 0.45rem;
  background: var(--ul-ink);
  color: #fff;
  font-family: var(--ul-mono);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ul-bundle__card[data-tier="3"] .ul-bundle__badge { background: var(--ul-red); }
.ul-bundle__vials { display: flex; flex-shrink: 0; }
.ul-bundle__vials img {
  width: 1.9rem;
  height: 2.6rem;
  object-fit: cover;
  object-position: center;
  border-radius: 3px;
  filter: drop-shadow(0 3px 5px rgba(12, 12, 14, 0.18));
}
.ul-bundle__vials img + img { margin-left: -0.9rem; }
.ul-bundle__vials--3 img + img { margin-left: -1.1rem; }
.ul-bundle__text { display: flex; flex-direction: column; min-width: 0; }
.ul-bundle__title { font-size: 0.98rem; font-weight: 700; line-height: 1.15; }
.ul-bundle__sub {
  margin-top: 0.2rem;
  color: var(--ul-muted);
  font-family: var(--ul-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.ul-bundle__card[aria-checked="true"] .ul-bundle__sub { color: var(--ul-red); }
.ul-bundle__qty {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.7rem;
  font-family: var(--ul-mono);
  font-size: 0.8rem;
}
.ul-bundle__qty > span:first-child { color: var(--ul-muted); letter-spacing: 0.1em; text-transform: uppercase; }
.ul-bundle__qty button {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--ul-line);
  background: #fff;
  cursor: pointer;
  font: inherit;
}
.ul-buyrow {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  margin-top: 1rem;
}
.ul-buyrow__coa,
.ul-buyrow__add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3.4rem;
  padding: 0 1.3rem;
  font-family: var(--ul-mono);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
.ul-buyrow__coa {
  border: 1px solid var(--ul-ink);
  background: transparent;
  color: var(--ul-ink);
  transition: background 160ms ease, color 160ms ease;
}
.ul-buyrow__coa:hover { background: var(--ul-ink); color: #fff; }
.ul-buyrow__add {
  position: relative;
  overflow: hidden;
  border: 0;
  background: var(--ul-ink);
  color: #fff;
  font-size: 0.95rem;
}
.ul-buyrow__add::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--ul-red), #ff3355);
  transform: translateX(-101%);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ul-buyrow__add:hover::after { transform: translateX(0); }
.ul-buyrow__add > * { position: relative; z-index: 1; }
.ul-buyrow__add s,
.ul-subbox s { opacity: 0.6; font-weight: 400; }
.ul-subbox {
  margin-top: 1rem;
  padding: 1.1rem;
  border: 1px solid rgba(228, 0, 43, 0.35);
  background: linear-gradient(180deg, rgba(228, 0, 43, 0.045), rgba(228, 0, 43, 0.015));
}
.ul-subbox__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.ul-subbox__kicker { display: flex; align-items: center; gap: 0.45rem; color: var(--ul-red); }
.ul-subbox__terms { margin: 0.45rem 0 0; color: var(--ul-muted); font-size: 0.9rem; }
.ul-subbox__price { text-align: right; }
.ul-subbox__price p:last-child { margin: 0.35rem 0 0; font-family: var(--ul-mono); font-size: 1rem; white-space: nowrap; }
.ul-subbox__price strong { font-size: 1.15rem; }
.ul-subbox__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 3.1rem;
  margin-top: 0.9rem;
  border: 0;
  background: var(--ul-red);
  color: #fff;
  cursor: pointer;
  font-family: var(--ul-mono);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: background 160ms ease;
}
.ul-subbox__btn:hover { background: #c20024; }
.ul-subbox__btn:disabled { opacity: 0.6; cursor: wait; }
.ul-subbox__note { margin: 0.7rem 0 0; color: var(--ul-muted); font-size: 0.8rem; text-align: center; }
@media (max-width: 560px) {
  .ul-bundle__row { grid-template-columns: 1fr; }
  .ul-bundle__card { min-height: 3.9rem; }
  .ul-buyrow { grid-template-columns: 1fr; }
  .ul-buyrow__coa { order: 2; min-height: 2.9rem; }
}

/* Cart / checkout line notes and totals */
.ul-line-note {
  display: block;
  margin: 0.3rem 0 0;
  color: var(--ul-red);
  font-family: var(--ul-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.06em;
}
.ul-line-total { margin-left: auto; font-family: var(--ul-mono); font-size: 0.85rem; white-space: nowrap; }
.ul-line-total s { color: var(--ul-muted); font-size: 0.75rem; }

/* Free-shipping progress (cart drawer + checkout summary) */
.ul-freeship { margin: 1rem 0 0.25rem; }
.ul-freeship__text { margin: 0 0 0.45rem; font-size: 0.85rem; }
.ul-freeship__text strong { color: var(--ul-red); }
.ul-freeship--done .ul-freeship__text strong { color: #0f7a3a; }
.ul-freeship__track { height: 6px; overflow: hidden; background: var(--ul-line); }
.ul-freeship__track span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ul-red), #ff3355);
  transition: width 400ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ul-freeship--done .ul-freeship__track span { background: #0f7a3a; }

/* Account: subscriptions + order status */
.ul-acct__heading { margin: 1.6rem 0 0.4rem; font-size: 1.05rem; }
.ul-acct__status {
  margin-left: 0.4rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--ul-line);
  color: var(--ul-muted);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ul-acct__status--shipped { border-color: #0f7a3a; color: #0f7a3a; }
.ul-acct__status--cancelled { border-color: var(--ul-red); color: var(--ul-red); }
.ul-acct__cancel {
  margin-top: 0.6rem;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--ul-line);
  background: transparent;
  cursor: pointer;
  font-family: var(--ul-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ul-acct__cancel:hover { border-color: var(--ul-red); color: var(--ul-red); }
/* Store admin: tabs, forms, stats */
.ul-admin__tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1rem 0 0.5rem; border-bottom: 1px solid var(--ul-line); }
.ul-admin__tabs button {
  padding: 0.7rem 1rem;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  font-family: var(--ul-mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.ul-admin__tabs button[aria-pressed="true"] { border-bottom-color: var(--ul-red); color: var(--ul-red); }
.ul-admin__tag {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--ul-line);
  color: var(--ul-muted);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: none;
}
.ul-admin__ship,
.ul-admin__form-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.ul-admin__ship select,
.ul-admin__ship input,
.ul-admin__form-row input,
.ul-admin__link {
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--ul-line);
  background: #fff;
  font: inherit;
  font-size: 0.85rem;
}
.ul-admin__ship input,
.ul-admin__form-row input { flex: 1 1 10rem; }
.ul-admin__link { width: min(100%, 26rem); font-family: var(--ul-mono); font-size: 0.75rem; }
.ul-admin__dark { background: var(--ul-ink); color: #fff; border-color: var(--ul-ink); }
.ul-admin__form { margin: 1rem 0; padding: 1rem; border: 1px solid var(--ul-line); background: #fff; }
.ul-admin__kpis { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0; }
.ul-admin__kpis div { min-width: 9rem; padding: 1rem; border: 1px solid var(--ul-line); background: #fff; }
.ul-admin__kpis b { display: block; font-size: 1.8rem; }
.ul-admin__kpis span { color: var(--ul-muted); font-family: var(--ul-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; }
.ul-admin__chart { display: flex; align-items: flex-end; gap: 3px; height: 9rem; padding: 0.5rem; border: 1px solid var(--ul-line); background: #fff; }
.ul-admin__chart div { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.ul-admin__chart span { display: block; width: 100%; background: var(--ul-red); opacity: 0.85; }
.ul-admin__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.ul-admin__cols ol { margin: 0.5rem 0 0; padding: 0; list-style: none; }
.ul-admin__cols li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; border-bottom: 1px solid var(--ul-line); font-size: 0.85rem; word-break: break-all; }