/* === NEW CATALOG CARDS === */
.blogcard-v2 {
  cursor: pointer;
  background: rgba(18, 20, 26, 0.92);
  border: 1px solid rgba(122, 220, 232, 0.12);
  border-radius: 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  pointer-events: auto !important;
  touch-action: manipulation;
}
.blogcard-v2 * {
  pointer-events: auto;
}
.blogcard-v2::before,
.blogcard-v2::after,
.blogcard-v2 .blogger-video::before,
.blogcard-v2 .blogger-video::after {
  pointer-events: none !important;
}
.blogcard-v2:hover {
  border-color: rgba(122, 220, 232, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.blogcard-v2 .blogger-video.blogcard-media {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 238px !important;
  background: rgba(10, 12, 16, 0.5) !important;
  padding: 14px 0 10px !important;
  gap: 6px;
  overflow: hidden;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.blogcard-v2 .blogcard-avatar {
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 3px solid rgba(122, 220, 232, 0.25) !important;
  box-shadow: 0 0 28px rgba(122, 220, 232, 0.14) !important;
  flex-shrink: 0 !important;
}
.blogcard-v2 .blogcard-avatar.avatar-placeholder {
  width: 96px !important;
  height: 96px !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  background: linear-gradient(135deg, rgba(122, 220, 232, 0.12), rgba(34, 244, 255, 0.06)) !important;
  border: 3px solid rgba(122, 220, 232, 0.25) !important;
  font-size: 32px !important;
  font-weight: 700 !important;
  color: rgba(122, 220, 232, 0.8) !important;
}
.blogcard-overlay-metrics {
  display: flex;
  gap: 12px;
  font-size: 13px;
  color: rgba(232, 238, 242, 0.78);
  margin-top: 2px;
}
.blogcard-metric {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: rgba(232, 238, 242, 0.78);
  white-space: nowrap;
}
.blogcard-metric svg {
  opacity: 0.7;
  flex-shrink: 0;
  width: 15px;
  height: 15px;
}
.blogcard-metric strong {
  color: rgba(232, 238, 242, 0.95);
}
.blogcard-topic {
  display: inline-block;
  font-size: 12px;
  padding: 3px 12px;
  border-radius: 14px;
  background: rgba(122, 220, 232, 0.08);
  border: 1px solid rgba(122, 220, 232, 0.18);
  color: rgba(122, 220, 232, 0.8);
}
.blogcard-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: rgba(122, 220, 232, 0.7);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blogcard-link:hover {
  color: rgba(122, 220, 232, 0.95);
}
.blogcard-v2 .platform-pill {
  display: none !important;
}
.blogcard-v2 .catalog-card-code {
  position: relative;
  align-self: flex-end;
  bottom: auto;
  right: auto;
  margin: 0 10px 0 0;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 8px;
  background: rgba(122, 220, 232, 0.12);
  border: 1px solid rgba(122, 220, 232, 0.22);
  color: rgba(122, 220, 232, 0.85);
  z-index: 2;
}
.blogcard-v2 .blogger-info {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 12px 16px 14px !important;
  display: block !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.blogcard-v2 .blogcard-info-block {
  background: rgba(26, 28, 33, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 10px 14px;
  margin-bottom: 6px;
  box-sizing: border-box;
  overflow: hidden;
}
.blogcard-v2 .blogcard-sub-block {
  background: rgba(26, 28, 33, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0;
  margin-bottom: 6px;
  box-sizing: border-box;
  overflow: hidden;
}
.blogcard-v2 .blogcard-title {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #e8eef2;
  margin: 0;
  line-height: 1.12;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.blogcard-v2 .metric-row {
  display: flex !important;
  align-items: center !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  font-size: 16px;
  color: rgba(232, 238, 242, 0.65);
  margin-bottom: 0;
  min-height: 52px;
}
.blogcard-v2 .metric-row span {
  min-height: auto !important;
  display: block !important;
  width: 100%;
  padding: 10px 14px !important;
  border: 0 !important;
  background: transparent !important;
}
.blogcard-v2 .metric-row strong {
  color: rgba(232, 238, 242, 0.9);
  font-size: 18px;
}
.blogcard-v2 .price-badges {
  font-size: 15px !important;
}
.blogcard-v2 .price-badges {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}
.blogcard-v2 .price-badges span,
.blogcard-v2 .price-row,
.blogcard-v2 .add-to-cart {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}
.blogcard-v2 .price-badges strong {
  font-size: 17px;
}
.blogcard-v2 .price-row {
  margin-top: 8px;
}


/* v255: desktop account detail modal shell */
.detail-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(3, 6, 10, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.detail-modal.open {
  display: flex !important;
}
.detail-modal-backdrop {
  position: absolute;
  inset: 0;
  cursor: pointer;
}
.detail-modal-dialog {
  position: relative;
  z-index: 1;
  width: min(1120px, calc(100vw - 40px));
  max-height: min(86vh, 900px);
  overflow: auto;
  border: 1px solid rgba(122, 220, 232, 0.22);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(18, 23, 30, 0.98), rgba(10, 12, 18, 0.98));
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.54), 0 0 34px rgba(34, 244, 255, 0.12);
}
.detail-modal-close {
  position: sticky;
  top: 12px;
  float: right;
  z-index: 5;
  width: 42px;
  height: 42px;
  margin: 12px 12px -54px 0;
  border: 1px solid rgba(122, 220, 232, 0.22);
  border-radius: 999px;
  background: rgba(8, 12, 18, 0.9);
  color: rgba(232, 238, 242, 0.92);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}
.detail-modal-content {
  clear: both;
}
.detail-modal-loading {
  min-height: 320px;
  display: grid;
  place-items: center;
}
@media (max-width: 768px) {
  .detail-modal {
    align-items: stretch;
    padding: 0;
  }
  .detail-modal-dialog {
    width: 100%;
    max-height: 100dvh;
    border-radius: 0;
  }
}

/* === DETAIL PAGE OVERRIDES (inline) === */
.detail-page,.detail-page-modal{max-width:1200px!important;margin:0 auto!important;padding:100px 2rem 80px!important;background:transparent!important;color:rgba(232,238,242,.85)!important}
.detail-back{display:inline-flex!important;align-items:center!important;gap:6px!important;font-size:14px!important;color:rgba(122,220,232,.7)!important;text-decoration:none!important;margin-bottom:24px!important;padding:8px 16px!important;border-radius:10px!important;border:1px solid rgba(122,220,232,.15)!important;background:rgba(18,20,26,.7)!important}
.detail-hero{display:grid!important;grid-template-columns:1fr 240px!important;gap:8px!important;align-items:start!important;margin-bottom:24px!important}
.detail-hero-left{display:flex!important;flex-direction:row!important;gap:18px!important;align-items:center!important}
.detail-avatar{width:90px!important;height:90px!important;border-radius:50%!important;object-fit:cover!important;border:3px solid rgba(122,220,232,.3)!important;box-shadow:0 0 30px rgba(122,220,232,.15)!important;flex-shrink:0!important}
.detail-avatar.avatar-placeholder{width:90px!important;height:90px!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:linear-gradient(135deg,rgba(122,220,232,.12),rgba(34,244,255,.06))!important;border:3px solid rgba(122,220,232,.3)!important;font-size:26px!important;font-weight:700!important;color:rgba(122,220,232,.8)!important;flex-shrink:0!important}
.detail-hero-info{text-align:left!important;min-width:0!important}
.detail-hero-info h1{font-size:20px!important;font-weight:700!important;color:#e8eef2!important;margin:0 0 2px!important;display:flex!important;align-items:center!important;gap:8px!important}
.detail-username{font-size:15px!important;color:rgba(122,220,232,.7)!important;display:block!important;margin-bottom:10px!important}
.detail-tags{display:flex!important;gap:8px!important;margin-bottom:12px!important}
.detail-tag{font-size:12px!important;padding:4px 14px!important;border-radius:20px!important;background:rgba(122,220,232,.08)!important;border:1px solid rgba(122,220,232,.2)!important;color:rgba(122,220,232,.85)!important}
.detail-metrics{font-size:13px!important;color:rgba(232,238,242,.6)!important;margin-bottom:14px!important}
.detail-metrics strong{color:rgba(232,238,242,.9)!important}
.detail-description{font-size:14px!important;color:#f7fafc!important;line-height:1.6!important;margin:0 0 8px!important;white-space:pre-line!important}
.detail-link{display:inline-block!important;font-size:14px!important;color:rgba(122,220,232,.85)!important;text-decoration:none!important;margin-top:4px!important;word-break:break-all!important}
.detail-hero-right{display:flex!important;flex-direction:column!important;gap:10px!important}
.detail-price-block{background:rgba(18,20,26,.92)!important;border:1px solid rgba(122,220,232,.12)!important;border-radius:12px!important;padding:14px 16px!important}
.detail-price-label-top{display:block!important;font-size:13px!important;color:rgba(232,238,242,.5)!important;margin-bottom:4px!important}
.detail-price-big{display:block!important;font-size:28px!important;font-weight:700!important;color:#e8eef2!important;margin-bottom:4px!important}
.detail-price-sub{display:block!important;font-size:12px!important;color:rgba(232,238,242,.4)!important}
.detail-cta-btn{width:100%!important;padding:12px 16px!important;border-radius:12px!important;border:none!important;font-size:15px!important;font-weight:700!important;cursor:pointer!important;background:linear-gradient(135deg,rgba(122,220,232,.25),rgba(34,244,255,.15))!important;border:1px solid rgba(122,220,232,.4)!important;color:#e8eef2!important;transition:all .2s ease!important}
.detail-cta-btn:hover{background:linear-gradient(135deg,rgba(122,220,232,.35),rgba(34,244,255,.22))!important;border-color:rgba(122,220,232,.6)!important;box-shadow:0 0 20px rgba(122,220,232,.15)!important}
.detail-actions-row{display:flex!important;gap:8px!important}
.detail-action-btn{flex:1!important;padding:8px 12px!important;border-radius:10px!important;border:1px solid rgba(255,255,255,.1)!important;background:rgba(18,20,26,.8)!important;color:rgba(232,238,242,.7)!important;font-size:12px!important;text-align:center!important;text-decoration:none!important;cursor:pointer!important;transition:all .2s!important}
.detail-action-btn:hover{border-color:rgba(122,220,232,.25)!important;color:rgba(232,238,242,.9)!important}
.detail-stats-section{margin-bottom:32px!important}
.detail-stats-section h2{font-size:18px!important;font-weight:700!important;color:#e8eef2!important;margin:0 0 12px!important}
.detail-stats-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:12px!important}
.detail-stat-card{background:rgba(18,20,26,.92)!important;border:1px solid rgba(122,220,232,.12)!important;border-radius:14px!important;padding:16px!important;position:relative!important;overflow:hidden!important}
.detail-stat-icon{color:rgba(122,220,232,.5)!important;margin-bottom:8px!important}
.detail-stat-card strong{display:block!important;font-size:22px!important;font-weight:700!important;color:#e8eef2!important}
.detail-stat-card span{display:block!important;font-size:12px!important;color:rgba(232,238,242,.45)!important;margin-top:2px!important}
.detail-stat-chart{position:absolute!important;bottom:0!important;right:0!important;width:55%!important;height:40px!important;opacity:.6!important}
.detail-stat-chart svg{width:100%!important;height:100%!important}
.detail-content-area{margin-top:8px!important}
.detail-tabs{display:flex!important;gap:0!important;border-bottom:1px solid rgba(255,255,255,.08)!important;margin-bottom:20px!important}
.detail-tab{flex:1!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;padding:12px 16px!important;border:none!important;background:transparent!important;color:rgba(232,238,242,.5)!important;font-size:13px!important;font-weight:600!important;cursor:pointer!important;border-bottom:2px solid transparent!important;transition:all .2s!important}
.detail-tab:hover{color:rgba(232,238,242,.8)!important}
.detail-tab.active{color:rgba(122,220,232,.95)!important;border-bottom-color:rgba(122,220,232,.6)!important}
.detail-tab svg{opacity:.6!important}
.detail-tab.active svg{opacity:1!important;color:rgba(122,220,232,.9)!important}
.detail-tab-panel{display:none!important}
.detail-tab-panel.active{display:block!important}
.detail-empty{text-align:center!important;padding:40px 20px!important;color:rgba(232,238,242,.4)!important;font-size:14px!important}
.detail-pub-grid{display:grid!important;grid-template-columns:repeat(4,1fr)!important;gap:10px!important}
.detail-pub-card{background:rgba(18,20,26,.92)!important;border:1px solid rgba(122,220,232,.1)!important;border-radius:12px!important;overflow:hidden!important}
.detail-pub-thumb{position:relative!important;aspect-ratio:9/16!important;overflow:hidden!important;background:rgba(10,12,16,.8)!important}
.detail-pub-thumb img,.detail-pub-thumb video{width:100%!important;height:100%!important;object-fit:cover!important}
.detail-pub-views{position:absolute!important;bottom:8px!important;left:8px!important;display:flex!important;align-items:center!important;gap:4px!important;font-size:11px!important;font-weight:600!important;color:#fff!important;background:rgba(0,0,0,.55)!important;padding:3px 8px!important;border-radius:6px!important}
.detail-pub-card strong{display:block!important;font-size:12px!important;color:rgba(232,238,242,.85)!important;padding:8px 10px 2px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.detail-pub-card span{display:block!important;font-size:11px!important;color:rgba(232,238,242,.4)!important;padding:0 10px 10px!important}
@media(max-width:768px){.detail-page{padding:90px 1rem 60px!important}.detail-avatar{width:80px!important;height:80px!important}.detail-avatar.avatar-placeholder{width:80px!important;height:80px!important;font-size:22px!important}.detail-hero-info h1{font-size:18px!important}.detail-stats-grid{grid-template-columns:1fr!important}.detail-pub-grid{grid-template-columns:repeat(3,1fr)!important;gap:8px!important}.detail-back{display:inline-flex!important}}


/* v252: keep account detail mobile stacked and card content clipped inside frame */
@media (max-width: 768px) {
  .detail-page,
  .detail-page-modal,
  .detail-modal-content .detail-page,
  .detail-modal-content .detail-page-modal {
    width: 100% !important;
    max-width: 100% !important;
    padding: 88px 1rem 60px !important;
    box-sizing: border-box !important;
  }

  .detail-hero,
  .detail-modal-content .detail-hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 20px !important;
    margin-bottom: 28px !important;
  }

  .detail-hero-left,
  .detail-modal-content .detail-hero-left {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 14px !important;
    text-align: center !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .detail-avatar,
  .detail-modal-content .detail-avatar {
    width: 112px !important;
    height: 112px !important;
  }

  .detail-avatar.avatar-placeholder,
  .detail-modal-content .detail-avatar.avatar-placeholder {
    width: 112px !important;
    height: 112px !important;
    font-size: 30px !important;
  }

  .detail-hero-info,
  .detail-modal-content .detail-hero-info {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    text-align: center !important;
  }

  .detail-hero-info h1,
  .detail-modal-content .detail-hero-info h1 {
    justify-content: center !important;
    font-size: clamp(2rem, 9vw, 3.1rem) !important;
    line-height: 0.95 !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 20px rgba(255, 85, 220, 0.45) !important;
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .detail-tags,
  .detail-modal-content .detail-tags,
  .detail-metrics,
  .detail-modal-content .detail-metrics {
    justify-content: center !important;
  }

  .detail-metrics,
  .detail-modal-content .detail-metrics {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.32rem !important;
    font-size: 0.92rem !important;
  }

  .detail-link,
  .detail-modal-content .detail-link {
    display: block !important;
    max-width: 100% !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .detail-description,
  .detail-modal-content .detail-description {
    max-width: 100% !important;
    text-align: center !important;
  }

  .detail-hero-right,
  .detail-modal-content .detail-hero-right {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .detail-price-block,
  .detail-modal-content .detail-price-block,
  .detail-cta-btn,
  .detail-modal-content .detail-cta-btn,
  .detail-actions-row,
  .detail-modal-content .detail-actions-row {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .detail-price-block,
  .detail-modal-content .detail-price-block {
    text-align: center !important;
    padding: 20px 18px !important;
    border-radius: 16px !important;
  }

  .detail-price-big,
  .detail-modal-content .detail-price-big {
    font-size: clamp(2.4rem, 11vw, 3.4rem) !important;
    line-height: 1 !important;
  }

  .detail-cta-btn,
  .detail-modal-content .detail-cta-btn {
    min-height: 58px !important;
    font-size: 1rem !important;
    margin-bottom: 0 !important;
  }

  .detail-actions-row,
  .detail-modal-content .detail-actions-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .detail-action-btn,
  .detail-modal-content .detail-action-btn {
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: normal !important;
  }
}


/* v256: centered account modal header and action layout */
.detail-hero.detail-hero-centered,
.detail-modal-content .detail-hero.detail-hero-centered {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  margin-bottom: 28px !important;
}
.detail-hero-centered .detail-hero-left,
.detail-modal-content .detail-hero-centered .detail-hero-left {
  width: min(760px, 100%) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 14px !important;
  text-align: center !important;
}
.detail-hero-centered .detail-avatar,
.detail-modal-content .detail-hero-centered .detail-avatar,
.detail-hero-centered .detail-avatar.avatar-placeholder,
.detail-modal-content .detail-hero-centered .detail-avatar.avatar-placeholder {
  width: 118px !important;
  height: 118px !important;
}
.detail-hero-centered .detail-hero-info,
.detail-modal-content .detail-hero-centered .detail-hero-info {
  width: 100% !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}
.detail-hero-centered .detail-hero-info h1,
.detail-modal-content .detail-hero-centered .detail-hero-info h1 {
  justify-content: center !important;
  font-size: clamp(28px, 4vw, 44px) !important;
  line-height: 1.05 !important;
  margin-bottom: 8px !important;
}
.detail-hero-centered .detail-tags,
.detail-modal-content .detail-hero-centered .detail-tags,
.detail-hero-centered .detail-metrics,
.detail-modal-content .detail-hero-centered .detail-metrics {
  justify-content: center !important;
}
.detail-hero-centered .detail-metrics,
.detail-modal-content .detail-hero-centered .detail-metrics {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  font-size: 16px !important;
}
.detail-hero-centered .detail-description,
.detail-modal-content .detail-hero-centered .detail-description {
  max-width: 680px !important;
  text-align: center !important;
  font-size: 15px !important;
}
.detail-hero-centered .detail-link,
.detail-modal-content .detail-hero-centered .detail-link {
  margin-top: 8px !important;
  max-width: 100% !important;
}
.detail-hero-centered .detail-actions-row,
.detail-modal-content .detail-hero-centered .detail-actions-row {
  width: min(680px, 100%) !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin-top: 18px !important;
}
.detail-hero-centered .detail-cta-btn,
.detail-modal-content .detail-hero-centered .detail-cta-btn,
.detail-hero-centered .detail-action-btn,
.detail-modal-content .detail-hero-centered .detail-action-btn {
  min-height: 56px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}
.detail-hero-centered .detail-manager-btn,
.detail-modal-content .detail-hero-centered .detail-manager-btn {
  border-color: rgba(122, 220, 232, 0.28) !important;
  background: rgba(18, 20, 26, 0.86) !important;
  color: rgba(232, 238, 242, 0.86) !important;
}
.detail-tab-panel .detail-stats-section {
  margin-bottom: 0 !important;
}
@media (max-width: 768px) {
  .detail-hero-centered .detail-actions-row,
  .detail-modal-content .detail-hero-centered .detail-actions-row {
    grid-template-columns: 1fr !important;
  }
  .detail-hero-centered .detail-hero-info h1,
  .detail-modal-content .detail-hero-centered .detail-hero-info h1 {
    font-size: clamp(25px, 8vw, 38px) !important;
  }
}


/* v258: fixed three account stat tiles */
.detail-stats-grid-fixed,
.detail-modal-content .detail-stats-grid-fixed {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
.detail-stat-card.is-empty,
.detail-modal-content .detail-stat-card.is-empty {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(18, 20, 26, 0.72) !important;
}
.detail-stat-card.is-empty strong,
.detail-modal-content .detail-stat-card.is-empty strong,
.detail-stat-card.is-empty .detail-stat-icon,
.detail-modal-content .detail-stat-card.is-empty .detail-stat-icon {
  color: rgba(232, 238, 242, 0.34) !important;
}
.detail-stat-card.is-empty .detail-stat-chart,
.detail-modal-content .detail-stat-card.is-empty .detail-stat-chart {
  opacity: 0.22 !important;
}


/* v259: calmer account modal title */
.detail-hero-centered .detail-hero-info h1,
.detail-modal-content .detail-hero-centered .detail-hero-info h1 {
  color: rgba(232, 238, 242, 0.96) !important;
  text-shadow: 0 0 18px rgba(122, 220, 232, 0.16) !important;
  letter-spacing: 0 !important;
}
.detail-hero-centered .detail-verified,
.detail-modal-content .detail-hero-centered .detail-verified {
  filter: none !important;
}


/* v294: catalog account growth history */
.detail-growth-section { margin-bottom: 8px !important; }
.detail-growth-section h2 { margin: 0 0 14px !important; color: #e8eef2 !important; font-size: 18px !important; }
.detail-growth-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
.detail-growth-card { padding: 16px !important; border: 1px solid rgba(122, 220, 232, 0.14) !important; border-radius: 14px !important; background: rgba(18, 20, 26, 0.92) !important; }
.detail-growth-card > div { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 8px !important; margin-bottom: 12px !important; }
.detail-growth-card > div strong { color: #e8eef2 !important; font-size: 15px !important; }
.detail-growth-card > div span { color: rgba(232, 238, 242, 0.42) !important; font-size: 11px !important; }
.detail-growth-card dl { display: grid !important; gap: 8px !important; margin: 0 !important; }
.detail-growth-card dl div { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; }
.detail-growth-card dt { color: rgba(232, 238, 242, 0.52) !important; font-size: 12px !important; }
.detail-growth-card dd { margin: 0 !important; color: #7adce8 !important; font-size: 14px !important; font-weight: 800 !important; }
.detail-sample-section { margin-top: 20px !important; }
.detail-sample-section h3 { margin: 0 0 10px !important; color: rgba(232, 238, 242, 0.78) !important; font-size: 14px !important; }
.detail-sample-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; }
.detail-sample-video { padding: 12px !important; border: 1px solid rgba(122, 220, 232, 0.1) !important; border-radius: 12px !important; background: rgba(18, 20, 26, 0.72) !important; }
.detail-sample-video strong, .detail-sample-video span, .detail-sample-video small { display: block !important; }
.detail-sample-video strong { margin-bottom: 6px !important; color: #7adce8 !important; }
.detail-sample-video span { color: rgba(232, 238, 242, 0.86) !important; font-size: 12px !important; }
.detail-sample-video small { margin-top: 2px !important; color: rgba(232, 238, 242, 0.42) !important; font-size: 11px !important; }
 (max-width: 768px) {
  .detail-growth-grid { grid-template-columns: 1fr !important; }
  .detail-sample-grid { grid-template-columns: 1fr !important; }
}


/* v306: account card profile-style media and price columns */
.blogcard-v2 .blogger-video.blogcard-media {
  justify-content: flex-start !important;
  padding: 14px 12px 12px !important;
  gap: 8px !important;
  min-height: 238px !important;
}

.blogcard-v2 .blogcard-image-info {
  position: relative !important;
  z-index: 4 !important;
  display: grid !important;
  justify-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.blogcard-v2 .blogcard-image-info .blogcard-title {
  display: block !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: #e8eef2 !important;
  font-size: 21px !important;
  font-weight: 850 !important;
  line-height: 1.02 !important;
  text-align: center !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-shadow: 0 1px 16px rgba(122, 220, 232, 0.16), 0 2px 12px rgba(0, 0, 0, 0.65) !important;
}

.blogcard-v2 .blogcard-image-info .blogcard-title::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 12px;
  margin-left: 7px;
  border-right: 2px solid #18baf2;
  border-bottom: 2px solid #18baf2;
  transform: rotate(45deg) translateY(-2px);
}

.blogcard-v2 .blogcard-image-info .blogcard-topic {
  position: static !important;
  z-index: 4 !important;
  max-width: min(100%, 190px) !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 11px !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  background: rgba(122, 220, 232, 0.08) !important;
  border: 1px solid rgba(122, 220, 232, 0.28) !important;
  color: rgba(122, 220, 232, 0.88) !important;
}

.blogcard-v2 .blogcard-image-info .blogcard-overlay-metrics {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 7px !important;
  margin: 0 !important;
  min-width: 0 !important;
  color: rgba(232, 238, 242, 0.78) !important;
}

.blogcard-v2 .blogcard-image-info .blogcard-metric {
  display: inline-flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 3px !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(232, 238, 242, 0.66) !important;
  font-size: 12px !important;
  line-height: 1.08 !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.62) !important;
}

.blogcard-v2 .blogcard-image-info .blogcard-metric:not(:first-child)::before {
  content: "•";
  margin-right: 2px;
  color: rgba(232, 238, 242, 0.48);
}

.blogcard-v2 .blogcard-image-info .blogcard-metric svg {
  display: inline-block !important;
  width: 12px !important;
  height: 12px !important;
  margin-right: 1px !important;
  color: rgba(232, 238, 242, 0.72) !important;
  opacity: 0.85 !important;
  transform: translateY(1px) !important;
}

.blogcard-v2 .blogcard-image-info .blogcard-metric strong {
  display: inline !important;
  color: #e8eef2 !important;
  font-size: 13px !important;
  font-weight: 820 !important;
  line-height: 1 !important;
}

.blogcard-v2 .blogcard-image-info .blogcard-metric small {
  display: inline !important;
  color: rgba(232, 238, 242, 0.62) !important;
  font-size: 11px !important;
  font-weight: 650 !important;
  line-height: 1 !important;
}

.blogcard-v2 .blogger-video.blogcard-media > .blogcard-overlay-metrics {
  display: none !important;
}

.blogcard-v2 .catalog-card-code.account-code {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  margin: 0 !important;
  z-index: 5 !important;
}

.blogcard-v2 .blogger-video.blogcard-media > .blogcard-topic {
  display: none !important;
}

.blogcard-v2 .blogcard-link {
  position: relative !important;
  z-index: 4 !important;
  max-width: 100% !important;
  margin-top: auto !important;
  color: rgba(122, 220, 232, 0.85) !important;
}

.blogcard-v2 .blogger-info {
  padding: 10px 14px 14px !important;
}

.blogcard-v2 .blogger-info .blogcard-info-block,
.blogcard-v2 .blogger-info .blogcard-sub-block {
  display: none !important;
}

.blogcard-v2 .price-badges.combined-prices {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
}

.blogcard-v2 .price-badges.single-condition {
  display: block !important;
}

.blogcard-v2 .price-badges.combined-prices span,
.blogcard-v2 .price-badges.single-condition span {
  min-height: 48px !important;
  padding: 9px 10px !important;
  text-align: center !important;
}

.blogcard-v2 .price-badges.combined-prices span {
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
  gap: 2px !important;
}

.blogcard-v2 .price-badges.single-condition span {
  display: grid !important;
  place-items: center !important;
}

.blogcard-v2 .price-badges.combined-prices strong,
.blogcard-v2 .price-badges.single-condition strong {
  display: block !important;
  font-size: 16px !important;
  line-height: 1.05 !important;
}

.blogcard-v2 .price-badges.combined-prices small {
  display: block !important;
  color: rgba(232, 238, 242, 0.64) !important;
  font-size: 11px !important;
  line-height: 1.05 !important;
}

.blogcard-v2 .price-badges.combined-prices em {
  display: block !important;
  font-style: normal !important;
  color: rgba(255, 255, 255, 0.48) !important;
  font-weight: 800 !important;
}

@media (max-width: 760px) {
  .blogcard-v2 .blogger-video.blogcard-media {
    height: 238px !important;
    padding: 14px 10px 12px !important;
    gap: 7px !important;
  }

  .blogcard-v2 .blogcard-image-info .blogcard-title {
    font-size: 20px !important;
  }

  .blogcard-v2 .blogcard-image-info .blogcard-overlay-metrics {
    gap: 6px !important;
  }

  .blogcard-v2 .blogcard-image-info .blogcard-metric strong {
    font-size: 12px !important;
  }

  .blogcard-v2 .blogcard-image-info .blogcard-metric,
  .blogcard-v2 .blogcard-image-info .blogcard-metric small {
    font-size: 10px !important;
  }

  .blogcard-v2 .price-badges.combined-prices {
    gap: 6px !important;
  }

  .blogcard-v2 .price-badges.combined-prices span,
  .blogcard-v2 .price-badges.single-condition span {
    padding: 8px 7px !important;
  }
}


/* v308: detail card background image and icon-only metrics */
.detail-modal-content .detail-page-modal,
.detail-page.detail-page-modal {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 26px !important;
  background:
    linear-gradient(180deg, rgba(10, 13, 17, 0.72), rgba(10, 13, 17, 0.92)),
    url("/assets/NEWZADNIFON.png") center / cover no-repeat !important;
}

.detail-modal-content .detail-page-modal::before,
.detail-page.detail-page-modal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 18%, rgba(122, 220, 232, 0.16), transparent 18rem),
    linear-gradient(180deg, rgba(10, 13, 17, 0.08), rgba(10, 13, 17, 0.52));
}

.detail-modal-content .detail-page-modal > *,
.detail-page.detail-page-modal > * {
  position: relative !important;
  z-index: 1 !important;
}

.detail-metrics .detail-metric,
.detail-modal-content .detail-metrics .detail-metric,
.blogcard-v2 .blogcard-image-info .blogcard-metric {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.detail-metrics .metric-icon,
.detail-modal-content .detail-metrics .metric-icon,
.blogcard-v2 .blogcard-image-info .metric-icon {
  display: inline-block !important;
  width: 13px !important;
  height: 13px !important;
  color: rgba(232, 238, 242, 0.72) !important;
  opacity: 0.9 !important;
  transform: translateY(1px) !important;
  flex: 0 0 auto !important;
}

.detail-metrics .detail-dot,
.detail-modal-content .detail-metrics .detail-dot {
  color: rgba(232, 238, 242, 0.48) !important;
}

.blogcard-v2 .blogcard-image-info .blogcard-metric small {
  display: none !important;
}

.blogcard-v2 .price-badges.combined-prices {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.blogcard-v2 .price-badges.combined-prices em {
  display: none !important;
}


/* v279: first account photo as a fully fitted detail backdrop */
.detail-hero.detail-hero-centered {
  position: relative !important;
  isolation: isolate !important;
  min-height: 430px !important;
  padding: 42px 28px !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  box-sizing: border-box !important;
  background: rgba(7, 11, 17, .78) !important;
}
.detail-cover-image {
  position: absolute !important;
  z-index: -2 !important;
  inset: 18px !important;
  width: calc(100% - 36px) !important;
  height: calc(100% - 36px) !important;
  object-fit: contain !important;
  object-position: center !important;
  opacity: .56 !important;
  filter: saturate(.9) brightness(.98) !important;
  pointer-events: none !important;
}
.detail-hero.detail-hero-centered::after {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(7,11,17,.18), rgba(7,11,17,.5)) !important;
  pointer-events: none !important;
}
.detail-hero-centered .detail-avatar,
.detail-modal-content .detail-hero-centered .detail-avatar,
.detail-hero-centered .detail-avatar.avatar-placeholder,
.detail-modal-content .detail-hero-centered .detail-avatar.avatar-placeholder {
  width: 96px !important;
  height: 96px !important;
}
@media (max-width: 768px) {
  .detail-hero.detail-hero-centered {
    min-height: 460px !important;
    padding: 30px 16px !important;
  }
  .detail-cover-image {
    inset: 12px !important;
    width: calc(100% - 24px) !important;
    height: calc(100% - 24px) !important;
    opacity: .5 !important;
  }
  .detail-hero-centered .detail-avatar,
  .detail-modal-content .detail-hero-centered .detail-avatar,
  .detail-hero-centered .detail-avatar.avatar-placeholder,
  .detail-modal-content .detail-hero-centered .detail-avatar.avatar-placeholder {
    width: 84px !important;
    height: 84px !important;
  }
}

/* v310: full-bleed shared background across the complete account detail card */
.detail-page,
.detail-page-modal,
.detail-modal-content .detail-page,
.detail-modal-content .detail-page-modal {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  border-radius: 18px !important;
  background: #070b11 !important;
}
.detail-page > .detail-cover-image,
.detail-page-modal > .detail-cover-image,
.detail-modal-content .detail-page > .detail-cover-image {
  position: absolute !important;
  z-index: -2 !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  opacity: .74 !important;
  filter: saturate(.95) brightness(.92) !important;
  pointer-events: none !important;
}
.detail-page::before,
.detail-page-modal::before,
.detail-modal-content .detail-page::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(5,9,14,.12) 0%, rgba(5,9,14,.28) 55%, rgba(5,9,14,.62) 100%) !important;
  pointer-events: none !important;
}
.detail-hero.detail-hero-centered,
.detail-modal-content .detail-hero.detail-hero-centered {
  position: relative !important;
  min-height: 390px !important;
  padding: 34px 28px !important;
  overflow: visible !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.detail-hero.detail-hero-centered::after {
  background: transparent !important;
}
@media (max-width: 768px) {
  .detail-page,
  .detail-page-modal,
  .detail-modal-content .detail-page,
  .detail-modal-content .detail-page-modal {
    border-radius: 0 !important;
  }
  .detail-page > .detail-cover-image,
  .detail-page-modal > .detail-cover-image,
  .detail-modal-content .detail-page > .detail-cover-image {
    object-position: center top !important;
    opacity: .68 !important;
  }
  .detail-hero.detail-hero-centered,
  .detail-modal-content .detail-hero.detail-hero-centered {
    min-height: 430px !important;
    padding: 26px 14px !important;
  }
}

/* v311: keep the full-bleed image above the card paint layer */
.detail-page > .detail-cover-image,
.detail-page-modal > .detail-cover-image,
.detail-modal-content .detail-page > .detail-cover-image {
  z-index: 0 !important;
}
.detail-page::before,
.detail-page-modal::before,
.detail-modal-content .detail-page::before {
  z-index: 1 !important;
}
.detail-page > *:not(.detail-cover-image),
.detail-page-modal > *:not(.detail-cover-image),
.detail-modal-content .detail-page > *:not(.detail-cover-image) {
  position: relative !important;
  z-index: 2 !important;
}

/* v312: preserve the 2172x724 artwork instead of zooming its dark center */
.detail-page > .detail-cover-image,
.detail-page-modal > .detail-cover-image,
.detail-modal-content .detail-page > .detail-cover-image {
  top: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  left: 0 !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2172 / 724 !important;
  object-fit: contain !important;
  object-position: center top !important;
  opacity: .9 !important;
  filter: saturate(1) brightness(1.05) !important;
}
.detail-page::before,
.detail-page-modal::before,
.detail-modal-content .detail-page::before {
  background: linear-gradient(180deg, rgba(5,9,14,.05) 0, rgba(5,9,14,.16) 32%, rgba(5,9,14,.62) 58%, rgba(5,9,14,.92) 100%) !important;
}
@media (max-width: 768px) {
  .detail-page > .detail-cover-image,
  .detail-page-modal > .detail-cover-image,
  .detail-modal-content .detail-page > .detail-cover-image {
    width: auto !important;
    max-width: none !important;
    height: 520px !important;
    aspect-ratio: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    object-fit: contain !important;
    opacity: .82 !important;
  }
}

/* v313: reference-like wide modal and artwork spanning the visible profile area */
.detail-modal-dialog {
  width: min(1600px, calc(100vw - 48px)) !important;
}
.detail-modal-content .detail-page.detail-page-modal {
  width: 100% !important;
  max-width: none !important;
}
.detail-page > .detail-cover-image,
.detail-page-modal > .detail-cover-image,
.detail-modal-content .detail-page > .detail-cover-image {
  width: 100% !important;
  height: min(780px, 82vh) !important;
  aspect-ratio: auto !important;
  object-fit: cover !important;
  object-position: center top !important;
}
@media (max-width: 768px) {
  .detail-modal-dialog { width: 100% !important; }
  .detail-page > .detail-cover-image,
  .detail-page-modal > .detail-cover-image,
  .detail-modal-content .detail-page > .detail-cover-image {
    left: 0 !important;
    width: 100% !important;
    height: 560px !important;
    transform: none !important;
    object-fit: cover !important;
  }
}

/* v314: responsive shared artwork for account cards and a quieter mobile detail */
.blogger-card.blogcard-v2 {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: #080c12 !important;
}

.blogger-card.blogcard-v2::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(180deg, rgba(5, 9, 14, .28) 0%, rgba(5, 9, 14, .52) 48%, rgba(5, 9, 14, .88) 100%),
    url("/assets/NEWZADNIFON.png") center / cover no-repeat !important;
  opacity: .58 !important;
  filter: saturate(.86) brightness(.78) !important;
  transition: opacity .3s ease, filter .3s ease, transform .45s ease !important;
}

.blogger-card.blogcard-v2 > * {
  position: relative !important;
  z-index: 1 !important;
}

.blogger-card.blogcard-v2 .blogger-info {
  background: linear-gradient(180deg, rgba(8, 12, 18, .52), rgba(8, 12, 18, .82)) !important;
  backdrop-filter: blur(2px) !important;
}

@media (hover: hover) and (pointer: fine) {
  .blogger-card.blogcard-v2:hover::after {
    opacity: .7 !important;
    filter: saturate(.96) brightness(.86) !important;
    transform: scale(1.025) !important;
  }
}

@media (max-width: 768px) {
  .detail-page > .detail-cover-image,
  .detail-page-modal > .detail-cover-image,
  .detail-modal-content .detail-page > .detail-cover-image {
    top: 0 !important;
    left: 50% !important;
    width: auto !important;
    min-width: 100% !important;
    max-width: none !important;
    height: clamp(430px, 68vh, 560px) !important;
    transform: translateX(-50%) !important;
    object-fit: cover !important;
    object-position: center top !important;
    opacity: .34 !important;
    filter: saturate(.78) brightness(.58) !important;
  }

  .detail-page::before,
  .detail-page-modal::before,
  .detail-modal-content .detail-page::before {
    background:
      linear-gradient(180deg, rgba(5, 9, 14, .5) 0%, rgba(5, 9, 14, .7) 38%, rgba(5, 9, 14, .94) 100%) !important;
  }

  .blogger-card.blogcard-v2::after {
    background-position: center top !important;
    background-size: auto 100% !important;
    opacity: .42 !important;
    filter: saturate(.72) brightness(.64) !important;
  }

  .blogger-card.blogcard-v2 .blogger-info {
    background: linear-gradient(180deg, rgba(8, 12, 18, .66), rgba(8, 12, 18, .9)) !important;
    backdrop-filter: blur(2.5px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .blogger-card.blogcard-v2::after {
    transition: none !important;
  }
}

/* v315: compact mobile account card metadata and detail ID badge */
.detail-account-code {
  display: none;
}

@media (max-width: 760px) {
  .blogcard-v2 .blogger-video.blogcard-media {
    height: 210px !important;
    min-height: 210px !important;
    padding: 12px 10px 10px !important;
    gap: 5px !important;
  }

  .blogcard-v2 .blogcard-avatar,
  .blogcard-v2 .blogcard-avatar.avatar-placeholder {
    width: 88px !important;
    height: 88px !important;
  }

  .blogcard-v2 .blogcard-image-info {
    position: static !important;
    gap: 5px !important;
  }

  .blogcard-v2 .catalog-card-code.account-code {
    display: none !important;
  }

  .blogcard-v2 .blogcard-image-info .blogcard-topic {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    max-width: calc(100% - 20px) !important;
    padding: 4px 9px !important;
    font-size: 10px !important;
    line-height: 1 !important;
  }

  .blogcard-v2 .blogcard-link {
    align-self: center !important;
    margin: 0 !important;
    min-height: 18px !important;
    font-size: 11px !important;
    line-height: 1.1 !important;
  }

  .detail-hero-centered .detail-avatar-wrap,
  .detail-modal-content .detail-hero-centered .detail-avatar-wrap {
    position: relative !important;
  }

  .detail-hero-centered .detail-account-code,
  .detail-modal-content .detail-hero-centered .detail-account-code {
    position: absolute !important;
    top: -7px !important;
    right: -48px !important;
    z-index: 4 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 25px !important;
    padding: 4px 9px !important;
    border: 1px solid rgba(122, 220, 232, .3) !important;
    border-radius: 999px !important;
    background: rgba(7, 11, 17, .76) !important;
    color: rgba(232, 238, 242, .88) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .24) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    backdrop-filter: blur(7px) !important;
  }
}

/* v316: desktop topic placement and tighter mobile pricing */
.blogcard-v2 .blogcard-image-info {
  position: static !important;
}

.blogcard-v2 .catalog-card-code.account-code {
  display: none !important;
}

.blogcard-v2 .blogcard-image-info .blogcard-topic {
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  max-width: calc(100% - 24px) !important;
  margin: 0 !important;
}

@media (max-width: 760px) {
  .blogcard-v2 .blogger-video.blogcard-media {
    height: 184px !important;
    min-height: 184px !important;
    padding-bottom: 4px !important;
  }

  .blogcard-v2 .blogger-info {
    padding-top: 2px !important;
  }

  .blogcard-v2 .price-badges.combined-prices strong,
  .blogcard-v2 .price-badges.single-condition strong,
  .blogcard-v2 .price-badges.public-condition strong {
    font-size: 13px !important;
    line-height: 1.08 !important;
    overflow-wrap: anywhere !important;
  }

  .blogcard-v2 .price-badges.combined-prices small,
  .blogcard-v2 .price-badges.single-condition small {
    font-size: 10px !important;
  }
}

/* v317: readable title-to-metrics rhythm on every viewport */
.blogcard-v2 .blogcard-image-info {
  row-gap: 12px !important;
}

@media (max-width: 760px) {
  .blogcard-v2 .blogger-video.blogcard-media {
    height: 190px !important;
    min-height: 190px !important;
  }

  .blogcard-v2 .blogcard-image-info {
    row-gap: 11px !important;
  }
}


/* v318: mobile TikTok placement, compact package reveal and modal artwork */
@media (max-width: 760px) {
  .blogcard-v2 .blogger-video.blogcard-media { position: relative !important; }
  .blogcard-v2 .blogcard-link { position: absolute !important; right: 10px !important; bottom: 5px !important; z-index: 4 !important; margin: 0 !important; padding: 3px 7px !important; min-height: 20px !important; font-size: 10px !important; line-height: 1 !important; }
  .package-pagination:has(.package-list-toggle) { display: flex !important; justify-content: center !important; margin-top: .8rem !important; }
  .package-list-toggle { width: auto !important; min-width: 148px !important; min-height: 42px !important; padding: .55rem 1rem !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: .55rem !important; border: 1px solid rgba(122,220,232,.3) !important; border-radius: 999px !important; background: rgba(10,16,22,.78) !important; color: #f7fbfc !important; box-shadow: 0 8px 24px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.08) !important; font-size: 12px !important; font-weight: 800 !important; }
  .package-list-toggle-arrow { display: inline-block !important; font-size: 20px !important; line-height: .7 !important; transform: translateY(-2px) !important; transition: transform .2s ease !important; }
  .package-list-toggle.is-expanded .package-list-toggle-arrow { transform: translateY(2px) rotate(180deg) !important; }
  .detail-modal-content .detail-page.detail-page-modal { position: relative !important; isolation: isolate !important; background: #070b10 !important; }
  .detail-modal-content .detail-page.detail-page-modal > .detail-cover-image { position: absolute !important; inset: 0 auto auto 50% !important; width: 100% !important; min-width: 100% !important; height: min(620px, 78vh) !important; transform: translateX(-50%) !important; object-fit: cover !important; object-position: 50% 18% !important; opacity: .46 !important; filter: saturate(.82) brightness(.62) contrast(1.04) !important; }
  .detail-modal-content .detail-page.detail-page-modal::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 1 !important; pointer-events: none !important; background: linear-gradient(180deg, rgba(5,9,14,.34) 0%, rgba(5,9,14,.6) 38%, #070b10 72%) !important; }
  .detail-modal-content .detail-page.detail-page-modal > *:not(.detail-cover-image) { position: relative !important; z-index: 2 !important; }
}


/* v319: centered TikTok, larger fixed-card avatars, reliable mobile detail artwork */
.blogcard-v2 .blogcard-avatar,
.blogcard-v2 .blogcard-avatar.avatar-placeholder {
  width: 126px !important;
  height: 126px !important;
}
@media (max-width: 760px) {
  .blogcard-v2 .blogcard-avatar,
  .blogcard-v2 .blogcard-avatar.avatar-placeholder {
    width: 102px !important;
    height: 102px !important;
  }

  .blogcard-v2 .blogcard-link {
    left: 50% !important;
    right: auto !important;
    bottom: 5px !important;
    transform: translateX(-50%) !important;
  }

  .detail-modal-content .detail-page.detail-page-modal {
    background:
      linear-gradient(180deg, rgba(5,9,14,.22) 0%, rgba(5,9,14,.55) 42%, #070b10 78%),
      url("/assets/NEWZADNIFON.png") center top / auto min(620px, 78vh) no-repeat,
      #070b10 !important;
  }

  .detail-modal-content .detail-page.detail-page-modal > .detail-cover-image {
    display: none !important;
  }

  .detail-modal-content .detail-page.detail-page-modal::before {
    display: none !important;
    content: none !important;
  }
}


/* v320: fit the 3:1 detail panorama to narrow mobile dialogs */
@media (max-width: 760px) {
  .detail-modal-content .detail-page.detail-page-modal {
    background-image:
      linear-gradient(180deg, rgba(5,9,14,.08) 0, rgba(5,9,14,.28) 150px, rgba(7,11,16,.92) 330px),
      url("/assets/NEWZADNIFON.png") !important;
    background-size: 100% 360px, min(620px, 162vw) auto !important;
    background-position: center top, center top !important;
    background-repeat: no-repeat !important;
    background-color: #070b10 !important;
  }
}


/* v322: real mobile artwork layer and viewport-relative desktop detail dialog */
@media (min-width: 769px) {
  .detail-modal .detail-modal-dialog {
    width: min(1600px, 66.6667vw) !important;
    max-width: 66.6667vw !important;
    max-height: 84vh !important;
  }
}

@media (max-width: 760px) {
  .detail-modal-content .detail-page.detail-page-modal {
    background: #070b10 !important;
  }

  .detail-modal-content .detail-page.detail-page-modal > .detail-cover-image {
    display: block !important;
    position: absolute !important;
    z-index: 0 !important;
    top: 0 !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 135% !important;
    min-width: 135% !important;
    max-width: none !important;
    height: auto !important;
    aspect-ratio: 2172 / 724 !important;
    transform: translateX(-50%) !important;
    object-fit: contain !important;
    object-position: center top !important;
    opacity: .92 !important;
    filter: saturate(1) brightness(.92) contrast(1.04) !important;
    pointer-events: none !important;
  }

  .detail-modal-content .detail-page.detail-page-modal::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(5,9,14,.06) 0, rgba(5,9,14,.18) 120px, rgba(7,11,16,.72) 245px, #070b10 390px) !important;
  }

  .detail-modal-content .detail-page.detail-page-modal > *:not(.detail-cover-image) {
    position: relative !important;
    z-index: 2 !important;
  }
}


/* v323: visible artwork on both standalone and modal mobile account details */
@media (max-width: 760px) {
  .detail-page,
  .detail-page.detail-page-modal,
  .detail-modal-content .detail-page.detail-page-modal {
    position: relative !important;
    isolation: isolate !important;
    background: #070b10 !important;
  }

  .detail-page > .detail-cover-image,
  .detail-page.detail-page-modal > .detail-cover-image,
  .detail-modal-content .detail-page.detail-page-modal > .detail-cover-image {
    display: block !important;
    position: absolute !important;
    z-index: 0 !important;
    inset: 0 auto auto 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 620px !important;
    aspect-ratio: auto !important;
    transform: none !important;
    object-fit: fill !important;
    object-position: center top !important;
    opacity: .94 !important;
    filter: saturate(1.15) brightness(1.2) contrast(1.06) !important;
    pointer-events: none !important;
  }

  .detail-page::before,
  .detail-page.detail-page-modal::before,
  .detail-modal-content .detail-page.detail-page-modal::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    inset: 0 !important;
    pointer-events: none !important;
    background: linear-gradient(180deg, rgba(5,9,14,.02) 0, rgba(5,9,14,.1) 260px, rgba(7,11,16,.5) 470px, #070b10 650px) !important;
  }

  .detail-page > *:not(.detail-cover-image),
  .detail-page.detail-page-modal > *:not(.detail-cover-image),
  .detail-modal-content .detail-page.detail-page-modal > *:not(.detail-cover-image) {
    position: relative !important;
    z-index: 2 !important;
  }
}