/* Logo geometry and component colour roles; type sizes stay in typography.css. */
.wordmark {width:220px;max-width:100%;letter-spacing:normal}
.wordmark .brand-logo {display:block;width:100%;height:auto;aspect-ratio:5/1}
.wordmark small {margin-top:12px;color:var(--navy)}
.footer-top .wordmark {width:250px}
.footer-top .wordmark small {line-height:1.6;margin-top:16px}

.hero {background:var(--blue)}
.hero-bottom,.hero-subtitle {color:var(--muted)}
.primary:hover,.secondary:hover {background:var(--accent-hover);color:var(--on-accent)}
.card-season {background:var(--blue);color:var(--navy)}
.card-quick {background:var(--blue);color:var(--navy)}
.active-filters a {background:var(--blue);color:var(--navy)}
.filter-count,.mobile-cart-count {background:var(--lavender);color:var(--navy)}
.favorite[aria-pressed=true] svg {fill:var(--lavender);stroke:var(--navy)}
.store-symbol {background:var(--blue)}
.size-button:hover:not(.selected):not([aria-current=true]):not([aria-pressed=true]):not(:disabled) {
  background:var(--blue);
}
.pagination a:not([aria-current]):hover,.category-chips a:not(.active):hover {
  background:var(--blue);border-color:var(--navy);
}
input::placeholder,textarea::placeholder {color:var(--muted);opacity:1}

@media(max-width:760px) {
  .masthead .wordmark {width:clamp(120px,38vw,168px)}
  .masthead .wordmark small {margin-top:10px;letter-spacing:.25px;max-width:none;white-space:normal}
  .footer-top .wordmark {width:min(250px,100%)}
}