/* Site-wide yarn deals: catalog photos + the Gem rewards claim treatment. */
.promo-deal-toast {
  position: fixed;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: 990;
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(390px, calc(100vw - 32px));
  padding: 14px 16px;
  border: 1px solid var(--Purple);
  border-radius: 16px;
  box-shadow: 0 5px 24px #0002;
  background: var(--background1);
  color: var(--textMain);
  font-family: var(--fontInter);
  text-align: left;
  cursor: pointer;
}
.promo-deal-toast[hidden] { display: none; }
.promo-deal-toast-copy { display: grid; gap: 5px; min-width: 0; }
.promo-deal-toast-copy strong { font-size: 14px; }
.promo-deal-toast-copy > span { font-size: 12px; line-height: 1.4; }
.promo-deal-toast-time {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--Purple);
  font-size: 24px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.promo-deal-toast:focus-visible { outline: 2px solid var(--Purple); outline-offset: 3px; }
@media screen and (min-width: 1280px) {
  .promo-deal-toast { bottom: 120px; }
}

.promo-popup::part(panel) {
  width: min(660px, calc(100vw - 24px));
  max-height: calc(100% - 24px) !important; /* override the shared mobile dialog's 75vh cap */
  border-radius: 20px;
  background: var(--White);
  color: var(--textMain);
}
.promo-popup::part(title) {
  font-family: var(--fontHeading);
  font-size: var(--font_header);
  font-weight: var(--fontweight_heavy);
}
.promo-popup::part(body) {
  display: flex;
  min-height: 0;
  padding: 16px 20px 20px;
  overflow: hidden;
}
.promo-popup .promo-popup-body {
  width: 100%;
  min-height: 0;
  max-height: calc(100vh - 170px);
  max-height: calc(100dvh - 170px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--Purple) transparent;
  padding: 2px 4px 4px;
}
.promo-popup .promo-intro {
  margin: 0 0 18px;
  font-family: var(--fontInter);
  font-size: 14px;
  line-height: 1.6;
  color: var(--textSecondary);
}
.promo-popup .promo-msg {
  margin: 0 0 14px;
  padding: 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
}
.promo-popup .promo-msg.is-ok {
  background: var(--background2);
  color: var(--textMain);
}
.promo-popup .promo-msg.is-err {
  background: color-mix(in srgb, var(--Red) 12%, var(--White));
  color: var(--textMain);
}
.promo-popup .promo-empty,
.promo-popup .promo-loading {
  padding: 40px 0;
  text-align: center;
  color: var(--textSecondary);
}
.promo-popup .promo-loading sl-spinner { font-size: 28px; }
.promo-popup .promo-deals {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.promo-popup .promo-deal {
  display: grid;
  grid-template-columns: 136px minmax(0, 1fr);
  grid-template-areas: "photo info" "photo footer";
  gap: 12px 18px;
  padding: 16px;
  border: 1px solid var(--Purple-100, #e9ddff);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--background), var(--White));
  transition: border-color .2s ease, box-shadow .2s ease;
}
.promo-popup .promo-deal:hover,
.promo-popup .promo-deal:focus-within {
  border-color: var(--Purple);
}
.promo-popup .promo-deal.is-held {
  border-color: var(--Purple);
  box-shadow: 0 0 0 1px var(--Purple);
}
.promo-popup .promo-deal-img {
  grid-area: photo;
  align-self: start;
  display: block;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--background2);
}
.promo-popup .promo-deal-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .25s ease;
}
.promo-popup .promo-deal-img:hover img { transform: scale(1.04); }
.promo-popup .promo-deal.is-gone .promo-deal-img img { opacity: .5; }
.promo-popup .promo-deal-info {
  grid-area: info;
  min-width: 0;
  overflow-wrap: anywhere;
}
.promo-popup .promo-deal-off {
  margin: 0 0 6px;
  font-family: var(--fontHeading);
  font-size: 21px;
  font-weight: var(--fontweight_heavy);
  line-height: 1.3;
  color: var(--textMain);
}
.promo-popup .promo-deal-line {
  font-size: 15px;
  font-weight: var(--fontweight_heavy);
  color: var(--textMain);
  text-decoration: none;
}
.promo-popup .promo-deal-line:hover { text-decoration: underline; }
.promo-popup .promo-deal-meta,
.promo-popup .promo-deal-note {
  font-family: var(--fontInter);
  font-size: 12px;
  line-height: 1.5;
  color: var(--textSecondary);
}
.promo-popup .promo-deal-meta { margin-top: 5px; }
.promo-popup .promo-deal-footer {
  grid-area: footer;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.promo-popup .promo-deal-progress {
  grid-column: 1;
  grid-row: 1;
  padding: 10px 12px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--Pink) 10%, transparent);
}
.promo-popup .promo-deal-progress-label {
  margin-bottom: 6px;
  font-family: var(--fontInter);
  font-size: 12px;
  font-weight: var(--fontweight_heavy);
  color: var(--Pink);
}
.promo-popup .promo-deal-progress progress {
  display: block;
  width: 100%;
  height: 8px;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #e6337333;
  appearance: none;
  -webkit-appearance: none;
}
.promo-popup .promo-deal-progress progress::-webkit-progress-bar {
  background: #e6337333;
  border-radius: 8px;
}
.promo-popup .promo-deal-progress progress::-webkit-progress-value {
  background: repeating-linear-gradient(-45deg, #d96c95, #d96c95 4px, var(--Pink) 4px, var(--Pink) 13px);
  border-radius: 8px;
}
.promo-popup .promo-deal-progress progress::-moz-progress-bar {
  background: repeating-linear-gradient(-45deg, #d96c95, #d96c95 4px, var(--Pink) 4px, var(--Pink) 13px);
  border-radius: 8px;
}
.promo-popup .promo-deal-held {
  grid-column: 1 / -1;
  grid-row: 2;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-family: var(--fontInter);
  font-size: 12px;
  color: var(--textMain);
  font-weight: var(--fontweight_heavy);
}
.promo-popup .promo-deal-held sl-icon { color: var(--Purple); }
.promo-popup .promo-countdown { font-variant-numeric: tabular-nums; }
.promo-popup .promo-deal-note { grid-column: 1 / -1; }
.promo-popup .promo-deal-btn {
  grid-column: 2;
  grid-row: 1;
}
.promo-popup .is-unlimited .promo-deal-btn { grid-column: 1 / -1; }
.promo-popup .promo-deal-btn::part(label) { padding-inline: 14px; }
.promo-popup .promo-deal-btn::part(base) {
  min-height: 44px;
  border: 1px solid var(--Purple);
  background: transparent;
  color: var(--textMain);
  font-family: var(--font);
  font-size: 14px;
  font-weight: var(--fontweight_heavy);
  transition: background .2s ease, border-color .2s ease;
}
.promo-popup .promo-deal-btn:not([disabled]):hover::part(base),
.promo-popup .is-held .promo-deal-btn::part(base) {
  background: var(--btnBackground);
}
.promo-popup .promo-deal-btn[disabled]::part(base) {
  border-color: var(--menu);
  background: var(--menu);
  color: var(--textSecondary);
  opacity: 1;
}
@media (max-width: 480px) {
  .promo-popup::part(body) { padding: 14px 12px !important; }
  .promo-popup::part(title) { font-size: 21px; }
  .promo-popup .promo-deal {
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-areas: "photo info" "footer footer";
    gap: 14px 12px;
    padding: 12px;
  }
  .promo-popup .promo-deal-off { font-size: 18px; }
  .promo-popup .promo-deal-line { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .promo-popup .promo-deal,
  .promo-popup .promo-deal-img img,
  .promo-popup .promo-deal-btn::part(base) { transition: none; }
  .promo-popup .promo-deal-img:hover img { transform: none; }
}
.promo-popup .promo-deal-plus {
  display: inline-block;
  margin: 0 0 6px;
}
.promo-popup .promo-deal-plus::part(base) {
  background: var(--Purple);
  font-family: var(--fontInter);
  font-size: 11px;
  font-weight: var(--fontweight_heavy);
}