/* Partner products (b4m_merch): the product safety block, the licensed trust line, the Official merch dropdown and
   page heads. Brand tokens only. No "Official licensed" badge on photos or cards (owner, 10 Nov 2026); a whole display
   box says "Box of 24" there (owner, same day). */

/* Hummingbird's badge colours sit in a cascade layer with !important, so the box badge joins that layer (like NEW in
   the theme's _shell.scss). Navy chip: a fact about the item, not a promotion. */
@layer vendors {
  .product-flags .badge.b4m-box {
    background-color: var(--b4m-navy, #253b52) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px -6px rgb(37 59 82 / 0.7);
  }
}

.b4m-merch-safety {
  margin: 2rem 0 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--b4m-border, #d5e0e8);
  border-radius: 0.75rem;
  background: var(--b4m-surface, #fff);
  color: var(--b4m-text, #13202a);
  font-size: var(--b4m-fs-sm, 0.875rem);
  line-height: 1.6;
}

/* As a product page tab the panel is the card. */
.b4m-merch-safety--tab {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.b4m-merch-safety h2 {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
  font-family: var(--b4m-font-display, sans-serif);
  font-size: 1.15rem;
  font-weight: 700;
}

.b4m-merch-safety h2 .material-icons {
  color: var(--b4m-link, #253b52);
  font-size: 1.2rem;
}

.b4m-merch-safety__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem 2rem;
}

.b4m-merch-safety h3 {
  margin: 0 0 0.35rem;
  color: var(--b4m-muted, #5a6e7e);
  font-family: var(--b4m-font-display, sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.b4m-merch-safety address {
  margin: 0;
  font-style: normal;
}

.b4m-merch-safety a {
  color: var(--b4m-link, #253b52);
}

.b4m-merch-safety ul {
  margin: 0;
  padding-left: 1.1rem;
}

.b4m-merch-safety__media {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.b4m-merch-safety__media img {
  width: 10rem;
  height: auto;
  border: 1px solid var(--b4m-border, #d5e0e8);
  border-radius: 0.5rem;
}

/* The trust line where props say "Handcrafted & shipped from Europe" (theme b4m-pdp-trust.tpl): same place and
   shape, a verified mark in cyan instead of the magenta hand. */
.b4m-pdp__buy-trust .b4m-pdp__pill--ship.b4m-pdp__pill--licensed,
.b4m-pdp__pill--ship.b4m-pdp__pill--licensed {
  --b4m-pill-tone: var(--b4m-cyan, #04c9ff);
  --b4m-pill-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v5c0 4.6-3 8.4-7 10-4-1.6-7-5.4-7-10V6z'/%3E%3Cpath d='M8.6 12.2l2.4 2.4 4.5-4.8'/%3E%3C/svg%3E");
}

/* Quick specs: the brand links to its brand page; a plain underline in the spec list's own colour. */
.b4m-pdp__fact dd a.b4m-pdp__spec-link {
  color: var(--b4m-link);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--b4m-cyan) 60%, transparent);
  text-underline-offset: 0.2em;
}

.b4m-pdp__fact dd a.b4m-pdp__spec-link:hover,
.b4m-pdp__fact dd a.b4m-pdp__spec-link:focus-visible {
  color: var(--b4m-ink);
  text-decoration-color: var(--b4m-cyan);
}

/* ---- Official merch dropdown (mega.tpl) ----------------------------------------------------------------------
   The panel takes the whole dropdown: the theme's title, filter, "Most loved" column and footer around it step aside
   (only this menu item has one). Its height is fixed, so a search never shrinks it out from under the pointer. */
.b4m-catnav .submenu:has(.b4m-mm) {
  --b4m-mega-max: min(78vh, 40rem);
}

.b4m-mega:has(> .b4m-mega__panels > .b4m-mm) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
}

.b4m-mega:has(> .b4m-mega__panels > .b4m-mm) > :not(.b4m-mega__panels) {
  display: none;
}

.b4m-mega:has(> .b4m-mega__panels > .b4m-mm) > .b4m-mega__panels {
  grid-column: 1;
  max-height: none;
  overflow: visible;
  padding: 0;
}

.b4m-mm {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: calc(var(--b4m-mega-max) - 1.1rem);
  padding-bottom: 1rem;
  color: var(--b4m-text);
}

.b4m-mm [hidden] {
  display: none !important;
}

/* The theme's menu link look (dot, nudge on hover, one line) is for its own lists. Links here that have padding
   name it as a.class, so they beat this on hover too. */
.b4m-mega__panels .b4m-mm a,
.b4m-mega__panels .b4m-mm a:hover,
.b4m-mega__panels .b4m-mm a:focus-visible {
  padding: 0;
  overflow: visible;
  white-space: normal;
}

.b4m-mega__panels .b4m-mm a::before {
  content: none;
}

.b4m-mm__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  margin-bottom: 0.9rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgb(12 34 48 / 0.1);
}

.b4m-mega__panels .b4m-mm .b4m-mm__title {
  display: grid;
  color: var(--b4m-ink);
  font-family: var(--b4m-font-display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.05;
  text-decoration: none;
}

.b4m-mm__title small {
  color: var(--b4m-muted);
  font-family: var(--b4m-font-body, inherit);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.b4m-mm__search {
  flex: 1 1 18rem;
  max-width: 34rem;
}

.b4m-mm__search input {
  width: 100%;
  margin: 0;
  padding: 0.6rem 1rem 0.6rem 2.4rem;
  color: var(--b4m-ink);
  font-size: 0.95rem;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304c9ff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 0.85rem center / 1.05rem no-repeat;
  border: 1px solid color-mix(in srgb, var(--b4m-cyan) 40%, var(--b4m-border));
  border-radius: 999px;
  box-shadow: 0 2px 10px -5px rgb(12 34 48 / 0.3);
}

.b4m-mm__search input::placeholder {
  color: var(--b4m-muted);
}

.b4m-mm__search input:focus {
  border-color: var(--b4m-cyan);
  outline: none;
  box-shadow: 0 0 0 3px rgb(4 201 255 / 0.22);
}

.b4m-mm__sort {
  display: inline-flex;
  padding: 0.2rem;
  background: rgb(255 255 255 / 0.7);
  border: 1px solid var(--b4m-border);
  border-radius: 999px;
}

.b4m-mm__sort button {
  padding: 0.3rem 0.8rem;
  color: var(--b4m-muted);
  font-family: var(--b4m-font-display);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.2;
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.b4m-mm__sort button[aria-pressed="true"] {
  color: #fff;
  background: var(--b4m-navy);
}

.b4m-mega__panels .b4m-mm a.b4m-mm__shopall {
  margin-left: auto;
  padding: 0.45rem 0.95rem;
  color: var(--b4m-on-magenta);
  white-space: nowrap;
}

.b4m-mm__body {
  display: grid;
  grid-template-columns: minmax(12rem, 14.5rem) minmax(0, 1fr);
  gap: 0 1.5rem;
  min-height: 0;
}

.b4m-mm__niches {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-height: 0;
  overflow: auto;
  padding-right: 1rem;
  border-right: 1px solid var(--b4m-border);
  scrollbar-width: thin;
  scrollbar-color: rgb(4 201 255 / 0.4) transparent;
}

.b4m-mega__panels .b4m-mm a.b4m-mm__niche {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.32rem 0.7rem;
  color: var(--b4m-text);
  font-family: var(--b4m-font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  border-radius: 0.5rem;
  transition: background var(--b4m-ease), opacity var(--b4m-ease);
}

.b4m-mm__niche small {
  min-width: 1.9rem;
  padding: 0.05rem 0.4rem;
  color: var(--b4m-muted);
  font-family: var(--b4m-font-body, inherit);
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
  background: rgb(255 255 255 / 0.65);
  border-radius: 999px;
}

.b4m-mega__panels .b4m-mm .b4m-mm__niche:hover,
.b4m-mega__panels .b4m-mm .b4m-mm__niche:focus-visible,
.b4m-mega__panels .b4m-mm .b4m-mm__niche[aria-selected="true"] {
  color: var(--b4m-ink);
  background: rgb(4 201 255 / 0.13);
  outline: none;
  box-shadow: inset 3px 0 0 var(--b4m-cyan);
}

.b4m-mm__niche[aria-selected="true"] small {
  color: #fff;
  background: var(--b4m-navy);
}

.b4m-mega__panels .b4m-mm .b4m-mm__niche--types {
  margin-top: 0.45rem;
  padding-top: 0.55rem;
  border-top: 1px solid var(--b4m-border);
  border-radius: 0 0 0.5rem 0.5rem;
}

/* Brands sit right under Shop by type, in the same group below the line. */
.b4m-mega__panels .b4m-mm .b4m-mm__niche--more {
  border-radius: 0.5rem;
}

/* While searching: every niche's hits at once; the tabs say how many each has. */
.b4m-mega__panels .b4m-mm.is-searching .b4m-mm__niche {
  color: var(--b4m-text);
  background: none;
  box-shadow: none;
}

.b4m-mm.is-searching .b4m-mm__pane-title span {
  display: none;
}

.b4m-mm.is-searching .b4m-mm__niche small {
  color: #fff;
  background: var(--b4m-cyan);
}

.b4m-mm.is-searching .b4m-mm__niche.is-empty {
  opacity: 0.4;
}

.b4m-mm.is-searching .b4m-mm__niche.is-empty small {
  color: var(--b4m-muted);
  background: rgb(255 255 255 / 0.65);
}

/* The list fades out at the bottom edge: there is more below. */
.b4m-mm__panes {
  min-height: 0;
  overflow: auto;
  padding-right: 0.5rem;
  padding-bottom: 1.5rem;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.25rem), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 2.25rem), transparent);
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgb(4 201 255 / 0.55) transparent;
}

/* The lists load when the dropdown is first wanted: grey bars in their place for that moment. */
.b4m-mm__skeleton {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.75rem 1rem;
  padding: 2.2rem 0.55rem 0;
}

.b4m-mm__skeleton span {
  height: 0.85rem;
  background: linear-gradient(90deg, rgb(12 34 48 / 0.06), rgb(12 34 48 / 0.13), rgb(12 34 48 / 0.06));
  background-size: 200% 100%;
  border-radius: 0.3rem;
  animation: b4m-mm-shine 1.2s linear infinite;
}

.b4m-mm__skeleton span:nth-child(3n) {
  width: 70%;
}

@keyframes b4m-mm-shine {
  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .b4m-mm__skeleton span {
    animation: none;
  }
}

.b4m-mm__pane + .b4m-mm__pane {
  margin-top: 1.1rem;
}

.b4m-mm__pane-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin: 0 0 0.45rem;
}

.b4m-mm__pane-title {
  margin: 0;
  color: #0b7fa3;
  font-family: var(--b4m-font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.b4m-mm__pane-title span {
  margin-left: 0.4rem;
  color: var(--b4m-muted);
  letter-spacing: 0.06em;
  text-transform: none;
}

.b4m-mega__panels .b4m-mm .b4m-mm__pane-all {
  color: #0b7fa3;
  font-family: var(--b4m-font-display);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.b4m-mega__panels .b4m-mm .b4m-mm__pane-all:hover,
.b4m-mega__panels .b4m-mm .b4m-mm__pane-all:focus-visible {
  color: var(--b4m-ink);
  text-decoration: underline;
}

.b4m-mega__panels .b4m-mm .b4m-mm__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.05rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.b4m-mega__panels .b4m-mm .b4m-mm__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.32rem 0.55rem;
  color: var(--b4m-text);
  font-size: 0.92rem;
  line-height: 1.3;
  text-decoration: none;
  border-radius: 0.4rem;
  transition: background var(--b4m-ease), color var(--b4m-ease);
}

.b4m-mm__list a span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.b4m-mm__list a small {
  flex: none;
  color: color-mix(in srgb, var(--b4m-muted) 80%, transparent);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.b4m-mega__panels .b4m-mm .b4m-mm__list a:hover,
.b4m-mega__panels .b4m-mm .b4m-mm__list a:focus-visible {
  color: var(--b4m-ink);
  background: rgb(4 201 255 / 0.13);
  outline: none;
}

.b4m-mm__list a:hover span,
.b4m-mm__list a:focus-visible span {
  text-decoration: underline;
  text-decoration-color: rgb(4 201 255 / 0.8);
  text-underline-offset: 0.2em;
}

.b4m-mm__none {
  padding: 1.5rem 0.5rem;
  color: var(--b4m-muted);
}

.b4m-mm__none p {
  margin: 0 0 0.5rem;
}

.b4m-mm__none b {
  color: var(--b4m-ink);
}

.b4m-mega__panels .b4m-mm .b4m-mm__none a {
  color: #0b7fa3;
  font-family: var(--b4m-font-display);
  font-weight: 700;
}

/* ---- Official merch page head (head.tpl) ---------------------------------------------------------------------
   On the dark shop band, short: title + counts + finder, a two-line intro, the niches, one row of what's next. */
.b4m-shop-head__inner:has(> .b4m-mh) {
  padding-block: 0.25rem 1.1rem;
}

.b4m-mh {
  display: grid;
  gap: 0.85rem;
  min-width: 0;
  color: var(--b4m-on-dark);
}

.b4m-mh [hidden] {
  display: none !important;
}

.b4m-mh__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

.b4m-mh__title {
  margin: 0;
  color: var(--b4m-on-dark);
  font-family: var(--b4m-font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.05;
}

.b4m-mh__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.9rem;
  margin: 0.4rem 0 0;
  color: color-mix(in srgb, var(--b4m-on-dark) 72%, transparent);
  font-size: 0.85rem;
}

.b4m-mh__meta > span + span::before {
  content: "·";
  margin-right: 0.9rem;
  opacity: 0.5;
}

.b4m-mh__licensed {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: color-mix(in srgb, var(--b4m-cyan) 75%, #fff);
  font-family: var(--b4m-font-display);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.b4m-mh__find {
  position: relative;
  flex: 0 1 26rem;
  min-width: min(100%, 17rem);
  margin: 0;
}

.b4m-mh__find input[type="search"] {
  width: 100%;
  margin: 0;
  padding: 0.62rem 1rem 0.62rem 2.5rem;
  color: var(--b4m-on-dark);
  font-size: 0.95rem;
  background: rgb(255 255 255 / 0.08) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304c9ff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 0.9rem center / 1.05rem no-repeat;
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 999px;
  transition: border-color var(--b4m-ease), background-color var(--b4m-ease);
}

/* Chrome's own clear button is dark on a dark field: a cyan cross instead (also in the "All N" filter). */
.b4m-mh__find input[type="search"]::-webkit-search-cancel-button,
.b4m-mh__all-filter::-webkit-search-cancel-button {
  width: 0.9rem;
  height: 0.9rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304c9ff' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.b4m-mh__find input[type="search"]::placeholder {
  color: color-mix(in srgb, var(--b4m-on-dark) 55%, transparent);
}

.b4m-mh__find input[type="search"]:focus {
  background-color: rgb(255 255 255 / 0.13);
  border-color: var(--b4m-cyan);
  outline: none;
  box-shadow: 0 0 0 3px rgb(4 201 255 / 0.25);
}

.b4m-mh__suggest {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  left: 0;
  z-index: 40;
  max-height: 24rem;
  margin: 0;
  padding: 0.35rem;
  overflow: auto;
  color: var(--b4m-text);
  list-style: none;
  background: #fff;
  border-radius: 0.8rem;
  box-shadow: 0 22px 44px -16px rgb(1 17 19 / 0.55), 0 0 0 1px rgb(12 34 48 / 0.08);
}

.b4m-mh__suggest a,
.b4m-mh__suggest button {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.5rem 0.7rem;
  color: var(--b4m-ink);
  font: inherit;
  font-weight: 600;
  text-align: left;
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: 0.5rem;
  cursor: pointer;
}

.b4m-mh__suggest small {
  flex: none;
  color: var(--b4m-muted);
  font-size: 0.75rem;
  font-weight: 500;
}

.b4m-mh__suggest-all {
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--b4m-border);
}

.b4m-mh__suggest-all button {
  color: #0b7fa3;
  font-family: var(--b4m-font-display);
  font-weight: 700;
}

.b4m-mh__suggest [aria-selected="true"] > a,
.b4m-mh__suggest [aria-selected="true"] > button,
.b4m-mh__suggest a:hover,
.b4m-mh__suggest button:hover {
  background: rgb(4 201 255 / 0.13);
}

.b4m-mh__intro {
  max-width: 78rem;
}

.b4m-mh__text,
.b4m-mh__text p {
  margin: 0;
  color: color-mix(in srgb, var(--b4m-on-dark) 80%, transparent);
  font-size: 0.9rem;
  line-height: 1.5;
}

.b4m-mh__text p + p {
  margin-top: 0.35rem;
}

.b4m-mh__text.is-clamped {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.b4m-mh__more {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.b4m-mh__more:checked ~ .b4m-mh__text.is-clamped {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.b4m-mh__more-btn {
  margin-top: 0.15rem;
  color: color-mix(in srgb, var(--b4m-cyan) 75%, #fff);
  font-family: var(--b4m-font-display);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}

.b4m-mh__more:focus-visible ~ .b4m-mh__more-btn {
  outline: 2px solid var(--b4m-cyan);
  outline-offset: 2px;
}

.b4m-mh__more-close,
.b4m-mh__more:checked ~ .b4m-mh__more-btn .b4m-mh__more-open {
  display: none;
}

.b4m-mh__more:checked ~ .b4m-mh__more-btn .b4m-mh__more-close {
  display: inline;
}

.b4m-mh__nav {
  min-width: 0;
}

/* Official merch: one row of niche cards, a product photo each. A card grows to 12rem at most: with 1fr a shop that
   has one niche (the live shop on its first day, 12 Nov 2026: Star Wars only) drew one photo as wide as the page. Many
   cards still share the row evenly. */
.b4m-mh__niches {
  display: grid;
  grid-auto-columns: minmax(6.6rem, 12rem);
  justify-content: start;
  grid-auto-flow: column;
  gap: 0.55rem;
  margin: 0;
  padding: 0.15rem 0.1rem 0.35rem;
  overflow-x: auto;
  list-style: none;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.b4m-mh__niches li {
  min-width: 0;
  scroll-snap-align: start;
}

.b4m-mh__niche {
  display: grid;
  gap: 0.15rem;
  height: 100%;
  padding: 0.4rem 0.4rem 0.5rem;
  color: var(--b4m-on-dark);
  text-align: center;
  text-decoration: none;
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 0.8rem;
  transition: transform var(--b4m-ease), border-color var(--b4m-ease), background var(--b4m-ease);
}

.b4m-mh__niche-img {
  display: block;
  aspect-ratio: 4 / 3;
  margin-bottom: 0.3rem;
  overflow: hidden;
  background: #fff;
  border-radius: 0.55rem;
}

.b4m-mh__niche-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.b4m-mh__niche-name {
  font-family: var(--b4m-font-display);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.1;
}

.b4m-mh__niche small {
  color: color-mix(in srgb, var(--b4m-on-dark) 58%, transparent);
  font-size: 0.72rem;
}

.b4m-mh__niche:hover,
.b4m-mh__niche:focus-visible {
  color: #fff;
  background: rgb(255 255 255 / 0.09);
  border-color: color-mix(in srgb, var(--b4m-cyan) 65%, transparent);
  outline: none;
  transform: translateY(-2px);
}

.b4m-mh__niche:hover img,
.b4m-mh__niche:focus-visible img {
  transform: scale(1.06);
}

/* Every other merch page: the niches as one row of tabs. */
.b4m-mh__pills {
  display: flex;
  gap: 0.4rem;
  margin: 0;
  padding: 0.1rem 0.1rem 0.2rem;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.b4m-mh__pill {
  display: inline-flex;
  align-items: center;
  padding: 0.36rem 0.9rem;
  color: color-mix(in srgb, var(--b4m-on-dark) 88%, transparent);
  font-family: var(--b4m-font-display);
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 999px;
  transition: border-color var(--b4m-ease), color var(--b4m-ease), background var(--b4m-ease);
}

.b4m-mh__pill:hover,
.b4m-mh__pill:focus-visible {
  color: #fff;
  border-color: color-mix(in srgb, var(--b4m-cyan) 70%, transparent);
  outline: none;
}

.b4m-mh__pill[aria-current] {
  color: var(--b4m-ink);
  background: var(--b4m-cyan);
  border-color: var(--b4m-cyan);
}

.b4m-mh__label {
  margin: 0;
  color: color-mix(in srgb, var(--b4m-cyan) 65%, #fff);
  font-family: var(--b4m-font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* One row of photo cards (franchises, types, a franchise's sections), smaller than the niche cards, sideways with
   arrows. Cards grow a little on wide screens and stop there, so the head stays short. */
.b4m-mh__rails {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
}

.b4m-mh__rails-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 2rem;
}

.b4m-mh__switch {
  display: flex;
  gap: 1.25rem;
}

.b4m-mh__switch button {
  padding: 0.2rem 0;
  color: color-mix(in srgb, var(--b4m-on-dark) 62%, transparent);
  font-family: var(--b4m-font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.b4m-mh__switch button:hover,
.b4m-mh__switch button:focus-visible {
  color: #fff;
  outline: none;
}

.b4m-mh__switch button[aria-selected="true"] {
  color: color-mix(in srgb, var(--b4m-cyan) 70%, #fff);
  border-bottom-color: var(--b4m-cyan);
}

.b4m-mh__arrows {
  display: flex;
  gap: 0.35rem;
}

.b4m-mh__arrow {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  color: var(--b4m-on-dark);
  background: rgb(255 255 255 / 0.07);
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--b4m-ease), border-color var(--b4m-ease), opacity var(--b4m-ease);
}

.b4m-mh__arrow:hover {
  color: #fff;
  background: rgb(4 201 255 / 0.18);
  border-color: var(--b4m-cyan);
}

.b4m-mh__arrow:disabled {
  opacity: 0.3;
  cursor: default;
  background: none;
  border-color: rgb(255 255 255 / 0.18);
}

.b4m-mh__cards {
  --b4m-fade-l: 0rem;
  --b4m-fade-r: 0rem;
  display: grid;
  grid-auto-columns: clamp(6.25rem, 7vw, 7.25rem);
  grid-auto-flow: column;
  gap: 0.55rem;
  margin: 0;
  padding: 0.15rem 0.1rem 0.3rem;
  overflow-x: auto;
  list-style: none;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--b4m-fade-l), #000 calc(100% - var(--b4m-fade-r)), transparent);
  mask-image: linear-gradient(to right, transparent, #000 var(--b4m-fade-l), #000 calc(100% - var(--b4m-fade-r)), transparent);
}

.b4m-mh__cards::-webkit-scrollbar {
  display: none;
}

.b4m-mh__cards.is-more-start {
  --b4m-fade-l: 2.5rem;
}

.b4m-mh__cards.is-more-end {
  --b4m-fade-r: 2.5rem;
}

.b4m-mh__cards li {
  min-width: 0;
  scroll-snap-align: start;
}

.b4m-mh__card {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  height: 100%;
  padding: 0.3rem 0.3rem 0.45rem;
  color: var(--b4m-on-dark);
  text-align: center;
  text-decoration: none;
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 0.7rem;
  transition: transform var(--b4m-ease), border-color var(--b4m-ease), background var(--b4m-ease);
}

.b4m-mh__card-img {
  position: relative;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: #fff;
  border-radius: 0.5rem;
}

.b4m-mh__card-img img {
  width: 100%;
  height: 100%;
  padding: 0.2rem;
  object-fit: contain;
  transition: transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.b4m-mh__card-img small {
  position: absolute;
  right: 0.25rem;
  bottom: 0.25rem;
  padding: 0.05rem 0.4rem;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  background: rgb(1 17 19 / 0.72);
  border-radius: 999px;
}

.b4m-mh__card-name {
  display: -webkit-box;
  overflow: hidden;
  font-family: var(--b4m-font-display);
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.12;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

.b4m-mh__card:hover,
.b4m-mh__card:focus-visible {
  color: #fff;
  background: rgb(255 255 255 / 0.09);
  border-color: color-mix(in srgb, var(--b4m-cyan) 65%, transparent);
  outline: none;
  transform: translateY(-2px);
}

.b4m-mh__card:hover img,
.b4m-mh__card:focus-visible img {
  transform: scale(1.06);
}

.b4m-mh__card[aria-current] {
  color: #fff;
  background: rgb(4 201 255 / 0.16);
  border-color: var(--b4m-cyan);
  box-shadow: inset 0 0 0 1px var(--b4m-cyan);
}

/* Touch screens swipe; the arrows are for a mouse. */
@media (hover: none) {
  .b4m-mh__arrows {
    display: none;
  }
}

/* A niche page: every franchise behind one line, A–Z, with its own filter. */
.b4m-mh__all summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: color-mix(in srgb, var(--b4m-cyan) 75%, #fff);
  font-family: var(--b4m-font-display);
  font-size: 0.92rem;
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.b4m-mh__all summary::-webkit-details-marker {
  display: none;
}

.b4m-mh__all summary::after {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  margin-top: -0.2rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--b4m-ease);
}

.b4m-mh__all[open] summary::after {
  margin-top: 0.15rem;
  transform: rotate(-135deg);
}

.b4m-mh__all summary:hover,
.b4m-mh__all summary:focus-visible {
  color: #fff;
  outline: none;
}

.b4m-mh__all-box {
  margin-top: 0.6rem;
  padding: 0.85rem 1rem 0.6rem;
  background: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 0.8rem;
}

.b4m-mh__all-filter {
  width: min(100%, 20rem);
  margin: 0 0 0.6rem;
  padding: 0.45rem 0.9rem;
  color: var(--b4m-on-dark);
  font-size: 0.9rem;
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.2);
  border-radius: 999px;
}

.b4m-mh__all-filter:focus {
  border-color: var(--b4m-cyan);
  outline: none;
}

.b4m-mh__all-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0 1.25rem;
  max-height: 19rem;
  margin: 0;
  padding: 0 0.25rem 0 0;
  overflow: auto;
  list-style: none;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgb(4 201 255 / 0.55) transparent;
}

.b4m-mh__all-list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.28rem 0.4rem;
  color: color-mix(in srgb, var(--b4m-on-dark) 88%, transparent);
  font-size: 0.88rem;
  text-decoration: none;
  border-radius: 0.35rem;
}

.b4m-mh__all-list a span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.b4m-mh__all-list a small {
  flex: none;
  color: color-mix(in srgb, var(--b4m-on-dark) 50%, transparent);
  font-size: 0.72rem;
}

.b4m-mh__all-list a:hover,
.b4m-mh__all-list a:focus-visible {
  color: #fff;
  background: rgb(4 201 255 / 0.14);
  outline: none;
}

.b4m-mh__all-none {
  margin: 0.25rem 0;
  color: color-mix(in srgb, var(--b4m-on-dark) 65%, transparent);
  font-size: 0.88rem;
}

@media (max-width: 767.98px) {
  .b4m-mh {
    gap: 0.7rem;
  }

  .b4m-mh__top {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.65rem;
  }

  .b4m-mh__find {
    width: 100%;
    min-width: 0;
  }

  /* Counts wrap here: no dot left at the start of a line. */
  .b4m-mh__meta > span + span::before {
    content: none;
  }

  .b4m-mh__cards {
    grid-auto-columns: 6rem;
  }

  .b4m-mh__niches {
    grid-auto-columns: 6.4rem;
  }

  .b4m-mh__niche-name {
    font-size: 0.88rem;
  }

  .b4m-mh__pill {
    min-height: 2.4rem;
  }
}

/* ---- Official merch left column (sidebar.tpl) ------------------------------------------------------------------
   The shop tree's look (.b4m-cat-tree), merch only: a way up, then blocks with counts; long lists scroll. */
/* The column's width, whatever the names in it (long names had stretched it past the column). */
#b4m-cats-home:has(> .b4m-merch-side),
.b4m-merch-side {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.b4m-merch-side nav,
.b4m-merch-side .b4m-side__block,
.b4m-merch-side .b4m-side__filter,
.b4m-merch-side .category-tree__item,
.b4m-merch-side .category-tree__item-header {
  min-width: 0;
  max-width: 100%;
}

.b4m-merch-side .left-block__title-link {
  color: var(--b4m-ink);
}

.b4m-side__up {
  display: inline-flex;
  gap: 0.35rem;
  margin: 0 0 0.35rem;
  color: var(--b4m-link);
  font-family: var(--b4m-font-display);
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}

.b4m-side__up:hover,
.b4m-side__up:focus-visible {
  color: var(--b4m-ink);
  text-decoration: underline;
}

.b4m-side__block + .b4m-side__block {
  margin-top: 0.75rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--b4m-border);
}

.b4m-side__title {
  margin: 0 0 0.3rem;
  color: #0b7fa3;
  font-family: var(--b4m-font-display);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.b4m-side__title small {
  margin-left: 0.25rem;
  color: var(--b4m-muted);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

.b4m-merch-side .b4m-side__filter {
  width: 100%;
  min-height: 2.25rem;
  margin: 0.15rem 0 0.35rem;
}

.b4m-merch-side .b4m-side__list {
  max-height: none;
}

.b4m-merch-side .b4m-side__list.is-long {
  max-height: 18rem;
  overflow: auto;
  padding-right: 0.35rem;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgb(4 201 255 / 0.5) transparent;
}

/* Denser rows than the shop tree's: a niche lists up to 177 franchises. */
.b4m-cat-tree.b4m-merch-side .category-tree__item-header {
  min-height: 0;
  padding: 0;
}

.b4m-cat-tree.b4m-merch-side .category-tree__item-header .b4m-side__link {
  display: flex;
  flex: 1 1 auto;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  min-width: 0;
  padding: 0.24rem 0.2rem 0.24rem 0;
  line-height: 1.3;
}

.b4m-side__link span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.b4m-side__link small {
  flex: none;
  color: var(--b4m-muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.b4m-cat-tree.b4m-merch-side .is-current > .category-tree__item-header .b4m-side__link {
  color: var(--b4m-navy);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--b4m-cyan);
  padding-left: 0.5rem;
}

.b4m-side__list [hidden] {
  display: none !important;
}

/* A long filter list on a merch page (enhanceFacets in mega.js): a find box over a list that scrolls. */
.b4m-facet-find {
  width: 100%;
  min-height: 2.25rem;
  margin: 0.35rem 0 0.4rem;
}

#search-filters ul.b4m-facet-long {
  max-height: 16rem;
  overflow: auto;
  padding-right: 0.35rem;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgb(4 201 255 / 0.5) transparent;
}

#search-filters ul.b4m-facet-long > li[hidden] {
  display: none !important;
}