a.lc-logo,
a.logo {
  text-decoration: none;
}

.lc-logo:has(.brand-words),
.logo:has(.brand-words),
.lc-logo .brand-lockup {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  width: max-content;
  background: none;
  -webkit-text-fill-color: initial;
}

.lc-logo .brand-words,
.logo .brand-words {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: none;
  color: #245f78;
  font-family: "Patrick Hand", cursive;
  font-size: 21px;
  font-weight: 400;
  line-height: .95;
  letter-spacing: .025em;
  -webkit-text-fill-color: initial;
}

.brand-words > span {
  background: linear-gradient(90deg, #ef756b, #b79536, #5d9a8b, #9b83a7);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.lc-logo:has(.brand-words) .brand-house,
.logo:has(.brand-words) .brand-house {
  top: .12em;
  flex: 0 0 auto;
  margin-left: 0;
  font-size: 25px;
}

.lc-logo.footer-logo:has(.brand-words),
.lc-logo:has(> .brand-lockup):has(> small) { flex-direction: column; gap: 4px; }

.lc-logo::after,
.lc-logo > span::after,
.footer-logo > span::after {
  display: none !important;
}

.brand-house {
  position: relative;
  top: 0;
  display: inline-block;
  width: 1.34em;
  height: 1.34em;
  margin-left: .3em;
  border: 0;
  background: url("/little-chapter-house-mark.png") center / contain no-repeat;
  font-size: .82em;
  vertical-align: .02em;
  opacity: .9;
  transition: opacity 150ms ease, transform 150ms ease;
}

.brand-house::before,
.brand-house::after { display: none; }

a.lc-logo:hover .brand-house,
a.logo:hover .brand-house {
  opacity: 1;
  transform: rotate(-2deg) scale(1.03);
}

a.lc-logo:focus-visible,
a.logo:focus-visible {
  border-radius: 6px;
  outline: 2px solid rgba(36, 95, 120, .55);
  outline-offset: 4px;
}

/* Shared illustrated Little Chapter House lockup. */
.lc-logo:has(.lc-logo-image) {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: clamp(118px, 16vw, 158px);
  min-width: 0;
  height: auto;
  gap: 3px;
  background: none !important;
  color: inherit;
  -webkit-text-fill-color: initial;
}

.lc-logo .lc-logo-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 54px;
  object-fit: contain;
  object-position: left center;
}

.lc-logo:has(.lc-logo-image) small {
  width: 100%;
  margin: 0;
  text-align: center;
}

@media (max-width: 520px) {
  .lc-logo:has(.lc-logo-image) { width: 122px; }
  .lc-logo .lc-logo-image { max-height: 44px; }
}

/* Shared storefront categories live inside the white logo header. */
.store-category-nav {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.store-category-nav::-webkit-scrollbar { display: none; }

.store-category-nav a {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 999px;
  color: #684b3c;
  font: 800 13px/1.1 "Nunito", sans-serif;
  letter-spacing: .01em;
  scroll-snap-align: center;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.store-category-nav a:any-link,
.store-category-nav a[aria-current="page"] {
  text-decoration: none !important;
}

.store-category-nav a:hover,
.store-category-nav a:focus-visible {
  background: #fff1dc;
  color: #a44b45;
}

.store-category-nav a:focus-visible {
  outline: 2px solid rgba(196, 83, 79, .45);
  outline-offset: 1px;
}

.store-category-nav a[aria-current="page"] {
  background: #f9e8d3;
  color: #a0443f;
}

@media (max-width: 600px) {
  .store-category-nav {
    justify-content: flex-start;
    gap: 2px;
    padding-inline: 0;
  }

  .store-category-nav a {
    padding: 7px 9px;
    font-size: 12px;
  }
}

/* Keep every storefront logo bar aligned and tall enough for the illustrated lockup. */
.shop-header {
  height: 72px;
  min-height: 72px;
  overflow: visible;
}

.shop-header .lc-logo:has(.lc-logo-image) {
  width: 108px;
  min-width: 108px;
  flex: 0 0 108px;
  align-items: center;
}

.shop-header .lc-logo .lc-logo-image {
  width: 100%;
  max-height: 56px;
  object-position: center;
}

.my-order-nav .my-chapters-icon,
.account-link .my-chapters-icon {
  display: block;
  width: 30px;
  height: 30px;
  object-fit: contain;
  opacity: .78;
  transition: transform 150ms ease;
}

.my-order-nav .my-chapters-icon { width: 25px; height: 25px; opacity: 1; }
.my-order-nav > span { white-space: nowrap; }
@media (max-width: 520px) {
  .shop-header { gap: 6px; padding-inline: 14px; }
  .shop-header .lc-logo:has(.lc-logo-image) { width: 78px; min-width: 78px; flex-basis: 78px; }
  .shop-header .store-category-nav { overflow: visible; justify-content: center; gap: 0; padding: 0; }
  .shop-header .store-category-nav a { padding: 12px 7px; font-size: 12px; }
  .shop-header .my-order-nav { flex: 0 0 auto; padding: 6px 0; gap: 3px; }
  .shop-header .my-order-nav > span { font-size: 11px; }
  .shop-header .my-chapters-icon { width: 19px; height: 19px; }
}

.my-order-nav:hover .my-chapters-icon,
.account-link:hover .my-chapters-icon { transform: rotate(-3deg) scale(1.04); }

@media (max-width: 520px) {
  .shop-header .lc-logo:has(.lc-logo-image) { width: 78px; min-width: 78px; flex-basis: 78px; }
  .shop-header .lc-logo .lc-logo-image { max-height: 52px; }
}

:is(.shop-header, .start-header, .flow-header, .checkout-header, .contact-header, .legal-header, .topbar:has(.lc-logo-image), .lc-nav, .site-header, .school-header) {
  height: 72px;
  min-height: 72px;
  overflow: visible;
}

:is(.lc-nav, .school-header) { padding-block: 8px; }

/* The illustrated lockup already contains “HOUSE”; keep header logos inside the bar. */
:is(.lc-nav, .site-header, .school-header) .lc-logo:has(.lc-logo-image) small {
  display: none;
}
@media (max-width: 360px) {
  .shop-header { display: grid; grid-template-columns: 1fr auto; height: auto; padding-block: 8px; }
  .shop-header .store-category-nav { grid-column: 1 / -1; grid-row: 2; }
  .shop-header .my-order-nav { grid-column: 2; grid-row: 1; }
}