.promo-popup-dialog {
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 20px 14px 32px;
  border: 0;
  outline: 0;
  box-shadow: none;
  background: transparent;
  max-width: min(410px, 94vw);
  width: 100%;
  overflow: visible;
  z-index: 95;
  animation: promoPopIn 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.promo-popup-dialog::backdrop {
  background: rgba(8, 22, 48, 0.48);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  animation: promoFadeIn 220ms ease-out;
}
@keyframes promoPopIn {
  from { opacity: 0; transform: scale(0.92) translateY(14px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes promoFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@property --glass-rim-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
@keyframes glassRimOrbit {
  0% { --glass-rim-angle: 0deg; }
  100% { --glass-rim-angle: 360deg; }
}
.promo-popup-dialog:not([open]),
.promo-popup-dialog:not([open]) *,
.promo-popup-dialog:not([open]) *::before,
.promo-popup-dialog:not([open]) *::after {
  display: none !important;
  animation: none !important;
}
.promo-popup-card {
  position: relative;
  border-radius: 30px;
  padding: 3px;
  color: #fff;
  border: 0;
  box-shadow: 0 30px 68px -12px rgba(6, 24, 58, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  overflow: visible;
  backdrop-filter: blur(32px) saturate(210%);
  -webkit-backdrop-filter: blur(32px) saturate(210%);
  background: linear-gradient(155deg, rgba(244, 63, 94, 0.9) 0%, rgba(251, 113, 133, 0.86) 48%, rgba(251, 146, 60, 0.9) 100%);
}
.promo-popup-dialog[open] .promo-popup-card:not([hidden])::before,
.promo-popup-dialog[open] .promo-popup-card:not([hidden])::after,
.admin-popup-preview-card::before,
.admin-popup-preview-card::after {
  content: "";
  position: absolute;
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: glassRimOrbit 6s linear infinite;
}
.promo-popup-dialog[open] .promo-popup-card:not([hidden])::before,
.admin-popup-preview-card::before {
  inset: 0;
  border-radius: 30px;
  padding: 3.5px;
  background: conic-gradient(
    from var(--glass-rim-angle),
    rgba(255, 255, 255, 0.08) 0deg,
    rgba(255, 255, 255, 0.18) 28deg,
    rgba(125, 211, 252, 0.92) 52deg,
    #ffffff 70deg,
    rgba(254, 240, 138, 0.92) 88deg,
    rgba(255, 255, 255, 0.18) 112deg,
    rgba(255, 255, 255, 0.06) 180deg,
    rgba(255, 255, 255, 0.18) 208deg,
    rgba(186, 230, 253, 0.9) 232deg,
    #ffffff 250deg,
    rgba(253, 186, 116, 0.9) 268deg,
    rgba(255, 255, 255, 0.16) 292deg,
    rgba(255, 255, 255, 0.08) 360deg
  );
  z-index: 3;
}
.promo-popup-dialog[open] .promo-popup-card:not([hidden])::after,
.admin-popup-preview-card::after {
  inset: -4px;
  border-radius: 34px;
  padding: 7px;
  background: conic-gradient(
    from var(--glass-rim-angle),
    transparent 0deg,
    transparent 35deg,
    rgba(125, 211, 252, 0.65) 56deg,
    rgba(255, 255, 255, 0.95) 70deg,
    rgba(254, 240, 138, 0.65) 84deg,
    transparent 105deg,
    transparent 215deg,
    rgba(186, 230, 253, 0.6) 236deg,
    rgba(255, 255, 255, 0.9) 250deg,
    rgba(253, 186, 116, 0.6) 264deg,
    transparent 285deg,
    transparent 360deg
  );
  filter: blur(5px);
  z-index: 2;
}
.promo-popup-card[data-theme="cobalt"] {
  background: linear-gradient(155deg, rgba(11, 56, 128, 0.86) 0%, rgba(2, 132, 199, 0.82) 52%, rgba(56, 189, 248, 0.86) 100%);
}
.promo-popup-card[data-theme="emerald"] {
  background: linear-gradient(155deg, rgba(6, 78, 59, 0.86) 0%, rgba(5, 150, 105, 0.82) 52%, rgba(52, 211, 153, 0.86) 100%);
}
.promo-popup-card[data-theme="gold"] {
  background: linear-gradient(155deg, rgba(30, 27, 75, 0.86) 0%, rgba(67, 56, 202, 0.82) 48%, rgba(245, 158, 11, 0.88) 100%);
}
.promo-popup-close {
  position: absolute;
  top: -12px;
  right: -8px;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 2px solid rgba(15, 23, 42, 0.12);
  background: #ffffff;
  color: #0f172a;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(8, 20, 38, 0.28);
  z-index: 4;
  transition: transform 150ms ease;
}
.promo-popup-close:hover {
  transform: scale(1.07);
}
.promo-popup-close:focus {
  outline: none;
}
.promo-popup-body {
  padding: 28px 20px 38px;
  text-align: center;
  position: relative;
  overflow: hidden;
  border-radius: 28px;
}
.promo-popup-body::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.28), transparent 65%);
  pointer-events: none;
}
.promo-popup-eyebrow {
  position: relative;
  margin: 0 0 6px;
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}
.promo-popup-card .promo-popup-title {
  position: relative;
  margin: 0;
  font-size: clamp(1.45rem, 5.5vw, 1.9rem);
  line-height: 1.08;
  font-weight: 900;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
}
.promo-popup-subtitle {
  position: relative;
  margin: 8px auto 0;
  max-width: 32ch;
  font-size: 0.88rem;
  line-height: 1.35;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.94);
}
.promo-popup-grid {
  position: relative;
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: stretch;
}
.promo-popup-grid[data-cols="1"] { grid-template-columns: minmax(0, 220px); justify-content: center; }
.promo-popup-grid[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.promo-popup-box {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.92), rgba(240, 248, 255, 0.78));
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  color: #0f172a;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 24px -8px rgba(8, 20, 38, 0.28), inset 0 1.5px 1px #fff;
  border: 1px solid rgba(255, 255, 255, 0.92);
}
.promo-popup-box-head {
  background: #0f172a;
  color: #ffffff;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 6px;
  line-height: 1.15;
  min-height: 28px;
  display: grid;
  place-items: center;
}
.promo-popup-box-val {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px 6px;
  gap: 2px;
}
.promo-popup-box-val s {
  font-size: 0.68rem;
  color: #ef4444;
  font-weight: 700;
  text-decoration-thickness: 1.5px;
}
.promo-popup-box-val strong {
  font-size: clamp(0.98rem, 3.8vw, 1.25rem);
  font-weight: 900;
  line-height: 1.1;
  color: #0f172a;
  letter-spacing: -0.02em;
}
.promo-popup-visual {
  position: relative;
  margin: 16px auto 0;
  border-radius: 16px;
  overflow: hidden;
  max-height: 190px;
  background: rgba(255, 255, 255, 0.16);
  padding: 6px;
}
.promo-popup-visual img {
  width: 100%;
  max-height: 178px;
  object-fit: contain;
  border-radius: 12px;
  display: block;
  margin: 0 auto;
}
.promo-popup-poster-wrap {
  border-radius: 28px;
  overflow: hidden;
}
.promo-popup-poster {
  width: 100%;
  max-height: 74vh;
  object-fit: cover;
  display: block;
}
.promo-popup-footnote {
  position: relative;
  margin: 14px 0 0;
  font-size: 0.74rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.92);
}
.promo-popup-cta {
  position: absolute;
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
  background: #ffffff;
  color: #0f172a;
  border: 2px solid rgba(15, 23, 42, 0.08);
  border-radius: 999px;
  padding: 12px 28px;
  font-size: 0.92rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  box-shadow: 0 14px 30px -6px rgba(8, 20, 38, 0.38);
  z-index: 4;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.promo-popup-cta:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 18px 34px -6px rgba(8, 20, 38, 0.45);
}
.promo-popup-cta span {
  font-size: 1.2rem;
  line-height: 1;
}
.admin-popup-preview-stage {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  padding: 26px 16px 38px;
  background: rgba(15, 23, 42, 0.78);
  border-radius: 18px;
}
.admin-popup-preview-card {
  width: min(370px, 100%);
}
.admin-popup-badge {
  position: absolute;
  top: 12px;
  left: 14px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 999px;
  z-index: 3;
  background: rgba(15, 23, 42, 0.78);
}
.admin-popup-badge.is-active {
  background: rgba(16, 185, 129, 0.94);
}
.promo-popup-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.promo-popup-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
}
.promo-popup-dot.is-active {
  width: 18px;
  background: #ffffff;
}

/* Brand & phone logo badge layered on top of model thumbnail (top-left, diagonal to +1 unit at bottom-right) */
.catalog-body .product-image .card-brand {
  position: absolute;
  top: 7px;
  left: 7px;
  right: auto;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px 3px 6px;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(224, 242, 254, 0.52));
  backdrop-filter: blur(14px) saturate(190%);
  -webkit-backdrop-filter: blur(14px) saturate(190%);
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 12px rgba(0, 52, 138, 0.14), inset 0 1px 0 #ffffff;
  color: #0b192c;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: -0.01em;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
}
.catalog-body .product-image .image-tag {
  top: auto;
  bottom: 6px;
  left: 6px;
}
.catalog-body .card-brand::before {
  content: "";
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='3'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='2' width='14' height='20' rx='3'/%3E%3Cpath d='M12 18h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.catalog-body .card-brand[data-brand="Apple" i]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M15.96 6.33c.67-.81 1.12-1.94 1-3.08-.96.04-2.13.64-2.82 1.45-.61.7-.15 1.85-1.02 2.97 1.08.08 2.17-.53 2.84-1.34Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M15.96 6.33c.67-.81 1.12-1.94 1-3.08-.96.04-2.13.64-2.82 1.45-.61.7-.15 1.85-1.02 2.97 1.08.08 2.17-.53 2.84-1.34Z'/%3E%3C/svg%3E");
}
@media (max-width: 359px) {
  .catalog-body .product-image .card-brand {
    top: 5px;
    left: 5px;
    padding: 2px 6px 2px 5px;
    font-size: 8px;
  }
}
.unit-video, .viewer-video {
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.unit-video::-webkit-media-controls,
.viewer-video::-webkit-media-controls,
.unit-video::-webkit-media-controls-enclosure,
.viewer-video::-webkit-media-controls-enclosure {
  display: none !important;
}
.gallery-stage-wrap {
  position: relative;
}
.viewer-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #0b192c;
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0, 40, 110, 0.16);
  transition: transform 150ms ease, opacity 150ms ease;
}
.viewer-arrow.is-prev { left: 10px; }
.viewer-arrow.is-next { right: 10px; }
.viewer-arrow:hover:not(:disabled) {
  transform: translateY(-50%) scale(1.06);
  background: #ffffff;
}
.viewer-arrow:disabled {
  opacity: 0;
  pointer-events: none;
}
.photo-viewer .viewer-arrow {
  width: 44px;
  height: 44px;
  font-size: 28px;
}
.viewer-video-box {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: inherit;
}
.viewer-video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.catalog-body .condition-thumbnails .is-video-thumb > span { background: #0052d4; }
.gallery-caption, .viewer-caption {
  text-align: center;
  align-items: center;
  justify-content: center;
}