/* Clasitrónicos Revamp 3B — refreshed production branding.
   Current production pages already load this stylesheet, so this update only
   swaps the displayed artwork and sizing. Index/homepage remains untouched. */

/* Shared brand anchors */
html body a.clasi-brand-novo,
html body .menu a.logo {
  display: block !important;
  position: relative;
  line-height: 0;
  text-decoration: none;
  max-width: 100%;
  min-width: 0;
}

/* Hide the embedded fallback IMG but keep it in the markup as a fallback if CSS fails. */
html body a.clasi-brand-novo > img,
html body .menu a.logo > img {
  display: none !important;
}

/* The visible logo is rendered by CSS so desktop/tablet can use the long logo
   and mobile can use the tall logo without rewriting all existing templates. */
html body a.clasi-brand-novo::before,
html body .menu a.logo::before {
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: 2048 / 640;
  background-image: url('/assets/logonovo.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

a.clasi-brand-novo {
  width: 300px;
}

a.clasi-brand-novo:focus-visible,
.menu a.logo:focus-visible {
  outline: 3px solid #336688;
  outline-offset: 4px;
}

.header-inner > a.brand.clasi-brand-novo,
.rf-header-inner > a.rf-brand.clasi-brand-novo,
.form-header-original .wordmark-original.clasi-brand-novo {
  flex: 0 1 272px;
  width: 272px;
}

.header-main > a.brand.clasi-brand-novo {
  width: 300px;
  flex: 0 1 300px;
}

/* Preserve established detail/Premium layout columns. */
a.detail-logo.clasi-brand-novo,
a.premium-brand.clasi-brand-novo {
  width: 100%;
}

a.premium-footer-brand.clasi-brand-novo {
  width: 170px;
}

.detail-header-inner,
.premium-header-inner {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Existing category header: remove any CSS-generated duplicate icon strip. */
html body .menu a.logo::after,
html body .site-header a.logo::after {
  content: none !important;
  display: none !important;
}
html body .menu a.logo {
  width: 176px;
  height: auto !important;
}
html body .menu a.logo > img[src*="icon-strip"],
html body .menu a.logo > img[src*="icon-bar"] {
  display: none !important;
}

/* Modern category header wrapper (if present). */
.site-header-inner {
  padding-top: 7px;
  padding-bottom: 7px;
}

/* Phone/mobile: switch to the taller stacked logo. */
@media (max-width: 699px) {
  html body a.clasi-brand-novo::before,
  html body .menu a.logo::before {
    aspect-ratio: 2048 / 1189;
    background-image: url('/assets/logonovo-tall.png');
  }

  a.clasi-brand-novo {
    width: 188px;
    max-width: 62vw;
  }

  .header-inner > a.brand.clasi-brand-novo,
  .rf-header-inner > a.rf-brand.clasi-brand-novo,
  .form-header-original .wordmark-original.clasi-brand-novo {
    flex-basis: 188px;
    width: 188px;
    max-width: 62vw;
  }

  .header-main > a.brand.clasi-brand-novo {
    flex: 0 1 188px;
    width: 188px;
    max-width: 62vw;
  }

  a.detail-logo.clasi-brand-novo {
    width: 170px;
  }

  a.premium-footer-brand.clasi-brand-novo {
    width: 146px;
  }

  html body .menu a.logo {
    width: 132px;
    margin-inline: auto;
  }
}