:root{
  --bcm-line: var(--color-border, #D5AC7A);
  --bcm-bg: #FFFFFF;
  --bcm-text: var(--color-text, #63300F);
  --bcm-gold: var(--color-accent, #C08E47);
  --bcm-card-bg: var(--color-warm-grey-light, #EEECE8);
}

/*
 * The menu is a separate layer below the existing Bricks header.
 * Closed state cannot intercept clicks anywhere on the header/page.
 */
.bcm-menu{
  position:fixed;
  left:0;
  right:0;
  top:var(--bcm-top,100px);
  z-index:9000;
  background:var(--bcm-bg);
  color:var(--bcm-text);
  border-top:1px solid var(--bcm-line);
  border-bottom:1px solid var(--bcm-line);
  max-height:calc(100vh - var(--bcm-top,100px));
  overflow:auto;
  display:none;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .2s ease,transform .2s ease;
  box-shadow:0 12px 28px rgba(0,0,0,.05);
}

.bcm-menu.is-open{
  display:block;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
}

.bcm-inner{width:min(1400px,94vw);margin:0 auto}
.bcm-cards{display:flex;align-items:center;justify-content:center;gap:10px;padding:24px 0 28px;border-bottom:1px solid var(--bcm-line)}
.bcm-card{display:flex;flex-direction:column;gap:8px;width:136px;text-align:center;text-decoration:none!important;color:inherit!important}
.bcm-card-image{display:block;aspect-ratio:1.15/1;overflow:hidden;background:var(--bcm-card-bg)}
.bcm-card-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s ease}
.bcm-card:hover img{transform:scale(1.03)}
.bcm-card-label{font-size:15px;line-height:1.2}
.bcm-top-show-all{margin-left:14px;color:inherit!important;text-decoration:underline!important;white-space:nowrap}
.bcm-columns{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;border-left:1px solid var(--bcm-line)}
.bcm-column{padding:36px 28px 42px;border-right:1px solid var(--bcm-line);display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.bcm-column h3{font-size:23px;font-weight:400;margin:0 0 4px;color:inherit}
.bcm-column a{font-size:16px;line-height:1.35;text-decoration:none!important;color:inherit!important}
.bcm-column a:hover{text-decoration:underline!important;color:var(--bcm-gold)!important}
.bcm-primary-links a{font-size:22px;line-height:1.35;margin-bottom:2px}
.bcm-show-all{text-decoration:underline!important;margin-top:3px;color:var(--bcm-gold)!important}

/* Only the existing hamburger/button with this class is a trigger. */
.blomdahl-category-toggle{cursor:pointer}

@media(max-width:900px){
  .bcm-inner{width:100%}
  .bcm-cards{justify-content:flex-start;overflow-x:auto;padding:18px 16px 20px}
  .bcm-card{min-width:112px;width:112px}
  .bcm-top-show-all{padding-right:20px}
  .bcm-columns{grid-template-columns:1fr 1fr}
  .bcm-column{padding:26px 20px}
  .bcm-primary-links a{font-size:19px}
}

@media(max-width:560px){
  .bcm-columns{grid-template-columns:1fr}
  .bcm-column{border-bottom:1px solid var(--bcm-line)}
  .bcm-menu{top:var(--bcm-top,80px);max-height:calc(100vh - var(--bcm-top,80px))}
  .bcm-column h3{font-size:20px}
}

/* Animated hamburger -> X */
.bcm-burger{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:26px;
  height:22px;
  padding:0;
  background:none;
  border:0;
  cursor:pointer;
}
.bcm-burger-bar{
  display:block;
  width:100%;
  height:2px;
  background:var(--color-text, #63300F);
  border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
  transform-origin:center;
}
.bcm-burger.is-open .bcm-burger-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
.bcm-burger.is-open .bcm-burger-bar:nth-child(2){opacity:0}
.bcm-burger.is-open .bcm-burger-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}