/* Live-site polish: kill neon grid, mute extra-blue titles, app chrome, overflow, type. */

/* ---- existing live-chat / search / cart / preview ---- */
body.mode-mobile .live-chat__launcher { display: none !important; }
@media (max-width: 759px) {
  body[data-style] .live-chat__launcher,
  body.has-app-tabbar .live-chat__launcher { display: none !important; }
}

body[data-style] .site-search__dropdown,
body.has-app-tabbar .site-search__dropdown {
  position: absolute;
  inset-inline: 0;
  top: calc(100% + 8px);
  z-index: 80;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  max-height: min(70vh, 480px);
  overflow: auto;
}
body[data-style] .search,
body[data-style] .m-search,
body.has-app-tabbar .search,
body.has-app-tabbar .m-search { position: relative; }

body[data-style] .cart-badge[data-cart-count]:not([hidden]),
body[data-style] .m-badge[data-cart-count]:not([hidden]),
body.has-app-tabbar .cart-badge[data-cart-count]:not([hidden]),
body.has-app-tabbar .m-badge[data-cart-count]:not([hidden]) {
  display: grid;
}

body[data-style] .theme-preview-bar {
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 40px;
  padding: 8px 16px;
  background: #101828;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
body[data-style] .theme-preview-bar a { color: #64d2ff; }

@media (prefers-reduced-motion: reduce) {
  body[data-style] *,
  body[data-style] *::before,
  body[data-style] *::after,
  body.has-app-tabbar *,
  body.has-app-tabbar *::before,
  body.has-app-tabbar *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ---- remove the semi-invisible Tron / mesh grid (neon.css ::before) ---- */
body[data-style]::before,
body.has-app-tabbar::before {
  display: none !important;
  content: none !important;
  background: none !important;
}
body[data-style] .m-spot-mesh,
body[data-style] .spot-mesh {
  display: none !important;
}

/* ---- titles inherit ink unless a tile sets its own color (zero-spec so .t-chat etc. keep #fff) ---- */
:where(body[data-style] a),
:where(body[data-style] a:hover) {
  color: inherit;
}
body[data-style] h1,
body[data-style] h2,
body[data-style] h3,
body[data-style] .post h3,
body[data-style] .prod h3,
body[data-style] .m-pc h3,
body[data-style] .m-rtx h3,
body[data-style] .m-lead h2,
body[data-style] .a-today h2,
body[data-style] .a-story h2,
body[data-style] .sa-ftx h2,
body[data-style] .sa-rtx h3,
body[data-style] .spot h2,
body[data-style] .m-spot h2 {
  color: var(--text);
  background: none;
  -webkit-text-fill-color: currentColor;
  -webkit-background-clip: unset;
  background-clip: unset;
}
body[data-style] .t-chat,
body[data-style] .t-chat h3,
body[data-style] .sb-chat,
body[data-style] .sb-chat h3,
body[data-style] .m-chat,
body[data-style] .sa-chat,
body[data-style] .sb-promo,
body[data-style] .sb-promo h3,
body[data-style] .t-lead,
body[data-style] .t-lead .cap h2,
body[data-style] .mb-chat,
body[data-style] .mb-chat h3,
body[data-style] .mb-lead,
body[data-style] .mb-lead h2,
body[data-style] .story,
body[data-style] .story h2,
body[data-style] .story.lead h2 {
  color: #fff;
  -webkit-text-fill-color: #fff;
  background-clip: unset;
}
body[data-style] .pill:not(.teal):not(.purple):not(.orange):not(.glass) {
  background: var(--surface-2);
  color: var(--text-2);
}
body[data-style] .a-kicker,
body[data-style] .sa-kicker {
  color: var(--text-3);
}
body[data-style] .sec-title::before,
body[data-style] .m-stitle::before,
body[data-style] .sa-shelf .m-stitle::before {
  background: var(--bar, var(--text));
}

/* eNamad: official img[code] stays in the DOM; local badge shows if logo.aspx fails */
body[data-style] .sf-footer__enamad,
body.has-app-tabbar .sf-footer__enamad {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  width: 125px;
  height: 136px;
  min-width: 125px;
  min-height: 136px;
  flex-shrink: 0;
  overflow: visible;
}
body[data-style] .sf-footer__enamad a,
body.has-app-tabbar .sf-footer__enamad a,
body[data-style] a:has(> img[code]),
body.has-app-tabbar a:has(> img[code]) {
  display: block;
  width: 125px;
  height: 136px;
  line-height: 0;
  color: inherit;
  flex-shrink: 0;
  background: url('../img/enamad.png') center / 125px 136px no-repeat;
}
body[data-style] .sf-footer__enamad img,
body.has-app-tabbar .sf-footer__enamad img,
body[data-style] img[code],
body.has-app-tabbar img[code] {
  display: block;
  width: 125px !important;
  height: 136px !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 125px !important;
  min-height: 136px !important;
  object-fit: contain;
  filter: none;
  visibility: visible !important;
  opacity: 0;
}
body[data-style] img[code].is-loaded,
body.has-app-tabbar img[code].is-loaded {
  opacity: 1;
}

/* keep real CTAs blue; restore chrome that should not inherit body ink */
body[data-style] .btn-primary,
body[data-style] .m-btn-primary,
body[data-style] .chat-fab,
body.has-app-tabbar .btn-primary {
  color: #fff;
}
body[data-style] .hdr-nav a { color: var(--text-2); }
body[data-style] .m-tabbar a { color: var(--text-3); }
body[data-style] .m-flinks a { color: var(--text-2); }
body[data-style] .more,
body[data-style] .m-more,
body[data-style] .m-readmore,
body[data-style] .m-cancel {
  color: var(--primary);
}
body[data-style] .m-get,
body[data-style] .hdr-nav a.is-active,
body[data-style] .m-tabbar a.on {
  color: var(--primary-ink);
}

/* ---- app chrome: contain width on classic pages (blog, tutorials, apps, …) ---- */
body.has-app-tabbar .page-shell {
  overflow-x: clip;
  max-width: 100%;
}
body.has-app-tabbar main.wrap {
  overflow-x: clip;
  min-width: 0;
  max-width: 100%;
}
body.has-app-tabbar main img,
body.has-app-tabbar main table,
body.has-app-tabbar main pre,
body.has-app-tabbar main iframe,
body.has-app-tabbar main video {
  max-width: 100%;
}
body.has-app-tabbar .blog-page,
body.has-app-tabbar .article-page,
body.has-app-tabbar .tut-page,
body.has-app-tabbar .play-page {
  max-width: 100%;
  min-width: 0;
}
body.has-app-tabbar .blog-page .filter-bar,
body.has-app-tabbar .content-filters__bar {
  margin-inline: 0;
  max-width: 100%;
}
body.has-app-tabbar .m-footer {
  padding-bottom: 8px;
}

/* ---- smaller titles + product names on phones (and the 480px app shell) ---- */
body.mode-mobile .a-today h2 { font-size: 24px; }
body.mode-mobile .a-story h2,
body.mode-mobile .m-lead h2 { font-size: 17px; line-height: 1.55; }
body.mode-mobile .m-stitle,
body.mode-mobile .sa-shelf .m-stitle { font-size: 17px; }
body.mode-mobile .m-stitle::before,
body.mode-mobile .sa-shelf .m-stitle::before { height: 16px; }
body.mode-mobile .m-rtx h3,
body.mode-mobile .post h3 { font-size: 13.5px; line-height: 1.6; }
body.mode-mobile .m-pc h3,
body.mode-mobile .prod h3,
body.mode-mobile .sa-rtx h3 { font-size: 12.5px; line-height: 1.55; }
body.mode-mobile .sa-head h1 { font-size: 24px; }
body.mode-mobile .sa-ftx h2 { font-size: 20px; }
body.mode-mobile .m-pprice b { font-size: 14px; }
body.has-app-tabbar .page-head__title,
body.has-app-tabbar .blog-page .page-head__title,
body.has-app-tabbar .article-card__title {
  font-size: 22px !important;
  line-height: 1.45;
}
body.has-app-tabbar .post-card__title,
body.has-app-tabbar .tut-card__title {
  font-size: 15px;
}

@media (max-width: 760px) {
  body[data-style] .a-today h2 { font-size: 24px; }
  body[data-style] .a-story h2,
  body[data-style] .m-lead h2 { font-size: 17px; line-height: 1.55; }
  body[data-style] .m-stitle,
  body[data-style] .sa-shelf .m-stitle { font-size: 17px; }
  body[data-style] .m-rtx h3,
  body[data-style] .post h3 { font-size: 13.5px; line-height: 1.6; }
  body[data-style] .m-pc h3,
  body[data-style] .prod h3,
  body[data-style] .sa-rtx h3 { font-size: 12.5px; line-height: 1.55; }
  body[data-style] .sa-head h1 { font-size: 24px; }
  body[data-style] .sa-ftx h2 { font-size: 20px; }
  body[data-style] .sec-title { font-size: 20px; }
}